/* ═══════════════════════════════════════════════════════════════════
   FONTVOID — fontvoid.css
   Analog Horror Pixel Font Editor
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─────────────────────────────────────────── */
:root {
    --bg-primary:    #0a0a0a;
    --bg-secondary:  #111111;
    --bg-tertiary:   #1a1a1a;
    --bg-hover:      #222222;
    --text-primary:  #e0e0e0;
    --text-secondary:#888888;
    --text-dim:      #444444;
    --accent:        #ff0040;
    --accent-dim:    #990028;
    --accent-glow:   rgba(255,0,64,0.45);
    --pixel-color:   #ff0040;
    --warning:       #ff6600;
    --success:       #00ff66;
    --error:         #ff0000;
    --border:        #2a2a2a;
    --grid-line:     rgba(255,255,255,0.08);
    --baseline-color:rgba(0,180,255,0.35);
    --selection:     rgba(255,0,64,0.25);
    --font-mono:     'Courier New', Consolas, 'Lucida Console', monospace;
    --font-ui:       system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --z-vfx:      9000;
    --z-splash:   9500;
    --z-modal:    8000;
    --z-toast:    8500;
    --z-context:  8800;
    --transition-fast:   0.08s ease;
    --transition-normal: 0.18s ease;
    --transition-slow:   0.35s ease;
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
    width:100%; height:100%; overflow:hidden;
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: var(--font-ui);
    cursor: pointer;
}

input, select, textarea {
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 2px;
    outline: none;
    transition: border-color var(--transition-fast);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="checkbox"] { accent-color: var(--accent); width:13px; height:13px; }
input[type="radio"]    { accent-color: var(--accent); }

::-webkit-scrollbar               { width:6px; height:6px; }
::-webkit-scrollbar-track         { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb         { background: var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--text-dim); }

/* ─── VFX LAYERS ────────────────────────────────────────────────── */
#static-overlay {
    position:fixed; inset:0; pointer-events:none; z-index:var(--z-vfx);
    opacity:0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: static-drift 0.12s steps(7) infinite;
}
@keyframes static-drift {
    0%   { transform:translate(0,0); }
    25%  { transform:translate(-1px,1px); }
    50%  { transform:translate(1px,-1px); }
    75%  { transform:translate(-1px,-1px); }
    100% { transform:translate(1px,1px); }
}

#scanlines {
    position:fixed; inset:0; pointer-events:none; z-index:calc(var(--z-vfx) - 1);
    background: repeating-linear-gradient(0deg,
        transparent, transparent 2px,
        rgba(0,0,0,0.09) 2px, rgba(0,0,0,0.09) 4px);
}

#vhs-tracking {
    position:fixed; left:0; right:0; height:3px; pointer-events:none;
    z-index:calc(var(--z-vfx) - 2);
    background: linear-gradient(90deg,
        transparent 5%, rgba(255,255,255,0.05) 50%, transparent 95%);
    animation: vhs-pass 8s linear infinite;
}
@keyframes vhs-pass {
    0%   { top:-3px; opacity:0; }
    3%   { opacity:1; }
    97%  { opacity:1; }
    100% { top:100vh; opacity:0; }
}

/* ─── SPLASH ────────────────────────────────────────────────────── */
#splash-screen {
    position:fixed; inset:0; z-index:var(--z-splash);
    background:#000;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:20px;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#splash-screen.out { opacity:0; visibility:hidden; pointer-events:none; }

#splash-logo {
    font-family: var(--font-mono);
    font-size: clamp(32px, 8vw, 60px);
    font-weight: bold;
    color: var(--accent);
    text-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(255,0,64,0.2);
    letter-spacing: 0.15em;
}

#splash-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    animation: blink-slow 2s ease infinite;
}

#splash-loading {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    width: min(320px, 60vw);
}

#splash-bar {
    width:100%; height:2px;
    background: var(--border);
}
#splash-fill {
    height:100%; width:0%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.2s ease;
}
#splash-status {
    font-family: var(--font-mono); font-size:10px;
    color: var(--text-dim); letter-spacing:0.2em;
}

