:root{
    --bg:#15130E;
    --surface:#1F1C15;
    --surface-2:#28241B;
    --border:#3A3527;
    --border-bright:#544C36;
    --orange:#FF5A1F;
    --orange-dim:#C2450F;
    --orange-glow:rgba(255,90,31,0.18);
    --text:#F3EFE4;
    --text-dim:#A79E88;
    --text-faint:#6E6752;
    --green:#7FB069;
    --font-display:'Space Grotesk',sans-serif;
    --font-mono:'Space Mono',monospace;
    --font-body:'Inter',sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(255,90,31,0.08), transparent),
      var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--orange);color:#1a1a1a;}

  /* ===== Scaffold ===== */
  .wrap{max-width:1040px;margin:0 auto;padding:0 24px 100px;}

  header.top{
    border-bottom:1px solid var(--border);
    padding:20px 24px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;
    background:rgba(21,19,14,0.92);
    backdrop-filter:blur(8px);
    z-index:50;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-mark{
    width:30px;height:30px;
    border:2px solid var(--orange);
    display:grid;place-items:center;
    font-family:var(--font-mono);
    font-size:12px;font-weight:700;
    color:var(--orange);
    flex-shrink:0;
  }
  .brand-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:0.02em;}
  .brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);letter-spacing:0.08em;margin-top:1px;}
  .reset-btn{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;
    color:var(--text-dim);background:transparent;border:1px solid var(--border);
    padding:8px 14px;cursor:pointer;text-transform:uppercase;
    transition:all .15s;
  }
  .reset-btn:hover{border-color:var(--orange);color:var(--orange);}

  /* ===== Stepper ===== */
  .stepper{
    display:flex;
    margin:32px 0 40px;
    border:1px solid var(--border);
    background:var(--surface);
  }
  .step-tab{
    flex:1;padding:14px 10px 12px;text-align:left;
    border-right:1px solid var(--border);
    position:relative;cursor:default;
    opacity:0.4;transition:opacity .2s;
  }
  .step-tab:last-child{border-right:none;}
  .step-tab.reachable{cursor:pointer;}
  .step-tab.active{opacity:1;}
  .step-tab.done{opacity:0.85;cursor:pointer;}
  .step-tab .num{
    font-family:var(--font-mono);font-size:10px;color:var(--text-faint);letter-spacing:0.1em;
  }
  .step-tab.active .num, .step-tab.done .num{color:var(--orange);}
  .step-tab .label{
    font-family:var(--font-display);font-size:13px;font-weight:600;margin-top:3px;letter-spacing:0.01em;
  }
  .step-tab.active::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
  }

  panel{display:none;}
  panel.active{display:block;animation:fadeUp .35s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  .panel-head{margin-bottom:24px;}
  .eyebrow{
    font-family:var(--font-mono);font-size:11px;color:var(--orange);
    letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;
  }
  h2{
    font-family:var(--font-display);font-size:26px;font-weight:700;margin:0 0 8px;letter-spacing:-0.01em;
  }
  .panel-desc{color:var(--text-dim);font-size:14px;line-height:1.5;max-width:56ch;}

  /* ===== Step 1: count ===== */
  .count-grid{
    display:grid;grid-template-columns:repeat(9,1fr);gap:10px;margin:28px 0;
  }
  .count-btn{
    aspect-ratio:1;border:1px solid var(--border);background:var(--surface);
    color:var(--text);font-family:var(--font-display);font-size:20px;font-weight:600;
    cursor:pointer;transition:all .12s;display:grid;place-items:center;
  }
  .count-btn:hover{border-color:var(--border-bright);background:var(--surface-2);}
  .count-btn.selected{
    border-color:var(--orange);background:var(--orange-glow);color:var(--orange);
    box-shadow:inset 0 0 0 1px var(--orange);
  }
  .hint-row{
    font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
    display:flex;justify-content:space-between;
  }

  /* ===== Step 2: layout cards ===== */
  .layout-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:28px 0;
  }
  .layout-card{
    border:1px solid var(--border);background:var(--surface);
    padding:16px 14px 14px;cursor:pointer;transition:all .15s;
  }
  .layout-card:hover{border-color:var(--border-bright);}
  .layout-card.selected{border-color:var(--orange);background:var(--orange-glow);}
  .layout-thumb{width:100%;height:80px;margin-bottom:12px;}
  .layout-thumb svg{width:100%;height:100%;display:block;}
  .layout-name{font-family:var(--font-display);font-size:13px;font-weight:600;}
  .layout-spec{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin-top:3px;letter-spacing:0.03em;}

  /* ===== Step 3: upload grid ===== */
  .assemble-shell{
    border:1px solid var(--border);background:var(--surface);padding:20px;
  }
  .assemble-meta{
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
    margin-bottom:14px;letter-spacing:0.03em;
  }
  .assemble-meta .count-ok{color:var(--green);}
  .frame{
    width:100%;
    display:flex;flex-direction:column;gap:var(--gap-px,8px);
    background:var(--frame-color,#0E0C08);
    border:1px solid var(--border);
    padding:var(--gap-px,8px);
  }
  .frow{display:flex;flex:1;gap:var(--gap-px,8px);}
  .cell{
    flex:1;position:relative;overflow:hidden;
    background:var(--surface-2);
    border:1px dashed var(--border-bright);
    min-height:40px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .cell.filled{border:1px solid var(--border);cursor:default;}
  .cell img{width:100%;height:100%;object-fit:cover;display:block;}
  .cell .slot-label{
    font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
    display:flex;flex-direction:column;align-items:center;gap:6px;
    pointer-events:none;
  }
  .cell .slot-label .plus{font-size:20px;color:var(--text-faint);}
  .cell:hover .slot-label .plus{color:var(--orange);}
  .cell-controls{
    position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;
  }
  .cell.filled:hover .cell-controls{opacity:1;}
  .cell-btn{
    width:24px;height:24px;background:rgba(15,13,9,0.85);border:1px solid var(--border-bright);
    color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;
    display:grid;place-items:center;line-height:1;
  }
  .cell-btn:hover{border-color:var(--orange);color:var(--orange);}
  .cell-tag{
    position:absolute;bottom:6px;left:6px;
    font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
    background:rgba(15,13,9,0.7);padding:2px 6px;
  }

  /* ===== Step 4: export ===== */
  .export-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0;}
  @media (max-width:720px){.export-grid{grid-template-columns:1fr;}}
  .control-block{border:1px solid var(--border);background:var(--surface);padding:18px 18px 20px;}
  .control-label{
    font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;display:block;
  }
  .swatches{display:flex;gap:8px;flex-wrap:wrap;}
  .swatch{
    width:34px;height:34px;border:2px solid var(--border);cursor:pointer;position:relative;
  }
  .swatch.selected{border-color:var(--orange);box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--orange);}
  input[type=range]{
    width:100%;accent-color:var(--orange);background:transparent;
  }
  .range-val{font-family:var(--font-mono);font-size:11px;color:var(--orange);}
  .format-toggle{display:flex;border:1px solid var(--border);}
  .format-opt{
    flex:1;padding:10px;text-align:center;font-family:var(--font-mono);font-size:12px;
    cursor:pointer;color:var(--text-dim);border-right:1px solid var(--border);
  }
  .format-opt:last-child{border-right:none;}
  .format-opt.selected{background:var(--orange-glow);color:var(--orange);}
  input[type=color]{
    -webkit-appearance:none;width:34px;height:34px;border:2px solid var(--border);background:none;cursor:pointer;padding:0;
  }
  input[type=color]::-webkit-color-swatch{border:none;}

  /* ===== Nav buttons ===== */
  .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:32px;}
  .btn{
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    padding:13px 26px;border:1px solid var(--border);background:transparent;color:var(--text-dim);
    cursor:pointer;transition:all .15s;
  }
  .btn:hover:not(:disabled){border-color:var(--border-bright);color:var(--text);}
  .btn-primary{
    background:var(--orange);border-color:var(--orange);color:#191410;font-weight:700;
  }
  .btn-primary:hover:not(:disabled){background:#FF6E3B;border-color:#FF6E3B;color:#191410;}
  .btn:disabled{opacity:0.3;cursor:not-allowed;}
  .btn-ghost{border-color:transparent;padding-left:0;}
  .btn-ghost:hover:not(:disabled){color:var(--orange);}

  /* download link result */
  .result-block{margin-top:28px;border:1px solid var(--orange);background:var(--orange-glow);padding:20px;display:none;}
  .result-block.show{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .result-text{font-family:var(--font-mono);font-size:12px;color:var(--text);}
  .result-text b{color:var(--orange);}
  .download-link{
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
    padding:12px 24px;background:var(--orange);color:#191410;font-weight:700;text-decoration:none;
  }

  input[type=file]{display:none;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  :focus-visible{outline:2px solid var(--orange);outline-offset:2px;}