/* BeOne Design System — auto-generated, do not edit manually. */
/* Run: tsx src/scripts/build-css.ts */


*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}
body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ol,ul{list-style:none}


:root{
  --primary:#4f46e5;
  --primary-hover:#4338ca;
  --primary-strong:#3730a3;
  --primary-soft:rgba(79,70,229,.08);
  --ok:#16a34a;
  --ok-soft:rgba(22,163,74,.1);
  --danger:#e11d48;
  --danger-hover:#be123c;
  --danger-soft:rgba(225,29,72,.1);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,.1);
  --info:#2563eb;
  --info-soft:rgba(37,99,235,.1);
  --bg:#f4f6fa;
  --bg1:#eef1f7;
  --bg2:#e8ecf4;
  --panel:#ffffff;
  --panel-alt:#f7f8ff;
  --surface:rgba(255,255,255,.88);
  --surface-strong:#ffffff;
  --surface-soft:rgba(248,249,255,.9);
  --surface-popover:rgba(255,255,255,.98);
  --stroke:rgba(15,23,42,.10);
  --stroke2:rgba(15,23,42,.16);
  --stroke-faint:rgba(15,23,42,.05);
  --overlay-scrim:rgba(15,23,42,.4);
  --scroll-thumb:rgba(100,116,139,.3);
  --text:rgba(15,23,42,.92);
  --muted-color:rgba(15,23,42,.55);
  --muted2-color:rgba(15,23,42,.38);
  --row-zebra:rgba(248,250,252,.6);
  --row-hover:rgba(79,70,229,.03);
  --toast-ok:rgba(22,163,74,.06);
  --toast-danger:rgba(225,29,72,.06);
  --toast-warn:rgba(245,158,11,.06);
  --contrast-on-primary:#ffffff;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);
  --shadow-xl:0 24px 56px rgba(15,23,42,.16);
  --shadow-focus:0 0 0 3px rgba(79,70,229,.22);
  --shadow-popup:0 8px 24px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);
  --r-xs:6px;
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:24px;
  --r-full:999px;
  --sp-0:0;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --text-2xs:10px;
  --text-xs:11px;
  --text-sm:13px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:17px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:30px;
  --leading-tight:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;
  --z-dropdown:30;
  --z-sticky:40;
  --z-popover:50;
  --z-overlay:60;
  --z-modal:70;
  --z-toast:80;
  --z-topbar:100;
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:.12s;
  --duration:.2s;
  --duration-slow:.35s;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --primary:#818cf8;
  --primary-hover:#a5b4fc;
  --primary-strong:#c7d2fe;
  --primary-soft:rgba(129,140,248,.12);
  --ok:#4ade80;
  --ok-soft:rgba(74,222,128,.12);
  --danger:#fb7185;
  --danger-hover:#fda4af;
  --danger-soft:rgba(251,113,133,.12);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,.12);
  --info:#60a5fa;
  --info-soft:rgba(96,165,250,.12);
  --bg:#0f1117;
  --bg1:#161822;
  --bg2:#1c1f2e;
  --panel:#1a1d2b;
  --panel-alt:#1e2133;
  --surface:rgba(26,29,43,.88);
  --surface-strong:#1a1d2b;
  --surface-soft:rgba(26,29,43,.9);
  --surface-popover:rgba(26,29,43,.98);
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --stroke-faint:rgba(255,255,255,.04);
  --overlay-scrim:rgba(0,0,0,.6);
  --scroll-thumb:rgba(148,163,184,.3);
  --text:rgba(248,250,252,.92);
  --muted-color:rgba(248,250,252,.5);
  --muted2-color:rgba(248,250,252,.32);
  --row-zebra:rgba(255,255,255,.02);
  --row-hover:rgba(129,140,248,.06);
  --toast-ok:rgba(74,222,128,.08);
  --toast-danger:rgba(251,113,133,.08);
  --toast-warn:rgba(251,191,36,.08);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --shadow-xl:0 24px 56px rgba(0,0,0,.7);
  --shadow-focus:0 0 0 3px rgba(129,140,248,.3);
  --shadow-popup:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"]{
  --primary:#818cf8;
  --primary-hover:#a5b4fc;
  --primary-strong:#c7d2fe;
  --primary-soft:rgba(129,140,248,.12);
  --ok:#4ade80;
  --ok-soft:rgba(74,222,128,.12);
  --danger:#fb7185;
  --danger-hover:#fda4af;
  --danger-soft:rgba(251,113,133,.12);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,.12);
  --info:#60a5fa;
  --info-soft:rgba(96,165,250,.12);
  --bg:#0f1117;
  --bg1:#161822;
  --bg2:#1c1f2e;
  --panel:#1a1d2b;
  --panel-alt:#1e2133;
  --surface:rgba(26,29,43,.88);
  --surface-strong:#1a1d2b;
  --surface-soft:rgba(26,29,43,.9);
  --surface-popover:rgba(26,29,43,.98);
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --stroke-faint:rgba(255,255,255,.04);
  --overlay-scrim:rgba(0,0,0,.6);
  --scroll-thumb:rgba(148,163,184,.3);
  --text:rgba(248,250,252,.92);
  --muted-color:rgba(248,250,252,.5);
  --muted2-color:rgba(248,250,252,.32);
  --row-zebra:rgba(255,255,255,.02);
  --row-hover:rgba(129,140,248,.06);
  --toast-ok:rgba(74,222,128,.08);
  --toast-danger:rgba(251,113,133,.08);
  --toast-warn:rgba(251,191,36,.08);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --shadow-xl:0 24px 56px rgba(0,0,0,.7);
  --shadow-focus:0 0 0 3px rgba(129,140,248,.3);
  --shadow-popup:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
}


