:root{
    --bg:#F1F3F5;
    --surface:#FFFFFF;
    --surface-2:#F1F3F6;
    --line:#D6DBE1;
    --line-2:#BCC3CC;
    --ink:#15181D;
    --ink-2:#4F5866;
    --ink-3:#808997;
    --on-ink:#FFFFFF;
    --danger:#D23A40;
    --ok:#1E9A58;
    --warn:#C08410;
    --tape:#F2C94C;
    --tape-ink:#15181D;
    --overlay:rgba(12,14,18,.5);
    --shadow:0 1px 2px rgba(21,24,29,.06), 0 10px 28px -16px rgba(21,24,29,.35);
    --font:'Bai Jamjuree', system-ui, -apple-system, sans-serif;
    --num:'Barlow Condensed', 'Bai Jamjuree', system-ui, sans-serif;
    --safe-t:env(safe-area-inset-top, 0px);
    --safe-b:env(safe-area-inset-bottom, 0px);
    --vvb:0px;   /* distance from the layout bottom to the visible bottom (set by JS) */
    --vvt:0px;   /* visible top inside the layout viewport */
    --vvh:100vh; /* visible height */
    color-scheme:light;
  }

  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;}
  button, .camtab, .take-card, .project-card, .slate, .chip, .tape, label{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  input, textarea{-webkit-user-select:text;user-select:text;}
  body{
    min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);
    font-family:var(--font);font-size:15px;line-height:1.4;
    -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  }
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;}
  button:disabled{opacity:.45;cursor:default;}
  input,select,textarea{font:inherit;color:inherit;}
  :focus{outline:none;}
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  input:focus-visible, textarea:focus-visible, select:focus-visible{outline:none;}
  [hidden]{display:none !important;}
  body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
  svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }

  .screen{
    width:100%;max-width:600px;margin:0 auto;min-height:100vh;min-height:100dvh;
    padding:calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 24px);
    display:flex;flex-direction:column;
  }

  /* ---------- shared controls ---------- */
  .icon-btn{
    width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;flex:none;
    background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow);
  }
  .icon-btn:active{transform:scale(.96);}
  .icon-btn.on{background:var(--ink);color:var(--on-ink);}
  .btn{
    min-height:52px;padding:0 18px;border-radius:14px;font-weight:600;font-size:16px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  }
  .btn:active{transform:scale(.98);}
  .btn-ink{background:var(--ink);color:var(--on-ink);}
  .btn-tape{background:var(--tape);color:var(--tape-ink);}
  .btn-soft{background:var(--surface-2);color:var(--ink);}
  .btn-plain{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}
  .btn-danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger);}
  .link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px;font-size:14px;}

  .field{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .field > label, .label{font-size:13px;font-weight:500;color:var(--ink-2);}
  .input{
    width:100%;height:48px;padding:0 12px;border-radius:12px;background:var(--surface-2);
    border:1.5px solid transparent;font-size:16px;min-width:0;
  }
  .input::placeholder{color:var(--ink-3);}
  .input:focus{border-color:var(--ink);}
  textarea.input{height:auto;min-height:72px;padding:12px;resize:none;line-height:1.4;}
  select.input{
    appearance:none;-webkit-appearance:none;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808997' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
  }
  .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .stack{display:flex;flex-direction:column;gap:14px;}

  .tape{
    display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:3px;
    background:var(--tape);color:var(--tape-ink);font-weight:700;font-size:14px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transform:rotate(-1.2deg);box-shadow:0 1px 0 rgba(0,0,0,.12);
  }
  .swatch{width:12px;height:12px;border-radius:3px;flex:none;background:var(--c, var(--tape));}