:root {
    --bg: #040b17;
    --bg-soft: #091223;
    --panel: rgba(8, 22, 43, 0.78);
    --panel-strong: rgba(8, 28, 58, 0.92);
    --line: rgba(86, 170, 255, 0.18);
    --line-strong: rgba(86, 170, 255, 0.36);
    --text: #eaf8ff;
    --muted: #7d9cb6;
    --cyan: #31d7ff;
    --blue: #168cff;
    --violet: #a270ff;
    --gold: #ffc857;
    --emerald: #42f0a6;
    --danger: #ff637b;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(49, 215, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(22, 140, 255, 0.16), transparent 24%),
        radial-gradient(circle at 62% 85%, rgba(162, 112, 255, 0.1), transparent 26%),
        linear-gradient(160deg, #02060d 0%, #07111e 38%, #030814 100%);
    color: var(--text);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.ambient,
.grid-overlay,
.scanline {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.ambient-one {
    background: radial-gradient(circle at 50% 0%, rgba(32, 99, 255, 0.16), transparent 45%);
    filter: blur(20px);
}
.ambient-two {
    background: radial-gradient(circle at 0% 100%, rgba(49, 215, 255, 0.12), transparent 35%);
}
.ambient-three {
    background: radial-gradient(circle at 100% 60%, rgba(255, 200, 87, 0.08), transparent 22%);
}
.grid-overlay {
    background-image:
        linear-gradient(rgba(67, 103, 147, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 103, 147, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.08));
}
.scanline {
    background: linear-gradient(transparent 0%, rgba(49, 215, 255, 0.02) 50%, transparent 100%);
    background-size: 100% 6px;
    mix-blend-mode: screen;
    opacity: .18;
}

.app-shell {
    position: relative;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
    z-index: 1;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 20px;
    background: linear-gradient(180deg, rgba(5, 16, 31, 0.92), rgba(5, 13, 25, 0.84));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 24px;
    border: 1px solid rgba(49, 215, 255, 0.18);
    background: linear-gradient(180deg, rgba(14, 36, 66, 0.72), rgba(7, 20, 40, 0.82));
    box-shadow: inset 0 0 20px rgba(49, 215, 255, 0.06);
}
.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle at 30% 30%, rgba(49, 215, 255, .45), rgba(12, 42, 94, .2));
    border: 1px solid rgba(49, 215, 255, .35);
    box-shadow: 0 0 22px rgba(49, 215, 255, .18);
}
.brand-mark.large { width: 74px; height: 74px; }
.brand-mark span {
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(49,215,255,.98), rgba(22,140,255,.6));
}
.brand-mark span:nth-child(1) { width: 26px; height: 3px; transform: rotate(0deg); }
.brand-mark span:nth-child(2) { width: 3px; height: 26px; transform: rotate(0deg); }
.brand-mark span:nth-child(3) { width: 22px; height: 22px; border: 2px solid rgba(49, 215, 255, .9); background: transparent; }
.brand-text strong { display: block; font-size: 1.5rem; }
.brand-text small { color: #69bdf6; letter-spacing: .24em; font-size: .72rem; }

.sidebar-meta-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(104, 162, 255, .16);
    background: linear-gradient(180deg, rgba(10, 26, 50, .72), rgba(5, 15, 28, .72));
}
.meta-dot, .status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #31f3a5; box-shadow: 0 0 16px #31f3a5;
    flex: none; margin-top: 5px;
}
.sidebar-meta-card strong { display:block; font-size:.94rem; }
.sidebar-meta-card small { color: var(--muted); display:block; margin-top: 5px; line-height: 1.45; }

.sidebar-nav { display:flex; flex-direction:column; gap:8px; overflow:auto; padding-right:2px; }
.nav-label {
    padding: 14px 10px 4px;
    font-size: .76rem;
    color: #6ca8d6;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.nav-item {
    display:flex; align-items:center; gap:12px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #cfeaff;
    border: 1px solid transparent;
    transition: .25s ease;
}
.nav-item:hover {
    transform: translateX(3px);
    background: rgba(17, 42, 78, .45);
    border-color: rgba(49, 215, 255, .16);
}
.nav-item.active {
    background: linear-gradient(180deg, rgba(18, 63, 131, .5), rgba(10, 30, 60, .88));
    border-color: rgba(49, 215, 255, .38);
    box-shadow: inset 0 0 18px rgba(49,215,255,.12), 0 0 24px rgba(22,140,255,.1);
}
.nav-icon {
    width: 40px; height: 40px;
    display:grid; place-items:center;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(18, 43, 80, 0.88), rgba(9, 19, 37, 0.92));
    border: 1px solid rgba(49, 215, 255, .18);
    color: #7ed7ff; font-weight: 700;
    flex: none;
}
.nav-item.active .nav-icon { box-shadow: 0 0 20px rgba(49,215,255,.22); }

.sidebar-footer {
    margin-top: auto;
    padding: 18px 16px;
    border-radius: 20px;
    border: 1px solid rgba(49, 215, 255, .16);
    background: linear-gradient(180deg, rgba(11, 31, 58, .88), rgba(5, 16, 30, .88));
    box-shadow: inset 0 0 20px rgba(49,215,255,.06);
}
.system-status { display:flex; align-items:center; gap:10px; color: #cce7ff; font-size:.95rem; }
.digital-clock {
    margin-top: 14px;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: #4cd6ff;
    text-shadow: 0 0 18px rgba(76, 214, 255, .25);
}
#digitalDate { display:block; color: var(--muted); margin-top: 6px; }

.workspace { min-width: 0; display:flex; flex-direction:column; }
.topbar {
    position: sticky; top: 0; z-index: 15;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    padding: 22px 28px;
    background: linear-gradient(180deg, rgba(4, 10, 21, .92), rgba(4, 10, 21, .76));
    border-bottom: 1px solid rgba(69, 127, 194, .18);
    backdrop-filter: blur(22px);
}
.topbar-main { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.topbar-main h2 { margin: 4px 0 0; font-size: 2rem; }
.eyebrow {
    margin: 0;
    font-size: .78rem;
    color: #59b7f2;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.topbar-indicators { display:flex; gap:10px; flex-wrap:wrap; }
.indicator-chip, .role-chip, .scope-badge, .live-chip, .chart-badge, .pending-chip, .secure-badge {
    display:inline-flex; align-items:center; gap:10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(73, 165, 230, .24);
    background: rgba(9, 24, 45, .76);
    color: #d8f2ff;
    font-size: .86rem;
}
.indicator-chip i {
    width: 8px; height: 8px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.topbar-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.role-chip { background: linear-gradient(180deg, rgba(18, 73, 158, .45), rgba(11, 28, 59, .9)); }
.user-chip {
    display:flex; align-items:center; gap:12px;
    padding: 10px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(13, 36, 67, .9), rgba(9, 19, 39, .9));
    border: 1px solid rgba(73, 165, 230, .24);
}
.avatar {
    width: 40px; height: 40px; border-radius: 14px;
    display:grid; place-items:center; flex:none;
    background: linear-gradient(180deg, rgba(31, 131, 255, .8), rgba(17, 75, 181, .95));
    color: white; font-weight: 800;
    box-shadow: 0 0 18px rgba(22, 140, 255, .24);
}
.large-avatar { width: 58px; height: 58px; border-radius: 18px; font-size: 1.4rem; }
.user-chip small { color: var(--muted); display:block; margin-top: 3px; }
.logout-button, .primary-button, .ghost-button {
    border: 0; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    transition: .22s ease;
}
.logout-button {
    padding: 12px 18px;
    border-radius: 16px;
    color: #ffdbe1;
    background: linear-gradient(180deg, rgba(65, 18, 34, .72), rgba(43, 12, 25, .9));
    border: 1px solid rgba(255,99,123,.22);
}
.logout-button:hover { transform: translateY(-2px); }

.page-content { padding: 28px; display:flex; flex-direction:column; gap:22px; }
.page-heading, .panel, .metric-card, .hero-panel {
    position: relative;
    overflow: hidden;
}
.panel, .hero-panel {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(78, 133, 214, 0.16);
    background: linear-gradient(180deg, rgba(8, 22, 43, 0.92), rgba(5, 14, 28, 0.92));
    box-shadow: var(--shadow), inset 0 0 30px rgba(49, 215, 255, 0.04);
}
.panel::before, .metric-card::before, .hero-panel::before {
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at top right, rgba(49,215,255,.08), transparent 28%);
    pointer-events:none;
}
.panel { padding: 24px; }
.page-heading {
    display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
}
.page-heading h1, .personal-hero h1 { margin: 6px 0 8px; font-size: 3rem; }
.page-heading p:last-child { margin: 0; color: var(--muted); }
.primary-button {
    padding: 14px 20px;
    color: white;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(31, 129, 255, 1), rgba(28, 87, 228, 1));
    box-shadow: 0 12px 32px rgba(22, 140, 255, .22);
}
.primary-button:hover, .ghost-button:hover { transform: translateY(-2px); }
.ghost-button {
    padding: 14px 20px;
    border-radius: 18px;
    color: #cceaff;
    background: rgba(11, 28, 54, .72);
    border: 1px solid rgba(73, 165, 230, .22);
}
.full-width { width: 100%; }
.submit-glow { box-shadow: 0 14px 34px rgba(49, 215, 255, .16); }
.text-link, .control-link { color: #6dd1ff; font-weight: 600; }

.personal-hero {
    display:grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
    gap: 22px;
    padding: 28px;
    background:
      radial-gradient(circle at 18% 15%, rgba(49,215,255,.10), transparent 25%),
      linear-gradient(135deg, rgba(7, 18, 35, .98), rgba(8, 25, 50, .92));
}
.hero-copy-block h1 { margin: 8px 0 12px; font-size: 3.15rem; }
.hero-description { color: var(--muted); max-width: 780px; line-height: 1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px; }
.hero-mini-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.hero-mini-tags span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(7, 20, 42, .8);
    border: 1px solid rgba(73, 165, 230, .16);
    color: #9bcaed;
    font-size: .84rem;
}
.identity-card {
    border-radius: 26px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(10, 28, 51, .9), rgba(7, 19, 36, .92));
    border: 1px solid rgba(77, 131, 203, .2);
    box-shadow: inset 0 0 24px rgba(49, 215, 255, .04);
}
.identity-head { display:flex; gap:14px; align-items:center; margin-bottom: 18px; }
.identity-head h3 { margin:0 0 4px; font-size:1.4rem; }
.identity-head p { margin:0; color: var(--muted); }
.identity-grid {
    display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px;
}
.identity-grid > div, .hero-scoreboard > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(7, 20, 40, .82);
    border: 1px solid rgba(73,165,230,.12);
}
.identity-grid span, .hero-scoreboard span, .overview-stat-list span, .trend-foot-grid span, .globe-stats span,
.form-tip, .field-error, .country-row small, .activity-item small { color: var(--muted); }
.identity-grid strong, .hero-scoreboard strong, .trend-foot-grid strong, .overview-stat-list strong { display:block; margin-top: 8px; font-size: 1.15rem; }
.hero-scoreboard { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin-top: 12px; }

