:root {
    --bg-black:      #080a0d;
    --bg-dark:       #0d0f13;
    --bg-panel:      #111418;
    --bg-element:    #181c22;
    --bg-hover:      #222830;
    --border-dark:   #252b35;
    --border-gold:   #a8956e;
    --text-main:     #cfd0d2;
    --text-sub:      #7a8090;
    --text-beige:    #d4c8ad;
    --eft-gold:      #b09a6e;
    --eft-gold-bright: #ccb98a;
    --eft-red:       #8c3b3b;
    --eft-green:     #4a7a4a;
    --eft-blue:      #4a6a8a;
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.45);
    --shadow-md:     0 4px 20px rgba(0,0,0,0.65);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.8);
    --radius:        3px;
    --tier-s: #ffd700; --tier-a: #c0c0c0; --tier-b: #cd7f32; --tier-c: #5a9e5a; --tier-d: #5a7a9e; --tier-f: #9e5a5a;
}
* { box-sizing: border-box; }
body {
    background: radial-gradient(ellipse at 50% 0%, #0f1318 0%, var(--bg-black) 70%);
    color: var(--text-main);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    min-height: 100vh;
}
input, select, textarea, button { font-family: 'Inter', 'Segoe UI', sans-serif; }
h1, h2, h3, h4, h5 { color: var(--text-beige); font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.text-beige { color: var(--text-beige) !important; } .text-sub { color: var(--text-sub) !important; } .text-gold { color: var(--eft-gold) !important; }
.container { max-width: 1600px; margin-top: 20px; padding-left: 15px; padding-right: 15px; }

/* Header with status indicator */
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.header-row h1 { margin: 0; font-size: 1.8rem; }
.status-indicator { display: flex; align-items: center; gap: 10px; background: var(--bg-element); border: 1px solid var(--border-dark); padding: 8px 15px; font-size: 0.85rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eft-green); animation: pulse 2s infinite; }
.status-dot.offline { background: var(--eft-red); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.nav-tabs-tarkov { border-bottom: 2px solid rgba(176,154,110,0.35); margin-bottom: 30px; display: flex; gap: 0; }
.nav-tab { background: var(--bg-panel); border: 1px solid var(--border-dark); border-bottom: none; color: var(--text-sub); padding: 14px 20px; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.18s ease; position: relative; top: 2px; flex: 1; text-align: center; border-radius: var(--radius) var(--radius) 0 0; }
.nav-tab:hover { background: var(--bg-element); color: var(--text-beige); }
.nav-tab.active { background: var(--bg-dark); color: var(--text-beige); border-color: var(--border-gold); border-bottom: 2px solid var(--bg-dark); box-shadow: 0 -2px 12px rgba(176,154,110,0.08); }
.tab-content { display: none; } .tab-content.active { display: block; }
.tarkov-panel { background: var(--bg-panel); border: 1px solid var(--border-dark); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.tarkov-panel h5 { border-bottom: 1px solid var(--border-gold); padding-bottom: 10px; margin-bottom: 15px; font-size: 1rem; }
.btn-tarkov { background: linear-gradient(180deg, var(--bg-element) 0%, var(--bg-dark) 100%); border: 1px solid var(--border-gold); color: var(--text-beige); font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; transition: all 0.18s ease; border-radius: var(--radius); cursor: pointer; }
.btn-tarkov:hover { background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-element) 100%); color: var(--eft-gold-bright); border-color: var(--eft-gold-bright); box-shadow: 0 0 12px rgba(176,154,110,0.15); }
.btn-tarkov:disabled { opacity: 0.5; cursor: not-allowed; }
.trader-group { background: var(--bg-element); border: 1px solid var(--border-dark); margin-bottom: 10px; }
.trader-header { display: flex; align-items: center; gap: 15px; padding: 15px; cursor: pointer; transition: background 0.2s; }
.trader-header:hover { background: var(--bg-hover); }
.trader-header img { width: 50px; height: 50px; border-radius: 0; border: 1px solid var(--border-gold); }
.trader-header h6 { margin: 0; font-size: 1.1rem; flex-grow: 1; }
.trader-quests { display: none; padding: 0 15px 15px; }
.trader-quests.show { display: block; }
.quest-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-dark); border: 1px solid var(--border-dark); margin-bottom: 6px; cursor: pointer; transition: all 0.15s ease; position: relative; }
.quest-row:hover { background: var(--bg-hover); border-color: var(--eft-gold); }
.quest-row.selected { background: rgba(158, 143, 107, 0.15); border-color: var(--eft-gold); }
.quest-row.completed { opacity: 0.6; background: rgba(74, 122, 74, 0.1); border-color: var(--eft-green); }
.quest-row.completed .quest-name { text-decoration: line-through; color: var(--text-sub); }
.quest-row.completed .complete-btn { background: var(--eft-green); color: #fff; }
.quest-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--eft-gold); cursor: pointer; flex-shrink: 0; }
.complete-btn { background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); padding: 2px 6px; font-size: 0.65rem; cursor: pointer; transition: all 0.15s; border-radius: 2px; flex-shrink: 0; }
.complete-btn:hover { background: var(--eft-green); color: #fff; border-color: var(--eft-green); }
.quest-prereqs { font-size: 0.7rem; color: var(--text-sub); margin-top: 3px; }
.quest-prereqs .prereq-tag { background: var(--bg-element); padding: 1px 5px; margin-right: 4px; border-radius: 2px; display: inline-block; margin-bottom: 2px; }
.quest-prereqs .prereq-done { color: var(--eft-green); text-decoration: line-through; opacity: 0.7; }
.quest-prereqs .prereq-pending { color: var(--text-sub); }

/* Quest info button in quest list */
.quest-info-btn {
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--eft-gold);
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    border-radius: 2px;
    opacity: 0.5;
    transition: all 0.15s;
    vertical-align: middle;
    line-height: 18px;
    text-align: center;
}
.quest-row:hover .quest-info-btn { opacity: 1; }
.quest-info-btn:hover { background: var(--eft-gold); color: #000; opacity: 1; }

/* Hideout Tracker Styles */
.hideout-station { background: var(--bg-element); border: 1px solid var(--border-dark); margin-bottom: 10px; }
.hideout-station.maxed { opacity: 0.6; border-color: var(--eft-green); }
.hideout-station-header { display: flex; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; transition: background 0.2s; }
.hideout-station-header:hover { background: var(--bg-hover); }
.hideout-station-header img { width: 48px; height: 48px; object-fit: contain; }
.hideout-station-header .station-info { flex-grow: 1; }
.hideout-station-header .station-name { font-weight: 600; color: var(--text-beige); font-size: 1rem; }
.hideout-station-header .station-level { font-size: 0.8rem; color: var(--text-sub); }
.hideout-station-header .station-level .current { color: var(--eft-gold); font-weight: 600; }
.hideout-station-levels { display: none; padding: 0 15px 15px; }
.hideout-station-levels.show { display: block; }
.hideout-level { background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 12px; margin-bottom: 8px; }
.hideout-level.completed { border-color: var(--eft-green); background: rgba(74, 122, 74, 0.1); }
.hideout-level.current-target { border-color: var(--eft-gold); background: rgba(158, 143, 107, 0.1); }
.hideout-level-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hideout-level-header h6 { margin: 0; font-size: 0.9rem; color: var(--text-beige); }
.hideout-level-header .level-status { font-size: 0.75rem; padding: 2px 8px; }
.hideout-level-header .level-status.done { background: var(--eft-green); color: #fff; }
.hideout-level-header .level-status.locked { background: var(--bg-element); color: var(--text-sub); }
.hideout-requirements { display: flex; flex-direction: column; gap: 8px; }
.hideout-req-section { font-size: 0.8rem; }
.hideout-req-section .req-title { color: var(--text-sub); margin-bottom: 4px; }
.hideout-req-items { display: flex; flex-wrap: wrap; gap: 6px; }
.hideout-req-item { display: flex; align-items: center; gap: 6px; background: var(--bg-element); padding: 4px 8px; font-size: 0.75rem; }
.hideout-req-item img { width: 24px; height: 24px; object-fit: contain; }
.hideout-req-item.owned { background: rgba(74, 122, 74, 0.2); border: 1px solid var(--eft-green); }
.hideout-req-item .item-count { color: var(--eft-gold); font-weight: 600; }
.hideout-req-item .item-name { color: var(--text-main); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-complete-btn { background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); padding: 4px 12px; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
.level-complete-btn:hover { background: var(--eft-green); color: #fff; border-color: var(--eft-green); }
.level-complete-btn.completed { background: var(--eft-green); color: #fff; border-color: var(--eft-green); }
.shopping-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-dark); border: 1px solid var(--border-dark); margin-bottom: 6px; }
.shopping-item img { width: 32px; height: 32px; object-fit: contain; }
.shopping-item .item-info { flex-grow: 1; }
.shopping-item .item-name { font-size: 0.85rem; color: var(--text-main); }
.shopping-item .item-for { font-size: 0.7rem; color: var(--text-sub); }
.shopping-item .item-count { color: var(--eft-gold); font-weight: 600; font-size: 0.9rem; }
.fir-badge { background: var(--eft-red); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 4px; border-radius: 2px; margin-left: 4px; }
.fir-required { border-left: 2px solid var(--eft-red); }
.shopping-item .fir-badge { font-size: 0.55rem; }

.quest-info { flex-grow: 1; min-width: 0; }
.quest-name { font-weight: 600; color: var(--text-beige); font-size: 0.95rem; }
.quest-name a { color: inherit; text-decoration: none; }
.quest-name a:hover { text-decoration: underline; color: var(--eft-gold-bright); }
.quest-meta { font-size: 0.8rem; color: var(--text-sub); display: flex; gap: 15px; flex-wrap: wrap; }
.badge-tarkov { background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); padding: 4px 10px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: rgba(158, 143, 107, 0.2); border-color: var(--eft-gold); color: var(--eft-gold); }
.badge-quest { background: rgba(255, 165, 0, 0.15); border: 1px solid rgba(255, 165, 0, 0.4); color: #ffa500; padding: 3px 8px; font-size: 0.68rem; font-weight: 600; cursor: help; }
.badge-flea { background: rgba(80, 200, 120, 0.12); border: 1px solid rgba(80, 200, 120, 0.35); color: #50c878; padding: 3px 8px; font-size: 0.68rem; font-weight: 600; cursor: help; display: inline-flex; align-items: center; gap: 4px; }
.flea-trend { font-size: 0.62rem; font-weight: 700; }
.flea-trend-up { color: #e05555; }
.flea-trend-down { color: #50c878; }
.form-select-tarkov, .form-control-tarkov { background: var(--bg-element); border: 1px solid var(--border-dark); border-radius: var(--radius); color: var(--text-main); padding: 10px 15px; font-family: 'Inter', sans-serif; font-size: 0.88rem; transition: border-color 0.18s, box-shadow 0.18s; }
.form-select-tarkov:focus, .form-control-tarkov:focus { background: var(--bg-hover); border-color: var(--eft-gold); color: var(--text-main); box-shadow: 0 0 0 3px rgba(176,154,110,0.08); outline: none; }
.form-select-tarkov option { background: var(--bg-dark); color: var(--text-main); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; padding: 6px 10px; }
.form-select-tarkov option:disabled { color: var(--text-sub); opacity: 0.5; }
#map { height: 700px; background: var(--bg-dark); border: 1px solid var(--border-dark); overflow: hidden !important; position: relative; }
.leaflet-container { overflow: hidden !important; }

/* Floor Tabs */
.floor-tabs { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 2px; background: rgba(30, 30, 30, 0.95); border: 1px solid var(--border-dark); border-radius: 4px; padding: 4px; }
.floor-tabs-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-sub); text-align: center; padding: 2px 0; border-bottom: 1px solid var(--border-dark); margin-bottom: 2px; }
.floor-tab { padding: 6px 12px; font-size: 0.75rem; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); cursor: pointer; transition: all 0.2s; text-align: center; min-width: 40px; }
.floor-tab:hover { background: var(--bg-hover); color: var(--text-main); }
.floor-tab.active { background: var(--eft-gold); color: #000; font-weight: 600; border-color: var(--eft-gold); }
.floor-tab .marker-count { display: inline-block; background: rgba(255,255,255,0.2); padding: 1px 5px; border-radius: 8px; font-size: 0.65rem; margin-left: 4px; }
.floor-tab.active .marker-count { background: rgba(0,0,0,0.2); }

/* Other floors indicator */
.other-floors-hint { position: absolute; bottom: 10px; right: 10px; z-index: 1000; background: rgba(196, 30, 58, 0.9); color: #fff; padding: 8px 14px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; display: none; animation: pulse-hint 2s infinite; cursor: pointer; }
.other-floors-hint:hover { background: rgba(196, 30, 58, 1); }
@keyframes pulse-hint { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.leaflet-pane { overflow: visible !important; }
.leaflet-map-pane { overflow: visible !important; }
.leaflet-tooltip-pane { overflow: visible !important; z-index: 9999 !important; }
.leaflet-popup-pane { overflow: visible !important; z-index: 9998 !important; }
.map-controls { display: flex; align-items: center; gap: 15px; padding: 10px 15px; background: var(--bg-element); border: 1px solid var(--border-dark); border-bottom: none; font-size: 0.85rem; color: var(--text-sub); }
.map-controls .btn-tarkov { padding: 5px 12px; font-size: 0.8rem; }
.marker-count { margin-left: auto; color: var(--eft-gold); font-weight: 600; }
.map-hint { padding: 8px 15px; background: rgba(158, 143, 107, 0.1); border: 1px solid var(--border-dark); border-top: none; font-size: 0.8rem; color: var(--eft-gold); }
.map-hint.warning { background: rgba(140, 59, 59, 0.15); color: var(--eft-red); }
.leaflet-container { background: var(--bg-dark); }
.leaflet-areasPane-pane { z-index: 550 !important; }
.leaflet-areasPane-pane svg { pointer-events: auto !important; }
.leaflet-areasPane-pane path { pointer-events: auto !important; stroke-width: 3px !important; }
.map-legend { background: var(--bg-element); border: 1px solid var(--border-dark); border-top: none; padding: 10px 15px; }
.legend-title { font-weight: 600; color: var(--text-beige); font-size: 0.85rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.legend-items { display: flex; flex-wrap: wrap; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-main); }
.legend-color { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; flex-shrink: 0; }
.marker-label { background: rgba(0,0,0,0.95) !important; border: 1px solid var(--eft-gold) !important; color: var(--text-beige) !important; font-family: 'Rajdhani', sans-serif !important; padding: 8px 12px !important; border-radius: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }
.leaflet-tooltip { white-space: nowrap; z-index: 9999 !important; }
.leaflet-popup { z-index: 9999 !important; }
.leaflet-popup-content-wrapper { background: var(--bg-panel) !important; color: var(--text-main) !important; border-radius: 0 !important; border: 1px solid var(--eft-gold) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; }
.leaflet-popup-content { margin: 12px 15px !important; }
.leaflet-popup-tip { background: var(--bg-panel) !important; border: 1px solid var(--eft-gold) !important; border-top: none !important; border-left: none !important; }
.leaflet-popup-close-button { color: var(--text-sub) !important; font-size: 20px !important; padding: 8px !important; }
.leaflet-popup-close-button:hover { color: var(--eft-gold) !important; }
.quest-marker-popup { min-width: 220px; max-width: 300px; }
.quest-marker-popup h6 { color: var(--eft-gold); margin-bottom: 8px; font-size: 1rem; font-weight: 600; }
.quest-marker-popup p { margin: 0; font-size: 0.9rem; color: var(--text-main); line-height: 1.4; }
.quest-marker-popup .obj-type { display: inline-block; padding: 3px 10px; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; letter-spacing: 1px; }
.quest-marker-popup .obj-num { display: inline-block; background: var(--eft-gold); color: #000; font-weight: 700; padding: 3px 8px; font-size: 0.8rem; margin-right: 8px; }
.quest-marker-popup .popup-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-dark); font-size: 0.75rem; color: var(--text-sub); }
.quest-marker-popup .marker-note-display { background: rgba(158, 143, 107, 0.15); border-left: 3px solid var(--eft-gold); padding: 8px 10px; margin: 10px 0; font-size: 0.85rem; color: var(--text-beige); font-style: italic; }
.quest-marker-popup .popup-note-btn { display: block; width: 100%; margin-top: 10px; padding: 6px 10px; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.quest-marker-popup .popup-note-btn:hover { background: var(--bg-hover); color: var(--eft-gold); border-color: var(--eft-gold); }
.quest-marker-popup .popup-action-btn { display: block; width: 100%; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--border-dark); font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.quest-marker-popup .popup-hide-btn { background: rgba(196, 30, 58, 0.2); color: var(--eft-red); }
.quest-marker-popup .popup-hide-btn:hover { background: rgba(196, 30, 58, 0.4); border-color: var(--eft-red); }
.quest-marker-popup .popup-delete-btn { background: rgba(196, 30, 58, 0.2); color: var(--eft-red); }
.quest-marker-popup .popup-delete-btn:hover { background: rgba(196, 30, 58, 0.4); border-color: var(--eft-red); }
.obj-pickup { background: #2d5a2d; color: #7fff7f; }
.obj-place { background: #5a5a2d; color: #ffff7f; }
.obj-mark { background: #5a2d5a; color: #ff7fff; }
.obj-find { background: #2d5a5a; color: #7fffff; }
.obj-kill { background: #5a2d2d; color: #ff7f7f; }
.obj-locate { background: #2d2d5a; color: #7f7fff; }
.marker-number { position: absolute; top: -8px; right: -8px; background: var(--eft-gold); color: #000; font-weight: 700; font-size: 0.65rem; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; }
.quest-marker-icon { background: transparent !important; border: none !important; }
.item-box { display: flex; align-items: center; gap: 10px; background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 8px 12px; margin-bottom: 6px; }
.item-box img { width: 40px; height: 40px; object-fit: contain; }
.item-label { font-size: 0.65rem; padding: 2px 6px; font-weight: 700; letter-spacing: 1px; }
.label-find { background: var(--eft-red); color: #fff; }
.label-given { background: var(--eft-green); color: #fff; }
.status-provided { border-left: 3px solid var(--eft-green); }
.status-acquire { border-left: 3px solid var(--eft-red); }
.unlock-card { background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 12px; margin-bottom: 8px; }
.unlock-link { color: var(--eft-gold); text-decoration: none; }
.unlock-link:hover { color: var(--eft-gold-bright); text-decoration: underline; }
.quest-objectives-group { background: var(--bg-dark); border: 1px solid var(--border-dark); margin-bottom: 10px; padding: 12px; }
.quest-objectives-header { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-beige); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-dark); }
.quest-objectives-list { list-style: none; padding: 0; margin: 0; }
.quest-objectives-list li { color: var(--text-sub); font-size: 0.9rem; padding: 4px 0; padding-left: 22px; position: relative; }
.quest-objectives-list .obj-index { position: absolute; left: 0; color: var(--eft-gold); font-weight: 600; }
.caliber-group { margin-bottom: 20px; }
.caliber-header { background: var(--bg-element); border: 1px solid var(--border-dark); padding: 10px 15px; font-weight: 600; color: var(--text-beige); margin-bottom: 5px; }
.ammo-card { display: flex; align-items: center; gap: 10px; background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 10px 12px; margin-bottom: 4px; cursor: pointer; transition: all 0.15s ease; }
.ammo-card:hover { background: var(--bg-hover); border-color: var(--eft-gold); }
.ammo-card.owned { background: rgba(74, 122, 74, 0.15); border-color: var(--eft-green); }
.ammo-card img { width: 45px; height: 45px; object-fit: contain; }
.ammo-stats { display: flex; gap: 12px; font-size: 0.8rem; color: var(--text-sub); margin-top: 3px; }
.stat-dmg { color: #e07050; }
.stat-pen { color: #50a0e0; }
.stat-price { color: var(--eft-gold); }
.stat-highlight { font-weight: 700; text-decoration: underline; }
.tier-source { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 2px; text-transform: uppercase; }
.source-pen { background: rgba(80, 160, 224, 0.2); color: #50a0e0; }
.source-dmg { background: rgba(224, 112, 80, 0.2); color: #e07050; }
.source-both { background: rgba(158, 143, 107, 0.2); color: var(--eft-gold); }
.tier-badge { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; font-weight: 700; font-size: 0.85rem; border-radius: 0; flex-shrink: 0; }
.tier-S { background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); color: #000; }
.tier-A { background: linear-gradient(135deg, #e0e0e0 0%, #a0a0a0 100%); color: #000; }
.tier-B { background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%); color: #fff; }
.tier-C { background: linear-gradient(135deg, #5a9e5a 0%, #3a6e3a 100%); color: #fff; }
.tier-D { background: linear-gradient(135deg, #5a7a9e 0%, #3a5a7e 100%); color: #fff; }
.tier-F { background: linear-gradient(135deg, #9e5a5a 0%, #7e3a3a 100%); color: #fff; }
.analysis-panel { display: flex; gap: 20px; }
.analysis-col { flex: 1; }
.analysis-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--bg-element); border: 1px solid var(--border-dark); margin-bottom: 10px; }
.analysis-header h6 { margin: 0; font-size: 0.9rem; }
.analysis-list { max-height: 300px; overflow-y: auto; }
.search-box { position: relative; margin-bottom: 15px; }
.search-box input { width: 100%; padding-right: 35px; }
.loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--text-sub); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border-dark); border-top-color: var(--eft-gold); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tier Editor Styles */
.tier-config { margin-bottom: 20px; }
.tier-config-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-dark); border: 1px solid var(--border-dark); margin-bottom: 4px; }
.tier-config-row .tier-badge { flex-shrink: 0; }
.tier-config-row label { font-size: 0.8rem; color: var(--text-sub); min-width: 80px; }
.tier-config-row input[type="number"] { width: 70px; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-main); padding: 4px 8px; font-family: 'Rajdhani', sans-serif; text-align: center; }
.tier-config-row input[type="number"]:focus { border-color: var(--eft-gold); outline: none; }
.tier-override { position: relative; }
.tier-override-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-sub); cursor: pointer; padding: 2px 6px; font-size: 0.7rem; }
.tier-override-btn:hover { color: var(--eft-gold); }
.ammo-card.overridden { border-left: 3px solid var(--eft-gold); }
.override-indicator { font-size: 0.65rem; color: var(--eft-gold); margin-left: auto; }
.tier-select-mini { background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-main); padding: 2px 6px; font-size: 0.75rem; cursor: pointer; }

/* New Tier Config Dropdown System */
.stat-selector { margin-bottom: 15px; }
.stat-selector label { display: block; font-size: 0.85rem; color: var(--text-beige); margin-bottom: 8px; }
.stat-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.stat-checkbox { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--bg-dark); border: 1px solid var(--border-dark); cursor: pointer; font-size: 0.75rem; color: var(--text-sub); transition: all 0.2s; }
.stat-checkbox:hover { border-color: var(--eft-gold); }
.stat-checkbox.active { background: rgba(158, 143, 107, 0.2); border-color: var(--eft-gold); color: var(--text-beige); }
.stat-checkbox input { display: none; }
.threshold-editor { background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 12px; }
.threshold-editor-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.threshold-editor-header select { flex: 1; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-main); padding: 6px 10px; font-family: 'Rajdhani', sans-serif; }
.threshold-editor-header select:focus { border-color: var(--eft-gold); outline: none; }
.threshold-direction { font-size: 0.7rem; color: var(--text-sub); padding: 2px 6px; background: var(--bg-element); }
.threshold-direction.higher { color: var(--eft-green); }
.threshold-direction.lower { color: #e07050; }
.threshold-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.threshold-item { text-align: center; }
.threshold-item .tier-badge { display: block; margin: 0 auto 4px; width: 28px; height: 28px; line-height: 28px; }
.threshold-item input { width: 100%; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-main); padding: 4px; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; }
.threshold-item input:focus { border-color: var(--eft-gold); outline: none; }

/* Inventory Dashboard */
.inventory-dashboard { background: var(--bg-panel); border: 1px solid var(--border-dark); margin-bottom: 20px; }
.dashboard-toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; cursor: pointer; color: var(--text-beige); font-size: 0.9rem; }
.dashboard-toggle:hover { background: var(--bg-element); }
.dashboard-content { padding: 0 15px 15px; }
.dashboard-content.collapsed { display: none; }
.dashboard-grid { display: flex; gap: 15px; flex-wrap: wrap; }
.dashboard-item { flex: 1; min-width: 120px; background: var(--bg-dark); padding: 10px; text-align: center; border: 1px solid var(--border-dark); }
.dashboard-item.dashboard-total { background: rgba(158, 143, 107, 0.15); border-color: var(--border-gold); }
.dash-label { display: block; font-size: 0.75rem; color: var(--text-sub); margin-bottom: 5px; }
.dash-value { display: block; font-size: 1rem; color: var(--text-beige); font-weight: 600; }
.dash-percent { display: block; font-size: 0.8rem; color: var(--eft-green); }
.dash-value-rub { display: block; font-size: 0.75rem; color: var(--eft-gold); margin-top: 3px; }

/* Penetration Matrix */
.pen-matrix-container { overflow-x: auto; }
.pen-matrix { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 0.8rem; }
.pen-matrix th, .pen-matrix td { border: 1px solid var(--border-dark); padding: 6px 8px; text-align: center; }
.pen-matrix th { background: var(--bg-element); color: var(--text-beige); font-weight: 600; position: sticky; top: 0; }
.pen-matrix th.caliber-header { background: var(--bg-dark); text-align: left; padding-left: 15px; }
.pen-matrix td.ammo-name { text-align: left; background: var(--bg-dark); color: var(--text-main); white-space: nowrap; position: sticky; left: 0; }
.pen-matrix td.ammo-pen { color: var(--text-sub); font-size: 0.75rem; }
.pen-cell { font-weight: 600; min-width: 50px; }
.pen-cell.pen-high { background: rgba(74, 140, 74, 0.4); color: #7fff7f; }
.pen-cell.pen-mid { background: rgba(180, 150, 50, 0.4); color: #ffd700; }
.pen-cell.pen-low { background: rgba(140, 60, 60, 0.4); color: #ff7f7f; }
.pen-cell.pen-none { background: rgba(60, 60, 60, 0.3); color: #666; }
.pen-legend { display: flex; gap: 20px; margin-bottom: 15px; font-size: 0.8rem; flex-wrap: wrap; }
.pen-legend-item { display: flex; align-items: center; gap: 6px; }
.pen-legend-color { width: 20px; height: 20px; border: 1px solid var(--border-dark); }

/* Bulk Select */
.bulk-mode .item-checkbox { display: inline-block !important; }
.item-checkbox { display: none; margin-right: 8px; accent-color: var(--eft-gold); }
.bulk-controls { display: none; margin-bottom: 15px; padding: 10px; background: var(--bg-element); border: 1px solid var(--border-gold); }
.bulk-mode .bulk-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bulk-selected { background: rgba(158, 143, 107, 0.2) !important; border-color: var(--eft-gold) !important; }

/* Keyboard Shortcuts Help */
.shortcuts-help { position: fixed; bottom: 15px; right: 15px; background: var(--bg-panel); border: 1px solid var(--border-dark); padding: 8px 12px; font-size: 0.75rem; color: var(--text-sub); z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.shortcuts-help kbd { background: var(--bg-dark); padding: 2px 6px; border-radius: 3px; margin: 0 2px; color: var(--text-beige); }

/* Quest Item Tracker */
.item-tracker-progress { display: flex; align-items: center; gap: 10px; }
.progress-text { font-size: 0.85rem; color: var(--text-beige); font-weight: 600; }
.progress-bar-mini { width: 80px; height: 6px; background: var(--bg-dark); border: 1px solid var(--border-dark); }
.progress-fill { height: 100%; background: var(--eft-green); transition: width 0.3s ease; }

.quest-items-group { background: var(--bg-dark); border: 1px solid var(--border-dark); margin-bottom: 10px; }
.quest-items-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-element); border-bottom: 1px solid var(--border-dark); cursor: pointer; }
.quest-items-header:hover { background: rgba(158, 143, 107, 0.1); }
.quest-items-header .quest-color { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; }
.quest-items-header .quest-name { flex: 1; font-weight: 600; color: var(--text-beige); font-size: 0.85rem; }
.quest-items-header .quest-item-count { font-size: 0.75rem; color: var(--text-sub); }
.quest-items-list { padding: 8px; }
.quest-items-list.collapsed { display: none; }

.tracker-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-panel); border: 1px solid var(--border-dark); margin-bottom: 4px; transition: all 0.2s; }
.tracker-item:hover { border-color: var(--border-gold); }
.tracker-item.collected { opacity: 0.6; background: rgba(74, 140, 74, 0.1); border-color: var(--eft-green); }
.tracker-item.collected .item-name { text-decoration: line-through; }
.tracker-item img { width: 32px; height: 32px; object-fit: contain; }
.tracker-item .item-checkbox { accent-color: var(--eft-green); width: 18px; height: 18px; cursor: pointer; }
.tracker-item .item-info { flex: 1; }
.tracker-item .item-name { color: var(--text-main); font-size: 0.85rem; }
.tracker-item .item-meta { font-size: 0.7rem; color: var(--text-sub); display: flex; gap: 8px; margin-top: 2px; }
.tracker-item .item-count { font-weight: 600; color: var(--eft-gold); }
.tracker-item .fir-badge { background: var(--eft-green); color: #000; padding: 1px 5px; font-size: 0.65rem; font-weight: 600; }
.tracker-item .handover-badge { background: var(--eft-gold); color: #000; padding: 1px 5px; font-size: 0.65rem; font-weight: 600; }
.tracker-item .given-badge { background: #4a8c4a; color: #fff; padding: 1px 5px; font-size: 0.65rem; font-weight: 600; }

.tracker-item .collected-input { display: flex; align-items: center; gap: 5px; }
.tracker-item .collected-input input { width: 40px; background: var(--bg-dark); border: 1px solid var(--border-dark); color: var(--text-main); text-align: center; padding: 2px; font-size: 0.8rem; }
.tracker-item .collected-input input:focus { border-color: var(--eft-gold); outline: none; }
.tracker-item .collected-input span { color: var(--text-sub); font-size: 0.8rem; }

/* Multi-Map Tabs */
.multi-map-tabs { background: var(--bg-element); border: 1px solid var(--border-dark); border-bottom: none; position: relative; }
.map-tabs-container { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--eft-gold) var(--bg-dark); }
.map-tabs-container::-webkit-scrollbar { height: 6px; }
.map-tabs-container::-webkit-scrollbar-track { background: var(--bg-dark); }
.map-tabs-container::-webkit-scrollbar-thumb { background: var(--eft-gold); border-radius: 3px; }
.map-tabs-container::-webkit-scrollbar-thumb:hover { background: var(--eft-gold-bright); }
.map-tab { flex: 0 0 auto; min-width: 140px; max-width: 240px; padding: 8px 18px; background: var(--bg-dark); border-right: 1px solid var(--border-dark); cursor: pointer; color: var(--text-sub); transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.map-tab:hover { background: var(--bg-element); color: var(--text-main); }
.map-tab.active { background: var(--bg-panel); color: var(--eft-gold); border-bottom: 2px solid var(--eft-gold); }
.map-tab .tab-content-wrapper { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.map-tab .tab-header { display: flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.8rem; }
.map-tab .tab-map-name { white-space: nowrap; }
.map-tab .tab-quest-count { font-size: 0.62rem; padding: 1px 5px; background: rgba(158, 143, 107, 0.25); border-radius: 2px; color: var(--text-sub); font-weight: 400; letter-spacing: 0; flex-shrink: 0; }
.map-tab.active .tab-quest-count { background: rgba(158, 143, 107, 0.4); color: var(--eft-gold); }
.map-tab .tab-quest-names { font-size: 0.68rem; color: var(--text-sub); font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; text-align: center; line-height: 1.3; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tab.active .tab-quest-names { color: var(--text-beige); opacity: 1; }
.map-tab .tab-any-badge { font-size: 0.55rem; opacity: 0.5; margin-left: 1px; }
.map-hint.multi-map { color: var(--eft-gold); border-color: rgba(158, 143, 107, 0.3); background: rgba(158, 143, 107, 0.08); }
.map-hint.multi-map strong { color: var(--text-beige); }

/* Fandom Overlay Controls - floating panel inside map */
.map-overlay-controls { position: absolute; top: 8px; right: 8px; z-index: 1000; background: rgba(30, 29, 26, 0.92); border: 1px solid var(--border-dark); border-radius: 4px; backdrop-filter: blur(4px); max-height: calc(100% - 16px); display: flex; flex-direction: column; min-width: 180px; max-width: 280px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.fandom-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; font-size: 0.8rem; color: var(--text-sub); transition: color 0.15s; user-select: none; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.fandom-overlay-header:hover { color: var(--eft-gold); }
.fandom-overlay-arrow { font-size: 0.75rem; color: var(--text-sub); opacity: 0.6; }
.fandom-overlay-panel { padding: 2px 10px 8px; overflow-y: auto; max-height: 400px; }
.fandom-overlay-panel::-webkit-scrollbar { width: 4px; }
.fandom-overlay-panel::-webkit-scrollbar-track { background: transparent; }
.fandom-overlay-panel::-webkit-scrollbar-thumb { background: rgba(158, 143, 107, 0.3); border-radius: 2px; }
.fandom-overlay-panel::-webkit-scrollbar-thumb:hover { background: rgba(158, 143, 107, 0.5); }
.fandom-group { margin-bottom: 2px; border-bottom: 1px solid rgba(100, 95, 80, 0.2); padding-bottom: 4px; }
.fandom-group:last-child { border-bottom: none; }
.fandom-group-header { display: flex; align-items: center; gap: 8px; padding: 5px 2px; cursor: pointer; user-select: none; }
.fandom-group-header:hover .fandom-group-label { color: var(--text-beige); }
.fandom-group-label { font-size: 0.78rem; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.4px; flex: 1; font-weight: 600; }
.fandom-group-count { font-size: 0.7rem; color: var(--text-sub); opacity: 0.5; }
.fandom-group-arrow { font-size: 0.75rem; color: var(--text-sub); opacity: 0.5; width: 12px; text-align: center; font-weight: 700; font-family: monospace; }
.fandom-group-items { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 6px 0; }
.fandom-cat-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 0.78rem; color: var(--text-sub); transition: all 0.12s; border-radius: 3px; white-space: nowrap; line-height: 1.5; }
.fandom-cat-btn:hover { border-color: var(--border-gold); color: var(--text-beige); background: rgba(158, 143, 107, 0.06); }
.fandom-cat-btn.active { background: rgba(158, 143, 107, 0.15); border-color: var(--eft-gold); color: var(--eft-gold); }
.fandom-cat-btn .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fandom-cat-btn .cat-label { }
.fandom-cat-btn .cat-count { opacity: 0.4; font-size: 0.7rem; }
.fandom-overlay-icon { background: none !important; border: none !important; }
.overlay-toggle:hover { border-color: var(--eft-gold); color: var(--text-beige); }
.overlay-toggle:has(input:checked) { background: rgba(158, 143, 107, 0.2); border-color: var(--eft-gold); color: var(--eft-gold); }
.overlay-toggle input { display: none; }
.overlay-icon { font-size: 1rem; }
.overlay-icon.extract-pmc { color: #4CAF50; }
.overlay-icon.extract-scav { color: #FF9800; }
.overlay-icon.hazard { color: #f44336; }
.overlay-icon.locks { color: #9C27B0; }

/* Map Overlay Markers - Extract Types with Color Coding */
.overlay-marker { border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform 0.15s; cursor: pointer; }
.overlay-marker:hover { transform: scale(1.15); z-index: 1000 !important; }
/* PMC = Green */
.overlay-marker.extract-pmc { background: rgba(76, 175, 80, 0.9); border: 2px solid #81C784; color: #fff; }
/* Scav = Yellow/Amber */
.overlay-marker.extract-scav { background: rgba(255, 193, 7, 0.9); border: 2px solid #FFD54F; color: #000; }
/* Co-Op/Shared = Blue */
.overlay-marker.extract-shared { background: rgba(33, 150, 243, 0.9); border: 2px solid #64B5F6; color: #fff; }
/* Restricted/Conditional = Red */
.overlay-marker.extract-restricted { background: rgba(244, 67, 54, 0.9); border: 2px solid #E57373; color: #fff; }
/* Legacy types */
.overlay-marker.hazard { background: rgba(244, 67, 54, 0.9); border: 2px solid #E57373; color: #fff; }
.overlay-marker.lock { background: rgba(156, 39, 176, 0.9); border: 2px solid #BA68C8; color: #fff; }
.overlay-popup { min-width: 180px; }
.overlay-popup h6 { color: var(--eft-gold); margin-bottom: 6px; font-size: 0.95rem; }
.overlay-popup .overlay-type { font-size: 0.7rem; padding: 2px 6px; display: inline-block; margin-bottom: 6px; border-radius: 2px; }
.overlay-popup .overlay-type.pmc { background: #4CAF50; color: #fff; }
.overlay-popup .overlay-type.scav { background: #FFC107; color: #000; }
.overlay-popup .overlay-type.shared { background: #2196F3; color: #fff; }
.overlay-popup .overlay-type.restricted { background: #f44336; color: #fff; }
.overlay-popup .overlay-type.hazard { background: #f44336; color: #fff; }
.overlay-popup .overlay-type.lock { background: #9C27B0; color: #fff; }
.overlay-popup .overlay-detail { font-size: 0.8rem; color: var(--text-sub); margin-top: 4px; }

/* Global Loading Screen */
.global-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}
.global-loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}
.loading-content {
    text-align: center;
    max-width: 400px;
    padding: 40px;
}
.loading-spinner-large {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.spinner-large {
    width: 60px;
    height: 60px;
    border: 4px solid var(--border-dark);
    border-top: 4px solid var(--eft-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.loading-progress-container {
    width: 100%;
    height: 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-radius: 3px;
    margin-top: 20px;
    overflow: hidden;
}
.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--eft-gold) 0%, #d4a84b 100%);
    width: 0%;
    transition: width 0.3s ease;
}
.loading-checkmark {
    color: #4a8c4a;
    margin-right: 5px;
}
.loading-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--text-sub);
    font-size: 0.8rem;
}
.loading-item.done {
    color: var(--text-main);
}
.loading-item.active {
    color: var(--eft-gold);
}
.loading-item.error {
    color: var(--eft-red);
}

/* Login System */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-element);
    border: 1px solid var(--eft-gold);
    padding: 5px 12px;
    font-size: 0.8rem;
    color: var(--text-beige);
}
.user-badge .user-email {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edit-mode-badge {
    background: var(--eft-red);
    color: #fff;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: edit-pulse 1.5s infinite;
}
@keyframes edit-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99998;
    justify-content: center;
    align-items: center;
}
.login-modal.show {
    display: flex;
}
.login-modal-content {
    background: var(--bg-panel);
    border: 2px solid var(--border-gold);
    padding: 30px;
    max-width: 400px;
    width: 90%;
}
.login-modal-content h3 {
    margin-bottom: 20px;
    text-align: center;
}
.login-form-group {
    margin-bottom: 15px;
}
.login-form-group label {
    display: block;
    color: var(--text-beige);
    font-size: 0.85rem;
    margin-bottom: 5px;
}
.login-form-group input {
    width: 100%;
    padding: 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    font-size: 0.9rem;
}
.login-form-group input:focus {
    outline: none;
    border-color: var(--eft-gold);
}
.login-error {
    color: var(--eft-red);
    font-size: 0.8rem;
    margin-bottom: 10px;
    display: none;
}
.login-error.show {
    display: block;
}
.login-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.login-buttons button {
    flex: 1;
}

/* Modal Overlay (used for login, etc.) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(2px);
    z-index: 99998;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border-gold);
    border-radius: calc(var(--radius) * 2);
    padding: 28px;
    width: 90%;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(176,154,110,0.06);
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border: 1px solid var(--border-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--eft-gold);
    border-color: var(--eft-gold);
}
::-webkit-scrollbar-corner {
    background: var(--bg-dark);
}
/* Firefox scrollbar */
#quest-list, .analysis-list, #ammo-list, #weapons-list, #gear-list, #attachments-list {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) var(--bg-dark);
}

/* Leaflet Zoom Controls Styling */
.leaflet-control-zoom {
    border: 1px solid var(--border-gold) !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.leaflet-control-zoom a {
    background: var(--bg-element) !important;
    color: var(--eft-gold) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-dark) !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}
.leaflet-control-zoom a:hover {
    background: var(--eft-gold) !important;
    color: #000 !important;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font-family: 'Rajdhani', sans-serif !important;
}

/* Draggable Marker Styles (Edit Mode) */
.leaflet-marker-draggable {
    cursor: move !important;
}
.leaflet-marker-draggable > div > div:first-child {
    box-shadow: 0 0 8px 2px var(--eft-gold) !important;
    animation: marker-glow 1.5s ease-in-out infinite;
}
@keyframes marker-glow {
    0%, 100% { box-shadow: 0 0 8px 2px var(--eft-gold); }
    50% { box-shadow: 0 0 15px 4px var(--eft-gold-bright); }
}
.leaflet-marker-icon.marker-dragging {
    z-index: 10000 !important;
    opacity: 0.8;
}

/* Marker Creator Panel */
.marker-creator-panel {
    background: var(--bg-panel);
    border: 2px solid var(--eft-gold);
    padding: 15px;
    margin-bottom: 10px;
    display: none;
}
.marker-creator-panel.active { display: block; }
.marker-creator-panel h6 { color: var(--eft-gold); margin-bottom: 12px; font-size: 0.9rem; }
.marker-creator-panel .objective-select {
    width: 100%;
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    padding: 8px 10px;
    font-size: 0.85rem;
    margin-bottom: 10px;
}
.marker-creator-panel .objective-select option { background: var(--bg-dark); }
.marker-creator-panel .creator-hint {
    font-size: 0.8rem;
    color: var(--eft-gold);
    padding: 8px;
    background: rgba(158, 143, 107, 0.15);
    border-left: 3px solid var(--eft-gold);
    margin-bottom: 10px;
}
.marker-creator-panel .btn-row { display: flex; gap: 8px; }
.marker-creator-panel .btn-row button { flex: 1; font-size: 0.8rem; padding: 6px 10px; }
.marker-creator-panel .floor-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.marker-creator-panel .floor-select-row label { font-size: 0.8rem; color: var(--text-sub); white-space: nowrap; }
.placing-marker-mode #map { cursor: crosshair !important; }
.placing-marker-mode .leaflet-container { cursor: crosshair !important; }

/* Area Drawing Panel */
.area-drawing-panel {
    background: var(--bg-panel);
    border: 2px solid #2196F3;
    padding: 15px;
    margin-bottom: 10px;
    display: none;
}
.area-drawing-panel.active { display: block; }
.area-drawing-panel h6 { color: #2196F3; margin-bottom: 12px; font-size: 0.9rem; }
.area-drawing-panel .creator-hint {
    font-size: 0.8rem;
    color: #2196F3;
    padding: 8px;
    background: rgba(33, 150, 243, 0.15);
    border-left: 3px solid #2196F3;
    margin-bottom: 10px;
}
.area-drawing-panel .area-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.area-drawing-panel .area-input-row label {
    font-size: 0.8rem;
    color: var(--text-sub);
    min-width: 50px;
}
.area-drawing-panel .area-input-row input[type="text"] {
    flex: 1;
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    padding: 6px 10px;
    font-size: 0.85rem;
}
.area-drawing-panel .area-input-row input[type="color"] {
    width: 40px;
    height: 30px;
    border: 1px solid var(--border-dark);
    cursor: pointer;
}
.area-drawing-panel .area-input-row select {
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    padding: 6px 10px;
    font-size: 0.85rem;
}
.area-drawing-panel .area-points-info {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.area-drawing-panel .btn-sm {
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    color: var(--text-sub);
    padding: 2px 8px;
    font-size: 0.7rem;
    cursor: pointer;
}
.area-drawing-panel .btn-sm:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}
.area-drawing-panel .btn-row { display: flex; gap: 8px; }
.area-drawing-panel .btn-row button { flex: 1; font-size: 0.8rem; padding: 6px 10px; }
.drawing-area-mode #map { cursor: crosshair !important; }
.drawing-area-mode .leaflet-container { cursor: crosshair !important; }

/* Area Panel Tabs */
.area-panel-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border-dark); padding-bottom: 8px; }
.area-tab { flex: 1; background: var(--bg-element); border: 1px solid var(--border-dark); color: var(--text-sub); padding: 6px 10px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.area-tab:hover { background: var(--bg-hover); color: var(--text-main); }
.area-tab.active { background: #2196F3; color: #fff; border-color: #2196F3; }
.area-tab-content { display: none; }
.area-tab-content.active { display: block; }

/* Areas List */
.area-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.8rem; color: var(--text-sub); }
.areas-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-dark); background: var(--bg-dark); }
.areas-list:empty::after { content: 'No areas saved'; display: block; padding: 15px; text-align: center; color: var(--text-sub); font-size: 0.8rem; }
.areas-loading { padding: 15px; text-align: center; color: var(--text-sub); font-size: 0.8rem; }
.area-list-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-dark); }
.area-list-item:last-child { border-bottom: none; }
.area-list-item:hover { background: var(--bg-hover); }
.area-list-item .area-color-dot { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.area-list-item .area-info { flex: 1; min-width: 0; }
.area-list-item .area-name { font-size: 0.85rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-list-item .area-floor { font-size: 0.7rem; color: var(--text-sub); }
.area-list-item .area-actions { display: flex; gap: 4px; }
.area-list-item .area-action-btn { background: none; border: 1px solid var(--border-dark); color: var(--text-sub); padding: 2px 6px; font-size: 0.7rem; cursor: pointer; }
.area-list-item .area-action-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.area-list-item .area-action-btn.delete:hover { background: rgba(196, 30, 58, 0.3); color: var(--eft-red); border-color: var(--eft-red); }

/* Map Area Polygons */
.area-polygon-label {
    background: rgba(0,0,0,0.7);
    border: none;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: #fff;
    white-space: nowrap;
}

/* Floor Controls */
.floor-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-dark);
}
.floor-controls-label {
    font-size: 0.7rem;
    color: var(--text-sub);
    text-align: center;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.floor-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-dark);
    background: var(--bg-card);
    color: var(--text-sub);
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 3px;
}
.floor-btn:hover {
    background: var(--bg-hover);
    color: var(--text-beige);
    border-color: var(--eft-gold);
}
.floor-btn.active {
    background: var(--eft-gold);
    color: var(--bg-dark);
    border-color: var(--eft-gold);
}

/* Edit Mode Button */
.edit-mode-toggle {
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    color: var(--text-sub);
    padding: 6px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.edit-mode-toggle:hover {
    border-color: var(--eft-gold);
    color: var(--text-beige);
}
.edit-mode-toggle.active {
    background: rgba(158, 143, 107, 0.3);
    border-color: var(--eft-gold);
    color: var(--eft-gold);
}

/* Correction Save Dialog */
.correction-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-panel);
    border: 2px solid var(--eft-gold);
    padding: 20px;
    z-index: 100000;
    min-width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.correction-dialog h4 {
    margin: 0 0 15px 0;
    font-size: 1rem;
}
.correction-coords {
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    padding: 10px;
    margin-bottom: 15px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
}
.correction-coords .label {
    color: var(--text-sub);
    font-size: 0.75rem;
    margin-bottom: 3px;
}
.correction-coords .old-coords {
    color: var(--eft-red);
    text-decoration: line-through;
}
.correction-coords .new-coords {
    color: var(--eft-green);
}
.correction-dialog-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.correction-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
}

/* Extract Correction Dialog */
.extract-correction-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    overflow: hidden;
}
.extract-correction-mode-toggle button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.extract-correction-mode-toggle button:hover {
    background: var(--bg-element);
    color: var(--text-main);
}
.extract-correction-mode-toggle button.active {
    background: var(--eft-gold);
    color: #000;
    font-weight: 600;
}
.extract-move-all-info {
    background: rgba(158, 143, 107, 0.15);
    border: 1px solid var(--eft-gold);
    padding: 10px;
    margin-bottom: 15px;
    font-size: 0.8rem;
    color: var(--text-beige);
}
.extract-marker-draggable {
    cursor: move !important;
}
.extract-marker-draggable:hover {
    filter: brightness(1.3);
    transform: scale(1.1);
}

/* ============================================================================
   QUEST DETAIL BOTTOM DRAWER (Accordion)
   ============================================================================ */
.quest-drawer {
    max-height: 0;
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--border-dark);
    border-top: 2px solid var(--border-gold);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 20px;
}
.quest-drawer.active {
    max-height: 550px;
}
.quest-drawer.collapsed {
    max-height: 42px;
}

/* Handle bar */
.quest-drawer-handle {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-dark);
    min-height: 42px;
}
.quest-drawer-grip {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 42px;
    cursor: pointer;
    transition: background 0.15s;
}
.quest-drawer-grip:hover { background: rgba(255,255,255,0.05); }
.quest-drawer-grip::after {
    content: '';
    width: 24px;
    height: 3px;
    background: var(--border-dark);
    border-radius: 2px;
    display: block;
}
.quest-drawer.active .quest-drawer-grip::after { background: var(--eft-gold); }

.quest-drawer-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-beige);
    flex: 1;
}
.quest-drawer-count {
    font-size: 0.72rem;
    color: var(--text-sub);
    padding-right: 10px;
}
.quest-drawer-close {
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-dark);
    color: var(--text-sub);
    font-size: 1rem;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    height: 42px;
}
.quest-drawer-close:hover { color: var(--eft-red); background: rgba(140, 59, 59, 0.15); }

/* Scrollable accordion body */
.quest-drawer-scroll {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.quest-drawer-scroll::-webkit-scrollbar { width: 5px; }
.quest-drawer-scroll::-webkit-scrollbar-thumb { background: var(--border-dark); }

/* Accordion Section */
.qd-accordion {
    border-bottom: 1px solid var(--border-dark);
}
.qd-accordion:last-child { border-bottom: none; }

.qd-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.qd-accordion-header:hover { background: rgba(255,255,255,0.03); }

.qd-accordion-arrow {
    font-size: 0.6rem;
    color: var(--text-sub);
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.qd-accordion.open .qd-accordion-arrow { transform: rotate(90deg); }

.qd-accordion-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-beige);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1;
}
.qd-accordion-header .qd-acc-subtitle {
    font-size: 0.7rem;
    color: var(--text-sub);
    font-weight: 400;
}
.qd-accordion-header img {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-dark);
    object-fit: cover;
    flex-shrink: 0;
}

.qd-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.qd-accordion.open .qd-accordion-body {
    max-height: 800px;
}

.qd-accordion-inner {
    padding: 0 14px 12px;
}

/* Summary grid inside accordion */
.qd-summary-grid {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-dark);
    background: var(--bg-dark);
}
.qd-summary-cell {
    padding: 10px 12px;
    border-right: 1px solid var(--border-dark);
    min-width: 0;
}
.qd-summary-cell:last-child { border-right: none; }
.qd-summary-cell.qd-cell-wide { flex: 1; }
.qd-summary-cell.qd-cell-narrow { width: 280px; flex-shrink: 0; }

/* Quest card inside accordion */
.qd-quest-card {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-dark);
    background: var(--bg-dark);
}
.qd-quest-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-dark);
}
.qd-quest-sidebar img.qd-quest-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    border: none;
}
.qd-quest-sidebar .qd-sidebar-meta {
    padding: 8px 10px;
}
.qd-quest-main {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}

/* Shared detail elements */
.qd-section { padding: 6px 0; }
.qd-section + .qd-section { border-top: 1px solid rgba(42,42,42,0.5); }
.qd-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--eft-gold);
    margin-bottom: 6px;
    font-family: 'Rajdhani', sans-serif;
}
.qd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.qd-meta-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.75rem; color: var(--text-sub);
    background: var(--bg-element); padding: 2px 8px; border: 1px solid var(--border-dark);
}
.qd-meta-item .val { color: var(--text-beige); font-weight: 600; }

.qd-objective { display: flex; gap: 8px; padding: 4px 0; font-size: 0.78rem; line-height: 1.35; color: var(--text-main); align-items: center; transition: all 0.2s ease; }
.qd-objective + .qd-objective { border-top: 1px solid rgba(42,42,42,0.4); }
.qd-objective.objective-completed { opacity: 0.6; background: rgba(74, 122, 74, 0.08); }
.qd-objective.objective-completed .qd-obj-desc { text-decoration: line-through; color: var(--text-sub); }
.qd-obj-num {
    background: var(--bg-element); border: 1px solid var(--border-dark);
    color: var(--eft-gold); font-size: 0.6rem; font-weight: 700;
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qd-obj-desc { flex: 1; }
.obj-map-badge { display: inline-block; font-size: 0.58rem; padding: 0 4px; margin-left: 4px; background: rgba(158, 143, 107, 0.2); border: 1px solid var(--border-dark); color: var(--text-sub); border-radius: 2px; vertical-align: middle; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.obj-map-badge.any { color: var(--eft-gold); background: rgba(158, 143, 107, 0.1); border-style: dashed; }

/* Inventory ownership badges */
.inventory-badge { display: inline-block; font-size: 0.65rem; padding: 1px 5px; margin-left: 6px; border-radius: 2px; font-weight: 600; cursor: help; vertical-align: middle; }
.inventory-badge.owned { background: rgba(74, 122, 74, 0.2); color: var(--eft-green); border: 1px solid rgba(74, 122, 74, 0.4); }
.inventory-badge.not-owned { background: rgba(122, 74, 74, 0.15); color: #ff6b6b; border: 1px solid rgba(122, 74, 74, 0.3); }

/* Objective tracking UI (checkbox + counter) */
.objective-checkbox {
    width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
    accent-color: var(--eft-gold);
}
.objective-counter {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.objective-counter-input {
    width: 50px; padding: 2px 6px; font-size: 0.75rem; text-align: center;
    background: var(--bg-element); border: 1px solid var(--border-dark);
    color: var(--text-beige); font-family: 'Rajdhani', sans-serif;
    transition: border-color 0.2s;
}
.objective-counter-input:focus {
    outline: none; border-color: var(--eft-gold);
}
.objective-counter-label {
    font-size: 0.75rem; color: var(--text-sub);
}

.qd-reward-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.76rem; }
.qd-reward-row + .qd-reward-row { border-top: 1px solid rgba(42,42,42,0.3); }
.qd-reward-row img { width: 26px; height: 26px; object-fit: contain; background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 2px; }
.qd-reward-count { color: var(--eft-gold); font-weight: 600; font-size: 0.7rem; }
.qd-rep { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; padding: 2px 0; }
.qd-rep.positive { color: var(--eft-green); }
.qd-rep.negative { color: var(--eft-red); }

.qd-key-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.76rem; }
.qd-key-row img { width: 24px; height: 24px; object-fit: contain; background: var(--bg-dark); border: 1px solid var(--border-dark); padding: 2px; }

.qd-wiki-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: linear-gradient(180deg, var(--bg-element) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--border-gold); color: var(--text-beige);
    font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.76rem;
    text-transform: uppercase; letter-spacing: 1px; text-decoration: none; cursor: pointer; transition: all 0.2s; margin-top: 6px;
}
.qd-wiki-btn:hover { background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-element) 100%); color: var(--eft-gold-bright); border-color: var(--eft-gold-bright); }

.qd-tracker-progress { font-size: 0.72rem; color: var(--text-beige); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Popup detail button */
.popup-detail-btn {
    display: block; width: 100%; padding: 5px 10px; margin-top: 6px;
    background: rgba(158, 143, 107, 0.15); border: 1px solid var(--eft-gold);
    color: var(--text-beige); font-family: 'Rajdhani', sans-serif; font-size: 0.78rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
}
.popup-detail-btn:hover { background: rgba(158, 143, 107, 0.3); color: var(--eft-gold-bright); }

/* Any-Location Tasks Strip */
.any-location-strip { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; background: rgba(158, 143, 107, 0.06); border: 1px solid var(--border-dark); border-top: none; font-size: 0.78rem; }
.any-strip-label { flex-shrink: 0; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--eft-gold); background: rgba(158, 143, 107, 0.15); padding: 2px 6px; border-radius: 2px; margin-top: 1px; }
.any-strip-tasks { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-sub); font-size: 0.75rem; line-height: 1.4; }
.any-strip-task { display: inline-flex; align-items: center; gap: 4px; }
.any-strip-task .any-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* Admin-only elements - hidden by default, shown in edit mode */
.admin-only { display: none !important; }
body.edit-mode .admin-only { display: inline-flex !important; }

/* Objective Details Toolbox (floating inside map, bottom-left) */
.obj-details-box { position: absolute; bottom: 10px; left: 10px; z-index: 800; background: rgba(14, 14, 14, 0.92); backdrop-filter: blur(6px); border: 1px solid var(--border-gold); max-width: 420px; min-width: 260px; max-height: 50%; display: flex; flex-direction: column; }
.obj-details-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 0.8rem; color: var(--text-beige); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; user-select: none; border-bottom: 1px solid var(--border-dark); }
.obj-details-header:hover { color: var(--eft-gold-bright); }
.obj-details-count { background: var(--eft-gold); color: #000; padding: 1px 6px; font-size: 0.7rem; font-weight: 700; border-radius: 2px; margin-left: auto; }
.obj-details-arrow { font-size: 0.7rem; color: var(--text-sub); transition: transform 0.2s; }
.obj-details-box.collapsed .obj-details-arrow { transform: rotate(180deg); }
.obj-details-box.collapsed .obj-details-list { display: none; }
.obj-details-list { overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; scrollbar-color: var(--eft-gold) transparent; }
.obj-details-list::-webkit-scrollbar { width: 4px; }
.obj-details-list::-webkit-scrollbar-thumb { background: var(--eft-gold); border-radius: 2px; }
.obj-detail-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; line-height: 1.35; padding: 4px 0; border-bottom: 1px solid rgba(42,42,42,0.5); }
.obj-detail-row:last-child { border-bottom: none; }
.obj-detail-quest { flex-shrink: 0; font-weight: 600; color: var(--text-beige); display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-detail-quest .obj-q-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.obj-detail-desc { color: var(--text-sub); flex: 1; min-width: 0; }
.obj-detail-desc strong { color: var(--text-main); font-weight: 600; }

/* Multi-map conflict warning banner */
.multi-map-warning { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 10px; background: rgba(140, 89, 39, 0.15); border: 1px solid rgba(200, 140, 60, 0.4); color: #d4a054; font-size: 0.82rem; line-height: 1.4; }
.multi-map-warning .warning-icon { font-size: 1.1rem; flex-shrink: 0; }

/* Quest Badges (Kappa, Lightkeeper, Faction) */
.quest-badge { display: inline-flex; align-items: center; justify-content: center; padding: 1px 5px; font-size: 0.62rem; font-weight: 700; border-radius: 2px; vertical-align: middle; margin-left: 4px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.3px; }
.kappa-badge { background: rgba(255, 215, 0, 0.2); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.4); font-size: 0.72rem; }
.lk-badge { background: rgba(255, 165, 0, 0.2); color: #ffa500; border: 1px solid rgba(255, 165, 0, 0.4); }
.faction-badge { background: rgba(100, 180, 255, 0.15); color: #7ab8ff; border: 1px solid rgba(100, 180, 255, 0.3); }
.quest-progress-badge { display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px; font-size: 0.65rem; font-weight: 600; border-radius: 2px; vertical-align: middle; margin-left: 4px; background: rgba(158, 143, 107, 0.15); color: var(--text-sub); border: 1px solid var(--border-dark); transition: all 0.2s ease; }
.quest-progress-badge.progress-complete { background: rgba(74, 122, 74, 0.2); color: var(--eft-green); border-color: var(--eft-green); }
.quest-xp { color: var(--eft-gold); font-size: 0.7rem; font-weight: 600; }

/* Quest Filter Toggles Row */
.quest-filter-row { font-size: 0.78rem; color: var(--text-sub); }
.quest-filter-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.78rem; color: var(--text-sub); user-select: none; }
.quest-filter-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--eft-gold); cursor: pointer; }
.quest-filter-toggle .filter-badge { font-size: 0.72rem; padding: 0 3px; }

/* Raid Info Bar */
.raid-info-bar { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(30, 29, 26, 0.6); border: 1px solid var(--border-dark); font-size: 0.82rem; color: var(--text-sub); flex-wrap: wrap; margin-bottom: 4px; }
.raid-info-bar strong { color: var(--text-beige); }
.raid-info-item { display: inline-flex; align-items: center; gap: 3px; }
.raid-info-sep { color: var(--border-dark); margin: 0 4px; }

/* Raid XP Total in drawer header */
.raid-xp-total { margin-left: auto; font-size: 0.78rem; font-weight: 700; color: var(--eft-gold); padding: 2px 8px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 2px; }

/* Map Fullscreen Mode */
.map-fullscreen { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; margin: 0 !important; border-radius: 0 !important; overflow: hidden; background: var(--bg-dark); padding: 0 !important; }
.map-fullscreen #map { height: 100vh !important; width: 100vw !important; margin: 0 !important; border: none !important; }
/* Overlay controls pushed below the controls bar (≈58px tall) so they never overlap */
.map-fullscreen .map-overlay-controls { top: 62px !important; max-height: calc(100vh - 72px); z-index: 10000; }
.map-fullscreen .map-controls { position: absolute; top: 10px; right: 10px; z-index: 10001; background: rgba(20, 19, 17, 0.95); padding: 8px; border: 1px solid var(--border-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.map-fullscreen .map-controls .btn-tarkov { margin: 2px; }
.map-fullscreen .multi-map-tabs { position: absolute; top: 10px; left: 10px; z-index: 10001; max-width: calc(100vw - 400px); background: rgba(20, 19, 17, 0.95); padding: 4px; border: 1px solid var(--border-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.map-fullscreen .map-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10001; background: rgba(20, 19, 17, 0.95); padding: 8px 16px; border: 1px solid var(--border-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.map-fullscreen .any-location-strip { position: absolute; bottom: 60px; left: 10px; right: 10px; z-index: 10001; max-width: 800px; margin: 0 auto; }
.map-fullscreen .raid-info-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10001; background: rgba(20, 19, 17, 0.95); border: 1px solid var(--border-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.map-fullscreen .marker-creator-panel, .map-fullscreen .area-drawing-panel { display: none !important; }
.map-fullscreen h5 { display: none; }
.map-fullscreen .row.g-3.mb-3 { display: none; }
/* ============================================
   BOSS MARKERS & TOOLTIPS
   ============================================ */
.boss-marker-icon {
    width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle, #7B1FA2, #4A148C);
    border: 2px solid #9C27B0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.5), 0 0 16px rgba(156, 39, 176, 0.2);
    animation: bossPulse 3s ease-in-out infinite;
}
.boss-marker-icon span { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); }

@keyframes bossPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(156, 39, 176, 0.5); }
    50% { box-shadow: 0 0 14px rgba(156, 39, 176, 0.7), 0 0 24px rgba(156, 39, 176, 0.3); }
}

.boss-tooltip { font-weight: 700 !important; font-size: 0.78rem !important; }

/* Boss popup */
.boss-popup h6 { margin-bottom: 6px; }
.boss-chance-bar {
    position: relative; height: 16px;
    background: rgba(0,0,0,0.3); border-radius: 2px;
    overflow: hidden; margin: 4px 0 8px;
}
.boss-chance-fill {
    height: 100%; border-radius: 2px;
    transition: width 0.3s;
}
.boss-chance-label {
    position: absolute; top: 0; left: 0; right: 0;
    text-align: center; font-size: 0.68rem; font-weight: 700;
    line-height: 16px; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.boss-locations-title {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #9C27B0; margin-bottom: 3px;
}
.boss-locations { font-size: 0.72rem; }
.boss-location-row {
    display: flex; justify-content: space-between;
    padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.boss-loc-name { color: #ccc; }
.boss-loc-chance { color: #aaa; font-weight: 600; }

/* Raid info bar boss badges */
.raid-info-bosses { display: flex; gap: 6px; flex-wrap: wrap; }
.boss-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 3px;
    background: rgba(156, 39, 176, 0.15);
    border: 1px solid rgba(156, 39, 176, 0.35);
    font-size: 0.72rem; color: #e0e0e0;
    cursor: default; white-space: nowrap;
}
.boss-badge-skull { font-size: 0.8rem; }
.boss-badge-pct { font-weight: 700; margin-left: 2px; }

/* ============================================
   PACKING LIST (Bring to Raid)
   ============================================ */
.packing-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; gap: 8px;
}
.packing-progress {
    font-size: 0.72rem; color: var(--text-sub);
    letter-spacing: 0.5px; flex: 1;
}
.packing-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; font-size: 0.76rem;
    border-bottom: 1px solid rgba(42,42,42,0.3);
    transition: opacity 0.2s;
}
.packing-item.packed { opacity: 0.45; }
.packing-item.packed .packing-name { text-decoration: line-through; }
.packing-check {
    width: 14px; height: 14px;
    accent-color: var(--eft-green); cursor: pointer; flex-shrink: 0;
}
.packing-item img {
    width: 24px; height: 24px; object-fit: contain;
    background: var(--bg-dark); border: 1px solid var(--border-dark);
    padding: 2px; flex-shrink: 0;
}
.packing-info { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.packing-name { color: var(--text-beige); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.packing-cat {
    font-size: 0.6rem; font-weight: 700; padding: 1px 4px;
    border-radius: 2px; letter-spacing: 0.5px; flex-shrink: 0;
    font-family: 'Rajdhani', sans-serif;
}
.packing-cat-key { background: rgba(180, 160, 90, 0.25); color: var(--eft-gold); border: 1px solid rgba(180, 160, 90, 0.4); }
.packing-cat-marker { background: rgba(90, 130, 180, 0.25); color: #7ab3e0; border: 1px solid rgba(90, 130, 180, 0.4); }
.packing-cat-item { background: rgba(160, 160, 160, 0.15); color: var(--text-sub); border: 1px solid rgba(160, 160, 160, 0.3); }
.packing-cat-provided { background: rgba(80, 160, 80, 0.2); color: var(--eft-green); border: 1px solid rgba(80, 160, 80, 0.3); }
.packing-quest {
    font-size: 0.65rem; color: var(--text-sub); margin-left: auto;
    white-space: nowrap; flex-shrink: 0;
}
.packing-mark-all-btn {
    font-size: 0.7rem; padding: 3px 8px;
    background: var(--eft-gold); color: var(--bg-dark);
    border: none; border-radius: 3px; cursor: pointer;
    font-weight: 600; letter-spacing: 0.3px;
    transition: all 0.2s;
    font-family: 'Rajdhani', sans-serif;
}
.packing-mark-all-btn:hover {
    background: var(--eft-gold-hover);
    transform: translateY(-1px);
}
.packing-check:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.packing-item:has(.packing-cat-provided) {
    opacity: 0.7;
}

/* ============================================
   TARKOVTRACKER SYNC
   ============================================ */
.tt-sync-btn {
    background: rgba(80, 160, 80, 0.15) !important;
    border-color: rgba(80, 160, 80, 0.4) !important;
    color: var(--eft-green) !important;
}
.tt-sync-btn:hover { background: rgba(80, 160, 80, 0.3) !important; }

#fullscreenBtn { font-size: 1rem; line-height: 1; padding: 4px 8px; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-width: 300px;
    max-width: 450px;
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-size: 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
}

.toast-show {
    opacity: 1;
    transform: translateX(0);
}

.toast-hide {
    opacity: 0;
    transform: translateX(400px);
}

.toast-icon {
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toast-message {
    flex: 1;
    color: var(--text-beige);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: var(--text-beige);
}

/* Toast Types */
.toast-success {
    border-left: 4px solid var(--eft-green);
}

.toast-success .toast-icon {
    background: rgba(80, 160, 80, 0.2);
    color: var(--eft-green);
}

.toast-error {
    border-left: 4px solid var(--eft-red);
}

.toast-error .toast-icon {
    background: rgba(200, 80, 80, 0.2);
    color: var(--eft-red);
}

.toast-warning {
    border-left: 4px solid var(--eft-gold);
}

.toast-warning .toast-icon {
    background: rgba(180, 160, 90, 0.2);
    color: var(--eft-gold);
}

.toast-info {
    border-left: 4px solid #5a9bd5;
}

.toast-info .toast-icon {
    background: rgba(90, 155, 213, 0.2);
    color: #5a9bd5;
}

/* ============================================
   CUSTOM TOOLTIPS
   ============================================ */
.custom-tooltip {
    position: absolute;
    z-index: 10001;
    padding: 8px 12px;
    background: #1a1a1a;
    border: 1px solid var(--eft-gold);
    border-radius: 4px;
    color: var(--text-beige);
    font-size: 0.8rem;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.4;
    max-width: 300px;
    word-wrap: break-word;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-tooltip.tooltip-show {
    opacity: 1;
}

/* Tooltip arrows */
.custom-tooltip::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.tooltip-top::after {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--eft-gold);
}

.tooltip-bottom::after {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--eft-gold);
}

.tooltip-left::after {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--eft-gold);
}

.tooltip-right::after {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--eft-gold);
}

/* Tooltip trigger elements */
[data-tooltip] {
    cursor: help;
}

/* Responsive */
@media (max-width: 768px) {
    .qd-summary-grid { flex-direction: column; }
    .qd-summary-cell.qd-cell-narrow { width: 100%; border-right: none; border-bottom: 1px solid var(--border-dark); }
    .qd-quest-card { flex-direction: column; }
    .qd-quest-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-dark); }

    .custom-tooltip {
        max-width: 250px;
        font-size: 0.75rem;
    }
}

/* ============================================================================
   WEAPON BUILD EDITOR
   ============================================================================ */

/* Build button on weapon cards */
.build-btn {
    background: rgba(158, 143, 107, 0.12);
    border: 1px solid rgba(158, 143, 107, 0.35);
    color: var(--eft-gold);
    padding: 2px 7px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.build-btn:hover {
    background: rgba(158, 143, 107, 0.28);
    border-color: var(--eft-gold);
}

/* Weapon header in build editor */
.build-weapon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.build-weapon-icon {
    width: 90px;
    height: 55px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.build-weapon-info { flex: 1; min-width: 0; }
.build-weapon-name {
    color: var(--text-beige);
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}
.build-weapon-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
}
.badge-caliber {
    background: rgba(184, 156, 92, 0.18);
    border: 1px solid rgba(184, 156, 92, 0.4);
    color: var(--eft-gold);
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.build-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Slot tree */
.build-slots-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.build-slot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}
.build-slot-label {
    color: var(--text-sub);
    font-size: 0.78rem;
    min-width: 130px;
    flex-shrink: 0;
    font-family: 'Rajdhani', sans-serif;
}
.build-slot-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-dark);
    background: var(--bg-dark);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 40px;
}
.build-slot-item:hover { border-color: var(--eft-gold); }
.build-slot-item.assigned {
    border-color: rgba(74, 122, 74, 0.35);
    background: rgba(74, 122, 74, 0.04);
}
.build-slot-item.empty { border-style: dashed; }
.build-slot-item.no-items { cursor: default; opacity: 0.45; }
.build-slot-item.no-items:hover { border-color: var(--border-dark); }

.build-item-icon {
    width: 44px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.build-item-name {
    color: var(--text-beige);
    font-size: 0.82rem;
    font-weight: 500;
    flex-shrink: 0;
}
.build-slot-clear {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    transition: color 0.15s;
    flex-shrink: 0;
}
.build-slot-clear:hover { color: var(--eft-red); }

/* Stats panel */
.build-stats-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.build-stats-title {
    color: var(--eft-gold);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-dark);
    margin-bottom: 4px;
    font-family: 'Rajdhani', sans-serif;
}
.build-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.025);
}
.build-stat-label { color: var(--text-sub); font-size: 0.8rem; }
.build-stat-value { color: var(--text-beige); font-size: 0.88rem; font-weight: 600; }

/* Ammo panel */
.build-ammo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    font-size: 0.78rem;
}
.build-ammo-name { color: var(--text-beige); min-width: 55px; flex-shrink: 0; }
.build-ammo-bars { color: var(--eft-gold); font-size: 0.68rem; letter-spacing: 1px; }
.build-ammo-pen { margin-left: auto; color: var(--text-sub); font-size: 0.7rem; }

/* Saved builds */
.saved-build-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    margin-bottom: 7px;
    transition: border-color 0.15s;
}
.saved-build-card:hover { border-color: var(--border-gold); }
.saved-build-info { min-width: 0; flex: 1; }
.saved-build-name { color: var(--text-beige); font-size: 0.85rem; font-weight: 600; }
.saved-build-weapon { color: var(--eft-gold); font-size: 0.72rem; margin-top: 2px; }
.saved-build-stats { color: var(--text-sub); font-size: 0.7rem; margin-top: 2px; }
.saved-build-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Attachment picker */
.attachment-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(55,65,80,0.4);
    cursor: pointer;
    transition: background 0.12s;
}
.attachment-picker-item:hover { background: rgba(176,154,110,0.07); }
.attachment-picker-item.selected { background: rgba(74,122,74,0.1); border-left: 2px solid var(--eft-green); }

