/* =====================================================================
   Night Drive — panel theme package
   Hoke Designs Managed Hosting

   The landing page and the login screen are already Night Drive. This
   carries the same language through the panel: Orbitron chrome, Rajdhani
   body, a purple-black ground, and neon that lights an edge rather than
   flooding a surface.

   Loaded at PanelsRenderHook::STYLES_AFTER, so it is the last stylesheet in
   the document. Overrides are still written against :root:root (0,2,0) so
   they beat both Filament's :root block and its html.fi rules regardless of
   load order — a theme that depends on link order is a theme that breaks the
   first time somebody adds a stylesheet.

   Nothing here is scoped to a page, a resource or a widget. Every rule keys
   off a Filament structural class, so new pages inherit the theme by being
   built normally.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Palette
   Filament v4 resolves every surface, border and text colour through the
   --gray-* and --primary-* ramps, so re-pointing the ramps re-skins the
   whole panel without touching a single component rule.
   --------------------------------------------------------------------- */

:root:root {
    /* Night Drive source palette — same tokens as landing.blade.php */
    --nd-night: #0b0517;
    --nd-night-2: #140a2b;
    --nd-sky-mid: #22104a;
    --nd-horizon: #43196e;
    --nd-pink: #ff2d95;
    --nd-magenta: #ff1b8d;
    --nd-cyan: #00e7ff;
    --nd-violet: #9b4dff;
    --nd-amber: #ffb347;
    --nd-sun-1: #ffd319;
    --nd-sun-2: #ff901f;
    --nd-sun-3: #ff2975;
    --nd-ink: #f4ecff;
    --nd-ink-dim: #b9a8d9;

    --nd-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
    --nd-body: 'Rajdhani', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    --nd-script: 'Yellowtail', 'Brush Script MT', cursive;

    /* Surfaces, darkest last — Filament reads these as its neutral ramp. */
    --gray-50: #faf6ff;
    --gray-100: #f4ecff;
    --gray-200: #e4d8ff;
    --gray-300: #cbb9ec;
    --gray-400: #b9a8d9;
    --gray-500: #9584bb;
    --gray-600: #6f5f97;
    --gray-700: #3d2870;
    --gray-800: #241546;
    --gray-900: #140a2b;
    --gray-950: #0b0517;

    /* Primary is the pink tube. */
    --primary-50: #fff0f8;
    --primary-100: #ffdcef;
    --primary-200: #ffb8de;
    --primary-300: #ff8ac8;
    --primary-400: #ff5cb0;
    --primary-500: #ff2d95;
    --primary-600: #e51b80;
    --primary-700: #bd1268;
    --primary-800: #8f0e4f;
    --primary-900: #64093a;
    --primary-950: #3a0421;

    /* Status colours pushed to neon so they read against the night. */
    --info-50: #eafeff;
    --info-100: #c9fbff;
    --info-200: #93f6ff;
    --info-300: #57efff;
    --info-400: #22e9ff;
    --info-500: #00e7ff;
    --info-600: #00b8cc;
    --info-700: #008b9b;
    --info-800: #005e69;
    --info-900: #003b43;
    --info-950: #002229;

    --success-50: #e9fff6;
    --success-100: #c4ffe8;
    --success-200: #8dffd3;
    --success-300: #52ffbc;
    --success-400: #23f7a5;
    --success-500: #00e08c;
    --success-600: #00b371;
    --success-700: #008856;
    --success-800: #005c3a;
    --success-900: #003a25;
    --success-950: #002115;

    --warning-50: #fff8ec;
    --warning-100: #ffeccc;
    --warning-200: #ffd699;
    --warning-300: #ffc165;
    --warning-400: #ffb347;
    --warning-500: #ff901f;
    --warning-600: #db7100;
    --warning-700: #a85600;
    --warning-800: #723a00;
    --warning-900: #472400;
    --warning-950: #281400;

    --danger-50: #fff0f3;
    --danger-100: #ffd9e1;
    --danger-200: #ffb0c2;
    --danger-300: #ff819e;
    --danger-400: #ff5a80;
    --danger-500: #ff2d5f;
    --danger-600: #dd1345;
    --danger-700: #ac0c34;
    --danger-800: #760722;
    --danger-900: #4a0415;
    --danger-950: #2a020c;

    --font-family: 'Rajdhani';

    /* Reusable neon recipes. */
    --nd-tube: linear-gradient(100deg, var(--nd-cyan), var(--nd-violet), var(--nd-magenta), var(--nd-violet), var(--nd-cyan));
    --nd-surface: linear-gradient(180deg, rgba(26, 13, 52, 0.92), rgba(14, 7, 29, 0.96));
    --nd-glow-pink: 0 0 24px -6px rgba(255, 45, 149, 0.75);
    --nd-glow-cyan: 0 0 22px -6px rgba(0, 231, 255, 0.6);

    /* Hairline used by theme-aware panel blades (the profile picker); themes
       that do not define it fall back to a light-mode grey. */
    --nd-hair: rgba(155, 77, 255, 0.34);
}

