:root {
    --bg: #12151a;
    --grid-bg: #1c2027;

    --panel-bg: rgba(24, 28, 35, 0.88);
    --panel-border: rgba(255, 255, 255, 0.07);
    --text-primary: #eef1f5;
    --text-muted: #8b93a3;

    --admin-accent: #35d0c0;
    --admin-accent-soft: rgba(53, 208, 192, 0.14);
    --admin-accent-strong: rgba(53, 208, 192, 0.35);

    --player-accent: #e6832e;
    --player-accent-soft: rgba(230, 131, 46, 0.14);
    --player-accent-strong: rgba(230, 131, 46, 0.35);

    --danger: #e0554f;
    --danger-soft: rgba(224, 85, 79, 0.14);

    --ok: #43c17a;
    --bad: #e0554f;

    --tax: #e0b93d;
    --tax-soft: rgba(224, 185, 61, 0.14);

    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --cat-buildings: #e6832e;
    --cat-plots: #5bc26a;
    --cat-taxes: #e0b93d;
    --cat-bank: #4f9de6;
    --cat-storage: #a878e6;
    --cat-resource: #35d0c0;
    --cat-stock: #e6547a;
    --cat-global: #6f7ae6;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }

body {
    background-color: var(--bg);
    background-image: radial-gradient(circle at 15% 10%, rgba(53, 208, 192, 0.05), transparent 45%),
                       radial-gradient(circle at 85% 90%, rgba(230, 131, 46, 0.05), transparent 45%);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: var(--font-body);
    color: var(--text-primary);
}

#user-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    font-size: 13px;
}
.user-bar-name { font-weight: 600; }
.user-bar-role {
    font-family: var(--font-display);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
}
.balance-menu {
    position: relative;
    flex-shrink: 0;
}

.user-bar-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ok);
    background: rgba(67, 193, 122, 0.12);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(67, 193, 122, 0.3);
    cursor: pointer;
}
.user-bar-balance:hover { background: rgba(67, 193, 122, 0.2); }

.balance-caret {
    color: var(--ok);
    opacity: 0.75;
    transition: transform 0.15s ease;
}
.balance-menu.is-open .balance-caret { transform: rotate(180deg); }

.balance-dropdown {

    --player-accent: var(--ok);

    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    width: 250px;
    padding: 14px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 10px;
    user-select: text;
}
.balance-dropdown[hidden] { display: none; }

.income-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.income-row {
    padding: 10px 10px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.income-row-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
}

.income-row-label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.income-row-gross {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ok);
}
.income-row-gross--cost { color: var(--danger); }

.income-row-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 0 19px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.income-row-detail span:last-child { font-family: var(--font-display); font-weight: 600; }
.income-row-detail--loan span:last-child { color: var(--danger); }
.income-row-detail--tax span:last-child { color: var(--tax); }

.income-net-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 600;
}
.income-net-row span:last-child {
    font-family: var(--font-display);
    color: var(--ok);
    font-size: 15px;
}
.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ok);
    background: rgba(67, 193, 122, 0.12);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(67, 193, 122, 0.3);
    flex-shrink: 0;
    white-space: nowrap;
}
.online-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 2px rgba(67, 193, 122, 0.25);
    flex-shrink: 0;
    animation: online-pill-pulse 2s ease-in-out infinite;
}
@keyframes online-pill-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.user-bar-logout {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12.5px;
    border-left: 1px solid var(--panel-border);
    padding-left: 10px;
    flex-shrink: 0;
}
.user-bar-logout:hover { color: var(--text-primary); }

.user-menu {
    position: relative;
    flex-shrink: 0;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 2px 2px;
    color: var(--text-primary);
    font-family: var(--font-body);
    cursor: pointer;
    border-radius: 999px;
    flex-shrink: 0;
}

.user-menu-trigger:hover .user-bar-name { color: var(--text-primary); }

.user-menu-caret {
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.user-menu.is-open .user-menu-caret { transform: rotate(180deg); }

.user-menu-dropdown {

    --player-accent: var(--admin-accent);

    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 120;
    width: 240px;
    padding: 14px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 10px;
    user-select: text;
}
.user-menu-dropdown[hidden] { display: none; }

.user-menu-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.user-menu-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-input--sm {
    font-size: 12.5px;
    padding: 8px 10px;
}

.user-menu-submit {
    justify-content: center;
    margin-top: 2px;
    border-color: var(--admin-accent-strong);
    background: var(--admin-accent-soft);
}

.inbox-menu {
    position: relative;
    flex-shrink: 0;
}

.inbox-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(224, 185, 61, 0.4);
    background: rgba(224, 185, 61, 0.14);
    color: var(--tax);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.inbox-btn svg { flex-shrink: 0; }
.inbox-btn:hover { background: rgba(224, 185, 61, 0.26); }
.inbox-btn:active { transform: scale(0.92); }
.inbox-menu.is-open .inbox-btn { background: rgba(224, 185, 61, 0.26); }

.inbox-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    color: #1a1300;
    background: var(--tax);
    border: 1.5px solid var(--panel-bg);
    border-radius: 999px;
}
.inbox-badge[hidden] { display: none; }

.inbox-dropdown {

    --player-accent: var(--tax);

    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: 280px;
    max-height: 360px;
    padding: 16px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: text;
}
.inbox-dropdown[hidden] { display: none; }

.inbox-message-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 260px;

    scrollbar-width: thin;
    scrollbar-color: rgba(224, 185, 61, 0.45) transparent;
}

.inbox-message-list::-webkit-scrollbar {
    width: 8px;
}
.inbox-message-list::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.inbox-message-list::-webkit-scrollbar-thumb {
    background-color: rgba(224, 185, 61, 0.45);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.inbox-message-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--tax);
}

