/* =====================================================================================================
   AquaLink · Signature design (v3)
   Loaded last. Refined neutrals, an ink sidebar, bevelled surfaces with layered shadows, Geist type,
   a validated chart palette and purposeful motion. Brand colours (Settings → Branding) arrive as
   --al-brand / --al-blue / --al-teal; everything else is fixed so every preset stays legible.
   Light and dark are both designed (dark is selected, not inverted).
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  --sg-bg: #F4F6F9;
  --sg-surface: #FFFFFF;
  --sg-raised: #FBFCFD;
  --sg-sunken: #EEF1F5;
  --sg-line: #E4E8EE;
  --sg-line-soft: #EDF0F4;
  --sg-ink: #0E1726;
  --sg-muted: #5B6576;
  --sg-faint: #8A94A5;
  --sg-good: #13875A; --sg-good-bg: #E7F5EE;
  --sg-warn: #B7731A; --sg-warn-bg: #FCF1DF;
  --sg-bad: #D23F4E;  --sg-bad-bg: #FCEBED;
  --sg-info: #2F6FDF; --sg-info-bg: #EAF1FD;

  /* bevel: a lit top edge and a soft lower edge, then two layered ambient shadows */
  --sg-bevel: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(14,23,38,.035);
  --sg-shadow-1: 0 1px 2px rgba(14,23,38,.05), 0 1px 1px rgba(14,23,38,.03);
  --sg-shadow-2: 0 1px 2px rgba(14,23,38,.04), 0 8px 24px -12px rgba(14,23,38,.14);
  --sg-shadow-3: 0 2px 6px rgba(14,23,38,.06), 0 24px 48px -20px rgba(14,23,38,.28);
  --sg-ring: 0 0 0 3px color-mix(in srgb, var(--al-brand, #0F5C6E) 22%, transparent);
  --sg-ease: cubic-bezier(.2,.8,.2,1);

  /* chart palette — fixed order, validated for CVD and contrast (light surface) */
  --cv1: #2F6FDF; --cv2: #E0782F; --cv3: #12A58C; --cv4: #7C5CE0; --cv5: #E0A21F; --cv6: #D9547E;
  --cv-seq: var(--cv1);

  --al-shadow: var(--sg-shadow-2);
  --al-shadow-lg: var(--sg-shadow-3);
}
:root:has(.al-dark) {
  --sg-bg: #070B12;
  --sg-surface: #0E141E;
  --sg-raised: #121A26;
  --sg-sunken: #0A1018;
  --sg-line: #1B2431;
  --sg-line-soft: #161E2A;
  --sg-ink: #E7ECF3;
  --sg-muted: #8D99AB;
  --sg-faint: #637083;
  --sg-good: #3FCB8A; --sg-good-bg: rgba(63,203,138,.12);
  --sg-warn: #E9B04D; --sg-warn-bg: rgba(233,176,77,.12);
  --sg-bad: #F07480;  --sg-bad-bg: rgba(240,116,128,.12);
  --sg-info: #6F9CF2; --sg-info-bg: rgba(111,156,242,.12);
  --sg-bevel: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.25);
  --sg-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --sg-shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.65);
  --sg-shadow-3: 0 2px 8px rgba(0,0,0,.4), 0 28px 56px -20px rgba(0,0,0,.75);
  --sg-ring: 0 0 0 3px color-mix(in srgb, var(--al-brand-lift, #6FA6B2) 30%, transparent);
  /* chart palette — dark steps of the same hues, validated against #0F1622 */
  --cv1: #4A86EE; --cv2: #D9722F; --cv3: #17A08A; --cv4: #8F76EA; --cv5: #B8861C; --cv6: #D55A85;
}

/* ---------------------------------------------------------------- 2. Base & type */
html, body { background: var(--sg-bg); }
body { color: var(--sg-ink); font-size: 14px; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, .al-h, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { letter-spacing: -0.025em !important; }
.mud-typography-h4 { font-weight: 650 !important; }
.mud-typography-h5, .mud-typography-h6 { font-weight: 650 !important; }
.al-mono, .al-num, .mud-table-cell.al-num { font-variant-numeric: tabular-nums; }
.al-mono { font-family: var(--al-mono-font, var(--al-mono)); letter-spacing: -.01em; }
::selection { background: color-mix(in srgb, var(--al-teal) 30%, transparent); }
a { color: var(--al-blue); text-underline-offset: 3px; }
.al-dark a:not(.nv-item):not(.mud-button-root):not([class*="hx-"]):not(:where(.hx-nav, .hx-chips, .hx-strip, .hx-header, .hx-hero, .hx-band) a) { color: color-mix(in srgb, var(--al-blue) 60%, #fff); }
:focus-visible { outline: 2px solid var(--al-teal); outline-offset: 2px; }
.sg-serif { font-family: var(--al-serif); font-weight: 400; letter-spacing: -0.01em; }
.sg-serif i, i.sg-serif { font-style: italic; }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sg-muted) 35%, transparent) transparent; }

/* ---------------------------------------------------------------- 3. Shell */
.sg-shell { background:
    radial-gradient(1200px 520px at 100% -10%, color-mix(in srgb, var(--al-teal) 7%, transparent), transparent 60%),
    radial-gradient(900px 420px at 20% -20%, color-mix(in srgb, var(--al-brand) 6%, transparent), transparent 60%),
    var(--sg-bg); min-height: 100vh; }
.al-dark.sg-shell { background:
    radial-gradient(1100px 520px at 100% -10%, color-mix(in srgb, var(--al-teal) 9%, transparent), transparent 60%),
    radial-gradient(900px 420px at 15% -25%, color-mix(in srgb, var(--al-brand-lift) 10%, transparent), transparent 60%),
    var(--sg-bg); }

.sg-topbar { height: 64px !important; border-bottom: 1px solid transparent !important; color: var(--sg-ink) !important; padding-inline: 8px 14px; }
.sg-topbar .mud-toolbar { height: 64px; gap: 6px; padding-inline: 20px 12px !important; }
.al-appbar.sg-topbar::before { background: color-mix(in srgb, var(--sg-bg) 78%, transparent); border-bottom: 1px solid var(--sg-line); }
.sg-top-logo { font-size: 17px; }
.sg-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; color: var(--sg-muted); white-space: nowrap; }
.sg-crumbs a { color: var(--sg-muted) !important; text-decoration: none; font-weight: 500; }
.sg-crumbs a:hover { color: var(--sg-ink) !important; }
.sg-crumbs .mud-icon-root { font-size: 16px; opacity: .55; }
.sg-crumbs b { color: var(--sg-ink); font-weight: 600; }

.sg-content { min-height: 100vh; }
.al-portal-main.sg-main { max-width: 1560px; margin: 0 auto; padding: 16px 20px 40px; }
@media (max-width: 960px) { .al-portal-main.sg-main { padding: 12px 12px 32px; } }

/* ---------------------------------------------------------------- 4. Sidebar (ink) */
.sg-side.mud-drawer { border-right: 0 !important; }
.sg-side .mud-drawer-content { display: flex; flex-direction: column; }
/* The ink sidebar is built from the theme: a deep shade of the brand primary (so Lagoon is deep teal, Burgundy is
   wine, Royal Indigo is midnight indigo, Graphite stays charcoal) with the accent colour as its highlight. */
:root { --sg-side-1: color-mix(in srgb, var(--al-brand) 62%, #04070C); --sg-side-2: color-mix(in srgb, var(--al-brand) 38%, #04070C); --sg-side-hi: var(--al-teal); }
:root:has(.al-dark) { --sg-side-1: color-mix(in srgb, var(--al-brand) 40%, #05080D); --sg-side-2: color-mix(in srgb, var(--al-brand) 22%, #05080D); }
.sg-ink.mud-drawer { color: #E7ECF3;
  background:
    radial-gradient(420px 260px at -10% -5%, color-mix(in srgb, var(--sg-side-hi) 22%, transparent), transparent 70%),
    radial-gradient(360px 300px at 120% 110%, color-mix(in srgb, var(--al-brand) 45%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sg-side-1) 0%, var(--sg-side-2) 100%) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07); }
.sg-brand { display: flex; align-items: center; height: 64px; padding: 0 18px; flex: none; }
.sg-brand-link { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none !important; color: inherit !important; }
.sg-brand-mark.al-logo-mark, .sg-brand-mark.al-logo-img { width: 34px; height: 34px; border-radius: 10px; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px color-mix(in srgb, var(--al-teal) 70%, transparent); }
.sg-brand-mark.al-logo-mark { background: linear-gradient(145deg, var(--al-teal), var(--al-brand) 75%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px -6px color-mix(in srgb, var(--al-teal) 70%, transparent); }
.sg-brand-name { display: flex; flex-direction: column; min-width: 0; font-family: var(--al-display); font-weight: 650; font-size: 16.5px; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.sg-brand-name small { font-family: var(--al-font); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .55; margin-top: 3px; }
.sg-ink .sg-brand-name { color: #fff; }
.sg-side-light .sg-brand-name { color: var(--sg-ink); }

.sg-side .nv { padding: 4px 12px 12px; gap: 1px; }
.sg-side .nv-search { height: 36px; margin: 2px 0 10px; border-radius: 10px; }
.sg-ink .nv-search { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(231,236,243,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.sg-ink .nv-search input { color: #fff; }
.sg-ink .nv-search input::placeholder { color: rgba(231,236,243,.45); }
.sg-side .nv-group { margin-bottom: 8px; }
.sg-side .nv-group-title { padding: 10px 10px 6px; font-size: 10.5px; letter-spacing: .12em; font-weight: 600; }
.sg-ink .nv-group-title { color: rgba(231,236,243,.38); }
.sg-ink .nv-group-title:hover { color: rgba(231,236,243,.8); }
.sg-side .nv-item { height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; gap: 11px; transition: background .18s, color .18s, transform .18s; }
.sg-ink .nv-item { color: rgba(231,236,243,.72); }
.sg-ink .nv-item .nv-ic { color: rgba(231,236,243,.45); transition: color .18s; }
.sg-ink .nv-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.sg-ink .nv-item:hover .nv-ic { color: rgba(231,236,243,.85); }
.sg-ink .nv-item.active { color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05); }
.sg-ink .nv-item.active .nv-ic { color: var(--sg-side-hi); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sg-side-hi) 60%, transparent)); }
.sg-side .nv-item.active::before { left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--sg-side-hi), color-mix(in srgb, var(--sg-side-hi) 45%, var(--al-blue))); box-shadow: 0 0 12px var(--sg-side-hi); }
.sg-side .nv-badge { height: 19px; min-width: 19px; font-size: 10.5px; background: linear-gradient(180deg, #F0646F, #D23F4E); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px -2px rgba(210,63,78,.7); }
.sg-ink .nv-badge.soft { background: rgba(34,184,167,.18); color: #7FE7DA; box-shadow: none; }
.sg-ink .nv-dot { box-shadow: 0 0 8px var(--al-teal); }
.sg-side .nv-foot { padding: 10px 12px 14px; }
.sg-ink .nv-foot { border-top: 1px solid rgba(255,255,255,.07); }
.sg-ink .nv-status.warn { color: #F7C46F; background: rgba(233,176,77,.12); }
.sg-env { display: flex; align-items: center; gap: 8px; padding: 6px 10px 10px; font-size: 11.5px; color: rgba(231,236,243,.5); }
.sg-side-light .sg-env { color: var(--sg-faint); }
.sg-pulse { width: 7px; height: 7px; border-radius: 50%; background: #3FCB8A; flex: none; box-shadow: 0 0 0 0 rgba(63,203,138,.6); animation: sg-pulse 2.4s infinite; }
@keyframes sg-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,203,138,.55); } 70% { box-shadow: 0 0 0 7px rgba(63,203,138,0); } 100% { box-shadow: 0 0 0 0 rgba(63,203,138,0); } }

/* light sidebar variant (Settings → Appearance) */
.sg-side-light.mud-drawer { background: linear-gradient(180deg, color-mix(in srgb, var(--al-brand) 5%, var(--sg-surface)), color-mix(in srgb, var(--al-brand) 9%, var(--sg-surface))) !important; box-shadow: inset -1px 0 0 var(--sg-line); }
.sg-side-light .nv-item.active { background: color-mix(in srgb, var(--al-brand) 8%, transparent); color: var(--al-brand); }
.sg-side-light .nv-item.active .nv-ic { color: var(--al-brand); }

/* mini sidebar */
.nv-is-mini .sg-brand { justify-content: center; padding: 0; }
.nv-is-mini .sg-brand-name { display: none; }
.nv-is-mini .sg-side .nv { padding: 4px 10px 12px; }
.nv-is-mini .sg-side .nv-item { justify-content: center; padding: 0; }
.nv-is-mini .sg-side .nv-item.active::before { left: -10px; }
.sg-ink .nv.mini .nv-group-title::after { background: rgba(255,255,255,.1); }

/* ---------------------------------------------------------------- 5. Page header */
.al-pagehead { margin-bottom: 14px; align-items: flex-end; gap: 12px; }
.al-pagehead .al-h { font-size: clamp(21px, 1.9vw, 27px) !important; font-weight: 650 !important; letter-spacing: -0.032em !important; line-height: 1.12; color: var(--sg-ink); }
.al-pagehead .mud-typography-body1 { font-size: 13.5px; color: var(--sg-muted) !important; max-width: 780px; line-height: 1.55; }
.al-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 11px !important; font-weight: 600; letter-spacing: .14em !important; text-transform: uppercase;
  color: color-mix(in srgb, var(--al-teal) 62%, var(--sg-ink)) !important; }
.al-eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--al-teal), transparent); }
.al-dark .al-eyebrow { color: var(--al-teal) !important; }
.al-back { font-weight: 600; font-size: 13px; color: var(--sg-muted) !important; margin-bottom: 10px; }
.al-back:hover { color: var(--sg-ink) !important; }

/* ---------------------------------------------------------------- 6. Surfaces */
.al-card, .mud-paper-outlined, .st-card, .sk-tile, .sk-card {
  background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)) !important;
  border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r, 16px) !important;
  box-shadow: var(--sg-bevel), var(--sg-shadow-2) !important; }
.al-card { padding: 15px 16px; }
.al-card.flush { padding: 0; }
.al-card-h { margin-bottom: 12px; }
.al-card-h b, .al-card-h .mud-typography-h6 { font-size: 15px !important; font-weight: 650 !important; letter-spacing: -.012em; }
.al-card-h .al-small.al-muted { font-size: 12.5px; margin-top: 2px; }
.al-card.flush > .al-card-h { padding: 14px 16px 0; }
.al-card.flush > .al-card-h.ex-pad { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--sg-line); }
.ex-pad { padding: 12px 16px; }
.al-card .ds-table th:first-child, .al-card .ds-table td:first-child { padding-left: 16px; }
.al-card .ds-table th:last-child, .al-card .ds-table td:last-child { padding-right: 16px; }
.ds-table td { padding: 10px 12px; } .ds-table th { padding: 9px 12px; }
.mud-table-body .mud-table-cell { padding-top: 10px !important; padding-bottom: 10px !important; }
.al-dark .al-card, .al-dark .mud-paper-outlined, .al-dark .st-card { background: linear-gradient(180deg, var(--sg-raised), var(--sg-surface)) !important; }
.mud-paper:not(.mud-paper-outlined):not(.mud-popover):not(.mud-appbar):not(.mud-drawer):not(.mud-table) { border-radius: var(--sg-r-sm, 11px); }
.mud-popover, .mud-dialog { border-radius: 14px !important; border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3) !important; }
.mud-dialog .mud-dialog-title { font-family: var(--al-display); letter-spacing: -.02em; }
.mud-overlay-dark { background-color: rgba(7,11,18,.55) !important; backdrop-filter: blur(3px); }

/* hover-lift for links that are whole cards */
.sg-lift { transition: transform .25s var(--sg-ease), box-shadow .25s var(--sg-ease), border-color .25s; }
.sg-lift:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-3) !important; }

/* ---------------------------------------------------------------- 7. KPI tiles */
.al-kpi { --tone: var(--cv1); padding: 13px 14px 12px; gap: 5px; border-radius: var(--sg-r, 16px); border: 1px solid var(--sg-line);
  background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-2); overflow: hidden; isolation: isolate; }
.al-kpi::before { display: block !important; content: ""; position: absolute; inset: 0 0 auto 0; width: auto; height: 120px; z-index: -1; opacity: 1;
  background: radial-gradient(220px 110px at 100% 0%, color-mix(in srgb, var(--tone) 10%, transparent), transparent 70%); }
.al-kpi.teal { --tone: var(--cv3); } .al-kpi.amber { --tone: var(--cv5); } .al-kpi.red { --tone: var(--sg-bad); } .al-kpi.slate { --tone: #64748B; } .al-kpi.blue { --tone: var(--cv1); } .al-kpi.violet { --tone: var(--cv4); }
.al-kpi-label { font-size: 12.5px; font-weight: 550; color: var(--sg-muted); letter-spacing: 0; }
.al-kpi-ic { width: 30px; height: 30px; border-radius: 10px; color: var(--tone);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 16%, var(--sg-surface)), color-mix(in srgb, var(--tone) 8%, var(--sg-surface)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent); }
.al-dark .al-kpi-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); }
.al-kpi-value { font-family: var(--al-display); font-size: 24px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; color: var(--sg-ink); }
.al-kpi-value small { font-size: 14px; font-weight: 600; color: var(--sg-muted); letter-spacing: 0; margin-right: 3px; }
.al-kpi-detail { font-size: 12px; color: var(--sg-muted); }
.al-kpi.link:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-3); border-color: color-mix(in srgb, var(--tone) 35%, var(--sg-line)); }
.al-kpi-spark { margin: 2px -2px -4px; height: 34px; }
.al-delta { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 650; gap: 3px; }
.al-delta.up { color: var(--sg-good); background: var(--sg-good-bg); } .al-delta.down { color: var(--sg-bad); background: var(--sg-bad-bg); } .al-delta.flat { color: var(--sg-muted); background: var(--sg-sunken); }
.al-dark .al-delta.up { color: var(--sg-good); background: var(--sg-good-bg); } .al-dark .al-delta.down { color: var(--sg-bad); background: var(--sg-bad-bg); } .al-dark .al-delta.flat { color: var(--sg-muted); background: rgba(255,255,255,.05); }

/* ---------------------------------------------------------------- 8. Controls */
.mud-button-root { border-radius: 10px !important; font-weight: 600 !important; letter-spacing: -.005em !important; transition: transform .15s, box-shadow .2s, background-color .2s, filter .2s !important; }
.mud-button-filled { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(14,23,38,.18), 0 4px 12px -6px rgba(14,23,38,.35) !important; }
.mud-button-filled:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 4px rgba(14,23,38,.18), 0 10px 22px -10px rgba(14,23,38,.45) !important; }
.mud-button-filled:active { transform: translateY(1px); }
.mud-button-filled.mud-button-filled-primary { background-color: var(--mud-palette-primary) !important; }
.mud-button-outlined { background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)) !important; border-color: var(--sg-line) !important; box-shadow: var(--sg-bevel), var(--sg-shadow-1) !important; color: var(--sg-ink) !important; }
.mud-button-outlined.mud-button-outlined-error { color: var(--sg-bad) !important; }
.mud-button-outlined.mud-button-outlined-primary { color: var(--mud-palette-primary) !important; }
.mud-button-outlined:hover { border-color: color-mix(in srgb, var(--sg-ink) 18%, var(--sg-line)) !important; }
.mud-button-text:hover { background: color-mix(in srgb, var(--sg-ink) 5%, transparent) !important; }
.mud-icon-button { border-radius: 10px !important; }

.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 10px !important; border-color: var(--sg-line) !important; transition: border-color .15s, box-shadow .15s; }
.mud-input.mud-input-outlined { background: var(--sg-surface); border-radius: 10px; }
.mud-input.mud-input-outlined.mud-input-adorned-start, .mud-input.mud-input-outlined:focus-within { }
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--mud-palette-primary) !important; box-shadow: var(--sg-ring); }
.mud-switch-track { opacity: 1 !important; }

/* segmented controls (period filter, view toggles) */
.drf, .sg-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--sg-sunken); border: 1px solid var(--sg-line); box-shadow: inset 0 1px 2px rgba(14,23,38,.05); flex-wrap: wrap; }
.drf button, .sg-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sg-muted); cursor: pointer; white-space: nowrap; transition: color .15s, background .2s, box-shadow .2s; display: inline-flex; align-items: center; gap: 6px; }
.drf button:hover, .sg-seg button:hover { color: var(--sg-ink); }
.drf button.on, .sg-seg button.on { color: var(--sg-ink); background: var(--sg-surface); box-shadow: var(--sg-bevel), 0 1px 3px rgba(14,23,38,.12); }
.al-dark .drf button.on, .al-dark .sg-seg button.on { background: #1A2433; color: #fff; }
.sg-seg button b { font-variant-numeric: tabular-nums; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--sg-ink) 7%, transparent); }

/* simulated tag */
.al-sim { border-radius: 99px; padding: 3px 10px 3px 8px; font-size: 10.5px; letter-spacing: .08em; gap: 6px; border: 1px solid color-mix(in srgb, var(--sg-warn) 45%, transparent); color: var(--sg-warn); background: var(--sg-warn-bg); }
.al-sim::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- 9. Badges */
.al-badge, .mud-chip.al-chip { height: 23px !important; padding: 0 9px !important; border-radius: 7px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.al-badge.tone-good, .mud-chip.al-chip.mud-chip-color-success { color: var(--sg-good) !important; background: var(--sg-good-bg) !important; }
.al-badge.tone-warn, .mud-chip.al-chip.mud-chip-color-warning { color: var(--sg-warn) !important; background: var(--sg-warn-bg) !important; }
.al-badge.tone-bad, .mud-chip.al-chip.mud-chip-color-error { color: var(--sg-bad) !important; background: var(--sg-bad-bg) !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: var(--sg-info) !important; background: var(--sg-info-bg) !important; }
.al-badge.tone-accent, .mud-chip.al-chip.mud-chip-color-tertiary { color: color-mix(in srgb, var(--cv3) 85%, var(--sg-ink)) !important; background: color-mix(in srgb, var(--cv3) 12%, transparent) !important; }
.al-badge.tone-neutral, .mud-chip.al-chip.mud-chip-color-default { color: var(--sg-muted) !important; background: var(--sg-sunken) !important; }
.al-dark .al-badge.tone-neutral, .al-dark .mud-chip.al-chip.mud-chip-color-default { background: rgba(255,255,255,.05) !important; }

/* ---------------------------------------------------------------- 10. Tables */
.mud-table-outlined, .mud-table.mud-table-outlined { border-radius: var(--sg-r, 16px) !important; border: 1px solid var(--sg-line) !important; box-shadow: var(--sg-bevel), var(--sg-shadow-2) !important;
  background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)) !important; overflow: hidden; }
.mud-table-head .mud-table-row, .ds-table th { background: color-mix(in srgb, var(--sg-sunken) 70%, var(--sg-surface)) !important; }
.mud-table-head .mud-table-cell, .ds-table th { font-size: 11px !important; letter-spacing: .08em !important; font-weight: 600 !important; color: var(--sg-muted) !important; text-transform: uppercase;
  border-bottom: 1px solid var(--sg-line) !important; padding-top: 11px !important; padding-bottom: 11px !important; }
.mud-table-body .mud-table-cell, .ds-table td { font-size: 13.5px; border-bottom: 1px solid var(--sg-line-soft) !important; }
.mud-table-hover .mud-table-body .mud-table-row:hover, .ds-table tbody tr:hover td { background: color-mix(in srgb, var(--al-blue) 4%, transparent) !important; }
.ds-table tr.warn td { background: color-mix(in srgb, var(--sg-warn) 6%, transparent) !important; }
.ds-table tbody tr { transition: background .15s; }
.ds-table tbody tr.sg-row-link { cursor: pointer; }
.ds-table td b, .mud-table-cell b { font-weight: 600; }
.mud-table-toolbar { border-bottom: 1px solid var(--sg-line) !important; }
.mud-table-pagination { border-top: 1px solid var(--sg-line) !important; }
.mud-table-pagination-toolbar { font-size: 12.5px; }

/* ---------------------------------------------------------------- 11. Tabs */
.mud-tabs-tabbar { border-bottom: 1px solid var(--sg-line); }
.mud-tab { font-weight: 600 !important; color: var(--sg-muted) !important; font-size: 13.5px !important; padding: 12px 16px !important; opacity: 1 !important; transition: color .15s; }
.mud-tab:hover { color: var(--sg-ink) !important; background: transparent !important; }
.mud-tab.mud-tab-active { color: var(--sg-ink) !important; }
.mud-tab-slider { height: 2px !important; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--al-teal), var(--al-blue)) !important; }

