/* AquaLink — portal shell, admin settings centre, 360° views and legal pages.
   Colours come from CSS variables set by Admin → Settings (see AquaTheme.Css). Works in light and dark mode. */

.al-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.al-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .al-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .al-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .al-g5, .al-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.al-logo-img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; flex: none; }

/* ============================== Portal shell & side menu ============================== */
.nv-portal { margin-left: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px;
  color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.nv-portal-admin { color: #7C3AED; background: color-mix(in srgb, #7C3AED 12%, transparent); }
.nv-portal-contractor { color: #B45309; background: color-mix(in srgb, #D97706 13%, transparent); }
.nv-crumb { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 13px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-crumb b { color: var(--mud-palette-text-primary); font-weight: 600; }

.nv-drawer .mud-drawer-content { display: flex; flex-direction: column; }
.nv { flex: 1; overflow-y: auto; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.nv-cta { margin: 2px 0 10px !important; border-radius: 10px !important; }
.nv-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; margin-bottom: 8px; border-radius: 10px;
  border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); }
.nv-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--mud-palette-text-primary); width: 100%; }
.nv-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.nv-group-title { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; padding: 10px 10px 4px; font: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.nv-group-title:hover { color: var(--mud-palette-text-primary); }
.nv-group-title span:first-child { flex: 1; text-align: left; }
.nv-chev { opacity: .55; font-size: 18px !important; }
.nv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--al-teal); }
.nv-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--mud-palette-text-primary);
  text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.nv-item:hover { background: var(--mud-palette-action-default-hover); text-decoration: none; }
