:root { --bg:#0c0f13; --card:#121820; --line:#1e2632; --fg:#e7edf3; --muted:#9aa6b2; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px ui-sans-serif,system-ui}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(12,15,19,.9);backdrop-filter:saturate(1.2) blur(6px)}
.topbar h1{font-size:18px;margin:0}
.topbar button{margin-left:6px}
.wrap{max-width:1100px;margin:20px auto;padding:0 16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.controls input[type=text], .controls input[type=color], .controls input[type=range]{background:#0b1016;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px}
.controls button{background:#121a26;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.controls button:hover{border-color:#3b82f6}
#board{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.muted{color:var(--muted)}
dialog{border:none;border-radius:12px;max-width:960px;width:90%;padding:0;background:var(--card);color:var(--fg)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
#gallery{padding:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0e151e}
.card img{display:block;width:100%;height:auto;background:#fff}
.card .meta{padding:8px;font-size:12px;color:var(--muted)}
button{transition:border-color .15s ease, transform .06s ease}
button:active{transform:scale(0.98)}
.hide{display:none}