@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.2.0/sweetalert2.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
    color-scheme: dark;
    --aero-bg: #020617;
    --aero-bg-2: #071225;
    --aero-surface: rgba(8, 20, 42, 0.78);
    --aero-surface-solid: #08152b;
    --aero-surface-2: rgba(11, 29, 58, 0.9);
    --aero-border: rgba(83, 167, 255, 0.22);
    --aero-border-strong: rgba(75, 174, 255, 0.52);
    --aero-primary: #35a7ff;
    --aero-primary-2: #4ce6ff;
    --aero-primary-soft: rgba(53, 167, 255, 0.14);
    --aero-text: #eef7ff;
    --aero-muted: #93a9c3;
    --aero-success: #3ce6b0;
    --aero-danger: #ff667c;
    --aero-warning: #ffc857;
    --aero-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --aero-glow: 0 0 0 1px rgba(61, 178, 255, 0.12), 0 0 35px rgba(30, 136, 229, 0.13);
    --aero-radius: 18px;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #194776 #050b17;
}

html {
    min-height: 100%;
    background: var(--aero-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    padding-bottom: 88px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(27, 126, 255, 0.17), transparent 29%),
        radial-gradient(circle at 88% 18%, rgba(0, 220, 255, 0.10), transparent 25%),
        radial-gradient(circle at 50% 105%, rgba(36, 93, 255, 0.14), transparent 35%),
        linear-gradient(145deg, #01040b 0%, #040b18 42%, #06142a 100%) !important;
    color: var(--aero-text) !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0.01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    opacity: .27;
    background-image:
        linear-gradient(rgba(73, 162, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 162, 255, .09) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}

body::after {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    right: -220px;
    top: 18%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: rgba(17, 139, 255, .08);
    filter: blur(100px);
}

::selection {
    background: rgba(61, 176, 255, .35);
    color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050b17; }
::-webkit-scrollbar-thumb { background: linear-gradient(#163c68, #1d5c94); border-radius: 999px; border: 2px solid #050b17; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#1b528b, #2480c6); }

a {
    color: #68c7ff;
    text-decoration-color: rgba(104, 199, 255, .35);
    transition: color .2s ease, opacity .2s ease, text-shadow .2s ease;
}

a:hover {
    color: #a4e6ff;
    text-shadow: 0 0 18px rgba(65, 187, 255, .35);
}

.container {
    max-width: 1180px;
}

main #content {
    position: relative;
    padding-top: 30px !important;
    animation: aeroPageIn .42s ease both;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    min-height: 68px;
    padding: .7rem 0;
    background: rgba(2, 9, 22, .82) !important;
    border-bottom: 1px solid rgba(72, 171, 255, .22);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28), 0 1px 0 rgba(73, 181, 255, .08) inset !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(49, 174, 255, .9), rgba(60, 225, 255, .6), transparent);
    opacity: .75;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #f6fbff !important;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-shadow: 0 0 26px rgba(51, 177, 255, .32);
}

.navbar-brand .bi {
    color: var(--aero-primary-2);
    filter: drop-shadow(0 0 8px rgba(76, 230, 255, .45));
}

.navbar .nav-link {
    position: relative;
    color: #bdd4ea !important;
    font-weight: 600;
    border-radius: 10px;
    padding: .55rem .72rem !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
    color: #fff !important;
    background: rgba(45, 164, 255, .10);
    transform: translateY(-1px);
}

.navbar-toggler {
    border: 1px solid rgba(89, 184, 255, .34) !important;
    background: rgba(34, 135, 221, .09);
    box-shadow: none !important;
}

.dropdown-menu {
    overflow: hidden;
    min-width: 220px;
    padding: .5rem;
    color: var(--aero-text);
    background: rgba(5, 15, 32, .96) !important;
    border: 1px solid rgba(78, 172, 255, .26) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .5), 0 0 30px rgba(31, 134, 255, .09) !important;
    backdrop-filter: blur(18px);
}

.dropdown-item {
    color: #cbdced !important;
    border-radius: 9px;
    padding: .62rem .72rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(45, 154, 255, .19), rgba(44, 226, 255, .06)) !important;
    transform: translateX(2px);
}

.dropdown-item.text-danger { color: #ff8798 !important; }
.dropdown-item.text-muted { color: #6f90ae !important; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.dropdown-divider { border-top-color: rgba(115, 173, 225, .16) !important; }

.card {
    position: relative;
    overflow: hidden;
    color: var(--aero-text) !important;
    background: linear-gradient(155deg, rgba(10, 27, 55, .91), rgba(4, 13, 29, .88)) !important;
    border: 1px solid var(--aero-border) !important;
    border-radius: var(--aero-radius) !important;
    box-shadow: var(--aero-shadow), var(--aero-glow) !important;
    backdrop-filter: blur(15px) saturate(125%);
    -webkit-backdrop-filter: blur(15px) saturate(125%);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(97, 202, 255, .76), rgba(58, 121, 255, .46), transparent);
    opacity: .8;
}

.card-header,
.card-header.bg-dark,
.bg-dark.card-header {
    position: relative;
    color: #f4fbff !important;
    background: linear-gradient(90deg, rgba(19, 60, 105, .75), rgba(8, 28, 58, .92)) !important;
    border-bottom: 1px solid rgba(83, 168, 255, .22) !important;
    font-weight: 700;
    letter-spacing: .035em;
}

.card-body {
    color: #d6e6f5;
}

.bg-dark {
    background-color: #071426 !important;
}

.bg-light,
.card-header.bg-light {
    color: #eaf6ff !important;
    background: rgba(12, 31, 58, .96) !important;
}

.text-dark,
main .text-dark,
.card .text-dark,
.table .text-dark {
    color: #ddecfb !important;
}

.text-muted,
small.text-muted {
    color: var(--aero-muted) !important;
}

.text-primary { color: #55baff !important; }
.text-success { color: var(--aero-success) !important; }
.text-danger { color: #ff7389 !important; }
.text-warning { color: var(--aero-warning) !important; }

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
    color: #f0f8ff !important;
    caret-color: var(--aero-primary-2);
    background-color: rgba(2, 10, 23, .72) !important;
    border: 1px solid rgba(86, 165, 231, .28) !important;
    border-radius: 11px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.form-control:hover,
.form-select:hover,
textarea:hover {
    border-color: rgba(82, 182, 255, .48) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    color: #fff !important;
    background-color: rgba(4, 18, 37, .94) !important;
    border-color: rgba(72, 192, 255, .9) !important;
    box-shadow: 0 0 0 .22rem rgba(41, 160, 255, .12), 0 0 26px rgba(36, 154, 255, .10) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: #718ba7 !important;
    opacity: 1;
}

.form-floating > label,
.form-label,
.form-check-label,
label {
    color: #a9bfd4 !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: #83d1ff !important;
}

.form-floating > label::after {
    background: transparent !important;
}

.form-check-input {
    background-color: rgba(4, 16, 34, .9);
    border-color: rgba(91, 170, 235, .44);
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: #208fe4;
    border-color: #4fc4ff;
}

.btn {
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease !important;
}

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

.btn:active {
    transform: translateY(0) scale(.985);
}

.btn-dark,
.btn-default,
.btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #1478da, #1d9cf0) !important;
    border-color: rgba(100, 201, 255, .62) !important;
    box-shadow: 0 8px 22px rgba(8, 111, 210, .22);
}

.btn-dark:hover,
.btn-default:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #1989ef, #25b5f7) !important;
    box-shadow: 0 10px 30px rgba(24, 146, 235, .28), 0 0 22px rgba(55, 193, 255, .15);
}

.btn-outline-dark,
.btn-outline-primary,
.btn-outline-light,
.btn-outline-secondary {
    color: #cfeaff !important;
    background: rgba(25, 102, 170, .055) !important;
    border-color: rgba(82, 181, 255, .48) !important;
}

.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(29, 137, 231, .78), rgba(32, 184, 240, .5)) !important;
    border-color: rgba(106, 214, 255, .85) !important;
    box-shadow: 0 8px 26px rgba(32, 146, 232, .18);
}

