:root {
   
   --brand-50:  #ECF7FC;
   --brand-100: #D2ECF7;
   --brand-200: #A6D9EF;
   --brand-300: #6FC1E4;
   --brand-400: #3DAFDC;
   --brand-500: #1694C8;
   --brand-600: #0E7CAB;
   --brand-700: #0C6488;
   --brand-800: #0C4E69;

   
   --brand:        var(--brand-500);
   --brand-strong: var(--brand-600);
   --brand-tint:   var(--brand-50);
   --brand-on:     #ffffff;
   --brand-rgb:    22, 148, 200;

   
   --ink-900: #0E1A22;
   --ink-800: #16242E;
   --ink-700: #243441;
   --ink-600: #3C4D59;
   --ink-500: #5B6B76;
   --ink-400: #8595A0;
   --ink-300: #AEBBC4;
   --line-300: #D7DEE4;
   --line-200: #E4EAEF;
   --line-100: #EEF2F5;
   --surface:  #FFFFFF;
   --surface-2:#FAFCFD;
   --canvas:   #F4F7F9;
   --canvas-2: #EAF0F3;

   
   --nav-bg:        linear-gradient(180deg, #0E2A37 0%, #0A2230 100%);  
   --nav-link:      rgba(255, 255, 255, .72);  
   --nav-link-hover:#FFFFFF;
   --nav-active-bg: var(--brand);
   --nav-active-fg: #FFFFFF;
   --sidebar-fg:    #FFFFFF;
   --topbar-bg:     #E9EEF2;
   --topbar-fg:     var(--ink-800);
   --card-head-bg:  var(--surface-2);
   --page-bg:       var(--canvas);

   --radius: 12px;
   --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;
   --shadow-sm: 0 1px 2px rgba(13,30,40,.06), 0 1px 1px rgba(13,30,40,.04);
   --shadow-md: 0 4px 14px rgba(13,30,40,.08), 0 2px 4px rgba(13,30,40,.04);
   --shadow-lg: 0 24px 60px rgba(13,30,40,.16), 0 8px 20px rgba(13,30,40,.08);

   
   --ok:#1F9D6B;     --ok-tint:#E6F6EF;    --ok-line:#BDE6D3;
   --warn:#C77A12;   --warn-tint:#FBF1DD;  --warn-line:#F0DBAE;
   --bad:#D6455B;    --bad-tint:#FBE7EB;   --bad-line:#F2C3CC;
   --info:var(--brand-600);  --info-tint:var(--brand-50);
   --grape:#5B5BD6;  --grape-tint:#ECECFB; --grape-line:#CFCFF4;

   --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

   
   --bs-primary:           var(--brand);
   --bs-primary-rgb:       var(--brand-rgb);
   --bs-link-color:        var(--brand-strong);
   --bs-link-color-rgb:    var(--brand-rgb);
   --bs-link-hover-color:  var(--brand-700);
   --bs-primary-bg-subtle: var(--brand-50);
   --bs-primary-border-subtle: var(--brand-100);
   --bs-body-bg:           var(--page-bg);
   --bs-body-color:        var(--ink-800);
   --bs-border-color:      var(--line-200);
   --bs-card-bg:           var(--surface);
   --bs-card-cap-bg:       var(--card-head-bg);
   --bs-font-sans-serif:   'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}


.btn-primary {
   --bs-btn-bg: var(--brand);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand-strong);
   --bs-btn-hover-border-color: var(--brand-strong);
   --bs-btn-active-bg: var(--brand-700);
   --bs-btn-active-border-color: var(--brand-700);
   --bs-btn-disabled-bg: var(--brand);
   --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
   --bs-btn-color: var(--brand-strong);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand);
   --bs-btn-hover-border-color: var(--brand);
   --bs-btn-active-bg: var(--brand-strong);
}
.bg-primary   { background-color: var(--brand) !important; }
.text-primary { color: var(--brand-strong) !important; }
.border-primary { border-color: var(--brand) !important; }
.badge.bg-primary { background-color: var(--brand) !important; }
a { color: var(--brand-strong); text-decoration: none; }


