/*
 * hoadon.pro — wireframe shared layout + components (static HTML, no Tailwind).
 * Requires tokens.css (palette, glass knobs). Plain-CSS port of the @utility blocks in tokens.css
 * (Tailwind v4 at-rules are ignored by browsers, so .glass etc. are re-declared here).
 *
 * Rules:  glass = chrome only (sidebar, topbar, popover, dialog, floating bulk bar).
 *         solid = every data surface (card, table, form, drawer body, invoice rendering).
 * Theme:  <html data-theme="dark" class="dark">  (wireframe.js sets both; tokens.css keys on .dark).
 * Transparency: <html class="reduce-transparency"> or [data-transparency="reduced"].
 */

/* ───────── 0. Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;font-feature-settings:"calt" 1}
h1,h2,h3,h4,p{margin:0}
h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
h2{font-size:18px;line-height:26px;font-weight:600}
h3{font-size:15px;line-height:22px;font-weight:600}
h4{font-size:13px;line-height:20px;font-weight:600}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer}
table{border-collapse:separate;border-spacing:0}
img{max-width:100%;display:block}
code,kbd,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92em}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.01em}
.muted{color:var(--muted-foreground)}
.subtle{color:var(--subtle-foreground)}
.sm{font-size:13px;line-height:20px}
.xs{font-size:12px;line-height:16px}
.strong{font-weight:600}
.r{text-align:right}.c{text-align:center}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 14px;border-radius:10px;background:var(--primary);color:var(--primary-foreground);font-weight:600}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:14px;height:14px}.ic-lg{width:20px;height:20px}.ic-xl{width:24px;height:24px}
.ok{color:var(--success)}.warn{color:var(--warning)}.bad{color:var(--destructive)}.info{color:var(--info)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid color-mix(in oklab,var(--ring) 80%,white);outline-offset:2px}

/* utilities */
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.row.top{align-items:flex-start}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.sm{gap:8px}.stack.lg{gap:20px}
.spacer{flex:1}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-main-side{grid-template-columns:minmax(0,1fr) 340px}
.g-side-main{grid-template-columns:320px minmax(0,1fr)}
.span-2{grid-column:span 2}
.hr{height:1px;background:var(--border);border:0;margin:12px 0}

/* ───────── 1. Glass (chrome only) ───────── */
.app-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 50% at 6% 0%,var(--backdrop-1),transparent 72%),
    radial-gradient(45% 42% at 100% 6%,var(--backdrop-2),transparent 70%),
    radial-gradient(70% 55% at 62% 108%,var(--backdrop-3),transparent 72%),
    var(--background)}
