:root{
    --bg: #0f1115;
    --panel: #171a21;
    --panel2: #1f232c;
    --accent: #6c5ce7;
    --accent2: #00d2a0;
    --text: #e8e9ed;
    --muted: #8a8f9c;
    --border: #2a2e38;
    --danger:#ff5d73;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Segoe UI', Roboto, Arial, sans-serif;
    background:linear-gradient(160deg,#0f1115,#171a24);
    color:var(--text);
    min-height:100vh;
  }
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    padding:14px 28px;
    border-bottom:1px solid var(--border);
    background:rgba(23,26,33,.85);
    backdrop-filter:blur(10px);
    position:sticky;
    top:0;
    z-index:40;
  }
  .brand h1{margin:0;font-size:18px;line-height:1.3;}
  .brand p{margin:2px 0 0;color:var(--muted);font-size:12px;}

  .topbar-controls{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .quality-toggle{
    display:flex;
    gap:4px;
    background:var(--panel2);
    padding:4px;
    border-radius:10px;
    border:1px solid var(--border);
  }
  .quality-toggle button{
    padding:6px 12px;
    font-size:12.5px;
    background:transparent;
    border-radius:7px;
  }
  .quality-toggle button.active{
    background:var(--accent);
    color:#fff;
    outline:none;
  }
  .topbar-divider{
    width:1px;
    align-self:stretch;
    background:var(--border);
  }
  .topbar-actions{display:flex;gap:6px;}
  .topbar-actions button{
    width:36px;height:36px;
    padding:0;
    font-size:16px;
    display:flex;align-items:center;justify-content:center;
    border-radius:9px;
    background:var(--panel2);
    border:1px solid var(--border);
  }
  .topbar-actions button:hover:not(:disabled){background:#2a2e3a;}

  @media (max-width: 720px){
    header{justify-content:center;text-align:center;}
    .brand{text-align:center;width:100%;}
    .topbar-controls{width:100%;justify-content:center;}
  }

  .layout{
    display:flex;
    gap:20px;
    max-width:1300px;
    margin:0 auto;
    padding:24px;
    flex-wrap:wrap;
  }
  .stage-col{
    flex:1 1 620px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    min-width:320px;
  }
  .sidebar{
    flex:0 0 300px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px;
    height:fit-content;
    display:flex;
    flex-direction:column;
    gap:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .sidebar h3{
    margin:0 0 8px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    cursor:pointer;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .sidebar h3:hover{color:var(--text);}
  .sidebar h3::after{
    content:'▾';
    font-size:10px;
    color:var(--muted);
    transition:transform .15s ease;
    flex-shrink:0;
  }
  .section.collapsed h3::after{transform:rotate(-90deg);}
  .section.collapsed .section-body{display:none;}
  .section-body{
    animation:section-open .12s ease;
  }
  @keyframes section-open{
    from{opacity:0;transform:translateY(-4px);}
    to{opacity:1;transform:translateY(0);}
  }
  .section{
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
  }
  .section:last-child{border-bottom:none;padding-bottom:0;}

  /* Stage = single drop target area, shows either the dropzone hint OR the canvas */
  #stage{
    position:relative;
    width:100%;
    max-width:640px;
    aspect-ratio:16/10;
    border:2px dashed var(--border);
    border-radius:16px;
    background:var(--panel);
    overflow:hidden;
    transition:.15s;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  #stage.has-image{
    border-style:solid;
    aspect-ratio:auto;
    background:
      linear-gradient(45deg,#2a2e38 25%,transparent 25%) 0 0/20px 20px,
      linear-gradient(-45deg,#2a2e38 25%,transparent 25%) 0 0/20px 20px,
      linear-gradient(45deg,transparent 75%,#2a2e38 75%) 0 0/20px 20px,
      linear-gradient(-45deg,transparent 75%,#2a2e38 75%) 0 0/20px 20px;
    background-color:#15171d;
  }
  #stage.drag{
    border-color:var(--accent);
    background-color:#1c1830;
  }
  #stage.has-image.restore-active{
    background-image:none;
    background-color:#101216;
  }
  #dropHint{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    color:var(--muted);
    cursor:pointer;
    text-align:center;
    padding:20px;
  }
  #dropHint svg{opacity:.7;width:48px;height:48px;}
  #dropHint b{color:var(--text);}
  #fileInput{display:none;}

  #mainCanvas{
    display:none;
    width:100%;
    height:auto;
    touch-action:none;
    cursor:none;
  }
  #brushCursor{
    position:absolute;
    top:0;left:0;
    border:2px solid #fff;
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    display:none;
    z-index:5;
  }

  .status{
    font-size:13px;
    color:var(--muted);
    min-height:18px;
  }

  button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    border-radius:9px;
    padding:9px 14px;
    font-size:13px;
    background:var(--panel2);
    color:var(--text);
    transition:.15s;
  }
  button:hover{filter:brightness(1.15);}
  button.primary{background:var(--accent);color:#fff;}
  button.success{background:var(--accent2);color:#04241c;font-weight:600;}
  button:disabled{opacity:.4;cursor:not-allowed;}

  .row{display:flex;gap:8px;flex-wrap:wrap;}
  .row.tools button{flex:1;}
  .toolbtn.active{outline:2px solid var(--accent);background:#2a2450;}

  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .field-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .field-name{
    font-size:12px;
    color:var(--muted);
  }
  .field-num-wrap{
    display:flex;
    align-items:center;
    gap:4px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:7px;
    padding:3px 8px;
    transition:border-color .15s;
  }
  .field-num-wrap:focus-within{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(108,92,231,.25);
  }
  .field-num{
    width:42px;
    background:none;
    border:none;
    color:var(--text);
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    text-align:right;
    padding:0;
    -moz-appearance:textfield;
  }
  .field-num:focus{outline:none;}
  .field-num::-webkit-outer-spin-button,
  .field-num::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .field-unit{
    font-size:11px;
    color:var(--muted);
  }
  input[type=range]{accent-color:var(--accent);}
  input[type=color]{
    width:100%;
    height:34px;
    border:1px solid var(--border);
    border-radius:8px;
    background:none;
    padding:0;
  }
  .swatches{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
  .swatch{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--border);cursor:pointer;
  }
  .swatch.active{border-color:#fff;}

  .progress-wrap{
    width:100%;max-width:640px;
    background:var(--panel2);
    border-radius:10px;
    overflow:hidden;
    height:8px;
    display:none;
  }
  .progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:width .2s;
  }

  footer{text-align:center;color:var(--muted);font-size:12px;padding:20px;}
  a{color:var(--accent2);}
  .hint{font-size:11px;color:var(--muted);line-height:1.5;}

  #pageDropOverlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(108,92,231,.18);
    border:4px dashed var(--accent);
    pointer-events:none;
    font-size:26px;
    font-weight:600;
    color:var(--text);
    text-shadow:0 2px 10px rgba(0,0,0,.6);
  }
  #pageDropOverlay.show{display:flex;}

  /* Confirm modal */
  .modal-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;justify-content:center;
    z-index:50;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    max-width:360px;
    text-align:center;
  }
  .modal-box p{color:var(--text);font-size:14px;margin:0 0 16px;}
  .modal-box .row{justify-content:center;}

  /* Select dropdown (output size) */
  select{
    width:100%;
    background:var(--panel2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:9px;
    padding:9px 10px;
    font-family:inherit;
    font-size:13px;
  }

  /* Filmstrip (batch thumbnails) */
  #filmstrip{
    width:100%;
    max-width:640px;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:4px 2px;
  }
  .film-thumb{
    position:relative;
    flex:0 0 64px;
    width:64px;
    height:64px;
    border-radius:9px;
    border:2px solid var(--border);
    background:
      linear-gradient(45deg,#2a2e38 25%,transparent 25%) 0 0/12px 12px,
      linear-gradient(-45deg,#2a2e38 25%,transparent 25%) 0 0/12px 12px,
      linear-gradient(45deg,transparent 75%,#2a2e38 75%) 0 0/12px 12px,
      linear-gradient(-45deg,transparent 75%,#2a2e38 75%) 0 0/12px 12px;
    background-color:#15171d;
    cursor:pointer;
    overflow:hidden;
    flex-shrink:0;
  }
  .film-thumb.active{border-color:var(--accent);}
  .film-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
  .film-thumb .film-status{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    background:rgba(15,17,21,.55);
  }
  .film-thumb .film-remove{
    position:absolute;top:2px;right:2px;
    width:18px;height:18px;
    border-radius:50%;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:11px;
    line-height:18px;
    text-align:center;
    padding:0;
    border:none;
    cursor:pointer;
  }
  .film-add{
    flex:0 0 64px;
    width:64px;height:64px;
    border-radius:9px;
    border:2px dashed var(--border);
    background:var(--panel2);
    color:var(--muted);
    font-size:22px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .film-add:hover{color:var(--text);border-color:var(--accent);}

  /* Shortcuts help modal */
  .shortcuts-table{width:100%;border-collapse:collapse;font-size:13px;}
  .shortcuts-table td{padding:6px 4px;border-bottom:1px solid var(--border);color:var(--text);}
  .shortcuts-table td:first-child{white-space:nowrap;color:var(--muted);width:40%;}
  kbd{
    background:var(--panel2);
    border:1px solid var(--border);
    border-bottom-width:2px;
    border-radius:5px;
    padding:2px 6px;
    font-size:11px;
    font-family:inherit;
  }