:root{
    --paper:#f1efe9;
    --ink:#171512;
    --grid-line:#d8d4c8;
    --accent:#ff5a1f;
    --accent-dim:#ffd9c4;
    --panel:#ffffff;
    --mono: "JetBrains Mono","SFMono-Regular",Consolas,monospace;
    --sans: "Inter","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/24px 24px,
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/24px 24px,
      var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    min-height:100vh;
  }
  header{
    padding:20px 28px 12px;
    border-bottom:2px solid var(--ink);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
  }
  header h1{
    font-family:var(--mono);
    font-size:18px;
    letter-spacing:0.5px;
    margin:0;
    text-transform:uppercase;
  }
  header h1 span{color:var(--accent);}
  header .sub{
    font-family:var(--mono);
    font-size:11px;
    color:#6b675f;
  }
  .layout{
    display:grid;
    grid-template-columns:280px 1fr 300px;
    gap:1px;
    background:var(--ink);
    min-height:calc(100vh - 64px);
  }
  .panel{
    background:var(--panel);
    padding:16px;
    overflow:auto;
  }
  .panel h2{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#6b675f;
    margin:0 0 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .lib-count{
    background:var(--accent);
    color:#fff;
    border-radius:10px;
    padding:1px 7px;
    font-size:10px;
  }
  #search{
    width:100%;
    padding:7px 9px;
    border:1.5px solid var(--ink);
    background:transparent;
    font-family:var(--mono);
    font-size:12px;
    margin-bottom:10px;
  }
  #search:focus{outline:none;border-color:var(--accent);}
  .thumb-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .thumb{
    aspect-ratio:1;
    border:1.5px solid var(--ink);
    background:#fff;
    cursor:pointer;
    position:relative;
    image-rendering:pixelated;
  }
  .thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
  .thumb canvas{width:100%;height:100%;image-rendering:pixelated;display:block;}
  .thumb .lbl{
    position:absolute;bottom:0;left:0;right:0;
    font-family:var(--mono);
    font-size:7px;
    text-align:center;
    background:rgba(255,255,255,0.85);
    color:var(--ink);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    padding:1px 2px;
    opacity:0;
    transition:opacity .1s;
  }
  .thumb:hover .lbl{opacity:1;}

  .center{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:32px 16px;
    gap:18px;
  }
  #editor-name{
    font-family:var(--mono);
    font-size:13px;
    background:var(--ink);
    color:var(--paper);
    padding:5px 14px;
    border-radius:3px;
    letter-spacing:0.5px;
  }
  #gridCanvas{
    border:2px solid var(--ink);
    cursor:crosshair;
    box-shadow:6px 6px 0 var(--accent-dim);
    image-rendering:pixelated;
  }
  .hint{
    font-family:var(--mono);
    font-size:10.5px;
    color:#8a857a;
  }
  .btnrow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    max-width:460px;
  }
  button{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border:1.5px solid var(--ink);
    background:#fff;
    color:var(--ink);
    padding:8px 12px;
    cursor:pointer;
    transition:all .08s;
  }
  button:hover{background:var(--ink);color:var(--paper);}
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  button.primary:hover{background:#e04d15;}
  button:disabled{opacity:0.35;cursor:not-allowed;}
  button:disabled:hover{background:#fff;color:var(--ink);}

  .shiftpad{
    display:grid;
    grid-template-columns:repeat(3,34px);
    grid-template-rows:repeat(3,34px);
    gap:4px;
    place-items:center;
  }
  .shiftpad button{padding:0;width:34px;height:34px;}

  .right .group{
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px dashed var(--grid-line);
  }
  .right .group:last-child{border-bottom:none;}
  label{
    display:block;
    font-family:var(--mono);
    font-size:10px;
    text-transform:uppercase;
    color:#8a857a;
    margin-bottom:5px;
  }
  input[type=text]{
    width:100%;
    padding:7px 9px;
    border:1.5px solid var(--ink);
    font-family:var(--mono);
    font-size:12px;
    background:transparent;
  }
  input[type=text]:focus{outline:none;border-color:var(--accent);}
  .full-btn{width:100%;margin-top:8px;}
  #toast{
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%) translateY(12px);
    background:var(--ink);
    color:var(--paper);
    font-family:var(--mono);
    font-size:12px;
    padding:9px 18px;
    border-radius:4px;
    opacity:0;
    pointer-events:none;
    transition:all .18s;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .stat{
    font-family:var(--mono);
    font-size:11px;
    color:#6b675f;
    margin-top:4px;
  }
  .scale-row{display:flex; gap:6px; align-items:center;}
  .scale-row button{flex:1;}
  #tilePreviewWrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  #tileCanvas{
    border:2px solid var(--ink);
    box-shadow:6px 6px 0 var(--accent-dim);
    image-rendering:pixelated;
  }