/* ==========================================
   1. KÖK DEĞİŞKENLER VE TEMALAR (THEMES)
   ========================================== */
:root {
    --bg-dark: #121217;
    --panel-bg: rgba(25, 25, 30, 0.9);
    --text-main: #f5f5f7;
    --text-muted: #a1a1a6;
    --border-color: #323237;
    --primary: #0a84ff;
    --primary-hover: #1c9eff;
    --danger: #ff3b30;
    --success: #30d158;
    --warning: #ff9f0a;
    --font-ui: 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-data: 'SF Mono', 'Courier New', Courier, monospace;
}

[data-theme="light"] {
    --bg-dark: #f0f0f5;
    --panel-bg: rgba(255, 255, 255, 0.9);
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --border-color: #d2d2d7;
    --primary: #0071e3;
    --primary-hover: #0077ed;
}

[data-theme="light"] .panel-group { background: rgba(245, 245, 247, 0.8); box-shadow: inset 0 2px 10px rgba(0,0,0,0.05); }
[data-theme="light"] .group-terminal { background: #ffffff; }
[data-theme="light"] .proj-btn, [data-theme="light"] select, [data-theme="light"] .view-btn, [data-theme="light"] .screenshot-btn, [data-theme="light"] #infoPanelBox, [data-theme="light"] #consoleOutput { background: #ffffff; color: var(--text-main); }
[data-theme="light"] .proj-btn:hover, [data-theme="light"] .view-btn:hover, [data-theme="light"] .screenshot-btn:hover { background: #f5f5f7; }
[data-theme="light"] #sessionListContainer, [data-theme="light"] #anchorListContainer { background: #ffffff; border-color: var(--border-color); }
[data-theme="light"] .session-item { border-bottom: 1px solid #eee; }
[data-theme="light"] .session-item:hover { background: #f5f5f7; color: var(--text-main); }
[data-theme="light"] .modal-content { background: #ffffff; box-shadow: 0 10px 50px rgba(0,0,0,0.2); }
[data-theme="light"] #modalImage { background: #f0f0f5; border-color: #d2d2d7; }

body { margin: 0; overflow: hidden; background-color: var(--bg-dark); font-family: var(--font-ui); }
canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }

/* ==========================================
   YÜZER PENCERE VE İKON MİMARİSİ
   ========================================== */
.floating-panel {
    position: absolute;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    border-radius: 12px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#controlsWindow, #dataWindow, #envWindow, #terminalWindow { width: 340px; }
#mediaWindow { width: 360px; }
#timelineWindow { width: 520px; height: auto; }

.drag-header {
    background: rgba(30, 30, 35, 0.9);
    color: #ffffff !important;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: nowrap;
    white-space: nowrap;
}
.drag-header:active { cursor: grabbing; }
.drag-header button { background: transparent; color: #a1a1a6 !important; border: none; cursor: pointer; font-size: 16px; font-weight: bold; padding: 0 4px; }
.drag-header button:hover { color: #ffffff !important; }

.header-title { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.header-icon { font-size: 16px; display: flex; align-items: center; justify-content: center; }

.floating-panel.minimized {
    width: 48px !important; height: 48px !important; min-height: 48px !important;
    border-radius: 24px !important; padding: 0 !important; cursor: pointer;
    background: var(--panel-bg);
}
.floating-panel.minimized:hover { background: var(--primary); border-color: var(--primary); transform: scale(1.05); }
.floating-panel.minimized .drag-header {
    width: 100%; height: 100%; padding: 0; margin: 0;
    display: flex !important; justify-content: center !important; align-items: center !important;
    border-bottom: none; background: transparent;
}
.floating-panel.minimized .header-icon { font-size: 22px; margin: 0; }
.floating-panel.minimized .header-text, .floating-panel.minimized .header-controls, .floating-panel.minimized .panel-body-scroll,
.floating-panel.minimized #terminalBody, .floating-panel.minimized #timelineContent, .floating-panel.minimized #mediaContent { display: none !important; }

.panel-body-scroll { overflow-y: auto; padding: 15px; }
.panel-body-scroll::-webkit-scrollbar { width: 6px; }
.panel-body-scroll::-webkit-scrollbar-thumb { background: #323237; border-radius: 3px; }

/* TIMELINE GRAFİĞİ */
.timeline-container { position: relative; height: 180px; margin: 20px 20px 40px 40px; border-left: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color); }
.timeline-tick { position: absolute; bottom: -6px; width: 2px; height: 6px; background: var(--text-muted); transform: translateX(-50%); }
.timeline-tick-label { position: absolute; bottom: -24px; font-size: 11px; color: var(--text-muted); transform: translateX(-50%); font-family: var(--font-data); }
.timeline-bar-container { position: absolute; bottom: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 5px; box-sizing: border-box; }
.timeline-bar-fill { width: 100%; background: rgba(10, 132, 255, 0.4); border-radius: 4px 4px 0 0; border: 1px solid var(--primary); border-bottom: none; transition: background 0.2s ease; position: relative; }
.timeline-bar-fill:hover { background: rgba(10, 132, 255, 0.8); }
.timeline-bar-count { position: absolute; top: -20px; width: 100%; text-align: center; font-size: 11px; color: var(--text-main); font-family: var(--font-data); font-weight: bold; }

/* ARAÇLAR VE LİSTELER */
.ui-section { border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 16px; }
.ui-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 10px; font-weight: bold;}

#projectContainer { display: flex; flex-wrap: wrap; gap: 8px; }
.proj-btn { background: #1c1c1e; color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600; border-radius: 8px; transition: all 0.1s; }
.proj-btn:hover { background: #2c2c2e; }
.proj-btn.active { border-color: var(--primary); background: rgba(10, 132, 255, 0.1); color: var(--primary); }

select { padding: 8px; border: 1px solid var(--border-color); background: #1c1c1e; color: var(--text-main) !important; font-size: 13px; border-radius: 6px; cursor: pointer;}
select:focus { outline: 1px solid var(--primary); }
select option { background-color: var(--bg-dark); color: var(--text-main); }
input { color: var(--text-main) !important; }

#sessionListContainer, #anchorListContainer { min-height: 45px; max-height: 140px; margin-top: 5px; border: 1px solid var(--border-color); border-radius: 6px; background: #151518; overflow-y: auto; }
#sessionListContainer::-webkit-scrollbar, #anchorListContainer::-webkit-scrollbar { width: 4px; }
#sessionListContainer::-webkit-scrollbar-thumb, #anchorListContainer::-webkit-scrollbar-thumb { background: #323237; border-radius: 2px; }

.session-item { padding: 8px 10px; border-bottom: 1px solid #222; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); transition: background 0.1s;}
.session-item:hover { background: #222; color: var(--text-main); }
.session-item:last-child { border-bottom: none; }
.session-item.active-session { background: rgba(10, 132, 255, 0.1); color: var(--primary); border-left: 2px solid var(--primary); }

.view-row { display: flex; gap: 6px; margin-bottom: 6px;}
.view-btn { flex: 1; background: #1c1c1e; color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 0; cursor: pointer; font-size: 12px; font-weight: 600; border-radius: 6px;}
.view-btn:hover { background: #2c2c2e; border-color: var(--primary); color: var(--primary);}
.cam-toggle { width: 100%; background: rgba(10, 132, 255, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 8px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 6px; border-radius: 6px; transition: all 0.2s;}
.cam-toggle:hover { background: rgba(10, 132, 255, 0.2); }
.screenshot-btn { width: 100%; background: #1c1c1e; color: var(--text-main); border: 1px dashed var(--border-color); padding: 10px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 10px; border-radius: 6px;}
.screenshot-btn:hover { background: #2c2c2e; border-color: var(--text-main); }

.timeline-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.btn-group { display: flex; gap: 6px;}
#playBtn, #recordBtn { color: white; border: none; padding: 8px 14px; cursor: pointer; font-weight: bold; font-size: 12px; border-radius: 6px; text-transform: uppercase;}
#playBtn { background-color: var(--primary); } #playBtn:hover { background-color: var(--primary-hover); }
#recordBtn { background-color: #ff3b30; } #recordBtn:hover { background-color: #ff453a; }
.loop-label { color: var(--text-muted); font-size: 11px; display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; font-weight: bold; text-transform: uppercase;}
.timeline-slider-row { display: flex; align-items: center; gap: 12px;}
#timeSlider { flex-grow: 1; cursor: pointer; accent-color: var(--primary); }
#timeCount { color: var(--primary); font-size: 14px; font-weight: bold; font-family: var(--font-data); min-width: 50px; text-align: right; }

#infoPanelBox { background: #1c1c1e; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); border-left: 4px solid var(--danger); transition: all 0.2s;}
#infoTitle { color: var(--danger); font-family: var(--font-data); font-size: 13px; display: block; margin-bottom: 6px;}
#infoNote { margin: 0 0 8px 0; font-size: 13px; line-height: 1.4; color: var(--text-main);}
.meta-data { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); display: block;}

#consoleOutput { background: #1c1c1e; height: 140px; overflow-y: auto; padding: 12px; font-family: var(--font-data); font-size: 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 8px; border: 1px solid var(--border-color);}
#consoleOutput::-webkit-scrollbar { width: 4px; }
#consoleOutput::-webkit-scrollbar-thumb { background: #323237; border-radius: 2px; }

#tooltip { position: absolute; background: #1c1c1e; color: var(--text-main); padding: 12px 16px; font-size: 13px; pointer-events: none; display: none; z-index: 2000; border: 1px solid var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-width: 250px; transform: translate(15px, 15px); border-radius: 8px; font-family: var(--font-ui);}

#anchorModal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--panel-bg); padding: 24px; border-radius: 12px; border: 1px solid var(--border-color); width: 90%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 10px 50px rgba(0,0,0,0.6); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px; }
.modal-title { font-family: var(--font-data); color: var(--danger); font-size: 18px; font-weight: bold; }
.close-btn { color: var(--text-muted); font-size: 28px; cursor: pointer; font-weight: bold; line-height: 1; transition: color 0.2s;}
.close-btn:hover { color: var(--danger); }
#modalImage { max-width: 100%; max-height: 50vh; object-fit: contain; border-radius: 8px; margin-bottom: 16px; background: #000; border: 1px solid #222;}
.modal-body { overflow-y: auto; padding-right: 10px; padding-top: 12px; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: #323237; border-radius: 3px; }
#modalDetails { font-size: 15px; color: var(--text-main); line-height: 1.6; margin-bottom: 12px;}
#modalMeta { font-size: 13px; color: var(--text-muted); font-family: var(--font-data); padding-top: 12px; border-top: 1px dashed var(--border-color);}

.calibration-input { width: 60px; background: #1c1c1e; color: var(--text-main); border: 1px solid var(--border-color); padding: 4px; font-family: var(--font-data); font-size: 12px; border-radius: 4px; text-align: center;}
.calibration-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calibration-label { font-size: 12px; color: #fff; font-family: var(--font-data); width: 60px;}

/* ==========================================
   PANEL DESIGN SYSTEM
   ========================================== */

/* Section label color modifiers */
.section-label.lbl-primary { color: var(--primary); }
.section-label.lbl-danger  { color: var(--danger);  }
.section-label.lbl-warning { color: var(--warning); }
.section-label.lbl-success { color: var(--success); }

/* Modal title color modifiers */
.modal-title.lbl-primary { color: var(--primary); }
.modal-title.lbl-warning { color: var(--warning); }

/* Small muted hint / description text */
.section-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 12px;
    font-family: var(--font-ui);
}

/* Tool sub-sections — revealed on selection */
.tool-section {
    border-top: 1px dashed var(--border-color);
    padding-top: 14px;
    margin-top: 14px;
}
.tool-section--danger  { border-top-color: var(--danger);  }
.tool-section--warning { border-top-color: var(--warning); }

/* Centered muted status / placeholder text */
.status-text {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-data);
    padding: 12px 0;
    line-height: 1.5;
}

/* Label + control side-by-side row */
.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.control-label {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-data);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Full-width panel action buttons */
.panel-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
    line-height: 1.4;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: none;
}
.panel-btn:last-child { margin-bottom: 0; }

/* Tinted (bordered) variants */
.panel-btn--primary { background: rgba(10,132,255,0.10); color: var(--primary); border: 1px solid rgba(10,132,255,0.28); }
.panel-btn--primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.panel-btn--danger  { background: rgba(255,59,48,0.10);  color: var(--danger);  border: 1px solid rgba(255,59,48,0.28); }
.panel-btn--danger:hover  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.panel-btn--warning { background: rgba(255,159,10,0.10); color: var(--warning); border: 1px solid rgba(255,159,10,0.28); }
.panel-btn--warning:hover { background: var(--warning); color: #000; border-color: var(--warning); }
.panel-btn--success { background: rgba(48,209,88,0.10);  color: var(--success); border: 1px solid rgba(48,209,88,0.28); }
.panel-btn--success:hover { background: var(--success); color: #fff; border-color: var(--success); }
.panel-btn--ghost   { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border-color); }
.panel-btn--ghost:hover { background: rgba(255,255,255,0.08); color: var(--text-main); }

/* Solid (filled) variants */
.panel-btn--solid-primary { background: var(--primary); color: #fff; }
.panel-btn--solid-primary:hover { background: var(--primary-hover); }
.panel-btn--solid-danger  { background: var(--danger);  color: #fff; }
.panel-btn--solid-danger:hover  { background: #ff453a; }
.panel-btn--solid-warning { background: var(--warning); color: #000; font-weight: 700; }
.panel-btn--solid-warning:hover { filter: brightness(1.1); }
.panel-btn--solid-success { background: var(--success); color: #fff; }
.panel-btn--solid-success:hover { filter: brightness(1.1); }

/* Scrollable user list (modals) */
.user-list {
    max-height: 220px;
    overflow-y: auto;
    background: #151518;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 14px;
}
.user-list::-webkit-scrollbar { width: 4px; }
.user-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Media elements (video / img) inside panels */
.panel-media {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #000;
    display: block;
}

/* Compact modal width */
.modal-sm { max-width: 400px !important; }

/* cam-toggle: normalize margins */
.cam-toggle { margin-top: 0; margin-bottom: 8px; }

/* Playback: auto-rotate button */
#autoRotateBtn {
    color: #fff; border: none; padding: 8px 14px; cursor: pointer;
    font-weight: bold; font-size: 12px; border-radius: 6px; text-transform: uppercase;
    background-color: #5e5ce6;
}
#autoRotateBtn:hover { background-color: #6e6cf6; }

/* ==========================================
   LOGIN & LOBBY EKRANI
   ========================================== */
#loginScreen, #lobbyScreen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, #1c1c1e 0%, #000000 100%);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
#lobbyScreen { z-index: 9998; }

.glass-panel {
    background: rgba(30, 30, 35, 0.6);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 40px; text-align: center;
    width: 420px; max-width: 90vw;
    color: #fff; font-family: var(--font-ui);
}

.landing-title { font-size: 24px; margin-bottom: 8px; font-weight: 600; }
.landing-subtitle { font-size: 14px; margin-bottom: 30px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.landing-buttons { display: flex; flex-direction: column; gap: 12px; }
.pill-btn { border: none; border-radius: 20px; padding: 12px 20px; font-size: 14px; font-weight: 600; width: 100%; cursor: pointer; transition: all 0.2s ease; }
.blue-btn { background: var(--primary); color: white; }
.blue-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.grey-btn { background: rgba(255, 255, 255, 0.15); color: white; }
.grey-btn:hover { background: rgba(255, 255, 255, 0.25); }

/* Mnemonic Seçim */
.word-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
.word-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 10px 4px; border-radius: 8px; font-size: 11px; cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.word-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
.slots-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 20px; }
.slot-box { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); padding: 10px 2px; border-radius: 6px; font-size: 11px; font-family: var(--font-data); text-align: center; color: #fff; overflow: hidden; text-overflow: ellipsis; }

.lobby-layout {
    width: 600px;
    max-width: 95vw;
    height: 95vh;
    max-height: 830px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.lobby-sidebar {
    box-sizing: border-box;
    width: 100%;
    background: rgba(0,0,0,0.3);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 10px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}
.lobby-sidebar img { width: 40px !important; margin: 0 5px 0 0 !important; }
.lobby-sidebar .pill-btn {
    width: auto !important;
    padding: 6px 16px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
}

.lobby-content {
    flex-grow: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.copy-btn {
    background: rgba(10, 132, 255, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.copy-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(10, 132, 255, 0.3);
}
.copy-btn:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: none;
}

.lobby-tab {
    background: transparent; color: var(--text-muted); border: none; padding: 8px 12px;
    font-size: 13px; font-weight: 600; border-radius: 8px; text-align: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.lobby-tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
.lobby-tab.active { background: rgba(10, 132, 255, 0.15); color: var(--primary); }

/* ── Project Grid: square app-icon tiles ── */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
    margin-top: 15px;
}
.project-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(.4,0,.2,1);
    text-align: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.project-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 32px rgba(10,132,255,0.18);
    transform: translateY(-3px) scale(1.02);
}
.project-card.map-highlighted {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success), 0 8px 32px rgba(48,209,88,0.22);
}
/* Icon area (top ~65% of the card) */
.pc-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
    overflow: hidden;
}
.pc-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; inset: 0;
}
.pc-icon-fallback {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
    z-index: 1;
    position: relative;
}
/* Name strip at bottom — fixed height so card stays square */
.pc-name {
    padding: 6px 7px 7px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    flex-shrink: 0;
    overflow: hidden;
}
.pc-name h4 {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}
.pc-name p {
    font-size: 9px;
    color: var(--text-muted);
    margin: 1px 0 0;
    font-family: var(--font-data);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Description line — slides in on hover, clamped to 2 lines */
.pc-desc {
    font-size: 9px !important;
    color: rgba(255,255,255,0.42) !important;
    font-family: var(--font-ui) !important;
    margin: 3px 0 0 !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.22s ease;
    white-space: normal !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.project-card:hover .pc-desc {
    max-height: 32px;
    opacity: 1;
}
/* Action overlay — appears on hover, buttons wrap to 2 rows if needed */
.pc-actions {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 5px 4px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.18s;
    z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 80%, transparent 100%);
    border-radius: 16px 16px 0 0;
}
.project-card:hover .pc-actions { opacity: 1; }
.pc-action-btn {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.8);
    border-radius: 6px;
    width: 24px; height: 24px;
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    line-height: 1;
}
.pc-action-btn:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.35); }
.pc-action-btn.danger:hover { background: rgba(255,59,48,0.25); border-color: var(--danger); color: var(--danger); }
.pc-action-btn.primary:hover { background: rgba(10,132,255,0.25); border-color: var(--primary); color: var(--primary); }
.pc-action-btn.success:hover { background: rgba(48,209,88,0.25); border-color: var(--success); color: var(--success); }
/* location badge */
.pc-loc-badge {
    position: absolute;
    bottom: 38px; left: 7px;
    font-size: 9px;
    background: rgba(48,209,88,0.18);
    border: 1px solid rgba(48,209,88,0.35);
    color: var(--success);
    padding: 2px 5px;
    border-radius: 5px;
    font-family: var(--font-data);
    pointer-events: none;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag-chip { background: rgba(10, 132, 255, 0.1); color: var(--primary); border: 1px solid rgba(10, 132, 255, 0.2); padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

.prof-label {
    font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.prof-input {
    font-family: var(--font-ui); font-size: 13px; color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--border-color) !important;
    padding: 0 12px !important; border-radius: 8px !important; width: 100% !important; height: 42px !important;
    box-sizing: border-box !important; transition: border 0.2s, box-shadow 0.2s; outline: none;
}
.prof-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.prof-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2); }
select.prof-input {
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23a1a1a6" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat; background-position: right 12px top 50%;
}
select.prof-input option { background-color: #1c1c1e; color: #fff; }

/* ==========================================
   LİGHT MOD (AÇIK TEMA)
   ========================================== */
[data-theme="light"] .floating-panel { --text-muted: #5a5a5e; color: var(--text-main); }
[data-theme="light"] .section-label { color: #2c2c2e !important; font-weight: 800 !important; }
[data-theme="light"] .calibration-label { color: var(--text-main) !important; font-weight: 600; }
[data-theme="light"] .view-btn, [data-theme="light"] .proj-btn, [data-theme="light"] .screenshot-btn,
[data-theme="light"] #infoPanelBox, [data-theme="light"] #consoleOutput, [data-theme="light"] .calibration-input, [data-theme="light"] #speedSelect {
    background-color: #ffffff !important; color: var(--text-main) !important; border-color: #c7c7cc !important;
}
[data-theme="light"] span[style*="color:#fff"], [data-theme="light"] span[style*="color: #fff"], [data-theme="light"] span[style*="color: white"] { color: var(--text-main) !important; }
[data-theme="light"] .loop-label { color: #2c2c2e !important; font-weight: 700; }
[data-theme="light"] #transferUserList, [data-theme="light"] #transferProjectUserList { background-color: #ffffff !important; border-color: #c7c7cc !important; }
[data-theme="light"] .transfer-user-item { border-bottom-color: #e5e5ea !important; }

/* ==========================================
   MOBİL OPTİMİZASYON & iPHONE 16 PRO
   ========================================== */
@media screen and (max-width: 768px) {
    body, html {
        touch-action: none;
        overscroll-behavior: none;
        overflow: hidden;
    }

    /* --- Login Screen --- */
    #loginScreen .glass-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        min-height: 100%;
        padding: 40px 24px 32px !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Safe area: Dynamic Island / notch */
        padding-top: max(40px, calc(env(safe-area-inset-top) + 20px)) !important;
        padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    }

    /* --- Lobby Layout: full screen, visible --- */
    .glass-panel.lobby-layout {
        width: 100vw !important;
        height: 100svh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        flex-direction: column;
        /* Intentionally NOT display:none — lobby must be visible */
    }

    /* --- Sidebar → horizontal scrollable tab bar --- */
    .lobby-sidebar {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding: 10px 16px !important;
        padding-top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
        gap: 6px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        /* hide scrollbar but keep scroll */
        scrollbar-width: none;
    }
    .lobby-sidebar::-webkit-scrollbar { display: none; }
    .lobby-sidebar img { display: none !important; }
    .lobby-sidebar .pill-btn {
        flex-shrink: 0 !important;
        padding: 6px 14px !important;
    }

    /* --- Lobby tab buttons --- */
    .lobby-tab {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 36px !important;
        font-size: 13px;
    }

    /* --- Content area: scrollable --- */
    .lobby-content {
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    }

    /* --- Touch target minimums --- */
    input, select, .view-btn, .pill-btn, .proj-btn { min-height: 44px; font-size: 14px; }

    /* --- Project cards: 2-column grid on small screens --- */
    .project-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================
   AI INTERPRETATION LAYER
   ========================================== */

/* ---- Theme chips (legend + report) ---- */
.theme-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-ui);
    background: color-mix(in srgb, var(--chip-color, #0a84ff) 15%, transparent);
    color: var(--chip-color, #0a84ff);
    border: 1px solid color-mix(in srgb, var(--chip-color, #0a84ff) 35%, transparent);
    white-space: nowrap;
    cursor: default;
}

/* ---- AI Report Modal ---- */
.modal-ai {
    width: min(700px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.modal-ai .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Participant / Collective report cards ---- */
.ai-report-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}
.ai-report-card--collective {
    border-color: rgba(10,132,255,0.35);
    background: rgba(10,132,255,0.05);
}
.ai-report-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-ui);
    margin-bottom: 8px;
}

/* ---- Per-theme rows inside a card ---- */
.ai-theme-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-theme-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ai-theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}
.ai-theme-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-ui);
    margin-bottom: 3px;
}
.ai-theme-narrative {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    font-family: var(--font-ui);
}
.ai-anchor-ids {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-data);
    margin-top: 4px;
    opacity: 0.7;
}

/* ---- Collective: stacked distribution bar ---- */
.ai-distribution-bar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0 8px;
    gap: 1px;
}
.ai-dist-segment {
    height: 100%;
    min-width: 2px;
    transition: opacity 0.2s;
}
.ai-dist-segment:hover { opacity: 0.8; }
.ai-dist-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.ai-dist-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-data);
}

/* ---- Convergence zone rows ---- */
.ai-zone-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-top: 1px dashed var(--border-color);
}
.ai-zone-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(10,132,255,0.2);
    border: 1px solid rgba(10,132,255,0.4);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-data);
}
.ai-zone-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
}

/* ---- Light theme overrides ---- */
[data-theme="light"] .ai-report-card { background: #ffffff; border-color: #d2d2d7; }
[data-theme="light"] .ai-report-card--collective { background: rgba(0,113,227,0.04); border-color: rgba(0,113,227,0.3); }
[data-theme="light"] .theme-chip { filter: none; }
[data-theme="light"] .ai-zone-badge { background: rgba(0,113,227,0.12); border-color: rgba(0,113,227,0.3); }

/* ==========================================
   KATILIMCI ANKET SİSTEMİ (SURVEY)
   ========================================== */

/* Surveys tab layout — takes full height of lobby-content and scrolls internally */
#tab-surveys {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Form type nav tabs */
.survey-nav {
    display: flex;
    gap: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 4px;
}
.survey-nav-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-ui);
    padding: 8px 6px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.survey-nav-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.survey-nav-btn.active { background: var(--primary); color: #fff; }

/* Scrollable form body */
.survey-form-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    /* Fallback height when flex chain is broken */
    max-height: calc(min(95vh, 830px) - 310px);
}
.survey-form-body::-webkit-scrollbar { width: 4px; }
.survey-form-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Section header — purple band */
.survey-section-header {
    background: rgba(94, 77, 173, 0.25);
    border-left: 3px solid #7c5cbf;
    color: #c4aaff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 16px 0 8px;
    font-family: var(--font-ui);
}

/* Info block */
.survey-info-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 8px;
    font-family: var(--font-ui);
}

/* Individual question */
.survey-question {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.survey-question:last-child { border-bottom: none; }
.survey-question.survey-missing { background: rgba(255,59,48,0.07); border-radius: 8px; padding: 12px 8px; }
.survey-question-num {
    font-size: 11px;
    font-family: var(--font-data);
    color: var(--text-muted);
    min-width: 18px;
    padding-top: 1px;
    flex-shrink: 0;
}
.survey-question-body { flex: 1; min-width: 0; }
.survey-question-text {
    font-size: 13px;
    color: var(--text-main);
    font-family: var(--font-ui);
    line-height: 1.45;
    margin-bottom: 10px;
}
.survey-required { color: var(--danger); }

/* Text input inside survey */
.survey-text-input { width: 100%; box-sizing: border-box; }

/* Textarea */
.survey-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 13px;
    padding: 10px 12px;
    line-height: 1.5;
    outline: none;
    transition: border 0.2s;
}
.survey-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,132,255,0.15); }
.survey-textarea::placeholder { color: rgba(255,255,255,0.25); }

/* Radio / Checkbox options */
.survey-options { display: flex; flex-direction: column; gap: 6px; }
.survey-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.1s;
}
.survey-option-label:hover { background: rgba(255,255,255,0.04); }
.survey-option-label input[type="radio"],
.survey-option-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.survey-option-text {
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    line-height: 1.4;
}
.survey-option-label:has(input:checked) .survey-option-text { color: var(--text-main); }

/* 7-point scale (scale7 + likert7) */
.scale7-wrap { display: flex; flex-direction: column; gap: 6px; }
.scale7-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    line-height: 1.3;
}
.scale7-row {
    display: flex;
    gap: 4px;
}
.scale-btn {
    flex: 1;
    padding: 8px 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-data);
    cursor: pointer;
    transition: all 0.12s;
    min-width: 0;
}
.scale-btn:hover { background: rgba(10,132,255,0.15); border-color: var(--primary); color: var(--primary); }
.scale-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Severity 4-point scale */
.severity-row {
    display: flex;
    gap: 6px;
}
.severity-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    min-width: 0;
}
.severity-btn:hover { background: rgba(10,132,255,0.12); border-color: var(--primary); }
.severity-btn.active { background: var(--primary); border-color: var(--primary); }
.severity-btn.active .severity-num,
.severity-btn.active .severity-label { color: #fff; }
.severity-num {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-data);
    color: var(--text-main);
    line-height: 1;
}
.severity-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-ui);
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Submit status */
.survey-status {
    font-size: 12px;
    font-family: var(--font-ui);
    font-weight: 600;
    min-height: 20px;
    margin-top: 8px;
    text-align: center;
}
.survey-status--success { color: var(--success); }
.survey-status--error { color: var(--danger); }

/* Light theme */
[data-theme="light"] .survey-section-header { background: rgba(94,77,173,0.1); color: #5e4dad; border-left-color: #7c5cbf; }
[data-theme="light"] .survey-info-block { background: #f5f5f7; border-color: #d2d2d7; }
[data-theme="light"] .survey-textarea { background: #ffffff; border-color: #d2d2d7; color: var(--text-main); }
[data-theme="light"] .scale-btn { background: #f5f5f7; border-color: #d2d2d7; color: var(--text-main); }
[data-theme="light"] .scale-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="light"] .severity-btn { background: #f5f5f7; border-color: #d2d2d7; }
[data-theme="light"] .severity-num { color: var(--text-main); }
[data-theme="light"] .survey-nav { background: rgba(0,0,0,0.05); }

/* Mobile */
@media screen and (max-width: 768px) {
    .scale7-labels { font-size: 9px; }
    .scale-btn { padding: 10px 2px; font-size: 12px; }
    .severity-btn { padding: 10px 3px; }
    .severity-label { font-size: 8px; }
    #tab-surveys { flex: none; overflow: visible; }
    .survey-form-body { overflow-y: visible; max-height: none; flex: none; }
}

/* ==========================================
   BİLDİRİMLER — MESAJ BİLDİRİM KARTLARI
   ========================================== */

.notif-msg-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(10, 132, 255, 0.07);
    border: 1px solid rgba(10, 132, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 8px;
}
.notif-msg-card:hover {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.4);
}

.notif-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(10, 132, 255, 0.18);
    border: 1px solid rgba(10, 132, 255, 0.35);
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-ui);
}

[data-theme="light"] .notif-msg-card {
    background: rgba(0, 113, 227, 0.05);
    border-color: rgba(0, 113, 227, 0.18);
}
[data-theme="light"] .notif-msg-card:hover {
    background: rgba(0, 113, 227, 0.1);
    border-color: rgba(0, 113, 227, 0.35);
}

/* ==========================================
   ADMIN PANELİ LAYOUT
   ========================================== */

/* Admin tab — flex column, scrollable, fills lobby-content */
#tab-admin {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#tab-admin::-webkit-scrollbar { width: 4px; }
#tab-admin::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Survey reports sub-tab: normal block flow */
#adminSubTab_surveys {
    display: block;
}

/* ==========================================
   ADMIN: KULLANICI YÖNETİMİ
   ========================================== */

/* Sub-tab container — flex column when visible */
#adminSubTab_users {
    flex: 1;
    min-height: 0;
}

/* The horizontal split: list | edit form */
.admin-um-split {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* Fixed height fallback matching survey-form-body pattern */
    max-height: calc(min(95vh, 830px) - 200px);
}

/* Scrollable user list on the left */
.admin-um-list {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 6px;
}
.admin-um-list::-webkit-scrollbar { width: 4px; }
.admin-um-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Single user row */
.admin-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.admin-user-item:hover  { background: rgba(255,255,255,0.05); }
.admin-user-item.active { background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.2); }

/* Edit form on the right */
.admin-um-edit {
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding-left: 14px;
    min-width: 0;
}
.admin-um-edit::-webkit-scrollbar { width: 4px; }
.admin-um-edit::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Role badge in the edit panel header */
.admin-role-badge {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-ui);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Light theme */
[data-theme="light"] .admin-um-list { background: #f5f5f7; border-color: #d2d2d7; }
[data-theme="light"] .admin-user-item:hover  { background: rgba(0,0,0,0.04); }
[data-theme="light"] .admin-user-item.active { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.25); }

/* Mobile */
@media screen and (max-width: 768px) {
    .admin-um-split { flex-direction: column; max-height: none; overflow: visible; }
    .admin-um-list  { width: 100%; max-height: 180px; }
}

/* ==========================================
   MESAJLAŞMA SİSTEMİ (MESSAGES)
   ========================================== */

/* Tab takes full lobby-content height */
#tab-messages {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Two-column layout inside the tab */
.msg-layout {
    display: flex;
    gap: 12px;
    height: 100%;
    overflow: hidden;
    min-height: 0;
    /* fallback height matching survey-form-body pattern */
    max-height: calc(min(95vh, 830px) - 80px);
}

/* ---- Left panel: conversation list ---- */
.msg-conv-panel {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

.msg-conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    flex-shrink: 0;
}

.msg-new-btn {
    background: rgba(10,132,255,0.1);
    border: 1px solid rgba(10,132,255,0.3);
    color: var(--primary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}
.msg-new-btn:hover { background: var(--primary); color: #fff; }

/* Sidebar scrollable body */
.msg-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}
.msg-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.msg-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Each section's conversation list (no scroll — parent scrolls) */
.msg-conv-list-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Legacy alias kept for any code that still references msg-conv-list */
.msg-conv-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}
.msg-conv-list::-webkit-scrollbar { width: 4px; }
.msg-conv-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Section dividers in sidebar */
.msg-section-header {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 10px 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.msg-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin: 0 0 6px;
    text-transform: uppercase;
}
.msg-new-panel {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
}
.msg-empty-hint {
    padding: 10px 4px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* Single conversation row */
.msg-conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.msg-conv-item:hover { background: rgba(255,255,255,0.05); }
.msg-conv-item.active { background: rgba(10,132,255,0.12); }

.msg-conv-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(10,132,255,0.2);
    border: 1px solid rgba(10,132,255,0.35);
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-ui);
}
.msg-conv-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.msg-conv-info {
    flex: 1;
    min-width: 0;
}
.msg-conv-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-preview {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Unread badge on conversation row */
.msg-unread-badge {
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-data);
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Unread badge on sidebar tab button */
.msg-tab-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-data);
    line-height: 1;
}