body{font-size:var(--text-base);line-height:var(--leading-normal)}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);letter-spacing:-.01em}
h1{font-size:var(--text-3xl);font-weight:800;line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl);font-weight:700;line-height:var(--leading-tight)}
h3{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight)}
h4{font-size:var(--text-lg);font-weight:600;line-height:var(--leading-tight)}
small{font-size:var(--text-sm)}
code,pre{font-family:var(--mono);font-size:var(--text-sm)}


/* Display */
.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}.block{display:block}.inline-block{display:inline-block}
.hidden{display:none!important}

/* Flex */
.flex-col{flex-direction:column}.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}
.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}

/* Gap */
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}.gap-8{gap:var(--sp-8)}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}
.col-span-6{grid-column:span 6/span 6}.col-span-8{grid-column:span 8/span 8}

/* Sizing */
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}
.max-w-sm{max-width:384px}.max-w-md{max-width:448px}.max-w-lg{max-width:512px}
.max-w-xl{max-width:576px}.max-w-2xl{max-width:672px}.max-w-4xl{max-width:896px}

/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}

/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}

/* Spacing — padding */
.p-0{padding:0}.p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}.p-8{padding:var(--sp-8)}
.px-0{padding-left:0;padding-right:0}.px-1{padding-left:var(--sp-1);padding-right:var(--sp-1)}.px-2{padding-left:var(--sp-2);padding-right:var(--sp-2)}.px-3{padding-left:var(--sp-3);padding-right:var(--sp-3)}.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}.px-5{padding-left:var(--sp-5);padding-right:var(--sp-5)}.px-6{padding-left:var(--sp-6);padding-right:var(--sp-6)}.px-8{padding-left:var(--sp-8);padding-right:var(--sp-8)}
.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:var(--sp-1);padding-bottom:var(--sp-1)}.py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}.py-3{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}.py-4{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}.py-5{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}.py-6{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}.py-8{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}

