body {
    background-color: whitesmoke;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.container {
    max-width: 1140px;
}

.btn-default {
    background-color: #1b6ec2;
    color: white;
}

.btn-default:hover {
    background-color: dodgerblue;
    color: whitesmoke;
}

.key-sensi {
    filter: blur(3px);
}

/* Astral liquid-glass shell */
:root {
    --bg: #050b20;
    --panel: rgba(15, 35, 78, .58);
    --panel-strong: rgba(19, 43, 92, .78);
    --line: rgba(150, 194, 255, .24);
    --line-bright: rgba(160, 213, 255, .52);
    --text: #f4f7ff;
    --muted: #91a3c8;
    --violet: #8e75ff;
    --cyan: #45ccff;
    --green: #39dda0;
    --danger: #ff607d;
    --radius: 24px;
}

html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 80% -10%, rgba(39, 112, 255, .28), transparent 38%),
        radial-gradient(circle at 16% 12%, rgba(137, 63, 255, .22), transparent 34%),
        linear-gradient(145deg, #05091a, #06132e 55%, #071126);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body::before {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; content: "";
    background: linear-gradient(120deg, transparent 25%, rgba(70, 183, 255, .07) 48%, transparent 68%);
    animation: auroraShift 14s ease-in-out infinite alternate;
}
@keyframes auroraShift { to { transform: translate3d(5%, 2%, 0) scale(1.08); } }