body {
   font-family: var(--bs-font-sans-serif);
   color: var(--ink-800);
   -webkit-font-smoothing: antialiased;
   
   overflow-x: hidden;
}


:root {
   
   --nav-text:      var(--topbar-fg);
   --content-bg:    var(--surface);
   --page-title:    var(--ink-900);
   
   --card-head-border: 1px solid var(--line-200);
   --card-head-fg:     var(--ink-800);
   --card-body-bg:     var(--surface);
   --card-body-border: 1px solid var(--line-200);
   --card-body-fg:     var(--ink-800);
   
   --c-primary-bg: var(--brand);        --c-primary-border: 1px solid var(--brand);       --c-primary-fg: var(--brand-on);
   --c-success-bg: var(--ok-tint);      --c-success-border: 1px solid var(--ok-line);     --c-success-fg: var(--ok);
   --c-warning-bg: var(--warn-tint);    --c-warning-border: 1px solid var(--warn-line);   --c-warning-fg: var(--warn);
   --c-info-bg:    var(--info-tint);    --c-info-border: 1px solid var(--brand-100);      --c-info-fg:    var(--brand-700);
   --c-light-bg:   var(--surface-2);    --c-light-border: 1px solid var(--line-200);      --c-light-fg:   var(--ink-700);
   --c-secondary-bg: var(--line-100);   --c-secondary-border: 1px solid var(--line-200);  --c-secondary-fg: var(--ink-600);
   
   --lg-bg: var(--surface);   --lg-border: 1px solid var(--line-200);  --lg-fg: var(--ink-800);
   --lg-active-bg: var(--brand-50); --lg-active-border: 1px solid var(--brand-100); --lg-active-fg: var(--brand-700);
   
   --acc-head-bg: var(--surface-2); --acc-head-border: 1px solid var(--line-200); --acc-head-fg: var(--ink-800);
   --acc-body-bg: var(--surface);   --acc-body-border: 1px solid var(--line-200); --acc-body-fg: var(--ink-700);
}


.button-toggle-menu { color: var(--nav-text); }
.nav-user h5, .nav-user h6 { color: var(--nav-text); }
.nav-user a { color: var(--nav-link); }
.content { background-color: var(--content-bg); }
.header-title { color: var(--page-title); }



.card-header {
   background-color: var(--card-head-bg);
   border: 0;
   border-bottom: var(--card-head-border);
   color: var(--card-head-fg);
}
.modal-header, .modal-footer {
   background-color: var(--card-head-bg);
   border: var(--card-head-border);
   color: var(--card-head-fg);
}
.card-body {
   background-color: var(--card-body-bg);
   color: var(--card-body-fg);
}

.card > .card-header:first-child {
   border-top-left-radius: calc(var(--r-lg) - 1px);
   border-top-right-radius: calc(var(--r-lg) - 1px);
}
.card > .card-body:last-child,
.card > .card-footer:last-child,
.card > .list-group:last-child {
   border-bottom-left-radius: calc(var(--r-lg) - 1px);
   border-bottom-right-radius: calc(var(--r-lg) - 1px);
}
.card > .card-body:first-child:last-child {
   border-radius: calc(var(--r-lg) - 1px);
}
.card .card > .card-header, .card .card > .card-body, .card .card > .card-footer,
.acc-body .card > .card-header, .acc-body .card > .card-body, .acc-body .card > .card-footer {
   border-radius: 0;
}
.modal-body {
   background-color: var(--card-body-bg);
   border: var(--card-body-border);
   color: var(--card-body-fg);
}

.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-header .header-buttons { margin-left: auto; }
.modal-header .header-buttons .row { margin-right: 0; }