#splash-ver {
    font-family: var(--font-mono); font-size:9px;
    color: #222; position:absolute; bottom:20px;
}

/* ─── GLITCH TEXT ───────────────────────────────────────────────── */
.glitch { position:relative; }
.glitch::before, .glitch::after {
    content: attr(data-text);
    position:absolute; left:0; top:0;
    width:100%; overflow:hidden;
}
.glitch::before {
    color:#0ff; opacity:0.75;
    animation: glitch-r 4s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}
.glitch::after {
    color:#f0f; opacity:0.75;
    animation: glitch-l 4s infinite;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}
@keyframes glitch-r {
    0%,90%,100% { transform:translate(0); }
    92% { transform:translate(-2px, 1px); }
    94% { transform:translate(2px,-1px); }
    96% { transform:translate(-1px, 2px); }
    98% { transform:translate(1px,-1px); }
}
@keyframes glitch-l {
    0%,90%,100% { transform:translate(0); }
    92% { transform:translate(2px,-1px); }
    94% { transform:translate(-2px, 1px); }
    96% { transform:translate(1px, 2px); }
    98% { transform:translate(-1px,-2px); }
}
@keyframes blink-slow { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* ─── APP LAYOUT ────────────────────────────────────────────────── */
#app {
    display:flex; flex-direction:column;
    height:100vh; width:100vw;
    overflow:hidden;
}

/* ─── HEADER ────────────────────────────────────────────────────── */
#header {
    display:flex; align-items:center; justify-content:space-between;
    height:46px; padding:0 14px; flex-shrink:0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    user-select:none; gap:12px;
}

#logo {
    display:flex; align-items:baseline; gap:8px;
    font-family: var(--font-mono);
    font-size:18px; font-weight:bold;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-glow);
    white-space:nowrap;
}
#version { font-size:9px; color:var(--text-dim); }

#xp-bar {
    position:relative; flex:1; max-width:220px;
    height:18px;
    background: var(--bg-tertiary);
    border:1px solid var(--border); border-radius:2px;
    overflow:hidden; cursor:default;
}
#xp-fill {
    position:absolute; left:0; top:0; height:100%; width:0%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
#xp-text {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-family:var(--font-mono);
    color:var(--text-primary);
    text-shadow:0 1px 2px rgba(0,0,0,0.9);
}

#header-controls { display:flex; gap:6px; }

.icon-btn {
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-tertiary);
    border:1px solid var(--border); border-radius:3px;
    color:var(--text-secondary); font-size:14px;
    transition: all var(--transition-fast);
}
.icon-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--accent); }

/* ─── MAIN ──────────────────────────────────────────────────────── */
#main { display:flex; flex:1; overflow:hidden; min-height:0; }

/* ─── SIDEBARS ──────────────────────────────────────────────────── */
#sidebar-left, #sidebar-right {
    width:230px; min-width:180px; max-width:320px;
    background:var(--bg-secondary);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
    flex-shrink:0;
}
#sidebar-right { border-right:none; border-left:1px solid var(--border); }

section {
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}

section h3 {
    font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.08em;
    color:var(--text-secondary);
    margin-bottom:9px;
}

/* ─── FORMS ─────────────────────────────────────────────────────── */
.form-group { margin-bottom:7px; }
.form-group label {
    display:block; font-size:10px;
    color:var(--text-secondary); margin-bottom:3px;
}
.form-row { display:flex; gap:8px; }
.form-row .form-group { flex:1; min-width:0; }

input[type="text"],
input[type="number"],
select {
    width:100%; height:26px;
    padding:0 7px; font-size:12px;
    background:var(--bg-tertiary);
    border:1px solid var(--border); border-radius:2px;
    color:var(--text-primary);
}

/* ─── TOOLS ─────────────────────────────────────────────────────── */
#tool-buttons {
    display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
}
.tool-btn {
    width:100%; aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:3px; color:var(--text-secondary); font-size:15px;
    transition:all var(--transition-fast);
}
.tool-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.tool-btn.active {
    background:var(--accent-dim); border-color:var(--accent);
    color:#fff; box-shadow:0 0 8px var(--accent-glow);
}

