/* ============ 设计基调：亮色 / 扁平 / 单色 + 对比 hover 色块 ============ */
:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f6;
  --hover: #efefed;
  --hover-strong: #e9e9e7;
  --panel: #ffffff;
  --line: #e4e4e2;
  --line-soft: #f0f0ee;
  --text: #111110;
  --text-2: #5c5c5a;
  --muted: #979794;
  --accent: #111110;
  --accent-hover: #2f2f2e;
  --green: #1a7f4b;
  --green-soft: #e9f3ed;
  --amber: #a16207;
  --amber-soft: #faf3e2;
  --red: #b42318;
  --red-soft: #fbebe9;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-width: 320px; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .6; transform: none !important; }
button:focus-visible, a:focus-visible { outline: 2px solid rgba(17,17,16,.55); outline-offset: 2px; }
::selection { background: #e2e2df; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d4d1; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }
svg { display: block; flex: none; }

/* ============ 布局框架 ============ */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; display: flex; flex-direction: column; background: var(--bg-soft); border-right: 1px solid var(--line-soft); padding: 18px 14px 16px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.brand-mark svg { width: 17px; height: 17px; }
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.sidebar nav { display: grid; gap: 2px; margin-top: 26px; }
.nav-item { border: 0; background: transparent; color: var(--text-2); height: 40px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; border-radius: 8px; padding: 0 10px; text-align: left; font-size: 14px; transition: background .15s, color .15s; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--hover-strong); color: var(--text); font-weight: 550; }
.nav-item b { font-size: 11px; font-weight: 550; color: var(--text-2); background: var(--hover-strong); padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.system-state { display: flex; align-items: center; gap: 8px; color: var(--text-2); margin-bottom: 8px; font-size: 12.5px; }
.system-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
#versionText { color: var(--muted); }

main { grid-column: 2; min-width: 0; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--line-soft); background: var(--bg); position: sticky; top: 0; z-index: 15; }
h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.3px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

