:root{--bg:#0b0f14;--surface:#131a22;--surface-2:#1a232d;--line:#24313f;--text:#e8eef5;--muted:#8ca0b3;--accent:#ffd166;--ok:#2ecc71;--warn:#f5a623;--danger:#ff5c5c;--radius:14px;--pad:16px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;margin:0;padding:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif}body{min-height:100dvh}#root{max-width:430px;min-height:100dvh;margin:0 auto;position:relative}button,input,textarea,select{font:inherit;color:inherit}input,textarea{font-size:16px}a{color:inherit;text-decoration:none}.app{padding:calc(var(--safe-t) + 8px) var(--pad) calc(84px + var(--safe-b))}.topbar{z-index:20;margin:0 calc(var(--pad) * -1) 12px;padding:calc(var(--safe-t) + 10px) var(--pad) 10px;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(160%)blur(12px);backdrop-filter:saturate(160%)blur(12px);border-bottom:1px solid var(--line);align-items:center;gap:10px;display:flex;position:sticky;top:0}.topbar h1{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:650}.topbar .spacer{flex:1}.tabbar{z-index:30;background:color-mix(in srgb, var(--bg) 92%, transparent);-webkit-backdrop-filter:saturate(160%)blur(12px);backdrop-filter:saturate(160%)blur(12px);border-top:1px solid var(--line);max-width:430px;padding-bottom:var(--safe-b);grid-template-columns:repeat(3,1fr);margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar button{color:var(--muted);background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;font-size:11px;font-weight:600;display:flex}.tabbar button[data-on="1"]{color:var(--accent)}.tabbar .ico{font-size:19px;line-height:1}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.card+.card{margin-top:12px}.btn{background:var(--accent);color:#17202b;letter-spacing:-.01em;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:15px 16px;font-size:16px;font-weight:700;transition:transform 80ms,opacity .15s;display:flex}.btn:active{transform:scale(.985)}.btn:disabled{opacity:.45}.btn.ghost{color:var(--text);border:1px solid var(--line);background:0 0}.btn.sm{width:auto;padding:10px 14px;font-size:14px}.btn.danger{background:var(--danger);color:#fff}.field{margin-bottom:12px;display:block}.field span{color:var(--muted);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.field input,.field textarea{background:var(--surface-2);border:1px solid var(--line);width:100%;color:var(--text);border-radius:12px;padding:13px 14px}.field input:focus,.field textarea:focus{outline:2px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:-1px}.muted{color:var(--muted)}.small{font-size:12.5px}.center{text-align:center}.row{align-items:center;gap:10px;display:flex}.stack{gap:10px;display:grid}.err{background:color-mix(in srgb, var(--danger) 16%, transparent);border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);color:#ffd9d9;border-radius:11px;padding:11px 13px;font-size:13.5px}.indikasi{background:color-mix(in srgb, var(--accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);color:#ffe9b8;border-radius:12px;align-items:flex-start;gap:10px;padding:11px 13px;font-size:13px;line-height:1.45;display:flex}.indikasi b{color:var(--accent)}.meter{margin:6px 0 2px}.meter-track{background:linear-gradient(90deg, #1f8a55 0%, #3fa46a 22%, var(--accent) 50%, #e0803f 78%, #c8453f 100%);opacity:.92;border-radius:999px;height:12px;position:relative}.meter-tick{background:#ffffff8c;border-radius:2px;width:2px;position:absolute;top:-4px;bottom:-4px}.meter-pin{background:var(--text);border:3px solid var(--bg);border-radius:50%;width:20px;height:20px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 10px #0009}.meter-bid{border:2px solid var(--bg);background:#7fc8ff;border-radius:50%;width:9px;height:9px;position:absolute;top:50%;transform:translateY(-50%)}.meter-labels{color:var(--muted);justify-content:space-between;margin-top:8px;font-size:11.5px;display:flex}.meter-legend{color:var(--muted);flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11.5px;display:flex}.meter-legend i{vertical-align:baseline;border-radius:50%;width:8px;height:8px;margin-right:5px;display:inline-block}.conf{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:11.5px;font-weight:650;display:inline-flex}.conf[data-level=Tinggi]{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent)}.conf[data-level=Sedang]{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent)}.conf[data-level=Rendah]{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent)}.thin-warning{background:color-mix(in srgb, var(--danger) 14%, transparent);border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:#ffd9d9;border-radius:11px;margin-top:10px;padding:11px 13px;font-size:13px;line-height:1.45}.verdict{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:12px 13px}.verdict h4{margin:0 0 3px;font-size:15px}.verdict p{color:var(--muted);margin:0;font-size:13px;line-height:1.45}.verdict[data-tone=ok]{border-color:color-mix(in srgb, var(--ok) 45%, transparent)}.verdict[data-tone=ok] h4{color:var(--ok)}.verdict[data-tone=warn] h4,.verdict[data-tone=low] h4{color:var(--warn)}.verdict[data-tone=high] h4,.verdict[data-tone=verylow] h4{color:var(--danger)}.cam-wrap{border-radius:var(--radius);aspect-ratio:3/4;background:#000;position:relative;overflow:hidden}.cam-wrap video,.cam-wrap img{object-fit:cover;width:100%;height:100%;display:block}.cam-hint{text-align:center;color:#fff;text-shadow:0 1px 6px #000000e6;font-size:12px;position:absolute;bottom:12px;left:12px;right:12px}.shutter{border:5px solid var(--surface-2);width:74px;height:74px;box-shadow:0 0 0 2px var(--line);background:#fff;border-radius:50%;margin:16px auto 0;display:block}.shutter:active{transform:scale(.94)}.badge-live{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0009;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;position:absolute;top:10px;left:10px}.thumb{aspect-ratio:4/3;object-fit:cover;background:var(--surface-2);border-radius:12px;width:100%;display:block}.feed-item{grid-template-columns:96px 1fr;align-items:start;gap:12px;display:grid}.feed-item .thumb{aspect-ratio:1}.price-big{letter-spacing:-.02em;font-size:26px;font-weight:750}.tag{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:650;display:inline-block}.tag.live{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent)}.tag.flag{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent)}.ladder{gap:8px;display:grid}.ladder-row{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;align-items:center;gap:10px;padding:10px 12px;display:flex}.ladder-row[data-me="1"]{border-color:color-mix(in srgb, var(--accent) 55%, transparent)}.ladder-row .amt{margin-left:auto;font-weight:700}.ladder-rank{background:var(--line);width:22px;height:22px;color:var(--muted);border-radius:50%;place-items:center;font-size:11px;font-weight:700;display:grid}.ladder-row:first-child .ladder-rank{background:var(--accent);color:#17202b}.sheet{z-index:60;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet-inner{background:var(--surface);border-top:1px solid var(--line);width:100%;max-width:430px;padding:18px var(--pad) calc(20px + var(--safe-b));border-radius:18px 18px 0 0;animation:.22s cubic-bezier(.2,.8,.2,1) up}@keyframes up{0%{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:none}}.skel{background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);background-size:400% 100%;border-radius:12px;animation:1.3s infinite sh}@keyframes sh{0%{background-position:100% 0}to{background-position:0 0}}.spin{border:2px solid #ffffff40;border-top-color:currentColor;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite rot}@keyframes rot{to{transform:rotate(360deg)}}