.btn-outline-danger,
.btn-danger {
    color: #ff9aab !important;
    background: rgba(255, 73, 102, .06) !important;
    border-color: rgba(255, 102, 128, .44) !important;
}

.btn-outline-danger:hover,
.btn-danger:hover {
    color: #fff !important;
    background: rgba(222, 55, 82, .78) !important;
    border-color: rgba(255, 128, 149, .78) !important;
    box-shadow: 0 8px 24px rgba(222, 55, 82, .17);
}

.table-responsive {
    border-radius: 13px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #dcebf9;
    --bs-table-border-color: rgba(90, 159, 216, .16);
    --bs-table-striped-bg: rgba(65, 146, 213, .035);
    --bs-table-striped-color: #dcebf9;
    --bs-table-hover-bg: rgba(49, 162, 246, .08);
    --bs-table-hover-color: #fff;
    margin-bottom: 0;
    color: #dcebf9 !important;
    border-color: rgba(92, 162, 219, .16) !important;
}

.table > :not(caption) > * > * {
    color: inherit;
    background-color: transparent !important;
    border-bottom-color: rgba(90, 159, 216, .14) !important;
    box-shadow: none !important;
    vertical-align: middle;
}

.table thead th,
.table th {
    color: #9cd8ff !important;
    background: rgba(31, 112, 184, .095) !important;
    border-color: rgba(83, 172, 240, .20) !important;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    color: #fff !important;
    background-color: rgba(45, 154, 238, .08) !important;
}

.list-group-item {
    color: #d7e7f6 !important;
    background: rgba(4, 15, 31, .55) !important;
    border-color: rgba(84, 158, 219, .15) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: #fff !important;
    background: rgba(31, 126, 204, .10) !important;
}

.badge {
    border: 1px solid rgba(105, 185, 244, .16);
    background: rgba(38, 118, 184, .08);
    font-weight: 700;
}

.alert {
    color: #eaf6ff;
    border-radius: 12px;
    border-width: 1px;
    backdrop-filter: blur(10px);
}