/* ─── CHARACTER OPS ─────────────────────────────────────────────── */
.op-buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.op-buttons button {
    width:100%; aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:13px;
    transition:all var(--transition-fast);
}
.op-buttons button:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--accent); }

/* ─── HISTORY ───────────────────────────────────────────────────── */
#history-controls { display:flex; gap:6px; margin-bottom:7px; }
#history-controls button {
    flex:1; height:26px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:11px;
    transition:all var(--transition-fast);
}
#history-controls button:hover:not(:disabled) { background:var(--bg-hover); color:var(--text-primary); }
#history-controls button:disabled { opacity:0.35; cursor:not-allowed; }

#history-list {
    max-height:100px; overflow-y:auto;
    font-size:10px; font-family:var(--font-mono);
    color:var(--text-dim);
}

/* ─── EDITOR AREA ───────────────────────────────────────────────── */
#editor-area {
    flex:1; display:flex; flex-direction:column;
    min-width:0; background:var(--bg-primary); overflow:hidden;
}

#editor-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    height:34px; padding:0 12px; flex-shrink:0;
    background:var(--bg-secondary);
    border-bottom:1px solid var(--border);
    gap:12px;
}

#zoom-controls { display:flex; align-items:center; gap:4px; }
#zoom-controls button {
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:14px;
    transition:all var(--transition-fast);
}
#zoom-controls button:hover { background:var(--bg-hover); color:var(--text-primary); }
#zoom-level { width:46px; text-align:center; font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); }

#grid-toggle { display:flex; gap:10px; }
#grid-toggle label {
    display:flex; align-items:center; gap:4px;
    font-size:10px; color:var(--text-secondary); cursor:pointer;
}

#current-char-display { display:flex; align-items:center; gap:8px; }
#current-char-label { font-size:20px; font-family:var(--font-mono); color:var(--accent); min-width:20px; text-align:center; }
#current-char-code  { font-size:10px; font-family:var(--font-mono); color:var(--text-dim); }

#canvas-container {
    flex:1; position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; min-height:0;
    background: radial-gradient(ellipse at center, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
}

#editor-canvas, #overlay-canvas {
    position:absolute;
    image-rendering:pixelated; image-rendering:crisp-edges;
    touch-action:none;
    box-shadow:0 0 0 1px var(--border), 0 4px 40px rgba(0,0,0,0.6);
}
#overlay-canvas { pointer-events:none; }

/* ─── PREVIEW ───────────────────────────────────────────────────── */
#preview-section {
    padding:10px 12px; flex-shrink:0;
    background:var(--bg-secondary); border-top:1px solid var(--border);
}
#preview-section h3 { margin-bottom:6px; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-secondary); }

#preview-controls { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
#preview-text { flex:1; height:24px; padding:0 7px; font-size:11px; }

#preview-sizes { display:flex; gap:8px; white-space:nowrap; }
#preview-sizes label { display:flex; align-items:center; gap:3px; font-size:10px; color:var(--text-secondary); cursor:pointer; }

#preview-canvas-wrap { overflow-x:auto; }
#preview-canvas {
    display:block; height:48px; min-width:100%;
    background:var(--bg-primary); border:1px solid var(--border);
    image-rendering:pixelated; image-rendering:crisp-edges;
}

/* ─── CHARSET ───────────────────────────────────────────────────── */
#charset-tabs { display:flex; gap:3px; margin-bottom:7px; }
.charset-tab {
    flex:1; height:24px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:10px;
    transition:all var(--transition-fast);
}
.charset-tab:hover  { background:var(--bg-hover); }
.charset-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--text-primary); }

#charset-grid {
    display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
    max-height:180px; overflow-y:auto;
    padding:3px; background:var(--bg-tertiary);
    border:1px solid var(--border); border-radius:2px; margin-bottom:7px;
}

