:root { --bg:#15121a; --panel:#1f1a27; --panel-2:#2a2335; --ink:#efe9f7; --muted:#a89fb8; --line:#3a3147; --accent:#8b5cf6; --accent-2:#c4a3ff; --gold:#d6b35a; --danger:#e5484d; --radius:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
:root[data-theme="light"] { --bg:#f4f1f8; --panel:#fff; --panel-2:#efe9f7; --ink:#1d1626; --muted:#5e5570; --line:#d9d1e6; --accent:#6d3fd1; --accent-2:#4b2a9e; --gold:#a7832a; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f4f1f8; --panel:#fff; --panel-2:#efe9f7; --ink:#1d1626; --muted:#5e5570; --line:#d9d1e6; --accent:#6d3fd1; --accent-2:#4b2a9e; --gold:#a7832a; } }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); }
body { min-height:100vh; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { display:flex; align-items:center; gap:12px; } .fleur { font-size:30px; color:var(--accent); }
h1 { margin:0; font-size:18px; letter-spacing:.12em; text-transform:uppercase; } .sub { margin:2px 0 0; color:var(--muted); font-size:12px; }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; font-size:13px; letter-spacing:.04em; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); } .btn:hover { filter:brightness(1.1); }
.toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; letter-spacing:.08em; cursor:pointer; border:1px solid var(--line); border-radius:8px; padding:6px 10px; } .toggle input { accent-color:var(--accent); }
.layout { display:grid; grid-template-columns:150px minmax(0,1fr) minmax(360px,46%); gap:14px; padding:14px; flex:1; max-width:1500px; width:100%; margin:0 auto; }
.menu { display:flex; flex-direction:column; gap:6px; }
.menu button { text-align:left; background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:8px; font-weight:700; letter-spacing:.1em; cursor:pointer; font-size:13px; }
.menu button.active { background:var(--accent); border-color:var(--accent); color:#fff; } .menu hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; min-height:520px; overflow:auto; max-height:calc(100vh - 140px); }
.panel h2 { margin:0 0 4px; font-size:16px; letter-spacing:.1em; text-transform:uppercase; } .panel .lead { color:var(--muted); font-size:13px; margin:0 0 14px; }
.subtabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.subtabs button { background:var(--panel-2); border:1px solid var(--line); color:var(--ink); padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; } .subtabs button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.slider { display:grid; grid-template-columns:150px 1fr 44px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); } .slider:last-child { border-bottom:0; }
.slider .name { font-size:13px; font-weight:600; } .slider .name .tier { color:var(--gold); font-size:10px; margin-left:6px; letter-spacing:.1em; }
.slider .bar { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:11px; color:var(--muted); } .slider input[type=range] { width:100%; accent-color:var(--accent); }
.slider .val { text-align:right; font-variant-numeric:tabular-nums; font-size:13px; } .slider.changed .val { color:var(--accent-2); font-weight:700; }
.choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:8px 0 16px; }
.choice { border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:8px; padding:8px 10px; cursor:pointer; text-align:left; font-size:13px; display:flex; align-items:center; gap:8px; }
.choice.active { outline:2px solid var(--accent); border-color:var(--accent); } .choice .swatch { width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.3); flex:none; } .choice small { color:var(--muted); }
.group-title { margin:14px 0 4px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.preview { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:8px; position:sticky; top:14px; align-self:start; height:calc(100vh - 140px); min-height:520px; }
.viewport { flex:1; min-height:0; border-radius:8px; overflow:hidden; background:var(--panel-2); position:relative; }
#cmp-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.5; pointer-events:auto; }
#cmp-opacity { width:110px; accent-color:var(--accent); } #view { width:100%; height:100%; display:block; }
.preview-foot { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .hint { color:var(--muted); font-size:11px; }
textarea.sheet { width:100%; min-height:420px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px; font:12px/1.45 ui-monospace,Consolas,monospace; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.note { background:var(--panel-2); border-left:3px solid var(--gold); padding:8px 10px; font-size:13px; border-radius:6px; margin:10px 0; } .note.err { border-color:var(--danger); }
.drop { border:2px dashed var(--line); border-radius:10px; padding:22px; text-align:center; color:var(--muted); cursor:pointer; } .drop.over { border-color:var(--accent); color:var(--ink); }
.drop img { display:block; max-width:100%; max-height:260px; margin:0 auto; border-radius:8px; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.thumb { position:relative; }
.thumb img { width:100%; height:120px; object-fit:cover; border-radius:6px; }
.thumb-x { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; line-height:22px; padding:0; }
.notes-list { margin:6px 0 12px 18px; font-size:13px; } pre.log { background:var(--panel-2); border-radius:8px; padding:10px; font-size:12px; white-space:pre-wrap; max-height:260px; overflow:auto; }
.foot { color:var(--muted); font-size:11px; text-align:center; padding:12px 16px 20px; }
@media (max-width:1000px) { .layout { grid-template-columns:1fr; } .menu { flex-direction:row; flex-wrap:wrap; } .menu hr { display:none; } .preview { position:static; height:60vh; } .panel { max-height:none; } .slider { grid-template-columns:1fr; gap:4px; } .slider .val { text-align:left; } }