.inbox-message {
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inbox-message-type {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.inbox-message--transfer .inbox-message-type { color: var(--ok); }
.inbox-message--global .inbox-message-type { color: var(--admin-accent); }

.inbox-message-body {
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.transfer-menu {
    position: relative;
    flex-shrink: 0;
}

.transfer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(87, 157, 230, 0.4);
    background: rgba(87, 157, 230, 0.16);
    color: #6fb3ea;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.transfer-btn svg { flex-shrink: 0; }
.transfer-btn:hover { background: rgba(87, 157, 230, 0.28); }
.transfer-btn:active { transform: scale(0.92); }
.transfer-menu.is-open .transfer-btn { background: rgba(87, 157, 230, 0.28); }

.transfer-dropdown {

    --player-accent: #6fb3ea;

    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: 260px;
    padding: 16px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: text;
}
.transfer-dropdown[hidden] { display: none; }

.transfer-submit {
    justify-content: center;
    width: 100%;
    margin-top: 2px;
    border-color: rgba(87, 157, 230, 0.4);
    background: rgba(87, 157, 230, 0.16);
}

.transfer-tax-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 184, 76, 0.12);
    border: 1px solid rgba(255, 184, 76, 0.35);
    border-radius: 9px;
    font-size: 12.5px;
}

.transfer-tax-line {
    color: #ffcd7a;
    font-weight: 600;
}

.transfer-receive-line {
    color: var(--text-muted);
}
.transfer-receive-line strong { color: var(--ok); }

.own-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.side-panel {
    position: absolute;
    top: 16px;
    z-index: 100;
    width: 240px;
    padding: 18px 18px 20px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-panel--admin {
    right: 16px;
    border-top: 2px solid var(--admin-accent);
    max-height: calc(100vh - 32px);
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: var(--admin-accent-strong) transparent;
}

.side-panel--admin::-webkit-scrollbar {
    width: 8px;
}
.side-panel--admin::-webkit-scrollbar-track {
    background: transparent;
}
.side-panel--admin::-webkit-scrollbar-thumb {
    background-color: var(--admin-accent-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.side-panel--admin::-webkit-scrollbar-thumb:hover {
    background-color: var(--admin-accent);
}

.build-dock {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 100;
}

.build-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    width: 60px;
    background: linear-gradient(180deg, rgba(30, 34, 42, 0.94), rgba(18, 21, 26, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.build-rail::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--cat-buildings), var(--cat-plots), var(--cat-taxes),
        var(--cat-bank), var(--cat-storage), var(--cat-resource),
        var(--cat-stock), var(--cat-global));
    opacity: 0.55;
}

.rail-cat {
    --rail-accent: var(--text-muted);
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    color: var(--text-muted);
    cursor: pointer;
    overflow: visible;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
                transform 0.12s ease, box-shadow 0.16s ease;
}
.rail-cat svg { width: 20px; height: 20px; position: relative; z-index: 1; }

.rail-cat::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 3px;
    background: var(--rail-accent);
    opacity: 0.5;
    transition: height 0.16s ease, opacity 0.16s ease;
}

.rail-cat:hover {
    background: color-mix(in srgb, var(--rail-accent) 14%, rgba(255,255,255,0.03));
    border-color: color-mix(in srgb, var(--rail-accent) 45%, rgba(255,255,255,0.08));
    color: var(--rail-accent);
    transform: translateX(1px);
}
.rail-cat:hover::before { height: 22px; opacity: 0.9; }
.rail-cat:active { transform: scale(0.94); }

.rail-cat.is-active {
    background: color-mix(in srgb, var(--rail-accent) 20%, rgba(255,255,255,0.02));
    border-color: color-mix(in srgb, var(--rail-accent) 65%, transparent);
    color: var(--rail-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rail-accent) 35%, transparent),
                0 6px 16px color-mix(in srgb, var(--rail-accent) 30%, transparent);
}
.rail-cat.is-active::before { height: 26px; opacity: 1; }

.rail-cat[data-category="buildings"]           { --rail-accent: var(--cat-buildings); }
.rail-cat[data-category="plots"]               { --rail-accent: var(--cat-plots); }
.rail-cat[data-category="taxes"]               { --rail-accent: var(--cat-taxes); }
.rail-cat[data-category="bank"]                { --rail-accent: var(--cat-bank); }
.rail-cat[data-category="storage"]             { --rail-accent: var(--cat-storage); }
.rail-cat[data-category="resource-production"] { --rail-accent: var(--cat-resource); }
.rail-cat[data-category="stock-market"]        { --rail-accent: var(--cat-stock); }
.rail-cat[data-category="global-stats"]        { --rail-accent: var(--cat-global); }

.rail-cat[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    white-space: nowrap;
    padding: 6px 12px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: rgba(16, 18, 23, 0.95);
    border: 1px solid color-mix(in srgb, var(--rail-accent) 45%, rgba(255,255,255,0.1));
    border-left: 2px solid var(--rail-accent);
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 200;
}
.rail-cat[data-label]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

#build-flyout {
    --player-accent: var(--cat-buildings);
    --player-accent-soft: color-mix(in srgb, var(--cat-buildings) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-buildings) 35%, transparent);
}
#plot-flyout {
    --player-accent: var(--cat-plots);
    --player-accent-soft: color-mix(in srgb, var(--cat-plots) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-plots) 35%, transparent);
}
#tax-flyout {
    --player-accent: var(--cat-taxes);
    --player-accent-soft: color-mix(in srgb, var(--cat-taxes) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-taxes) 35%, transparent);
}
#bank-flyout {
    --player-accent: var(--cat-bank);
    --player-accent-soft: color-mix(in srgb, var(--cat-bank) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-bank) 35%, transparent);
}
#storage-flyout {
    --player-accent: var(--cat-storage);
    --player-accent-soft: color-mix(in srgb, var(--cat-storage) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-storage) 35%, transparent);
}

#storage-list,
#resource-production-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#resource-production-flyout {
    --player-accent: var(--cat-resource);
    --player-accent-soft: color-mix(in srgb, var(--cat-resource) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-resource) 35%, transparent);
}
#global-stats-flyout {
    --player-accent: var(--cat-global);
    --player-accent-soft: color-mix(in srgb, var(--cat-global) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-global) 35%, transparent);
}

.restock-panel {
    --player-accent: var(--tax);
    --player-accent-soft: color-mix(in srgb, var(--tax) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--tax) 35%, transparent);
}
.stock-modal-card {
    --player-accent: var(--cat-stock);
    --player-accent-soft: color-mix(in srgb, var(--cat-stock) 14%, transparent);
    --player-accent-strong: color-mix(in srgb, var(--cat-stock) 35%, transparent);
}

.build-flyout {
    position: fixed;
    z-index: 100;
    width: max-content;
    min-width: 240px;
    max-width: 420px;
    padding: 18px 18px 20px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-50%);

    max-height: calc(100vh - 48px);
}
.build-flyout.is-open { display: flex; }

.flyout-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: var(--player-accent-strong) transparent;
}

.flyout-scroll::-webkit-scrollbar {
    width: 8px;
}
.flyout-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.flyout-scroll::-webkit-scrollbar-thumb {
    background-color: var(--player-accent-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.flyout-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--player-accent);
}