@keyframes nd-edgeflow {
    to {
        background-position: 300% 0;
    }
}

@keyframes nd-flicker {
    0%, 86%, 88%, 92%, 100% { opacity: 1; }
    87%, 90.5% { opacity: 0.6; }
    91% { opacity: 0.82; }
}

@keyframes nd-sheen {
    0%, 58% { left: -70%; }
    78%, 100% { left: 150%; }
}

@keyframes nd-signon {
    0% { opacity: 0.2; }
    25% { opacity: 1; }
    40% { opacity: 0.3; }
    60% { opacity: 1; }
    75% { opacity: 0.5; }
}

/* ---------------------------------------------------------------------
   2. Ground
   The panel sits on the same night sky the landing page uses, with the
   faint perspective grid the horizon implies. Fixed, so it does not scroll
   away underneath long tables.
   --------------------------------------------------------------------- */

:root:root .fi-body {
    background-color: var(--nd-night);
    background-image:
        radial-gradient(120% 70% at 50% 108%, rgba(67, 25, 110, 0.55) 0%, rgba(11, 5, 23, 0) 60%),
        radial-gradient(90% 55% at 84% -8%, rgba(255, 27, 141, 0.14) 0%, rgba(11, 5, 23, 0) 62%),
        radial-gradient(80% 50% at 12% 4%, rgba(0, 231, 255, 0.09) 0%, rgba(11, 5, 23, 0) 58%);
    background-attachment: fixed;
    color: var(--nd-ink);
    font-family: var(--nd-body);
    -webkit-font-smoothing: antialiased;
}

:root:root ::selection {
    background: rgba(255, 45, 149, 0.4);
    color: #fff;
}

:root:root ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

:root:root ::-webkit-scrollbar-track {
    background: rgba(11, 5, 23, 0.85);
}

:root:root ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--nd-violet), var(--nd-magenta));
    border-radius: 999px;
    border: 2px solid rgba(11, 5, 23, 0.9);
}

:root:root ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--nd-cyan), var(--nd-pink));
}

/* Dark is the only mode this package ships in, so the switcher is a
   promise it cannot keep. */
:root:root .fi-theme-switcher {
    display: none;
}

/* ---------------------------------------------------------------------
   3. Typography
   Orbitron is chrome type: headings, labels, buttons, table headers, stat
   readouts. Rajdhani carries everything that is read as a sentence.
   --------------------------------------------------------------------- */

:root:root .fi-header-heading,
:root:root .fi-section-header-heading,
:root:root .fi-sc-section-label,
:root:root .fi-modal-heading,
:root:root .fi-simple-header-heading,
:root:root .fi-ta-header-heading,
:root:root .fi-fieldset-label,
:root:root .fi-wi-stats-overview-stat-value,
:root:root .fi-account-widget-heading,
:root:root .fi-global-search-result-group-header,
:root:root .fi-empty-state-heading,
:root:root .fi-ta-empty-state-heading {
    font-family: var(--nd-display);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 0 18px rgba(0, 231, 255, 0.35);
}

:root:root .fi-header-heading {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.5rem;
}