.alert-success { background: rgba(34, 166, 125, .11) !important; border-color: rgba(59, 222, 171, .27) !important; color: #aaf4db !important; }
.alert-danger { background: rgba(207, 61, 82, .10) !important; border-color: rgba(255, 104, 126, .27) !important; color: #ffb1bd !important; }
.alert-warning { background: rgba(216, 158, 38, .10) !important; border-color: rgba(255, 200, 87, .28) !important; color: #ffe0a0 !important; }
.alert-info { background: rgba(39, 142, 220, .10) !important; border-color: rgba(86, 189, 255, .27) !important; color: #b9e7ff !important; }

.pagination .page-link {
    color: #aedcff;
    background: rgba(7, 20, 40, .8) !important;
    border-color: rgba(80, 163, 227, .2) !important;
}

.pagination .page-link:hover {
    color: #fff;
    background: rgba(38, 137, 216, .22) !important;
}

.pagination .active > .page-link,
.pagination .page-link.active {
    color: #fff;
    background: #167fda !important;
    border-color: #42b9ff !important;
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
    color: #9fb8cf !important;
}

.dataTables_wrapper label {
    color: #9fb8cf !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    color: #eef8ff !important;
    background: rgba(4, 16, 34, .86) !important;
    border: 1px solid rgba(84, 174, 242, .25) !important;
    border-radius: 9px !important;
    padding: .35rem .55rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #b7dcf8 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    border-color: rgba(75, 184, 255, .36) !important;
    background: rgba(34, 132, 214, .18) !important;
}

.modal-content,
.offcanvas,
.popover,
.tooltip-inner {
    color: var(--aero-text) !important;
    background: #07162c !important;
    border-color: rgba(81, 173, 242, .24) !important;
}

.swal2-popup {
    color: #e9f5ff !important;
    background: linear-gradient(160deg, #0a1b35, #050d1d) !important;
    border: 1px solid rgba(76, 181, 255, .3) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 42px rgba(27, 139, 229, .12) !important;
}

.swal2-title { color: #f4fbff !important; }
.swal2-html-container { color: #b7cce0 !important; }
.swal2-timer-progress-bar { background: #42bfff !important; }

footer.fixed-bottom,
footer.bg-body {
    color: #6f8aa4 !important;
    background: rgba(2, 8, 18, .86) !important;
    border-top: 1px solid rgba(69, 155, 224, .16) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

footer small {
    color: #7992aa !important;
}

.key-sensi {
    filter: blur(4px);
    user-select: none;
}

#ipAddress {
    font-family: 'JetBrains Mono', monospace;
    color: #9bd7ff !important;
    font-size: .85rem;
}

/* Authentication screens */
#content > .row.justify-content-center.pt-5 {
    min-height: calc(100vh - 190px);
    align-items: center;
    padding-top: 1rem !important;
}

#content > .row.justify-content-center.pt-5 > .col-lg-4 {
    width: min(100%, 470px);
}

#content > .row.justify-content-center.pt-5 .card {
    box-shadow: 0 32px 90px rgba(0,0,0,.52), 0 0 0 1px rgba(78,177,255,.12), 0 0 55px rgba(27,127,221,.12) !important;
}

#content > .row.justify-content-center.pt-5 .card-header {
    padding: 1.05rem 1.25rem !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .9rem !important;
}

.splash-screen {
    background:
        radial-gradient(circle at center, rgba(18, 104, 194, .20), transparent 35%),
        #020713 !important;
}

.splash-logo {
    max-width: min(350px, 72vw);
    filter: drop-shadow(0 0 28px rgba(45, 169, 255, .32));
}

/* Existing toggle controls */
.slider {
    background-color: #18304a !important;
    border: 1px solid rgba(84, 173, 239, .28);
}

input:checked + .slider {
    background: linear-gradient(90deg, #157fd6, #28bdf0) !important;
}

input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(51, 177, 255, .12) !important;
}

/* Keep long keys and table content readable on small screens */
.keyBlur,
code,
pre,
.font-monospace {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

@keyframes aeroPageIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    body { padding-bottom: 76px; }
    main #content { padding: 18px 12px 22px !important; }
    .navbar { min-height: 62px; }
    .navbar-collapse { padding-top: .65rem; }
    .navbar .nav-link { padding: .55rem .6rem !important; }
    .card { border-radius: 15px !important; }
    .card-body { padding: 1rem; }
    .table { font-size: .82rem; }
    .btn { min-height: 38px; }
    .dropdown-menu { min-width: min(92vw, 280px); }
}

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

/* ========================================================================== 
   AERO CONTROL UI v3 - 2026-09-28
   Visual layer only: keeps the existing application behavior and routes intact.
   ========================================================================== */

:root {
    --aero-cyan: #54eaff;
    --aero-blue: #2b8fff;
    --aero-violet: #8b7cff;
    --aero-ice: #dff8ff;
    --aero-panel: rgba(5, 15, 33, .84);
    --aero-panel-strong: rgba(7, 20, 42, .96);
    --aero-line: rgba(89, 207, 255, .24);
    --aero-line-hot: rgba(90, 225, 255, .62);
}

body.aero-shell {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 15% 8%, rgba(38, 139, 255, .18), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(74, 231, 255, .11), transparent 24%),
        radial-gradient(circle at 50% 112%, rgba(116, 87, 255, .13), transparent 36%),
        linear-gradient(145deg, #01040b 0%, #030916 37%, #061329 100%) !important;
}

.aero-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.aero-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .2;
}

.aero-orb-one {
    width: 340px;
    height: 340px;
    left: -130px;
    top: 18%;
    background: #167dff;
    animation: aeroOrbDrift 14s ease-in-out infinite alternate;
}

.aero-orb-two {
    width: 420px;
    height: 420px;
    right: -190px;
    bottom: 4%;
    background: #16d9ff;
    animation: aeroOrbDrift 17s ease-in-out infinite alternate-reverse;
}

.aero-scanline {
    position: absolute;
    inset: -50% 0 auto;
    height: 34%;
    opacity: .12;
    background: linear-gradient(to bottom, transparent, rgba(96, 230, 255, .16), transparent);
    animation: aeroScan 12s linear infinite;
}

.aero-main {
    position: relative;
    z-index: 1;
}

main #content {
    max-width: 1240px;
}

.aero-header {
    position: relative;
    z-index: 1050;
}

.navbar {
    min-height: 76px;
    background:
        linear-gradient(90deg, rgba(3, 11, 27, .96), rgba(6, 20, 43, .91) 52%, rgba(3, 11, 27, .96)) !important;
    border-bottom-color: rgba(76, 202, 255, .3);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .34), 0 1px 0 rgba(99, 223, 255, .09) inset !important;
}

.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(81, 209, 255, .12) 18% 18.12%, transparent 18.12% 81%, rgba(81, 209, 255, .09) 81% 81.12%, transparent 81.12%),
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%);
}

