.hero { text-align:center; padding:70px 20px 50px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 0%,rgba(107,33,212,.15),transparent 60%); }

    /* ── MAIN ── */
    .main { max-width:1100px; margin:0 auto; padding:48px 24px 100px; }

    /* ── OPTIONS BAR ── */
    .options-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; align-items:flex-end; }
    .opt-field { display:flex; flex-direction:column; gap:8px; }
    .margin-note { font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.2); margin-left:4px; }

    /* ── DROP ZONE ── */
    .drop-zone {
      border:2px dashed rgba(107,33,212,.45); padding:60px 40px;
      text-align:center; cursor:pointer; transition:border-color .3s, background .3s;
      margin-bottom:32px; position:relative; overflow:hidden;
    }
    .drop-zone:hover, .drop-zone.drag-over { border-color:var(--purple-light); background:rgba(107,33,212,.06); }
    .drop-zone::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(107,33,212,.04),transparent 70%); pointer-events:none; }
    .drop-icon { font-size:52px; display:block; margin-bottom:16px; animation:fl 3s ease-in-out infinite; }
    @keyframes fl{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    .drop-txt { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:4px; color:rgba(255,255,255,.7); margin-bottom:8px; }
    .drop-sub { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.25); }
    #fileInput { display:none; }

    /* ── IMAGE LIST ── */
    .list-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
    .list-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; color:var(--white); }
    .list-title span { color:var(--purple-light); }
    .list-count { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); }
    .btn-clear { margin-left:auto; padding:8px 16px; background:transparent; border:1px solid rgba(255,100,100,.25); color:rgba(255,100,100,.5); font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; cursor:pointer; transition:all .3s; }
    .btn-clear:hover { border-color:rgba(255,100,100,.6); color:rgba(255,100,100,.9); }

    .img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:32px; }
    .img-card {
      position:relative; background:rgba(255,255,255,.02); border:1px solid rgba(107,33,212,.2);
      overflow:hidden; transition:border-color .3s, transform .2s;
      cursor:grab;
    }
    .img-card:active { cursor:grabbing; }
    .img-card.dragging { opacity:.4; border-color:var(--purple-light); }
    .img-card.drag-target { border-color:var(--gold); background:rgba(255,209,102,.05); }
    .img-card:hover { border-color:rgba(107,33,212,.5); transform:translateY(-2px); }
    .img-thumb { width:100%; aspect-ratio:3/4; object-fit:contain; background:#0a0612; display:block; }
    .img-info { padding:8px 10px; }
    .img-name { font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
    .img-size { font-size:8px; letter-spacing:1px; color:rgba(255,255,255,.2); }
    .img-num { position:absolute; top:8px; left:8px; background:var(--purple); color:#fff; font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:2px; padding:2px 8px; }
    .img-del { position:absolute; top:8px; right:8px; background:rgba(255,50,50,.7); border:none; color:#fff; font-size:13px; width:24px; height:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
    .img-card:hover .img-del { opacity:1; }
    .img-move { position:absolute; bottom:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .2s; }
    .img-card:hover .img-move { opacity:1; }
    .move-btn { background:rgba(107,33,212,.6); border:none; color:#fff; font-size:11px; width:22px; height:22px; cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; }
    .move-btn:hover { background:var(--purple-light); }

    /* ── ACTION ROW ── */
    .action-row { display:flex; gap:12px; margin-bottom:40px; }
    .btn-pdf {
      flex:1; padding:20px; background:linear-gradient(135deg,var(--purple),var(--purple-light));
      border:none; color:#fff; cursor:pointer; font-family:'Bebas Neue',sans-serif;
      font-size:28px; letter-spacing:4px; position:relative; overflow:hidden;
      transition:transform .3s, box-shadow .3s;
    }
    .btn-pdf::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:translateX(-100%); transition:transform .5s; }
    .btn-pdf:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(107,33,212,.5); }
    .btn-pdf:hover::before { transform:translateX(100%); }
    .btn-pdf:active { transform:scale(.97); }
    .btn-pdf:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
    .btn-add {
      padding:20px 28px; background:rgba(255,255,255,.04); border:1px solid rgba(107,33,212,.3);
      color:rgba(155,95,227,.8); cursor:pointer; font-family:'Bebas Neue',sans-serif;
      font-size:24px; letter-spacing:2px; transition:border-color .3s, color .3s, background .3s;
    }
    .btn-add:hover { border-color:var(--purple-light); color:#fff; background:rgba(107,33,212,.12); }

    /* ── PROGRESS ── */
    .progress-wrap { display:none; margin-bottom:32px; }
    .progress-wrap.show { display:block; }
    .progress-bar-bg { height:4px; background:rgba(107,33,212,.15); overflow:hidden; }
    .progress-bar { height:100%; background:linear-gradient(90deg,var(--purple),var(--purple-light)); width:0%; transition:width .3s; }
    .progress-txt { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); margin-top:8px; animation:eb 1s ease-in-out infinite; }

    /* ── YA BOX ── */

    /* ── EMPTY STATE ── */
    .empty-hint { display:none; }
    .empty-hint.show { display:block; text-align:center; padding:40px; color:rgba(255,255,255,.15); font-size:10px; letter-spacing:3px; }

    @media(max-width:600px){ .img-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));} .btn-pdf{font-size:20px;} }