.sg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sg-line); margin-bottom: 14px; overflow-x: auto; }
.sg-tabs button { position: relative; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--sg-muted); padding: 11px 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.sg-tabs button:hover { color: var(--sg-ink); }
.sg-tabs button.on { color: var(--sg-ink); }
.sg-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--al-teal), var(--al-blue)); }
.sg-tabs button em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--sg-sunken); color: var(--sg-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 12. Alerts, strips, notes */
.ex-alert { border-radius: 13px; border: 1px solid var(--sg-line); border-left: 1px solid var(--sg-line); background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1); position: relative; overflow: hidden; padding: 11px 14px 11px 16px; }
.ex-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.ex-alert.bad { --c: var(--sg-bad); } .ex-alert.warn { --c: var(--sg-warn); } .ex-alert.info { --c: var(--sg-info); }
.ex-strip { border-radius: var(--sg-r, 16px); border: 1px solid var(--sg-line); background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.ex-strip > div { border-left-color: var(--sg-line-soft); }
.ex-strip b { font-family: var(--al-display); letter-spacing: -.02em; font-weight: 650; }
.al-note { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--mud-palette-info) 22%, transparent); }
.al-empty { border-radius: var(--sg-r, 16px); border-color: var(--sg-line); background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--sg-ink) 1.5%, transparent) 10px 11px), var(--sg-surface); }
.al-empty-icon { border-radius: 14px; box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.ex-ok { border-radius: 12px; color: var(--sg-good); background: var(--sg-good-bg); }
.al-dark .ex-ok { color: var(--sg-good); background: var(--sg-good-bg); }
.al-pbar { height: 6px; background: var(--sg-sunken); box-shadow: inset 0 1px 1px rgba(14,23,38,.06); }
.al-pbar > i { background: linear-gradient(90deg, var(--al-blue), var(--al-teal)); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--al-teal) 70%, transparent); animation: sg-grow-x .9s var(--sg-ease) both; transform-origin: left; }

/* ---------------------------------------------------------------- 13. Top-bar widgets */
.cs-box { height: 40px; border-radius: 12px; background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-1); width: clamp(240px, 30vw, 460px); }
.cs-box:focus-within { border-color: var(--mud-palette-primary); box-shadow: var(--sg-ring); }
.cs-kbd { font-family: var(--al-mono-font); font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--sg-line); color: var(--sg-faint); background: var(--sg-sunken); }
.cs-pop { border-radius: 16px; border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3); padding: 8px; }
.cs-hit { border-radius: 10px; }
.cs-ic { border-radius: 9px; }
.al-usermenu { padding: 4px 10px 4px 4px; border-radius: 12px; border: 1px solid transparent; }
.al-usermenu:hover { background: var(--sg-surface); border-color: var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.nc { width: 380px; }
.nc-h { padding: 14px 16px; }
.nc-item.unread .nc-dot { background: var(--al-teal); box-shadow: 0 0 8px var(--al-teal); }

/* ---------------------------------------------------------------- 14. Layout helpers */
.sg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.sg-grid > * { min-width: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
@media (max-width: 1280px) { .c3 { grid-column: span 6; } .c4 { grid-column: span 6; } .c5, .c7 { grid-column: span 12; } .c8, .c9 { grid-column: span 12; } }
@media (max-width: 760px) { .c3, .c4, .c6 { grid-column: span 12; } }
.sg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .sg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sg-kpis { grid-template-columns: 1fr; } }
.sg-kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .sg-kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sg-kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-gap { margin-bottom: 12px; }
.sg-gap-lg { margin-bottom: 16px; }
.sg-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.sg-section-title h2 { font-size: 17px !important; font-weight: 650; letter-spacing: -.02em !important; margin: 0; }
.sg-section-title span { font-size: 12.5px; color: var(--sg-muted); }
.sg-h-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-link { font-size: 12.5px; font-weight: 600; color: var(--al-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.sg-link:hover { text-decoration: underline; }
.sg-kv { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 9px 14px; margin: 0; font-size: 13.5px; }
.sg-kv dt { color: var(--sg-muted); }
.sg-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.sg-kv .sep { grid-column: 1 / -1; height: 1px; background: var(--sg-line); margin: 3px 0; }
.sg-kv .tot dt, .sg-kv .tot dd { font-weight: 650; color: var(--sg-ink); font-size: 14.5px; }

/* ---------------------------------------------------------------- 15. Motion */
@keyframes sg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sg-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sg-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sg-sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes sg-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* "backwards" (not "both"): once the entrance ends the element's own transform applies again — a held
   transform:none would cancel centring transforms such as the fixed save bars. */
.sg-main > *:not(.st-savebar):not(.ws-savebar) { animation: sg-rise .45s var(--sg-ease) backwards; }
.sg-stagger > * { animation: sg-rise .5s var(--sg-ease) backwards; }
.sg-stagger > *:nth-child(1) { animation-delay: .02s; } .sg-stagger > *:nth-child(2) { animation-delay: .06s; } .sg-stagger > *:nth-child(3) { animation-delay: .10s; }
.sg-stagger > *:nth-child(4) { animation-delay: .14s; } .sg-stagger > *:nth-child(5) { animation-delay: .18s; } .sg-stagger > *:nth-child(6) { animation-delay: .22s; }
.sg-stagger > *:nth-child(7) { animation-delay: .26s; } .sg-stagger > *:nth-child(8) { animation-delay: .30s; } .sg-stagger > *:nth-child(n+9) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; } }

/* skeleton */
.sk-l { background: linear-gradient(90deg, var(--sg-sunken) 25%, color-mix(in srgb, var(--sg-sunken) 40%, var(--sg-surface)) 50%, var(--sg-sunken) 75%); background-size: 200% 100%; }

/* ---------------------------------------------------------------- 16. Charts — shared */
.tc-legend, .dn-legend, .sg-legend { font-size: 12px; color: var(--sg-muted); }
.tc-legend i, .sg-legend i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.sg-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.sg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tc-grid i { background: var(--sg-line-soft); }
.tc-grid i:last-child { background: var(--sg-line); }
.tc-y { color: var(--sg-faint); font-size: 10.5px; }
.tc-xl span { color: var(--sg-faint); font-size: 10.5px; }
.tc-tip { border-radius: 12px; border: 1px solid var(--sg-line); background: color-mix(in srgb, var(--sg-surface) 94%, transparent); backdrop-filter: blur(8px); box-shadow: var(--sg-bevel), var(--sg-shadow-3); padding: 10px 12px; }
.tc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-draw 1.3s var(--sg-ease) .1s forwards; }
.tc-line.prev { stroke-dasharray: 0.012 0.012; stroke-dashoffset: 0; animation: sg-fade .8s .5s both; }
.tc-fill { animation: sg-fade 1s .35s both; }
.tc-end { animation: sg-pop .5s 1.2s both; box-shadow: 0 0 0 3px var(--sg-surface), 0 0 0 6px color-mix(in srgb, var(--cv1) 25%, transparent); }
.tc-stack { transform-origin: bottom; animation: sg-grow-y .7s var(--sg-ease) both; animation-delay: calc(var(--i, 0) * 22ms); width: min(26px, 62%); border-radius: 5px 5px 1px 1px; gap: 2px; }
.tc-stack i { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.tc-table summary, .sg-table-toggle summary { font-size: 12px; color: var(--sg-muted); font-weight: 550; }
.tc-table summary:hover { color: var(--sg-ink); }

/* bar list */
.bl-track { height: 8px; border-radius: 99px; background: var(--sg-sunken); box-shadow: inset 0 1px 1px rgba(14,23,38,.05); }
.bl-track i { border-radius: 99px; transform-origin: left; animation: sg-grow-x .9s var(--sg-ease) both; background-image: linear-gradient(180deg, rgba(255,255,255,.18), transparent) !important; }
.bl-row:nth-child(2) .bl-track i { animation-delay: .05s; } .bl-row:nth-child(3) .bl-track i { animation-delay: .1s; } .bl-row:nth-child(4) .bl-track i { animation-delay: .15s; } .bl-row:nth-child(n+5) .bl-track i { animation-delay: .2s; }
.bl-val { color: var(--sg-ink); font-weight: 600; }

/* donut */
.dn { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
@media (max-width: 520px) { .dn { grid-template-columns: 1fr; justify-items: center; } }
.dn-figure { position: relative; width: var(--size, 168px); height: var(--size, 168px); flex: none; }
.dn-figure svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dn-track { stroke: var(--sg-sunken); }
.dn-seg { fill: none; stroke-linecap: butt; transition: stroke-width .2s, opacity .2s; animation: dn-in 1.1s var(--sg-ease) both; animation-delay: calc(var(--i, 0) * 90ms); cursor: default; }
@keyframes dn-in { from { stroke-dasharray: 0 100; } }
.dn-figure:hover .dn-seg { opacity: .45; }
.dn-figure .dn-seg:hover { opacity: 1; stroke-width: 15; }
.dn-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dn-center b { font-family: var(--al-display); font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: var(--sg-ink); line-height: 1.1; }
.dn-center small { font-size: 11.5px; color: var(--sg-muted); margin-top: 2px; }
.dn-legend { display: flex; flex-direction: column; gap: 9px; min-width: 0; width: 100%; }
.dn-row { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; }
.dn-row i { width: 10px; height: 10px; border-radius: 3px; }
.dn-row span { color: var(--sg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-row b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sg-ink); }
.dn-row em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--sg-muted); font-size: 12px; min-width: 38px; text-align: right; }

/* funnel */
.fn { display: flex; flex-direction: column; gap: 6px; }
.fn-step { display: grid; grid-template-columns: minmax(110px, 30%) 1fr 64px; gap: 14px; align-items: center; }
.fn-label { font-size: 13px; font-weight: 550; color: var(--sg-ink); }
.fn-label small { display: block; font-size: 11.5px; font-weight: 400; color: var(--sg-muted); }
.fn-bar { height: 34px; display: flex; justify-content: center; }
.fn-bar i { display: block; height: 100%; border-radius: 9px; min-width: 6px; transform-origin: center; animation: sg-grow-x .9s var(--sg-ease) both;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -8px var(--c); }
.fn-step:nth-child(3) .fn-bar i { animation-delay: .08s; } .fn-step:nth-child(5) .fn-bar i { animation-delay: .16s; } .fn-step:nth-child(7) .fn-bar i { animation-delay: .24s; } .fn-step:nth-child(9) .fn-bar i { animation-delay: .32s; }
.fn-val { text-align: right; font-family: var(--al-display); font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fn-conv { display: grid; grid-template-columns: minmax(110px, 30%) 1fr 64px; gap: 14px; }
.fn-conv span { grid-column: 2; justify-self: center; font-size: 11px; font-weight: 600; color: var(--sg-muted); padding: 1px 8px; border-radius: 99px; background: var(--sg-sunken); }
.fn-conv span::before { content: "↓ "; opacity: .6; }

/* sparkline */
.sp { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-draw 1.2s var(--sg-ease) .25s forwards; }
.sp-fill { animation: sg-fade .9s .5s both; }

/* gauge */
.gg { position: relative; width: var(--size, 132px); height: var(--size, 132px); }
.gg svg { width: 100%; height: 100%; transform: rotate(135deg); }
.gg-track { fill: none; stroke: var(--sg-sunken); stroke-linecap: round; }
.gg-val { fill: none; stroke-linecap: round; animation: dn-in 1.2s var(--sg-ease) both; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--c) 45%, transparent)); }
.gg-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gg-center b { font-family: var(--al-display); font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.gg-center small { font-size: 11px; color: var(--sg-muted); margin-top: 4px; max-width: 90px; }
.gg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; justify-items: center; }
.gg-cap { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; color: var(--sg-muted); }
.gg-cap b { color: var(--sg-ink); font-size: 13px; font-weight: 600; }

/* heat grid */
.hg { display: grid; grid-template-columns: auto repeat(var(--cols), minmax(0, 1fr)); gap: 3px; align-items: center; font-size: 11px; }
.hg-rl { color: var(--sg-muted); padding-right: 8px; white-space: nowrap; text-align: right; }
.hg-cl { color: var(--sg-faint); text-align: center; font-size: 10px; padding-top: 4px; white-space: nowrap; overflow: hidden; }
.hg-c { position: relative; aspect-ratio: 1.6 / 1; min-height: 14px; border-radius: 4px; background: var(--sg-sunken); animation: sg-fade .6s both; animation-delay: calc(var(--d, 0) * 6ms); }
.hg-c.l1 { background: color-mix(in srgb, var(--cv-seq) 18%, var(--sg-surface)); }
.hg-c.l2 { background: color-mix(in srgb, var(--cv-seq) 36%, var(--sg-surface)); }
.hg-c.l3 { background: color-mix(in srgb, var(--cv-seq) 56%, var(--sg-surface)); }
.hg-c.l4 { background: color-mix(in srgb, var(--cv-seq) 78%, var(--sg-surface)); }
.hg-c.l5 { background: var(--cv-seq); }
.hg-c:hover { outline: 2px solid var(--sg-ink); outline-offset: 1px; z-index: 2; }
.hg-c .tc-tip { bottom: calc(100% + 6px); min-width: 140px; transform: translateX(-50%); }
.hg-c:hover .tc-tip { display: flex; }
.hg-scale { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 11px; color: var(--sg-muted); }
.hg-scale i { width: 18px; height: 10px; border-radius: 3px; }

/* leaderboard */
.lb { display: flex; flex-direction: column; }
.lb-row { display: grid; grid-template-columns: 22px 32px 1fr minmax(60px, 26%) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sg-line-soft); text-decoration: none !important; color: inherit !important; }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover .lb-name b { color: var(--al-blue); }
.lb-rank { font-family: var(--al-mono-font); font-size: 11.5px; color: var(--sg-faint); text-align: center; }
.lb-row:nth-child(1) .lb-rank { color: #B98A1A; font-weight: 700; } .lb-row:nth-child(2) .lb-rank { color: #8A94A5; font-weight: 700; } .lb-row:nth-child(3) .lb-rank { color: #A56A3A; font-weight: 700; }
.lb-name { display: flex; flex-direction: column; min-width: 0; }
.lb-name b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.lb-name small { font-size: 11.5px; color: var(--sg-muted); }
.lb-val { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13.5px; text-align: right; white-space: nowrap; }

/* activity feed */
.fd { display: flex; flex-direction: column; position: relative; }
.fd::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--sg-line), transparent); }
.fd-item { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 8px 0; align-items: start; text-decoration: none !important; color: inherit !important; }
.fd-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c, var(--cv1)); background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--cv1)) 14%, var(--sg-surface)), var(--sg-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--cv1)) 20%, transparent), 0 0 0 4px var(--sg-surface); z-index: 1; }
.fd-ic .mud-icon-root { font-size: 16px; }
.fd-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.4; }
.fd-t b { font-weight: 600; }
.fd-t span { color: var(--sg-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-time { font-size: 11.5px; color: var(--sg-faint); white-space: nowrap; padding-top: 2px; }
.fd-item:hover .fd-t b { color: var(--al-blue); }

/* action centre */
.ac { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ac-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; text-decoration: none !important; color: inherit !important; overflow: hidden;
  border: 1px solid var(--sg-line); background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: transform .2s var(--sg-ease), box-shadow .2s, border-color .2s; }
.ac-tile:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); border-color: color-mix(in srgb, var(--c) 35%, var(--sg-line)); }
.ac-tile::after { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.ac-top { display: flex; align-items: center; justify-content: space-between; }
.ac-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ac-n { font-family: var(--al-display); font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.ac-l { font-size: 12.5px; color: var(--sg-muted); line-height: 1.35; }
.ac-tile.zero { opacity: .62; }
.ac-tile.zero .ac-n { color: var(--sg-faint); }
.ac-tile.bad { --c: var(--sg-bad); } .ac-tile.warn { --c: var(--sg-warn); } .ac-tile.info { --c: var(--sg-info); } .ac-tile.good { --c: var(--sg-good); } .ac-tile.violet { --c: var(--cv4); }

/* ---------------------------------------------------------------- 17. Executive hero */
.sg-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: calc(var(--sg-r, 16px) + 4px); padding: 20px 22px 22px; margin-bottom: 14px; color: #fff;
  background:
    radial-gradient(700px 300px at 85% -30%, color-mix(in srgb, var(--al-teal) 55%, transparent), transparent 65%),
    radial-gradient(520px 340px at -5% 120%, color-mix(in srgb, var(--al-blue) 40%, transparent), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--al-brand) 70%, #050A12) 0%, var(--al-brand-deep) 55%, #070C14 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -26px color-mix(in srgb, var(--al-brand) 80%, #000); }
.sg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: radial-gradient(600px 240px at 70% 0%, #000, transparent 75%); -webkit-mask-image: radial-gradient(600px 240px at 70% 0%, #000, transparent 75%); }
.sg-hero-waves { position: absolute; left: 0; right: 0; bottom: -2px; height: 70px; z-index: -1; pointer-events: none; opacity: .55; }
.sg-hero-waves svg { width: 200%; height: 100%; animation: sg-wave 22s linear infinite; }
.sg-hero-waves svg + svg { position: absolute; left: 0; bottom: 0; opacity: .6; animation-duration: 34s; animation-direction: reverse; }
.sg-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.sg-hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.sg-hero h1 { margin: 6px 0 4px; font-family: var(--al-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em !important; line-height: 1.08; color: #fff; }
.sg-hero h1 .sg-serif { font-size: 1.12em; color: color-mix(in srgb, var(--al-teal) 55%, #fff); }
.sg-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 14.5px; max-width: 640px; }
.sg-hero .drf { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.sg-hero .drf button { color: rgba(255,255,255,.7); }
.sg-hero .drf button:hover { color: #fff; }
.sg-hero .drf button.on { background: #fff; color: #0B1220; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sg-hero .al-sim { background: rgba(233,176,77,.14); color: #F7C46F; border-color: rgba(233,176,77,.4); }
.sg-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.07); backdrop-filter: blur(6px); }
.sg-hero-stats > div { padding: 12px 14px; border-left: 1px solid rgba(255,255,255,.08); min-width: 0; }
.sg-hero-stats > div:first-child { border-left: 0; }
.sg-hero-stats small { display: block; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; }
.sg-hero-stats b { display: block; margin-top: 4px; font-family: var(--al-display); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-hero-stats span { display: inline-flex; margin-top: 6px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.sg-hero-stats span.up { background: rgba(63,203,138,.18); color: #7BE3B2; } .sg-hero-stats span.down { background: rgba(240,116,128,.18); color: #F6A4AC; }
@media (max-width: 900px) { .sg-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-hero-stats > div:nth-child(3) { border-left: 0; } .sg-hero-stats > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); } }

/* ---------------------------------------------------------------- 18. Orders */
.od-pipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1300px) { .od-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .od-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.od-stage { position: relative; text-align: left; border: 1px solid var(--sg-line); border-radius: 14px; padding: 13px 14px 12px; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: transform .2s var(--sg-ease), box-shadow .2s, border-color .2s; overflow: hidden; }
.od-stage:hover { transform: translateY(-1px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.od-stage.on { border-color: color-mix(in srgb, var(--c) 55%, var(--sg-line)); box-shadow: var(--sg-bevel), 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent), var(--sg-shadow-2); }
.od-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: .9; }
.od-stage small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted); }
.od-stage b { display: block; margin-top: 6px; font-family: var(--al-display); font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.od-stage span { display: block; margin-top: 5px; font-size: 12px; color: var(--sg-muted); font-variant-numeric: tabular-nums; }
.od-meter { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.od-meter-bar { position: relative; height: 6px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; }
.od-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transform-origin: left; animation: sg-grow-x .8s var(--sg-ease) both; }
.od-meter-bar i.paid { background: color-mix(in srgb, var(--cv1) 40%, var(--sg-surface)); }
.od-meter-bar i.rel { background: var(--cv3); }
.od-meter small { font-size: 11px; color: var(--sg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-next { font-size: 12px; color: var(--sg-muted); }
.od-next b { color: var(--sg-ink); font-weight: 600; }
.od-ref { font-family: var(--al-mono-font); font-size: 12px; color: var(--sg-muted); }

/* order 360 */
.od-head { position: relative; overflow: hidden; padding: 16px 18px; margin-bottom: 12px; }
.od-head-top { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.od-head h1 { margin: 6px 0 8px; font-family: var(--al-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.032em !important; line-height: 1.12; }
.od-head-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--sg-muted); align-items: center; }
.od-head-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.od-head-meta .mud-icon-root { font-size: 16px; opacity: .7; }
.od-value { text-align: right; }
.od-value small { display: block; font-size: 12px; color: var(--sg-muted); font-weight: 550; }
.od-value b { display: block; font-family: var(--al-display); font-size: 30px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; }
.od-value span { font-size: 12px; color: var(--sg-muted); }
.od-steps { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); margin-top: 16px; position: relative; }
.od-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 11.5px; color: var(--sg-muted); font-weight: 550; padding: 0 4px; }
.od-step::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--sg-line); z-index: 0; }
.od-step:first-child::before { display: none; }
.od-step.done::before, .od-step.cur::before { background: linear-gradient(90deg, var(--cv3), var(--cv3)); }
.od-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sg-surface); border: 2px solid var(--sg-line); color: var(--sg-faint); }
.od-dot .mud-icon-root { font-size: 13px; }
.od-step.done .od-dot { background: var(--cv3); border-color: var(--cv3); color: #fff; animation: sg-pop .45s both; animation-delay: calc(var(--i, 0) * 70ms); }
.od-step.cur .od-dot { border-color: var(--cv1); color: var(--cv1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cv1) 16%, transparent); }
.od-step.cur { color: var(--sg-ink); font-weight: 650; }
.od-step.bad .od-dot { border-color: var(--sg-bad); color: var(--sg-bad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sg-bad) 14%, transparent); }
.od-step small { display: block; font-size: 10.5px; font-weight: 400; color: var(--sg-faint); }
@media (max-width: 760px) { .od-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; } .od-step::before { display: none; } }
.od-party { display: flex; gap: 12px; align-items: center; }
.od-party .al-grow { display: flex; flex-direction: column; min-width: 0; }
.od-party b { font-size: 14px; font-weight: 600; }
.od-party small { font-size: 12px; color: var(--sg-muted); }
.od-ms { display: flex; flex-direction: column; }
.od-ms-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--sg-line-soft); }
.od-ms-row:last-child { border-bottom: 0; }
.od-ms-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--al-mono-font); font-size: 12px; font-weight: 600; background: var(--sg-sunken); color: var(--sg-muted); box-shadow: var(--sg-bevel); }
.od-ms-row.ok .od-ms-n { background: color-mix(in srgb, var(--cv3) 15%, var(--sg-surface)); color: var(--cv3); }
.od-ms-row.cur .od-ms-n { background: color-mix(in srgb, var(--cv1) 15%, var(--sg-surface)); color: var(--cv1); }
.od-ms-row.err .od-ms-n { background: var(--sg-bad-bg); color: var(--sg-bad); }
.od-ms-t b { font-size: 14px; font-weight: 600; }
.od-ms-t p { margin: 3px 0 0; font-size: 12.5px; color: var(--sg-muted); }
.od-ms-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.od-ms-amt { text-align: right; }
.od-ms-amt b { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 650; }
.od-ms-amt small { display: block; font-size: 11.5px; color: var(--sg-muted); }
.od-chat { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding: 4px 4px 4px 0; }
.od-msg { max-width: 78%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--sg-sunken); font-size: 13px; line-height: 1.45; box-shadow: var(--sg-bevel); }
.od-msg.r { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--cv1) 11%, var(--sg-surface)); }
.od-msg.sys { align-self: center; max-width: 92%; text-align: center; background: transparent; box-shadow: none; color: var(--sg-muted); font-size: 12px; border: 1px dashed var(--sg-line); border-radius: 10px; }
.od-msg small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--sg-muted); }
.od-terms { white-space: pre-wrap; font-family: var(--al-font); font-size: 13px; line-height: 1.6; color: var(--sg-ink); background: var(--sg-sunken); border-radius: 12px; padding: 14px 16px; max-height: 420px; overflow: auto; margin: 0; border: 1px solid var(--sg-line); }
.od-line-items td:first-child { width: 55%; }

/* ---------------------------------------------------------------- 19. Website management */
.ws-browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3); background: var(--sg-surface); }
.ws-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--sg-sunken); border-bottom: 1px solid var(--sg-line); }
.ws-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #E5675F; box-shadow: 16px 0 0 #E7B04A, 32px 0 0 #5CB85C; margin-right: 34px; }
.ws-url { flex: 1; height: 26px; border-radius: 8px; background: var(--sg-surface); border: 1px solid var(--sg-line); font-size: 11.5px; color: var(--sg-muted); display: flex; align-items: center; padding: 0 10px; gap: 6px; font-family: var(--al-mono-font); }
.ws-hero { position: relative; padding: 34px 28px 30px; color: #fff; overflow: hidden;
  background: radial-gradient(420px 220px at 90% 0%, color-mix(in srgb, var(--al-teal) 45%, transparent), transparent 70%), linear-gradient(135deg, var(--al-brand-deep), color-mix(in srgb, var(--al-brand) 85%, #000)); }
.ws-hero .pill { display: inline-flex; font-size: 11px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.ws-hero h3 { margin: 12px 0 8px; font-family: var(--al-display); font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.ws-hero h3 em { font-style: normal; color: color-mix(in srgb, var(--al-teal) 60%, #fff); }
.ws-hero p { margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,.75); max-width: 520px; }
.ws-cta { display: inline-flex; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--al-teal); color: #04201D; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px var(--al-teal); }
.ws-sections { display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 6px; }
.ws-sec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; background: var(--sg-sunken); color: var(--sg-ink); }
.ws-sec.off { opacity: .45; text-decoration: line-through; }
.ws-sec i { width: 8px; height: 8px; border-radius: 2px; background: var(--al-teal); }
.ws-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sg-line-soft); }
.ws-row:last-child { border-bottom: 0; }
.ws-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-row-t b { font-size: 13.5px; font-weight: 600; }
.ws-row-t span { font-size: 12.5px; color: var(--sg-muted); }
.ws-faq { display: flex; flex-direction: column; gap: 10px; }
.ws-faq-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); }
.ws-faq-n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--sg-sunken); color: var(--sg-muted); }
.ws-faq-tools { display: flex; flex-direction: column; gap: 2px; }
.ws-serp { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-surface); font-family: Arial, sans-serif; }
.ws-serp small { display: block; font-size: 12px; color: #4D5156; }
.al-dark .ws-serp small { color: #BDC1C6; }
.ws-serp b { display: block; margin: 4px 0 3px; font-size: 19px; font-weight: 400; color: #1A0DAB; line-height: 1.3; }
.al-dark .ws-serp b { color: #8AB4F8; }
.ws-serp p { margin: 0; font-size: 13.5px; color: #4D5156; line-height: 1.5; }
.al-dark .ws-serp p { color: #BDC1C6; }
.ws-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ws-page { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sg-line); background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1);
  text-decoration: none !important; color: inherit !important; transition: transform .2s var(--sg-ease), box-shadow .2s; }
.ws-page:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.ws-page .al-grow { display: flex; flex-direction: column; min-width: 0; }
.ws-page b { font-size: 13.5px; font-weight: 600; }
.ws-page small { font-size: 11.5px; color: var(--sg-muted); font-family: var(--al-mono-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-page-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--cv1); background: color-mix(in srgb, var(--cv1) 12%, transparent); flex: none; }
.ws-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--sg-line); }
.ws-status.live { background: linear-gradient(180deg, color-mix(in srgb, var(--sg-good) 8%, var(--sg-surface)), var(--sg-surface)); border-color: color-mix(in srgb, var(--sg-good) 25%, var(--sg-line)); }
.ws-status.maint { background: linear-gradient(180deg, color-mix(in srgb, var(--sg-warn) 10%, var(--sg-surface)), var(--sg-surface)); border-color: color-mix(in srgb, var(--sg-warn) 30%, var(--sg-line)); }
.ws-status b { font-size: 15px; }
.ws-status span { font-size: 12.5px; color: var(--sg-muted); }
.ws-savebar { position: sticky; bottom: 14px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--sg-surface) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3); animation: sg-rise .3s var(--sg-ease) both; }