/* Spacing — margin */
.m-0{margin:0}.m-auto{margin:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.ml-auto{margin-left:auto}.mr-2{margin-right:var(--sp-2)}

/* Border */
.border{border:1px solid var(--stroke)}.border-b{border-bottom:1px solid var(--stroke)}.border-t{border-top:1px solid var(--stroke)}.border-l{border-left:1px solid var(--stroke)}.border-r{border-right:1px solid var(--stroke)}
.border-none{border:none}

/* Responsive — md (860px) */
@media(min-width:860px){
  .md\:flex{display:flex}.md\:hidden{display:none!important}.md\:block{display:block}
  .md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:px-6{padding-left:var(--sp-6);padding-right:var(--sp-6)}.md\:py-8{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
}

/* Responsive — lg (1200px) */
@media(min-width:1200px){
  .lg\:flex{display:flex}.lg\:hidden{display:none!important}.lg\:block{display:block}
  .lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-8{grid-column:span 8/span 8}
}


/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-size:var(--text-sm);font-weight:600;font-family:var(--font);
  border:1px solid var(--stroke2);background:var(--surface-strong);color:var(--text);
  cursor:pointer;transition:all var(--duration-fast) var(--ease);
  line-height:var(--leading-tight);text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--bg1);border-color:var(--stroke2)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active{transform:scale(.98)}

.btn-primary{background:var(--primary);color:var(--contrast-on-primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}

.btn-danger{background:var(--danger);color:var(--contrast-on-primary);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}

.btn-ghost{background:transparent;border-color:transparent;color:var(--muted-color)}
.btn-ghost:hover{background:var(--bg1);color:var(--text)}

.btn-outline{background:transparent;border-color:var(--stroke2);color:var(--text)}
.btn-outline:hover{background:var(--bg1)}

.btn-sm{padding:4px 10px;font-size:var(--text-xs);border-radius:var(--r-xs)}
.btn-lg{padding:12px 24px;font-size:var(--text-base);border-radius:var(--r)}
.btn-icon{padding:6px;width:32px;height:32px}
.btn-icon.btn-sm{width:28px;height:28px;padding:4px}

/* ── Cards ── */
.card{
  background:var(--surface-strong);border:1px solid var(--stroke);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.card-flush{box-shadow:none;border-radius:var(--r)}
.card-elevated{box-shadow:var(--shadow-md)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--stroke);
}
.card-header h3,.card-header .card-title{
  font-family:var(--font-display);font-weight:800;font-size:var(--text-md);color:var(--text);
}
.card-body{padding:var(--sp-5)}
.card-footer{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--stroke)}

/* ── Form Inputs ── */
.input,.select,.textarea{
  width:100%;padding:8px 12px;
  border:1px solid var(--stroke2);border-radius:var(--r-sm);
  font-size:var(--text-base);font-family:var(--font);
  color:var(--text);background:var(--surface-strong);
  transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  line-height:var(--leading-normal);
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.5;background:var(--bg1);cursor:not-allowed}
.input::placeholder,.textarea::placeholder{color:var(--muted2-color)}
.select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.textarea{resize:vertical;min-height:80px}

.input-group{display:flex;align-items:stretch;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--stroke2)}
.input-group .input{border:none;border-radius:0}
.input-group .input:focus{box-shadow:none}
.input-addon{display:flex;align-items:center;padding:0 12px;background:var(--bg1);font-size:var(--text-sm);color:var(--muted-color);white-space:nowrap;border-left:1px solid var(--stroke2)}
.input-addon:first-child{border-left:none;border-right:1px solid var(--stroke2)}

.label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-color);margin-bottom:var(--sp-1)}

.checkbox{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}

/* file inputs */
.file-input{
  font-size:var(--text-sm);border:1px solid var(--stroke2);border-radius:var(--r-sm);
  background:var(--surface-strong);padding:var(--sp-1) var(--sp-2);
}
.file-input::file-selector-button{
  padding:6px 12px;border-radius:var(--r-xs);border:none;
  background:var(--text);color:var(--contrast-on-primary);font-weight:700;font-size:var(--text-xs);
  cursor:pointer;margin-right:var(--sp-2);
}

/* ── Tables ── */
.ds-table{width:100%;border-collapse:separate;border-spacing:0}
.ds-table thead th{
  background:var(--bg1);font-size:var(--text-2xs);font-weight:700;
  color:var(--muted-color);text-transform:uppercase;letter-spacing:.08em;
  padding:10px 12px;text-align:left;border-bottom:1px solid var(--stroke);
  position:sticky;top:0;z-index:2;white-space:nowrap;
}
.ds-table tbody td{
  padding:10px 12px;font-size:var(--text-sm);color:var(--text);
  border-bottom:1px solid var(--stroke-faint);vertical-align:middle;
}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table tbody tr:nth-child(even){background:var(--row-zebra)}
.ds-table tbody tr:hover{background:var(--row-hover)}
.ds-table-compact thead th{padding:8px 10px;font-size:9px}
.ds-table-compact tbody td{padding:7px 10px;font-size:var(--text-xs)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--text-xs);font-weight:700;line-height:1.5;
}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-neutral{background:var(--bg1);color:var(--muted-color)}

/* ── Tabs ── */
.tab-group{
  display:flex;gap:2px;padding:3px;
  background:var(--bg1);border-radius:var(--r-sm);width:fit-content;
}
.tab-item{
  padding:6px 14px;border:none;border-radius:var(--r-xs);
  font-size:var(--text-sm);font-weight:500;font-family:var(--font);
  color:var(--muted-color);background:transparent;
  cursor:pointer;transition:all var(--duration-fast) var(--ease);white-space:nowrap;
}
.tab-item:hover{color:var(--text)}
.tab-item.active{
  background:var(--surface-strong);color:var(--primary);font-weight:600;
  box-shadow:var(--shadow-sm);
}