.glass{background-color:var(--glass-tint);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-strong{background-color:var(--glass-tint-strong);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-sheen{background-image:linear-gradient(to bottom,var(--glass-highlight),transparent 1px),radial-gradient(140% 90% at 0% 0%,var(--glass-glow),transparent 55%);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 oklch(0 0 0/.04)}
.surface-solid{background:var(--card);border:1px solid var(--border)}

/* reduced transparency / contrast fallbacks (class toggle mirrors tokens.css [data-transparency]) */
.reduce-transparency{--glass-tint:var(--popover);--glass-tint-strong:var(--popover);--glass-filter:none;--glass-border:var(--border)}
.reduce-transparency .app-backdrop{background:var(--background)}
.reduce-transparency .glass-sheen{background-image:none}
@media (prefers-contrast:more){.app-backdrop{background:var(--background)}}

/* ───────── 2. App shell ───────── */
.sidebar{position:fixed;left:12px;top:12px;bottom:12px;width:256px;border-radius:24px;display:flex;flex-direction:column;z-index:30;padding:12px;gap:4px;transition:width .2s ease}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;min-height:48px}
.logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2F6BFF,#1B55E0 60%,#0891B2);display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.45),0 4px 10px rgb(27 85 224/.35);flex:none}
.logo .ic{width:18px;height:18px;stroke-width:2.2}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--foreground)}
.brand-name b{color:var(--primary);font-weight:700}
.sb-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:0 2px}
.nav-label{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:14px 10px 4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:0 9px;height:38px;border-radius:12px;color:var(--foreground);font-weight:500;font-size:13.5px;text-decoration:none;position:relative}
.nav-item:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent);text-decoration:none}
.nav-item .ic{width:18px;height:18px;color:var(--muted-foreground)}
.nav-item[aria-current="page"]{background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--accent-foreground);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 22%,transparent)}
.nav-item[aria-current="page"] .ic{color:var(--primary)}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;line-height:20px;text-align:center;font-weight:600;background:var(--primary);color:var(--primary-foreground)}
.nav-badge.warn{background:var(--warning-tint);color:var(--warning-ink)}
.nav-badge.soft{background:color-mix(in oklab,var(--foreground) 9%,transparent);color:var(--foreground)}
.sb-foot{padding-top:8px}
.quota{border-radius:16px;padding:12px;background:var(--glass-tint-strong);border:1px solid var(--glass-border)}
.quota .q-title{font-size:12px;line-height:16px;color:var(--muted-foreground);font-weight:500}
.quota .q-val{font-size:22px;line-height:28px;font-weight:600}
.quota .q-val small{font-size:12px;font-weight:500;color:var(--muted-foreground)}
.progress{height:6px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 10%,transparent);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.progress.warn>i{background:var(--warning)}.progress.bad>i{background:var(--destructive)}.progress.ok>i{background:var(--success)}
.collapse-btn{margin-left:auto}
.app[data-collapsed] .sidebar{width:72px}
.app[data-collapsed] .main{margin-left:96px}
.app[data-collapsed] .brand-name,.app[data-collapsed] .nav-item span,.app[data-collapsed] .nav-label,.app[data-collapsed] .nav-badge,.app[data-collapsed] .quota .q-full,.app[data-collapsed] .collapse-btn{display:none}
.app[data-collapsed] .nav-item{justify-content:center;padding:0}
.app[data-collapsed] .nav-label{display:block;height:1px;padding:0;margin:8px 10px;background:var(--border);font-size:0}
.app[data-collapsed] .quota{padding:8px;text-align:center}
.app[data-collapsed] .quota .q-val{font-size:13px;line-height:18px}
.app[data-collapsed] .sb-brand{justify-content:center;padding-left:0;padding-right:0}