/* ---------------------------------------------------------------- 20. Settings — theme presets */
.st-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.st-preset { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: left; border-radius: 14px; border: 1px solid var(--sg-line); cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: transform .2s var(--sg-ease), box-shadow .2s, border-color .2s; }
.st-preset:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.st-preset.on { border-color: var(--p); box-shadow: var(--sg-bevel), 0 0 0 3px color-mix(in srgb, var(--p) 22%, transparent), var(--sg-shadow-2); }
.st-preset-art { display: block; width: 100%; height: 64px; border-radius: 10px; position: relative; overflow: hidden; flex: none;
  background: radial-gradient(120px 60px at 90% 0%, color-mix(in srgb, var(--a) 70%, transparent), transparent 70%), linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 55%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.st-preset-art i { position: absolute; bottom: 10px; height: 8px; border-radius: 3px; }
.st-preset-art i:nth-child(1) { left: 10px; width: 34%; background: rgba(255,255,255,.85); }
.st-preset-art i:nth-child(2) { left: 10px; bottom: 24px; width: 18%; background: var(--a); }
.st-preset-art i:nth-child(3) { right: 10px; width: 22%; height: 18px; border-radius: 6px; background: var(--s); }
.st-preset b { font-size: 13.5px; font-weight: 650; }
.st-preset > span:not(.st-preset-art):not(.chk) { font-size: 12px; color: var(--sg-muted); line-height: 1.35; }
.st-preset-art i { display: block; }
.st-preset .chk { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--p); box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: sg-pop .35s both; }

/* ---------------------------------------------------------------- 21. Dark refinements */
.al-dark .sg-topbar::before { background: color-mix(in srgb, var(--sg-bg) 72%, transparent); }
.al-dark .mud-input.mud-input-outlined { background: var(--sg-sunken); }
.al-dark .mud-button-outlined { background: linear-gradient(180deg, #151E2B, #111824) !important; }
.al-dark .cs-box { background: var(--sg-sunken); }
.al-dark .fd-ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--cv1)) 30%, transparent), 0 0 0 4px var(--sg-surface); }
.al-dark .od-dot { background: var(--sg-surface); }
.al-dark .ws-hero, .al-dark .sg-hero { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -26px rgba(0,0,0,.9); }

/* settings live preview follows the signature sidebar */
.pv-side.navy, .pv.dark .pv-side { background: radial-gradient(120px 90px at 0% 0%, color-mix(in srgb, var(--pv3) 28%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pv) 62%, #04070C), color-mix(in srgb, var(--pv) 38%, #04070C)); border-color: transparent; color: #fff; }
.pv-side.navy .pv-item.on, .pv.dark .pv-side .pv-item.on { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pv.dark { background: #070B12; }

/* ---------------------------------------------------------------- 22. Density & fixed bars */
/* Settings save bar: centred over the content area (not the window), whatever the sidebar width. */
.st-savebar { width: min(900px, calc(100vw - var(--mud-drawer-width-left, 0px) - 40px)) !important; }
@media (min-width: 960px) { .st-savebar { left: calc(50% + var(--mud-drawer-width-left, 272px) / 2) !important; } }
.ex-alerts { gap: 8px; margin-bottom: 12px; }
.ex-strip > div { padding: 11px 14px; }
.ex-grid { gap: 12px; }
.mb-4 { margin-bottom: 12px !important; } .mb-5 { margin-bottom: 14px !important; }
.st-card { padding: 14px 16px; gap: 10px; }
.st-head { margin-bottom: 10px; }
.cx-hero { padding: 14px 16px; margin: 4px 0 12px; }
.cx-toolbar { padding: 10px 12px; }
.fn-bar { height: 28px; }
.lb-row { padding: 8px 0; }
.fd-item { padding: 6px 0; }
.ac { gap: 10px; }
.ac-tile { padding: 12px 14px; gap: 6px; }
.ac-n { font-size: 22px; }
.od-stage { padding: 11px 12px 10px; }
.od-stage b { font-size: 21px; }

/* ---------------------------------------------------------------- 23. Contracts & signatures */
.cs-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-1); flex-wrap: wrap; }
.cs-banner.act { background: linear-gradient(90deg, color-mix(in srgb, var(--al-brand) 9%, var(--sg-surface)), var(--sg-surface)); border-color: color-mix(in srgb, var(--al-brand) 30%, var(--sg-line)); }
.cs-banner.wait { background: linear-gradient(90deg, var(--sg-warn-bg), var(--sg-surface)); border-color: color-mix(in srgb, var(--sg-warn) 30%, var(--sg-line)); }
.cs-banner-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: var(--mud-palette-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px var(--mud-palette-primary); }
.cs-banner.wait .cs-banner-ic { background: var(--sg-warn); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.cs-banner .al-grow { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.cs-banner b { font-size: 14.5px; }
.cs-banner span { font-size: 13px; color: var(--sg-muted); }
.cs-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: 13px; color: var(--sg-good); background: var(--sg-good-bg); border: 1px solid color-mix(in srgb, var(--sg-good) 20%, transparent); flex-wrap: wrap; }
.cs-strip span { color: var(--sg-ink); flex: 1; }
.cd { display: flex; flex-direction: column; gap: 14px; }
.cd-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cd-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.cd-head b { font-family: var(--al-display); font-size: 19px; letter-spacing: -.02em; }
.cd-value { text-align: right; } .cd-value small { display: block; font-size: 12px; color: var(--sg-muted); } .cd-value b { font-size: 22px; }
.cd-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .cd-sigs { grid-template-columns: 1fr; } }
.cd-sig { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sg-line); }
.cd-sig div { display: flex; flex-direction: column; } .cd-sig b { font-size: 13px; } .cd-sig span { font-size: 12px; color: var(--sg-muted); }
.cd-sig-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cd-sig.done { background: var(--sg-good-bg); border-color: color-mix(in srgb, var(--sg-good) 25%, transparent); } .cd-sig.done .cd-sig-ic { background: var(--sg-good); color: #fff; }
.cd-sig.wait { background: var(--sg-warn-bg); border-color: color-mix(in srgb, var(--sg-warn) 25%, transparent); } .cd-sig.wait .cd-sig-ic { background: var(--sg-warn); color: #fff; }
.cd-sign { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--al-brand) 40%, var(--sg-line)); background: color-mix(in srgb, var(--al-brand) 4%, var(--sg-surface)); }
.cd-preview { font-family: var(--al-serif); font-style: italic; font-size: 30px; line-height: 1.1; color: var(--al-brand); padding: 4px 6px 8px; border-bottom: 1.5px solid var(--sg-ink); width: fit-content; min-width: 240px; animation: sg-fade .3s both; }
.al-dark .cd-preview { color: var(--al-brand-lift); }

/* quotation 360 */
.qd-sign { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (max-width: 1000px) { .qd-sign { grid-template-columns: 1fr 1fr; } }
.qd-sign-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); }
.qd-sign-step div { display: flex; flex-direction: column; min-width: 0; } .qd-sign-step b { font-size: 12.5px; } .qd-sign-step span { font-size: 11.5px; color: var(--sg-muted); overflow-wrap: anywhere; }
.qd-sign-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--sg-sunken); color: var(--sg-faint); }
.qd-sign-step.done { border-color: color-mix(in srgb, var(--sg-good) 25%, var(--sg-line)); } .qd-sign-step.done .qd-sign-ic { background: var(--sg-good); color: #fff; }
.qd-sign-step.cur .qd-sign-ic { background: var(--sg-info-bg); color: var(--sg-info); }
.qd-sign-step.cur.warn { border-color: color-mix(in srgb, var(--sg-warn) 35%, var(--sg-line)); background: var(--sg-warn-bg); } .qd-sign-step.cur.warn .qd-sign-ic { background: var(--sg-warn); color: #fff; }
.qd-sign-step.bad .qd-sign-ic { background: var(--sg-bad-bg); color: var(--sg-bad); }
.qd-share { display: inline-block; width: 46px; height: 5px; border-radius: 99px; background: var(--sg-sunken); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.qd-share i { display: block; height: 100%; background: var(--cv1); border-radius: 99px; }
.ds-table tfoot td { padding: 10px 12px; border-top: 1px solid var(--sg-line); background: color-mix(in srgb, var(--sg-sunken) 55%, var(--sg-surface)); font-variant-numeric: tabular-nums; }
.al-card .ds-table tfoot td:first-child { padding-left: 16px; } .al-card .ds-table tfoot td:last-child { padding-right: 16px; }
.qd-ms { display: flex; gap: 6px; }
.qd-ms-seg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; border-radius: 12px; min-width: 0; background: color-mix(in srgb, var(--c) 9%, var(--sg-surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--sg-line)); }
.qd-ms-seg i { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 12px 12px 0 0; background: var(--c); }
.qd-ms-seg b { font-size: 12.5px; } .qd-ms-seg span { font-size: 12px; color: var(--sg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-ms-seg em { font-style: normal; font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .qd-ms { flex-direction: column; } }
.qd-scope { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 0; font-size: 13.5px; }
.qd-scope dt { color: var(--sg-muted); font-weight: 550; } .qd-scope dd { margin: 0; white-space: pre-line; }
@media (max-width: 600px) { .qd-scope { grid-template-columns: 1fr; } }
.qd-qa { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--sg-line-soft); font-size: 13px; } .qd-qa span { color: var(--sg-muted); }
.qd-range { margin: 4px 0 6px; }
.qd-range-bar { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--cv3), var(--cv5), var(--cv6)); opacity: .85; }
.qd-range-bar i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--sg-surface); border: 3px solid var(--sg-ink); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.qd-range-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--sg-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.lb-row.qd-comp { grid-template-columns: 22px 28px 1fr auto auto; }
.lb-row.qd-comp.me { background: color-mix(in srgb, var(--cv1) 7%, transparent); border-radius: 10px; padding-inline: 6px; margin-inline: -6px; }
.ds-table tr.sel td { background: color-mix(in srgb, var(--sg-good) 7%, transparent); }

/* ---------------------------------------------------------------- 24. Money tables */
.sg-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) { .sg-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sg-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tx-scroll { overflow-x: auto; }
.tx-table { min-width: 1100px; }
.tx-table td { vertical-align: top; }
.tx-table td .al-badge { margin-top: 1px; }
.tx-ref { font-size: 12.5px; font-weight: 600; color: var(--sg-ink); }
.tx-sub { font-size: 11.5px; color: var(--sg-muted); margin-top: 3px; line-height: 1.35; }
.tx-ellipsis { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-strong { font-weight: 600; color: var(--sg-ink) !important; text-decoration: none; }
.tx-strong:hover { color: var(--al-blue) !important; }
.tx-method { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.tx-method .mud-icon-root { color: var(--sg-muted); }
.tx-pos { color: var(--sg-good); }
.tx-neg { color: var(--sg-bad) !important; }
.ds-table td.r b, .ds-table td.r { font-variant-numeric: tabular-nums; }
.cx-toolbar .sg-seg { flex: none; }
.cx-toolbar { gap: 10px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.rc-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--sg-line); background: linear-gradient(180deg, var(--sg-surface), var(--sg-raised)); box-shadow: var(--sg-bevel), var(--sg-shadow-1); cursor: pointer; font: inherit; color: inherit; transition: transform .2s var(--sg-ease), box-shadow .2s; overflow: hidden; }
.rc-card::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 34px; border-bottom: 2px dashed var(--sg-line); }
.rc-card:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.rc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sg-muted); }
.rc-card > b { font-family: var(--al-display); font-size: 22px; font-weight: 650; letter-spacing: -.03em; margin: 2px 0 4px; }
.rc-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--sg-muted); font-variant-numeric: tabular-nums; }
.rc-l span:last-child { color: var(--sg-ink); }
.rc-foot { margin-top: 14px; font-size: 11.5px; color: var(--sg-faint); }

/* ---------------------------------------------------------------- 25. Announcements, audit, documents */
.an-aud { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.an-aud-opt { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .2s, transform .15s; }
.an-aud-opt:hover { transform: translateY(-1px); }
.an-aud-opt.on { border-color: var(--mud-palette-primary); box-shadow: var(--sg-ring); background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--sg-surface)); }
.an-aud-opt b { font-size: 13px; padding-right: 40px; } .an-aud-opt small { font-size: 11.5px; color: var(--sg-muted); }
.an-aud-n { position: absolute; top: 9px; right: 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 6px; background: var(--sg-sunken); color: var(--sg-muted); }
.an-aud-opt.on .an-aud-n { background: var(--mud-palette-primary); color: #fff; }
.an-preview { border-radius: 14px; border: 1px solid var(--sg-line); overflow: hidden; box-shadow: var(--sg-shadow-2); background: var(--sg-surface); }
.an-preview .nc-item { cursor: default; }
.an-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sg-muted); }
.au-cat { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-right: 8px; vertical-align: middle; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.au-clip { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-table td { vertical-align: middle; }
.de-pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .de-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.de-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.de-group { border: 1px solid var(--sg-line); border-radius: 14px; padding: 12px 14px; background: var(--sg-raised); }
.de-group-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sg-line-soft); }
.de-group-h .al-small { margin-left: auto; }
.de-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.de-row .al-grow { display: flex; flex-direction: column; min-width: 0; }
.de-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) 12%, transparent); }
.de-left { font-size: 11.5px; font-weight: 650; color: var(--c); white-space: nowrap; }

/* ---------------------------------------------------------------- 26. Portals & dynamic site */
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .pt-grid { grid-template-columns: 1fr; } }
.st-warn-row { background: var(--sg-warn-bg); border-radius: 10px; padding-inline: 10px !important; }
.pt-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .pt-menus { grid-template-columns: 1fr; } }
.pt-menu { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 14px; color: #E7ECF3;
  background: linear-gradient(180deg, var(--sg-side-1), var(--sg-side-2)); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.pt-menu > b { font-size: 13px; margin-bottom: 4px; color: #fff; }
.pt-menu small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(231,236,243,.45); margin: 8px 0 2px; }
.pt-menu span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; color: rgba(231,236,243,.8); }
.pt-menu span .mud-icon-root { color: rgba(231,236,243,.5); }
.pt-menu span:nth-of-type(1) { background: rgba(255,255,255,.08); color: #fff; }
.cp-hero-note { opacity: .85; font-size: 14px; margin-top: 6px !important; }
.ws-order { display: flex; flex-direction: column; gap: 6px; }
.ws-order-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); transition: opacity .2s, background .2s; }
.ws-order-row.off { opacity: .55; background: var(--sg-sunken); }
.ws-order-row .ws-row-t { flex: 1; min-width: 0; }
.ws-order-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--sg-sunken); color: var(--sg-muted); flex: none; font-variant-numeric: tabular-nums; }
.ws-order-tools { display: flex; align-items: center; gap: 2px; }
.ws-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ws-pin { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color .15s, box-shadow .2s; }
.ws-pin .al-grow { display: flex; flex-direction: column; min-width: 0; } .ws-pin b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-pin small { font-size: 11.5px; color: var(--sg-muted); }
.ws-pin.on { border-color: var(--mud-palette-primary); box-shadow: var(--sg-ring); background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--sg-surface)); }
.ws-pin-n { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--mud-palette-primary); box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* ===================================================================================================== 
   27 · Sign-in & registration (AuthLayout) — photo panel left, form card right
   ===================================================================================================== */
.lg { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--sg-bg); }
.lg-art { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 36px; gap: 28px; isolation: isolate; }
.lg-art-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 40%; transform: scale(1.04); animation: lg-pan 22s var(--sg-ease) both; }
.lg-art-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,10,18,.62) 0%, rgba(4,10,18,.15) 30%, rgba(4,10,18,.35) 55%, rgba(4,10,18,.9) 100%),
              linear-gradient(90deg, color-mix(in srgb, var(--al-brand) 38%, transparent), transparent 70%); }
@keyframes lg-pan { from { transform: scale(1.12); } to { transform: scale(1.04); } }
.lg-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--al-display); font-weight: 650; font-size: 18px; letter-spacing: -.02em; width: fit-content; }
.lg-brand .al-logo-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -6px rgba(0,0,0,.5); }
.lg-brand .al-logo-img { height: 34px; width: auto; border-radius: 8px; }
.lg-art-copy { max-width: 540px; animation: sg-rise .7s var(--sg-ease) .1s backwards; }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lg-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #5EEAD4; box-shadow: 0 0 0 4px rgba(94,234,212,.25); }
.lg-art h2 { font-family: var(--al-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.035em; font-weight: 650; margin: 18px 0 14px; color: #fff; text-wrap: balance; }
.lg-art p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 470px; }
.lg-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.lg-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(8,16,28,.38); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.lg-points li > span { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(94,234,212,.16); color: #5EEAD4; }
.lg-points li > span .mud-icon-root { font-size: 19px; }
.lg-points b { display: block; font-size: 14px; font-weight: 600; } .lg-points small { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 1px; line-height: 1.45; }
.lg-art-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255,255,255,.66); flex-wrap: wrap; }
.lg-art-foot a { color: inherit; text-decoration: none; } .lg-art-foot a:hover { color: #fff; }

.lg-main { display: flex; flex-direction: column; min-width: 0; padding: 22px 28px; background:
  radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--al-brand) 7%, transparent), transparent 60%), var(--sg-bg); }
.lg-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.lg-brand-s { display: none; color: var(--sg-ink); }
.lg-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; color: var(--sg-muted); text-decoration: none; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: color .15s, border-color .15s; }
.lg-back .mud-icon-root { font-size: 16px; } .lg-back:hover { color: var(--sg-ink); border-color: color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); }
.lg-stage { flex: 1; display: grid; place-items: center; padding: 24px 0; }
.lg-help { text-align: center; font-size: 12.5px; color: var(--sg-muted); } .lg-help a { color: var(--al-brand); font-weight: 600; text-decoration: none; }

.al-auth-card { width: min(470px, 100%); background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 22px; padding: 30px 30px 24px; color: var(--sg-ink);
  box-shadow: var(--sg-bevel), 0 1px 2px rgba(14,23,38,.04), 0 30px 60px -30px rgba(14,23,38,.28); animation: sg-rise .55s var(--sg-ease) backwards; position: relative; }
.al-auth-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--al-brand), var(--al-teal)); }
.al-auth-card h1 { font-family: var(--al-display); font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px; font-weight: 650; }
.al-auth-card .al-input { height: 44px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); padding: 0 12px; font: inherit; color: var(--sg-ink); transition: border-color .15s, box-shadow .15s; }
.al-auth-card .al-input:focus { outline: none; border-color: var(--al-brand); box-shadow: var(--sg-ring); background: var(--sg-surface); }
.al-auth-card .al-btn-primary { height: 46px; border-radius: 12px; font-weight: 600; background: linear-gradient(180deg, color-mix(in srgb, var(--al-brand) 88%, #fff), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px var(--al-brand); }

.lg-card-h { display: flex; gap: 14px; align-items: center; }
.lg-card-mark .al-logo-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px -10px var(--al-brand); }
.lg-card-mark .al-logo-mark svg { width: 24px; height: 24px; } .lg-card-mark .al-logo-img { height: 46px; width: auto; border-radius: 12px; }
.lg-card-h h1 { margin: 0; font-size: 25px; } .lg-card-h p { margin: 2px 0 0; color: var(--sg-muted); font-size: 13.5px; }
.lg-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; padding: 4px; border-radius: 12px; background: var(--sg-sunken); }
.lg-roles span { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted); padding: 7px 6px; border-radius: 9px; white-space: nowrap; }
.lg-roles span .mud-icon-root { font-size: 16px; color: var(--al-brand); }
.lg-roles span:first-child { background: var(--sg-surface); color: var(--sg-ink); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.lg-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--sg-muted); text-align: center; }
.lg-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-top: 14px; border: 1px solid transparent; animation: sg-fade .3s both; }
.lg-alert .mud-icon-root { font-size: 18px; flex: none; margin-top: 1px; }
.lg-alert.err { background: var(--sg-bad-bg); color: var(--sg-bad); border-color: color-mix(in srgb, var(--sg-bad) 25%, transparent); }
.lg-alert.warn { background: var(--sg-warn-bg); color: var(--sg-warn); border-color: color-mix(in srgb, var(--sg-warn) 25%, transparent); }
.lg-alert.ok { background: var(--sg-good-bg); color: var(--sg-good); border-color: color-mix(in srgb, var(--sg-good) 25%, transparent); }
.lg-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field > label { font-size: 13px; font-weight: 600; }
.lg-input { position: relative; display: flex; align-items: center; height: 46px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); transition: border-color .15s, box-shadow .15s, background .15s; }
.lg-input:hover { border-color: color-mix(in srgb, var(--sg-ink) 18%, var(--sg-line)); }
.lg-input:focus-within { border-color: var(--al-brand); box-shadow: var(--sg-ring); background: var(--sg-surface); }
.lg-input > .mud-icon-root { position: absolute; left: 13px; font-size: 19px; color: var(--sg-faint); pointer-events: none; transition: color .15s; }
.lg-input:focus-within > .mud-icon-root { color: var(--al-brand); }
.lg-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--sg-ink); padding: 0 12px 0 42px; border-radius: 12px; }
.lg-input input::placeholder { color: var(--sg-faint); }
.lg-input input.invalid { box-shadow: none; }
.lg-field:has(input.invalid) .lg-input { border-color: var(--sg-bad); }
.lg-eye { flex: none; width: 40px; height: 40px; margin-right: 3px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--sg-faint); }
.lg-eye:hover { background: var(--sg-sunken); color: var(--sg-ink); } .lg-eye .mud-icon-root { font-size: 19px; }
.lg-eye .lg-eye-hide { display: none; } .lg-eye.on .lg-eye-hide { display: inline-block; } .lg-eye.on .lg-eye-show { display: none; }
.lg-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--sg-muted); cursor: pointer; user-select: none; }
.lg-check input { width: 17px; height: 17px; accent-color: var(--al-brand); margin: 0; }
.lg-submit { height: 48px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 650; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--al-brand) 85%, #fff), var(--al-brand) 55%, color-mix(in srgb, var(--al-brand) 90%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.15), 0 12px 24px -12px var(--al-brand); transition: transform .15s, box-shadow .15s, filter .15s; }
.lg-submit .mud-icon-root { font-size: 18px; transition: transform .2s var(--sg-ease); }
.lg-submit:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 30px -12px var(--al-brand); } .lg-submit:hover .mud-icon-root { transform: translateX(3px); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit:focus-visible { outline: none; box-shadow: var(--sg-ring), 0 12px 24px -12px var(--al-brand); }
.lg-or { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 12px; color: var(--sg-faint); font-weight: 600; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--sg-line); }
.lg-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.lg-alt a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sg-line); text-decoration: none; color: var(--sg-ink); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
.lg-alt a:hover { border-color: color-mix(in srgb, var(--al-brand) 40%, var(--sg-line)); transform: translateY(-1px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.lg-alt a > .mud-icon-root { font-size: 20px; color: var(--al-brand); flex: none; }
.lg-alt b { display: block; font-size: 13px; font-weight: 600; } .lg-alt small { display: block; font-size: 11.5px; color: var(--sg-muted); }
.lg-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 11.5px; color: var(--sg-faint); text-align: center; }
.lg-secure .mud-icon-root { font-size: 14px; }
@media (max-width: 960px) {
  .lg { grid-template-columns: 1fr; }
  .lg-art { display: none; }
  .lg-brand-s { display: inline-flex; margin-right: auto; }
  .lg-brand-s .al-logo-mark { width: 30px; height: 30px; }
  .lg-main { padding: 16px; }
}
@media (max-width: 480px) { .al-auth-card { padding: 22px 18px 18px; border-radius: 18px; } .lg-roles span { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .lg-art-img { animation: none; } }

/* ===================================================================================================== 
   28 · Sign-out confirmation (dialog + static fallback page)
   ===================================================================================================== */
.so-dlg { border-radius: 22px !important; overflow: hidden; box-shadow: var(--sg-bevel), var(--sg-shadow-3) !important; }
.so-dlg .so-body, .so-dlg .mud-dialog-content { padding: 0 !important; margin: 0 !important; }
.so { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 26px 22px; position: relative; }
.so::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; background: radial-gradient(240px 110px at 50% 0%, color-mix(in srgb, var(--al-brand) 16%, transparent), transparent 75%); pointer-events: none; }
.so-ic { position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -12px var(--al-brand); animation: so-pop .45s var(--sg-ease) both; }
.so-ic .mud-icon-root { font-size: 28px; }
@keyframes so-pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.so h2 { font-family: var(--al-display); font-size: 21px; letter-spacing: -.025em; font-weight: 650; margin: 16px 0 6px; }
.so p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sg-muted); }
.so p b { color: var(--sg-ink); font-weight: 600; }
.so-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 20px; }
.so-btn { height: 44px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; transition: filter .15s, transform .15s, border-color .15s; }
.so-btn .mud-icon-root { font-size: 18px; }
.so-btn.ghost { border: 1px solid var(--sg-line); background: var(--sg-surface); color: var(--sg-ink); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.so-btn.ghost:hover { border-color: color-mix(in srgb, var(--sg-ink) 22%, var(--sg-line)); }
.so-btn.primary { border: 0; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--sg-bad) 85%, #fff), var(--sg-bad)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -12px var(--sg-bad); }
.so-btn.primary:hover { filter: brightness(1.06); } .so-btn:active { transform: translateY(1px); }
.so-btn:focus-visible { outline: none; box-shadow: var(--sg-ring); }
.so-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11.5px; color: var(--sg-faint); }
.so-note .mud-icon-root { font-size: 14px; }
.um-signout .mud-icon-root, .um-signout .mud-typography { color: var(--sg-bad) !important; }