.build-flyout.has-badge,
.stock-modal-card.has-badge,
.inbox-dropdown.has-badge,
.transfer-dropdown.has-badge,
.balance-dropdown.has-badge,
.user-menu-dropdown.has-badge,
.restock-panel.has-badge {
    padding-top: 34px;
}
.flyout-badge {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    border: 2px solid var(--player-accent);
    border-radius: 50%;
    color: var(--player-accent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.flyout-badge svg {
    width: 22px;
    height: 22px;
}

#global-stats-flyout {
    width: 300px;
}

.stock-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stock-modal[hidden] { display: none; }
.stock-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.6);
    backdrop-filter: blur(2px);
}
.stock-modal-card {
    position: relative;
    width: min(880px, 90vw);
    height: min(720px, 85vh);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 26px 26px;
    background: var(--panel-bg);
    border: 2px solid var(--player-accent);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: visible;
}
.stock-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stock-modal-header-title {
    min-width: 0;
}
.stock-modal-header-title .panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.stock-modal-balance {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ok);
    background: rgba(67, 193, 122, 0.12);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(67, 193, 122, 0.3);
    white-space: nowrap;
}
.stock-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    cursor: pointer;
}
.stock-modal-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }

.stock-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.stock-tab {
    padding: 6px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.stock-tab:hover { color: var(--text-primary); }
.stock-tab.is-active {
    color: var(--player-accent);
    background: var(--player-accent-soft);
    border-color: var(--player-accent-strong);
}
.stock-tab[hidden] { display: none; }

.stock-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--player-accent);
    opacity: 0.75;
    pointer-events: none;
}
.stock-loading-spinner[hidden] { display: none; }
.stock-loading-spinner-icon {
    display: block;
    animation: stock-loading-spin 0.8s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes stock-loading-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stock-tab-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex: 1;

    min-height: 0;

    padding-top: 6px;

    scrollbar-width: thin;
    scrollbar-color: var(--player-accent-strong) transparent;
}
.stock-tab-panel.is-active { display: flex; }

.stock-tab-panel::-webkit-scrollbar {
    width: 8px;
}
.stock-tab-panel::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.stock-tab-panel::-webkit-scrollbar-thumb {
    background-color: var(--player-accent-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.stock-tab-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--player-accent);
}

#stock-market-list-view,
#stock-company-detail-view,
#stock-my-company-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#stock-market-list-view[hidden],
#stock-company-detail-view[hidden] {
    display: none;
}

.stock-company-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

#stock-company-list,
#stock-portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stock-company-row:hover { background: rgba(255, 255, 255, 0.06); }

.stock-company-row-text {
    min-width: 0;
}
.stock-company-row-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-company-row-owner {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-company-row-price {
    font-family: var(--font-display);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.stock-company-row-price-block {
    flex-shrink: 0;
    text-align: right;
}
.stock-company-row-change {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 2px;
}
.stock-company-row-change.is-up { color: var(--ok); }
.stock-company-row-change.is-down { color: var(--bad); }
.stock-company-row-change.is-flat { color: var(--text-muted); }

.stock-portfolio-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.stock-portfolio-summary-label {
    font-size: 12px;
    color: var(--text-muted);
}
.stock-portfolio-summary .stock-company-row-change {
    font-size: 13px;
}

.stock-company-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.stock-company-header > div:first-child {
    min-width: 0;
}
.stock-company-header .panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-company-header .stat-block {
    flex-shrink: 0;
}

.stock-trade-form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}
.stock-trade-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}
.stock-trade-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.stock-trade-row .loan-input { flex: 1; min-width: 120px; }

.stock-trade-row .stock-qty-input {
    flex: 0 0 144px;
    min-width: 144px;
    max-width: 144px;
    width: 144px;
    padding-left: 8px;
    padding-right: 4px;
    text-align: center;
}
.btn--max {
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.stock-withdraw-btn-row {
    display: flex;
    gap: 8px;
}
.stock-withdraw-btn-row .btn {
    flex: 1;
}

#stock-trade-preview {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.stock-delist-btn {
    color: var(--danger);
    border-color: rgba(224, 85, 79, 0.35);
    align-self: flex-start;
}
.stock-delist-btn:hover { background: var(--danger-soft); }

.stock-card {
    padding: 12px 14px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.stock-card .stat-row:first-of-type { border-top: none; }

.stock-card-footnote { margin-top: 0; }

.stock-card--danger {
    border-color: rgba(224, 85, 79, 0.3);
    background: rgba(224, 85, 79, 0.05);
}
.stock-card--danger .panel-section-label { color: var(--danger); }

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.6);
    backdrop-filter: blur(2px);
}
.confirm-modal-card {
    position: relative;
    width: min(380px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-top: 2px solid var(--player-accent);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.confirm-modal-actions .btn { flex: 0 0 auto; }

.btn-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.rotate-hint {
    position: fixed;
    z-index: 400;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--player-accent-strong);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    pointer-events: none;
    white-space: nowrap;
}
.rotate-hint[hidden] { display: none; }
.rotate-hint-key {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--player-accent);
    border: 1px solid var(--player-accent-strong);
    border-radius: 5px;
    padding: 1px 6px;
}

.panel-eyebrow {
    font-family: "Silkscreen", sans-serif;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.side-panel--admin .panel-eyebrow { color: var(--admin-accent); }
.side-panel--player .panel-eyebrow { color: var(--player-accent); }

.panel-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin-top: -6px;
}

.panel-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: -6px;
}

.build-flyout .panel-hint {
    width: 100%;
}

.panel-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: -2px;
}

.admin-cat {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;

    flex-shrink: 0;
}

.admin-cat + .admin-cat {
    margin-top: 2px;
}

.admin-cat-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
    transition: background 0.15s ease;
}
.admin-cat-summary::-webkit-details-marker { display: none; }
.admin-cat-summary:hover { background: rgba(255, 255, 255, 0.04); }

.admin-cat-chevron {
    flex: none;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.admin-cat[open] > .admin-cat-summary .admin-cat-chevron {
    transform: rotate(180deg);
}
.admin-cat[open] > .admin-cat-summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-cat-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 16px;
}

.stat-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--player-accent);
    white-space: nowrap;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.stat-row-label { color: var(--text-muted); }
.stat-row-value { font-family: var(--font-display); font-weight: 600; }
.stat-row-value--negative { color: var(--danger); }

.gdp-chart {
    width: 100%;
    height: 64px;
    margin-top: 8px;
    display: block;
}

.gdp-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
}

.debt-ratio-section {
    gap: 6px;
}

