/* Goldfish Bowl — app shell styling.
   Ported from the agreed prototype (capture-demo.html) so the real app
   matches it screen-for-screen. The prototype wrapped this in a phone
   bezel for presentation; here it just fills the real device's viewport. */

:root{
  --bg:#eef0f3;
  --surface:#fbfcfd;
  --surface-2:#eef1f5;
  --ink:#141b26;
  --muted:#5a6b7a;
  --accent:#e8623f;
  --accent-ink:#fff6f2;
  --hot:#e8623f;
  --warm:#d79a2c;
  --cold:#3f6b8a;
  --line:#dbe1e8;
  --display:'IBM Plex Sans',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141a; --surface:#161d26; --surface-2:#1d2630; --ink:#eef1f5; --muted:#93a3b0;
    --line:#2a3540; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f141a; --surface:#161d26; --surface-2:#1d2630; --ink:#eef1f5; --muted:#93a3b0;
  --line:#2a3540; color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
#screen{
  min-height:100dvh;
  background:var(--surface);
  display:flex;
  flex-direction:column;
}
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 10px;
  min-height:30px;
}
.topbar .back{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-2);
  color:var(--ink); font-size:17px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;
}
.topbar .back:disabled{ visibility:hidden; }
.topbar h2{ font-size:16px; font-weight:650; margin:0; flex:1; letter-spacing:-.01em; min-width:0; }
.topbar .logo-mark{
  width:30px; height:30px; border-radius:9px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  flex:0 0 auto; font-family:var(--mono);
}
.topbar .chip{
  font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--surface-2);
  padding:5px 10px; border-radius:999px; white-space:nowrap; border:none; cursor:pointer;
}
.today-pill{
  font-family:var(--mono); font-size:13px; font-weight:650; color:var(--ink); background:var(--surface-2);
  border:none; border-radius:16px; height:34px; min-width:34px; padding:0 12px; cursor:pointer; flex:0 0 auto;
}
.menu-btn, .close-btn{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-2); color:var(--ink);
  font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; line-height:1;
}
.close-btn{ margin-left:auto; font-size:16px; }
.menu-section{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 2px; }
.menu-section:first-child{ margin-top:0; }
.menu-row{
  display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
  font-family:var(--body); font-size:14.5px; color:var(--ink); cursor:pointer; text-decoration:none;
}
.menu-row .mi{ font-size:17px; width:22px; text-align:center; flex:0 0 auto; }
.menu-row .arrow{ margin-left:auto; color:var(--muted); font-size:13px; }
.menu-row.danger{ color:var(--hot); }
.form-note{ font-size:12.5px; color:var(--muted); margin:2px 0 16px; line-height:1.5; }
.plan-card{ border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; cursor:default; }
.plan-card.active{ border-color:var(--accent); background:var(--surface-2); }
.plan-card .pt{ display:flex; align-items:center; justify-content:space-between; }
.plan-card .pn{ font-size:14.5px; font-weight:650; }
.plan-card .pp{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.plan-card .pd{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4; }
.plan-card .cur-tag{ font-family:var(--mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.switch-row{ display:flex; align-items:center; justify-content:space-between; margin:-4px 0 14px; }
.switch-row .cur{ font-size:12.5px; color:var(--muted); }
.switch-row button{ background:none; border:none; color:var(--accent); font-size:12.5px; font-weight:650; font-family:var(--body); cursor:pointer; padding:0; }
.show-row{ display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); cursor:pointer; }
.show-row .logo-mark{ width:38px; height:38px; border-radius:11px; font-size:13px; }
.show-row .meta .n{ font-size:14.5px; font-weight:650; }
.event-type-tag{
  margin-left:7px; font-family:var(--mono); font-size:9.5px; font-weight:650; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); background:var(--surface-2); border-radius:999px; padding:2px 7px; vertical-align:1px;
}
.show-row .meta .c{ font-size:12px; color:var(--muted); margin-top:1px; }
.show-row .live{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.content{ flex:1 1 auto; overflow-y:auto; padding:6px 18px 18px; -webkit-overflow-scrolling:touch; }
.bottom-cta{
  flex:0 0 auto; padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
}
.btn{
  appearance:none; border:none; cursor:pointer; font-family:var(--body);
  border-radius:16px; font-size:16px; font-weight:600; padding:16px 18px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:var(--surface-2); color:var(--ink); }
.btn-text{ background:transparent; color:var(--muted); font-size:14px; padding:8px; }
.home-hero{ padding:8px 2px 4px; }
.home-hero .label{ font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.home-hero .count{ font-size:48px; font-weight:650; letter-spacing:-.02em; margin:4px 0 2px; }
.home-hero .sub{ font-size:13.5px; color:var(--muted); margin:0; display:flex; align-items:center; gap:6px; }
.home-hero .sub.sync-pending{ color:var(--warm); }
.sync-dot{ width:7px; height:7px; border-radius:50%; background:var(--warm); flex:0 0 auto; animation:syncPulse 1.3s ease-in-out infinite; }
@keyframes syncPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.stat-row{ display:flex; gap:8px; margin:14px 0 20px; }
.stat-chip{ flex:1; background:var(--surface-2); border-radius:12px; padding:10px 0; text-align:center; }
.stat-chip .n{ font-size:18px; font-weight:650; font-family:var(--mono); }
.stat-chip .l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; display:flex; align-items:center; justify-content:center; gap:4px; }
.section-label{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:0 0 4px; }
.report-row{ margin:0 0 14px; }
.report-row-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; margin-bottom:5px; }
.report-row-n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.report-bar{ height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.report-bar-fill{ height:100%; border-radius:99px; }
.home-empty{ background:var(--surface-2); border-radius:14px; padding:18px 16px; font-size:13px; color:var(--muted); line-height:1.5; margin-top:14px; }
.photo-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.photo-block{ margin-bottom:4px; }
.photo-main{
  width:100%; border-radius:8px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--surface), var(--surface-2)); border:1px solid var(--line);
}
.photo-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-main .tag{
  position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:9.5px; color:var(--muted);
  background:var(--surface); padding:3px 7px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; z-index:2;
}
.photo-caption{ font-size:11px; color:var(--muted); margin:0 0 2px; }
.photo-add-row{
  background:none; border:1.5px dashed var(--line); border-radius:12px; padding:14px; color:var(--muted);
  font-size:13px; font-family:var(--body); cursor:pointer; text-align:center; width:100%;
}
.alt-row{ display:flex; justify-content:center; gap:26px; margin-top:18px; }
.alt-method{ background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; color:var(--muted); font-family:var(--body); }
.alt-method[disabled]{ opacity:.35; cursor:default; }
.alt-method .alt-ic{ font-size:18px; width:42px; height:42px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
.alt-method .alt-label{ font-size:11px; }
.scan-frame{
  position:relative; aspect-ratio:16/10; border-radius:16px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--surface-2), var(--bg));
  border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.scan-frame.scanning{ animation:pulseRing 1.1s ease-in-out infinite; }
