/* CoreBraced design system (internal app). Tokens come from core/brand.py (css_vars) as --cb-*.
   Mobile first: phones get a compact top bar + bottom tab bar; >=1024px gets the sidebar shell. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cb-bg);color:var(--cb-ink);font:15px/1.5 var(--cb-font);-webkit-font-smoothing:antialiased}
a{color:var(--cb-accent)}
:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
.cb-num{font-family:var(--cb-num);font-variant-numeric:tabular-nums}
.mute{color:var(--cb-mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.cb-app{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr)}
.cb-side{display:none}
.cb-main{min-width:0;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.cb-top{position:sticky;top:0;z-index:30;background:rgba(17,24,32,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cb-line);padding-top:env(safe-area-inset-top,0px)}
.cb-top .in{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:56px}
.cb-top .mk{width:28px;height:28px;flex:none;display:block}
.cb-top .ttl{min-width:0;display:grid;line-height:1.2}
.cb-top .ttl b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-top .ttl span{font-size:12px;color:var(--cb-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-top .sp{flex:1}
.cb-top .acts{display:flex;gap:8px;align-items:center}
.cb-bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--cb-line);color:var(--cb-silver);text-decoration:none}
.cb-bell svg{width:18px;height:18px}
.cb-bell i{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cb-warn);color:#111;font:700 11px/18px var(--cb-font);text-align:center;font-style:normal}
.cb-bell i.bad{background:var(--cb-bad)}
.cb-user{position:relative}
.cb-user summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;border:1px solid var(--cb-line);border-radius:10px;padding:5px 8px 5px 5px}
.cb-user summary::-webkit-details-marker{display:none}
.cb-ava{width:28px;height:28px;border-radius:8px;background:var(--cb-steel);color:var(--cb-ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.cb-user .nm{font-size:13px;font-weight:600;display:none}
.cb-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:12px;padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);display:grid;z-index:40}
.cb-menu .who{padding:8px 10px;font-size:12px;color:var(--cb-mute);border-bottom:1px solid var(--cb-line);margin-bottom:4px}
.cb-menu .who b{display:block;color:var(--cb-ink);font-size:14px}
.cb-menu a{display:block;padding:10px;border-radius:8px;color:var(--cb-ink);text-decoration:none;font-size:14px}
.cb-menu a:hover{background:var(--cb-panel2)}
.cb-setup{background:var(--cb-warn);color:#111;font-weight:600;font-size:14px;padding:10px 16px;text-align:center}
.cb-setup a{color:#111}

/* bottom tab bar (phones) */
.cb-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(17,24,32,.97);border-top:1px solid var(--cb-line);
  display:grid;grid-template-columns:repeat(5,1fr);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
.cb-tabs a,.cb-tabs summary{display:grid;justify-items:center;gap:2px;padding:6px 2px;color:var(--cb-mute);text-decoration:none;font-size:11px;font-weight:600;border-radius:10px;cursor:pointer;list-style:none}
.cb-tabs summary::-webkit-details-marker{display:none}
.cb-tabs svg{width:22px;height:22px}
.cb-tabs a.on{color:var(--cb-ink)}
.cb-tabs a.on svg{color:var(--cb-accent)}
.cb-tabs a.new{color:var(--cb-accent)}
.cb-tabs details{position:relative}
.cb-tabs .cb-menu{bottom:calc(100% + 10px);top:auto;right:4px}

