:root {
    /* Round 11 FIFTEENTH follow-up - explicit user request: "change the
       theme to AURO Messenger which is available in my Artifacts" (full
       retheme, as selected via the clarifying question). Canonical brand
       tokens below are pulled from the AURO Messenger design system
       (a published Artifact, Design System type: project/tokens.json +
       project/README.md). Every existing --navy-, --amber- and --heading
       etc. variable name below is kept exactly as-is - only its VALUE is
       remapped to draw from these brand tokens - so none of the many
       call sites that already consume them via var() needed to change. */
    --brand-teal-strong: #12977e;
    --brand-teal: #0f9179;
    --brand-navy: #143a63;
    --ink: #1b2733;
    --ink-muted: #66707c;
    --ink-faint: #9aa4b0;
    --on-brand: #ffffff;
    --surface-sunken: #f4f6f8;
    --surface-line: #eef1f4;
    --bubble-sent: #dcf0ea;
    --danger: #c94a4a;
    --font-sans: 'Manrope', -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Marcellus', Georgia, serif;

    --navy-950: #0a1826;
    --navy-900: var(--brand-navy);
    --navy-800: #1d4a75;
    --navy-700: #2c5f92;
    --navy-600: #3f7aad;
    --amber-100: #d9f2ec;
    --amber-400: #17a888;
    --amber-500: var(--brand-teal);
    --amber-600: #0c7a66;
    --bg: var(--surface-sunken);
    --surface: #ffffff;
    --surface-2: #fbfdfc;
    /* 70%-transparent version of --surface (bumped up in two explicit
       user follow-ups: 30% -> "change to 50% transperent" -> "make 70%
       transperent"), paired with backdrop-filter: blur() wherever a
       floating element (the nav submenu card - see
       .nav-dropdown-menu-inner below) needs to look genuinely see-through
       rather than just a plain solid card - the blur is what keeps its
       own text legible over whatever busy page content ends up
       underneath it, instead of a flat rgba() alone letting sharp
       colors/edges bleed straight through unblurred. Kept as its own
       token (not computed from --surface at use-site) so it stays in
       lockstep with --surface's own light/dark values without a second
       place to update. */
    --surface-translucent: rgba(255, 255, 255, 0.3);
    --border: var(--surface-line);
    --text: var(--ink);
    --text-muted: var(--ink-muted);
    --heading: var(--ink);
    --link: var(--brand-navy);
    --link-hover: var(--brand-teal-strong);
    --accent-navy: var(--navy-800);
    --accent-navy-hover: var(--navy-700);
    --green: #15803d;
    --green-bg: #ecfdf3;
    --red: #dc2626;
    --red-bg: #fef2f2;

    --blue: #2563eb;
    --blue-bg: #eff6ff;
    --neutral-bg: #eef1f4;
    --neutral-text: #57606a;
    --warning-text: #92400e;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(20, 58, 99, 0.08);
    --shadow-md: 0 6px 20px rgba(20, 58, 99, 0.12);
    --shadow-lg: 0 16px 40px rgba(20, 58, 99, 0.18);
    --glow-amber: 0 0 0 3px rgba(15, 145, 121, 0.18);
    --gradient-gold: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    --gradient-navy: linear-gradient(165deg, var(--brand-teal-strong) 0%, var(--brand-navy) 100%);
    /* Round 11 EIGHTEENTH follow-up - explicit user request: after a
       ten-then-eight-option design review (two published Artifact
       boards - a plain-text "transparent" set the user judged too
       flat, "green colour buttons are not looking good... design 10
       different styles, no code. only design", followed by a second,
       explicitly premium-glossy set, "Liquid Glass is good... only
       design ateleast 6, no code"), the user picked "Liquid Glass": a
       frosted, blurred glass surface with a curved specular highlight,
       not a flat fill. These are its tokens - see the `button` rule
       below for how they're used. Opacity is tuned higher than the
       design board's own showcase value (that board deliberately
       floated its glass buttons over a rich, colorful bokeh field so
       the refraction was obvious for comparison; this console's real
       primary buttons mostly sit on plain white/light-grey cards and
       forms, not a colorful backdrop) so white button text stays
       comfortably AA-compliant (contrast ~6.8:1 measured against
       --surface) with or without backdrop-filter support - the exact
       same "safe even unblurred" reasoning already used for
       --surface-translucent above, so no separate @supports fallback
       branch was needed here either. */
    --glass-fill: rgba(20, 58, 99, 0.82);
    --glass-fill-hover: rgba(20, 58, 99, 0.9);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 38%, rgba(255, 255, 255, 0) 62%);
    --glass-shadow: 0 8px 20px -6px rgba(10, 30, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --glass-shadow-hover: 0 12px 26px -6px rgba(10, 30, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    --radius-full: 999px;
    --scrollbar-thumb: #c7cedb;
    --scrollbar-track: transparent;
    --color-scheme: light;
    /* Round 11 TWELFTH follow-up - explicit user request: "i want a
       fixed footer with a copyright statement and it should be fixed
       at the bootom of the window, not end of the page, just like menu
       bar." One fixed pixel height, shared by .site-footer's own rule
       and by every other rule that needs to leave room for it (the
       hero split panels' min-height, the normal pages' bottom padding)
       so they can never drift out of sync. */
    --site-footer-h: 44px;
}

:root[data-theme="dark"] {
    /* Round 11 FIFTEENTH follow-up (AURO Messenger retheme) - the source
       design system only defines a light theme, so these dark-mode
       brand-token values are derived to keep the same teal/navy identity
       legible on a dark ground (brighter, slightly desaturated teal;
       deeper navy) rather than lifted from the design system directly. */
    --brand-teal-strong: #1fae8f;
    --brand-teal: #22ab8f;
    --brand-navy: #0f2c4d;
    --ink: #eef1f7;
    --ink-muted: #93a0bd;
    --ink-faint: #6b7690;
    --on-brand: #ffffff;
    --surface-sunken: #0b0f19;
    --surface-line: rgba(255, 255, 255, 0.09);
    --bubble-sent: rgba(15, 145, 121, 0.18);
    --danger: #f87171;

    --amber-100: rgba(15, 145, 121, 0.18);
    --amber-400: #2bbfa0;
    --amber-500: var(--brand-teal);
    --amber-600: #1c9880;
    --bg: var(--surface-sunken);
    --surface: #131a2b;
    --surface-2: #1a2338;
    --surface-translucent: rgba(19, 26, 43, 0.3);
    --border: var(--surface-line);
    --text: var(--ink);
    --text-muted: var(--ink-muted);
    --heading: #f5f7fc;
    --link: #8fb8e6;
    --link-hover: var(--amber-400);
    --accent-navy: #2c4a72;
    --accent-navy-hover: #3c5f8f;
    --green: #34d399;
    --green-bg: rgba(52, 211, 153, 0.14);
    --red: #f87171;
    --red-bg: rgba(248, 113, 113, 0.14);
    --blue: #60a5fa;
    --blue-bg: rgba(96, 165, 250, 0.16);
    --neutral-bg: rgba(255, 255, 255, 0.07);
    --neutral-text: #a7b1c6;
    --warning-text: #ffcc80;
    --shadow-sm: 0 1px 2px rgba(5, 12, 22, 0.4);
    --shadow-md: 0 8px 24px rgba(5, 12, 22, 0.5);
    --shadow-lg: 0 20px 48px rgba(5, 12, 22, 0.6);
    --glow-amber: 0 0 0 3px rgba(43, 191, 160, 0.28), 0 0 18px rgba(43, 191, 160, 0.18);
    --gradient-gold: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    --gradient-navy: linear-gradient(165deg, var(--brand-teal-strong) 0%, var(--brand-navy) 100%);
    /* Round 11 EIGHTEENTH follow-up - dark counterpart of the Liquid
       Glass tokens above. The dark surface is already a deep navy, so
       a much lower fill opacity still keeps white button text at very
       high contrast (~14:1 measured against --card-bg - the dark
       ground itself does most of the contrast work) while reading as
       noticeably more see-through/"glassy" than the light-mode value
       can safely be. */
    --glass-fill: rgba(20, 58, 99, 0.48);
    --glass-fill-hover: rgba(20, 58, 99, 0.62);
    --glass-border: rgba(255, 255, 255, 0.22);
    --glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0) 62%);
    --glass-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --glass-shadow-hover: 0 12px 28px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --scrollbar-thumb: #33405e;
    --scrollbar-track: #131a2b;
    --color-scheme: dark;
}

html {
    color-scheme: var(--color-scheme);
}

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
::selection {
    background: rgba(245, 158, 11, 0.35);
    color: var(--heading);
}
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;

    transition: background-color 0.18s ease, color 0.18s ease;
}
h1, h2, h3, h4 {
    font-family: inherit;
    color: var(--heading);
}
h1 {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.7rem;
}
h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.55rem;
}
h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0.6rem 0 0.3rem;
}
h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.55rem 0 0.3rem;
}

p {
    margin: 0 0 0.55rem;
}
main.page a {
    color: var(--link);
    text-decoration-color: rgba(36, 48, 79, 0.35);
}
main.page a:hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