.bg-primary,   .bg-primary-subtle   { background-color: var(--c-primary-bg)   !important; border: var(--c-primary-border)   !important; color: var(--c-primary-fg)   !important; }
.bg-success,   .bg-success-subtle   { background-color: var(--c-success-bg)   !important; border: var(--c-success-border)   !important; color: var(--c-success-fg)   !important; }
.bg-warning,   .bg-warning-subtle   { background-color: var(--c-warning-bg)   !important; border: var(--c-warning-border)   !important; color: var(--c-warning-fg)   !important; }
.bg-info,      .bg-info-subtle      { background-color: var(--c-info-bg)      !important; border: var(--c-info-border)      !important; color: var(--c-info-fg)      !important; }
.bg-light,     .bg-light-subtle     { background-color: var(--c-light-bg)     !important; border: var(--c-light-border)     !important; color: var(--c-light-fg)     !important; }
.bg-secondary, .bg-secondary-subtle { background-color: var(--c-secondary-bg) !important; border: var(--c-secondary-border) !important; color: var(--c-secondary-fg) !important; }


.bg-outline-primary,
.btn-outline-success, .btn-outline-warning, .btn-outline-info,
.btn-outline-light,   .btn-outline-secondary { background-color: transparent !important; }
.bg-outline-primary    { border: var(--c-primary-border)   !important; color: var(--c-primary-fg)   !important; }
.btn-outline-success   { border: var(--c-success-border)   !important; color: var(--c-success-fg)   !important; }
.btn-outline-warning   { border: var(--c-warning-border)   !important; color: var(--c-warning-fg)   !important; }
.btn-outline-info      { border: var(--c-info-border)      !important; color: var(--c-info-fg)      !important; }
.btn-outline-light     { border: var(--c-light-border)     !important; color: var(--c-light-fg)     !important; }


.btn-light:not(.dropdown-toggle) {
   --bs-btn-bg: var(--surface);
   --bs-btn-border-color: var(--line-300);
   --bs-btn-color: var(--ink-800);
   --bs-btn-hover-bg: var(--line-100);
   --bs-btn-hover-border-color: var(--line-300);
   --bs-btn-hover-color: var(--ink-900);
   --bs-btn-active-bg: var(--line-100);
   --bs-btn-active-border-color: var(--line-300);
   box-shadow: var(--shadow-sm);
}
.btn-outline-secondary { border: var(--c-secondary-border) !important; color: var(--c-secondary-fg) !important; }


.choices__inner {
   background-color: var(--surface-2) !important;
   border: 1px solid var(--line-200) !important;
   color: var(--ink-800) !important;
   border-radius: var(--r-md) !important;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
   border-color: var(--brand) !important;
}


.list-group-item { background-color: var(--lg-bg); border: var(--lg-border); color: var(--lg-fg); }
.list-group-item.active {
   background-color: var(--lg-active-bg) !important;
   border: var(--lg-active-border) !important;
   color: var(--lg-active-fg) !important;
}
.list-group-item-action { transition: background-color .12s ease, color .12s ease; }
.list-group-item-action:hover:not(.active) { background-color: var(--surface-2); color: var(--ink-900); }
.list-group-item h5 { font-size: 1rem; font-weight: 500; margin-bottom: 0; }


.acc { display: flex; flex-direction: column; gap: 10px; }

.acc-item {
   border: 1px solid var(--line-200);
   border-radius: var(--r-md);
   background: var(--surface);
   overflow: hidden;
   transition: border-color .15s ease, box-shadow .15s ease;
}
.acc-item.is-open {
   border-color: rgba(var(--brand-rgb), .35);
   box-shadow: var(--shadow-sm);
}

.acc-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 18px;
   background: var(--acc-head-bg);
   color: var(--acc-head-fg);
   font-weight: 600;
   transition: background .15s ease, color .15s ease;
}
.acc-head:hover { background: var(--brand-50); }
.acc-item.is-open > .acc-head { background: var(--brand-50); color: var(--brand-700); }

