/* GoCall for CommStack portals (Studio "Advanced CSS"), for the settings in
   gocall-studio-settings.md. GoCall's "Showtime" look: cream page, navy ink,
   2px ink borders with solid offset shadows, pills, sun for what's selected, a
   sunny band under each page title, and a lavender pill with the pink dot for
   where you are in the menu. Brand colours come from Studio (--cs-primary,
   --cs-secondary, --cs-accent).
   Every rule starts with :root, one step above the theme's rule; !important
   only answers the theme's own or very specific rules. Hooks on the html
   element: data-cs-page=signin (sign-in, reset, 2FA) and NMS's data-theme=dark.
   Support can turn this file off with ?brandcss=off.
   Sections: 1 tokens, 2 base, 3 top bar, 4 left menu, 5 page header, 6 cards,
   7 buttons, 8 badges, 9 forms, 10 tabs, 11 overlays, 12 lists, 13 AI /new/,
   14 sign-in, 15 motion and print. */

/* == 1. Fonts and tokens
   PolySans isn't a Studio font, so this is tuned for DM Sans (set in Studio).
   To switch PolySans on: confirm the licence covers web use on the portals'
   domains (the file is served to every visitor), upload polysans.woff2 under
   "Fonts and images" in Studio's Advanced CSS, copy the address it lists into
   the url() below (all of it) and take away the comment marks round the block.
   The font stack already asks for PolySans first.

@font-face {
  font-family: 'PolySans';
  src: url('https://HUB-ASSET-HOST/assets/branding/BRAND-ID/polysans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* GoCall's palette; the brand colours come from Studio */
  --g-purple: var(--cs-primary, #5733d1); --g-navy: var(--cs-secondary, #1e1147); --g-pink: var(--cs-accent, #f72c81);
  --g-purple-2: #4826bd; --g-cream: #fff8ef; --g-sun: #ffcc33; --g-sun-2: #fff0bf; --g-lav: #efe9ff; --g-lav-2: #dcd0ff;
  --g-blush: #ffe3ef; --g-mint: #d6f2ea; --g-sky: #dcecff; --g-green: #12805c; --g-red: #c81e45;
  /* Roles (the dark scheme below swaps these) */
  --g-bg: var(--g-cream); --g-band: var(--g-sun); --g-surface: #fff; --g-field: #fffdf8; --g-tint: #f7f1ff; --g-hover: var(--g-lav);
  --g-ink: var(--g-navy); --g-ink-2: #4a3f6b; --g-line: var(--g-navy); --g-hair: rgba(30, 17, 71, .14); --g-shadow: var(--g-navy);
  --g-link: var(--g-purple); --g-accent: var(--g-purple);
  --g-ok: var(--g-mint); --g-warn: var(--g-sun-2); --g-bad: var(--g-blush); --g-info: var(--g-sky); --g-calm: var(--g-lav);
  /* Text on those tints (badges, outline buttons) */
  --g-t-ok: #0b5940; --g-t-warn: #6b4a00; --g-t-bad: #8f0f2f; --g-t-info: #154a80; --g-t-calm: #1e1147;
  --g-bd: 2px solid var(--g-line); --g-r: 20px;
  --g-sh-xs: 2px 2px 0 var(--g-shadow); --g-sh-sm: 3px 3px 0 var(--g-shadow); --g-sh: 5px 5px 0 var(--g-shadow); --g-sh-lg: 8px 8px 0 var(--g-shadow);
  --g-font: 'PolySans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Bootstrap 5.1 / Dashkit variables */
  --bs-body-bg: var(--g-bg); --bs-body-bg-rgb: 255, 248, 239; --bs-body-color: var(--g-ink); --bs-body-color-rgb: 30, 17, 71; --bs-body-font-family: var(--g-font);
  /* Chart colours (Dashkit's chart setup reads these) */
  --bs-chart-default-color: var(--g-ink-2); --bs-chart-grid-line-color: var(--g-hair);
  /* CommStack page tokens (NMS pages read these, with their own fallbacks) */
  --cs-ink: var(--g-ink); --cs-ink-2: var(--g-ink-2); --cs-surface: var(--g-surface); --cs-subtle: #fffaf2; --cs-soft: var(--g-tint); --cs-line: #e8e1f4; --cs-line-strong: #cdc2e6;
  /* AI Agents /new/ tokens */
  --nw-ink: var(--g-ink); --nw-mute: var(--g-ink-2); --nw-faint: #6c6390; --nw-line: var(--g-line); --nw-soft: var(--g-tint);
  --nw-radius: var(--g-r); --nw-shadow: var(--g-sh); --nw-shadow-pop: var(--g-sh-lg);
}
/* NMS dark scheme: GoCall's purple night; lavender does the ink's job for lines and shadows */
:root[data-theme=dark] {
  --g-bg: #130b31; --g-band: #3b21a3; --g-surface: #1f1550; --g-field: #190f43; --g-tint: #281c5f; --g-hover: #2e2170;
  --g-ink: #f6f1ff; --g-ink-2: #c4bbe8; --g-line: #a898f4; --g-hair: rgba(214, 205, 255, .17); --g-shadow: #6e58d8;
  --g-link: #c2b4ff; --g-accent: #8f75ff; --g-ok: #12443a; --g-warn: #4a3a12; --g-bad: #521a36; --g-info: #1a3256; --g-calm: #33267a;
  --g-t-ok: #9cf0cf; --g-t-warn: #ffe08a; --g-t-bad: #ffb3c5; --g-t-info: #bcdcff; --g-t-calm: #d6ccff;
  /* Charts (theme-dark.css sets these here too) */
  --bs-chart-primary-700: #a898f4; --bs-chart-primary-300: #6e58d8; --bs-chart-primary-100: #33267a; --bs-chart-default-color: var(--g-ink-2); --bs-chart-grid-line-color: var(--g-hair);
  --bs-chart-arc-border-color: var(--g-surface); --bs-chart-arc-hover-border-color: var(--g-surface);
  --bs-body-bg-rgb: 19, 11, 49; --bs-body-color-rgb: 246, 241, 255;
  --cs-subtle: #1b1046; --cs-line: rgba(214, 205, 255, .17); --cs-line-strong: rgba(214, 205, 255, .3); --nw-faint: #a59bd0;
}

