:root { --ink:#f3ede4; --panel:rgba(22,28,40,.82); --accent:#f2a65a; --muted:#a9b3c4; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#18202e; color:var(--ink); font:15px/1.45 "Trebuchet MS","Segoe UI",system-ui,sans-serif; }
body { background:radial-gradient(ellipse at 50% 40%,#2c3c58 0,#18202e 70%); overflow-x:hidden; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.stage { height:100%; display:flex; flex-direction:column; align-items:center; padding:20px 16px 24px; }
.logo { margin:6px 0 0; font-size:clamp(30px,6vw,60px); letter-spacing:3px; font-weight:800; text-align:center; line-height:1.05; text-shadow:0 4px 24px rgba(0,0,0,.5); }
.logo span { color:var(--accent); }
.tag { margin:6px 0 0; color:var(--muted); text-align:center; }
#car3d { flex:1; width:100%; min-height:0; cursor:grab; touch-action:none; display:block; }
#car3d.grabbing { cursor:grabbing; }
.hint { margin:0 0 14px; font-size:12px; color:var(--muted); }
.buttons { display:grid; grid-template-columns:repeat(4,minmax(130px,190px)); gap:12px; }
.mbtn { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; border-radius:10px; background:#26324a; color:var(--ink);
  font-weight:700; font-size:17px; text-decoration:none; border:1px solid #3a475e; transition:transform .12s,background .12s; }
.mbtn:hover { transform:translateY(-2px); background:#32415f; }
.mbtn.primary { background:var(--accent); color:#2a1c0c; border-color:var(--accent); }
.mbtn.primary:hover { background:#f7b878; }
.mbtn small { font-size:11px; font-weight:400; color:var(--muted); }
@media (max-width:700px) { .buttons { grid-template-columns:repeat(2,1fr); width:100%; max-width:380px; } }
/* panels / settings */
.page { min-height:100%; padding:20px 16px 32px; max-width:1000px; margin:0 auto; }
.page h1 { font-size:28px; margin:8px 0 16px; }
.layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } }
.card { background:var(--panel); border-radius:12px; padding:18px; backdrop-filter:blur(6px); }
.preview { padding:0; min-height:340px; overflow:hidden; position:relative; }
.preview canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; display:block; }
.preview canvas.grabbing { cursor:grabbing; }
.card h2 { font-size:15px; margin:0 0 8px; }
.group { padding:14px 0; border-bottom:1px solid #2f3b52; } .group:last-of-type { border-bottom:0; }
.row { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.desc { font-size:13px; color:var(--muted); margin:2px 0 0; }
input[type=text] { width:110px; padding:8px 9px; border-radius:6px; border:1px solid #3a475e; background:#121926; color:var(--ink); font:inherit; }
input[type=color] { width:52px; height:38px; padding:2px; border:1px solid #3a475e; border-radius:6px; background:#121926; cursor:pointer; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sw { width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.25); cursor:pointer; padding:0; }
.sw.sel { border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
.switch { position:relative; width:46px; height:26px; flex:none; }
.switch input { opacity:0; position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch span { position:absolute; inset:0; background:#3a475e; border-radius:13px; transition:background .15s; }
.switch span::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch input:checked + span { background:var(--accent); } .switch input:checked + span::after { transform:translateX(20px); }
.switch input:focus-visible + span { outline:2px solid #fff; outline-offset:2px; }
.btn { display:inline-block; padding:9px 14px; border:0; border-radius:6px; background:#26324a; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--accent); color:#2a1c0c; }
.bar { display:flex; gap:10px; align-items:center; margin-top:12px; }
#saved { font-size:13px; color:var(--muted); opacity:0; transition:opacity .3s; margin-left:auto; } #saved.on { opacity:1; }
.center { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:20px; }