.acc-heading { flex: 1; min-width: 0; }
.acc-heading h5 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }

.acc-chevron {
   flex-shrink: 0;
   font-size: 22px;
   color: var(--ink-400);
   transition: transform .2s ease, color .2s ease;
}
.acc-item.is-open > .acc-head .acc-chevron { transform: rotate(180deg); color: var(--brand-600); }

.acc-collapse {
   background: var(--acc-body-bg);
   color: var(--acc-body-fg);
   border-top: 1px solid var(--line-200);
}
.acc-collapse:not(.show) { display: none; }
.acc-body { padding-top: 12px; padding-bottom: 12px; }


.av-tile { background: var(--brand-50); color: var(--brand-600); }
img.av-tile { object-fit: contain; padding: 4px; }

.card-head-icon,
.card-header > i:first-child {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin-right: 9px;
   border-radius: 9px;
   background: var(--brand-50);
   color: var(--brand-600);
   font-size: 17px;
   vertical-align: middle;
}

.spec-list { display: flex; flex-direction: column; }

.spec-row {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 10px 2px;
   border-bottom: 1px solid var(--line-100);
}
.spec-row:last-child { border-bottom: 0; }
.spec-label {
   flex: 0 0 auto;
   color: var(--ink-400);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
}
.spec-value {
   min-width: 0;
   padding-left: 14px;
   font-weight: 600;
   color: var(--ink-800);
   word-break: break-word;
}
.spec-value a { color: var(--brand-700); text-decoration: none; }
.spec-value a:hover { text-decoration: underline; }
@media (min-width: 768px) {
   .spec-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; }
   .spec-value { padding-left: 0; text-align: right; }
}

.token-kpi { display: flex; align-items: center; gap: 14px; padding: 4px 2px; }
.token-kpi-img { width: 40px; height: 40px; }
.token-kpi-value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink-900); }
.token-kpi-label {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--ink-400);
}




.mono { font-family: var(--mono); }


.btn { --bs-btn-border-radius: 9px; --bs-btn-font-weight: 600; }


.badge { --bs-badge-border-radius: 999px; --bs-badge-font-weight: 600; --bs-badge-padding-x: .65em; --bs-badge-padding-y: .4em; }


.bg-danger-subtle { background-color: var(--bad-tint) !important; border: 1px solid var(--bad-line) !important; color: var(--bad) !important; }
.text-danger { color: var(--bad) !important; }


.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.4; }
.pill .mdi { font-size:13px; }
.pill.ok    { background:var(--ok-tint);    color:var(--ok);        border:1px solid var(--ok-line); }
.pill.warn  { background:var(--warn-tint);  color:var(--warn);      border:1px solid var(--warn-line); }
.pill.bad   { background:var(--bad-tint);   color:var(--bad);       border:1px solid var(--bad-line); }
.pill.info  { background:var(--brand-50);   color:var(--brand-700); border:1px solid var(--brand-100); }
.pill.grape { background:var(--grape-tint); color:var(--grape);     border:1px solid var(--grape-line); }
.pill.neut  { background:var(--line-100);   color:var(--ink-500);   border:1px solid var(--line-200); }
.pill img.token-icon { width:14px; height:14px; }


.form-select {
   background-color: var(--surface-2);
   border: 1px solid var(--line-200);
   border-radius: var(--r-md);
   color: var(--ink-800);
}
.form-select:hover { border-color: var(--line-300); }
.form-select:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}


.btn-primary.dropdown-toggle:not(.dropdown-toggle-split) {
   --bs-btn-bg: var(--surface-2);
   --bs-btn-border-color: var(--line-200);
   --bs-btn-color: var(--ink-800);
   --bs-btn-hover-bg: var(--line-100);
   --bs-btn-hover-border-color: var(--line-300);
   --bs-btn-hover-color: var(--ink-900);
   --bs-btn-active-bg: var(--line-100);
   --bs-btn-active-border-color: var(--line-300);
   --bs-btn-active-color: var(--ink-900);
   --bs-btn-disabled-bg: var(--surface-2);
   --bs-btn-disabled-border-color: var(--line-200);
   --bs-btn-disabled-color: var(--ink-400);
   font-size: 1rem;
   font-weight: 600;
}


.filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 14px; margin-bottom:14px; background:var(--surface-2); border:1px solid var(--line-200); border-radius:var(--r-md); }
.filter-bar-icon { color:var(--brand-600); font-size:18px; flex-shrink:0; }
.filter-bar-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.filter-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; line-height:1.4; padding:4px 11px; border-radius:999px; background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100); white-space:nowrap; }
.filter-chip .mdi { font-size:13px; }
.filter-chip-label { font-weight:600; }
.filter-chip-value { font-weight:500; }

.who { display:flex; align-items:center; gap:10px; }
.who b { font-weight:600; color:var(--ink-900); font-size:13px; }
.who small { color:var(--ink-400); font-size:11.5px; }
.cell-stack { display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.cell-stack small { color:var(--ink-400); font-size:11.5px; }
.kid { font-family:var(--mono); font-size:12.5px; color:var(--ink-800); font-weight:500; }


.kpi { display:block; background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-lg); padding:16px 17px; box-shadow:var(--shadow-sm); height:100%; }
.kpi:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); }
.kpi .kc { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.kpi .lab { font-size:12px; color:var(--ink-500); font-weight:600; }
.kpi .val { font-size:30px; font-weight:800; color:var(--ink-900); letter-spacing:-.02em; line-height:1; font-feature-settings:"tnum"; }
.kpi .delta { display:inline-flex; align-items:center; gap:2px; font-weight:700; font-family:var(--mono); font-size:11.5px; padding:2px 6px; border-radius:6px; }
.kpi .delta.up { color:var(--ok); background:var(--ok-tint); }
.kpi .delta.down { color:var(--bad); background:var(--bad-tint); }
.kpi .spark { display:block; width:100%; height:30px; margin-top:10px; opacity:.9; }


.tabs { display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line-200); border-radius:var(--r-md); }
.tabs span { flex:1; text-align:center; padding:7px 10px; font-size:12.5px; font-weight:600; color:var(--ink-500); border-radius:7px; cursor:pointer; }
.tabs span.on { background:var(--surface); color:var(--brand-700); box-shadow:var(--shadow-sm); }
.work-row { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line-100); }
.work-row:last-child { border-bottom:none; }
.work-row .who { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.work-row .age { font-size:11.5px; color:var(--ink-400); font-family:var(--mono); }
a.work-row { cursor:pointer; transition:background-color .12s ease; }
a.work-row:hover { background:var(--surface-2); }


.barrow { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.barrow:last-child { margin-bottom:0; }
.barrow .bl { width:130px; font-size:12.5px; color:var(--ink-600); display:flex; align-items:center; gap:7px; }
.barrow .bl .mdi { color:var(--brand-600); font-size:15px; }
.barrow .bt { flex:1; height:9px; border-radius:999px; background:var(--line-100); overflow:hidden; }
.barrow .bt i { display:block; height:100%; border-radius:999px; }
.barrow .bv { width:46px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-800); }


.hd-ask { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line-300); border-radius:10px; padding:10px 13px; color:var(--ink-400); font-size:12.5px; }
.hd-ask .q { font-size:17px; color:var(--brand-600); }
.hd-ask .send { margin-left:auto; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:15px; flex:none; }


.maisie-suggestion { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; border:1px solid var(--line-200); background:var(--surface); border-radius:var(--r-md); padding:10px 13px; font-size:13px; font-weight:500; color:var(--ink-800); cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease; }
.maisie-suggestion:hover { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700); }
.maisie-suggestion .mdi { color:var(--ink-400); font-size:18px; flex-shrink:0; }
.maisie-suggestion:hover .mdi { color:var(--brand-600); }