/* == 2. Base */
:root body { color: var(--g-ink); background-color: var(--g-bg); -webkit-font-smoothing: antialiased; }
/* (bg-auth: the error pages and other pages without a menu) */
:root body:is(.bg-light, .bg-auth) { background-color: var(--g-bg) !important; }
/* The elements brand_head() gives the Studio font */
:root :is(body, .btn, .form-control, .form-select, .dropdown-menu, .popover, .tooltip) { font-family: var(--g-font); }
:root :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: var(--g-ink); letter-spacing: -.02em; }
:root :is(h1, .h1, h2, .h2) { letter-spacing: -.03em; }
/* On a coloured surface they follow its text colour, as the theme's do */
:root :is(.text-white, .bg-dark, .bg-primary, .bg-secondary, .bg-danger, .bg-success, .bg-info, .alert-dark) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: inherit; }
:root a { text-underline-offset: 3px; }
:root ::selection { color: #1e1147; background: var(--g-sun); }
:root hr { color: var(--g-hair); }
/* The theme takes focus outlines away (with !important); keyboard focus gets GoCall's ring back
   (not on fields, which have their own, or on a modal/offcanvas panel Bootstrap focuses as it opens) */
:root :focus-visible { outline: 3px solid var(--g-accent) !important; outline-offset: 2px; }
:root :is(.form-control, .form-select, .form-check-input, .lp-input, .modal, .offcanvas):focus-visible { outline: 0 !important; }
/* Muted text that reads on cream (the theme's #95AAC9 is 2.3:1 there) */
:root :is(.text-muted, .text-secondary) { color: var(--g-ink-2) !important; }
:root :is(.bg-dark, .alert-dark, .navbar-dark, .bg-primary, .bg-secondary) .text-muted { color: rgba(255, 255, 255, .72) !important; }
:root :is(.text-body, .text-dark) { color: var(--g-ink) !important; }
:root .bg-light:not(body) { background-color: var(--g-tint) !important; }
:root .main-content { color: var(--g-ink); }
/* Dark: the brand purple is too dark on the night sky; links, primary text and code go lavender */
:root[data-theme=dark] :where(a:not([class])), :root[data-theme=dark] .text-primary { color: var(--g-link) !important; }
:root[data-theme=dark] code { color: var(--g-link); }

/* == 3. Top bar (#topnav.cs-topnav): cream with an ink rule, the menu as pills.
   Where you are: a lavender pill with the pink dot. */
:root #topnav { background-color: var(--g-bg); border: solid var(--g-line); border-width: 0 0 2px; }
:root #topnav > .container-fluid { min-height: 4.5rem; }
:root #topnav .navbar-brand-img { max-height: 2.25rem; }
:root #topnav .navbar-nav > .nav-item > .nav-link { margin: .75rem 1px; padding: .5rem .7rem; font-size: .9375rem; line-height: 1.25; color: var(--g-ink); border: 2px solid transparent; border-radius: 999px; transition: background-color .15s, border-color .15s; }
:root #topnav .navbar-nav > .nav-item > .nav-link:is(:hover, :focus-visible, .show, .active) { color: var(--g-ink); background-color: var(--g-hover); border-color: var(--g-line); }
/* The pink dot (the theme draws its underline with the same ::before) */
:root #topnav .navbar-nav > .nav-item > .nav-link.active::before { content: ""; position: static; flex: none; width: 8px; height: 8px; margin-right: 7px; border: 0; border-radius: 50%; background: var(--g-pink); box-shadow: 0 0 0 2px var(--g-line); }
/* Text-only pills as in GoCall's header (icons stay in the dropdowns) */
:root #topnav .navbar-nav > .nav-item > .nav-link > .cs-nav-icon:has(+ .cs-nav-label) { display: none; }
:root #topnav .dropdown-toggle::after { margin-left: .25rem; }
/* CPS's longest menu fits on one row from 1200px */
@media (max-width: 1399.98px) { :root #topnav .navbar-nav > .nav-item > .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .875rem; } }
@media (min-width: 1200px) and (max-width: 1279.98px) { :root #topnav .navbar-nav > .nav-item > .nav-link { margin-left: 0; margin-right: 0; padding-left: .4rem; padding-right: .4rem; } :root #topnav .cs-topnav-user { gap: .375rem; } }
/* NMS's "New" items (Call Tracking, Call Insights): plain pills like the rest, "New" as a pink sticker */
:root #topnav .nav-link.cs-glisten { font-weight: inherit; background-image: none; box-shadow: none; }
:root #topnav .nav-link.cs-glisten::after { display: none; }
/* (NMS's own rules for these come after this file) */
:root #topnav .nav-link.cs-glisten .cs-glisten-text { color: inherit; background: none; }
:root #topnav .nav-link.cs-glisten .cs-glisten-tag { color: #1e1147; background: var(--g-pink); border: 1.5px solid var(--g-line); }
:root #topnav .navbar-nav > .nav-item > .nav-link.cs-glisten.active::before { display: block; }
/* Hover-open menus: a bridge over the gap between pill and menu */
:root #topnav .navbar-nav > .nav-item.dropdown:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; }
:root #topnav .navbar-nav .dropdown-menu { margin-top: .25rem; border-radius: 18px; }
/* Right side: round icon buttons and the avatar */
:root #topnav .cs-topnav-user { gap: .625rem; }
:root :is(#topnav, #sidebarUser) .navbar-user-link { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: 1rem; color: var(--g-ink); background: var(--g-surface); border: var(--g-bd); border-radius: 50%; box-shadow: var(--g-sh-sm); transition: transform .15s, box-shadow .15s; }
:root :is(#topnav, #sidebarUser) .navbar-user-link:hover { color: var(--g-ink); transform: translate(-1px, -1px) rotate(-12deg); box-shadow: 4px 4px 0 var(--g-shadow); }
:root :is(#topnav, #sidebarUser) .navbar-user-link .icon { line-height: 1; }
:root :is(#topnav, #sidebar) .navbar-user .avatar-img { box-shadow: 0 0 0 2px var(--g-line), var(--g-sh-sm); }
/* The theme opens a group (and the avatar menu) on hover and focuses its button, which counts as
   keyboard focus: no extra ring there. A focused pill shows its ink outline, the avatar a round ring */
:root #topnav :is(.navbar-nav > .nav-item > .nav-link, .cs-topnav-user .dropdown-toggle):focus-visible { outline: 0 !important; }
:root #topnav .cs-topnav-user .dropdown-toggle:focus-visible .avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 5px var(--g-accent); }
/* Hamburger: a chunky rounded square */
:root :is(#topnav, #sidebar) .navbar-toggler { width: 2.75rem; height: 2.75rem; padding: 0; background: var(--g-surface); border: var(--g-bd); border-radius: 14px; box-shadow: var(--g-sh-sm); }
:root :is(#topnav, #sidebar) .navbar-toggler-icon { width: 1.25rem; height: 1.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231e1147' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
:root[data-theme=dark] :is(#topnav, #sidebar) .navbar-toggler-icon { filter: invert(1); }
/* Dark: the logo (drawn for light) sits on a cream pill, like GoCall's footer logo */
:root[data-theme=dark] :is(#topnav, #sidebar) :is(.navbar-brand-img, .cs-nav-mark) { box-sizing: content-box; padding: .3rem .8rem; background: var(--g-cream); border: var(--g-bd); border-radius: 999px; }
/* Phones/tablets: the open menu is a list of pills; groups open in place */
:root #topnav .navbar-collapse:is(.show, .collapsing) { padding-top: .5rem; }
:root #topnav .navbar-collapse:is(.show, .collapsing) .navbar-nav { margin-left: 0; margin-right: 0; }
:root #topnav .navbar-collapse:is(.show, .collapsing) .navbar-nav > .nav-item > .nav-link { margin: .125rem 0; }
:root #topnav .navbar-collapse:is(.show, .collapsing) .dropdown-menu { margin: .25rem 0 .5rem; padding: .25rem 0 .25rem 1rem; background: transparent; border: 0; border-left: 2px dashed var(--g-hair); border-radius: 0; box-shadow: none; }

/* == 4. Left menu (#sidebar), if GoCall ever uses the left layout: the same pills down the side */
:root #sidebar.navbar-vertical { background-color: var(--g-bg); border-color: var(--g-line); }
@media (min-width: 768px) { :root #sidebar.navbar-vertical.fixed-start { border-right-width: 2px; } }
:root #sidebar .navbar-nav .nav-link { margin: 1px .75rem; padding: .45rem calc(.75rem - 2px); color: var(--g-ink); border: 2px solid transparent; border-radius: 999px; transition: background-color .15s, border-color .15s; }
:root #sidebar .navbar-nav .nav .nav-link { padding-left: 2.25rem; }
:root #sidebar .navbar-nav .nav-link:is(:hover, :focus-visible, .active) { color: var(--g-ink); background-color: var(--g-hover); border-color: var(--g-line); }
:root #sidebar .navbar-nav .nav-link.active::before { left: auto; right: .875rem; top: calc(50% - 4px); bottom: auto; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--g-pink); box-shadow: 0 0 0 2px var(--g-line); }
:root #sidebar .navbar-heading { color: var(--g-ink-2); font-size: .6875rem; letter-spacing: .08em; }
:root #sidebar .navbar-divider { background-color: var(--g-hair); }
:root #sidebar .navbar-user { border-top: 2px solid var(--g-line); }
/* The icon rails (collapse: toggle / auto): icons stay centred in the 66px column */
@media (min-width: 768px) {
  :root.cs-nav-collapsed #sidebar.cs-nav-toggle .navbar-nav .nav-link, :root #sidebar.cs-nav-auto .navbar-nav .nav-link { margin-left: 7px; margin-right: 7px; padding-left: 10px; padding-right: 10px; }
  :root.cs-nav-collapsed #sidebar.cs-nav-toggle .nav-link.active::before, :root #sidebar.cs-nav-auto:not(:hover, :focus-within) .nav-link.active::before { right: 2px; top: 2px; }
  :root #sidebar.cs-nav-auto:is(:hover, :focus-within) { box-shadow: 6px 0 0 var(--g-shadow); }
  :root #sidebar.cs-nav-toggle .cs-nav-toggle-btn { width: 26px; height: 26px; margin-top: -13px; color: #1e1147; background: var(--g-sun); border: var(--g-bd); box-shadow: var(--g-sh-xs); }
}

/* == 5. Page header (.header): GoCall's sunny band (purple at night) edge to edge
   over an ink rule, drawn with border-image (takes no space, can't scroll) and
   reaching up over the header's top margin (mt-4, mt-md-4/5) to the top bar.
   The pretitle becomes GoCall's sticker. */
:root .main-content .header:not([class*="bg-"]) { border-image: linear-gradient(to top, var(--g-line) 2px, var(--g-band) 2px) fill 0 / / var(--g-up, 0) 100vmax 0; }
:root .header.mt-4 { --g-up: 1.5rem; }
@media (min-width: 768px) { :root .header.mt-md-4 { --g-up: 1.5rem; } :root .header.mt-md-5 { --g-up: 2.25rem; } }
:root .main-content .header:not([class*="bg-"]) .header-body { border-bottom-color: transparent; }
:root .header-pretitle { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; font-size: .6875rem; letter-spacing: .08em; color: var(--g-ink); background: var(--g-surface); border: var(--g-bd); border-radius: 999px; box-shadow: var(--g-sh-xs); transform: rotate(-1.5deg); }
:root .header-pretitle::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--g-pink); border: var(--g-bd); }
:root .header-title { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -.035em; }
:root .header-subtitle { color: var(--g-ink-2); }
:root .header .header-tabs { margin-bottom: -.25rem; }
/* The open tab on the sun: a white sticker */
:root .header :is(.nav-tabs, .nav-pills) .nav-link.active { color: var(--g-ink); background-color: var(--g-surface); }
:root .header .header-tabs .nav-link { padding-top: .4375rem; padding-bottom: .4375rem; }

/* == 6. Cards, tables, DataTables */
:root .card:not(.card-flush) { color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: var(--g-r); box-shadow: var(--g-sh); }
:root :is(.card, .modal-content, .dropdown-menu, .offcanvas) .card { box-shadow: none; border-radius: 14px; }
:root .card-header { background-color: transparent; border-bottom: var(--g-bd); border-radius: calc(var(--g-r) - 2px) calc(var(--g-r) - 2px) 0 0; }
:root .card-header + .card-header { border-radius: 0; }
:root .card-header-title { font-size: 1.0625rem; letter-spacing: -.01em; }
:root .card-footer { background-color: transparent; border-top: 1px solid var(--g-hair); }
:root .card-footer:last-child { border-radius: 0 0 calc(var(--g-r) - 2px) calc(var(--g-r) - 2px); }
:root a.card { transition: transform .18s, box-shadow .18s; }
:root a.card:hover { transform: translate(-3px, -3px); box-shadow: var(--g-sh-lg); }
/* Tables: quiet rows, an ink rule under the heading */
:root .table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-hover-bg: var(--g-tint); --bs-table-striped-bg: var(--g-tint); --bs-table-active-bg: var(--g-hover); color: var(--g-ink); border-color: var(--g-hair); }
:root .table > :not(caption) > * > * { border-bottom-color: var(--g-hair); }
:root .table > :not(:first-child) { border-top-color: var(--g-line); }
:root .table thead :is(th, td) { color: var(--g-ink-2); background-color: transparent; border-bottom: var(--g-bd); font-weight: 500; }
:root .table thead :is(.list-sort, a.text-muted) { color: var(--g-ink-2) !important; }
:root .table-hover > tbody > tr:hover > * { color: var(--g-ink); }
:root .table > tbody > tr:last-child > * { border-bottom-color: transparent; }
/* DataTables (some of its CSS is !important) */
:root table.dataTable { color: var(--g-ink); border-width: 0; }
:root table.dataTable thead :is(th, td) { color: var(--g-ink-2); background-color: transparent; border-bottom: var(--g-bd) !important; font-weight: 500; }
:root table.dataTable:is(*, .display) tbody tr:is(*, .even) { background-color: var(--g-surface); }
:root table.dataTable:is(.display, .stripe) tbody tr.odd, :root table.dataTable.display tbody tr > .sorting_1 { background-color: var(--g-tint); }
:root table.dataTable.display tbody tr.even > .sorting_1 { background-color: transparent; }
:root table.dataTable:is(.display, .hover) tbody tr:hover > * { background-color: var(--g-hover); }
:root table.dataTable.display tbody :is(td, th) { border-top-color: var(--g-hair); }
:root table.dataTable.no-footer { border-bottom: var(--g-bd) !important; }
:root table.dataTable .button { color: var(--g-ink); background: var(--g-surface); border: var(--g-bd); border-radius: 999px; box-shadow: var(--g-sh-xs); font-weight: 500; transition: none; }
:root table.dataTable .button:hover { color: #fff; background: var(--g-purple); }
:root .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { color: var(--g-ink-2); }
:root .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input) { min-height: 2.25rem; padding: .25rem .75rem; color: var(--g-ink); background-color: var(--g-field); border: var(--g-bd); border-radius: 12px; }
:root .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--g-accent); box-shadow: 3px 3px 0 var(--g-accent); outline: 0; }
:root .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 2.25rem; margin-left: 6px !important; padding: .3rem .8rem !important; color: var(--g-ink) !important; background: var(--g-surface); border: var(--g-bd); border-radius: 999px; }
:root .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--g-ink) !important; background: var(--g-hover); border: var(--g-bd); }
:root .dataTables_wrapper .dataTables_paginate .paginate_button.current:is(*, :hover) { color: #1e1147 !important; background: var(--g-sun); border: var(--g-bd); box-shadow: var(--g-sh-xs); }
:root .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:is(*, :hover) { color: var(--g-ink-2) !important; background: var(--g-tint); border: 2px dashed var(--g-hair); }

/* == 7. Buttons: pills with an ink border and an offset shadow that grows on
   hover and is pressed flat on click. Each variant sets --g-btn-bg / -fg. */
:root .btn { --g-btn-bg: var(--g-surface); --g-btn-fg: var(--g-ink); --g-btn-sh: var(--g-shadow); }
:root .btn:not(.btn-link, .btn-white-20):is(*, :hover, :focus, :active, .active, .show) { color: var(--g-btn-fg); background-color: var(--g-btn-bg); border-color: var(--g-line); }
:root .btn:not(.btn-link, .btn-white-20) { border-width: 2px; border-radius: 999px; font-weight: 500; box-shadow: 3px 3px 0 var(--g-btn-sh); transition: transform .15s, box-shadow .15s, background-color .15s, color .15s; }
/* Room for the round ends (not on round icon buttons, whose size is fixed) */
:root .btn:not(.btn-link, .btn-white-20, .btn-rounded-circle, .btn-icon) { padding-left: 1.125rem; padding-right: 1.125rem; }
:root .btn.btn-sm:not(.btn-link, .btn-white-20, .btn-rounded-circle, .btn-icon) { padding-left: .8rem; padding-right: .8rem; }
:root .btn:not(.btn-link, .btn-white-20):is(:hover, :focus-visible) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--g-btn-sh); }
:root .btn:not(.btn-link, .btn-white-20):is(:active, .show) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--g-btn-sh); }
:root .btn.btn-sm:not(.btn-link, .btn-white-20) { box-shadow: 2px 2px 0 var(--g-btn-sh); }
:root .btn.btn-sm:not(.btn-link, .btn-white-20):is(:hover, :focus-visible) { box-shadow: 4px 4px 0 var(--g-btn-sh); }
:root .btn-primary, :root .btn-outline-primary:is(:hover, :active) { --g-btn-bg: var(--g-purple); --g-btn-fg: #fff; }
:root .btn-success, :root .btn-outline-success:is(:hover, :active) { --g-btn-bg: var(--g-green); --g-btn-fg: #fff; }
:root .btn-danger, :root .btn-outline-danger:is(:hover, :active) { --g-btn-bg: var(--g-red); --g-btn-fg: #fff; }
:root .btn-warning, :root .btn-outline-warning:is(:hover, :active) { --g-btn-bg: var(--g-sun); --g-btn-fg: #1e1147; }
:root .btn-info, :root .btn-outline-info:is(:hover, :active) { --g-btn-bg: var(--g-sky); --g-btn-fg: #1e1147; }
:root .btn-dark { --g-btn-bg: #1e1147; --g-btn-fg: #fff; --g-btn-sh: var(--g-purple); }
/* A chosen toggle or filter button is sunny, as GoCall marks what's selected */
:root .btn:is(.btn-white, .btn-light, .btn-secondary, [class*="btn-outline-"]):is(.active, .btn-check:checked + *) { --g-btn-bg: var(--g-sun); --g-btn-fg: #1e1147; }
/* Outline buttons: meaning kept in the text colour */
:root .btn-outline-success:not(:hover, :active) { --g-btn-fg: var(--g-green); }
:root .btn-outline-danger:not(:hover, :active) { --g-btn-fg: var(--g-red); }
:root .btn-outline-warning:not(:hover, :active) { --g-btn-fg: var(--g-t-warn); }
:root .btn-outline-info:not(:hover, :active) { --g-btn-fg: var(--g-t-info); }
:root[data-theme=dark] .btn-outline-success:not(:hover, :active) { --g-btn-fg: var(--g-t-ok); }
:root[data-theme=dark] .btn-outline-danger:not(:hover, :active) { --g-btn-fg: var(--g-t-bad); }
:root[data-theme=dark] .btn-primary { --g-btn-bg: #6a4ae6; }
/* The dark scheme's own white/light button rules are very specific */
:root[data-theme=dark] .btn:is(.btn-white, .btn-light) { color: var(--g-btn-fg) !important; background-color: var(--g-btn-bg) !important; border-color: var(--g-line) !important; }
/* Disabled: GoCall's dashed pill */
:root .btn:not(.btn-link, .btn-white-20):is(:disabled, .disabled), :root fieldset:disabled .btn:not(.btn-link) { color: var(--g-ink-2); background-color: var(--g-surface); border-style: dashed; border-color: var(--g-line); box-shadow: none; transform: none; opacity: .85; }
:root .btn-link { color: var(--g-link); text-decoration-thickness: 2px; }
:root .btn-link:hover { color: var(--g-purple-2); text-decoration: underline; }
/* Joined buttons: one shadow round the group, the chosen one sunny */
:root .btn-group { border-radius: 999px; box-shadow: var(--g-sh-sm); }
:root .btn-group > .btn:not(.btn-link, .btn-white-20):is(*, :hover, :focus-visible, :active) { border-radius: 0; box-shadow: none; transform: none; }
:root .btn-group > .btn:not(:first-child) { margin-left: -2px; }
:root .btn-group > :is(.btn:first-child, .btn-check:first-child + .btn):not(.btn-link, .btn-white-20) { margin-left: 0; border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
:root .btn-group > .btn:not(.btn-link, .btn-white-20):last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
:root .btn-group > .btn:hover:not(.active) { --g-btn-bg: var(--g-hover); }
:root .btn-group > :is(.btn.active, .btn-check:checked + .btn) { --g-btn-bg: var(--g-sun); --g-btn-fg: #1e1147; }
/* In an input group: flush, no shadow */
:root .input-group > .btn:not(.btn-link):is(*, :hover, :focus-visible, :active) { border-radius: 0; box-shadow: none; transform: none; }
:root .input-group > .btn:not(.btn-link):last-child { border-radius: 0 12px 12px 0; }
:root .input-group > .btn:not(.btn-link):first-child { border-radius: 12px 0 0 12px; }
:root .input-group > .btn:hover { --g-btn-bg: var(--g-hover); }
:root .btn-white-20 { border-radius: 999px; }

/* == 8. Badges, alerts, the selection bar */
/* Badges: GoCall's stamps, a pill with an ink outline */
:root .badge { border: 1.5px solid var(--g-line); border-radius: 999px; font-weight: 500; letter-spacing: .01em; }
:root .nav-link .badge { border-width: 1px; }
:root .badge.bg-primary { color: #fff; background-color: var(--g-purple) !important; }
:root .badge.bg-secondary { color: #1e1147; background-color: var(--g-lav-2) !important; }
:root .badge.bg-success { color: #fff; background-color: var(--g-green) !important; }
:root .badge.bg-danger { color: #fff; background-color: var(--g-red) !important; }
:root .badge.bg-warning { color: #1e1147; background-color: var(--g-sun) !important; }
:root .badge.bg-info { color: #1e1147; background-color: var(--g-sky) !important; }
:root .badge.bg-light { color: var(--g-ink); background-color: var(--g-surface) !important; }
:root .badge.bg-dark { color: #fff; background-color: #1e1147 !important; }
/* Soft badges: GoCall's tints, readable text, meaning kept in both schemes */
:root .badge.bg-primary-soft { color: var(--g-t-calm); background-color: var(--g-calm) !important; }
:root .badge.bg-secondary-soft { color: #1e1147; background-color: #f1ece4 !important; }
:root .badge.bg-success-soft { color: var(--g-t-ok); background-color: var(--g-ok) !important; }
:root .badge.bg-danger-soft { color: var(--g-t-bad); background-color: var(--g-bad) !important; }
:root .badge.bg-warning-soft { color: var(--g-t-warn); background-color: var(--g-warn) !important; }
:root .badge.bg-info-soft { color: var(--g-t-info); background-color: var(--g-info) !important; }
:root :is(.badge.bg-light-soft, .badge.bg-dark-soft), :root[data-theme=dark] :where(.badge[class*="-soft"]), :root[data-theme=dark] .badge.bg-secondary-soft { color: var(--g-ink); background-color: var(--g-tint) !important; }
/* Alerts: chunky callouts on a tint */
:root .alert { color: var(--g-ink); border: var(--g-bd); border-radius: 16px; box-shadow: var(--g-sh-sm); }
:root :is(.alert-primary, .alert-secondary) { background-color: var(--g-calm); }
:root .alert-success { background-color: var(--g-ok); }
:root .alert-warning { background-color: var(--g-warn); }
:root .alert-danger { background-color: var(--g-bad); }
:root .alert-info { background-color: var(--g-info); }
:root .alert-light { background-color: var(--g-tint); }
:root .alert:not(.alert-dark) .alert-link { color: inherit; text-decoration: underline; }
:root .alert:not(.alert-dark) .btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e1147'%3E%3Cpath d='M.3.3a1 1 0 0 1 1.4 0L8 6.6 14.3.3a1 1 0 1 1 1.4 1.4L9.4 8l6.3 6.3a1 1 0 0 1-1.4 1.4L8 9.4l-6.3 6.3a1 1 0 0 1-1.4-1.4L6.6 8 .3 1.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); opacity: .7; }
:root[data-theme=dark] .alert:not(.alert-dark) .btn-close { filter: invert(1); }
:root .alert-dark { color: #fff; background-color: #1e1147; border-color: #1e1147; }
/* The bar that appears when rows are ticked (.list-alert): a navy pill with a pink shadow */
:root .list-alert.alert { padding-left: 1.5rem; border: var(--g-bd); border-radius: 999px; box-shadow: 5px 5px 0 var(--g-pink); }
:root .list-alert.border { border-color: #1e1147 !important; }
:root .list-alert .btn-white-20 { color: #fff; background-color: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .35); }
:root .list-alert .btn-white-20:hover { color: #1e1147; background-color: var(--g-sun); border-color: var(--g-sun); }

/* == 9. Forms and pickers: ink border, cream inside, a purple shadow on focus.
   Flush fields (searches in card headers) stay flush. */
:root :is(.form-control, .form-select) { color: var(--g-ink); background-color: var(--g-field); border: var(--g-bd); border-radius: 12px; transition: box-shadow .15s, background-color .15s, border-color .15s; }
:root :is(.form-control, .form-select):hover { background-color: var(--g-surface); }
:root :is(.form-control, .form-select):focus { color: var(--g-ink); background-color: var(--g-surface); border-color: var(--g-accent); box-shadow: 3px 3px 0 var(--g-accent); }
:root .form-control::placeholder { color: #6c6390; opacity: 1; }
:root[data-theme=dark] .form-control::placeholder { color: #a59bd0; }
/* Read-only and disabled: dashed (date pickers are read-only but still open) */
:root :is(.form-control, .form-select):is(:disabled, [readonly]:not(.flatpickr-input)) { color: var(--g-ink-2); background-color: var(--g-tint) !important; border-style: dashed; }
:root .form-control.flatpickr-input[readonly]:not(:hover, :focus) { background-color: var(--g-field); }
:root :is(.form-control, .form-select).is-invalid { border-color: var(--g-red); }
:root :is(.form-control, .form-select).is-invalid:focus { box-shadow: 3px 3px 0 var(--g-red); }
:root :is(.form-control, .form-select).is-valid { border-color: var(--g-green); }
:root .invalid-feedback { color: var(--g-red); }
:root[data-theme=dark] .invalid-feedback { color: #ff8fab; }
:root :is(.form-label, label) { color: var(--g-ink); }
:root .form-text { color: var(--g-ink-2); }
:root .input-group-text { color: var(--g-ink); background-color: var(--g-hover); border: var(--g-bd); border-radius: 12px; }
:root .input-group:not(.input-group-merge) > :not(:first-child, .dropdown-menu) { margin-left: -2px; }
:root .input-group:not(.has-validation) > :not(:last-child, .dropdown-toggle, .dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
:root .input-group > :not(:first-child, .dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
:root .input-group:focus-within { z-index: 3; }
/* Merged groups (an icon inside the field) */
:root .input-group-merge > .input-group-text { background-color: var(--g-field); }
:root .input-group-merge:not(.input-group-reverse) > .form-control, :root .input-group-merge.input-group-reverse > .input-group-text { border-right-width: 0; }
:root .input-group-merge:not(.input-group-reverse) > .input-group-text, :root .input-group-merge.input-group-reverse > .form-control { border-left-width: 0; }
:root .input-group-merge > .form-control:focus { box-shadow: none; }
:root .input-group-merge:focus-within > * { border-color: var(--g-accent); }
/* Flush fields */
:root .input-group-flush > :is(.form-control, .input-group-text):is(*, :hover, :focus), :root .form-control.form-control-flush:is(*, :focus) { background-color: transparent; border-color: transparent; box-shadow: none; }
/* Ticks, radios and switches */
:root .form-check-input { background-color: var(--g-field); border: var(--g-bd); }
:root .form-check-input:checked { background-color: var(--g-purple); border-color: var(--g-line); }
:root .form-check-input:focus { border-color: var(--g-line); box-shadow: 0 0 0 3px rgba(87, 51, 209, .3); }
:root .form-switch .form-check-input:not(:checked) { background-color: var(--g-lav-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%231e1147'/%3E%3C/svg%3E"); }
:root[data-theme=dark] .form-switch .form-check-input:not(:checked) { background-color: #c4bbe8; }
:root[data-theme=dark] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
/* Date picker (flatpickr) */
:root .flatpickr-calendar { background-color: var(--g-surface); border: var(--g-bd); border-radius: 16px; box-shadow: var(--g-sh); }
:root .flatpickr-calendar .flatpickr-day:hover { background-color: var(--g-hover); border-color: var(--g-hover); }
:root .flatpickr-calendar::before, :root .flatpickr-calendar::after { display: none; }
:root .flatpickr-day:is(.selected, .startRange, .endRange) { color: #1e1147; background: var(--g-sun); border-color: var(--g-line); }
:root .flatpickr-day.today:not(.selected) { border-color: var(--g-pink); }

/* == 10. Tabs, pills, pagination, breadcrumbs: GoCall's pills; the open one is sunny */
:root .nav-tabs { border-bottom: 0; gap: .375rem; }
:root .nav-tabs .nav-item { margin: 0; }
:root :is(.nav-tabs, .nav-pills) .nav-link { display: inline-flex; align-items: center; gap: .375rem; margin: 0; padding: .4375rem .95rem; color: var(--g-ink); background: transparent; border: 2px solid transparent; border-radius: 999px; white-space: nowrap; transition: background-color .15s, border-color .15s; }
:root .nav-tabs .nav-link:not(.active) { color: var(--g-ink); }
:root :is(.nav-tabs, .nav-pills) .nav-link:not(.active):hover { color: var(--g-ink); background-color: var(--g-hover); border-color: var(--g-line); }
:root :is(.nav-tabs, .nav-pills) :is(.nav-link.active, .show > .nav-link) { color: #1e1147; background-color: var(--g-sun); border-color: var(--g-line); box-shadow: var(--g-sh-xs); }
:root .nav-tabs-sm .nav-link { padding: .3125rem .8rem; }
/* Tabs in a card header (the theme's padding there is !important) */
:root .card-header-tabs { margin: 0 0 0 auto; }
:root .card-header .card-header-tabs .nav-link { padding-top: .3125rem !important; padding-bottom: .3125rem !important; }
:root .nav-overflow { padding: 2px 4px 5px 2px; }
:root .pagination { gap: .375rem; }
:root .pagination .page-item .page-link { min-width: 2.25rem; margin-left: 0; text-align: center; color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 999px; }
:root .pagination .page-item .page-link:hover { color: var(--g-ink); background-color: var(--g-hover); }
:root .pagination .page-item.active .page-link { color: #1e1147; background-color: var(--g-sun); border-color: var(--g-line); box-shadow: var(--g-sh-xs); }
:root .pagination .page-item.disabled .page-link { color: var(--g-ink-2); background-color: var(--g-tint); border-style: dashed; }
:root .breadcrumb-item a { color: var(--g-ink-2); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(127, 116, 160, .5); }
:root .breadcrumb-item a:hover { color: var(--g-ink); text-decoration-color: var(--g-pink); }
:root .breadcrumb-item.active { color: var(--g-ink); }

/* == 11. Menus, modals, offcanvas, popovers, tooltips, toasts */
:root .dropdown-menu { padding: .375rem; color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 16px; box-shadow: var(--g-sh); }
:root .dropdown-item { color: var(--g-ink); border-radius: 10px; }
:root .dropdown-item:is(:hover, :focus) { color: var(--g-ink); background-color: var(--g-hover); }
:root .dropdown-item:active { color: #1e1147; background-color: var(--g-sun); }
/* The page you're on, in a menu: lavender with an ink outline */
:root :is(.dropdown-menu, #topnav .dropdown-menu) .dropdown-item.active { color: var(--g-ink); background-color: var(--g-hover); box-shadow: inset 0 0 0 2px var(--g-line); }
:root .dropdown-item.text-danger { color: var(--g-red) !important; }
:root .dropdown-item.text-danger :is(i, .cs-nav-icon) { color: inherit; }
:root[data-theme=dark] .dropdown-item.text-danger { color: #ff8fab !important; }
:root :is(.dropdown-item .cs-nav-icon, .dropdown-item > i:first-child) { color: var(--g-link); }
:root .dropdown-header { color: var(--g-ink-2); }
:root .dropdown-divider { border-top-color: var(--g-hair); }
:root .dropdown-ellipses { color: var(--g-ink-2); }
:root .modal-content { color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 24px; box-shadow: 10px 10px 0 var(--g-shadow); }
:root .modal-header { border-bottom: 1px solid var(--g-hair); }
:root .modal-footer { border-top: 1px solid var(--g-hair); }
:root .modal-title { letter-spacing: -.02em; }
:root .modal-backdrop { background-color: #1e1147; }
:root .modal-fullscreen .modal-content { border-radius: 0; box-shadow: none; }
:root .offcanvas { color: var(--g-ink); background-color: var(--g-surface); }
:root .offcanvas-end { border-left: var(--g-bd); }
:root .offcanvas-start { border-right: var(--g-bd); }
:root .offcanvas-top { border-bottom: var(--g-bd); }
:root .offcanvas-bottom { border-top: var(--g-bd); }
:root .offcanvas-header { border-bottom: 1px solid var(--g-hair); }
/* Popovers (also chart hover labels): a small sticker, no arrow */
:root .popover { color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 14px; box-shadow: var(--g-sh-sm); }
:root .popover .popover-arrow { display: none; }
:root .popover-header { background-color: var(--g-tint); border-bottom-color: var(--g-hair); border-radius: 12px 12px 0 0; }
:root .popover-body { color: var(--g-ink-2); }
:root .tooltip-inner { border-radius: 10px; font-weight: 500; }
:root .toast { color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 16px; box-shadow: var(--g-sh); }
:root .toast-header { color: var(--g-ink); background-color: var(--g-tint); border-bottom-color: var(--g-hair); border-radius: 14px 14px 0 0; }

/* == 12. List groups, accordions, progress, avatars */
:root .list-group-item { color: var(--g-ink); background-color: transparent; border-color: var(--g-hair); }
:root .list-group-flush > .list-group-item { border-width: 0 0 1px; }
:root .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }
:root .list-group:not(.list-group-flush) { overflow: hidden; background-color: var(--g-surface); border: var(--g-bd); border-radius: 18px; box-shadow: var(--g-sh-sm); }
:root .card .list-group:not(.list-group-flush) { box-shadow: none; }
:root .list-group:not(.list-group-flush) > .list-group-item { border-width: 0 0 1px; }
:root .list-group:not(.list-group-flush) > .list-group-item:last-child { border-bottom: 0; }
:root .list-group-item-action:hover { background-color: var(--g-tint); }
:root .list-group-item.active { color: #1e1147; background-color: var(--g-sun); border-color: var(--g-hair); }
:root .list-group-flush > .list-group-item.active { padding-left: .75rem; padding-right: .75rem; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--g-line); }
:root .accordion-item { overflow: hidden; color: var(--g-ink); background-color: var(--g-surface); border: var(--g-bd); border-radius: 18px !important; box-shadow: var(--g-sh-sm); }
:root .accordion-item + .accordion-item { margin-top: .75rem; }
:root .accordion-flush .accordion-item { border: 0; border-top: 1px solid var(--g-hair); border-radius: 0 !important; box-shadow: none; }
:root .accordion-button { color: var(--g-ink); background-color: var(--g-surface); font-weight: 500; box-shadow: none !important; }
:root .accordion-button:not(.collapsed) { color: var(--g-ink); background-color: var(--g-tint); border-bottom: var(--g-bd); }
/* The toggle: GoCall's round FAQ button, sunny when open */
:root .accordion-button::after { width: 1.75rem; height: 1.75rem; background: var(--g-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231e1147' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E") center / .75rem no-repeat; border: var(--g-bd); border-radius: 50%; filter: none !important; }
:root .accordion-button:not(.collapsed)::after { background-color: var(--g-sun); }
:root .progress { height: .875rem; background-color: var(--g-surface); border: var(--g-bd); border-radius: 999px; }
:root .progress.progress-sm { height: .625rem; }
:root .progress-bar { border-radius: 999px; }
:root .progress-bar:not([class*="bg-"]) { background-color: var(--g-accent); }
:root :is(.avatar-img, .avatar-title).rounded-circle { box-shadow: 0 0 0 2px var(--g-line); }
:root .avatar-title:not([class*="bg-"]) { color: var(--g-link); background-color: var(--g-hover); }

/* == 13. AI Agents /new/ (body.nw): the --nw-* tokens in section 1, plus the chunky outline */
:root .nw :is(.nw-stat, .nw-agent, .nw-hero, .nw-note) { background-color: var(--g-surface); border: var(--g-bd); box-shadow: var(--g-sh); }
:root .nw :is(.nw-stat, .nw-agent):hover { transform: translate(-3px, -3px); box-shadow: var(--g-sh-lg); }
:root .nw .nw-agent::before { height: .375rem; border-bottom: var(--g-bd); }
:root .nw :is(.nw-stat-icon, .nw-empty-icon, .nw-new-card .plus) { color: var(--g-link); background: var(--g-hover); border: var(--g-bd); border-radius: 50%; }
:root .nw .nw-stat-icon.is-success { color: var(--g-t-ok); background: var(--g-ok); }
:root .nw .nw-stat-icon.is-warning { color: var(--g-t-warn); background: var(--g-warn); }
:root .nw .nw-stat-icon.is-danger { color: var(--g-t-bad); background: var(--g-bad); }
:root .nw .nw-stat-icon.is-info { color: var(--g-t-info); background: var(--g-info); }
:root .nw .nw-avatar { border: var(--g-bd); border-radius: 50%; box-shadow: var(--g-sh-xs); }
:root .nw .nw-seg { background: var(--g-surface); border: var(--g-bd); border-radius: 999px; box-shadow: var(--g-sh-sm); }
:root .nw .nw-seg :is(a, button, label) { color: var(--g-ink); border: 2px solid transparent; border-radius: 999px; }
:root .nw .nw-seg :is(a, button, label):hover { background: var(--g-hover); }
:root .nw .nw-seg :is(a.active, button.active, .btn-check:checked + label) { color: #1e1147; background: var(--g-sun); border-color: var(--g-line); box-shadow: none; }
:root .nw .nw-seg .count { color: var(--g-ink); background: var(--g-tint); }
:root .nw .nw-seg :is(a.active, button.active) .count { color: #1e1147; background: rgba(255, 255, 255, .6); }
:root .nw .nw-search .form-control { border-radius: 999px; }
:root .nw .nw-search i.fe { z-index: 4; color: var(--g-ink-2); }
:root .nw .nw-pill { border: 1.5px solid currentColor; }
:root .nw .nw-tag { color: var(--g-ink); background: var(--g-tint); border: 1.5px solid var(--g-hair); border-radius: 999px; }
:root .nw .nw-new-card { color: var(--g-ink); border: 2px dashed var(--g-line); border-radius: var(--g-r); }
:root .nw .nw-new-card:hover { color: var(--g-ink); background: var(--g-surface); border-style: solid; box-shadow: var(--g-sh); }
:root .nw .nw-flash { color: var(--g-ink); border: var(--g-bd); box-shadow: var(--g-sh-sm); }
:root .nw .nw-flash.is-success { background: var(--g-ok); }
:root .nw .nw-flash.is-danger { background: var(--g-bad); }
:root .nw .nw-flash.is-warning { background: var(--g-warn); }
:root .nw .nw-flash.is-info { background: var(--g-calm); }
:root .nw .btn-primary { filter: none; }
/* AI Agents' first-time setup (/setup) is a dark page of its own: its titles stay white */
:root .setup-card .setup-title { color: #fff; }

/* == 14. Sign-in page (Studio's templates, .lp-*): the Centred card on GoCall's
   sunny page, a slow sunburst behind a chunky card, the link as a purple pill */
:root[data-cs-page=signin] .lp { --fg2: #1e1147; --muted2: #4a3f6b; --line2: #1e1147; --field: #fffdf8; --soft: var(--g-lav); --link: var(--g-purple); font-family: var(--g-font); }
:root[data-cs-page=signin] .lp.tpl-card { isolation: isolate; background: var(--g-sun); }
:root[data-cs-page=signin] .tpl-card :is(.lp-img, .lp-ov) { display: none; }
:root[data-cs-page=signin] .lp.tpl-card::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(160vmax, 1400px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .45) 0deg 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); animation: gc-spin 240s linear infinite; pointer-events: none; }
:root[data-cs-page=signin] .tpl-card .lp-card { max-width: 460px; background: #fff; border: 2px solid #1e1147; border-radius: 32px; box-shadow: 12px 12px 0 #1e1147; }
/* GoCall's pink sparkle on the card's corner */
:root[data-cs-page=signin] .tpl-card .lp-card::before { content: ""; position: absolute; top: -16px; right: 34px; width: 32px; height: 32px; background: var(--g-pink); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: gc-twinkle 3.4s ease-in-out infinite; }
:root[data-cs-page=signin] .lp-logo img { max-height: 44px; }
:root[data-cs-page=signin] .lp-h { color: #1e1147; font-weight: 500; letter-spacing: -.035em; }
:root[data-cs-page=signin] .tpl-card .lp-h { font-size: 34px; }
:root[data-cs-page=signin] .lp-sub { color: #4a3f6b; }
:root[data-cs-page=signin] .lp-msg { color: #1e1147; background: var(--g-lav); border: 2px solid #1e1147; border-radius: 16px; }
:root[data-cs-page=signin] .lp-btn { min-height: 52px; font-size: 16px; font-weight: 500; color: #fff; background: var(--g-purple); border: 2px solid #1e1147; border-radius: 999px; box-shadow: 4px 4px 0 #1e1147; transition: transform .15s, box-shadow .15s; }
:root[data-cs-page=signin] .lp-btn:hover { background: var(--g-purple); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1e1147; }
:root[data-cs-page=signin] .lp-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1e1147; }
:root[data-cs-page=signin] .lp-btn:focus-visible { outline-color: #1e1147 !important; outline-offset: 3px; }
:root[data-cs-page=signin] .lp-input { border: 2px solid #1e1147; border-radius: 14px; }
:root[data-cs-page=signin] .lp-input:focus { border-color: var(--g-purple); box-shadow: 3px 3px 0 var(--g-purple); }
:root[data-cs-page=signin] .lp-a { color: var(--g-purple); text-decoration: underline; text-decoration-thickness: 2px; }
:root[data-cs-page=signin] .lp-alert { color: #8f0f2f; background: var(--g-blush); border: 2px solid #1e1147; border-radius: 14px; }
:root[data-cs-page=signin] .lp-foot { color: #4a3f6b; }
:root[data-cs-page=signin] .tpl-card .lp-foot { color: #1e1147; text-shadow: none; }
@media (max-width: 760px) { :root[data-cs-page=signin] .tpl-card .lp-card { box-shadow: 7px 7px 0 #1e1147; } :root[data-cs-page=signin] .tpl-card .lp-h { font-size: 28px; } }

/* == 15. Motion and print */
@keyframes gc-spin { to { rotate: 360deg; } }
@keyframes gc-twinkle { 50% { transform: scale(.6) rotate(45deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  :root :not(.spinner-border, .spinner-grow), :root ::before, :root ::after { animation: none !important; transition: none !important; }
  :root :is(.btn, a.card, .navbar-user-link, .lp-btn, .nw-stat, .nw-agent):hover { transform: none !important; }
}
@media print {
  :root body { background: #fff !important; }
  :root :is(.card, .btn, .alert, .list-group, .accordion-item) { box-shadow: none !important; }
  :root .main-content .header { border-image: none; }
}