:root {
        --bg-deep: #050a10;
        --panel-bg: #0b121e;
        --panel-border: #1e293b;
        --cyan: #00f0ff;
        --cyan-dim: rgba(0, 240, 255, 0.1);
        --text-main: #e2e8f0;
        --text-muted: #64748b;
        --success: #00ff9d;
        --danger: #ff2a6d;
        --warning: #f59e0b;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    
    body { 
        margin: 0; font-family: 'Rajdhani', sans-serif; background: var(--bg-deep); color: var(--text-main); height: 100vh; display: flex; overflow: hidden;
    }

    /* --- SIDEBAR --- */
    .sidebar { width: 280px; background: var(--panel-bg); border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; padding: 24px; z-index: 20; box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
    .brand { font-family: 'Share Tech Mono', monospace; font-size: 1.4rem; color: var(--cyan); text-shadow: 0 0 10px var(--cyan-dim); margin-bottom: 40px; display: flex; align-items: center; gap: 10px; }
    
    .profile-card { background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); padding: 20px; border-radius: 4px; text-align: center; margin-bottom: 30px; position: relative; }
    .profile-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
    .profile-card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

    .p-avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 15px var(--cyan-dim); object-fit: cover; margin-bottom: 12px; }
    .p-name { font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
    .p-meta { font-family: 'Share Tech Mono'; font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

    .nav-links { display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .nav-item { padding: 12px 16px; border-radius: 4px; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 600; border: 1px solid transparent; transition: 0.2s; }
    .nav-item:hover, .nav-item.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); box-shadow: inset 4px 0 0 var(--cyan); }

    /* --- MAIN CONTENT --- */
    .main-grid { flex: 1; padding: 20px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow-y: auto; }

    /* --- HUD HEADER --- */
    .hud-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 12px 20px; border-radius: 4px; position: relative; }
    .hud-title { font-family: 'Share Tech Mono'; color: var(--cyan); letter-spacing: 2px; font-size: 0.9rem; }
    .type-anim::after { content: '_'; animation: blink 1s infinite; }
    .sys-clock { font-family: 'Share Tech Mono'; font-size: 1.2rem; font-weight: 700; }

    /* --- MAP PANEL --- */
    .map-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 4px; display: flex; flex-direction: column; position: relative; height: 100%; min-height: 400px; }
    .map-header { padding: 10px 16px; display: flex; justify-content: space-between; font-family: 'Share Tech Mono'; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--panel-border); background: #080f18; }
    #map { flex: 1; width: 100%; filter: grayscale(100%) invert(10%) contrast(1.2); }
    
    /* Map Overlays */
    .map-overlay-stats { position: absolute; bottom: 20px; left: 20px; z-index: 400; background: rgba(11, 18, 30, 0.9); border: 1px solid var(--cyan); padding: 10px; border-radius: 4px; font-family: 'Share Tech Mono'; font-size: 0.8rem; box-shadow: 0 0 20px rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
    .stat-row { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
    .val-cyan { color: var(--cyan); } .val-green { color: var(--success); } .val-red { color: var(--danger); }

    /* --- SCHEDULE LIST --- */
    .list-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; display: flex; flex-direction: column; }
    .list-header { padding: 15px; border-bottom: 1px solid var(--panel-border); font-family: 'Share Tech Mono'; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; }
    .scroll-area { flex: 1; overflow-y: auto; padding: 10px; }

    .class-item { background: rgba(255,255,255,0.02); border-left: 3px solid var(--text-muted); padding: 15px; margin-bottom: 10px; transition: 0.2s; position: relative; }
    .class-item.active { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(0,240,255,0.05), transparent); }
    .class-item.locked { border-left-color: var(--success); }

    .ci-time { font-family: 'Share Tech Mono'; font-size: 0.9rem; color: #fff; margin-bottom: 4px; }
    .ci-subject { font-weight: 700; font-size: 1.1rem; color: var(--cyan); margin-bottom: 4px; }
    .ci-loc { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

    /* --- BUTTONS --- */
    .cyber-btn { width: 100%; margin-top: 10px; background: transparent; border: 1px solid var(--cyan); color: var(--cyan); padding: 10px; font-family: 'Share Tech Mono'; text-transform: uppercase; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .cyber-btn:hover:not(:disabled) { background: var(--cyan); color: #000; box-shadow: 0 0 15px var(--cyan); }
    .cyber-btn:disabled { border-color: var(--text-muted); color: var(--text-muted); cursor: not-allowed; opacity: 0.6; }
    .btn-done { border-color: var(--success); color: var(--success); }
    .btn-done:hover { background: rgba(0, 255, 157, 0.1); color: var(--success); box-shadow: none; cursor: default; }

    /* --- CUSTOM MAP MARKERS --- */
    .student-marker-frame { width: 44px; height: 44px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 0 15px #000; transition: border-color 0.3s, box-shadow 0.3s; }
    .student-marker-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .marker-safe { border: 3px solid var(--success); box-shadow: 0 0 15px var(--success); }
    .marker-warn { border: 3px solid var(--danger); box-shadow: 0 0 15px var(--danger); }

    @keyframes blink { 50% { opacity: 0; } }

    /* RESPONSIVE */
    @media (max-width: 900px) {
        body { flex-direction: column; overflow: auto; height: auto; }
        .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--panel-border); padding: 16px; flex-direction: row; align-items: center; justify-content: space-between; }
        .brand, .nav-links { display: none; }
        .profile-card { margin: 0; padding: 0; border: none; background: transparent; text-align: left; display: flex; align-items: center; gap: 12px; }
        .profile-card::before, .profile-card::after { display: none; }
        .p-avatar { width: 48px; height: 48px; margin: 0; }
        .main-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; padding: 16px; }
        .map-panel { height: 400px; order: 1; }
        .list-panel { order: 2; }
    }

    .btn-buddy-danger {
        background: rgba(239, 68, 68, 0.1) !important;
        border: 1px solid var(--danger) !important;
        color: var(--danger) !important;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important;
    }