/* ===================================================================================================== 
   29 · System documents — receipts, invoices, contracts (DocSheet) + print
   ===================================================================================================== */
.doc-dialog { border-radius: 20px !important; overflow: hidden; background: var(--sg-sunken) !important; }
.doc-dialog .doc-dialog-body, .doc-dialog .mud-dialog-content { padding: 18px 18px 6px !important; margin: 0 !important; }
.doc-dialog .mud-dialog-actions { padding: 10px 18px 16px !important; gap: 8px; background: var(--sg-sunken); }
.doc { --doc-tone: var(--al-brand); position: relative; overflow: hidden; background: var(--sg-surface); color: var(--sg-ink); border: 1px solid var(--sg-line); border-radius: 16px;
  box-shadow: var(--sg-bevel), 0 1px 2px rgba(14,23,38,.05), 0 18px 40px -24px rgba(14,23,38,.35); padding: 26px 28px 20px; font-size: 13.5px; animation: sg-rise .4s var(--sg-ease) backwards; }
.doc-edge { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--al-brand), var(--al-teal) 60%, var(--doc-tone)); }
.doc-h { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--sg-line); flex-wrap: wrap; }
.doc-brand { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.doc-brand .al-logo-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.doc-brand .al-logo-mark svg { width: 22px; height: 22px; } .doc-brand .al-logo-img { height: 42px; width: auto; border-radius: 10px; }
.doc-brand b { display: block; font-family: var(--al-display); font-size: 17px; letter-spacing: -.02em; font-weight: 650; }
.doc-brand small { display: block; font-size: 11.5px; color: var(--sg-muted); line-height: 1.5; }
.doc-title { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.doc-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-tone); padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--doc-tone) 10%, transparent); }
.doc-title b { font-size: 15px; margin-top: 4px; letter-spacing: .02em; }
.doc-title small { font-size: 11.5px; color: var(--sg-muted); }
.doc-stamp { position: absolute; right: 26px; top: 100px; pointer-events: none; transform: rotate(-11deg); z-index: 1; animation: doc-stamp .5s var(--sg-ease) .25s backwards; }
.doc-stamp span { display: inline-block; padding: 6px 14px; border: 2.5px solid var(--doc-tone); border-radius: 10px; color: var(--doc-tone); font-family: var(--al-mono-font, monospace); font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .82; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--doc-tone) 25%, transparent); background: color-mix(in srgb, var(--sg-surface) 70%, transparent); white-space: nowrap; }
@keyframes doc-stamp { from { opacity: 0; transform: rotate(-11deg) scale(1.6); } to { opacity: 1; transform: rotate(-11deg) scale(1); } }
.doc-sim-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--al-display); font-size: 84px; font-weight: 800; letter-spacing: .12em; color: color-mix(in srgb, var(--sg-ink) 4%, transparent); transform: rotate(-24deg); user-select: none; }
.doc-sim { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 550; color: var(--sg-warn); background: var(--sg-warn-bg); border: 1px dashed color-mix(in srgb, var(--sg-warn) 40%, transparent); }
.doc-sim .mud-icon-root { font-size: 16px; }
.doc-b { position: relative; display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.doc-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--doc-tone) 9%, var(--sg-surface)), color-mix(in srgb, var(--al-brand) 4%, var(--sg-surface))); border: 1px solid color-mix(in srgb, var(--doc-tone) 18%, var(--sg-line)); }
.doc-hero small { display: block; font-size: 11.5px; font-weight: 600; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .06em; }
.doc-hero b { display: block; font-family: var(--al-display); font-size: 32px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; margin: 4px 0 3px; }
.doc-hero > div > span { font-size: 12.5px; color: var(--sg-muted); }
.doc-hero-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.doc-hero-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sg-ink); font-weight: 550; }
.doc-hero-meta .mud-icon-root { font-size: 15px; color: var(--sg-muted); }
.doc-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.doc-parties.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-parties > div { display: flex; flex-direction: column; gap: 1px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); min-width: 0; }
.doc-parties small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); margin-bottom: 3px; }
.doc-parties b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } .doc-parties span { font-size: 12px; color: var(--sg-muted); overflow-wrap: anywhere; }
.doc-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-lines th { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); text-align: left; padding: 0 0 8px; border-bottom: 1.5px solid var(--sg-ink); }
.doc-lines td { padding: 11px 0; border-bottom: 1px solid var(--sg-line-soft); vertical-align: top; }
.doc-lines td + td, .doc-lines th + th { padding-left: 12px; }
.doc-lines .r { text-align: right; white-space: nowrap; }
.doc-lines td b { display: block; font-weight: 600; } .doc-lines td small { display: block; font-size: 11.5px; color: var(--sg-muted); margin-top: 2px; }
.doc-lines tfoot td { border-bottom: 0; padding: 10px 0 0; font-weight: 600; }
.doc-lines tfoot tr:first-child td { border-top: 1.5px solid var(--sg-ink); padding-top: 12px; font-size: 15px; font-weight: 700; }
.doc-lines tfoot tr.neg td { color: var(--sg-info); font-weight: 550; font-size: 13px; }
.doc-lines tfoot tr:last-child:not(:first-child) td { font-weight: 700; }
.doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--sg-line); border-radius: 12px; overflow: hidden; }
.doc-meta > div { padding: 10px 13px; border-bottom: 1px solid var(--sg-line-soft); min-width: 0; }
.doc-meta > div:nth-child(odd) { border-right: 1px solid var(--sg-line-soft); }
.doc-meta > div.wide { grid-column: 1 / -1; border-right: 0; }
.doc-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.doc-meta dd { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.doc-sec h4 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-faint); display: flex; align-items: center; gap: 10px; }
.doc-sec h4::after { content: ""; flex: 1; height: 1px; background: var(--sg-line); }
.doc-clauses { margin: 0; padding: 0; list-style: none; counter-reset: cl; display: flex; flex-direction: column; gap: 9px; }
.doc-clauses > li { counter-increment: cl; position: relative; padding-left: 34px; line-height: 1.55; }
.doc-clauses > li::before { content: counter(cl); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--al-brand); background: color-mix(in srgb, var(--al-brand) 10%, transparent); }
.doc-clauses b { display: block; font-weight: 600; } .doc-clauses span { color: var(--sg-ink); }
.doc-clauses ul { margin: 2px 0 0; padding-left: 18px; color: var(--sg-ink); }
.doc-sched { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.doc-sched > div { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-raised); position: relative; overflow: hidden; }
.doc-sched > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sg-line); }
.doc-sched > div.paid::before { background: var(--sg-good); } .doc-sched > div.cur { border-color: color-mix(in srgb, var(--doc-tone) 45%, var(--sg-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-tone) 12%, transparent); } .doc-sched > div.cur::before { background: var(--doc-tone); }
.doc-sched span { font-size: 10.5px; font-weight: 700; color: var(--sg-faint); } .doc-sched b { font-size: 12.5px; font-weight: 600; } .doc-sched em { font-style: normal; font-size: 13px; font-weight: 650; } .doc-sched small { font-size: 11px; color: var(--sg-muted); }
.doc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doc-sig { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px; border-radius: 12px; border: 1px dashed var(--sg-line); }
.doc-sig small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.doc-sig-name { font-family: var(--al-serif); font-style: italic; font-size: 28px; line-height: 1.15; color: var(--al-brand); padding: 4px 2px 6px; border-bottom: 1.5px solid var(--sg-ink); min-height: 44px; overflow-wrap: anywhere; }
.doc-sig-name.draft { opacity: .55; } .doc-sig-name.empty { border-bottom-style: dashed; border-bottom-color: var(--sg-faint); }
.doc-sig-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sg-muted); }
.doc-sig-meta .mud-icon-root { font-size: 14px; }
.doc-sig.done { border-style: solid; background: color-mix(in srgb, var(--sg-good) 4%, var(--sg-surface)); } .doc-sig.done .doc-sig-meta .mud-icon-root { color: var(--sg-good); }
.doc-sig.wait { background: var(--sg-warn-bg); border-color: color-mix(in srgb, var(--sg-warn) 35%, transparent); } .doc-sig.wait .doc-sig-meta .mud-icon-root { color: var(--sg-warn); }
.doc-f { position: relative; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sg-line); display: flex; flex-direction: column; gap: 6px; }
.doc-f p { margin: 0; font-size: 11.5px; color: var(--sg-muted); line-height: 1.55; }
.doc-f .doc-thanks { font-family: var(--al-serif); font-style: italic; font-size: 16px; color: var(--sg-ink); }
.doc-f-row { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--sg-faint); margin-top: 4px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .doc { padding: 20px 16px 16px; }
  .doc-parties, .doc-parties.two, .doc-meta, .doc-sigs { grid-template-columns: 1fr; }
  .doc-meta > div:nth-child(odd) { border-right: 0; }
  .doc-title { text-align: left; align-items: flex-start; }
  .doc-stamp { top: auto; bottom: 90px; right: 14px; }
  .doc-hero-meta { align-items: flex-start; }
}

/* Print only the chosen document (alDoc.print copies it into #doc-print-root). */
#doc-print-root { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html.doc-printing, html.doc-printing body { background: #fff !important; height: auto !important; overflow: visible !important; }
  html.doc-printing body > *:not(#doc-print-root) { display: none !important; }
  html.doc-printing #doc-print-root { display: block !important; }
  #doc-print-root .doc { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; animation: none !important; background: #fff !important; color: #0E1726 !important; }
  #doc-print-root { --sg-surface:#fff; --sg-raised:#FBFCFD; --sg-sunken:#EEF1F5; --sg-line:#E4E8EE; --sg-line-soft:#EDF0F4; --sg-ink:#0E1726; --sg-muted:#5B6576; --sg-faint:#8A94A5; --sg-good:#13875A; --sg-good-bg:#E7F5EE; --sg-warn:#B7731A; --sg-warn-bg:#FCF1DF; --sg-bad:#D23F4E; --sg-info:#2F6FDF; }
  #doc-print-root .doc-noprint { display: none !important; }
  #doc-print-root .doc-stamp { animation: none !important; }
  #doc-print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================================================== 
   30 · Public contractor profile (/contractors/{slug})
   ===================================================================================================== */
.cpf-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; isolation: isolate; }
.cpf-hero-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 45%; animation: lg-pan 18s var(--sg-ease) both; }
.cpf-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,10,18,.35) 0%, rgba(4,10,18,.25) 35%, rgba(4,10,18,.88) 100%), linear-gradient(90deg, color-mix(in srgb, var(--al-brand) 45%, transparent), transparent 65%); }
.cpf-hero-in { width: 100%; padding-top: 22px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 26px; }
.cpf-back { display: inline-flex; align-items: center; gap: 2px; width: fit-content; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); text-decoration: none; padding: 6px 12px 6px 8px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cpf-back:hover { background: rgba(255,255,255,.2); } .cpf-back .mud-icon-root { font-size: 18px; }
.cpf-id { display: flex; gap: 20px; align-items: flex-end; animation: sg-rise .6s var(--sg-ease) backwards; }
.cpf-avatar { width: 96px; height: 96px; flex: none; border-radius: 26px; display: grid; place-items: center; font-family: var(--al-display); font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); border: 3px solid rgba(255,255,255,.9); box-shadow: 0 18px 36px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.cpf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cpf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(8,16,28,.45); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cpf-tag .mud-icon-root { font-size: 15px; } .cpf-tag.ok .mud-icon-root { color: #5EEAD4; }
.cpf-tag i { width: 7px; height: 7px; border-radius: 50%; background: #9AA6B6; } .cpf-tag.live i { background: #3FCB8A; box-shadow: 0 0 0 3px rgba(63,203,138,.3); animation: cpf-pulse 2s infinite; }
@keyframes cpf-pulse { 50% { box-shadow: 0 0 0 6px rgba(63,203,138,0); } }
.cpf-id h1 { margin: 0; font-family: var(--al-display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.cpf-meta { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.85); }
.cpf-meta span { display: inline-flex; align-items: center; gap: 5px; } .cpf-meta .mud-icon-root { font-size: 16px; opacity: .85; } .cpf-meta b { color: #fff; }
.cpf-meta .cpf-star { color: #F5C04A; opacity: 1; }
.cpf-credit { position: absolute; right: 14px; top: 14px; font-size: 10.5px; color: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.3); }
.cpf-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: -38px; border-radius: 18px; overflow: hidden; background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3); }
.cpf-stats > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--sg-line-soft); }
.cpf-stats > div:last-child { border-right: 0; }
.cpf-stats b { font-family: var(--al-display); font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cpf-stats span { font-size: 12px; color: var(--sg-muted); }
.cpf-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cpf-service { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sg-line); background: var(--sg-raised); transition: border-color .15s, transform .15s; }
.cpf-service:hover { border-color: color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); transform: translateY(-1px); }
.cpf-service > span { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--al-brand); background: color-mix(in srgb, var(--al-brand) 10%, transparent); }
.cpf-service > span .mud-icon-root { font-size: 20px; }
.cpf-service b { display: block; font-size: 13.5px; font-weight: 600; } .cpf-service small { display: block; font-size: 12px; color: var(--sg-muted); margin-top: 2px; line-height: 1.45; }
.cpf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cpf-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; padding: 6px 11px; border-radius: 10px; background: var(--sg-sunken); border: 1px solid var(--sg-line); }
.cpf-chips .mud-icon-root { font-size: 15px; color: var(--sg-muted); }
.cpf-cred { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sg-line-soft); }
.cpf-cred:last-of-type { border-bottom: 0; }
.cpf-cred-ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--sg-good); box-shadow: 0 0 0 4px var(--sg-good-bg); }
.cpf-cred-ic .mud-icon-root { font-size: 17px; }
.cpf-cred b { display: block; font-size: 13.5px; font-weight: 600; } .cpf-cred small { display: block; font-size: 12px; color: var(--sg-muted); }
.cpf-cred-when { font-size: 12px; color: var(--sg-muted); white-space: nowrap; padding: 3px 8px; border-radius: 7px; background: var(--sg-sunken); }
.al-pf .img { position: relative; } .al-pf .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sg-ease); }
.al-pf:hover .img img { transform: scale(1.05); }
.cpf-pf-tag { position: absolute; left: 8px; bottom: 8px; font-size: 10.5px; color: #fff; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.45); }
.cpf-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cpf-review { margin: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--sg-line); background: var(--sg-raised); display: flex; flex-direction: column; gap: 10px; }
.cpf-review-h { display: flex; gap: 10px; align-items: center; } .cpf-review-h b { display: block; font-size: 13.5px; } .cpf-review-h small { display: block; font-size: 11.5px; color: var(--sg-muted); }
.cpf-review-stars { color: #E9A825; letter-spacing: 1px; font-size: 14px; white-space: nowrap; } .cpf-review-stars i { font-style: normal; color: var(--sg-line); }
.cpf-review blockquote { margin: 0; font-size: 13.5px; line-height: 1.6; position: relative; padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--al-brand) 30%, var(--sg-line)); }
.cpf-review figcaption { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--sg-good); }
.cpf-review figcaption .mud-icon-root { font-size: 14px; }
.cpf-cta { position: relative; overflow: hidden; }
.cpf-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--al-brand), var(--al-teal)); }
.cpf-price { font-family: var(--al-display); font-size: 28px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0; }
@media (max-width: 900px) { .cpf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cpf-stats > div:nth-child(3) { border-right: 0; } .cpf-stats > div:nth-child(-n+3) { border-bottom: 1px solid var(--sg-line-soft); } }
@media (max-width: 600px) {
  .cpf-hero { min-height: 300px; } .cpf-id { flex-direction: column; align-items: flex-start; gap: 12px; } .cpf-avatar { width: 72px; height: 72px; font-size: 26px; border-radius: 20px; }
  .cpf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cpf-stats > div { border-right: 0; border-bottom: 1px solid var(--sg-line-soft); } .cpf-stats > div:nth-child(odd) { border-right: 1px solid var(--sg-line-soft); }
}

/* ===================================================================================================== 
   31 · Client & contractor portal pages — filters, schedules, quotation cards, transactions
   ===================================================================================================== */
.cl-pipe { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cl-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-bar .cx-search { max-width: 360px; flex: 1 1 240px; }
.cl-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.cl-sec-h b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.012em; } .cl-sec-h span { font-size: 12.5px; color: var(--sg-muted); }
.cl-sec-h .sg-seg span { color: inherit; }
.cl-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cl-legend > div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.cl-legend i { width: 10px; height: 10px; border-radius: 3px; } .cl-legend span { color: var(--sg-muted); } .cl-legend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cl-legend .sep { border-top: 1px dashed var(--sg-line); padding-top: 6px; margin-top: 2px; }
.cl-sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.cl-sched-card { border: 1px solid var(--sg-line); border-radius: 16px; background: var(--sg-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sg-bevel), var(--sg-shadow-1); min-width: 0; }
.cl-sched-h { display: flex; gap: 12px; align-items: flex-start; }
.cl-sched-t { display: block; font-weight: 650; font-size: 14.5px; color: var(--sg-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-sched-t:hover { color: var(--al-brand); }
.cl-sched-h .al-grow > span { font-size: 12px; color: var(--sg-muted); }
.cl-sched-v { text-align: right; flex: none; } .cl-sched-v b { display: block; font-size: 16px; font-weight: 650; } .cl-sched-v span { font-size: 11.5px; color: var(--sg-muted); }
.cl-ms { display: flex; gap: 4px; }
.cl-ms-seg { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 9px 9px 7px; border-radius: 10px; background: var(--sg-sunken); border: 1px solid var(--sg-line-soft); overflow: hidden; }
.cl-ms-seg i { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sg-line); }
.cl-ms-seg b { font-size: 10.5px; color: var(--sg-faint); font-weight: 700; } .cl-ms-seg span { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-ms-seg em { font-style: normal; font-size: 11.5px; color: var(--sg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ms-seg.rel { background: color-mix(in srgb, var(--cv3) 9%, var(--sg-surface)); border-color: color-mix(in srgb, var(--cv3) 25%, var(--sg-line)); } .cl-ms-seg.rel i { background: var(--cv3); }
.cl-ms-seg.held { background: color-mix(in srgb, var(--cv4) 9%, var(--sg-surface)); border-color: color-mix(in srgb, var(--cv4) 25%, var(--sg-line)); } .cl-ms-seg.held i { background: var(--cv4); }
.cl-ms-seg.due { background: color-mix(in srgb, var(--cv2) 9%, var(--sg-surface)); border-color: color-mix(in srgb, var(--cv2) 40%, var(--sg-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv2) 12%, transparent); } .cl-ms-seg.due i { background: var(--cv2); }
.cl-ms-seg.ref i { background: var(--sg-info); } .cl-ms-seg.disp i { background: var(--sg-bad); }
.cl-sched-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--sg-line); }
.cl-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--sg-ink); }
.cl-note .mud-icon-root { font-size: 16px; color: var(--cv2); }
.cl-note.ok .mud-icon-root { color: var(--sg-good); } .cl-note.warn { color: var(--sg-warn); } .cl-note.warn .mud-icon-root { color: var(--sg-warn); } .cl-note.bad { color: var(--sg-bad); } .cl-note.bad .mud-icon-root { color: var(--sg-bad); }
.cl-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cl-how > div { position: relative; padding: 12px; border-radius: 12px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); }
.cl-how span { position: absolute; right: 10px; top: 8px; font-family: var(--al-display); font-size: 20px; font-weight: 700; color: color-mix(in srgb, var(--sg-ink) 10%, transparent); }
.cl-how .mud-icon-root { font-size: 20px; color: var(--al-brand); } .cl-how p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) { .cl-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-sched { grid-template-columns: 1fr; } }

/* transactions table (TransactionTable) */
.tt-scroll { overflow-x: auto; } .tt-table { min-width: 820px; }
.tt-ref { display: flex; gap: 10px; align-items: center; } .tt-ref b { display: block; font-size: 12.5px; } .tt-ref span { font-size: 11.5px; color: var(--sg-muted); }
.tt-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; } .tt-ic .mud-icon-root { font-size: 17px; }
.tt-ic.good { background: var(--sg-good-bg); color: var(--sg-good); } .tt-ic.warn { background: var(--sg-warn-bg); color: var(--sg-warn); } .tt-ic.bad { background: var(--sg-bad-bg); color: var(--sg-bad); } .tt-ic.info { background: var(--sg-info-bg); color: var(--sg-info); }
.tt-method { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } .tt-method .mud-icon-root { font-size: 16px; color: var(--sg-muted); }
.tt-amt { font-size: 14px; font-variant-numeric: tabular-nums; }

/* request cards — status accent */
.rq-card { position: relative; overflow: hidden; box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.rq-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--sg-line)); }
.rq-card:focus-visible { outline: none; box-shadow: var(--sg-ring); }
.rq-card .rq-steps .done i { background: var(--c, var(--al-teal)); }

/* project card milestone strip */
.pj-strip { display: flex; gap: 3px; } .pj-strip i { height: 6px; border-radius: 99px; background: var(--sg-sunken); min-width: 0; }
.pj-strip i.done { background: var(--al-teal); } .pj-strip i.cur { background: linear-gradient(90deg, var(--cv1) 50%, var(--sg-sunken) 50%); }
.pj-card { box-shadow: var(--sg-bevel), var(--sg-shadow-1); }

/* quotation comparison cards */
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 4px; }
.qc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); overflow: hidden; transition: transform .2s var(--sg-ease), box-shadow .2s; min-width: 0; }
.qc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); }
.qc:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); }
.qc.won { border-color: color-mix(in srgb, var(--sg-good) 45%, var(--sg-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-good) 14%, transparent), var(--sg-shadow-2); }
.qc.lost { opacity: .62; } .qc.short { border-color: color-mix(in srgb, var(--cv5) 45%, var(--sg-line)); }
.qc-h { display: flex; gap: 10px; align-items: center; }
.qc-name { display: block; font-weight: 650; font-size: 14.5px; color: var(--sg-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qc-name:hover { color: var(--al-brand); }
.qc-sub { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--sg-muted); } .qc-star { font-size: 14px !important; color: #E9A825; }
.qc-badges { display: flex; gap: 5px; flex-wrap: wrap; min-height: 22px; }
.qc-badges span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 99px; }
.qc-badges .mud-icon-root { font-size: 13px; }
.qc-badges .g { background: var(--sg-good-bg); color: var(--sg-good); } .qc-badges .b { background: var(--sg-info-bg); color: var(--sg-info); }
.qc-badges .v { background: color-mix(in srgb, var(--cv4) 12%, transparent); color: var(--cv4); } .qc-badges .a { background: var(--sg-warn-bg); color: var(--sg-warn); }
.qc-total small { display: block; font-size: 11.5px; font-weight: 600; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .05em; }
.qc-total b { display: block; font-family: var(--al-display); font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; }
.qc-total span { font-size: 12px; color: var(--sg-muted); }
.qc-range { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--cv3), var(--cv5), var(--cv6)); opacity: .9; }
.qc-range i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--sg-surface); border: 3px solid var(--sg-ink); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.qc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.qc-facts > div { padding: 8px 10px; border-radius: 10px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); min-width: 0; }
.qc-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); }
.qc-facts dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-ms { display: flex; gap: 3px; height: 8px; } .qc-ms i { border-radius: 99px; min-width: 6px; }
.qc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--sg-line); }
.qc-acts { display: flex; gap: 6px; align-items: center; }
.al-cmp { border-radius: 16px; box-shadow: var(--sg-bevel), var(--sg-shadow-1); border-color: var(--sg-line); }
.al-cmp thead th { background: var(--sg-raised); position: sticky; top: 0; z-index: 2; }
.al-cmp tbody tr:hover td { background: color-mix(in srgb, var(--al-brand) 3%, transparent); }