/* Round 11 TWENTY-FIRST follow-up - explicit user request, illustrated
   with two screenshots of the top nav bar: "use the top also dark navy,
   instead of gradiant. also allign the menu button clours to match
   it." Swapped the teal-to-navy `var(--gradient-navy)` background for a
   flat `var(--brand-navy)` fill - the same token already used for every
   solid-navy primary button, so the nav bar now reads as the same
   "navy" as the rest of the console rather than its own separate
   gradient treatment. See `.nav-dropdown-trigger.active` a few rules
   below for the one menu-button color this also required realigning. */
nav.topnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    background: var(--brand-navy);
    color: #fff;
    padding: 0.55rem 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    position: sticky;
    top: 0;
    z-index: 10;
}
nav.topnav a {
    color: #b9c4d6;
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    transition: color 0.15s ease, background 0.15s ease;
}
nav.topnav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
nav.topnav a.active {
    color: #fff;
    background: rgba(43, 191, 160, 0.22);
    font-weight: 600;
}
nav.topnav .brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    padding-right: 0.75rem;
    margin-right: 0.25rem;
}
nav.topnav .brand-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
}
nav.topnav .brand-text {
    letter-spacing: -0.01em;
}
nav.topnav .brand-wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-right: 0.35rem;
}
.nav-group {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}
nav.topnav .nav-divider {
    width: 1px;
    height: 1.35rem;
    background: rgba(255, 255, 255, 0.14);
    margin: 0 0.5rem;
}
nav.topnav .nav-spacer {
    flex: 1;
}
nav.topnav .whoami {
    color: #9aa5b1;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
}

nav.topnav .user-menu {
    position: relative;
}
/* Round 11 TWENTIETH follow-up - same fix, same reason as
   .nav-dropdown-trigger above: this is also a real <button> (the "test
   ADMIN" account menu trigger), already resets background/border/
   box-shadow back to transparent but was still inheriting the Liquid
   Glass backdrop-filter blur and ::before sheen from the base `button`
   rule, hazing the nav gradient behind it the same way. */
nav.topnav .user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.3rem 0.4rem;
    margin: 0;
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
nav.topnav .user-menu-trigger::before { content: none; }
nav.topnav .user-menu-trigger:hover,
nav.topnav .user-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
}
nav.topnav .user-menu-caret {
    color: #9aa5b1;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}
nav.topnav .user-menu-trigger[aria-expanded="true"] .user-menu-caret {
    transform: rotate(180deg);
}
nav.topnav .user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 10rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    z-index: 40;
}
nav.topnav .user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
nav.topnav .user-menu-item:hover {
    background: var(--red-bg);
    color: var(--red);
}

/* Round 65 - grouped nav submenus (see base.html's own comment above the
   markup and its Round 65 JS block for the full rationale). Triggers are
   styled to match nav.topnav's plain <a> links as closely as a <button>
   reasonably allows so a dropdown trigger doesn't visually stand out from
   a flat link sitting right next to it (Dashboard/New Request/My
   Requests); the menu itself and its items reuse the exact same tokens
   (and light/dark behavior) as the pre-existing user-menu dropdown.
   Round 66 - hover-to-open + animation (explicit user request, verbatim:
   "it should be animated and only visable when ever the cursor placed
   their main menu, if the cursor moved to in other main menu it should
   be hided and that sub menu has to display"): .nav-dropdown-menu is
   shown by plain CSS :hover on its .nav-dropdown ancestor - the browser
   itself guarantees only one element can be :hover'd by the mouse
   pointer at a time, so moving the cursor from one trigger straight to
   another closes the first and opens the second with no JS bookkeeping
   needed, and no possibility of two submenus both showing at once (the
   click-toggle bug reported against the previous round - all five open
   together - was a class of bug this hover-driven approach can't have).
   Click/keyboard opening (still needed for touch and for anyone tabbing
   through the nav) instead toggles the separate .is-open class, so the
   two mechanisms can't fight each other - see the CSS selector below and
   the Round 66 JS block for how they combine. */
.nav-dropdown {
    position: relative;
}
/* Round 11 TWENTIETH follow-up - explicit user request, illustrated with
   two screenshots of the top nav bar's dropdown triggers (Monitoring/
   Requests/Investigate/Reports & Audit) looking hazy against the teal-
   navy nav gradient: "don't use the glossy buttons to the top menu.
   it's look faded and unclear." Root cause: these triggers are real
   <button> elements (`<button class="nav-dropdown-trigger">`), so they
   inherit the EIGHTEENTH follow-up's Liquid Glass `backdrop-filter:
   blur(18px) saturate(160%)` AND its `::before` specular-sheen overlay
   from the base `button` rule - this rule already reset `background`/
   `border`/`box-shadow` back to fully transparent (nav triggers were
   never meant to look like pill buttons), but never reset those other
   two properties. The result was exactly what the screenshots show:
   the nav's own vivid gradient blurred and lightened right behind each
   transparent trigger, with a faint white sheen wash on top of that -
   nothing to do with color choice, purely a leftover glass effect that
   should never have reached the nav bar in the first place. Fixed the
   same way every other non-primary button variant already opts out
   (.btn-danger/.btn-secondary/[class*="-cancel"]/.decide-*, all in the
   EIGHTEENTH follow-up) - this class was simply missed in that pass
   since it lives in the nav bar's own section of the stylesheet rather
   than alongside the other button variants. */
nav.topnav .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0;
    color: #b9c4d6;
    font: inherit;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