.aero-brand {
    gap: .72rem;
    padding-right: 1.25rem;
}

.aero-brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    color: #eaffff;
    border: 1px solid rgba(88, 222, 255, .55);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(46, 152, 255, .24), rgba(33, 224, 255, .08)),
        rgba(3, 14, 30, .86);
    box-shadow: inset 0 0 18px rgba(63, 190, 255, .12), 0 0 24px rgba(37, 167, 255, .14);
}

.aero-brand-mark::before,
.aero-brand-mark::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-color: var(--aero-cyan);
    opacity: .95;
}

.aero-brand-mark::before {
    left: -2px;
    top: -2px;
    border-left: 1px solid;
    border-top: 1px solid;
}

.aero-brand-mark::after {
    right: -2px;
    bottom: -2px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.aero-brand-mark .bi {
    padding: 0 !important;
    font-size: 1.14rem;
}

.aero-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.04;
}

.aero-brand-kicker,
.aero-eyebrow,
.aero-dropdown-label,
.aero-footer-state,
.aero-system-status {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.aero-brand-kicker {
    margin-bottom: .23rem;
    color: #6f95b8;
    font-size: .56rem;
    font-weight: 600;
}

.aero-brand-name {
    max-width: 250px;
    overflow: hidden;
    color: #f6fcff;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aero-primary-nav {
    gap: .18rem;
}

.aero-primary-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    min-height: 42px;
    border: 1px solid transparent;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .76rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.aero-primary-nav .nav-link .bi {
    color: #65d9ff;
    font-size: .88rem;
}

.aero-primary-nav .nav-link:hover,
.aero-primary-nav .nav-link:focus {
    border-color: rgba(81, 196, 255, .2);
    background: linear-gradient(90deg, rgba(42, 139, 228, .13), rgba(42, 219, 255, .05)) !important;
}

.aero-nav-right {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.aero-system-status {
    align-items: center;
    gap: .48rem;
    min-height: 32px;
    padding: .35rem .62rem;
    color: #79a8c4;
    border: 1px solid rgba(77, 183, 232, .14);
    border-radius: 999px;
    background: rgba(5, 21, 40, .58);
    font-size: .56rem;
}

.aero-status-dot,
.aero-footer-state > span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ff0bc;
    box-shadow: 0 0 0 4px rgba(79, 240, 188, .07), 0 0 13px rgba(79, 240, 188, .48);
}

.aero-user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    min-height: 43px;
    padding-left: .48rem !important;
    border: 1px solid rgba(90, 193, 255, .13);
    background: rgba(8, 27, 52, .54);
}