/* User picker list (new conversation) */
.msg-user-list {
    max-height: 160px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 6px;
}
.msg-user-list::-webkit-scrollbar { width: 4px; }
.msg-user-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.msg-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.msg-user-item:last-child { border-bottom: none; }
.msg-user-item:hover { background: rgba(10,132,255,0.1); }

/* ---- Right panel: thread ---- */
.msg-thread-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border-left: 1px solid rgba(255,255,255,0.07);
    padding-left: 12px;
}

.msg-thread-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

.msg-thread-header {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Scrollable messages area */
.msg-bubble-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px 8px;
    min-height: 0;
}
.msg-bubble-list::-webkit-scrollbar { width: 4px; }
.msg-bubble-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Bubble wrapper — mine right, theirs left */
.msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.msg-bubble-wrap.mine {
    align-self: flex-end;
    align-items: flex-end;
}
.msg-bubble-wrap.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--font-ui);
    word-break: break-word;
}
.msg-bubble-wrap.mine .msg-bubble {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg-bubble-wrap.theirs .msg-bubble {
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 4px;
}

.msg-bubble-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-data);
    margin-top: 2px;
    padding: 0 4px;
}

/* Input row at the bottom */
.msg-input-row {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    align-items: center;
}

.msg-send-btn {
    background: var(--primary);
    border: none;
    color: #fff;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0;
}
.msg-send-btn:hover { background: var(--primary-hover); }