nav.topnav .nav-dropdown-trigger::before { content: none; }
nav.topnav .nav-dropdown-trigger:hover,
nav.topnav .nav-dropdown-trigger[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
/* Round 11 TWENTY-FIRST follow-up - this was the one real "menu button
   colour" out of alignment with the rest of the nav: a literal amber
   rgba() (245, 158, 11 = the pre-retheme gold accent) left over from
   before the FIFTEENTH follow-up's teal/navy retheme, never caught
   because the teal-to-navy gradient background made the mismatch hard
   to notice - it stood out immediately once the bar became flat navy.
   Realigned to the exact same teal tint `nav.topnav a.active` already
   uses a few rules above, so a highlighted plain nav link and a
   highlighted dropdown trigger now agree with each other. */
nav.topnav .nav-dropdown-trigger.active {
    color: #fff;
    background: rgba(43, 191, 160, 0.22);
    font-weight: 600;
}
nav.topnav .nav-dropdown-caret {
    flex: 0 0 auto;
    color: #9aa5b1;
    transition: transform 0.15s ease;
}
nav.topnav .nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
    transform: rotate(180deg);
}
nav.topnav .nav-dropdown-menu {
    /* The outer box is deliberately plain/transparent and starts flush
       against the trigger (top: 100%, no gap) - it's the actual hoverable
       hit area, and a real gap here would be a dead zone the mouse could
       leave through on the way down from the trigger to the visible card,
       closing the menu before the pointer ever reaches it. The visual
       "gap" between trigger and card is instead padding-top INSIDE this
       box, which is still part of the hoverable area. */
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0.45rem;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
nav.topnav .nav-dropdown:hover .nav-dropdown-menu,
nav.topnav .nav-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
nav.topnav .nav-dropdown-menu-inner {
    /* 70% transparent (explicit user request, verbatim: first "make the
       submenu 30% tranperent background, it will be good", then "change
       to 50% transperent", then the direct follow-up "make 70%
       transperent") - paired with backdrop-filter: blur() rather than a
       plain rgba() alone, per the user's own choice between the two
       rendered mockups shown for approval first ("go ahead with option
       B"): a flat translucent background let sharp page content bleed
       straight through and hurt the menu's own text legibility, while
       blurring what's behind first keeps "Request Queue"/"Approvals" etc.
       crisp no matter what's showing through underneath - worth
       reconfirming at each bump, since the whole point of picking the
       blurred option was that it stays legible as the transparency climbs.
       -webkit-backdrop-filter is the same property under Safari's still-
       required vendor prefix; a browser supporting neither still gets a
       perfectly usable 70%-transparent card via --surface-translucent
       alone. */
    min-width: 11rem;
    background: var(--surface-translucent);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
nav.topnav .nav-dropdown-item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
nav.topnav .nav-dropdown-item:hover {
    background: var(--neutral-bg);
    color: var(--link-hover);
}
nav.topnav .nav-dropdown-item.active {
    background: var(--amber-100);
    color: var(--accent-navy);
    font-weight: 700;
}

.role-pill {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.role-pill.role-admin { background: var(--amber-500); color: #241a04; }
.role-pill.role-support { background: #64748b; color: #fff; }
.role-pill.role-user { background: rgba(255, 255, 255, 0.14); color: #dbe2ee; }
main.page {

    max-width: 2200px;
    width: 100%;
    margin: 0 auto;

    padding: 1.15rem 2.5rem 2rem;
    /* Round 11 TWELFTH follow-up - see the long note above .site-footer
       below for the full history. .site-footer is now a fixed bar
       pinned over the bottom of the window on every page, so ordinary
       (non-shell) pages need this extra bottom padding or their own
       last line of content would end up hidden underneath it. */
    padding-bottom: calc(2rem + var(--site-footer-h));
}
/* Round 11 TWELFTH follow-up - explicit user request: "at present there
   is no footer for entire console, the copy right words are going up
   and down when we scroll the pages, i want a fixed footer with a
   copyright statement and it should be fixed at the bootom of the
   window, not end of the page, just like menu bar." This replaces BOTH
   of the two previous follow-ups' approaches below (kept only as
   history in this comment, not as active rules):
     - the TENTH follow-up hid .site-footer entirely on the four
       full-bleed "shell" pages (login/home/denied/logoff) to stop it
       from pushing those pages past 100vh and causing a scrollbar;
     - the ELEVENTH follow-up made body a column flexbox so a normal
       page's footer would at least land at the bottom of a SHORT
       page - but it still scrolled away with the content on any page
       tall enough to need scrolling, which is exactly what this report
       is about: the footer must stay pinned to the window, the way
       nav.topnav already stays pinned to the top of the window via
       "position: sticky; top: 0" above.
   A true "position: fixed" bar (rather than "sticky", which nav.topnav
   uses) is the right tool here specifically because this console has
   two different kinds of page: normal pages, where the footer needs to
   stay put while the page's own content scrolls underneath it, and the
   four full-bleed hero pages, whose ".{page}-split" is deliberately
   exactly one viewport tall - "fixed" removes the footer from normal
   document flow entirely, so it can never add its own height to either
   kind of page and re-create the TENTH follow-up's scrollbar bug, and
   it never needs the ELEVENTH follow-up's flexbox trick either (both
   of those are removed - reverted "body" back to its original rule and
   "main.page" back to its original padding, plus the new
   "padding-bottom" above). The four hero pages get their own
   "calc(100vh - var(--site-footer-h))" adjustment on their .{page}-split
   rules further down so their content clears the bar the same way. */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: var(--site-footer-h);
    max-width: none;
    margin: 0;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.site-footer p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    /* Explicit user request: add "Designed and Developed by AURO
       Infrastructure Team" alongside the existing copyright line. Kept
       to a single line on purpose - .site-footer above gives this bar a
       fixed height, and every other rule that leaves room for it
       (main.page's bottom padding, the four hero pages' split
       min-height) assumes that fixed height, so this line must never
       wrap onto a second one or it would run under its own border and
       get clipped. nowrap + ellipsis is a safety net for any width
       narrower than expected; the media query below drops the credit
       half entirely on genuinely narrow windows so the visible text
       never even gets close to needing that ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.site-footer-sep {
    margin: 0 0.55rem;
    color: var(--border);
}
.site-footer-credit {
    color: var(--text-muted);
}
@media (max-width: 860px) {
    .site-footer-sep,
    .site-footer-credit {
        display: none;
    }
}
.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-tile, .stat-tile-wide {
    position: relative;
}
.stat-tile:hover, .stat-tile-wide:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.35);
}

.tile-accent {
    position: relative;
}
.tile-accent::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--gradient-gold);
}
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.92rem;
}

.table-compact {
    width: auto;
    min-width: 20rem;
    max-width: 34rem;
}
table th {
    text-align: left;
    padding: 0.3rem 0.6rem;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
table td {
    text-align: left;
    
    padding: 0.28rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
table tr:hover td {
    background: rgba(15, 23, 41, 0.02);
}
table td button {
    padding: 0.22rem 0.6rem;
    font-size: 0.82rem;
}

.domains-cell {
    max-width: 420px;
    white-space: normal;
    word-break: break-word;
}

.job-history-table th,
.job-history-table td {
    white-space: nowrap;
}

.log-group-summary-row td {
    padding-top: 0.15rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.log-group-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--link);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    /* Round 11 NINETEENTH follow-up - deliberately opted BACK OUT of the
       new `button { white-space: nowrap; }` above (see that rule's own
       comment). This is a plain underlined text link, not a pill-shaped
       button (background:none/border:none/padding:0 already say so),
       and its label is dynamic, unbounded log-summary text - e.g. "Show
       all 42 - repeated Aug 15, 2026 10:00 AM to Aug 15, 2026 11:00 AM"
       - that was always meant to wrap like ordinary text inside its
       table cell. Forcing it onto one line would just trade a wrapped
       line for a table row wide enough to blow out the page, which is
       the opposite of what "single line, professional-looking buttons"
       is asking for here. */
    white-space: normal;
}
.log-group-extra td {
    background: var(--bg);
    color: var(--text-muted);
}
.two-col {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.two-col > div {
    flex: 1;
    min-width: 260px;
}
.status-allowed_perm { color: var(--green); font-weight: 600; }
.status-pending { color: var(--warning-text); font-weight: 600; }
.status-denied { color: var(--red); font-weight: 600; }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--neutral-bg);
    color: var(--neutral-text);
}
.flashes {
    list-style: none;
    padding: 0;
    margin: 0 0 0.8rem 0;
}
.flash {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid transparent;
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
}
.flash-error { background: var(--red-bg); color: var(--red); border-left-color: var(--red); }
.flash-warning { background: var(--amber-100); color: var(--warning-text); border-left-color: var(--amber-500); }
.flash-success { background: var(--green-bg); color: var(--green); border-left-color: var(--green); }

.flash-error::before, .flash-warning::before, .flash-success::before {
    content: "";
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.4em;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -0.15em;
}
.flash-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23dc2626'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.flash-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 20H2z' fill='%23b45309'/%3E%3Crect x='11' y='9' width='2' height='6' rx='1' fill='white'/%3E%3Ccircle cx='12' cy='17.6' r='1.2' fill='white'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .flash-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 20H2z' fill='%23f6b93b'/%3E%3Crect x='11' y='9' width='2' height='6' rx='1' fill='%231a2233'/%3E%3Ccircle cx='12' cy='17.6' r='1.2' fill='%231a2233'/%3E%3C/svg%3E");
}
.flash-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2315803d'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* V97 (explicit user request - corporate branding pass): the new public,
   unauthenticated home page (home.html/home()) - see that route's own
   docstring in app.py. Narrower max-width than the default main.page
   (2200px, sized for wide admin tables/dashboards) since this is a plain
   read - description plus a two-item Certificates grid - not a data-dense
   admin screen. */
main.page.home-shell {
    max-width: 900px;
}
.home-signin-btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--navy-900);
    color: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
main.page a.home-signin-btn {
    color: #fff;
}
.home-signin-btn:hover {
    background: var(--navy-800);
    box-shadow: var(--shadow-md);
}
.home-signin-btn:active {
    transform: translateY(1px);
}
.cert-card {
    display: flex;
    gap: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.2rem;
}
.cert-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cert-card-icon .i {
    color: #241a04;
}
/* Minimal single-cert treatment for the home page: the certificate name
   itself is the download link, with no separate purpose paragraph or
   button - just the name, its status, and its expiry. */
.cert-card-minimal {
    align-items: center;
    padding: 1rem 1.2rem;
}
.cert-card-minimal .cert-card-icon {
    width: 36px;
    height: 36px;
}
.cert-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cert-card-link svg {
    flex: 0 0 auto;
    color: var(--amber-600);
}
main.page a.cert-card-link {
    color: var(--heading);
}
.cert-card-link:hover {
    color: var(--amber-600);
    border-bottom-color: var(--amber-500);
}
main.page a.cert-card-link:hover {
    color: var(--amber-600);
}
.cert-card-minimal .cert-card-meta {
    margin: 0.35rem 0 0;
}
.cert-card-body {
    min-width: 0;
    flex: 1 1 auto;
}
.cert-card-body h3 {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    color: var(--heading);
}
.cert-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}
.cert-card-expiry {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.cert-card-unavailable-note {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ===== Shared split-screen pattern - used by both the public home page ===== */
/* ===== and the login page, so the two present as one visual family.   ===== */
main.page.home-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
main.page.home-shell > .flashes {
    max-width: 32rem;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
}
.home-split {
    display: flex;
    /* Round 11 TWELFTH follow-up - leave room at the bottom for the
       fixed .site-footer bar (see the long note above .site-footer)
       instead of a full 100vh, which would run underneath it. */
    min-height: calc(100vh - var(--site-footer-h));
}
.home-brand {
    flex: 1 1 47.5%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px 480px at 88% 8%, rgba(251, 191, 36, 0.16), transparent 60%),
        var(--gradient-navy);
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.home-brand-glow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.home-logo-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: var(--shadow-md);
    width: fit-content;
}
.home-logo-chip img {
    height: 32px;
    display: block;
}
.home-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 32rem;
}
.home-brand-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amber-400);
    margin: 0 0 1rem;
}
.home-brand-copy h1 {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    color: #fff;
}
.home-brand-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
.home-trust-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.home-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}
.home-trust-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-400);
    flex: 0 0 auto;
}

.home-panel {
    flex: 1 1 52.5%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: 2.5rem;
}
.home-panel-wrap {
    width: 100%;
    max-width: 440px;
}
.home-panel-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amber-600);
    margin: 0 0 0.6rem;
}
.home-panel-wrap h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.home-panel-wrap .subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.6rem;
}
.home-panel-wrap .home-signin-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.home-panel-foot-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.home-panel-foot-note svg {
    flex: 0 0 auto;
}