.picker-item-icon {
    width: 54px;
    height: 34px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.picker-item-icon-placeholder {
    width: 54px;
    height: 34px;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.picker-item-info { flex: 1; min-width: 0; }
.picker-item-name { color: var(--text-beige); font-size: 0.82rem; font-weight: 500; }
.picker-item-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.73rem;
}

/* ============================================================
   BUILD EDITOR — REDESIGN v2
   ============================================================ */

/* Top search bar */
.build-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.build-weapon-search-wrap {
    position: relative;
    flex: 1;
}
.build-weapon-search-input {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-main);
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.build-weapon-search-input:focus {
    outline: none;
    border-color: var(--eft-gold);
    background: var(--bg-element);
    box-shadow: 0 0 0 3px rgba(176,154,110,0.08);
}
.build-weapon-search-input::placeholder { color: var(--text-sub); }

/* Weapon selector dropdown */
.build-weapon-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius);
    z-index: 5000;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(176,154,110,0.06);
}
.build-weapon-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--border-dark);
}
.build-weapon-dd-item:last-child { border-bottom: none; }
.build-weapon-dd-item:hover { background: rgba(158, 143, 107, 0.1); }
.build-weapon-dd-item.active { background: rgba(74, 122, 74, 0.08); }

.dd-weapon-icon {
    width: 72px;
    height: 44px;
    object-fit: contain;
    background: rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.dd-weapon-icon-ph {
    width: 72px;
    height: 44px;
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.dd-weapon-info { flex: 1; min-width: 0; }
.dd-weapon-name {
    color: var(--text-beige);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dd-weapon-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--text-sub);
    flex-wrap: wrap;
}
.dd-caliber {
    background: rgba(184, 156, 92, 0.15);
    border: 1px solid rgba(184, 156, 92, 0.3);
    color: var(--eft-gold);
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.build-dd-message {
    padding: 14px 16px;
    color: var(--text-sub);
    font-size: 0.82rem;
    text-align: center;
    font-style: italic;
}

/* Empty state */
.build-empty-state {
    text-align: center;
    padding: 60px 30px;
}
.build-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 18px;
    line-height: 1;
    opacity: 0.5;
}
.build-empty-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-beige);
    margin-bottom: 12px;
}
.build-empty-sub {
    color: var(--text-sub);
    font-size: 0.9rem;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Stat bars */
.build-stat-bar-block {
    margin-bottom: 12px;
}
.build-stat-bar-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
.build-stat-bar-name {
    font-size: 0.75rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
}
.build-stat-bar-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-beige);
    font-family: 'Rajdhani', sans-serif;
}
.build-stat-bar-track {
    position: relative;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(55,65,80,0.5);
    border-radius: 3px;
    overflow: visible;
}
.build-stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}
.build-stat-bar-base {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--eft-gold);
    opacity: 0.75;
}