/* Keep the shell on the same calm static backdrop as the auth screen. */
body:has(.app-shell),
body:has(.auth-shell) {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}
.app-shell,
.app-main,
.auth-shell {
    position: relative;
    z-index: 1;
}
.app-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 18px; min-height: 100vh; padding: 14px; }
.glass-sidebar, .glass-topbar, .liquid-card, .liquid-hero {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.018)), var(--panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 18px 55px rgba(0,0,0,.22);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}
.glass-sidebar { position: sticky; top: 14px; display: flex; height: calc(100vh - 28px); flex-direction: column; border-radius: 28px; overflow: hidden; }
.sidebar-close { display: none !important; }
.brand { display: flex; align-items: center; gap: 12px; padding: 24px 22px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(116,211,255,.55); border-radius: 15px; background: linear-gradient(145deg, rgba(137,99,255,.65), rgba(32,194,255,.35)); box-shadow: 0 8px 30px rgba(90,112,255,.35), inset 0 1px rgba(255,255,255,.4); font-size: 22px; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { font-size: 18px; }.brand small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.side-nav { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 10px 14px; overflow-y: auto; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.nav-label { padding: 7px 10px 9px; color: #7085ae; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.side-link { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 13px; border: 1px solid transparent; border-radius: 15px; color: #a9b8d6; font-size: 13px; font-weight: 600; text-decoration: none; transition: .2s ease; }
.side-link i { width: 20px; color: #91a5ce; font-size: 16px; text-align: center; }.side-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.side-link.active { border-color: rgba(127,194,255,.4); color: #fff; background: linear-gradient(110deg, rgba(95,97,255,.34), rgba(66,197,255,.12)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 9px 24px rgba(51,73,184,.18); }
.side-link.active i { color: #81d9ff; }
.side-status { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin: 14px; padding: 12px; border: 1px solid rgba(111,201,255,.25); border-radius: 17px; background: rgba(21,61,104,.42); }
.status-orb { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: rgba(41,217,154,.16); color: var(--green); }.side-status strong,.side-status small { display: block; }.side-status strong { font-size: 11px; }.side-status small { margin-top: 2px; color: var(--muted); font-size: 9px; }.side-status>.bi { color: #7790bc; font-size: 11px; }

.app-stage { min-width: 0; }.glass-topbar { position: sticky; top: 14px; z-index: 20; display: flex; min-height: 76px; align-items: center; gap: 14px; padding: 11px 14px 11px 18px; border-radius: 24px; }
.menu-btn { display: none !important; }.icon-btn { position: relative; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: #aabbe0; background: rgba(12,28,61,.52); text-decoration: none; }
.alert-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid #dce6ff; border-radius: 50%; background: #ff6685; }
.page-heading { flex: 1; }.page-heading small,.page-heading strong { display: block; }.page-heading small { color: #7186ae; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.page-heading strong { margin-top: 3px; font-size: 18px; }
.top-actions { display: flex; align-items: center; gap: 10px; }.profile-pill { display: flex; align-items: center; gap: 10px; min-width: 176px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: rgba(11,27,59,.55); text-align: left; }.avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: linear-gradient(145deg,#8d72ff,#3abfff); font-weight: 800; }.profile-copy { flex: 1; }.profile-copy strong,.profile-copy small { display: block; }.profile-copy strong { font-size: 11px; }.profile-copy small { color: var(--muted); font-size: 9px; }.profile-pill>.bi { color: #8397be; font-size: 10px; }
.glass-menu { border: 1px solid var(--line); border-radius: 16px; background: rgba(9,21,49,.92); box-shadow: 0 20px 50px rgba(0,0,0,.4); backdrop-filter: blur(20px); }.glass-menu .dropdown-item { color: #bfcae2; font-size: 12px; }.glass-menu .dropdown-item:hover { color: #fff; background: rgba(127,104,255,.18); }.glass-menu .dropdown-divider { border-color: rgba(255,255,255,.09); }
.app-main { min-width: 0; }.app-content { width: 100%; padding: 18px 0 36px; }

.security-dashboard { width: 100%; }.liquid-hero { position: relative; display: grid; grid-template-columns: minmax(280px,1.05fr) 150px 1fr; align-items: center; gap: 24px; min-height: 238px; padding: 30px 34px; border-color: var(--line-bright); border-radius: 30px; overflow: hidden; }
.liquid-hero::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 52% 35%, rgba(141,87,255,.33), transparent 30%), radial-gradient(circle at 86% 20%, rgba(37,189,255,.3), transparent 37%), linear-gradient(120deg, rgba(78,49,183,.18), transparent 58%); }
.liquid-hero>* { position: relative; z-index: 1; }.hero-kicker { display: inline-flex; align-items: center; gap: 7px; color: #9fb0ff; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.hero-copy h1 { margin: 12px 0 8px; font-size: clamp(28px,3vw,43px); font-weight: 700; letter-spacing: -.04em; }.hero-copy p { max-width: 470px; margin: 0; color: #a8b7d6; font-size: 13px; line-height: 1.6; }.live-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 7px 11px; border: 1px solid rgba(57,221,160,.25); border-radius: 999px; color: #a5c9bf; background: rgba(22,86,72,.25); font-size: 10px; }.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero-shield { display: grid; width: 126px; height: 126px; place-items: center; justify-self: center; border: 1px solid rgba(140,204,255,.42); border-radius: 38px; color: #ab9cff; background: linear-gradient(145deg,rgba(118,85,255,.25),rgba(48,186,255,.12)); box-shadow: inset 0 1px rgba(255,255,255,.26), 0 18px 45px rgba(59,76,218,.25); font-size: 64px; transform: rotate(-4deg); }
.hero-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.hero-metrics>div { min-width: 0; padding: 16px 12px; border: 1px solid rgba(162,209,255,.21); border-radius: 19px; background: linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.15); text-align: center; }.hero-metrics strong,.hero-metrics small { display: block; }.hero-metrics strong { margin: 9px 0 3px; overflow: hidden; font-size: 20px; text-overflow: ellipsis; }.hero-metrics small { color: #94a6c7; font-size: 9px; }.metric-icon { display: grid; width: 34px; height: 34px; margin: auto; place-items: center; border-radius: 12px; background: rgba(142,117,255,.2); color: #ab9cff; }.metric-icon.cyan { background: rgba(69,204,255,.15); color: var(--cyan); }.metric-icon.green { background: rgba(57,221,160,.14); color: var(--green); }

.dash-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 16px; margin-top: 16px; }.liquid-card { padding: 23px; border-radius: var(--radius); }.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.card-title small,.card-title h2 { display: block; }.card-title small { color: #7186ae; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.card-title h2 { margin: 4px 0 0; font-size: 18px; }.card-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(167,146,255,.28); border-radius: 15px; color: #aa98ff; background: rgba(126,99,255,.15); font-size: 19px; }.card-icon.cyan { color: var(--cyan); background: rgba(69,204,255,.12); }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 24px 0 18px; }.countdown>div { padding: 13px 8px; border: 1px solid rgba(142,179,234,.16); border-radius: 15px; background: rgba(10,28,62,.43); text-align: center; }.countdown strong,.countdown span { display: block; }.countdown strong { font-size: 25px; }.countdown span { margin-top: 2px; color: var(--muted); font-size: 8px; text-transform: uppercase; }.progress-track { height: 6px; border-radius: 99px; background: rgba(87,112,164,.23); overflow: hidden; }.progress-track i { display: block; width: 5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow: 0 0 14px rgba(72,194,255,.55); transition: width .5s; }.card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; color: var(--muted); font-size: 9px; }.card-foot span { color: #8bcab8; }.card-foot i { margin-right: 4px; color: var(--green); }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0; }.profile-stats>div { padding: 13px; border: 1px solid rgba(137,174,231,.16); border-radius: 15px; background: rgba(10,28,62,.4); }.profile-stats span,.profile-stats strong { display: block; }.profile-stats span { color: var(--muted); font-size: 9px; }.profile-stats strong { margin-top: 4px; font-size: 12px; }.glass-action { display: flex; justify-content: space-between; padding: 12px 14px; border: 1px solid rgba(132,196,255,.25); border-radius: 14px; color: #c9d7f5; background: rgba(57,101,176,.18); font-size: 11px; font-weight: 700; text-decoration: none; }
.history-card { grid-column: 1/-1; }.history-head { margin-bottom: 15px; }.record-pill { padding: 7px 10px; border: 1px solid rgba(139,117,255,.24); border-radius: 99px; color: #a99cff; background: rgba(112,91,214,.12); font-size: 9px; }.liquid-table-wrap { overflow-x: auto; }.liquid-table { width: 100%; border-collapse: collapse; color: #bfcae0; font-size: 11px; }.liquid-table th { padding: 10px 12px; color: #6f84ad; font-size: 8px; letter-spacing: .11em; text-align: left; text-transform: uppercase; }.liquid-table td { padding: 12px; border-top: 1px solid rgba(133,161,214,.12); }.liquid-table tbody tr:hover { background: rgba(102,139,216,.06); }.ref-code { color: #a999ff; font-family: ui-monospace,Consolas,monospace; }.device-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; color: #78d8ff; background: rgba(56,181,233,.10); }.empty-row { padding: 25px !important; color: var(--muted); text-align: center !important; }.danger-ghost { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 9px 12px; border: 1px solid rgba(255,96,125,.22); border-radius: 12px; color: #ff8da2; background: rgba(255,67,104,.07); font-size: 10px; }

@media (max-width: 1100px) { .liquid-hero { grid-template-columns: 1fr 110px; }.hero-metrics { grid-column: 1/-1; }.hero-shield { width: 100px; height: 100px; font-size: 48px; }.dash-grid { grid-template-columns: 1fr; }.history-card { grid-column: auto; } }
@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; padding: 9px; }.glass-sidebar { position: fixed; top: 9px; bottom: 9px; left: 9px; z-index: 50; width: min(82vw,280px); height: auto; transform: translateX(calc(-100% - 18px)); transition: transform .25s ease; }.sidebar-open .glass-sidebar { transform: none; }.sidebar-open::after { position: fixed; inset: 0; z-index: 40; content: ""; background: rgba(1,5,18,.62); backdrop-filter: blur(4px); }.glass-topbar { top: 9px; min-height: 64px; border-radius: 20px; }.menu-btn { display: grid !important; }.app-content { padding-top: 12px; }.liquid-hero { grid-template-columns: 1fr 80px; min-height: 0; padding: 23px; border-radius: 24px; }.hero-shield { width: 72px; height: 72px; border-radius: 24px; font-size: 34px; }.hero-metrics { grid-template-columns: repeat(3,1fr); }.profile-copy { display: none; }.profile-pill { min-width: 0; }.profile-pill>.bi { display: none; }
}
@media (max-width: 560px) {
    .page-heading small { display: none; }.page-heading strong { font-size: 15px; }.top-actions { gap: 6px; }.icon-btn { width: 39px; height: 39px; }.profile-pill { padding: 3px; border: 0; background: transparent; }.avatar { width: 38px; height: 38px; }.liquid-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px; }.hero-shield { position: absolute; top: 18px; right: 18px; width: 54px; height: 54px; border-radius: 18px; font-size: 26px; opacity: .8; }.hero-copy { padding-right: 48px; }.hero-copy h1 { font-size: 25px; }.hero-copy p { font-size: 11px; }.hero-metrics { gap: 6px; }.hero-metrics>div { padding: 12px 5px; border-radius: 15px; }.hero-metrics strong { font-size: 15px; }.hero-metrics small { font-size: 7px; }.metric-icon { width: 29px; height: 29px; border-radius: 10px; }.liquid-card { padding: 17px; border-radius: 20px; }.countdown { gap: 5px; }.countdown>div { padding: 11px 4px; }.countdown strong { font-size: 19px; }.profile-stats { gap: 6px; }.profile-stats>div { padding: 11px; }.card-foot { flex-direction: column; }.liquid-table { min-width: 620px; }
}

/* Bright frosted-glass theme */
:root {
    --bg: #edf5fb;
    --panel: rgba(255, 255, 255, .66);
    --panel-strong: rgba(255, 255, 255, .86);
    --line: rgba(129, 160, 198, .24);
    --line-bright: rgba(255, 255, 255, .88);
    --text: #1b2b43;
    --muted: #687991;
    --violet: #7564e8;
    --cyan: #35aee6;
    --green: #1ca873;
    --danger: #df5573;
    --radius: 24px;
}

html,
body {
    color: var(--text);
    background:
        radial-gradient(circle at 8% 6%, rgba(116, 174, 255, .32), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(190, 179, 255, .28), transparent 31%),
        radial-gradient(circle at 48% 100%, rgba(93, 209, 238, .2), transparent 35%),
        linear-gradient(135deg, #edf6fc, #f8fbff 52%, #f0efff);
}

body::before {
    background:
        linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, .5) 48%, transparent 72%),
        radial-gradient(circle at 24% 72%, rgba(255, 255, 255, .6), transparent 24%);
    opacity: .74;
}

body:has(.app-shell) {
    background-color: #edf5fb;
}

.glass-sidebar,
.glass-topbar,
.liquid-card,
.liquid-hero,
.app-content .card,
.app-content .modal-content,
.app-content .dropdown-menu,
.app-content .table-responsive,
.app-content .list-group-item {
    border-color: rgba(255, 255, 255, .82);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .48) 54%, rgba(219, 239, 255, .42)),
        rgba(255, 255, 255, .58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -1px 0 rgba(145, 187, 226, .18),
        0 18px 45px rgba(84, 125, 169, .14);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.glass-sidebar {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -1px 0 rgba(141, 191, 232, .18),
        0 22px 58px rgba(84, 125, 169, .18);
}

.brand {
    color: var(--text);
}

.brand-mark {
    border-color: rgba(255, 255, 255, .9);
    background: linear-gradient(145deg, rgba(112, 137, 255, .9), rgba(84, 190, 235, .68));
    box-shadow: 0 10px 26px rgba(70, 142, 220, .25), inset 0 1px rgba(255, 255, 255, .74);
}

.brand small,
.nav-label,
.page-heading small,
.card-title small {
    color: #71829a;
}

.side-link {
    color: #344965;
}

.side-link i {
    color: #617894;
}

.side-link:hover {
    color: #1762d1;
    background: rgba(255, 255, 255, .62);
}

.side-link.active {
    border-color: rgba(255, 255, 255, .9);
    color: #1762d1;
    background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(218, 239, 255, .72));
    box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 10px 24px rgba(70, 143, 221, .18);
}

.side-link.active i {
    color: #2676dd;
}

.side-status {
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(205, 236, 255, .42));
}

.status-orb {
    background: rgba(42, 190, 141, .14);
    color: #159a6d;
}

.side-status strong,
.side-status small {
    color: var(--text);
}

.side-status small {
    color: var(--muted);
}

.glass-topbar {
    color: var(--text);
}

.page-heading strong {
    color: var(--text);
}

.icon-btn,
.profile-pill {
    border-color: rgba(255, 255, 255, .84);
    color: #314764;
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(224, 241, 255, .5));
    box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 8px 22px rgba(75, 122, 170, .12);
}

.icon-btn:hover,
.profile-pill:hover {
    color: #1264d9;
    background: rgba(255, 255, 255, .92);
}

.profile-copy strong {
    color: var(--text);
}

.profile-copy small,
.profile-pill > .bi {
    color: var(--muted);
}

.avatar {
    color: #fff;
    background: linear-gradient(145deg, #7f72e9, #43b9eb);
}

.brand-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 7px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(63, 96, 146, .16));
}

.avatar-image {
    overflow: hidden;
    padding: 0;
}

.avatar-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glass-menu,
.app-content .dropdown-menu {
    border-color: rgba(255, 255, 255, .88);
    background: rgba(248, 252, 255, .9);
    box-shadow: 0 22px 44px rgba(74, 113, 153, .2);
}

.glass-menu .dropdown-item,
.app-content .dropdown-item {
    color: #314764;
}

.glass-menu .dropdown-item:hover,
.app-content .dropdown-item:hover {
    color: #1264d9;
    background: rgba(216, 237, 255, .72);
}

body:has(.app-shell) .glass-topbar .glass-menu {
    min-width: 190px;
    padding: 8px;
    border-color: rgba(255, 255, 255, .82);
    background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(235, 246, 255, .58) 54%, rgba(225, 231, 255, .64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 20px 45px rgba(65, 101, 151, .22);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
}

body:has(.app-shell) .glass-topbar .glass-menu .dropdown-item {
    border-radius: 11px;
    color: #243a58 !important;
}

body:has(.app-shell) .glass-topbar .glass-menu .dropdown-item:hover,
body:has(.app-shell) .glass-topbar .glass-menu .dropdown-item:focus-visible {
    color: #1264d9 !important;
    background: rgba(255, 255, 255, .52);
}

body:has(.app-shell) .glass-topbar .glass-menu .dropdown-divider {
    border-color: rgba(99, 128, 166, .2);
}

.liquid-hero {
    border-color: rgba(255, 255, 255, .9);
    background:
        radial-gradient(circle at 80% 15%, rgba(172, 213, 255, .46), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(228, 241, 255, .56) 58%, rgba(239, 235, 255, .7));
}

.liquid-hero::before {
    background:
        radial-gradient(circle at 58% 35%, rgba(143, 173, 255, .22), transparent 31%),
        radial-gradient(circle at 90% 18%, rgba(65, 196, 235, .25), transparent 34%),
        linear-gradient(120deg, rgba(255, 255, 255, .3), transparent 58%);
}

.hero-kicker,
.hero-copy p,
.hero-metrics small,
.card-foot,
.profile-stats span,
.liquid-table,
.record-pill {
    color: var(--muted);
}

.hero-copy h1,
.card-title h2,
.profile-stats strong {
    color: var(--text);
}

.live-pill {
    border-color: rgba(32, 174, 128, .22);
    color: #218166;
    background: rgba(198, 244, 226, .68);
}

.live-pill i {
    background: #23b988;
    box-shadow: 0 0 12px rgba(35, 185, 136, .38);
}

.hero-shield,
.metric-icon,
.card-icon {
    border-color: rgba(255, 255, 255, .78);
    background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(203, 231, 255, .55));
    color: #6178e8;
    box-shadow: inset 0 1px rgba(255, 255, 255, .88), 0 12px 28px rgba(82, 135, 207, .16);
}

.metric-icon.cyan,
.card-icon.cyan {
    color: #1c9fd7;
    background: rgba(191, 239, 255, .58);
}

.metric-icon.green {
    color: #159a6d;
    background: rgba(205, 247, 230, .64);
}

.hero-metrics > div,
.countdown > div,
.profile-stats > div {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 1px rgba(255, 255, 255, .84);
}

.progress-track {
    background: rgba(138, 169, 201, .24);
}

.progress-track i {
    background: linear-gradient(90deg, #8172e9, #41bfe7);
    box-shadow: 0 0 14px rgba(65, 176, 225, .38);
}

.glass-action,
.danger-ghost,
.record-pill {
    border-color: rgba(255, 255, 255, .78);
    color: #315071;
    background: rgba(255, 255, 255, .48);
}

.liquid-table th {
    color: #6b7f99;
}

.liquid-table td {
    border-color: rgba(125, 160, 198, .2);
}

.ref-code {
    color: #6656d6;
}

.device-pill {
    color: #168bbf;
    background: rgba(180, 235, 255, .42);
}

.app-content .card,
.app-content .card-header,
.app-content .card-body,
.app-content .card-footer,
.app-content label,
.app-content .form-label {
    color: var(--text) !important;
}

.app-content .card-header.bg-dark,
.app-content .card-header.bg-primary,
.app-content .bg-light,
.app-content .list-group-item {
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, .74) !important;
    background: rgba(255, 255, 255, .42) !important;
}

.app-content .card small,
.app-content .card .text-muted,
.app-content .form-text {
    color: var(--muted) !important;
}

.app-content .form-control,
.app-content .form-select,
.app-content textarea,
.app-content .input-group-text {
    border-color: rgba(144, 176, 210, .34);
    background: rgba(255, 255, 255, .56);
    color: var(--text) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 7px 20px rgba(87, 125, 164, .08);
}

.app-content .form-control:focus,
.app-content .form-select:focus,
.app-content textarea:focus {
    border-color: rgba(91, 134, 227, .66);
    background: rgba(255, 255, 255, .76);
    color: var(--text) !important;
    box-shadow: 0 0 0 4px rgba(97, 145, 230, .14), inset 0 1px rgba(255, 255, 255, .9);
}

.app-content .form-control::placeholder,
.app-content textarea::placeholder {
    color: #8293aa !important;
}

.app-content .table,
.app-content .table > :not(caption) > * > * {
    border-color: rgba(125, 160, 198, .2);
    color: var(--text);
}

.app-content .btn-dark,
.app-content .btn-outline-dark,
.app-content .btn-primary {
    border-color: rgba(255, 255, 255, .78);
    color: #fff;
    background: linear-gradient(135deg, #7e70e7, #4daee8);
    box-shadow: 0 10px 22px rgba(74, 126, 209, .18), inset 0 1px rgba(255, 255, 255, .34);
}

.app-content .btn-dark:hover,
.app-content .btn-outline-dark:hover,
.app-content .btn-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, #6e60d7, #329bd7);
}

.private-panel .badge {
    color: #3b4c68;
    background: rgba(214, 229, 255, .82);
}

/* Auth pages use the same daylight glass language. */
body:has(.auth-shell) {
    background-color: #edf5fb;
}

.auth-shell {
    --auth-text: #1b2b43;
    --auth-muted: #687991;
    background:
        radial-gradient(circle at 12% 18%, rgba(119, 174, 255, .35), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(190, 177, 255, .3), transparent 36%),
        linear-gradient(135deg, #edf6fc, #fbfdff 55%, #f0efff);
}

.auth-atmosphere {
    background-image:
        linear-gradient(rgba(101, 136, 181, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 136, 181, .07) 1px, transparent 1px);
}

.auth-atmosphere::before {
    background:
        radial-gradient(ellipse at 18% 22%, rgba(120, 169, 255, .34), transparent 30%),
        radial-gradient(ellipse at 82% 70%, rgba(130, 221, 246, .26), transparent 28%),
        radial-gradient(ellipse at 58% 38%, rgba(192, 161, 255, .2), transparent 23%);
}

.auth-atmosphere::after {
    opacity: .34;
    background-image:
        radial-gradient(circle at 16% 28%, rgba(66, 155, 225, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(127, 105, 224, .55) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 76%, rgba(95, 189, 224, .6) 0 1px, transparent 2px);
}

.auth-frame {
    border-color: rgba(255, 255, 255, .86);
    background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46) 48%, rgba(220, 237, 255, .46));
    box-shadow: 0 30px 80px rgba(79, 116, 157, .2), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px rgba(145, 187, 226, .16);
    backdrop-filter: blur(34px) saturate(145%);
    -webkit-backdrop-filter: blur(34px) saturate(145%);
}

.auth-frame::before {
    background: linear-gradient(120deg, rgba(255, 255, 255, .62), transparent 21%, transparent 58%, rgba(149, 216, 255, .16));
    mix-blend-mode: normal;
}

.auth-frame::after {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255, 255, 255, .55), transparent 25%),
        radial-gradient(ellipse at 88% 92%, rgba(112, 213, 255, .18), transparent 30%),
        radial-gradient(ellipse at 58% 42%, rgba(183, 157, 255, .15), transparent 28%);
    mix-blend-mode: normal;
}

.auth-story {
    border-right-color: rgba(255, 255, 255, .78);
    background: linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(215, 236, 255, .34) 58%, rgba(230, 225, 255, .4));
}

.auth-brand,
.auth-mobile-brand,
.auth-story h1,
.auth-story p,
.auth-heading h2,
.auth-field > span {
    color: var(--auth-text);
}

.auth-story p,
.auth-heading p,
.auth-options,
.auth-switch {
    color: var(--auth-muted);
}

.auth-kicker,
.auth-heading > span {
    color: #6659d4;
}

.auth-field > div {
    border-color: rgba(126, 159, 196, .34);
    background: rgba(255, 255, 255, .52);
    box-shadow: inset 0 1px rgba(255, 255, 255, .86), 0 8px 20px rgba(91, 128, 164, .1);
}