/* sidebar (desktop) */
@media (min-width:1024px){
  .cb-app{grid-template-columns:240px minmax(0,1fr)}
  .cb-app.collapsed{grid-template-columns:72px minmax(0,1fr)}
  .cb-side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:var(--cb-panel2);border-right:1px solid var(--cb-line);padding:16px 12px}
  .cb-side .brand{display:flex;align-items:center;padding:4px 8px 18px;border-bottom:1px solid var(--cb-line);margin-bottom:12px}
  .cb-side .brand img{height:34px;width:auto;display:block}
  .cb-side .brand .m{display:none;height:30px}
  .cb-side .grp{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-mute);padding:14px 10px 6px}
  .cb-side a.it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--cb-silver);text-decoration:none;font-weight:500;font-size:14px;position:relative}
  .cb-side a.it svg{width:20px;height:20px;flex:none}
  .cb-side a.it:hover{background:var(--cb-panel);color:var(--cb-ink)}
  .cb-side a.it.on{background:var(--cb-panel);color:var(--cb-ink)}
  .cb-side a.it.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--cb-accent)}
  .cb-side a.it.on svg{color:var(--cb-accent)}
  .cb-side a.it .ext{margin-left:auto;font-size:11px;color:var(--cb-mute)}
  .cb-side .foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--cb-line);font-size:12px;color:var(--cb-mute);display:flex;align-items:center;gap:8px}
  .cb-side .foot button{margin-left:auto;background:none;border:1px solid var(--cb-line);border-radius:8px;color:var(--cb-mute);width:30px;height:30px;cursor:pointer}
  .cb-app.collapsed .cb-side .brand img.w,.cb-app.collapsed .cb-side a.it span,.cb-app.collapsed .cb-side .grp,.cb-app.collapsed .cb-side .foot span,
  .cb-app.collapsed .cb-side a.it .ext{display:none}
  .cb-app.collapsed .cb-side .brand .m{display:block}
  .cb-app.collapsed .cb-side a.it{justify-content:center}
  .cb-app.collapsed .cb-side .foot{justify-content:center}
  .cb-app.collapsed .cb-side .foot button{margin:0}
  .cb-tabs{display:none}
  .cb-main{padding-bottom:0}
  .cb-top .mk{display:none}
  .cb-top .in{padding:12px 24px}
  .cb-user .nm{display:block}
}

/* ---------- page ---------- */
.cb-page{max-width:1240px;margin:0 auto;padding:18px 16px 32px;display:grid;gap:18px}
@media (min-width:1024px){.cb-page{padding:24px}}
.cb-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.cb-head h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.cb-head p{margin:2px 0 0;color:var(--cb-mute);font-size:14px}
.cb-head .sp{flex:1}
.cb-acts{display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--cb-line);
  background:var(--cb-panel);color:var(--cb-ink);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--cb-steel)}
.btn svg{width:18px;height:18px}
.btn.pri{background:var(--cb-accent);border-color:var(--cb-accent);color:var(--cb-accent-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.big{min-height:52px;font-size:16px;padding:0 20px}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px}

.cb-card{background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:14px;min-width:0}
.cb-card > .hd{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--cb-line)}
.cb-card > .hd h2{white-space:nowrap}
.cb-card > .hd h2{margin:0;font-size:15px;font-weight:700}
.cb-card > .hd .c{font-size:12px;color:var(--cb-mute)}
.cb-card > .hd .sp{flex:1}
.cb-card > .bd{padding:14px 16px}
.cb-card > .bd.flush{padding:0}
.cb-empty{padding:18px 16px;color:var(--cb-mute);font-size:14px}

.cb-grid2{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.cb-grid2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}

/* numbers that matter: plain, labeled, no decoration */
.cb-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--cb-line);border:1px solid var(--cb-line);border-radius:14px;overflow:hidden}
@media (min-width:760px){.cb-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cb-kpi{background:var(--cb-panel);padding:12px 14px;display:grid;gap:2px;text-decoration:none;color:inherit}
.cb-kpi .l{font-size:12px;color:var(--cb-mute);font-weight:600}
.cb-kpi .v{font:600 22px/1.2 var(--cb-num);font-variant-numeric:tabular-nums}
.cb-kpi .s{font-size:12px;color:var(--cb-mute)}

/* alerts */
.cb-alerts{display:grid;gap:8px}
.cb-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;
  background:var(--cb-panel);border:1px solid var(--cb-line);border-left:4px solid var(--cb-mute)}
.cb-alert.bad{border-left-color:var(--cb-bad)} .cb-alert.warn{border-left-color:var(--cb-warn)} .cb-alert.info{border-left-color:var(--cb-accent)}
.cb-alert .ic{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cb-alert.bad .ic{color:var(--cb-bad)} .cb-alert.warn .ic{color:var(--cb-warn)} .cb-alert.info .ic{color:var(--cb-accent)}
.cb-alert b{display:block;font-size:14px}
.cb-alert span{display:block;font-size:13px;color:var(--cb-mute)}
@media (max-width:560px){.cb-alert{grid-template-columns:minmax(0,1fr)}.cb-alert .ic{display:none}}
.cb-ok{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--cb-panel);border:1px solid var(--cb-line);font-size:14px;color:var(--cb-silver)}
.cb-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cb-good)}

