/* ============================================================
   SEO AGENT — Swiss Control Room
   Surface #F2F0EA · Panel #FBFAF7 · Ink #16150F · Muted #6E6A5E
   Hairline #D8D4C8 · Signal #E64500 · Good #1F7A33 · Bad #C42B1C
   Type: Archivo (UI) · IBM Plex Mono (data)
   Square corners. Hairline grid. One accent.
   ============================================================ */

:root{
  --surface:#F2F0EA;
  --panel:#FBFAF7;
  --ink:#16150F;
  --muted:#6E6A5E;
  --hair:#D8D4C8;
  --hair-dark:#B9B4A5;
  --signal:#E64500;
  --signal-bright:#FF4D00;
  --good:#1F7A33;
  --bad:#C42B1C;
  --strip:#16150F;
  --strip-ink:#F2F0EA;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Archivo',Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',Consolas,monospace;font-variant-numeric:tabular-nums;}
a{color:inherit;}
.shell{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---------- top strip ---------- */
.topstrip{background:var(--strip);color:var(--strip-ink);}
.topstrip-in{display:flex;align-items:center;gap:32px;height:52px;}
.wordmark{
  font-weight:900;letter-spacing:.14em;font-size:.95rem;text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.wordmark .dot{color:var(--signal-bright);font-size:.7rem;}
.strip-counts{display:flex;gap:26px;flex:1;}
.sc{font-size:.68rem;letter-spacing:.16em;color:#A8A395;}
.sc b{color:var(--strip-ink);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.8rem;margin-right:5px;}
.sc-err b{color:var(--signal-bright);}
.strip-right{display:flex;align-items:center;gap:20px;}
.clock{font-size:.72rem;letter-spacing:.1em;color:#A8A395;}
.strip-link{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:#A8A395;border:1px solid #3A382F;padding:5px 12px;
}
.strip-link:hover{color:var(--strip-ink);border-color:var(--strip-ink);}

/* ---------- nav ---------- */
.mainnav{background:var(--panel);border-bottom:1px solid var(--hair-dark);}
.mainnav-in{display:flex;gap:4px;}
.navlink{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding:14px 18px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.navlink:hover{color:var(--ink);}
.navlink.on{color:var(--ink);border-bottom-color:var(--signal);}

/* ---------- page scaffolding ---------- */
main{padding:36px 24px 64px;}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.01em;}
h1 .thin{font-weight:400;color:var(--muted);}
.pagehead .sub{color:var(--muted);font-size:.85rem;}
h2.rule{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hair-dark);padding-bottom:8px;margin:38px 0 0;
}

/* ---------- stat tiles (bordered grid, not floating cards) ---------- */
.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hair-dark);background:var(--panel);
}
.tile{padding:18px 20px 16px;border-right:1px solid var(--hair);}
.tile:last-child{border-right:none;}
.tile .lbl{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.tile .num{font-size:2.3rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:2px;}
.tile .sub{font-size:.72rem;color:var(--muted);}
.tile .num .up{color:var(--good);font-size:1rem;vertical-align:middle;}
.tile .num .down{color:var(--bad);font-size:1rem;vertical-align:middle;}
.tile.alert .num{color:var(--signal);}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}.tile:nth-child(2){border-right:none;}.tile:nth-child(-n+2){border-bottom:1px solid var(--hair);}}

/* ---------- tables ---------- */
.tablewrap{border:1px solid var(--hair-dark);background:var(--panel);overflow-x:auto;margin-top:14px;}
table{width:100%;border-collapse:collapse;font-size:.86rem;}
th{
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--hair-dark);
  white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.rowlink{cursor:pointer;}
tr.rowlink:hover td{background:#F6F4EE;}
td.num,th.num{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
td .idx{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:.78rem;}
td a{text-decoration:none;font-weight:600;}
td a:hover{color:var(--signal);}
.empty{
  padding:44px 20px;text-align:center;color:var(--muted);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
.empty b{display:block;font-size:1rem;color:var(--ink);letter-spacing:.06em;margin-bottom:6px;}

/* ---------- status chips (never color alone: dot + label) ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.chip::before{content:"";width:8px;height:8px;display:inline-block;}
.chip.running::before,.chip.working::before{background:var(--signal);}
.chip.running,.chip.working{color:var(--signal);}
.chip.done::before,.chip.applied::before,.chip.active::before,.chip.approved::before{background:var(--good);}
.chip.done,.chip.applied,.chip.active,.chip.approved{color:var(--good);}
.chip.error::before,.chip.rejected::before,.chip.reverted::before{background:var(--bad);}
.chip.error,.chip.rejected,.chip.reverted{color:var(--bad);}
.chip.queued::before,.chip.paused::before,.chip.open::before,.chip.pending::before,.chip.dismissed::before{background:var(--muted);}
.chip.queued,.chip.paused,.chip.open,.chip.pending,.chip.dismissed{color:var(--muted);}

/* ---------- progress meter ---------- */
.meter{width:120px;height:6px;background:var(--surface);border:1px solid var(--hair-dark);position:relative;}
.meter i{position:absolute;inset:0;background:var(--signal);display:block;}

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--strip-ink);
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--ink);padding:10px 20px;cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--signal);border-color:var(--signal);color:#fff;}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--strip-ink);}
.btn.small{padding:6px 12px;font-size:.62rem;}
.btn.danger:hover{background:var(--bad);border-color:var(--bad);}

form .frow{margin-bottom:16px;}
label{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
input[type=text],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--hair-dark);
  font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--ink);
  padding:10px 12px;border-radius:0;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:-1px;border-color:var(--signal);}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
@media(max-width:700px){.formgrid{grid-template-columns:1fr;}}
.panel{border:1px solid var(--hair-dark);background:var(--panel);padding:24px;margin-top:14px;}

/* ---------- flash ---------- */
.flash{
  border:1px solid var(--good);border-left:4px solid var(--good);
  background:var(--panel);color:var(--ink);
  font-size:.82rem;padding:12px 16px;margin-bottom:22px;
}

/* ---------- two-col layout ---------- */
.cols{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;}
@media(max-width:960px){.cols{grid-template-columns:1fr;}}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--surface);}
.login-box{width:380px;max-width:92vw;}
.login-mark{
  background:var(--strip);color:var(--strip-ink);padding:26px 28px;
  font-weight:900;letter-spacing:.14em;font-size:1.15rem;
}
.login-mark .dot{color:var(--signal-bright);margin-left:8px;font-size:.8rem;}
.login-mark .tag{display:block;font-weight:400;font-size:.62rem;letter-spacing:.22em;color:#A8A395;margin-top:6px;}
.login-form{border:1px solid var(--hair-dark);border-top:none;background:var(--panel);padding:28px;}
.login-err{color:var(--bad);font-size:.78rem;margin-bottom:14px;font-weight:600;}

/* ---------- detail header ---------- */
.sitehead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:.82rem;}
.kv dt{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:2px;}
.kv dd{font-family:'IBM Plex Mono',monospace;font-size:.8rem;word-break:break-all;}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--hair-dark);margin-top:20px;padding-top:16px;padding-bottom:28px;
  display:flex;justify-content:space-between;gap:12px;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}