/* ── Group avatar (green tint) ── */
.grp-avatar {
    background: rgba(48,209,88,0.18) !important;
    border-color: rgba(48,209,88,0.35) !important;
    color: var(--success) !important;
}

/* ── Sender name above theirs bubble in group chat ── */
.msg-bubble-sender {
    font-size: 10px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 2px;
    padding: 0 4px;
    letter-spacing: 0.2px;
}

/* ── Group member picker (checkbox-style) ── */
.grp-member-pick {
    position: relative;
    transition: background 0.1s;
}
.grp-member-pick.selected {
    background: rgba(48,209,88,0.08);
}
.grp-member-pick.selected .msg-conv-avatar {
    background: rgba(48,209,88,0.2) !important;
    border-color: rgba(48,209,88,0.4) !important;
    color: var(--success) !important;
}
.grp-pick-check {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--success);
    font-weight: 700;
    transition: all 0.12s;
}
.grp-member-pick.selected .grp-pick-check {
    background: rgba(48,209,88,0.25);
    border-color: var(--success);
}

/* Light theme overrides */
[data-theme="light"] .msg-conv-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .msg-conv-item.active { background: rgba(0,113,227,0.08); }
[data-theme="light"] .msg-bubble-wrap.theirs .msg-bubble { background: #f0f0f5; border-color: #d2d2d7; color: var(--text-main); }
[data-theme="light"] .msg-user-list { background: #ffffff; }
[data-theme="light"] .msg-user-item:hover { background: rgba(0,113,227,0.06); }

/* Mobile: stack panels vertically */
@media screen and (max-width: 768px) {
    #tab-messages { flex: none; overflow: visible; }
    .msg-layout {
        flex-direction: column;
        max-height: none;
        height: auto;
        overflow: visible;
    }
    .msg-conv-panel {
        width: 100%;
        max-height: 240px;
        overflow: hidden;
    }
    .msg-thread-panel {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
        padding-left: 0;
        padding-top: 12px;
        min-height: 300px;
    }
    .msg-bubble-list { max-height: 260px; overflow-y: auto; }
}

/* ==========================================
   LEAFLET MAP � DARK THEME OVERRIDES
   ========================================== */
.leaflet-container {
    background: #1a1a1f;
    font-family: var(--font-ui);
}
/* Hide all default Leaflet controls we don't need */
.leaflet-control-attribution {
    background: rgba(0,0,0,0.45) !important;
    color: #555 !important;
    font-size: 9px !important;
    border-radius: 4px 0 0 0 !important;
}
.leaflet-control-attribution a { color: #666 !important; }

/* Zoom control */
.leaflet-control-zoom a {
    background: rgba(28,28,30,0.92) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    backdrop-filter: blur(8px);
}
.leaflet-control-zoom a:hover {
    background: rgba(50,50,55,0.95) !important;
    color: #fff !important;
}
.leaflet-bar { border: 1px solid var(--border-color) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; }

/* Popups */
.leaflet-popup-content-wrapper {
    background: rgba(25,25,30,0.97) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important;
    color: var(--text-main) !important;
    backdrop-filter: blur(12px);
    padding: 0 !important;
}
.leaflet-popup-content { margin: 12px 16px !important; }
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-close-button {
    color: var(--text-muted) !important;
    font-size: 18px !important;
    top: 6px !important;
    right: 8px !important;
}
.leaflet-popup-close-button:hover { color: #fff !important; }

/* Marker pulse animation */
@keyframes ro-pin-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(10,132,255,0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(10,132,255,0); }
    100% { box-shadow: 0 0 0 0   rgba(10,132,255,0); }
}
.ro-map-pin {
    width: 14px; height: 14px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    animation: ro-pin-pulse 2s infinite;
    cursor: pointer;
}
.ro-map-pin-drop {
    width: 16px; height: 16px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 10px rgba(48,209,88,0.5);
    cursor: grab;
}

/* OSM tiles → dark theme via CSS filter
   invert+hue-rotate mimics CartoDB Dark Matter:
   land becomes dark navy, roads light gray, water teal.
   Low saturation + reduced brightness keeps buildings subtle. */
#projectsMap .leaflet-tile-pane,
#pinMap       .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(200deg) brightness(82%) contrast(88%) saturate(0.35);
}