/* Extra stat chips below bars */
.build-extra-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-dark);
}
.build-extra-stat {
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    color: var(--text-sub);
    padding: 3px 9px;
    font-size: 0.72rem;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.3px;
}

/* Saved builds grid */
.saved-builds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.saved-build-card-v2 {
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    overflow: hidden;
}
.saved-build-card-v2:hover {
    border-color: var(--border-gold);
    box-shadow: 0 4px 16px rgba(176,154,110,0.1);
    transform: translateY(-1px);
}

.saved-build-v2-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dark);
}
.saved-build-v2-img {
    width: 80px;
    height: 50px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.saved-build-v2-header { flex: 1; min-width: 0; }
.saved-build-v2-name {
    color: var(--text-beige);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-build-v2-weapon {
    color: var(--eft-gold);
    font-size: 0.72rem;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.saved-build-v2-stats {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-dark);
}
.saved-build-v2-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-right: 1px solid var(--border-dark);
    font-family: 'Rajdhani', sans-serif;
}
.saved-build-v2-stat:last-child { border-right: none; }
.saved-build-v2-stat span {
    font-size: 0.58rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.saved-build-v2-stat strong {
    font-size: 0.95rem;
    color: var(--text-beige);
    font-weight: 700;
    line-height: 1.2;
}

.saved-build-v2-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
}
.saved-build-load-btn {
    flex: 1;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
}
.saved-build-v2-actions .btn-tarkov {
    padding: 6px 10px;
    font-size: 0.78rem;
}

/* Empty saves message */
.build-no-saves {
    color: var(--text-sub);
    font-size: 0.85rem;
    text-align: center;
    padding: 30px 20px;
    font-style: italic;
    border: 1px dashed var(--border-dark);
}

/* Slot detail elements */
.build-slot-indent {
    color: var(--text-sub);
    opacity: 0.4;
    font-size: 0.85rem;
    margin-right: 2px;
}
.build-req-tag {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 4px;
    background: rgba(140, 59, 59, 0.2);
    border: 1px solid rgba(140, 59, 59, 0.4);
    color: var(--eft-red);
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 3px;
}
.build-item-stat {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 5px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dark);
}
.build-item-subslots {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    background: rgba(158, 143, 107, 0.15);
    border: 1px solid rgba(158, 143, 107, 0.3);
    color: var(--eft-gold);
    letter-spacing: 0.3px;
}
.build-slot-empty-text {
    color: var(--text-sub);
    font-size: 0.78rem;
    font-style: italic;
}
.build-slot-count {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--text-sub);
    opacity: 0.6;
}