.auth-field > div:focus-within {
    border-color: rgba(91, 134, 227, .66);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 0 0 4px rgba(97, 145, 230, .14), inset 0 1px rgba(255, 255, 255, .9);
}

.auth-field input {
    color: var(--auth-text);
}

.auth-field input::placeholder {
    color: #8293aa;
}

.auth-field > div > i,
.password-toggle {
    color: #5f74ca;
}

.auth-options label span {
    border-color: rgba(106, 139, 180, .46);
    background: rgba(255, 255, 255, .52);
}

.auth-options > span i,
.trust-row i {
    color: #18a985;
}

.auth-submit {
    background: linear-gradient(110deg, #7d6be7, #5b9de8);
    box-shadow: 0 15px 30px rgba(82, 123, 209, .2), inset 0 1px rgba(255, 255, 255, .38);
}

.preview-login {
    border-color: rgba(58, 161, 215, .4);
    color: #1377ae;
    background: rgba(203, 240, 255, .45);
}

.auth-switch a {
    color: #5d54c9;
    border-color: rgba(126, 159, 196, .28);
    background: rgba(255, 255, 255, .5);
}

.auth-panel .alert {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .5);
    color: var(--auth-text);
}

@media (max-width: 820px) {
    .glass-sidebar,
    .glass-topbar,
    .liquid-card,
    .liquid-hero,
    .app-content .card,
    .app-content .modal-content,
    .app-content .dropdown-menu,
    .app-content .table-responsive {
        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
    }
}
/* Auth workspace */
.auth-shell{--auth-violet:#8e74ff;--auth-cyan:#4bdcff;--auth-text:#f5f7ff;--auth-muted:#aab4d0;position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:32px;background:radial-gradient(circle at 15% 15%,rgba(112,79,255,.24),transparent 33%),radial-gradient(circle at 88% 82%,rgba(20,192,255,.16),transparent 36%),#060b1b;color:var(--auth-text)}
.auth-atmosphere,.auth-atmosphere i{position:absolute;inset:0;pointer-events:none}.auth-atmosphere{z-index:-1;overflow:hidden;background-image:linear-gradient(rgba(125,144,220,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(125,144,220,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.auth-atmosphere i{width:340px;height:340px;border:1px solid rgba(141,116,255,.18);border-radius:50%;animation:authFloat 12s ease-in-out infinite}.auth-atmosphere i:nth-child(1){inset:-130px auto auto 8%}.auth-atmosphere i:nth-child(2){inset:auto -90px -150px auto;width:430px;height:430px;animation-delay:-4s}.auth-atmosphere i:nth-child(3){inset:42% auto auto 48%;width:8px;height:8px;border:0;background:#55ddff;box-shadow:0 0 22px #55ddff;animation-delay:-7s}
@keyframes authFloat{50%{transform:translate3d(12px,-16px,0) scale(1.04)}}
.auth-frame{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);border:1px solid rgba(145,164,229,.25);border-radius:34px;overflow:hidden;background:linear-gradient(135deg,rgba(25,34,67,.72),rgba(10,18,42,.58));box-shadow:0 34px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
.auth-story,.auth-panel{position:relative;padding:48px}.auth-story{min-height:650px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(150deg,rgba(111,73,237,.27),rgba(25,42,88,.16) 55%,rgba(62,204,255,.08));border-right:1px solid rgba(155,172,225,.16)}
.auth-story:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.05);border-radius:24px;pointer-events:none}.auth-brand{display:inline-flex;align-items:center;gap:12px;width:max-content;color:var(--auth-text);text-decoration:none;font-size:18px}.auth-brand span,.auth-mobile-brand i{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(178,189,255,.3);border-radius:13px;background:linear-gradient(145deg,rgba(158,118,255,.55),rgba(56,189,248,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px rgba(92,64,214,.22)}
.auth-visual{position:relative;align-self:center;display:grid;place-items:center;width:185px;height:185px;color:#ff6ea8;font-size:52px;filter:drop-shadow(0 0 25px rgba(255,80,156,.28))}.shield-rings,.shield-rings:before,.shield-rings:after{position:absolute;inset:12px;content:"";border:1px solid rgba(137,113,255,.5);border-radius:50%}.shield-rings:before{inset:15px;border-color:rgba(73,217,255,.34);border-style:dashed;animation:authSpin 18s linear infinite}.shield-rings:after{inset:35px;border-color:rgba(255,99,165,.48);box-shadow:0 0 30px rgba(255,77,153,.16)}
@keyframes authSpin{to{transform:rotate(360deg)}}
.auth-kicker{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:#baaaff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.auth-kicker i{width:7px;height:7px;border-radius:50%;background:#36d8ac;box-shadow:0 0 12px #36d8ac}.auth-story h1{max-width:470px;margin:0 0 16px;font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.045em}.auth-story p{max-width:470px;margin:0;color:var(--auth-muted);font-size:16px;line-height:1.7}.trust-row{display:flex;gap:10px;flex-wrap:wrap}.trust-row span{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid rgba(151,169,228,.16);border-radius:999px;background:rgba(9,17,42,.34);color:#bdc6dd;font-size:12px}.trust-row i{color:#5fe2cd}
.auth-panel{display:flex;flex-direction:column;justify-content:center;background:rgba(7,13,32,.28)}.auth-mobile-brand{display:none}.auth-heading{margin-bottom:28px}.auth-heading>span{display:block;margin-bottom:9px;color:#9d88ff;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.auth-heading h2{margin:0 0 9px;font-size:32px;letter-spacing:-.035em}.auth-heading p{margin:0;color:var(--auth-muted);font-size:14px}.auth-form{display:grid;gap:18px}.auth-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.auth-field{display:grid;gap:8px;margin:0}.auth-field-wide{grid-column:1/-1}.auth-field>span{display:flex;justify-content:space-between;color:#dfe5f6;font-size:13px;font-weight:700}.auth-field em{color:#8490ae;font-size:11px;font-style:normal;font-weight:600}.auth-field>div{display:flex;align-items:center;min-height:54px;border:1px solid rgba(132,151,215,.25);border-radius:16px;background:rgba(7,15,37,.54);transition:border-color .2s,box-shadow .2s,background .2s}.auth-field>div:focus-within{border-color:rgba(143,116,255,.8);background:rgba(11,20,48,.82);box-shadow:0 0 0 4px rgba(139,111,255,.1),inset 0 1px 0 rgba(255,255,255,.05)}.auth-field>div>i{margin-left:17px;color:#9484e8}.auth-field input{min-width:0;flex:1;border:0;outline:0;padding:15px 14px;background:transparent;color:#f5f7ff;font:inherit}.auth-field input::placeholder{color:#717d9b}.auth-field small{color:#ff7f9f}.password-toggle{display:grid;place-items:center;margin-right:8px;width:40px;height:40px;border:0;border-radius:11px;background:transparent;color:#9ea9c3}.password-toggle:hover{background:rgba(141,116,255,.12);color:#c9bcff}
.auth-options{display:flex;align-items:center;justify-content:space-between;color:#aab4cf;font-size:12px}.auth-options label{display:flex;align-items:center;gap:9px;cursor:pointer}.auth-options input{position:absolute;opacity:0}.auth-options label span{display:grid;place-items:center;width:18px;height:18px;border:1px solid rgba(152,168,218,.4);border-radius:6px;background:rgba(5,12,30,.55)}.auth-options input:checked+span{border-color:#9279ff;background:#9279ff;box-shadow:inset 0 0 0 4px #9279ff}.auth-options input:checked+span:after{content:"\2713";color:#fff;font-size:12px}.auth-options>span{display:flex;align-items:center;gap:6px}.auth-options>span i{color:#5edbc8}
.auth-submit,.preview-login{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:16px;font-weight:800;transition:transform .2s,box-shadow .2s}.auth-submit{border:0;background:linear-gradient(110deg,#9179ff,#6d59e8 64%,#4e8df0);color:#fff;box-shadow:0 17px 34px rgba(88,67,210,.25),inset 0 1px 0 rgba(255,255,255,.24)}.auth-submit:hover,.preview-login:hover{transform:translateY(-2px)}.auth-submit i{transition:transform .2s}.auth-submit:hover i{transform:translateX(3px)}.auth-divider{display:flex;align-items:center;gap:13px;margin:21px 0 14px;color:#75809c;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:rgba(139,156,211,.18)}.preview-login{width:100%;border:1px solid rgba(82,219,255,.3);background:rgba(30,180,220,.08);color:#72e5ff}.preview-login:hover{box-shadow:0 12px 30px rgba(31,184,222,.12)}.auth-switch{margin:24px 0 0;text-align:center;color:#8f9ab7;font-size:13px}.auth-switch a{color:#ad9bff;font-weight:800;text-decoration:none}.auth-switch a:hover{color:#d1c8ff}.auth-panel .alert{border-radius:14px;border-color:rgba(255,255,255,.12);background:rgba(17,26,52,.86);color:#e8edff}
@media (max-width:900px){.auth-shell{padding:20px}.auth-frame{grid-template-columns:1fr;max-width:560px}.auth-story{display:none}.auth-panel{padding:38px}.auth-mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:34px;color:#eff2ff;font-weight:800}.auth-mobile-brand i{width:34px;height:34px}.auth-register .auth-panel{padding-block:32px}}
@media (max-width:560px){.auth-shell{place-items:start center;padding:12px;overflow:auto}.auth-frame{margin:auto 0;border-radius:25px}.auth-panel{padding:26px 20px}.auth-heading{margin-bottom:22px}.auth-heading h2{font-size:27px}.auth-form-grid{grid-template-columns:1fr}.auth-field-wide{grid-column:auto}.auth-field>div{min-height:51px;border-radius:14px}.auth-submit,.preview-login{min-height:51px;border-radius:14px}.auth-register .auth-mobile-brand{margin-bottom:22px}.auth-register .auth-form{gap:12px}}
@media (prefers-reduced-motion:reduce){.auth-atmosphere i,.shield-rings:before{animation:none}}

/* Auth sizing and animated liquid-glass finish */
body:has(.auth-shell) .app-content{padding:0}
.auth-shell{box-sizing:border-box;min-height:100svh;padding:clamp(16px,3vh,34px);background:#060b1a;overflow:hidden}
.auth-atmosphere:before{content:"";position:absolute;inset:-28%;background:radial-gradient(ellipse at 18% 22%,rgba(118,83,255,.34),transparent 28%),radial-gradient(ellipse at 82% 70%,rgba(27,199,255,.27),transparent 25%),radial-gradient(ellipse at 58% 38%,rgba(255,73,166,.14),transparent 20%);filter:blur(58px);animation:authAurora 18s ease-in-out infinite alternate}
.auth-atmosphere:after{content:"";position:absolute;inset:0;opacity:.42;background-image:radial-gradient(circle at 16% 28%,rgba(111,213,255,.9) 0 1px,transparent 2px),radial-gradient(circle at 72% 18%,rgba(255,116,191,.85) 0 1px,transparent 2px),radial-gradient(circle at 86% 76%,rgba(135,122,255,.85) 0 1px,transparent 2px),radial-gradient(circle at 39% 82%,rgba(111,213,255,.7) 0 1px,transparent 2px);background-size:340px 280px,410px 360px,290px 330px,370px 310px;animation:authParticles 28s linear infinite}
@keyframes authAurora{0%{transform:translate3d(-2%,1%,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.08)}100%{transform:translate3d(-1%,3%,0) scale(1.03)}}
@keyframes authParticles{to{background-position:140px -100px,-180px 120px,110px 160px,-130px -80px}}
.auth-frame{position:relative;width:min(980px,100%);grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);max-height:calc(100svh - 44px);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 34%,rgba(7,16,40,.58));border-color:rgba(194,210,255,.28);box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 0 1px rgba(111,194,255,.08),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(30px) saturate(155%);-webkit-backdrop-filter:blur(30px) saturate(155%)}
.auth-frame:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 14%,transparent 60%,rgba(105,220,255,.06));opacity:.7}
.auth-story,.auth-panel{z-index:1;padding:34px}.auth-story{min-height:580px;background:linear-gradient(145deg,rgba(124,91,255,.26),rgba(26,45,91,.15) 58%,rgba(70,218,255,.1));border-right-color:rgba(202,215,255,.19)}
.auth-visual{width:142px;height:142px;font-size:42px}.auth-story h1{max-width:390px;font-size:clamp(32px,3.4vw,46px)}.auth-story p{max-width:390px;font-size:14px;line-height:1.6}.trust-row{gap:7px}.trust-row span{padding:8px 10px;font-size:10px}.auth-panel{overflow-y:auto;scrollbar-width:none}.auth-panel::-webkit-scrollbar{display:none}.auth-heading{margin-bottom:22px}.auth-heading h2{font-size:30px}.auth-form{gap:13px}.auth-form-grid{gap:12px}.auth-field{gap:6px}.auth-field>span{font-size:12px}.auth-field>div{min-height:48px;border-radius:14px}.auth-field input{padding:12px 11px;font-size:13px}.auth-field>div>i{margin-left:14px}.password-toggle{width:34px;height:34px}.auth-options{font-size:11px}.auth-submit,.preview-login{min-height:50px;border-radius:14px;font-size:13px}.auth-divider{margin:15px 0 10px}.auth-switch{margin-top:17px;font-size:12px}
@media (min-width:901px) and (max-height:760px){.auth-shell{padding-block:12px}.auth-frame{max-height:calc(100svh - 24px)}.auth-story,.auth-panel{padding:24px}.auth-story{min-height:530px}.auth-visual{width:115px;height:115px}.auth-story h1{font-size:34px}.auth-heading h2{font-size:27px}}
@media (max-width:900px){.auth-shell{min-height:100svh}.auth-frame{grid-template-columns:1fr;max-height:none}.auth-panel{overflow:visible}}
@media (prefers-reduced-motion:reduce){.auth-atmosphere:before,.auth-atmosphere:after{animation:none}}

/* Minimal iOS-style liquid glass finish */
.auth-frame{isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 38%,rgba(8,17,42,.16));border:1px solid rgba(226,235,255,.34);box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 0 1px rgba(103,202,255,.12),0 0 70px rgba(102,78,255,.14),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(91,194,255,.16);backdrop-filter:blur(34px) saturate(205%) contrast(112%);-webkit-backdrop-filter:blur(34px) saturate(205%) contrast(112%)}
.auth-frame:before{inset:1px;border:1px solid rgba(255,255,255,.2);border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.2),transparent 18%,transparent 55%,rgba(97,215,255,.08));opacity:1;mix-blend-mode:screen}
.auth-frame:after{content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 12% 8%,rgba(255,255,255,.18),transparent 25%),radial-gradient(ellipse at 88% 92%,rgba(67,211,255,.16),transparent 30%),radial-gradient(ellipse at 58% 42%,rgba(232,92,190,.08),transparent 28%);mix-blend-mode:screen;animation:authSheen 15s ease-in-out infinite alternate}
@keyframes authSheen{0%{transform:translate3d(-3%,-2%,0) scale(.98);opacity:.55}100%{transform:translate3d(4%,3%,0) scale(1.05);opacity:.9}}
.auth-story,.auth-panel{background:transparent}.auth-story{border-right-color:rgba(238,244,255,.22);background:radial-gradient(circle at 20% 14%,rgba(173,136,255,.12),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(102,83,255,.025) 42%,rgba(41,199,255,.02));backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%)}
.auth-panel{background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(6,14,35,.05));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.auth-story-center{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:0}.auth-logo{display:block;width:min(78%,280px);height:auto;object-fit:contain;opacity:.94;filter:drop-shadow(0 14px 28px rgba(255,255,255,.12)) drop-shadow(0 0 34px rgba(120,105,255,.2));mix-blend-mode:screen}
.auth-visual{filter:drop-shadow(0 0 28px rgba(255,80,156,.36)) drop-shadow(0 0 55px rgba(73,217,255,.16))}.shield-rings{border-color:rgba(191,180,255,.66);box-shadow:0 0 24px rgba(141,116,255,.14)}
.auth-field>div{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 48%,rgba(4,13,35,.25));border-color:rgba(216,228,255,.27);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 28px rgba(0,0,0,.1)}
.auth-field>div:focus-within{background:linear-gradient(135deg,rgba(160,132,255,.15),rgba(255,255,255,.04));box-shadow:0 0 0 4px rgba(139,111,255,.12),inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(65,51,170,.16)}
.auth-heading{margin-bottom:18px}.auth-heading h2{font-size:30px}.auth-heading>span,.auth-heading p,.auth-kicker,.trust-row,.auth-field em,.auth-options>span,.auth-panel .alert-secondary{display:none}.auth-divider{margin:14px 0 8px}.auth-divider + form{margin-top:0}.auth-switch{margin-top:15px}.auth-switch a{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid rgba(216,228,255,.16);border-radius:999px;background:rgba(255,255,255,.045)}
@media (max-width:900px){.auth-story{display:none}.auth-frame{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 42%,rgba(8,17,42,.12))}.auth-panel{background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(5,13,33,.06))}}
@media (prefers-reduced-motion:reduce){.auth-frame:after{animation:none}}

/* Shared iOS liquid-glass surfaces */
body:has(.app-shell){background-color:#050b20}
.app-shell{background:transparent}
.glass-sidebar,.glass-topbar,.liquid-card,.liquid-hero,
.app-content .card,.app-content .modal-content,.app-content .dropdown-menu,
.app-content .list-group-item,.app-content .table-responsive{
    border-color:rgba(219,231,255,.2);
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 46%,rgba(7,16,40,.14));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(96,187,255,.08),0 18px 52px rgba(0,0,0,.22);
    backdrop-filter:blur(20px) saturate(185%);
    -webkit-backdrop-filter:blur(20px) saturate(185%);
}
.glass-sidebar,.glass-topbar,.liquid-card,.liquid-hero,.app-content .card,.app-content .modal-content,.app-content .dropdown-menu,.app-content .table-responsive{isolation:isolate}
.app-content .card-header,.app-content .card-body,.app-content .card-footer{border-color:rgba(219,231,255,.12);background:transparent;color:inherit}
.app-content .card,.app-content .card-header,.app-content .card-body,.app-content .card-footer,.app-content label,.app-content .form-label{color:var(--text)!important}
.app-content .card small,.app-content .card .text-muted,.app-content .form-text{color:var(--muted)!important}
.app-content .card-header.bg-dark,.app-content .card-header.bg-primary{background:rgba(255,255,255,.065)!important;color:inherit!important}
.app-content .alert{
    border:1px solid rgba(219,231,255,.2);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.022) 46%,rgba(7,16,40,.25));
    color:var(--text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 38px rgba(0,0,0,.16);
    backdrop-filter:blur(24px) saturate(170%);
    -webkit-backdrop-filter:blur(24px) saturate(170%);
}
.app-content .alert-success{border-color:rgba(57,221,160,.26);color:#baf5df}
.app-content .alert-danger{border-color:rgba(255,96,125,.3);color:#ffd0d9}
.app-content .alert-warning{border-color:rgba(255,192,91,.3);color:#ffe1a9}
.app-content .form-control,.app-content .form-select,.app-content textarea,.app-content .input-group-text{
    border:1px solid rgba(219,231,255,.2);
    background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(6,15,38,.3));
    color:var(--text)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.1);
}
.app-content .form-control:focus,.app-content .form-select:focus,.app-content textarea:focus{
    border-color:rgba(151,132,255,.72);
    background:linear-gradient(135deg,rgba(155,132,255,.13),rgba(255,255,255,.035));
    color:var(--text)!important;
    box-shadow:0 0 0 4px rgba(139,111,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 12px 30px rgba(65,51,170,.15);
}
.app-content .form-control::placeholder,.app-content textarea::placeholder{color:#8fa2c4!important;opacity:1}
.app-content .table,.app-content .table>:not(caption)>*>*{border-color:rgba(219,231,255,.12);color:inherit;background:transparent}
.app-content .table-responsive{overflow:auto;border-radius:inherit}
.glass-menu,.app-content .dropdown-menu{border-radius:18px}
.glass-menu .dropdown-item,.app-content .dropdown-item{border-radius:11px;color:#c5d0e8}
.glass-menu .dropdown-item:hover,.app-content .dropdown-item:hover{background:rgba(145,122,255,.16);color:#fff}
.app-content .btn-outline-light,.app-content .btn-outline-secondary{border-color:rgba(219,231,255,.24);background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.private-dashboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;padding:18px 0 36px}.private-panel{min-width:0;overflow:hidden}.private-panel .card-header{font-weight:700}.private-panel .list-group{min-width:0}.private-panel .badge{color:#dce7ff;background:rgba(126,99,255,.2)}
@media (max-width:820px){
    .glass-sidebar,.glass-topbar,.liquid-card,.liquid-hero,.app-content .card,.app-content .modal-content,.app-content .dropdown-menu,.app-content .table-responsive{backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%)}
}

/* Mobile layout guardrails */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 820px) {
    .app-shell {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }

    .app-stage,
    .app-main,
    .app-content,
    .app-content > .row,
    .app-content > .container,
    .app-content > .container-fluid {
        min-width: 0;
        max-width: 100%;
    }

    .app-content {
        padding-right: 0;
        padding-left: 0;
    }

    .app-content > .row {
        margin-right: 0;
        margin-left: 0;
    }

    .app-content .row > *,
    .app-content [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .dash-grid > *,
    .liquid-card,
    .liquid-table-wrap,
    .app-content .card,
    .app-content .card-body,
    .app-content .card-header,
    .app-content .table-responsive {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .liquid-table-wrap,
    .app-content .table-responsive {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .app-content .form-control,
    .app-content .form-select,
    .app-content textarea,
    .app-content .input-group,
    .app-content .btn {
        max-width: 100%;
    }

    .app-content .bg-light,
    .app-content .list-group-item {
        color: var(--text) !important;
        border-color: rgba(219, 231, 255, .12) !important;
        background: rgba(15, 35, 78, .34) !important;
    }

    .app-content .list-group-item {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .app-content .btn-dark,
    .app-content .btn-outline-dark {
        border-color: rgba(157, 183, 255, .3);
        color: #f4f7ff;
        background: rgba(50, 73, 134, .62);
    }

    .app-content .btn-dark:hover,
    .app-content .btn-outline-dark:hover {
        color: #fff;
        background: rgba(120, 93, 255, .68);
    }
}

@media (max-width: 560px) {
    .app-shell {
        gap: 10px;
        padding: 8px;
    }

    .glass-topbar {
        gap: 8px;
        padding: 8px 9px;
    }

    .page-heading strong {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-actions {
        margin-left: auto;
    }

    .liquid-card {
        padding: 16px;
    }

    .liquid-table {
        min-width: 620px;
    }

    .app-content .card-header,
    .app-content .card-body {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .app-content .card-header .row {
        row-gap: 8px;
    }

    .app-content .card-header .text-end {
        text-align: left !important;
    }

    .app-content .table {
        font-size: 12px;
    }

    .app-content .table th,
    .app-content .table td {
        white-space: nowrap;
    }

    .app-content .input-group {
        flex-wrap: nowrap;
    }

    .app-content .input-group > .form-control {
        min-width: 0;
    }

    .app-content .request-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-content .request-actions {
        width: 100%;
        margin-top: 8px;
    }

    .private-dashboard {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 12px;
    }
}

/* Final auth daylight pass: keep login and registration aligned with the
   bright frosted-glass application shell above the legacy auth rules. */
body:has(.auth-shell) {
    color: #1b2b43;
    background:
        radial-gradient(circle at 8% 8%, rgba(125, 181, 255, .38), transparent 30%),
        radial-gradient(circle at 92% 10%, rgba(194, 181, 255, .34), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(101, 216, 235, .22), transparent 38%),
        linear-gradient(135deg, #eaf4fb, #f8fbff 54%, #efefff);
}

body:has(.auth-shell) .auth-shell {
    min-height: 100svh;
    color: #1b2b43;
    background: transparent;
}

body:has(.auth-shell) .auth-atmosphere {
    opacity: .9;
    background-image:
        linear-gradient(rgba(104, 151, 196, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(104, 151, 196, .08) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 94%);
}

body:has(.auth-shell) .auth-atmosphere::before {
    background:
        radial-gradient(ellipse at 14% 22%, rgba(114, 163, 255, .28), transparent 30%),
        radial-gradient(ellipse at 84% 76%, rgba(199, 170, 255, .28), transparent 30%),
        radial-gradient(ellipse at 53% 36%, rgba(99, 208, 236, .2), transparent 25%);
    filter: blur(54px);
}

body:has(.auth-shell) .auth-atmosphere::after {
    opacity: .26;
    background-image:
        radial-gradient(circle at 16% 28%, rgba(42, 129, 229, .9) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(149, 106, 239, .8) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 76%, rgba(62, 183, 219, .8) 0 1px, transparent 2px);
}

body:has(.auth-shell) .auth-frame {
    border: 1px solid rgba(255, 255, 255, .9);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42) 48%, rgba(225, 239, 255, .5)),
        rgba(255, 255, 255, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -1px 0 rgba(123, 169, 213, .18),
        0 28px 74px rgba(84, 125, 169, .2);
    backdrop-filter: blur(32px) saturate(145%);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
}

body:has(.auth-shell) .auth-frame::before {
    background: linear-gradient(120deg, rgba(255, 255, 255, .56), transparent 19%, transparent 60%, rgba(151, 197, 255, .18));
    border-color: rgba(255, 255, 255, .7);
    mix-blend-mode: normal;
}

body:has(.auth-shell) .auth-frame::after {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255, 255, 255, .42), transparent 26%),
        radial-gradient(ellipse at 88% 92%, rgba(129, 204, 255, .2), transparent 30%),
        radial-gradient(ellipse at 58% 42%, rgba(203, 170, 255, .16), transparent 28%);
    mix-blend-mode: normal;
}

body:has(.auth-shell) .auth-story,
body:has(.auth-shell) .auth-panel {
    background: transparent;
}

body:has(.auth-shell) .auth-story {
    border-right-color: rgba(255, 255, 255, .74);
    background:
        radial-gradient(circle at 18% 12%, rgba(174, 208, 255, .46), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .46), rgba(216, 237, 255, .24) 56%, rgba(231, 225, 255, .34));
}

body:has(.auth-shell) .auth-brand,
body:has(.auth-shell) .auth-mobile-brand,
body:has(.auth-shell) .auth-story h1,
body:has(.auth-shell) .auth-story p,
body:has(.auth-shell) .auth-heading h2,
body:has(.auth-shell) .auth-field > span {
    color: #1b2b43;
}

body:has(.auth-shell) .auth-story p,
body:has(.auth-shell) .auth-heading p,
body:has(.auth-shell) .auth-options,
body:has(.auth-shell) .auth-switch {
    color: #687991;
}

body:has(.auth-shell) .auth-brand span,
body:has(.auth-shell) .auth-mobile-brand i {
    border-color: rgba(255, 255, 255, .9);
    background: linear-gradient(145deg, rgba(116, 143, 245, .88), rgba(83, 193, 232, .68));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px rgba(79, 139, 213, .2);
}

body:has(.auth-shell) .auth-kicker {
    color: #526fe2;
}

body:has(.auth-shell) .auth-kicker i {
    background: #28b98a;
    box-shadow: 0 0 12px rgba(40, 185, 138, .45);
}

body:has(.auth-shell) .trust-row span {
    border-color: rgba(255, 255, 255, .76);
    color: #52657f;
    background: rgba(255, 255, 255, .48);
}

body:has(.auth-shell) .trust-row i,
body:has(.auth-shell) .auth-options > span i {
    color: #1fae86;
}

body:has(.auth-shell) .auth-field > div {
    border-color: rgba(135, 168, 203, .36);
    background: rgba(255, 255, 255, .54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 24px rgba(83, 125, 166, .1);
}

body:has(.auth-shell) .auth-field > div:focus-within {
    border-color: rgba(84, 135, 225, .7);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 0 0 4px rgba(85, 139, 224, .14), inset 0 1px 0 rgba(255, 255, 255, .92);
}

body:has(.auth-shell) .auth-field > div > i {
    color: #6579dc;
}

body:has(.auth-shell) .auth-field input {
    color: #1b2b43;
}

body:has(.auth-shell) .auth-field input::placeholder {
    color: #8293aa;
}

body:has(.auth-shell) .auth-options label span {
    border-color: rgba(126, 157, 195, .48);
    background: rgba(255, 255, 255, .48);
}

body:has(.auth-shell) .auth-submit {
    background: linear-gradient(110deg, #8171e8, #5c9ce8);
    box-shadow: 0 15px 30px rgba(89, 128, 213, .24), inset 0 1px 0 rgba(255, 255, 255, .42);
}

body:has(.auth-shell) .preview-login {
    border-color: rgba(68, 169, 211, .34);
    color: #1682ae;
    background: rgba(199, 240, 255, .44);
}

body:has(.auth-shell) .auth-divider {
    color: #7587a1;
}

body:has(.auth-shell) .auth-divider::before,
body:has(.auth-shell) .auth-divider::after {
    background: rgba(125, 160, 198, .28);
}

body:has(.auth-shell) .auth-switch a {
    color: #5f55c9;
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .48);
}

body:has(.auth-shell) .auth-panel .alert {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .58);
    color: #1b2b43;
}

@media (max-width: 900px) {
    body:has(.auth-shell) .auth-frame {
        background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .48) 52%, rgba(225, 239, 255, .54));
    }

    body:has(.auth-shell) .auth-panel {
        background: rgba(255, 255, 255, .14);
    }
}

/* Dashboard composition: compact analytics layout inspired by the supplied
   reference while retaining Astral's account and access data. */
.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 4px 4px 0;
}

.welcome-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #697f9e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.welcome-kicker i {
    color: #5f7ee9;
}

.dashboard-welcome h1 {
    margin: 8px 0 5px;
    color: #1b2b43;
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -.045em;
}

.dashboard-welcome p {
    margin: 0;
    color: #6d809c;
    font-size: 13px;
}

.dashboard-welcome .live-pill {
    flex: 0 0 auto;
    margin: 0 0 3px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 118px;
    padding: 18px 19px;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 58%, rgba(223, 239, 255, .16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 15px 35px rgba(84, 125, 169, .12);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.dashboard-metric > div {
    min-width: 0;
}

.dashboard-metric span:not(.metric-icon) {
    display: block;
    margin-bottom: 9px;
    color: #637895;
    font-size: 11px;
}

.dashboard-metric strong {
    display: block;
    overflow: hidden;
    color: #1b2b43;
    font-size: clamp(21px, 2vw, 29px);
    letter-spacing: -.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-metric small {
    display: block;
    margin-top: 4px;
    color: #7b8da6;
    font-size: 9px;
}

.dashboard-metric .metric-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 18px;
}

.metric-icon.blue {
    color: #2589d9;
    background: rgba(186, 230, 255, .6);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 16px;
}

.dashboard-layout > .liquid-card {
    min-width: 0;
}

.access-card,
.account-card,
.activity-card,
.history-card {
    min-height: 0;
}

.access-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 22px 0 18px;
}

.access-ring {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: conic-gradient(#6d7fea var(--access-progress), rgba(192, 216, 241, .32) 0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px rgba(74, 122, 191, .12);
}

.access-ring::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    content: "";
    border-radius: 50%;
    background: rgba(248, 252, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94);
    transform: translate(-50%, -50%);
}

.access-ring strong,
.access-ring span {
    position: relative;
    z-index: 1;
    display: block;
}

.access-ring strong {
    color: #304b74;
    font-size: 21px;
}

.access-ring span {
    margin-top: 3px;
    color: #7a8da8;
    font-size: 9px;
}

.access-summary > div:last-child strong,
.access-summary > div:last-child span,
.access-summary > div:last-child small {
    display: block;
}

.access-summary > div:last-child strong {
    color: #1b2b43;
    font-size: 20px;
}

.access-summary > div:last-child span {
    margin-top: 4px;
    color: #647896;
    font-size: 11px;
}

.access-summary > div:last-child small {
    margin-top: 13px;
    color: #8191a7;
    font-size: 10px;
}

.access-card .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.access-card .countdown > div {
    padding: 11px 6px;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .18);
}

.account-card .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
}

.account-card .glass-action {
    width: 100%;
    justify-content: center;
    margin-top: 15px;
}

.activity-card {
    grid-column: 1 / -1;
}

.activity-visual {
    margin-top: 23px;
    padding: 15px 14px 10px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: rgba(255, 255, 255, .34);
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
    height: 112px;
    padding: 12px 4px 0;
    border-bottom: 1px solid rgba(123, 160, 199, .2);
    background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(123, 160, 199, .11) 35px 36px);
}

.activity-grid i {
    display: block;
    height: var(--bar);
    min-height: 7px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #8977ed, #65b7eb);
    box-shadow: 0 8px 15px rgba(92, 122, 219, .18), inset 0 1px rgba(255, 255, 255, .46);
}

.activity-labels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    padding: 8px 4px 0;
    color: #7c8da5;
    font-size: 9px;
    text-align: center;
}

.activity-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: #269e7b;
    font-size: 18px;
}

.activity-note span {
    display: block;
}

.activity-note strong,
.activity-note small {
    display: block;
}

.activity-note strong {
    color: #36506f;
    font-size: 11px;
}

.activity-note small {
    margin-top: 3px;
    color: #7c8da5;
    font-size: 10px;
}

.dashboard-layout .history-card {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .activity-card,
    .dashboard-layout .history-card {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .dashboard-welcome {
        display: block;
        margin-bottom: 14px;
    }

    .dashboard-welcome h1 {
        font-size: 25px;
    }

    .dashboard-welcome p {
        max-width: 280px;
        font-size: 11px;
        line-height: 1.5;
    }

    .dashboard-welcome .live-pill {
        margin-top: 12px;
    }

    .dashboard-metrics {
        gap: 8px;
    }

    .dashboard-metric {
        min-height: 92px;
        padding: 13px;
        border-radius: 18px;
    }

    .dashboard-metric span:not(.metric-icon) {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .dashboard-metric strong {
        font-size: 18px;
    }

    .dashboard-metric small {
        font-size: 8px;
    }

    .dashboard-metric .metric-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 14px;
    }

    .access-summary {
        gap: 13px;
        margin-top: 18px;
    }

    .access-ring {
        width: 86px;
        height: 86px;
    }

    .access-ring::before {
        width: 66px;
        height: 66px;
    }

    .access-ring strong {
        font-size: 17px;
    }

    .access-summary > div:last-child strong {
        font-size: 16px;
    }

    .access-card .countdown > div {
        padding: 9px 3px;
    }

    .activity-grid {
        height: 90px;
        gap: 5px;
    }

    .activity-labels {
        gap: 5px;
        font-size: 8px;
    }
}

/* Dashboard header follows the supplied welcome/search reference. */
.dashboard-topbar {
    min-height: 92px;
    padding: 14px 20px;
}

.dashboard-topbar-copy {
    flex: 1;
    min-width: 0;
}

.dashboard-topbar-copy strong,
.dashboard-topbar-copy small {
    display: block;
}

.dashboard-topbar-copy strong {
    color: #1b2b43;
    font-size: 20px;
    letter-spacing: -.035em;
}

.dashboard-topbar-copy strong span {
    font-size: .9em;
}

.dashboard-topbar-copy small {
    margin-top: 4px;
    color: #6e8099;
    font-size: 12px;
}

.dashboard-topbar .top-actions {
    gap: 10px;
}

@media (max-width: 820px) {
    .dashboard-topbar {
        min-height: 70px;
        padding: 9px 10px;
    }

    .dashboard-topbar-copy strong {
        font-size: 15px;
    }

    .dashboard-topbar-copy small {
        display: none;
    }

    .dashboard-topbar .top-actions {
        margin-left: auto;
    }
}

@media print {
    .glass-sidebar,
    .glass-topbar,
    .activity-card,
    .history-card,
    .dashboard-metrics,
    .side-status {
        display: none !important;
    }

    body,
    html {
        background: #fff !important;
    }

    .app-shell,
    .app-stage,
    .app-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
}

body:has(.app-shell) .glass-sidebar,
body:has(.app-shell) .glass-topbar,
body:has(.app-shell) .liquid-card,
body:has(.app-shell) .dashboard-metric {
    border-color: rgba(255, 255, 255, .34);
    background: linear-gradient(135deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .14)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(96, 187, 255, .08), 0 16px 42px rgba(54, 89, 141, .12);
    backdrop-filter: blur(12px) saturate(175%);
    -webkit-backdrop-filter: blur(12px) saturate(175%);
}

body:has(.app-shell) .dashboard-metric {
    background: linear-gradient(145deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08) 58%, rgba(223, 239, 255, .14)) !important;
}

body:has(.app-shell) .profile-stats > div,
body:has(.app-shell) .access-card .countdown > div {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

body:has(.app-shell) .activity-visual,
body:has(.app-shell) .glass-action,
body:has(.app-shell) .record-pill,
body:has(.app-shell) .device-pill {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
}

body:has(.app-shell) .glass-sidebar {
    background: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(238, 247, 255, .42) 52%, rgba(218, 235, 255, .52)) !important;
    color: #213552;
    backdrop-filter: blur(24px) saturate(165%);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
}

body:has(.app-shell) .glass-sidebar .nav-label {
    color: #5d7596;
}

body:has(.app-shell) .glass-sidebar .side-link {
    color: #314965;
}

body:has(.app-shell) .glass-sidebar .side-link i {
    color: #58789d;
}

body:has(.app-shell) .glass-sidebar .side-link:hover {
    color: #183152;
    background: rgba(255, 255, 255, .38);
}

body:has(.app-shell) .glass-sidebar .side-link.active {
    color: #183152;
    background: linear-gradient(110deg, rgba(255, 255, 255, .82), rgba(181, 222, 255, .48));
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 9px 24px rgba(51, 103, 184, .16);
}

body:has(.app-shell) .glass-sidebar .side-link.active i {
    color: #2373c9;
}

body:has(.app-shell) .glass-sidebar .side-status {
    border-color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .38);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}