.maisie-thread { display:flex; flex-direction:column; gap:12px; }
.maisie-msg { display:flex; flex-direction:column; max-width:90%; }
.maisie-msg.is-q { align-self:flex-end; align-items:flex-end; }
.maisie-msg.is-a { align-self:flex-start; align-items:flex-start; }
.maisie-bubble { border-radius:var(--r-lg); padding:9px 13px; font-size:13.5px; line-height:1.55; }
.maisie-msg.is-q .maisie-bubble { background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100); border-bottom-right-radius:var(--r-sm); }
.maisie-msg.is-a .maisie-bubble { background:var(--surface-2); color:var(--ink-800); border:1px solid var(--line-200); border-bottom-left-radius:var(--r-sm); animation:maisie-rise .18s ease-out; }
.maisie-msg.is-a .maisie-bubble p:last-child { margin-bottom:0; }
.maisie-time { font-size:11px; color:var(--ink-400); margin-top:3px; }
.maisie-typing { display:inline-flex; align-items:center; gap:5px; }
.maisie-typing span { width:7px; height:7px; border-radius:50%; background:var(--ink-300); animation:maisie-bounce 1.2s infinite ease-in-out; }
.maisie-typing span:nth-child(2) { animation-delay:.16s; }
.maisie-typing span:nth-child(3) { animation-delay:.32s; }
@keyframes maisie-bounce { 0%,60%,100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes maisie-rise { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.hd-chat { display:flex; flex-direction:column; height:100%; min-height:0; }
.hd-chat .maisie-thread { flex:1; min-height:0; overflow-y:auto; }


.org-card { transition:border-color .12s, box-shadow .12s; }
.org-card:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); }
.org-card.is-disabled { opacity:.72; }

.drawer-backdrop { position:fixed; inset:0; background:rgba(15, 23, 42, .32); opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:1045; }
.drawer-backdrop.show { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(720px, 96vw); background:var(--surface); transform:translateX(100%); transition:transform .25s ease; z-index:1046; display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
.drawer.drawer-wide { width:min(960px, 96vw); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line-200); }
.drawer-body { padding:14px 16px; overflow-y:auto; flex:1; }
.drawer-footer { padding:13px 16px; border-top:1px solid var(--line-200); display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.drawer-subheader { padding:12px 18px; border-bottom:1px solid var(--line-200); background:var(--surface-2); }
.drawer-form { display:flex; flex-direction:column; flex:1; min-height:0; }


.ptabs { display:flex; flex-wrap:nowrap; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line-200); border-radius:var(--r-md); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ptabs::-webkit-scrollbar { display:none; }
.ptab { appearance:none; background:none; border:1px solid transparent; border-radius:calc(var(--r-md) - 4px); padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink-500); display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex:0 0 auto; white-space:nowrap; transition:background-color .12s ease, color .12s ease; }
.ptab:hover { color:var(--ink-800); background:var(--line-100); }
.ptab.on { color:var(--brand-700); background:var(--surface); border-color:var(--line-200); box-shadow:var(--shadow-sm); }
.ptab .mdi { font-size:16px; }


input[data-switch] { position:absolute; opacity:0; width:0; height:0; margin:0; }
input[data-switch] + label { position:relative; display:inline-block; vertical-align:middle; margin:0; cursor:pointer; width:56px; height:24px; border-radius:30px; background:var(--line-300); transition:background .15s; }
input[data-switch] + label::before { content:attr(data-off-label); position:absolute; right:7px; top:0; line-height:24px; font-size:10.5px; font-weight:600; color:var(--ink-500); }
input[data-switch] + label::after { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
input[data-switch]:checked + label { background:var(--ok); }
input[data-switch]:checked + label::before { content:attr(data-on-label); left:9px; right:auto; color:#fff; }
input[data-switch]:checked + label::after { left:35px; }
input[data-switch]:disabled + label { opacity:.5; cursor:not-allowed; }