/* Super Admin console: sign-in, shell, companies, panel, wizard. Shares tokens with the site (base.css). */
.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.boot-mark svg { width: 46px; height: 46px; animation: bob 1.1s var(--ease) infinite alternate; }
@keyframes bob { to { transform: translateY(-6px) scale(1.05); opacity: .7; } }
.muted { color: var(--fg-2); } .small { font-size: 13px; } .grow { flex: 1; min-width: 0; }
.btn-block { width: 100%; }
.btn.busy { pointer-events: none; opacity: .75; }
.btn.busy .i { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.btn-danger { background: #BE123C; color: #fff; }
.fld { display: grid; gap: 8px; } .fld > span { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.fld input, .fld select, .inline input, select, .copy input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); font-size: 15px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.fld input:focus, select:focus, .inline input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.form-err { padding: 11px 14px; border-radius: 12px; background: rgba(190,18,60,.1); color: #E11D48; font-size: 14px; font-weight: 600; }
.hint { font-size: 12.5px; font-weight: 600; color: var(--fg-3); } .hint[data-ok="true"] { color: var(--mint-ink); } .hint[data-ok="false"] { color: #E11D48; }

/* sign-in */
.si { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.si-art { position: relative; overflow: hidden; isolation: isolate; background: #0B1120; color: #EEF1FA; padding: 40px; display: flex; flex-direction: column; }
.si-art .logo { color: #fff; }
.si-core { margin: auto; display: grid; grid-template-columns: 76px 76px; gap: 12px; padding: 30px; border-radius: 40px; background: linear-gradient(145deg, #1B2547, #0E1525); box-shadow: 0 30px 80px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.si-core i { width: 76px; height: 76px; border-radius: 20px; background: var(--indigo-2); }
.si-core i.m { background: var(--mint); animation: dockIn 3s var(--ease) infinite; }
.si-quote { font: 700 clamp(26px, 2.6vw, 36px)/1.15 var(--h); letter-spacing: -.03em; }
.si-form-wrap { display: grid; place-items: center; padding: 40px 24px; }
.si-form { width: min(400px, 100%); display: grid; gap: 18px; }
.si-form h1 { font-size: 40px; }
.si-logo-m { display: none; }
.pw { position: relative; display: block; } .pw input { padding-right: 48px; }
.pw-eye { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--fg-3); cursor: pointer; border-radius: 9px; display: grid; place-items: center; }
.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

/* shell */
.cx { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.cx-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 22px 16px; border-right: 1px solid var(--line); background: var(--bg-2); }
.cx-side .logo { padding: 4px 8px; }
.cx-nav { display: grid; gap: 3px; }
.cx-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--fg-2); font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s; }
.cx-nav a span { flex: 1; } .cx-nav a em { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); }
.cx-nav a:hover { background: var(--bg-3); color: var(--fg); }
.cx-nav a.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cx-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.me-who { flex: 1; min-width: 0; display: grid; } .me-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-who small { color: var(--fg-3); font-size: 12px; }
.cx-main { padding: 40px clamp(20px, 4vw, 56px) 80px; min-width: 0; }
.cx-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.cx-head > div { display: grid; gap: 10px; } .cx-head h1 { font-size: clamp(32px, 3.4vw, 44px); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stats .st { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); min-height: 104px; }
.st-i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 4px; }
.stats b { font: 700 28px/1 var(--h); letter-spacing: -.03em; } .stats span:last-child { color: var(--fg-2); font-size: 13.5px; }
.sk { background: linear-gradient(90deg, var(--bg-3), var(--card), var(--bg-3)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 14px; min-height: 60px; border: 0; }
@keyframes sk { to { background-position: -200% 0; } }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--fg-3); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--fg); font-size: 15px; }
.search.sm { height: 40px; min-width: 0; }
.seg { display: inline-grid; grid-auto-flow: column; padding: 4px; border-radius: 12px; background: var(--bg-3); }
.seg button { padding: 8px 13px; border: 0; border-radius: 9px; background: none; font-size: 13px; font-weight: 600; color: var(--fg-2); cursor: pointer; transition: .2s; }
.seg button[aria-checked="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.seg.wide { display: grid; grid-template-columns: 1fr 1fr; }

.co-list { border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.co-list .row { display: grid; grid-template-columns: 2.2fr 1fr 1fr .7fr 1fr 32px; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); transition: background .2s; font-size: 14.5px; }
.co-list .row.sk { margin: 10px; border: 0; }
.co-list a.row { animation: cardIn .4s var(--ease) both; animation-delay: calc(min(var(--k, 0), 12) * 30ms); }
.co-list .row:hover:not(.hd) { background: var(--card-2); }
.co-list .row.hd { border-top: 0; font-size: 12px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; padding-block: 12px; background: var(--card-2); }
.row .go { color: var(--fg-3); transition: transform .2s, color .2s; } .row:hover .go { color: var(--accent); transform: translateX(3px); }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; } .who > span:last-child { display: grid; min-width: 0; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who small { color: var(--fg-3); font-size: 12.5px; }
.av { --h: 240; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 17px var(--h); color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 30) 65% 45%)); }
.pill-s { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--bg-3); color: var(--fg-2); white-space: nowrap; }
.pill-s i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-s.ok { background: rgba(45,212,191,.14); color: var(--mint-ink); } .pill-s.warn { background: rgba(245,158,11,.14); color: #B45309; } .pill-s.info { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
:root[data-theme="dark"] .pill-s.warn { color: #FBBF24; }
.empty-c { display: grid; justify-items: center; gap: 10px; padding: 64px 20px; text-align: center; color: var(--fg-2); } .empty-c h3 { color: var(--fg); font-size: 21px; }
.empty-art { display: grid; grid-template-columns: 26px 26px; gap: 5px; margin-bottom: 8px; } .empty-art i { width: 26px; height: 26px; border-radius: 8px; background: var(--indigo-2); } .empty-art i.m { background: var(--mint); animation: dockIn 2.6s var(--ease) infinite; }

/* side panel */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(8,12,23,.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.sheet-bg.open { opacity: 1; }
.panel { position: fixed; z-index: 61; top: 12px; right: 12px; bottom: 12px; width: min(560px, calc(100vw - 24px)); border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; transform: translateX(calc(100% + 30px)); transition: transform .45s var(--ease); }
.panel.wide { width: min(680px, calc(100vw - 24px)); }
.panel.open { transform: none; }
.nc { min-height: 100%; display: flex; flex-direction: column; }
.p-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 22px 26px; background: color-mix(in srgb, var(--bg-2) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.p-head > div:first-child { flex: 1; display: grid; gap: 6px; } .p-head h2 { font-size: 26px; } .p-head .row.sk { flex: 1; min-height: 44px; }
.cd-head h2 { font-size: 24px; } .cd-head a { display: block; overflow-wrap: anywhere; } .cd-head .grow { min-width: 0; }
@media (max-width: 640px) { .cd-head { flex-wrap: wrap; } .cd-head .grow { flex: 1 1 60%; } }
.stepper { list-style: none; margin: 0; padding: 18px 26px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: s; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg-3); padding-bottom: 12px; border-bottom: 2.5px solid var(--line-2); transition: .3s; }
.stepper li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--bg-3); }
.stepper li.on { color: var(--fg); border-color: var(--accent); } .stepper li.on span { background: var(--accent); color: #fff; }
.stepper li.done { color: var(--fg-2); border-color: var(--mint); } .stepper li.done span { background: var(--mint); color: #0E1525; }
.nc-body, .p-body { flex: 1; padding: 24px 26px; display: grid; gap: 20px; align-content: start; }
.p-foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 90%, transparent); backdrop-filter: blur(12px); }
.addr { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.addr:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.addr em { font-style: normal; color: var(--fg-3); padding-left: 14px; white-space: nowrap; font-size: 14px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.addr input { border: 0; box-shadow: none !important; padding-left: 2px; background: none; }
.mp-top { display: flex; align-items: center; gap: 12px; } .mp-top .search { flex: 1; } .mp-n { font-size: 14px; color: var(--fg-2); white-space: nowrap; } .mp-n b { color: var(--accent); font: 700 18px var(--h); }
.quick, .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .quick > span { font-size: 13px; color: var(--fg-3); margin-right: 4px; }
.quick button, .chips button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.quick button:hover { border-color: var(--accent); color: var(--accent); } .chips button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-i { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; min-width: 0; }
.mp-i:active { transform: scale(.98); }
.mp-i .mi, .dk-i .mi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mp-t { flex: 1; min-width: 0; display: grid; } .mp-t b { font-size: 13.5px; } .mp-t small { color: var(--fg-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: .2s; }
.mp-i[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.mp-i[aria-pressed="true"] .ck { background: var(--accent); border-color: var(--accent); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .plans.sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.plan { display: grid; gap: 3px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); text-align: left; cursor: pointer; transition: .2s; }
.plan small { color: var(--fg-3); font-size: 12px; } .plan[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.review { padding: 18px; border-radius: 16px; background: var(--bg-3); } .review h4 { font-size: 15px; margin-bottom: 10px; }
.review dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 14px; } .review dt { color: var(--fg-3); } .review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.progress { display: grid; gap: 12px; padding: 20px 0; }
.pr { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--fg-3); }
.pr i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); }
.pr[data-st="run"] { color: var(--fg); } .pr[data-st="run"] i { border-color: var(--accent) transparent var(--accent) var(--accent); animation: spin .8s linear infinite; }
.pr[data-st="ok"] { color: var(--fg); } .pr[data-st="ok"] i { background: var(--mint); border-color: var(--mint); }
.pr[data-st="bad"] i { background: #E11D48; border-color: #E11D48; }
.done { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 24px 0; }
.done-art { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #0E1525; background: var(--mint); box-shadow: 0 16px 40px rgba(45,212,191,.4); animation: pop .6s var(--ease); }
@keyframes pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.done h3 { font-size: 24px; } .copy { display: flex; gap: 8px; width: 100%; } .copy input { font-size: 13px; }
.done-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tabs { display: flex; gap: 4px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 14px 12px; border: 0; background: none; font-weight: 600; font-size: 14px; color: var(--fg-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs button em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--bg-3); }
.tabs button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kv > div { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 4px; }
.kv span { font-size: 12.5px; color: var(--fg-3); } .kv b { font: 700 22px var(--h); }
.card-s { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 12px; } .card-s.big { padding: 26px; gap: 18px; }
.card-s h4 { font: 600 12.5px var(--b); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.inline { display: flex; gap: 8px; align-items: center; } .inline input { height: 42px; }
.dock-list { display: grid; gap: 8px; } .dk-i { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.dk-i .grow { display: grid; } .dk-i small { color: var(--fg-3); font-size: 12.5px; }
.p-actions { display: flex; justify-content: end; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); transform: translate(-50%, 20px); opacity: 0; transition: .3s var(--ease); }
.toast.show { transform: translate(-50%, 0); opacity: 1; } .toast[data-kind="bad"] .i { color: #FB7185; } .toast .i { color: var(--mint); }
.sw-row { display: flex; gap: 20px; align-items: start; } .sw-row h3 { font-size: 21px; margin-bottom: 6px; }
.switch { flex: none; width: 58px; height: 34px; border-radius: 999px; border: 0; background: var(--line-2); position: relative; cursor: pointer; transition: background .25s; }
.switch i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.switch[aria-checked="true"] { background: var(--mint); } .switch[aria-checked="true"] i { transform: translateX(24px); }
.su-state { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); font-weight: 600; font-size: 14px; color: var(--fg-2); }
.su-state.on { background: rgba(45,212,191,.12); color: var(--mint-ink); }
.su-page { display: grid; gap: 16px; max-width: 900px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini { display: grid; gap: 8px; } .mini > div { display: flex; justify-content: space-between; gap: 10px; }
body.locked { overflow: hidden; }
@keyframes dockIn { 0%, 20% { transform: translate(26px, 26px); opacity: 0; } 55%, 100% { transform: none; opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 960px) {
  .si { grid-template-columns: 1fr; } .si-art { display: none; } .si-logo-m { display: flex; margin-bottom: 18px; }
  .cx { grid-template-columns: 1fr; }
  .cx-side { position: sticky; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(14px); }
  .cx-side .logo span { display: none; } .cx-nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; } .cx-nav a { padding: 9px 10px; white-space: nowrap; } .cx-nav a span { display: none; } .cx-nav a.on span { display: inline; }
  .cx-nav a:not([data-view]) { display: none; }
  .cx-me { margin: 0; padding: 0; border: 0; } .me-who { display: none; } .cx-me .btn { display: none; }
  .cx-main { padding: 24px 16px 60px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .co-list { background: none; border: 0; display: grid; gap: 10px; overflow: visible; }
  .co-list .row.hd { display: none; }
  .co-list a.row { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
  .co-list a.row .who { grid-column: 1 / -1; } .co-list a.row .go { display: none; }
  .co-list a.row > span[data-l] { font-size: 13px; color: var(--fg-2); display: flex; gap: 6px; } .co-list a.row > span[data-l]::before { content: attr(data-l); color: var(--fg-3); }
  .panel, .panel.wide { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .panel.open, .panel.wide.open { transform: none; }
  .mp, .grid2, .kv { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr 1fr; }
  .stepper { padding: 14px 18px 0; } .stepper li { font-size: 0; gap: 0; justify-content: center; } .stepper li span { font-size: 11.5px; }
  .nc-body, .p-body, .p-head, .p-foot { padding-left: 18px; padding-right: 18px; } .tabs { padding: 0 14px; }
}