@media (max-width: 860px) {
    .home-brand {
        display: none;
    }
    .home-panel {
        flex: 1 1 100%;
    }
}

main.page.login-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.login-split {
    display: flex;
    /* Round 11 TWELFTH follow-up - see .home-split above. */
    min-height: calc(100vh - var(--site-footer-h));
}

main.page.login-shell > .flashes {
    max-width: 32rem;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
}

.login-brand {
    flex: 1 1 47.5%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px 480px at 88% 8%, rgba(251, 191, 36, 0.16), transparent 60%),
        var(--gradient-navy);
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.login-brand-glow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.login-logo-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: var(--shadow-md);
    width: fit-content;
}
.login-logo-chip img {
    height: 32px;
    display: block;
}
.login-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 32rem;
}
.login-brand-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amber-400);
    margin: 0 0 1rem;
}
.login-brand-copy h1 {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    color: #fff;
}
.login-brand-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
.login-trust-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.login-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}
.login-trust-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-400);
    flex: 0 0 auto;
}

.login-form-panel {
    flex: 1 1 52.5%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: 2.5rem;
}
.login-form-wrap {
    width: 100%;
    max-width: 380px;
}
.login-form-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amber-600);
    margin: 0 0 0.6rem;
}
.login-form-wrap h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.login-form-wrap .subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.75rem;
}
.login-form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.login-form-wrap label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.3rem;
}
.login-form-wrap button[type="submit"] {
    margin-top: 0.7rem;
    width: 100%;
}
/* ===== Login "quick check" challenge - shown after a failed sign-in ===== */
.login-challenge--d {
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1rem 1.2rem;
    margin: 0.4rem 0 0.2rem;
}
.login-challenge--d .login-challenge-icon {
    display: flex;
    width: 34px;
    height: 34px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: var(--gradient-gold);
    color: #241a04;
    align-items: center;
    justify-content: center;
}
.login-challenge--d .login-challenge-head {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}
.login-challenge--d .login-challenge-head svg { display: none; }
.login-challenge--d label {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.5rem;
}
.login-challenge--d .login-challenge-desc {
    display: block;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 30rem;
    margin: 0 auto 0.85rem;
}
.login-challenge--d input {
    max-width: 100px;
    margin: 0 auto;
    text-align: center;
    border-radius: 999px;
}
.login-foot-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.login-foot-note svg {
    flex: 0 0 auto;
}

@media (max-width: 860px) {
    .login-brand {
        display: none;
    }
    .login-form-panel {
        flex: 1 1 100%;
    }
}

/* ===== Access-denied page (access_denied.html) - explicit user request:
   "this block should look like and match to our login page and public
   page". Same split-panel skeleton as .login-split/.home-split (brand
   panel left, content panel right) - denied-* is its own prefix rather
   than reusing login- or home- classes directly, since .badge/.cta-button
   (both already defined above) are the only pieces this page actually
   shares with those two. =====

   BUG FOUND AND FIXED (round 7, real-VM report: "design changed, not as
   per our design"): .login-shell and .home-shell both get a SECOND
   "main.page.<shell>" rule (see main.page.login-shell above and the
   later main.page.home-shell override) that resets the generic
   main.page's admin-dashboard sizing (max-width:2200px, margin:0 auto,
   padding:1.15rem 2.5rem 2rem - meant for wide data tables) back to a
   true full-bleed 100%/0-margin/0-padding box, which is what lets
   .login-split/.home-split's own "display:flex; min-height:100vh;"
   actually fill the real viewport edge-to-edge the way the approved
   design canvas showed. denied-shell never got that same reset - only
   "main.page.denied-shell > .flashes" existed - so .denied-split was
   rendering inside the generic main.page's padded, 2200px-capped box
   instead of full-bleed, which is what changed the page's appearance
   from the approved design.

   ROUND 11 FOLLOW-UP - this comment block itself carried a second,
   nastier bug: the phrase directly above used to write "login-" and
   "home-" back to back, joined by a slash with no spaces, star-slash-
   style - and that exact two-character sequence (an asterisk directly
   followed by a slash) is what closes a CSS comment. That closed THIS
   comment several sentences early, so every word from
   there up to the real closing mark below was parsed as if it were
   actual CSS - garbage a browser cannot turn into a valid selector.
   Per the CSS spec, an invalid selector swallows its own declaration
   block whole, so the ENTIRE "main.page.denied-shell" reset rule right
   after this comment was silently dropped in every browser, every
   build, since the round-7 fix was written - the fix this very comment
   documents never actually shipped. With that rule gone, .denied-split
   rendered inside the generic main.page's padded, 2200px-capped box
   after all (the exact bug round 7 thought it had closed), so its own
   "min-height:100vh" pushed the page past a full viewport and forced a
   vertical scrollbar - the real-VM report behind this follow-up ("pages
   are not fit to the window ... there is a scroll bar"). Fixed by
   rewording the phrase above so the two closing characters never sit
   next to each other; verified by parsing the rebuilt stylesheet and
   confirming "main.page.denied-shell" now appears as its own rule with
   max-width/margin/padding all reset, and by loading access_denied.html
   in a real fixed-size browser viewport and confirming no scrollbar. */
main.page.denied-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.denied-split {
    display: flex;
    /* Round 11 TWELFTH follow-up - see .home-split above. */
    min-height: calc(100vh - var(--site-footer-h));
}
main.page.denied-shell > .flashes {
    max-width: 32rem;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
}
.denied-brand {
    flex: 1 1 47.5%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px 480px at 88% 8%, rgba(251, 191, 36, 0.16), transparent 60%),
        var(--gradient-navy);
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.denied-brand-glow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.denied-logo-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: var(--shadow-md);
    width: fit-content;
}
.denied-logo-chip img {
    height: 32px;
    display: block;
}
.denied-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 30rem;
}
.denied-brand-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amber-400);
    margin: 0 0 1rem;
}
.denied-brand-copy h1 {
    font-size: 2.15rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    color: #fff;
}
.denied-brand-copy p {
    font-size: 1.02rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
.denied-trust-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.denied-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}
.denied-trust-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-400);
    flex: 0 0 auto;
}
.denied-panel {
    flex: 1 1 52.5%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: 2.5rem;
}
.denied-panel-wrap {
    width: 100%;
    max-width: 430px;
}
.denied-panel-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amber-600);
    margin: 0 0 0.6rem;
}
.denied-domain-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1.4rem;
}
.denied-domain-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--amber-100);
    color: var(--amber-600);
    display: flex;
    align-items: center;
    justify-content: center;
}
.denied-domain-text {
    min-width: 0;
}
.denied-domain-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--heading);
    overflow-wrap: anywhere;
}
.denied-domain-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.denied-panel-wrap h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.denied-panel-wrap .subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.denied-secondary-link, .denied-secondary-note {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.83rem;
    color: var(--text-muted);
}
.denied-secondary-link {
    text-decoration: underline;
    text-decoration-color: var(--border);
}
.denied-secondary-note {
    margin-top: 0.85rem;
}
.denied-timeline {
    margin-top: 2.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border);
}
.denied-timeline-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
}
.denied-tl-item {
    display: flex;
    gap: 0.7rem;
    padding-bottom: 0.95rem;
    position: relative;
}
.denied-tl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 1.1rem;
    bottom: -0.15rem;
    width: 1px;
    background: var(--border);
}
.denied-tl-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--amber-400);
    flex: 0 0 auto;
    margin-top: 0.15rem;
}
.denied-tl-item:first-child .denied-tl-dot {
    background: var(--amber-400);
}
.denied-tl-text {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}
.denied-tl-text strong {
    font-size: 0.86rem;
    color: var(--heading);
}
.denied-tl-text span {
    color: var(--text-muted);
}
.denied-panel-foot-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}
@media (max-width: 860px) {
    .denied-brand {
        display: none;
    }
    .denied-panel {
        flex: 1 1 100%;
    }
}

main.page.logoff-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
main.page.logoff-shell > .flashes {
    max-width: 32rem;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
}
.logoff-split {
    display: flex;
    /* Round 11 TWELFTH follow-up - see .home-split above. */
    min-height: calc(100vh - var(--site-footer-h));
}
.logoff-brand {
    flex: 0 0 40%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px 480px at 88% 8%, rgba(251, 191, 36, 0.16), transparent 60%),
        var(--gradient-navy);
    padding: 3.5rem clamp(1.75rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.logoff-brand-glow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.logoff-logo-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: var(--shadow-md);
    width: fit-content;
}
.logoff-logo-chip img {
    height: 32px;
    display: block;
}
.logoff-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 32rem;
}
.logoff-brand-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amber-400);
    margin: 0 0 1rem;
}
.logoff-brand-copy h1 {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    color: #fff;
}
.logoff-brand-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.logoff-trust-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.logoff-trust-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
}
.logoff-trust-item .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber-400);
    flex: 0 0 auto;
}

