@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
--paper:oklch(0.975 0.006 285);--paper-2:oklch(1 0 0);--paper-3:oklch(0.955 0.009 285);
--ink:oklch(0.28 0.04 280);--ink-2:oklch(0.42 0.03 280);--ink-3:oklch(0.56 0.025 280);--ink-4:oklch(0.72 0.02 280);
--line:oklch(0.92 0.012 285);--line-2:oklch(0.945 0.009 285);
--accent:oklch(0.5 0.19 285);--accent-soft:oklch(0.94 0.04 285);--accent-ink:oklch(0.42 0.18 285);
--ok:oklch(0.6 0.13 160);--ok-soft:oklch(0.94 0.05 160);
--warn:oklch(0.66 0.17 40);--warn-soft:oklch(0.95 0.05 45);
--danger:oklch(0.58 0.21 25);--danger-soft:oklch(0.94 0.05 25);--danger-ink:oklch(0.5 0.2 25);
--ring-stroke:var(--accent);
--serif:'Plus Jakarta Sans',sans-serif;--sans:'Plus Jakarta Sans',sans-serif;--mono:'Plus Jakarta Sans',sans-serif;
--card-shadow:0 6px 20px oklch(0.4 0.08 285 / 0.07);
--sb:oklch(0.45 0.18 285);--sb-2:oklch(0.39 0.19 285);--sb-3:oklch(0.52 0.16 285);
}
[data-theme="dark"]{
--paper:oklch(0.19 0.02 280);--paper-2:oklch(0.23 0.022 280);--paper-3:oklch(0.27 0.024 280);
--ink:oklch(0.96 0.005 285);--ink-2:oklch(0.82 0.01 285);--ink-3:oklch(0.65 0.015 285);--ink-4:oklch(0.5 0.015 285);
--line:oklch(0.32 0.02 280);--line-2:oklch(0.28 0.02 280);
--accent:oklch(0.72 0.15 285);--accent-soft:oklch(0.3 0.07 285);--accent-ink:oklch(0.8 0.14 285);
--ok:oklch(0.75 0.13 160);--ok-soft:oklch(0.28 0.05 160);--warn:oklch(0.76 0.15 45);--warn-soft:oklch(0.3 0.06 45);
--danger:oklch(0.7 0.18 25);--danger-soft:oklch(0.3 0.07 25);--danger-ink:oklch(0.78 0.17 25);
--card-shadow:0 6px 20px oklch(0 0 0 / 0.3);
--sb:oklch(0.3 0.11 285);--sb-2:oklch(0.25 0.11 285);--sb-3:oklch(0.36 0.1 285);
}
/* type */
.hero-title,.view-title,.section-title,.detail-title,.summary-value,.agency-name,.asite-name,.ops-title,.env-url,.ct-name,.drawer-title,.confirm-title,.restrict-state-title,.user-group-name,.dm-num,.ag-stat-num,.asite-metric-num,.metric-value,.big-num,.thread-subj,.tweaks-title,.mgr-name,.request-label,.doc-cat,.invoice-mini-amount{font-weight:700;letter-spacing:-0.02em}
.agency-mark,.client-avatar,.mgr-avatar{font-weight:800;font-style:normal;border-radius:12px}
.hero-title{font-size:clamp(34px,3.6vw,52px)}
.view-title{font-size:clamp(28px,3vw,40px)}
.detail-title{font-size:clamp(26px,3.2vw,38px)}
.summary-value{font-size:clamp(30px,2.8vw,42px)}
.hero-title em{font-style:normal;color:var(--accent)}
/* surfaces */
.view .hairline{background:transparent}
.agency-card,.asite-card,.ops-block{background:var(--paper-2);border-color:transparent;border-radius:16px;box-shadow:var(--card-shadow)}
.asite-card.attn{box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--warn)}
.env-card{background:var(--paper-2);border-radius:14px;box-shadow:var(--card-shadow);border-color:transparent}
.env-card.is-lower{background:var(--paper-3);box-shadow:none;border:1px dashed var(--line)}
.env-card.is-prod{border-color:transparent;box-shadow:var(--card-shadow),inset 0 0 0 2px var(--accent)}
.migrate-panel,.restrict-toggle,.current-ip,.access-note,.drawer-note,.request-type,.thread-msg{border-radius:14px}
.migrate-panel{background:var(--paper-2);border-color:transparent;box-shadow:var(--card-shadow)}
.ctable-wrap,.ip-table-wrap{background:var(--paper-2);border-radius:16px;padding:10px 24px;box-shadow:var(--card-shadow)}
.summary-strip{grid-template-columns:repeat(4,1fr);gap:18px}
.summary-strip .hairline{display:none}
.summary{background:var(--paper-2);border-radius:16px;padding:22px 24px;box-shadow:var(--card-shadow)}
.summary:not(:first-child){padding-left:24px}
/* sidebar — light Noble gradient */
.sidebar{background:linear-gradient(180deg,#eaf8ff 0,#f6f6ff 100%);border-right:1px solid var(--line-2)}
[data-theme="dark"] .sidebar{background:linear-gradient(180deg,oklch(0.23 0.03 240) 0,oklch(0.22 0.025 285) 100%)}
.nav-item{border-radius:10px}
.nav-item.on{background:var(--accent);color:#fff}
.nav-item.on::before{display:none}
.nav-item .badge{background:var(--accent);color:#fff;border-radius:999px;font-weight:700}
.nav-item.on .badge{background:#fff;color:var(--accent)}
/* controls */
.act-btn,.btn-ghost,.btn-primary,.btn-danger,.danger-btn,.qa,.role-select,.msg-new,.pay-btn,.priority-btn{border-radius:10px}
.env-seg,.role-switch,.search{border-radius:10px;overflow:hidden}
.field input,.field select,.field textarea,.thread-compose textarea{border-radius:10px}
.btn-primary,.pay-btn{background:var(--accent)}
.btn-primary:hover,.pay-btn:hover{background:var(--accent-ink)}
.env-seg-btn.on{background:var(--accent);color:#fff}
.milestone,.activity-icon,.ct-edit,.icon-btn{border-radius:8px}
.pill,.role-badge,.ip-you,.env-lock{border-radius:999px}
.pill,.role-badge{letter-spacing:0.06em;font-weight:600;padding:3px 10px}
.filter-tab.on{border-bottom-width:2px}
.confirm-icon{border-radius:12px}
/* overlays */
.drawer-panel{border-radius:20px 0 0 20px}
.confirm-modal,.tweaks{border-radius:16px}
.toast{border-radius:12px}
.switch{border-radius:13px}