/* Alara Garage demo: phone-sized porter app, same look as the wireframe (dark, Barlow Condensed + Jost). */
:root { --bg:#000; --bar:#0a0a0a; --s0:#141414; --s1:#1a1a1a; --s2:#222; --div:#262626; --bd:#2e2e2e; --bds:#4a4a4a; --text:#fff; --text2:#ddd; --muted:#bbb; --faint:#8a8a8a;
  --ok:#5cc8a8; --warn:#f2b54a; --info:#7aa7ff; --danger:#ff8a8f; --purple:#c9b8ff; --okbg:#1f2a26; --dangerbg:#2a1f1f; --warnbg:#2a2210; --red:#e81820; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #0b0b0b; color: var(--text); font-family: Jost, system-ui, sans-serif; }
.frame { display: flex; justify-content: center; padding: 16px 0 4px; }
.app { width: 390px; height: 844px; max-height: calc(100vh - 40px); background: var(--bg); border-radius: 28px; border: 1px solid #222; overflow: hidden; display: flex; flex-direction: column; position: relative; }
@media (max-width: 440px) { .frame { padding: 0; } .app { width: 100vw; height: 100vh; max-height: none; border-radius: 0; border: 0; } .demo-note { display: none; } }
.demo-note { text-align: center; color: var(--faint); font-size: 12px; margin: 6px 0 12px; }
h1, h2, .display { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-weight: 700; margin: 0; }
h1 { font-size: 34px; line-height: 0.95; } h2 { font-size: 18px; letter-spacing: 0.1em; }
.scroll { flex: 1; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
button, input { font-family: inherit; font-size: 15px; }
button { cursor: pointer; }
.btn { min-height: 46px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--red); color: #fff; font-weight: 600; }
.btn.ghost { background: transparent; border: 1px solid var(--bds); color: var(--text); font-weight: 500; }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn[disabled] { background: var(--bd); color: var(--faint); cursor: not-allowed; }
.chip { min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--bds); background: transparent; color: var(--text); font-size: 14px; }
.chip.on { background: var(--s2); border-color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.card { border-radius: 14px; background: var(--s1); border: 1px solid var(--bd); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.card.sel { border-color: var(--text); }
.card.red { border-color: var(--red); } .card.amber { border-color: var(--warn); }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); } .info { color: var(--info); }
.cap { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=password], input[type=search] { height: 48px; border-radius: 12px; border: 1px solid var(--bds); background: var(--s0); color: var(--text); padding: 0 12px; font-size: 16px; width: 100%; }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fact { background: var(--s0); border-radius: 10px; padding: 6px 8px; } .fact .cap { font-size: 10px; } .fact b { font-size: 13px; display: block; }
.thumb { width: 96px; height: 60px; border-radius: 8px; object-fit: cover; background: var(--s2); flex-shrink: 0; }
.photo { width: 100%; border-radius: 12px; background: var(--s2); display: block; }
.msg { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.msg.ok { background: var(--okbg); color: var(--text); } .msg.err { background: var(--dangerbg); border: 1px solid var(--red); color: var(--text); } .msg.warn { background: var(--warnbg); border: 1px solid var(--warn); color: var(--text); }
/* camera = the scanner. Always the same size (11/6). The live video sits underneath the finder. */
.cam { position: relative; height: 200px; flex-shrink: 0; background: #141414; width: 100%; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cam-slot, .cam-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cam-video { object-fit: cover; }
.cam-cover { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; }
.cam .finder { width: 140px; height: 140px; border: 3px solid #fff; border-radius: 18px; position: relative; z-index: 2; pointer-events: none; box-shadow: 0 0 0 999px rgba(0,0,0,0.25); transition: border-color 0.15s; }
.cam:not(.live) .finder { box-shadow: none; }
.cam .finder::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: var(--red); }
.cam.hit .finder { border-color: var(--ok); } .cam.hit .finder::after { background: var(--ok); }
.cam .brand, .cam .who, .cam .hint, .cam .cam-btns { position: absolute; z-index: 3; }
.cam .brand { top: 14px; left: 16px; font-family: 'Barlow Condensed'; font-weight: 700; letter-spacing: 0.1em; font-size: 20px; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 3px #000; }
.cam .who { top: 12px; right: 12px; font-size: 12px; background: rgba(0,0,0,0.6); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.cam .hint { bottom: 12px; left: 12px; right: 140px; font-size: 12px; line-height: 1.3; color: #eee; pointer-events: none; text-shadow: 0 1px 3px #000; }
.cam .cam-btns { bottom: 8px; right: 8px; display: flex; gap: 6px; }
.cam.blocked .finder { display: none; }
.cam.blocked .hint { top: 50px; bottom: auto; left: 20px; right: 20px; text-align: center; font-size: 14px; }
.cam-btn { min-height: 34px; padding: 0 10px; border-radius: 17px; border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; }
nav.tabs { height: 64px; flex-shrink: 0; border-top: 1px solid var(--div); background: var(--bar); display: grid; grid-template-columns: repeat(3, 1fr); }
nav.tabs button { background: transparent; border: 0; color: var(--muted); font-size: 13px; }
nav.tabs button.on { color: var(--text); font-weight: 600; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yn button { height: 44px; border-radius: 10px; border: 1px solid var(--bd); background: var(--s1); color: var(--text); }
.yn button.yes { background: var(--okbg); border-color: var(--ok); } .yn button.no { background: var(--dangerbg); border-color: var(--red); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .steps div { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.steps i { height: 4px; border-radius: 2px; background: var(--bd); } .steps i.done { background: var(--ok); } .steps i.now { background: var(--warn); }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 5; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--s0); border-top: 1px solid var(--bd); border-radius: 22px 22px 0 0; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; max-height: 80%; overflow-y: auto; }
.list-btn { display: flex; gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: 12px; border: 1px solid var(--bd); background: var(--s1); color: var(--text); width: 100%; }
.progress { height: 6px; border-radius: 3px; background: var(--s2); overflow: hidden; } .progress i { display: block; height: 6px; background: var(--ok); }
.history div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--div); font-size: 13px; }