/* ===================================================================================================== 
   32 · Contractor portal — dashboard, leads, lead view, quote builder, earnings, job workspace
   ===================================================================================================== */
.ch-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--al-brand) 80%, #04070C), color-mix(in srgb, var(--al-brand) 45%, #04070C)) !important; }
.ch-due { color: var(--sg-warn); font-weight: 650; }
.ch-gauge { display: grid; place-items: center; padding: 4px 0 8px; }
.ch-tips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-tips li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--sg-ink); }
.ch-tips .mud-icon-root { font-size: 15px; color: var(--sg-faint); flex: none; margin-top: 1px; }
.ch-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-perf > div { padding: 10px 12px; border-radius: 12px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); display: flex; flex-direction: column; gap: 2px; }
.ch-perf span { font-size: 11.5px; color: var(--sg-muted); } .ch-perf b { font-family: var(--al-display); font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-perf i { display: block; height: 4px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; margin-top: 4px; } .ch-perf em { display: block; height: 100%; background: var(--cv3); border-radius: 99px; }
.ch-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sg-good); padding: 6px 0; } .ch-ok .mud-icon-root { font-size: 18px; }

.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ld { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--sg-line); background: var(--sg-surface); cursor: pointer;
  box-shadow: var(--sg-bevel), var(--sg-shadow-1); transition: transform .2s var(--sg-ease), box-shadow .2s, border-color .2s; min-width: 0; }
.ld::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.ld:hover { transform: translateY(-2px); box-shadow: var(--sg-bevel), var(--sg-shadow-2); } .ld:focus-visible { outline: none; box-shadow: var(--sg-ring); }
.ld.new { background: linear-gradient(180deg, color-mix(in srgb, var(--cv2) 6%, var(--sg-surface)), var(--sg-surface) 55%); }
.ld.inv { border-color: color-mix(in srgb, #E9A825 45%, var(--sg-line)); }
.ld-h { display: flex; align-items: center; gap: 8px; } .ld-ref { font-size: 12px; color: var(--sg-muted); }
.ld-inv { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #A86F00; background: color-mix(in srgb, #E9A825 16%, transparent); padding: 2px 8px; border-radius: 99px; }
.ld-inv .mud-icon-root { font-size: 13px; }
.ld h3 { margin: 0; font-family: var(--al-display); font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; }
.ld-svc { display: flex; gap: 5px; flex-wrap: wrap; } .ld-svc span { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--sg-sunken); color: var(--sg-ink); }
.ld-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ld-facts > div { padding: 8px 10px; border-radius: 10px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); min-width: 0; }
.ld-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); }
.ld-facts dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-clock { display: flex; flex-direction: column; gap: 5px; }
.ld-clock-bar { height: 5px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; } .ld-clock-bar i { display: block; height: 100%; border-radius: 99px; background: var(--cv3); }
.ld-clock small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sg-muted); font-weight: 550; } .ld-clock small .mud-icon-root { font-size: 14px; }
.ld-clock.soon .ld-clock-bar i { background: var(--cv2); } .ld-clock.soon small { color: var(--sg-warn); }
.ld-clock.late .ld-clock-bar i { background: var(--sg-bad); } .ld-clock.late small { color: var(--sg-bad); }

.lv-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lv-strip > div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); min-width: 0; }
.lv-strip .mud-icon-root { grid-row: 1 / 3; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--al-brand); background: color-mix(in srgb, var(--al-brand) 10%, transparent); box-sizing: border-box; }
.lv-strip span { font-size: 11.5px; color: var(--sg-muted); } .lv-strip b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-strip > div.soon { border-color: color-mix(in srgb, var(--sg-warn) 40%, var(--sg-line)); background: var(--sg-warn-bg); } .lv-strip > div.soon .mud-icon-root { color: var(--sg-warn); background: color-mix(in srgb, var(--sg-warn) 14%, transparent); }
.lv-strip > div.late { border-color: color-mix(in srgb, var(--sg-bad) 40%, var(--sg-line)); background: var(--sg-bad-bg); } .lv-strip > div.late .mud-icon-root { color: var(--sg-bad); background: color-mix(in srgb, var(--sg-bad) 14%, transparent); }
.lv-steps { margin: 0 0 16px; }
.ob-flow { margin-top: 14px; }
@media (max-width: 760px) { .lv-steps, .ob-flow { grid-template-columns: 1fr 1fr !important; } }

.qb-sum { position: relative; overflow: hidden; }
.qb-sum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--al-brand), var(--al-teal)); }
.qb-total small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sg-muted); }
.qb-total > b { display: block; font-family: var(--al-display); font-size: 30px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; }
.qb-total span { font-size: 12.5px; color: var(--sg-muted); } .qb-total span b { color: var(--sg-good); }
.qb-alloc { display: flex; gap: 2px; height: 10px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; } .qb-alloc i { height: 100%; transition: width .3s var(--sg-ease); }
.qb-alloc-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--sg-muted); margin-top: -6px; } .qb-alloc-l b { font-variant-numeric: tabular-nums; }
.qb-strength { padding: 12px; border-radius: 12px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); }
.qb-score { font-weight: 700; font-size: 13px; color: var(--c); padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, transparent); }
.qb-strength ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.qb-strength li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sg-muted); }
.qb-strength li .mud-icon-root { font-size: 15px; color: var(--sg-faint); } .qb-strength li.ok { color: var(--sg-ink); } .qb-strength li.ok .mud-icon-root { color: var(--sg-good); }

.er-wf { display: flex; flex-direction: column; gap: 10px; }
.er-wf > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; }
.er-wf span { color: var(--sg-muted); } .er-wf b { font-variant-numeric: tabular-nums; font-weight: 600; }
.er-wf i { grid-column: 1 / -1; height: 7px; border-radius: 99px; display: block; min-width: 2px; }
.er-wf .neg b { color: var(--sg-muted); font-weight: 550; }
.er-wf .tot { padding-top: 10px; border-top: 1px dashed var(--sg-line); } .er-wf .tot span { color: var(--sg-ink); font-weight: 600; } .er-wf .tot b { font-size: 15px; color: var(--sg-good); }
.er-table { min-width: 860px; }
.er-m { width: 34px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--cv1); background: color-mix(in srgb, var(--cv1) 12%, transparent); }

.wk-band { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; border-radius: 16px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); overflow: hidden; }
.wk-band > div { padding: 14px 16px; border-right: 1px solid var(--sg-line-soft); min-width: 0; }
.wk-band > div:last-child { border-right: 0; }
.wk-band small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sg-faint); }
.wk-band-ring { display: flex; align-items: center; gap: 12px; } .wk-band-ring b { display: block; font-size: 15px; } .wk-band-ring small { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--sg-muted); font-weight: 500; }
.wk-band-cur b { display: block; font-size: 14.5px; font-weight: 650; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-band-money b { font-size: 15px; }
.wk-money-bar { display: flex; height: 8px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; margin: 8px 0 6px; }
.wk-money-l { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--sg-muted); } .wk-money-l span { display: inline-flex; align-items: center; gap: 5px; } .wk-money-l i { width: 8px; height: 8px; border-radius: 2px; }
.wk-band-who { display: flex; gap: 10px; align-items: center; } .wk-band-who b { font-size: 13.5px; } .wk-band-who span { font-size: 12px; color: var(--sg-muted); }
@media (max-width: 1000px) { .wk-band { grid-template-columns: 1fr 1fr; } .wk-band > div:nth-child(2) { border-right: 0; } .wk-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--sg-line-soft); } }
@media (max-width: 560px) { .wk-band { grid-template-columns: 1fr; } .wk-band > div { border-right: 0; border-bottom: 1px solid var(--sg-line-soft); } }

/* 33 · Fix: stage tiles stack label / number / hint vertically wherever they're used (some button resets set display:flex row). */
.od-stage { display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; }
.od-stage small, .od-stage span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-stage small { display: flex; } .od-stage b, .od-stage span { display: block; }

/* 34 · Client & contractor list pages in the admin list style (cx-* toolbar, chips, dense tables) */
.cx-pill.violet { color: #6D4BD6; background: color-mix(in srgb, var(--cv4) 15%, transparent); }
.cx-pill.blue { color: #1D5FD0; background: color-mix(in srgb, var(--cv1) 14%, transparent); }
.al-dark .cx-pill.violet { color: #B9A6F5; } .al-dark .cx-pill.blue { color: #93B6F5; }
.cx-who > .cx-pill { flex: none; }
.cl-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--c, var(--cv1)); background: color-mix(in srgb, var(--c, var(--cv1)) 13%, transparent); }
.cl-ic .mud-icon-root { font-size: 18px; }
.cl-steps { display: flex; align-items: center; gap: 3px; min-width: 150px; }
.cl-steps i { width: 18px; height: 5px; border-radius: 99px; background: var(--sg-sunken); flex: none; }
.cl-steps i.done { background: var(--al-teal); } .cl-steps i.cur { background: var(--cv1); }
.cl-steps span { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted); white-space: nowrap; }
.cl-prog { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.cl-prog .pj-strip { flex: 1; } .cl-prog b { font-size: 12px; font-variant-numeric: tabular-nums; width: 34px; text-align: right; }
.mud-table-row.cl-attn > td:first-child { box-shadow: inset 3px 0 0 var(--cv2); }
.mud-table-row.cl-bad > td:first-child { box-shadow: inset 3px 0 0 var(--sg-bad); }
.al-card.flush .mud-table-container { border-radius: 0 0 16px 16px; }

/* 35 · Sign-in role tabs are links that switch copy, hints and photo per audience */
.lg-roles a { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted); padding: 7px 6px; border-radius: 9px; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, box-shadow .15s; }
.lg-roles a .mud-icon-root { font-size: 16px; color: var(--sg-faint); }
.lg-roles a:hover { color: var(--sg-ink); background: color-mix(in srgb, var(--sg-surface) 60%, transparent); }
.lg-roles a.on { background: var(--sg-surface); color: var(--sg-ink); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.lg-roles a.on .mud-icon-root { color: var(--al-brand); }
.lg-roles span:first-child { background: none; box-shadow: none; }
.lg-teamnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sg-sunken); font-size: 12.5px; color: var(--sg-muted); line-height: 1.5; }
.lg-teamnote .mud-icon-root { font-size: 20px; color: var(--al-brand); flex: none; }
@media (max-width: 480px) { .lg-roles a { font-size: 11.5px; } }

/* 36 · Account menu header, My files upload */
.um-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; min-width: 240px; }
.um-head b { display: block; font-size: 14px; font-weight: 650; } .um-head small { display: block; font-size: 12px; color: var(--sg-muted); }
.dc-upload { border-style: dashed; border-color: color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); }
.dc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dc-ic.mine { color: var(--cv4); background: color-mix(in srgb, var(--cv4) 13%, transparent); }

/* ===================================================================================================== 
   37 · Notifications — inbox page (all portals) and the bell drop-down
   ===================================================================================================== */
.nt-day { position: sticky; top: 0; z-index: 1; padding: 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint);
  background: color-mix(in srgb, var(--sg-sunken) 70%, var(--sg-surface)); border-bottom: 1px solid var(--sg-line-soft); }
.nt-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--sg-line-soft); cursor: pointer; transition: background .15s; }
.nt-item:last-child { border-bottom: 0; }
.nt-item:hover { background: color-mix(in srgb, var(--al-brand) 4%, transparent); }
.nt-item:focus-visible { outline: none; box-shadow: inset var(--sg-ring); }
.nt-item.unread { background: color-mix(in srgb, var(--al-brand) 5%, var(--sg-surface)); }
.nt-item.unread::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--al-teal); }
.nt-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.nt-ic .mud-icon-root { font-size: 20px; }
.nt-ic.sm { width: 32px; height: 32px; border-radius: 10px; } .nt-ic.sm .mud-icon-root { font-size: 17px; }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt-title { font-size: 14px; line-height: 1.4; color: var(--sg-ink); }
.nt-item.unread .nt-title { font-weight: 650; }
.nt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--sg-muted); }
.nt-kind { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); }
.nt-go { display: inline-flex; align-items: center; font-weight: 600; color: var(--al-brand); opacity: 0; transition: opacity .15s; }
.nt-go .mud-icon-root { font-size: 15px; }
.nt-item:hover .nt-go { opacity: 1; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--al-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 22%, transparent); }
.nt-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.nt-item:hover .nt-acts, .nt-item:focus-within .nt-acts { opacity: 1; }
@media (hover: none) { .nt-acts, .nt-go { opacity: 1; } }

.nc { width: 400px; }
.nc-h { align-items: flex-start; }
.nc-h b { display: block; font-size: 15px; font-weight: 650; } .nc-h small { display: block; font-size: 12px; color: var(--sg-muted); margin-top: 1px; }
.nc-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px !important; border-radius: 8px; color: var(--al-brand) !important; }
.nc-link .mud-icon-root { font-size: 15px; } .nc-link:hover { background: color-mix(in srgb, var(--al-brand) 8%, transparent) !important; }
.nc-list { max-height: min(440px, 60vh); overflow-y: auto; }
.nc-item { align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--sg-line-soft); }
.nc-item.unread { background: color-mix(in srgb, var(--al-brand) 4%, transparent); }
.nc-item .nt-dot { width: 8px; height: 8px; }
.nc-t { flex: 1; overflow: hidden; } .nc-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-empty { flex-direction: column; text-align: center; gap: 4px; padding: 28px 16px; }
.nc-empty b { color: var(--sg-ink); font-size: 14px; }
.nc-empty-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sg-good-bg); color: var(--sg-good); margin-bottom: 6px; }
.nc-all { display: flex !important; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid var(--sg-line); color: var(--al-brand) !important; }
.nc-all .mud-icon-root { font-size: 15px; }
.nc-all:hover { background: color-mix(in srgb, var(--al-brand) 5%, transparent); }

/* 38 · Notification reading dialog */
.nd-dlg { border-radius: 20px !important; overflow: hidden; }
.nd-dlg .nd-body, .nd-dlg .mud-dialog-content { padding: 0 !important; margin: 0 !important; }
.nd-dlg .mud-dialog-actions { padding: 10px 16px 16px !important; gap: 4px; border-top: 1px solid var(--sg-line-soft); }
.nd { position: relative; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.nd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent)); }
.nd-top { display: flex; align-items: center; gap: 12px; }
.nd-top .nt-ic { width: 46px; height: 46px; border-radius: 14px; } .nd-top .nt-ic .mud-icon-root { font-size: 23px; }
.nd-top small { display: block; margin-top: 4px; font-size: 12px; color: var(--sg-muted); }
.nd-top .nt-kind { display: inline-block; }
.nd-msg { margin: 0; font-family: var(--al-display); font-size: 19px; line-height: 1.45; font-weight: 600; letter-spacing: -.015em; color: var(--sg-ink); overflow-wrap: anywhere; }
.nd-refs { display: flex; gap: 6px; flex-wrap: wrap; }
.nd-refs span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: var(--sg-sunken); border: 1px solid var(--sg-line); }
.nd-what { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, var(--sg-raised)); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--sg-line)); font-size: 13px; color: var(--sg-ink); line-height: 1.5; }
.nd-what .mud-icon-root { font-size: 18px; color: var(--c); flex: none; margin-top: 1px; }
.nt-go { opacity: .8; }

/* ===================================================================================================== 
   39 · Reconnect overlay — centred card with spinning ring around the logo
   ===================================================================================================== */
.rc-modal { display: none; position: fixed; inset: 0; z-index: 10000; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--sg-bg) 55%, transparent); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); }
.rc-modal.components-reconnect-show, .rc-modal.components-reconnect-failed, .rc-modal.components-reconnect-rejected { display: grid; animation: sg-fade .25s both; }
.rc-card { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 28px 26px 24px; border-radius: 22px;
  background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-3); animation: sg-rise .35s var(--sg-ease) both; }
.rc-spin { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.rc-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--al-brand) 14%, transparent); border-top-color: var(--al-brand); border-right-color: var(--al-teal); animation: rc-rot .9s linear infinite; }
.rc-spin .al-logo-mark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.rc-spin .al-logo-mark svg { width: 22px; height: 22px; } .rc-spin .al-logo-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
@keyframes rc-rot { to { transform: rotate(360deg); } }
.rc-state { display: none; flex-direction: column; align-items: center; gap: 6px; }
.rc-state b { font-family: var(--al-display); font-size: 18px; font-weight: 650; letter-spacing: -.02em; color: var(--sg-ink); }
.rc-state span { font-size: 13.5px; line-height: 1.5; color: var(--sg-muted); }
.rc-state small { font-size: 12px; color: var(--sg-faint); font-variant-numeric: tabular-nums; }
.rc-state small span { font-size: inherit; color: inherit; }
.components-reconnect-show .rc-show, .components-reconnect-failed .rc-failed, .components-reconnect-rejected .rc-rejected { display: flex; }
.components-reconnect-failed .rc-ring { animation: none; border-color: color-mix(in srgb, var(--sg-bad) 35%, transparent); }
.rc-btn { margin-top: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--al-brand) 85%, #fff), var(--al-brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px var(--al-brand); }
.rc-btn:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .rc-ring { animation-duration: 2.5s; } }

/* ===================================================================================================== 
   40 · Profile hub (client, contractor, admin) + avatars + business profile header
   ===================================================================================================== */
.ua { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; overflow: hidden; }
.ua-init { color: #fff; font-family: var(--al-display); font-weight: 700; letter-spacing: -.02em; background: linear-gradient(145deg, var(--al-brand-lift, #2a8a9c), var(--al-brand)); }
.ua-xs { width: 28px; height: 28px; font-size: 11px; } .ua-sm { width: 34px; height: 34px; font-size: 13px; } .ua-md { width: 42px; height: 42px; font-size: 15px; }
.ua-lg { width: 64px; height: 64px; font-size: 22px; } .ua-xl { width: 104px; height: 104px; font-size: 36px; border-radius: 28px; }

.ph-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-2); margin-bottom: 16px; }
.ph-cover { height: 132px; position: relative; overflow: hidden; background-size: cover; background-position: center 40%;
  background-image: radial-gradient(600px 200px at 85% -20%, color-mix(in srgb, var(--al-teal) 55%, transparent), transparent 70%), linear-gradient(115deg, color-mix(in srgb, var(--al-brand) 92%, #04070C), color-mix(in srgb, var(--al-brand) 60%, var(--al-teal))); }
.ph-cover i { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.ph-cover i:nth-child(1) { width: 420px; height: 420px; right: -120px; top: -260px; } .ph-cover i:nth-child(2) { width: 260px; height: 260px; right: 160px; top: -190px; }
.ph-hero-in { display: flex; align-items: flex-end; gap: 20px; padding: 0 22px 18px; margin-top: -52px; position: relative; flex-wrap: wrap; }
.ph-photo { position: relative; flex: none; }
.ph-photo .ua { border: 4px solid var(--sg-surface); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.ph-photo-btn { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: var(--al-brand); border: 3px solid var(--sg-surface); box-shadow: var(--sg-shadow-2); transition: transform .15s; }
.ph-photo-btn:hover { transform: scale(1.08); } .ph-photo-btn .mud-icon-root { font-size: 17px; }
.ph-id { flex: 1; min-width: 240px; padding-top: 58px; }
.ph-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ph-role, .ph-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 99px; }
.ph-role .mud-icon-root, .ph-tag .mud-icon-root { font-size: 14px; }
.ph-role { color: var(--al-brand); background: color-mix(in srgb, var(--al-brand) 11%, transparent); }
.ph-role.admin { color: var(--cv4); background: color-mix(in srgb, var(--cv4) 12%, transparent); }
.ph-role.contractor { color: var(--cv2); background: color-mix(in srgb, var(--cv2) 12%, transparent); }
.ph-tag { color: var(--sg-muted); background: var(--sg-sunken); }
.ph-tag.ok { color: var(--sg-good); background: var(--sg-good-bg); } .ph-tag.warn { color: var(--sg-warn); background: var(--sg-warn-bg); }
.ph-id h1 { margin: 0; font-family: var(--al-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.ph-meta { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--sg-muted); }
.ph-meta span { display: inline-flex; align-items: center; gap: 5px; } .ph-meta .mud-icon-root { font-size: 16px; color: var(--sg-faint); }
.ph-linkbtn { border: 0; background: none; padding: 0; margin-top: 6px; font: inherit; font-size: 12px; color: var(--sg-muted); text-decoration: underline; cursor: pointer; }
.ph-strength { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sg-raised); border: 1px solid var(--sg-line); }
.ph-ring { width: 54px; height: 54px; } .ph-ring span { width: 44px; height: 44px; }
.ph-strength b { display: block; font-size: 13.5px; } .ph-strength small { display: block; font-size: 12px; color: var(--sg-muted); }
.ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--sg-line-soft); }
.ph-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 13px 20px; border-right: 1px solid var(--sg-line-soft); }
.ph-stats > div:last-child { border-right: 0; }
.ph-stats .mud-icon-root { grid-row: 1 / 3; font-size: 20px; color: var(--al-brand); }
.ph-stats b { font-family: var(--al-display); font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ph-stats span { font-size: 12px; color: var(--sg-muted); }

.ph-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ph-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 18px; background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.ph-nav button { display: flex; gap: 11px; align-items: center; text-align: left; padding: 9px 11px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--sg-ink); cursor: pointer; transition: background .15s; }
.ph-nav button:hover { background: var(--sg-sunken); }
.ph-nav button .mud-icon-root { font-size: 20px; color: var(--sg-faint); flex: none; }
.ph-nav button b { display: block; font-size: 13.5px; font-weight: 600; } .ph-nav button small { display: block; font-size: 11.5px; color: var(--sg-muted); }
.ph-nav button.on { background: color-mix(in srgb, var(--al-brand) 9%, var(--sg-surface)); box-shadow: inset 3px 0 0 var(--al-brand); }
.ph-nav button.on .mud-icon-root { color: var(--al-brand); }
.ph-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: sg-rise .35s var(--sg-ease) backwards; }
.ph-sec { padding: 20px 22px; }
.ph-sec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ph-sec-h b { display: block; font-family: var(--al-display); font-size: 17px; font-weight: 650; letter-spacing: -.015em; } .ph-sec-h span { display: block; font-size: 13px; color: var(--sg-muted); margin-top: 2px; max-width: 680px; }
.ph-sub { margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.ph-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sg-line-soft); }
.ph-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-opt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-surface); font: inherit; font-size: 13.5px; font-weight: 550; color: var(--sg-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ph-opt .mud-icon-root { font-size: 18px; color: var(--sg-faint); }
.ph-opt:hover { border-color: color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); }
.ph-opt.on { border-color: var(--al-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-brand) 14%, transparent); background: color-mix(in srgb, var(--al-brand) 5%, var(--sg-surface)); }
.ph-opt.on .mud-icon-root { color: var(--al-brand); }
.ph-matrix { width: 100%; border-collapse: collapse; }
.ph-matrix th { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); text-align: center; padding: 0 8px 8px; border-bottom: 1px solid var(--sg-line); }
.ph-matrix th:first-child { text-align: left; padding-left: 0; }
.ph-matrix td { padding: 6px 8px; border-bottom: 1px solid var(--sg-line-soft); text-align: center; }
.ph-matrix td:first-child { text-align: left; padding-left: 0; } .ph-matrix td b { display: block; font-size: 13.5px; font-weight: 600; } .ph-matrix td small { display: block; font-size: 12px; color: var(--sg-muted); }
.ph-matrix .mud-switch { margin: 0 auto; display: inline-flex; } .ph-always { color: var(--sg-good); font-size: 20px !important; }
.ph-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ph-theme { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--sg-line); background: var(--sg-surface); cursor: pointer; font: inherit; color: var(--sg-ink); text-align: left; transition: border-color .15s, box-shadow .15s; }
.ph-theme > span:last-child { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 0 4px 2px; } .ph-theme .mud-icon-root { font-size: 17px; color: var(--sg-faint); }
.ph-theme.on { border-color: var(--al-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-brand) 14%, transparent); } .ph-theme.on .mud-icon-root { color: var(--al-brand); }
.ph-theme-art { display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 12px 1fr; gap: 4px; height: 70px; padding: 6px; border-radius: 10px; background: #EEF1F5; }
.ph-theme-art i { border-radius: 4px; background: #fff; } .ph-theme-art i:first-child { grid-row: 1 / 3; background: color-mix(in srgb, var(--al-brand) 70%, #04070C); } .ph-theme-art i:nth-child(3) { background: #DDE3EA; }
.ph-theme.dark .ph-theme-art { background: #0A1018; } .ph-theme.dark .ph-theme-art i { background: #121A26; } .ph-theme.dark .ph-theme-art i:nth-child(3) { background: #1B2431; }
.ph-theme.system .ph-theme-art { background: linear-gradient(110deg, #EEF1F5 50%, #0A1018 50%); }
.ph-toggles { display: flex; gap: 24px; flex-wrap: wrap; }
.ph-list { display: flex; flex-direction: column; }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sg-line-soft); }
.ph-row:last-child { border-bottom: 0; } .ph-row b { display: block; font-size: 13.5px; font-weight: 600; } .ph-row small { display: block; font-size: 12.5px; color: var(--sg-muted); margin-top: 2px; max-width: 560px; }
.ph-locks { display: grid; gap: 8px; } .ph-locks > div { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 9px 12px; border-radius: 10px; background: var(--sg-sunken); }
.ph-locks .mud-icon-root { font-size: 17px; color: var(--sg-good); }
.ph-seccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ph-scard { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.ph-scard .mud-icon-root { font-size: 22px; margin-bottom: 4px; } .ph-scard b { font-size: 14px; } .ph-scard small { font-size: 12px; color: var(--sg-muted); }
.ph-scard.ok .mud-icon-root { color: var(--sg-good); } .ph-scard.warn .mud-icon-root { color: var(--sg-warn); }
.ph-signin { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sg-line-soft); }
.ph-signin b { display: block; font-size: 13.5px; } .ph-signin small { display: block; font-size: 12px; color: var(--sg-muted); }
.ph-signin-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sg-sunken); color: var(--sg-muted); flex: none; }
.ph-signin-ic .mud-icon-root { font-size: 18px; }
.ph-tl-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--sg-line-soft); }
.ph-tl-row b { display: block; font-size: 13.5px; font-weight: 600; } .ph-tl-row small { display: block; font-size: 12px; color: var(--sg-muted); overflow-wrap: anywhere; }
.ph-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--al-teal); margin-top: 5px; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 20%, transparent); }
.ph-danger { border-color: color-mix(in srgb, var(--sg-bad) 30%, var(--sg-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--sg-bad) 4%, var(--sg-surface)), var(--sg-surface)); }
.bp-acts { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; flex-wrap: wrap; }
.bp-cover { height: 150px; }
.bp-hero .ph-hero-in { margin-top: -48px; }
.bp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-faint); } .bp-live.on { background: var(--sg-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-good) 25%, transparent); }
.bp-link { display: flex !important; align-items: center; gap: 12px; text-decoration: none; color: var(--sg-ink); transition: border-color .15s, transform .15s; }
.bp-link:hover { border-color: color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); transform: translateY(-1px); }
.bp-link b { display: block; font-size: 14px; } .bp-link small { display: block; font-size: 12px; color: var(--sg-muted); }
@media (max-width: 1000px) {
  .ph-layout { grid-template-columns: 1fr; }
  .ph-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ph-nav button { flex: none; } .ph-nav button small { display: none; }
  .ph-seccards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ph-hero-in { flex-direction: column; align-items: flex-start; } .ph-id { padding-top: 0; }
  .ph-themes { grid-template-columns: 1fr; } .ph-stats > div { border-right: 0; border-bottom: 1px solid var(--sg-line-soft); }
}
/* Personal preferences applied by the portal shell */
.pf-calm *, .pf-calm *::before, .pf-calm *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
.pf-compact .mud-table-cell { padding-top: 6px !important; padding-bottom: 6px !important; }
.pf-compact .ds-table td { padding-top: 6px; padding-bottom: 6px; }