@keyframes pulseRing{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,98,63,0); } 50%{ box-shadow:0 0 0 6px rgba(232,98,63,.18); } }
.scan-frame .bracket{ position:absolute; width:24px; height:24px; border-color:var(--accent); }
.scan-frame .bracket.tl{ top:14px; left:14px; border-top:3px solid; border-left:3px solid; border-radius:4px 0 0 0; }
.scan-frame .bracket.tr{ top:14px; right:14px; border-top:3px solid; border-right:3px solid; border-radius:0 4px 0 0; }
.scan-frame .bracket.bl{ bottom:14px; left:14px; border-bottom:3px solid; border-left:3px solid; border-radius:0 0 0 4px; }
.scan-frame .bracket.br{ bottom:14px; right:14px; border-bottom:3px solid; border-right:3px solid; border-radius:0 0 4px 0; }
.scan-frame .card-sil{ width:62%; height:46%; border-radius:6px; background:var(--surface); border:1px solid var(--line); opacity:.85; }
.scan-status{ text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--muted); min-height:16px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; font-family:var(--mono); color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
.field input{
  width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:10px; padding:12px; font-size:15px; font-family:var(--body);
}
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field select{
  width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:10px; padding:12px; font-size:15px; font-family:var(--body); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6b7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field textarea{
  width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:10px; padding:12px; font-size:15px; font-family:var(--body); resize:vertical; min-height:68px;
}
.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.icp-badge{ border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.4; margin-bottom:14px; border:1px solid var(--line); }
.icp-badge .k{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; display:block; opacity:.75; }
.icp-strong{ background:rgba(232,98,63,.1); border-color:var(--hot); color:var(--hot); }
.icp-outside{ background:var(--surface-2); color:var(--muted); }
.icp-unknown{ background:var(--surface-2); color:var(--muted); font-style:italic; }
.seg{ display:flex; background:var(--surface-2); border-radius:10px; padding:3px; gap:3px; }
.seg button{ flex:1; border:none; background:transparent; padding:10px 0; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; font-family:var(--body); }
.seg button.active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.hint{ font-size:12px; color:var(--muted); margin:4px 0 0; }
.badge-note{ background:var(--surface-2); border-radius:12px; padding:12px 13px; font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:4px; }
.proc-wrap{ padding-top:6px; }
.proc-photo{
  width:100%; aspect-ratio:85/54; border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--surface), var(--surface-2)); border:1px solid var(--line);
  margin-bottom:22px;
}
.proc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.proc-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(232,98,63,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(232,98,63,.07) 0 1px, transparent 1px 22px);
}
.proc-scanline{
  position:absolute; left:0; right:0; height:3px; top:-3px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, #fff8f5 50%, var(--accent) 80%, transparent);
  box-shadow:0 0 14px 2px rgba(232,98,63,.6), 0 0 2px rgba(255,255,255,.8);
  animation:procSweep 1.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes procSweep{
  0%{ top:-3px; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
.proc-fields{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.proc-field{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  transition:border-color .25s, color .25s;
}
.proc-field .proc-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 auto; transition:background .25s; }
.proc-field.is-scanning{ border-color:var(--accent); color:var(--ink); }
.proc-field.is-scanning .proc-dot{ background:var(--accent); animation:syncPulse .6s ease-in-out infinite; }
.proc-field.is-done{ color:var(--ink); }
.proc-field.is-done .proc-dot{ background:var(--hot); }
.proc-field .proc-value{
  margin-left:auto; font-family:var(--body); font-weight:600; color:var(--ink); font-size:12.5px;
  opacity:0; transition:opacity .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
.proc-field.is-done .proc-value{ opacity:1; }
.proc-field .proc-check{ margin-left:6px; font-size:13px; color:var(--hot); opacity:0; transition:opacity .2s; }
.proc-field.is-done .proc-check{ opacity:1; }
.proc-status{ text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--muted); min-height:16px; transition:color .25s; }
.proc-status.is-ready{ color:var(--hot); font-weight:650; }
.matching-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:90px; gap:16px; }
.matching-spinner{
  width:40px; height:40px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.matching-text{ font-size:13.5px; color:var(--muted); }
.score-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:8px; }
.score-card{
  width:100%; max-width:300px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:24px 18px; gap:6px;
}
.score-card .avatar{ width:58px; height:58px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:650; font-size:21px; margin-bottom:6px; }
.score-card .name{ font-weight:650; font-size:16px; }
.score-card .co{ font-size:13px; color:var(--muted); text-align:center; padding:0 18px; margin-bottom:10px; }
.score-result{ border-radius:12px; padding:10px 20px; display:flex; align-items:center; gap:8px; font-weight:650; font-size:15.5px; }
.score-result .k{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.8; font-weight:600; }
.score-high{ background:rgba(232,98,63,.12); color:var(--hot); }
.score-medium{ background:rgba(214,158,46,.14); color:var(--warm); }
.score-low{ background:rgba(63,107,138,.12); color:var(--cold); }
.score-row{ display:flex; gap:8px; width:100%; max-width:300px; }
.score-pill{
  flex:1; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); border-radius:999px;
  padding:10px 0; font-size:13px; font-weight:650; font-family:var(--body); cursor:pointer;
}
.score-pill.active.score-high{ background:var(--hot); color:#fff; border-color:var(--hot); }
.score-pill.active.score-medium{ background:var(--warm); color:#fff; border-color:var(--warm); }
.score-pill.active.score-low{ background:var(--cold); color:#fff; border-color:var(--cold); }
.done-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:40px; gap:10px; }
.check{
  width:60px; height:60px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:6px;
  animation:pop .32s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.done-wrap h3{ margin:0; font-size:18px; }
.done-wrap .co{ font-size:13.5px; color:var(--muted); margin:0; }
.grade-tag{ font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:999px; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
.followup-box{ width:100%; max-width:340px; background:var(--surface-2); border-radius:14px; padding:13px 14px; text-align:left; margin-top:6px; }
.followup-box .k{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.followup-box .v{ font-size:13.5px; line-height:1.45; }
.lead-row{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.lead-row .avatar{ width:38px; height:38px; border-radius:50%; background:var(--surface-2); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:650; flex:0 0 auto; }
.lead-row .meta{ flex:1; min-width:0; }
.lead-row .meta .n{ font-size:14px; font-weight:650; }
.lead-row .meta .c{ font-size:12px; color:var(--muted); }
.lead-row .tag{ font-family:var(--mono); font-size:10px; padding:4px 7px; border-radius:999px; color:#fff; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; }
.lead-detail{ padding:0 0 12px 49px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.empty{ text-align:center; padding:48px 10px; color:var(--muted); font-size:13.5px; }
.splash-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:16vh; gap:4px; min-height:100%; justify-content:center; }
.splash-logo-wrap{ background:#fff; border-radius:14px; padding:10px 22px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.splash-logo{ height:28px; width:auto; display:block; }
.splash-sub{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.splash-h{ font-size:19px; margin:0 0 10px; font-weight:650; letter-spacing:-.01em; }
.splash-p{ font-size:14px; color:var(--muted); line-height:1.55; max-width:320px; margin:0; }
.file-trigger{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }