:root { --bg:#11140f; --card:#1b1f17; --line:#2c3326; --ink:#eef0e8; --mut:#9aa48c; --accent:#c8a24a; --danger:#a8442f; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--ink); height:100vh; }
.hidden { display:none !important; }
.error { color:#e88; } .muted { color:var(--mut); padding:12px; }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; width:320px; display:grid; gap:12px; }
.card h1 { margin:0 0 6px; font-size:22px; }
input, button, select { font:inherit; padding:9px 12px; border-radius:9px; border:1px solid var(--line); }
input { background:#0d0f0a; color:var(--ink); width:100%; }
button { background:var(--accent); color:#1a1a0e; border:none; cursor:pointer; font-weight:600; }
button:disabled { opacity:.4; cursor:not-allowed; }
button.ghost { background:transparent; color:var(--mut); border:1px solid var(--line); }
button.danger { background:var(--danger); color:#fff; padding:6px 9px; }
select { background:#0d0f0a; color:var(--ink); }

/* App shell */
#app { display:flex; flex-direction:column; height:100vh; }
header { display:flex; align-items:center; gap:18px; padding:12px 20px; border-bottom:1px solid var(--line); }
header h1 { font-size:18px; margin:0; }
.tabs { display:flex; gap:6px; flex:1; }
.tab { background:transparent; color:var(--mut); border:1px solid var(--line); padding:6px 14px; }
.tab.active { background:var(--accent); color:#1a1a0e; }
.tabpane { flex:1; min-height:0; overflow:auto; }
#tab-pages.tabpane { overflow:hidden; }
.bar { padding:12px 20px; display:flex; gap:10px; align-items:center; }
.status { color:var(--mut); padding:6px 20px; min-height:1.4em; }
.spacer { flex:1; }

/* Dropzone + grid (images) */
.dropzone { margin:6px 20px; padding:22px; border:2px dashed var(--line); border-radius:14px; text-align:center; color:var(--mut); }
.dropzone.over { border-color:var(--accent); background:#1c2016; }
.dropzone .link { color:var(--accent); cursor:pointer; text-decoration:underline; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; padding:8px 20px 40px; }
.card-img { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.thumb { aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#0d0f0a; }
.meta { padding:8px 10px; } .name { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sub { font-size:11px; color:var(--mut); }
.row { display:flex; gap:6px; padding:0 10px 10px; }
.row button { flex:1; font-size:12px; padding:6px; background:#262c1e; color:var(--ink); border:1px solid var(--line); }
.row button.danger { flex:0 0 auto; }

/* Pages */
.pages-layout { display:flex; height:100%; min-height:0; }
.page-list { width:230px; border-right:1px solid var(--line); overflow:auto; padding:8px; flex:0 0 auto; }
.page-item { display:block; width:100%; text-align:left; background:transparent; color:var(--ink); border:none; border-radius:7px; padding:8px 10px; font-weight:400; cursor:pointer; }
.page-item:hover { background:#20251a; } .page-item.active { background:var(--accent); color:#1a1a0e; font-weight:600; }
.editor-wrap { flex:1; display:flex; flex-direction:column; min-width:0; }
.editor-bar { border-bottom:1px solid var(--line); }
.cur-page { font-weight:600; }
.editor { flex:1; min-height:0; }

/* Galerie */
.gallery-controls { flex-wrap:wrap; }
.gallery-controls label { display:flex; flex-direction:column; font-size:12px; color:var(--mut); gap:3px; }
.gallery-controls input { width:160px; }
.card-img.selectable { cursor:pointer; position:relative; }
.card-img.selectable.sel { outline:3px solid var(--accent); }
.card-img.selectable.sel::after { content:'✓'; position:absolute; top:6px; right:8px; background:var(--accent); color:#1a1a0e; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:700; }
.gen-out { padding:0 20px 30px; }
.codearea { width:100%; min-height:160px; background:#0d0f0a; color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:10px; font:12px/1.45 ui-monospace, Menlo, Consolas, monospace; resize:vertical; }

/* Blocuri */
.blocks-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:8px 20px; }
.blocks-grid label { display:block; font-size:12px; color:var(--mut); margin-bottom:4px; }
.blocks-grid .codearea { min-height:220px; }
code { background:#0d0f0a; padding:1px 5px; border-radius:4px; }