.debt-ratio-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.debt-ratio-value {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.debt-ratio-track {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.debt-ratio-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.25s ease, background 0.25s ease;
}

.debt-ratio-fill--ok { background: var(--ok); }
.debt-ratio-fill--warning { background: var(--tax); }
.debt-ratio-fill--danger { background: var(--danger); }

.debt-ratio-hint {
    margin-top: 0;
}

.debt-forecast-section .stat-row:first-of-type { border-top: none; }
.debt-forecast-value--warning { color: var(--tax); }
.debt-forecast-value--danger { color: var(--danger); }

.loan-form {
    display: flex;
    gap: 8px;
}
.loan-form[hidden] { display: none; }

.loan-form--stacked {
    flex-direction: column;
    align-items: stretch;
}
.loan-form--stacked .loan-input { width: 100%; }
.loan-form-actions {
    display: flex;
    gap: 8px;
}
.loan-form-actions .btn { flex: 1; }

.loan-input {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.loan-max-btn {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
}
.loan-max-btn:hover { background: rgba(255, 255, 255, 0.1); }
.loan-max-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.loan-max-btn:disabled:hover { background: rgba(255, 255, 255, 0.05); }

#paint-tools { display: none; }
body.painting-mode #paint-tools { display: flex; }

#route-tools {
    display: none;
    flex-direction: column;
    gap: 12px;
}
body.routing-mode #route-tools { display: flex; }

#plot-tools {
    display: none;
    flex-direction: column;
    gap: 12px;
}
body.plotting-mode #plot-tools { display: flex; }

.btn {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: rgba(255, 255, 255, 0.07); }
.btn:active { transform: scale(0.98); }

.btn--zone.is-active {
    border-color: var(--admin-accent-strong);
    background: var(--admin-accent-soft);
}

.btn--tool.is-active {
    border-color: var(--player-accent-strong);
    background: var(--player-accent-soft);
}

.btn--danger.is-active {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.btn--ghost { color: var(--text-muted); }

.btn--buy {
    color: var(--ok);
    border-color: rgba(67, 193, 122, 0.35);
    background: rgba(67, 193, 122, 0.14);
}
.btn--buy:hover { background: rgba(67, 193, 122, 0.24); }
.btn--buy:active { background: rgba(67, 193, 122, 0.3); }

.btn--sell {
    color: var(--danger);
    border-color: rgba(224, 85, 79, 0.35);
    background: var(--danger-soft);
}
.btn--sell:hover { background: rgba(224, 85, 79, 0.24); }
.btn--sell:active { background: rgba(224, 85, 79, 0.3); }

.btn-pill {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--text-muted);
}

.btn--tool.is-active .btn-pill {
    background: var(--player-accent);
    color: #1a1207;
}

.btn-key {
    font-family: var(--font-display);
    font-size: 10.5px;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 1px 6px;
}

.btn-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}
.btn-swatch--grass { background: #2ecc71; }
.btn-swatch--water { background: #2e86de; }
.btn-swatch--default {
    background: #333333;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-swatch--white {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-swatch--street {
    background: #55595f;
}
.btn-swatch--plots {
    background: #8e44ad;
}
.btn-swatch--resource-sales {
    background: #16a085;
}
.btn-swatch--loan {
    background: var(--danger);
}
.btn--zone { justify-content: flex-start; }

.btn--toggle {
    justify-content: flex-start;
}
.toggle-track {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.15s ease, background 0.15s ease;
}
.btn--toggle.is-active .toggle-track { background: var(--admin-accent-soft); }
.btn--toggle.is-active .toggle-thumb {
    background: var(--admin-accent);
    transform: translateX(16px);
}
.toggle-label { font-size: 13.5px; }

#viewport {
    width: 100vw;
    height: 100vh;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#viewport.is-dragging { cursor: grabbing; }
body.tool-stall_item #viewport,
body.tool-remove_stall #viewport,
body.tool-foodtruck_item #viewport,
body.tool-barbershop_item #viewport { cursor: crosshair; }

#map-grid {
    display: none;
    grid-template-columns: repeat(30, 40px);
    grid-template-rows: repeat(30, 40px);
    gap: 2px;
    transform: rotateX(60deg) rotateZ(45deg);

    will-change: transform;
    backface-visibility: hidden;
}

.tile {
    width: 40px;
    height: 40px;
    background-color: var(--grid-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    transition: outline-color 0.1s ease;

    contain: layout style;
}

#buildings-3d-viewport {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    transition: opacity 0.15s ease;
}

#viewport.is-dragging #buildings-3d-viewport {
    opacity: 0;
}

body.tool-stall_item #buildings-3d-viewport,
body.tool-foodtruck_item #buildings-3d-viewport,
body.tool-barbershop_item #buildings-3d-viewport,
body.tool-remove_stall #buildings-3d-viewport {
    opacity: 0.25;
}

#map-canvas-viewport {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#map-canvas-static, #map-canvas-walkers, #map-canvas-buildings, #map-canvas-dynamic {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

#map-canvas-static {
    opacity: 1;
}

#map-canvas-walkers {
    pointer-events: none;
}

#map-canvas-buildings {
    opacity: 1;
}
#map-canvas-dynamic {
    pointer-events: none;
}

#map-canvas-sizer {
    position: relative;
    flex-shrink: 0;
}

#buildings-3d-layer {

    will-change: transform;
    pointer-events: none;
}

.building-anchor-cell {

    position: absolute;
    inset: 0;
    pointer-events: none;
}

.building-mount {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.zone-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    pointer-events: none;
}