:root:root .fi-header-subheading,
:root:root .fi-section-header-description,
:root:root .fi-simple-header-subheading,
:root:root .fi-ta-header-description {
    color: var(--nd-ink-dim);
}

:root:root .fi-sidebar-group-label,
:root:root .fi-fo-field-label,
:root:root .fi-in-entry-label,
:root:root .fi-ta-header-cell,
:root:root .fi-wi-stats-overview-stat-label,
:root:root .fi-tabs-item-label,
:root:root .fi-ta-col-manager-heading,
:root:root .fi-ta-filters-heading,
:root:root .fi-pagination-item-label {
    font-family: var(--nd-display);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

:root:root .fi-sidebar-group-label {
    color: var(--nd-cyan);
    text-shadow: 0 0 12px rgba(0, 231, 255, 0.45);
}

:root:root .fi-fo-field-label,
:root:root .fi-in-entry-label {
    color: #dcc9ff;
}

/* The brand wordmark, wherever the layout puts it - the sidebar header on a
   sidebar panel, the topbar on a top-navigation one. Scoping this to the
   sidebar left it as stock Inter on every page. */
:root:root .fi-logo {
    font-family: var(--nd-display);
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 0 14px rgba(0, 231, 255, 0.6), 0 0 30px rgba(255, 45, 149, 0.35);
}

/* ---------------------------------------------------------------------
   4. Animated neon borders
   One recipe, applied to every container that reads as a panel. A masked
   gradient ring rather than a border-image: it keeps the radius, survives
   nesting, and never eats a click.
   --------------------------------------------------------------------- */

:root:root .fi-section,
:root:root .fi-ta-ctn,
:root:root .fi-wi-stats-overview-stat,
:root:root .fi-modal-window,
:root:root .fi-dropdown-panel,
:root:root .fi-account-widget,
:root:root .fi-fo-repeater-item,
:root:root .fi-fo-builder-item {
    position: relative;
    background: var(--nd-surface);
    border: 1px solid rgba(155, 77, 255, 0.26);
    box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(0, 0, 0, 0.35);
}

:root:root .fi-section::after,
:root:root .fi-ta-ctn::after,
:root:root .fi-wi-stats-overview-stat::after,
:root:root .fi-modal-window::after,
:root:root .fi-account-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--nd-tube);
    background-size: 300% 100%;
    animation: nd-edgeflow 16s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.55;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

:root:root .fi-section:hover::after,
:root:root .fi-ta-ctn:hover::after,
:root:root .fi-wi-stats-overview-stat:hover::after {
    opacity: 1;
}

/* The lit tube along the top edge of a card, borrowed from the landing
   page's neon-sign feature cards. */
:root:root .fi-section::before,
:root:root .fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 2px;
    border-radius: 2px;
    background: var(--nd-pink);
    box-shadow: 0 0 12px var(--nd-pink);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

:root:root .fi-section:hover::before,
:root:root .fi-wi-stats-overview-stat:hover::before {
    opacity: 1;
    animation: nd-signon 0.5s steps(1) 1;
}

:root:root .fi-section-header,
:root:root .fi-section-footer,
:root:root .fi-modal-header,
:root:root .fi-modal-footer,
:root:root .fi-ta-header,
:root:root .fi-ta-header-toolbar {
    background: transparent;
    border-color: rgba(155, 77, 255, 0.22);
}

/* ---------------------------------------------------------------------
   5. Sidebar and topbar
   --------------------------------------------------------------------- */

:root:root .fi-sidebar {
    background:
        linear-gradient(180deg, rgba(20, 10, 43, 0.96) 0%, rgba(11, 5, 23, 0.98) 62%, rgba(34, 16, 74, 0.96) 100%);
    border-inline-end: 1px solid rgba(155, 77, 255, 0.3);
    box-shadow: 1px 0 26px -12px rgba(255, 27, 141, 0.7);
    backdrop-filter: blur(6px);
}

:root:root .fi-sidebar-header {
    background: transparent;
    border-block-end: 1px solid rgba(255, 45, 149, 0.28);
    box-shadow: 0 1px 14px -6px rgba(255, 45, 149, 0.8);
}

