:root{--bg:#f7f8fa;--panel:#fff;--border:#e4e7ed;--text:#202431;--muted:#626a79;--accent:#5454d4;--accent-soft:#eeeeff;--ok:#15724f;--ok-soft:#eaf7f0;--warn:#936014;--warn-soft:#fff5e4;--fail:#b42336;--fail-soft:#fff0f2;--radius:14px;--shadow:0 2px 6px #20243104,0 12px 30px #20243103}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.6;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed} [hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:16px;background:var(--text);color:#fff;padding:12px;z-index:100}.skip-link:focus{top:12px}
.topbar{background:#ffffffed;border-bottom:1px solid var(--border);padding:0 32px;min-height:76px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.logo{display:flex;align-items:center;gap:6px;color:var(--text);white-space:nowrap;font-weight:700;letter-spacing:-.4px;font-size:16px}.logo span:not(.brand-icon){color:var(--muted);font-weight:500}.brand-icon{display:inline-grid;place-items:center;width:30px;height:30px;color:#fff;background:var(--accent);border-radius:9px;margin-right:5px}.topbar nav{display:flex;gap:4px}.topbar nav a{padding:9px 12px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:550;white-space:nowrap}.topbar nav a:hover,.topbar nav .active{background:var(--accent-soft);color:var(--accent);text-decoration:none}.spacer{flex:1}.container{max-width:1200px;margin:auto;padding:36px 28px 64px;min-width:0}h1{font-size:28px;letter-spacing:-1px;line-height:1.3;margin:0 0 8px;font-weight:650}h2{font-size:16px;letter-spacing:-.3px;margin:0 0 10px}h3{font-size:14px;margin:0 0 6px}p{margin:0 0 12px}.page-sub,.sub{color:var(--muted);font-size:13px}.page-sub{margin-bottom:24px}.eyebrow{text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:650;color:var(--muted);margin-bottom:8px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}.page-head .page-sub{margin:0}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px;min-width:0;animation:enter .25s ease both}.card h2{margin-bottom:10px}.card .sub{margin-bottom:14px}.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.card-header h2{margin:0}.grid-two{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}.grid-two .card:last-child{margin-bottom:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.metric{padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text)}.metric:hover{text-decoration:none;border-color:#bcbcef}.metric .metric-value{display:block;font-size:30px;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums}.metric .metric-label{font-size:12px;color:var(--muted)}.metric.attention{background:#faf9ff;border-color:#dedaf4}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tabs a{padding:8px 11px;color:var(--muted);border-radius:7px;font-size:13px}.tabs a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.search{display:flex;gap:8px;max-width:380px;flex:1}.search input{min-width:120px}.table-card{padding:0;overflow:hidden}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;background:#fafbfc;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;color:var(--muted);padding:14px 18px;border-bottom:1px solid var(--border)}td{padding:17px 18px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere}tr:last-child td{border:0}tbody tr:hover{background:#fafaff}.client-cell{display:flex;align-items:center;gap:12px}.avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:650;flex-shrink:0}.small{font-size:12px;color:var(--muted)}.empty{padding:40px 24px;text-align:center;color:var(--muted)}.empty h2{color:var(--text)}.priority-row{padding:14px 0;border-bottom:1px solid var(--border);display:flex;gap:12px;justify-content:space-between;align-items:center}.priority-row:last-child{border:0}.priority-row p{margin:4px 0 0;font-size:12px;color:var(--muted)}
label{display:block;font-size:13px;font-weight:550;margin-bottom:7px}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);min-height:42px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.field{margin-bottom:18px}.hint{font-size:12px;color:var(--muted);margin-top:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 14px;border-radius:8px;border:1px solid transparent;font-size:13px;font-weight:550;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;text-decoration:none;white-space:normal}.btn:hover{text-decoration:none}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 3px #5454d422}.btn-primary:hover{background:#4545b5}.btn-ghost{background:#fff;border-color:var(--border);color:var(--text)}.btn-ghost:hover{background:var(--bg);border-color:#c6c9d5}.btn-sm{min-height:34px;padding:6px 10px;font-size:12px}.btn-danger{color:var(--fail);background:var(--fail-soft);border-color:#f1ccd2}.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:550;white-space:nowrap}.badge-active,.badge-succeeded{color:var(--ok);background:var(--ok-soft)}.badge-incomplete,.badge-awaiting{color:var(--warn);background:var(--warn-soft)}.badge-paused,.badge-archived,.badge-cancelled,.badge-queued{color:var(--muted);background:#f0f2f5}.badge-fail,.badge-failed,.badge-deleted{color:var(--fail);background:var(--fail-soft)}.badge-running{color:var(--accent);background:var(--accent-soft)}.alert{padding:13px 16px;border:1px solid transparent;border-radius:9px;font-size:13px;margin-bottom:18px;overflow-wrap:anywhere}.alert-error{background:var(--fail-soft);color:var(--fail);border-color:#f4d7dd}.alert-ok{background:var(--ok-soft);color:var(--ok)}.alert-warn{background:var(--warn-soft);color:var(--warn)}.msg-box{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:16px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow-y:auto}.timeline{list-style:none;margin:0;padding:0}.timeline li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);font-size:13px;overflow-wrap:anywhere}.timeline li:last-child{border:0}.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot-info{background:var(--accent)}.dot-ok,.dot-done{background:var(--ok)}.dot-fail{background:var(--fail)}.dot-waiting{background:var(--warn);animation:pulse 1.6s infinite}.step-name{min-width:100px;font-size:11px;color:var(--muted);font-weight:600}.checklist{display:flex;flex-direction:column}.checkrow,.histrow{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;overflow-wrap:anywhere}.checkrow:last-child,.histrow:last-child{border:0}.checklabel{min-width:200px;font-weight:550}.checkdetail{color:var(--muted)}.histdate{min-width:120px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}summary{cursor:pointer;color:var(--accent);padding:10px 0;font-size:13px;font-weight:550}.center-narrow{max-width:440px;margin:64px auto!important;padding:32px}.center-narrow h1{font-size:25px}.login-mark{width:44px;height:44px;border-radius:12px;background:var(--accent);color:white;display:grid;place-items:center;font-weight:700;font-size:24px;margin-bottom:20px}.wizard-shell{max-width:780px;margin:auto}.stepper{display:flex;list-style:none;padding:0;gap:16px;margin:24px 0 28px}.stepper li{flex:1;border-top:3px solid var(--border);padding-top:10px;font-size:12px;color:var(--muted)}.stepper li.current{color:var(--accent);border-color:var(--accent);font-weight:600}.stepper li.complete{color:var(--ok);border-color:var(--ok)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.secret-gate{background:var(--bg);border:1px dashed var(--border);padding:18px;border-radius:9px}.filt.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.ad-step{padding:12px 0;border-bottom:1px solid var(--border)}.ad-row{margin:10px 0}.ad-row code{display:block;overflow-wrap:anywhere;background:#fff;padding:8px;border-radius:6px}.ad-lbl{font-size:12px;color:var(--muted)}.ad-done{opacity:.65}@keyframes enter{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.35}}
@media(max-width:1000px){.topbar{padding:14px 22px;gap:12px;flex-wrap:wrap}.topbar nav{order:3;width:100%;overflow-x:auto}.topbar .spacer{flex:1}.grid-two{grid-template-columns:1fr}.container{padding:28px 22px 48px}}
@media(max-width:640px){.topbar{position:relative;padding:14px 16px}.logo{font-size:14px}.logout{font-size:11px}.topbar nav{gap:0}.topbar nav a{padding:9px 10px}.container{padding:24px 16px 40px}h1{font-size:25px}.page-head{gap:14px}.card{padding:18px;border-radius:12px;margin-bottom:16px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:15px}.metric .metric-value{font-size:27px}.table-card{padding:0}table thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{padding:14px 0;border-bottom:1px solid var(--border)}td{border:0;padding:5px 16px}td::before{content:attr(data-label);display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}td[data-label='Client']::before{display:none}.toolbar,.search{max-width:none;width:100%}.tabs a{padding:8px}.timeline li{flex-wrap:wrap;gap:8px}.timeline li>span:last-child{width:100%;padding-left:16px}.histrow,.checkrow{flex-wrap:wrap;gap:6px 10px}.checklabel{min-width:0}.histdate{min-width:0}.form-grid{grid-template-columns:1fr}.center-narrow{padding:24px;margin:24px auto!important}.stepper{gap:10px}.btn{min-height:42px}.btn-sm{min-height:38px}.priority-row{align-items:start}.card-header{flex-wrap:wrap}}
.internal-note{margin-top:6px;overflow-wrap:anywhere}.internal-note summary{cursor:pointer}.internal-note p{margin-top:8px}
@media(min-width:641px){.cockpit-table{table-layout:fixed}.cockpit-table th:nth-child(1){width:31%}.cockpit-table th:nth-child(2){width:25%}.cockpit-table th:nth-child(3){width:14%}.cockpit-table th:nth-child(4){width:16%}.cockpit-table th:nth-child(5){width:14%}.cockpit-table td{overflow-wrap:anywhere}.cockpit-table .client-cell>div{min-width:0}}
/* V2 — luminous surfaces, compact cockpit, shared navigation. No dependencies. */
:root {
  --bg:#f6f7fc; --panel:#fff; --border:#e4e6f0; --text:#24243a;
  --muted:#65657c; --accent:#6552df; --accent-soft:#f0edff;
  --radius:18px; --shadow:0 2px 4px #33324d03,0 8px 28px #48436e06;
}
body { background:radial-gradient(ellipse at 6% 0%,#eae6ff99,transparent 45%),radial-gradient(ellipse at 100% 25%,#e2f6f980,transparent 40%),var(--bg); }
.ui-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html { scroll-padding-top:96px; }
.topbar { min-height:76px; padding:0 max(24px,calc((100vw - 1200px)/2)); gap:28px; background:#ffffffc9; border-bottom:1px solid #fff; box-shadow:0 1px 0 #dfdfef80; }
.logo { gap:9px; font-size:16px; letter-spacing:-.5px; }
.logo .brand-name { color:var(--text); font-weight:720; }
.logo .brand-name span { color:var(--muted); font-weight:450; }
.brand-icon { width:35px; height:35px; border-radius:11px; background:linear-gradient(145deg,#9377ff,#6250dc 65%,#493cba); box-shadow:0 4px 12px #6552df35,inset 0 1px 0 #ffffff66; margin:0; }
.brand-icon svg { width:25px; height:25px; }
.topbar .main-nav { gap:5px; align-items:center; }
.topbar .main-nav .nav-link { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 11px; border-radius:11px; font-size:12px; font-weight:600; transition:background .18s,color .18s; }
.main-nav .ui-icon { width:17px; height:17px; }
.nav-short { display:none; }
.topbar .main-nav .nav-add { order:5; margin-left:9px; background:linear-gradient(115deg,#7255e5,#5e4ad6); color:#fff; box-shadow:0 4px 14px #6552df24,inset 0 1px 0 #ffffff33; }
.topbar .main-nav .nav-add:hover { background:#5944cb; }
.topbar .main-nav .nav-add.active { box-shadow:0 0 0 3px #ddd5ff; }
.logout { background:transparent; color:var(--muted); border:0; padding:10px 5px; }
.logout .ui-icon { width:18px; height:18px; }
.container { padding-top:30px; }
.btn { border-radius:11px; }
.btn-primary { background:linear-gradient(120deg,#7356e7,#5e4bd2); box-shadow:0 5px 14px #6552df24,inset 0 1px 0 #ffffff30; }
.btn-primary:hover { background:linear-gradient(120deg,#6c51e6,#513bbf); }
.card { border-color:#e6e6f1; }
.cockpit-page .container { max-width:1200px; }
.cockpit-hero { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:24px; overflow:hidden; padding:29px 32px; border:1px solid #fff; border-radius:24px; margin-bottom:20px; background:linear-gradient(115deg,#fff 3%,#f2efff 48%,#e6e3ff 77%,#def4f9); box-shadow:0 12px 40px #6552df0e,inset 0 1px 0 #fff; }
.cockpit-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 60% 0%,#fff9,transparent 60%); pointer-events:none; }
.hero-copy { position:relative; z-index:1; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:7px; color:#686086; font-size:10px; letter-spacing:1.7px; margin-bottom:9px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#7660e3; box-shadow:0 0 0 4px #7660e310; }
.hero-copy h1 { font-size:40px; font-weight:750; letter-spacing:-1.8px; margin:0 0 6px; }
.hero-copy h1>span { color:#8063e7; }
.hero-copy>p:last-child { color:#68617d; font-size:13px; margin:0; }
.hero-add { position:relative; z-index:1; min-height:46px; }
.hero-add .ui-icon:last-child { width:16px; margin-left:12px; }
.hero-orbit { position:absolute; width:260px; height:260px; right:230px; top:-46px; z-index:-1; opacity:.85; }
.orbit-ring { position:absolute; border:1px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #b5a2f01c,0 0 35px #fff7; }
.orbit-one { inset:14px; transform:rotate(-25deg) scaleY(.62); }
.orbit-two { inset:37px; transform:rotate(38deg) scaleY(.7); }
.orbit-core { position:absolute; inset:97px; display:grid; place-items:center; color:#8263d7; border:1px solid #fff; border-radius:19px; background:linear-gradient(140deg,#fff9,#ffffff26); box-shadow:0 12px 25px #7b62d623,inset 0 1px 0 #fff; transform:rotate(-12deg); }
.orbit-core .ui-icon { width:29px; height:29px; }
.orbit-spark { position:absolute; border-radius:50%; box-shadow:0 5px 12px #917bde30; background:linear-gradient(135deg,#fff,#bcabf3); }
.spark-one { width:15px; height:15px; left:40px; top:69px; }
.spark-two { width:10px; height:10px; right:38px; bottom:67px; background:linear-gradient(135deg,#fff,#9adbdc); }
.cockpit-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 32px; }
.cockpit-metric { min-width:0; display:flex; align-items:center; gap:13px; color:var(--text); padding:17px; background:#ffffffb8; border:1px solid #fff; border-radius:16px; box-shadow:0 3px 15px #59527405; transition:transform .18s,border-color .18s,box-shadow .18s; }
.cockpit-metric:hover { text-decoration:none; transform:translateY(-2px); border-color:#d1c9ef; box-shadow:0 6px 18px #6552df10; }
.metric-glyph { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#f0edff; color:#7960d8; flex:none; }
.metric-follow_up .metric-glyph { background:#fff2e2; color:#ac742b; }
.metric-upcoming .metric-glyph { background:#e9f6f5; color:#2f8a8a; }
.metric-orders .metric-glyph { background:#edf1ff; color:#6276b8; }
.metric-data { display:flex; flex-direction:column; min-width:0; }
.metric-data strong { font-size:27px; font-weight:730; line-height:1.15; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.metric-data>span { font-size:11px; color:var(--muted); margin-top:3px; }
.cockpit-metric>.ui-icon { width:15px; margin-left:auto; color:#a3a0b7; }
.section-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:17px; }
.section-heading .eyebrow { margin:0 0 3px; font-size:9px; letter-spacing:1.6px; }
.section-heading h2 { display:flex; gap:11px; align-items:center; margin:0; font-size:23px; font-weight:700; letter-spacing:-.7px; }
.result-count { font-size:12px; font-weight:650; color:#756c9c; background:#eae6f6; padding:2px 8px; border-radius:8px; letter-spacing:0; }
.section-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; min-height:40px; }
.section-link .ui-icon { width:15px; height:15px; }
.client-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:19px; }
.client-tabs { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #e5e3ef; border-radius:13px; background:#eeedf5a8; }
.client-tabs a { display:flex; align-items:center; justify-content:center; gap:5px; border-radius:9px; padding:7px 14px; color:var(--muted); font-size:12px; min-height:36px; white-space:nowrap; transition:background .15s; }
.client-tabs a:hover { text-decoration:none; background:#ffffff90; }
.client-tabs a.active { background:#fff; color:#5d46c7; font-weight:650; box-shadow:0 2px 5px #3f2b7510; }
.client-tabs a>span { font-size:10px; color:var(--muted); }
.client-search { display:flex; align-items:center; gap:10px; width:320px; max-width:100%; padding:0 6px 0 13px; border:1px solid #e1deed; border-radius:12px; background:#ffffffc9; }
.client-search>.ui-icon { width:17px; color:#8c849f; }
.client-search input[type=search] { min-width:0; padding:9px 0; border:0; background:transparent; font-size:12px; outline-offset:1px; }
.client-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #6552df0d; }
.client-search button { display:grid; place-items:center; border:0; background:#f0edf8; color:#776998; border-radius:8px; width:34px; height:34px; flex:none; cursor:pointer; }
.client-search button:hover { background:#e7dfff; color:var(--accent); }
.client-search button .ui-icon { width:17px; height:17px; }
.client-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; align-items:stretch; }
.client-card { position:relative; min-width:0; display:flex; flex-direction:column; padding:20px; background:linear-gradient(150deg,#fff,#fefeff); border:1px solid #e4e2ef; border-radius:20px; box-shadow:0 2px 3px #33324d03,0 12px 26px #48436e06; transition:border-color .2s,box-shadow .2s,transform .2s; animation:card-arrive .45s ease both; }
.client-card:nth-child(2) { animation-delay:40ms; }
.client-card:nth-child(3) { animation-delay:80ms; }
.client-card:hover,.client-card:focus-within { border-color:#c7bcef; box-shadow:0 4px 6px #33324d04,0 16px 32px #6552df10; }
.client-card-head { display:flex; align-items:flex-start; gap:11px; margin-bottom:18px; }
.client-avatar { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#7250bf; font-size:19px; font-weight:650; background:linear-gradient(135deg,#f1e9ff,#e0d5fc); border:1px solid #fff; box-shadow:0 3px 6px #8a6ac216; }
.avatar-1 { background:linear-gradient(135deg,#e5f8f6,#cdeae7); color:#3c837d; }
.avatar-2 { background:linear-gradient(135deg,#fff2e7,#f5dec6); color:#a06a33; }
.avatar-3 { background:linear-gradient(135deg,#eaf0ff,#d8e2fa); color:#5379b7; }
.client-identity { min-width:0; flex:1; }
.client-identity h3 { font-size:16px; line-height:1.4; letter-spacing:-.3px; margin:1px 0 2px; }
.client-identity h3 a { color:var(--text); }
.client-note { color:#696079; font-size:12px; line-height:1.5; margin:3px 0; overflow-wrap:anywhere; }
.client-email { color:#898295; font-size:10px; margin:2px 0 0; overflow-wrap:anywhere; }
.client-card-head .badge { flex:none; font-size:10px; border-radius:7px; padding:3px 7px; margin-top:3px; }
.premium-panel { border:1px solid #eeeaf8; border-radius:13px; padding:13px; background:linear-gradient(110deg,#f7f5fd,#f5f7ff); }
.premium-heading { display:flex; flex-wrap:wrap; align-items:center; gap:7px; justify-content:space-between; font-size:10px; }
.premium-heading>span:first-child { display:flex; align-items:center; gap:5px; font-weight:600; color:#6f608f; }
.premium-heading .ui-icon { width:14px; height:14px; }
.premium-state { font-size:9px; color:#766298; border:1px solid #e1d7f0; background:#ffffffa3; padding:2px 6px; border-radius:6px; }
.premium-summary { font-size:12px; font-weight:600; color:#504366; margin:9px 0 8px; overflow-wrap:anywhere; }
.premium-expiry { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; border-top:1px solid #e6e0f0; margin:0; padding-top:9px; font-size:10px; }
.premium-expiry dt { color:#7c7289; }
.premium-expiry dd { font-size:12px; color:#40334e; font-weight:650; margin:0; }
.ad-premium .premium-panel { background:linear-gradient(110deg,#f0f8f4,#f1f8f9); border-color:#dfeee5; }
.ad-premium .premium-heading>span:first-child { color:#467964; }
.ad-premium .premium-state { color:#367256; border-color:#d1e5d9; }
.ad-premium .premium-summary { color:#3e6150; }
.ad-premium .premium-expiry { border-color:#dae9df; }
.ad-due .premium-panel,.ad-nonpremium .premium-panel { background:linear-gradient(110deg,#fff8ef,#fffbf5); border-color:#f0e3d0; }
.ad-due .premium-heading>span:first-child,.ad-nonpremium .premium-heading>span:first-child { color:#8e703b; }
.ad-due .premium-state,.ad-nonpremium .premium-state { color:#91662c; border-color:#efdbbc; }
.ad-due .premium-summary,.ad-nonpremium .premium-summary { color:#7d6134; }
.ad-due .premium-expiry,.ad-nonpremium .premium-expiry { border-color:#efdfc8; }
.client-freshness { display:flex; align-items:center; justify-content:space-between; gap:7px; flex-wrap:wrap; margin:12px 0; font-size:9px; color:#81778f; }
.client-freshness>span:first-child { display:flex; align-items:center; gap:4px; }
.client-freshness .ui-icon { width:12px; height:12px; }
.freshness-tag { color:#906b37; background:#fff7e9; border-radius:5px; padding:2px 5px; }
.freshness-tag.is-fresh { color:#37735c; background:#edf7f1; }
.client-reason { display:flex; align-items:flex-start; gap:6px; padding:9px 10px; background:#fff8ed; border:1px solid #f6e8cf; border-radius:10px; color:#946b2e; font-size:10px; line-height:1.6; margin-bottom:14px; }
.client-reason .ui-icon { width:14px; height:14px; margin-top:1px; }
.client-reason p { margin:0; overflow-wrap:anywhere; }
.reason-neutral { color:#786a91; background:#f8f6fc; border-color:#ede8f6; }
.client-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; margin-top:auto; border-top:1px solid #efecf5; padding-top:8px; }
.client-open { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; color:#624ec6; font-weight:650; font-size:12px; flex:1; }
.client-open .ui-icon { width:17px; height:17px; transition:transform .18s; }
.client-open:hover { text-decoration:none; }
.client-open:hover .ui-icon { transform:translateX(3px); }
.resume-order { min-height:38px; display:flex; align-items:center; font-size:10px; color:#716681; }
.cockpit-secondary { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.cockpit-secondary .card { padding:22px; margin:0; background:#ffffffb8; }
.cockpit-secondary h2 { display:flex; align-items:center; gap:8px; font-size:14px; }
.cockpit-secondary h2 .ui-icon { width:17px; height:17px; color:#8b79b3; }
.cockpit-secondary .card-header { margin-bottom:8px; }
.secondary-empty { display:flex; align-items:center; gap:12px; padding:18px 0 8px; }
.secondary-empty>.ui-icon { padding:7px; width:34px; height:34px; border-radius:11px; background:#eaf5ef; color:#4b8c6d; }
.secondary-empty h3 { font-size:12px; font-weight:600; margin:0 0 2px; }
.secondary-empty p { font-size:11px; color:var(--muted); margin:0; }
.cockpit-empty { padding:35px; text-align:center; }
.cockpit-empty>.ui-icon { width:30px; height:30px; color:#8b78b0; margin-bottom:10px; }
.cockpit-empty .actions { justify-content:center; }
.cockpit-empty p { color:var(--muted); font-size:12px; }
.cockpit-footnote { display:flex; align-items:center; justify-content:center; gap:6px; margin:22px 0 0; font-size:10px; color:#81778f; }
.cockpit-footnote .ui-icon { width:13px; height:13px; }
@keyframes card-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(min-width:1001px) and (max-width:1190px) {
  .topbar { gap:14px; padding:0 22px; }
  .topbar .main-nav .nav-link { padding:9px 8px; font-size:11px; }
  .logout span { display:none; }
}
@media(max-width:1000px) and (min-width:641px) {
  .topbar { gap:14px; padding:12px 22px; }
  .topbar .main-nav { justify-content:center; }
  .topbar .main-nav .nav-link { flex:1; }
  .client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cockpit-metric { gap:8px; padding:13px; }
  .metric-glyph { width:28px; height:28px; }
  .cockpit-metric>.ui-icon { display:none; }
  .hero-orbit { right:170px; opacity:.55; }
}
@media(max-width:640px) {
  html { scroll-padding-top:78px; }
  .topbar { position:sticky; top:0; min-height:64px; padding:12px 18px; gap:10px; flex-wrap:nowrap; backdrop-filter:none; background:#faf9ff; }
  .logo { font-size:15px; gap:8px; }
  .brand-icon { width:33px; height:33px; border-radius:10px; }
  .logout { min-width:42px; min-height:42px; padding:8px; }
  .logout span { display:none; }
  .topbar .main-nav { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:auto; order:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:6px; overflow:visible; background:#ffffffed; border:1px solid #fff; border-radius:22px; box-shadow:0 0 0 1px #d8d4e970,0 6px 35px #47406d26; backdrop-filter:blur(20px); z-index:30; }
  .topbar .main-nav .nav-link { min-width:0; min-height:56px; padding:5px 1px; border-radius:15px; font-size:9px; font-weight:600; flex-direction:column; gap:4px; line-height:1.25; }
  .main-nav .ui-icon { width:20px; height:20px; }
  .main-nav .nav-link:nth-child(1) { order:1; }
  .main-nav .nav-link:nth-child(3) { order:2; }
  .topbar .main-nav .nav-add { order:3; margin:0 2px; font-size:9px; box-shadow:0 4px 12px #6552df30,inset 0 1px 0 #fff3; }
  .main-nav .nav-link:nth-child(4) { order:4; }
  .main-nav .nav-link:nth-child(5) { order:5; }
  .main-nav .nav-short { display:inline; }
  .main-nav a:has(.nav-short) .nav-label { display:none; }
  .container { padding:18px 16px calc(110px + env(safe-area-inset-bottom,0px)); }
  .cockpit-hero { padding:20px; border-radius:20px; margin-bottom:13px; min-height:130px; }
  .hero-copy .eyebrow { margin-bottom:7px; font-size:9px; letter-spacing:1.4px; }
  .hero-copy h1 { font-size:30px; letter-spacing:-1.3px; margin-bottom:6px; }
  .hero-copy>p:last-child { font-size:11px; max-width:240px; }
  .hero-add { display:none; }
  .hero-orbit { width:190px; height:190px; top:-29px; right:-61px; opacity:.45; }
  .orbit-core { inset:72px; border-radius:14px; }
  .orbit-core .ui-icon { width:21px; height:21px; }
  .orbit-two { inset:29px; }
  .spark-one { top:40px; left:30px; width:11px; height:11px; }
  .spark-two { right:21px; bottom:40px; }
  .cockpit-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:23px; }
  .cockpit-metric { padding:11px 5px; min-height:77px; justify-content:center; text-align:center; border-radius:12px; }
  .metric-glyph,.cockpit-metric>.ui-icon { display:none; }
  .metric-data strong { font-size:23px; }
  .metric-data>span { font-size:10px; line-height:1.35; margin-top:4px; }
  .metric-follow_up .metric-data strong { color:#a26f31; }
  .metric-upcoming .metric-data strong { color:#368788; }
  .section-heading { margin-bottom:12px; gap:8px; }
  .section-heading h2 { font-size:21px; }
  .section-heading .eyebrow { font-size:8px; margin-bottom:1px; }
  .section-heading .section-link { font-size:11px; }
  .client-toolbar { flex-direction:column; gap:10px; align-items:stretch; margin-bottom:14px; }
  .client-tabs { gap:2px; padding:3px; border-radius:11px; }
  .client-tabs a { flex:1; min-height:36px; padding:5px 6px; font-size:11px; gap:3px; }
  .client-tabs a>span { font-size:9px; }
  .client-search { width:100%; min-height:42px; }
  .client-grid { grid-template-columns:1fr; gap:13px; }
  .client-card { padding:17px; border-radius:18px; }
  .client-card-head { margin-bottom:14px; gap:10px; }
  .client-identity h3 { font-size:17px; }
  .client-note { font-size:12px; }
  .client-email { font-size:10px; }
  .client-card-head .badge { font-size:10px; }
  .premium-panel { padding:12px; }
  .premium-heading { font-size:11px; }
  .premium-state { font-size:10px; }
  .premium-summary { font-size:12px; margin:8px 0; }
  .premium-expiry { font-size:11px; padding-top:8px; }
  .premium-expiry dd { font-size:13px; }
  .client-freshness { margin:10px 0; font-size:10px; }
  .client-reason { font-size:11px; padding:8px 9px; margin-bottom:10px; }
  .client-open { font-size:12px; min-height:40px; }
  .resume-order { min-height:40px; font-size:11px; }
  .cockpit-secondary { grid-template-columns:1fr; gap:14px; margin-top:23px; }
  .cockpit-secondary .card { padding:18px; border-radius:18px; }
  .cockpit-footnote { font-size:9px; align-items:flex-start; text-align:center; }
  .cockpit-empty { padding:28px 18px; }
}
.client-note summary { padding:0; color:inherit; font-size:inherit; font-weight:400; }
.client-note>p { margin:5px 0 0; }
@media(min-width:641px) {
  .cockpit-hero { padding-top:24px; padding-bottom:24px; }
  .cockpit-metrics { margin-bottom:24px; }
  .cockpit-metric { padding-top:15px; padding-bottom:15px; }
  .section-heading { margin-bottom:14px; }
}
.metric-data>.metric-short { display:none; }
/* Keep the first client's identity, Premium and action in the thumb-reachable screen. */
@media(max-width:640px) {
  .cockpit-hero { min-height:110px; padding:16px 20px; }
  .hero-copy h1 { font-size:28px; line-height:1.2; margin-bottom:4px; }
  .hero-copy .eyebrow { margin-bottom:6px; }
  .cockpit-page .container { padding-top:14px; }
  .cockpit-metrics { margin-bottom:8px; }
  .cockpit-metric { min-height:65px; padding:8px 4px; }
  .metric-data>.metric-full { display:none; }
  .metric-data>.metric-short { display:block; font-size:9px; }
  .section-heading { margin-bottom:10px; }
  .section-heading .eyebrow { display:none; }
  .client-toolbar { gap:8px; margin-bottom:12px; }
  .client-card { padding:13px 17px; }
  .client-card-head { margin-bottom:10px; }
  .client-email { display:none; }
  .premium-summary { margin:6px 0; }
  .client-card-footer { padding-top:6px; }
}
.loading-surface { min-height:72px; border-radius:12px; padding:16px; background:linear-gradient(100deg,#f1effa 20%,#fff 45%,#f1effa 70%); background-size:240% 100%; animation:loading-sheen 1.4s ease-in-out infinite; }
@keyframes loading-sheen { to { background-position:240% 0; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Review: readable secondary text and comfortable mobile labels. */
.client-email { color:#6b607a; font-size:12px; }
.client-freshness,.cockpit-footnote { color:#6b607a; }
.premium-expiry dt { color:#6e6079; }
@media(max-width:640px) {
  .client-freshness { font-size:12px; }
  .premium-heading,.premium-summary,.premium-expiry,.client-reason { font-size:13px; }
  .premium-state,.client-card-head .badge { font-size:12px; }
  .client-tabs a { min-height:44px; font-size:12px; }
  .topbar .main-nav .nav-link,.topbar .main-nav .nav-add { font-size:10px; }
  .client-open { min-height:44px; font-size:13px; }
  .metric-data>.metric-short { font-size:10px; }
}