.building-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.stall-obj {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0a04b, #d9691f);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.stall-edge-top { border-top: 2px solid var(--stall-edge-color, #3b1d0a); }
.stall-edge-right { border-right: 2px solid var(--stall-edge-color, #3b1d0a); }
.stall-edge-bottom { border-bottom: 2px solid var(--stall-edge-color, #3b1d0a); }
.stall-edge-left { border-left: 2px solid var(--stall-edge-color, #3b1d0a); }
.stall-flat-tl { border-top-left-radius: 0; }
.stall-flat-tr { border-top-right-radius: 0; }
.stall-flat-bl { border-bottom-left-radius: 0; }
.stall-flat-br { border-bottom-right-radius: 0; }

.stall-obj--other {
    --stall-edge-color: #3b1d0a;
}
.stall-obj--other.stall-edge-top,
.stall-obj--other.stall-edge-right,
.stall-obj--other.stall-edge-bottom,
.stall-obj--other.stall-edge-left,
.stall-obj--other.stall-edge-interior {
    box-shadow: 0 0 0 1px rgba(255, 214, 153, 0.85), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.stall-obj--own {
    --stall-edge-color: #1b2a4a;
}
.stall-obj--own.stall-edge-top,
.stall-obj--own.stall-edge-right,
.stall-obj--own.stall-edge-bottom,
.stall-obj--own.stall-edge-left,
.stall-obj--own.stall-edge-interior {
    box-shadow: 0 0 0 1px rgba(173, 202, 255, 0.85), 0 3px 6px rgba(0, 0, 0, 0.4);
}

stall-flat-* classes, computed by
   get_foodtruck_edge_classes() / getFoodtruckEdgeClasses() for a rectangular
   grid position instead of a fixed 2-tile anchor/part pair. This modifier
   only overrides the background/border-radius so food trucks read visually
   distinct from stalls; ownership border colors (own = navy, other = brown)
   still come from stall-obj--own / stall-obj--other above. */
.foodtruck-obj {

FOODTRUCK_OTHER_*
       in index.php, see render_building() / renderBuildingHTML(). */
    background: linear-gradient(135deg, #e0574a, #a8291d);
    border-radius: 6px;
}

.barbershop-obj {

BARBERSHOP_OTHER_* in index.php,
       see render_building() / renderBuildingHTML(). */
    background: linear-gradient(135deg, #f4d03f, #b7950b);
    border-radius: 6px;
}

.generic-biz-obj {

    background: linear-gradient(135deg, #9aa0a6, #5f6368);
    border-radius: 6px;
}

#map-grid { position: relative; }

body.tool-draw_route #viewport { cursor: crosshair; }
body.tool-erase_route #viewport { cursor: cell; }

.route-marker {

    position: fixed;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    background: rgba(255, 212, 121, 0.35);
    border: 1.5px solid rgba(255, 212, 121, 0.75);
    z-index: 50;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.route-marker:hover {
    background: rgba(255, 212, 121, 0.6);
    transform: scale(1.2);
}
.route-marker--selected {
    background: rgba(53, 208, 192, 0.55);
    border-color: var(--admin-accent);
    transform: scale(1.25);
}

body.route-markers-hidden .route-marker {
    display: none;
}

.tile--plot-draft {
    outline: 2px dashed #8e44ad !important;
    outline-offset: -2px;
    z-index: 2;
}
body.tool-plot_draw #viewport { cursor: crosshair; }
body.tool-plot_erase #viewport { cursor: cell; }
body.tool-plot_erase .tile--plot-draft:hover {
    outline-color: var(--danger) !important;
}

.tile[data-zone="plot"] {
    background-color: transparent !important;
}
body.tool-rent_plot .tile[data-zone="plot"],
body.tool-release_plot .tile[data-zone="plot"] {
    background-color: #8e44ad !important;
}

.tile.plot-edge-top { border-top: 2px solid rgba(142, 68, 173, 0.9); }
.tile.plot-edge-right { border-right: 2px solid rgba(142, 68, 173, 0.9); }
.tile.plot-edge-bottom { border-bottom: 2px solid rgba(142, 68, 173, 0.9); }
.tile.plot-edge-left { border-left: 2px solid rgba(142, 68, 173, 0.9); }

.plot-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.plot-obj {
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border-radius: 4px;
}
.plot-obj--available {
    border: 2px dashed rgba(255, 255, 255, 0.45);
}
.plot-obj--rented {
    border: 3px solid;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45) inset;
}

body.tool-rent_plot #viewport { cursor: pointer; }
body.tool-rent_plot .tile[data-zone="plot"][data-owner-id=""]:hover {
    outline: 2px solid var(--ok) !important;
    outline-offset: -2px;
    z-index: 2;
}
body.tool-release_plot #viewport { cursor: pointer; }
body.tool-release_plot .tile[data-zone="plot"]:not([data-owner-id=""]):hover {
    outline: 2px solid var(--danger) !important;
    outline-offset: -2px;
    z-index: 2;
}

.restock-panel {
    position: absolute;

    top: 24px;
    left: 16px;
    z-index: 100;
    width: 340px;
    padding: 14px 16px 16px;
    background: var(--panel-bg);

    border: 2px solid var(--player-accent);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.restock-panel-header {
    display: flex;
    align-items: center;
}

.restock-panel-title {
    font-family: "Silkscreen", sans-serif;;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tax);
    text-align: center;
}

.restock-panel-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;

    max-height: calc(50vh - 32px);
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgba(224, 185, 61, 0.45) transparent;
}

.restock-panel-rows::-webkit-scrollbar {
    width: 8px;
}
.restock-panel-rows::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.restock-panel-rows::-webkit-scrollbar-thumb {
    background-color: rgba(224, 185, 61, 0.45);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.restock-panel-rows::-webkit-scrollbar-thumb:hover {
    background-color: var(--tax);
}

.restock-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.restock-row[hidden] { display: none; }

.restock-row--needed {
    background: var(--danger-soft);
    border-color: rgba(224, 85, 79, 0.35);
}

.restock-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.restock-row-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.restock-row-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}

.restock-row-sep { opacity: 0.6; }

.restock-row-timer {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--ok);
}

.restock-row-timer--depleted {
    color: var(--danger);
    font-weight: 700;
    animation: restock-pulse 1s ease-in-out infinite;
}

.restock-row-btn {
    flex-shrink: 0;
    margin-left: 8px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tax);
    background: var(--tax-soft);
    border: 1px solid rgba(224, 185, 61, 0.4);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.restock-row-btn:hover {
    background: rgba(224, 185, 61, 0.28);
    border-color: rgba(224, 185, 61, 0.65);
}
.restock-row--needed .restock-row-btn {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(224, 85, 79, 0.5);
}
.restock-row--needed .restock-row-btn:hover {
    background: rgba(224, 85, 79, 0.28);
    border-color: rgba(224, 85, 79, 0.7);
}

.route-name-input {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    user-select: text;
}
.route-speed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}
.route-speed-row input {
    width: 60px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 4px 6px;
    font-family: var(--font-body);
    font-size: 12.5px;
    user-select: text;
}

.route-income-estimate {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--admin-accent);
    font-weight: 600;
    margin-top: -2px;
}

.route-list-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    font-size: 12.5px;
}
.route-list-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    gap: 8px;
}
.route-list-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.route-mini-btn {
    flex: 1;
    min-width: 64px;
    font-family: var(--font-body);
    font-size: 11.5px;
    padding: 5px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
}
.route-mini-btn:hover { background: rgba(255, 255, 255, 0.1); }
.route-mini-btn--danger { color: var(--danger); border-color: rgba(224, 85, 79, 0.35); }
.route-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.route-mini-btn:disabled:hover { background: rgba(255, 255, 255, 0.05); }

.biz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.biz-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.biz-color-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.biz-color-input {
    width: 36px;
    height: 28px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    cursor: pointer;
}

.biz-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.biz-checkbox-label input { cursor: pointer; }

.biz-form-actions {
    display: flex;
    gap: 8px;
}
.biz-form-actions .btn { flex: 1; }

.owner-tooltip {
    position: fixed;
    z-index: 400;
    padding: 5px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    pointer-events: none;
    white-space: nowrap;
}

#stock-chart-tooltip {
    z-index: 700;
}

#stock-chart-tooltip .is-up { color: var(--ok); }
#stock-chart-tooltip .is-down { color: var(--bad); }

.auth-body {
    position: relative;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image:
        radial-gradient(circle at 15% 10%, rgba(53, 208, 192, 0.05), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(230, 131, 46, 0.05), transparent 45%);
}

.auth-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(to right, rgba(53, 208, 192, 0.05) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(to bottom, rgba(53, 208, 192, 0.05) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(to right, rgba(53, 208, 192, 0.09) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(to bottom, rgba(53, 208, 192, 0.09) 0 1px, transparent 1px 22px);
    animation: bp-grid-drift 72s linear infinite;
}

@keyframes bp-grid-drift {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 176px 176px, 176px 176px, 44px 44px, 44px 44px; }
}

.auth-wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    opacity: 0;
    animation: bp-item-in 0.4s ease-out 1.9s forwards;
}
.auth-footer a {
    color: var(--text-muted);
    text-decoration: none;
}
.auth-footer a:hover {
    color: var(--admin-accent);
    text-decoration: underline;
}
.auth-footer-sep {
    opacity: 0.4;
}
.auth-footer-copy {
    opacity: 0.7;
}

.auth-beta-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: auth-logo-in 0.6s ease-out 0s forwards;
}
.auth-beta-badge {
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--bg);
    background: var(--admin-accent);
    border-radius: 5px;
    padding: 3px 7px;
}
.auth-beta-countdown {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 4px 9px;
}

.auth-logo-wrap {
    width: 108px;
    height: 108px;
    flex-shrink: 0;
    opacity: 0;
    animation: auth-logo-in 0.6s ease-out 0.15s forwards;
}

.auth-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 42%, transparent 68%);
    mix-blend-mode: screen;
    filter: contrast(1.12) saturate(1.1) drop-shadow(0 0 20px rgba(53, 208, 192, 0.3));
}