.main{margin-left:280px;padding:12px 16px 48px 0;min-width:0}
.topbar{position:sticky;top:12px;z-index:25;height:56px;border-radius:20px;display:flex;align-items:center;gap:10px;padding:0 10px 0 8px}
.icon-btn{width:36px;height:36px;border-radius:12px;display:inline-grid;place-items:center;background:transparent;border:0;color:var(--foreground);position:relative}
.icon-btn:hover{background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--destructive);box-shadow:0 0 0 2px var(--glass-tint-strong)}
.org-switch{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 6px;border-radius:14px;border:1px solid transparent;background:transparent;text-align:left;max-width:340px}
.org-switch:hover,.org-switch[aria-expanded="true"]{background:color-mix(in oklab,var(--foreground) 6%,transparent);border-color:var(--glass-border)}
.org-av{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#F7B500,#FF9500);color:#2B1B00;font-weight:700;font-size:12px;display:grid;place-items:center;flex:none}
.org-av.blue{background:linear-gradient(135deg,#6C9CFF,#1B55E0);color:#fff}
.org-av.cyan{background:linear-gradient(135deg,#38D3F0,#0891B2);color:#04222B}
.org-av.violet{background:linear-gradient(135deg,#A78BFA,#7C5CFA);color:#fff}
.org-switch .o-name{font-weight:600;font-size:13px;line-height:18px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-switch .o-sub{font-size:12px;line-height:16px;color:var(--muted-foreground);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-box{display:flex;align-items:center;gap:8px;height:38px;width:300px;padding:0 8px 0 12px;border-radius:12px;border:1px solid var(--glass-border);background:color-mix(in oklab,var(--card) 55%,transparent);color:var(--muted-foreground);font-size:13px}
.search-box input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--foreground);outline:0}
.search-box input::placeholder{color:var(--muted-foreground)}
.kbd{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--border);background:var(--secondary);font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted-foreground)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6C9CFF,#1B55E0);color:#fff;font-weight:600;font-size:12px;display:grid;place-items:center;flex:none}
.avatar.sm{width:24px;height:24px;font-size:10px}
.avatar.v2{background:linear-gradient(135deg,#38D3F0,#0891B2)}.avatar.v3{background:linear-gradient(135deg,#A78BFA,#7C5CFA)}.avatar.v4{background:linear-gradient(135deg,#FBBF24,#E08A00);color:#2B1B00}
.user-btn{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 2px;border-radius:999px;border:1px solid transparent;background:transparent}
.user-btn:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.content{padding:20px 0 0 4px;display:flex;flex-direction:column;gap:16px}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head .sub{color:var(--muted-foreground);font-size:14px;margin-top:2px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.crumbs{font-size:12px;line-height:16px;color:var(--muted-foreground);display:flex;gap:6px;align-items:center;margin-bottom:4px}
.crumbs a{color:var(--muted-foreground)}

/* popover (glass-strong overlay, 85% tint) */
.pop-wrap{position:relative}
.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:340px;border-radius:18px;padding:8px}
.popover.right{left:auto;right:0}
.pop-label{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:8px 10px 4px}
.pop-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-size:13px;color:var(--foreground);text-decoration:none;width:100%;background:transparent;border:0;text-align:left}
.pop-item:hover{background:color-mix(in oklab,var(--foreground) 7%,transparent);text-decoration:none}
.pop-item.is-active{background:color-mix(in oklab,var(--primary) 11%,transparent)}
.pop-item .grow{flex:1;min-width:0}
.pop-item .t{font-weight:600;display:block;line-height:18px}
.pop-item .s{font-size:12px;color:var(--muted-foreground);display:block;line-height:16px}
.pop-sep{height:1px;background:var(--glass-border);margin:6px 4px;opacity:.7}
.pop-indent{padding-left:32px}

/* ───────── 3. Surfaces ───────── */
.card{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px oklch(0.25 0.08 262/.05)}
.card-head{display:flex;align-items:center;gap:8px;padding:14px 16px 0}
.card-head h3{flex:1}
.card-body{padding:14px 16px 16px}
.card-foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-foreground)}
.card.pad{padding:16px}
.card.flush .card-body{padding:0}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.kpi .k-label{font-size:13px;line-height:20px;color:var(--muted-foreground);display:flex;align-items:center;gap:6px}
.kpi .k-val{font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.02em}
.kpi .k-val small{font-size:13px;font-weight:500;color:var(--muted-foreground);letter-spacing:0}
.kpi .k-sub{font-size:12px;line-height:20px;color:var(--muted-foreground)}
.kpi .k-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:var(--accent-foreground);margin-left:auto}
.kpi .k-ic.ok{background:var(--success-tint);color:var(--success-ink)}
.kpi .k-ic.warn{background:var(--warning-tint);color:var(--warning-ink)}
.kpi .k-ic.bad{background:var(--destructive-tint);color:var(--destructive-ink)}
.delta{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.delta.up{color:var(--success-ink)}.delta.down{color:var(--destructive-ink)}
.callout{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:12px;font-size:13px;line-height:20px;border:1px solid transparent;background:var(--info-tint);color:var(--info-ink);border-color:color-mix(in oklab,var(--info) 25%,transparent)}
.callout .ic{margin-top:2px;width:16px;height:16px}
.callout.warn{background:var(--warning-tint);color:var(--warning-ink);border-color:color-mix(in oklab,var(--warning) 30%,transparent)}
.callout.bad{background:var(--destructive-tint);color:var(--destructive-ink);border-color:color-mix(in oklab,var(--destructive) 30%,transparent)}
.callout.ok{background:var(--success-tint);color:var(--success-ink);border-color:color-mix(in oklab,var(--success) 30%,transparent)}
.callout b{font-weight:600}
.callout .grow{flex:1}

/* ───────── 4. Controls ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid transparent;background:var(--secondary);color:var(--secondary-foreground);white-space:nowrap;text-decoration:none;line-height:1}
.btn:hover{background:color-mix(in oklab,var(--secondary) 80%,var(--foreground) 6%);text-decoration:none}
.btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 1px 2px rgb(27 85 224/.35)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-outline{background:var(--card);border-color:var(--input);color:var(--foreground)}
.btn-outline:hover{background:var(--secondary)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-ghost:hover{background:color-mix(in oklab,var(--foreground) 7%,transparent)}
.btn-danger{background:var(--destructive-tint);color:var(--destructive-ink)}
.btn-danger:hover{background:color-mix(in oklab,var(--destructive-tint) 80%,var(--destructive) 14%)}
.btn-link{background:transparent;color:var(--primary);padding:0 4px;height:auto}
.btn-sm{height:30px;padding:0 10px;font-size:12px;border-radius:10px}
.btn-lg{height:42px;padding:0 18px;font-size:14px}
.btn-icon{width:32px;padding:0}.btn-icon.btn-sm{width:28px}
.input,.select,.textarea{height:36px;width:100%;border-radius:10px;border:1px solid var(--input);background:var(--card);color:var(--foreground);font:inherit;font-size:13px;padding:0 12px}
.textarea{height:auto;padding:8px 12px;line-height:20px}
.input::placeholder{color:var(--subtle-foreground)}
.input.mono{font-family:"JetBrains Mono",monospace}
.select{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2346587A' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.label{font-size:13px;font-weight:500;line-height:18px}
.hint{font-size:12px;line-height:16px;color:var(--muted-foreground)}
.input-group{position:relative;display:flex;align-items:center}
.input-group .ic{position:absolute;left:10px;color:var(--muted-foreground)}
.input-group .input{padding-left:32px}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--primary);margin:0;flex:none}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:20px}
.check input{margin-top:2px}
.switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--input);flex:none;display:inline-block}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--primary)}.switch.on::after{left:18px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--input);background:var(--card);font-size:12px;font-weight:500;color:var(--foreground);white-space:nowrap}
.chip.is-on{background:var(--accent);border-color:color-mix(in oklab,var(--primary) 40%,transparent);color:var(--accent-foreground)}
.chip .x{color:var(--muted-foreground)}
.chip.dashed{border-style:dashed;color:var(--muted-foreground)}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--secondary);gap:2px}
.seg button{border:0;background:transparent;height:28px;padding:0 12px;border-radius:9px;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--foreground);box-shadow:0 1px 2px oklch(0.25 0.08 262/.15)}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:transparent;font-size:13px;font-weight:500;color:var(--muted-foreground);position:relative;white-space:nowrap;border-radius:10px 10px 0 0}
.tab:hover{color:var(--foreground);background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.tab[aria-selected="true"]{color:var(--accent-foreground);font-weight:600}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--primary)}
.tab .count{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--secondary);color:var(--muted-foreground)}
.tab[aria-selected="true"] .count{background:var(--accent);color:var(--accent-foreground)}
.tabs.views{border:0;gap:6px;padding:0}
.tabs.views .tab{height:32px;border-radius:999px;padding:0 12px;border:1px solid transparent}
.tabs.views .tab[aria-selected="true"]{background:var(--card);border-color:color-mix(in oklab,var(--primary) 35%,transparent);box-shadow:0 1px 2px oklch(0.25 0.08 262/.1)}
.tabs.views .tab[aria-selected="true"]::after{display:none}
[role=tabpanel][hidden]{display:none}

/* ───────── 5. Badges (status palette: always icon/dot + label) ───────── */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;background:var(--secondary);color:var(--muted-foreground)}
.badge .ic{width:12px;height:12px;stroke-width:2.4}
.badge::before{content:none}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-success{background:var(--success-tint);color:var(--success-ink)}
.b-warning{background:var(--warning-tint);color:var(--warning-ink)}
.b-danger{background:var(--destructive-tint);color:var(--destructive-ink)}
.b-info{background:var(--info-tint);color:var(--info-ink)}
.b-brand{background:color-mix(in oklab,var(--brand) 14%,var(--card));color:var(--brand-text)}
.b-violet{background:color-mix(in oklab,var(--chart-3) 16%,var(--card));color:color-mix(in oklab,var(--chart-3) 70%,var(--foreground))}
.b-outline-danger{background:transparent;color:var(--destructive-ink);box-shadow:inset 0 0 0 1px var(--destructive)}
.b-neutral{background:var(--secondary);color:var(--muted-foreground)}
.b-outline{background:transparent;box-shadow:inset 0 0 0 1px var(--input);color:var(--muted-foreground)}
.badge.sm{height:20px;font-size:11px;padding:0 7px}
.badge-free{background:linear-gradient(135deg,color-mix(in oklab,var(--brand) 18%,var(--card)),color-mix(in oklab,var(--primary) 14%,var(--card)));color:var(--accent-foreground);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 25%,transparent)}
.stack-badges{display:flex;flex-wrap:wrap;gap:4px}
/* source chips */
.src{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:8px;font-size:12px;font-weight:500;background:var(--secondary);color:var(--foreground)}
.src .ic{width:13px;height:13px;color:var(--muted-foreground)}
.src.cqt{background:var(--info-tint);color:var(--info-ink)}.src.cqt .ic{color:var(--info-ink)}
.src.mail{background:color-mix(in oklab,var(--brand) 13%,var(--card));color:var(--brand-text)}.src.mail .ic{color:var(--brand-text)}
.src.up{background:color-mix(in oklab,var(--chart-3) 13%,var(--card));color:color-mix(in oklab,var(--chart-3) 65%,var(--foreground))}.src.up .ic{color:inherit}
.src.hand{background:var(--secondary);color:var(--muted-foreground)}
/* 3-way reconciliation indicator: CQT · Mail · PDF */
.tri{display:inline-flex;gap:3px;align-items:center}
.tri i{font-style:normal;display:inline-grid;place-items:center;height:20px;min-width:28px;padding:0 4px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.02em;background:var(--success-tint);color:var(--success-ink)}
.tri i.miss{background:transparent;color:var(--warning-ink);box-shadow:inset 0 0 0 1px var(--warning);border:0;background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in oklab,var(--warning) 14%,transparent) 4px 8px)}
.tri i.na{background:var(--secondary);color:var(--subtle-foreground)}
.tri i.bad{background:var(--destructive-tint);color:var(--destructive-ink)}

/* ───────── 6. Data table (solid, sticky header) ───────── */
.table-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative}
.table-wrap{overflow:auto;max-width:100%}
.table{width:100%;font-size:13px;line-height:18px}
.table th{position:sticky;top:0;z-index:2;background:var(--secondary);color:var(--muted-foreground);font-weight:600;font-size:12px;line-height:16px;text-align:left;height:40px;padding:0 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.table th .ic{width:12px;height:12px;vertical-align:-1px;opacity:.7}
.table td{height:44px;padding:6px 12px;border-bottom:1px solid var(--border);vertical-align:middle;background:var(--card)}
.table tr:last-child td{border-bottom:0}
.table.two td{height:52px}
.table.compact td{height:40px;padding-top:4px;padding-bottom:4px}
.table tbody tr:hover td{background:color-mix(in oklab,var(--accent) 45%,var(--card))}
.table tbody tr.is-selected td{background:var(--accent)}
.table td.num,.table th.num{text-align:right}
.table th.chk,.table td.chk{width:44px;padding-left:16px;padding-right:0}
.table .cell-two{display:flex;flex-direction:column;gap:1px;min-width:0}
.table .cell-two .p{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table .cell-two .s{font-size:12px;line-height:16px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table .neg{color:var(--destructive-ink)}
.table tfoot td{background:var(--secondary);font-weight:600;border-top:1px solid var(--border)}
.row-actions{display:flex;gap:2px;justify-content:flex-end;opacity:.0}
.table tbody tr:hover .row-actions,.table tbody tr.is-selected .row-actions{opacity:1}
.sticky-r{position:sticky;right:0;box-shadow:-8px 0 8px -8px oklch(0.25 0.08 262/.12)}
.sticky-l{position:sticky;left:0}
.table th.sticky-r,.table th.sticky-l{z-index:3}
.table td.sticky-r,.table td.sticky-l{z-index:1}
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-bar .search-field{width:320px}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.pagination{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted-foreground);background:var(--card)}
.page-btn{min-width:30px;height:30px;padding:0 6px;border-radius:9px;border:1px solid transparent;background:transparent;font-size:12px;font-weight:600;color:var(--foreground)}
.page-btn:hover{background:var(--secondary)}
.page-btn[aria-current="page"]{background:var(--accent);color:var(--accent-foreground);border-color:color-mix(in oklab,var(--primary) 30%,transparent)}
/* floating bulk action bar = chrome => glass */
.bulk-dock{position:sticky;bottom:20px;height:0;z-index:20;display:flex;justify-content:center;pointer-events:none}
.bulkbar{pointer-events:auto;transform:translateY(-100%);display:flex;align-items:center;gap:6px;padding:6px 8px 6px 14px;border-radius:18px;white-space:nowrap;height:48px;align-self:flex-start;margin-top:0}
.bulkbar .sel{font-size:13px;font-weight:600;margin-right:6px}
.bulkbar .sep{width:1px;height:20px;background:var(--glass-border);margin:0 4px}

/* ───────── 7. Drawer / dialog / scrim ───────── */
.scrim{position:fixed;inset:0;z-index:80;background:oklch(0.2 0.06 262/.42);display:flex;align-items:center;justify-content:center;padding:24px}
.scrim.right{justify-content:flex-end;align-items:stretch;padding:12px}
.dialog{width:520px;max-width:100%;max-height:calc(100vh - 48px);overflow:auto;border-radius:24px;padding:0;color:var(--foreground)}
.dialog.lg{width:640px}
.dialog-head{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 8px}
.dialog-head h2{flex:1}
.dialog-body{padding:8px 24px 16px;display:flex;flex-direction:column;gap:14px}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 24px 20px}
/* drawer: container is chrome (glass header), body is solid data surface */
.drawer{width:480px;max-width:100%;border-radius:24px;display:flex;flex-direction:column;overflow:hidden}
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.drawer-body{flex:1;overflow:auto;background:var(--card);border-top:1px solid var(--border);padding:16px}
.drawer-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;background:var(--card);border-top:1px solid var(--border)}
/* inline detail pane (non-overlay) */
.pane{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;min-width:0}
.pane-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.pane-body{padding:16px;overflow:auto}
.dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 12px;font-size:13px;line-height:20px}
.dl dt{color:var(--muted-foreground)}
.dl dd{margin:0;min-width:0}