.logoff-form-panel {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
}
.logoff-form-inner {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2.5rem;
}
.logoff-form-wrap {
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.logoff-status-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--green-bg);
    box-shadow: 0 0 0 6px rgba(21, 128, 61, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1.5rem;
}
.logoff-status-ring svg {
    width: 28px;
    height: 28px;
}
.logoff-form-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amber-600);
    margin: 0 0 0.6rem;
}
.logoff-form-wrap h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.logoff-form-wrap .subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.6rem;
}
.logoff-btn-primary {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--navy-900);
    color: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

main.page a.logoff-btn-primary {
    color: #fff;
}
.logoff-btn-primary:hover {
    background: var(--navy-800);
    box-shadow: var(--shadow-md);
}
main.page a.logoff-btn-primary:hover {
    color: #fff;
}
.logoff-btn-primary:active {
    transform: translateY(1px);
}
.logoff-btn-primary svg {
    flex: 0 0 auto;
}
.logoff-security-notice {
    background: var(--blue-bg);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 1.5rem 0 0;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-muted);
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.logoff-security-notice svg {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--blue);
}
.logoff-security-notice b {
    color: var(--blue);
}
.logoff-foot-note {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.logoff-foot-note svg {
    flex: 0 0 auto;
}

@media (max-width: 1150px) {
    .logoff-trust-row {
        gap: 0.5rem;
    }
    .logoff-trust-item {
        font-size: 0.62rem;
        gap: 0.3rem;
    }
}
@media (max-width: 860px) {
    .logoff-brand {
        display: none;
    }
    .logoff-form-panel {
        flex: 1 1 100%;
    }
}
.warning {
    color: var(--warning-text);
}
.tile.warning {
    background: var(--amber-100);
    border-color: var(--amber-500);
}
.job-status {
    border-left: 4px solid var(--neutral-text);
}
.job-status-running { border-left-color: var(--warning-text); }
.job-status-success { border-left-color: var(--green); }
.job-status-failed { border-left-color: var(--red); }

.job-status-queued { border-left-color: var(--amber-400); }
.job-status-cancelled { border-left-color: var(--neutral-text); }
.inline-form {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0.25rem 0;
}
.inline-form input[type="text"] {
    width: 12rem;
}
pre {
    background: var(--navy-950);
    color: #c9d1d9;
    border: 1px solid var(--navy-800);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    overflow-x: auto;
    font-size: 0.85rem;
}

input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="url"], input[type="date"], select, textarea {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--amber-500);
    box-shadow: var(--glow-amber);
}

/* Round 11 EIGHTEENTH follow-up - "Liquid Glass" (see the token comment
   above for the full request/review trail). The base `button` rule below
   is the console's PRIMARY-action fallback (Add/Save/Create/Submit
   request(s)/Log in/etc., per the existing scoping rule already
   documented in the SIXTEENTH follow-up below) - it is the only rule
   this pass changes; .btn-danger/.btn-secondary/[class*="-cancel"]/the
   .decide-* variants keep their own established solid/outline looks
   untouched, and each explicitly cancels the new ::before sheen and
   backdrop-filter below so none of it leaks onto them (harmless in
   practice against their fully opaque fills, but disabled anyway so no
   browser spends compositing cost blurring something nothing can see). */
