/* RZMONG Airsuspension — tema bersama (landing, kontroler, flash, aplikasi Android).
   Pilih lewat data-theme di <html>: neon (default) | merah | terang | anime. Disimpan di localStorage "rzm.uitheme". */
:root,html[data-theme="neon"]{
  --surface:rgba(10,20,40,.88);--topbar:rgba(5,7,13,.6);--led-off:#223;--wheel:#05070d;--track:rgba(255,255,255,.07);
  --car1:#123158;--car2:#060c18;--r:22px;--btn-r:14px;
}
html[data-theme="merah"]{
  --bg:#0a0306;--glass:rgba(255,90,110,.05);--glass2:rgba(255,90,110,.10);--line:rgba(255,70,100,.24);--text:#ffeef1;--dim:#b88a93;
  --accent:#ff2a4a;--accent2:#ffb547;--front:#ff6b6b;--rear:#ffb547;--glow:0 0 20px rgba(255,42,74,.5);
  --surface:rgba(30,6,12,.9);--topbar:rgba(10,3,6,.65);--led-off:#311;--wheel:#0a0306;--track:rgba(255,255,255,.07);--car1:#4a0d18;--car2:#120306;
}
html[data-theme="merah"] body{background:radial-gradient(900px 500px at 85% -10%,rgba(255,42,74,.22),transparent 60%),radial-gradient(700px 500px at -10% 40%,rgba(255,181,71,.10),transparent 60%),var(--bg)}
html[data-theme="terang"]{
  --bg:#eef3fb;--glass:rgba(255,255,255,.62);--glass2:rgba(255,255,255,.85);--line:rgba(30,70,140,.16);--text:#0d1626;--dim:#5b6b88;
  --accent:#0a74ff;--accent2:#c026d3;--front:#0a8cff;--rear:#8b5cf6;--ok:#0aa86b;--warn:#d97706;--bad:#e11d48;--glow:0 6px 18px rgba(10,116,255,.22);
  --surface:#ffffff;--topbar:rgba(255,255,255,.75);--led-off:#dfe6f2;--wheel:#1d2840;--track:rgba(20,40,80,.09);--car1:#cfe0ff;--car2:#8fb0e8;
}
html[data-theme="terang"] body{background:radial-gradient(900px 500px at 85% -10%,rgba(10,116,255,.14),transparent 60%),radial-gradient(700px 500px at -10% 40%,rgba(192,38,211,.08),transparent 60%),var(--bg)}
html[data-theme="anime"]{
  --bg:#fff5fa;--glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.9);--line:rgba(255,130,175,.32);--text:#4a2c43;--dim:#a07893;
  --accent:#ff6fa8;--accent2:#9b8cff;--front:#56b6ff;--rear:#b58cff;--ok:#2fc78f;--warn:#ffa24c;--bad:#ff5277;--glow:0 6px 20px rgba(255,111,168,.32);
  --surface:#ffffff;--topbar:rgba(255,247,251,.82);--led-off:#ffe3ee;--wheel:#5b3a55;--track:rgba(255,111,168,.13);--car1:#ffd1e3;--car2:#ff9cc4;
  --font:"M PLUS Rounded 1c","Nunito",ui-rounded,system-ui,sans-serif;--disp:"M PLUS Rounded 1c",ui-rounded,system-ui,sans-serif;--mono:"M PLUS Rounded 1c",ui-monospace,monospace;
  --r:28px;--btn-r:22px;
}
html[data-theme="anime"] body{background:radial-gradient(800px 500px at 90% -10%,#ffd6e8,transparent 60%),radial-gradient(700px 500px at -10% 40%,#e6e0ff,transparent 60%),radial-gradient(600px 400px at 50% 110%,#d8f3ff,transparent 60%),var(--bg)}
html[data-theme="karbon"]{
  --bg:#0b0c0f;--bg2:#121419;--glass:rgba(255,255,255,.035);--glass2:rgba(255,255,255,.07);--line:rgba(255,255,255,.10);--text:#f2f3f5;--dim:#8b9099;
  --accent:#ff8a1f;--accent2:#ffd166;--front:#38c6ff;--rear:#ff8a1f;--ok:#36e39a;--warn:#ffc043;--bad:#ff4d5e;--glow:0 0 16px rgba(255,138,31,.35);
  --surface:#15171c;--topbar:rgba(11,12,15,.82);--led-off:#23262d;--wheel:#050506;--track:rgba(255,255,255,.07);--car1:#2a2d34;--car2:#121418;
  --font:"Inter","Rajdhani",ui-sans-serif,system-ui,sans-serif;--r:16px;--btn-r:12px;
}
html[data-theme="karbon"] body{background:radial-gradient(900px 480px at 80% -12%,rgba(255,138,31,.10),transparent 60%),linear-gradient(#0b0c0f,#08090b)}
html[data-theme="karbon"] .bg-grid{opacity:.12}
html[data-theme="karbon"] .topbar{background:var(--topbar)}
html[data-theme="terang"] .topbar,html[data-theme="anime"] .topbar,html[data-theme="terang"] .nav,html[data-theme="anime"] .nav,
html[data-theme="merah"] .topbar,html[data-theme="merah"] .nav{background:var(--topbar)}
html[data-theme="terang"] .card,html[data-theme="anime"] .card{box-shadow:0 10px 30px rgba(80,40,90,.10),inset 0 1px 0 #fff}
html[data-theme="terang"] .wifi-setup input,html[data-theme="anime"] .wifi-setup input{background:#fff}
html[data-theme="anime"] .bg-grid,html[data-theme="anime"] body::before{background-image:radial-gradient(rgba(255,111,168,.35) 1.2px,transparent 1.4px);background-size:26px 26px}

/* ---------- pemilih tema ---------- */
.tp{position:relative;display:inline-block;z-index:30}
.tp-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--text);cursor:pointer;font-size:1.1rem;transition:.2s}
.tp-btn:hover{border-color:var(--accent);box-shadow:var(--glow)}
.tp-btn svg{width:22px;height:22px}
.tp-menu{position:absolute;right:0;top:48px;min-width:230px;padding:8px;border-radius:18px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);display:none;animation:tpIn .2s ease}
.tp.open .tp-menu{display:block}
@keyframes tpIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.tp-menu small{display:block;color:var(--dim);letter-spacing:.14em;font-size:.62rem;padding:4px 8px}
.tp-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font:inherit;text-align:left}
.tp-opt:hover{background:var(--glass2)}
.tp-opt.on{border-color:var(--accent);color:var(--accent)}
.tp-sw{width:28px;height:28px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.tp-row{display:flex;gap:6px;padding:4px}
.tp-row button{flex:1;padding:7px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font:inherit;font-size:.78rem}
.tp-row button.on{border-color:var(--accent);color:var(--accent)}
.tp-float{position:fixed;right:14px;top:calc(12px + env(safe-area-inset-top))}

/* ---------- ikon lucu (khusus anime) ---------- */
.ico{display:none;width:1.25em;height:1.25em;vertical-align:-.25em}
.ico svg{width:100%;height:100%;display:block}
html[data-theme="anime"] .ico{display:inline-block}
html[data-theme="anime"] .emo{display:none}

/* ---------- gaya anime: besar, bulat, ramah jempol ---------- */
html[data-theme="anime"] .card{border-radius:var(--r)}
html[data-theme="anime"] .card::before{background:linear-gradient(130deg,#ff9cc4,transparent 40%,transparent 60%,#b5a8ff);opacity:.8}
html[data-theme="anime"] .card-head{letter-spacing:.06em;font-size:.82rem;color:#c06590;font-weight:800}
html[data-theme="anime"] .card-head>span:first-child::after{content:" ✿";color:#ff9cc4}
html[data-theme="anime"] .tag{background:#fff0f6;border-color:#ffc2d9;color:#e0558f}
html[data-theme="anime"] .btn,html[data-theme="anime"] .themes button,html[data-theme="anime"] .seg button,html[data-theme="anime"] .toggle,html[data-theme="anime"] .chip{border-radius:var(--btn-r)}
html[data-theme="anime"] .btn{min-height:50px;padding:12px 18px}
html[data-theme="anime"] .btn.neon{color:#fff;border:0;background:linear-gradient(135deg,#ff8fbf,#b49cff);box-shadow:0 6px 18px rgba(255,111,168,.4)}
html[data-theme="anime"] .preset{min-height:110px;border-radius:24px;background:#fff;border:2px solid #ffd3e4;gap:4px}
html[data-theme="anime"] .preset .ico{width:42px;height:42px}
html[data-theme="anime"] .preset.active{border-color:var(--accent);background:linear-gradient(180deg,#fff,#ffe8f2);transform:translateY(-3px) scale(1.02)}
html[data-theme="anime"] .hold{min-height:78px;border-radius:24px;background:#fff;border:2px solid #ffd3e4}
html[data-theme="anime"] .hold .ico{width:34px;height:34px}
html[data-theme="anime"] .hud-read b,html[data-theme="anime"] .g-read b{font-weight:800}
html[data-theme="anime"] .pill{background:#fff}
html[data-theme="anime"] .info{border-style:solid;background:#fff8fb}
html[data-theme="anime"] .seg{background:#fff}
html[data-theme="anime"] .seg button.active{color:#fff}
html[data-theme="anime"] .logo{color:#fff;border-radius:50%}

/* ---------- sakura ---------- */
.sakura{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.petal{position:absolute;top:-30px;width:14px;height:11px;border-radius:12px 1px 12px 1px;background:linear-gradient(135deg,#ffd1e3,#ff9cc4);opacity:.85;
  animation:fall linear infinite,sway ease-in-out infinite alternate}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes sway{from{margin-left:-24px}to{margin-left:24px}}

/* ---------- partikel tap ---------- */
.spark{position:fixed;z-index:60;pointer-events:none;font-size:14px;line-height:1;animation:spark .7s ease-out forwards}
@keyframes spark{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(40deg)}}

/* ---------- maskot ---------- */
.mascot{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;width:96px;height:112px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mascot svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(200,80,140,.3))}
.mascot .m-all{transform-origin:60px 138px;animation:mBob 2.4s ease-in-out infinite}
@keyframes mBob{50%{transform:translateY(-4px)}}
.mascot .m-eye{transform-box:fill-box;transform-origin:center;animation:mBlink 4.2s infinite}
@keyframes mBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.mascot .m-happy-eye,.mascot .m-mouth-o,.mascot .m-mouth-w,.mascot .m-sweat,.mascot .m-arms-up{display:none}
.mascot.happy .m-eye{display:none}.mascot.happy .m-happy-eye{display:inline}
.mascot.happy .m-mouth-s{display:none}.mascot.happy .m-mouth-o{display:inline}
.mascot.happy .m-all{animation:mJump .5s ease 2}
@keyframes mJump{40%{transform:translateY(-14px) scale(1.03,.97)}}
.mascot.lift .m-arms{display:none}.mascot.lift .m-arms-up{display:inline}
.mascot.lift .m-all{animation:mLift .8s ease-in-out infinite}
@keyframes mLift{50%{transform:translateY(-8px) scaleY(1.05)}}
.mascot.lift .m-mouth-s{display:none}.mascot.lift .m-mouth-o{display:inline}
.mascot.crouch .m-all{animation:none;transform:translateY(8px) scale(1.06,.86)}
.mascot.worry .m-sweat{display:inline}.mascot.worry .m-mouth-s{display:none}.mascot.worry .m-mouth-w{display:inline}
.mascot.wiggle .m-all{animation:mWig .5s ease}
@keyframes mWig{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.m-bubble{position:fixed;right:110px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:41;max-width:min(220px,60vw);padding:10px 14px;border-radius:18px 18px 4px 18px;
  background:#fff;color:#4a2c43;border:2px solid #ffc2d9;box-shadow:0 8px 24px rgba(255,111,168,.25);font-family:var(--font);font-weight:700;font-size:.9rem;
  opacity:0;transform:translateY(8px) scale(.9);transition:.25s;pointer-events:none}
.m-bubble.show{opacity:1;transform:none}

/* ---------- onboarding ---------- */
.ob-card{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;width:min(420px,92vw);padding:14px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--accent);box-shadow:var(--glow),0 20px 50px rgba(0,0,0,.35);color:var(--text);font-family:var(--font);animation:tpIn .25s ease}
.ob-card b{color:var(--accent)} .ob-card p{margin:6px 0 10px}
.ob-card .ob-row{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.ob-card .ob-row span{flex:1;color:var(--dim);font-size:.8rem}
.ob-card button{padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.ob-card button.go{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0}
.ob-focus{outline:3px solid var(--accent)!important;outline-offset:4px;border-radius:14px;animation:obPulse 1.2s infinite}
@keyframes obPulse{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.petal,.spark{display:none}}

/* ---------- ilustrasi mobil (cars.js) ---------- */
:root{--cx-road:rgba(255,255,255,.035);--cx-caliper:#e11d2e;--front:#3fb8ff;--rear:#c38bff}
html[data-theme="terang"]{--cx-road:rgba(20,40,80,.06)}
html[data-theme="anime"]{--cx-road:rgba(255,111,168,.08);--cx-caliper:#ff6fa8}

.cx-dash{stroke:var(--dim);stroke-width:2;stroke-dasharray:18 22;opacity:.45}
.cx-dark{fill:#0b0d12}
.cx-strut{stroke:#0b0d12;stroke-width:3;fill:none;stroke-linecap:round}
.cx-intake{fill:#07080c;stroke:rgba(255,255,255,.08);stroke-width:.8}
.cx-rail{stroke:#1a1d24;stroke-width:3.4;fill:none;stroke-linecap:round}
.cx-chrome{stroke:#cfd5dd;stroke-width:1.6;opacity:.8}
.cx-slider{stroke:#1b1e25;stroke-width:6;stroke-linecap:round}
.cx-snorkel{stroke:#111318;stroke-width:5;fill:none;stroke-linecap:round}
.cx-flare{stroke:#121419;stroke-width:9;fill:none;stroke-linecap:round}
.cx-lightbar{fill:#fffbe6;filter:drop-shadow(0 0 6px #fff6b0)}
.cx-head{fill:#fff;stroke:var(--accent);stroke-width:.8}
.cx-tail{fill:#ff2340;stroke:#ff7788;stroke-width:.6}
.cx-accent{stroke:var(--accent);stroke-width:1.6;opacity:.85;filter:drop-shadow(0 0 3px var(--accent))}
.cx-lbl{font:600 12px var(--mono,monospace);letter-spacing:.06em}
.cx-lf{fill:var(--front)} .cx-lr{fill:var(--rear)}
.cx-decal{display:none}
html[data-theme="anime"] .cx-decal{display:inline}
html[data-theme="terang"] .cx-accent{opacity:.5}
.cx-picker{display:grid;gap:8px;margin-top:10px}
.cx-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.cx-row::-webkit-scrollbar{display:none}
.cx-row button{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--btn-r,12px);border:1px solid var(--line);background:var(--glass);color:var(--text);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:.2s}
.cx-row button span{font-size:1.05rem}
.cx-row button.on{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
.cx-colors button{width:34px;height:34px;padding:0;border-radius:50%;background:var(--sw);border:2px solid rgba(255,255,255,.35)}
.cx-colors button.on{outline:2px solid var(--accent);outline-offset:2px}
html[data-theme="anime"] .cx-row button{background:#fff;border:2px solid #ffd3e4}
.cx-wing{fill:#14161c;stroke:rgba(255,255,255,.18);stroke-width:.8}
.cx-lip{fill:none;stroke-width:3.2;stroke-linecap:round}
.cx-lip2{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:1.2;stroke-linecap:round}
.cx-beam{opacity:.35;mix-blend-mode:screen}
.cx-under{opacity:.9;filter:blur(3px)}
html[data-theme="terang"] .cx-beam,html[data-theme="terang"] .cx-under{display:none}
html[data-theme="anime"] .cx-under{opacity:.6}
.cx-strut{stroke:#2b2f39}
.cx-handle{fill:rgba(255,255,255,.28);stroke:rgba(0,0,0,.35);stroke-width:.5}
svg.cx{overflow:hidden}
.cx-mold{stroke:#0b0d12;stroke-width:2.6;stroke-linecap:round;opacity:.85}
.cx-grille{fill:#0b0d12;stroke:#dfe4ea;stroke-width:1.2}
.cx-neck{stroke:#14161c;stroke-width:3.4;fill:none;stroke-linecap:round}
.cx-gt{fill:#101218;stroke:var(--accent);stroke-width:.9}
.cx-cage path{stroke:#ffd21f;stroke-width:2.2;fill:none;stroke-linecap:round}
.cx-cage .hl{stroke:#fff8c4;stroke-width:.8}
html[data-theme="anime"] .cx-colors button{background:var(--sw);border-color:#ffd3e4}
.cx-rod{stroke:#9aa3ad;stroke-width:2.2;fill:none;stroke-linecap:round}
.cx-bellow{fill:#1b1d22;stroke:#3a3e46;stroke-width:.8}
/* mobil pixel art */
.cx-pix{display:flex;justify-content:center;width:100%;overflow:hidden;border-radius:12px}
.cx-pix canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:10px}
/* keamanan & kunci di tema terang/anime */
html[data-theme="terang"] .sec-form input,html[data-theme="anime"] .sec-form input,
html[data-theme="terang"] .lock-card input[type=password],html[data-theme="anime"] .lock-card input[type=password]{background:#fff}
html[data-theme="terang"] .lock,html[data-theme="anime"] .lock{background:rgba(240,235,250,.7)}
html[data-theme="anime"] .lock-card h2{color:#e0558f;text-shadow:none}