/* New futuristic site theme (per explicit request) - dark background with a cyan/teal accent, matching
   the reference screenshot's nav bar style. Completely separate from every other css/*.css file here,
   which still serve the legacy pages unchanged. */

:root {
    --sn-bg: #060a10;
    --sn-panel: rgba(15, 22, 32, 0.92);
    --sn-panel-2: rgba(24, 34, 48, 0.85);
    --sn-line: rgba(94, 202, 220, 0.22);
    --sn-accent: #35e0c9;
    --sn-accent-dim: rgba(53, 224, 201, 0.16);
    --sn-text: #eaf6f8;
    --sn-muted: #93a6b3;
    --sn-disabled: #4a5762;
}

/* Site-wide background (per explicit request) - the same images/
   gamebackground.png used behind the standalone Hangar page (hangar.css's own .stage-bg) is now the
   bottom-most layer behind EVERY page using this shared .site-new body class, login screen included,
   with nav/statbar/panels (Inventar, Shop, ...) stacking above it in normal document flow - replaces
   the earlier images/earth.jpg. Per explicit request, no darkening tint on top - the photo shows
   at full clarity, same as the Hangar's own .stage-bg. background-attachment: fixed keeps the image in
   place while page content scrolls, same as the legacy css/style.css body rule this replaces. */
.site-new {
    margin: 0;
    min-height: 100vh;
    background-image: url("/images/backgrounds/gamebackground.png");
    background-color: var(--sn-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--sn-text);
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 16px;
}

.site-new h1, .site-new h2, .site-new h3, .site-nav-brand-text {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    letter-spacing: 0.03em;
}

/* ---------- Nav ---------- */

.site-nav-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, rgba(6, 14, 20, 0.97), rgba(6, 14, 20, 0.9));
    border-bottom: 1px solid var(--sn-accent);
    box-shadow: 0 2px 18px rgba(53, 224, 201, 0.15);
}

/* 3-column grid (not flex) so the middle nav-list column sizes to its own content and sits exactly
   centered between two EQUAL 1fr side columns - unlike flex's space-between, this centers it against the
   full bar width regardless of the brand/account text being different widths (per explicit request: the
   nav buttons must be centered so START lands exactly in the middle, with brand pinned left and
   name/logout pinned right). */
.site-nav {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    padding: 0 24px;
    height: 52px;
}

.site-nav-brand {
    justify-self: start;
}

.site-nav-brand-text {
    font-weight: 900;
    font-size: 15px;
    color: var(--sn-accent);
    white-space: nowrap;
}

.site-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    justify-self: center;
}

.site-nav-item {
    position: relative;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--sn-text);
    text-decoration: none;
    cursor: pointer;
    padding: 6px 2px;
    transition: color 0.15s ease;
}

.site-nav-link:hover {
    color: var(--sn-accent);
}

.site-nav-link.active {
    color: var(--sn-accent);
}

.site-nav-link.disabled {
    color: var(--sn-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.site-nav-link-cta {
    background: var(--sn-accent);
    color: #04231d;
    padding: 8px 20px;
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(53, 224, 201, 0.45);
}

.site-nav-link-cta:hover {
    color: #04231d;
    filter: brightness(1.1);
}

.chevron {
    font-style: normal;
    font-size: 10px;
    opacity: 0.8;
}

.site-nav-item-dropdown:hover .site-nav-dropdown,
.site-nav-item-dropdown:focus-within .site-nav-dropdown {
    display: block;
}

.site-nav-item-dropdown .site-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    /* padding-top (not margin-top) keeps the gap INSIDE the dropdown's own hoverable box - a
       margin-top gap sits outside the box, so moving the mouse from the trigger down into that gap
       drops :hover on the parent li before the cursor ever reaches the dropdown itself. */
    padding: 10px 0 6px;
    list-style: none;
    background: var(--sn-panel);
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.site-nav-dropdown-link {
    display: block;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sn-text);
    text-decoration: none;
}

.site-nav-dropdown-link:hover,
.site-nav-dropdown-link.active {
    color: var(--sn-accent);
}

.site-nav-dropdown-link.disabled {
    color: var(--sn-disabled);
    cursor: not-allowed;
}

.site-nav-account {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    justify-self: end;
}

/* ---------- Nav currency box (Credits/Uridium, real icons) ---------- */

.site-nav-currency {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    padding: 5px 12px;
}

.site-nav-currency-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-nav-currency-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.site-nav-currency-value {
    /* Per explicit request - Credits/Uridium are the one exception carved out of "keep header as-is":
       these use Galaxy Gates' own numeric-readout font (galaxygates.php's .statrow .sval rule) even
       though the rest of the nav chrome keeps its normal Orbitron/Rajdhani look. */
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--sn-text);
}