.aero-avatar {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    color: #e9fbff;
    border: 1px solid rgba(98, 224, 255, .36);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(48, 151, 255, .22), rgba(37, 226, 255, .08));
}

.aero-user-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu {
    z-index: 1085 !important;
    padding: .55rem !important;
    background:
        linear-gradient(165deg, rgba(8, 25, 50, .985), rgba(3, 12, 28, .985)) !important;
    border: 1px solid rgba(82, 202, 255, .32) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 45px rgba(41, 164, 255, .13) !important;
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0 14px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 231, 255, .85), transparent);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-height: 40px;
    font-size: .86rem;
}

.dropdown-item .bi {
    width: 1.05rem;
    flex: 0 0 1.05rem;
    color: #70d4ff;
    text-align: center;
}

.dropdown-item.text-danger .bi { color: #ff8b9d; }
.dropdown-item.text-warning { color: #ffd277 !important; }
.dropdown-item.text-warning .bi { color: #ffd277; }

.aero-dropdown-label {
    padding: .5rem .72rem .34rem;
    color: #6686a3;
    font-size: .58rem;
    font-weight: 700;
    list-style: none;
}

.card {
    background:
        linear-gradient(152deg, rgba(11, 31, 62, .91), rgba(4, 13, 29, .91)) !important;
    border-color: rgba(89, 190, 255, .25) !important;
    box-shadow: 0 28px 84px rgba(0,0,0,.42), 0 0 0 1px rgba(81, 190, 255, .055), 0 0 42px rgba(35, 137, 237, .08) !important;
}

.card::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    pointer-events: none;
    border-top: 1px solid rgba(104, 225, 255, .26);
    border-right: 1px solid rgba(104, 225, 255, .26);
    border-top-right-radius: 8px;
}

.card-header,
.card-header.bg-dark,
.bg-dark.card-header {
    background:
        linear-gradient(90deg, rgba(17, 55, 101, .78), rgba(7, 25, 52, .95) 72%, rgba(9, 31, 61, .92)) !important;
}

.keys-registry-card {
    /* Critical dropdown fix: the global .card uses overflow:hidden. */
    overflow: visible !important;
    z-index: 20;
}

.keys-registry-header {
    position: relative;
    z-index: 35;
    padding: 1rem 1.15rem !important;
    border-radius: calc(var(--aero-radius) - 1px) calc(var(--aero-radius) - 1px) 0 0;
}

.keys-registry-header::after {
    content: "REGISTRY / ACTIVE";
    position: absolute;
    right: 1.15rem;
    bottom: -5px;
    color: rgba(104, 196, 229, .25);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5rem;
    letter-spacing: .16em;
    pointer-events: none;
}

.keys-registry-body {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 1.05rem !important;
    border-radius: 0 0 calc(var(--aero-radius) - 1px) calc(var(--aero-radius) - 1px);
    background:
        linear-gradient(180deg, rgba(4, 15, 31, .48), rgba(3, 11, 25, .74)) !important;
}

.aero-section-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #eafcff;
    border: 1px solid rgba(91, 221, 255, .4);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(38, 143, 255, .25), rgba(44, 229, 255, .07));
    box-shadow: inset 0 0 20px rgba(47, 168, 255, .08), 0 0 24px rgba(46, 174, 255, .09);
}

.aero-section-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(121, 231, 255, .08);
    border-radius: 7px;
}

.aero-eyebrow {
    margin-bottom: .22rem;
    color: #71a1c2;
    font-size: .58rem;
    font-weight: 700;
}

.aero-section-title {
    color: #f0fbff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.aero-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding-inline: .75rem !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .7rem !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.keys-actions-dropdown {
    position: relative;
    z-index: 50;
}

.keys-actions-menu {
    width: min(340px, calc(100vw - 32px));
    max-height: min(70vh, 570px);
    overflow-x: hidden;
    overflow-y: auto;
}

