:root{
    --paper:#fdf8ef;
    --ink:#161311;
    --accent:#ff5a1f;
    --accent2:#1fb8b0;
    --panel:#1c1917;
    --panel2:#262220;
    --line:#3a332f;
    --mustard:#e7b84b;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background:var(--panel);
    color:var(--paper);
    font-family:'Courier New', ui-monospace, monospace;
    display:flex;
    min-height:100vh;
  }
  .app{ display:flex; width:100%; flex-direction:row; }
  @media (max-width: 880px){ .app{ flex-direction:column; } }

  /* ---------- Sidebar ---------- */
  aside.panel{
    width:340px; flex:0 0 340px;
    background:var(--panel);
    border-right:2px solid var(--line);
    padding:20px 18px 40px;
    overflow-y:auto;
    max-height:100vh;
  }
  @media (max-width: 880px){
    aside.panel{ width:100%; flex:none; max-height:none; border-right:none; border-bottom:2px solid var(--line);}
  }
  .brandRow{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
  .brand{ font-weight:900; font-size:20px; letter-spacing:1px; text-transform:uppercase; margin:0; color:var(--paper); }
  .brand span{color:var(--accent);}
  .sub{ font-size:11px; color:#a89e94; margin-bottom:22px; letter-spacing:0.5px; }
  .section{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px dashed var(--line); }
  .section:last-child{border-bottom:none;}
  .section h3{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent2); margin:0 0 10px; font-weight:900; }
  .microhelp{ font-size:10.5px; color:#8a8078; line-height:1.5; margin:2px 0 10px; }
  label.field{ display:flex; justify-content:space-between; font-size:11px; color:#c9c0b6; margin:10px 0 4px; }
  label.field b{color:var(--paper); font-weight:900;}
  input[type=range]{ width:100%; accent-color:var(--accent); }
  .uploadBtn, .btn{
    display:block; width:100%; padding:10px 12px; background:var(--accent); color:#161311;
    border:none; font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:12px;
    font-family:inherit; cursor:pointer; border-radius:3px; margin-top:6px; text-align:center;
  }
  .uploadBtn:disabled, .btn:disabled{ opacity:0.6; cursor:wait; }
  .btn.secondary{background:var(--panel2); color:var(--paper); border:1px solid var(--line);}
  .btn.small{padding:7px 8px; font-size:10.5px;}
  .btn.toggle.active{background:var(--accent2); color:#0d1a17;}
  .btn:disabled{opacity:0.35; cursor:not-allowed;}
  input[type=file]{display:none;}
  .row2{display:flex; gap:8px;}
  .row2 > *{flex:1;}
  .row3{display:flex; gap:6px;}
  .row3 > *{flex:1;}

  .palette-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .swatch{ height:38px; border-radius:4px; cursor:pointer; border:2px solid transparent; }
  .swatch.active{border-color:var(--paper);}

  .preset-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:8px;}
  .presetBtn{
    background:var(--panel2); border:1px solid var(--line); color:var(--paper);
    font-family:inherit; font-size:10.5px; padding:7px 4px; border-radius:3px; cursor:pointer;
    text-align:center;
  }
  .presetBtn.active{border-color:var(--accent); color:var(--accent);}
  .customSizeRow{display:flex; gap:6px; align-items:center; margin-top:8px;}
  .customSizeRow input[type=number]{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--paper);
    font-family:inherit; font-size:12px; padding:6px; border-radius:3px;
  }

  select{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--paper);
    font-family:inherit; font-size:12px; padding:8px; border-radius:3px; margin:6px 0;
  }
  textarea, input[type=text]{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--paper);
    font-family:inherit; font-size:13px; padding:8px; border-radius:3px; resize:none;
  }
  input[type=number]{
    background:var(--panel2); border:1px solid var(--line); color:var(--paper);
    font-family:inherit; font-size:12px; padding:8px; border-radius:3px;
  }
  .checkRow{ display:flex; align-items:center; gap:7px; font-size:11px; color:#c9c0b6; margin:8px 0; }
  .colorpicks{display:flex; gap:6px; margin:8px 0; flex-wrap:wrap;}
  .colorpick{ width:28px;height:28px;border-radius:4px;cursor:pointer;border:2px solid transparent; position:relative; }
  .colorpick.active{border-color:var(--accent2);}
  .swatch{ position:relative; }
  .swatch-del, .colorpick-del{
    position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
    background:var(--panel); color:var(--paper); border:1px solid var(--line);
    font-size:10px; line-height:14px; text-align:center; cursor:pointer; display:none;
  }
  .swatch:hover .swatch-del, .colorpick:hover .colorpick-del{ display:block; }
  .swatch-add, .colorpick-add{
    display:flex; align-items:center; justify-content:center;
    border:2px dashed var(--line); border-radius:4px; cursor:pointer;
    color:var(--paper); font-size:16px; background:var(--panel2);
  }
  .swatch-add{ height:38px; }
  .colorpick-add{ width:28px; height:28px; }
  .swatch-add:hover, .colorpick-add:hover{ border-color:var(--accent2); color:var(--accent2); }
  .custom-palette-form{
    display:none; gap:6px; margin:8px 0; align-items:center; flex-wrap:wrap;
  }
  .custom-palette-form.open{ display:flex; }
  .custom-palette-form input[type=color]{
    width:32px; height:32px; border:1px solid var(--line); border-radius:3px; background:var(--panel2); padding:2px; cursor:pointer;
  }
  .custom-palette-form .microhelp{ width:100%; margin:2px 0 0; }
  .custom-palette-preview{
    width:32px; height:32px; border-radius:4px; border:1px solid var(--line); flex:0 0 auto;
  }
  .swatch-edit{
    position:absolute; top:-6px; left:-6px; width:16px; height:16px; border-radius:50%;
    background:var(--panel); color:var(--paper); border:1px solid var(--line);
    font-size:9px; line-height:14px; text-align:center; cursor:pointer; display:none;
  }
  .swatch:hover .swatch-edit{ display:block; }
  .richToolbar{ display:flex; gap:6px; align-items:center; margin:6px 0; }
  .fmtBtn{
    width:32px; height:32px; border-radius:4px; cursor:pointer;
    background:var(--panel2); color:var(--paper); border:1px solid var(--line);
    font-family:'Courier New', monospace; font-size:14px;
  }
  .fmtBtn:hover{ border-color:var(--accent2); color:var(--accent2); }
  #fmtColorInput{
    width:32px; height:32px; border:1px solid var(--line); border-radius:4px; background:var(--panel2); padding:2px; cursor:pointer;
  }

  .stickerList{max-height:150px; overflow-y:auto; margin-top:8px;}
  .stickerRow{
    display:flex; align-items:center; gap:6px; font-size:11px; padding:5px 6px; margin-bottom:4px;
    background:var(--panel2); border-radius:3px; cursor:pointer; border:1px solid transparent;
  }
  .stickerRow.selected{border-color:var(--accent);}
  .stickerRow span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .stickerRow button{ background:none;border:none;color:#d9534f;cursor:pointer;font-weight:900;font-family:inherit; }

  /* ---------- Sheet tabs (folhas / carrossel) ---------- */
  .sheetTabsWrap{
    display:flex; gap:0; max-width:min(100%, 82vh); overflow-x:auto; padding:8px 4px 2px;
    align-items:flex-start;
  }
  .sheetTab{
    position:relative; display:flex; flex-direction:column; align-items:center; cursor:pointer;
    border:2px solid var(--line); border-radius:5px; padding:3px; flex:none; background:var(--panel2);
    margin-right:8px;
  }
  .sheetTab.active{ border-color:var(--accent); }
  .sheetTab.linked{ border-style:dashed; }
  .sheetTab canvas{ display:block; border-radius:2px; }
  .sheetTab.chainNext{ margin-right:0; border-right-style:solid; border-top-right-radius:0; border-bottom-right-radius:0; }
  .sheetTab.chainNext canvas{ border-top-right-radius:0; border-bottom-right-radius:0; }
  .sheetTab.chainPrev{ border-left-style:solid; border-top-left-radius:0; border-bottom-left-radius:0; padding-left:2px; }
  .sheetTab.chainPrev canvas{ border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
  .sheetTab span{ font-size:9px; color:#c9c0b6; margin-top:3px; letter-spacing:0.5px; }
  .sheetTabDel{
    position:absolute; top:-7px; right:-7px; width:16px;height:16px; border-radius:50%;
    background:#d9534f; color:#fff; border:none; font-size:9px; line-height:1; cursor:pointer; padding:0;
  }
  .sheetTabAdd{
    flex:none; width:48px; align-self:center; display:flex; align-items:center; justify-content:center;
    background:var(--panel2); border:1px dashed var(--line); color:var(--paper); font-size:20px;
    border-radius:5px; cursor:pointer; height:48px;
  }

  /* ---------- Stage ---------- */
  main.stage{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 24px;
    background: repeating-linear-gradient(45deg, #262220 0px, #262220 2px, #1c1917 2px, #1c1917 14px);
    min-height:100vh; position:relative; overflow:auto;
  }
  #canvasWrap{ box-shadow:0 20px 60px rgba(0,0,0,0.55); line-height:0; position:relative; }
  #finalCanvas{
    max-width: min(100%, 78vh);
    max-height: calc(100vh - 140px);
    width:auto; height:auto;
    display:block; cursor:grab;
    touch-action:none;
  }
  #finalCanvas.dragging{cursor:grabbing;}
  #finalCanvas.drawModeOn{cursor:crosshair;}
  #finalCanvas.drawModeOn.dragging{cursor:crosshair;}
  .hint{
    font-size:11px; color:#7d746a; letter-spacing:0.5px; text-align:center; max-width:90%;
  }
  .empty-state{
    position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center; color:#7d746a; font-size:12px; letter-spacing:0.5px; pointer-events:none;
  }

  /* ---------- Modo mural (folhas lado a lado, rolagem contínua) ---------- */
  #muralStage{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .muralStripWrap{
    width:100%; max-width:min(94vw, 1400px); overflow-x:auto; overflow-y:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.55); background:#000;
  }
  .muralStrip{ display:flex; align-items:flex-start; width:max-content; position:relative; cursor:grab; touch-action:pan-y; user-select:none; }
  .muralStrip.dragging{ cursor:grabbing; }
  .muralTile{ 
    position:relative; 
    flex:none; 
    line-height:0; 
    border-right: 1.5px dashed rgba(255, 90, 31, 0.6); /* Linha pontilhada visível entre as folhas */
    box-sizing: content-box;
  }
  .muralTile:last-of-type {
    border-right: none; /* Remove a linha pontilhada da última folha */
  }
  .muralTile canvas{ display:block; }
  .muralTile .muralTileLabel{
    position:absolute; bottom:6px; left:6px; font-size:10px; color:#fdf8ef; background:rgba(0,0,0,0.55);
    padding:2px 6px; border-radius:3px; letter-spacing:0.5px; line-height:normal; pointer-events:none;
  }
  .muralTile.inMuralGroup{ outline:3px solid var(--accent2); outline-offset:-3px; }
  .muralTile.muralGroupStart{ box-shadow: inset 4px 0 0 var(--accent); }
  .muralTile.muralGroupEnd{ box-shadow: inset -4px 0 0 var(--accent); }
  .muralAddTile{
    flex:none; display:flex; align-items:center; justify-content:center; background:var(--panel2);
    border-left:2px dashed var(--line); color:var(--paper); font-size:26px; cursor:pointer;
  }
  .muralControls{ display:flex; gap:6px; margin-top:10px; }
  .muralControls > *{flex:1;}