.site-nav-logout {
    font-size: 12px;
    font-weight: 700;
    color: var(--sn-muted);
    text-decoration: none;
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    padding: 6px 12px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav-logout:hover {
    color: var(--sn-accent);
    border-color: var(--sn-accent);
}

/* ---------- Stat bar (Credits/Uridium/Erfahrung/Ehre) ---------- */

.site-statbar {
    background: rgba(10, 16, 24, 0.9);
    border-bottom: 1px solid var(--sn-line);
}

.site-statbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
}

.site-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    padding: 5px 12px;
}

.site-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    background: var(--sn-accent-dim);
    color: var(--sn-accent);
}

.site-stat-icon-uridium {
    background: rgba(241, 202, 103, 0.18);
    color: #f1ca67;
}

.site-stat-icon-xp {
    background: rgba(148, 214, 220, 0.18);
    color: #94d6dc;
}

.site-stat-icon-honor {
    background: rgba(255, 107, 107, 0.18);
    color: #ff8f8f;
}

.site-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Footer (fixed, every page) ---------- */

.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(6, 10, 16, 0.96);
    border-top: 1px solid var(--sn-line);
}

.site-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 24px;
    font-size: 12px;
}

.site-footer-brand {
    font-weight: 900;
    color: var(--sn-accent);
    letter-spacing: 0.04em;
}

.site-footer-sep {
    color: var(--sn-disabled);
}

.site-footer-link {
    color: var(--sn-muted);
    text-decoration: none;
    font-weight: 600;
}

.site-footer-link:hover {
    color: var(--sn-accent);
}

.site-footer-userid {
    color: var(--sn-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-footer-eye {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sn-muted);
    font-size: 12px;
    padding: 0;
    line-height: 1;
}

.site-footer-eye:hover {
    color: var(--sn-accent);
}

.site-footer-status {
    margin-left: auto;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-footer-status.online {
    color: #35e0a0;
}

.site-footer-status.offline {
    color: #ff6b6b;
}

/* ---------- Main content shell ---------- */

/* padding-bottom (60px) already leaves room for the fixed .site-footer below, so game content never
   overlaps it. padding-top (50px, per explicit request "alle seiten fangen dann so an das sie ab 50
   pixel zur haupttitel bereich anfang geladen werden") is the ONE central spot controlling how far every
   header_new.php page's content starts below the nav/statbar, for a uniform look across all of them. */
.site-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 24px 60px;
}

/* Per explicit request: page CONTENT (everything inside .site-main - home.php's cards etc.) adopts
   Galaxy Gates' own typography (galaxygates.php's .galaxygates-page rule, a plain system-UI stack)
   instead of the site's Orbitron/Rajdhani look - explicitly NOT the nav/footer chrome, which are
   siblings of .site-main, not descendants, so this can't reach .site-nav-brand-text/.site-footer-*
   even though they share the same .site-new ancestor. Pages with their own dedicated stylesheet
   (hangar.css/shop.css's --font-* vars, skilltree.php's own --font-* vars) already carry the matching
   change directly in their own root - this is the fallback for page content with no such override
   (home.php today).  */
.site-main {
    font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.site-main h1, .site-main h2, .site-main h3 {
    font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: normal;
}

/* Per explicit request ("den Shop etwas breiter gestalten") - the shop page alone gets more horizontal
   room than the site's normal 1400px content width. */
.site-main:has(.shop2-panel) {
    max-width: 1700px;
}

/* Per explicit request - the Hangar page also gets more horizontal room than the site's normal 1400px
   content width. THIS is the actual binding width constraint for the Hangar (not .hud's own max-width
   in hangar.css) - .hud lives inside .site-main, so widening .hud past whatever .site-main allows has
   no visual effect until this ancestor is widened too. */
.site-main:has(.hangar-page) {
    max-width: 1560px;
}

/* The new Premium-HUD Shop (shop2.php) also gets more horizontal room than the site's normal 1400px
   content width - matches the Hangar's own binding constraint pattern above (.hud lives inside
   .site-main, so this ancestor - not .hud's own width - is what actually caps the page). 1763px =
   the Shop's own exact column math (210 + 1138 + 305 categories/grid/detail + 32px gaps + 30px hud
   padding = 1715px .hud needs) PLUS this element's own 48px horizontal padding (24px left + 24px
   right, see .site-main above) - .site-main is border-box (Tailwind Preflight, loaded in
   header_new.php), so that padding eats into max-width instead of being added outside it. Missing
   this the first time round left .hud exactly 48px too narrow for .shop-body's fixed-width grid
   columns, spilling the detail/purchase panel past the right edge. */
.site-main:has(.shop-page) {
    max-width: 1763px;
}

.sn-panel {
    background: var(--sn-panel);
    border: 1px solid var(--sn-line);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.sn-panel-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--sn-line);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--sn-accent);
    text-transform: uppercase;
}