/* ===================================================================================================== 
   41 · Books — ledger, payouts, refunds, commission per contract
   ===================================================================================================== */
.lx-bank { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; flex-wrap: wrap;
  background: linear-gradient(110deg, color-mix(in srgb, var(--al-brand) 92%, #04070C), color-mix(in srgb, var(--al-brand) 62%, var(--al-teal))); color: #fff; box-shadow: var(--sg-shadow-2); }
.lx-bank-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.lx-bank-ic .mud-icon-root { font-size: 24px; }
.lx-bank small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.lx-bank b { display: block; font-size: 16px; font-weight: 650; } .lx-bank .al-grow > span { font-size: 12.5px; opacity: .82; }
.lx-bank-bal { text-align: right; } .lx-bank-bal b { font-family: var(--al-display); font-size: 26px; letter-spacing: -.03em; }
.lx-bank-bal span { display: inline-block; margin-top: 2px; font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.16); }
.lx-bank-bal span.bad { background: rgba(240,116,128,.35); }
.lx-bank .mud-button-root { color: #fff !important; }
.lx-sub-row td { background: var(--sg-raised); font-size: 12.5px; padding-top: 7px !important; padding-bottom: 7px !important; }
.lx-sub-row td:first-child { padding-left: 52px !important; }

.lx-status { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; margin-bottom: 14px; border: 1px solid var(--sg-line); }
.lx-status.ok { background: var(--sg-good-bg); border-color: color-mix(in srgb, var(--sg-good) 30%, transparent); }
.lx-status.bad { background: var(--sg-bad-bg); border-color: color-mix(in srgb, var(--sg-bad) 30%, transparent); }
.lx-status-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.lx-status.ok .lx-status-ic { background: var(--sg-good); } .lx-status.bad .lx-status-ic { background: var(--sg-bad); }
.lx-status b { display: block; font-size: 15px; } .lx-status .al-grow > span { font-size: 12.5px; color: var(--sg-muted); }

.lx-pos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lx-pos td { padding: 9px 0; border-bottom: 1px solid var(--sg-line-soft); font-size: 13.5px; }
.lx-pos td i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.lx-pos .r { text-align: right; } .lx-pos tr.h td { font-weight: 700; font-size: 15px; border-bottom: 1.5px solid var(--sg-ink); }
.lx-pos tr.sub td { font-weight: 600; color: var(--sg-muted); } .lx-pos tr.tot td { font-weight: 700; color: var(--sg-good); border-bottom: 0; font-size: 15px; }
.lx-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 14px; gap: 2px; background: var(--sg-sunken); } .lx-bar i { min-width: 0; }
.lx-flow { display: flex; flex-direction: column; gap: 10px; }
.lx-flow > div { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); font-size: 13px; }
.lx-flow b { font-variant-numeric: tabular-nums; }

.lx-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; color: var(--sg-muted); background: var(--sg-sunken); }
.lx-kind.payment { color: var(--sg-good); background: var(--sg-good-bg); } .lx-kind.release { color: var(--cv4); background: color-mix(in srgb, var(--cv4) 12%, transparent); }
.lx-kind.payout { color: var(--cv2); background: color-mix(in srgb, var(--cv2) 12%, transparent); } .lx-kind.refund { color: var(--sg-bad); background: var(--sg-bad-bg); }
.lx-je-row { padding: 12px 16px; border-bottom: 1px solid var(--sg-line-soft); }
.lx-je-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lx-desc { font-size: 13px; min-width: 200px; }
.lx-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; background: var(--sg-raised); border-radius: 10px; overflow: hidden; }
.lx-lines td { padding: 6px 12px; border-bottom: 1px solid var(--sg-line-soft); } .lx-lines td.r { text-align: right; width: 140px; white-space: nowrap; }
.lx-lines td.cr { padding-left: 36px; } .lx-lines td small { margin-left: 8px; color: var(--sg-faint); }
.lx-lines tr.t td { font-weight: 650; color: var(--sg-good); border-bottom: 0; }
.lx-type { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 6px; background: var(--sg-sunken); }
.lx-type.asset { color: var(--cv1); } .lx-type.liability { color: var(--cv2); } .lx-type.income { color: var(--sg-good); } .lx-type.equity { color: var(--cv4); }
.lx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.lx-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-bevel), var(--sg-shadow-1); }
.lx-check b { display: block; font-size: 14px; } .lx-check span { display: block; font-size: 12.5px; color: var(--sg-muted); margin-top: 2px; }
.lx-check-ic .mud-icon-root { font-size: 22px; } .lx-check.ok .lx-check-ic { color: var(--sg-good); } .lx-check.bad { border-color: color-mix(in srgb, var(--sg-bad) 35%, var(--sg-line)); } .lx-check.bad .lx-check-ic { color: var(--sg-bad); }

.lx-dlg { border-radius: 20px !important; }
.lx-dlg-h { display: flex; align-items: center; gap: 12px; } .lx-dlg-h b { display: block; font-size: 16px; } .lx-dlg-h small { display: block; font-size: 12px; color: var(--sg-muted); }
.lx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-facts > div { padding: 10px 12px; border-radius: 12px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); min-width: 0; }
.lx-facts small { display: block; font-size: 11px; color: var(--sg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lx-facts b { font-size: 15px; font-variant-numeric: tabular-nums; }
.lx-facts > div.bad { background: var(--sg-bad-bg); border-color: color-mix(in srgb, var(--sg-bad) 30%, transparent); } .lx-facts > div.bad b { color: var(--sg-bad); }
.lx-sub { margin: 4px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.lx-sub ~ .lx-sub { margin-top: 16px; }
.lx-pick { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.lx-pick label { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 4px; border-radius: 12px; border: 1px solid var(--sg-line); cursor: pointer; }
.lx-pick label.on { border-color: color-mix(in srgb, var(--al-brand) 45%, var(--sg-line)); background: color-mix(in srgb, var(--al-brand) 4%, var(--sg-surface)); }
.lx-pick b { display: block; font-size: 13px; } .lx-pick small { display: block; font-size: 11.5px; color: var(--sg-muted); }
.lx-je { margin-top: 14px; border: 1px dashed color-mix(in srgb, var(--al-brand) 35%, var(--sg-line)); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--al-brand) 3%, var(--sg-surface)); }
.lx-je-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--al-brand); margin-bottom: 6px; }
.lx-je-h .mud-icon-root { font-size: 15px; }
.lx-je table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lx-je th { text-align: left; font-size: 10.5px; color: var(--sg-faint); font-weight: 700; padding: 4px 0; } .lx-je th.r, .lx-je td.r { text-align: right; }
.lx-je td { padding: 4px 0; border-top: 1px solid var(--sg-line-soft); } .lx-je tfoot td { font-weight: 700; border-top: 1.5px solid var(--sg-ink); }

.lx-mini { height: 5px; border-radius: 99px; background: var(--sg-sunken); overflow: hidden; margin-top: 4px; min-width: 80px; }
.lx-mini i { display: block; height: 100%; background: var(--sg-good); border-radius: 99px; } .lx-mini.big { height: 8px; margin: 6px 0; }
.lx-earn { border-color: color-mix(in srgb, var(--sg-good) 30%, var(--sg-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--sg-good) 5%, var(--sg-surface)), var(--sg-surface) 60%); }
.lx-earn-big small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted); }
.lx-earn-big b { display: block; font-family: var(--al-display); font-size: 28px; letter-spacing: -.03em; color: var(--sg-good); }
.lx-earn-big span { font-size: 12px; color: var(--sg-muted); }
.lx-earn-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.lx-earn-dl > div { padding: 8px 10px; border-radius: 10px; background: var(--sg-raised); border: 1px solid var(--sg-line-soft); }
.lx-earn-dl dt { font-size: 11px; color: var(--sg-muted); } .lx-earn-dl dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.lx-earn-prog { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--sg-line); }
@media (max-width: 640px) { .lx-facts { grid-template-columns: 1fr; } .lx-bank-bal { text-align: left; } }

/* 42 · Side-menu badges: soft (informational) vs red (needs action), pop when a count goes up */
.nv-badge.pop { animation: nv-pop .6s var(--sg-ease) 2; }
@keyframes nv-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(240,100,111,.25); } 100% { transform: scale(1); } }
.sg-side .nv-badge.soft { background: color-mix(in srgb, var(--al-teal) 22%, transparent); color: #9FF0E6; box-shadow: none; }
.sg-portal-client .nv-badge:not(.soft), .sg-portal-contractor .nv-badge:not(.soft) { background: linear-gradient(180deg, #F0646F, #D23F4E); color: #fff; }
.nv-group-title .nv-dot { background: #F0646F; box-shadow: 0 0 8px rgba(240,100,111,.7); }
@media (prefers-reduced-motion: reduce) { .nv-badge.pop { animation: none; } }

/* 43 · Simple home: centred menu, calm hero, one photo, clean sections */
.hs-wrap { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.hs-narrow { max-width: 820px; }
.hs-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hs-muted { color: var(--mud-palette-text-secondary); font-size: 12.5px; }

/* top bar: logo | centred menu | actions */
.hs-topnav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 10px; }
.hs-topnav-l { display: flex; align-items: center; min-width: 0; }
.hs-topnav-r { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.hs-menu { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.hs-menu a { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--mud-palette-text-secondary); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.hs-menu a:hover { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-shadow: 0 1px 3px rgba(11,31,51,.08); }
.hs-burger { display: none; }
@media (max-width: 1020px) {
  .hs-topnav-in { grid-template-columns: 1fr auto; }
  .hs-menu { display: none; }
  .hs-burger { display: block; }
}

/* hero */
.hs-hero { position: relative; padding: clamp(48px, 7vw, 88px) 0 24px; overflow: hidden;
  background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--al-teal) 14%, transparent), transparent 70%),
              radial-gradient(700px 360px at 85% 10%, color-mix(in srgb, var(--al-blue) 9%, transparent), transparent 70%); }
.hs-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--al-brand, #0F5C6E); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 1px 2px rgba(11,31,51,.05); }
.hs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--al-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 25%, transparent); }
.hs-h1 { margin: 20px 0 0; font-family: var(--al-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(34px, 5.4vw, 62px); color: var(--mud-palette-text-primary); max-width: 900px; }
.hs-rotate > span > span { background: linear-gradient(90deg, var(--al-teal), var(--al-blue), var(--al-teal)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-lead { margin: 18px auto 0; max-width: 640px; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.6; color: var(--mud-palette-text-secondary); }
.hs-search { margin-top: 28px; width: 100%; max-width: 760px; display: flex; align-items: center; gap: 6px; padding: 6px; text-align: left; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 18px 50px -20px rgba(11,31,51,.25); }
.hs-field { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; }
.hs-field + .hs-field { border-left: 1px solid var(--mud-palette-lines-default); }
.hs-field > .mud-icon-root { color: var(--al-teal); flex: none; }
.hs-field .mud-input-control { margin: 0; }
.hs-field .mud-input.mud-input-underline:before, .hs-field .mud-input.mud-input-underline:after { display: none; }
.hs-search .hs-search-btn { height: 48px; border-radius: 12px; padding-inline: 22px; flex: none; }
.hs-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hs-btn { height: 44px; border-radius: 12px !important; padding-inline: 20px !important; font-weight: 600 !important; text-transform: none !important; }
.hs-ticks { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hs-ticks span { display: inline-flex; align-items: center; gap: 6px; }
.hs-ticks .mud-icon-root { font-size: 16px; color: var(--al-teal); }

.hs-showcase { position: relative; margin-top: clamp(36px, 5vw, 56px); border-radius: 22px; overflow: hidden; aspect-ratio: 21 / 8; border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 30px 70px -35px rgba(11,31,51,.45); }
.hs-showcase-img { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.hs-showcase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,25,43,.35)); }
.hs-float { position: absolute; z-index: 1; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); }
.hs-float b { display: block; font-size: 13.5px; } .hs-float small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.hs-float-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--al-teal); color: #fff; flex: none; }
.hs-float-ic .mud-icon-root { font-size: 18px; }
.hs-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); }
.hs-stats > div { padding: 18px 12px; text-align: center; }
.hs-stats > div + div { border-left: 1px solid var(--mud-palette-lines-default); }
.hs-stats b { display: block; font-family: var(--al-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--mud-palette-text-primary); }
.hs-stats span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* sections */
.hs-sec { padding: clamp(56px, 7vw, 88px) 0; }
.hs-sec-tight { padding: 24px 0 clamp(40px, 5vw, 64px); }
.hs-tint { background: color-mix(in srgb, var(--al-teal) 4%, var(--mud-palette-background)); border-block: 1px solid var(--mud-palette-lines-default); }
.hs-head { text-align: center; max-width: 680px; margin: 0 auto clamp(28px, 4vw, 44px); }
.hs-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--al-teal); }
.hs-eyebrow.light { color: #7EF0E2; }
.hs-head h2, .hs-band h2, .hs-cta h2 { margin: 10px 0 0; font-family: var(--al-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; font-size: clamp(26px, 3.2vw, 38px); }
.hs-head p { margin: 12px 0 0; color: var(--mud-palette-text-secondary); font-size: 15.5px; line-height: 1.6; }
.hs-more { display: flex; justify-content: center; margin-top: 24px; }

.hs-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--al-teal); background: color-mix(in srgb, var(--al-teal) 12%, transparent); }
.hs-ic.sm { width: 38px; height: 38px; border-radius: 10px; } .hs-ic.sm .mud-icon-root { font-size: 20px; }
.hs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hs-card { padding: 26px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: transform .2s, box-shadow .2s; margin: 0; }
.hs-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(11,31,51,.35); }
.hs-card h3 { margin: 16px 0 6px; font-size: 17px; font-weight: 700; }
.hs-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mud-palette-text-secondary); }

.hs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.hs-steps li { position: relative; padding: 22px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hs-steps b { display: block; margin-top: 14px; font-size: 15.5px; }
.hs-steps p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.hs-step-n { position: absolute; top: 18px; right: 20px; font-family: var(--al-display); font-size: 30px; font-weight: 800; color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); }

.hs-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hs-svc { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: border-color .15s, box-shadow .15s; }
.hs-svc:hover { border-color: color-mix(in srgb, var(--al-teal) 55%, transparent); box-shadow: 0 10px 28px -20px rgba(11,31,51,.4); }
.hs-svc > div { flex: 1; min-width: 0; }
.hs-svc b { font-size: 14.5px; }
.hs-svc p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mud-palette-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-svc-go { font-size: 18px !important; color: var(--mud-palette-text-disabled); transition: transform .15s, color .15s; margin-top: 2px; }
.hs-svc:hover .hs-svc-go { transform: translateX(3px); color: var(--al-teal); }

.hs-con { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; text-decoration: none; color: inherit; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: transform .2s, box-shadow .2s; }
.hs-con:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(11,31,51,.35); }
.hs-con-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hs-con > b { font-size: 15px; }
.hs-con-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.hs-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #0E7A5F; background: rgba(16,185,129,.12); }
.hs-badge .mud-icon-root { font-size: 14px; }
.hs-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hs-tags span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); color: var(--mud-palette-text-secondary); }

.hs-quote blockquote { margin: 12px 0 18px; font-size: 14.5px; line-height: 1.65; }
.hs-quote figcaption { display: flex; align-items: center; gap: 10px; }
.hs-quote figcaption b { display: block; font-size: 13.5px; } .hs-quote figcaption span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.hs-q-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-brand, #0F5C6E)); }

.hs-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; color: #fff; background: radial-gradient(600px 260px at 90% 0%, rgba(8,184,176,.35), transparent 70%), linear-gradient(135deg, var(--al-navy), #12324F); }
.hs-band p { margin: 10px 0 0; color: #A9C3D8; max-width: 560px; line-height: 1.6; }
.hs-band-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: none; }
.hs-band-cta small { color: #A9C3D8; font-size: 12px; }

.hs-faq { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; padding: 6px 22px; }
.hs-faq details:last-child { border-bottom: 0; }
.hs-faq summary { padding: 6px 0; }

.hs-cta { text-align: center; padding: clamp(36px, 5vw, 56px) 20px; border-radius: 24px; border: 1px solid var(--mud-palette-lines-default);
  background: radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--al-teal) 14%, transparent), transparent 70%), var(--mud-palette-surface); }
.hs-cta p { margin: 12px auto 0; max-width: 560px; color: var(--mud-palette-text-secondary); line-height: 1.6; }

@media (max-width: 960px) {
  .hs-grid3 { grid-template-columns: 1fr; }
  .hs-grid4, .hs-steps { grid-template-columns: repeat(2, 1fr); }
  .hs-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .hs-search { flex-direction: column; align-items: stretch; }
  .hs-field + .hs-field { border-left: 0; border-top: 1px solid var(--mud-palette-lines-default); }
  .hs-field { padding: 4px 10px; }
  .hs-search .hs-search-btn { width: 100%; }
  .hs-showcase { aspect-ratio: 4 / 3; }
  .hs-stats { grid-template-columns: repeat(2, 1fr); }
  .hs-stats > div:nth-child(3) { border-left: 0; }
  .hs-stats > div:nth-child(n+3) { border-top: 1px solid var(--mud-palette-lines-default); }
  .hs-grid4, .hs-steps { grid-template-columns: 1fr; }
  .hs-services { grid-template-columns: 1fr; }
}