.char-cell {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    background:var(--bg-secondary); border:1px solid transparent;
    font-family:var(--font-mono); font-size:11px; cursor:pointer;
    transition:all var(--transition-fast);
}
.char-cell:hover  { background:var(--bg-hover); border-color:var(--text-dim); }
.char-cell.active { background:var(--accent-dim); border-color:var(--accent); box-shadow:0 0 5px var(--accent-glow); }
.char-cell.filled { color:var(--text-primary); }
.char-cell.empty  { color:var(--text-dim); }

#charset-controls { display:flex; gap:4px; }
#charset-controls button {
    flex:1; height:24px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:10px;
    transition:all var(--transition-fast);
}
#charset-controls button:hover { background:var(--bg-hover); color:var(--text-primary); }
#goto-char { flex:1.5; height:24px; padding:0 5px; font-size:10px; }

/* ─── LAYERS ────────────────────────────────────────────────────── */
#layer-list {
    min-height:40px; max-height:100px; overflow-y:auto;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; margin-bottom:7px;
}

.layer-item {
    display:flex; align-items:center; gap:6px;
    padding:5px 7px; border-bottom:1px solid var(--border);
    font-size:10px; color:var(--text-secondary);
}
.layer-item:last-child { border-bottom:none; }
.layer-item:hover { background:var(--bg-hover); }
.layer-item span  { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#layer-controls { display:flex; gap:4px; }
#layer-controls button {
    flex:1; height:24px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary); font-size:10px;
    transition:all var(--transition-fast);
}
#layer-controls button:hover { background:var(--bg-hover); color:var(--text-primary); }

/* ─── QUICK ACTIONS ─────────────────────────────────────────────── */
#quick-actions button {
    width:100%; height:30px; margin-bottom:4px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-primary); font-size:11px; text-align:left;
    padding:0 10px; transition:all var(--transition-fast);
}
#quick-actions button:hover { background:var(--bg-hover); border-color:var(--accent); color:var(--accent); }
#action-export { background:var(--accent-dim) !important; border-color:var(--accent) !important; color:#fff !important; }
#action-export:hover { background:var(--accent) !important; }

#autosave-row { padding-top:4px; }
#autosave-row label { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text-secondary); cursor:pointer; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
#footer {
    display:flex; align-items:center; justify-content:space-between;
    height:22px; padding:0 12px; flex-shrink:0;
    background:var(--bg-secondary); border-top:1px solid var(--border);
    font-size:10px; color:var(--text-dim); font-family:var(--font-mono);
}
#status { display:flex; gap:16px; }
#cursor-pos { min-width:40px; }
#notifications { display:flex; gap:6px; overflow:hidden; max-width:300px; }

/* ─── MODAL ─────────────────────────────────────────────────────── */
#modal-overlay {
    position:fixed; inset:0; z-index:var(--z-modal);
    background:rgba(0,0,0,0.82);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
}
#modal-overlay.hidden { display:none; }

#modal-container {
    width:90%; max-width:560px; max-height:85vh;
    background:var(--bg-secondary);
    border:1px solid var(--accent);
    border-radius:4px;
    box-shadow:0 0 50px rgba(0,0,0,0.8), 0 0 20px var(--accent-glow);
    display:flex; flex-direction:column;
    animation: modal-in 0.18s ease;
}
@keyframes modal-in {
    from { transform:scale(0.94) translateY(-8px); opacity:0; }
    to   { transform:none; opacity:1; }
}

#modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border);
}
#modal-title { font-size:14px; font-family:var(--font-mono); color:var(--accent); letter-spacing:0.1em; }
#modal-close {
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--text-secondary); font-size:18px;
    transition:color var(--transition-fast);
}
#modal-close:hover { color:var(--accent); }

#modal-content { flex:1; padding:16px; overflow-y:auto; }
#modal-footer {
    display:flex; justify-content:flex-end; gap:8px;
    padding:12px 16px; border-top:1px solid var(--border);
}

/* Modal button styles */
#modal-footer button,
.modal-actions button,
.modal-btns button {
    height:30px; padding:0 16px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-primary); font-size:12px;
    transition:all var(--transition-fast);
}
#modal-footer button:hover,
.modal-actions button:hover,
.modal-btns button:hover { background:var(--bg-hover); border-color:var(--accent); color:var(--accent); }