:root:root .fi-sidebar-item-label {
    font-family: var(--nd-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #d7c8f2;
}

:root:root .fi-sidebar-item-btn {
    position: relative;
    border-radius: 10px;
    transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

:root:root .fi-sidebar-item-btn:hover {
    background: rgba(155, 77, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(0, 231, 255, 0.28), var(--nd-glow-cyan);
    transform: translateX(2px);
}

:root:root .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #fff;
}

:root:root .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(255, 45, 149, 0.26), rgba(155, 77, 255, 0.1) 62%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.42), var(--nd-glow-pink);
}

/* The lit tube marking the active route. */
:root:root .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--nd-cyan), var(--nd-pink));
    box-shadow: 0 0 10px var(--nd-pink), 0 0 18px rgba(0, 231, 255, 0.5);
}

:root:root .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 45, 149, 0.7);
}

:root:root .fi-topbar,
:root:root .fi-topbar-ctn {
    background: linear-gradient(180deg, rgba(20, 10, 43, 0.92), rgba(11, 5, 23, 0.86));
    border-block-end: 1px solid rgba(255, 45, 149, 0.3);
    box-shadow: 0 2px 22px -10px rgba(255, 27, 141, 0.85);
    backdrop-filter: blur(8px);
}

:root:root .fi-breadcrumbs a,
:root:root .fi-breadcrumbs {
    font-family: var(--nd-display);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nd-ink-dim);
}

:root:root .fi-breadcrumbs a:hover {
    color: var(--nd-cyan);
    text-shadow: 0 0 10px rgba(0, 231, 255, 0.6);
}

/* ---------------------------------------------------------------------
   6. Buttons
   The landing page's CTA, shrunk to panel scale: gradient tube, lit ring,
   and a sheen that crosses on hover instead of on a loop — a dashboard
   full of looping sheens is a dashboard nobody can read.
   --------------------------------------------------------------------- */

:root:root .fi-btn {
    font-family: var(--nd-display);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 0.72rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}

:root:root .fi-btn::after {
    content: '';
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -70%;
    width: 36%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

:root:root .fi-btn:hover::after {
    animation: nd-sheen 0.9s ease-in-out 1;
}

:root:root .fi-btn:hover {
    transform: translateY(-1px);
}

:root:root .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, #ff1b8d, #b3129e 55%, #7a1fd0);
    border: 1px solid rgba(255, 120, 196, 0.6);
    color: #fff;
    box-shadow: 0 0 18px -4px rgba(255, 27, 141, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

:root:root .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    box-shadow: 0 0 30px -4px rgba(255, 27, 141, 0.95), 0 8px 24px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

:root:root .fi-btn.fi-color-info:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, #00b8cc, #0d7fd6 60%, #5b3ad8);
    border: 1px solid rgba(0, 231, 255, 0.55);
    color: #062028;
    box-shadow: 0 0 18px -4px rgba(0, 231, 255, 0.65);
}

:root:root .fi-btn.fi-color-success:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, #00b371, #00d6a0 70%, #00e7ff);
    border: 1px solid rgba(0, 224, 140, 0.55);
    color: #04231a;
    box-shadow: 0 0 18px -4px rgba(0, 224, 140, 0.6);
}

:root:root .fi-btn.fi-color-warning:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, var(--nd-sun-1), var(--nd-sun-2) 55%, var(--nd-sun-3));
    border: 1px solid rgba(255, 179, 71, 0.6);
    color: #2a1400;
    box-shadow: 0 0 18px -4px rgba(255, 144, 31, 0.7);
}

:root:root .fi-btn.fi-color-danger:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, #ff2d5f, #c2124a 65%, #7a0f5d);
    border: 1px solid rgba(255, 90, 128, 0.6);
    color: #fff;
    box-shadow: 0 0 18px -4px rgba(255, 45, 95, 0.75);
}