/* 44 · Payments made obvious: client pay spotlight, approvals, contractor money pipeline */
.py-spot { position: relative; border-radius: 20px; padding: 18px; background: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box, linear-gradient(135deg, var(--al-teal), var(--al-blue)) border-box; border: 2px solid transparent; box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--al-teal) 70%, transparent); }
.py-spot-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 2px 4px 14px; }
.py-spot-h b { display: block; font-size: 17px; font-family: var(--al-display); letter-spacing: -.01em; }
.py-spot-h span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.py-spot-total { text-align: right; } .py-spot-total span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.py-spot-total b { font-size: 24px; font-weight: 800; color: var(--mud-palette-text-primary); }
.py-live { width: 12px; height: 12px; border-radius: 50%; background: #F59E0B; flex: none; animation: py-pulse 1.8s infinite; }
@keyframes py-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.6); } 70% { box-shadow: 0 0 0 10px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
.py-due { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--al-teal) 6%, var(--mud-palette-background)); border: 1px solid var(--mud-palette-lines-default); }
.py-due + .py-due { margin-top: 10px; }
.py-due-m { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-blue)); }
.py-due-m.sm { width: 36px; height: 36px; border-radius: 10px; font-size: 12.5px; }
.py-due-main { flex: 1; min-width: 0; }
.py-due-main > b { display: block; font-size: 16px; }
.py-due-main > span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.py-due-main a { color: inherit; font-weight: 600; text-decoration: none; } .py-due-main a:hover { text-decoration: underline; }
.py-break { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.py-break b { color: var(--mud-palette-text-primary); font-weight: 600; }
.py-due-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.py-amt { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.py-btn { min-width: 170px; height: 46px; border-radius: 12px !important; font-weight: 700 !important; font-size: 15px !important; text-transform: none !important; box-shadow: 0 10px 24px -10px var(--mud-palette-primary) !important; }
.py-due-pay small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.py-due-pay small .mud-icon-root { font-size: 14px; color: var(--al-teal); }
.py-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 4px 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.py-trust > span { display: inline-flex; align-items: center; gap: 6px; } .py-trust .mud-icon-root { font-size: 16px; color: var(--al-teal); }
.py-methods i { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }

.py-clear { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.28); }
.py-clear b { display: block; } .py-clear span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.py-clear-ic { color: #10B981; display: grid; } .py-clear-ic .mud-icon-root { font-size: 30px; }

.py-approve { border-radius: 16px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); overflow: hidden; }
.py-approve-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: color-mix(in srgb, #8B5CF6 8%, transparent); border-bottom: 1px solid var(--mud-palette-lines-default); }
.py-approve-h .mud-icon-root { color: #8B5CF6; } .py-approve-h span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.py-approve-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background .15s; }
.py-approve-row + .py-approve-row { border-top: 1px solid var(--mud-palette-lines-default); }
.py-approve-row:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent); }
.py-approve-row b { display: block; font-size: 14px; } .py-approve-row span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.py-approve-go { display: inline-flex !important; align-items: center; gap: 2px; font-weight: 600; color: var(--mud-palette-primary) !important; white-space: nowrap; }

.py-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 18px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); overflow: hidden; }
.py-stage { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; }
.py-stage + .py-stage { border-left: 1px solid var(--mud-palette-lines-default); }
.py-stage + .py-stage::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); border-right: 1px solid var(--mud-palette-lines-default); }
.py-stage span:not(.py-stage-ic) { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); }
.py-stage b { display: block; font-size: 20px; font-weight: 800; margin-top: 2px; }
.py-stage small { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.py-stage-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.py-stage.s1 { --c: #F59E0B; } .py-stage.s2 { --c: #8B5CF6; } .py-stage.s3 { --c: var(--al-blue); } .py-stage.s4 { --c: #10B981; }
.py-stage.s4 b { color: #10B981; }

@media (max-width: 900px) {
  .py-pipe { grid-template-columns: repeat(2, 1fr); }
  .py-stage:nth-child(3) { border-left: 0; } .py-stage:nth-child(3)::before { display: none; }
  .py-stage:nth-child(n+3) { border-top: 1px solid var(--mud-palette-lines-default); }
}
@media (max-width: 640px) {
  .py-due { flex-wrap: wrap; } .py-due-pay { width: 100%; align-items: stretch; } .py-btn { width: 100%; }
  .py-pipe { grid-template-columns: 1fr; } .py-stage { border-left: 0 !important; } .py-stage::before { display: none; }
  .py-stage + .py-stage { border-top: 1px solid var(--mud-palette-lines-default); }
}
@media (prefers-reduced-motion: reduce) { .py-live { animation: none; } }

/* 45 · Client payments, decluttered: single-line due rows, tabs, footnote */
.py-spot-h { padding-bottom: 12px; }
.py-due { flex-wrap: nowrap; }
.py-due-amt { text-align: right; flex: none; }
.py-due-amt b { display: block; font-size: 20px; font-weight: 800; }
.py-due-amt small { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.py-due .py-btn { min-width: 140px; flex: none; }
.py-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--mud-palette-lines-default); }
.py-tabs .mud-tab { text-transform: none; font-weight: 600; }
.py-foot { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.py-foot .mud-icon-root { font-size: 16px; flex: none; margin-top: 1px; }
@media (max-width: 640px) {
  .py-due { flex-wrap: wrap; }
  .py-due-amt { text-align: left; flex: 1; }
  .py-due .py-btn { width: 100%; }
}

/* 46 · Original home, aligned: header shares the page grid, headline fits its column, solid search button */
h1[tabindex="-1"]:focus, h1:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.hm-hero h1 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.07; letter-spacing: -.03em; text-wrap: balance; }
.hm-hero h1 .hm-rotate { margin-left: .24em; }
.hm-lead { max-width: 600px; }
.hm-search .hm-search-btn { background: linear-gradient(135deg, var(--al-teal), var(--al-blue)) !important; color: #fff !important; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: 0 10px 24px -12px var(--al-teal); }
.hm-search .hm-search-btn:hover { filter: brightness(1.06); }
.hs-topnav .al-logo { font-size: 18px; }
@media (max-width: 900px) { .hm-hero h1 { text-wrap: pretty; } }

/* 47 · Public site, simple & structured: info strip, white header, photo hero, overlapping stats, clean sections */
.hx-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.hx-narrow { max-width: 860px; }
.hx-center { display: flex; justify-content: center; margin-top: 28px; }
.hx-muted { color: var(--mud-palette-text-secondary); font-size: 13px; }

/* strip + header */
.hx-strip { background: var(--al-navy); color: #DCE7F2; font-size: 13px; }
.hx-strip-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.hx-strip-l, .hx-strip-r { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hx-strip a, .hx-strip span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.hx-strip a:hover { color: #fff; }
.hx-strip .mud-icon-root { font-size: 15px; color: #5EEAD4; }
.hx-header { position: sticky; top: 0; z-index: 30; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); box-shadow: 0 2px 14px -10px rgba(11,31,51,.35); }
.hx-header-in { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.hx-logo { font-size: 19px; margin-right: auto; }
.hx-nav { display: flex; align-items: stretch; gap: 4px; align-self: stretch; }
.hx-nav a { display: flex; align-items: center; padding: 0 12px; font-size: 14.5px; font-weight: 600; color: var(--mud-palette-text-primary); text-decoration: none; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.hx-nav a:hover { color: var(--al-teal); }
.hx-nav a.active { color: var(--al-teal); border-bottom-color: var(--al-teal); }
.hx-call { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding-left: 8px; }
.hx-call-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--al-navy); color: #fff; }
.hx-call-ic .mud-icon-root { font-size: 19px; }
.hx-call small { display: block; font-size: 11px; color: var(--mud-palette-text-secondary); line-height: 1.1; }
.hx-call b { font-size: 16px; letter-spacing: .01em; }
.hx-header-user .al-hide-s { display: none; }
.hx-burger { display: none; }

/* buttons */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s, filter .15s; }
.hx-btn .mud-icon-root { font-size: 19px; }
.hx-btn:hover { transform: translateY(-1px); }
.hx-btn.hx-btn-lg { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.hx-btn-go { background: linear-gradient(135deg, #10C7A8, var(--al-teal)); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(8,184,176,.9); }
.hx-btn-go:hover { filter: brightness(1.05); }
.hx-btn-ghost { color: #fff !important; border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
.hx-btn-ghost:hover { background: rgba(255,255,255,.12); }
.hx-btn-dark { background: var(--al-navy); color: #fff !important; }
.hx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--al-teal); text-decoration: none; }
.hx-link .mud-icon-root { font-size: 18px; transition: transform .15s; } .hx-link:hover .mud-icon-root { transform: translateX(3px); }

/* hero */
.hx-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hx-hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9,26,44,.95) 0%, rgba(11,31,51,.82) 42%, rgba(18,50,79,.45) 100%); }
.hx-hero-in { padding: clamp(56px, 8vw, 104px) 20px clamp(96px, 10vw, 130px); }
.hx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); }
.hx-pill b { color: #5EEAD4; font-weight: 700; } .hx-pill .mud-icon-root { font-size: 16px; color: #5EEAD4; }
.hx-hero h1 { margin: 22px 0 0; max-width: 640px; font-family: var(--al-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -.03em; color: #fff; }
.hx-hero h1 span { color: #5EEAD4; }
.hx-lead { margin: 20px 0 0; max-width: 560px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #D3E1EE; }
.hx-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hx-ticks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px; font-size: 14.5px; color: #E6EEF6; }
.hx-ticks span { display: inline-flex; align-items: center; gap: 6px; } .hx-ticks .mud-icon-root { font-size: 18px; color: #5EEAD4; }

/* stats card overlapping the hero */
.hx-stats { position: relative; z-index: 2; margin-top: -64px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--mud-palette-surface); border-radius: 18px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 24px 60px -30px rgba(11,31,51,.45); }
.hx-stats::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--al-teal), var(--al-blue)); }
.hx-stats > div { padding: 30px 16px 26px; text-align: center; }
.hx-stats > div + div { border-left: 1px solid var(--mud-palette-lines-default); }
.hx-stats b { display: block; font-family: var(--al-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; color: var(--al-navy); letter-spacing: -.02em; line-height: 1.1; }
.al-dark .hx-stats b { color: #E6EEF6; }
.hx-stats span { font-size: 14px; color: var(--mud-palette-text-secondary); }

/* sections */
.hx-sec { padding: clamp(60px, 7vw, 92px) 0; }
.hx-sec-end { padding-top: 0; }
.hx-tint { background: color-mix(in srgb, var(--al-teal) 5%, var(--mud-palette-background)); }
.hx-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--al-teal); }
.hx-eyebrow.hx-eyebrow-light { color: #5EEAD4; }
.hx-sec h2, .hx-band h2 { margin: 10px 0 0; font-family: var(--al-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.025em; color: var(--mud-palette-text-primary); }
.hx-head { text-align: center; max-width: 700px; margin: 0 auto clamp(30px, 4vw, 44px); }
.hx-head p, .hx-p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--mud-palette-text-secondary); }

.hx-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hx-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 24px 0 28px; }
.hx-checks span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.hx-checks .mud-icon-root { color: var(--al-teal); font-size: 20px; }
.hx-photo { position: relative; min-height: 380px; border-radius: 20px; background-size: cover; background-position: center; box-shadow: 0 30px 60px -34px rgba(11,31,51,.55); }
.hx-photo-badge { position: absolute; left: 20px; bottom: 20px; padding: 14px 18px; border-radius: 14px; background: var(--al-navy); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.hx-photo-badge b { display: block; font-size: 30px; font-weight: 800; color: #5EEAD4; line-height: 1; }
.hx-photo-badge span { font-size: 12.5px; color: #C9D8E6; }

.hx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.hx-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.hx-card::before { content: ""; position: absolute; top: 0; left: 24px; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--al-teal), var(--al-blue)); }
.hx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(11,31,51,.45); }
.hx-card b { font-size: 16.5px; color: var(--mud-palette-text-primary); }
.hx-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mud-palette-text-secondary); flex: 1; }
.hx-card-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--al-teal); background: color-mix(in srgb, var(--al-teal) 12%, transparent); margin-bottom: 4px; }
.hx-card-ic.hx-ic-sm { width: 40px; height: 40px; margin: 0; } .hx-card-ic.hx-ic-lg { width: 54px; height: 54px; margin: 0; }
.hx-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--al-teal); }
.hx-more .mud-icon-root { font-size: 16px; transition: transform .15s; } .hx-card:hover .hx-more .mud-icon-root { transform: translateX(3px); }

.hx-band { color: #fff; background: radial-gradient(700px 300px at 85% 0%, rgba(8,184,176,.28), transparent 70%), linear-gradient(120deg, var(--al-navy), #12324F); }
.hx-band-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(44px, 6vw, 64px); }
.hx-band h2 { color: #fff; }
.hx-band p { margin: 10px 0 0; color: #C9D8E6; font-size: 16px; }
.hx-band-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.hx-steps::before { content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--al-teal) 60%, transparent) 0 8px, transparent 8px 16px); }
.hx-steps li { position: relative; text-align: center; }
.hx-step-n { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-blue)); box-shadow: 0 0 0 6px var(--mud-palette-background); }
.hx-steps b { font-size: 16.5px; }
.hx-steps p { margin: 6px auto 0; max-width: 240px; font-size: 14px; line-height: 1.6; color: var(--mud-palette-text-secondary); }

.hx-cons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hx-con { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: transform .2s, box-shadow .2s; }
.hx-con:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(11,31,51,.45); }
.hx-con-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hx-con > b { font-size: 15.5px; }
.hx-con-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-top: 2px; }
.hx-verified { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #0E7A5F; background: rgba(16,185,129,.12); }
.hx-verified .mud-icon-root { font-size: 14px; }

.hx-serve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hx-serve-item { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-serve-item b { display: block; font-size: 15px; } .hx-serve-item span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.hx-areas { margin-top: 28px; padding: 22px; border-radius: 16px; background: color-mix(in srgb, var(--al-teal) 5%, var(--mud-palette-surface)); border: 1px solid var(--mud-palette-lines-default); }
.hx-areas-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chips a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: border-color .15s, color .15s; }
.hx-chips a:hover { border-color: var(--al-teal); color: var(--al-teal); }

.hx-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx-quote { margin: 0; padding: 24px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-quote blockquote { margin: 12px 0 16px; font-size: 15px; line-height: 1.65; }
.hx-quote figcaption b { display: block; font-size: 14px; } .hx-quote figcaption span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

.hx-faq { display: flex; flex-direction: column; gap: 10px; }
.hx-faq details { border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); padding: 0 20px; transition: box-shadow .15s; }
.hx-faq details[open] { box-shadow: 0 14px 30px -22px rgba(11,31,51,.45); border-color: color-mix(in srgb, var(--al-teal) 45%, transparent); }
.hx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-weight: 700; font-size: 15.5px; }
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary .mud-icon-root { flex: none; color: var(--al-teal); transition: transform .2s; }
.hx-faq details[open] summary .mud-icon-root { transform: rotate(180deg); }
.hx-faq details p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--mud-palette-text-secondary); }

.hx-pro { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px 28px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-pro b { display: block; font-size: 17px; } .hx-pro span:not(.hx-card-ic) { font-size: 14px; color: var(--mud-palette-text-secondary); }

/* responsive */
@media (max-width: 1180px) { .hx-call { display: none; } }
@media (max-width: 1000px) {
  .hx-nav, .hx-header-cta { display: none; }
  .hx-burger { display: block; }
  .hx-split { grid-template-columns: 1fr; }
  .hx-cons { grid-template-columns: repeat(2, 1fr); }
  .hx-steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .hx-steps::before { display: none; }
  .hx-serve, .hx-quotes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hx-hide-m, .hx-strip-r { display: none; }
  .hx-header-in { min-height: 64px; }
  .hx-stats { grid-template-columns: repeat(2, 1fr); margin-top: -48px; }
  .hx-stats > div:nth-child(3) { border-left: 0; }
  .hx-stats > div:nth-child(n+3) { border-top: 1px solid var(--mud-palette-lines-default); }
  .hx-hero-btns .hx-btn { width: 100%; }
  .hx-checks, .hx-cons, .hx-serve, .hx-quotes, .hx-steps { grid-template-columns: 1fr; }
  .hx-photo { min-height: 260px; }
}

/* 48 · Public header & hero precision: no wrapping, balanced widths, compact buttons */
.hx-container { max-width: 1240px; }
.hx-logo { white-space: nowrap; flex: none; }
.hx-nav a { padding: 0 11px; font-size: 14px; white-space: nowrap; }
.hx-header-in { gap: 14px; }
.hx-header-in > * { flex: none; }
.hx-header-user .mud-button-root { white-space: nowrap; }
.hx-header-cta { height: 40px; padding: 0 16px; font-size: 13.5px; }
.hx-hero-bg { background-position: 70% 35%; }
.hx-hero-btns .hx-btn { flex: none; }
.hx-hero h1 { max-width: 660px; }
.hx-strip { background: #0A1A2B; }
.hx-nav a, .al-dark .hx-nav a { color: var(--mud-palette-text-primary); }
.hx-nav a:hover, .hx-nav a.active { color: var(--al-teal); }
.hx-card, .hx-con, .hx-chips a { color: var(--mud-palette-text-primary); }
@media (max-width: 1380px) { .hx-call { display: none; } }
.hx-hero h1 { max-width: 840px; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.1; }
.hx-hero h1 span { display: block; }
.hx-lead { max-width: 580px; }

/* 49 · One brand navy everywhere (Settings → Appearance), footer on the same grid as the page */
.hx-strip { background: color-mix(in srgb, var(--al-navy) 88%, #000); }
.hx-hero::before { background: linear-gradient(90deg, color-mix(in srgb, var(--al-navy) 55%, #050d1a) 0%, color-mix(in srgb, var(--al-navy) 45%, rgba(5,13,26,.75)) 45%, color-mix(in srgb, var(--al-navy) 30%, rgba(5,13,26,.25)) 100%); opacity: .96; }
.hx-band { background: radial-gradient(700px 300px at 85% 0%, rgba(8,184,176,.28), transparent 70%), linear-gradient(120deg, var(--al-navy), color-mix(in srgb, var(--al-navy) 60%, #050d1a)); }
.hx-call-ic, .hx-btn-dark, .hx-photo-badge { background: var(--al-navy); }
.al-public .al-footer .al-wrap { max-width: 1240px; padding-inline: 20px; }

/* 50 · Phone header: logo + Sign in + menu always fit (theme toggle moves into the menu) */
@media (max-width: 720px) {
  .hx-container { padding-inline: 14px; }
  .hx-header-in { gap: 6px; }
  .hx-logo { font-size: 16px; gap: 7px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .hx-logo .al-logo-mark, .hx-logo .al-logo-img { width: 28px; height: 28px; }
  .hx-header-user .mud-tooltip-root { display: none; }
  .hx-header-user .mud-button-root { padding: 4px 12px; min-width: 0; }
  .hx-strip-in { min-height: 34px; } .hx-strip-l { gap: 12px; font-size: 12px; }
  .hx-hero-in { padding: 44px 14px 92px; }
}
.hx-pill b { white-space: nowrap; }
@media (max-width: 720px) {
  .hx-strip { display: none; }
  .hx-pill-x { display: none; }
  .hx-hero h1 { font-size: 34px; }
  .hx-lead { font-size: 15.5px; }
}
@media (max-width: 720px) { .hx-band-btns { width: 100%; } .hx-band-btns .hx-btn { width: 100%; } .hx-pro .hx-btn { width: 100%; } }

/* 51 · Tighter rhythm: one spacing scale (8 · 12 · 16 · 24 · 40 · 56) for the public site */
.hx-header-in { min-height: 64px; }
.hx-strip-in { min-height: 34px; }
.hx-hero-in { padding: 48px 20px 84px; }
.hx-hero h1 { margin-top: 16px; }
.hx-lead { margin-top: 14px; }
.hx-hero-btns { margin-top: 22px; gap: 12px; }
.hx-ticks { margin-top: 16px; }
.hx-btn.hx-btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.hx-stats { margin-top: -52px; }
.hx-stats > div { padding: 20px 12px 18px; }
.hx-stats b { font-size: clamp(28px, 2.6vw, 38px); }
.hx-sec { padding: 56px 0; }
.hx-head { margin-bottom: 28px; }
.hx-head p, .hx-p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.hx-sec h2, .hx-band h2 { margin-top: 6px; font-size: clamp(24px, 2.5vw, 32px); }
.hx-split { gap: 40px; }
.hx-checks { margin: 18px 0 22px; gap: 10px 16px; }
.hx-photo { min-height: 320px; }
.hx-cards { gap: 14px; }
.hx-card { padding: 18px; gap: 6px; }
.hx-card::before { left: 18px; }
.hx-card-ic { width: 40px; height: 40px; border-radius: 10px; }
.hx-center { margin-top: 20px; }
.hx-band-in { padding-block: 36px; gap: 20px; }
.hx-band p { margin-top: 6px; }
.hx-steps { gap: 16px; }
.hx-step-n { width: 46px; height: 46px; font-size: 18px; margin-bottom: 10px; }
.hx-steps::before { top: 22px; }
.hx-cons, .hx-serve, .hx-quotes { gap: 12px; }
.hx-con { padding: 16px; }
.hx-serve-item { padding: 14px; gap: 12px; }
.hx-areas { margin-top: 16px; padding: 16px; }
.hx-areas-h { margin-bottom: 10px; }
.hx-chips { gap: 6px; } .hx-chips a { padding: 5px 12px; }
.hx-quote { padding: 18px; }
.hx-faq { gap: 8px; } .hx-faq details { padding: 0 16px; } .hx-faq summary { padding: 14px 0; font-size: 15px; } .hx-faq details p { margin-bottom: 14px; }
.hx-pro { padding: 18px 20px; }
.hx-sec-end { padding-bottom: 48px; }
.al-public .al-footer .al-wrap { padding-block: 28px 18px; }
@media (max-width: 720px) {
  .hx-sec { padding: 40px 0; }
  .hx-hero-in { padding: 32px 14px 76px; }
  .hx-head { margin-bottom: 20px; }
  .hx-split { gap: 24px; }
  .hx-photo { min-height: 220px; }
  .hx-band-in { padding-block: 28px; }
}

/* 52 · Wider canvas, less empty space at the sides and between blocks */
.hx-container { max-width: 1520px; padding-inline: clamp(16px, 2.2vw, 36px); }
.al-public .al-footer .al-wrap { max-width: 1520px; padding-inline: clamp(16px, 2.2vw, 36px); }
.hx-header-in { min-height: 60px; }
.hx-hero-in { padding: 32px clamp(16px, 2.2vw, 36px) 72px; }
.hx-hero h1 { margin-top: 12px; max-width: 900px; }
.hx-lead { max-width: 640px; margin-top: 10px; font-size: 16.5px; }
.hx-hero-btns { margin-top: 18px; }
.hx-ticks { margin-top: 12px; }
.hx-stats { margin-top: -44px; }
.hx-stats > div { padding: 16px 12px 14px; }
.hx-sec { padding: 40px 0; }
.hx-head { margin-bottom: 22px; }
.hx-split { gap: 32px; grid-template-columns: 1.15fr .85fr; }
.hx-photo { min-height: 280px; }
.hx-band-in { padding-block: 28px; }
.hx-sec-end { padding-bottom: 36px; }
@media (max-width: 720px) { .hx-sec { padding: 32px 0; } .hx-hero-in { padding: 28px 14px 68px; } }
/* services: 4 per row, an incomplete last row is centred */
.hx-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hx-cards > .hx-card { flex: 0 1 calc((100% - 3 * 14px) / 4); }
@media (max-width: 1000px) { .hx-cards > .hx-card { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 600px) { .hx-cards > .hx-card { flex-basis: 100%; } }

/* 53 · Earnings per contract/quotation, negotiated rates, payout breakdown */
.ep-rates { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 0 18px 12px; }
.ep-rate { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--sg-sunken, color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent)); border: 1px solid var(--mud-palette-lines-default); }
.ep-rate small { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.ep-rate b { font-size: 15px; }
.ep-rate em { font-style: normal; font-size: 11px; color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.ep-note { font-size: 12.5px; color: var(--mud-palette-text-secondary); font-style: italic; }
.ep-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--mud-palette-lines-default); }
.ep-kpis > div { padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.ep-kpis > div + div { border-left: 1px solid var(--mud-palette-lines-default); }
.ep-kpis small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.ep-kpis b { font-size: 19px; font-weight: 750; }
.ep-kpis span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.ep-kpis .hi b { color: var(--al-teal); }
.ep-kpis .ok b { color: #10B981; }
.ep-prog { height: 4px; background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); }
.ep-prog i { display: block; height: 100%; background: linear-gradient(90deg, #10B981, var(--al-teal)); }
.ep-prog.sm { height: 6px; border-radius: 99px; margin: 8px 0; overflow: hidden; }
.ep-table td .tx-sub.ok { color: #10B981; }
.ep-foot { margin: 0; padding: 10px 18px 14px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.ep-delta { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.ep-delta.up { background: rgba(16,185,129,.1); color: #0E7A5F; } .ep-delta.down { background: rgba(240,100,111,.1); color: #B4232F; }
.al-dark .ep-delta.up { color: #6EE7B7; } .al-dark .ep-delta.down { color: #FCA5A5; }

.po-split { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden; }
.po-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 13.5px; }
.po-row + .po-row { border-top: 1px dashed var(--mud-palette-lines-default); }
.po-row span { display: inline-flex; align-items: center; gap: 6px; }
.po-row .mud-icon-root { font-size: 16px; }
.po-row.keep b, .po-row.keep .mud-icon-root { color: var(--al-teal); }
.po-row.tax { color: var(--mud-palette-text-secondary); }
.po-row.soft { background: color-mix(in srgb, var(--mud-palette-text-primary) 2.5%, transparent); }
.po-row.tot { font-weight: 700; border-top: 1px solid var(--mud-palette-lines-default) !important; }
.po-keep { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; background: color-mix(in srgb, var(--al-teal) 10%, transparent); border-top: 1px solid var(--mud-palette-lines-default); }
.po-keep span { font-weight: 700; } .po-keep b { font-size: 20px; color: var(--al-teal); grid-row: span 2; }
.po-keep small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.po-contracts { display: flex; flex-direction: column; gap: 8px; }
.po-contract { padding: 10px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; font-size: 13px; }
.po-contract-f { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.po-contract-f b { color: var(--mud-palette-text-primary); }
.po-bank { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 12px 14px; }
.po-bank-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--mud-palette-text-secondary); }
.po-bank-top b { color: var(--mud-palette-text-primary); font-size: 15px; } .po-bank-top .mud-icon-root { font-size: 16px; }
.po-bank-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; margin: 12px 0 10px; background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); }
.po-bank-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.po-bank-leg span { display: inline-flex; align-items: center; gap: 6px; } .po-bank-leg i { width: 10px; height: 10px; border-radius: 3px; }
.po-bank-leg b { color: var(--mud-palette-text-primary); } .po-bank-leg .ours b { color: #10B981; }
.po-warn { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(240,100,111,.1); color: #B4232F; font-size: 12.5px; }
@media (max-width: 900px) { .ep-kpis { grid-template-columns: repeat(2, 1fr); } .ep-kpis > div:nth-child(3) { border-left: 0; } .ep-kpis > div:nth-child(n+3) { border-top: 1px solid var(--mud-palette-lines-default); } }

/* 54 · About us, Contact us, testimonials with "share your experience", admin feedback inbox */
.hx-q-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-navy)); }
.hx-quote figcaption { display: flex; align-items: center; gap: 10px; }
.hx-tq .hx-quote { display: flex; flex-direction: column; }
.hx-tq .hx-quote blockquote { flex: 1; }
.hx-tq .hx-quote.featured { border-color: color-mix(in srgb, var(--al-teal) 55%, transparent); box-shadow: 0 18px 40px -28px rgba(8,184,176,.6); }
.hx-tq-top { display: flex; align-items: center; justify-content: space-between; }
.hx-sample { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); }

.hx-share { max-width: 760px; margin: 24px auto 0; }
.hx-share-cta, .hx-share-done { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-share-cta b, .hx-share-done b { display: block; font-size: 15px; }
.hx-share-cta span, .hx-share-done span { font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.hx-share-done { justify-content: flex-start; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.07); }
.hx-share-done .mud-icon-root { color: #10B981; font-size: 30px; }
.hx-share-form { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid color-mix(in srgb, var(--al-teal) 45%, transparent); box-shadow: 0 18px 40px -30px rgba(11,31,51,.5); }
.hx-share-form > b { font-size: 16px; }
.hx-rate { display: flex; align-items: center; gap: 2px; }
.hx-rate button { border: 0; background: none; padding: 2px; cursor: pointer; color: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent); transition: transform .1s, color .1s; }
.hx-rate button:hover { transform: scale(1.12); }
.hx-rate button.on { color: #F5A524; }
.hx-rate button .mud-icon-root { font-size: 26px; }
.hx-rate span { margin-left: 8px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hx-share-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hx-btn { border: 0; cursor: pointer; font-family: inherit; }
.hx-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.hx-btn-ghost-dark { background: transparent; color: var(--mud-palette-text-primary) !important; border: 1px solid var(--mud-palette-lines-default); }
.hx-btn-ghost-dark:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }

.hx-contact-band { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 24px; border-radius: 18px; background: color-mix(in srgb, var(--al-teal) 6%, var(--mud-palette-surface)); border: 1px solid var(--mud-palette-lines-default); }
.hx-contact-band b { display: block; font-size: 17px; } .hx-contact-band span:not(.hx-card-ic) { font-size: 14px; color: var(--mud-palette-text-secondary); }

/* about */
.hx-hero-sm .hx-hero-in { padding: 44px clamp(16px, 2.2vw, 36px) 76px; }
.hx-hero-sm h1 { font-size: clamp(30px, 3.4vw, 46px); }
.hx-cards-3 > .hx-card { flex-basis: calc((100% - 2 * 14px) / 3) !important; }
.hx-split .hx-p + .hx-p { margin-top: 10px; }

/* contact */
.hx-page-head { padding: 40px 0 8px; background: radial-gradient(800px 260px at 20% 0%, color-mix(in srgb, var(--al-teal) 12%, transparent), transparent 70%); }
.hx-page-head h1 { margin: 8px 0 0; font-family: var(--al-display); font-weight: 800; letter-spacing: -.025em; font-size: clamp(28px, 3.2vw, 40px); color: var(--mud-palette-text-primary); }
.hx-page-head p { margin: 10px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.hx-sec-tight { padding: 24px 0 48px; }
.hx-contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hx-contact-form { padding: 24px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 24px 50px -40px rgba(11,31,51,.5); }
.hx-contact-form h2 { margin: 0 0 16px; font-size: 20px; font-family: var(--al-display); }
.hx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hx-contact-info { display: flex; flex-direction: column; gap: 14px; }
.hx-info-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-info-card > b { font-size: 16px; }
.hx-info-card.soft { background: color-mix(in srgb, var(--al-teal) 6%, var(--mud-palette-surface)); }
.hx-info-card.soft > span { font-size: 13.5px; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.hx-info-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.hx-info-row small { display: block; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.hx-info-row span:not(.hx-card-ic) { font-size: 14px; font-weight: 600; word-break: break-word; }
.hx-sent { text-align: center; padding: 24px 8px; }
.hx-sent-ic .mud-icon-root { font-size: 52px; color: #10B981; }
.hx-sent h2 { margin: 8px 0 6px; }
.hx-sent p { color: var(--mud-palette-text-secondary); line-height: 1.6; }

/* admin inbox */
.fb-list { display: flex; flex-direction: column; }
.fb-msg + .fb-msg { border-top: 1px solid var(--mud-palette-lines-default); }
.fb-msg-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.fb-msg-h:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent); }
.fb-msg-h b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fb-msg-h .tx-ellipsis { font-size: 13px; color: var(--mud-palette-text-secondary); max-width: 640px; }
.fb-msg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.fb-msg-meta small { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.fb-msg.done .fb-msg-h b { font-weight: 500; }
.fb-msg-b { padding: 4px 16px 16px 66px; }
.fb-msg-b > p { margin: 0 0 12px; white-space: pre-wrap; line-height: 1.6; }
.fb-tq { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; padding: 14px; }
.fb-tq-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.fb-tq-card blockquote { margin: 0; font-size: 14px; line-height: 1.6; }
.fb-tq-card .al-stars .mud-icon-root { color: #F5A524; }

@media (max-width: 900px) { .hx-contact { grid-template-columns: 1fr; } .hx-cards-3 > .hx-card { flex-basis: 100% !important; } }
@media (max-width: 640px) { .hx-form-grid { grid-template-columns: 1fr; } .fb-msg-b { padding-left: 16px; } .fb-msg-meta { display: none; } }

/* 55 · Services with photos, How it works with aquifer cross-section and project-stage photos; avatar initials readable */
.hx-quote figcaption .hx-q-av, .fb-msg-h .hx-q-av { color: #fff; font-size: 13px; font-weight: 700; }
.hx-cards > .hx-card.hx-svc { padding: 0; gap: 0; }
.hx-svc::before { display: none; }
.hx-svc-img { position: relative; height: 150px; background-size: cover; background-position: center; }
.hx-svc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9,26,44,.55)); }
.hx-svc-time { position: absolute; z-index: 1; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(9,26,44,.55); backdrop-filter: blur(4px); }
.hx-svc-time .mud-icon-root { font-size: 13px; }
.hx-svc-ic { position: absolute; z-index: 1; right: 14px; bottom: -20px; margin: 0 !important; background: var(--mud-palette-surface) !important; box-shadow: 0 8px 20px -10px rgba(11,31,51,.5); border: 1px solid var(--mud-palette-lines-default); }
.hx-svc-b { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; flex: 1; }
.hx-svc-b p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mud-palette-text-secondary); flex: 1; }
.hx-svc-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.hx-svc:hover .hx-svc-img { filter: saturate(1.1); }

.hx-how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.hx-how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.hx-how-steps::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--al-teal) 60%, transparent) 0 6px, transparent 6px 12px); }
.hx-how-steps li { position: relative; display: flex; gap: 16px; padding: 12px 0; }
.hx-how-n { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-blue)); box-shadow: 0 0 0 5px var(--mud-palette-background); }
.hx-how-steps b { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.hx-how-steps b .mud-icon-root { font-size: 18px; color: var(--al-teal); }
.hx-how-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.hx-aquifer { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); box-shadow: 0 24px 50px -36px rgba(11,31,51,.55); }
.hx-aquifer svg { display: block; width: 100%; height: auto; }
.hx-aquifer figcaption { padding: 12px 16px; font-size: 13px; line-height: 1.55; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--mud-palette-lines-default); }
.hx-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.hx-stage { margin: 0; border-radius: 16px; overflow: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-stage > div { height: 150px; background-size: cover; background-position: center; }
.hx-stage figcaption { padding: 12px 14px; }
.hx-stage figcaption b { display: block; font-size: 14px; } .hx-stage figcaption span { font-size: 12.5px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
@media (max-width: 1000px) { .hx-how { grid-template-columns: 1fr; } .hx-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hx-stages { grid-template-columns: 1fr; } }

/* 56 · Navigation (desktop pills, phone drawer), sharp photo cards, mobile polish */
/* buttons: ghost keeps its border (section 54 reset borders on .hx-btn) */
.hx-btn.hx-btn-ghost { border: 2px solid rgba(255,255,255,.85); }
.hx-btn.hx-btn-ghost-dark { border: 1px solid var(--mud-palette-lines-default); }
.hx-btn .mud-icon-root { flex: none; }

/* header: logo | centred pills | actions */
.hx-header { transition: box-shadow .2s; }
.hx-header-in { display: grid !important; grid-template-columns: auto 1fr auto; gap: 16px; min-height: 64px; }
.hx-logo { margin-right: 0 !important; display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.hx-logo .al-logo-mark, .hx-logo .al-logo-img { width: 34px; height: 34px; border-radius: 10px; }
.hx-nav { justify-self: center; align-self: center !important; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.hx-nav a { height: 36px; padding: 0 14px !important; border-radius: 10px; border-bottom: 0 !important; font-size: 14px !important; font-weight: 600; color: var(--mud-palette-text-secondary) !important; transition: background .15s, color .15s; }
.hx-nav a:hover { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary) !important; }
.hx-nav a.active { background: var(--mud-palette-surface); color: var(--al-teal) !important; box-shadow: 0 1px 3px rgba(11,31,51,.12); }
.hx-header-r { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hx-call { padding-left: 0 !important; }
.hx-call-ic { width: 36px !important; height: 36px !important; }
.hx-call-t b { font-size: 14.5px !important; }
.hx-header-cta { height: 40px !important; gap: 6px; }

/* burger */
.hx-burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.hx-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--mud-palette-text-primary); transition: transform .2s, opacity .2s; }
.hx-burger:hover { border-color: var(--al-teal); }

/* drawer */
.hx-drawer-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(6,16,28,.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.hx-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1301; width: min(360px, 88vw); display: flex; flex-direction: column; background: var(--mud-palette-surface); box-shadow: -24px 0 60px -20px rgba(0,0,0,.35); transform: translateX(105%); transition: transform .25s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
.hx-menu-open .hx-drawer { transform: none; }
.hx-menu-open .hx-drawer-backdrop { opacity: 1; pointer-events: auto; }
.hx-drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.hx-drawer-x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: none; cursor: pointer; color: var(--mud-palette-text-primary); display: grid; place-items: center; }
.hx-drawer-nav { display: flex; flex-direction: column; padding: 10px; gap: 2px; }
.hx-drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--mud-palette-text-primary) !important; }
.hx-drawer-nav a:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }
.hx-drawer-nav a.active { background: color-mix(in srgb, var(--al-teal) 10%, transparent); color: var(--al-teal) !important; }
.hx-drawer-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--al-teal); background: color-mix(in srgb, var(--al-teal) 12%, transparent); }
.hx-drawer-ic .mud-icon-root { font-size: 19px; }
.hx-drawer-go { margin-left: auto; font-size: 18px !important; color: var(--mud-palette-text-disabled); }
.hx-drawer-cta { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; }
.hx-drawer-cta .hx-btn { width: 100%; }
.hx-drawer-join { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--mud-palette-text-secondary) !important; text-decoration: none; padding: 4px; }
.hx-drawer-join b { color: var(--al-teal); }
.hx-drawer-f { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 18px; border-top: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent); }
.hx-drawer-f a, .hx-drawer-f button { display: flex; align-items: center; gap: 10px; padding: 8px 0; font: inherit; font-size: 14px; text-decoration: none; color: var(--mud-palette-text-secondary) !important; background: none; border: 0; cursor: pointer; text-align: left; }
.hx-drawer-f .mud-icon-root { font-size: 18px; color: var(--al-teal); }

/* sharp photo cards */
.hx-svc-img { height: auto !important; aspect-ratio: 420 / 250; overflow: hidden; background: color-mix(in srgb, var(--al-teal) 8%, var(--mud-palette-background)); }
.hx-svc-img img, .hx-stage-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hx-svc:hover .hx-svc-img img, .hx-stage:hover .hx-stage-img img { transform: scale(1.05); }
.hx-svc-img::after { z-index: 0; }
.hx-stage-img { position: relative; aspect-ratio: 420 / 280; overflow: hidden; background: color-mix(in srgb, var(--al-teal) 8%, var(--mud-palette-background)); }
.hx-stage-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9,26,44,.45)); }
.hx-stage-n { position: absolute; z-index: 1; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(145deg, var(--al-teal), var(--al-blue)); box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.hx-stage { transition: transform .2s, box-shadow .2s; }
.hx-stage:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(11,31,51,.5); }
.hx-photo { background-color: color-mix(in srgb, var(--al-teal) 8%, var(--mud-palette-background)); }