/* ============ 按钮 ============ */
.button, .icon-btn { border: 1px solid transparent; border-radius: 8px; transition: background .15s, color .15s, border-color .15s; }
.button:active, .icon-btn:active { transform: translateY(1px); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 550; }
.button svg { width: 15px; height: 15px; }
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { background: var(--bg); border-color: #d7d7d4; color: var(--text); }
.button.secondary:hover { background: var(--hover); border-color: #c9c9c6; }
.button.danger { background: var(--red); color: #fff; }
.button.danger:hover { background: #9c1d13; }
.button.small { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg); border-color: var(--line); color: var(--text-2); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: #d0d0cd; }

.content { padding: 28px clamp(20px, 4vw, 56px) 64px; max-width: 1440px; margin: 0 auto; }

/* ============ 统计卡片 ============ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.stat-card > div:last-child { min-width: 0; }
.stat-card span { display: block; color: var(--text-2); font-size: 12.5px; margin-bottom: 4px; }
.stat-card strong { font-size: 24px; font-weight: 650; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-icon.neutral { background: #f1f1ef; color: #4a4a48; }
.stat-icon.green { background: var(--green-soft); color: var(--green); }
.stat-icon.amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.red { background: var(--red-soft); color: var(--red); }

/* ============ 面板 ============ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-head { min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 15px; font-weight: 650; margin: 0 0 3px; }
.panel-head p { font-size: 12px; color: var(--muted); margin: 0; }
h2, h3, p { margin-top: 0; }
.filters { display: flex; gap: 8px; }
.search { min-width: 220px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted); background: #f4f4f3; border: 1px solid transparent; border-radius: 8px; transition: background .15s; }
.search svg { width: 15px; height: 15px; }
.search:focus-within { background: #ececea; }
.search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
select, input { outline: none; }
.filters select { height: 36px; padding: 0 32px 0 12px; color: var(--text-2); background: var(--bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23979794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 10px center; appearance: none; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.filters select:hover { background-color: var(--hover); }

/* ============ 仓库列表 ============ */
.repo-list { display: grid; }
.repo-row { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(190px, .9fr) 120px 135px auto; align-items: center; gap: 16px; min-height: 100px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.repo-row:last-child { border-bottom: 0; }
.repo-row:hover { background: var(--hover); }
.repo-main { min-width: 0; }
.repo-title-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.repo-title-line h3 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #b5b5b2; }
.status-dot.success { background: var(--green); }
.status-dot.failed { background: var(--red); }
.status-dot.running { background: #d97706; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.repo-url { display: block; margin: 8px 0 9px; color: var(--muted); font: 11px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { padding: 2px 9px; color: var(--text-2); background: #f1f1ef; border-radius: 999px; font-size: 11px; font-weight: 500; }
.tag.mirror { color: var(--text); background: #e9e9e7; }
.cell-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.target-stack { min-width: 0; display: grid; gap: 6px; }
.target-line { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; }
.target-line i { width: 5px; height: 5px; background: #979794; border-radius: 50%; flex: 0 0 5px; }
.target-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-targets { color: var(--muted); font-size: 11.5px; }
.schedule-cell strong, .time-cell strong { display: block; color: var(--text); font-size: 12.5px; font-weight: 550; }
.schedule-cell small, .time-cell small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.repo-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 172px; }
.action-btn { height: 30px; min-width: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-2); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 550; transition: background .12s, color .12s, border-color .12s; }
.action-btn svg { width: 14px; height: 14px; }
.action-btn:hover { background: var(--hover); color: var(--text); border-color: #cfcfcc; }
.action-btn.sync { background: var(--accent); border-color: var(--accent); color: #fff; }
.action-btn.sync:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.action-btn.cancel { color: var(--red); }
.action-btn.cancel:hover { background: var(--red-soft); border-color: #f0cdc8; color: var(--red); }
.action-btn.danger:hover { background: var(--red-soft); border-color: #f0cdc8; color: var(--red); }

.empty-state { text-align: center; padding: 64px 20px; }
.empty-orbit { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #7c7c7a; background: #f1f1ef; }
.empty-orbit svg { width: 24px; height: 24px; }
.empty-state h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.empty-state p { color: var(--muted); font-size: 13px; margin: 0 0 22px; }

/* ============ 运行记录 ============ */
.runs-list { display: grid; }
.run-row { display: grid; grid-template-columns: minmax(180px, 1fr) 118px 132px 132px 32px; gap: 16px; align-items: center; min-height: 72px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.run-row:last-child { border-bottom: 0; }
.run-row:hover { background: var(--hover); }
.run-repo { min-width: 0; }
.run-repo strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-repo small { color: var(--muted); font: 11px var(--mono); }
.run-cell { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.run-cell small { color: var(--muted); font-size: 11.5px; }
.run-arrow { color: var(--muted); display: grid; place-items: center; }
.run-arrow svg { width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 550; line-height: 1.4; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.success { color: var(--green); background: var(--green-soft); }
.badge.failed { color: var(--red); background: var(--red-soft); }
.badge.partial, .badge.running, .badge.queued { color: var(--amber); background: var(--amber-soft); }
.badge.running::before { animation: pulse 1.4s ease-in-out infinite; }
.badge.canceled { color: #6b6b68; background: #f1f1ef; }

/* ============ 弹窗 ============ */
.modal, .drawer { position: fixed; inset: 0; z-index: 100; }
.modal { display: grid; place-items: center; padding: 20px; }
.modal-backdrop, .drawer-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 16, .45); }
.modal-card { position: relative; width: min(880px, 100%); max-height: calc(100vh - 40px); background: var(--bg); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.14); overflow: hidden; }
.modal-head, .drawer-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line-soft); }
.modal-head h2, .drawer-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.editor-modal form { display: flex; flex-direction: column; max-height: calc(100vh - 104px); }
.form-scroll { overflow-y: auto; padding: 4px 26px 26px; }
.form-section { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.section-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.section-title h3 { font-size: 14px; font-weight: 650; margin: 0 0 3px; }
.section-title p { margin: 0; color: var(--muted); font-size: 12px; }
.row-title .button { margin-left: auto; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field.full, .full { grid-column: 1 / -1; }
.field > span { display: block; color: var(--text-2); font-size: 12.5px; font-weight: 500; margin-bottom: 7px; }
.field > span b { color: var(--red); font-weight: 600; }
.field input, .field select, .joined { width: 100%; min-height: 40px; color: var(--text); background: var(--bg); border: 1px solid #d7d7d4; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.field input { padding: 0 12px; font-size: 13.5px; }
.field select { padding: 0 10px; font-size: 13.5px; }
.field input::placeholder { color: #a8a8a5; }
.field input:hover, .field select:hover { border-color: #c6c6c3; }
.field input:focus, .field select:focus, .joined:focus-within { border-color: #9c9c99; box-shadow: 0 0 0 3px rgba(17,17,16,.05); }
.destination-list { display: grid; gap: 10px; }
.destination-row { display: grid; grid-template-columns: minmax(120px,.55fr) minmax(240px,1.45fr) auto auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafaf9; }
.destination-row .field > span { font-size: 11.5px; margin-bottom: 6px; }
.destination-options { min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 4px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.destination-options label, .checkbox-line label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.destination-options input, .checkbox-line input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.remove-target { width: 34px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; }
.remove-target svg { width: 15px; height: 15px; }
.remove-target:hover { background: var(--red-soft); border-color: #f0cdc8; color: var(--red); }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice-card { position: relative; min-height: 84px; display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; transition: background .12s, border-color .12s; }
.choice-card:hover { background: #fafaf9; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card i { position: relative; width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; border: 1.5px solid #c6c6c3; border-radius: 5px; background: var(--bg); transition: background .12s, border-color .12s; }
.choice-card i::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; }
.choice-card input:checked + i { background: var(--accent); border-color: var(--accent); }
.choice-card input:checked + i::after { transform: rotate(45deg) scale(1); }
.choice-card:has(input:checked) { border-color: var(--accent); background: #fafaf9; }
.choice-card strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.choice-card code { color: var(--text-2); font: 500 11px var(--mono); background: #f1f1ef; padding: 1px 5px; border-radius: 4px; }
.choice-card small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.settings-grid { margin-top: 16px; grid-template-columns: repeat(3, 1fr); }
.joined { display: grid; grid-template-columns: 1fr 92px; overflow: hidden; }
.joined input, .joined select { min-height: 38px; border: 0; border-radius: 0; box-shadow: none !important; background: transparent; }
.joined input { padding: 0 12px; }
.joined select { border-left: 1px solid #d7d7d4; padding: 0 8px; appearance: auto; }
.joined input:focus, .joined select:focus { box-shadow: none; }
.advanced { margin: 20px 0 4px; border: 1px solid var(--line); border-radius: 10px; }
.advanced summary { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: 10px; transition: background .12s; }
.advanced summary:hover { background: #fafaf9; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary strong { display: block; font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.advanced summary small { display: block; color: var(--muted); font-size: 11.5px; }
.advanced summary b { margin-left: auto; color: var(--muted); display: grid; place-items: center; }
.advanced summary b svg { width: 16px; height: 16px; transition: transform .15s; }
.advanced[open] summary b svg { transform: rotate(180deg); }
.advanced-body { padding: 4px 16px 18px; }
.checkbox-line { color: var(--text-2); font-size: 12.5px; }
.modal-actions { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.modal-actions > span { color: var(--muted); font-size: 12px; }
.modal-actions > div { display: flex; gap: 8px; }

/* ============ 抽屉（运行详情） ============ */
.drawer { display: block; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -16px 0 40px rgba(0,0,0,.08); }
.drawer-content { height: calc(100% - 65px); overflow-y: auto; padding: 20px; }
.run-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.summary-box { padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-soft); }
.summary-box span { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
.summary-box strong { display: block; color: var(--text); font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.target-results { display: grid; gap: 8px; margin-bottom: 18px; }
.target-result { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; }
.target-result strong { font-size: 12.5px; font-weight: 600; }
.target-result small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.log-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 9px; }
.log-title h3 { margin: 0; font-size: 13px; font-weight: 650; }
.log-title span { color: var(--muted); font-size: 11.5px; }
.log-view { min-height: 220px; overflow-x: auto; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 10px; font: 11.5px/1.7 var(--mono); color: #3f3f3d; }
.log-line { display: grid; grid-template-columns: 70px 56px minmax(0, 1fr); gap: 10px; white-space: pre-wrap; }
.log-line .log-time { color: #a8a8a5; }
.log-line .log-level { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding-top: 1px; }
.log-line.error .log-level, .log-line.error .log-text { color: var(--red); }
.log-line.success .log-level { color: var(--green); }
.log-line.warning .log-level { color: var(--amber); }
.log-line.command .log-text { color: var(--text); font-weight: 500; }

/* ============ 令牌 / 确认弹窗 ============ */
.token-card { width: min(390px, 100%); padding: 34px 30px; text-align: center; }
.brand.centered { justify-content: center; margin: 0 0 26px; }
.token-card h2 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.token-card p { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 0 0 22px; }
.token-card .field { text-align: left; }
.full-button { width: 100%; margin-top: 12px; }
.confirm-card { width: min(390px, 100%); padding: 32px 30px; text-align: center; }
.confirm-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 16px; color: var(--red); background: var(--red-soft); border-radius: 50%; }
.confirm-icon svg { width: 21px; height: 21px; }
.confirm-card h2 { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
.confirm-card p { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 0; }
.confirm-card > div:last-child { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }

/* ============ Toast ============ */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 420px; padding: 12px 15px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.10); font-size: 13px; color: var(--text); animation: toast-in .18s ease-out; }
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ============ 响应式 ============ */
@media (max-width: 1150px) {
  .repo-row { grid-template-columns: minmax(240px,1.2fr) minmax(180px,.8fr) 130px auto; }
  .schedule-cell { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .mobile-only { display: grid !important; }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-101%); transition: transform .2s; box-shadow: 16px 0 40px rgba(0,0,0,.12); }
  .sidebar.open { transform: translateX(0); }
  main { width: 100%; }
  .topbar { height: 64px; padding: 0 14px; }
  .topbar > div:nth-child(2) { margin-right: auto; margin-left: 10px; }
  h1 { font-size: 18px; }
  .content { padding: 18px 13px 50px; }
  .repo-row { grid-template-columns: 1fr auto; gap: 13px; padding: 15px 16px; }
  .target-stack, .schedule-cell, .time-cell { display: none; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; }
  .search { min-width: 0; flex: 1; }
  .field-grid, .option-grid, .settings-grid { grid-template-columns: 1fr; }
  .field.full, .full { grid-column: auto; }
  .destination-row { grid-template-columns: 1fr auto; }
  .destination-row .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .destination-options { grid-column: 1; grid-row: 3; }
  .remove-target { grid-column: 2; grid-row: 3; }
  .modal-actions > span { display: none; }
  .modal-actions { justify-content: flex-end; }
  .run-row { grid-template-columns: 1fr 112px 28px; }
  .run-row .run-cell:nth-child(3), .run-row .run-cell:nth-child(4) { display: none; }
}
@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { min-height: 80px; padding: 13px; gap: 10px; }
  .stat-icon { width: 34px; height: 34px; }
  .stat-card strong { font-size: 20px; }
  .top-actions .icon-btn { display: none; }
  .button { padding: 0 13px; }
  .filters { flex-direction: column; }
  .filters select, .search { width: 100%; }
  .panel-head { padding: 14px 16px; }
  .repo-actions { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  .modal { padding: 0; }
  .modal-card { max-height: 100vh; height: 100vh; border-radius: 0; }
  .editor-modal form { max-height: calc(100vh - 64px); }
  .form-scroll { padding: 2px 17px 22px; }
  .modal-head, .drawer-head { padding: 10px 17px; }
  .row-title { flex-wrap: wrap; }
  .row-title .button { margin-left: 0; width: 100%; }
  .destination-row { padding: 10px; }
}