body:has(.app-shell) .glass-sidebar .side-status strong {
    color: #274363;
}

@media (max-width: 820px) {
    body:has(.app-shell) .glass-sidebar {
        border-color: rgba(255, 255, 255, .78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 60px rgba(39, 76, 132, .28);
    }

    .sidebar-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
        display: grid !important;
        width: 34px;
        height: 34px;
        border-color: rgba(255, 255, 255, .62);
        color: #28435f;
        background: rgba(255, 255, 255, .42);
    }

    .glass-sidebar .brand {
        padding-right: 62px;
    }
}

/* Consistent full-width glass content and controls for authenticated pages. */
body:has(.app-shell) .app-content > .row {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

body:has(.app-shell) .app-content > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-right: 0;
    padding-left: 0;
}

body:has(.app-shell) .app-content > .container,
body:has(.app-shell) .app-content > .container-fluid {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body:has(.app-shell) .app-content .btn {
    border: 1px solid rgba(255, 255, 255, .52) !important;
    border-radius: 13px;
    color: #243a58 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(211, 234, 255, .22)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 22px rgba(64, 105, 160, .12);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

body:has(.app-shell) .app-content .btn:hover,
body:has(.app-shell) .app-content .btn:focus-visible {
    color: #17375e !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(172, 220, 255, .38)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 26px rgba(64, 105, 160, .18);
}

body:has(.app-shell) .app-content .btn-primary,
body:has(.app-shell) .app-content .btn-success,
body:has(.app-shell) .app-content .btn-info {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(116, 100, 232, .72), rgba(55, 174, 231, .58)) !important;
}

body:has(.app-shell) .app-content .btn-danger,
body:has(.app-shell) .app-content .btn-outline-danger {
    color: #a63e5b !important;
    border-color: rgba(220, 103, 133, .42) !important;
    background: rgba(255, 224, 233, .34) !important;
}

body:has(.app-shell) .app-content .form-control,
body:has(.app-shell) .app-content .form-select,
body:has(.app-shell) .app-content textarea,
body:has(.app-shell) .app-content .input-group-text {
    border-color: rgba(139, 174, 211, .34) !important;
    border-radius: 13px;
    background: rgba(255, 255, 255, .26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 7px 20px rgba(87, 125, 164, .08);
    backdrop-filter: blur(9px) saturate(145%);
    -webkit-backdrop-filter: blur(9px) saturate(145%);
}

body:has(.app-shell) .app-content .form-control:focus,
body:has(.app-shell) .app-content .form-select:focus,
body:has(.app-shell) .app-content textarea:focus {
    border-color: rgba(91, 134, 227, .66) !important;
    background: rgba(255, 255, 255, .42) !important;
    box-shadow: 0 0 0 4px rgba(97, 145, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .82);
}

body:has(.app-shell) .app-content .form-check-input {
    width: 2.35em;
    height: 1.3em;
    border-color: rgba(117, 153, 195, .42);
    background-color: rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 14px rgba(75, 111, 155, .1);
}

body:has(.app-shell) .app-content .form-check-input:checked {
    border-color: rgba(102, 117, 226, .74);
    background-color: #7182e8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 6px 16px rgba(97, 113, 225, .22);
}

body:has(.app-shell) .app-content .form-check-input:focus {
    border-color: rgba(111, 125, 232, .74);
    box-shadow: 0 0 0 4px rgba(111, 125, 232, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
}

body:has(.app-shell) .app-content .switch .slider {
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 6px 16px rgba(75, 111, 155, .12);
    backdrop-filter: blur(9px) saturate(145%);
    -webkit-backdrop-filter: blur(9px) saturate(145%);
}

body:has(.app-shell) .app-content .switch .slider::before {
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 6px rgba(61, 93, 137, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body:has(.app-shell) .app-content .switch input:checked + .slider {
    border-color: rgba(102, 117, 226, .66);
    background: linear-gradient(135deg, rgba(116, 100, 232, .82), rgba(55, 174, 231, .64)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), 0 7px 18px rgba(97, 113, 225, .2);
}

body:has(.app-shell) .app-content .switch input:focus + .slider {
    box-shadow: 0 0 0 4px rgba(111, 125, 232, .14), inset 0 1px 0 rgba(255, 255, 255, .66);
}

body:has(.app-shell) .app-content .btn-close {
    border: 0 !important;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .3) !important;
    box-shadow: none;
}

body:has(.app-shell) .app-content .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px !important;
    border: 1px solid rgba(255, 255, 255, .52) !important;
    border-radius: 12px;
    color: #243a58 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(211, 234, 255, .22)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 22px rgba(64, 105, 160, .1);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

body:has(.app-shell) .app-content .dropdown-toggle:hover,
body:has(.app-shell) .app-content .dropdown-toggle:focus-visible {
    color: #182c4a !important;
    border-color: rgba(255, 255, 255, .78) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(211, 234, 255, .34)) !important;
}

body:has(.app-shell) .app-content .dataTables_wrapper .dataTables_filter input,
body:has(.app-shell) .app-content .dataTables_wrapper .dataTables_length select {
    min-height: 34px;
    border: 1px solid rgba(139, 174, 211, .34) !important;
    border-radius: 11px;
    color: #243a58 !important;
    background: rgba(255, 255, 255, .26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 6px 18px rgba(87, 125, 164, .08);
    backdrop-filter: blur(9px) saturate(145%);
    -webkit-backdrop-filter: blur(9px) saturate(145%);
}

body:has(.app-shell) .app-content .dataTables_wrapper .paginate_button {
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: 10px !important;
    color: #243a58 !important;
    background: rgba(255, 255, 255, .2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), 0 5px 14px rgba(75, 111, 155, .08);
    backdrop-filter: blur(9px) saturate(145%);
    -webkit-backdrop-filter: blur(9px) saturate(145%);
}

body:has(.app-shell) .app-content .dataTables_wrapper .paginate_button:hover,
body:has(.app-shell) .app-content .dataTables_wrapper .paginate_button.current {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, rgba(116, 100, 232, .78), rgba(55, 174, 231, .62)) !important;
}

.lib-page {
    width: 100%;
    margin: 0;
}

.lib-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom-color: rgba(118, 153, 192, .18);
    background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(222, 241, 255, .16));
}

.lib-card-head h2 {
    color: #213a59;
}

.lib-kicker {
    display: block;
    margin-bottom: 6px;
    color: #5b73a0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lib-card-icon,
.lib-drop-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .62);
    color: #5477dc;
    background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(177, 220, 255, .26));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 8px 20px rgba(84, 119, 182, .12);
    backdrop-filter: blur(10px) saturate(145%);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.lib-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
}