/* responsive */
@media (max-width: 1240px) { .hx-call { display: none !important; } }
@media (max-width: 1080px) {
  .hx-nav, .hx-header-cta { display: none !important; }
  .hx-header-in { grid-template-columns: 1fr auto; }
  .hx-burger { display: flex; }
}
@media (max-width: 720px) {
  .hx-header-in { min-height: 60px; gap: 8px; }
  .hx-logo { font-size: 16px; gap: 8px; }
  .hx-logo .al-logo-mark, .hx-logo .al-logo-img { width: 30px; height: 30px; }
  .hx-header-user .mud-tooltip-root { display: none; }
  .hx-hero-in { padding: 28px 14px 68px !important; }
  .hx-pill { font-size: 12px; }
  .hx-hero-btns { flex-direction: column; }
  .hx-hero-btns .hx-btn { width: 100%; }
  .hx-ticks { gap: 8px 16px; font-size: 13px; }
  .hx-stats b { font-size: 26px !important; }
  .hx-stats span { font-size: 12.5px; }
  .hx-head h2, .hx-sec h2 { font-size: 24px !important; }
  .hx-how-steps li { padding: 10px 0; }
  .hx-aquifer figcaption { font-size: 12.5px; }
  .hx-cards > .hx-card { flex-basis: 100% !important; }
  .hx-share-cta, .hx-contact-band, .hx-pro { flex-direction: column; align-items: stretch; text-align: left; }
  .hx-share-cta .hx-btn, .hx-contact-band .hx-btn, .hx-pro .hx-btn { width: 100%; }
  .hx-page-head { padding-top: 28px; }
  .hx-contact-form { padding: 18px; }
  .hx-strip { display: none; }
}

/* ============================== 57. Stand-alone public pages ============================== */
/* Seven menu links: tighten, then switch to the slide-in menu a little earlier */
@media (max-width: 1320px) { .hx-nav a { padding: 0 11px !important; font-size: 13.5px !important; } }
@media (max-width: 1180px) {
  .hx-nav, .hx-header-cta { display: none !important; }
  .hx-header-in { grid-template-columns: 1fr auto !important; }
  .hx-burger { display: flex; }
}

/* Page hero breadcrumb */
.hx-crumbs { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 13px; color: rgba(255,255,255,.75); }
.hx-crumbs a { color: rgba(255,255,255,.9) !important; text-decoration: none; }
.hx-crumbs a:hover { color: #fff !important; text-decoration: underline; }
.hx-crumbs .mud-icon-root { font-size: 16px; opacity: .7; }
.hx-crumbs span { color: #5EEAD4; font-weight: 600; }
.hx-hero-sm .hx-hero-btns { margin-top: 22px; }

/* Home: four steps as a row of cards */
.hx-steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; position: relative; }
.hx-steps-row li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 18px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 14px 30px -26px rgba(11,31,51,.55); transition: transform .2s, box-shadow .2s; }
.hx-steps-row li:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(11,31,51,.55); }
.hx-steps-row li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -14px; width: 14px; height: 2px; background: color-mix(in srgb, var(--al-teal) 60%, transparent); }
.hx-steps-row .hx-how-n { box-shadow: none; }
.hx-steps-row b { display: flex; align-items: center; gap: 6px; font-size: 16px; margin-top: 4px; }
.hx-steps-row b .mud-icon-root { font-size: 18px; color: var(--al-teal); }
.hx-steps-row p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mud-palette-text-secondary); }
@media (max-width: 1000px) { .hx-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-steps-row li::after { display: none; } }
@media (max-width: 560px) { .hx-steps-row { grid-template-columns: 1fr; } }

/* Sharp photo block (replaces background-image photos) */
.hx-photo-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 900 / 680; background: color-mix(in srgb, var(--al-teal) 8%, var(--mud-palette-background)); box-shadow: 0 30px 60px -34px rgba(11,31,51,.55); }
.hx-photo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hx-photo-img:hover img { transform: scale(1.04); }
.hx-photo-img .hx-photo-badge { z-index: 1; }

/* Services page: what's included */
.hx-svc-list { list-style: none; margin: 4px 0 2px; padding: 10px 0 0; display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--mud-palette-lines-default); }
.hx-svc-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--mud-palette-text-primary); }
.hx-svc-list .mud-icon-root { flex: none; font-size: 16px; color: var(--al-teal); margin-top: 1px; }

/* FAQ footer link */
.hx-faq-more { text-align: center; margin-top: 18px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .hx-crumbs { margin-bottom: 10px; }
  .hx-hero-sm .hx-hero-btns { flex-direction: column; align-items: stretch; }
  .hx-photo-img { aspect-ratio: 4 / 3; }
  .hx-center .hx-btn { width: 100%; justify-content: center; }
}

/* ============================== 58. Testimonial photo cards + gallery ============================== */
.hx-tq { align-items: stretch; }
.hx-tcard { margin: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 18px 40px -32px rgba(11,31,51,.6); transition: transform .25s, box-shadow .25s; }
.hx-tcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(11,31,51,.6); }
.hx-tcard.featured { border-color: color-mix(in srgb, var(--al-teal) 55%, transparent); box-shadow: 0 22px 46px -28px rgba(8,184,176,.55); }
.hx-tcard-img { position: relative; aspect-ratio: 480 / 230; background: color-mix(in srgb, var(--al-teal) 10%, var(--mud-palette-background)); }
.hx-tcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hx-tcard:hover .hx-tcard-img img { transform: scale(1.05); }
.hx-tcard-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,26,44,.05) 40%, rgba(9,26,44,.6)); pointer-events: none; }
.hx-tcard-tag { position: absolute; z-index: 1; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(9,26,44,.55); backdrop-filter: blur(6px); }
.hx-tcard-tag .mud-icon-root { font-size: 14px; color: #5EEAD4; }
.hx-sample-img, .hx-tcard-feat { position: absolute; z-index: 1; right: 12px; top: 12px; }
.hx-sample-img { color: #fff !important; border: 1px dashed rgba(255,255,255,.7) !important; background: rgba(9,26,44,.45); backdrop-filter: blur(6px); }
.hx-tcard-feat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #0B1F33; background: #FCD34D; }
.hx-tcard-feat .mud-icon-root { font-size: 13px; }
.hx-q-av.hx-tcard-av { position: absolute; z-index: 2; left: 18px; bottom: -22px; width: 48px; height: 48px; font-size: 15px; box-shadow: 0 0 0 4px var(--mud-palette-surface), 0 8px 18px -8px rgba(11,31,51,.6); }
.hx-tcard-b { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 32px 20px 18px; }
.hx-tcard-top { display: flex; align-items: center; justify-content: space-between; }
.hx-tcard-top .al-stars .mud-icon-root { font-size: 17px; color: #F59E0B; }
.hx-tcard-top .al-stars .mud-icon-root.off { color: var(--mud-palette-lines-default); }
.hx-tcard-q { font-size: 40px !important; color: color-mix(in srgb, var(--al-teal) 35%, transparent); margin: -10px -6px -10px 0; }
.hx-tcard blockquote { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--mud-palette-text-primary); }
.hx-tcard figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.hx-tcard figcaption b { display: block; font-size: 14.5px; }
.hx-tcard figcaption span, .hx-tcard figcaption small { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hx-tcard figcaption small { white-space: nowrap; }

.hx-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hx-gal { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--al-teal) 10%, var(--mud-palette-background)); }
.hx-gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hx-gal:hover img { transform: scale(1.06); }
.hx-gal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(9,26,44,.78)); }
.hx-gal figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.hx-gal figcaption b { display: block; font-size: 16px; }
.hx-gal figcaption span { font-size: 13px; color: rgba(255,255,255,.85); }
@media (max-width: 900px) { .hx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hx-gallery { grid-template-columns: 1fr; } .hx-tcard-b { padding: 30px 16px 16px; } }

/* ============================== 59. Drilling film + quick start ============================== */
.df { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0E3A5F; box-shadow: 0 34px 70px -38px rgba(11,31,51,.75); isolation: isolate; }
.df > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.df-real iframe, .df-real video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.df * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.df.paused *, .df.paused *::before, .df.paused *::after { animation-play-state: paused !important; }
.df-lbl text { fill: #0B1F33; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; stroke-linejoin: round; }
.df-lbl text[fill="#F3F4F6"] { fill: #F3F4F6; stroke: rgba(0,0,0,.3); }
.df-sun { animation-name: df-sun; animation-duration: 6s !important; transform-box: fill-box; transform-origin: center; }
@keyframes df-sun { 50% { transform: scale(1.08); opacity: .9; } }

/* survey */
.df-pulse { fill: none; stroke: #FDE68A; stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); opacity: 0; }
.df-pulse.p1 { animation-name: df-p1; } .df-pulse.p2 { animation-name: df-p2; } .df-pulse.p3 { animation-name: df-p3; }
@keyframes df-p1 { 0% { transform: scale(.05); opacity: .9; } 9% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes df-p2 { 0%, 3% { transform: scale(.05); opacity: 0; } 4% { opacity: .9; } 12% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes df-p3 { 0%, 6% { transform: scale(.05); opacity: 0; } 7% { opacity: .9; } 15% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
.df-flag { animation-name: df-flag; }
@keyframes df-flag { 0%, 14% { opacity: 1; } 17%, 100% { opacity: 0; } }

/* drilling */
.df-string { transform-box: fill-box; transform-origin: 50% 0%; animation-name: df-string; }
@keyframes df-string { 0%, 15% { transform: scaleY(0); } 46% { transform: scaleY(1); } 52%, 100% { transform: scaleY(0); } }
.df-bit { animation-name: df-bit; }
@keyframes df-bit { 0%, 15% { transform: translateY(0); opacity: 1; } 46% { transform: translateY(198px); opacity: 1; } 52% { transform: translateY(0); opacity: 1; } 53%, 100% { opacity: 0; } }
.df-cuttings { animation-name: df-cut; }
.df-cuttings circle { animation: df-hop .5s ease-in-out infinite alternate !important; }
.df-cuttings circle:nth-child(2) { animation-delay: .15s !important; } .df-cuttings circle:nth-child(3) { animation-delay: .3s !important; }
@keyframes df-cut { 0%, 16% { opacity: 0; } 18%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes df-hop { to { transform: translateY(-7px); } }
.df-rig { animation-name: df-rig; }
@keyframes df-rig { 0%, 15% { transform: translateX(0); } 16%, 20%, 24%, 28%, 32%, 36%, 40%, 44% { transform: translateX(-.8px); } 18%, 22%, 26%, 30%, 34%, 38%, 42%, 46% { transform: translateX(.8px); } 48%, 70% { transform: translateX(0); opacity: 1; } 76%, 100% { opacity: .25; } }

/* casing */
.df-casing { transform-box: fill-box; transform-origin: 50% 0%; animation-name: df-casing; }
@keyframes df-casing { 0%, 50% { transform: scaleY(0); opacity: 0; } 51% { opacity: 1; } 62%, 100% { transform: scaleY(1); opacity: 1; } }
.df-screen { animation-name: df-screen; }
@keyframes df-screen { 0%, 58% { opacity: 0; } 63%, 100% { opacity: 1; } }
.df-aq { animation-name: df-aq; }
@keyframes df-aq { 0%, 58% { opacity: .55; } 66%, 80% { opacity: 1; } 100% { opacity: .7; } }

/* pumping test */
.df-rise { transform-box: fill-box; transform-origin: 50% 100%; animation-name: df-rise; }
@keyframes df-rise { 0%, 64% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }
.df-inflow { animation-name: df-inflow; }
@keyframes df-inflow { 0%, 63% { opacity: 0; } 66%, 79% { opacity: 1; } 84%, 100% { opacity: 0; } }

/* running water */
.df-pump { animation-name: df-pump; }
@keyframes df-pump { 0%, 74% { opacity: 0; transform: translateY(6px); } 80%, 100% { opacity: 1; transform: translateY(0); } }
.df-fill { transform-box: fill-box; transform-origin: 50% 100%; animation-name: df-fill; }
@keyframes df-fill { 0%, 82% { transform: scaleY(0); } 98%, 100% { transform: scaleY(1); } }
.df-stream { stroke-dasharray: 6 6; animation: df-flow .5s linear infinite !important; }
@keyframes df-flow { to { stroke-dashoffset: -12; } }
.df-drops circle { animation: df-hop .6s ease-in-out infinite alternate !important; }

/* captions + controls */
.df-caps { position: absolute; left: 16px; top: 16px; width: min(340px, 52%); }
.df-cap { position: absolute; left: 0; top: 0; width: fit-content; max-width: 100%; padding: 12px 14px; border-radius: 14px; color: #fff; background: rgba(9,26,44,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); opacity: 0; }
.df-cap span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5EEAD4; }
.df-cap b { display: block; margin-top: 2px; font-size: 17px; line-height: 1.25; }
.df-cap p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.85); }
.df-cap.c1 { animation-name: df-c1; } .df-cap.c2 { animation-name: df-c2; } .df-cap.c3 { animation-name: df-c3; } .df-cap.c4 { animation-name: df-c4; } .df-cap.c5 { animation-name: df-c5; }
@keyframes df-c1 { 0%, 13% { opacity: 1; transform: none; } 15%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes df-c2 { 0%, 15% { opacity: 0; transform: translateY(6px); } 17%, 48% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes df-c3 { 0%, 50% { opacity: 0; transform: translateY(6px); } 52%, 62% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; } }
@keyframes df-c4 { 0%, 64% { opacity: 0; transform: translateY(6px); } 66%, 78% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
@keyframes df-c5 { 0%, 80% { opacity: 0; transform: translateY(6px); } 82%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.df-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(9,26,44,.62); backdrop-filter: blur(8px); }
.df-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #0B1F33; background: #fff; transition: transform .15s; }
.df-btn:hover { transform: scale(1.08); }
.df-btn .mud-icon-root { font-size: 20px; }
.df-track { position: relative; flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
.df-prog { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #5EEAD4, #38BDF8); animation-name: df-prog; animation-timing-function: linear !important; }
@keyframes df-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.df-track em { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(9,26,44,.8); }
.df-badge { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #0B1F33; background: #FCD34D; }
.df-badge .mud-icon-root { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .df:not(.paused) .df-stream, .df:not(.paused) .df-cuttings circle { animation: none !important; } }

/* "See it in action" layout + quick start card */
.hx-action { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.hx-qs { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 24px 50px -36px rgba(11,31,51,.6); }
.hx-qs-h { display: flex; align-items: center; gap: 10px; }
.hx-qs-h b { display: block; font-size: 18px; } .hx-qs-h small { color: var(--mud-palette-text-secondary); font-size: 13px; }
.hx-qs label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.hx-qs select { height: 44px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--mud-palette-text-primary); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); outline: none; }
.hx-qs select:focus { border-color: var(--al-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 20%, transparent); }
.hx-qs .hx-btn { width: 100%; justify-content: center; }
.hx-qs-ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 4px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hx-qs-ticks span { display: inline-flex; align-items: center; gap: 4px; } .hx-qs-ticks .mud-icon-root { font-size: 15px; color: var(--al-teal); }
.hx-qs-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.hx-qs-or::before, .hx-qs-or::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-lines-default); }
.hx-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.hx-proof div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.hx-proof .mud-icon-root { flex: none; font-size: 24px; color: var(--al-teal); }
.hx-proof b { display: block; font-size: 15px; } .hx-proof span { font-size: 12px; color: var(--mud-palette-text-secondary); }

/* sticky phone CTA */
.hx-sticky-cta { display: none; }
@media (max-width: 1000px) { .hx-action { grid-template-columns: 1fr; } .hx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .df:not(.df-real) { border-radius: 14px; aspect-ratio: auto; display: flex; flex-direction: column; background: #0B1F33; }
  .df:not(.df-real) > svg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }
  .df-caps { position: relative; left: 0; top: 0; width: 100%; height: 92px; }
  .df-cap { left: 0; right: 0; width: auto; padding: 10px 14px; border-radius: 0; background: transparent; border: 0; backdrop-filter: none; }
  .df-cap b { font-size: 15px; } .df-cap p { font-size: 12.5px; }
  .df-bar { position: relative; left: 0; right: 0; bottom: 0; margin: 0 10px 10px; }
  .df-badge, .df-lbl { display: none; }
  .hx-sticky-cta { position: fixed; z-index: 1200; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 16px 40px -16px rgba(11,31,51,.55); }
  .hx-sticky-cta .hx-btn { flex: 1; justify-content: center; padding-inline: 10px; font-size: 13.5px; }
  .hx-has-sticky { padding-bottom: 76px; }
}
@media (max-width: 420px) { .hx-proof { grid-template-columns: 1fr; } }