:root {
   
   --brand-50:  #ECF7FC;
   --brand-100: #D2ECF7;
   --brand-300: #6FC1E4;
   --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;

   
   --nav-bg:        linear-gradient(180deg, #0E2A37 0%, #0A2230 100%);  
   --nav-link:      rgba(255, 255, 255, .72);  
   --nav-active-bg: color-mix(in srgb, var(--sidebar-fg) 12%, transparent);
   --nav-active-fg: var(--sidebar-fg);
   --sidebar-fg:    #FFFFFF;
   --topbar-bg:     #E9EEF2;
   --topbar-fg:     var(--ink-800);


   --topbar-line:          var(--line-300);
   --topbar-ink-900:       var(--ink-900);
   --topbar-ink-600:       var(--ink-600);
   --topbar-ink-500:       var(--ink-500);
   --topbar-ink-400:       var(--ink-400);
   --topbar-pill-bg:       var(--surface-2);
   --topbar-pill-bg-focus: var(--surface);
   --topbar-pill-line:     var(--line-200);
   --topbar-accent:        var(--brand-strong);
   --topbar-accent-tint:   rgba(var(--brand-rgb), .10);
   --topbar-bg-sm:         var(--nav-bg);
   --topbar-ink-sm:        var(--sidebar-fg);

   --card-head-bg:  var(--surface-2);
   --page-bg:       var(--canvas);

   --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
   --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;

   --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-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-danger-bg:  var(--bad-tint);     --c-danger-border: 1px solid var(--bad-line);     --c-danger-fg:  var(--bad);
   --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-fg: var(--ink-800);
   --acc-body-bg: var(--surface);   --acc-body-fg: var(--ink-700);

   
   --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);
   --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-info {
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
   --bs-btn-disabled-color: #fff;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-secondary {
   --bs-btn-color: var(--ob-fg);
   --bs-btn-border-color: var(--ob-line);
   --bs-btn-hover-color: var(--ob-fg);
   --bs-btn-hover-bg: var(--ob-tint);
   --bs-btn-hover-border-color: var(--ob-line);
   --bs-btn-active-color: var(--ob-fg);
   --bs-btn-active-bg: var(--ob-tint);
   --bs-btn-active-border-color: var(--ob-line);
   --bs-btn-disabled-color: var(--ob-fg);
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: var(--ob-line);
}
.btn-outline-primary   { --ob-fg: var(--brand-strong);   --ob-line: var(--brand);    --ob-tint: var(--brand-tint); --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-outline-success   { --ob-fg: var(--c-success-fg);   --ob-line: var(--ok-line);  --ob-tint: var(--c-success-bg); }
.btn-outline-danger    { --ob-fg: var(--c-danger-fg);    --ob-line: var(--bad-line); --ob-tint: var(--c-danger-bg); }
.btn-outline-secondary { --ob-fg: var(--c-secondary-fg); --ob-line: var(--line-200); --ob-tint: var(--c-secondary-bg); }
.text-primary { color: var(--brand-strong) !important; }
.border-primary { border-color: var(--brand) !important; }
a { color: var(--brand-strong); text-decoration: none; }


body {
   -webkit-font-smoothing: antialiased;
   
   overflow-x: hidden;
}


.nav-user a { color: var(--nav-link); }
.content { background-color: var(--content-bg); }



.card-header {
   background-color: var(--card-head-bg);
   background-image: linear-gradient(180deg, rgba(var(--brand-rgb), .08), transparent);
   border-bottom: var(--card-head-border);
   color: var(--card-head-fg);
   font-weight: 600;
}
.card-body {
   background-color: var(--card-body-bg);
   color: var(--card-body-fg);
}

.card > .card-body: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;
}


.bg-primary { background-color: var(--c-primary-bg) !important; border: var(--c-primary-border) !important; color: var(--c-primary-fg) !important; }
.bg-primary-subtle { border: 1px solid var(--bs-primary-bg-subtle) !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-danger-subtle { background-color: var(--c-danger-bg) !important; border: var(--c-danger-border) !important; color: var(--c-danger-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);
}


.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);
   border: var(--lg-active-border);
   color: var(--lg-active-fg);
}
.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; }


.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-color: var(--acc-head-bg);
   background-image: linear-gradient(90deg, rgba(var(--brand-rgb), .10), transparent 60%);
   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 {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .25s ease;
}
.acc-collapse.show { grid-template-rows: 1fr; }

.acc-collapse-inner { min-height: 0; overflow: hidden; }

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

@media (prefers-reduced-motion: reduce) {
   .acc-collapse { transition: none; }
}


.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, .token-kpi-label, .wallet-hero-label {
   color: var(--ink-400);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
}
.spec-label {
   flex: 0 0 auto;
}
.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); }
.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); }