/* ---------- Home / profile: modern touch-based card grid ---------- */
/* Per explicit request ("modernen touch basierten Profil") - large rounded tap-friendly cards in a
   responsive grid, replacing the older 2-column sn-profile-grid layout below (still kept for anything
   that reuses it). */

.sn-touch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.sn-touch-card {
    background: var(--sn-panel);
    border: 1px solid var(--sn-line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.sn-touch-card:hover {
    border-color: var(--sn-accent);
    transform: translateY(-2px);
}

.sn-touch-card-identity {
    text-align: center;
}

.sn-touch-faction-logo {
    margin: 0 auto 10px;
    display: block;
}

.sn-touch-clan {
    margin-top: 12px;
    font-size: 12px;
    color: var(--sn-muted);
}

.sn-touch-clan strong {
    color: var(--sn-text);
}

.sn-touch-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sn-muted);
    margin-bottom: 10px;
}

.sn-touch-big-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.sn-touch-pill-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sn-touch-pill-row-wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.sn-touch-pill {
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 64px;
    text-align: center;
}

.sn-touch-pill-label {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sn-muted);
    margin-bottom: 4px;
}

.sn-touch-pill-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.sn-touch-pill-value.accent,
.sn-touch-big-value.accent {
    color: var(--sn-accent);
}

.sn-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .sn-profile-grid {
        grid-template-columns: 1fr;
    }
}

.sn-profile-card {
    padding: 24px;
    text-align: center;
}

.sn-profile-pilotname {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 12px 0 2px;
}

.sn-profile-accountname {
    color: var(--sn-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.sn-profile-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--sn-accent-dim);
    color: var(--sn-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sn-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    padding: 22px;
}

.sn-stat {
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    padding: 16px;
}

.sn-stat-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--sn-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sn-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sn-text);
}

.sn-stat-value.accent {
    color: var(--sn-accent);
}

/* ---------- Ranking section (folded directly into home.php - per explicit request) ---------- */
/* images/ranking/*_42x49.png are 2-frame vertical sprites (42x98 total, not 42x49 - filename undersells
   the real height) - top frame (background-position 0 0) is the lit/hover state, bottom frame
   (0 -halfHeight) is the dim/idle state, confirmed by inspecting the actual pixels. Used for the
   ranking section's own 6 in-page tabs on home.php. */

.rk-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rk-profile-card {
    padding: 22px;
}

.rk-profile-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.rk-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.rk-avatar {
    display: block;
    width: 88px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid var(--sn-line);
    object-fit: cover;
}

.rk-rank-badge {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 32px;
    height: 32px;
    background: var(--sn-bg);
    border-radius: 50%;
    border: 1px solid var(--sn-line);
    padding: 3px;
    box-sizing: border-box;
}

/* Premium-Status-Badge (per explicit user spec - "wird auf der HOME Seite, oben links am Avatar Bild,
   das Premium Status sichtbar sein") - mirrors .rk-rank-badge's own bottom-right circular treatment,
   just top-left and gold instead of the rank icon's neutral panel background. */
.rk-premium-badge {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe08a, #ffd23d 55%, #d69f00);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #3a2600;
    font-weight: 700;
}

.rk-premium-active {
    color: #ffd23d;
    font-weight: 700;
}

.rk-profile-info {
    flex: 1;
    min-width: 220px;
}

.rk-profile-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.rk-profile-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 24px;
}

.rk-profile-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sn-line);
}

.rk-profile-label {
    color: var(--sn-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    align-self: center;
}

.rk-profile-value {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rk-profile-value.accent {
    color: var(--sn-accent);
}

.rk-profile-value.muted {
    color: var(--sn-disabled);
    font-weight: 500;
    font-style: italic;
}

/* Premiumlaufzeit (per explicit user spec - "Bei Grün steht Premiumlaufzeit unter der Linie") - a
   plain wrapper (no border/padding of its own) so the INNER .rk-profile-row keeps its usual line
   exactly where every other row has one; the duration text sits directly below that line, as its own
   small second line within the same grid cell. */
.rk-profile-row-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rk-profile-row-group .rk-profile-row {
    border-bottom: 1px solid var(--sn-line);
    padding-bottom: 6px;
}

.rk-premium-duration {
    align-self: flex-end;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sn-muted);
}

.rk-inline-icon {
    width: 16px;
    height: 16px;
}

.rk-faction-button {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 10px;
    padding: 12px 18px;
    cursor: pointer;
    color: var(--sn-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: border-color 0.15s ease;
}

.rk-faction-button:hover {
    border-color: var(--sn-accent);
}

.rk-faction-button img {
    height: 30px;
}

.rk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--sn-panel);
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    padding: 8px;
}