:root:root .fi-btn.fi-color-gray:not(.fi-btn-outlined),
:root:root .fi-btn.fi-color-neutral:not(.fi-btn-outlined) {
    background: linear-gradient(180deg, rgba(36, 21, 70, 0.95), rgba(20, 10, 43, 0.95));
    border: 1px solid rgba(155, 77, 255, 0.4);
    color: var(--nd-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root:root .fi-btn.fi-btn-outlined {
    background: rgba(11, 5, 23, 0.5);
    border-width: 1px;
    color: var(--nd-ink);
}

:root:root .fi-btn.fi-btn-outlined:hover {
    box-shadow: 0 0 20px -6px currentColor;
}

:root:root .fi-link {
    color: var(--nd-cyan);
    transition: text-shadow 0.2s ease, color 0.2s ease;
}

:root:root .fi-link:hover {
    color: #7ff3ff;
    text-shadow: 0 0 12px rgba(0, 231, 255, 0.7);
}

:root:root .fi-icon-btn {
    border-radius: 9px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

:root:root .fi-icon-btn:hover {
    background: rgba(155, 77, 255, 0.18);
    box-shadow: 0 0 16px -5px var(--nd-cyan);
}

/* ---------------------------------------------------------------------
   7. Icons
   Every icon becomes a lit tube. Colour-carrying icons keep their own hue
   and simply gain the glow.
   --------------------------------------------------------------------- */

:root:root .fi-icon {
    filter: drop-shadow(0 0 5px currentColor);
}

:root:root .fi-sidebar-item .fi-icon {
    color: var(--nd-cyan);
}

:root:root .fi-sidebar-item.fi-active .fi-icon {
    color: var(--nd-pink);
}

:root:root .fi-btn .fi-icon,
:root:root .fi-icon-btn .fi-icon {
    filter: drop-shadow(0 0 4px currentColor);
}

:root:root .fi-empty-state-icon-bg,
:root:root .fi-ta-empty-state-icon-bg,
:root:root .fi-modal-icon-bg {
    background: rgba(11, 5, 23, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.4), 0 0 24px -8px var(--nd-pink);
}

/* ---------------------------------------------------------------------
   8. Tables
   Full neon, as asked: lit header rail, glowing row hover, magenta scan
   line on the sorted column, and a cyan tube down the selected row.
   --------------------------------------------------------------------- */

:root:root .fi-ta-header-cell {
    background: linear-gradient(180deg, rgba(34, 16, 74, 0.9), rgba(20, 10, 43, 0.9));
    color: var(--nd-cyan);
    text-shadow: 0 0 10px rgba(0, 231, 255, 0.45);
    border-block-end: 1px solid rgba(0, 231, 255, 0.35);
    box-shadow: inset 0 -1px 10px -4px rgba(0, 231, 255, 0.6);
}

:root:root .fi-ta-header-cell.fi-ta-header-cell-sorted {
    color: var(--nd-pink);
    text-shadow: 0 0 12px rgba(255, 45, 149, 0.75);
    border-block-end-color: rgba(255, 45, 149, 0.55);
    box-shadow: inset 0 -1px 12px -3px rgba(255, 45, 149, 0.8);
}

:root:root .fi-ta-table,
:root:root .fi-ta-content {
    background: transparent;
}

:root:root .fi-ta-row {
    position: relative;
    border-block-end: 1px solid rgba(155, 77, 255, 0.16);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

:root:root .fi-ta-row:nth-child(even) {
    background: rgba(34, 16, 74, 0.24);
}

:root:root .fi-ta-row:hover {
    background: linear-gradient(90deg, rgba(255, 45, 149, 0.14), rgba(0, 231, 255, 0.08) 55%, transparent);
    box-shadow: inset 0 0 0 1px rgba(0, 231, 255, 0.28), inset 3px 0 0 0 var(--nd-pink);
}

:root:root .fi-ta-row:has(.fi-ta-record-checkbox:checked) {
    background: linear-gradient(90deg, rgba(0, 231, 255, 0.16), rgba(155, 77, 255, 0.08) 60%, transparent);
    box-shadow: inset 3px 0 0 0 var(--nd-cyan), inset 0 0 22px -12px var(--nd-cyan);
}

:root:root .fi-ta-cell,
:root:root .fi-ta-text-item {
    color: var(--nd-ink);
}

:root:root .fi-ta-text-description {
    color: var(--nd-ink-dim);
}

:root:root .fi-ta-cell-label {
    font-family: var(--nd-display);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nd-ink-dim);
}

:root:root .fi-ta-empty-state,
:root:root .fi-ta-content-ctn {
    background: transparent;
}

:root:root .fi-pagination-item-btn.fi-active,
:root:root .fi-pagination-item-btn[aria-current='page'] {
    background: linear-gradient(135deg, #ff1b8d, #7a1fd0);
    color: #fff;
    box-shadow: var(--nd-glow-pink);
}

/* ---------------------------------------------------------------------
   9. Badges
   --------------------------------------------------------------------- */

:root:root .fi-badge {
    font-family: var(--nd-display);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 0.62rem;
    border-radius: 999px;
    background: rgba(11, 5, 23, 0.72);
    box-shadow: inset 0 0 0 1px currentColor, 0 0 14px -6px currentColor;
    text-shadow: 0 0 8px currentColor;
}

/* ---------------------------------------------------------------------
   10. Forms
   Dark glass fields with a cyan tube on focus. Text stays at full ink so
   sixty rows of site names remain readable.
   --------------------------------------------------------------------- */

:root:root .fi-input-wrp,
:root:root .fi-fo-textarea-wrp,
:root:root .fi-select-input-ctn,
:root:root .fi-fo-tags-input-wrp {
    background: rgba(11, 5, 23, 0.72);
    box-shadow: inset 0 0 0 1px rgba(155, 77, 255, 0.4), inset 0 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    transition: box-shadow 0.22s ease;
}

:root:root .fi-input-wrp:hover,
:root:root .fi-select-input-ctn:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 231, 255, 0.5), 0 0 16px -8px var(--nd-cyan);
}

:root:root .fi-input-wrp:has(:focus),
:root:root .fi-input-wrp.fi-focused,
:root:root .fi-select-input-ctn:has(:focus),
:root:root .fi-fo-textarea-wrp:has(:focus) {
    box-shadow: inset 0 0 0 1px var(--nd-cyan), 0 0 22px -6px rgba(0, 231, 255, 0.85);
}

/* Filament's own invalid marker only. An earlier cut also matched
   :has(:invalid), which lit every empty required field on first paint - a
   sign-in form that looks like it has already been failed. */
:root:root .fi-input-wrp.fi-invalid {
    box-shadow: inset 0 0 0 1px var(--nd-pink), 0 0 20px -8px var(--nd-pink);
}

:root:root .fi-input,
:root:root .fi-select-input,
:root:root .fi-fo-textarea {
    background: transparent;
    color: var(--nd-ink);
    font-family: var(--nd-body);
    font-weight: 600;
    font-size: 0.95rem;
}

:root:root .fi-input::placeholder {
    color: rgba(185, 168, 217, 0.55);
}

:root:root .fi-input-wrp-prefix,
:root:root .fi-input-wrp-suffix,
:root:root .fi-input-wrp-label {
    color: var(--nd-ink-dim);
}

:root:root .fi-checkbox-input,
:root:root .fi-radio-input {
    background: rgba(11, 5, 23, 0.85);
    border-color: rgba(155, 77, 255, 0.6);
}

:root:root .fi-checkbox-input:checked,
:root:root .fi-radio-input:checked {
    background-color: var(--nd-pink);
    border-color: var(--nd-pink);
    box-shadow: 0 0 12px -2px var(--nd-pink);
}

:root:root .fi-toggle.fi-toggle-on {
    background: linear-gradient(90deg, var(--nd-violet), var(--nd-pink));
    box-shadow: 0 0 14px -4px var(--nd-pink);
}

:root:root .fi-toggle.fi-toggle-off {
    background: rgba(61, 40, 112, 0.9);
}

:root:root .fi-fo-field-wrp-error-message {
    color: #ff8ac8;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.5);
}

/* ---------------------------------------------------------------------
   11. Widgets, tabs, dropdowns, modals, notifications
   --------------------------------------------------------------------- */

:root:root .fi-wi-stats-overview-stat-value {
    font-size: 1.7rem;
    text-shadow: 0 0 18px rgba(0, 231, 255, 0.55);
}

:root:root .fi-wi-stats-overview-stat-description {
    color: var(--nd-ink-dim);
    font-weight: 600;
}

:root:root .fi-tabs {
    background: rgba(11, 5, 23, 0.6);
    box-shadow: inset 0 0 0 1px rgba(155, 77, 255, 0.28);
    border-radius: 11px;
}

:root:root .fi-tabs-item.fi-active {
    background: linear-gradient(135deg, rgba(255, 27, 141, 0.9), rgba(122, 31, 208, 0.9));
    color: #fff;
    box-shadow: var(--nd-glow-pink);
}

:root:root .fi-dropdown-panel {
    backdrop-filter: blur(10px);
}

:root:root .fi-dropdown-list-item:hover {
    background: rgba(155, 77, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(0, 231, 255, 0.25);
}

:root:root .fi-dropdown-list-item-label {
    font-family: var(--nd-body);
    font-weight: 600;
}

:root:root .fi-modal-close-overlay {
    background: rgba(6, 3, 18, 0.82);
    backdrop-filter: blur(4px);
}

:root:root .fi-no-notification {
    background: var(--nd-surface);
    box-shadow: 0 0 0 1px rgba(155, 77, 255, 0.35), 0 14px 40px -18px rgba(0, 0, 0, 0.9), var(--nd-glow-pink);
}

:root:root .fi-user-avatar,
:root:root .fi-avatar {
    box-shadow: 0 0 0 1px rgba(255, 45, 149, 0.5), 0 0 16px -5px var(--nd-pink);
}

:root:root .fi-loading-indicator {
    color: var(--nd-cyan);
    filter: drop-shadow(0 0 8px var(--nd-cyan));
}

:root:root .fi-callout {
    background: rgba(20, 10, 43, 0.8);
    box-shadow: inset 0 0 0 1px currentColor, 0 0 20px -10px currentColor;
}

/* ---------------------------------------------------------------------
   12. Login
   The ambient scene is injected by the login-ambient view; this only makes
   the Filament card float on top of it as dark glass.
   --------------------------------------------------------------------- */

:root:root .fi-simple-main {
    background: linear-gradient(180deg, rgba(20, 10, 43, 0.82), rgba(11, 5, 23, 0.88));
    border: 1px solid rgba(255, 45, 149, 0.32);
    box-shadow: 0 0 44px -18px rgba(255, 27, 141, 0.9), 0 24px 70px -30px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

:root:root .fi-simple-header-heading {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
   13. The case-edge frame
   The Maingear case motif: four lit edges running the full viewport.
   Drawn by the theme-edges view, coloured here.
   --------------------------------------------------------------------- */

.nd-edge {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    background: var(--nd-tube, linear-gradient(100deg, #00e7ff, #9b4dff, #ff1b8d, #9b4dff, #00e7ff));
    background-size: 300% 100%;
    animation: nd-edgeflow 14s linear infinite;
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(255, 27, 141, 0.8)) drop-shadow(0 0 18px rgba(0, 231, 255, 0.35));
}

.nd-edge-t { top: 0; left: 0; right: 0; height: 2px; }
.nd-edge-b { bottom: 0; left: 0; right: 0; height: 2px; }
.nd-edge-l { left: 0; top: 0; bottom: 0; width: 2px; background-size: 100% 300%; }
.nd-edge-r { right: 0; top: 0; bottom: 0; width: 2px; background-size: 100% 300%; }

/* ---------------------------------------------------------------------
   14. Motion
   Everything above is decoration. Anyone who has asked their system to
   stop moving things gets a still Night Drive, not a broken one.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    :root:root .fi-section::after,
    :root:root .fi-ta-ctn::after,
    :root:root .fi-wi-stats-overview-stat::after,
    :root:root .fi-modal-window::after,
    :root:root .fi-account-widget::after,
    :root:root .fi-section:hover::before,
    :root:root .fi-wi-stats-overview-stat:hover::before,
    :root:root .fi-btn:hover::after,
    .nd-edge {
        animation: none !important;
    }
}