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

:root {
    --bg: #0a0a0a;
    --surface: #121212;
    --border: #1e1e1e;
    --text: #d4d4d4;
    --text-dim: #555;
    --accent: #4fc3f7;
    --accent-dim: #0288d1;
    --accent-press: #0277bd;
    --error: #ef5350;
    --success: #4ade80;
    --warn: #ff9800;
    --font-mono: "JetBrains Mono","Fira Code","Cascadia Code","Consolas","SF Mono","Roboto Mono","Liberation Mono",monospace;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 14px; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { display: flex; flex-direction: column; }

/* Topbar */
#topbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--surface); border-bottom: 1px solid var(--border); height: 36px; flex-shrink: 0; }
.spacer { flex: 1; }

#fav-btn { background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 3px 6px; border-radius: 3px; }
#fav-btn:hover, #fav-btn.active { color: #f59e0b; border-color: #3d2e0a; }

#language-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 24px 4px 7px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 2l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; min-width: 130px; }
#language-select:focus { border-color: var(--accent-dim); }
#language-select optgroup { font-style: normal; font-weight: 600; color: var(--text-dim); font-size: 10px; }

#run-btn { background: var(--accent-dim); color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s; white-space: nowrap; }
#run-btn:hover { background: var(--accent); }
#run-btn:active { background: var(--accent-press); }
#run-btn.running { opacity: .5; pointer-events: none; }

#settings-btn, #plugin-btn { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all .12s; white-space: nowrap; }
#settings-btn:hover, #plugin-btn:hover, #settings-btn.active, #plugin-btn.active { color: var(--accent); border-color: var(--accent-dim); }

/* Tab bar */
#tabbar { display: flex; align-items: center; gap: 0; background: #0d0d0d; border-bottom: 1px solid var(--border); height: 28px; flex-shrink: 0; overflow-x: auto; }
#tabbar:not(.hidden) { display: flex; }
#tabbar .tab { padding: 3px 10px; font-size: 10px; cursor: pointer; border-right: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; user-select: none; }
#tabbar .tab:hover { color: var(--text); background: #181818; }
#tabbar .tab.active { color: var(--accent); background: var(--surface); border-bottom: 2px solid var(--accent-dim); padding-bottom: 1px; }
#tabbar .tab-close { margin-left: 4px; color: var(--text-dim); font-size: 12px; vertical-align: -1px; }
#tabbar .tab-close:hover { color: var(--error); }
#tabbar .tab-add { padding: 3px 8px; font-size: 11px; cursor: pointer; color: var(--text-dim); border: none; background: none; }
#tabbar .tab-add:hover { color: var(--accent); }
#tabbar .tab-preprocessor { font-size: 8px; color: var(--accent-tag); background: #0d2211; padding: 1px 4px; border-radius: 2px; margin-left: 4px; }

/* Stdin */
#stdin-panel { padding: 0; border-top: 1px solid var(--border); background: #0a0a0a; flex-shrink: 0; }
#stdin-panel:not(.hidden) { display: block; }
#stdin-input { width: 100%; background: #0a0a0a; color: var(--text); border: none; padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; outline: none; }
#stdin-input::placeholder { color: #333; }

/* Main area */
main { display: flex; flex: 1; overflow: hidden; }
#editor { flex: 1; overflow: hidden; min-width: 0; }
#editor .cm-editor { height: 100%; }
#editor .cm-editor .cm-scroller { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; }
#editor .cm-editor.cm-focused { outline: none; }
#editor .cm-editor .cm-gutters { background: var(--bg); border-right: 1px solid var(--border); color: var(--text-dim); }
#editor .cm-editor .cm-activeLineGutter { background: var(--surface); }
#editor .cm-editor .cm-activeLine { background: rgba(255,255,255,.03); }
#editor .cm-editor .cm-search { background: var(--surface) !important; color: var(--text) !important; }
#editor .cm-editor .cm-search input { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
#editor .cm-editor .cm-search button { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
#editor .cm-editor .cm-search .cm-button:hover { color: var(--accent); border-color: var(--accent-dim); }

/* Web preview */
#web-preview { width: 50%; border-left: 1px solid var(--border); background: #fff; flex-shrink: 0; position: relative; }
#web-preview:not(.hidden) { display: block; }
#web-preview iframe { width: 100%; height: 100%; border: none; }
#web-preview-close { display: none; position: absolute; top: 4px; right: 4px; z-index: 10; background: rgba(0,0,0,.7); color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }

/* Output */
#output { background: #000; border-top: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; max-height: 50%; min-height: 0; }
#output-toolbar { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: #080808; border-bottom: 1px solid #111; position: sticky; top: 0; z-index: 2; }
#exec-time { font-size: 10px; color: var(--text-dim); }
#exec-time .wall { color: var(--accent); }
#save-dot { color: var(--success); font-size: 7px; opacity: 0; transition: opacity .3s; }
#save-dot.visible { opacity: 1; }
#clear-output, #copy-output { background: none; border: 1px solid #1a1a1a; color: var(--text-dim); font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 3px; cursor: pointer; }
#clear-output:hover, #copy-output:hover { color: var(--accent); border-color: var(--accent-dim); }
#output-content { padding: 8px 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cmd-info { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; opacity: .7; }
.cmd-label { color: var(--accent); }
.stdout { color: var(--text); }
.stderr { color: var(--error); }
.meta-info { color: var(--text-dim); font-size: 11px; margin-top: 4px; padding-top: 4px; border-top: 1px solid #111; }
.meta-info .timed-out { color: var(--warn); }
#output::-webkit-scrollbar { width: 4px; }
#output::-webkit-scrollbar-track { background: #000; }
#output::-webkit-scrollbar-thumb { background: #222; }

/* Status bar */
#statusbar { display: flex; align-items: center; gap: 12px; padding: 2px 10px; background: var(--surface); border-top: 1px solid var(--border); font-size: 10px; color: var(--text-dim); height: 20px; flex-shrink: 0; }
#statusbar span { white-space: nowrap; }

/* Fallback textarea */
#fallback-editor { width: 100%; height: 100%; background: var(--bg); color: var(--text); border: none; padding: 14px; font-family: var(--font-mono); font-size: 14px; line-height: 1.55; resize: none; outline: none; tab-size: 4; }

/* Plugin panel */
#plugin-panel { position: fixed; top: 36px; right: 0; bottom: 20px; width: 300px; background: var(--surface); border-left: 1px solid var(--border); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
#plugin-panel.open { transform: translateX(0); }
#plugin-panel.closed { transform: translateX(100%); }

.panel-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.panel-header span { flex: 1; }
#plugin-search { flex: 2; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 3px 6px; font-size: 10px; font-family: var(--font-mono); border-radius: 3px; outline: none; min-width: 0; }
#plugin-search:focus { border-color: var(--accent-dim); }
#plugin-close, #settings-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 0 3px; line-height: 1; }
#plugin-close:hover, #settings-close:hover { color: var(--text); }

.panel-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.panel-body::-webkit-scrollbar { width: 3px; }
.panel-body::-webkit-scrollbar-track { background: var(--surface); }
.panel-body::-webkit-scrollbar-thumb { background: #1a1a1a; }

.plugin-cat-header { padding: 6px 10px 2px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px; }
.plugin-entry { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1a1a1a; }
.plugin-info { flex: 1; min-width: 0; }
.plugin-name { font-size: 11px; font-weight: 600; margin-bottom: 1px; }
.plugin-desc { font-size: 9px; color: var(--text-dim); line-height: 1.3; }
.plugin-version { font-size: 8px; color: var(--text-dim); margin-top: 2px; opacity: .7; }
.plugin-active-badge { font-size: 8px; color: var(--success); background: #0d3318; padding: 1px 4px; border-radius: 2px; margin-left: 3px; vertical-align: middle; }
.plugin-upcoming-badge { font-size: 8px; color: #888; background: #1a1a1a; padding: 1px 4px; border-radius: 2px; margin-left: 3px; vertical-align: middle; }
.plugin-disabled { font-size: 10px; color: var(--text-dim); opacity: .5; }
.plugin-action { flex-shrink: 0; display: flex; gap: 4px; }
.btn-install, .btn-enable, .btn-remove { padding: 2px 7px; font-size: 9px; font-family: var(--font-mono); border-radius: 3px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); transition: all .12s; white-space: nowrap; }
.btn-install:hover, .btn-enable:hover { border-color: var(--accent-dim); color: var(--accent); }
.btn-enable.enabled { border-color: #1a5c2a; color: var(--success); background: #0d2211; }
.btn-enable.enabled:hover { border-color: var(--error); color: var(--error); background: #1a0d0d; }
.btn-remove { padding: 2px 5px; font-size: 11px; line-height: 1; }
.btn-remove:hover { border-color: var(--error); color: var(--error); background: #1a0d0d; }

/* Settings panel */
#settings-panel { position: fixed; top: 36px; right: 0; bottom: 20px; width: 260px; background: var(--surface); border-left: 1px solid var(--border); z-index: 101; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
#settings-panel.open { transform: translateX(0); }
#settings-panel.closed { transform: translateX(100%); }
.setting { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #1a1a1a; font-size: 11px; }
.setting span { color: var(--text); }
.setting input[type=checkbox] { accent-color: var(--accent-dim); }
.setting input[type=number] { width: 50px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 2px 4px; font-size: 11px; font-family: var(--font-mono); border-radius: 3px; text-align: center; }
.setting select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 2px 4px; font-size: 11px; font-family: var(--font-mono); border-radius: 3px; }

/* Mobile run button */
#mobile-run { position: fixed; bottom: 60px; right: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-dim); color: #fff; border: none; font-size: 18px; cursor: pointer; z-index: 90; box-shadow: 0 2px 12px rgba(0,0,0,.5); transition: transform .12s; display: none; align-items: center; justify-content: center; }
#mobile-run:active { transform: scale(.9); }
#mobile-run.running { opacity: .5; }
@media (max-width: 768px) { #mobile-run { display: flex; } }

/* Keyboard bar */
#keyboard-bar { display: none; align-items: center; gap: 3px; padding: 3px 4px; background: var(--surface); border-top: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
#keyboard-bar:not(.hidden) { display: flex; }
#keyboard-bar button { background: #1a1a1a; color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; white-space: nowrap; min-width: 28px; }
#keyboard-bar button:active { background: #222; }
.kb-close { color: var(--text-dim) !important; font-size: 10px !important; padding: 6px 8px !important; }

/* Help overlay */
#help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 200; display: none; align-items: center; justify-content: center; }
#help-overlay:not(.hidden) { display: flex; }
.help-content { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; max-width: 360px; width: 90%; }
.help-content h3 { font-size: 13px; margin-bottom: 10px; color: var(--accent); }
.help-content div { font-size: 11px; margin: 5px 0; display: flex; align-items: center; gap: 10px; }
.help-content kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; font-size: 10px; font-family: var(--font-mono); color: var(--text); min-width: 80px; text-align: center; }

/* Share toast */
#share-toast { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--accent-dim); color: var(--accent); padding: 6px 16px; border-radius: 6px; font-size: 12px; z-index: 300; opacity: 0; transition: opacity .2s; pointer-events: none; }
#share-toast.show { opacity: 1; }

/* Themes */
body { transition: background .3s, color .3s; }

/* -- Terminal Green ------------------------------------------------- */
.theme-green {
    --bg: #021402; --surface: #0a1e0a; --border: #0f380f;
    --text: #3f3; --text-dim: #1a7a1a; --accent: #0f0;
    --accent-dim: #0c0; --accent-press: #090;
    --error: #f33; --success: #0f0; --warn: #ff0;
}
.theme-green #output { background: #010d01; }
.theme-green #output-toolbar { background: #051405; border-color: #0f380f; }
.theme-green #output::-webkit-scrollbar-track { background: #010d01; }
.theme-green #output::-webkit-scrollbar-thumb { background: #0f380f; }
.theme-green #tabbar { background: #061606; }
.theme-green #tabbar .tab:hover { background: #0d280d; }
.theme-green #stdin-panel, .theme-green #stdin-input { background: #021002; }
.theme-green .plugin-entry, .theme-green .setting, .theme-green .admin-pending-entry { border-color: #0f380f; }
.theme-green .panel-body::-webkit-scrollbar-track { background: #0a1e0a; }
.theme-green .panel-body::-webkit-scrollbar-thumb { background: #0f380f; }
.theme-green #keyboard-bar button { background: #0d280d; border-color: #0f380f; }
.theme-green #keyboard-bar button:active { background: #143a14; }
.theme-green #clear-output, .theme-green #copy-output { border-color: #0f380f; }
.theme-green .meta-info, .theme-green #output-toolbar { border-color: #0f380f; }
.theme-green .ap-approve { border-color: #0a3; }
.theme-green .ap-reject { border-color: #500; }
.theme-green .btn-admin { border-color: #3d2e0a; }
.theme-green .plugin-upcoming-badge { background: #0d280d; }

/* -- Amber ----------------------------------------------------------- */
.theme-amber {
    --bg: #180e00; --surface: #221608; --border: #3a280a;
    --text: #ffb830; --text-dim: #8a6010; --accent: #fa0;
    --accent-dim: #d80; --accent-press: #a60;
    --error: #f44; --success: #fa0; --warn: #fd0;
}
.theme-amber #output { background: #0f0800; }
.theme-amber #output-toolbar { background: #140b02; border-color: #3a280a; }
.theme-amber #output::-webkit-scrollbar-track { background: #0f0800; }
.theme-amber #output::-webkit-scrollbar-thumb { background: #3a280a; }
.theme-amber #tabbar { background: #1a0f04; }
.theme-amber #tabbar .tab:hover { background: #2a1a08; }
.theme-amber #stdin-panel, .theme-amber #stdin-input { background: #140a00; }
.theme-amber .plugin-entry, .theme-amber .setting, .theme-amber .admin-pending-entry { border-color: #3a280a; }
.theme-amber .panel-body::-webkit-scrollbar-track { background: #221608; }
.theme-amber .panel-body::-webkit-scrollbar-thumb { background: #3a280a; }
.theme-amber #keyboard-bar button { background: #2a1a08; border-color: #3a280a; }
.theme-amber #keyboard-bar button:active { background: #3a2a10; }
.theme-amber #clear-output, .theme-amber #copy-output { border-color: #3a280a; }
.theme-amber .meta-info, .theme-amber #output-toolbar { border-color: #3a280a; }
.theme-amber .ap-approve { border-color: #860; }
.theme-amber .ap-reject { border-color: #500; }
.theme-amber .plugin-upcoming-badge { background: #2a1a08; }

/* -- Solar Flare ----------------------------------------------------- */
.theme-solar {
    --bg: #0c0c14; --surface: #181828; --border: #282848;
    --text: #ffe0c0; --text-dim: #8a7060; --accent: #f84;
    --accent-dim: #d62; --accent-press: #b40;
    --error: #f55; --success: #f84; --warn: #fa0;
}
.theme-solar #output { background: #06060c; }
.theme-solar #output-toolbar { background: #0d0d14; border-color: #282848; }
.theme-solar #output::-webkit-scrollbar-track { background: #06060c; }
.theme-solar #output::-webkit-scrollbar-thumb { background: #282848; }
.theme-solar #tabbar { background: #101020; }
.theme-solar #tabbar .tab:hover { background: #202038; }
.theme-solar #stdin-panel, .theme-solar #stdin-input { background: #0a0a10; }
.theme-solar .plugin-entry, .theme-solar .setting, .theme-solar .admin-pending-entry { border-color: #282848; }
.theme-solar .panel-body::-webkit-scrollbar-track { background: #181828; }
.theme-solar .panel-body::-webkit-scrollbar-thumb { background: #282848; }
.theme-solar #keyboard-bar button { background: #202038; border-color: #282848; }
.theme-solar #keyboard-bar button:active { background: #2a2a48; }
.theme-solar #clear-output, .theme-solar #copy-output { border-color: #282848; }
.theme-solar .meta-info, .theme-solar #output-toolbar { border-color: #282848; }
.theme-solar .ap-approve { border-color: #a40; }
.theme-solar .ap-reject { border-color: #500; }
.theme-solar .plugin-upcoming-badge { background: #202038; }

/* -- Nord ------------------------------------------------------------ */
.theme-nord {
    --bg: #242933; --surface: #2e3440; --border: #3b4252;
    --text: #d8dee9; --text-dim: #5e6e82; --accent: #88c0d0;
    --accent-dim: #5e81ac; --accent-press: #4c6a92;
    --error: #bf616a; --success: #a3be8c; --warn: #ebcb8b;
}
.theme-nord #output { background: #1c222b; }
.theme-nord #output-toolbar { background: #242933; border-color: #3b4252; }
.theme-nord #output::-webkit-scrollbar-track { background: #1c222b; }
.theme-nord #output::-webkit-scrollbar-thumb { background: #3b4252; }
.theme-nord #tabbar { background: #282f3a; }
.theme-nord #tabbar .tab:hover { background: #343c4a; }
.theme-nord #stdin-panel, .theme-nord #stdin-input { background: #1e232c; }
.theme-nord .plugin-entry, .theme-nord .setting, .theme-nord .admin-pending-entry { border-color: #3b4252; }
.theme-nord .panel-body::-webkit-scrollbar-track { background: #2e3440; }
.theme-nord .panel-body::-webkit-scrollbar-thumb { background: #3b4252; }
.theme-nord #keyboard-bar button { background: #343c4a; border-color: #3b4252; }
.theme-nord #keyboard-bar button:active { background: #3e4858; }
.theme-nord #clear-output, .theme-nord #copy-output { border-color: #3b4252; }
.theme-nord .meta-info, .theme-nord #output-toolbar { border-color: #3b4252; }
.theme-nord .plugin-upcoming-badge { background: #343c4a; }

/* -- Dracula --------------------------------------------------------- */
.theme-dracula {
    --bg: #1e1f29; --surface: #282a36; --border: #3d3f56;
    --text: #f8f8f2; --text-dim: #6272a4; --accent: #bd93f9;
    --accent-dim: #9a6ce0; --accent-press: #7a4fc7;
    --error: #ff5555; --success: #50fa7b; --warn: #ffb86c;
}
.theme-dracula #output { background: #161720; }
.theme-dracula #output-toolbar { background: #1e1f29; border-color: #3d3f56; }
.theme-dracula #output::-webkit-scrollbar-track { background: #161720; }
.theme-dracula #output::-webkit-scrollbar-thumb { background: #3d3f56; }
.theme-dracula #tabbar { background: #222330; }
.theme-dracula #tabbar .tab:hover { background: #303248; }
.theme-dracula #stdin-panel, .theme-dracula #stdin-input { background: #1a1b24; }
.theme-dracula .plugin-entry, .theme-dracula .setting, .theme-dracula .admin-pending-entry { border-color: #3d3f56; }
.theme-dracula .panel-body::-webkit-scrollbar-track { background: #282a36; }
.theme-dracula .panel-body::-webkit-scrollbar-thumb { background: #3d3f56; }
.theme-dracula #keyboard-bar button { background: #303248; border-color: #3d3f56; }
.theme-dracula #keyboard-bar button:active { background: #3a3c52; }
.theme-dracula #clear-output, .theme-dracula #copy-output { border-color: #3d3f56; }
.theme-dracula .meta-info, .theme-dracula #output-toolbar { border-color: #3d3f56; }
.theme-dracula .plugin-upcoming-badge { background: #303248; }

/* -- Monokai --------------------------------------------------------- */
.theme-monokai {
    --bg: #1e1f1c; --surface: #272822; --border: #3e3d32;
    --text: #f8f8f0; --text-dim: #75715e; --accent: #a6e22e;
    --accent-dim: #86c020; --accent-press: #689e18;
    --error: #f92672; --success: #a6e22e; --warn: #e6db74;
}
.theme-monokai #output { background: #161714; }
.theme-monokai #output-toolbar { background: #1e1f1c; border-color: #3e3d32; }
.theme-monokai #output::-webkit-scrollbar-track { background: #161714; }
.theme-monokai #output::-webkit-scrollbar-thumb { background: #3e3d32; }
.theme-monokai #tabbar { background: #222320; }
.theme-monokai #tabbar .tab:hover { background: #313228; }
.theme-monokai #stdin-panel, .theme-monokai #stdin-input { background: #1a1b18; }
.theme-monokai .plugin-entry, .theme-monokai .setting, .theme-monokai .admin-pending-entry { border-color: #3e3d32; }
.theme-monokai .panel-body::-webkit-scrollbar-track { background: #272822; }
.theme-monokai .panel-body::-webkit-scrollbar-thumb { background: #3e3d32; }
.theme-monokai #keyboard-bar button { background: #313228; border-color: #3e3d32; }
.theme-monokai #keyboard-bar button:active { background: #3b3a30; }
.theme-monokai #clear-output, .theme-monokai #copy-output { border-color: #3e3d32; }
.theme-monokai .meta-info, .theme-monokai #output-toolbar { border-color: #3e3d32; }
.theme-monokai .plugin-upcoming-badge { background: #313228; }

/* Hidden */
.hidden { display: none !important; }

/* Plugin create form */
#plugin-create-overlay, #admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 250; display: none; align-items: center; justify-content: center; }
#plugin-create-overlay:not(.hidden), #admin-overlay:not(.hidden) { display: flex; }
.plugin-create-form { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; width: 380px; max-width: 92vw; max-height: 90vh; overflow-y: auto; }
.plugin-create-form h3 { font-size: 13px; margin-bottom: 14px; color: var(--accent); }
.plugin-create-form label { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; }
.plugin-create-form input, .plugin-create-form select, .plugin-create-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; font-size: 11px; font-family: var(--font-mono); border-radius: 4px; margin-bottom: 10px; outline: none; resize: vertical; }
.plugin-create-form input:focus, .plugin-create-form select:focus, .plugin-create-form textarea:focus { border-color: var(--accent-dim); }
.plugin-create-form textarea { min-height: 60px; }
.plugin-create-form .form-buttons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.plugin-create-form .form-buttons button { padding: 5px 14px; font-size: 11px; font-family: var(--font-mono); border-radius: 4px; cursor: pointer; border: 1px solid var(--border); }
.plugin-create-form .btn-submit { background: var(--accent-dim); color: #fff; border-color: var(--accent-dim); }
.plugin-create-form .btn-submit:hover { background: var(--accent); }
.plugin-create-form .btn-submit:disabled { opacity: .4; pointer-events: none; }
.plugin-create-form .btn-cancel { background: var(--bg); color: var(--text-dim); }
.plugin-create-form .btn-cancel:hover { color: var(--text); }
.plugin-create-form .form-error { color: var(--error); font-size: 10px; margin-bottom: 8px; }
.plugin-create-form .form-success { color: var(--success); font-size: 10px; margin-bottom: 8px; }
.panel-header .btn-create { background: var(--accent-dim); color: #fff; border: none; border-radius: 3px; padding: 3px 8px; font-size: 10px; font-family: var(--font-mono); cursor: pointer; }
.panel-header .btn-create:hover { background: var(--accent); }
.btn-admin { background: var(--bg); color: var(--warn); border: 1px solid #3d2e0a; border-radius: 3px; padding: 3px 8px; font-size: 10px; font-family: var(--font-mono); cursor: pointer; }
.btn-admin:hover { color: #ffb300; border-color: var(--warn); }
.admin-pending-entry { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-bottom: 1px solid #1a1a1a; font-size: 10px; }
.admin-pending-entry .ap-info { flex: 1; min-width: 0; }
.admin-pending-entry .ap-name { font-weight: 600; color: var(--text); }
.admin-pending-entry .ap-desc { color: var(--text-dim); font-size: 9px; margin: 1px 0; }
.admin-pending-entry .ap-meta { color: var(--text-dim); font-size: 8px; }
.admin-pending-entry .ap-actions { display: flex; gap: 3px; flex-shrink: 0; }
.ap-approve, .ap-reject, .ap-delete { padding: 2px 8px; font-size: 9px; font-family: var(--font-mono); border-radius: 3px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); transition: all .12s; }
.ap-approve { color: var(--success); border-color: #1a5c2a; }
.ap-approve:hover { background: #0d2211; }
.ap-reject { color: var(--error); border-color: #3d1010; }
.ap-reject:hover { background: #1a0d0d; }
.ap-delete { color: var(--text-dim); font-size: 10px; padding: 2px 5px; }
.ap-delete:hover { color: var(--error); }
.plugin-pending-badge { font-size: 8px; color: var(--warn); background: #1a1a0a; padding: 1px 4px; border-radius: 2px; margin-left: 3px; vertical-align: middle; }
.plugin-community-badge { font-size: 8px; color: var(--accent); background: #0a1a2e; padding: 1px 4px; border-radius: 2px; margin-left: 3px; vertical-align: middle; }
.experimental-hdr { color: var(--warn); }
.community-hdr { color: var(--accent); }

/* Mobile */
@media (max-width: 768px) {
    #topbar { padding: 3px 6px; height: 32px; gap: 4px; }
    #language-select { font-size: 10px; min-width: 100px; padding: 3px 20px 3px 5px; }
    #run-btn { font-size: 10px; padding: 3px 8px; }
    #settings-btn, #plugin-btn { font-size: 10px; padding: 3px 7px; }
    #editor .cm-editor .cm-scroller { font-size: 13px; line-height: 1.5; }
    #output-content { padding: 6px 8px; font-size: 12px; }
    #statusbar { font-size: 9px; gap: 8px; padding: 1px 6px; height: 18px; }
    #plugin-panel, #settings-panel { top: 32px; bottom: 18px; width: 260px; }
    #web-preview { width: 100%; position: absolute; inset: 0; z-index: 5; }
    #web-preview-close { display: flex; }
    #mobile-run { display: flex; bottom: 20px; }