/* ── Pills (status filters) ── */
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;border-radius:var(--r-full);
  font-size:var(--text-xs);font-weight:700;
  border:1px solid var(--stroke2);background:var(--surface-strong);color:var(--muted-color);
  cursor:pointer;transition:all var(--duration-fast) var(--ease);
}
.pill:hover{border-color:var(--primary);color:var(--primary)}
.pill.active{background:var(--primary);border-color:var(--primary);color:var(--contrast-on-primary)}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:var(--overlay-scrim);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
}
.modal{
  background:var(--surface-strong);border:1px solid var(--stroke);
  border-radius:var(--r-xl);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;overflow:hidden;
  max-height:min(88vh,920px);
}
.modal-sm{width:min(480px,96vw)}
.modal-md{width:min(720px,96vw)}
.modal-lg{width:min(1080px,96vw)}
.modal-xl{width:min(1400px,96vw)}
.modal-full{width:min(1800px,98vw)}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--stroke);
}
.modal-header h3,.modal-title{font-weight:800;font-size:var(--text-md);color:var(--text)}
.modal-body{padding:var(--sp-4) var(--sp-5);overflow:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}
.modal-footer{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--stroke);display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2)}

/* ── Popover ── */
.popover{
  position:absolute;z-index:var(--z-popover);
  padding:var(--sp-3);border-radius:var(--r-lg);
  border:1px solid var(--stroke2);
  background:var(--surface-popover);box-shadow:var(--shadow-popup);
}
.popover-title{font-size:var(--text-md);font-weight:800;color:var(--text)}

/* ── Toast ── */
.toast{
  position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:var(--z-toast);
  max-width:480px;padding:10px 16px;
  border-radius:var(--r-sm);border:1px solid var(--stroke2);
  background:var(--surface-strong);color:var(--text);font-size:var(--text-sm);
  box-shadow:var(--shadow-md);display:none;white-space:pre-wrap;
  animation:toastIn var(--duration) var(--ease);
}
.toast.show{display:block}
.toast-ok{border-color:var(--ok);background:var(--toast-ok)}
.toast-danger{border-color:var(--danger);background:var(--toast-danger)}
.toast-warn{border-color:var(--warn);background:var(--toast-warn)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Toolbar ── */
.toolbar{
  display:flex;align-items:center;gap:var(--sp-2);
  flex-wrap:wrap;overflow:visible;
}
.toolbar>*{flex:0 1 auto;max-width:100%}

/* ── Section header ── */
.section-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-5);
}
.section-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--text)}
.section-desc{font-size:var(--text-sm);color:var(--muted-color);margin-top:var(--sp-1)}

/* ── KPI cards ── */
.kpi-grid{display:grid;gap:var(--sp-3)}
.kpi{
  border:1px solid var(--stroke);background:var(--surface-strong);
  border-radius:var(--r);padding:var(--sp-3) var(--sp-4);
}
.kpi-label{font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-color);font-weight:800}
.kpi-value{margin-top:var(--sp-1);font-size:var(--text-xl);font-weight:900;color:var(--text)}

/* ── Divider ── */
.divider{height:1px;background:var(--stroke);margin:var(--sp-4) 0}

/* ── Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar{height:8px;width:8px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--r-full)}
.custom-scrollbar::-webkit-scrollbar-track{background:transparent}

/* ── Material Symbols helper ── */
.msr{
  font-family:"Material Symbols Rounded";
  font-variation-settings:"FILL" 1;
  line-height:1;display:inline-block;vertical-align:middle;
}