/* ============================================================
   BUILD EDITOR — v3 EFT-Style Card Grid
   ============================================================ */

/* Weapon header banner */
.bld-header {
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, rgba(10,13,18,0.98) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--border-dark);
    border-bottom: 2px solid rgba(176,154,110,0.28);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.bld-header-img-wrap {
    width: 200px;
    min-height: 74px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.38);
    border-right: 1px solid var(--border-dark);
    padding: 8px 12px;
    position: relative;
    overflow: hidden;
}

/* Scanline overlay over weapon image */
.bld-header-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.bld-header-img {
    max-width: 176px;
    max-height: 58px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.8));
}

.bld-header-info {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bld-header-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-beige);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bld-header-meta {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

.bld-caliber-tag {
    background: rgba(184,156,92,0.12);
    border: 1px solid rgba(184,156,92,0.32);
    color: var(--eft-gold);
    padding: 1px 7px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Rajdhani', sans-serif;
}

.bld-meta-tag {
    color: var(--text-sub);
    font-size: 0.7rem;
    padding: 1px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    font-family: 'Rajdhani', sans-serif;
}

.bld-header-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-left: 1px solid var(--border-dark);
    flex-shrink: 0;
    justify-content: center;
}

.bld-action-btn {
    padding: 5px 12px !important;
    font-size: 0.74rem !important;
    white-space: nowrap;
}