/* ───────── 8. Empty state, steps, tree, timeline, misc ───────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 24px;max-width:460px;margin:0 auto}
.empty .illo{width:200px;height:150px;object-fit:cover;border-radius:24px;mix-blend-mode:multiply}
[data-theme="dark"] .empty .illo,[data-theme="dark"] .illo-frame img{mix-blend-mode:normal;opacity:.92;filter:saturate(.9) brightness(.82)}
.empty h3{font-size:16px;margin-top:6px}
.empty p{color:var(--muted-foreground);font-size:13px;line-height:20px}
.illo-frame{border-radius:20px;overflow:hidden;background:var(--background)}
.illo-frame img{mix-blend-mode:multiply}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:12px;padding:10px 0;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:13px;top:38px;bottom:-8px;width:2px;background:var(--border)}
.step .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--secondary);color:var(--muted-foreground);flex:none}
.step.done .n{background:var(--success);color:#fff}
.step.cur .n{background:var(--primary);color:var(--primary-foreground);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 18%,transparent)}
.step .t{font-weight:600;line-height:20px}
.step .d{font-size:13px;color:var(--muted-foreground);line-height:20px}
.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.tree ul::before{content:"";position:absolute;left:10px;top:0;bottom:14px;width:1px;background:var(--border)}
.tree-node{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 10px;border-radius:10px;position:relative}
.tree ul>li>.tree-node::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:1px;background:var(--border)}
.tree-node:hover{background:color-mix(in oklab,var(--accent) 45%,transparent)}
.timeline{list-style:none;margin:0;padding:0}
.tl{display:flex;gap:12px;position:relative;padding-bottom:14px}
.tl:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--border)}
.tl .pt{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-foreground);flex:none}
.tl .pt .ic{width:12px;height:12px}
.tl .pt.ok{background:var(--success-tint);color:var(--success-ink)}.tl .pt.warn{background:var(--warning-tint);color:var(--warning-ink)}.tl .pt.bad{background:var(--destructive-tint);color:var(--destructive-ink)}
.tl .t{font-size:13px;font-weight:500;line-height:20px}
.tl .d{font-size:12px;color:var(--muted-foreground);line-height:16px}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%;align-items:stretch}
.bars .b i{display:block;border-radius:4px 4px 2px 2px;background:var(--success)}
.bars .b i.s2{background:var(--warning);border-radius:2px}.bars .b i.s3{background:var(--destructive);border-radius:2px}
.bars .l{font-size:11px;text-align:center;color:var(--muted-foreground);margin-top:4px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted-foreground);flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px;background:var(--success)}
.legend .l1::before{background:var(--chart-1)}.legend .l2::before{background:var(--warning)}.legend .l3::before{background:var(--destructive)}.legend .l4::before{background:var(--chart-3)}.legend .l5::before{background:var(--chart-2)}
.donut{--p:70;width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--chart-1) calc(var(--p)*1%),var(--secondary) 0);display:grid;place-items:center;flex:none}
.donut::after{content:"";width:78px;height:78px;border-radius:50%;background:var(--card);grid-area:1/1}
.donut>span{grid-area:1/1;z-index:1;text-align:center;font-weight:600;font-size:18px;line-height:22px}
.donut>span small{display:block;font-size:11px;font-weight:500;color:var(--muted-foreground)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--subtle-foreground);flex:none}
.status-dot.ok{background:var(--success)}.status-dot.warn{background:var(--warning)}.status-dot.bad{background:var(--destructive)}.status-dot.sync{background:var(--primary);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--primary) 50%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.toast{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:16px;font-size:13px;max-width:380px}
.copy-field{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:12px;border:1px solid var(--input);background:var(--card);font-family:"JetBrains Mono",monospace;font-size:13px}
.copy-field span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.split{display:grid;gap:16px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.sticky-top{position:sticky;top:84px}
.pill-count{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--secondary);color:var(--muted-foreground)}
.mini-table{width:100%;font-size:13px;line-height:18px}
.mini-table th{font-size:12px;font-weight:600;color:var(--muted-foreground);text-align:left;padding:6px 0;border-bottom:1px solid var(--border)}
.mini-table td{padding:9px 0;border-bottom:1px solid var(--border)}
.mini-table tr:last-child td{border-bottom:0}
.mini-table .num{text-align:right}
.mini-table th.num{text-align:right}

@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .search-box{width:200px}
}
@media print{.sidebar,.topbar{display:none}.main{margin:0}}