.aero-table-shell {
    position: relative;
    overflow-x: auto;
    border: 1px solid rgba(75, 168, 232, .15);
    border-radius: 13px;
    background: rgba(2, 10, 22, .3);
}

.aero-table-shell::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(78, 219, 255, .38), transparent);
}

.table thead th,
.table th {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
    color: #99dfff !important;
    background: rgba(20, 75, 126, .13) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
}

.table > tbody > tr > td {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
    margin-inline: 0;
    padding: .45rem .2rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 36px;
    border-color: rgba(84, 194, 249, .25) !important;
    background: rgba(2, 12, 27, .86) !important;
}

.aero-empty-state {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .65rem;
    color: #66869f;
    border: 1px dashed rgba(85, 181, 234, .17);
    border-radius: 13px;
    background: rgba(4, 14, 29, .38);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.aero-empty-state .bi {
    color: #4faede;
    font-size: 1.75rem;
    opacity: .72;
}

.form-control,
.form-select,
textarea {
    min-height: 43px;
    background:
        linear-gradient(180deg, rgba(5, 19, 40, .9), rgba(3, 13, 29, .91)) !important;
    border-color: rgba(83, 181, 241, .23) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    box-shadow: 0 0 0 .18rem rgba(41, 160, 255, .105), 0 0 34px rgba(36, 154, 255, .12) !important;
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.14) 50%, transparent 75%);
    transform: translateX(-55%);
    transition: opacity .2s ease, transform .4s ease;
}

.btn:not(.dropdown-toggle):hover::after {
    opacity: 1;
    transform: translateX(55%);
}

.swal2-popup {
    background:
        radial-gradient(circle at 50% 0%, rgba(50, 151, 255, .12), transparent 36%),
        linear-gradient(160deg, #091b34, #040c1b) !important;
}

.aero-footer {
    z-index: 1040;
}

.aero-footer-state {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #52738e !important;
    font-size: .52rem;
}

@keyframes aeroOrbDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(42px, -28px, 0) scale(1.08); }
}

@keyframes aeroScan {
    from { transform: translateY(-20vh); }
    to { transform: translateY(155vh); }
}

@media (max-width: 991.98px) {
    .aero-brand-name { max-width: 170px; }
    .keys-registry-header::after { display: none; }
}

@media (max-width: 767.98px) {
    .navbar { min-height: 66px; }
    .aero-brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
    .aero-brand-kicker { display: none; }
    .aero-brand-name { max-width: 175px; font-size: .82rem; }
    .navbar-collapse {
        margin-top: .55rem;
        padding: .75rem;
        border: 1px solid rgba(72, 171, 255, .15);
        border-radius: 14px;
        background: rgba(4, 15, 31, .94);
        box-shadow: 0 18px 44px rgba(0,0,0,.24);
    }
    .aero-primary-nav .nav-link { display: flex; }
    .aero-nav-right { align-items: stretch; flex-direction: column; gap: .2rem; }
    .aero-user-toggle { width: 100%; }
    .aero-user-name { max-width: 210px; }
    .navbar .dropdown-menu { width: 100%; margin-top: .35rem; }
    .keys-registry-header { padding: .88rem !important; }
    .keys-registry-body { padding: .75rem !important; }
    .aero-section-icon { width: 38px; height: 38px; }
    .aero-section-title { font-size: .92rem; }
    .aero-action-btn { min-height: 37px; }
    .keys-actions-menu { width: min(320px, calc(100vw - 42px)); }
}

@media (max-width: 575.98px) {
    .aero-footer .container { justify-content: center !important; }
    .aero-footer-state { display: none; }
    .keys-registry-header > .d-flex { align-items: stretch !important; }
    .keys-registry-header > .d-flex > .d-flex:last-child { width: 100%; }
    .keys-actions-dropdown { flex: 1 1 auto; }
    .keys-actions-dropdown > .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .aero-orb,
    .aero-scanline { animation: none !important; }
}