.bld-action-btn-clear {
    background: var(--bg-dark) !important;
}

/* Filter bar (in-game style checkbox row) */
.bld-filter-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 7px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bld-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--text-sub);
    font-size: 0.74rem;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.2px;
    transition: color 0.12s;
    user-select: none;
}

.bld-filter-label:hover { color: var(--text-beige); }

.bld-filter-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--eft-gold);
    cursor: pointer;
}

/* Attachment card grid */
.bld-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 5px;
    margin-bottom: 6px;
}

.bld-attachment-grid.bld-subgrid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

/* Individual slot card */
.bld-slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(10,13,18,0.95);
    border: 1px solid rgba(55,65,80,0.6);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    overflow: hidden;
    min-height: 92px;
}

.bld-slot-card:not(.no-items) .bld-slot-card-body { cursor: pointer; }

.bld-slot-card:not(.no-items):hover {
    border-color: rgba(176,154,110,0.75);
    box-shadow: 0 2px 12px rgba(176,154,110,0.08);
    transform: translateY(-1px);
}

.bld-slot-card.assigned {
    border-color: rgba(74,140,74,0.5);
    background: rgba(10,16,12,0.95);
}

.bld-slot-card.assigned:hover {
    border-color: rgba(74,180,74,0.8);
    box-shadow: 0 2px 12px rgba(74,140,74,0.12);
}