/* tables: real table on wide screens, stacked rows on phones */
.cb-table{width:100%;border-collapse:collapse;font-size:14px}
.cb-table th{text-align:left;font-size:12px;font-weight:600;color:var(--cb-mute);padding:10px 16px;border-bottom:1px solid var(--cb-line);white-space:nowrap}
.cb-table td{padding:11px 16px;border-bottom:1px solid var(--cb-line);vertical-align:top}
.cb-table tr:last-child td{border-bottom:0}
.cb-table td.r,.cb-table th.r{text-align:right;white-space:nowrap}
.cb-table .t1{font-weight:600}
.cb-table .t2{font-size:12px;color:var(--cb-mute)}
.cb-table a.row{color:inherit;text-decoration:none}
.cb-table tbody tr:hover{background:var(--cb-panel2)}
@media (max-width:720px){
  .cb-table thead{display:none}
  .cb-table,.cb-table tbody,.cb-table tr,.cb-table td{display:block;width:100%}
  .cb-table tr{padding:10px 16px;border-bottom:1px solid var(--cb-line)}
  .cb-table td{padding:3px 0;border:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}
  .cb-table td:not([data-l]){display:block}
  .cb-table td > .cv{text-align:right}
  .cb-table td[data-l]::before{content:attr(data-l);color:var(--cb-mute);font:600 12px var(--cb-font);white-space:nowrap}
  .cb-table td.act{padding-top:8px}
  .cb-table td.main{display:block}
}
.cb-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:99px;padding:2px 8px;border:1px solid var(--cb-line);color:var(--cb-silver);white-space:nowrap}
.cb-tag.web{color:var(--cb-accent);border-color:rgba(79,163,227,.4)}
.cb-tag.warn{color:var(--cb-warn);border-color:rgba(227,169,59,.4)}
.cb-tag.bad{color:var(--cb-bad);border-color:rgba(239,123,114,.4)}
.cb-tag.good{color:var(--cb-good);border-color:rgba(92,194,143,.4)}

/* key/value list */
.cb-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:14px;margin:0}
.cb-kv dt{color:var(--cb-mute)}
.cb-kv dd{margin:0;text-align:right}

/* forms */
.cb-form{display:grid;gap:12px}
.cb-form.row{display:flex;flex-wrap:wrap;align-items:end}
.cb-field{display:grid;gap:5px;font-size:12px;font-weight:600;color:var(--cb-mute)}
.cb-field input,.cb-input{min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--cb-line);background:var(--cb-bg);color:var(--cb-ink);font-size:16px;min-width:0;width:100%}
.cb-field input:focus{border-color:var(--cb-accent);outline:none}
.cb-check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--cb-silver);font-weight:500}
.cb-check input{width:18px;height:18px;accent-color:var(--cb-accent)}
.cb-msg{padding:12px 14px;border-radius:12px;background:rgba(79,163,227,.1);border:1px solid rgba(79,163,227,.45);font-size:14px}
.cb-msg.bad{background:rgba(239,123,114,.1);border-color:rgba(239,123,114,.5)}
.cb-msg.warn{background:rgba(227,169,59,.1);border-color:rgba(227,169,59,.5)}
@media (max-width:560px){.cb-form.row{display:grid}}

/* ---------- sign-in ---------- */
.cb-login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.cb-login .brand{padding:40px 24px 8px;display:grid;gap:10px;justify-items:start;align-content:start}
.cb-login .brand img{width:min(300px,78vw);height:auto}
.cb-login .brand .sig{color:var(--cb-silver);font-size:14px;font-weight:600;letter-spacing:.02em}
.cb-login .brand .note{display:none}
.cb-login .pane{display:grid;align-content:start;padding:18px 24px 40px}
.cb-login form{width:100%;max-width:400px;display:grid;gap:14px}
.cb-login h1{margin:0 0 4px;font-size:22px;font-weight:800}
.cb-login .sub{margin:0 0 6px;color:var(--cb-mute);font-size:14px}
.cb-login .err{margin:0;color:var(--cb-bad);font-weight:600;font-size:14px}
.cb-login .alt{font-size:13px;color:var(--cb-mute)}
.cb-login .ws{font-size:12px;color:var(--cb-mute);margin-top:6px}
.cb-login .lock{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--cb-mute)}
.cb-login .lock svg{width:14px;height:14px}
@media (min-width:900px){
  .cb-login{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-content:stretch}
  .cb-login .brand{align-content:center;padding:48px 56px;background:
     linear-gradient(135deg,transparent 0 calc(50% - 1px),rgba(184,198,208,.07) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/64px 64px,
     var(--cb-panel2);border-right:1px solid var(--cb-line)}
  .cb-login .brand img{width:380px}
  .cb-login .brand .note{display:block;color:var(--cb-mute);font-size:14px;max-width:36ch;margin-top:8px}
  .cb-login .pane{align-content:center;justify-items:center;padding:48px}
}