:root{
  --bg:#0b0e14; --card:#141926; --line:#232c42; --txt:#e8ecf4; --dim:#8b94a9;
  --acc:#e8a33d; --acc2:#7fd4ff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px;}
header{display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:10;}
.brand{font-weight:700; font-size:17px;}
.brand span{color:var(--acc);}
.ver{font-size:11px; color:var(--dim); background:var(--card);
  padding:4px 10px; border-radius:20px; border:1px solid var(--line);}
main{padding:12px; max-width:640px; margin:0 auto;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px;}
.card.dim{opacity:.75;}
.card h2{margin:0 0 6px; font-size:15px;}
.hint{margin:0 0 10px; color:var(--dim); font-size:13px; line-height:1.45;}
.info{margin-top:10px; font-size:13px; color:var(--acc2); min-height:18px; line-height:1.5;}
.rowlabel{display:block; margin:10px 0 4px; font-size:13px; color:var(--dim);}
.rowlabel b{color:var(--txt);}
input[type=range]{width:100%; margin:6px 0 10px; accent-color:var(--acc); height:28px;}
.filebtn{display:inline-block; background:var(--acc); color:#1a1206; font-weight:700;
  padding:11px 18px; border-radius:10px; cursor:pointer; font-size:14px;}
.btnrow{display:flex; gap:10px; margin:8px 0;}
button{background:#223052; color:var(--txt); border:1px solid var(--line);
  padding:11px 14px; border-radius:10px; font-size:14px; cursor:pointer; flex:1;}
button:disabled{opacity:.4;}
button.on{background:var(--acc); color:#1a1206; border-color:var(--acc); font-weight:700;}
#preview{width:100%; border-radius:10px; background:#000; display:block; margin-top:8px;}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px;}
.fbtn{background:#1a2133; border:2px solid var(--line); border-radius:10px;
  padding:10px 4px; font-size:12px; color:var(--txt); cursor:pointer;}
.fbtn.on{border-color:var(--acc); background:#2a2113;}
.fbtn small{display:block; color:var(--dim); font-size:10px; margin-top:2px;}
.txt{display:block; width:100%; background:#0b0e14; color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:14px; margin:4px 0 6px;}
select.txt{appearance:auto;}
.chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim);
  margin:8px 0;}
.chk input{width:18px; height:18px; accent-color:var(--acc);}
.dlbtn{display:inline-block; background:var(--acc); color:#1a1206; font-weight:700;
  padding:12px 20px; border-radius:10px; text-decoration:none; margin-top:8px;}