.bld-slot-card.empty {
    border-style: dashed;
    border-color: rgba(55,65,80,0.45);
}

.bld-slot-card.no-items {
    opacity: 0.22;
    pointer-events: none;
}

/* Card header (slot name + category dot + optional clear btn) */
.bld-slot-card-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 7px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(55,65,80,0.5);
    flex-shrink: 0;
}

.bld-slot-cat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bld-slot-cat-dot.cat-vital     { background: #b85050; }
.bld-slot-cat-dot.cat-functional { background: rgba(184,156,92,0.85); }
.bld-slot-cat-dot.cat-gear      { background: rgba(120,120,120,0.6); }

.bld-slot-name-label {
    flex: 1;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(190,195,210,0.55);
    font-family: 'Rajdhani', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.bld-req-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #b85050;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 2px;
}

.bld-slot-clear-btn {
    background: transparent;
    border: none;
    color: rgba(160,160,160,0.45);
    font-size: 0.58rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.1s;
}

.bld-slot-clear-btn:hover { color: var(--eft-red); }

/* Card body (clickable area) */
.bld-slot-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: background 0.1s;
}

/* Image area */
.bld-slot-card-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    min-height: 46px;
    background: rgba(0,0,0,0.14);
}

.bld-slot-item-img {
    max-width: 86px;
    max-height: 54px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bld-slot-img-ph {
    width: 46px;
    height: 30px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}

.bld-slot-none-icon {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.11);
    font-weight: 200;
    letter-spacing: 4px;
    user-select: none;
}