.btn-primary {
    background:var(--accent-dim) !important;
    border-color:var(--accent) !important;
    color:#fff !important;
}
.btn-primary:hover { background:var(--accent) !important; }

.btn-danger {
    background:transparent !important;
    border-color:#ff2200 !important;
    color:#ff2200 !important;
    margin-top:4px;
}
.btn-danger:hover { background:#ff2200 !important; color:#fff !important; }

/* ─── MODAL CONTENT STYLES ──────────────────────────────────────── */

/* Settings */
.settings-info {
    margin-top:16px; padding:10px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; font-size:10px; color:var(--text-dim);
    line-height:1.6;
}
.danger-zone {
    margin-top:12px; padding:10px;
    border:1px solid #550000; border-radius:2px;
}
.danger-zone label { font-size:10px; color:#ff4444; display:block; margin-bottom:6px; }

/* Help */
.help-content h4 {
    font-size:11px; color:var(--accent); margin:14px 0 8px;
    text-transform:uppercase; letter-spacing:0.08em;
}
.help-content h4:first-child { margin-top:0; }
.help-table { width:100%; border-collapse:collapse; font-size:11px; font-family:var(--font-mono); }
.help-table td { padding:3px 8px; border-bottom:1px solid var(--border); }
.help-table td:first-child { color:var(--accent); white-space:nowrap; width:40%; }
.help-table td:last-child  { color:var(--text-secondary); }
.help-content ul { font-size:11px; color:var(--text-secondary); padding-left:16px; line-height:2; }
.help-content p  { font-size:10px; color:var(--text-dim); margin-top:6px; }

/* Achievements */
.achievements-header { margin-bottom:12px; }
.ach-stats { display:flex; gap:12px; margin-bottom:6px; }
.ach-stat  { font-size:11px; font-family:var(--font-mono); color:var(--accent); }
.ach-xp-bar {
    height:4px; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:2px; overflow:hidden;
}
.ach-xp-fill { height:100%; background:var(--accent); transition:width 0.5s ease; }

.ach-grid  { display:flex; flex-direction:column; gap:4px; }
.ach-item  {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px;
    background:var(--bg-tertiary); border:1px solid var(--border); border-radius:2px;
}
.ach-item.unlocked { border-color:var(--accent-dim); background:var(--bg-secondary); }
.ach-item.locked   { opacity:0.55; }
.ach-item-icon     { font-size:22px; width:28px; text-align:center; flex-shrink:0; }
.ach-item.locked .ach-item-icon { filter:grayscale(1); }
.ach-item-body     { flex:1; min-width:0; }
.ach-item-name     { font-size:11px; color:var(--text-primary); font-family:var(--font-mono); }
.ach-item-desc     { font-size:10px; color:var(--text-secondary); }
.ach-item-xp       { font-size:10px; font-family:var(--font-mono); color:var(--accent); white-space:nowrap; }

/* Projects list */
.project-list { display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; }
.project-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; background:var(--bg-tertiary);
    border:1px solid var(--border); border-radius:2px;
}
.project-item:hover { border-color:var(--text-dim); }
.project-info { flex:1; min-width:0; }
.project-name { font-size:12px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-meta { font-size:10px; color:var(--text-dim); }
.project-actions { display:flex; gap:4px; }
.project-actions button {
    height:26px; padding:0 10px; font-size:10px;
    background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary);
    transition:all var(--transition-fast);
}
.project-actions button:hover { background:var(--bg-hover); border-color:var(--accent); color:var(--accent); }

/* Export */
.export-options { display:flex; flex-direction:column; gap:16px; }
.export-section h4 { font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
.export-format-btns { display:flex; flex-wrap:wrap; gap:6px; }
.export-format-btns button {
    height:28px; padding:0 12px; font-size:11px;
    background:var(--bg-tertiary); border:1px solid var(--border);
    border-radius:2px; color:var(--text-secondary);
    transition:all var(--transition-fast);
}
.export-format-btns button:hover { background:var(--bg-hover); border-color:var(--accent); color:var(--accent); }
.export-info {
    display:flex; gap:12px;
    font-size:10px; font-family:var(--font-mono);
    color:var(--text-dim); border-top:1px solid var(--border); padding-top:10px;
}

/* Import */
.import-options { display:flex; flex-direction:column; gap:12px; }
.import-section h4 { font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
#imp-file { height:auto; padding:8px; font-size:11px; width:100%; cursor:pointer; }
.modal-actions { display:flex; gap:8px; margin-top:12px; }

/* ─── ACHIEVEMENT TOAST ──────────────────────────────────────────── */
#achievement-toast {
    position:fixed; top:58px; right:16px;
    display:flex; align-items:center; gap:12px;
    padding:14px 18px;
    background:var(--bg-secondary);
    border:1px solid var(--accent); border-radius:4px;
    box-shadow:0 0 30px rgba(0,0,0,0.7), 0 0 12px var(--accent-glow);
    z-index:var(--z-toast);
    transform:translateX(120%);
    transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#achievement-toast.show   { transform:translateX(0); }
#achievement-toast.hidden { display:none; }

#achievement-icon   { font-size:28px; animation:ach-pulse 1.2s ease infinite; }
@keyframes ach-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
#achievement-name   { font-size:13px; font-weight:bold; color:var(--accent); font-family:var(--font-mono); }
#achievement-desc   { font-size:10px; color:var(--text-secondary); margin-top:2px; }
#achievement-xp     { font-size:13px; font-weight:bold; color:var(--success); font-family:var(--font-mono); white-space:nowrap; }

/* ─── CONTEXT MENU ──────────────────────────────────────────────── */
#context-menu {
    position:fixed; min-width:150px; z-index:var(--z-context);
    background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:3px; box-shadow:0 6px 24px rgba(0,0,0,0.6);
    overflow:hidden;
}
#context-menu.hidden { display:none; }
.context-item {
    padding:7px 14px; font-size:12px; cursor:pointer;
    color:var(--text-secondary); transition:background var(--transition-fast);
}
.context-item:hover { background:var(--accent-dim); color:var(--text-primary); }
.context-separator  { height:1px; background:var(--border); margin:3px 0; }

/* ─── NOTIFICATION ──────────────────────────────────────────────── */
.notification {
    padding:3px 8px; border-radius:2px; font-size:10px;
    font-family:var(--font-mono); white-space:nowrap;
    animation:notif-in 0.15s ease;
}
@keyframes notif-in { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:none} }

/* ─── ANIMATIONS / UTILITIES ────────────────────────────────────── */
.fade-in  { animation:fadeIn 0.25s ease; }
.shake    { animation:shake  0.4s ease; }
.pulse    { animation:pulse  2s ease infinite; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:0.55} }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:1100px) {
    #sidebar-left, #sidebar-right { width:200px; }
}