@keyframes auth-logo-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.blueprint-stage {
    position: relative;
    width: 320px;
}

.auth-card {
    width: 320px;
    padding: 26px 26px 28px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;

    background: rgba(24, 28, 35, 0);
    border: none;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    animation: bp-harden 0.55s ease-out 1.25s forwards;
}

@keyframes bp-harden {
    to {
        background: rgba(24, 28, 35, 0.88);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(10px);
    }
}

.bp-overlay {
    position: absolute;
    inset: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    animation: bp-overlay-breathe 3.6s ease-in-out 1.8s infinite;
}

@keyframes bp-overlay-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.85; }
}

.bp-edge {
    position: absolute;
    background-repeat: repeat;
}
.bp-edge-top, .bp-edge-bottom {
    left: 0;
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, var(--admin-accent) 0 6px, transparent 6px 11px);
    transform: scaleX(0);
}
.bp-edge-left, .bp-edge-right {
    top: 0;
    width: 2px;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom, var(--admin-accent) 0 6px, transparent 6px 11px);
    transform: scaleY(0);
}
.bp-edge-top { top: 0; transform-origin: left center; animation: bp-draw-x 0.35s ease-out 0s forwards; }
.bp-edge-right { right: 0; transform-origin: top center; animation: bp-draw-y 0.35s ease-out 0.3s forwards; }
.bp-edge-bottom { bottom: 0; transform-origin: right center; animation: bp-draw-x 0.35s ease-out 0.6s forwards; }
.bp-edge-left { left: 0; transform-origin: bottom center; animation: bp-draw-y 0.35s ease-out 0.9s forwards; }

@keyframes bp-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bp-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.bp-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0.4);
}
.bp-corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--admin-accent); border-left: 2px solid var(--admin-accent); animation: bp-corner-pop 0.25s ease-out 0s forwards; }
.bp-corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--admin-accent); border-right: 2px solid var(--admin-accent); animation: bp-corner-pop 0.25s ease-out 0.6s forwards; }
.bp-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--admin-accent); border-right: 2px solid var(--admin-accent); animation: bp-corner-pop 0.25s ease-out 0.9s forwards; }
.bp-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--admin-accent); border-left: 2px solid var(--admin-accent); animation: bp-corner-pop 0.25s ease-out 1.2s forwards; }

@keyframes bp-corner-pop {
    0% { opacity: 0; transform: scale(0.4); }
    65% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

.bp-tag {
    position: absolute;
    top: -9px;
    left: 16px;
    padding: 1px 7px;
    background: var(--grid-bg);
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--admin-accent);
    opacity: 0;
    animation: bp-tag-in 0.3s ease-out 1.0s forwards;
}
@keyframes bp-tag-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 0.85; transform: translateY(0); }
}

.bp-cad-cursor {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation:
        bp-cad-fade-in 0.4s ease-out 1.8s forwards,
        bp-cad-orbit 15s linear 2.2s infinite;
}
.bp-cad-cursor::before,
.bp-cad-cursor::after {
    content: '';
    position: absolute;
    background: var(--admin-accent);
}
.bp-cad-cursor::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.bp-cad-cursor::after { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }

@keyframes bp-cad-fade-in {
    to { opacity: 0.8; }
}

@keyframes bp-cad-orbit {
    0%, 6%    { left: 0%;   top: 0%; }
    19%       { left: 100%; top: 0%; }
    25%, 31%  { left: 100%; top: 0%; }
    44%       { left: 100%; top: 100%; }
    50%, 56%  { left: 100%; top: 100%; }
    69%       { left: 0%;   top: 100%; }
    75%, 81%  { left: 0%;   top: 100%; }
    94%       { left: 0%;   top: 0%; }
    100%      { left: 0%;   top: 0%; }
}

.bp-item {
    opacity: 0;
    transform: translateY(8px);
    animation: bp-item-in 0.4s ease-out forwards;
    animation-delay: calc(1.45s + (var(--i, 0) * 70ms));
}
@keyframes bp-item-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; background: rgba(24, 28, 35, 0.88); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); }
    .bp-overlay { animation: none; opacity: 0.7; }
    .bp-item { opacity: 1; transform: none; animation: none; }
    .auth-body::before { animation: none; }
    .bp-cad-cursor { display: none; }
    .auth-tab.is-active::after { animation: none; transform: scaleX(1); }
    .auth-logo-wrap { opacity: 1; animation: none; }
    .auth-beta-banner { opacity: 1; animation: none; }
}

.auth-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 4px;
}
.auth-tab {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}
.auth-tab.is-active {
    background: var(--admin-accent-soft);
    color: var(--text-primary);
}

.auth-tab.is-active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--admin-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: bp-draw-x 0.35s ease-out 1.55s forwards;
}