/* Card footer (item name + stats) */
.bld-slot-card-footer {
    padding: 4px 7px 5px;
    background: rgba(0,0,0,0.32);
    border-top: 1px solid rgba(55,65,80,0.35);
    flex-shrink: 0;
}

.bld-slot-item-name {
    font-size: 0.61rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    color: var(--text-beige);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.bld-none-text {
    color: rgba(150,150,150,0.36) !important;
    font-size: 0.57rem !important;
    letter-spacing: 0.5px;
}

.bld-locked-text {
    color: rgba(100,100,100,0.3) !important;
    font-size: 0.55rem !important;
}

.bld-slot-item-stats {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 0.57rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1;
}

.bld-stat-neutral { color: var(--text-sub); }

.bld-slot-compat {
    font-size: 0.54rem;
    color: rgba(150,150,150,0.38);
    margin-top: 1px;
}

/* Sub-slot group section */
.bld-subslot-group { margin-bottom: 12px; }

.bld-subslot-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(55,65,80,0.45);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}

.bld-subslot-arrow {
    color: var(--text-sub);
    opacity: 0.38;
    font-size: 0.8rem;
}

.bld-subslot-parent {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-beige);
    letter-spacing: 0.3px;
}

.bld-subslot-label {
    font-size: 0.62rem;
    color: var(--text-sub);
    opacity: 0.45;
    font-style: italic;
}

/* Sub-slot card size adjustments */
.bld-slot-card.sub { min-height: 78px; }

.bld-slot-card.sub .bld-slot-card-header { padding: 2px 5px; }

.bld-slot-card.sub .bld-slot-name-label { font-size: 0.53rem; }

.bld-slot-card.sub .bld-slot-card-img {
    min-height: 38px;
    padding: 4px;
}

.bld-slot-card.sub .bld-slot-item-img {
    max-width: 66px;
    max-height: 40px;
}

.bld-slot-card.sub .bld-slot-item-name { font-size: 0.57rem; }

/* Mod count badge in weapon header */
.bld-mod-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text-sub);
    letter-spacing: 0.3px;
}
.bld-mod-count-full {
    background: rgba(74,140,74,0.12);
    border-color: rgba(74,140,74,0.3);
    color: var(--eft-green);
}

/* Attachment picker: sort + badges */
.picker-best-badge {
    display: inline-block;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 1px 5px;
    background: rgba(184,156,92,0.14);
    border: 1px solid rgba(184,156,92,0.32);
    color: var(--eft-gold);
    vertical-align: middle;
    margin-left: 6px;
    font-family: 'Rajdhani', sans-serif;
}
.picker-check {
    color: var(--eft-gold);
    margin-left: auto;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ============================================================
   BUILD EDITOR — FULL-WIDTH LAYOUT
   ============================================================ */

/* Main panel — no extra padding on bottom, canvas bleeds to edge */
.bld-main-panel {
    padding-bottom: 0 !important;
}

/* Canvas + sidebar row */
.bld-canvas-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 10px -14px 0;   /* bleed to panel edges */
}

/* Stats sidebar */
.bld-stats-sidebar {
    display: flex;
    flex-direction: row;
    width: 290px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-dark);
    transition: width 0.22s ease;
    overflow: hidden;
    background: var(--bg-panel);
}

.bld-stats-sidebar--collapsed {
    width: 26px;
}

/* Vertical toggle tab */
.bld-stats-toggle {
    flex-shrink: 0;
    width: 26px;
    background: none;
    border: none;
    border-right: 1px solid var(--border-dark);
    color: var(--text-sub);
    font-size: 0.72rem;
    cursor: pointer;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    padding: 12px 0;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bld-stats-toggle:hover { color: var(--eft-gold); background: rgba(176,154,110,0.05); }

/* Sidebar body — scrollable */
.bld-stats-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-width: 0;
}

/* Fullscreen button on canvas */
.bld-fs-btn {
    position: absolute;
    bottom: 34px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}
.bld-fs-btn:hover { color: var(--eft-gold); border-color: rgba(176,154,110,0.4); }

/* Fullscreen mode */
.bld-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bld-fullscreen #buildEditorPanel {
    flex-shrink: 0;
}

.bld-fullscreen .bld-canvas-row {
    flex: 1;
    margin: 0;
    min-height: 0;
}

.bld-fullscreen .bld-schematic-canvas {
    height: 100%;
}

.bld-fs-active {
    overflow: hidden;
}

/* ============================================================
   SCHEMATIC BUILD EDITOR — EFT-style floating tile canvas
   ============================================================ */

/* Outer wrapper — takes remaining width in canvas row */
.bld-schematic-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* The canvas — tiles and lines live here */
.bld-schematic-canvas {
    position: relative;
    width: 100%;
    height: calc(100vh - 310px);
    min-height: 520px;
    background: radial-gradient(ellipse at 50% 50%, rgba(176,154,110,0.03) 0%, transparent 70%),
                var(--bg-black);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.bld-schematic-canvas:active { cursor: grabbing; }

/* Transform root — pan & zoom applied here; tiles and weapon image live inside.
   z-index: 2 puts it above the SVG connector lines (z-index: 1). */
.bld-schematic-world {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
    z-index: 2;
}

/* SVG overlay for connector lines — sits directly in canvas (not in world) */
.bld-schematic-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Zoom/pan hint shown in bottom-right corner of canvas */
.bld-zoom-hint {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 0.68rem;
    color: var(--text-sub);
    opacity: 0.5;
    pointer-events: none;
    z-index: 30;
    letter-spacing: 0.3px;
}

/* Line style */
.bld-schema-line {
    stroke: rgba(176,154,110,0.22);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}
.bld-schema-line.assigned {
    stroke: rgba(74,140,74,0.35);
    stroke-dasharray: none;
}

/* Weapon tile — centered card in schematic canvas */
.bld-schematic-weapon-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    background: rgba(8, 12, 14, 0.94);
    border: 1px solid rgba(176, 154, 110, 0.45);
    border-radius: var(--radius);
    padding: 8px 14px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 0 28px rgba(0,0,0,0.75), 0 0 10px rgba(176,154,110,0.08) inset;
}

.bld-schematic-weapon-img {
    display: block;
    max-width: 260px;
    max-height: 130px;
    object-fit: contain;
    margin: 0 auto;
    filter: brightness(0.88) contrast(1.08) drop-shadow(0 0 14px rgba(176,154,110,0.2));
    image-rendering: crisp-edges;
}

.bld-schema-weapon-name {
    color: var(--eft-gold);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 600;
    margin-top: 5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.bld-schema-weapon-stats {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3px;
}

.bld-schema-weapon-stats span {
    color: var(--text-sub);
    font-size: 0.65rem;
    font-family: var(--font-mono);
}

/* Scanline overlay on weapon image */
.bld-schematic-weapon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.04) 3px,
        rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    border-radius: var(--radius);
}

/* Weapon data loading badge in builds search bar */
.bld-loading-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-sub);
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.bld-loading-badge .spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ── Individual slot tile ── */
@keyframes tileIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}

.bld-schema-tile {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 82px;
    min-height: 72px;
    background: rgba(8, 12, 14, 0.92);
    border: 1px solid rgba(55, 65, 80, 0.55);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    z-index: 3;
    animation: tileIn 0.18s ease-out both;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bld-schema-tile:not(.no-items) {
    cursor: pointer;
}

.bld-schema-tile:not(.no-items):hover {
    border-color: rgba(176,154,110,0.7);
    box-shadow: 0 2px 14px rgba(176,154,110,0.1);
    z-index: 10;
}

.bld-schema-tile.assigned {
    border-color: rgba(74,140,74,0.55);
    background: rgba(6,14,8,0.95);
}
.bld-schema-tile.assigned:hover {
    border-color: rgba(74,180,74,0.8);
    box-shadow: 0 2px 14px rgba(74,140,74,0.15);
}

.bld-schema-tile.empty {
    border-style: dashed;
    border-color: rgba(55,65,80,0.4);
}

.bld-schema-tile.no-items {
    opacity: 0.2;
    pointer-events: none;
}

/* Slightly smaller for sub-slot tiles */
.bld-schema-tile.sub {
    width: 72px;
    min-height: 62px;
}

/* ── Tile header ── */
.bld-schema-tile-header {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px 2px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-height: 18px;
}

.bld-schema-cat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bld-schema-cat-dot.cat-vital      { background: #b85050; }
.bld-schema-cat-dot.cat-functional { background: rgba(184,156,92,0.85); }
.bld-schema-cat-dot.cat-gear       { background: rgba(120,120,120,0.6); }

.bld-schema-slot-name {
    flex: 1;
    font-size: 0.56rem;
    font-weight: 600;
    color: var(--text-sub);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
}

.bld-schema-clear-btn {
    background: transparent;
    border: none;
    color: rgba(200,80,80,0.5);
    font-size: 0.62rem;
    padding: 0 1px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s;
}
.bld-schema-clear-btn:hover { color: var(--eft-red); }

/* ── Tile image area ── */
.bld-schema-tile-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-height: 34px;
}

.bld-schema-item-img {
    max-width: 70px;
    max-height: 42px;
    object-fit: contain;
    image-rendering: crisp-edges;
}

.bld-schema-img-ph {
    width: 36px;
    height: 22px;
    background: rgba(255,255,255,0.03);
    border-radius: 2px;
}

.bld-schema-empty-icon {
    font-size: 1.2rem;
    color: rgba(176,154,110,0.25);
    font-weight: 300;
    line-height: 1;
}

.bld-schema-na-icon {
    font-size: 0.6rem;
    color: rgba(120,120,120,0.3);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}

/* ── Tile footer ── */
.bld-schema-tile-footer {
    padding: 2px 5px 4px;
    background: rgba(0,0,0,0.28);
    border-top: 1px solid rgba(255,255,255,0.03);
}

.bld-schema-item-name {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-beige);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.bld-schema-none-text {
    color: rgba(140,140,140,0.3) !important;
    font-size: 0.54rem !important;
}

.bld-schema-compat {
    font-size: 0.52rem;
    color: rgba(140,140,140,0.32);
}

.bld-schema-item-stats {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    font-size: 0.58rem;
    line-height: 1.2;
    margin-top: 1px;
}

/* ── Layout Edit Mode controls ── */

.bld-layout-controls-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(176,154,110,0.04);
    border: 1px solid rgba(176,154,110,0.15);
    border-radius: var(--radius);
    margin-bottom: 6px;
    justify-content: flex-end;
}

.bld-layout-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
}

.bld-layout-save {
    background: rgba(74,140,74,0.2) !important;
    border-color: rgba(74,140,74,0.4) !important;
    color: var(--eft-green) !important;
}
.bld-layout-save:hover {
    background: rgba(74,140,74,0.35) !important;
}

.bld-layout-hint {
    font-size: 0.7rem;
    color: var(--eft-gold);
    opacity: 0.8;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.3px;
    margin-right: auto;
}

/* Canvas border glow in edit mode */
.bld-schematic-wrap.edit-mode .bld-schematic-canvas {
    border-color: rgba(176,154,110,0.4);
    box-shadow: 0 0 0 1px rgba(176,154,110,0.12) inset;
}

/* Draggable tile styling in edit mode */
.bld-schema-tile.draggable {
    cursor: grab !important;
    user-select: none;
}
.bld-schema-tile.draggable:hover {
    border-color: rgba(176,154,110,0.9) !important;
    box-shadow: 0 0 12px rgba(176,154,110,0.18) !important;
}

/* ============================================================================
   GOONS TRACKER
   ============================================================================ */

.goons-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.goons-update-label {
    font-size: 0.72rem;
    color: var(--text-sub);
    opacity: 0.6;
}

.goons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.goons-card {
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.goons-card--likely {
    border-color: rgba(176,154,110,0.55);
    box-shadow: 0 0 16px rgba(176,154,110,0.08);
}

.goons-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.goons-map-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-beige);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}

