:root{
    --bg:#15171b; --panel:#1e2127; --panel2:#262a31; --line:#33383f;
    --text:#e8eaed; --dim:#9aa0a8; --accent:#4da3ff; --accent2:#ffb347;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:var(--bg); color:var(--text);
    font:13px/1.45 "Segoe UI", system-ui, sans-serif;
    display:flex; flex-direction:column; overflow:hidden;
  }
  header{
    display:flex; align-items:center; gap:12px;
    padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  header h1{font-size:15px; font-weight:600;}
  header .tag{color:var(--dim); font-size:11px;}
  main{flex:1; display:flex; min-height:0;}

  /* ---------- sidebar ---------- */
  #sidebar{
    width:320px; flex:0 0 320px; overflow-y:auto;
    background:var(--panel); border-right:1px solid var(--line);
    padding:10px 12px 40px;
  }
  .sec{border-bottom:1px solid var(--line); padding:10px 0;}
  .sec h2{
    font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--dim); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
    cursor:pointer; user-select:none;
  }
  .sec h2:hover{color:var(--text);}
  .sec h2::before{content:'\25BE'; font-size:9px; color:var(--accent);}
  .sec.closed h2::before{content:'\25B8';}
  .sec.closed h2{margin-bottom:0;}
  .sec.closed > :not(h2){display:none !important;}
  .row{display:flex; align-items:center; gap:8px; margin:6px 0;}
  .row label{flex:0 0 78px; color:var(--dim);}
  .row .grow{flex:1;}
  select,input[type=number],button{
    background:var(--panel2); color:var(--text);
    border:1px solid var(--line); border-radius:5px;
    padding:5px 7px; font:inherit;
  }
  select{width:100%;}
  input[type=number]{width:68px; text-align:right;}
  input[type=number]::-webkit-outer-spin-button{opacity:1;}
  button{cursor:pointer;}
  button:hover{border-color:var(--accent);}
  button.primary{background:var(--accent); border-color:var(--accent); color:#0b1420; font-weight:600;}
  button.primary:hover{filter:brightness(1.1);}
  button.warn{border-color:#7a4a2b;}
  button:disabled{opacity:.4; cursor:default;}
  .btnrow{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
  .btnrow button{flex:1;}

  /* slider + number pairs */
  .sliderRow{display:grid; grid-template-columns:70px 1fr 74px; align-items:center; gap:8px; margin:7px 0;}
  .sliderRow label{color:var(--dim);}
  input[type=range]{
    -webkit-appearance:none; width:100%; height:4px; border-radius:2px;
    background:var(--line); outline:none; cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
    background:var(--accent); border:2px solid #0b1420;
  }
  input[type=range]::-moz-range-thumb{
    width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #0b1420;
  }

  /* text tool */
  textarea{
    background:var(--panel2); color:var(--text);
    border:1px solid var(--line); border-radius:5px;
    padding:5px 7px; font:inherit; width:100%; resize:vertical; margin:6px 0;
  }
  .textItem{
    display:flex; align-items:center; gap:6px; padding:4px 4px 4px 8px; margin:4px 0;
    border:1px solid var(--line); border-radius:5px; cursor:pointer;
    background:var(--panel2);
  }
  .textItem.sel{border-color:var(--accent);}
  .textItem span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .textItem button{flex:0 0 auto; padding:0 7px; line-height:1.5;}
  button.tstyle{flex:0 0 34px;}
  button.tstyle.on{border-color:var(--accent); background:rgba(77,163,255,.18);}

  .check{display:flex; align-items:center; gap:8px; margin:7px 0; cursor:pointer;}
  .check input{accent-color:var(--accent); width:15px; height:15px;}
  .hint{color:var(--dim); font-size:11px; margin-top:6px;}
  .hint b{color:var(--text);}

  /* ---------- stage ---------- */
  #stageWrap{flex:1; display:flex; flex-direction:column; min-width:0; position:relative;}
  #toolbar{
    display:flex; align-items:center; gap:10px; padding:6px 12px;
    background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto;
  }
  #toolbar .spacer{flex:1;}
  #info{color:var(--dim); font-size:12px; white-space:nowrap;}
  #stage{
    flex:1; overflow:auto; position:relative;
    background:
      linear-gradient(45deg,#22252b 25%,transparent 25%,transparent 75%,#22252b 75%),
      linear-gradient(45deg,#22252b 25%,transparent 25%,transparent 75%,#22252b 75%);
    background-size:24px 24px; background-position:0 0,12px 12px;
    background-color:#1a1d22;
    display:flex;
  }
  #boardWrap, #cropCanvas, #dropMsg{margin:auto;}
  #minimap{
    position:absolute; right:16px; bottom:16px; z-index:5;
    border:1px solid var(--line); background:rgba(20,22,26,.88);
    border-radius:6px; padding:4px; display:none; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
  }
  #minimap canvas{display:block; border-radius:3px;}
  #minimapBox{
    position:absolute; border:1.5px solid var(--accent);
    background:rgba(77,163,255,.18); pointer-events:none; border-radius:2px;
  }
  #stage.dragover{outline:3px dashed var(--accent); outline-offset:-6px;}
  #previewCanvas.pixelated{ image-rendering:pixelated; }
  #cropCanvas, #boardWrap{ box-shadow:0 4px 24px rgba(0,0,0,.5); }
  #boardWrap{ position:relative; flex:none; }
  #boardWrap.clip{ overflow:hidden; }
  #boardBg{ position:absolute; inset:0; width:100%; height:100%; display:none; }
  #previewCanvas{ position:absolute; left:0; top:0; display:block; }
  #boardWrap.boardOn #previewCanvas{ cursor:move; }
  #boardWrap::after{
    content:''; position:absolute; inset:0; z-index:3;
    border:3px solid #ffd042; pointer-events:none; display:none;
  }
  #boardWrap.guides::after{ display:block; }
  #previewCanvas.dashed{ outline:2px dashed rgba(255,208,66,.7); outline-offset:-1px; }
  #cropCanvas{cursor:move;}
  #dropMsg{
    color:var(--dim); text-align:center; padding:40px; font-size:15px;
    pointer-events:none;
  }
  #dropMsg b{color:var(--text);}
  #busy{
    position:absolute; top:10px; right:14px; color:var(--accent2);
    font-size:12px; display:none;
  }
  #warn{color:#ff7a6e; font-size:12px; display:none; padding:2px 12px;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:#3a4048;border-radius:5px;}
  ::-webkit-scrollbar-track{background:transparent;}