/* Wallet drawer */
.wallet-hero, .profile-hero { padding:16px 18px; border-radius:var(--r-lg); background:linear-gradient(135deg, var(--brand-50), var(--surface)); border:1px solid var(--brand-100); }
/* Standard height, btn-sm's side padding, so the header's actions sit on one row */
.profile-hero .btn { --bs-btn-padding-x: .5rem; }
.wallet-hero { display:flex; align-items:center; gap:14px; }
.wallet-hero-img { width:44px; height:44px; }
.wallet-hero-value { font-size:34px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--ink-900); font-feature-settings:"tnum"; }
.wallet-hero-label { margin-top:3px; }

.wallet-section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); }

.bundle-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line-200); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.bundle-card:hover, .kpi:hover, .org-card:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); }
.bundle-card.is-busy { opacity:.6; pointer-events:none; }
.bundle-tokens { display:flex; align-items:center; gap:5px; min-width:78px; }
.bundle-credits { font-size:22px; font-weight:800; line-height:1; color:var(--ink-900); font-feature-settings:"tnum"; }
.bundle-credits-label { font-size:11px; font-weight:600; color:var(--ink-400); }
.bundle-meta { flex:1 1 auto; min-width:0; }
.bundle-name { font-weight:600; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bundle-per { font-size:12px; color:var(--ink-400); }

.wallet-empty { text-align:center; padding:26px 12px; color:var(--ink-400); }
.wallet-empty > .mdi { font-size:34px; display:block; margin-bottom:6px; opacity:.6; }
.wallet-empty > p { margin:0; font-size:13px; }

.wallet-viewall { width:100%; background:transparent; border:0; color:var(--brand-700); font-weight:600; font-size:13px; padding:8px; }
.wallet-viewall:hover { text-decoration:underline; }

.skeleton .sk-hero, .skeleton .sk-card { border-radius:var(--r-lg); background:var(--line-100); margin-bottom:10px; animation:skeleton-pulse 1.2s ease-in-out infinite; }
.skeleton .sk-hero { height:76px; }
.skeleton .sk-card { height:62px; }
@keyframes skeleton-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Brand-tint hero surfaces (white-label aware) */
.auth-card { background:linear-gradient(180deg, var(--brand-50), var(--surface) 55%); }
.auth-card > .card-body { background-color: transparent; }

/* Access-control sub-settings (nested under a parent toggle, e.g. top-up tokens) */
.topup-subsettings { background:var(--brand-50); border:1px solid var(--brand-100); border-left:3px solid var(--brand-300); border-radius:8px; padding:6px 14px; }

/* Access-control module groups — the tab strip and whichever panel is open read as one bordered surface,
   so the settings that belong to no tab (default language, from-address, session timeout, the accordion
   stack) are visibly outside it. Without this the open panel's last toggle runs straight into the first
   of those rows and the tabs look like they govern the whole drawer. The strip gives up its own outline
   to the container and keeps only the rule that divides it from the panel. */
.access-control-groups { border:1px solid var(--line-200); border-radius:var(--r-md); background:var(--surface); }
.access-control-groups > .ptabs { border-width:0 0 1px 0; border-radius:var(--r-md) var(--r-md) 0 0; }

/* Let grid columns shrink so their content can truncate instead of overflowing into the next column */
.min-w-0 { min-width:0; }

/* A pill that truncates its label (keeps the leading icon, ellipsises the text) rather than overflowing */
.pill.pill-truncate { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }




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


.btn, .btn-group-sm > .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; }


.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; }

.dna-gauge-swatch { display:inline-block; flex:0 0 auto; width:14px; height:14px; border-radius:4px; border:1px solid rgba(15,23,42,.12); background-color:var(--line-200); vertical-align:middle; }
.dna-gauge-edge { border-left:3px solid var(--line-300); }


/* Sets one run of content off from the next where a card or a heading would be too much */
.divider { border-top:1px solid var(--line-300); opacity:1; margin:18px 0 14px; }


/* Meal and exercise plan viewers — a day band above a stack of blocks, each block a tinted
   header over a white body, so a meal or an exercise reads as one unit rather than another
   identical row. Brand tokens only, so the bands follow an organisation's white-label colour. */
.plan-day-head { background:linear-gradient(135deg, var(--brand-100), var(--brand-50)); border:1px solid var(--brand-100); border-radius:var(--r-sm); color:var(--brand-800); padding:9px 12px; margin:14px 0 10px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.plan-block { background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-md); margin:0 0 12px; padding:0 0 10px; }
.plan-block-head { background:var(--brand-50); border-bottom:1px solid var(--brand-100); border-radius:var(--r-md) var(--r-md) 0 0; padding:10px 12px; margin-bottom:8px; }
/* A block that is nothing but its header — a session summary, a warm-up — tints all the way down rather than leaving a white sliver under the band */
.plan-block:has(> .plan-block-head:only-child) { padding-bottom:0; }
.plan-block > .plan-block-head:only-child { border-bottom:0; border-radius:var(--r-md); margin-bottom:0; }
/* The swap box, dropped in as the block's own closing band so it reads as belonging to the card it
   will replace rather than as a row wedged into the middle of it */