.rk-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--sn-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rk-tab:hover {
    color: var(--sn-text);
}

.rk-tab.active {
    background: var(--sn-accent-dim);
    color: var(--sn-accent);
}

.rk-tab-icon {
    display: block;
    width: 22px;
    height: 26px;
    background-size: 22px 52px;
    background-position: 0 -26px;
}

.rk-tab:hover .rk-tab-icon,
.rk-tab.active .rk-tab-icon {
    background-position: 0 0;
}

.rk-tab-icon-start { background-image: url("/images/ranking/navigation_icon_start_42x49.png"); }
.rk-tab-icon-honor { background-image: url("/images/ranking/navigation_icon_honor_42x49.png"); }
.rk-tab-icon-experience { background-image: url("/images/ranking/navigation_icon_experience_42x49.png"); }
.rk-tab-icon-clan { background-image: url("/images/ranking/navigation_icon_clan_42x49.png"); }
.rk-tab-icon-gate { background-image: url("/images/ranking/navigation_icon_gate_42x49.png"); }
.rk-tab-icon-event { background-image: url("/images/ranking/navigation_icon_event_42x49.png"); }

.rk-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
}

.rk-breakdown, .rk-leaderboard {
    padding-bottom: 6px;
}

.rk-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rk-breakdown-table td {
    padding: 8px 22px;
    border-bottom: 1px solid var(--sn-line);
}

.rk-breakdown-label {
    color: var(--sn-muted);
}

.rk-breakdown-raw {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
}

.rk-breakdown-factor {
    text-align: right;
    color: var(--sn-muted);
    white-space: nowrap;
}

.rk-breakdown-points {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

.rk-negative .rk-breakdown-points,
.rk-negative .rk-breakdown-label {
    color: #ff6b6b;
}

.rk-breakdown-table tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--sn-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
    padding-top: 12px;
}

.rk-breakdown-total {
    text-align: right;
    color: var(--sn-accent);
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
}

.rk-breakdown-subrow td {
    border-top: none !important;
    padding-top: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--sn-muted);
}

.rk-breakdown-subvalue {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
}

.rk-breakdown-up td {
    color: var(--sn-accent);
}

.rk-breakdown-down td {
    color: #ff6b6b;
}

.rk-breakdown-note {
    margin: 12px 22px 4px;
    font-size: 12px;
    color: var(--sn-muted);
    line-height: 1.5;
}

.rk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    /* Explicit narrow icon <td>s (faction logo/rank badge) were computing to 0 rendered width under
       the browser's default auto column-sizing algorithm even with a fixed CSS width set on both the
       <td> and its <img> - a known engine quirk for narrow columns holding only a replaced element.
       table-layout: fixed forces every column to strictly honor its declared width instead of being
       re-derived from content, which sidesteps it entirely. */
    table-layout: fixed;
}

.rk-table tr {
    border-bottom: 1px solid var(--sn-line);
}

.rk-table tr:last-child {
    border-bottom: none;
}

.rk-table td {
    padding: 10px 22px;
}

.rk-table-rank {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--sn-muted);
    width: 50px;
}

.rk-table-faction {
    width: 34px;
}

