:root{
    --bg:#efece0;
    --bg-alt:#e4e0cf;
    --panel:#ffffff;
    --panel-2:#f7f4e7;
    --line:#d8d3bd;
    --ink:#23241c;
    --muted:#6f6c5a;
    --accent:#7a8f1c;
    --accent-strong:#5b6b12;
    --amber:#b5691a;
    --amber-soft:#f1e2c9;
    --focus:#3a6ea5;
    --radius:3px;
    --shadow:0 1px 2px rgba(30,28,10,.08), 0 6px 18px -8px rgba(30,28,10,.18);
    --ease-smooth: cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.2,.7,.3,1);
    --font-display: ui-sans-serif, "Segoe UI Semibold", "Arial Narrow", Arial, sans-serif;
    --font-body: ui-sans-serif, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  }
  :root[data-theme="dark"]{
    --bg:#191a15;
    --bg-alt:#1f2019;
    --panel:#24251d;
    --panel-2:#2a2b21;
    --line:#3a3b2e;
    --ink:#eae6d6;
    --muted:#9a9782;
    --accent:#c9d94a;
    --accent-strong:#e6f26a;
    --amber:#e2a24c;
    --amber-soft:#3a2f1a;
    --focus:#7cb2e8;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.55);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#191a15;
      --bg-alt:#1f2019;
      --panel:#24251d;
      --panel-2:#2a2b21;
      --line:#3a3b2e;
      --ink:#eae6d6;
      --muted:#9a9782;
      --accent:#c9d94a;
      --accent-strong:#e6f26a;
      --amber:#e2a24c;
      --amber-soft:#3a2f1a;
      --focus:#7cb2e8;
      --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.55);
    }
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent),
      var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{ background:var(--accent); color:#161710; }
  a{color:inherit;}
  button,input,select,textarea{
    font-family:inherit;
    color:inherit;
  }
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

  /* Theme toggle stays instant (as before) even though other interactions
     on the site now animate — see .theme-switching toggled in app.js. */
  .theme-switching, .theme-switching *{
    transition:none !important;
    animation-duration:0s !important;
  }

  /* Baseline smooth transition for any themed surface that doesn't already
     define its own (zero-specificity :where(), so it never overrides a
     more specific rule below — e.g. .card keeps its own transition list). */
  :where(body, .stat, .chip, .theme-chip, .search-box, .atelier-btn, .cat-list button,
    .sidebar, .craft-builder, .builder-item, .builder-fav-btn, .fav-star-btn,
    .card-fav-btn, .qty-modal, .qty-modal__actions button, .qty-modal__field input,
    .mobile-theme-btn, .menu-btn, .sidebar-close, .craft-builder-close, footer.page,
    .atelier-header, .cat-title, .builder-item button){
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
  }
  :where(.theme-chip, .qty-modal__actions button, .craft-fab, .card-fav-btn, .fav-star-btn,
    .atelier-btn, .cat-list button, .builder-fav-btn):active{
    transform:scale(.96);
  }

  /* themed scrollbars (Firefox + WebKit/Chromium) */
  *{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background-color:var(--line);
    border-radius:8px;
    border:3px solid var(--bg-alt);
    background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background-color:var(--muted); }
  ::-webkit-scrollbar-corner{ background:transparent; }

  .app{
    display:grid;
    grid-template-columns:280px 1fr;
    min-height:100vh;
  }
  @media (max-width: 880px){
    .app{grid-template-columns:1fr;}
  }

  /* ---------- Mobile topbar ---------- */
  .mobile-header{
    display:none;
    position:sticky;
    top:0;
    z-index:40;
    background:var(--bg-alt);
    border-bottom:1px solid var(--line);
  }
  .mobile-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
  }
  .mobile-topbar .mt-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.02em;
    flex:1;
  }
  .mobile-search-bar{ display:flex; align-items:center; gap:8px; padding:0 14px 12px; }
  .mobile-search-bar .search-box{ flex:1; min-width:0; background:var(--panel); }
  .mobile-theme-btn{
    flex:none;
    width:38px; height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
    border-radius:var(--radius);
    font-size:16px;
    cursor:pointer;
  }
  .mobile-theme-btn:hover{ border-color:var(--accent); }
  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:var(--radius);
    cursor:pointer;
    flex:none;
  }
  .menu-btn svg{ display:block; }
  @media (max-width: 880px){
    .mobile-header{ display:block; }
  }

  .sidebar-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(10,10,6,.5);
    z-index:44;
  }
  @media (max-width: 880px){
    .sidebar-overlay{
      display:block;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s ease, visibility 0s linear .22s;
    }
    .sidebar-overlay.open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition:opacity .22s ease;
    }
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    border-right:1px solid var(--line);
    background:var(--bg-alt);
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    padding:20px 14px 40px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  @media (max-width: 880px){
    .sidebar{
      position:fixed;
      top:0; left:0; bottom:0;
      height:100vh;
      width:min(84vw,320px);
      z-index:45;
      transform:translateX(-100%);
      transition:transform .28s var(--ease-out), background-color .2s ease, border-color .2s ease;
      box-shadow:var(--shadow);
    }
    .sidebar.open{ transform:translateX(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .sidebar{ transition:none; }
  }
  .brand{
    padding:2px 8px 14px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .brand .brand-text{ flex:1; min-width:0; }
  .sidebar-close{
    display:none;
    width:28px; height:28px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:50%;
    cursor:pointer;
    flex:none;
    color:var(--ink);
    font-size:14px;
  }
  @media (max-width: 880px){
    .sidebar-close{ display:flex; }
  }
  .brand .eyebrow{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .brand h1{
    margin:4px 0 0;
    font-family:var(--font-display);
    font-weight:800;
    font-stretch:condensed;
    letter-spacing:.01em;
    font-size:21px;
    line-height:1.15;
    text-wrap:balance;
  }
  .brand p{
    margin:6px 0 0;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
  }

  .search-wrap{ padding:0 8px; }
  .search-box{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:9px 10px;
  }
  .search-box svg{ flex:none; opacity:.55; }
  .search-box input{
    border:0;
    outline:0;
    background:transparent;
    color:var(--ink);
    font-size:13.5px;
    width:100%;
    font-family:var(--font-body);
  }
  .search-box input::placeholder{ color:var(--muted); }
  .search-meta{
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted);
    letter-spacing:.03em;
    min-height:14px;
  }

  nav.tree{ padding:0 4px; display:flex; flex-direction:column; gap:2px; }
  .atelier-group{ border-bottom:1px dashed var(--line); padding-bottom:6px; margin-bottom:2px;}
  .atelier-group:last-child{ border-bottom:0; }
  .atelier-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    background:transparent;
    border:0;
    text-align:left;
    padding:9px 8px;
    border-radius:var(--radius);
    cursor:pointer;
    color:var(--ink);
  }
  .atelier-btn:hover{ background:var(--panel-2); }
  .atelier-btn .ic{ font-size:16px; flex:none; width:20px; text-align:center; }
  .atelier-btn .lbl{
    flex:1;
    font-family:var(--font-display);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .atelier-btn .count{
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted);
    background:var(--panel-2);
    border:1px solid var(--line);
    padding:1px 6px;
    border-radius:10px;
  }
  .cat-list{ list-style:none; margin:2px 0 4px; padding:0 0 0 29px; display:flex; flex-direction:column; gap:1px; }
  .cat-list button{
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    color:var(--muted);
    font-size:12px;
    padding:5px 8px;
    border-radius:var(--radius);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:6px;
  }
  .cat-list button:hover{ background:var(--panel-2); color:var(--ink); }
  .cat-list button .n{ font-family:var(--font-mono); font-size:10px; opacity:.7; }


  .page-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
  }
  .page-toolbar__title h2{
    margin:0 0 4px;
    font-family:var(--font-display);
    font-size:18px;
    letter-spacing:.02em;
    text-transform:uppercase;
  }
  .page-toolbar__title p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
  }
  .theme-chip{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
    border-radius:999px;
    padding:8px 12px;
    cursor:pointer;
    box-shadow:var(--shadow);
    white-space:nowrap;
  }
  .theme-chip__label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
  }
  .theme-chip__value{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:700;
    color:var(--accent-strong);
  }

  .main-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:24px;
    align-items:start;
  }
  .main-content{ min-width:0; }
  .craft-builder{
    position:sticky;
    top:24px;
    align-self:start;
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    margin-bottom:18px;
  }
  .craft-builder__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .craft-builder h3{
    margin:0 0 4px;
    font-size:15px;
  }
  .craft-builder-close{
    display:none;
    width:28px; height:28px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--panel-2);
    border-radius:50%;
    cursor:pointer;
    flex:none;
    color:var(--ink);
    font-size:14px;
  }
  .craft-builder p{
    margin:0 0 12px;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
  }
  .builder-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:280px;
    overflow:auto;
  }
  .builder-empty,
  .builder-summary__empty{
    border:1px dashed var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    color:var(--muted);
    font-size:12px;
    background:var(--panel-2);
  }
  .builder-item{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:9px 10px;
    background:var(--panel-2);
  }
  .builder-item .ic{ font-size:17px; flex:none; width:22px; text-align:center; }
  .builder-item__main{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
  .builder-item__main strong{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .builder-item__main span{ color:var(--muted); font-size:11px; }
  .builder-item__batch{ color:var(--accent); font-size:10.5px; }
  .builder-item__meta{ font-family:var(--font-mono); color:var(--amber); font-weight:700; flex:none; font-size:13px; white-space:nowrap; }
  .builder-item button{
    flex:none;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--muted);
    border-radius:var(--radius);
    padding:6px 9px;
    font-size:12px;
    cursor:pointer;
  }
  .builder-item button:hover{ color:var(--ink); border-color:var(--amber); }
  .builder-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed var(--line);
  }
  .builder-summary{
    min-width:0;
  }
  .builder-summary__title{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin-bottom:8px;
  }
  .builder-summary__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    max-height:240px;
    overflow:auto;
  }
  .builder-summary__row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:8px 10px;
    background:var(--panel-2);
    font-size:12px;
  }
  .builder-summary__row strong{ font-family:var(--font-mono); color:var(--accent-strong); }
  .builder-section-title{
    margin:14px 0 8px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
  }
  .builder-fav-list{ display:flex; flex-direction:column; gap:8px; max-height:180px; overflow:auto; }
  .builder-fav-row{ display:flex; align-items:stretch; gap:6px; }
  .builder-fav-btn{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    text-align:left;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--accent) 10%, var(--panel-2));
    color:var(--ink);
    border-radius:var(--radius);
    padding:8px 10px;
    cursor:pointer;
  }
  .builder-fav-btn .ic{ font-size:16px; flex:none; }
  .builder-fav-btn .txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .builder-fav-btn strong{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .builder-fav-btn span{ color:var(--muted); font-size:10.5px; }
  .fav-star-btn{
    flex:none;
    width:34px;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--amber);
    border-radius:var(--radius);
    font-size:15px;
    cursor:pointer;
  }
  .fav-star-btn:hover{ border-color:var(--amber); }

  /* ---------- Main ---------- */
  main{ padding:26px clamp(14px,4vw,44px) 80px; min-width:0; }
  .top-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:26px;
  }
  /* ---------- Mobile craft builder drawer + FAB ---------- */
  .craft-fab{
    display:none;
    position:fixed;
    right:18px; bottom:18px;
    width:56px; height:56px;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#161710;
    font-size:24px;
    box-shadow:var(--shadow);
    cursor:pointer;
    z-index:41;
    transition:transform .18s var(--ease-out), box-shadow .18s ease;
  }
  .craft-fab:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -12px rgba(0,0,0,.4); }
  .craft-fab:active{ transform:translateY(-1px) scale(.94);
  }
  .craft-fab__badge{
    position:absolute;
    top:-3px; right:-3px;
    min-width:20px; height:20px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--amber);
    color:#1c1305;
    border:2px solid var(--bg);
    border-radius:10px;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;
  }
  .craft-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(10,10,6,.5);
    z-index:46;
  }
  @media (max-width: 1100px){
    .craft-overlay{
      display:block;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease, visibility 0s linear .25s;
    }
    .craft-overlay.open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition:opacity .25s ease;
    }
  }
  .back-to-top{
    position:fixed;
    left:18px; bottom:18px;
    width:44px; height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--panel);
    color:var(--ink);
    font-size:18px;
    box-shadow:var(--shadow);
    cursor:pointer;
    z-index:41;
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .back-to-top:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
  .back-to-top:active{ transform:translateY(-1px) scale(.94); }
  @media (min-width: 1101px){
    .back-to-top{ left:auto; right:18px; }
  }
  @media (prefers-reduced-motion: reduce){
    .back-to-top{ transition:none; }
  }
  @media (max-width: 1100px){
    .main-layout{ grid-template-columns:1fr; }
    .craft-builder{
      position:fixed;
      left:0; right:0; bottom:0; top:auto;
      max-height:82vh;
      border-radius:16px 16px 0 0;
      box-shadow:0 -12px 40px -12px rgba(0,0,0,.45);
      transform:translateY(100%);
      transition:transform .3s var(--ease-out), background-color .2s ease, border-color .2s ease;
      overflow-y:auto;
      z-index:47;
      margin-bottom:0;
    }
    .craft-builder.open{ transform:translateY(0); }
    .craft-builder-close{ display:flex; }
    .craft-fab{ display:flex; }
  }
  @media (prefers-reduced-motion: reduce){
    .craft-builder{ transition:none; }
  }
  @media (max-width: 480px){
    main{ padding:18px 12px 60px; }
    .stat{ flex:1 1 calc(50% - 5px); min-width:0; }
  }
  .stat{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 14px;
    box-shadow:var(--shadow);
    min-width:108px;
  }
  .stat .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:19px; font-weight:600; color:var(--accent-strong); }
  .stat .k{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

  .atelier-section{ margin-bottom:46px; scroll-margin-top:18px; }
  .atelier-header{
    display:flex;
    align-items:baseline;
    gap:12px;
    border-bottom:2px solid var(--accent);
    padding-bottom:8px;
    margin-bottom:18px;
    flex-wrap:wrap;
    cursor:pointer;
    user-select:none;
  }
  .atelier-header .chevron{
    flex:none;
    font-size:16px;
    align-self:center;
    transition:transform .15s ease;
  }
  .atelier-section.collapsed .atelier-header .chevron{ transform:rotate(-90deg); }
  .atelier-section.collapsed .atelier-header{ margin-bottom:0; }
  .atelier-header .ic{ font-size:26px; line-height:1; }
  .atelier-header h2{
    font-family:var(--font-display);
    font-weight:800;
    font-stretch:condensed;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:clamp(20px,2.4vw,28px);
    margin:0;
  }
  .atelier-header .tag{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted);
    margin-left:auto;
  }

  .cat-block{ margin-bottom:26px; scroll-margin-top:18px; }
  .cat-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
    color:var(--accent);
    margin:0 0 12px;
    cursor:pointer;
    user-select:none;
  }
  .cat-title .chevron{
    flex:none;
    display:inline-block;
    font-size:11px;
    transition:transform .15s ease;
  }
  .cat-block.collapsed .cat-title .chevron{ transform:rotate(-90deg); }
  .cat-title .rule{ flex:1; height:1px; background:var(--line); }
  .cat-title .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); font-weight:400; }

  /* Smooth collapse/expand: a single-row grid interpolates between 1fr and
     0fr, while the inner wrapper clips overflow — no JS height math needed. */
  .collapse-wrap{
    display:grid;
    grid-template-rows:1fr;
    transition:grid-template-rows .32s var(--ease-smooth), opacity .28s ease;
    opacity:1;
  }
  .collapse-wrap > .collapse-inner{ overflow:hidden; min-height:0; }
  .cat-block.collapsed .collapse-wrap,
  .atelier-section.collapsed .collapse-wrap{
    grid-template-rows:0fr;
    opacity:0;
    pointer-events:none;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:10px;
  }
  @media (max-width: 420px){
    .grid{ grid-template-columns:1fr; }
  }

  .card{
    text-align:left;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:13px 14px 12px;
    cursor:pointer;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:9px;
    transition:transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease, background-color .2s ease;
    animation:cardIn .4s var(--ease-out) both;
    animation-delay:var(--stagger, 0ms);
  }
  .card:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
    box-shadow:0 14px 26px -14px rgba(0,0,0,.35), var(--shadow);
  }
  .card:active{ transform:translateY(-1px) scale(.99); }

  @keyframes cardIn{
    from{ opacity:0; transform:translateY(10px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .card-head{ display:flex; align-items:center; gap:9px; }
  .card-head .ic{ font-size:20px; flex:none; width:26px; text-align:center; }
  .card-head .name{ font-weight:700; font-size:13.5px; line-height:1.25; flex:1; min-width:0; overflow-wrap:break-word; }
  .card-fav-btn{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    font-size:16px;
    line-height:1;
    color:var(--muted);
    border:1px solid transparent;
    border-radius:50%;
    cursor:pointer;
  }
  .card-fav-btn:hover{ background:var(--panel-2); border-color:var(--line); color:var(--amber); }
  .card-fav-btn.is-active{ color:var(--amber); }
  .card-fav-btn.pop{ animation:favPop .38s var(--ease-out); }
  @keyframes favPop{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.35) rotate(-8deg); }
    100%{ transform:scale(1); }
  }
  .card-flow{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-family:var(--font-mono);
    font-size:11px;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:100%;
    background:var(--amber-soft);
    color:var(--amber);
    border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
    padding:2.5px 7px;
    border-radius:11px;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .arrow{ color:var(--muted); font-size:12px; }
  .chip.res{
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .card-foot{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted);
    padding-top:6px;
    border-top:1px dashed var(--line);
  }

  .empty-state{
    padding:60px 10px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
  }

  /* ---------- Quantity modal ---------- */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(10,10,6,.55);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:50;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .2s ease;
  }
  .qty-modal{
    width:100%;
    max-width:360px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
    padding:22px;
    transform:translateY(10px) scale(.96);
    opacity:0;
    transition:transform .25s var(--ease-out), opacity .2s ease;
  }
  .backdrop.open .qty-modal{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  .qty-modal__head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .qty-modal__head .ic{ font-size:28px; flex:none; }
  .qty-modal__head h3{
    margin:0;
    font-family:var(--font-display);
    font-weight:800;
    font-size:16px;
    line-height:1.3;
  }
  .qty-modal__field{ display:flex; flex-direction:column; gap:6px; }
  .qty-modal__field span{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
  }
  .qty-modal__field input{
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--ink);
    border-radius:var(--radius);
    padding:10px 12px;
    font-size:16px;
    font-family:var(--font-mono);
  }
  .qty-modal__actions{
    display:flex;
    gap:8px;
    margin-top:18px;
  }
  .qty-modal__actions button{
    flex:1;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--ink);
    border-radius:var(--radius);
    padding:10px 12px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
  }
  .qty-modal__actions button.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#161710;
  }
  .qty-modal__actions button:hover{ border-color:var(--accent); }

  footer.page{
    text-align:center;
    color:var(--muted);
    font-size:11px;
    padding:30px 20px 50px;
    font-family:var(--font-mono);
  }

  @media (prefers-reduced-motion: reduce){
    .card{ transition:none; }
  }

  /* Catch-all: anyone asking the OS for reduced motion gets near-instant
     state changes across every animation/transition added above. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }