/* AEGISFLOW_SPINO_V1 */
:root {
    --spino-bg-0: #01040a;
    --spino-bg-1: #03101f;
    --spino-bg-2: #071a31;
    --spino-panel: rgba(5, 15, 29, 0.93);
    --spino-panel-strong: rgba(4, 12, 24, 0.98);
    --spino-panel-soft: rgba(9, 27, 48, 0.78);
    --spino-line: rgba(61, 153, 255, 0.28);
    --spino-line-strong: rgba(72, 173, 255, 0.67);
    --spino-blue: #168cff;
    --spino-blue-bright: #45b8ff;
    --spino-cyan: #52e4ff;
    --spino-text: #f7fbff;
    --spino-muted: #849bb5;
    --spino-muted-strong: #b5c8da;
    --spino-green: #36e28f;
    --spino-yellow: #ffd23f;
    --spino-red: #ff4d63;
    --spino-purple: #a879ff;
    --spino-radius-sm: 9px;
    --spino-radius-md: 14px;
    --spino-radius-lg: 22px;
    --spino-shadow: 0 22px 70px rgba(0, 0, 0, 0.43);
    --spino-glow: 0 0 30px rgba(22, 140, 255, 0.17);
    --spino-motion: 180ms ease;
    --spino-brand-primary: var(--agency-primary, var(--af-brand-primary, #168cff));
    --spino-brand-secondary: var(--agency-secondary, var(--af-brand-secondary, #07182b));
    --spino-brand-accent: var(--agency-accent, var(--af-brand-accent, #52e4ff));
}


html {
    color-scheme: dark;
    background: var(--spino-bg-0);
}


body.af-spino {
    --spino-pointer-x: 50%;
    --spino-pointer-y: 10%;
    min-height: 100vh;
    color: var(--spino-text);
    background:
        radial-gradient(circle at var(--spino-pointer-x) var(--spino-pointer-y), rgba(28, 135, 255, 0.12), transparent 25rem),
        radial-gradient(circle at 10% -6%, rgba(22, 140, 255, 0.25), transparent 32rem),
        radial-gradient(circle at 93% 3%, rgba(82, 228, 255, 0.09), transparent 25rem),
        linear-gradient(145deg, var(--spino-bg-1), var(--spino-bg-0) 60%, #02050b) !important;
    background-attachment: fixed !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
}


body.af-spino::before,
body.af-spino::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
}


body.af-spino::before {
    inset: 0;
    opacity: 0.30;
    background:
        linear-gradient(rgba(52, 156, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 156, 255, 0.055) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 94%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 94%);
}


body.af-spino::after {
    right: -220px;
    bottom: -250px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(37, 142, 255, 0.17);
    border-radius: 50%;
    box-shadow:
        0 0 0 58px rgba(20, 111, 255, 0.026),
        0 0 0 116px rgba(20, 111, 255, 0.019),
        0 0 130px rgba(20, 129, 255, 0.10);
}


body.af-spino * {
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 151, 255, 0.55) rgba(2, 8, 16, 0.75);
}


body.af-spino *::-webkit-scrollbar { width: 9px; height: 9px; }
body.af-spino *::-webkit-scrollbar-track { background: rgba(2, 8, 16, 0.76); }
body.af-spino *::-webkit-scrollbar-thumb {
    border: 2px solid rgba(2, 8, 16, 0.76);
    border-radius: 999px;
    background: linear-gradient(var(--spino-blue), var(--spino-cyan));
}


body.af-spino a {
    text-underline-offset: 3px;
    transition: color var(--spino-motion), border-color var(--spino-motion), background var(--spino-motion), transform var(--spino-motion), box-shadow var(--spino-motion);
}


body.af-spino a:hover { color: #fff; }


body.af-spino header {
    position: relative;
    border-color: rgba(54, 143, 255, 0.28) !important;
    background:
        linear-gradient(100deg, rgba(12, 44, 82, 0.87), rgba(3, 10, 20, 0.94) 56%, rgba(2, 7, 14, 0.98)) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(18px);
}


body.af-spino header::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: -1px;
    width: min(260px, 30vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spino-cyan), transparent);
    box-shadow: 0 0 14px var(--spino-blue);
}


body.af-spino h1,
body.af-spino h2,
body.af-spino h3,
body.af-spino [class*="font-black"] {
    letter-spacing: 0.045em;
    text-shadow: 0 0 26px rgba(52, 163, 255, 0.12);
}


body.af-spino [class*="satin-silver-frame"],
body.af-spino [class*="neon-card"],
body.af-spino [class*="content-card"],
body.af-spino [class*="glass-panel"],
body.af-spino [class*="glass-card"],
body.af-spino [class*="rounded-2xl"][class*="border"],
body.af-spino [class*="rounded-xl"][class*="border"] {
    border-color: var(--spino-line) !important;
    background:
        radial-gradient(circle at 92% 4%, rgba(44, 155, 255, 0.11), transparent 34%),
        linear-gradient(145deg, rgba(8, 25, 45, 0.92), rgba(3, 10, 20, 0.975)) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.035),
        0 18px 44px rgba(0, 0, 0, 0.26),
        0 0 24px rgba(20, 120, 255, 0.045) !important;
    backdrop-filter: blur(15px);
}


body.af-spino [class*="satin-silver-frame"] {
    border-color: var(--spino-line-strong) !important;
    border-radius: var(--spino-radius-lg) !important;
    box-shadow: var(--spino-shadow), var(--spino-glow) !important;
}


body.af-spino [class*="bg-black"],
body.af-spino [class*="bg-slate-950"],
body.af-spino [class*="bg-gray-950"] {
    background-color: rgba(2, 8, 16, 0.86) !important;
}


body.af-spino [class*="border-gray"],
body.af-spino [class*="border-slate"] {
    border-color: rgba(52, 137, 225, 0.25) !important;
}


body.af-spino button,
body.af-spino input[type="submit"],
body.af-spino input[type="button"],
body.af-spino a[class*="border"][class*="rounded"] {
    border-color: rgba(62, 157, 255, 0.42) !important;
    color: #c9eaff;
    background: linear-gradient(145deg, rgba(15, 79, 145, 0.26), rgba(5, 25, 47, 0.62));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 9px 24px rgba(0, 0, 0, 0.18);
    transition: transform var(--spino-motion), border-color var(--spino-motion), background var(--spino-motion), color var(--spino-motion), box-shadow var(--spino-motion);
}


body.af-spino button:hover,
body.af-spino input[type="submit"]:hover,
body.af-spino input[type="button"]:hover,
body.af-spino a[class*="border"][class*="rounded"]:hover {
    transform: translateY(-1px);
    border-color: var(--spino-blue-bright) !important;
    color: #fff !important;
    background: linear-gradient(145deg, rgba(24, 123, 224, 0.40), rgba(8, 43, 79, 0.76));
    box-shadow: 0 0 22px rgba(35, 157, 255, 0.17), inset 0 1px rgba(255, 255, 255, 0.055);
}


body.af-spino button:active,
body.af-spino a[class*="border"][class*="rounded"]:active { transform: translateY(0); }


body.af-spino input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.af-spino select,
body.af-spino textarea {
    border-color: rgba(60, 143, 231, 0.34) !important;
    color: var(--spino-text) !important;
    background: rgba(1, 8, 17, 0.82) !important;
    box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.26);
    transition: border-color var(--spino-motion), box-shadow var(--spino-motion), background var(--spino-motion);
}


body.af-spino input::placeholder,
body.af-spino textarea::placeholder { color: #647b94 !important; }


body.af-spino input:focus,
body.af-spino select:focus,
body.af-spino textarea:focus {
    border-color: var(--spino-blue-bright) !important;
    outline: none !important;
    background: rgba(3, 14, 28, 0.96) !important;
    box-shadow: 0 0 0 3px rgba(22, 140, 255, 0.12), 0 0 24px rgba(22, 140, 255, 0.11) !important;
}


body.af-spino table {
    border-collapse: separate;
    border-spacing: 0;
}


body.af-spino thead {
    color: #9db5ce;
    background: linear-gradient(180deg, rgba(13, 48, 85, 0.66), rgba(4, 17, 31, 0.88));
}


body.af-spino th {
    border-bottom: 1px solid rgba(57, 149, 244, 0.34) !important;
    letter-spacing: 0.11em;
}


body.af-spino td {
    border-bottom-color: rgba(47, 114, 184, 0.18) !important;
}


body.af-spino tbody tr {
    transition: background var(--spino-motion), box-shadow var(--spino-motion);
}


body.af-spino tbody tr:hover {
    background: rgba(22, 113, 202, 0.095) !important;
    box-shadow: inset 3px 0 var(--spino-blue);
}


body.af-spino [class*="text-gray-"],
body.af-spino [class*="text-slate-400"],
body.af-spino [class*="text-slate-500"] { color: var(--spino-muted) !important; }


body.af-spino [class*="text-blue-"] { color: #70c8ff !important; }
body.af-spino [class*="text-purple-"] { color: #c39cff !important; }


body.af-spino [class*="text-green-"],
body.af-spino [class*="border-green-"],
body.af-spino .glow-green { --spino-semantic: var(--spino-green); }


body.af-spino [class*="text-yellow-"],
body.af-spino [class*="border-yellow-"],
body.af-spino .glow-yellow { --spino-semantic: var(--spino-yellow); }


body.af-spino [class*="text-red-"],
body.af-spino [class*="border-red-"],
body.af-spino .glow-red { --spino-semantic: var(--spino-red); }


body.af-spino [class*="bg-green-"] { background-color: rgba(20, 115, 69, 0.28) !important; }
body.af-spino [class*="bg-yellow-"] { background-color: rgba(119, 88, 13, 0.26) !important; }
body.af-spino [class*="bg-red-"] { background-color: rgba(124, 25, 43, 0.28) !important; }


body.af-spino .glow-green { box-shadow: 0 0 18px rgba(54, 226, 143, 0.68) !important; }
body.af-spino .glow-yellow { box-shadow: 0 0 18px rgba(255, 210, 63, 0.56) !important; }
body.af-spino .glow-red { box-shadow: 0 0 18px rgba(255, 77, 99, 0.58) !important; }


body.af-spino [role="dialog"],
body.af-spino [class*="fixed"][class*="inset-0"] > [class*="rounded"] {
    border-color: var(--spino-line-strong) !important;
    background: var(--spino-panel-strong) !important;
    box-shadow: var(--spino-shadow), 0 0 44px rgba(31, 145, 255, 0.16) !important;
    backdrop-filter: blur(20px);
}


body.af-spino [class*="animate-pulse"] { animation-duration: 2.1s; }


body.af-spino.af-spino-auth {
    display: grid;
    place-items: center;
    padding: 24px;
}


body.af-spino-auth > main,
body.af-spino-auth > div:not([hidden]) {
    position: relative;
    z-index: 1;
}


body.af-spino-auth form {
    border-color: rgba(61, 159, 255, 0.34);
}


body.af-spino-auth [class*="max-w-md"],
body.af-spino-auth [class*="max-w-lg"] {
    width: min(100%, 520px);
}


body.af-spino-insured {
    --spino-panel: rgba(5, 17, 30, 0.95);
}


body.af-spino-insured::before {
    opacity: 0.20;
    background-size: 72px 72px;
}


body.af-spino-insured header {
    background: linear-gradient(110deg, color-mix(in srgb, var(--spino-brand-primary) 26%, #07172a), rgba(3, 11, 21, 0.97)) !important;
}


body.af-spino-insured main {
    width: min(1120px, calc(100% - 22px));
    margin-inline: auto;
}


body.af-spino-management main {
    width: min(1860px, calc(100% - 20px));
    margin-inline: auto;
}


body.af-spino-management table { font-size: 0.86rem; }


body.af-spino-operations[data-af-page="dashboard"] > div,
body.af-spino-operations[data-af-page="dashboard"] > main {
    width: min(1880px, calc(100% - 22px));
    margin-inline: auto;
}


body.af-spino-operations[data-af-page="dashboard"] header {
    min-height: 78px;
}


body.af-spino-operations[data-af-page="dashboard"] section,
body.af-spino-operations[data-af-page="dashboard"] article {
    scroll-margin-top: 90px;
}


body.af-spino .af-command-body,
body.af-spino.af-command-body {
    background-color: transparent !important;
}


body.af-spino .is-submitting {
    opacity: 0.78;
    cursor: progress;
}


body.af-spino.af-keyboard-nav :focus-visible {
    outline: 2px solid var(--spino-cyan) !important;
    outline-offset: 3px !important;
}


@media (prefers-reduced-motion: reduce) {
    body.af-spino *,
    body.af-spino *::before,
    body.af-spino *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


@media (max-width: 900px) {
    body.af-spino { background-attachment: scroll !important; }
    body.af-spino::after { width: 430px; height: 430px; right: -210px; bottom: -220px; }
    body.af-spino header { backdrop-filter: blur(13px); }
    body.af-spino-management main,
    body.af-spino-insured main,
    body.af-spino-operations[data-af-page="dashboard"] > div,
    body.af-spino-operations[data-af-page="dashboard"] > main {
        width: min(100%, calc(100% - 12px));
    }
}


@media (max-width: 560px) {
    body.af-spino { padding: 6px !important; }
    body.af-spino-auth { padding: 12px !important; }
    body.af-spino [class*="rounded-2xl"] { border-radius: 15px !important; }
    body.af-spino table { min-width: 720px; }
}