:root {
    --bg: #e8ecf1;
    --bg-elev: #ffffff;
    --navy: #0b1f3a;
    --navy-2: #071428;
    --navy-3: #143056;
    --gold: #c9a227;
    --gold-2: #e6c35c;
    --cyan: #c9a227;
    --cyan-dim: rgba(201, 162, 39, 0.16);
    --magenta: #8b1a1a;
    --lime: #1e4d2b;
    --text: #122033;
    --muted: #5c6b7a;
    --danger: #8b1a1a;
    --line: #d5dbe3;
    --font-display: "Cinzel", "Times New Roman", serif;
    --font-mono: "Source Sans 3", "Segoe UI", sans-serif;
    --shadow: 0 8px 24px rgba(7, 20, 40, 0.12);
}

body.cyber-body {
    background:
        linear-gradient(180deg, #0b1f3a 0 8px, transparent 8px),
        linear-gradient(90deg, #8b1a1a 0, #8b1a1a 34%, #ffffff 34%, #ffffff 66%, #c9a227 66%) 0 8px / 100% 4px no-repeat,
        var(--bg);
    color: var(--text);
}

.macaw {
    width: 88px;
    height: 88px;
    animation: none;
    filter: drop-shadow(0 6px 10px rgba(7, 20, 40, .35));
}
.macaw-sm {
    width: 42px;
    height: 42px;
}

.panel {
    border: 1px solid #c9a227;
    border-radius: 4px;
    box-shadow: 0 16px 40px rgba(7, 20, 40, .22);
    overflow: hidden;
}

.brand {
    background:
        radial-gradient(circle at 20% 0%, rgba(201, 162, 39, .18), transparent 46%),
        linear-gradient(180deg, #12284a 0%, #071428 100%);
    color: #f4ead0;
    border-right: 3px solid #c9a227;
}
.brand h1,
.glitch {
    color: #f8f1dc !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}
.kicker {
    color: #e6c35c !important;
    letter-spacing: .22em !important;
    font-weight: 700;
}
.form-side {
    background: #ffffff;
}
.form-head h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #0b1f3a;
}
.row-between span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.btn-access,
.btn-mint {
    border: 1px solid #e6c35c !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #1a3a66, #0b1f3a) !important;
    color: #f8f1dc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    letter-spacing: .14em !important;
    text-transform: uppercase;
}
.btn-access:hover,
.btn-mint:hover {
    background: linear-gradient(180deg, #c9a227, #8b6914) !important;
    color: #071428 !important;
    transform: none;
    box-shadow: none;
}

.admin-top,
.topbar,
.footerbar {
    background: linear-gradient(180deg, #12284a, #071428) !important;
    border-color: #c9a227 !important;
    color: #d7cda8 !important;
}
.admin-top {
    border-bottom: 3px solid #c9a227 !important;
}
.admin-brand strong {
    font-family: var(--font-display);
    color: #f8f1dc !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.admin-brand small {
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #e6c35c !important;
}
.admin-meta,
.admin-user summary,
.topbar,
.footerbar {
    color: #d7cda8 !important;
}
.user-menu summary {
    color: #f8f1dc !important;
}

.wallet-chip {
    background: #0b1f3a !important;
    border: 1px solid #c9a227 !important;
    border-radius: 3px !important;
}
.wallet-chip span {
    color: #e6c35c !important;
}
.wallet-chip strong {
    color: #f8f1dc !important;
    font-weight: 700;
}
.wallet-chip.is-live {
    background: #10283f !important;
    border-color: #e6c35c !important;
}

.admin-nav {
    background: #071428 !important;
    border-bottom: 1px solid #c9a227 !important;
}
.admin-nav a,
.admin-nav span,
.nav-drop > summary {
    color: #c5d0dc !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 0.72rem !important;
    font-weight: 700;
}
.admin-nav a.is-active,
.admin-nav a:hover,
.nav-drop[open] > summary,
.nav-drop.is-active > summary,
.nav-drop > summary:hover {
    color: #e6c35c !important;
    box-shadow: inset 0 -3px 0 #c9a227 !important;
}
.nav-drop-panel {
    border: 1px solid #c9a227 !important;
    border-radius: 3px !important;
    box-shadow: 0 12px 28px rgba(7, 20, 40, .35) !important;
    background: #0b1f3a !important;
}
.nav-drop-panel a {
    color: #e8eef4 !important;
}
.nav-drop-panel a:hover,
.nav-drop-panel a.is-active {
    color: #e6c35c !important;
    background: rgba(201, 162, 39, .08);
}

.kpi-card,
.sum-card,
.watch-card,
.agent-card,
.info-card,
.table-wrap,
.date-panel,
.nexus-card {
    border: 1px solid #c9d3de !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 16px rgba(7, 20, 40, .06) !important;
    background: #fff !important;
}

.data-table th {
    background: #0b1f3a !important;
    color: #e6c35c !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.btn-approve {
    border-radius: 3px;
    background: #e8f3ea !important;
    color: #1e4d2b !important;
    border-color: #9bb89f !important;
}
.btn-reject {
    border-radius: 3px;
}
.icon-btn {
    border-radius: 3px;
    border-color: #c9a227;
    background: #fff;
    color: #0b1f3a;
}

.slide-panel,
.slide-head {
    background: #f7f4ea !important;
    border-color: #c9a227;
}

.flash-ok {
    border-radius: 3px;
    background: #e8f3ea !important;
    color: #1e4d2b !important;
    border-color: #9bb89f !important;
}
.flash-bad {
    border-radius: 3px;
}

.agent-avatar {
    background: linear-gradient(180deg, #c9a227, #8b6914) !important;
    color: #071428 !important;
    border-radius: 3px !important;
}

.welcome {
    color: #5c6b7a;
    line-height: 1.5;
}

.info-card .welcome,
.card-note {
    overflow-wrap: anywhere;
}

.page-head h1,
.dash-toolbar h1 {
    font-family: var(--font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0b1f3a;
}

.user-menu-panel {
    border: 1px solid #c9a227 !important;
    border-radius: 3px !important;
    background: #0b1f3a !important;
}
.user-menu-panel p {
    color: #d7cda8 !important;
}
.user-menu-panel button {
    border-color: #c9a227 !important;
    color: #f8f1dc !important;
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.input-wrap input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.tabs a.is-active {
    color: #0b1f3a;
    box-shadow: inset 0 -2px 0 #c9a227;
}

.switch.is-on {
    background: #c9a227 !important;
    border-color: #8b6914 !important;
}
.switch.is-on::after {
    background: #0b1f3a !important;
}