button {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1.05rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    color: var(--on-brand);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Round 11 NINETEENTH follow-up - explicit user request: "change
       all buttons to use single line, some buttons are using double
       lines which looks odd and not proffesional." No rule up to this
       point ever set white-space on <button>, so its default (normal,
       same as any inline text) let a longer label wrap to a second
       line the moment its container - a narrow table cell, a shrinking
       flex item - was tighter than the label's natural width, e.g.
       "Mark as fallback"/"Resume Interactive Deep Scan (live)" inside
       dept_policies.html's/the check-url page's own table columns.
       `text-overflow: ellipsis` piggybacks on the `overflow: hidden`
       already set above for the specular sheen - on the rare label/
       container combination too narrow even for one line, it degrades
       to a clean truncation instead of a reflowed second line or a
       raw horizontal overflow. */
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* the curved specular highlight that makes it read as glass rather than
   a flat tinted fill - a static stand-in for the design board's glossy
   top-half highlight, clipped to the button's own rounded/pill shape by
   the `overflow: hidden` above. */
button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-sheen);
    pointer-events: none;
}
button:hover {
    background: var(--glass-fill-hover);
    box-shadow: var(--glass-shadow-hover);
    transform: translateY(-1px);
}
button:active { transform: translateY(1px); box-shadow: var(--glass-shadow); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
button:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
[class*="-cancel"] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[class*="-cancel"]:hover { background: var(--neutral-bg); }
[class*="-cancel"]::before { content: none; }

/* Round 11 SIXTEENTH follow-up - explicit user request: buttons across
   the console were all inheriting the same generic `button` rule above
   (teal gradient + dark ink text) regardless of what they actually did,
   so "Disable", "Mark as fallback" and "Delete" all looked identical to
   a plain "Add"/"Save" button. The fix is semantic, not cosmetic: give
   each FUNCTION its own look, and let each variant's own text color
   follow ITS OWN background instead of one color fixed across all of
   them. Three new variants below cover the console's actual button
   vocabulary (a true destructive delete, a neutral state-toggle/list
   edit, and everything else that stays the default teal "primary" -
   creating, saving, submitting, searching); the pre-existing
   .decide-deny-button/.decide-approve-button/.decide-approve-confirm-
   button rules two blocks below already did exactly this for the
   approval workflow and are left untouched as the pattern this follows.

   .btn-danger - a genuinely destructive action (deletes an object,
   permanently blocks a domain). Matched by attribute selector against
   the existing `*-delete-button`/`*-delete-confirm-button` naming
   convention already used by every delete flow in the app (ACLs,
   categories, dept policies, divisions), so this one CSS rule covers
   all of them with no template changes and nothing to keep in sync as
   new delete flows are added later. */
button.btn-danger,
button[class*="delete-button"],
button[class*="delete-confirm-button"] {
    background: var(--red);
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
button.btn-danger:hover,
button[class*="delete-button"]:hover,
button[class*="delete-confirm-button"]:hover {
    background: #b91c1c;
    filter: none;
}
button.btn-danger::before,
button[class*="delete-button"]::before,
button[class*="delete-confirm-button"]::before {
    content: none;
}

/* .btn-secondary - a state toggle (Enable/Disable, Mark/Unmark as
   fallback) or a low-stakes list edit (Remove a single chip/member).
   Visually identical to the existing [class*="-cancel"] treatment
   above (an outline, not a filled color) since neither action is the
   "main thing to do" on its row - it deliberately recedes instead of
   competing with genuine primary actions for attention. */
button.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
button.btn-secondary:hover { background: var(--neutral-bg); filter: none; }
button.btn-secondary::before { content: none; }

/* .link-button - a secondary/outline button's exact visual style
   (border/background/no box-shadow, matching [class*="-cancel"] above)
   but for an <a> tag rather than a real <button>: the global `button`
   selector never applies to anchors, and no such "styled as a button"
   class existed anywhere in the app before the Reports page's own
   "Export PDF" link needed one. */
.link-button {
    display: inline-block;
    max-width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    /* Round 11 NINETEENTH follow-up - same single-line request as the
       `button`/.cta-button rules above, applied here too since this is
       the third and last member of the console's "styled as a button"
       family (see its own comment above: the secondary/outline look for
       an <a> tag rather than a real <button>). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.link-button:hover { background: var(--neutral-bg); text-decoration: none; }
.link-button:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }

.decide-deny-button { background: var(--red); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.decide-deny-button:hover { background: #b91c1c; }
.decide-approve-button, .decide-approve1h-button { background: var(--accent-navy); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.decide-approve-button:hover, .decide-approve1h-button:hover { background: var(--accent-navy-hover); }
.decide-approve-confirm-button, .decide-approve1h-confirm-button { background: var(--green); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.decide-approve-confirm-button:hover, .decide-approve1h-confirm-button:hover { background: #166534; }
.decide-deny-button::before,
.decide-approve-button::before, .decide-approve1h-button::before,
.decide-approve-confirm-button::before, .decide-approve1h-confirm-button::before { content: none; }

.badge.status-deny { background: var(--red-bg); color: #991b1b; }
.badge.status-block { background: var(--red-bg); color: #991b1b; }
.badge.status-allow { background: var(--green-bg); color: #166534; }
.badge.status-error { background: var(--neutral-bg); color: var(--neutral-text); }

.badge.status-warn { background: var(--amber-100); color: var(--warning-text); }

.badge.status-closed { background: var(--blue-bg); color: var(--blue); }

.badge.status-success { background: var(--green-bg); color: #166534; }
.badge.status-failed { background: var(--red-bg); color: #991b1b; }
.badge.status-cancelled { background: var(--neutral-bg); color: var(--neutral-text); }

.job-log {
    background: var(--navy-950);
    color: #c9d1d9;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

/* .filter-form-compact - explicit user request on /logs: "set this
   colums in a sigle row. present it's uses 2 rows." Root cause: plain
   .filter-form (shared by logs.html/audit_trail.html/Live Tail) leaves
   every input/select at the browser's own unconstrained default width
   (~170-190px for a bare <input type="text">), so logs.html's own 10-
   item row (Username/IP/Domain/Category/Action/From/To/Collapse
   repeated/Filter/Clear) wrapped to two lines even on a wide desktop
   viewport. Scoped to its own modifier class (added alongside
   .filter-form on logs.html's <form> only, never replacing the shared
   base class) so audit_trail.html and Live Tail's own filter bars -
   which use that same base class but were not reported as broken -
   are completely unaffected. Same scoping precedent .filter-form-fields
   already set for reports.html's own, near-identical wrapping problem
   (see that class's own comment above) - this is the same fix, kept as
   a separate class because logs.html wants to keep its existing inline
   "Label <input>" look, not switch to that class's label-above-field
   layout. Narrower text/select widths get the common fields (short
   values: usernames, IPs, domain fragments, category names, the Action/
   Collapse dropdowns) down to a size that lets all ten items fit in one
   row on typical desktop widths; the From/To date-range fields get
   their own wider .filter-date-input class instead of the same narrow
   width, since their placeholder text ("01-08-2026 00:00:00 (IST)", 26
   characters) needs more room to stay readable without clipping. */
.filter-form-compact label input[type="text"],
.filter-form-compact label select {
    width: 108px;
}
.filter-form-compact label input.filter-date-input {
    width: 196px;
}

/* .filter-form-grouped - an opt-in modifier (added alongside .filter-form,
   never replacing it) for a filter bar that needs to be laid out as two
   distinct rows - fields on top, then a divider, then which-sections/
   actions below - rather than one flat wrapping row of everything. Scoped
   to its own class specifically so it doesn't change .filter-form's own
   plain single-row behavior on logs.html/audit_trail.html/live tail's own
   filter bars, which still want exactly the flex-wrap row above. */
.filter-form-grouped {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.filter-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
/* Label-above-field layout, scoped to reports.html's own 8-field filter
   row - explicit user request after the inline "Label: input" layout
   pushed the row to two lines even with concise one-line label text
   (round 11's own text-wrap fix couldn't help here, since the fields
   were wrapping as a GROUP, not any single label's text wrapping). Kept
   scoped to .filter-form-fields rather than changing the shared
   .filter-form class other pages (logs.html/audit_trail.html/Live Tail)
   still use, since only reports.html's row was reported as broken. */
.filter-form-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.filter-form-fields label input,
.filter-form-fields label select {
    font-size: 0.88rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
}
.filter-form-fields label input[type="text"] {
    width: 118px;
}
.filter-form-fields label input[type="date"] {
    width: 128px;
}
.filter-form-fields label select {
    width: 118px;
}
.filter-form-divider {
    border-top: 1px solid var(--border);
}
.filter-form-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}
.filter-form-sections-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-items: center;
}
.filter-form-sections-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.filter-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.filter-form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Reports Overview panel (round 11 - explicit user request: "add a
   analsys pie chart in the first page with complete details... the
   reports section is ultimate result of the entire application").
   Hand-built inline SVG/CSS, no charting library - this console has
   none anywhere (confirmed by grep before this round's design
   proposal was shown to the user) - all colors via this stylesheet's
   own existing tokens so both themes stay correct automatically. */
.reports-overview .exec-summary {
    background: var(--surface);
    border-left: 3px solid var(--amber-500);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.55;
}
.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}
@media (max-width: 900px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    box-shadow: var(--shadow-sm);
}
.kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
    align-items: stretch;
}
.chart-grid-2 {
    grid-template-columns: 1.3fr 1fr;
}
@media (max-width: 1100px) {
    .chart-grid, .chart-grid-2 { grid-template-columns: 1fr; }
}
.chart-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-sm);
}
.chart-tile h3 {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    color: var(--heading);
}
.donut-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text);
}
.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 0.4rem;
}
.hbar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
}
.hbar-label {
    width: 7rem;
    flex-shrink: 0;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbar-track {
    flex: 1;
    background: var(--neutral-bg);
    border-radius: 3px;
    height: 12px;
    position: relative;
    overflow: hidden;
}
.hbar-fill {
    background: var(--amber-500);
    height: 100%;
    border-radius: 3px;
}
.hbar-fill-blue {
    background: var(--blue);
}
.hbar-value {
    width: 4.5rem;
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.reason-cell {
    max-width: 18rem;
}

.reason-details > summary {
    cursor: default;
    color: var(--text);
    font-weight: 400;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.reason-details > summary::-webkit-details-marker {
    display: none;
}
.reason-details > summary::before {
    
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    transition: transform 0.15s ease;
}
.reason-details.reason-truncated > summary {
    cursor: pointer;
    color: var(--accent-navy);
}
.reason-details.reason-truncated > summary::before {
    content: "\25B8";
}
.reason-details[open] > summary::before {
    transform: rotate(90deg);
}
.reason-details.reason-truncated > summary:hover {
    color: var(--accent-navy-hover);
}
.reason-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reason-full {
    margin-top: 0.35rem;
    white-space: normal;
    word-break: break-word;
    color: var(--text);
}

.reason-plain {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.url-cell {
    max-width: 320px;
}
.url-details > summary {
    cursor: default;
    color: var(--text);
    font-weight: 400;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}
.url-details > summary::-webkit-details-marker {
    display: none;
}
.url-details > summary::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    margin-top: 0.2rem;
    transition: transform 0.15s ease;
}
.url-details.url-truncated > summary {
    cursor: pointer;
    color: var(--accent-navy);
}
.url-details.url-truncated > summary::before {
    content: "\25B8";
}
.url-details[open] > summary::before {
    transform: rotate(90deg);
}
.url-details.url-truncated > summary:hover {
    color: var(--accent-navy-hover);
}
.url-preview {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.url-full {
    margin-top: 0.35rem;
    white-space: normal;
    word-break: break-all;
    color: var(--text);
}
.url-plain {
    display: block;
    word-break: break-all;
    color: var(--text);
}

.nowrap-cell {
    white-space: nowrap;
}

.ticket-expand-btn {
    background: none;
    border: none;
    padding: 0.15rem 0.35rem;
    margin: 0;
    cursor: pointer;
    color: var(--accent-navy);
    line-height: 1;
}
.ticket-expand-btn:hover {
    color: var(--accent-navy-hover);
}
.ticket-expand-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}
.ticket-summary-row.ticket-expanded .ticket-expand-arrow {
    transform: rotate(90deg);
}
.ticket-summary-row.ticket-expanded {
    background: var(--surface-2);
}
.ticket-detail-row td {
    padding: 0 0 0.6rem 2.2rem;
    border-bottom: 1px solid var(--border);
}
.ticket-detail-table {
    width: 100%;
    font-size: 0.88rem;
    background: var(--surface-2);
    border-radius: 4px;
}
.ticket-detail-table th {
    color: var(--text-muted);
}

.tabs {
    display: flex;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.9rem;
}
.tabs a {
    display: inline-block;
    padding: 0.55rem 0.1rem 0.6rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs a:hover {
    color: var(--accent-navy-hover);
}
.tabs a.tab-active {
    color: var(--accent-navy);
    border-bottom-color: var(--accent-navy);
}

.dn-list {
    width: 100%;
    max-width: 32rem;
    height: 4.5rem;
    font-family: monospace;
    font-size: 0.85rem;
    display: block;
}

.spinner-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: var(--amber-500);
    animation: auro-spinner-pulse 1s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes auro-spinner-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

.processing-note {
    color: var(--warning-text);
    font-style: italic;
}

.badge.status-reference { background: var(--neutral-bg); color: var(--neutral-text); font-style: italic; }

.badge.status-popular { background: var(--green-bg); color: #166534; }
.domain-age-cell button {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
}

.icon {
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.14em;
    margin-right: 0.32em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}
.icon-ok {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2315803d'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-bad {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23dc2626'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-warn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 20H2z' fill='%23b45309'/%3E%3Crect x='11' y='9' width='2' height='6' rx='1' fill='white'/%3E%3Ccircle cx='12' cy='17.6' r='1.2' fill='white'/%3E%3C/svg%3E");
}
.icon-pending {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2357606a'/%3E%3Cpath d='M12 7v6l4 2' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-neutral {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23eef1f4'/%3E%3Crect x='7' y='11' width='10' height='2' rx='1' fill='%2357606a'/%3E%3C/svg%3E");
}

.icon-closed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232563eb'/%3E%3Crect x='7' y='11' width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .icon-warn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 20H2z' fill='%23f6b93b'/%3E%3Crect x='11' y='9' width='2' height='6' rx='1' fill='%231a2233'/%3E%3Ccircle cx='12' cy='17.6' r='1.2' fill='%231a2233'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .icon-pending {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23a7b1c6'/%3E%3Cpath d='M12 7v6l4 2' stroke='%230b0f19' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.job-status-running h2::before,
.job-status-success h2::before,
.job-status-failed h2::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -0.1em;
}
.job-status-running h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b45309'/%3E%3Cpath d='M12 7v6l4 2' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .job-status-running h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f6b93b'/%3E%3Cpath d='M12 7v6l4 2' stroke='%231a2233' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.job-status-success h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2315803d'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.job-status-failed h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23dc2626'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.request-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}
.request-id-badge {
    background: var(--amber-400);
    color: #241a04;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.request-meta-item {
    color: var(--text-muted);
    white-space: nowrap;
}
.request-meta-item strong {
    color: var(--text);
    font-weight: 600;
}
.request-reason {
    margin: 0 0 0.75rem 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.request-domains-table {
    width: auto;
    min-width: 40%;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}
.dashboard-grid-wide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}
@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid-wide { grid-template-columns: 1fr; }
}

.user-dash-stats {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
    .user-dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .user-dash-stats { grid-template-columns: 1fr; }
}
.request-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.3rem;
}
/* Round 11 EIGHTEENTH follow-up - same "Liquid Glass" treatment as the
   base `button` rule above, applied here too since .cta-button is the
   anchor-styled-as-button equivalent of a primary action ("+ New
   Request", "Resume Interactive Deep Scan (live)") and was left
   inconsistent with plain <button> primaries in every prior round's
   button-styling passes. */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1.05rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    color: var(--on-brand);
    box-shadow: var(--glass-shadow);
    text-decoration: none;
    /* Round 11 NINETEENTH follow-up - same "single line, no double
       lines" request as the base `button` rule above. This was
       previously the ONE place in the stylesheet that explicitly opted
       BACK into wrapping (`white-space: normal`) rather than just
       inheriting the browser default - almost certainly to avoid
       horizontal overflow on its longest labels ("Resume Interactive
       Deep Scan (live)", "Request access via SecureWeb") in a narrow
       container. Switched to nowrap + ellipsis (piggybacking on the
       `overflow: hidden` already set below for the specular sheen) so
       it never wraps to a second line either - verified at both the
       standard 1440px desktop width and the narrowest breakpoint this
       stylesheet already designs for (560px) with both of those exact
       labels before shipping; see the changelog for the measurements. */
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* Round 11 THIRTIETH follow-up - explicit user report: "my request
   button text is not visable" (the dashboard's "+ New Request" button,
   screenshotted). Root cause: `main.page a` (defined far above, near
   the top of this stylesheet) sets `color: var(--link)` at specificity
   (0 ids, 1 class, 2 elements) - and a bare `.cta-button` selector is
   only (0 ids, 1 class, 0 elements). Equal class count, so the tie goes
   to element count, and `main.page a`'s two element selectors (`main`,
   `a`) beat `.cta-button` having none - `main.page a` wins regardless
   of source order, silently overriding the `color: var(--on-brand)`
   set above back to `var(--link)`. In light theme `--link: var(--brand-
   navy)` - the SAME navy hue this button's own translucent glass fill
   is tinted with - so the label rendered navy-on-navy, effectively
   invisible; confirmed by rendering the real dashboard.html markup
   against the real style.css in a headless browser before touching any
   code (light theme: unreadable; dark theme: readable but still the
   wrong, unintended blue-link color instead of white).
   This exact class of bug already has a fix pattern elsewhere in this
   same stylesheet - `.home-signin-btn` and `.cert-card-link` (see their
   own `main.page a.<class>` overrides above) - `.cta-button` was simply
   missed when that pattern was applied. Restated here for the same
   reason: an `a`-styled button needs its intended color re-asserted at
   a selector specific enough to beat `main.page a`. */
