/* Scanner Buncit AI — tema gelap premium: latar arang, kartu biru-gelap, aksen oranye-koral (bakar), hijau (progres). */
:root{
  --bg:#0B0F14; --bg2:#0F141B; --card:#121923; --card2:#182230; --line:#1F2A38; --line2:#2A3747;
  --ink:#E8ECF2; --muted:#8A97A8; --faint:#5E6B7C;
  --accent:#FF7A45; --accent-deep:#D95A2B; --accent-soft:rgba(255,122,69,.14);
  --good:#4CD3A1; --good-soft:rgba(76,211,161,.14); --warn:#F5C451; --danger:#F06A6A; --info:#5AB0FF;
  --radius:16px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-text-size-adjust:100%}
body{background:radial-gradient(90% 50% at 50% -10%,#1A2230 0%,var(--bg) 60%) fixed;min-height:100vh}
a{color:var(--accent)}
.wrap{max-width:620px;margin:0 auto;padding:16px 16px 96px}
.hidden{display:none!important}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;min-height:40px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:.2px}
.brand .ai{font-size:10px;font-weight:700;letter-spacing:1.2px;background:var(--accent);color:#1B0E05;border-radius:6px;padding:2px 6px}
.topbar .icon-btn{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}
.topbar .link{background:none;border:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:8px 0}
h1{font-weight:700;font-size:26px;line-height:1.22;margin:6px 0 10px;letter-spacing:-.3px}
h2{font-weight:700;font-size:19px;line-height:1.3;margin:0 0 10px}
h3{font-size:15.5px;margin:0 0 6px;font-weight:700}
p{margin:0 0 14px}
.lead{color:var(--muted);font-size:16px}
.muted{color:var(--muted)} .small{font-size:13.5px} .center{text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card.accent{border-color:rgba(255,122,69,.45);background:linear-gradient(160deg,rgba(255,122,69,.10),var(--card) 55%)}
.eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--muted);margin-bottom:8px;font-weight:600}
.eyebrow.on{color:var(--accent)}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.badge.accent{background:var(--accent-soft);border-color:rgba(255,122,69,.4);color:var(--accent)}
.badge.good{background:var(--good-soft);border-color:rgba(76,211,161,.4);color:var(--good)}
.btn{display:block;width:100%;padding:15px 18px;border-radius:14px;border:none;background:var(--accent);color:#1B0E05;font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.quiet{background:var(--card2);color:var(--ink)}
.btn + .btn{margin-top:10px}
.row{display:flex;gap:10px} .row>*{flex:1}
.btn-sm{display:inline-block;padding:8px 13px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-sm.accent{background:var(--accent);border-color:var(--accent);color:#1B0E05}

/* Form */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field .hint{font-size:13px;color:var(--muted);margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:inherit;font-size:16px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
.field.invalid input,.field.invalid .opts,.field.invalid .chips-pick,.scr-item.invalid .yn{border-color:var(--danger)}
.field-err{color:var(--danger);font-size:13.5px;margin-top:6px}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:6px 0 16px;cursor:pointer}
.check-row input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:0 0 auto}
.pw-wrap{position:relative} .pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:8px}
.error-box{background:rgba(240,106,106,.12);border:1px solid var(--danger);color:#F7B3B3;border-radius:12px;padding:12px 14px;font-size:14.5px;margin-bottom:14px}
.note-box{background:rgba(245,196,81,.08);border:1px solid rgba(245,196,81,.45);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.note-box h3{color:var(--warn)}
.login-links{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Skrining ya/tidak */
.scr-item{padding:12px 0;border-bottom:1px solid var(--line)}
.scr-item:last-child{border-bottom:none}
.scr-item p{margin:0 0 10px;font-size:15px}
.yn{display:flex;gap:8px;border:1px solid transparent;border-radius:12px}
.yn button{flex:1;padding:11px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.yn button.on{background:var(--accent);border-color:var(--accent);color:#1B0E05}

/* Scan */
.progress{height:6px;background:var(--card2);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));border-radius:999px;transition:width .4s ease}
.qmeta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:8px 0 14px;letter-spacing:.6px;text-transform:uppercase}
.qtitle{font-size:21px;line-height:1.3;margin:0 0 8px;font-weight:700}
.opts{display:flex;flex-direction:column;gap:10px;border:1px solid transparent;border-radius:14px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px 15px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:inherit;font-size:15.5px;cursor:pointer;line-height:1.4}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto}
.opt.multi .dot{border-radius:6px}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt.on .dot{border-color:var(--accent);background:var(--accent)}
.qnav{display:flex;gap:10px;margin-top:18px} .qnav .btn{margin:0}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px;border:1px solid transparent;border-radius:12px}
.chips-pick button{padding:8px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.chips-pick button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* Loading */
.spinner{width:44px;height:44px;border-radius:50%;border:4px solid var(--card2);border-top-color:var(--accent);animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hasil / tipe */
.result-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#1A2433,#121923);border:1px solid var(--line2);border-radius:20px;padding:22px 20px;margin-bottom:14px}
.result-card .glow{position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:var(--accent);opacity:.12;filter:blur(30px)}
.result-card h1{margin:4px 0 6px;font-size:27px}
.result-card .tag{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.chip.warm{background:var(--accent-soft);border-color:rgba(255,122,69,.4);color:var(--accent)}
.bars{margin-top:14px}
.bar{display:grid;grid-template-columns:76px 1fr 38px;align-items:center;gap:10px;font-size:13px;margin:6px 0;color:var(--muted)}
.bar i{display:block;height:8px;border-radius:999px;background:var(--card2);overflow:hidden}
.bar i b{display:block;height:100%;border-radius:999px}
.bar .n{font-family:var(--mono);text-align:right;font-size:12px}

/* Laporan */
.rich p{font-size:16px;line-height:1.78;margin:0 0 14px}
.rich p:last-child{margin-bottom:0}
.rich ul.pts{list-style:none;padding:0;margin:0 0 14px}
.rich ul.pts li{position:relative;padding-left:22px;margin:0 0 10px;font-size:15.5px;line-height:1.7}
.rich ul.pts li::before{content:"\25C6";position:absolute;left:0;top:1px;color:var(--accent);font-size:11px}
.rich strong{color:#fff}
details.sec{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:10px}
details.sec summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
details.sec summary::-webkit-details-marker{display:none}
details.sec summary h2{margin:0;font-size:17px}
details.sec summary .eyebrow{margin:0 0 3px}
details.sec summary .chev{color:var(--muted);transition:transform .2s}
details.sec[open] summary .chev{transform:rotate(90deg)}
details.sec .body{padding:0 18px 18px}
.actions{margin:18px 0}
.actions .hint{display:block;font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.closing{color:var(--faint);font-size:13px;text-align:center;margin:20px 0 0}

/* Dashboard */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat .big{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:4px 0 2px}
.stat .big small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.stat .sub{font-size:12.5px;color:var(--muted)}
.diag{display:flex;align-items:center;gap:14px}
.diag .ring{width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:22px;background:var(--accent-soft);border:1px solid rgba(255,122,69,.4)}
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.task:last-child{border-bottom:none}
.task input{width:22px;height:22px;margin-top:2px;accent-color:var(--good);flex:0 0 auto}
.task .t{font-weight:600;font-size:15.5px}
.task .x{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:2px}
.task .meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.task.done .t{color:var(--muted);text-decoration:line-through}
.task .mini{font-size:13px;color:var(--good);margin-top:6px}
.daynav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.daynav button{background:var(--card2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.daynav button:disabled{opacity:.35}
.phase-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:12px 0 4px}
.phase-strip span{height:5px;border-radius:999px;background:var(--card2)}
.phase-strip span.on{background:var(--accent)} .phase-strip span.past{background:var(--good)}
.phase-names{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--faint);margin-bottom:12px}
.phase-names span.on{color:var(--accent)}

/* Tabs bawah */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(11,15,20,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:center;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{display:flex;width:100%;max-width:620px}
.tabbar button{flex:1;background:none;border:none;color:var(--faint);font:inherit;font-size:11px;font-weight:600;padding:9px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;letter-spacing:.3px}
.tabbar button .ic{font-size:20px;line-height:1}
.tabbar button.on{color:var(--accent)}
.subtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.subtabs button{flex:0 0 auto;padding:8px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.subtabs button.on{background:var(--accent);border-color:var(--accent);color:#1B0E05}

/* Menu */
.meal{padding:12px 0;border-bottom:1px solid var(--line)}
.meal:last-child{border-bottom:none}
.meal .when{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.meal .what{font-size:15.5px;line-height:1.55}
.meal .swap{margin-top:8px}
.meal .alts{margin-top:8px;font-size:14px;color:var(--good)}

/* Ukur */
.chart{width:100%;height:auto;display:block;margin:8px 0 6px}
.mlist{list-style:none;padding:0;margin:0}
.mlist li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.mlist li:last-child{border-bottom:none}
.mlist .cm{font-family:var(--mono);font-weight:600}
.list-plain{padding-left:20px;margin:0 0 10px} .list-plain li{margin-bottom:8px}

.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--card2);border:1px solid var(--line2);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:14px;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.install{display:flex;align-items:center;gap:12px}
.install p{margin:0;font-size:13.5px}
.plain{list-style:none;padding:0;margin:0}

@media (max-width:520px){ .card{padding:16px 15px} .two{grid-template-columns:1fr} h1{font-size:24px} }
@media (prefers-reduced-motion:reduce){ .progress i{transition:none} }

@media print{
  @page{margin:12mm}
  html,body{background:#fff!important;color:#111!important}
  body{background:none!important}
  .wrap{max-width:none;padding:0}
  .topbar,.tabbar,.no-print,.actions,.toast{display:none!important}
  .card,details.sec,.result-card,.stat{background:#fff!important;border-color:#ddd!important;color:#111!important;break-inside:auto;box-shadow:none}
  .result-card .glow{display:none}
  details.sec{display:block} details.sec summary{display:block;break-after:avoid} details.sec .body{display:block!important}
  details.sec:not([open]) .body{display:block!important}
  details.sec summary .chev{display:none}
  .bars .bar i{border:1px solid #ddd}
  .rich p,.rich li,.meal .what{color:#111!important} .rich strong{color:#000!important}
  .rich ul.pts li::before{color:#D95A2B}
  .eyebrow,.muted,.small,.closing,.meal .when{color:#555!important}
  .badge,.chip{color:#333!important;border-color:#bbb!important;background:#f3f3f3!important}
  h1,h2,h3{color:#111!important;break-after:avoid}
  li{break-inside:avoid}
  -webkit-print-color-adjust:exact;print-color-adjust:exact
}