:root{
  /* LOOP brand — extracted from loop.co.ke (see BRAND.md) */
  --orange:#FF5F00; --orange-d:#E24F00; --orange-logo:#F26524;
  --ink:#141A21; --navy:#192A56;
  --grey1:#EEF1F4; --grey2:#F2F4F8; --line:#E1E6EC;
  --mute:#545F71; --faint:#9BA5B7;
  --violet:#4A2E8C; --violet-d:#3A2470;   /* in-app interactive accent */
  --card:#FFFFFF; --bg:#F2F4F8;
  --ok:#1FA65A; --warn:#E0932A; --bad:#D2453B;
  --radius:16px;
  font-family:"Poppins","Helvetica Neue",Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#20262e;color:var(--ink);-webkit-font-smoothing:antialiased}

.banner{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:var(--ink);color:#fff;font-size:10.5px;letter-spacing:.03em;
  text-align:center;padding:6px 8px;font-weight:600
}
.device{
  max-width:430px;margin:28px auto 0;min-height:calc(100vh - 28px);
  background:var(--bg);position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)
}
@media(min-width:460px){ .device{border-radius:28px;margin-bottom:28px;min-height:880px} }
#app{display:flex;flex-direction:column;min-height:inherit}

.loopmark{height:20px;width:auto;display:block;color:var(--orange-logo)}
.loopmark.light{color:#fff}

/* ---------- shared ---------- */
.screen{display:flex;flex-direction:column;flex:1;animation:in .22s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pad{padding:18px 18px 24px}
.appbar{
  display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);
  border-bottom:1px solid var(--line)
}
.appbar h1{font-size:16px;font-weight:700}
.appbar .loopmark{height:16px}
.back{border:0;background:none;font-size:22px;color:var(--ink);cursor:pointer;line-height:1;padding:2px 4px}
.spacer{flex:1}
.muted{color:var(--faint);font-size:12px}
.center{text-align:center}

button{font-family:inherit}
.btn{
  display:block;width:100%;border:0;border-radius:12px;padding:15px;font-size:15px;font-weight:700;
  background:var(--orange);color:#fff;cursor:pointer;letter-spacing:.01em
}
.btn:disabled{opacity:.4}
.btn.ghost{background:transparent;color:var(--orange-d);border:1.5px solid var(--orange)}
.btn.sm{padding:11px;font-size:13px}
.row-btns{display:flex;gap:10px;margin-top:14px}
.row-btns .btn{flex:1}

/* ---------- home ---------- */
.hero{background:linear-gradient(155deg,#FF7A2E 0%,var(--orange) 55%,#E24F00 100%);color:#fff;padding:20px 20px 26px}
.hero-top{display:flex;align-items:center;justify-content:space-between}
.hero-right{display:flex;align-items:center;gap:10px}
.gear{border:0;background:rgba(255,255,255,.18);color:#fff;width:28px;height:28px;border-radius:8px;font-size:14px;cursor:pointer;line-height:1}

/* prompt tab */
.promptmeta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tagpill{font-family:"IBM Plex Mono",ui-monospace,monospace,monospace;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--grey1);color:var(--mute)}
.tagpill.edited{background:#FFF1E8;color:var(--orange-d)}
.prompted{width:100%;min-height:340px;border:1px solid var(--line);border-radius:10px;padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;
  background:#0d1116;color:#d7dde3;resize:vertical;white-space:pre;overflow:auto}
.prompted[readonly]{background:var(--grey2);color:var(--mute)}

/* card face (Add Card) */
.cardface{border-radius:14px;padding:16px;color:#fff;background:linear-gradient(135deg,#2b2f45,#141a21);
  box-shadow:0 10px 24px rgba(20,26,33,.25);margin:6px 0 14px}
.cf-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;letter-spacing:.04em}
.cf-chip{font-size:18px;opacity:.7}
.cf-pan{font-family:ui-monospace,Menlo,monospace;font-size:19px;letter-spacing:.12em;margin:18px 0 14px}
.cf-bot{display:flex;justify-content:space-between;font-size:12px;opacity:.9;text-transform:uppercase;letter-spacing:.05em}
.hello{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}
.avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:700}
.balance{text-align:center;margin-top:18px}
.balance .lbl{font-size:12.5px;opacity:.92}
.balance .amt{font-size:22px;letter-spacing:3px;font-weight:700;margin-top:2px}
.hchips{display:flex;justify-content:space-between;margin-top:18px}
.hchip{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;opacity:.96}
.hchip .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:17px}

.qa-wrap{margin:-14px 14px 0;background:var(--card);border-radius:var(--radius);padding:16px 12px 6px;box-shadow:0 8px 24px rgba(20,26,33,.08)}
.qa-wrap h3{font-size:15px;font-weight:700;margin:0 4px 12px}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 4px}
.qa button{
  border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 4px 14px;border-radius:12px;color:var(--ink);font-size:11.5px;font-weight:600;line-height:1.25;text-align:center
}
.qa button:hover{background:var(--grey1)}
.qa .ic{width:40px;height:40px;display:grid;place-items:center;font-size:19px;border-radius:12px;background:var(--grey1);color:var(--navy)}
.qa .aipay .ic{background:linear-gradient(150deg,var(--navy),var(--orange));color:#fff}
.qa .aipay{color:var(--navy);font-weight:700}
.tnav{margin-top:auto;display:flex;background:var(--card);border-top:1px solid var(--line)}
.tnav div{flex:1;text-align:center;padding:12px 0 16px;font-size:12px;color:var(--faint);font-weight:600}
.tnav div.on{color:var(--orange)}

/* ---------- capture ---------- */
.modeseg{display:flex;background:var(--grey1);border-radius:12px;padding:4px;margin:14px 0}
.modeseg button{flex:1;border:0;background:none;padding:9px;border-radius:9px;font-weight:700;font-size:13px;color:var(--mute);cursor:pointer}
.modeseg button.on{background:var(--navy);color:#fff}
.viewfinder{position:relative;width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#0d1116;display:grid;place-items:center}
.viewfinder video{width:100%;height:100%;object-fit:cover}
.viewfinder .reticle{position:absolute;inset:13%;border:2px solid rgba(255,255,255,.9);border-radius:14px}
.viewfinder .hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#fff;font-size:12px;text-shadow:0 1px 3px #000}
.tools{display:flex;gap:10px;margin-top:12px}
.tools .btn{flex:1}
.field{margin-top:12px}
.field label{display:block;font-size:12px;color:var(--faint);font-weight:600;margin-bottom:4px}
.field select,.field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;background:var(--card);color:var(--ink);font-family:inherit}
.samples{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.samples button{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer}

/* ---------- processing ---------- */
.proc{flex:1;display:grid;place-items:center;gap:16px;text-align:center;padding:40px;position:relative;overflow:hidden}
.proc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.6);opacity:.5}
.proc .spinner,.proc>div{position:relative;z-index:1}
.proc>div b,.proc>div span{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- persistent source image ---------- */
.checkhint{font-size:12px;color:var(--mute);font-weight:600;margin:0 0 8px}
.srcstrip{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:9px;margin-bottom:12px;cursor:zoom-in;box-shadow:0 2px 8px rgba(20,26,33,.06)}
.srcstrip img{width:62px;height:62px;object-fit:cover;border-radius:9px;flex:none;background:var(--grey1)}
.srcstrip .si{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srcstrip .si b{font-size:13px}
.srcstrip .si-zoom{font-size:18px;color:var(--navy);padding-right:4px}
.srcstrip.empty{cursor:default;justify-content:center;color:var(--faint);font-size:12px;font-weight:600;padding:12px}

.viewer{position:fixed;inset:0;z-index:40;background:rgba(10,14,20,.92);display:flex;flex-direction:column}
.viewer-bar{display:flex;justify-content:flex-end;gap:8px;padding:12px}
.viewer-bar button{border:0;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:14px;
  min-width:44px;height:36px;border-radius:9px;cursor:pointer}
.viewer-stage{flex:1;overflow:hidden;display:grid;place-items:center;touch-action:none}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;
  transition:transform .12s ease;cursor:grab;user-select:none;-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){.viewer-stage img{transition:none}}

/* ---------- history ---------- */
.hlist{display:flex;flex-direction:column;gap:10px}
.hcard{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:9px;cursor:pointer;box-shadow:0 2px 8px rgba(20,26,33,.06)}
.hthumb{width:56px;height:56px;border-radius:9px;flex:none;overflow:hidden;background:var(--grey1);
  display:grid;place-items:center;color:var(--faint);font-size:11px;font-weight:700}
.hthumb img{width:100%;height:100%;object-fit:cover}
.hmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hmeta b{font-size:13px}
.hmeta .muted{font-size:12px}
.hmeta .hts{font-size:10.5px;color:var(--faint);font-family:ui-monospace,Menlo,monospace}
.hdel{border:0;background:var(--grey1);color:var(--mute);width:28px;height:28px;border-radius:8px;
  font-size:13px;cursor:pointer;flex:none}
.hdel:hover{background:#FBE9E7;color:var(--bad)}

.bigshot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  margin-bottom:10px;cursor:zoom-in;background:var(--grey1)}
.bigshot img{width:100%;max-height:44vh;object-fit:contain;display:block}
.bigshot .si-zoom{position:absolute;right:8px;bottom:8px;background:rgba(20,26,33,.7);color:#fff;
  border-radius:8px;padding:3px 8px;font-size:14px}
.hdetailmeta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:11px;color:var(--faint);
  font-family:ui-monospace,Menlo,monospace}
.pdfembed{width:100%;height:44vh;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--grey1)}
.srcstrip.pdf{cursor:pointer}
.srcstrip.pdf .hthumb{background:#FBE9E7;color:var(--bad);font-size:12px}

/* ---------- destination fill-in form ---------- */
.destform{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.dfield{display:flex;flex-direction:column;gap:4px}
.dfield span{font-size:12px;color:var(--faint);font-weight:600}
.dfield .req{color:var(--orange-d);font-style:normal}
.dfield input{border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;font-weight:600;
  background:var(--grey2);color:var(--ink);font-family:inherit}
.dfield input:focus{border-color:var(--navy);background:#fff;outline:none}
.dfield.need input{border-color:var(--orange);background:#FFF6F0}
.dfield.need span{color:var(--orange-d)}

/* ---------- review ---------- */
.verdict{background:#FFF1E8;border:1px solid #FFD9C2;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.verdict .k{font-size:11px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.verdict .v{font-size:18px;font-weight:800;color:var(--orange-d)}
.verdict.bad{background:#FBE9E7;border-color:#F1C6C1}
.verdict.bad .v{color:var(--bad)}
.frow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.frow .lab{width:38%;font-size:12px;color:var(--faint);font-weight:600}
.frow input{flex:1;border:1px solid transparent;border-radius:8px;padding:8px 9px;font-size:14px;font-weight:600;background:var(--grey2);color:var(--ink);font-family:inherit}
.frow input:focus{border-color:var(--navy);background:#fff;outline:none}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.notice{font-size:12px;color:var(--mute);margin-top:12px;line-height:1.5}

/* ---------- destination ---------- */
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.seg div{flex:1;text-align:center;padding:12px;font-weight:700;font-size:13px;color:var(--mute)}
.seg div.on{background:var(--violet);color:#fff}
.bigfield{text-align:center;margin:18px 0}
.bigfield .cap{font-size:14px;color:var(--mute);font-weight:600}
.bigfield .val{font-size:26px;font-weight:800;margin-top:4px;color:var(--ink)}
.bigfield .val.hl{color:var(--orange-d)}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv .k{color:var(--faint);font-weight:600}
.kv .v{font-weight:700}
.autopill{display:inline-flex;gap:6px;align-items:center;background:#E9F6EF;color:var(--ok);font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;margin-top:6px}
.sof{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0;font-weight:700;color:var(--ink)}
.sof .badge{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}

/* ---------- ticket ---------- */
.ticket{background:var(--card);border-radius:16px;padding:22px;margin-top:14px;box-shadow:0 8px 24px rgba(20,26,33,.08)}
.ticket .status{display:grid;place-items:center;gap:8px;text-align:center}
.ticket .clock{width:48px;height:48px;border-radius:50%;background:var(--grey1);display:grid;place-items:center;font-size:22px}
.ticket h3{font-size:18px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px;margin-top:18px;font-size:13px}
.tgrid .k{color:var(--faint)}
.tgrid .v{font-weight:700}
.ttotal{display:flex;justify-content:space-between;background:var(--grey1);margin:16px -22px -22px;padding:14px 22px;border-radius:0 0 16px 16px;font-weight:800}