.metric-grid { display:grid; gap:18px; }
.metric-grid.five-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-grid.six-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid.compact .metric-card { min-height: 154px; }
.metric-card {
    min-height: 165px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(78, 133, 214, .16);
    background: linear-gradient(180deg, rgba(8, 22, 43, .92), rgba(5, 14, 28, .92));
    box-shadow: var(--shadow);
}
.metric-card:hover { transform: translateY(-4px); }
.metric-card p { margin: 0; color: #c7def0; }
.metric-card strong {
    display:block; margin: 18px 0 10px;
    font-size: 2.25rem; line-height: 1.05;
    letter-spacing: -.02em;
}
.metric-card small { color: var(--muted); }
.metric-icon {
    width: 56px; height: 56px; display:grid; place-items:center;
    border-radius: 18px; margin-bottom: 12px;
    font-size: 1.35rem; font-weight: 700;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 24px rgba(255,255,255,.04), 0 0 24px rgba(49,215,255,.06);
}
.metric-card.blue .metric-icon { color: #58b6ff; background: rgba(22, 140, 255, .12); }
.metric-card.cyan .metric-icon { color: #53efff; background: rgba(49, 215, 255, .10); }
.metric-card.violet .metric-icon { color: #bc8fff; background: rgba(162, 112, 255, .10); }
.metric-card.gold .metric-icon { color: #ffc85e; background: rgba(255, 200, 87, .10); }
.metric-card.emerald .metric-icon { color: #4be8a2; background: rgba(66, 240, 166, .10); }
.metric-card.blue { background-image: linear-gradient(180deg, rgba(5, 26, 56, .96), rgba(5, 18, 33, .94)); }
.metric-card.cyan { background-image: linear-gradient(180deg, rgba(7, 28, 52, .96), rgba(4, 18, 33, .94)); }
.metric-card.violet { background-image: linear-gradient(180deg, rgba(14, 24, 60, .94), rgba(6, 17, 37, .94)); }
.metric-card.gold { background-image: linear-gradient(180deg, rgba(36, 30, 17, .92), rgba(12, 15, 25, .95)); }
.metric-card.emerald { background-image: linear-gradient(180deg, rgba(7, 30, 31, .94), rgba(4, 17, 29, .95)); }

.home-dual-grid, .dashboard-grid, .form-layout {
    display:grid; gap:18px;
}
.home-dual-grid { grid-template-columns: minmax(0, 1.38fr) minmax(340px, .92fr); }
.dashboard-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.dashboard-grid.two-panels { grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr); }
.form-layout { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); }

.panel-heading, .control-panel-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 18px; flex-wrap:wrap;
}
.panel-heading h3, .control-panel-heading h3 { margin:6px 0 0; font-size: 1.6rem; }
.canvas-shell {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 24px;
    border: 1px solid rgba(73,165,230,.12);
    background: linear-gradient(180deg, rgba(7, 20, 39, .76), rgba(6, 17, 31, .92));
}
.canvas-shell canvas { width:100%; height:100%; display:block; }
.large-shell { height: 320px; }
.chart-badge, .chart-unit { color:#9dd8ff; }
.trend-foot-grid, .overview-stat-list, .globe-stats {
    display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px;
}
.trend-foot-grid > div, .overview-stat-list > div, .globe-stats > div {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(5, 17, 35, .8);
    border: 1px solid rgba(73,165,230,.12);
}

.finance-globe-wrap {
    position: relative;
    height: 320px;
    display:grid; place-items:center;
    overflow:hidden;
}
.finance-globe {
    width: 210px; height: 210px; border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 32% 30%, rgba(61, 168, 255, .92), rgba(5, 35, 82, .75) 48%, rgba(3, 12, 28, .95) 100%);
    box-shadow: 0 0 42px rgba(49, 215, 255, .2), inset -18px -28px 55px rgba(0,0,0,.45);
}
.advanced-globe .finance-globe { width: 235px; height: 235px; }
.globe-line {
    position:absolute; inset: 14px; border-radius:50%; border:1px solid rgba(140, 211, 255, .18);
}
.globe-line.line-a { transform: rotate(0deg) scaleX(.58); }
.globe-line.line-b { transform: rotate(55deg) scaleX(.62); }
.globe-line.line-c { transform: rotate(-55deg) scaleX(.62); }
.orbit {
    position:absolute; inset: 32px; border:1px solid rgba(255, 196, 95, .28); border-radius:50%;
    animation: orbit-spin 16s linear infinite;
}
.orbit-a { transform: rotate(18deg) scaleX(1.25) scaleY(.66); }
.orbit-b { transform: rotate(-28deg) scaleX(1.08) scaleY(.88); animation-duration: 20s; }
.orbit-c { transform: rotate(68deg) scaleX(.82) scaleY(1.18); animation-duration: 24s; }
.orbit span {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    width: 34px; height:34px; border-radius:50%; display:grid; place-items:center;
    background: rgba(32, 27, 13, .95); color: #ffc85e; font-weight: 700;
    border: 1px solid rgba(255,200,87,.36); box-shadow: 0 0 18px rgba(255,200,87,.24);
}
@keyframes orbit-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

.country-list, .activity-list {
    display:flex; flex-direction:column; gap:12px;
}
.country-row, .activity-item {
    display:grid; align-items:center; gap:12px;
    grid-template-columns: auto 1fr auto;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(73,165,230,.1);
    background: rgba(7, 19, 38, .72);
}
.country-flag { font-size: 1.4rem; }
.country-row strong, .activity-item strong { display:block; margin-bottom:4px; }
.activity-amount { text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.empty-state, .empty-cell, .control-empty {
    color: #7fa2bf;
    text-align:center;
    padding: 22px 14px;
}

.table-scroll { overflow:auto; }
.fin-table {
    width: 100%; border-collapse: collapse; min-width: 820px;
}
.fin-table th, .fin-table td {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(77, 132, 204, .12);
    text-align: left;
}
.fin-table th {
    color: #75b6e7;
    font-size: .86rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fin-table tbody tr:hover { background: rgba(12, 30, 57, .52); }
.positive-number { color: #3ce8a0; }
.negative-number { color: #ff7d93; }
.status-pill {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 82px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .82rem;
    border: 1px solid rgba(255,255,255,.08);
}
.status-completed { background: rgba(66, 240, 166, .13); color: #5ef0ae; }
.status-pending, .status-processing { background: rgba(22, 140, 255, .13); color: #67c9ff; }
.status-rejected, .status-refunded, .status-abnormal { background: rgba(255, 99, 123, .13); color: #ff8b9d; }

.auth-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.auth-shell {
    width: min(1260px, 100%);
    display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    gap: 22px;
}
.auth-visual, .auth-panel {
    border-radius: 32px;
    border: 1px solid rgba(84, 148, 223, .18);
    background: linear-gradient(180deg, rgba(8, 20, 40, .92), rgba(5, 13, 26, .96));
    box-shadow: var(--shadow);
}
.auth-visual { padding: 34px; position:relative; overflow:hidden; }
.auth-brand { display:flex; align-items:center; gap:18px; }
.auth-brand strong { display:block; font-size:2rem; }
.auth-brand small { color:#7ec4f4; letter-spacing:.2em; }
.auth-copy { margin-top: 42px; max-width: 520px; }
.auth-copy h1 { margin:10px 0 16px; font-size:3.4rem; line-height:1.08; }
.auth-copy p:last-child { color: var(--muted); line-height:1.75; }
.login-orbit { position: relative; height: 260px; margin-top: 26px; display:grid; place-items:center; }
.orbit-ring { position:absolute; border:1px solid rgba(255,200,87,.18); border-radius:50%; }
.ring-one { width:220px; height:220px; transform:rotate(16deg) scaleX(1.2) scaleY(.62); animation:orbit-spin 14s linear infinite; }
.ring-two { width:200px; height:200px; transform:rotate(-42deg) scaleX(.78) scaleY(1.14); animation:orbit-spin 18s linear infinite reverse; }
.ring-three { width:170px; height:170px; transform:rotate(84deg) scaleX(1.05) scaleY(.8); animation:orbit-spin 12s linear infinite; }
.core-sphere { width:120px; height:120px; border-radius:50%; background: radial-gradient(circle at 32% 28%, #4fcfff, #155fd3 54%, #07142d 100%); box-shadow: 0 0 36px rgba(49, 215, 255, .24); }
.data-node { position:absolute; width:16px; height:16px; border-radius:50%; background:#ffc857; box-shadow:0 0 18px rgba(255,200,87,.24); }
.node-one { top:54px; right:32%; }
.node-two { left:24%; bottom:88px; }
.node-three { right:26%; bottom:76px; }
.security-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top: 34px; }
.security-row > div { padding:16px; border-radius:18px; background: rgba(6, 18, 34, .76); border: 1px solid rgba(73,165,230,.12); }
.security-row strong { display:block; font-size:1.4rem; }
.security-row span { color: var(--muted); display:block; margin-top:6px; }
.auth-panel { display:grid; place-items:center; padding: 22px; }
.login-card { width:min(460px,100%); }
.login-heading h2 { margin:8px 0; font-size:2rem; }
.login-heading p:last-child { color: var(--muted); }
.field-label { display:block; margin: 18px 0 8px; color:#bed9ef; }
.input-wrap {
    position:relative; display:flex; align-items:center;
    border-radius: 18px; border:1px solid rgba(73,165,230,.18); background: rgba(8, 20, 40, .88);
    overflow:hidden;
}
.input-prefix { width:54px; display:grid; place-items:center; color:#73d8ff; }
.input-wrap input {
    flex:1; min-width:0; background: transparent; border:0; color: var(--text);
    padding: 16px 14px 16px 0; outline:none;
}
.password-toggle {
    border:0; background:transparent; color:#76cfff; padding:0 16px; cursor:pointer;
}
.form-alert {
    margin-top:14px; padding:14px 16px; border-radius:16px; background: rgba(255,99,123,.12); color:#ffd2db; border:1px solid rgba(255,99,123,.18);
}
.login-footnote { display:flex; align-items:center; gap:8px; margin-top:18px; color: var(--muted); }

.form-grid {
    display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px;
}
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { color:#d7ecff; }
.form-field em { color:#7bd8ff; font-style:normal; }
.form-field input, .form-field select, .form-field textarea {
    width:100%;
    border-radius: 16px; border:1px solid rgba(73,165,230,.18);
    background: rgba(8,20,40,.88); color: var(--text);
    padding: 14px 16px; outline:none;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.full-span { grid-column: 1 / -1; }
.identity-banner, .calculation-strip {
    display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:14px;
    padding:16px 18px; border-radius: 22px; border:1px solid rgba(73,165,230,.14); background: rgba(6,18,34,.72); margin-bottom: 18px;
}
.calculation-strip {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
}
.form-tip { margin-top: 16px; line-height: 1.7; }

.message-stack { display:flex; flex-direction:column; gap:10px; }
.message-card {
    padding:14px 16px; border-radius:18px; border:1px solid rgba(73,165,230,.16); background: rgba(8,20,40,.78);
}
.message-card.success { border-color: rgba(66,240,166,.22); color:#cafbe4; }
.message-card.error { border-color: rgba(255,99,123,.22); color:#ffd2db; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(85, 146, 213, .35); border-radius: 999px; }
::-webkit-scrollbar-track { background: rgba(5, 13, 25, .55); }

@media (max-width: 1440px) {
    .metric-grid.six-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-dual-grid, .dashboard-grid, .dashboard-grid.two-panels { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .topbar { position: relative; }
    .auth-shell, .personal-hero, .form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .page-content, .topbar { padding: 18px; }
    .metric-grid.five-columns, .metric-grid.three-columns, .metric-grid.six-columns,
    .security-row, .trend-foot-grid, .overview-stat-list, .globe-stats, .identity-grid, .hero-scoreboard,
    .form-grid, .calculation-strip { grid-template-columns: 1fr; }
    .metric-card strong { font-size: 1.8rem; }
    .topbar-main h2 { font-size: 1.5rem; }
    .page-heading h1, .personal-hero h1, .auth-copy h1 { font-size: 2.2rem; }
}