.rk-table-faction img {
    /* Root cause of the icon collapsing to 0 rendered width: Tailwind Preflight's global
       `img, video { max-width: 100% }` reset resolves that 100% against the <td>'s own computed
       width, which the table's layout algorithm was shrinking toward 0 for this narrow icon-only
       column - max-width always wins as an upper bound over a plain width, per the CSS spec, so the
       explicit width below was being silently clamped down to that. max-width: none opts these two
       specific icons back out of the percentage-based cap entirely. */
    max-width: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.rk-table-rankicon {
    width: 26px;
}

.rk-table-rankicon img {
    max-width: none;
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.rk-table-name {
    font-weight: 600;
}

.rk-table-value {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    color: var(--sn-accent);
    white-space: nowrap;
}

.rk-you-tag {
    color: var(--sn-accent);
    font-size: 11px;
    font-weight: 700;
}

.rk-own-row {
    background: var(--sn-accent-dim);
}

.rk-medal-1 .rk-table-rank { color: #f1c94a; }
.rk-medal-2 .rk-table-rank { color: #c9d3dc; }
.rk-medal-3 .rk-table-rank { color: #d18a52; }

.rk-own-placement {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 22px 16px;
    padding: 12px 16px;
    background: var(--sn-panel-2);
    border: 1px dashed var(--sn-accent);
    border-radius: 8px;
    font-size: 13px;
}

.rk-own-placement-rank {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--sn-accent);
}

.rk-own-placement-name {
    flex: 1;
    font-weight: 600;
}

.rk-own-placement-value {
    color: var(--sn-accent);
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
}

.rk-soon {
    padding: 40px 22px;
    text-align: center;
    color: var(--sn-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rk-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(4, 8, 12, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rk-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--sn-panel);
    border: 1px solid var(--sn-accent);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.rk-modal-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--sn-line);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--sn-accent);
    text-transform: uppercase;
}

.rk-modal-body {
    padding: 20px 22px;
}

.rk-modal-note {
    font-size: 13px;
    color: var(--sn-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

.rk-modal-note strong {
    color: var(--sn-text);
}

.rk-faction-options {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rk-faction-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    color: var(--sn-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.rk-faction-option:hover {
    border-color: var(--sn-accent);
    transform: translateY(-2px);
}

.rk-faction-option img {
    height: 34px;
}

.rk-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.rk-modal-confirm, .rk-modal-cancel {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--sn-line);
}

.rk-modal-confirm {
    background: var(--sn-accent);
    color: #04231d;
    border: none;
}

.rk-modal-confirm:disabled {
    opacity: 0.6;
    cursor: default;
}

.rk-modal-cancel {
    background: transparent;
    color: var(--sn-text);
}

.rk-modal-message {
    display: none;
    margin: 0 22px 18px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}

.rk-modal-message.success {
    display: block;
    background: rgba(53, 224, 201, 0.12);
    border: 1px solid rgba(53, 224, 201, 0.35);
    color: #8ff2e2;
}

.rk-modal-message.error {
    display: block;
    background: rgba(220, 70, 70, 0.12);
    border: 1px solid rgba(220, 70, 70, 0.35);
    color: #ff9a9a;
}

.rk-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--sn-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.rk-modal-close:hover {
    color: var(--sn-text);
}

/* ---------- Shop (shop_new.php) / Equipment (equipment_new.php) ---------- */
/* New inventory/equip system (per explicit request) - reuses sn-panel/sn-tabs/sn-submit-button/
   sn-message from above, adds item-card and equip-slot vocabulary specific to these two pages. */

.sn-shop-tabs, .sn-config-tabs {
    margin-bottom: 20px;
}

.sn-config-tabs {
    margin-top: 4px;
}

.sn-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.sn-item-card {
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sn-item-card.not-purchasable {
    opacity: 0.6;
}

/* Same 64x64 framed-box treatment as the Hangar's .hg-tile (per explicit request - item icons across
   both Inventar and Shop use one consistent, clearly-bordered presentation). */
.sn-item-image {
    width: 64px;
    height: 64px;
    border: 2px solid var(--sn-line);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.sn-item-image-small {
    width: 56px;
    height: 56px;
}

.sn-item-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
}

.sn-item-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--sn-muted);
}

.sn-item-stat strong {
    color: var(--sn-text);
}

.sn-item-owned {
    font-size: 10px;
    color: var(--sn-accent);
}

.sn-item-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sn-accent);
    margin-top: 4px;
}

.sn-item-price-locked {
    color: var(--sn-disabled);
}

.sn-item-buy {
    width: 100%;
    padding: 8px;
    font-size: 12px;
}

.sn-item-buy:disabled {
    background: var(--sn-disabled);
    color: #1a1f24;
    cursor: not-allowed;
}

.sn-shop-hint {
    margin-top: 22px;
    font-size: 12px;
    color: var(--sn-muted);
}

.sn-shop-hint a {
    color: var(--sn-accent);
}

/* ---------- Shop v2 (shop_new.php) - rebuilt 1:1 against a real DarkOrbit shop screenshot per
   explicit request: sidebar category list, sub-tabs, item grid grouped by section, fixed detail/
   purchase panel with a quantity picker. See shop_new.php's own header comment for what was
   deliberately adapted rather than pixel-cloned (no manufacturer branding, disabled placeholder
   categories that don't exist in this system yet). */

.shop2-panel {
    padding: 0;
    overflow: hidden;
}

/* Per explicit request: the shop window itself keeps one fixed size regardless of how many items a
   category has - the item grid area scrolls internally instead of the whole window (or page) growing. */
.shop2-page {
    background-size: cover;
    background-position: center;
    padding: 22px;
    box-sizing: border-box;
    height: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.shop2-page .sn-shop-hint {
    margin-top: 32px;
}

.shop2-topbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 18px;
}

.shop2-back-link {
    position: absolute;
    left: 0;
    color: var(--sn-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.shop2-back-link:hover {
    color: var(--sn-accent);
}

.shop2-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--sn-text);
    border-bottom: 2px solid var(--sn-accent);
    padding-bottom: 8px;
}

.shop2-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 170px 1fr 300px;
    gap: 16px;
}

@media (max-width: 1100px) {
    .shop2-body {
        grid-template-columns: 1fr;
    }
}

/* Per explicit request - the shop's scrollable panels (sidebar, item grid, detail panel) get a thin,
   themed scrollbar instead of the browser's chunky default, so it reads as another thin teal line/stroke
   like the rest of this UI's borders rather than a foreign OS-chrome element. Firefox uses
   scrollbar-width/scrollbar-color; WebKit/Blink (Chrome/Edge) use the ::-webkit-scrollbar-* pseudo-
   elements - both are needed to cover all browsers. */
.shop2-sidebar,
.shop2-sections,
.shop2-detail {
    scrollbar-width: thin;
    scrollbar-color: rgba(53, 224, 201, 0.4) transparent;
}

.shop2-sidebar::-webkit-scrollbar,
.shop2-sections::-webkit-scrollbar,
.shop2-detail::-webkit-scrollbar {
    width: 6px;
}

.shop2-sidebar::-webkit-scrollbar-track,
.shop2-sections::-webkit-scrollbar-track,
.shop2-detail::-webkit-scrollbar-track {
    background: transparent;
}

.shop2-sidebar::-webkit-scrollbar-thumb,
.shop2-sections::-webkit-scrollbar-thumb,
.shop2-detail::-webkit-scrollbar-thumb {
    background: rgba(53, 224, 201, 0.4);
    border-radius: 3px;
}

.shop2-sidebar::-webkit-scrollbar-thumb:hover,
.shop2-sections::-webkit-scrollbar-thumb:hover,
.shop2-detail::-webkit-scrollbar-thumb:hover {
    background: rgba(53, 224, 201, 0.7);
}

.shop2-sidebar {
    background: rgba(10, 16, 24, 0.72);
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    padding: 10px 0;
    overflow-y: auto;
}

.shop2-sidebar-item {
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sn-text);
    cursor: pointer;
    border-left: 3px solid transparent;
}

.shop2-sidebar-item:hover {
    color: var(--sn-accent);
}

.shop2-sidebar-item.active {
    background: var(--sn-accent-dim);
    border-left-color: var(--sn-accent);
    color: var(--sn-accent);
    font-weight: 700;
}

.shop2-sidebar-item.disabled {
    color: var(--sn-disabled);
    cursor: not-allowed;
}

.shop2-main {
    background: rgba(10, 16, 24, 0.55);
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.shop2-subtabs {
    flex: none;
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--sn-line);
    margin-bottom: 18px;
    padding-bottom: 10px;
}

/* The scrollable unit (per explicit request) - the window itself (.shop2-page) never grows/shrinks
   with item count, only this inner area scrolls. */
.shop2-sections {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.shop2-subtab {
    font-size: 13px;
    font-weight: 700;
    color: var(--sn-muted);
    cursor: pointer;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
}

.shop2-subtab.active {
    color: var(--sn-text);
    border-bottom-color: var(--sn-accent);
}

.shop2-section {
    margin-bottom: 24px;
}

.shop2-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sn-muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.shop2-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Per explicit request/screenshot reference - each card is 3 stacked "fields" (name/image/price), each
   with its own background and border, not just plain text sitting on the card's own background. Sized
   up a step (per a later explicit request - "die anklickbaren Shop Items sollen optisch etwas größer
   dargestellt werden") from the original 130px. */
.shop2-card {
    width: 160px;
    background: rgba(20, 28, 40, 0.85);
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    padding: 6px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}

.shop2-card:hover {
    border-color: var(--sn-accent);
}

.shop2-card.selected {
    border-color: var(--sn-accent);
    box-shadow: 0 0 0 1px var(--sn-accent);
}

.shop2-card.not-purchasable {
    opacity: 0.6;
}

/* Per explicit request - same Orbitron sci-fi title font already used for every other heading on this
   site (.shop2-title, .hg-visual-header, etc.), not the plain body font. */
/* white-space/overflow/text-overflow per explicit request - longer names (the Booster category's
   "Ehrenpunkte Booster", "Schildregen Booster" etc.) were wrapping onto a second line inside this
   fixed-width card; every item name now stays on one line, truncated with an ellipsis if it doesn't
   fit rather than wrapping. */
.shop2-card-name {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(148, 176, 194, 0.25);
    border-radius: 3px;
    padding: 6px 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per explicit request - no grid/cross-hatch texture behind the icon anymore, just a plain darker
   field so the background-free 100x100 sprite itself stays clearly visible. */
.shop2-card-image-field {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(148, 176, 194, 0.2);
    border-radius: 3px;
    padding: 4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop2-card-image {
    width: 112px;
    height: 112px;
    object-fit: contain;
    background: transparent;
}

/* Per explicit request - the laser weapon sprites read as visually weighted toward the left within
   their own square canvas (a diagonal gun render, not an even bounding box), so nudge them right a
   touch to look centered; generators are unaffected. */
.shop2-section[data-category="weapon"] .shop2-card-image {
    transform: translateX(5px);
}

/* Combines the same rightward nudge with .shop2-detail-image's own translateY(-12px) - a plain
   `transform: translateX(5px)` here would otherwise win on specificity and silently drop the vertical
   nudge for every weapon item's detail view. */
.shop2-detail-image.weapon-icon {
    transform: translateX(5px) translateY(-12px);
}

.shop2-card-price {
    background: rgba(30, 90, 140, 0.3);
    border: 1px solid rgba(94, 202, 220, 0.35);
    border-radius: 3px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #5ecadc;
}

.shop2-card.not-purchasable .shop2-card-price {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--sn-line);
    color: var(--sn-disabled);
}

.shop2-detail {
    background: rgba(10, 16, 24, 0.72);
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    padding: 0 20px;
    text-align: center;
    overflow-y: auto;
}

/* Per explicit request/screenshot reference - clear divider lines between the item view, the
   description, and the currency/quantity controls, instead of everything running together. */
.shop2-detail-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--sn-line);
}

.shop2-detail-section:last-child {
    border-bottom: none;
}

/* Per explicit request - the description section (owned-count + description text) gets 10px more
   breathing room on both sides than the other two sections. */
.shop2-detail-section:nth-of-type(2) {
    padding: 28px 0;
}

/* #shopBuyBox/#shopUnavailableBox are siblings toggled via `hidden` (only one shown at a time) - since
   #shopUnavailableBox is always the literal last DOM child, :last-child alone would leave #shopBuyBox
   with a dangling divider whenever IT is the one actually visible. Both are explicitly the true last
   section regardless of which is shown. */
#shopBuyBox, #shopUnavailableBox {
    border-bottom: none;
}

.shop2-detail-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 18px;
}