@media (max-width:860px) {
    #main { flex-direction:column; }
    #sidebar-left, #sidebar-right {
        width:100%; max-width:none; max-height:180px;
        flex-direction:row; flex-wrap:wrap;
        overflow-x:auto; overflow-y:hidden;
        border-right:none; border-bottom:1px solid var(--border);
    }
    #sidebar-right { border-left:none; border-top:1px solid var(--border); }
    #sidebar-left section, #sidebar-right section {
        flex:0 0 auto; min-width:180px; border-right:1px solid var(--border); border-bottom:none;
    }
    #xp-bar { max-width:140px; }
}

@media (max-width:580px) {
    #header { padding:0 8px; }
    #logo   { font-size:15px; }
    #xp-bar { display:none; }
    .icon-btn { width:26px; height:26px; }
    #editor-toolbar { flex-wrap:wrap; height:auto; padding:4px 8px; gap:6px; }
    #current-char-display { display:none; }
}

/* ─── PRINT ─────────────────────────────────────────────────────── */
@media print {
    #static-overlay, #scanlines, #vhs-tracking, #splash-screen,
    #header, #sidebar-left, #sidebar-right, #footer,
    #achievement-toast, #context-menu { display:none !important; }
    #main { display:block; }
    #editor-area { width:100%; }
}