.goons-likely-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    background: rgba(176,154,110,0.18);
    color: var(--eft-gold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.goons-last-seen {
    font-size: 0.72rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.goons-conf-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    margin-bottom: 4px;
}

.goons-conf-seen {
    background: rgba(74,180,74,0.65);
    transition: width 0.3s;
    min-width: 0;
}

.goons-conf-deny {
    background: rgba(200,60,60,0.5);
    transition: width 0.3s;
    min-width: 0;
}

.goons-conf-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    margin-bottom: 10px;
}

.goons-seen-label { color: rgba(74,180,74,0.85); }
.goons-deny-label { color: rgba(200,80,80,0.85); }

.goons-card-actions {
    display: flex;
    gap: 8px;
}

.goons-btn {
    flex: 1;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: var(--bg-dark);
    color: var(--text-beige);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.goons-btn--seen {
    border-color: rgba(74,180,74,0.3);
    color: rgba(74,200,74,0.9);
}
.goons-btn--seen:hover:not(:disabled) {
    background: rgba(74,140,74,0.18);
    border-color: rgba(74,180,74,0.6);
}

.goons-btn--deny {
    border-color: rgba(200,60,60,0.25);
    color: rgba(200,90,90,0.8);
}
.goons-btn--deny:hover:not(:disabled) {
    background: rgba(140,40,40,0.18);
    border-color: rgba(200,60,60,0.5);
}

.goons-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.goons-legend-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goons-legend-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-sub);
    font-size: 0.74rem;
    line-height: 1.8;
}

/* ============================================================================
   QUEST TREE
   ============================================================================ */

/* Canvas — scrollable/pannable container */
.qt-canvas {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 480px;
    overflow: hidden;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    cursor: grab;
    user-select: none;
}
.qt-canvas:active { cursor: grabbing; }

/* World — transform target; sized to fit all nodes */
.qt-world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

/* SVG for edges — full world size, behind nodes */
.qt-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

/* Edge paths */
.qt-edge {
    fill: none;
    stroke: rgba(100,110,130,0.35);
    stroke-width: 1.5;
}

/* Node container */
#qt-nodes {
    position: absolute;
    top: 0;
    left: 0;
}

/* Quest node */
.qt-node {
    position: absolute;
    height: 68px;
    box-sizing: border-box;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: var(--bg-element);
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.15s, box-shadow 0.12s, transform 0.1s;
    overflow: hidden;
}

.qt-node:hover {
    border-color: rgba(176,154,110,0.45);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 5;
    transform: translateY(-1px);
}

/* Node states */
.qt-node--locked {
    opacity: 0.55;
    border-color: rgba(80,80,90,0.5);
    background: rgba(12,14,18,0.8);
}

.qt-node--available {
    border-color: rgba(176,154,110,0.22);
}

.qt-node--completed {
    border-color: rgba(74,140,74,0.35);
    background: rgba(6,16,6,0.85);
    opacity: 0.75;
}
.qt-node--completed .qt-node-name {
    color: rgba(100,190,100,0.75) !important;
}

/* Active = currently in your quest log (gold highlight) */
.qt-node--active {
    border-color: rgba(176,154,110,0.75);
    background: rgba(20,16,6,0.95);
    box-shadow: 0 0 12px rgba(176,154,110,0.15);
}
.qt-node--active .qt-node-name {
    color: var(--eft-gold) !important;
}

/* Node internals */
.qt-node-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-beige);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.qt-node-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.qt-node-trader-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    opacity: 0.75;
    flex-shrink: 0;
}

.qt-node-trader-name {
    font-size: 0.62rem;
    color: var(--text-sub);
    opacity: 0.7;
}

.qt-node-lvl {
    font-size: 0.6rem;
    color: rgba(176,154,110,0.6);
    font-weight: 600;
    margin-left: auto;
}

.qt-node-badges {
    display: flex;
    gap: 2px;
    margin-left: 2px;
}

.qt-badge-kappa {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 2px;
    background: rgba(176,154,110,0.2);
    color: var(--eft-gold);
    line-height: 1.6;
}

.qt-badge-lk {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 2px;
    background: rgba(80,140,200,0.2);
    color: rgba(130,180,240,0.85);
    line-height: 1.6;
}

/* Column headers */
#qt-col-headers {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.qt-col-header {
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
}

.qt-col-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    opacity: 0.8;
}

.qt-col-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--eft-gold);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Legend bar below canvas */
.qt-legend-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px !important;
    margin-top: 6px;
    flex-wrap: wrap;
}

.qt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-sub);
}

.qt-legend-item::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid;
}

.qt-legend-item.qt-locked::before {
    background: rgba(12,14,18,0.8);
    border-color: rgba(80,80,90,0.5);
    opacity: 0.55;
}

.qt-legend-item.qt-available::before {
    background: var(--bg-element);
    border-color: rgba(176,154,110,0.3);
}

.qt-legend-item.qt-completed::before {
    background: rgba(6,16,6,0.85);
    border-color: rgba(74,140,74,0.35);
    opacity: 0.75;
}

.qt-legend-item.qt-active::before {
    background: rgba(20,16,6,0.95);
    border-color: rgba(176,154,110,0.75);
    box-shadow: 0 0 6px rgba(176,154,110,0.15);
}

/* ============================================================
   BUILD GOALS PANEL — Priority Mode & Auto-Build
   ============================================================ */

.bld-goals-panel {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dark);
    margin-bottom: 10px;
}

.bld-goals-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: 7px;
}

.bld-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.bld-mode-tab {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    background: transparent;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.15s;
}

.bld-mode-tab.active,
.bld-mode-tab:hover {
    border-color: rgba(176,154,110,0.5);
    color: var(--eft-gold);
    background: rgba(176,154,110,0.07);
}

.bld-priority-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.bld-priority-btn {
    padding: 5px 4px;
    font-size: 0.67rem;
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}

.bld-priority-btn:hover {
    border-color: rgba(176,154,110,0.35);
    color: var(--text-beige);
}

.bld-priority-btn.active {
    background: rgba(176,154,110,0.12);
    border-color: rgba(176,154,110,0.6);
    color: var(--eft-gold);
    font-weight: 600;
}

.bld-target-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.bld-target-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bld-target-label {
    font-size: 0.67rem;
    font-family: var(--font-mono);
    color: var(--text-sub);
    white-space: nowrap;
    flex: 0 0 66px;
}

.bld-target-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-beige);
    font-size: 0.73rem;
    font-family: var(--font-mono);
    padding: 3px 7px;
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}

.bld-target-input:focus {
    border-color: rgba(176,154,110,0.4);
}

.bld-auto-build-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.71rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(74,140,74,0.12);
    border: 1px solid rgba(74,140,74,0.35);
    border-radius: var(--radius);
    color: var(--eft-green);
    cursor: pointer;
    transition: all 0.15s;
}

.bld-auto-build-btn:hover {
    background: rgba(74,140,74,0.22);
    border-color: var(--eft-green);
}

/* Priority indicator badges on slot tiles */
.bld-tile-priority-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
}

.bld-tile-priority-badge.best {
    background: rgba(60,130,60,0.92);
    color: #fff;
    border: 1px solid rgba(74,180,74,0.8);
}

.bld-tile-priority-badge.suggest {
    background: rgba(160,138,90,0.88);
    color: #111;
    border: 1px solid rgba(176,154,110,0.7);
}

/* ============================================================
   APP FOOTER
   ============================================================ */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(6, 7, 8, 0.98);
    border-top: 1px solid var(--border-dark);
    font-size: 0.71rem;
    color: var(--text-sub);
    position: relative;
    z-index: 100;
}

.app-footer-left,
.app-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-footer-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--eft-gold);
    letter-spacing: 0.05em;
}

.app-footer-version {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: var(--text-sub);
    opacity: 0.6;
}

.app-footer-sep {
    opacity: 0.3;
}

.app-footer a {
    color: var(--eft-gold);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.app-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

.app-footer-about-btn {
    background: transparent;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 0.68rem;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.app-footer-about-btn:hover {
    border-color: rgba(176,154,110,0.4);
    color: var(--eft-gold);
}

/* ============================================================
   ABOUT & LEGAL MODAL
   ============================================================ */

.about-modal-content {
    max-width: 640px;
    width: 94vw;
    max-height: 82vh;
    overflow-y: auto;
}

.about-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-dark);
}

.about-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eft-gold);
    margin-bottom: 10px;
}

.about-text {
    font-size: 0.8rem;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}

.about-text strong {
    color: var(--text-beige);
}

.about-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.about-table td {
    padding: 5px 8px 5px 0;
    color: var(--text-sub);
    vertical-align: middle;
}

.about-table td:first-child {
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.about-table td:first-child a {
    color: var(--eft-gold);
    text-decoration: none;
}

.about-table td:first-child a:hover {
    text-decoration: underline;
}

.about-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.about-license-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.63rem;
    font-family: var(--font-mono);
    font-weight: 600;
    background: rgba(176,154,110,0.12);
    border: 1px solid rgba(176,154,110,0.25);
    color: var(--text-sub);
    letter-spacing: 0.03em;
}

/* ============================================================
   AUTH — Login/Register Modal
   ============================================================ */

.auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 0;
}

.auth-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-sub);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 6px 16px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.auth-tab.active {
    color: var(--eft-gold);
    border-bottom-color: var(--eft-gold);
}

.auth-tab:hover:not(.active) {
    color: var(--text-beige);
}

.auth-label {
    color: var(--text-sub);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 5px;
}

.auth-error-box {
    background: rgba(140, 59, 59, 0.3);
    border: 1px solid var(--eft-red);
    padding: 10px;
    margin-bottom: 15px;
    color: var(--eft-red);
    font-size: 0.85rem;
}

.auth-success-box {
    background: rgba(59,120,59,0.25);
    border: 1px solid rgba(74,180,74,0.5);
    padding: 10px;
    margin-bottom: 15px;
    color: rgba(130,200,130,0.9);
    font-size: 0.85rem;
}

/* ============================================================
   AUTH — Profile Chip + Dropdown
   ============================================================ */

.user-dropdown-wrap {
    position: relative;
}

.user-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1.4;
    white-space: nowrap;
}

.user-profile-chip:hover {
    border-color: rgba(176,154,110,0.4);
    background: rgba(176,154,110,0.06);
}

.user-profile-chevron {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-left: 2px;
    transition: transform 0.15s;
}

.profile-dropdown.open .user-profile-chevron {
    transform: rotate(180deg);
}

.role-badge {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 1px 5px;
    border-radius: 2px;
    font-family: 'Rajdhani', sans-serif;
    vertical-align: middle;
}

.role-badge--admin {
    background: rgba(184,156,92,0.18);
    border: 1px solid rgba(184,156,92,0.35);
    color: var(--eft-gold);
}

.role-badge--user {
    background: rgba(100,100,100,0.18);
    border: 1px solid rgba(120,120,120,0.3);
    color: var(--text-sub);
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 9999;
    padding: 12px;
}

.profile-dropdown.open {
    display: block;
}

.profile-dropdown-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-beige);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-dark);
}

.profile-tt-section {
    margin-bottom: 10px;
}

.profile-tt-label {
    font-size: 0.72rem;
    color: var(--text-sub);
    display: block;
    margin-bottom: 5px;
}

.profile-tt-input {
    width: 100%;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.profile-tt-save {
    width: 100%;
    padding: 5px 10px;
    font-size: 0.78rem;
}

.profile-dropdown-sep {
    border-top: 1px solid var(--border-dark);
    margin: 8px 0;
}

.profile-dropdown-logout {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(200,60,60,0.25);
    border-radius: var(--radius);
    color: rgba(200,100,100,0.8);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.profile-dropdown-logout:hover {
    background: rgba(200,60,60,0.12);
    color: rgba(220,120,120,1);
}

/* ============================================================
   AUTH — Forgot Password link
   ============================================================ */

.auth-forgot-link {
    background: transparent;
    border: none;
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0;
    cursor: pointer;
    text-decoration: underline dotted;
    transition: color 0.15s;
    line-height: 1;
}

.auth-forgot-link:hover {
    color: var(--eft-gold);
}

/* ============================================================
   GAME MODE TOGGLE (PvP / PvE)
   ============================================================ */

.game-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.gmt-btn {
    background: var(--bg-dark);
    border: none;
    color: var(--text-sub);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.5;
}

.gmt-btn.gmt-pvp.active {
    background: rgba(180, 80, 80, 0.25);
    color: #e08080;
    border-right: 1px solid rgba(180,80,80,0.3);
}

.gmt-btn.gmt-pve.active {
    background: rgba(60, 120, 200, 0.25);
    color: #80aadf;
    border-left: 1px solid rgba(60,120,200,0.3);
}

.gmt-btn:not(.active):hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}

/* ============================================================
   GOONS — Last Seen Banner
   ============================================================ */

.goons-last-seen-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-element);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-size: 0.82rem;
    min-height: 38px;
}

.goons-banner-mode {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'Rajdhani', sans-serif;
    flex-shrink: 0;
}

.goons-banner-mode--pvp {
    background: rgba(180,80,80,0.18);
    border: 1px solid rgba(180,80,80,0.35);
    color: #e08080;
}

.goons-banner-mode--pve {
    background: rgba(60,120,200,0.18);
    border: 1px solid rgba(60,120,200,0.35);
    color: #80aadf;
}

.goons-banner-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.goons-banner-text {
    color: var(--text-main);
    flex: 1;
}

.goons-banner-time {
    color: var(--text-sub);
    font-size: 0.76rem;
    flex-shrink: 0;
}