.nv-item .nv-ic { color: var(--mud-palette-text-secondary); flex: none; }
.nv-item .nv-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-item.active { background: color-mix(in srgb, var(--al-navy) 10%, transparent); color: var(--al-navy); font-weight: 600; }
.nv-item.active .nv-ic { color: var(--al-navy); }
.nv-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--al-teal); }
.al-dark .nv-item.active { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); }
.al-dark .nv-item.active .nv-ic { color: var(--mud-palette-primary); }
.nv-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--mud-palette-error); color: #fff; }
.nv-badge.soft { background: color-mix(in srgb, var(--al-teal) 20%, transparent); color: color-mix(in srgb, var(--al-teal) 70%, #000); }
.nv-empty { padding: 16px 10px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.nv-foot { padding: 8px 10px 12px; border-top: 1px solid var(--mud-palette-lines-default); display: flex; flex-direction: column; gap: 1px; }
.nv-status { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 4px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.nv-status.warn { color: #92400E; background: color-mix(in srgb, #F59E0B 18%, transparent); }

/* Brand sidebar (Settings → Appearance → Portal sidebar: Brand) */
.nv-navy { background: var(--al-navy) !important; border-right-color: transparent !important; }
.nv-navy .nv-item, .nv-navy .nv-group-title { color: rgba(255,255,255,.86); }
.nv-navy .nv-item .nv-ic { color: rgba(255,255,255,.62); }
.nv-navy .nv-item:hover { background: rgba(255,255,255,.08); }
.nv-navy .nv-item.active { background: rgba(255,255,255,.14); color: #fff; }
.nv-navy .nv-item.active .nv-ic { color: #fff; }
.nv-navy .nv-search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.nv-navy .nv-search input { color: #fff; }
.nv-navy .nv-foot { border-top-color: rgba(255,255,255,.12); }
.nv-navy .nv-group-title:hover { color: #fff; }

.nv-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; font-size: 13.5px; font-weight: 500; text-align: center;
  background: color-mix(in srgb, var(--al-blue) 14%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); border-bottom: 1px solid var(--mud-palette-lines-default); }
.nv-banner.success { background: color-mix(in srgb, #10B981 16%, var(--mud-palette-surface)); }
.nv-banner.warning { background: color-mix(in srgb, #F59E0B 20%, var(--mud-palette-surface)); }
.nv-banner a { font-weight: 700; }

/* ============================== Settings centre ============================== */
.sx-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 26px 20px; margin-bottom: 18px; color: #EAF3FA;
  background: linear-gradient(120deg, var(--al-navy), var(--al-hero-b) 60%, color-mix(in srgb, var(--al-teal) 45%, var(--al-navy))); }
.sx-glow { position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--al-teal) 55%, transparent), transparent 65%); opacity: .55; pointer-events: none; }
.sx-top { position: relative; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.sx-brand img, .sx-brand span { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; object-fit: contain; background: #fff;
  font-family: var(--al-display); font-weight: 700; font-size: 24px; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sx-text { flex: 1; min-width: 260px; }
.sx-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A7F3D0; }
.sx-title { font-family: var(--al-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin: 4px 0 6px; color: #fff; }
.sx-sub { margin: 0; max-width: 720px; color: rgba(234,243,250,.85); font-size: 14.5px; }
.sx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sx-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); overflow: hidden; }
.sx-btn:hover { background: rgba(255,255,255,.2); text-decoration: none; }
.sx-btn input[type=file], .st-filebtn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sx-health { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.sx-ring-wrap { position: relative; width: 88px; height: 88px; }
.sx-ring { width: 88px; height: 88px; transform: rotate(-90deg); }
.sx-ring-track { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 8; }
.sx-ring-val { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s; }
.sx-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.sx-ring-label b { font-family: var(--al-display); font-size: 22px; color: #fff; }
.sx-ring-label small { font-size: 12px; }
.sx-ring-label span { font-size: 11px; color: rgba(234,243,250,.75); }
.sx-health-text { display: flex; flex-direction: column; font-size: 13px; color: rgba(234,243,250,.85); }
.sx-health-text b { color: #fff; font-size: 15px; }
.sx-pills { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
@media (max-width: 1100px) { .sx-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-pill { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07);
  color: #fff; cursor: pointer; font: inherit; text-align: left; min-width: 0; transition: background .15s, transform .15s; }
.sx-pill:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.sx-pill > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sx-pill small { font-size: 11.5px; color: rgba(234,243,250,.7); }
.sx-pill b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pill-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: color-mix(in srgb, var(--t) 70%, transparent); }
.sx-recs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.sx-recs-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #FDE68A; }
.sx-rec { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font: inherit; font-size: 12.5px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.35); }
.sx-rec:hover { background: rgba(255,255,255,.18); }

.st { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 90px; }
@media (max-width: 1000px) { .st { grid-template-columns: minmax(0, 1fr); } }
.st-nav { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 10px; border-radius: 16px;
  background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
@media (max-width: 1000px) { .st-nav { position: static; max-height: none; } }
.st-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 38px; border-radius: 10px; margin-bottom: 4px;
  background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.st-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; width: 100%; color: var(--mud-palette-text-primary); }
.st-nav-group { padding: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.st-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit;
  text-align: left; color: var(--mud-palette-text-primary); transition: background .15s; }
.st-nav-item:hover { background: var(--mud-palette-action-default-hover); }
.st-nav-item.active { background: color-mix(in srgb, var(--t) 12%, transparent); }
.st-nav-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.st-nav-item.active .st-nav-icon { background: var(--t); color: #fff; }
.st-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-nav-label { font-size: 13.5px; font-weight: 600; }
.st-nav-hint { font-size: 12px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 3px color-mix(in srgb, #F59E0B 25%, transparent); flex: none; }
.st-tip { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #92400E; background: color-mix(in srgb, #F59E0B 25%, transparent); flex: none; }
.st-nav-empty { padding: 16px 8px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.st-nav-foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 8px 4px; border-top: 1px solid var(--mud-palette-lines-default); font-size: 12px; color: var(--mud-palette-text-secondary); }

.st-main { min-width: 0; }
.st-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.st-head-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--t); flex: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--t) 35%, transparent); }
.st-head-text { flex: 1; min-width: 220px; }
.st-head-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t); }
.st-head-title { font-family: var(--al-display); font-size: 22px; font-weight: 600; margin: 0; }
.st-head-sub { margin: 2px 0 0; color: var(--mud-palette-text-secondary); font-size: 14px; }
.st-body { display: flex; flex-direction: column; gap: 14px; animation: st-in .25s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.st-card.st-danger { border-color: color-mix(in srgb, #F59E0B 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, #F59E0B 15%, transparent); }
.st-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.st-card-title .mud-icon-root { color: var(--mud-palette-text-secondary); }
.st-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-note { margin: -4px 0 0; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-span-2 { grid-column: span 2; }
@media (max-width: 700px) { .st-grid, .st-grid-3 { grid-template-columns: minmax(0, 1fr); } .st-span-2 { grid-column: auto; } }
.st-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.st-two.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1200px) { .st-two, .st-two.even { grid-template-columns: minmax(0, 1fr); } }
.st-preview-card { position: sticky; top: 76px; }
@media (max-width: 1200px) { .st-preview-card { position: static; } }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.st-card-title + .st-row, .st-note + .st-row { border-top: 0; }
.st-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-row-text b { font-size: 14px; font-weight: 600; }
.st-row-text span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.st-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; align-self: flex-start; }
.st-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.st-seg button.on { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.st-corner { width: 12px; height: 12px; border: 2px solid currentColor; border-right: 0; border-bottom: 0; display: inline-block; }
.st-corner-sharp { border-radius: 0; } .st-corner-rounded { border-top-left-radius: 4px; } .st-corner-soft { border-top-left-radius: 8px; }
.st-checks { display: flex; flex-wrap: wrap; gap: 0 12px; }
.st-meter { height: 8px; border-radius: 99px; background: var(--mud-palette-lines-default); overflow: hidden; }
.st-meter i { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.st-score { display: flex; align-items: baseline; gap: 6px; }
.st-score b { font-family: var(--al-display); font-size: 44px; line-height: 1; }
.st-score span { color: var(--mud-palette-text-secondary); }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.st-list li { display: flex; gap: 8px; align-items: center; color: var(--mud-palette-text-secondary); }
.st-list li::before { content: "○"; font-weight: 700; color: #D97706; width: 16px; text-align: center; }
.st-list li.ok { color: var(--mud-palette-text-primary); }
.st-list li.ok::before { content: "✓"; color: #10B981; }
.st-inline-save { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px;
  background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.st-inline-save > span { flex: 1; min-width: 220px; }
.st-market { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(110deg, var(--al-navy), var(--al-hero-b) 60%, color-mix(in srgb, var(--al-teal) 55%, var(--al-navy))); }
.st-on-dark { color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.st-tipcard { flex-direction: row; align-items: flex-start; color: var(--mud-palette-text-secondary); font-size: 13.5px; }
.st-cat-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.st-test { display: flex; gap: 8px; align-items: center; }
.st-test .mud-input-control { flex: 1; }
.st-filebtn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
  border: 1px solid var(--mud-palette-lines-inputs); overflow: hidden; }
.st-filebtn:hover { background: var(--mud-palette-action-default-hover); }
.st-mono-area textarea { font-family: var(--al-mono) !important; font-size: 13px !important; line-height: 1.55 !important; }
.st-prefixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.st-prefix { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); }
.st-prefix .al-mono { font-size: 12.5px; color: var(--mud-palette-text-secondary); padding-left: 2px; }
.st-milestones { display: flex; gap: 4px; height: 34px; }
.st-milestones span { display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background); border: 1px dashed var(--mud-palette-lines-inputs); min-width: 0; overflow: hidden; white-space: nowrap; }
.st-milestones span.first { color: #fff; background: var(--al-navy); border-style: solid; border-color: transparent; }
.st-sys { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.st-sys > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); }
.st-sys small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.st-sys b { font-family: var(--al-display); font-size: 20px; }
.st-sys span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.st-hist { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.st-hist:first-of-type { border-top: 0; }
.st-hist-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--al-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--al-blue) 15%, transparent); }
.st-hist-d { font-size: 12.5px; color: var(--mud-palette-text-secondary); font-family: var(--al-mono); overflow-wrap: anywhere; margin-top: 2px; }
.st-savebar { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(900px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 18px; border-radius: 16px; color: #fff;
  background: color-mix(in srgb, var(--al-navy) 94%, #000); box-shadow: 0 18px 48px rgba(6,25,43,.35); animation: st-up .25s ease; }
@media (min-width: 960px) { .st-savebar { left: calc(50% + 132px); } }
@keyframes st-up { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* branding: logo, swatches, colours */
.st-logo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.st-drop { position: relative; width: 120px; height: 120px; border-radius: 16px; border: 2px dashed var(--mud-palette-lines-inputs); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center; cursor: pointer; font-size: 12px; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background); overflow: hidden; padding: 6px; }
.st-drop:hover { border-color: var(--al-blue); }
.st-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-drop img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.st-swatch { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; background: var(--sw); color: #fff; display: grid; place-items: center; }
.st-swatch.on { box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 0 5px var(--sw); }
.st-swatch em { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-style: normal; color: var(--mud-palette-text-secondary); opacity: 0; transition: opacity .15s; pointer-events: none; }
.st-swatch:hover em { opacity: 1; }
.st-color { display: flex; gap: 8px; align-items: flex-start; }
.st-colorchip { position: relative; width: 40px; height: 40px; border-radius: 10px; flex: none; margin-top: 4px; cursor: pointer; border: 1px solid var(--mud-palette-lines-default); overflow: hidden; }
.st-colorchip input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.st-contrast { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.st-contrast.ok { background: color-mix(in srgb, #10B981 12%, transparent); } .st-contrast.ok .mud-icon-root { color: #10B981; }
.st-contrast.mid { background: color-mix(in srgb, #F59E0B 14%, transparent); } .st-contrast.mid .mud-icon-root { color: #D97706; }
.st-contrast.bad { background: color-mix(in srgb, #EF4444 12%, transparent); } .st-contrast.bad .mud-icon-root { color: #EF4444; }

/* live preview */
.pv { display: grid; grid-template-columns: 150px 1fr; min-height: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); background: #F7FAFC; color: #172B3A; }
.pv.dark { background: #0A1722; color: #E4EDF4; border-color: #1E3547; }
.pv-side { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: #fff; border-right: 1px solid #DFE7EE; }
.pv.dark .pv-side { background: #0F2130; border-color: #1E3547; }
.pv-side.navy { background: var(--pv); border-color: transparent; color: #fff; }
.pv-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; }
.pv-brand img, .pv-mark { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: linear-gradient(150deg, var(--pv2), var(--pv)); color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.pv-brand img { background: #fff; }
.pv-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 11.5px; opacity: .8; }
.pv-item i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; opacity: .35; }
.pv-item em { margin-left: auto; font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: 99px; background: #EF4444; color: #fff; }
.pv-item.on { opacity: 1; font-weight: 700; color: var(--pv); background: color-mix(in srgb, var(--pv) 11%, transparent); }
.pv.dark .pv-item.on { color: color-mix(in srgb, var(--pv2) 60%, #fff); }
.pv-side.navy .pv-item.on { color: #fff; background: rgba(255,255,255,.16); }
.pv-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pv-kpi { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #DFE7EE; display: flex; flex-direction: column; position: relative; }
.pv.dark .pv-kpi { background: #0F2130; border-color: #1E3547; }
.pv-kpi small { font-size: 10px; opacity: .7; } .pv-kpi b { font-size: 17px; }
.pv-chip { position: absolute; right: 8px; top: 8px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; color: var(--pv3); background: color-mix(in srgb, var(--pv3) 16%, transparent); }
.pv-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.pv-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--pv2); opacity: .85; }
.pv-bars i:last-child { background: var(--pv3); }
.pv-actions { display: flex; align-items: center; gap: 10px; }
.pv-btn { display: inline-block; padding: 5px 10px; border-radius: 7px; background: var(--pv); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.pv-btn.full { display: block; }
.pv-link { font-size: 11px; font-weight: 600; color: var(--pv2); }
.pv-signin { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); min-height: 150px; }
.pv-signin-stage { padding: 14px; color: #fff; display: flex; flex-direction: column; gap: 6px; justify-content: center; background: linear-gradient(160deg, var(--pv), color-mix(in srgb, var(--pv) 70%, #000)); }
.pv-signin-stage b { font-size: 13px; line-height: 1.3; } .pv-signin-stage span { font-size: 10.5px; opacity: .75; }
.pv-signin-card { padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: center; background: var(--mud-palette-surface); font-size: 12px; }
.pv-input { height: 20px; border-radius: 5px; border: 1px solid var(--mud-palette-lines-inputs); display: block; }

/* appearance */
.st-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-choice { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; border-radius: 14px; border: 2px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; font: inherit; color: inherit; }
.st-choice.on { border-color: var(--al-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-blue) 18%, transparent); }
.st-choice-row { display: flex; justify-content: space-between; align-items: center; }
.st-theme-art { height: 76px; border-radius: 10px; display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 6px; }
.st-theme-art i { border-radius: 5px; }
.st-theme-art i:first-child { grid-row: span 2; }
.st-theme-light { background: #EEF3F7; } .st-theme-light i { background: #fff; } .st-theme-light i:nth-child(2) { background: var(--pv); }
.st-theme-dark { background: #0A1722; } .st-theme-dark i { background: #0F2130; } .st-theme-dark i:nth-child(2) { background: color-mix(in srgb, var(--pv) 60%, #5DB2EC); }
.st-layout-demo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--mud-palette-background); border: 1px dashed var(--mud-palette-lines-inputs); }
.st-layout-demo.compact { gap: 4px; padding: 8px; }
.ld-banner { height: 34px; border-radius: var(--r); opacity: .9; }
.ld-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-layout-demo.compact .ld-cards { gap: 4px; }
.ld-cards i, .ld-rows i { display: block; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--r); }
.ld-cards i { height: 40px; } .st-layout-demo.compact .ld-cards i { height: 30px; }
.ld-rows { display: flex; flex-direction: column; gap: 6px; } .st-layout-demo.compact .ld-rows { gap: 3px; }
.ld-rows i { height: 14px; } .st-layout-demo.compact .ld-rows i { height: 10px; }

/* ============================== 360° views ============================== */
.cx-toolbar { display: flex; gap: 10px; align-items: center; padding: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cx-search { flex: 1 1 280px; }
.cx-filter { flex: 0 0 180px; }
.cx-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--mud-palette-text-secondary); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); }
.cx-chip b { font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.cx-chip.on { color: #fff; background: var(--al-navy); border-color: var(--al-navy); }
.cx-chip.on b { background: rgba(255,255,255,.22); color: #fff; }
.cx-row { cursor: pointer; }
.cx-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-name { font-weight: 700; font-size: 14px; color: var(--mud-palette-text-primary); text-decoration: none; }
.cx-name:hover { color: var(--al-blue); text-decoration: underline; }
.cx-sub { font-size: 12px; overflow-wrap: anywhere; }
.cx-pill { display: inline-flex; margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--mud-palette-text-secondary); background: var(--mud-palette-lines-default); white-space: nowrap; }
.cx-pill.teal { color: #0F766E; background: color-mix(in srgb, #14B8A6 18%, transparent); }
.cx-pill.amber { color: #92400E; background: color-mix(in srgb, #F59E0B 20%, transparent); }
.cx-pill.red { color: #B91C1C; background: color-mix(in srgb, #EF4444 15%, transparent); }
.al-dark .cx-pill.teal { color: #5EEAD4; } .al-dark .cx-pill.amber { color: #FCD34D; } .al-dark .cx-pill.red { color: #FCA5A5; }
.cx-rating { font-weight: 700; color: #B7791F; white-space: nowrap; }
.cx-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; margin: 6px 0 16px; border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--al-navy) 8%, var(--mud-palette-surface)), var(--mud-palette-surface) 70%); border: 1px solid var(--mud-palette-lines-default); }
.cx-hero-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.cx-title { font-family: var(--al-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; margin: 0; }
.cx-org { color: var(--mud-palette-text-secondary); font-size: 14px; }
.cx-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.cx-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cx-meta a { color: inherit; }
.cx-hero-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cx-ref { font-family: var(--al-mono); font-size: 12.5px; padding: 3px 9px; border-radius: 8px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); }
.cx-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); }
.cx-tag.teal { color: #0F766E; background: color-mix(in srgb, #14B8A6 15%, transparent); border-color: transparent; }
.cx-tag.amber { color: #92400E; background: color-mix(in srgb, #F59E0B 18%, transparent); border-color: transparent; }
.cx-tag.red { color: #B91C1C; background: color-mix(in srgb, #EF4444 14%, transparent); border-color: transparent; }
.cx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .cx-layout { grid-template-columns: minmax(0, 1fr); } }
.cx-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
@media (max-width: 1200px) { .cx-aside { position: static; } }
.cx-side { display: flex; flex-direction: column; gap: 10px; }
.cx-side-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.cx-side-h .mud-icon-root { color: var(--mud-palette-text-secondary); }
.cx-kv { grid-template-columns: minmax(96px, 40%) 1fr; font-size: 13px; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tabs .mud-tabs-tabbar { border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.cx-signals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cx-signal { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; background: color-mix(in srgb, var(--al-blue) 10%, transparent); }
.cx-signal.amber { background: color-mix(in srgb, #F59E0B 15%, transparent); } .cx-signal.amber .mud-icon-root { color: #D97706; }
.cx-signal.red { background: color-mix(in srgb, #EF4444 12%, transparent); } .cx-signal.red .mud-icon-root { color: #DC2626; }
.cx-signal.slate { background: var(--mud-palette-background); } .cx-signal.slate .mud-icon-root { color: var(--mud-palette-text-secondary); }
.cx-signal.blue .mud-icon-root { color: var(--al-blue); }
.cx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.cx-timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--mud-palette-lines-default); }
.cx-tl { position: relative; display: flex; gap: 12px; padding: 6px 0 12px; }
.cx-tl-ic { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 3px solid var(--mud-palette-surface);
  --c: var(--al-blue); color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--mud-palette-surface)); }
.cx-tl.tone-teal .cx-tl-ic { --c: #0D9488; } .cx-tl.tone-green .cx-tl-ic { --c: #16A34A; } .cx-tl.tone-amber .cx-tl-ic { --c: #D97706; }
.cx-tl.tone-red .cx-tl-ic { --c: #DC2626; } .cx-tl.tone-slate .cx-tl-ic { --c: #64748B; }
.cx-tl-body { flex: 1; min-width: 0; padding-top: 4px; }
.cx-tl-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.cx-tl-head span { font-size: 12px; white-space: nowrap; }
.cx-tl-detail { font-size: 12.5px; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.cx-funnel { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.cx-funnel b { text-align: right; }
:root { --cx-blue: var(--al-blue); --cx-slate: #64748B; --cx-teal: var(--al-teal); --cx-green: #16A34A; }
.cx-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 6px; }
.cx-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.cx-bar i { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--al-teal), var(--al-blue)); }
.cx-bar span { font-size: 11px; color: var(--mud-palette-text-secondary); }
.cx-mini { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; }
.cx-mini:hover { background: var(--mud-palette-action-default-hover); text-decoration: none; }
.cx-mini span.al-grow { display: flex; flex-direction: column; }
.cx-proj { display: flex; flex-direction: column; gap: 10px; }
.cx-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-step { flex: 1 1 90px; display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.cx-step small { font-weight: 500; font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-step.done { background: color-mix(in srgb, #16A34A 13%, transparent); border-color: transparent; }
.cx-step.now { background: color-mix(in srgb, var(--al-blue) 13%, transparent); border-color: color-mix(in srgb, var(--al-blue) 35%, transparent); }
.cx-step.bad { background: color-mix(in srgb, #EF4444 13%, transparent); border-color: transparent; }
.cx-stars { color: #E4A11B; letter-spacing: 1px; white-space: nowrap; font-size: 14px; }
.cx-stars i { font-style: normal; color: var(--mud-palette-lines-inputs); }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tags .cx-pill { margin-left: 0; }
.cx-notes { display: flex; flex-direction: column; gap: 10px; }
.cx-note { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #F59E0B 9%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, #F59E0B 25%, transparent); }
.cx-note-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.cx-note-b { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.cx-bad { color: var(--mud-palette-error); font-weight: 600; }
.cx-warn { color: #B45309; font-weight: 600; }

/* ============================== Legal pages ============================== */
.lg-wrap { max-width: 860px; }
.lg-title { font-size: clamp(28px, 4vw, 40px); margin: 4px 0 6px; }
.lg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 14px; }
.lg-tabs a { padding: 6px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); text-decoration: none; }
.lg-tabs a.on { color: #fff; background: var(--al-navy); border-color: var(--al-navy); }
.lg-body { padding: clamp(18px, 3vw, 32px); line-height: 1.7; font-size: 15px; }
.lg-body h2 { font-family: var(--al-display); font-size: 18px; margin: 18px 0 4px; }
.lg-body h2:first-child { margin-top: 0; }
.lg-body p { margin: 0 0 12px; }
.al-dark .cx-tag.teal { color: #5EEAD4; } .al-dark .cx-tag.amber { color: #FCD34D; } .al-dark .cx-tag.red { color: #FCA5A5; }
.al-dark .nv-status.warn { color: #FCD34D; }
.al-dark .nv-badge.soft { color: #5EEAD4; }
.al-dark .cx-chip.on, .al-dark .lg-tabs a.on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #04121D; }

.st-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

/* =====================================================================================
   Design system v2 (brand refresh) — tokens, type scale, cards, tables, badges, skeletons.
   Navy for structure and trust, teal for highlights, blue for links and data, generous neutrals.
   ===================================================================================== */
:root {
  --ds-ink: #142536; --ds-muted: #718096; --ds-line: #E4EAF1; --ds-line-soft: #EDF1F6; --ds-head: #F6F8FB;
  --ds-good: #16A36A; --ds-warn: #E9A23B; --ds-bad: #E05260; --ds-aqua-50: #E9FAF8;
  --ds-r-sm: 8px; --ds-r: 12px; --ds-r-lg: 16px;
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 24px; --ds-s6: 32px;
}
body { font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .al-h, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { letter-spacing: -0.015em !important; }
.al-pagehead { margin-bottom: 20px; align-items: flex-end; }
.al-pagehead .al-h { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 700 !important; line-height: 1.2; }
.al-pagehead .mud-typography-body1 { font-size: 14.5px; max-width: 760px; }
.al-eyebrow { color: color-mix(in srgb, var(--al-teal) 70%, #000); letter-spacing: .1em; font-size: 11.5px; }
.al-dark .al-eyebrow { color: var(--al-teal); }
.al-portal-main { max-width: 1440px; padding: 24px 28px 48px; }

/* cards */
.al-card { border-radius: var(--ds-r-lg); border-color: var(--mud-palette-lines-default); box-shadow: var(--al-shadow); padding: 18px 20px; }
.al-card.flush { padding: 0; }
.al-card-h { margin-bottom: 14px; }
.al-card-h .mud-typography-h6, .al-card-h > b { font-size: 15.5px !important; font-weight: 700 !important; }

/* KPI tiles */
.al-kpi { border-radius: var(--ds-r-lg); padding: 16px 18px; gap: 6px; box-shadow: var(--al-shadow); }
.al-kpi::before { display: none; }
.al-kpi-label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.al-kpi-value { font-family: var(--al-font); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.al-kpi-detail { font-size: 12.5px; }
.al-kpi-ic { width: 34px; height: 34px; border-radius: 10px; }
.al-kpi.teal { --tone: var(--al-teal); } .al-kpi.amber { --tone: #E9A23B; } .al-kpi.red { --tone: #E05260; } .al-kpi.slate { --tone: #64748B; } .al-kpi.blue { --tone: var(--al-blue); }

/* buttons & inputs */
.mud-button-root { border-radius: 10px !important; }
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 1px 2px rgba(11,31,51,.18) !important; }
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 10px !important; }
.mud-input.mud-input-outlined:not(.mud-disabled):not(.mud-input-error):hover .mud-input-outlined-border { border-color: color-mix(in srgb, var(--al-blue) 55%, var(--mud-palette-lines-inputs)) !important; }

/* tables */
.mud-table-outlined, .al-card.flush .mud-table { border-radius: var(--ds-r-lg) !important; overflow: hidden; }
.mud-table-outlined { border-color: var(--mud-palette-lines-default) !important; box-shadow: var(--al-shadow); background: var(--mud-palette-surface) !important; }
.mud-table-head .mud-table-row { background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface)); }
.mud-table-head .mud-table-cell { font-size: 11.5px !important; letter-spacing: .06em !important; font-weight: 700 !important; padding-top: 11px !important; padding-bottom: 11px !important; white-space: nowrap; border-bottom: 1px solid var(--mud-palette-lines-default) !important; }
.mud-table-body .mud-table-cell { padding-top: 12px !important; padding-bottom: 12px !important; border-bottom-color: var(--mud-palette-table-lines) !important; font-size: 13.5px; vertical-align: middle; }
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0 !important; }
.mud-table-dense .mud-table-body .mud-table-cell { padding-top: 9px !important; padding-bottom: 9px !important; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: color-mix(in srgb, var(--al-blue) 5%, transparent) !important; }
.mud-table-cell.al-num, .mud-table-cell .al-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-toolbar { padding: 12px 16px !important; min-height: 0 !important; height: auto !important; gap: 10px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-table-pagination { border-top: 1px solid var(--mud-palette-lines-default); }
.ds-nowrap { white-space: nowrap; }

/* tabs */
.mud-tabs-tabbar { background: transparent !important; }
.mud-tab { font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; min-width: 0 !important; padding: 10px 16px !important; }

/* badges (status) */
.al-badge, .mud-chip.al-chip { display: inline-flex !important; align-items: center; gap: 6px; height: 24px !important; padding: 0 10px !important; border-radius: 99px !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1; white-space: nowrap; border: 0 !important; }
.al-badge::before, .mud-chip.al-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mud-chip.al-chip .mud-chip-content { padding: 0 !important; }
.al-badge.tone-good, .mud-chip.al-chip.mud-chip-color-success { color: #0F7A52 !important; background: #E6F6EF !important; }
.al-badge.tone-warn, .mud-chip.al-chip.mud-chip-color-warning { color: #95580A !important; background: #FDF2DF !important; }
.al-badge.tone-bad, .mud-chip.al-chip.mud-chip-color-error { color: #B4313F !important; background: #FDECEE !important; }
.al-badge.tone-info, .mud-chip.al-chip.mud-chip-color-info, .mud-chip.al-chip.mud-chip-color-secondary, .mud-chip.al-chip.mud-chip-color-primary { color: #0B5FB8 !important; background: #E8F2FE !important; }
.al-badge.tone-accent, .mud-chip.al-chip.mud-chip-color-tertiary { color: #05706B !important; background: #E3F8F6 !important; }
.al-badge.tone-neutral, .mud-chip.al-chip.mud-chip-color-default { color: #4A5A6E !important; background: #EEF2F6 !important; }
.al-dark .al-badge.tone-good, .al-dark .mud-chip.al-chip.mud-chip-color-success { color: #5EE0A6 !important; background: rgba(22,163,106,.16) !important; }
.al-dark .al-badge.tone-warn, .al-dark .mud-chip.al-chip.mud-chip-color-warning { color: #F7C46F !important; background: rgba(233,162,59,.16) !important; }
.al-dark .al-badge.tone-bad, .al-dark .mud-chip.al-chip.mud-chip-color-error { color: #F49AA3 !important; background: rgba(224,82,96,.16) !important; }
.al-dark .al-badge.tone-info, .al-dark .mud-chip.al-chip.mud-chip-color-info, .al-dark .mud-chip.al-chip.mud-chip-color-secondary, .al-dark .mud-chip.al-chip.mud-chip-color-primary { color: #8CC3FF !important; background: rgba(22,139,250,.16) !important; }
.al-dark .al-badge.tone-accent, .al-dark .mud-chip.al-chip.mud-chip-color-tertiary { color: #5FE3DC !important; background: rgba(8,184,176,.16) !important; }
.al-dark .al-badge.tone-neutral, .al-dark .mud-chip.al-chip.mud-chip-color-default { color: #B6C3D1 !important; background: rgba(148,163,184,.14) !important; }

/* empty states */
.al-empty { border-radius: var(--ds-r-lg); border-style: dashed; padding: 44px 20px; gap: 8px; }
.al-empty-icon { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--al-teal) 12%, var(--mud-palette-surface)); color: color-mix(in srgb, var(--al-teal) 75%, #000); }

/* skeleton loaders */
.sk { display: flex; flex-direction: column; gap: 16px; }
.sk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .sk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sk-tile, .sk-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--ds-r-lg); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.sk-line { display: grid; grid-template-columns: 2fr 4fr 1.5fr 1fr; gap: 16px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.sk-l { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--mud-palette-lines-default) 25%, color-mix(in srgb, var(--mud-palette-lines-default) 40%, var(--mud-palette-surface)) 50%, var(--mud-palette-lines-default) 75%);
  background-size: 200% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; }
.sk-l.tall { height: 22px; } .sk-l.w10 { width: 10%; } .sk-l.w15 { width: 15%; } .sk-l.w20 { width: 20%; } .sk-l.w30 { width: 30%; } .sk-l.w40 { width: 40%; } .sk-l.w60 { width: 60%; }
.sk-line .sk-l { width: 100%; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* app bar & drawer polish */
/* The blur lives on a pseudo-element: backdrop-filter on the bar itself would become the containing block for
   MudBlazor's fixed click-away overlay and trap it inside the bar, so menus would never close on an outside click. */
.al-appbar { background: transparent !important; isolation: isolate; }
.al-appbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.nv-item { font-size: 13.5px; padding: 8px 10px; }
.nv-item.active { background: color-mix(in srgb, var(--al-teal) 13%, transparent); color: var(--mud-palette-text-primary); }
.nv-item.active .nv-ic { color: color-mix(in srgb, var(--al-teal) 75%, #000); }
.nv-item.active::before { background: var(--al-teal); }
.al-dark .nv-item.active { color: #fff; background: rgba(8,184,176,.16); }
.al-dark .nv-item.active .nv-ic { color: var(--al-teal); }

/* ============================== Executive & analytics (v2) ============================== */
@media (max-width: 959px) { .al-hide-md { display: none !important; } }
.al-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-delta { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.al-delta.up { color: #0F7A52; background: #E6F6EF; } .al-delta.down { color: #B4313F; background: #FDECEE; } .al-delta.flat { color: #4A5A6E; background: #EEF2F6; }
.al-dark .al-delta.up { color: #5EE0A6; background: rgba(22,163,106,.16); } .al-dark .al-delta.down { color: #F49AA3; background: rgba(224,82,96,.16); } .al-dark .al-delta.flat { color: #B6C3D1; background: rgba(148,163,184,.14); }

.drf { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
.drf button { border: 0; background: none; padding: 6px 11px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary); cursor: pointer; white-space: nowrap; }
.drf button:hover { color: var(--mud-palette-text-primary); }
.drf button.on { background: var(--al-navy); color: #fff; }
.al-dark .drf button.on { background: var(--al-teal); color: #032B29; }

.ex-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ex-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--mud-palette-text-primary);
  background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-left: 3px solid var(--c, var(--al-blue)); font-size: 13.5px; font-weight: 500; transition: transform .15s, box-shadow .15s; }
.ex-alert:hover { transform: translateY(-1px); box-shadow: var(--al-shadow); text-decoration: none; }
.ex-alert.bad { --c: #E05260; } .ex-alert.warn { --c: #E9A23B; } .ex-alert.info { --c: var(--al-blue); }
.ex-alert-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ex-alert-t { flex: 1; min-width: 0; }
.ex-alert-go { color: var(--mud-palette-text-secondary); }

.ex-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--al-shadow); }
.ex-strip > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.ex-strip > div:first-child { border-left: 0; }
.ex-strip small { font-size: 12px; color: var(--mud-palette-text-secondary); font-weight: 600; }
.ex-strip b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-strip b.bad { color: var(--ds-bad); }
.ex-strip span { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
@media (max-width: 1200px) { .ex-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-strip > div:nth-child(4) { border-left: 0; } .ex-strip > div:nth-child(n+4) { border-top: 1px solid var(--mud-palette-lines-default); } }
@media (max-width: 640px) { .ex-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-strip > div { border-left: 0 !important; border-top: 1px solid var(--mud-palette-lines-default); } .ex-strip > div:nth-child(-n+2) { border-top: 0; } }

.ex-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ex-span-4 { grid-column: span 4; } .ex-span-5 { grid-column: span 5; } .ex-span-7 { grid-column: span 7; } .ex-span-8 { grid-column: span 8; }
@media (max-width: 1200px) { .ex-span-4 { grid-column: span 6; } .ex-span-5, .ex-span-7, .ex-span-8 { grid-column: span 12; } }
@media (max-width: 760px) { .ex-span-4 { grid-column: span 12; } }
.ex-pad { padding: 16px 20px; }
.al-card-h.ex-pad { margin: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ex-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.ex-kpi6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .ex-kpi6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ex-kpi6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ex-funnel { display: flex; flex-direction: column; gap: 14px; }
.ex-fhead { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.ex-fhead b { font-variant-numeric: tabular-nums; }
.ex-fbar { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--al-blue) 10%, var(--mud-palette-surface)); overflow: hidden; }
.ex-fbar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--al-blue); }
.ex-fstep:last-child .ex-fbar i { background: var(--al-teal); }
.ex-fconv { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.ex-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; color: var(--mud-palette-text-secondary); }
.ex-note b { color: var(--mud-palette-text-primary); }
.ex-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; }
.ex-item:hover { background: var(--mud-palette-action-default-hover); text-decoration: none; }
.ex-item .al-grow { display: flex; flex-direction: column; min-width: 0; }
.ex-item b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-item small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.ex-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ex-ic.bad { color: #E05260; background: color-mix(in srgb, #E05260 12%, transparent); }
.ex-ok { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 10px; font-size: 13.5px; color: #0F7A52; background: #E6F6EF; }
.al-dark .ex-ok { color: #5EE0A6; background: rgba(22,163,106,.14); }

/* plain data tables (dashboards, registers) */
.ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary);
  padding: 10px 16px; background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface)); border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.ds-table td { padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-table-lines, var(--mud-palette-lines-default)); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: color-mix(in srgb, var(--al-blue) 4%, transparent); }
.ds-table tr.warn td { background: color-mix(in srgb, #E9A23B 7%, transparent); }
.ds-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table .nw { white-space: nowrap; }
.ds-table.compact td { padding: 8px 16px; }
.ds-table.compact th { padding: 8px 16px; }
.ds-table a { color: inherit; } .ds-table a:hover { color: var(--al-blue); }
.al-card .ds-table th:first-child, .al-card .ds-table td:first-child { padding-left: 20px; }
.al-card .ds-table th:last-child, .al-card .ds-table td:last-child { padding-right: 20px; }
.al-card:not(.flush) .ds-table th:first-child, .al-card:not(.flush) .ds-table td:first-child { padding-left: 0; }
.al-card:not(.flush) .ds-table th:last-child, .al-card:not(.flush) .ds-table td:last-child { padding-right: 0; }
.al-card:not(.flush) .ds-table th { background: none; }
@media (max-width: 900px) { .al-card.flush:has(.ds-table) { overflow-x: auto; } .ds-table { min-width: 760px; } }

/* trend chart */
.tc { display: flex; flex-direction: column; gap: 8px; }
.tc-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.tc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.tc-plot { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: var(--h); }
.tc-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--mud-palette-text-secondary); text-align: right; font-variant-numeric: tabular-nums; margin: -6px 0; }
.tc-area { position: relative; }
.tc-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.tc-grid i { height: 1px; background: var(--mud-palette-lines-default); }
.tc-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--mud-palette-text-secondary); pointer-events: none; z-index: 1; }
.tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-end { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--mud-palette-surface); pointer-events: none; }
.tc-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.tc.line .tc-cols { left: calc(-50% / var(--n, 20)); right: calc(-50% / var(--n, 20)); }
.tc-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.tc-stack { width: min(24px, 64%); display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 0; }
.tc-stack i { display: block; min-height: 2px; }
.tc-col:hover .tc-stack, .tc-col:focus .tc-stack { filter: brightness(1.08); }
.tc-guide { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--mud-palette-text-secondary); opacity: 0; }
.tc-col:hover .tc-guide, .tc-col:focus .tc-guide { opacity: .35; }
.tc-tip { position: absolute; z-index: 5; bottom: calc(100% - 8px); left: 50%; transform: translate(-10%, 0); min-width: 170px; padding: 9px 11px; border-radius: 10px;
  background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--al-shadow-lg); font-size: 12px; display: none; flex-direction: column; gap: 4px; pointer-events: none; }
.tc-tip.left { transform: translate(-90%, 0); }
.tc-col:hover .tc-tip, .tc-col:focus .tc-tip { display: flex; }
.tc-tip b { font-size: 12.5px; }
.tc-tip span { display: flex; align-items: center; gap: 6px; color: var(--mud-palette-text-secondary); }
.tc-tip span i { width: 8px; height: 8px; border-radius: 2px; }
.tc-tip em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; padding-left: 12px; }
.tc-tip .tot { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 4px; }
.tc-x { display: flex; margin-left: 42px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.tc-x span { flex: 1; text-align: center; white-space: nowrap; overflow: visible; }
.tc.line .tc-x span:first-child { text-align: left; } .tc.line .tc-x span:last-child { text-align: right; }
.tc-table { font-size: 12px; color: var(--mud-palette-text-secondary); }
.tc-table summary { cursor: pointer; width: fit-content; }
.tc-table table { margin-top: 6px; width: 100%; border-collapse: collapse; }
.tc-table th, .tc-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }

/* bar list */
.bl { display: flex; flex-direction: column; gap: 10px; }
.bl-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bl-label { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bl-label small { font-weight: 400; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.bl-track { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent); overflow: hidden; }
.bl-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bl-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.bl-empty { font-size: 13px; color: var(--mud-palette-text-secondary); padding: 8px 0; }

/* commissions */
.cm-default { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.cm-save > span { flex: 1; min-width: 240px; }
.cm-sim { display: flex; flex-direction: column; gap: 12px; }
.cm-simt tr.tot td { font-weight: 600; border-top: 1px solid var(--mud-palette-lines-default); }
.ds-table .mud-input-control { margin: 0 !important; }

/* reports */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.rp-card { display: flex; gap: 14px; align-items: flex-start; }
.rp-card p { margin: 2px 0 6px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.rp-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--al-teal) 75%, #000); background: color-mix(in srgb, var(--al-teal) 13%, var(--mud-palette-surface)); }
.al-dark .rp-ic { color: var(--al-teal); }

/* notification centre */
.nc-pop { border-radius: 14px !important; }
.nc { width: 360px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; }
.nc-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.nc-link, .nc-all { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--al-blue); cursor: pointer; text-decoration: none; }
.nc-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--mud-palette-text-primary); border-bottom: 1px solid var(--mud-palette-lines-default); }
.nc-item:hover { background: var(--mud-palette-action-default-hover); }
.nc-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: transparent; }
.nc-item.unread .nc-dot { background: var(--al-teal); }
.nc-item.unread .nc-t { font-weight: 600; }
.nc-t { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; min-width: 0; }
.nc-t small { font-weight: 400; font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.nc-empty { display: flex; align-items: center; gap: 8px; padding: 20px 16px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.nc-all { display: block; padding: 11px 16px; text-align: center; }
.um-name { display: inline-flex; flex-direction: column; line-height: 1.15; }
.um-name small { font-size: 11px; font-weight: 500; color: var(--mud-palette-text-secondary); }

/* admin command search */
.cs { position: relative; margin-right: 8px; }
.cs-box { display: flex; align-items: center; gap: 8px; width: clamp(220px, 28vw, 420px); height: 38px; padding: 0 12px; border-radius: 11px;
  background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); transition: border-color .15s, box-shadow .15s; }
.cs-box:focus-within { border-color: var(--al-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-blue) 18%, transparent); }
.cs-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--mud-palette-text-primary); }
.cs-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1400; max-height: 70vh; overflow: auto; padding: 6px; border-radius: 14px;
  background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--al-shadow-lg); }
.cs-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.cs-hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--mud-palette-text-primary); }
.cs-hit:hover, .cs-hit.on { background: color-mix(in srgb, var(--al-blue) 9%, transparent); }
.cs-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 11%, transparent); }
.cs-t { display: flex; flex-direction: column; min-width: 0; }
.cs-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-t small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.cs-empty { padding: 14px; font-size: 13px; color: var(--mud-palette-text-secondary); }
@media (max-width: 760px) { .cs { display: none; } }

/* collapsible (mini) sidebar */
.nv-collapse { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.nv.mini { padding: 10px 8px; }
.nv.mini .nv-group-title { justify-content: center; padding: 8px 0 2px; font-size: 0; }
.nv.mini .nv-group-title::after { content: ""; width: 20px; height: 1px; background: var(--mud-palette-lines-default); }
.nv.mini .nv-group-title > * { display: none; }
.nv.mini .nv-item { justify-content: center; padding: 9px 0; }
.nv.mini .nv-text, .nv.mini .nv-cta { display: none; }
.nv.mini .nv-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.nv-is-mini .nv-foot .nv-text, .nv-is-mini .nv-foot .nv-status { display: none; }
.nv-is-mini .nv-foot .nv-item { justify-content: center; }

.tc-plot { margin-bottom: 20px; }
.tc-xl { position: absolute; left: 0; right: 0; top: calc(100% + 6px); height: 14px; pointer-events: none; }
.tc-xl span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.tc-xl span.first { transform: none; } .tc-xl span.last { transform: translateX(-100%); }
.tc.stack .tc-cols { left: 0; right: 0; }