main.page a.cta-button {
    color: var(--on-brand);
}
.cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-sheen);
    pointer-events: none;
}
.cta-button svg { flex-shrink: 0; }
.cta-button:hover {
    background: var(--glass-fill-hover);
    box-shadow: var(--glass-shadow-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
main.page a.cta-button:hover {
    color: var(--on-brand);
}
.cta-button:focus-visible {
    outline: 2px solid var(--heading);
    outline-offset: 2px;
}

.user-hero {
    background: linear-gradient(135deg, var(--navy-950), var(--navy-900));
    border-radius: var(--radius);
    padding: 1.6rem 2rem;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-lg);
}
.user-hero-text {
    flex: 1 1 320px;
    min-width: 0;
}
.user-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-400);
    margin: 0 0 0.35rem;
}
.user-hero-greeting {
    font-size: 1.65rem;
    font-weight: 700;
    color: #f5f7fc;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.user-hero-lede {
    font-size: 0.88rem;
    color: #a9b3c9;
    max-width: 44ch;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}
.user-hero-ring-wrap {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex: 0 0 auto;
}
.user-hero-ring {
    width: 6.4rem;
    height: 6.4rem;
    flex-shrink: 0;
    transform: rotate(-90deg);
}
.user-hero-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3;
}
.user-hero-ring-fill {
    
    fill: none;
    stroke: #ffd76a;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: var(--pct, 0) 100;
    transition: stroke-dasharray 0.6s ease;
}
.user-hero-ring-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5f7fc;
}
.user-hero-ring-caption {
    font-size: 0.72rem;
    color: #a9b3c9;
    max-width: 11ch;
    line-height: 1.35;
}

.tile-accent-pending::before { background: var(--amber-500); }
.tile-accent-approved::before { background: var(--green); }
.tile-accent-denied::before { background: var(--red); }

.request-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.85rem;
}
.request-card-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    flex-wrap: wrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.request-card-row:hover {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: var(--shadow-sm);
}
.request-card-main {
    flex: 1 1 200px;
    min-width: 0;
}
.request-card-domain {
    font-weight: 600;
    color: var(--heading);
    word-break: break-word;
}
.request-card-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.request-card-row .mini-timeline {
    flex: 0 0 auto;
    width: 13.5rem;
    margin-top: 0;
}
.request-card-row .badge {
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .user-hero { flex-direction: column; align-items: flex-start; }
    .request-card-row .mini-timeline { width: 100%; order: 3; }
}
.stat-tile {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.stat-tile-wide {
    margin-bottom: 0;
}
.stat-tile-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 0 0 0.6rem 0;
}
.stat-tile-window {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    margin-left: 0.5rem;
}
.stat-tile-value {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--heading);
    margin: 0 0 0.35rem 0;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.stat-tile-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.3rem;
    text-transform: none;
    letter-spacing: normal;
    
    -webkit-text-fill-color: var(--text-muted);
    background: none;
}
.stat-tile-detail, .stat-tile-row {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.3rem 0;
}
.stat-tile-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0 0;
}
.stat-tile-note.warning {
    color: var(--warning-text);
}
.stat-tile-icon-list, .stat-tile-mini-list {
    list-style: none;
    margin: 0 0 0.4rem 0;
    padding: 0;
    font-size: 0.85rem;
}
.stat-tile-icon-list li, .stat-tile-mini-list li {
    padding: 0.15rem 0;
}
.stat-tile-link {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: auto;
    padding-top: 0.5rem;
}
.meter-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.meter {
    display: grid;
    grid-template-columns: 3.4rem 1fr 2.6rem;
    align-items: center;
    gap: 0.5rem;
}
.meter-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.meter-track {
    height: 8px;
    border-radius: 999px;
    background: var(--neutral-bg);
    overflow: hidden;
}
.meter-fill {
    height: 100%;
    border-radius: 999px;
}
.meter-fill.meter-ok { background: var(--green); }
.meter-fill.meter-warning { background: var(--amber-500); }
.meter-fill.meter-danger { background: var(--red); }
.meter-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--heading);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 6px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--neutral-bg);
    color: var(--heading);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    font-size: 0.88em;
    white-space: nowrap;
}
.chip-remove-form {
    display: inline-flex;
    margin: 0;
}
.chip-remove {
    background: transparent;
    border: none;
    color: var(--neutral-text);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    padding: 1px 6px;
    border-radius: 999px;
}
.chip-remove:hover {
    background: var(--red-bg);
    color: var(--red);
}
.chip-add-button {
    background: var(--accent-navy);
    color: #fff;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.88em;
}
.chip-add-button:hover {
    background: var(--accent-navy-hover);
}
.chip-add-panel {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.chip-add-panel label {
    margin-right: 4px;
}
.chip-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9em;
}

.dp-msdrop {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.dp-msdrop-toggle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--heading);
    padding: 6px 28px 6px 10px;
    min-width: 220px;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.dp-msdrop-toggle::after {
    content: "\25BE";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.dp-msdrop-toggle:disabled {
    background: var(--neutral-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}
.dp-msdrop-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 220px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px 0;
}
.dp-msdrop-option {
    display: block;
    padding: 4px 10px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.dp-msdrop-option:hover {
    background: var(--neutral-bg);
}
.dp-msdrop-option input {
    margin-right: 6px;
}
.dp-msdrop-empty {
    padding: 4px 10px;
    white-space: normal;
    max-width: 260px;
}

.dp-create-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin: 4px 0 12px;
    align-items: start;
}
.dp-create-col h3 {
    margin-top: 0;
}
@media (max-width: 900px) {
    .dp-create-row { grid-template-columns: 1fr; }
}

.acl-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    align-items: stretch;
}
.acl-col {
    margin-bottom: 0;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
}
.acl-row {
    min-width: 0;
}
@media (max-width: 900px) {
    .acl-columns { grid-template-columns: 1fr; }
}

.acl-col .inline-form {
    display: flex;
    width: 100%;
}
.acl-col .inline-form input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.acl-col .acl-search-form {
    display: flex;
    gap: 0.35rem;
    width: 100%;
}
.acl-col .acl-search-form input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.acl-col textarea {
    width: 100%;
}