/* ── Animations ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.animate-fade{animation:fadeIn var(--duration) var(--ease)}
.animate-slide-up{animation:slideUp var(--duration-slow) var(--ease)}


/* ── Sidebar Layout ── */
.bs-layout{
  display:grid;
  grid-template-columns:56px 1fr;
  min-height:calc(100vh - 48px);
}
.bs-sidebar{
  background:var(--surface-strong);
  border-right:1px solid var(--stroke);
  padding:var(--sp-3) 0;
  position:sticky;
  top:48px;
  height:calc(100vh - 48px);
  overflow-y:auto;
  overflow-x:hidden;
  z-index:var(--z-sticky);
  width:56px;
  transition:width var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.bs-sidebar:hover,.bs-sidebar:focus-within{
  width:228px;
  box-shadow:var(--shadow-lg);
  z-index:var(--z-overlay);
}
.bs-nav-text,
.bs-sidebar-label,
.bs-sidebar-footer{
  opacity:0;width:0;overflow:hidden;white-space:nowrap;pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease);
}
.bs-sidebar:hover .bs-nav-text,
.bs-sidebar:hover .bs-sidebar-label,
.bs-sidebar:hover .bs-sidebar-footer,
.bs-sidebar:focus-within .bs-nav-text,
.bs-sidebar:focus-within .bs-sidebar-label,
.bs-sidebar:focus-within .bs-sidebar-footer{
  opacity:1;width:auto;overflow:visible;pointer-events:auto;
}
.bs-sidebar-section{
  padding:0 8px;margin-bottom:var(--sp-1);
}
.bs-sidebar:hover .bs-sidebar-section,
.bs-sidebar:focus-within .bs-sidebar-section{
  padding:0 var(--sp-3);margin-bottom:var(--sp-4);
}
.bs-nav-item{
  display:flex;align-items:center;justify-content:center;
  padding:0;gap:0;width:40px;height:40px;margin:0 auto 2px;
  border-radius:var(--r-sm);
  font-size:var(--text-sm);font-weight:500;color:var(--muted-color);
  cursor:pointer;transition:all var(--duration-fast) var(--ease);
  border:none;background:transparent;text-align:left;
}
.bs-nav-item .msr{font-size:20px;width:20px;text-align:center;flex-shrink:0}
.bs-nav-item:hover{color:var(--text);background:var(--bg1)}
.bs-nav-item.active{color:var(--primary);background:var(--primary-soft);font-weight:600}
.bs-sidebar:hover .bs-nav-item,
.bs-sidebar:focus-within .bs-nav-item{
  justify-content:flex-start;padding:7px 12px;gap:var(--sp-2);
  width:100%;height:auto;margin:0 0 2px;
}
.bs-sidebar-label{
  font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted2-color);padding:0 var(--sp-2);margin-bottom:var(--sp-1);font-weight:700;
}
.bs-nav-item .nav-badge{
  margin-left:auto;font-size:var(--text-2xs);font-weight:700;
  padding:2px 6px;border-radius:var(--r-full);background:var(--bg1);color:var(--muted-color);
}
.bs-content{
  padding:var(--sp-6) var(--sp-8);overflow-x:hidden;min-width:0;width:100%;
}
@media(max-width:860px){
  .bs-layout{grid-template-columns:1fr}
  .bs-layout:has(.bs-sidebar:hover),.bs-layout:has(.bs-sidebar:focus-within){grid-template-columns:1fr}
  .bs-sidebar,.bs-sidebar:hover,.bs-sidebar:focus-within{
    position:relative;top:auto;height:auto;width:100%!important;
    border-right:none;border-bottom:1px solid var(--stroke);
    padding:var(--sp-2) var(--sp-3);overflow-x:auto;overflow-y:hidden;
  }
  .bs-sidebar-section,.bs-sidebar:hover .bs-sidebar-section,.bs-sidebar:focus-within .bs-sidebar-section{
    display:flex;gap:var(--sp-1);margin-bottom:0!important;padding:0!important;
  }
  .bs-sidebar-label,.bs-sidebar-footer{display:none!important}
  .bs-nav-item,.bs-sidebar:hover .bs-nav-item,.bs-sidebar:focus-within .bs-nav-item{
    white-space:nowrap;padding:6px 12px!important;justify-content:flex-start!important;gap:var(--sp-2)!important;
    width:auto!important;height:auto!important;margin:0!important;
  }
  .bs-nav-text,.bs-sidebar:hover .bs-nav-text,.bs-sidebar:focus-within .bs-nav-text{opacity:1!important;width:auto!important;overflow:visible!important}
  .bs-content{padding:var(--sp-4)}
}


/* Text */
.text-2xs{font-size:var(--text-2xs)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.04em}.tracking-wider{letter-spacing:.08em}
.leading-tight{line-height:var(--leading-tight)}.leading-normal{line-height:var(--leading-normal)}.leading-relaxed{line-height:var(--leading-relaxed)}
.whitespace-nowrap{white-space:nowrap}.break-words{word-break:break-word}

/* Color utilities */
.muted{color:var(--muted-color)}.muted2{color:var(--muted2-color)}.mono{font-family:var(--mono)}
.text-primary{color:var(--primary)}.text-ok{color:var(--ok)}.text-danger{color:var(--danger)}.text-warn{color:var(--warn)}.text-info{color:var(--info)}
.bg-primary-soft{background:var(--primary-soft)}

/* Truncation */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Cursor */
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}

/* Rounded */
.rounded{border-radius:var(--r)}.rounded-sm{border-radius:var(--r-sm)}.rounded-lg{border-radius:var(--r-lg)}.rounded-xl{border-radius:var(--r-xl)}.rounded-2xl{border-radius:var(--r-2xl)}.rounded-full{border-radius:var(--r-full)}

/* Opacity */
.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-0{opacity:0}

/* Transitions */
.transition{transition:all var(--duration) var(--ease)}
.transition-fast{transition:all var(--duration-fast) var(--ease)}

/* SR only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Misc */
.select-none{user-select:none}
.pointer-events-none{pointer-events:none}
.min-w-0{min-width:0}