.lib-upload-form {
    display: grid;
    gap: 16px;
}

.lib-file-drop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, .7fr);
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px dashed rgba(91, 134, 227, .46);
    border-radius: 16px;
    color: #304968;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.lib-file-drop:hover,
.lib-file-drop:focus-within {
    border-color: rgba(91, 134, 227, .72);
    background: rgba(255, 255, 255, .34);
    transform: translateY(-1px);
}

.lib-drop-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 21px;
}

.lib-file-drop strong,
.lib-file-drop small {
    display: block;
}

.lib-file-drop strong {
    font-size: 13px;
}

.lib-file-drop small {
    margin-top: 4px;
    color: #7890ad;
    font-size: 11px;
}

.lib-file-drop .form-control {
    min-width: 0;
    margin: 0;
}

.lib-upload-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.lib-filter,
.key-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lib-filter label,
.key-filter label {
    margin: 0;
    color: #58718f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lib-filter .form-select,
.key-filter .form-select {
    width: min(260px, 100%);
    border-color: rgba(104, 140, 182, .3);
    color: #304968;
    background-color: rgba(255, 255, 255, .28);
}

.lib-table-card .table-responsive {
    border: 1px solid rgba(139, 174, 211, .2);
    background: rgba(255, 255, 255, .14);
}

.lib-table {
    min-width: 720px;
    margin-bottom: 0;
    color: #304968;
}

.lib-table thead th {
    padding: 13px 12px;
    border-bottom-color: rgba(104, 140, 182, .24) !important;
    color: #58718f;
    background: rgba(255, 255, 255, .25) !important;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lib-table tbody td {
    padding: 14px 12px;
    border-color: rgba(104, 140, 182, .16) !important;
    color: #304968 !important;
    background: rgba(255, 255, 255, .08) !important;
    font-size: 12px;
}

.lib-table tbody tr:hover td {
    background: rgba(255, 255, 255, .25) !important;
}

.profile-photo-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(110, 143, 181, .2);
}

.profile-photo-preview {
    display: grid;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    color: #5375d5;
    background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(190, 221, 255, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 9px 22px rgba(78, 115, 175, .12);
    font-size: 25px;
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-copy {
    min-width: 0;
    flex: 1;
}

.profile-photo-copy strong,
.profile-photo-copy small {
    display: block;
}

.profile-photo-copy strong {
    color: #294464;
    font-size: 13px;
}

.profile-photo-copy small {
    margin-top: 4px;
    color: #7890ad;
    font-size: 11px;
}

.profile-photo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.profile-photo-form,
.profile-remove-form {
    margin: 0;
}

.profile-photo-form input[type="file"] {
    max-width: 260px;
}

@media (max-width: 720px) {
    .brand-logo {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .lib-file-drop {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lib-file-drop .form-control {
        grid-column: 1 / -1;
    }

    .lib-upload-actions,
    .lib-filter,
    .key-filter,
    .profile-photo-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .lib-filter .form-select,
    .key-filter .form-select {
        width: 100%;
    }

    .lib-upload-actions .btn {
        width: 100%;
    }

    .profile-photo-preview {
        width: 64px;
        height: 64px;
    }
}

/* Auth viewport guard: keep every control inside narrow Android viewports. */
body:has(.auth-shell) {
    overflow-x: hidden;
}

body:has(.auth-shell) .auth-shell,
body:has(.auth-shell) .auth-frame,
body:has(.auth-shell) .auth-story,
body:has(.auth-shell) .auth-panel,
body:has(.auth-shell) .auth-form,
body:has(.auth-shell) .auth-field,
body:has(.auth-shell) .auth-submit,
body:has(.auth-shell) .preview-login {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body:has(.auth-shell) .auth-shell {
    width: 100%;
    padding-inline: clamp(6px, 3.5vw, 32px);
}

body:has(.auth-shell) .auth-frame,
body:has(.auth-shell) .auth-form,
body:has(.auth-shell) .auth-field > div,
body:has(.auth-shell) .auth-submit,
body:has(.auth-shell) .preview-login {
    width: 100%;
}

body:has(.auth-shell) .auth-field > div {
    overflow: hidden;
}

body:has(.auth-shell) .auth-field input {
    width: 0;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 560px) {
    body:has(.auth-shell) .auth-shell {
        padding-block: 8px;
    }

    body:has(.auth-shell) .auth-frame {
        border-radius: 22px;
    }

    body:has(.auth-shell) .auth-panel {
        padding: 22px 14px;
    }

    body:has(.auth-shell) .auth-heading h2 {
        font-size: 26px;
    }

    body:has(.auth-shell) .auth-field input {
        padding-inline: 9px;
        font-size: 14px;
    }

    body:has(.auth-shell) .auth-field > div > i {
        margin-left: 11px;
    }

    body:has(.auth-shell) .password-toggle {
        flex: 0 0 32px;
        width: 32px;
        margin-right: 5px;
    }
}

@media (max-width: 380px) {
    body:has(.auth-shell) .auth-shell {
        padding-inline: 5px;
    }

    body:has(.auth-shell) .auth-panel {
        padding-inline: 11px;
    }

    body:has(.auth-shell) .auth-heading h2 {
        font-size: 24px;
    }

    body:has(.auth-shell) .auth-field > div {
        border-radius: 12px;
    }
}

/* Keep the Astral mark circular on every sidebar breakpoint. */
body:has(.app-shell) .brand-logo {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 26px rgba(66, 119, 191, .16);
}

body:has(.app-shell) .brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

body:has(.auth-shell) .auth-panel .alert {
    position: relative;
    margin-bottom: 18px;
    padding: 12px 42px 12px 14px;
    border: 1px solid rgba(135, 168, 203, .36);
    border-radius: 14px;
    font-size: 13px;
}

body:has(.auth-shell) .auth-panel .btn-close {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    transform: translateY(-50%);
    opacity: .55;
}

/* Final glass pass: shared workspace components. */
body:has(.app-shell) .brand-logo img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    padding: 2px;
}

body:has(.app-shell) .app-content .alert {
    color: #203958 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(220,239,255,.46)) !important;
    border-color: rgba(94,143,190,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(54,94,141,.1);
}

body:has(.app-shell) .app-content .alert-success { color: #0f684e !important; }
body:has(.app-shell) .app-content .alert-danger { color: #9a2949 !important; }
body:has(.app-shell) .app-content .alert-warning { color: #80520c !important; }

/* Dropdowns must not blur the workspace behind them. The menu remains glassy,
   while the page stays readable and responsive during every action. */
.profile-menu-open .app-main,
.action-menu-open .app-main {
    filter: none !important;
    transition: none;
}

/* Keep the dimming layer inside the shell stack. Menus sit above it, so the
   page softens without making the open controls unreadable. */
body.profile-menu-open .app-shell::after,
body.action-menu-open .app-shell::after {
    position: fixed;
    inset: 0;
    z-index: 10;
    content: "";
    background: rgba(41, 67, 103, .08);
    backdrop-filter: blur(5px) saturate(108%);
    -webkit-backdrop-filter: blur(5px) saturate(108%);
    pointer-events: none;
}

.glass-topbar { z-index: 20; }
.glass-topbar .dropdown-menu,
body.profile-menu-open .dropdown-menu.show,
body.action-menu-open .dropdown-menu.show { z-index: 40; }

/* Action menus must escape the card's mobile scroll region while the shell is
   softened. A fixed, viewport-safe position keeps every option readable. */
body.action-menu-open > .dropdown-menu.show {
    position: fixed !important;
    top: 120px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 100 !important;
    margin: 0 !important;
    transform: none !important;
}

@media (max-width: 760px) {
    body.action-menu-open > .dropdown-menu.show {
        top: 84px !important;
        right: 10px !important;
    }
}

/* Generate page: focused license creation flow with the same glass language as Keys. */
.generate-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.generate-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: clamp(22px, 3vw, 32px);
}

.generate-hero h1,
.generate-card-head h2,
.generate-result-copy h2 {
    margin: 5px 0 0;
    color: #1d3655;
    font-weight: 800;
    letter-spacing: -.04em;
}

.generate-hero h1 { font-size: clamp(30px, 3vw, 42px); }
.generate-hero p { max-width: 620px; margin: 8px 0 0; color: #6e86a3; }
.generate-hero-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.generate-hero-meta span,
.generate-result-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    color: #536f90;
    background: rgba(255,255,255,.28);
    font-size: 11px;
    font-weight: 700;
}
.generate-hero-meta i { color: #5c78e4; }

.generate-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 15px;
    color: #375472;
    background: rgba(255,255,255,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    font-size: 13px;
}
.generate-notice i { font-size: 18px; }
.generate-notice.is-danger { color: #9f3d58; background: rgba(255,229,236,.62); }
.generate-notice.is-warning { color: #8b651c; background: rgba(255,246,212,.66); }
.generate-notice.is-success { color: #167763; background: rgba(218,250,239,.62); }

.generate-result {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px 22px;
    border-color: rgba(93,205,174,.42);
    background: linear-gradient(135deg, rgba(221,255,246,.54), rgba(224,237,255,.3));
}
.generate-result-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 15px;
    color: #1db795;
    background: rgba(93,221,189,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
    font-size: 20px;
}
.generate-result-copy { min-width: 0; flex: 1; }
.generate-result-copy h2 { font-size: 19px; }
.generate-key-output { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.generate-key-output code {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    padding: 11px 13px;
    border: 1px solid rgba(116,157,201,.2);
    border-radius: 12px;
    color: #3f5fd8;
    background: rgba(255,255,255,.42);
    font-size: 13px;
    font-weight: 800;
}
.glass-btn-small { min-height: 39px; white-space: nowrap; }
.generate-result-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.generate-result-meta span { padding: 6px 9px; font-size: 10px; font-weight: 600; }
.generate-result-meta strong { color: #294768; }

.generate-layout {
    display: block;
}
.generate-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.68);
    background:
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 54%, rgba(214,237,255,.18)),
        rgba(255,255,255,.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -1px 0 rgba(120,166,211,.16),
        0 20px 48px rgba(55,94,142,.14);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}
/* The shared workspace glass rule is intentionally broad. Keep Generate's
   primary surface lighter and more transparent so the page atmosphere shows
   through it without sacrificing text contrast. */
body:has(.app-shell) .generate-card {
    border-color: rgba(255,255,255,.68) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 54%, rgba(214,237,255,.18)),
        rgba(255,255,255,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -1px 0 rgba(120,166,211,.16),
        0 20px 48px rgba(55,94,142,.14);
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
.generate-card { padding: 0; }
.generate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(113,151,192,.2);
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(219,239,255,.08));
}
.generate-card-head h2 { font-size: 20px; }
.generate-card-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.generate-card-actions .glass-btn {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(79,117,161,.06);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.generate-form-body { padding: 24px 26px 28px; }
.generate-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.generate-field { min-width: 0; }
.generate-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: #58718f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.generate-field label i { color: #6882e2; font-size: 13px; }
.generate-control {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    outline: none;
    color: #294768;
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(79,117,161,.06);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.generate-control::placeholder { color: #8da0b6; }
.generate-control:focus {
    border-color: rgba(98,124,228,.72);
    background: rgba(255,255,255,.62);
    box-shadow: 0 0 0 4px rgba(104,129,226,.13), inset 0 1px 1px rgba(255,255,255,.7);
}
.generate-control:disabled { opacity: .55; cursor: not-allowed; }
.generate-error { display: block; margin-top: 6px; color: #be4b68; font-size: 12px; }
.generate-choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, .9fr) minmax(155px, .7fr);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}
.generate-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    color: #294768;
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(79,117,161,.06);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    cursor: pointer;
}
.generate-switch input { position: absolute; opacity: 0; pointer-events: none; }
.generate-switch-track {
    display: block;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(124,143,174,.35);
    transition: background .18s ease;
}
.generate-switch-track span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(45,70,110,.24);
    transition: transform .18s ease;
}
.generate-switch input:checked + .generate-switch-track { background: linear-gradient(120deg, #7074df, #49aee6); }
.generate-switch input:checked + .generate-switch-track span { transform: translateX(16px); }
.generate-switch strong,
.generate-switch small { display: block; }
.generate-switch strong { font-size: 12px; }
.generate-switch small { margin-top: 2px; color: #7a90aa; font-size: 10px; }
.generate-estimate {
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(79,117,161,.06);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.generate-estimate span,
.generate-estimate small { display: block; color: #7187a3; font-size: 10px; }
.generate-estimate strong { display: block; margin-top: 2px; color: #294768; font-size: 18px; letter-spacing: -.02em; }
.generate-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(113,151,192,.18);
}
.generate-form-note { color: #7187a3; font-size: 11px; }
.generate-form-note i { margin-right: 5px; color: #607ce2; }
.generate-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 19px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(120deg, rgba(111,101,226,.95), rgba(54,166,232,.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px rgba(76,111,206,.2);
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease;
}
.generate-submit:hover, .generate-submit:focus-visible { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 16px 28px rgba(76,111,206,.28); }
.generate-submit i { font-size: 17px; }
@media (max-width: 760px) {
    .generate-hero { display: block; padding: 19px; }
    .generate-hero h1 { font-size: 28px; }
    .generate-hero p { max-width: 280px; font-size: 12px; }
    .generate-hero-meta { justify-content: flex-start; margin-top: 16px; }
    .generate-card-head { align-items: flex-start; flex-direction: column; padding: 18px; }
    .generate-card-actions { width: 100%; }
    .generate-card-actions > * { flex: 1 1 auto; }
    .generate-form-body { padding: 18px; }
    .generate-field-grid,
    .generate-choice-row { grid-template-columns: 1fr; }
    .generate-submit-row { align-items: stretch; flex-direction: column; gap: 8px; }
    .generate-submit { width: 100%; }
    .generate-result { display: block; padding: 18px; }
    .generate-result-icon { margin-bottom: 12px; }
}

@media (max-width: 420px) {
    .generate-page { overflow: hidden; }
    .generate-hero-meta span { width: 100%; justify-content: flex-start; }
    .generate-key-output { align-items: stretch; flex-direction: column; }
    .generate-key-output .glass-btn { width: 100%; }
    .generate-card-actions { flex-direction: column; }
}

body.action-menu-open > .dropdown-menu.show .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    color: #294768 !important;
}

body.action-menu-open > .dropdown-menu.show .dropdown-item i {
    width: 17px;
    color: #607be0;
}

body.action-menu-open > .dropdown-menu.show .dropdown-item:hover,
body.action-menu-open > .dropdown-menu.show .dropdown-item:focus-visible {
    color: #1264d9 !important;
    background: rgba(216, 237, 255, .72);
}

body.action-menu-open > .dropdown-menu.show {
    min-width: 210px;
}

.keys-page,
.referral-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

.page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 132px;
    margin-bottom: 18px;
    padding: clamp(22px, 3vw, 34px);
}

.page-hero h1,
.keys-card h2,
.referral-card h2 {
    margin: 4px 0 0;
    color: #1d3655;
    font-weight: 750;
    letter-spacing: -.03em;
}

.page-hero h1 { font-size: clamp(28px, 3vw, 40px); }
.page-hero p { margin: 7px 0 0; color: #6e86a3; }
.eyebrow, .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #637d9c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 20px;
    color: #517de3;
    background: linear-gradient(145deg, rgba(255,255,255,.58), rgba(184,222,255,.3));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 12px 24px rgba(72,112,173,.13);
    font-size: 23px;
}

.keys-card,
.referral-card {
    overflow: visible;
    border: 1px solid rgba(255,255,255,.68);
    background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(223,240,255,.23));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 18px 42px rgba(55,94,142,.13);
}

.keys-card-head,
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(113,151,192,.2);
}

.keys-card-head h2,
.section-head h2 { font-size: 20px; }
.section-head > i { color: #6f87e6; font-size: 22px; }
.keys-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 13px;
    color: #294768 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(207,231,255,.28)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 20px rgba(66,105,157,.1);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.glass-btn:hover, .glass-btn:focus-visible { transform: translateY(-1px); color: #173a67 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px rgba(66,105,157,.16); }
.glass-btn-primary { color: #fff !important; border-color: rgba(255,255,255,.42) !important; background: linear-gradient(120deg, rgba(111,101,226,.9), rgba(54,166,232,.78)) !important; }
.keys-actions .dropdown-menu { min-width: 210px; padding: 8px; }
.keys-actions .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; color: #294768 !important; }
.keys-actions .dropdown-item i { width: 17px; color: #607be0; }
.keys-card-body, .section-body { padding: 24px 26px 28px; }
.key-filter { display: flex; align-items: center; gap: 12px; max-width: 410px; margin-bottom: 18px; }
.key-filter .form-label { margin: 0; white-space: nowrap; color: #6a819f; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.key-filter .form-select { min-width: 210px; }
.keys-table-wrap { width: 100%; overflow-x: auto; border: 1px solid rgba(126,161,198,.2); border-radius: 17px; background: rgba(255,255,255,.18); }
.keys-table-wrap .table { min-width: 850px; margin: 0; }
.keys-table-wrap th { padding: 13px 12px; color: #6d83a0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.keys-table-wrap td { padding: 13px 12px; color: #294768 !important; border-top: 1px solid rgba(113,151,192,.15) !important; vertical-align: middle; }
.keys-table-wrap tbody tr:hover td { background: rgba(255,255,255,.24) !important; }
.empty-state { display: grid; justify-items: center; gap: 7px; min-height: 180px; place-content: center; color: #7187a3; text-align: center; }
.empty-state i { color: #7187e9; font-size: 27px; }
.empty-state strong { color: #2b4869; font-size: 15px; }
.empty-state span { font-size: 12px; }
.referral-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.referral-card { overflow: hidden; }
.referral-card .form-group { margin-bottom: 18px; }
.referral-card .form-group > label { display: block; margin-bottom: 7px; color: #58718f; font-size: 12px; font-weight: 700; }
.referral-card .input-group { flex-wrap: nowrap; }
.referral-card .input-group-text { min-width: 46px; justify-content: center; }
.referral-table { min-width: 680px; margin: 0; }
.referral-table th { padding: 11px 10px; color: #7187a2; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.referral-table td { padding: 12px 10px; color: #294768 !important; border-top: 1px solid rgba(113,151,192,.15) !important; white-space: nowrap; }
.count-badge { display: inline-grid; min-width: 23px; height: 23px; margin-left: 5px; place-items: center; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#6d75df,#4aa8e7); font-size: 11px; vertical-align: 2px; }
.danger-btn { width: 32px; height: 32px; color: #a83b5a !important; background: rgba(255,225,233,.4); }

.swal2-container { z-index: 2000 !important; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
.swal2-popup {
    width: min(430px, calc(100vw - 28px)) !important;
    padding: 28px 26px 24px !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 27px !important;
    color: #213b5a !important;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(218,237,255,.6)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 80px rgba(39,77,126,.28) !important;
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.swal2-title, .swal2-html-container { color: #213b5a !important; }
.swal2-title { font-size: 25px !important; letter-spacing: -.03em; }
.swal2-html-container { font-size: 14px !important; }
.swal2-actions button { border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(50,94,150,.14) !important; }
.swal2-confirm { background: linear-gradient(120deg,#6d75df,#3e9fe0) !important; }
.swal2-cancel { color: #294768 !important; background: rgba(255,255,255,.48) !important; }

@media (max-width: 760px) {
    .page-hero { min-height: 108px; padding: 19px; }
    .page-hero h1 { font-size: 28px; }
    .page-hero p { max-width: 245px; font-size: 12px; }
    .hero-icon { width: 46px; height: 46px; border-radius: 16px; font-size: 18px; }
    .keys-card-head, .section-head { align-items: flex-start; flex-direction: column; padding: 18px; }
    .keys-actions { width: 100%; }
    .keys-actions > *, .keys-actions .glass-btn { flex: 1 1 auto; }
    .keys-actions .dropdown { flex: 1 1 auto; }
    .keys-actions .dropdown > .glass-btn { width: 100%; }
    .keys-card-body, .section-body { padding: 18px; }
    .key-filter { align-items: stretch; flex-direction: column; gap: 7px; max-width: none; }
    .key-filter .form-select { min-width: 0; width: 100%; }
    .referral-grid { grid-template-columns: 1fr; }
    .referral-table { min-width: 610px; }
}

@media (prefers-reduced-motion: no-preference) {
    .liquid-card, .glass-btn, .side-link, .profile-pill { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
    .page-hero:hover, .keys-card:hover, .referral-card:hover { transform: translateY(-1px); }
}

/* Keys page: use the available mobile width instead of nesting wide desktop
   gutters inside the already full-width app content. */
.keys-page,
.keys-page > .keys-card,
.keys-page .keys-card-body,
.keys-page .keys-table-wrap,
.keys-page .dataTables_wrapper {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.keys-page > .keys-card {
    padding: 0;
}

@media (max-width: 760px) {
    .keys-page {
        width: 100%;
    }

    .keys-page .keys-card-body {
        padding: 12px 8px 14px;
    }

    .keys-page .keys-card-head {
        padding: 14px 12px;
    }

    .keys-page .keys-table-wrap {
        width: 100%;
        border-radius: 13px;
    }

    .keys-page .keys-table-wrap .table {
        min-width: 760px;
    }

    .keys-page .dataTables_wrapper .dataTables_filter,
    .keys-page .dataTables_wrapper .dataTables_length,
    .keys-page .dataTables_wrapper .dataTables_info,
    .keys-page .dataTables_wrapper .dataTables_paginate {
        max-width: 100%;
    }
}

/* Auth icons stay inline so the public entry pages do not download an icon font. */
.auth-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-brand .auth-icon, .auth-mobile-brand .auth-icon { width: 20px; height: 20px; }
.auth-visual > .auth-icon { width: 1em; height: 1em; }
.auth-field > div > .auth-icon { margin-left: 17px; color: #9484e8; }
.password-toggle > .auth-icon { width: 18px; height: 18px; }
.auth-submit > .auth-icon, .preview-login > .auth-icon, .auth-switch a > .auth-icon { width: 17px; height: 17px; }

@media (max-width: 560px) {
    .auth-field > div > .auth-icon { margin-left: 14px; }
}

/* Keys inventory: a compact glass workspace with card-like mobile rows. */
.keys-page .keys-card {
    overflow: hidden;
}

.keys-page .keys-card-head {
    padding: 24px 26px 20px;
    border-bottom-color: rgba(118, 153, 192, .16);
}

.keys-page .keys-card-head h2 {
    margin-top: 5px;
    font-size: clamp(19px, 2vw, 23px);
}

.keys-page .keys-card-head h2::after {
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 10px;
    border-radius: 99px;
    content: "";
    background: linear-gradient(90deg, #7564e8, #35aee6);
}

.keys-page .keys-actions {
    flex-wrap: nowrap;
}

.keys-page .keys-actions .glass-btn {
    min-height: 42px;
    border-radius: 15px;
}

.keys-page .keys-card-body {
    padding: 19px 22px 24px;
}

.keys-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.keys-toolbar .key-filter {
    margin: 0;
}

.keys-toolbar-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6d83a0;
    font-size: 11px;
    white-space: nowrap;
}

.keys-toolbar-note i {
    color: #1ca873;
}

.keys-page .keys-table-wrap {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .38), rgba(212, 232, 250, .2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 12px 28px rgba(65, 104, 151, .08);
}

.keys-page .keys-table {
    border-collapse: separate;
    border-spacing: 0 7px;
}

.keys-page .keys-table thead th {
    padding: 9px 11px 10px;
    border: 0;
    color: #7286a1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.keys-page .keys-table tbody td {
    padding: 14px 11px;
    border-top: 1px solid rgba(255, 255, 255, .52) !important;
    border-bottom: 1px solid rgba(121, 158, 197, .12) !important;
    color: #294768 !important;
    background: rgba(255, 255, 255, .3) !important;
    vertical-align: middle;
}

.keys-page .keys-table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, .52);
    border-radius: 15px 0 0 15px;
}

.keys-page .keys-table tbody td:last-child {
    border-right: 1px solid rgba(121, 158, 197, .12);
    border-radius: 0 15px 15px 0;
}

.keys-page .keys-table tbody tr:hover td {
    background: rgba(255, 255, 255, .56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

.key-value,
.key-metric,
.key-duration,
.key-expiry {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
}

.key-value {
    max-width: 170px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(113, 154, 207, .2);
    border-radius: 9px;
    background: rgba(255, 255, 255, .3);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.key-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.key-game-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 5px 12px rgba(67, 108, 158, .12);
}

.key-game-name {
    min-width: 0;
    max-width: 125px;
    overflow: hidden;
    color: #294768;
    font-size: 11px;
    text-overflow: ellipsis;
}

.key-game-code {
    color: #7187a3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.key-identity-separator {
    color: #a0b1c5;
    font-weight: 800;
}

.key-identity .key-value {
    max-width: min(195px, 22vw);
    margin: 0;
}

.key-status-active {
    color: #168d67;
}

.key-status-inactive {
    color: #c04e6b;
}

.key-metric,
.key-duration {
    color: #45617e;
    font-weight: 700;
}

.key-expiry {
    padding: 5px 8px;
    border-radius: 9px;
    color: #45617e;
    background: rgba(255, 255, 255, .28);
    font-size: 10px;
    white-space: nowrap;
}

.key-expiry-pending {
    color: #7c6bce;
    background: rgba(127, 112, 228, .12);
}

.key-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(31px, 1fr));
    gap: 6px;
    width: min(156px, 100%);
    margin-inline: auto;
}

.key-action {
    display: inline-grid;
    width: 100%;
    min-width: 0;
    min-height: 33px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 11px;
    color: #506987 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(212, 233, 255, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 5px 12px rgba(74, 111, 155, .08);
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.key-action:hover,
.key-action:focus-visible {
    transform: translateY(-1px);
    color: #225fbe !important;
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 8px 16px rgba(74, 111, 155, .14);
}

.key-action-primary {
    color: #416de0 !important;
}

.key-action-warning {
    color: #b65c7d !important;
}

.key-action-danger {
    color: #c34d6b !important;
    background: linear-gradient(145deg, rgba(255, 241, 246, .7), rgba(255, 219, 230, .32));
}

.keys-page .dataTables_wrapper {
    color: #7186a2;
}

.keys-page .dataTables_wrapper .dataTables_length,
.keys-page .dataTables_wrapper .dataTables_filter {
    margin: 4px 4px 12px;
    color: #6f83a0;
    font-size: 10px;
    font-weight: 700;
}

.keys-page .dataTables_wrapper .dataTables_filter input,
.keys-page .dataTables_wrapper .dataTables_length select {
    margin-left: 7px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 11px;
    color: #294768 !important;
    background: rgba(255, 255, 255, .4) !important;
}

.keys-page .dataTables_wrapper .dataTables_info {
    padding: 14px 4px 4px;
    color: #7186a2;
    font-size: 10px;
}

.keys-page .dataTables_wrapper .dataTables_paginate {
    padding-top: 11px;
}

@media (max-width: 760px) {
    .keys-page .keys-card-head {
        padding: 19px 15px 16px;
    }

    .keys-page .keys-actions {
        width: 100%;
    }

    .keys-page .keys-actions .glass-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .keys-page .keys-card-body {
        padding: 15px 9px 18px;
    }

    .keys-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 12px;
    }

    .keys-toolbar-note {
        padding-inline: 4px;
        font-size: 10px;
    }

    .keys-page .keys-table-wrap {
        padding: 6px;
        overflow: visible;
        border-radius: 17px;
    }

    .keys-page .keys-table {
        display: block;
        min-width: 0 !important;
        border-spacing: 0;
    }

    .keys-page .keys-table thead {
        display: none;
    }

    .keys-page .keys-table tbody {
        display: grid;
        gap: 10px;
    }

    .keys-page .keys-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .68);
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(219, 237, 253, .24));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 7px 18px rgba(74, 111, 155, .08);
    }

    .keys-page .keys-table tbody td,
    .keys-page .keys-table tbody td:first-child,
    .keys-page .keys-table tbody td:last-child {
        display: flex;
        min-width: 0;
        min-height: 53px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 8px 7px;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
    }

    .keys-page .keys-table tbody td::before {
        margin-bottom: 5px;
        color: #8295af;
        content: attr(data-label);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .keys-page .keys-table tbody td:first-child,
    .keys-page .keys-table tbody td:last-child {
        grid-column: 1 / -1;
    }

    .keys-page .keys-table tbody td:not(:first-child):not(:last-child) {
        grid-column: span 1;
    }

    .keys-page .keys-table tbody td:first-child {
        min-height: 58px;
        padding-top: 3px;
    }

    .keys-page .key-identity {
        gap: 6px;
    }

    .keys-page .key-game-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 10px;
    }

    .keys-page .key-game-name {
        max-width: 92px;
        font-size: 10px;
    }

    .keys-page .key-game-code {
        font-size: 8px;
    }

    .keys-page .key-identity .key-value {
        max-width: 132px;
        font-size: 9px;
    }

    .keys-page .key-value {
        max-width: 100%;
    }

    .keys-page .key-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        margin-top: 2px;
    }

    .keys-page .key-action {
        min-height: 38px;
        border-radius: 12px;
    }

    .keys-page .dataTables_wrapper .dataTables_length,
    .keys-page .dataTables_wrapper .dataTables_filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 2px 9px;
    }

    .keys-page .dataTables_wrapper .dataTables_filter input {
        width: min(170px, 55vw);
        margin-left: 5px;
    }
}

/* Keep Keys controls and results as two simple sibling surfaces. */
.keys-page .keys-card {
    display: block;
}

.keys-page .keys-toolbar {
    margin: 0;
    padding: 16px 22px 0;
}

.keys-page .keys-card > #datatable_wrapper {
    width: 100%;
    margin: 0;
    padding: 0 22px 24px;
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.keys-page .keys-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
}

.keys-page .keys-controls .dataTables_filter {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.keys-page .keys-controls .dataTables_length {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
}

.keys-page .keys-controls .dataTables_filter label {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--muted, #6f83a0);
    font-size: 0;
}

.keys-page .keys-search-field {
    position: relative;
    display: block;
    width: 100%;
}

.keys-page .keys-search-field .bi-search {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--accent, #6b84d9);
    font-size: 14px;
    pointer-events: none;
    transform: translateY(-50%);
}

.keys-page .keys-search-field input {
    padding-left: 34px !important;
}

.keys-page .keys-table {
    width: 100% !important;
    min-width: 0;
    margin: 0;
}

.keys-page .keys-table .key-row {
    transition: background .18s ease, transform .18s ease;
}

.keys-page .keys-table .key-row:hover {
    transform: translateY(-1px);
}

.keys-page .keys-table .key-row td {
    background: rgba(255, 255, 255, .3) !important;
}

.keys-page .keys-table .key-row:hover td {
    background: rgba(255, 255, 255, .56) !important;
}

.keys-page .keys-table .key-row td:first-child {
    border-radius: 15px 0 0 15px;
}

.keys-page .keys-table .key-row td:last-child {
    border-radius: 0 15px 15px 0;
}

.keys-page .keys-search-field .bi {
    color: var(--accent, #6b84d9);
    pointer-events: none;
}

.keys-page .keys-controls .dataTables_length label {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 0;
}

.keys-page .keys-controls .dataTables_length select {
    width: 64px;
    min-width: 64px;
    margin: 0 !important;
    padding: 7px 10px;
}

.keys-page .keys-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.keys-page .keys-footer .dataTables_info,
.keys-page .keys-footer .dataTables_paginate {
    padding-top: 0;
}

@media (max-width: 760px) {
    .keys-page .keys-toolbar {
        padding: 12px 9px 0;
    }

.keys-page .keys-card > #datatable_wrapper {
        padding: 0 9px 18px;
    }

    .keys-page .keys-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .keys-page .keys-controls .dataTables_filter input {
        min-height: 34px;
    }

    .keys-page .keys-controls .dataTables_length select {
        width: 58px;
        min-width: 58px;
    }

    .keys-page .keys-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .keys-page .keys-footer .dataTables_paginate {
        text-align: left;
    }
}