/* System
   Font roles: --font-ui for everything (this is a scan-and-tap app); --mono for codes.
   Type: --fs-* scale only. Space: --space-N = N x 4px. Allowed literals: 1px hairlines,
   2-3px nudges, breakpoints. Colors only via tokens, redefined for dark mode. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
input,button{font:inherit}
p,h1,h2{overflow-wrap:break-word}
p{text-wrap:pretty}
h1,h2{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

:root{
  color-scheme:light dark;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-base:17px; --fs-xl:20px; --fs-2xl:28px;
  --lh-tight:1.15; --lh-ui:1.4; --lh-body:1.5;
  --track-tight:-.02em; --track-code:.08em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-11:44px; --space-18:72px;
  --radius-md:10px; --radius-lg:16px; --radius-full:999px;
  --measure:520px;
  --ease:.15s ease;

  --bg:#f7f7f5; --surface:#ffffff; --text:#1a1a1c; --muted:#6b6b72; --line:#e4e4e0;
  --accent:#6d28d9; --accent-text:#ffffff; --accent-soft:#ede9fe;
  --ok:#047857; --danger:#b91c1c; --warn:#b45309;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111113; --surface:#1b1b1f; --text:#ededef; --muted:#9a9aa3; --line:#2c2c32;
    --accent:#a78bfa; --accent-text:#140c24; --accent-soft:#2a2240;
    --ok:#34d399; --danger:#f87171; --warn:#fbbf24;
  }
}

body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-body)}
.shell{max-width:var(--measure);margin:0 auto;min-height:100dvh;
  padding:max(var(--space-4),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right))
          max(var(--space-10),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left))}

.bar{display:flex;align-items:center;justify-content:space-between;min-height:var(--space-11);margin-bottom:var(--space-6)}
.brand{font-weight:700;font-size:var(--fs-xl);letter-spacing:var(--track-tight);color:var(--accent)}

h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--track-tight);font-weight:650;margin-bottom:var(--space-2)}
h2{font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
   margin:var(--space-8) 0 var(--space-3)}
h2:first-child{margin-top:0}
.count{font-variant-numeric:tabular-nums}
.lead{color:var(--muted);margin-bottom:var(--space-6)}
.empty{color:var(--muted);font-size:var(--fs-md)}

.stack{display:flex;flex-direction:column;gap:var(--space-3)}
label{font-size:var(--fs-sm);color:var(--muted)}
input{font-size:var(--fs-base);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text);min-height:var(--space-11)}

button{cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;border:0;
  transition:transform var(--ease),background-color var(--ease),opacity var(--ease)}
button:active{transform:scale(.97)}
button:disabled{opacity:.5;cursor:default}
.primary,.secondary{min-height:var(--space-11);padding:0 var(--space-5);border-radius:var(--radius-md);font-weight:600;font-size:var(--fs-base)}
.primary{background:var(--accent);color:var(--accent-text)}
.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.link{background:none;color:var(--muted);font-size:var(--fs-md);min-height:var(--space-11);padding:0 var(--space-1)}
.danger-quiet{background:none;color:var(--danger);font-weight:600;font-size:var(--fs-md);min-height:var(--space-11);padding:0 var(--space-3)}
#signin-button{width:100%}
@media (hover:hover){
  .primary:hover{opacity:.9}
  .secondary:hover,.link:hover{background:var(--accent-soft)}
}

.notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--accent-soft);font-size:var(--fs-md);margin-bottom:var(--space-4)}
.notice.error{color:var(--danger)}

.cards,.rows,.events{list-style:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3)}
.card.highlight{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2)}
.code{font-family:var(--mono);font-size:var(--fs-xl);font-weight:600;letter-spacing:var(--track-code)}
.expires{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.match{font-size:var(--fs-sm);color:var(--ok);font-weight:600;margin-bottom:var(--space-2)}
.host{font-weight:600;font-size:var(--fs-base)}
.meta{font-size:var(--fs-md);color:var(--muted);font-variant-numeric:tabular-nums}
.durations{display:flex;gap:var(--space-1);margin:var(--space-4) 0 var(--space-3);background:var(--bg);border-radius:var(--radius-md);padding:3px}
.durations button{flex:1;min-height:var(--space-10);border-radius:var(--radius-md);background:transparent;color:var(--muted);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.durations button[aria-checked="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.actions{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-2)}

.commands{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4) var(--space-4)}
.cmd-label{font-size:var(--fs-sm);color:var(--muted);margin:var(--space-3) 0 var(--space-1)}
.cmd{display:flex;align-items:center;gap:var(--space-2);background:var(--bg);border-radius:var(--radius-md);padding-left:var(--space-3)}
.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-sm);padding:var(--space-3) 0;-webkit-user-select:all;user-select:all}
.copy{min-height:var(--space-11);min-width:var(--space-18);padding:0 var(--space-3);background:none;color:var(--accent);font-weight:600;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.file-open{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1;color:inherit;text-decoration:none;min-height:var(--space-11)}
.file-text{display:flex;flex-direction:column;min-width:0}
.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{flex:none;width:var(--space-11);height:var(--space-11);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--muted);overflow:hidden;text-transform:uppercase}
.thumb img{width:100%;height:100%;object-fit:cover}
.empty code{font-family:var(--mono);font-size:var(--fs-sm)}
.events li{font-size:var(--fs-sm);color:var(--muted);padding:var(--space-1) 0;font-variant-numeric:tabular-nums}
.events b{color:var(--text);font-weight:500}
.foot{margin-top:var(--space-8);text-align:center}

@media (prefers-reduced-motion:reduce){button{transition:none}button:active{transform:none}}