.auth-tab.is-disabled {
    opacity: 0.45;
}
.auth-tab.is-disabled.is-active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}
.auth-tab.is-disabled.is-active::after {
    background: var(--text-muted);
}

.auth-disabled-notice {
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
}

.auth-error {
    font-size: 12.5px;
    color: var(--bad);
    background: var(--danger-soft);
    border: 1px solid rgba(224, 85, 79, 0.35);
    border-radius: 8px;
    padding: 8px 10px;

    animation: bp-error-in 0.5s ease-out forwards;
    animation-delay: calc(1.45s + (var(--i, 0) * 70ms));
}
@keyframes bp-error-in {
    0%   { opacity: 0; transform: translate(0, 8px); }
    40%  { opacity: 1; transform: translate(0, 0); }
    55%  { transform: translate(-6px, 0); }
    70%  { transform: translate(5px, 0); }
    85%  { transform: translate(-3px, 0); }
    100% { opacity: 1; transform: translate(0, 0); }
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.auth-label::after {
    content: '\21A4 user_data \21A6';
    position: absolute;
    right: 0;
    bottom: -12px;
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.03em;
    color: var(--admin-accent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.auth-label:hover::after,
.auth-label:focus-within::after {
    opacity: 0.75;
    transform: translateY(0);
}

.stock-cash-label::after {
    content: none;
}

.ipo-label::after {
    content: none;
}

.auth-input {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    user-select: text;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.auth-input:focus {
    outline: none;
    border-color: var(--admin-accent-strong);
    box-shadow: 0 0 0 3px var(--admin-accent-soft), 0 0 14px var(--admin-accent-soft);
    transform: scale(1.01);
}

textarea.auth-input {
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
    cursor: pointer;
}
.auth-checkbox-label input {
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--admin-accent);
}
.auth-checkbox-label a {
    color: var(--admin-accent);
    text-decoration: underline;
    text-decoration-color: rgba(53, 208, 192, 0.35);
    text-underline-offset: 2px;
}
.auth-checkbox-label a:hover {
    text-decoration-color: var(--admin-accent);
}

.auth-submit {
    position: relative;
    justify-content: center;
    margin-top: 4px;
    border-color: var(--admin-accent-strong);
    background: var(--admin-accent-soft);
}

.auth-submit::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1.5px dashed var(--admin-accent);
    border-radius: inherit;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}
.auth-submit:hover::after {
    opacity: 0.9;
    transform: scaleX(1);
}

#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: opacity 0.35s ease;
}

#loading-overlay[hidden] { display: none; }
#loading-overlay.is-hidden { opacity: 0; pointer-events: none; }
.loading-box {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.loading-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.loading-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.loading-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: var(--admin-accent);
    transition: width 0.25s ease;
}
.loading-percent {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-muted);
}

.notification-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.notification-toast {
    max-width: 360px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--panel-bg);
    border: 1px solid rgba(224, 85, 79, 0.35);
    border-left: 3px solid var(--danger);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
}

.notification-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.notification-toast--error::before {
    content: '⚠ ';
    color: var(--danger);
}

.notification-toast--success {
    border: 1px solid rgba(67, 193, 122, 0.35);
    border-left: 3px solid var(--ok);
}
.notification-toast--success::before {
    content: '✓ ';
    color: var(--ok);
}

.custom-tile {
    position: absolute;
    width: 90px;
    height: 90px;
    box-sizing: border-box;
    transform-style: preserve-3d;
}

.cube-face {
    position: absolute;
    box-sizing: border-box;
    background: #808080;
    border: 1px solid #4a4a4a;
    transition: background 0.15s;
}

