/* Layout: navy portal bar with the website's red-to-blue seam, left menu, wide fluid work area of white cards (same family as the department portal mockups) */
:root{
  --bg:#f2f5f8; --surface:#ffffff; --surface-2:#f7f9fb; --ink:#1f3a5f; --ink-strong:#10243a; --muted:#566b82;
  --line:#dde4ec; --accent:#2b5c8f; --accent-soft:#e7eff7; --focus:#3b7bc4;
  --navy:#1c313b; --navy-ink:#ffffff; --navy-muted:#a9bccb;
  --t1-bg:#e9f0f7; --t1-fg:#2b5c8f; --t2-bg:#c9dbee; --t2-fg:#173f68; --t3-bg:#1f3a5f; --t3-fg:#ffffff;
  --chip-yes-bg:#1f3a5f; --chip-yes-fg:#fff; --chip-no-bg:#6b2a35; --chip-no-fg:#fff; --chip-ne:#9a7b2f;
  --shadow:0 1px 2px rgba(16,36,58,.06),0 2px 8px rgba(16,36,58,.05);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e161e; --surface:#15202b; --surface-2:#1a2734; --ink:#c6d6e6; --ink-strong:#eef4fa; --muted:#8ea3b8;
  --line:#26384a; --accent:#86b4e0; --accent-soft:#1d3044; --focus:#86b4e0;
  --navy:#101c23; --navy-ink:#ffffff; --navy-muted:#93a8b8;
  --t1-bg:#1d3044; --t1-fg:#9cc2e8; --t2-bg:#2a4866; --t2-fg:#dbe9f7; --t3-bg:#c6d6e6; --t3-fg:#0e161e;
  --chip-yes-bg:#86b4e0; --chip-yes-fg:#0e161e; --chip-no-bg:#c98a95; --chip-no-fg:#1a0d10; --chip-ne:#d6b46a;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e161e; --surface:#15202b; --surface-2:#1a2734; --ink:#c6d6e6; --ink-strong:#eef4fa; --muted:#8ea3b8;
  --line:#26384a; --accent:#86b4e0; --accent-soft:#1d3044; --focus:#86b4e0;
  --navy:#101c23; --navy-ink:#ffffff; --navy-muted:#93a8b8;
  --t1-bg:#1d3044; --t1-fg:#9cc2e8; --t2-bg:#2a4866; --t2-fg:#dbe9f7; --t3-bg:#c6d6e6; --t3-fg:#0e161e;
  --chip-yes-bg:#86b4e0; --chip-yes-fg:#0e161e; --chip-no-bg:#c98a95; --chip-no-fg:#1a0d10; --chip-ne:#d6b46a;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--accent)}
.top{background:var(--navy);color:var(--navy-ink);display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:34px;width:auto}
.brand b{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap}
.staff{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 9px;color:var(--navy-muted);white-space:nowrap}
.tsearch{flex:1;min-width:180px;max-width:520px;margin-left:auto;position:relative}
.tsearch input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 12px 8px 34px;color:#fff}
.tsearch input::placeholder{color:var(--navy-muted)}
.tsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);stroke:var(--navy-muted)}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy-muted);white-space:nowrap}
.who .av{width:28px;height:28px;border-radius:50%;background:#2f4e66;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.seam{height:3px;position:relative;background:linear-gradient(90deg,#b3262e,#1f2f6b 50%,#2b6bb3)}
.seam::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8)}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);max-width:1360px;margin:0 auto;gap:24px;padding-block:22px;padding-inline:20px}
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:12px;align-self:start}
.ngroup{display:flex;flex-direction:column;gap:2px}
.ngroup h4{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 10px}
.nav{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.nav svg{stroke:currentColor;flex:none}
.nav:hover{background:var(--accent-soft)}
.nav[aria-current="page"]{background:var(--surface);box-shadow:var(--shadow);color:var(--ink-strong);font-weight:600}
.nav .soon{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sidefoot{font-size:12px;color:var(--muted);padding:0 10px;display:flex;flex-direction:column;gap:6px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-align:left}
main{min-width:0;display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;min-width:0}
h1{font-size:24px;line-height:1.2;margin:0;color:var(--ink-strong);font-weight:700;text-wrap:balance}
h2{font-size:16px;margin:0 0 10px;color:var(--ink-strong);font-weight:700}
h3{font-size:13px;margin:0 0 8px;color:var(--ink-strong);font-weight:700;letter-spacing:.01em}
.lede{color:var(--muted);margin:6px 0 0;max-width:72ch}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inp{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;min-width:0}
.inp.grow{flex:1;min-width:200px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:13px}
.pill[aria-pressed="true"]{background:var(--t3-bg);color:var(--t3-fg);border-color:var(--t3-bg)}
.pill .n{opacity:.7;margin-left:4px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.tag.t1{background:var(--t1-bg);color:var(--t1-fg)} .tag.t2{background:var(--t2-bg);color:var(--t2-fg)} .tag.t3{background:var(--t3-bg);color:var(--t3-fg)}
.tag.o{border:1px solid var(--line);color:var(--muted);font-weight:500}
.list{display:flex;flex-direction:column}
.lrow{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr) 28px;gap:14px;align-items:center;padding:11px 8px;border-top:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;width:100%}
.lrow:hover{background:var(--surface-2)}
.lrow.head{cursor:default;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-top:0;padding-top:4px}
.lrow.head:hover{background:none}
.dname{font-weight:600;color:var(--ink-strong)}
.dsub{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.small{font-size:12.5px;color:var(--muted)}
.chev{stroke:var(--muted)}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 22px;margin-top:14px}
.fact .k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fact .v{color:var(--ink-strong);font-weight:500}
.advis{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:8px;margin-top:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink-strong);border-bottom-color:var(--accent)}
.kv{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:0}
.kv>div{padding:9px 0;border-top:1px solid var(--line)}
.kv .k{color:var(--ink-strong);font-weight:600;padding-right:14px}
.kv .k small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-top:1px solid var(--line)}
thead th{border-top:0;font-size:12.5px;color:var(--ink-strong);background:var(--surface-2)}
thead th small{display:block;font-weight:400;color:var(--muted);font-size:11px}
td.k{font-weight:600;color:var(--ink-strong);width:170px}
.cite{color:var(--muted);font-size:11px;white-space:nowrap}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.chip.y{background:var(--chip-yes-bg);color:var(--chip-yes-fg)} .chip.n{background:var(--chip-no-bg);color:var(--chip-no-fg)}
.chip.e{border:1px solid var(--chip-ne);color:var(--chip-ne)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sec{margin-top:18px}
.sec:first-child{margin-top:4px}
.files{display:flex;flex-direction:column}
.file{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.file svg{stroke:var(--accent)}
.file .fn{overflow-wrap:anywhere}
.note{font-size:12.5px;color:var(--muted)}
.ask{display:flex;flex-direction:column;gap:10px}
textarea.inp{width:100%;min-height:74px;resize:vertical}
.btn{background:var(--t3-bg);color:var(--t3-fg);border:0;border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.55;cursor:default}
.sugs{display:flex;gap:6px;flex-wrap:wrap}
.sug{border:1px dashed var(--line);background:var(--surface-2);border-radius:999px;padding:5px 11px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.qa{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.q{font-weight:600;color:var(--ink-strong)}
.a{white-space:normal}
.a p{margin:0 0 6px} .a ul{margin:0 0 6px;padding-left:20px}
.thinking{color:var(--muted)}
.planned{display:flex;flex-direction:column;gap:10px}
.empty{padding:24px 8px;color:var(--muted)}
/* sign-in mock */
.signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:440px}
.signin .l{background:var(--navy);color:#fff;padding:34px;display:flex;flex-direction:column;gap:14px}
.signin .l img{height:64px;width:auto;align-self:flex-start}
.signin .l h2{color:#fff;font-size:22px;margin:0}
.signin .l ul{margin:0;padding-left:18px;color:var(--navy-muted);display:flex;flex-direction:column;gap:6px}
.signin .r{background:var(--surface);padding:34px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.ms{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:11px;background:var(--surface);cursor:pointer;font-weight:600}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;padding-inline:16px}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:8px}
  .ngroup{flex-direction:row;gap:4px}
  .ngroup h4,.sidefoot{display:none}
  .nav{white-space:nowrap;width:auto}
  .lrow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .lrow .c-sys,.lrow .c-type,.lrow.head{display:none}
  .lrow .c-chev{display:none}
  .grid2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv .k{border-top:1px solid var(--line);padding-bottom:0}
  .kv .v{border-top:0;padding-top:2px}
  .signin{grid-template-columns:1fr}
  .who span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Advisor Portal additions ---- */
html,body{margin:0;padding:0}
.top .who form{margin:0}
.out{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:5px 11px;cursor:pointer;font-size:12.5px}
.out:hover{background:rgba(255,255,255,.08)}
.staff.beta{border-color:rgba(255,255,255,.55);color:#fff}
.okbox,.errbox{margin:0;border-radius:8px;padding:10px 14px;overflow-wrap:anywhere}
.okbox{background:var(--accent-soft);color:var(--ink-strong);border:1px solid var(--line)}
.errbox{background:#f7e9ec;color:#6b2a35;border:1px solid #e5c3ca;font-weight:600}
.stack{display:flex;flex-direction:column;gap:14px}
.inp{width:100%}
.inp.code{font-size:22px;letter-spacing:.3em;max-width:220px}
label{font-weight:600;font-size:13px;color:var(--ink-strong);display:block;margin-bottom:5px}
.authwrap{max-width:980px;margin:48px auto;padding:0 16px}
.signin .l a{color:#fff}
.signin .l .lead{margin:0;color:var(--navy-muted)}
.signin .l .fine{font-size:12.5px;color:var(--navy-muted);margin-top:auto}
.signin .r h1{margin:0}
.solo{max-width:560px;margin:60px auto;padding:0 16px}
.solologo{height:60px;width:auto;align-self:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.ghost:hover{background:var(--surface-2)}
/* home */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.qa-tile{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;color:var(--ink)}
.qa-tile:hover{border-color:var(--accent);background:var(--accent-soft)}
.qa-tile svg{stroke:var(--accent);flex:none;margin-top:2px}
.qa-tile b{display:block;color:var(--ink-strong);font-size:14px}
.qa-tile span{font-size:12.5px;color:var(--muted)}
.mini{display:flex;flex-direction:column}
.mini button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 2px;cursor:pointer;color:var(--ink)}
.mini button:hover{background:var(--surface-2)}
.mini button:first-child{border-top:0}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.road div{border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
.road b{color:var(--ink-strong)}
.road p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
/* documents */
.file a{color:var(--ink-strong);font-weight:600;text-decoration:none}
.file a:hover{text-decoration:underline}
.file .missing{color:var(--muted)}
/* search results (Ask without written answers) */
.hit{border-top:1px solid var(--line);padding:9px 0}
.hit .where{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hit mark{background:var(--t2-bg);color:var(--t2-fg);border-radius:3px;padding:0 2px}
.hitgroup{margin-top:12px}
.hitgroup h3 button{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
/* report a correction */
dialog{border:0;border-radius:12px;padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:0 10px 40px rgba(0,0,0,.25);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(16,36,58,.45)}
dialog form{padding:20px;display:flex;flex-direction:column;gap:12px}
.idlebar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;z-index:5}
.idlebar button{background:#fff;color:var(--navy);border:0;border-radius:6px;padding:6px 12px;font-weight:600;cursor:pointer}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{max-width:100%;min-width:0}
  .top{padding:10px 16px}
  .top .staff:not(.beta){display:none}
  .brand b{font-size:15px}
  .tsearch{order:3;flex-basis:100%;max-width:none}
  .sidefoot{display:none}
  .authwrap{margin:20px auto}
  .signin .l,.signin .r{padding:24px}
}
a.qa-tile{text-decoration:none}

/* Advisor Home, area pages and blueprint */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.qa-t{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--ink);min-height:84px}
.qa-t:hover{border-color:var(--accent)}
.qa-t svg{stroke:var(--accent)}
.qa-t b{color:var(--ink-strong);font-size:14px}
.qa-t span{font-size:12px;color:var(--muted)}
.qa-t.soon{border-style:dashed}
.mini{display:flex;flex-direction:column}
.mini button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink);width:100%}
.mini button:hover .dname{text-decoration:underline}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:8px 0;position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;left:10px;top:30px;bottom:-6px;width:2px;background:var(--line)}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--t3-bg);background:var(--surface);margin-top:1px}
.dot.done{background:var(--t2-bg);border-color:var(--t2-bg)}
.dot.now{background:var(--t3-bg)}
.steps .t{color:var(--ink-strong);font-weight:600}
.steps .s{display:block;font-size:12.5px;color:var(--muted)}
.layer{border-radius:10px;padding:14px;margin-top:10px}
.layer>.lt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.layer.rooms{background:var(--surface-2);border:1px solid var(--line)}
.layer.shared{background:var(--accent-soft);border:1px solid var(--line)}
.layer.found{background:var(--navy);color:#fff}
.layer.found .lt{color:var(--navy-muted)}
.layer.rooms .lt,.layer.shared .lt{color:var(--muted)}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.room{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.room h3{margin:0 0 6px}
.room button{display:flex;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:4px 0;cursor:pointer;color:var(--ink);text-align:left;font-size:13px}
.room button:hover{color:var(--accent)}
.sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.part{background:var(--surface);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--muted);min-width:0}
.part b{display:block;color:var(--ink-strong);font-size:13.5px;margin-bottom:2px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fpart{border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--navy-muted)}
.fpart b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
.arrowup{text-align:center;color:var(--muted);font-size:12px;margin-top:6px}
.blist{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.mock{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.mock .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.mock table{min-width:520px}
.mock td,.mock th{font-size:13px}
@media (max-width:900px){.rgrid{grid-template-columns:1fr 1fr}.sgrid{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:1fr}}
@media (max-width:520px){.rgrid,.sgrid{grid-template-columns:1fr}}


/* ===== 0.3.0: navy and gold theme, matching the Department Portal 1.7 ===== */
:root{--gold:#c6a14d;--gold2:#e6cb86;--ondark:#e6edf5;--ondark2:#b4c5d6;--btn1:#2a64ad;--btn2:#1b4a86;--navy:#1c313b;--ink:#1f3a5f;--ink-strong:#10243a;--muted:#566b82;--line:#e3e8ee;--surface:#fff;--surface-2:#f7f9fc;--accent:#2a64ad;--accent-soft:#eef3f9;color-scheme:light}
html{background:#0b1828}
body{background:#0b1828 url('bg.svg?v=0.4.5') center/cover fixed no-repeat;min-height:100vh;color:var(--ondark)}
/* brand line: deep red and deep blue meeting at a crisp spark */
.bar{height:3px;position:relative;display:flex;align-items:center;background:#05101e;z-index:5}
.bar i{flex:1;height:3px}
.bar i:first-child{background:linear-gradient(90deg,#4f0810 0%,#8f1220 40%,#d4202f 100%)}
.bar i:last-child{background:linear-gradient(90deg,#3a86ff 0%,#1a4fd6 40%,#0a2466 100%)}
.bar b{position:relative;flex:none;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #fff,0 0 3px 1px #d8f0ff,0 0 9px 2px rgba(92,176,255,.95),0 0 20px 5px rgba(42,120,255,.5)}
.bar b::before,.bar b::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.bar b::before{width:150px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(214,236,255,.9) 42%,#fff 50%,rgba(214,236,255,.9) 58%,rgba(255,255,255,0))}
.bar b::after{width:1px;height:15px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 50%,rgba(255,255,255,0))}
/* top bar */
.top{background:rgba(5,11,21,.9);padding:14px 32px;gap:20px}
.brand img{height:46px}
.brand .sep{width:1px;height:32px;background:#4b6473;display:inline-block}
.brand b{font-size:17px;font-weight:600;color:#fff}
.staff{color:var(--gold2);border-color:rgba(198,161,77,.55);background:rgba(198,161,77,.12)}
.staff.beta{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.tsearch input{background:rgba(255,255,255,.07);border-color:rgba(230,203,134,.35)}
.who{color:#fff}.who .av{background:linear-gradient(180deg,#e9cf8e,#c9a654);color:#1a2a3a}
.out{border-color:rgba(230,203,134,.55);border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;min-height:40px}
.out:hover{background:rgba(230,203,134,.12)}
/* layout: dark glass menu with gold section titles */
.shell{max-width:none;grid-template-columns:264px minmax(0,1fr);padding:0;gap:0;min-height:calc(100vh - 77px)}
.side{position:sticky;top:0;align-self:start;height:calc(100vh - 77px);overflow-y:auto;background:rgba(6,13,24,.7);border-right:1px solid rgba(198,161,77,.22);padding:18px 0 28px;gap:0}
.ngroup{gap:2px}
.ngroup h4{display:flex;align-items:center;gap:10px;margin:22px 16px 8px;padding:0;color:var(--gold2);font-size:11.5px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.ngroup h4::before,.ngroup h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(198,161,77,0),rgba(198,161,77,.75))}
.ngroup h4::after{background:linear-gradient(90deg,rgba(198,161,77,.75),rgba(198,161,77,0))}
.nav{margin:0 12px;width:auto;border-radius:10px;color:#d4dfeb;font-weight:500;font-size:14.5px;padding:10px 12px}
.nav svg{stroke:#9fb6cf}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav[aria-current="page"]{background:linear-gradient(90deg,rgba(198,161,77,.24),rgba(198,161,77,.05));color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.nav[aria-current="page"] svg{stroke:var(--gold2)}
.nav .soon{color:var(--gold2);opacity:.75}
.sidefoot{color:var(--ondark2);margin-top:24px;padding:14px 16px 0;border-top:1px solid rgba(198,161,77,.25)}
.sidefoot a{color:var(--gold2)}
main{padding:36px 48px 56px;gap:24px;max-width:1500px;width:100%;margin:0 auto;color:var(--ondark)}
/* page title: sits centered on the background */
.card:has(h1){background:transparent;border:0;box-shadow:none;padding:4px 0 0;color:var(--ondark);text-align:center}
.card:has(h1) h1{color:#fff;font-size:34px}
.card:has(h1) .lede{color:var(--ondark2);margin-left:auto;margin-right:auto}
.card:has(h1) .hello{justify-content:center}
.card:has(h1) .row{justify-content:center}
.card:has(h1) .back,.card:has(h1) .linkbtn{color:var(--gold2)}
.card:has(h1) .facts{text-align:left;background:#fff;border-radius:16px;padding:18px 22px;margin-top:18px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.card:has(h1) .advis{text-align:left}
.card:has(h1) .tools{background:#fff;border-radius:14px;padding:12px;margin-top:18px;box-shadow:0 12px 30px -20px rgba(0,0,0,.5)}
.card:has(h1) .pills{justify-content:center}
.card:has(h1) .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#e6edf5}
.card:has(h1) .pill[aria-pressed="true"]{background:linear-gradient(180deg,var(--btn1),var(--btn2));border-color:var(--btn2);color:#fff}
.card:has(h1) .sugs{justify-content:center}
.card:has(h1) .sug{background:rgba(255,255,255,.08);border-color:rgba(230,203,134,.4);color:#f3e6c4}
.card:has(h1) .ask{text-align:left;background:#fff;border-radius:16px;padding:20px;color:var(--ink)}
.card:has(h1) .ask label{color:var(--ink-strong)}
.card:has(h1) .qgrid,.card:has(h1) .quick{text-align:left}
.card:has(h1) .tag.o{color:var(--gold2);border-color:rgba(198,161,77,.55)}
.card:has(h1) .small{color:var(--ondark2)}
.card:has(h1) .layer,.card:has(h1) .layer *{text-align:left}
.card:has(h1) .arrowup{color:var(--ondark2);text-align:center}
.card:has(h1) .layer.rooms{background:rgba(255,255,255,.96)}
.card:has(h1) .layer.shared{background:#eef3f9}
.card:has(h1) .layer.found{background:#0d1f38;border:1px solid rgba(198,161,77,.45)}
.card:has(h1) .note{color:var(--ondark2)}
/* white cards with a navy title bar and a gold underline */
.card{--cp:24px;padding:24px;background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.65);border-radius:16px;box-shadow:0 1px 2px rgba(5,12,24,.2),0 18px 40px -22px rgba(0,0,0,.55)}
.card>h2:first-child{display:block;margin:-24px -24px 18px;padding:15px 24px;background:linear-gradient(180deg,#1f426d 0,#173559 100%);border-radius:15px 15px 0 0;box-shadow:inset 0 -2px 0 rgba(212,176,98,.9),inset 0 1px 0 rgba(255,255,255,.08);text-align:center;color:#fff;font-size:18px;letter-spacing:.03em}
.card h2,.card h3{color:var(--ink-strong)}
.card .note{color:var(--muted)}
.card .lrow.head{background:linear-gradient(180deg,#132b4a,#0d1f38);color:#e9f0f8;border-radius:10px}
thead th{background:linear-gradient(180deg,#132b4a,#0d1f38);color:#e9f0f8}
thead th small{color:#c9d6e5}
/* buttons */
.btn{background:linear-gradient(180deg,var(--btn1),var(--btn2));color:#fff;border-radius:10px;padding:12px 22px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(18,52,102,.75);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{background:linear-gradient(180deg,#3172c2,#1f5396);transform:translateY(-1px)}
.btn.ghost{background:linear-gradient(180deg,#2d5383 0,#22446c 100%);color:#fff;border:1px solid rgba(255,255,255,.12)}
/* shortcut tiles */
.qa-t,.qa-tile{background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:14px;box-shadow:0 14px 30px -22px rgba(0,0,0,.6);transition:transform .12s ease,box-shadow .12s ease;color:var(--ink)}
.qa-t svg{box-sizing:content-box;padding:9px;border-radius:12px;background:linear-gradient(180deg,#eef4fb,#dde9f6);stroke:#1b4a86}
.qa-t:hover,.qa-tile:hover{transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.7),inset 0 -3px 0 var(--gold);background:#fff}
.qa-t.soon{background:rgba(255,255,255,.9);border-style:dashed}
.qa-t b{color:var(--navy)}
/* status tags stay blue-toned on white */
.tag.t3{background:#173559;color:#fff}
/* sign-in pages: same split screen as the Department Portal */
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100vh - 3px)}
.login-l{background:linear-gradient(180deg,rgba(6,13,24,.25),rgba(6,13,24,.55));color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.login-logo{height:88px;width:auto;align-self:flex-start}
.login-l .kick{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fb6c7}
.login-l h1{color:#fff;font-size:40px;line-height:1.12;margin:0}
.feat{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.feat .ic{width:32px;height:32px;border-radius:8px;background:#2c4a5a;display:flex;align-items:center;justify-content:center}
.login-r{display:flex;align-items:center;justify-content:center;padding:56px 32px}
.login-r .panel{width:100%;max-width:440px;background:#fff;color:var(--ink);border-radius:20px;padding:44px 40px;box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(198,161,77,.25);display:flex;flex-direction:column;gap:18px}
.login-r .panel h2{font-size:28px;color:var(--navy);margin:0}
.login-r .panel .inp{min-height:46px;font-size:15px;border-color:#9fb0c1}
.login-r .panel .btn{width:100%;min-height:50px;font-size:16px}
.login-r .panel .help{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.login-r .panel .help strong{color:var(--navy)}
.login-r .panel a,.login-r .panel .linkbtn{color:var(--btn1)}
.login-foot{margin:0;font-size:14px;color:#9fb6c7}
.solo .card{text-align:left}
@media (max-width:900px){
  .login{grid-template-columns:1fr}.login-l{padding:32px 20px}.feats{display:none}.login-l h1{font-size:30px}.login-logo{height:60px}
  .login-r{padding:24px 16px}.login-r .panel{padding:28px 22px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;background:rgba(7,15,28,.85);border-right:0;border-bottom:1px solid rgba(198,161,77,.3);padding:6px}
  .ngroup h4,.sidefoot{display:none}
  .nav{margin:0;border-radius:8px}
  main{padding:22px 16px 40px}.card:has(h1) h1{font-size:27px}
  body{background-attachment:scroll}
  .top{padding:10px 16px}
}
/* department page header: left-aligned title, readable facts and notices */
.card:has(.facts){text-align:left}
.card:has(.facts) .row{justify-content:space-between}
.card:has(.facts) .lede{margin-left:0}
.card:has(h1) .facts .small,.card:has(h1) .facts .k{color:var(--muted)}
.card:has(h1) .facts .v{color:var(--ink-strong)}
.card:has(h1) .advis{color:var(--ink);background:#f6f8fb;border-left-color:var(--gold)}
.card:has(h1) .advis .cite{color:var(--muted)}
.card:has(h1) .tools .inp,.card:has(h1) .ask .inp{color:var(--ink);background:#fff}
/* 0.4.0 draft: clients, appointments, messages, client portal preview, fact finder */
.row.cen,.pills.cen{justify-content:center}
.draftnote{margin:14px auto 4px;max-width:860px;font-size:13px;color:var(--gold2);border:1px dashed rgba(198,161,77,.55);border-radius:10px;padding:8px 14px;background:rgba(198,161,77,.08)}
.card:has(h1) .row{margin-top:12px}
.card:has(h1) .tools{justify-content:center}
.card:has(h1) .tools .inp{max-width:420px;color:var(--ink);background:#fff}
.gcal{font-size:13px;color:var(--ondark2);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px}
.gcal b{color:#fff}
table.click tbody tr{cursor:pointer}
table.click tbody tr:hover td{background:var(--accent-soft)}
td.num,th.num{text-align:right}
.stackacc{padding:8px 24px}
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 4px;font-weight:700;font-size:16px;color:var(--ink-strong)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s;flex:none}
.acc[open]>summary::before{transform:rotate(45deg)}
.acc>summary .cnt{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 10px}
.accb{padding:0 4px 20px 24px}
.pcard{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface-2)}
.pcard h3{margin:0 0 8px;font-size:15px}
.arow{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 8px;cursor:pointer}
.arow:hover{border-color:var(--accent)}
.arow>span:first-child{display:flex;flex-direction:column}
.tline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.tline li{position:relative;padding:0 0 14px 6px;display:flex;flex-direction:column}
.tline li::before{content:"";position:absolute;left:-25px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.tline li.tl-in::before{background:var(--accent)}
.tline li.tl-sched::before{border-style:dashed;border-color:var(--muted)}
.tline li.tl-sched b{color:var(--muted)}
.tline p{margin:4px 0 0}
.tl-ch{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.alertcard{border:1px solid var(--gold);box-shadow:0 0 0 3px rgba(198,161,77,.25),0 18px 40px -22px rgba(0,0,0,.55)}
.alertcard>h2:first-child{background:linear-gradient(180deg,#5a2a33,#45202a)}
.homealert{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.homealert button{text-align:left;display:flex;flex-direction:column;gap:2px;background:#fbf6ea;border:1px solid var(--gold);border-radius:10px;padding:10px 14px;cursor:pointer;color:var(--ink)}
.homealert button span{font-size:13px;color:var(--muted)}
.week{display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:6px;margin-top:12px}
.dh{height:30px;font-weight:700;font-size:13px;text-align:center;color:var(--ink-strong);padding-top:6px}
.dh.today{color:#fff;background:var(--btn1);border-radius:8px}
.dbody{position:relative;height:540px;border:1px solid var(--line);border-radius:8px;background:repeating-linear-gradient(180deg,#fff 0,#fff 59px,var(--line) 59px,var(--line) 60px)}
.hcol .dbody{border:0;background:none}
.hcol span{position:absolute;right:6px;font-size:11px;color:var(--muted);transform:translateY(-2px)}
.blk{position:absolute;left:3px;right:3px;border-radius:6px;font-size:12px;padding:3px 6px;overflow:hidden;text-align:left;border:0;line-height:1.25}
.blk.busy{background:repeating-linear-gradient(135deg,#eef2f6 0,#eef2f6 6px,#e3e9ef 6px,#e3e9ef 12px);color:var(--muted)}
.blk.open{background:transparent;border:1px dashed #b9cbe0;color:var(--accent);cursor:pointer;opacity:.75}
.blk.open:hover{opacity:1;background:var(--accent-soft)}
.blk.appt{background:linear-gradient(180deg,#1f426d,#173559);color:#fff;cursor:pointer;box-shadow:inset 3px 0 0 var(--gold);display:flex;flex-direction:column}
.blk.appt.warn{background:linear-gradient(180deg,#5a2a33,#45202a)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;text-align:left;color:var(--ink)}
.tcard h3{margin:0 0 2px;font-size:15px}
.tcard p{margin:6px 0}
.tcard.pick{cursor:pointer}
.tcard.pick:hover,.tcard.sel{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--gold)}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.flow p{margin:2px 0 0}
.stepn{width:30px;height:30px;border-radius:50%;background:var(--btn2);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bstep{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);color:var(--muted)}
.bstep:first-of-type{border-top:0}
.bstep.on,.bstep.done{color:var(--ink-strong)}
.bstep:not(.on):not(.done) .stepn{background:#c3cfdc}
.bstep.done .stepn{background:var(--gold)}
.bstep .linkbtn{margin-left:auto}
.slots{display:grid;gap:8px}
.sday{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sday b{width:130px}
.pill.selp{background:var(--btn1);color:#fff;border-color:var(--btn1)}
label.chk{display:flex;gap:8px;align-items:center;margin-top:12px}
.checks{display:grid;gap:6px;max-height:280px;overflow:auto}
.checks label{display:flex;gap:8px;align-items:flex-start}
.msgprev{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2);margin-bottom:10px;font-size:13.5px}
.msgprev ul{margin:4px 0 8px;padding-left:20px}
.msgprev p{margin:6px 0}
.msgprev.sms{background:#e9f0f7;border-radius:16px 16px 16px 4px;max-width:420px}
.mph{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fakebtn{display:inline-block;background:var(--btn1);color:#fff;border-radius:8px;padding:6px 14px;font-weight:600}
.checkl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checkl li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#fff}
.checkl li>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.checkl li.got{background:var(--surface-2)}
.checkl li.over{border-color:var(--accent);background:var(--accent-soft)}
.cbox{width:22px;height:22px;border-radius:6px;border:2px solid #b9cbe0;display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:800;color:#fff}
.got .cbox{background:var(--btn2);border-color:var(--btn2)}
.btn.sm{padding:6px 12px;font-size:13px;cursor:pointer}
.cportal{max-width:760px;margin:0 auto;width:100%}
.cphead{display:flex;justify-content:space-between;gap:12px;margin:-24px -24px 18px;padding:14px 24px;background:var(--navy);color:#fff;border-radius:15px 15px 0 0;box-shadow:inset 0 -3px 0 var(--gold)}
.cph2{margin:0 0 4px;font-size:20px}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0 10px}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--btn1),var(--btn2))}
.ffgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 18px}
.ffl{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-strong)}
@media (max-width:900px){.week{grid-template-columns:44px repeat(5,minmax(70px,1fr));overflow-x:auto}.sday b{width:100%}.accb{padding-left:4px}}

/* 0.4.2 cheat sheet page: full sheet like the PDF, jump bar, cleaner documents */
.jump{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;margin:-6px 0 8px;background:#fff;border-bottom:1px solid var(--line)}
.jbtn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-strong);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.jbtn:hover,.jbtn[aria-current="true"]{border-color:var(--btn1);background:var(--accent-soft);color:var(--btn2)}
.jbtn.pdf{margin-left:auto;background:linear-gradient(180deg,var(--btn1),var(--btn2));color:#fff;border-color:var(--btn2)}
.sheet .ssec{margin-top:22px}
.sheet .ssec:first-child{margin-top:8px}
.sbar{margin:0 0 4px;padding:9px 14px;background:#1c313b;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center;border-left:4px solid var(--gold);border-radius:4px;scroll-margin-top:70px}
.ssub{margin:16px 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-strong);border-left:3px solid var(--gold);padding-left:8px}
.skv{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr)}
.skv .sk,.skv .sv{padding:10px 12px;border-bottom:1px solid var(--line)}
.skv .sk{font-weight:700;color:var(--ink-strong);font-size:13px}
.skv .sk small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.skv .sv{font-size:13.5px}
.sheet table th small{display:block;font-weight:400}
.sheet td,.sheet th{font-size:13px;vertical-align:top}
.sheetnote{margin:8px 2px}
.snotes{margin-top:12px;background:#fbf8ef;border-left:3px solid var(--gold);padding:10px 14px;border-radius:4px}
.snotes p{margin:6px 0;font-size:13px}
.snh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mouq{margin:0 0 6px;font-size:13px;line-height:1.55;white-space:pre-line}
.dgroup{margin-top:18px}
.dgroup:first-child{margin-top:4px}
.dlist{display:flex;flex-direction:column}
.drow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.drow svg{stroke:var(--accent)}
.drow .dmain{display:flex;flex-direction:column;min-width:0}
.drow .dmain a,.drow .dmain>span:first-child{color:var(--ink-strong);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.drow .dmain a:hover{text-decoration:underline}
.drow.off .dmain>span:first-child{color:var(--muted);font-weight:500}
.drow.off svg{stroke:#b9c6d4}
.dopen{border:1px solid var(--btn1);color:var(--btn1);border-radius:8px;padding:5px 14px;font-weight:600;font-size:13px;text-decoration:none}
.dopen:hover{background:var(--btn1);color:#fff}
@media (max-width:900px){.skv{grid-template-columns:1fr}.skv .sk{border-bottom:0;padding-bottom:0}.jbtn.pdf{margin-left:0}}
.card .sbar{color:#fff}
.pdfview{width:100%;height:calc(100vh - 120px);min-height:640px;border:1px solid var(--line);border-radius:8px;background:#f2f5f8}