:root {
    --bg: #070b10;
    --bg-soft: #0b1118;
    --surface: #0d151d;
    --surface-2: #101c26;
    --surface-3: #15232f;
    --line: #233643;
    --line-soft: rgba(114, 168, 188, .17);
    --text: #e7f4f7;
    --muted: #7f9aa5;
    --cyan: #44e6ff;
    --cyan-2: #17b7d2;
    --green: #6dffb2;
    --amber: #ffca66;
    --danger: #ff6f78;
    --sidebar: 300px;
    --header: 112px;
    --radius: 14px;
    --shadow: 0 18px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 66% 12%, rgba(28, 187, 215, .09), transparent 30%),
        linear-gradient(rgba(68, 230, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 230, 255, .025) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.eyebrow {
    display: inline-flex;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.brand-kicker, .brand-sub { font-size: .62rem; letter-spacing: .22em; color: #718e99; font-weight: 800; }
.brand-main { margin: 5px 0 4px; font-weight: 950; font-style: italic; letter-spacing: -.05em; font-size: 2rem; text-shadow: 0 0 28px rgba(68,230,255,.18); }
.brand-main span { color: var(--cyan); }

/* AUTH */
.auth-body { min-height: 100vh; overflow-x: hidden; }
.auth-grid-bg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 24% 40%, rgba(68,230,255,.1), transparent 30%); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(420px, .9fr); position: relative; }
.auth-brand-panel { border-right: 1px solid var(--line-soft); padding: clamp(40px, 6vw, 90px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; background: linear-gradient(135deg, rgba(15,27,36,.88), rgba(4,9,13,.46)); }
.brand-large { align-items: flex-start; }
.brand-large .brand-main { font-size: clamp(2.6rem, 5vw, 5.3rem); }
.auth-intro { max-width: 640px; }
.auth-intro h2 { margin: 12px 0 14px; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
.auth-intro p { max-width: 560px; color: var(--muted); line-height: 1.8; font-size: 1.02rem; }
.auth-network-state { color: #8fa9b2; font-size: .82rem; display: flex; align-items: center; gap: 9px; letter-spacing: .05em; text-transform: uppercase; }
.auth-network-state i, .status-pulse, .tiny-dot, .live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(109,255,178,.85); flex: 0 0 auto; }
.auth-network-state span { color: var(--text); font-weight: 900; }
.auth-card { align-self: center; justify-self: center; width: min(460px, calc(100% - 48px)); border: 1px solid var(--line); border-radius: 18px; background: rgba(11,17,24,.94); box-shadow: var(--shadow); padding: 38px; position: relative; }
.auth-card::before { content: ""; position: absolute; top: -1px; left: 32px; width: 80px; height: 2px; background: var(--cyan); box-shadow: 0 0 18px rgba(68,230,255,.5); }
.auth-card h1 { font-size: 2rem; margin: 10px 0 8px; letter-spacing: -.035em; }
.muted { color: var(--muted); line-height: 1.65; }
.auth-form { display: grid; gap: 16px; margin-top: 26px; }
.auth-form label { display: grid; gap: 7px; }
.auth-form label > span { font-size: .76rem; color: #9db1b9; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-form input { height: 48px; padding: 0 14px; border: 1px solid #263a47; border-radius: 9px; background: #081016; color: var(--text); outline: none; transition: .2s ease; }
.auth-form input:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 3px rgba(68,230,255,.08); }
.primary-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(68,230,255,.52); border-radius: 9px; background: linear-gradient(180deg, #173541, #102630); color: #e9fbff; padding: 0 17px; font-weight: 900; letter-spacing: .025em; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 26px rgba(68,230,255,.06); }
.primary-btn:hover { border-color: var(--cyan); background: linear-gradient(180deg, #1b4654, #12313d); }
.primary-btn.full { width: 100%; margin-top: 4px; }
.auth-switch { margin: 24px 0 0; color: var(--muted); font-size: .9rem; text-align: center; }
.auth-switch a { color: var(--cyan); font-weight: 800; }
.alert { padding: 11px 13px; margin: 15px 0 0; border-radius: 8px; font-size: .88rem; border: 1px solid; }
.alert.error { color: #ffc5c9; background: rgba(255,111,120,.08); border-color: rgba(255,111,120,.3); }
.alert.success { color: #bfffdc; background: rgba(109,255,178,.08); border-color: rgba(109,255,178,.28); }
.single-card { margin: auto; }

/* GAME FRAME */
.game-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: var(--header) minmax(0, 1fr); }
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 40; height: var(--header); display: grid; grid-template-columns: var(--sidebar) 150px minmax(280px, 1fr) 290px; align-items: center; border-bottom: 1px solid #233946; background: rgba(7,12,17,.96); box-shadow: 0 12px 40px rgba(0,0,0,.27); backdrop-filter: blur(12px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(68,230,255,.65), transparent); opacity: .45; }

/* Classic browser-game player HUD: portrait, level and stacked currencies in one compact block. */
.player-hud {
    min-width: 0;
    height: 100%;
    padding: 8px 43px 8px 10px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    position: relative;
    border-right: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(10,24,32,.96), rgba(6,14,20,.96));
    box-shadow: inset -1px 0 rgba(255,255,255,.015);
}
.player-portrait-mini {
    width: 64px;
    height: 64px;
    border: 1px solid #31596b;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 34%, rgba(68,230,255,.14), transparent 44%), #081219;
    position: relative;
    display: grid;
    place-items: center;
    overflow: visible;
    box-shadow: inset 0 0 24px rgba(68,230,255,.04), 0 0 22px rgba(0,0,0,.28);
}
.player-portrait-mini::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(68,230,255,.14);
    border-radius: 7px;
    pointer-events: none;
}
.player-portrait-mini > i {
    position: relative;
    z-index: 2;
    color: #dffaff;
    font-size: 1.85rem;
    text-shadow: 0 0 22px rgba(68,230,255,.32);
}
.player-portrait-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: .35;
    background:
        linear-gradient(rgba(68,230,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68,230,255,.07) 1px, transparent 1px);
    background-size: 11px 11px;
}
.player-level-badge {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    min-width: 42px;
    height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #487184;
    border-radius: 5px;
    background: #071119;
    color: #f2fbfd;
    font-size: .68rem;
    font-weight: 950;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.player-level-badge small { color: #6d8994; font-size: .48rem; letter-spacing: .06em; }
.player-hud-data { min-width: 0; display: grid; gap: 3px; }
.player-hud-name { min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.player-hud-name strong { overflow: hidden; text-overflow: ellipsis; color: var(--cyan); font-size: .68rem; line-height: 1; text-transform: uppercase; letter-spacing: .07em; }
.player-hud-name span { overflow: hidden; text-overflow: ellipsis; color: #5f7b86; font-size: .57rem; }
.hud-resource-row { min-width: 0; display: grid; grid-template-columns: 22px auto minmax(0,1fr); align-items: center; gap: 6px; white-space: nowrap; }
.hud-resource-icon { width: 20px; height: 20px; display: grid; place-items: center; font-size: .65rem; }
.hud-resource-icon.credits { color: #ffd66f; }
.hud-resource-icon.shards { color: #54e8ff; }
.hud-resource-row strong { color: #f4fbfd; font-size: .82rem; font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.hud-resource-row small { overflow: hidden; text-overflow: ellipsis; color: #718994; font-size: .52rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.hud-resource-add {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #416274;
    border-radius: 7px;
    color: var(--cyan);
    background: linear-gradient(180deg, #102833, #091820);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 18px rgba(68,230,255,.05);
    font-size: .7rem;
}
.hud-resource-add:hover { border-color: var(--cyan); color: #fff; background: #12313d; }
.player-hud.character-spammer .player-portrait-mini { border-color: #8d5a44; background: radial-gradient(circle at 50% 34%, rgba(255,147,90,.18), transparent 44%), #12100f; }
.player-hud.character-spammer .player-portrait-mini > i { color: #ffba8e; text-shadow: 0 0 22px rgba(255,131,77,.35); }
.player-hud.character-defender .player-portrait-mini > i { color: #7db8ff; }
.player-hud.character-ghost .player-portrait-mini > i { color: #ba9cff; }
.player-hud.character-engineer .player-portrait-mini > i { color: #ffc56e; }
.player-hud.character-botmaster .player-portrait-mini > i { color: #8dffbf; }
.player-hud.character-unset .player-portrait-mini > i { color: #819ca6; }

.header-actions { display: flex; gap: 8px; padding-left: 22px; }
.header-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #263b47; border-radius: 9px; background: #0b151c; color: #9cb4be; cursor: pointer; font-size: 1rem; }
.header-icon-btn:hover { color: var(--cyan); border-color: #3b6878; }
.header-brand { justify-self: center; }
.header-brand .brand-main { font-size: 2.1rem; }
.server-cluster { justify-self: stretch; align-self: stretch; padding: 0 26px; border-left: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.server-time { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.server-time span { color: #78939d; font-size: .74rem; }
.server-time strong { font-variant-numeric: tabular-nums; letter-spacing: .09em; font-size: .9rem; }
.status-pulse { animation: statusPulse 1.7s infinite; }
.server-status-pulse { width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(109,255,178,.08), 0 0 18px rgba(109,255,178,.8); }
@keyframes statusPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .38; transform: scale(.72); box-shadow: 0 0 0 7px rgba(109,255,178,.04), 0 0 28px rgba(109,255,178,1); } }
.mobile-menu-btn { display: none; }

.sidebar { grid-column: 1; grid-row: 2; position: sticky; top: var(--header); height: calc(100vh - var(--header)); z-index: 30; border-right: 1px solid #223642; background: linear-gradient(180deg, #0a1219, #070c11); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-accent { width: 46px; height: 2px; margin: 14px auto 4px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 18px rgba(68,230,255,.48); opacity: .8; flex: 0 0 auto; }
.main-nav { padding: 4px 10px 12px; overflow-y: auto; display: grid; align-content: start; gap: 8px; scrollbar-width: thin; }
.nav-group { display: grid; gap: 3px; }
.nav-group + .nav-group { padding-top: 2px; }
.nav-group-title { padding: 0 10px 3px; color: #4f717e; font-size: .57rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.nav-group-entries { display: grid; gap: 3px; }
.nav-entry { min-height: 44px; padding: 5px 9px; display: grid; grid-template-columns: 32px minmax(0,1fr) 16px; gap: 8px; align-items: center; border: 1px solid transparent; border-radius: 8px; color: #8ca5af; position: relative; transition: .18s ease; }
.nav-entry:hover { background: #0f1c24; color: #dff8ff; border-color: rgba(72,117,133,.25); }
.nav-entry.active { background: linear-gradient(90deg, rgba(19,77,93,.58), rgba(12,28,36,.86)); border-color: #315769; color: #ebfbff; box-shadow: inset 3px 0 var(--cyan), 0 0 22px rgba(68,230,255,.035); }
.nav-entry-icon { width: 29px; height: 29px; display: grid; place-items: center; color: #5f8492; font-size: .88rem; }
.nav-entry.active .nav-entry-icon { color: var(--cyan); }
.nav-entry-copy { display: flex; align-items: center; min-width: 0; }
.nav-entry-copy strong { font-size: .82rem; line-height: 1.2; }
.nav-entry-arrow { display: grid; place-items: center; color: #4b6873; font-size: .58rem; transition: transform .18s ease, color .18s ease; }
.nav-entry:hover .nav-entry-arrow, .nav-entry.active .nav-entry-arrow { color: #6e9bab; transform: translateX(2px); }
.sidebar-system { margin-top: auto; padding: 11px 16px 16px; border-top: 1px solid var(--line-soft); background: rgba(2,7,10,.3); }
.sidebar-version { margin: 0 0 8px; color: #526b75; font-size: .62rem; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.logout-btn { width: 100%; height: 40px; border: 1px solid #354a54; border-radius: 7px; background: transparent; color: #8ca1aa; font-size: .74rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.logout-btn:hover { border-color: #6e3c43; color: #ffc1c5; background: rgba(255,111,120,.05); }

.game-content { grid-column: 2; grid-row: 2; min-width: 0; padding: clamp(22px, 3vw, 38px); background: radial-gradient(circle at 70% 5%, rgba(36,134,158,.07), transparent 32%); }
.floating-alert { max-width: 700px; margin: 0 0 18px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: 1440px; margin: 0 auto 24px; }
.page-head h1 { margin: 6px 0 6px; font-size: clamp(1.9rem, 3vw, 3.2rem); letter-spacing: -.045em; }
.page-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.head-metric { min-width: 160px; padding: 13px 15px; border: 1px solid #263d49; border-radius: 9px; background: #0a1319; }
.head-metric > span { color: #718c97; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; }
.head-metric > strong { display: block; margin: 4px 0 8px; font-size: 1.25rem; }
.mini-progress, .metric-progress { height: 4px; border-radius: 4px; background: #15252e; overflow: hidden; }
.mini-progress i, .metric-progress i { height: 100%; display: block; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); }
.dashboard-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(210px, .65fr) minmax(210px, .65fr); gap: 16px; }
.panel { border: 1px solid #263a46; border-radius: var(--radius); background: linear-gradient(145deg, rgba(16,27,36,.97), rgba(8,15,21,.97)); box-shadow: 0 12px 38px rgba(0,0,0,.18); overflow: hidden; }
.command-panel { min-height: 345px; grid-column: 1 / 2; grid-row: 1 / span 2; position: relative; }
.command-panel::after { content: ""; position: absolute; width: 260px; height: 260px; right: 28px; bottom: -90px; border-radius: 50%; background: rgba(68,230,255,.055); filter: blur(18px); }
.panel-topline, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-topline { padding: 18px 22px 0; }
.panel-tag { color: #6c8994; font-size: .66rem; font-weight: 800; letter-spacing: .12em; }
.live-chip { color: var(--green); font-size: .65rem; font-weight: 900; letter-spacing: .12em; display: flex; gap: 7px; align-items: center; }
.live-chip i { width: 6px; height: 6px; }
.command-content { min-height: 292px; padding: 22px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); gap: 20px; align-items: center; }
.command-copy h2 { margin: 9px 0 12px; font-size: clamp(2rem, 4vw, 4rem); max-width: 700px; line-height: .96; letter-spacing: -.055em; }
.command-copy p { max-width: 620px; color: var(--muted); line-height: 1.72; margin: 0 0 22px; }
.network-orb { width: 230px; aspect-ratio: 1; position: relative; justify-self: center; display: grid; place-items: center; opacity: .9; }
.network-orb i { position: absolute; border-radius: 50%; }
.orb-ring { border: 1px solid rgba(68,230,255,.35); }
.ring-a { inset: 10%; animation: orbit 8s linear infinite; }
.ring-b { inset: 22%; border-style: dashed; animation: orbit 5s linear infinite reverse; }
.ring-c { inset: 36%; box-shadow: 0 0 28px rgba(68,230,255,.12); }
.orb-core { width: 18px; height: 18px; background: var(--cyan); box-shadow: 0 0 35px rgba(68,230,255,.8); }
.orb-axis { width: 78%; height: 1px; background: rgba(68,230,255,.24); transform: rotate(-32deg); border-radius: 0 !important; }
@keyframes orbit { to { transform: rotate(360deg); } }
.metric-card { padding: 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.metric-label { color: #738f9a; font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; }
.metric-card > strong { margin: 8px 0 16px; font-size: 1.8rem; letter-spacing: -.03em; }
.metric-card small { color: #617c87; margin-top: 10px; }
.quick-panel { grid-column: 2 / 4; padding: 20px; }
.panel-heading h3 { margin: 4px 0 0; font-size: 1.15rem; }
.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 16px; }
.quick-grid a { border: 1px solid #223a46; border-radius: 9px; background: #0a151c; min-height: 88px; padding: 13px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.quick-grid a > span { grid-row: 1 / 3; color: var(--cyan); font-size: 1.1rem; }
.quick-grid strong { font-size: .8rem; }
.quick-grid small { color: #607c87; font-size: .65rem; }
.quick-grid a:hover { border-color: #356176; background: #0e1c24; }
.terminal-panel { grid-column: 1 / -1; padding: 20px; }
.terminal-id { color: #607f8b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.terminal-output { margin-top: 16px; padding: 14px 15px; border: 1px solid #1d333d; border-radius: 8px; background: #050c10; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal-output p { margin: 0; padding: 4px 0; color: #78939c; font-size: .76rem; }
.terminal-output time { color: #536e79; margin-right: 10px; }
.terminal-output span { margin-right: 9px; font-weight: 900; }
.terminal-output .ok { color: var(--green); }
.terminal-output .info { color: var(--cyan); }
.module-placeholder { max-width: 1440px; min-height: 430px; margin: 0 auto; padding: clamp(30px, 5vw, 70px); position: relative; display: flex; flex-direction: column; justify-content: center; }
.module-glyph { position: absolute; right: 6%; top: 8%; color: rgba(68,230,255,.05); font-size: 12rem; font-weight: 950; letter-spacing: -.15em; }
.module-placeholder h2 { margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 4rem); }
.module-placeholder p { max-width: 700px; color: var(--muted); line-height: 1.7; }
.code-line { margin-top: 25px; padding: 15px; max-width: 680px; border: 1px solid #203944; border-radius: 8px; background: #050c10; color: #68848e; font: .78rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-line span { color: var(--green); }
.code-line b { color: var(--cyan); animation: blink .8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* OPERATOR CLASS SELECTION */
.character-head {
    max-width: 1440px;
    margin: 0 auto 22px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 26px;
}
.character-head h1 { margin: 7px 0 7px; font-size: clamp(2rem, 3.4vw, 3.5rem); letter-spacing: -.05em; }
.character-head p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.7; }
.class-lock-note { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #364b56; border-radius: 8px; color: #8ca5af; background: #0a1319; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.class-lock-note i { color: var(--amber); }
.character-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.character-card { min-width: 0; min-height: 395px; border: 1px solid #263a46; border-radius: 13px; background: linear-gradient(145deg, rgba(16,27,36,.98), rgba(7,14,20,.98)); overflow: hidden; position: relative; box-shadow: 0 14px 36px rgba(0,0,0,.17); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.character-card:hover { transform: translateY(-2px); border-color: #3b6171; box-shadow: 0 18px 44px rgba(0,0,0,.26); }
.character-card.selected { border-color: rgba(68,230,255,.64); box-shadow: inset 0 0 0 1px rgba(68,230,255,.08), 0 0 30px rgba(68,230,255,.07); }
.character-portrait { height: 160px; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid rgba(92,139,157,.18); background: radial-gradient(circle at 50% 45%, rgba(68,230,255,.18), transparent 36%), linear-gradient(135deg, #0d1d26, #071016); }
.character-portrait::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(68,230,255,.72), transparent); opacity: .75; }
.character-portrait > i { position: relative; z-index: 2; font-size: 4rem; color: #dcfaff; text-shadow: 0 0 30px rgba(68,230,255,.32); }
.portrait-grid { position: absolute; inset: 0; background: linear-gradient(rgba(68,230,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(68,230,255,.045) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.portrait-scan { position: absolute; z-index: 3; left: 9%; right: 9%; top: 32%; height: 1px; background: rgba(68,230,255,.5); box-shadow: 0 0 14px rgba(68,230,255,.46); opacity: .38; }
.character-card-copy { padding: 18px; display: flex; min-height: 235px; flex-direction: column; }
.character-card-topline { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: #63818d; font-size: .61rem; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.character-card-topline strong { color: var(--green); font-size: .6rem; }
.character-card h2 { margin: 7px 0 7px; font-size: 1.55rem; letter-spacing: -.035em; }
.character-card p { margin: 0; color: #8099a3; line-height: 1.58; font-size: .82rem; }
.character-specialty { margin: 16px 0 15px; padding-top: 12px; border-top: 1px solid rgba(109,151,166,.15); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.character-specialty span { color: #5d7a85; font-size: .59rem; text-transform: uppercase; letter-spacing: .09em; }
.character-specialty strong { color: #c7dce2; font-size: .72rem; text-align: right; }
.character-card form { margin-top: auto; }
.class-select-btn { width: 100%; min-height: 42px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #356479; border-radius: 8px; background: linear-gradient(180deg, #13303b, #0c2029); color: #e9fbff; cursor: pointer; font-weight: 900; font-size: .75rem; }
.class-select-btn:hover { border-color: var(--cyan); background: #123744; }
.class-selected-label, .class-disabled-label { min-height: 42px; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-size: .69rem; font-weight: 800; }
.class-selected-label { border: 1px solid rgba(109,255,178,.28); color: #aef7cf; background: rgba(109,255,178,.055); }
.class-disabled-label { border: 1px solid #263841; color: #556f79; background: #091117; }
.character-spammer .character-portrait { background: radial-gradient(circle at 50% 45%, rgba(255,139,75,.21), transparent 36%), linear-gradient(135deg, #221714, #0d0e11); }
.character-spammer .character-portrait > i { color: #ffb485; text-shadow: 0 0 30px rgba(255,132,72,.33); }
.character-defender .character-portrait { background: radial-gradient(circle at 50% 45%, rgba(77,141,255,.2), transparent 36%), linear-gradient(135deg, #101b29, #080e15); }
.character-defender .character-portrait > i { color: #86baff; }
.character-ghost .character-portrait { background: radial-gradient(circle at 50% 45%, rgba(158,106,255,.2), transparent 36%), linear-gradient(135deg, #181329, #090d14); }
.character-ghost .character-portrait > i { color: #c1a1ff; }
.character-engineer .character-portrait { background: radial-gradient(circle at 50% 45%, rgba(255,181,70,.19), transparent 36%), linear-gradient(135deg, #241b10, #0d1013); }
.character-engineer .character-portrait > i { color: #ffca79; }
.character-botmaster .character-portrait { background: radial-gradient(circle at 50% 45%, rgba(84,255,159,.17), transparent 36%), linear-gradient(135deg, #10231b, #091014); }
.character-botmaster .character-portrait > i { color: #8fffc0; }

.drawer-backdrop { position: fixed; inset: var(--header) 0 0 0; z-index: 25; background: rgba(0,0,0,.68); }
body.drawer-open { overflow: hidden; }

@media (max-width: 1100px) {
    :root { --sidebar: 230px; }
    .topbar { grid-template-columns: var(--sidebar) 100px minmax(250px,1fr) 235px; }
    .player-hud { padding-right: 36px; grid-template-columns: 59px minmax(0,1fr); gap: 7px; }
    .player-portrait-mini { width: 56px; height: 56px; }
    .player-hud-name span, .hud-resource-row small { display: none; }
    .hud-resource-add { right: 6px; }
    .header-actions { padding-left: 13px; }
    .server-cluster { padding: 0 15px; }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .command-panel { grid-column: 1 / -1; grid-row: auto; }
    .quick-panel { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    :root { --header: 76px; }
    .game-shell { grid-template-columns: 1fr; grid-template-rows: var(--header) 1fr; }
    .topbar { grid-column: 1; grid-template-columns: 1fr auto auto; padding: 0 14px; }
    .player-hud { border: 0; padding: 5px 0; background: transparent; grid-template-columns: 50px minmax(80px,1fr); width: 170px; }
    .player-portrait-mini { width: 46px; height: 46px; }
    .player-portrait-mini > i { font-size: 1.3rem; }
    .player-level-badge { min-width: 34px; height: 17px; bottom: -4px; font-size: .58rem; }
    .player-level-badge small { display: none; }
    .player-hud-name { display: none; }
    .hud-resource-row { grid-template-columns: 17px auto 1fr; gap: 4px; }
    .hud-resource-icon { width: 16px; height: 16px; font-size: .55rem; }
    .hud-resource-row strong { font-size: .68rem; }
    .hud-resource-row small { display: block; font-size: .45rem; }
    .hud-resource-add { display: none; }
    .header-actions { display: none; }
    .header-brand { position: absolute; left: 50%; transform: translateX(-50%); }
    .header-brand .brand-kicker, .header-brand .brand-sub { display: none; }
    .header-brand .brand-main { font-size: 1.25rem; }
    .server-cluster { display: none; }
    .mobile-menu-btn { display: grid; grid-column: 3; width: 42px; height: 42px; place-items: center; border: 1px solid #29404d; border-radius: 8px; background: #0b151c; color: var(--text); }
    .sidebar { position: fixed; left: 0; top: var(--header); bottom: 0; width: min(300px, 88vw); height: auto; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(0,0,0,.4); }
    .sidebar.open { transform: translateX(0); }
    .game-content { grid-column: 1; padding: 20px 14px 30px; }
    .page-head { align-items: stretch; flex-direction: column; }
    .head-metric { width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .metric-card, .quick-panel, .terminal-panel { grid-column: 1; }
    .command-content { grid-template-columns: 1fr; }
    .network-orb { width: 180px; }
    .quick-grid { grid-template-columns: 1fr; }
    .character-head { align-items: stretch; flex-direction: column; }
    .class-lock-note { align-self: flex-start; }
    .character-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


@media (max-width: 520px) {
    .player-hud { width: 116px; grid-template-columns: 42px minmax(0,1fr); gap: 5px; }
    .player-portrait-mini { width: 40px; height: 40px; }
    .hud-resource-row { grid-template-columns: 14px auto; gap: 3px; }
    .hud-resource-row small { display: none; }
    .hud-resource-row strong { font-size: .62rem; }
    .character-grid { grid-template-columns: 1fr; }
    .auth-shell { display: block; padding: 24px 0; }
    .auth-brand-panel { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 28px 24px; gap: 40px; }
    .auth-intro h2 { font-size: 2.1rem; }
    .auth-card { margin: 28px auto 0; padding: 26px 20px; width: calc(100% - 28px); }
}

/* V0.0.5 — OPERATOR PROFILE / INVENTORY / ITEMS */
.class-bonus-strip {
    margin: 14px 0 0;
    padding: 12px;
    border: 1px solid rgba(91,137,153,.18);
    border-radius: 9px;
    background: rgba(5,12,17,.52);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.class-bonus-strip > div { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.class-bonus-strip > div span { color: #5e7d88; font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.class-bonus-strip > div strong { color: #d3e7ec; font-size: .73rem; }
.class-multiplier { padding: 5px 7px; border: 1px solid rgba(109,255,178,.18); border-radius: 6px; background: rgba(109,255,178,.055); color: #9ee8c0; font-size: .6rem; font-weight: 850; }
.class-multiplier.penalty { border-color: rgba(255,111,120,.2); background: rgba(255,111,120,.045); color: #ffabb2; }


/* Character profile V.0.0.5 */
.operator-profile-grid {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(285px, .72fr) minmax(390px, 1.05fr) minmax(430px, 1.28fr);
    gap: 15px;
    align-items: stretch;
}
.operator-identity-panel, .equipment-panel, .inventory-panel { min-height: 610px; }
.operator-identity-panel { padding: 15px; display: flex; flex-direction: column; gap: 13px; }
.operator-portrait-large {
    height: 285px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #2b4755;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 42%, rgba(68,230,255,.2), transparent 38%), linear-gradient(145deg, #0d1d26, #071016);
}
.operator-portrait-large > i { position: relative; z-index: 2; font-size: 7rem; color: #dffaff; text-shadow: 0 0 34px rgba(68,230,255,.3); }
.operator-portrait-large .portrait-grid { opacity: .7; }
.operator-portrait-large .portrait-scan { top: 48%; animation: portraitScan 3.8s ease-in-out infinite; }
@keyframes portraitScan { 0%,100% { transform: translateY(-80px); opacity: .14; } 50% { transform: translateY(80px); opacity: .55; } }
.operator-identity-panel.character-spammer .operator-portrait-large { border-color: #5e463d; background: radial-gradient(circle at 50% 42%, rgba(255,139,75,.2), transparent 38%), linear-gradient(145deg, #211713, #0b0e12); }
.operator-identity-panel.character-spammer .operator-portrait-large > i { color: #ffb486; text-shadow: 0 0 34px rgba(255,132,72,.3); }
.operator-identity-panel.character-defender .operator-portrait-large > i { color: #86baff; }
.operator-identity-panel.character-ghost .operator-portrait-large > i { color: #c1a1ff; }
.operator-identity-panel.character-engineer .operator-portrait-large > i { color: #ffca79; }
.operator-identity-panel.character-botmaster .operator-portrait-large > i { color: #8fffc0; }

.operator-identity-copy { padding: 0 3px; }
.operator-class-label { color: var(--cyan); font-size: .6rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.operator-identity-copy h2 { margin: 4px 0 7px; font-size: 1.65rem; letter-spacing: -.035em; }
.operator-meta-line { display: flex; flex-wrap: wrap; gap: 7px 14px; color: #75909a; font-size: .68rem; }
.operator-meta-line i { margin-right: 4px; color: #4e7888; }
.operator-xp-line { margin-top: 11px; }
.operator-xp-line > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #65818c; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.operator-xp-line strong { color: #cfe3e8; }

.booster-area { margin-top: auto; }
.section-mini-title { display: flex; justify-content: space-between; gap: 12px; margin: 0 2px 7px; }
.section-mini-title span, .section-mini-title small { color: #5d7883; font-size: .56rem; font-weight: 900; letter-spacing: .09em; }
.booster-slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.booster-slot { min-height: 76px; padding: 8px; border: 1px dashed #28404b; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #47616b; text-align: center; background: #081116; transition: border-color .15s, box-shadow .15s, transform .15s; }
.booster-slot.filled { border-style: solid; flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; }
.booster-slot > i { font-size: 1rem; }
.booster-slot.filled > i { margin-top: 4px; color: var(--amber); }
.booster-slot > span { font-size: .54rem; }
.booster-slot div { min-width: 0; display: grid; gap: 2px; }
.booster-slot strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.booster-slot div span { color: #87a4ad; font-size: .5rem; }
.booster-slot small { color: #546e78; font-size: .48rem; }

.profile-panel-heading { min-height: 72px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(93,138,154,.16); display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.profile-panel-heading h2 { margin: 3px 0 0; font-size: 1.2rem; }
.panel-count { padding: 5px 8px; border: 1px solid #2c4550; border-radius: 6px; color: #748f99; background: #081117; font-size: .6rem; font-weight: 900; }

.equipment-grid { padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.equipment-slot {
    min-height: 164px;
    padding: 10px;
    position: relative;
    border: 1px solid #253b46;
    border-radius: 9px;
    background: linear-gradient(145deg, #0b151c, #071016);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.equipment-slot-label { display: flex; align-items: center; gap: 6px; color: #5f7d88; font-size: .55rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.equipment-slot-label i { color: #4e7c8e; }
.equipment-slot .item-icon { height: 53px; margin: 8px 0 4px; }
.item-icon { display: grid; place-items: center; color: #bad8e0; font-size: 1.7rem; text-shadow: 0 0 18px rgba(68,230,255,.16); }
.item-copy { display: grid; gap: 3px; min-width: 0; }
.item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.item-rarity { color: #758f99; font-size: .51rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.item-bonuses { display: flex; flex-wrap: wrap; gap: 3px 5px; }
.item-bonuses span { color: #88b7c4; font-size: .52rem; }
.item-action-form { position: absolute; top: 8px; right: 8px; z-index: 5; }
.item-action-form button, .item-quick-action button { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #304954; border-radius: 6px; color: #70909c; background: #081116; cursor: pointer; font-size: .58rem; }
.item-action-form button:hover, .item-quick-action button:hover { color: #fff; border-color: var(--cyan-2); }
.empty-slot-mark { height: 125px; display: grid; place-items: center; align-content: center; gap: 5px; color: #344e58; }
.empty-slot-mark i { font-size: 1rem; }
.empty-slot-mark span { font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }

.inventory-grid { padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; transition: box-shadow .15s; }
.inventory-item {
    min-height: 166px;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #263b46;
    border-radius: 9px;
    background: linear-gradient(145deg, #0b151c, #071016);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.inventory-item-top { display: flex; justify-content: space-between; gap: 7px; align-items: center; padding-right: 27px; }
.inventory-item-top small { color: #536d77; font-size: .5rem; }
.inventory-item .item-icon { height: 49px; margin: 7px 0 4px; }
.inventory-item > strong { min-height: 30px; padding-right: 23px; font-size: .68rem; line-height: 1.25; }
.inventory-item .item-bonuses { margin-top: auto; padding-top: 5px; padding-right: 22px; }
.item-quick-action { position: absolute; right: 8px; bottom: 8px; z-index: 5; }
.inventory-item.empty { min-height: 166px; display: grid; place-items: center; align-content: center; border-style: dashed; color: #2d4650; background: rgba(4,10,14,.38); }
.inventory-item.empty i { font-size: .95rem; }

.draggable-item { cursor: grab; user-select: none; }
.draggable-item:active { cursor: grabbing; }
.draggable-item.is-dragging { opacity: .32; }
.drop-zone.drag-compatible { border-color: rgba(68,230,255,.58); box-shadow: inset 0 0 0 1px rgba(68,230,255,.12), 0 0 20px rgba(68,230,255,.06); }
.drop-zone.drag-over { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(68,230,255,.35), 0 0 24px rgba(68,230,255,.14); }
.inventory-grid.drop-zone.drag-compatible { box-shadow: inset 0 0 0 1px rgba(68,230,255,.22); }

/* nine item rarity tiers */
.rarity-common { --rarity: #607984; }
.rarity-uncommon { --rarity: #54c981; }
.rarity-rare { --rarity: #4e9dff; }
.rarity-elite { --rarity: #39d8dd; }
.rarity-epic { --rarity: #a875ff; }
.rarity-legendary { --rarity: #ffad42; }
.rarity-prototype { --rarity: #ff6f5f; }
.rarity-relic { --rarity: #f0e36b; }
.rarity-mystic { --rarity: #ff54d8; }
.equipment-slot.filled[class*="rarity-"], .inventory-item[class*="rarity-"], .booster-slot.filled[class*="rarity-"] { border-color: color-mix(in srgb, var(--rarity) 58%, #253b46); box-shadow: inset 0 1px color-mix(in srgb, var(--rarity) 14%, transparent); }
[class*="rarity-"] .item-rarity { color: var(--rarity); }
.rarity-legendary .item-icon, .rarity-prototype .item-icon, .rarity-relic .item-icon, .rarity-mystic .item-icon { color: var(--rarity); text-shadow: 0 0 18px color-mix(in srgb, var(--rarity) 32%, transparent); }
.rarity-mystic { animation: mysticPulse 3.2s ease-in-out infinite; }
@keyframes mysticPulse { 0%,100% { box-shadow: inset 0 1px rgba(255,84,216,.12); } 50% { box-shadow: inset 0 1px rgba(255,84,216,.22), 0 0 20px rgba(255,84,216,.08); } }

.attributes-panel { max-width: 1440px; margin: 15px auto 0; }
.attributes-heading { align-items: center; }
.attribute-income-chip { padding: 6px 9px; border: 1px solid rgba(103,222,153,.25); border-radius: 6px; color: #8ee2b2; background: rgba(103,222,153,.055); font-size: .62rem; font-weight: 900; }
.attribute-income-chip i { margin-right: 4px; }
.attribute-grid { padding: 13px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.attribute-card { min-height: 106px; padding: 11px; display: grid; grid-template-columns: 40px minmax(0,1fr) 74px; gap: 10px; align-items: center; border: 1px solid #243945; border-radius: 9px; background: linear-gradient(145deg, #0a141b, #071016); }
.attribute-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #28434f; border-radius: 9px; color: var(--cyan); background: #091820; }
.attribute-main { min-width: 0; }
.attribute-name strong { font-size: .73rem; }
.attribute-value { margin: 2px 0 4px; color: #edfafd; font-size: 1.2rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.attribute-detail-line { display: flex; flex-wrap: wrap; gap: 3px 8px; color: #617b85; font-size: .49rem; }
.attribute-detail-line .positive { color: #78dca2; }
.attribute-detail-line .negative { color: #ff9199; }
.attribute-upgrade-form { display: grid; justify-items: center; gap: 5px; }
.attribute-upgrade-form button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #55713d; border-radius: 8px; color: #ffe384; background: linear-gradient(180deg, #4b3b12, #251d0a); cursor: pointer; font-size: .95rem; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.attribute-upgrade-form button:hover:not(:disabled) { border-color: #d9b347; color: #fff4b4; transform: translateY(-1px); }
.attribute-upgrade-form button:disabled { opacity: .34; cursor: not-allowed; }
.attribute-upgrade-form span { color: #8fa2a7; font-size: .52rem; white-space: nowrap; }
.attribute-upgrade-form span i { color: #d5b44a; margin-right: 2px; }

@media (max-width: 1320px) {
    .operator-profile-grid { grid-template-columns: minmax(285px,.72fr) minmax(380px,1.1fr); }
    .inventory-panel { grid-column: 1 / -1; min-height: auto; }
    .inventory-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
    .inventory-item, .inventory-item.empty { min-height: 160px; }
    .attribute-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
    .operator-profile-grid { grid-template-columns: 1fr; }
    .operator-identity-panel, .equipment-panel, .inventory-panel { min-height: auto; }
    .inventory-panel { grid-column: auto; }
    .inventory-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .equipment-grid { grid-template-columns: 1fr; }
    .inventory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .attribute-grid { grid-template-columns: 1fr; }
    .attribute-card { grid-template-columns: 38px minmax(0,1fr) 68px; }
    .booster-slots { grid-template-columns: 1fr; }
}


/* V0.0.6 — larger player HUD + visual-only item tiles with hover details */
.player-hud {
    padding: 10px 48px 10px 12px;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
}
.player-portrait-mini {
    width: 84px;
    height: 84px;
    border-radius: 11px;
}
.player-portrait-mini > i { font-size: 2.45rem; }
.player-level-badge {
    min-width: 50px;
    height: 22px;
    bottom: -6px;
    font-size: .72rem;
}
.player-hud-data { gap: 7px; align-content: center; }
.player-hud-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    line-height: 1.05;
}
.player-hud-identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.player-hud-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f0f8fa;
    font-size: .72rem;
    font-weight: 850;
}
.player-hud-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6d8791;
    font-size: .53rem;
    font-variant-numeric: tabular-nums;
}
.player-hud-identity small i { color: #4b7585; font-size: .48rem; }
.player-hud-resources { display: grid; gap: 3px; }
.hud-resource-row { grid-template-columns: 20px auto minmax(0,1fr); gap: 6px; }
.hud-resource-row strong { font-size: .9rem; }
.hud-resource-row small { font-size: .51rem; }
.hud-resource-add { right: 10px; width: 29px; height: 40px; }

/* Filled slots intentionally show only the item artwork. All metadata lives in the hover card. */
.equipment-slot.filled { padding: 7px; display: grid; place-items: center; overflow: visible; }
.equipment-slot.filled .item-visual-only { width: 100%; height: 100%; min-height: 148px; }
.inventory-item.item-visual-only {
    padding: 7px;
    display: grid;
    place-items: center;
    align-content: stretch;
    overflow: visible;
}
.item-visual-only {
    position: relative;
    border-radius: 7px;
    outline: none;
}
.item-visual-only:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); }
.item-art {
    width: 100%;
    height: 100%;
    min-height: 136px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity, #44e6ff) 14%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(11,21,28,.7), rgba(5,12,17,.86));
    color: color-mix(in srgb, var(--rarity, #bad8e0) 72%, #d9f6ff);
    box-shadow: inset 0 0 28px color-mix(in srgb, var(--rarity, #44e6ff) 6%, transparent);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.item-art i {
    font-size: 2.35rem;
    text-shadow: 0 0 24px color-mix(in srgb, var(--rarity, #44e6ff) 32%, transparent);
}
.item-visual-only:hover .item-art,
.item-visual-only:focus-visible .item-art {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.12);
    box-shadow: inset 0 0 32px color-mix(in srgb, var(--rarity, #44e6ff) 10%, transparent), 0 0 20px color-mix(in srgb, var(--rarity, #44e6ff) 8%, transparent);
}
.inventory-item.empty { min-height: 166px; }
.empty-slot-mark { height: 145px; }

.item-tooltip-layer {
    position: fixed;
    z-index: 250;
    width: min(310px, calc(100vw - 24px));
    pointer-events: none;
}
.item-tooltip-layer[hidden] { display: none; }
.item-hover-card {
    --rarity: #607984;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rarity) 72%, #2b414d);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(7,15,20,.985), rgba(3,8,12,.99));
    color: #dcebef;
    box-shadow: 0 18px 45px rgba(0,0,0,.58), inset 0 1px color-mix(in srgb, var(--rarity) 17%, transparent);
}
.item-hover-card header {
    min-height: 64px;
    padding: 11px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(103,145,159,.18);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 8%, transparent), transparent 70%);
}
.item-hover-card header > div { min-width: 0; display: grid; gap: 3px; }
.item-hover-card header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1f8fa; font-size: .82rem; }
.item-hover-card header span { color: var(--rarity); font-size: .58rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.item-hover-card header > i { flex: 0 0 auto; color: var(--rarity); font-size: 1.45rem; text-shadow: 0 0 18px color-mix(in srgb, var(--rarity) 28%, transparent); }
.item-hover-bonuses { padding: 10px 12px 8px; display: grid; gap: 5px; }
.item-hover-bonuses span { color: #b8d5dc; font-size: .68rem; font-weight: 750; }
.item-hover-bonuses span::before { content: "+"; display: none; }
.item-hover-card p { margin: 0; padding: 0 12px 10px; color: #6f8b95; font-size: .63rem; line-height: 1.45; }
.item-hover-card footer { padding: 8px 12px; border-top: 1px solid rgba(103,145,159,.14); color: #859da6; font-size: .6rem; }
.item-hover-card footer i { margin-right: 6px; color: var(--amber); }

@media (max-width: 1100px) {
    :root { --sidebar: 250px; --header: 102px; }
    .topbar { grid-template-columns: var(--sidebar) 92px minmax(230px,1fr) 220px; }
    .player-hud { padding: 8px 36px 8px 9px; grid-template-columns: 72px minmax(0,1fr); gap: 7px; }
    .player-portrait-mini { width: 68px; height: 68px; }
    .player-portrait-mini > i { font-size: 1.95rem; }
    .player-hud-identity small { display: none; }
    .player-hud-username { font-size: .65rem; }
    .hud-resource-row small { display: none; }
}

@media (max-width: 820px) {
    :root { --header: 76px; }
    .player-hud { grid-template-columns: 50px minmax(80px,1fr); width: 170px; padding: 5px 0; }
    .player-portrait-mini { width: 46px; height: 46px; }
    .player-portrait-mini > i { font-size: 1.3rem; }
    .player-hud-identity { display: none; }
    .player-hud-resources { gap: 2px; }
    .hud-resource-row { grid-template-columns: 17px auto 1fr; gap: 4px; }
    .hud-resource-row small { display: block; }
}

@media (max-width: 520px) {
    .player-hud { width: 116px; grid-template-columns: 42px minmax(0,1fr); gap: 5px; }
    .player-portrait-mini { width: 40px; height: 40px; }
    .hud-resource-row { grid-template-columns: 14px auto; gap: 3px; }
    .hud-resource-row small { display: none; }
    .item-tooltip-layer { width: min(280px, calc(100vw - 16px)); }
}

/* V.0.0.7 — Hardware Shop + Bunker */
.shop-page-head,
.bunker-page-head { align-items: center; }

.shop-head-actions { display: flex; align-items: center; gap: 12px; }
.shop-inventory-meter {
    min-width: 108px;
    padding: 9px 12px;
    border: 1px solid rgba(74, 149, 171, .28);
    border-radius: 9px;
    background: rgba(4, 18, 26, .72);
    display: flex;
    flex-direction: column;
}
.shop-inventory-meter span { color: #7294a3; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.shop-inventory-meter strong { margin-top: 2px; font-size: 1rem; }
.shop-refresh-btn { min-height: 48px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.shop-refresh-btn > i { grid-row: 1 / 3; }
.shop-refresh-btn span { font-weight: 800; }
.shop-refresh-btn small { color: #ffca66; font-size: .67rem; }

.hardware-shop-panel { overflow: visible; }
.shop-strip {
    min-height: 66px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(81, 134, 151, .18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.shop-strip > div:first-child { display: grid; gap: 5px; }
.shop-strip strong { font-size: .95rem; }
.shop-refresh-time { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; color: #7896a4; }
.shop-refresh-time i { grid-row: 1 / 3; color: var(--accent); }
.shop-refresh-time span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.shop-refresh-time strong { font-family: var(--mono); color: #d8edf4; font-size: .8rem; }

.hardware-offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}
.shop-offer {
    --rarity: #607984;
    min-height: 208px;
    border: 1px solid color-mix(in srgb, var(--rarity) 45%, #24404e);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(10, 28, 37, .96), rgba(5, 17, 24, .96));
    box-shadow: inset 0 1px color-mix(in srgb, var(--rarity) 16%, transparent);
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    position: relative;
}
.shop-offer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--rarity);
    opacity: .7;
}
.shop-offer.sold { opacity: .48; filter: saturate(.45); }
.shop-item-visual {
    min-height: 160px;
    padding: 16px;
    display: grid;
    place-items: center;
    position: relative;
    cursor: help;
    outline: none;
}
.shop-item-visual:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.shop-item-visual .item-art {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--rarity) 55%, #274652);
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity) 18%, transparent), rgba(2, 12, 18, .88) 70%);
    display: grid;
    place-items: center;
    color: var(--rarity);
    font-size: 2.7rem;
    text-shadow: 0 0 22px color-mix(in srgb, var(--rarity) 38%, transparent);
}
.shop-slot-chip {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 7px;
    border: 1px solid rgba(83, 134, 151, .22);
    border-radius: 5px;
    background: rgba(3, 13, 19, .82);
    color: #7797a4;
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.shop-offer-footer {
    min-height: 47px;
    padding: 8px 10px;
    border-top: 1px solid rgba(74, 127, 145, .16);
    display: grid;
    place-items: center;
    background: rgba(2, 12, 17, .45);
}
.shop-offer-footer form { width: 100%; }
.shop-buy-btn,
.shop-sold {
    width: 100%;
    min-height: 31px;
    border: 1px solid color-mix(in srgb, var(--rarity) 45%, #27444f);
    border-radius: 6px;
    background: color-mix(in srgb, var(--rarity) 8%, #071820);
    color: #e5f5f8;
    font: 800 .78rem var(--sans);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.shop-buy-btn { cursor: pointer; }
.shop-buy-btn:hover:not(:disabled) { border-color: var(--rarity); box-shadow: 0 0 15px color-mix(in srgb, var(--rarity) 17%, transparent); }
.shop-buy-btn:disabled { opacity: .45; cursor: not-allowed; }
.shop-buy-btn i { color: #f4c75d; }
.shop-sold { color: #70d99b; }
.item-hover-bonuses.empty-bonus span { color: #6f8893; font-style: italic; }

.bunker-status-card {
    min-width: 170px;
    padding: 11px 14px;
    border: 1px solid rgba(74, 149, 171, .28);
    border-radius: 9px;
    background: rgba(4, 18, 26, .72);
    display: grid;
    gap: 2px;
}
.bunker-status-card span { color: #7294a3; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.bunker-status-card strong { color: var(--accent); }
.bunker-status-card small { color: #8ba6b0; font-family: var(--mono); }

.bunker-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
    gap: 14px;
}
.bunker-mining-panel { overflow: hidden; }
.active-mining-card {
    margin: 14px;
    padding: 14px;
    border: 1px solid rgba(57, 196, 219, .25);
    border-radius: 10px;
    background: radial-gradient(circle at 20% 50%, rgba(31, 194, 220, .08), transparent 42%), rgba(3, 15, 22, .76);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
}
.active-mining-icon {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(62, 201, 223, .32);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 1.35rem;
}
.active-mining-card > div:nth-child(2) { display: grid; gap: 1px; }
.active-mining-card span,
.active-mining-card small { color: #6e919f; font-size: .65rem; }
.active-mining-card strong { color: #e4f5f8; }
.active-mining-amount { text-align: right; display: grid; gap: 2px; }
.active-mining-amount strong { font-family: var(--mono); color: #77e8ff; font-size: 1rem; }
.active-mining-amount small { color: #68c987; }

.crypto-market-head {
    padding: 0 14px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.crypto-market-head > span {
    color: #b9dce5;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.crypto-market-head > span i { margin-right: 5px; color: var(--accent); }
.crypto-market-head small { color: #5f7f8b; font-size: .6rem; text-align: right; }
.crypto-grid {
    padding: 0 14px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.crypto-card { margin: 0; }
.crypto-card button {
    width: 100%;
    min-height: 76px;
    padding: 9px 10px;
    border: 1px solid rgba(76, 128, 145, .22);
    border-radius: 8px;
    background: rgba(4, 16, 23, .72);
    color: #cfe4ea;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon copy market"
        "icon yield yield";
    gap: 4px 9px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}
.crypto-card button:hover:not(:disabled) { border-color: rgba(65, 201, 225, .46); background: rgba(8, 28, 38, .82); }
.crypto-card button span { min-width: 0; }
.crypto-card-icon { grid-area: icon; color: #54cde4; font-size: 1rem; text-align: center; }
.crypto-card-copy { grid-area: copy; display: grid; gap: 1px; }
.crypto-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-card-copy small { color: #658591; font-size: .56rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-card-market { grid-area: market; display: grid; justify-items: end; gap: 1px; }
.crypto-card-market strong { font: 800 .7rem var(--mono); color: #dcecf1; }
.crypto-card-market small { font: 700 .56rem var(--mono); }
.crypto-card-market .trend-up { color: #64d998; }
.crypto-card-market .trend-down { color: #f07272; }
.crypto-card-market .trend-flat { color: #7f9aa4; }
.crypto-card-yield {
    grid-area: yield;
    padding-top: 4px;
    border-top: 1px solid rgba(82, 128, 143, .14);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.crypto-card-yield b { font: 700 .6rem var(--mono); color: #7ea3af; }
.crypto-card-yield small { color: #6bd39a; font: 700 .58rem var(--mono); }
.crypto-card.active button { border-color: rgba(56, 216, 236, .64); background: rgba(19, 74, 84, .2); }
.crypto-card.active .crypto-card-icon,
.crypto-card.active .crypto-card-copy strong { color: var(--accent); }
.crypto-card button:disabled { cursor: default; }

.bunker-module-stack { display: grid; gap: 10px; align-content: start; }
.bunker-module-card {
    min-height: 86px;
    padding: 11px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 10px;
}
.bunker-module-icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(72, 155, 177, .26);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--accent);
}
.bunker-module-copy { min-width: 0; display: grid; gap: 1px; }
.bunker-module-copy > span { color: #587b89; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.bunker-module-copy strong { color: #e4f1f5; }
.bunker-module-copy small { color: #718e99; }
.bunker-upgrade-btn {
    min-width: 76px;
    min-height: 42px;
    padding: 6px 8px;
    border: 1px solid rgba(63, 194, 216, .36);
    border-radius: 7px;
    background: rgba(15, 78, 91, .18);
    color: #d7f2f7;
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px;
    align-items: center;
    cursor: pointer;
}
.bunker-upgrade-btn i { color: #5be2f2; }
.bunker-upgrade-btn span { font: 700 .7rem var(--mono); }
.bunker-personnel-preview { padding: 14px; }
.bunker-personnel-preview h3 { margin: 5px 0 4px; }
.bunker-personnel-preview p { margin: 0; color: #718f9c; font-size: .8rem; line-height: 1.55; }
.personnel-role-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.personnel-role-chips span { padding: 4px 7px; border: 1px solid rgba(75, 130, 146, .22); border-radius: 999px; color: #88a7b2; font-size: .62rem; }

@media (max-width: 1100px) {
    .hardware-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bunker-grid { grid-template-columns: 1fr; }
    .bunker-module-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bunker-personnel-preview { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .shop-page-head,
    .bunker-page-head { align-items: stretch; }
    .shop-head-actions { width: 100%; }
    .hardware-offer-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    .shop-offer { min-height: 170px; }
    .shop-item-visual { min-height: 126px; padding: 10px; }
    .shop-item-visual .item-art { width: 72px; height: 72px; font-size: 2rem; }
    .crypto-market-head { align-items: flex-start; flex-direction: column; gap: 3px; }
    .crypto-market-head small { text-align: left; }
    .crypto-grid { grid-template-columns: 1fr; }
    .active-mining-card { grid-template-columns: auto 1fr; }
    .active-mining-amount { grid-column: 1 / -1; text-align: left; padding-top: 6px; border-top: 1px solid rgba(74, 131, 147, .15); }
    .bunker-module-stack { grid-template-columns: 1fr; }
    .bunker-personnel-preview { grid-column: auto; }
}

/* V.0.0.7 — Bunker personnel */
.bunker-effect-card { padding: 13px 14px; }
.bunker-effect-list { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bunker-effect-list span {
    min-height: 31px;
    padding: 7px 8px;
    border: 1px solid rgba(72, 126, 143, .18);
    border-radius: 6px;
    background: rgba(3, 14, 20, .55);
    color: #88a5af;
    font-size: .68rem;
    display: flex;
    align-items: center;
    gap: 7px;
}
.bunker-effect-list i { color: var(--accent); }

.bunker-personnel-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: 14px;
}
.bunker-roster-panel,
.bunker-recruit-panel { overflow: hidden; }
.bunker-roster-list,
.bunker-staff-offers { padding: 12px; display: grid; gap: 8px; }
.bunker-empty-state {
    min-height: 100px;
    border: 1px dashed rgba(77, 132, 148, .24);
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: #668692;
}
.bunker-empty-state i { font-size: 1.2rem; }

.bunker-staff-row {
    --rarity: #607984;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--rarity) 38%, #27404a);
    border-radius: 8px;
    background: rgba(4, 16, 23, .66);
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 9px;
    align-items: center;
}
.bunker-staff-row > i { color: var(--rarity); text-align: center; }
.bunker-staff-row > div { display: grid; gap: 1px; }
.bunker-staff-row strong { font-size: .8rem; }
.bunker-staff-row span { color: #6f8d98; font-size: .64rem; }
.bunker-staff-row b { color: #d8eef4; font: 800 .68rem var(--mono); }

.bunker-staff-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bunker-staff-offer {
    --rarity: #607984;
    min-height: 96px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--rarity) 42%, #27404a);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(8, 24, 31, .88), rgba(4, 15, 21, .9));
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 9px;
    position: relative;
}
.bunker-staff-offer.sold { opacity: .5; }
.staff-offer-icon {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--rarity) 45%, #29414a);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--rarity);
}
.staff-offer-copy { min-width: 0; display: grid; align-content: start; gap: 1px; }
.staff-offer-copy > span { color: var(--rarity); font-size: .57rem; text-transform: uppercase; letter-spacing: .08em; }
.staff-offer-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.staff-offer-copy small { color: #708d98; font-size: .62rem; }
.bunker-staff-offer form { grid-column: 1 / -1; }
.bunker-staff-offer button {
    width: 100%;
    min-height: 31px;
    border: 1px solid rgba(71, 154, 175, .28);
    border-radius: 6px;
    background: rgba(9, 67, 79, .16);
    color: #d7edf3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font: 800 .66rem var(--sans);
    cursor: pointer;
}
.bunker-staff-offer button:disabled { opacity: .35; cursor: not-allowed; }
.bunker-staff-offer button i { color: var(--rarity); }
.staff-offer-bought { grid-column: 1 / -1; color: #63d891; text-align: center; padding-top: 4px; }

@media (max-width: 1100px) {
    .bunker-personnel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .bunker-staff-offers { grid-template-columns: 1fr; }
    .bunker-effect-list { grid-template-columns: 1fr; }
}

/* Bunker map UI · V.0.0.10 */
.bunker-map-shell {
    position: relative;
    width: min(100%, 1402px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(74, 132, 150, .34);
    border-radius: 12px;
    background: #050b0f;
    box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}
.bunker-map-image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.bunker-zone {
    position: absolute;
    z-index: 2;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bunker-zone:hover,
.bunker-zone:focus-visible {
    border-color: rgba(74, 232, 255, .72);
    background: rgba(33, 195, 222, .08);
    box-shadow: inset 0 0 34px rgba(35, 207, 235, .11), 0 0 24px rgba(35, 207, 235, .13);
    outline: none;
}
.zone-mining { left: 2.2%; top: 3.5%; width: 41.7%; height: 32.5%; }
.zone-security { left: 52.7%; top: 3.4%; width: 44.8%; height: 32.8%; }
.zone-personnel { left: 1.6%; top: 34.8%; width: 34.2%; height: 27.1%; }
.zone-datavault { left: 65.7%; top: 34.8%; width: 32.3%; height: 27.3%; }
.zone-dungeon { left: 1.1%; top: 61.4%; width: 46.2%; height: 30.1%; }
.zone-recruitment { left: 54.8%; top: 61.5%; width: 43.7%; height: 30.0%; }
.bunker-map-hint {
    position: absolute;
    left: 50%;
    bottom: 2.1%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(72, 155, 178, .26);
    border-radius: 999px;
    background: rgba(3, 10, 14, .82);
    color: #8eabb6;
    font: 700 .66rem var(--sans);
    letter-spacing: .03em;
    pointer-events: none;
}
.bunker-map-hint i { color: var(--accent); }

.bunker-dialog {
    width: min(94vw, 780px);
    max-height: min(88vh, 920px);
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #eaf6f9;
    overflow: visible;
}
.bunker-dialog::backdrop {
    background: rgba(0, 6, 10, .78);
    backdrop-filter: blur(5px);
}
.bunker-dialog-card {
    width: 100%;
    max-height: min(88vh, 920px);
    overflow: auto;
    border: 1px solid rgba(76, 154, 176, .42);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(10, 24, 31, .985), rgba(4, 12, 17, .99));
    box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.025);
}
.bunker-dialog-wide { width: min(94vw, 1120px); }
.bunker-dialog-medium { width: min(94vw, 860px); }
.bunker-dialog:has(.bunker-dialog-wide) { width: min(94vw, 1120px); }
.bunker-dialog:has(.bunker-dialog-medium) { width: min(94vw, 860px); }
.bunker-dialog-head {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 72px;
    padding: 15px 17px 13px;
    border-bottom: 1px solid rgba(84, 139, 156, .22);
    background: rgba(8, 20, 27, .96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.bunker-dialog-head h2 { margin: 3px 0 0; font-size: 1.18rem; }
.bunker-dialog-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(77, 137, 155, .34);
    border-radius: 8px;
    background: rgba(6, 16, 22, .75);
    color: #9ab2bb;
    cursor: pointer;
}
.bunker-dialog-close:hover { color: #fff; border-color: rgba(77, 222, 244, .56); }

.button-primary,
.button-secondary {
    min-height: 38px;
    border-radius: 7px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font: 800 .7rem var(--sans);
}
.button-primary {
    border: 1px solid rgba(62, 207, 231, .5);
    background: linear-gradient(180deg, rgba(20, 78, 91, .88), rgba(10, 43, 53, .9));
    color: #e9fbff;
}
.button-secondary {
    border: 1px solid rgba(85, 139, 155, .36);
    background: rgba(10, 27, 35, .85);
    color: #cfe0e5;
}
.button-primary small,
.button-secondary small { color: #7fb4c2; font: 700 .59rem var(--mono); }

.bunker-mining-toolbar {
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(300px, 1fr) auto;
    gap: 12px;
    align-items: end;
    border-bottom: 1px solid rgba(73, 127, 144, .16);
}
.bunker-rack-status {
    min-width: 105px;
    padding: 9px 11px;
    border: 1px solid rgba(68, 126, 143, .24);
    border-radius: 8px;
    background: rgba(5, 15, 20, .6);
    display: grid;
    gap: 2px;
}
.bunker-rack-status span { color: #698b97; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.bunker-rack-status strong { color: #e7f5f8; font: 900 1rem var(--mono); }
.bunker-all-miners-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.bunker-all-miners-form label { display: grid; gap: 4px; }
.bunker-all-miners-form label > span { color: #698b97; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.bunker-all-miners-form select,
.bunker-miner-select-form select {
    min-height: 38px;
    min-width: 0;
    border: 1px solid rgba(73, 129, 146, .32);
    border-radius: 7px;
    background: #08141a;
    color: #dcecf1;
    padding: 0 10px;
    font: 700 .68rem var(--sans);
}
.bunker-rack-expand-form .button-primary { min-height: 42px; flex-direction: column; gap: 1px; }
.bunker-rack-max { min-height: 42px; padding: 0 12px; border: 1px solid rgba(76, 171, 117, .32); border-radius: 8px; color: #78d49b; display: flex; align-items: center; gap: 8px; font-size: .68rem; }

.bunker-miner-grid {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.bunker-miner-card {
    min-height: 210px;
    padding: 11px;
    border: 1px solid rgba(65, 118, 134, .28);
    border-radius: 9px;
    background: rgba(4, 13, 18, .78);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bunker-miner-card.is-active { border-color: rgba(62, 174, 198, .34); }
.bunker-miner-card.is-locked { opacity: .46; border-style: dashed; }
.bunker-miner-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bunker-miner-title > span { color: #dbeef3; font-size: .68rem; font-weight: 850; }
.bunker-miner-title i { color: var(--accent); margin-right: 5px; }
.bunker-miner-title b { color: #7295a1; font: 800 .58rem var(--mono); }
.bunker-miner-locked { flex: 1; display: grid; place-items: center; align-content: center; gap: 7px; color: #506a74; font-size: .66rem; }
.bunker-miner-locked i { font-size: 1.2rem; }
.bunker-miner-selected { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(66, 126, 144, .2); border-radius: 7px; background: rgba(7, 21, 27, .7); }
.bunker-miner-selected > i { width: 28px; text-align: center; color: var(--accent); font-size: 1.05rem; }
.bunker-miner-selected > div { display: grid; gap: 1px; min-width: 0; }
.bunker-miner-selected span,
.bunker-miner-yield span { color: #5f818d; font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.bunker-miner-selected strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.bunker-miner-yield { display: grid; gap: 2px; }
.bunker-miner-yield strong { color: #69dca4; font: 800 .62rem var(--mono); }
.bunker-miner-select-form { display: grid; grid-template-columns: 1fr 34px; gap: 6px; margin-top: auto; }
.bunker-miner-select-form select { min-height: 34px; height: 34px; padding: 0 7px; font-size: .61rem; }
.bunker-miner-select-form button {
    border: 1px solid rgba(62, 174, 198, .34);
    border-radius: 7px;
    background: rgba(11, 54, 64, .55);
    color: var(--accent);
    cursor: pointer;
}
.bunker-miner-upgrade-form button {
    width: 100%;
    min-height: 31px;
    border: 1px solid rgba(82, 133, 149, .28);
    border-radius: 6px;
    background: rgba(7, 21, 27, .72);
    color: #bed1d7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: .61rem;
    font-weight: 800;
}
.bunker-miner-upgrade-form small { color: #71919d; font: 700 .55rem var(--mono); }

.bunker-simple-stats {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bunker-simple-stats > div {
    padding: 13px;
    border: 1px solid rgba(70, 126, 143, .24);
    border-radius: 8px;
    background: rgba(5, 16, 21, .65);
    display: grid;
    gap: 3px;
}
.bunker-simple-stats span { color: #648591; font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.bunker-simple-stats strong { font: 900 1.05rem var(--mono); color: #e6f4f7; }
.bunker-dialog-action { padding: 0 15px 15px; }
.bunker-dialog-action .button-primary { width: 100%; min-height: 44px; }
.bunker-wallet-grid { padding: 0 15px 15px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.bunker-wallet-grid > div { padding: 9px 10px; border: 1px solid rgba(65, 119, 136, .22); border-radius: 7px; display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; background: rgba(4, 14, 19, .62); }
.bunker-wallet-grid i { color: var(--accent); text-align: center; }
.bunker-wallet-grid span { color: #7897a2; font: 700 .62rem var(--mono); }
.bunker-wallet-grid strong { color: #d9ebef; font: 700 .62rem var(--mono); }
.bunker-dialog-list { padding: 0 15px 15px; }
.bunker-dialog-offers { padding: 15px; }
.bunker-coming-soon { min-height: 250px; padding: 35px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: #718e99; }
.bunker-coming-soon i { color: #b85d5d; font-size: 2rem; }
.bunker-coming-soon strong { color: #d7e8ec; font-size: 1rem; }
.bunker-coming-soon span { max-width: 390px; font-size: .72rem; line-height: 1.55; }

@media (max-width: 1180px) {
    .bunker-miner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .bunker-mining-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .bunker-all-miners-form { grid-template-columns: 1fr; }
    .bunker-miner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bunker-map-hint { display: none; }
}
@media (max-width: 560px) {
    .bunker-map-shell { border-radius: 8px; }
    .bunker-miner-grid { grid-template-columns: 1fr; }
    .bunker-simple-stats, .bunker-wallet-grid { grid-template-columns: 1fr; }
    .bunker-dialog { width: 96vw; }
    .bunker-dialog-head { min-height: 62px; padding: 11px 12px; }
    .bunker-dialog-card { max-height: 91vh; }
}