.shop2-detail-sub {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sn-muted);
    margin-bottom: 12px;
}

/* Per explicit request - the detail image is the raw 100x100 sprite with no panel/frame background
   behind it (unlike the grid-textured .shop2-card-image-field in the list), just the icon itself.
   Explicit display:block + margin-left/right:auto to center it, NOT the parent .shop2-detail's
   text-align: center - the Tailwind CDN <script> this page loads (see header_new.php) ships a Preflight
   reset that sets `img { display: block }` site-wide, which silently defeats text-align centering (that
   only affects inline content) and left the icon pinned to the left edge instead of centered. The
   translateY nudges it 12px up from that centered position per a later explicit request (a pure visual
   nudge, like the existing weapon-icon translateX hack below - doesn't disturb the following elements'
   layout flow). */
.shop2-detail-image {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: transparent;
    margin: 0 auto 10px;
    transform: translateY(-12px);
}

/* Per explicit request/screenshot reference - plain white, not the teal accent color (matches the
   reference's own price styling, both here and in .shop2-total near the buy button). Nudged 12px up
   per a later explicit request, same translateY approach as .shop2-detail-image above. */
.shop2-detail-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sn-text);
    transform: translateY(-12px);
}

.shop2-detail-owned {
    font-size: 12px;
    color: #f1ca67;
    margin-bottom: 10px;
    min-height: 14px;
}