.i {
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
    overflow: visible;
}
.i-sm { width: 0.9em; height: 0.9em; }
.i-md { width: 1.15em; height: 1.15em; }
.i-lg { width: 1.6em; height: 1.6em; }
.i-xl { width: 2.4em; height: 2.4em; }

.stat-icon {
    margin-right: 0.5rem;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 41, 0.18));
}
h1 .stat-icon, h1 .i {
    margin-right: 0.55rem;
}

/* Round 11 TWENTIETH follow-up - same fix as .nav-dropdown-trigger/
   .user-menu-trigger above: this button also lives inside nav.topnav
   (the sun/moon theme toggle) and was inheriting the same unwanted
   Liquid Glass blur/sheen from the base `button` rule despite already
   setting its own background. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.4rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
}
.theme-toggle::before { content: none; }
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    filter: none;
}
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: inline-block; }

nav.topnav {
    border-bottom: 2px solid transparent;
    border-image: var(--gradient-gold) 1;
}

.gauge-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.gauge-ring {
    width: 5.5rem;
    height: 5.5rem;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.gauge-track {
    fill: none;
    stroke: var(--neutral-bg);
    stroke-width: 3.2;
}
.gauge-fill {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: var(--pct, 0) 100;
    transition: stroke-dasharray 0.6s ease;
}
.gauge-fill.gauge-good { stroke: var(--green); }
.gauge-fill.gauge-warn { stroke: var(--warning-text); }
.gauge-fill.gauge-bad { stroke: var(--red); }
.gauge-center {
    flex: 1;
    min-width: 0;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green);
    background: var(--green-bg);
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.6rem;
}
.live-pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: auro-live-pulse 1.6s ease-out infinite;
}
@keyframes auro-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.refresh-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-left: 0.75rem;
}

button.refresh-indicator {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.2rem 0.4rem;
    font-weight: 600;
    vertical-align: middle;
}
button.refresh-indicator:hover {
    color: var(--link-hover);
    box-shadow: none;
    filter: none;
}
.refresh-indicator .i {
    transition: transform 0.4s ease;
}
.refresh-indicator.spinning .i {
    animation: auro-refresh-spin 0.6s ease;
}
@keyframes auro-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.request-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.request-form-col {
    padding: 2.6rem 3rem;
}
.request-form-col h1 {
    margin-top: 0;
}
.request-lede {
    color: var(--text-muted);
    max-width: 34rem;
    margin: 0.4rem 0 2rem;
}
.request-field {
    margin-bottom: 1.6rem;
}
.request-field label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--heading);
    margin-bottom: 0.5rem;
}
.request-required {
    color: var(--amber-600);
}
.request-field textarea {
    width: 100%;
    font-size: 0.95rem;
}
.request-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.55rem 0 0;
    max-width: 34rem;
}
.request-form-col button[type="submit"] {
    margin-top: 0.4rem;
}
.request-preview-col {
    background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
    color: #dbe1ee;
    padding: 2.4rem 2.1rem;
}
.request-preview-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7c88a3;
    margin: 0 0 1.1rem;
}
.request-preview-title:not(:first-child) {
    margin-top: 1.9rem;
}
.request-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-height: 1.9rem;
}
.request-chip {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    color: #e7ebf5;
    line-height: 1.3;
}
.request-chip-placeholder {
    color: #5c6b8a;
    font-style: italic;
    border-style: dashed;
}
.request-chip-more {
    color: var(--amber-400);
    border-color: rgba(251, 191, 36, 0.35);
}

.request-division-readout {
    font-size: 0.78rem;
    color: #a9b3c9;
    margin: 0.9rem 0 0;
}
.request-division-readout strong {
    color: #e7ebf5;
}

.div-edit-form[hidden] {
    display: none;
}
.request-sla-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-top: 1.4rem;
}
.request-sla-big {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--amber-400);
    line-height: 1.1;
}
.request-sla-label {
    font-size: 0.78rem;
    color: #a9b3c9;
    margin-top: 0.35rem;
    line-height: 1.45;
}
.request-timeline {
    display: flex;
    flex-direction: column;
}
.request-tl-item {
    display: flex;
    gap: 0.7rem;
    padding-bottom: 1.2rem;
    position: relative;
}
.request-tl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 1.1rem;
    bottom: -0.2rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}
.request-tl-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--navy-600);
    border: 2px solid #5c6b8a;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}
.request-tl-active .request-tl-dot {
    background: var(--amber-500);
    border-color: var(--amber-400);
}
.request-tl-text {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
}
.request-tl-text strong {
    font-size: 0.85rem;
    color: #e7ebf5;
}
.request-tl-text span {
    color: #7c88a3;
}

.mini-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.45rem;
    min-width: 13rem;
}
.mini-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 4.1rem;
    position: relative;
}
.mini-tl-item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0.28rem;
    right: 50%;
    width: 100%;
    height: 1px;
    background: var(--border);
    z-index: 0;
}
.mini-tl-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 2px solid #a9b3c9;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.mini-tl-dot.dot-done { background: var(--green); border-color: var(--green); }
.mini-tl-dot.dot-pending { background: var(--amber-500); border-color: var(--amber-500); }
.mini-tl-dot.dot-denied { background: var(--red); border-color: var(--red); }
.mini-tl-dot.dot-closed { background: var(--blue); border-color: var(--blue); }
.mini-tl-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0.3rem;
    text-align: center;
    white-space: nowrap;
}
.mini-tl-item.tl-current .mini-tl-label { color: var(--text); font-weight: 600; }

.request-envelope-card {
    scroll-margin-top: 5rem;
}
.request-envelope-card:target {
    animation: auro-target-highlight 2.4s ease-out;
}
@keyframes auro-target-highlight {
    from { box-shadow: 0 0 0 3px var(--amber-400); border-color: var(--amber-400); }
    to { box-shadow: var(--shadow-sm); }
}
.request-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1.9rem;
    padding: 0.95rem 1.05rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: var(--radius-sm);
}
.request-policy-note .i {
    margin-top: 0.1rem;
}
.request-policy-note p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #cdd6ea;
}
@media (max-width: 900px) {
    .request-split {
        grid-template-columns: 1fr;
    }
    .request-form-col {
        padding: 2rem 1.5rem;
    }
    .request-preview-col {
        padding: 2rem 1.5rem;
    }
}

.analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    
    align-items: start;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}
@media (max-width: 900px) {
    .analytics-grid { grid-template-columns: 1fr; }
}
.traffic-split-card {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex-wrap: wrap;
}
.traffic-split-ring {
    width: 8rem;
    height: 8rem;
    flex-shrink: 0;
    transform: rotate(-90deg);
}
.traffic-split-ring circle { fill: none; stroke-width: 5; }
.traffic-split-track { stroke: var(--border); }
.traffic-split-allowed { stroke: var(--green); stroke-linecap: round; }
.traffic-split-blocked { stroke: var(--red); stroke-linecap: round; }
.traffic-legend {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}
.traffic-legend-row { display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
.traffic-legend-value {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--heading);
}
.traffic-legend-total {
    border-top: 1px solid var(--border);
    padding-top: 0.45rem;
    color: var(--text-muted);
}
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--green); }
.dot-red { background: var(--red); }

.bar-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }
.bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.bar-row-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bar-row-hits { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading); }
.bar-track {
    grid-column: 1 / -1;
    height: 5px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 999px; }
.bar-fill.gold { background: var(--gradient-gold); }
.bar-fill.red { background: var(--red); opacity: 0.75; }

.scan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.1rem;
    align-items: start;
}
@media (max-width: 980px) {
    .scan-grid { grid-template-columns: 1fr; }
}
.browser-tile { padding: 0.75rem; }
.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.tb-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.tb-btn:disabled { opacity: 0.4; cursor: default; }
.url-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text);
    min-width: 0;
}
.url-bar svg { flex: 0 0 auto; color: var(--green); }
.live-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--green);
    background: var(--green-bg);
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green);
    animation: iscan-pulse 1.6s ease-in-out infinite;
}
@keyframes iscan-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(21,128,61,0.35); }
    50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(21,128,61,0); }
}
:root[data-theme="dark"] .live-dot { animation-name: iscan-pulse-dark; }
@keyframes iscan-pulse-dark {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.35); }
    50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}
.viewport-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    
    aspect-ratio: 1280 / 800;
    position: relative;
}
#iscan-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}
#iscan-canvas:focus { outline: 2px solid var(--amber-500); outline-offset: -2px; }
.browser-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.3rem 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.end-session-btn {
    background: var(--red-bg);
    color: #991b1b;
    border: 1px solid rgba(220,38,38,0.25);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.end-session-btn:disabled { opacity: 0.6; cursor: default; }
:root[data-theme="dark"] .end-session-btn { color: #fca5a5; }

.hosts-tile h2 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.15rem;
}
.hosts-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--amber-100);
    color: var(--warning-text);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.hosts-sub { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.8rem; line-height: 1.5; }
.hosts-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hosts-table td { padding: 0.5rem 0.3rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hosts-table tr:last-child td { border-bottom: none; }
.hosts-table .host-domain { font-weight: 600; word-break: break-all; }