.shape-cube .cube-face-top { width: 90px; height: 90px; transform: translateZ(90px); background: var(--face-top, #9e9e9e); }
.shape-cube .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-cube .cube-face-front { width: 90px; height: 90px; transform-origin: bottom center; transform: rotateX(-90deg); bottom: 0; background: var(--face-mid, #808080); }
.shape-cube .cube-face-back { width: 90px; height: 90px; transform-origin: top center; transform: rotateX(90deg); top: 0; background: var(--face-mid, #808080); }
.shape-cube .cube-face-left { width: 90px; height: 90px; transform-origin: left center; transform: rotateY(-90deg); left: 0; background: var(--face-side, #666666); }
.shape-cube .cube-face-right { width: 90px; height: 90px; transform-origin: right center; transform: rotateY(90deg); right: 0; background: var(--face-side, #666666); }

.shape-slab .cube-face-top { width: 90px; height: 90px; transform: translateZ(30px); background: var(--face-top, #a8a8a8); }
.shape-slab .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-slab .cube-face-front { width: 90px; height: 30px; transform-origin: bottom center; transform: rotateX(-90deg); bottom: 0; background: var(--face-mid, #888888); }
.shape-slab .cube-face-back { width: 90px; height: 30px; transform-origin: top center; transform: rotateX(90deg); top: 0; background: var(--face-mid, #888888); }
.shape-slab .cube-face-left { width: 30px; height: 90px; transform-origin: left center; transform: rotateY(-90deg); left: 0; background: var(--face-side, #6e6e6e); }
.shape-slab .cube-face-right { width: 30px; height: 90px; transform-origin: right center; transform: rotateY(90deg); right: 0; background: var(--face-side, #6e6e6e); }

.shape-post .cube-face-top { width: 22.5px; height: 22.5px; left: 33.75px; top: 33.75px; transform: translateZ(90px); background: var(--face-top, #b0b0b0); }
.shape-post .cube-face-bottom { width: 22.5px; height: 22.5px; left: 33.75px; top: 33.75px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-post .cube-face-front { width: 22.5px; height: 90px; left: 33.75px; bottom: 33.75px; transform-origin: bottom center; transform: rotateX(-90deg); background: var(--face-mid, #888888); }
.shape-post .cube-face-back { width: 22.5px; height: 90px; left: 33.75px; top: 33.75px; transform-origin: top center; transform: rotateX(90deg); background: var(--face-mid, #888888); }
.shape-post .cube-face-left { width: 90px; height: 22.5px; left: 33.75px; top: 33.75px; transform-origin: left center; transform: rotateY(-90deg); background: var(--face-side, #6e6e6e); }
.shape-post .cube-face-right { width: 90px; height: 22.5px; right: 33.75px; top: 33.75px; transform-origin: right center; transform: rotateY(90deg); background: var(--face-side, #6e6e6e); }

.shape-wedge .cube-face-top { width: 90px; height: 127.28px; top: 0; transform-origin: top center; transform: translateZ(90px) rotateX(-45deg); background: var(--face-top, #a0a0a0); }
.shape-wedge .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-wedge .cube-face-back { width: 90px; height: 90px; top: 0; transform-origin: top center; transform: rotateX(90deg); background: var(--face-mid, #7b7b7b); }
.shape-wedge .cube-face-left { width: 90px; height: 90px; left: 0; top: 0; transform-origin: left center; transform: rotateY(-90deg); clip-path: polygon(0% 0%, 100% 0%, 0% 100%); background: var(--face-side, #666666); }
.shape-wedge .cube-face-right { width: 90px; height: 90px; right: 0; top: 0; transform-origin: right center; transform: rotateY(90deg); clip-path: polygon(0% 0%, 100% 0%, 100% 100%); background: var(--face-side, #666666); }

.shape-pyramid .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-pyramid .cube-face-front { width: 90px; height: 100.62px; bottom: 0; transform-origin: bottom center; transform: rotateX(-63.435deg); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: var(--face-top, #969696); }
.shape-pyramid .cube-face-back { width: 90px; height: 100.62px; top: 0; transform-origin: top center; transform: rotateX(63.435deg); clip-path: polygon(50% 100%, 0% 0%, 100% 0%); background: var(--face-mid, #888888); }
.shape-pyramid .cube-face-left { width: 100.62px; height: 90px; left: 0; top: 0; transform-origin: left center; transform: rotateY(-63.435deg); clip-path: polygon(0% 0%, 100% 50%, 0% 100%); background: var(--face-side, #707070); }
.shape-pyramid .cube-face-right { width: 100.62px; height: 90px; right: 0; top: 0; transform-origin: right center; transform: rotateY(63.435deg); clip-path: polygon(100% 0%, 0% 50%, 100% 100%); background: var(--face-dark, #606060); }

.shape-window .cube-face-top { width: 90px; height: 90px; transform: translateZ(90px); background: var(--face-top, #9e9e9e); }
.shape-window .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-window .cube-face-front {
    width: 90px; height: 90px; transform-origin: bottom center; transform: rotateX(-90deg); bottom: 0;
    background:
        linear-gradient(rgba(35, 35, 40, 0.55), rgba(35, 35, 40, 0.55)) center / 100% 5px no-repeat,
        linear-gradient(rgba(35, 35, 40, 0.55), rgba(35, 35, 40, 0.55)) center / 5px 100% no-repeat,
        linear-gradient(160deg, #c3e6ff, #6fa8d6) 10px 10px / calc(100% - 20px) calc(100% - 20px) no-repeat,
        var(--face-mid, #808080);
}
.shape-window .cube-face-back { width: 90px; height: 90px; transform-origin: top center; transform: rotateX(90deg); top: 0; background: var(--face-mid, #808080); }
.shape-window .cube-face-left { width: 90px; height: 90px; transform-origin: left center; transform: rotateY(-90deg); left: 0; background: var(--face-side, #666666); }
.shape-window .cube-face-right { width: 90px; height: 90px; transform-origin: right center; transform: rotateY(90deg); right: 0; background: var(--face-side, #666666); }

.shape-door .cube-face-top { width: 90px; height: 90px; transform: translateZ(90px); background: var(--face-top, #9e9e9e); }
.shape-door .cube-face-bottom { width: 90px; height: 90px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-door .cube-face-front {
    width: 90px; height: 90px; transform-origin: bottom center; transform: rotateX(-90deg); bottom: 0;
    background:
        radial-gradient(circle 4px at 74px 48px, #2b1c10, #2b1c10 4px, transparent 4.5px),
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) 14px 12px / calc(100% - 28px) 34px no-repeat,
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) 14px 54px / calc(100% - 28px) 24px no-repeat,
        linear-gradient(160deg, #8a5a34, #6b4423);
}
.shape-door .cube-face-back { width: 90px; height: 90px; transform-origin: top center; transform: rotateX(90deg); top: 0; background: var(--face-mid, #808080); }
.shape-door .cube-face-left { width: 90px; height: 90px; transform-origin: left center; transform: rotateY(-90deg); left: 0; background: var(--face-side, #666666); }
.shape-door .cube-face-right { width: 90px; height: 90px; transform-origin: right center; transform: rotateY(90deg); right: 0; background: var(--face-side, #666666); }

.shape-quarter .cube-face-top { width: 45px; height: 45px; transform: translateZ(45px); background: var(--face-top, #9e9e9e); }
.shape-quarter .cube-face-bottom { width: 45px; height: 45px; transform: translateZ(0px); background: var(--face-dark, #555555); }
.shape-quarter .cube-face-front { width: 45px; height: 45px; transform-origin: bottom center; transform: rotateX(-90deg); top: 0; background: var(--face-mid, #808080); }
.shape-quarter .cube-face-back { width: 45px; height: 45px; transform-origin: top center; transform: rotateX(90deg); top: 0; background: var(--face-mid, #808080); }
.shape-quarter .cube-face-left { width: 45px; height: 45px; transform-origin: left center; transform: rotateY(-90deg); left: 0; background: var(--face-side, #666666); }
.shape-quarter .cube-face-right { width: 45px; height: 45px; transform-origin: right center; transform: rotateY(90deg); left: 0; background: var(--face-side, #666666); }

.cube-face-2d {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #4a4a4a;

    transform-origin: top left;
}

.cube-face-2d-top { background: var(--face-top, #9e9e9e); }
.cube-face-2d-bottom { background: var(--face-dark, #555555); }
.cube-face-2d-front, .cube-face-2d-back { background: var(--face-mid, #808080); }
.cube-face-2d-left, .cube-face-2d-right { background: var(--face-side, #666666); }

[data-shape="pyramid"].cube-face-2d-front { background: var(--face-top, #969696); }
[data-shape="pyramid"].cube-face-2d-right { background: var(--face-dark, #606060); }

[data-shape="window"].cube-face-2d-front {
    background:
        linear-gradient(rgba(35, 35, 40, 0.55), rgba(35, 35, 40, 0.55)) center / 100% 5px no-repeat,
        linear-gradient(rgba(35, 35, 40, 0.55), rgba(35, 35, 40, 0.55)) center / 5px 100% no-repeat,
        linear-gradient(160deg, #c3e6ff, #6fa8d6) 10px 10px / calc(100% - 20px) calc(100% - 20px) no-repeat,
        var(--face-mid, #808080);
}
[data-shape="door"].cube-face-2d-front {
    background:
        radial-gradient(circle 4px at 74px 48px, #2b1c10, #2b1c10 4px, transparent 4.5px),
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) 14px 12px / calc(100% - 28px) 34px no-repeat,
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) 14px 54px / calc(100% - 28px) 24px no-repeat,
        linear-gradient(160deg, #8a5a34, #6b4423);
}