.plan-block-foot { background:var(--brand-50); border-top:1px solid var(--brand-100); border-radius:0 0 var(--r-md) var(--r-md); padding:10px 12px; margin-top:10px; }
.plan-block:has(> .plan-block-foot) { padding-bottom:0; }
/* A block carrying nothing between its two bands — an exercise with no technique or rationale — butts
   them together, since the header's own border is already the divider */
.plan-block-head + .plan-block-foot { margin-top:-8px; border-top:0; }
.plan-block-title { font-size:15px; font-weight:700; color:var(--brand-800); }
.plan-metric { font-size:13.5px; font-weight:700; color:var(--ink-800); }
.plan-prose { border-left:2px solid var(--brand-100); padding-left:10px; margin-top:6px; font-size:12px; color:var(--ink-500); }
.plan-food-row { border-bottom:1px solid var(--line-100); border-radius:var(--r-sm); padding:4px 6px; }
.plan-food-row:nth-child(even) { background:var(--line-100); }
.plan-food-row:last-child { border-bottom:0; }


.form-select {
   background-color: var(--surface-2);
   border-radius: var(--r-md);
}
.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;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: 2rem;
}
.btn-primary.dropdown-toggle:not(.dropdown-toggle-split)::after {
   position: absolute;
   top: 50%;
   right: .75rem;
   margin: 0;
   transform: translateY(-50%);
}


.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; }
.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 .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; }


.work-row { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line-100); cursor:pointer; transition:background-color .12s ease; }
.work-row:last-child { border-bottom:none; }
.work-row .who { gap:9px; flex:1; min-width:0; }
.work-row .age { font-size:11.5px; color:var(--ink-400); font-family:var(--mono); }
.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); 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-bubble.has-action { position:relative; }
.maisie-bubble .maisie-action { position:absolute; right:100%; top:50%; transform:translateY(-50%); margin-right:8px; opacity:0; transition:opacity .12s ease; }
.maisie-msg:hover .maisie-action, .maisie-bubble .maisie-action:focus-visible, .maisie-bubble .maisie-action:has(.show) { opacity:1; }
.maisie-bubble .maisie-action:disabled { visibility:hidden; }
.maisie-bubble .maisie-action .popup-contents-above:not(.show) { display:none; }
@media (hover: none) { .maisie-bubble .maisie-action { opacity:1; } }
.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; }
.input-group > .form-control.chat-number { flex:0 0 7rem; width:7rem; }


.org-card { transition:border-color .12s, box-shadow .12s; }
.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; }
.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; 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; }
.ptab-skeleton { flex:0 0 auto; width:130px; border-radius:calc(var(--r-md) - 4px); background:var(--line-100); animation:skeleton-pulse 1.2s ease-in-out infinite; }
@media (min-width: 768px) {
   .ptabs { scrollbar-width: thin; scrollbar-color: var(--line-200) transparent; padding-bottom: 8px; }
   .ptabs::-webkit-scrollbar { display: block; height: 8px; }
   .ptabs::-webkit-scrollbar-track { background: transparent; }
   .ptabs::-webkit-scrollbar-thumb { background: var(--line-200); border-radius: 999px; }
   .ptabs::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
}

/* Nested tab strips that pin as the drawer scrolls, so a plan always says which module, which section
   and which day is on screen. Full-bleed across .drawer-body's 16px side padding, since a strip inset
   from the edge lets the rows sliding under it show past its sides, and squared off because a pill
   shape at the drawer's edge reads as a mistake rather than a toolbar.

   Every level pins at the same place and the deeper one outranks the shallower, so a strip hands the
   top over to the section inside it as that section arrives rather than the three of them piling up:
   only ever one bar deep, naming the most immediate thing on screen. The levels above stay pinned
   underneath, which is what makes scrolling back up hand the top back in the same order.

   The offset is negative because it is measured against .drawer-body's content box, which starts below
   its 14px top padding — it pulls each strip over the padding band that content would otherwise scroll
   through. Depth alone decides the order, so nothing here depends on how tall a strip is. */
.ptabs-sticky { position:sticky; top:-14px; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; border-radius:0; border-left:0; border-right:0; }
.ptabs-sticky-1 { z-index:4; }
.ptabs-sticky-2 { z-index:5; }
.ptabs-sticky-3 { z-index:6; }


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; }