.shop2-detail-desc {
    font-size: 12px;
    color: var(--sn-muted);
    line-height: 1.5;
}

.shop2-currency-tab {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sn-text);
    border-bottom: 2px solid var(--sn-accent);
    padding-bottom: 5px;
    margin-bottom: 12px;
}

/* Only items priced in BOTH credits and Uridium (e.g. MCB-25, PLT-2021, Bigboy) render this as a pair of
   clickable buttons instead of the plain underlined label above - lets the player pick which currency to
   pay with. */
.shop2-currency-tab.picker {
    display: flex;
    gap: 6px;
    border-bottom: none;
    padding-bottom: 0;
}

.shop2-currency-btn {
    padding: 5px 14px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    color: var(--sn-muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.shop2-currency-btn:hover {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
}

.shop2-currency-btn.active {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
    background: var(--sn-accent-dim);
}

.shop2-qty-buttons {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.shop2-qty-max-row {
    margin-bottom: 10px;
}

/* Per explicit request - slimmer than a first pass at this (buttons were "too thick"/chunky) - closer
   to the reference screenshot's actual proportions. */
.shop2-qty-buttons button,
.shop2-qty-max-row button {
    flex: 1;
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    color: var(--sn-text);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.shop2-qty-buttons button:hover,
.shop2-qty-max-row button:hover {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
}

.shop2-qty-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.shop2-qty-stepper button {
    width: 28px;
    height: 28px;
    flex: none;
    box-sizing: border-box;
    padding: 0;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    color: var(--sn-text);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

/* Per explicit request/screenshot reference - the quantity field itself is a light input (unlike every
   other dark control here), matching the reference's white number box, with the number itself in the
   same green tone as the KAUFEN button. Same height as the -/+ buttons on either side of it. */
.shop2-qty-stepper input {
    flex: 1;
    height: 28px;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    background: #eef2f5;
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    color: #1f7a3d;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
}

.shop2-total {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.shop2-buy-button {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0;
    background: #35c96b;
    color: #04231d;
    border: none;
    border-radius: 6px;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.shop2-buy-button:hover {
    filter: brightness(1.08);
}

.shop2-locked-note {
    font-size: 12px;
    color: var(--sn-disabled);
    padding: 20px 0;
}

/* Buy-confirm / purchase-success dialogs (per explicit request/screenshot reference) - a wide dialog
   with its own colored header bar (teal for confirm, green for success), centered message body, and a
   bottom-right button row, distinct from the Hangar's simpler .hg-confirm-* dialog. */
.shop2-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(4, 8, 12, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop2-confirm-box {
    width: 420px;
    max-width: 92vw;
    background: #26282c;
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.shop2-confirm-header {
    background: linear-gradient(180deg, rgba(53, 224, 201, 0.2), rgba(53, 224, 201, 0.05));
    border-bottom: 1px solid var(--sn-line);
    padding: 14px 18px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--sn-accent);
}

.shop2-confirm-header-success {
    background: #35c96b;
    color: #ffffff;
}

/* "Warnung" variant (per explicit request/reference screenshot) - e.g. "Item konnte nicht ausgerüstet
   werden!" when a drop target is already full. Same family as the confirm/success headers above, just a
   third color. */
.shop2-confirm-header-warning {
    background: #f1ca67;
    color: #26282c;
}

.shop2-confirm-body {
    padding: 32px 20px;
    text-align: center;
    color: var(--sn-muted);
    font-size: 13px;
    min-height: 20px;
}

.shop2-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--sn-line);
}

.shop2-confirm-btn {
    padding: 8px 22px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 4px;
    color: var(--sn-text);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.shop2-confirm-btn:hover {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
}


/* ---------- Login / register (index.php) ---------- */

.sn-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sn-login-box {
    width: 100%;
    max-width: 420px;
    padding: 8px;
}

.sn-login-title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    color: var(--sn-accent);
    margin: 6px 0 18px;
}

.sn-tabs {
    display: flex;
    border-bottom: 1px solid var(--sn-line);
}

.sn-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--sn-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.sn-tab.active {
    color: var(--sn-accent);
    border-bottom-color: var(--sn-accent);
}

.sn-panel-body {
    padding: 22px;
}

.sn-form-panel {
    display: none;
}

.sn-form-panel.active {
    display: block;
}

.sn-field {
    margin-bottom: 14px;
}

.sn-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sn-muted);
    margin-bottom: 6px;
}

.sn-field input[type="text"],
.sn-field input[type="email"],
.sn-field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    border-radius: 6px;
    color: var(--sn-text);
    font-family: inherit;
    font-size: 14px;
}

.sn-field input:focus {
    outline: none;
    border-color: var(--sn-accent);
}

.sn-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.sn-checkbox-row label {
    font-size: 11px;
    color: var(--sn-muted);
}

.sn-submit-button {
    width: 100%;
    padding: 11px;
    background: var(--sn-accent);
    color: #04231d;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.sn-submit-button:hover {
    filter: brightness(1.08);
}

.sn-message {
    display: none;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--sn-panel-2);
    border: 1px solid var(--sn-line);
    font-size: 13px;
    color: var(--sn-text);
}