:root{
    --paper:#EAE6DC;
    --card:#F6F3EC;
    --ink:#201D1A;
    --ink-soft:#685F53;
    --gold:#C9A227;
    --teal:#24413D;
    --brick:#8B4A3B;
    --line: rgba(32,29,26,0.14);
    --line-strong: rgba(32,29,26,0.28);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  .display{font-family:'Fraunces',serif;}
  a{ color:inherit; }

  .texture{
    background-image:
      linear-gradient(rgba(32,29,26,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(32,29,26,0.035) 1px, transparent 1px);
    background-size: 26px 26px;
  }

  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    border:none; cursor:pointer; border-radius:3px;
    padding:12px 20px; transition:transform .15s ease, box-shadow .15s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-sm{ padding:8px 14px; font-size:12.5px; }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(32,29,26,0.25); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
  .btn-ghost:hover{ background:rgba(32,29,26,0.05); }
  .btn-danger{ background:transparent; color:var(--brick); border:1px solid rgba(139,74,59,0.4); }
  .btn-danger:hover{ background:rgba(139,74,59,0.08); }
  .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--gold); outline-offset:2px;
  }
  .btn:disabled{ opacity:.6; cursor:default; }

  header{
    padding: 30px 6vw 20px;
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1400px; margin:0 auto;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
  }
  .header-account{ text-align:right; }
  .header-account p{ margin:0 0 8px; }
  @media (max-width:640px){
    .header-account{ text-align:left; }
  }
  header p{margin:8px 0 0; color:var(--ink-soft); font-size:14px; max-width:480px;}

  main{ padding: 30px 6vw 40px; max-width:1400px; margin:0 auto; }

  .grid{
    display:grid; gap:22px; align-items:start;
    grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:box-shadow .18s ease, transform .18s ease;
  }
  .card:hover{ box-shadow:0 10px 26px rgba(32,29,26,0.14); transform:translateY(-2px); }
  .card .shot{
    aspect-ratio:1/1; width:100%; background:#fff repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50%/16px 16px;
    display:flex; align-items:center; justify-content:center; position:relative;
    border-bottom:1px solid var(--line);
  }
  .card .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .card .name{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; line-height:1.2; max-height:2.4em; overflow:hidden; }
  .card .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:14px; font-weight:500; }
  .card .desc{ font-size:13px; color:var(--ink-soft); line-height:1.45; flex:1;
    max-height:5.8em; overflow:hidden; }
  .card .row{ display:flex; gap:8px; margin-top:8px; }
  .card .row > a, .card .row > form{ flex:1; }
  .card .row a, .card .row button{ width:100%; padding:8px 10px; font-size:12.5px; justify-content:center; }
  .meta-row{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0; }
  .cat-chip-mini{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:var(--paper);
    border:1px solid var(--line-strong); border-radius:12px; padding:2px 8px; color:var(--ink-soft); }
  .popular-badge-mini{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:var(--gold);
    color:var(--ink); border-radius:12px; padding:2px 8px; }

  .empty{
    grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:6px;
    padding:70px 20px; text-align:center; color:var(--ink-soft);
  }
  .empty .display{ color:var(--ink); font-size:22px; margin-bottom:8px; }

  .switch-link{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em;
    color:var(--ink-soft); text-decoration:none; border:1px solid var(--line-strong);
    border-radius:20px; padding:7px 14px; display:inline-flex; align-items:center; gap:6px;
    background:var(--card); cursor:pointer; white-space:nowrap;
  }
  .switch-link:hover{ color:var(--ink); border-color:var(--ink-soft); }

  @media (max-width:480px){
    .switch-link-text{ display:none; }
    #manageCatalogLink{ padding:9px 11px; border-radius:50%; gap:0; }
  }

  /* ================= STOREFRONT ================= */
  #storefrontScreen{ display:block; }
  #adminScreen{ display:none; }

  .navbar{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line); }
  .navbar-inner{ max-width:1400px; margin:0 auto; padding:12px 6vw; display:flex; justify-content:space-between; align-items:center; gap:14px; }
  .brand-group{ display:flex; align-items:center; gap:10px; min-width:0; }
  .nav-logo{ height:44px; width:auto; max-width:180px; object-fit:contain; flex:none; }
  .navbar .brand{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .logo-uploader{ display:flex; align-items:center; gap:12px; margin:10px 0 6px; }
  .logo-preview{ width:56px; height:56px; border:1px dashed var(--line-strong); border-radius:6px; display:flex;
    align-items:center; justify-content:center; background:#fff; overflow:hidden; flex:none; }
  .logo-preview img{ width:100%; height:100%; object-fit:contain; }
  .logo-preview span{ font-size:9.5px; color:var(--ink-soft); text-align:center; padding:0 4px; }
  .logo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

  /* hero carousel */
  .hero{ position:relative; height:clamp(360px,52vw,540px); overflow:hidden; background:var(--ink); }
  .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
  .hero-slide.active{ opacity:1; pointer-events:auto; }
  .hero-slide-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:blur(28px) brightness(0.55) saturate(1.1); transform:scale(1.15); }
  .hero-slide.active .hero-slide-bg{ animation: kenburns-bg 6500ms ease-out forwards; }
  @keyframes kenburns-bg{ from{ transform:scale(1.15); } to{ transform:scale(1.26); } }
  .hero-slide-fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scale(1); }
  .hero-slide.active .hero-slide-fg{ animation: kenburns-fg 6500ms ease-out forwards; }
  @keyframes kenburns-fg{ from{ transform:scale(1); } to{ transform:scale(1.15); } }
  .hero-slide-overlay{ position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(32,29,26,0.78) 0%, rgba(32,29,26,0.46) 48%, rgba(32,29,26,0.14) 100%); }
  .hero-slide-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center;
    padding:0 6vw; max-width:600px; color:#fff; }
  .hero-slide-inner .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  .hero-slide-inner .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
  .hero-slide-inner h1{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,5vw,52px);
    margin:0 0 14px; letter-spacing:-0.01em; line-height:1.08;
    max-height:3.3em; overflow:hidden; }
  .hero-slide-inner p{ font-size:15.5px; color:rgba(255,255,255,0.82); max-width:440px; margin:0 0 24px; line-height:1.55; }
  .hero-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
    text-align:center; color:#fff; background:linear-gradient(135deg, var(--teal), var(--ink)); padding:0 8vw; }
  .hero-placeholder h1{ font-family:'Fraunces',serif; font-size:clamp(26px,4vw,40px); margin:0 0 10px; }
  .hero-placeholder p{ color:rgba(255,255,255,0.75); font-size:14.5px; max-width:420px; }
  .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.4); color:#fff; width:42px; height:42px; border-radius:50%; cursor:pointer;
    font-size:18px; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
  .hero-arrow:hover{ background:rgba(255,255,255,0.28); }
  .hero-arrow.prev{ left:18px; } .hero-arrow.next{ right:18px; }
  .hero-dots{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
  .hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; cursor:pointer; padding:0; }

  @media (max-width:640px){
    /* On narrow screens the text stack can grow tall enough that vertically-
       centered arrows land on top of it. Anchor them to the bottom instead,
       clear of the readable content, alongside the dots. */
    .hero-arrow{ top:auto; bottom:10px; transform:none; width:36px; height:36px; font-size:16px; }
    .hero-dots{ bottom:22px; }
  }
  .hero-dot.active{ background:var(--gold); width:22px; border-radius:5px; transition:all .3s ease; }

  .search-band{ background:var(--card); border-bottom:1px solid var(--line); }
  .search-band-inner{ max-width:1400px; margin:0 auto; padding:18px 6vw; }
  .search-wrap{ max-width:420px; position:relative; }
  .search-wrap input{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:12px 14px 12px 38px;
    border:1px solid var(--line-strong); border-radius:30px; background:#fff; color:var(--ink);
  }
  .search-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none; }

  /* category chips */
  .category-row-wrap{ border-bottom:1px solid var(--line); background:var(--paper); }
  .category-row{ display:flex; gap:10px; overflow-x:auto; padding:16px 6vw; max-width:1400px; margin:0 auto; }
  .cat-chip{ flex:none; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:8px 16px; border-radius:20px;
    border:1px solid var(--line-strong); background:#fff; cursor:pointer; color:var(--ink-soft); white-space:nowrap;
    transition:all .15s ease; }
  .cat-chip:hover{ border-color:var(--ink-soft); color:var(--ink); }
  .cat-chip.active{ background:var(--teal); border-color:var(--teal); color:#fff; }

  /* popular row */
  .popular-section{ border-bottom:1px solid var(--line); background:var(--card); }
  .popular-inner{ max-width:1400px; margin:0 auto; padding:36px 6vw; }
  .section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold-text,var(--gold)); display:block; margin-bottom:4px; }
  .section-head h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 16px; font-weight:600; }
  .popular-scroll{ display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; align-items:start; }
  .popular-scroll .store-card{ flex:0 0 220px; }

  .store-main{ padding: 40px 6vw 100px; max-width:1400px; margin:0 auto; }
  .catalog-controls{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
  .store-count{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.08em;
  }
  .sort-select{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 12px; border:1px solid var(--line-strong);
    border-radius:3px; background:#fff; color:var(--ink); }
  .store-grid{
    display:grid; gap:24px; align-items:start;
    grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  }
  .store-card{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; cursor:pointer; display:flex; flex-direction:column; position:relative;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .store-card:hover{ box-shadow:0 14px 30px rgba(32,29,26,0.16); transform:translateY(-3px); }
  .store-card .shot{ aspect-ratio:1/1; width:100%; overflow:hidden; border-bottom:1px solid var(--line); background:#fff; position:relative; }
  .store-card .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
  .store-card:hover .shot img{ transform:scale(1.045); }
  .store-card .ribbon{ position:absolute; top:10px; left:-1px; background:var(--gold); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    padding:4px 10px 4px 12px; border-radius:0 3px 3px 0; }
  .store-card .body{ padding:14px 16px 16px; }
  .store-card .cat-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--teal); margin-bottom:4px; }
  .store-card .name{ font-family:'Fraunces',serif; font-weight:600; font-size:16.5px; line-height:1.25; margin-bottom:4px; max-height:2.5em; overflow:hidden; }
  .store-card .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:13.5px; margin-bottom:8px; }
  .store-card .desc{
    font-size:13px; color:var(--ink-soft); line-height:1.45;
    max-height:5.8em; overflow:hidden;
  }

  .store-empty{
    text-align:center; padding:90px 20px; color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:6px;
    grid-column:1/-1;
  }
  .store-empty .display{ color:var(--ink); font-size:22px; margin-bottom:8px; }

  .site-footer{ border-top:1px solid var(--line-strong); background:var(--ink); color:var(--paper); }
  .footer-inner{ max-width:1400px; margin:0 auto; padding:28px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center; }
  .footer-brand{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; }
  .footer-tag{ font-size:12.5px; color:rgba(234,230,220,0.65); }

  /* product detail overlay */
  .detail-overlay{
    position:fixed; inset:0; background:rgba(32,29,26,0.6); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:60; padding:4vw;
  }
  .detail-overlay.open{ display:flex; }
  .detail-panel{
    background:var(--paper); width:min(920px,100%); max-height:90vh; overflow-y:auto;
    border-radius:6px; border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,0.4);
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  @media (max-width:680px){ .detail-panel{ grid-template-columns:minmax(0,1fr); } }
  .detail-panel .shot{ background:#fff; min-width:0; min-height:360px;
    box-shadow:0 4px 20px rgba(32,29,26,0.12); }
  .detail-panel .shot img{ width:100%; height:100%; object-fit:contain; display:block; min-width:0; }
  .detail-info{ padding:30px 32px; display:flex; flex-direction:column; position:relative; min-width:0; }
  .detail-cat{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
  .detail-info .name{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0 0 8px; padding-right:30px; }
  .detail-info .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:17px; margin-bottom:18px; }
  .detail-info .desc{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
  .detail-info .desc p{ margin:0 0 1em; }
  .detail-info .desc p:last-child{ margin-bottom:0; }
  .detail-close{ position:absolute; top:0; right:0; background:none; border:none; font-size:20px; color:var(--ink-soft); cursor:pointer; }
  .detail-close:hover{ color:var(--ink); }
  .detail-nav{ display:flex; gap:10px; margin-top:auto; padding-top:24px; }
  .detail-nav button{
    flex:1; padding:10px; font-size:13px; border:1px solid var(--line-strong); background:transparent;
    border-radius:3px; cursor:pointer; color:var(--ink-soft); font-family:'Inter',sans-serif;
  }
  .detail-nav button:hover{ color:var(--ink); border-color:var(--ink-soft); }

  /* lock / password overlay */
  .lock-panel{ background:var(--paper); width:min(360px,100%); border-radius:6px; border:1px solid var(--line-strong);
    padding:34px 28px; text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.4); }
  .lock-icon{ font-size:26px; margin-bottom:10px; }
  .lock-panel h2{ font-family:'Fraunces',serif; font-size:20px; margin:0 0 6px; }
  .lock-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
  .lock-panel input{ width:100%; margin-bottom:10px; padding:10px 12px; border:1px solid var(--line-strong);
    border-radius:3px; font-family:'Inter',sans-serif; font-size:14px; }
  .lock-error{ color:var(--brick); font-size:12.5px; margin:-2px 0 10px; text-align:left; }
  .lock-note{ font-size:11px; color:var(--ink-soft); margin-top:14px; line-height:1.4; }

  /* editable shop settings (admin) */
  .shop-settings{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
  .shop-settings input{
    font-family:'Fraunces',serif; font-weight:600; font-size:15px; border:1px solid transparent;
    background:transparent; padding:2px 4px; border-radius:3px; color:var(--ink); max-width:280px;
  }
  .shop-settings input:hover, .shop-settings input:focus{ border-color:var(--line-strong); background:#fff; }
  .shop-settings input.tagline-input{ font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; color:var(--ink-soft); max-width:340px; }

  /* admin storefront-setup sections */
  .admin-section{ max-width:1400px; margin:0 auto; padding:26px 6vw; border-bottom:1px solid var(--line); }
  .admin-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
  .admin-section-head h3{ font-family:'Fraunces',serif; font-size:17px; margin:0; font-weight:600; }
  .admin-hint{ font-size:12px; color:var(--ink-soft); margin:8px 0 0; }
  .category-editor{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .category-chip-edit{ display:inline-flex; align-items:center; gap:6px; background:var(--card);
    border:1px solid var(--line-strong); border-radius:20px; padding:6px 8px 6px 14px; font-size:12.5px; }
  .category-chip-edit button{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:14px; line-height:1; padding:2px; }
  .category-chip-edit button:hover{ color:var(--brick); }
  .category-add-row{ display:flex; gap:8px; max-width:360px; }
  .category-add-row input{ flex:1; padding:9px 12px; border:1px solid var(--line-strong); border-radius:3px; font-size:13px; font-family:'Inter',sans-serif; }

  .hero-slide-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .hero-slide-item{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:4px; padding:8px 12px; }
  .hero-slide-item img{ width:64px; height:40px; object-fit:cover; border-radius:3px; flex:none; }
  .hsi-title{ flex:1; font-size:13.5px; font-weight:500; }
  .hsi-actions{ display:flex; gap:6px; }
  .hsi-actions button{ font-size:11.5px; padding:5px 9px; border-radius:3px; border:1px solid var(--line-strong);
    background:#fff; cursor:pointer; color:var(--ink-soft); }
  .hsi-actions button:hover{ color:var(--ink); }

  /* overlay + panel */
  .overlay{
    position:fixed; inset:0; background:rgba(32,29,26,0.55); backdrop-filter:blur(2px);
    display:none; align-items:flex-start; justify-content:center; z-index:50; padding:4vw;
    overflow-y:auto;
  }
  .overlay.open{ display:flex; }
  .panel{
    background:var(--paper); width:min(880px,100%); border-radius:6px;
    border:1px solid var(--line-strong); margin:20px 0 40px;
    box-shadow:0 30px 70px rgba(0,0,0,0.35);
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 26px; border-bottom:1px solid var(--line);
  }
  .panel-head h2{ font-family:'Fraunces',serif; font-size:22px; margin:0; font-weight:600; }
  .icon-btn{ background:none; border:none; cursor:pointer; font-size:20px; color:var(--ink-soft); line-height:1; padding:4px;}
  .icon-btn:hover{ color:var(--ink); }

  .panel-body{ padding:24px 26px 30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
  @media (max-width:680px){ .panel-body{ grid-template-columns:minmax(0,1fr); } }

  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }
  .field input[type=text], .field input[type=number], .field input[type=password], .field input[type=email], .field textarea, .field select{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:10px 12px;
    border:1px solid var(--line-strong); border-radius:3px; background:#fff; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .field-checkbox{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .field-checkbox input{ width:auto; }
  .field-checkbox label{ margin:0; text-transform:none; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); }
  .price-row{ display:flex; gap:8px; }
  .price-row select{ width:64px; flex:none; }

  .dropzone{
    border:1.5px dashed var(--line-strong); border-radius:5px; aspect-ratio:1/1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; cursor:pointer; color:var(--ink-soft); text-align:center; padding:16px;
    position:relative; overflow:hidden;
  }
  .dropzone.wide{ aspect-ratio:16/9; }
  .dropzone.texture:hover{ border-color:var(--gold); color:var(--ink); }
  .dropzone svg{ opacity:.55; }
  .dropzone span.hint{ font-size:12.5px; max-width:200px; }

  .compare{
    position:relative; aspect-ratio:1/1; border-radius:5px; overflow:hidden;
    border:1px solid var(--line-strong); background:#fff;
  }
  .compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; }
  .compare .after-wrap{ position:absolute; inset:0; overflow:hidden; }
  .compare-range{
    position:absolute; inset:0; width:100%; height:100%; margin:0; appearance:none; background:transparent; cursor:ew-resize; z-index:5;
  }
  .compare-range::-webkit-slider-thumb{
    appearance:none; width:36px; height:36px; border-radius:50%; margin-top:0;
    background:var(--paper) center/16px no-repeat; border:2px solid var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,0.3); cursor:ew-resize;
  }
  .compare-range{ top:50%; transform:translateY(-50%); height:0; }
  .compare-range::-webkit-slider-runnable-track{ background:transparent; }
  .divider-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--gold); z-index:4; box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
  .tag{
    position:absolute; top:8px; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; background:rgba(32,29,26,0.75); color:#fff;
    padding:4px 8px; border-radius:2px; z-index:6;
  }
  .tag.left{ left:8px; } .tag.right{ right:8px; }

  .strength-row{ display:flex; gap:8px; margin-top:14px; }
  .strength-row button{
    flex:1; padding:8px 6px; font-size:12px; border:1px solid var(--line-strong); background:#fff;
    border-radius:3px; cursor:pointer; color:var(--ink-soft);
  }
  .strength-row button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .panel-foot{ display:flex; justify-content:flex-end; gap:10px; padding:18px 26px; border-top:1px solid var(--line); }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:4px; font-size:13.5px;
    opacity:0; pointer-events:none; transition:all .25s ease; z-index:100; font-family:'Inter',sans-serif;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .confirm-pop{
    position:absolute; z-index:20; background:var(--ink); color:var(--paper); padding:12px 14px; border-radius:4px;
    font-size:12.5px; box-shadow:0 10px 24px rgba(0,0,0,0.3); width:200px;
  }
  .confirm-pop .row{ display:flex; gap:8px; margin-top:10px; }
  .confirm-pop button{ flex:1; font-size:11.5px; padding:6px 8px; border-radius:3px; border:none; cursor:pointer; }
  .confirm-pop .yes{ background:var(--brick); color:#fff; }
  .confirm-pop .no{ background:rgba(255,255,255,0.15); color:#fff; }

  .loading-note{ font-size:13px; color:var(--ink-soft); padding:40px 0; text-align:center; grid-column:1/-1; }
  .hidden{ display:none !important; }