:root{
    --paper:#F3F6EF;
    --paper-line:#CBDACF;
    --paper-raised:#FFFFFF;
    --ink:#1E2B22;
    --ink-soft:#51624F;
    --orange:#FF6A3D;
    --orange-ink:#7A2E11;
    --yellow:#F2C94C;
    --blue:#3E7CB1;
    --green:#3F7D58;
    --red:#C1462F;
    --border:#1E2B22;
    --shadow-none: none;
    --radius: 3px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#171D18;
      --paper-line:#2A362B;
      --paper-raised:#20281F;
      --ink:#ECF0E8;
      --ink-soft:#A9B8A6;
      --orange:#FF8258;
      --orange-ink:#FFE3D6;
      --yellow:#F2C94C;
      --blue:#7FB3DE;
      --green:#6FCB92;
      --red:#E17A62;
      --border:#3E4B3D;
    }
  }
  :root[data-theme="dark"]{
    --paper:#171D18;
    --paper-line:#2A362B;
    --paper-raised:#20281F;
    --ink:#ECF0E8;
    --ink-soft:#A9B8A6;
    --orange:#FF8258;
    --orange-ink:#FFE3D6;
    --yellow:#F2C94C;
    --blue:#7FB3DE;
    --green:#6FCB92;
    --red:#E17A62;
    --border:#3E4B3D;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    background-image:
      repeating-linear-gradient(to bottom, transparent 0 27px, var(--paper-line) 27px 28px);
    color:var(--ink);
    font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
    line-height:1.45;
    min-height:100vh;
  }
  h1,h2,h3,.display{
    font-family:'Big Shoulders Display', 'Impact', 'Arial Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
    font-weight:800;
    letter-spacing:0.01em;
    line-height:1.02;
    margin:0;
    color:var(--ink);
  }
  a{color:var(--blue);}
  button{font-family:inherit;}
  img{max-width:100%;}

  .wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px;}

  /* header */
  header.top{
    position:sticky; top:0; z-index:40;
    background:var(--paper);
    border-bottom:2px solid var(--border);
    backdrop-filter: blur(2px);
  }
  .top-inner{
    max-width:1080px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--ink);
  }
  .brand-tab{
    background:var(--orange);
    color:#1a0f08;
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:22px;
    padding:5px 14px 6px;
    border:2px solid var(--border);
    transform:rotate(-2deg);
    display:inline-block;
    box-shadow: 3px 3px 0 var(--border);
  }
  nav.tabs{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
  .tab-btn{
    background:transparent;border:2px solid transparent;
    padding:8px 14px;font-size:15px;font-weight:600;color:var(--ink-soft);
    cursor:pointer;border-radius:2px;
  }
  .tab-btn.active{
    border-color:var(--border);background:var(--paper-raised);color:var(--ink);
  }
  .cart-btn{
    background:var(--ink);color:var(--paper);
    border:2px solid var(--border);
    padding:9px 16px;font-weight:700;font-size:15px;cursor:pointer;
    display:flex;align-items:center;gap:8px;
  }
  .cart-count{
    background:var(--orange);color:#1a0f08;
    border-radius:50%;min-width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;
  }

  /* hero */
  .hero{padding:44px 0 18px;}
  .hero h1{font-size:clamp(34px,5vw,54px);max-width:14ch;}
  .hero p.sub{color:var(--ink-soft);font-size:17px;max-width:52ch;margin-top:10px;}

  .section-label{
    display:inline-block;
    font-weight:700;font-size:13px;color:var(--ink-soft);
    border-bottom:2px dotted var(--paper-line);
    padding-bottom:2px;margin-bottom:14px;
  }

  /* card base — flat, spine bar instead of shadow */
  .card{
    background:var(--paper-raised);
    border:2px solid var(--border);
    padding:16px;
    position:relative;
  }

  /* upload panel */
  .upload-panel{
    display:grid;grid-template-columns: 1.1fr 0.9fr; gap:22px;
    margin-top:10px;
  }
  @media (max-width:760px){ .upload-panel{grid-template-columns:1fr;} }
  .dropzone{
    border:2px dashed var(--border);
    padding:34px 20px;text-align:center;cursor:pointer;
    background:var(--paper-raised);
    transition:background 0.15s;
  }
  .dropzone:hover{background:color-mix(in srgb, var(--yellow) 15%, var(--paper-raised));}
  .dropzone .icon{font-size:38px;display:block;margin-bottom:8px;}
  .dropzone .hint{font-size:13px;color:var(--ink-soft);margin-top:6px;}
  .hidden-input{display:none;}
  .preview-strip{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
  .preview-thumb{
    width:78px;height:78px;object-fit:cover;border:2px solid var(--border);
  }
  .btn{
    border:2px solid var(--border);
    background:var(--paper-raised);color:var(--ink);
    font-weight:700;font-size:14px;
    padding:10px 16px;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn:disabled{opacity:0.45;cursor:not-allowed;}
  .btn-primary{
    background:var(--orange);color:#1a0f08;border-color:var(--border);
  }
  .btn-primary:hover:not(:disabled){background:var(--yellow);}
  .btn-ghost{background:transparent;border-color:var(--paper-line);}
  .btn-small{padding:6px 10px;font-size:13px;}

  .status-line{font-size:13px;color:var(--ink-soft);margin-top:10px;min-height:18px;}
  progress{width:100%;height:8px;accent-color:var(--orange);margin-top:8px;display:none;}

  textarea#ocrText{
    width:100%;min-height:160px;margin-top:10px;
    font-family:'Space Grotesk',monospace;font-size:14px;
    border:2px solid var(--border);background:var(--paper-raised);color:var(--ink);
    padding:10px;resize:vertical;
  }

  .match-list{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
  .match-row{
    border:2px solid var(--border);background:var(--paper-raised);
    padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  }
  .match-row.nomatch{border-style:dashed;opacity:0.85;}
  .match-line-text{font-size:12px;color:var(--ink-soft);grid-column:1/-1;}
  .match-select{
    border:1px solid var(--border);background:var(--paper);color:var(--ink);
    padding:6px 8px;font-family:inherit;font-size:14px;
  }
  .match-price{font-weight:700;white-space:nowrap;}

  /* shop controls */
  .shop-controls{
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 16px;
  }
  .chip{
    border:2px solid var(--border);background:var(--paper-raised);
    padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);
  }
  .chip.active{background:var(--ink);color:var(--paper);}
  .search-input, .sort-select{
    border:2px solid var(--border);background:var(--paper-raised);color:var(--ink);
    padding:8px 10px;font-size:14px;font-family:inherit;
  }
  .search-input{flex:1;min-width:160px;}

  .grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:14px;
  }
  .product-card{
    border:2px solid var(--border);background:var(--paper-raised);
    padding:14px 14px 12px;
    border-left:8px solid var(--cat-color, var(--blue));
    display:flex;flex-direction:column;gap:6px;
    transition:transform 0.12s;
  }
  .product-card:hover{transform:rotate(-0.6deg) translateY(-2px);}
  .product-emoji{font-size:26px;}
  .product-name{font-weight:700;font-size:15px;}
  .product-brand{font-size:12px;color:var(--ink-soft);}
  .product-price{font-family:'Big Shoulders Display';font-size:22px;font-weight:700;margin-top:2px;}
  .product-unit{font-size:11px;color:var(--ink-soft);margin-top:-4px;}
  .qty-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
  .qty-btn{
    width:26px;height:26px;border:2px solid var(--border);background:var(--paper);
    color:var(--ink);font-weight:700;cursor:pointer;
  }
  .qty-val{min-width:20px;text-align:center;font-weight:700;}
  .add-btn{margin-top:8px;width:100%;justify-content:center;}

  /* cart drawer */
  .overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.35);
    opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:50;
  }
  .overlay.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);
    background:var(--paper);border-left:2px solid var(--border);
    transform:translateX(100%);transition:transform 0.22s ease;
    z-index:51;display:flex;flex-direction:column;
  }
  .drawer.open{transform:translateX(0);}
  .drawer-head{
    padding:16px 18px;border-bottom:2px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;
  }
  .drawer-body{flex:1;overflow-y:auto;padding:14px 18px;}
  .drawer-foot{border-top:2px solid var(--border);padding:16px 18px;}
  .close-x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);}
  .cart-item{
    display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
    padding:10px 0;border-bottom:1px dashed var(--paper-line);
  }
  .cart-item .name{font-weight:600;font-size:14px;}
  .cart-item .brand{font-size:11px;color:var(--ink-soft);}
  .cart-item .remove{font-size:12px;color:var(--red);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;}
  .total-row{display:flex;justify-content:space-between;font-size:15px;margin-bottom:12px;}
  .total-row.grand{font-weight:800;font-size:19px;font-family:'Big Shoulders Display';}
  .empty-note{color:var(--ink-soft);font-size:14px;text-align:center;margin-top:40px;}

  /* order confirmation */
  .order-view{max-width:560px;margin:60px auto;text-align:center;}
  .order-view .stamp{
    display:inline-block;border:3px solid var(--green);color:var(--green);
    font-family:'Big Shoulders Display';font-size:20px;font-weight:800;
    padding:8px 18px;transform:rotate(-3deg);margin-bottom:18px;
  }
  .order-summary{text-align:left;border:2px solid var(--border);background:var(--paper-raised);padding:16px;margin-top:20px;}
  .disclaimer-box{
    border:2px dashed var(--border);padding:10px 14px;font-size:13px;color:var(--ink-soft);
    margin-top:16px;background:var(--paper-raised);
  }

  .toast{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:var(--paper);padding:10px 18px;
    border:2px solid var(--border);font-size:14px;font-weight:600;
    opacity:0;transition:all 0.25s;z-index:60;pointer-events:none;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  hr.tear{
    border:none;border-top:2px dashed var(--paper-line);margin:34px 0;
  }
  .empty-state{
    text-align:center;padding:40px 10px;color:var(--ink-soft);
  }
  footer{
    text-align:center;color:var(--ink-soft);font-size:12px;padding:30px 0 10px;
  }