/* ============ Material 3 inspired tokens ============ */
:root{
  --md-primary: #6750A4;
  --md-primary-container: #EADDFF;
  --md-on-primary: #ffffff;
  --md-on-primary-container: #21005D;
  --md-secondary: #625B71;
  --md-surface: #FFFBFE;
  --md-surface-dim: #F3EDF7;
  --md-surface-container: #F3EDF7;
  --md-surface-container-high: #ECE6F0;
  --md-surface-variant: #E7E0EC;
  --md-on-surface: #1C1B1F;
  --md-on-surface-variant: #49454F;
  --md-outline: #79747E;
  --md-outline-variant: #CAC4D0;
  --md-error: #B3261E;
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --topbar-h: 64px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; margin:0; overscroll-behavior:none; }
body{
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--md-on-surface);
  background: var(--md-surface-dim);
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden;
}

button{ font-family:inherit; }
input, select{ font-family:inherit; }

/* ============ Top App Bar ============ */
.topbar{
  height: var(--topbar-h);
  flex: 0 0 auto;
  background: var(--md-surface);
  box-shadow: var(--elev-1);
  display:flex; align-items:center; gap:4px;
  padding: 0 8px;
  z-index: 20;
  position: relative;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-size:1.15rem; font-weight:500; color:var(--md-on-surface);
  margin-right:auto; margin-left:4px;
  white-space:nowrap; overflow:hidden;
}
.brand-mark{ width:24px; height:24px; fill:var(--md-primary); flex:0 0 auto; }
.topbar-actions{ display:flex; align-items:center; gap:2px; }

.icon-btn{
  width:44px; height:44px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--md-on-surface-variant);
  position:relative; flex:0 0 auto;
  transition: background .15s ease;
}
.icon-btn svg{ width:22px; height:22px; fill:currentColor; }
.icon-btn:hover{ background: rgba(28,27,31,.08); }
.icon-btn:active{ background: rgba(28,27,31,.14); }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.icon-btn:disabled:hover{ background:transparent; }
.icon-btn.small{ width:36px; height:36px; }
.icon-btn.small svg{ width:18px; height:18px; }
.icon-btn.active{ color: var(--md-primary); background: var(--md-primary-container); }

/* ============ App body layout ============ */
.app-body{
  flex:1 1 auto;
  display:flex;
  min-height:0;
  position:relative;
}

.panel{
  background: var(--md-surface);
  display:flex; flex-direction:column;
  flex:0 0 auto;
  z-index: 15;
  transition: transform .25s cubic-bezier(.2,0,0,1), width .25s cubic-bezier(.2,0,0,1);
}
.layers-panel{
  width: 280px;
  border-right: 1px solid var(--md-outline-variant);
}
.pens-panel{
  width: 300px;
  border-left: 1px solid var(--md-outline-variant);
  padding: 4px 16px 20px;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px 6px;
}
.panel-header h2{ font-size:1rem; font-weight:600; margin:0; color:var(--md-on-surface); }
.panel-header-actions{ display:flex; align-items:center; gap:2px; }

/* ============ Center column: stage + page strip ============ */
.center-col{
  flex:1 1 auto;
  min-width:0;
  display:flex; flex-direction:column;
  min-height:0;
}

.stage{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.stage-scroll{
  position:absolute;
  inset:0;
  background:
    linear-gradient(45deg, #e9e2f0 25%, transparent 25%),
    linear-gradient(-45deg, #e9e2f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9e2f0 75%),
    linear-gradient(-45deg, transparent 75%, #e9e2f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #fbf8ff;
  overflow:auto;
  padding: 24px;
  touch-action: none;
  text-align:center;
}
.stage.pan-ready{ cursor: grab; }
.stage.pan-active, .stage.pan-active *{ cursor: grabbing !important; }
.canvas-wrap{
  box-shadow: var(--elev-3);
  background:#fff;
  border-radius: 2px;
  line-height:0;
  display:inline-block;
  position:relative;
}
#displayCanvas{
  display:block;
  touch-action:none;
  border-radius:2px;
}

/* Image import / transform overlay */
.image-overlay{
  position:absolute;
  display:none;
  border: 2px dashed var(--md-primary);
  box-sizing:border-box;
  cursor:move;
  touch-action:none;
}
.image-overlay.show{ display:block; }
.img-handle{
  position:absolute;
  width:18px; height:18px; margin:-9px;
  border-radius:50%;
  background: var(--md-primary);
  border:2.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  touch-action:none;
}
.img-handle.nw{ left:0; top:0; cursor:nwse-resize; }
.img-handle.ne{ left:100%; top:0; cursor:nesw-resize; }
.img-handle.sw{ left:0; top:100%; cursor:nesw-resize; }
.img-handle.se{ left:100%; top:100%; cursor:nwse-resize; }

.image-toolbar{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background: var(--md-surface); border-radius: 24px; box-shadow: var(--elev-2);
  display:none; align-items:center; gap:2px; padding:4px; z-index:13;
}
.image-toolbar.show{ display:flex; }
.image-toolbar button{
  width:36px; height:36px; border:none; background:transparent; cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--md-on-surface-variant);
}
.image-toolbar button svg{ width:20px; height:20px; fill:currentColor; }
.image-toolbar button:hover{ background: rgba(28,27,31,.08); }
.image-toolbar button.primary{ background: var(--md-primary); color: var(--md-on-primary); }
.image-toolbar button.primary:hover{ background: var(--md-primary); opacity:.9; }
.image-toolbar .toolbar-sep{ width:1px; height:20px; background: var(--md-outline-variant); margin:0 2px; }

/* Floating bar shown only in canvas-fullscreen (focus) mode */
.fullscreen-bar{
  position:absolute; top:16px; left:16px;
  background: var(--md-surface); border-radius: 24px; box-shadow: var(--elev-2);
  display:none; align-items:center; gap:2px; padding:4px; z-index:14;
}
body.canvas-fullscreen .fullscreen-bar{ display:flex; }
.fullscreen-bar button{
  width:36px; height:36px; border:none; background:transparent; cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--md-on-surface-variant);
}
.fullscreen-bar button svg{ width:20px; height:20px; fill:currentColor; }
.fullscreen-bar button:hover{ background: rgba(28,27,31,.08); }
.fullscreen-bar button:disabled{ opacity:.35; }
.fullscreen-bar .toolbar-sep{ width:1px; height:20px; background: var(--md-outline-variant); margin:0 2px; }

/* Canvas-focus mode: hide the top bar, turn both side panels into
   overlay drawers regardless of viewport width, let the canvas take
   the full window. */
body.canvas-fullscreen .topbar{ display:none; }
body.canvas-fullscreen .page-strip{ display:none; }
body.canvas-fullscreen .layers-panel,
body.canvas-fullscreen .pens-panel{
  position:absolute; top:0; bottom:0; z-index:15; box-shadow: var(--elev-3);
}
body.canvas-fullscreen .layers-panel{ left:0; transform: translateX(-100%); width:min(280px,86vw); }
body.canvas-fullscreen .layers-panel.open{ transform: translateX(0); }
body.canvas-fullscreen .pens-panel{ right:0; transform: translateX(100%); width:min(300px,86vw); }
body.canvas-fullscreen .pens-panel.open{ transform: translateX(0); }
body.canvas-fullscreen .fab{ display:flex; }

/* Zoom bar */
.zoom-bar{
  position:absolute; left:20px; bottom:20px;
  background: var(--md-surface); border-radius: 24px; box-shadow: var(--elev-2);
  display:flex; align-items:center; gap:2px; padding:4px; z-index:12;
}
.zoom-bar button{
  border:none; background:transparent; cursor:pointer; color:var(--md-on-surface-variant);
  border-radius:20px; height:34px; min-width:34px; font-size:1.1rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.zoom-bar button svg{ width:18px; height:18px; fill:currentColor; }
.zoom-bar button:hover{ background: rgba(28,27,31,.08); }
.zoom-bar .zoom-pct{ min-width:52px; font-size:.78rem; font-weight:600; }

/* ============ Page strip ============ */
.page-strip{
  flex:0 0 auto;
  height: 128px;
  background: var(--md-surface);
  border-top: 1px solid var(--md-outline-variant);
  display:flex; align-items:center; gap:10px;
  padding: 0 12px;
}
.page-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  height:100%;
  flex:1 1 auto;
}
.page-card{
  flex:0 0 auto;
  width:76px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer;
  padding-top:6px;
}
.page-thumb-wrap{
  position:relative;
  width:70px; height:70px;
  border-radius:8px;
  border: 2px solid var(--md-outline-variant);
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-color:#fff;
  overflow:hidden;
}
.page-card.active .page-thumb-wrap{ border-color: var(--md-primary); border-width:2.5px; }
.page-thumb-wrap canvas{ width:100%; height:100%; object-fit:contain; display:block; }
.page-label{ font-size:.68rem; color:var(--md-on-surface-variant); white-space:nowrap; }
.page-card.active .page-label{ color:var(--md-primary); font-weight:600; }

.page-check{
  position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:4px; border:1.5px solid rgba(255,255,255,.9);
  background: rgba(28,27,31,.35);
  display:flex; align-items:center; justify-content:center;
}
.page-check.checked{ background: var(--md-primary); border-color: var(--md-primary); }
.page-check svg{ width:11px; height:11px; fill:#fff; display:none; }
.page-check.checked svg{ display:block; }

.page-del{
  position:absolute; top:3px; right:3px; width:18px; height:18px;
  border-radius:50%; border:none; background: rgba(28,27,31,.55);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.page-del svg{ width:11px; height:11px; fill:#fff; }
.page-del:hover{ background: var(--md-error); }

/* ============ Layers list ============ */
.layer-list{
  list-style:none; margin:0; padding: 4px 8px;
  overflow-y:auto; flex:1 1 auto;
  display:flex; flex-direction:column; gap:6px;
}
.layer-row{
  background: var(--md-surface-container);
  border-radius: var(--radius-m);
  padding: 8px 10px;
  display:flex; flex-direction:column; gap:6px;
  border: 1.5px solid transparent;
  cursor:pointer;
  user-select:none;
}
.layer-row.active{
  border-color: var(--md-primary);
  background: var(--md-primary-container);
}
.layer-row.dragging{ opacity:.4; }
.layer-row input, .layer-row button, .layer-row [contenteditable]{
  -webkit-user-drag: none; user-drag: none;
}

.layer-row-top{ display:flex; align-items:center; gap:8px; }
.layer-row-bottom{ display:flex; align-items:center; gap:4px; }

.drag-handle{
  width:18px; height:28px; cursor:grab;
  display:flex; align-items:center; justify-content:center;
  color: var(--md-outline);
  touch-action:none;
  flex:0 0 auto;
}
.drag-handle svg{ width:16px; height:16px; fill:currentColor; }

.layer-thumb{
  width:40px; height:40px; border-radius:6px;
  border:1px solid var(--md-outline-variant);
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-color:#fff;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
}

.layer-name{
  font-size:.9rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:transparent; border:none; color:inherit;
  flex:1 1 auto; min-width:0;
  padding:2px 4px;
}
.layer-name[contenteditable="true"]{
  background:#fff; border-radius:4px; outline:1.5px solid var(--md-primary);
  white-space:normal;
}
.opacity-row{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.opacity-row input[type=range]{ flex:1 1 auto; height:14px; min-width:0; }
.opacity-row .op-val{ font-size:.68rem; color:var(--md-on-surface-variant); width:30px; flex:0 0 auto; text-align:right; }

.layer-row-top .icon-btn.small,
.layer-row-bottom .icon-btn.small{ flex:0 0 auto; }

.locked .layer-name, .locked .opacity-row{ opacity:.5; pointer-events:none; }

.panel-hint{
  font-size:.72rem; color: var(--md-on-surface-variant);
  padding: 6px 16px 14px; margin:0;
}

/* ============ Pens panel ============ */
.tool-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  padding: 8px 0 16px;
}
.tool-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 12px 6px;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--md-outline-variant);
  background: var(--md-surface);
  cursor:pointer; color: var(--md-on-surface-variant);
  transition: all .15s ease;
}
.tool-chip svg{ width:22px; height:22px; fill:currentColor; }
.tool-chip span{ font-size:.72rem; font-weight:500; }
.tool-chip:hover{ background: var(--md-surface-container-high); }
.tool-chip.active{
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  color: var(--md-on-primary-container);
}
.tool-chip[data-tool="pan"]{ grid-column: 1 / -1; flex-direction: row; justify-content: center; }

.field-row{
  display:flex; align-items:center; gap:8px;
  margin: 10px 0;
  flex-wrap: wrap;
  min-width: 0;
}
.field-row label{ font-size:.82rem; color:var(--md-on-surface-variant); flex:0 0 auto; }
.field-row .label-x{ flex:0 0 auto; }
.field-row input[type=number]{
  width:64px; flex:0 0 auto; padding:6px 8px; border-radius:8px;
  border:1px solid var(--md-outline-variant); background:var(--md-surface);
  font-size:.85rem;
}
.field-row select{
  padding:6px 8px; border-radius:8px; border:1px solid var(--md-outline-variant);
  background:var(--md-surface); font-size:.85rem;
  min-width:0; max-width:100%; flex:1 1 auto;
}
.field-row input[type=range]{ flex:1 1 auto; min-width:60px; }
.field-row input[type=color]{
  width:40px; height:32px; border:1px solid var(--md-outline-variant);
  border-radius:8px; padding:2px; background:var(--md-surface); cursor:pointer; flex:0 0 auto;
}
#presetSelect{ width:100%; flex:1 1 100%; }

.field-col{ display:flex; flex-direction:column; gap:4px; margin:10px 0; min-width:0; }
.field-col label{ font-size:.82rem; color:var(--md-on-surface-variant); }
.field-col select{
  width:100%; min-width:0; box-sizing:border-box;
  padding:8px; border-radius:8px; border:1px solid var(--md-outline-variant);
  background:var(--md-surface); font-size:.85rem;
}
.value-pill{
  font-size:.72rem; background:var(--md-surface-container-high);
  padding:3px 8px; border-radius:20px; color:var(--md-on-surface-variant);
  min-width:38px; text-align:center;
}

.toggle-switch{
  width:40px; height:22px; border-radius:20px; border:none;
  background: var(--md-outline-variant); cursor:pointer; position:relative;
  flex:0 0 auto; padding:0; transition: background .15s ease;
}
.toggle-switch .toggle-knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.toggle-switch.active{ background: var(--md-primary); }
.toggle-switch.active .toggle-knob{ transform: translateX(18px); }

.swatch-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap:6px;
  margin: 2px 0 12px;
}
.swatch{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  border: 1.5px solid var(--md-outline-variant); cursor:pointer;
  padding:0;
}
.swatch.selected{ outline: 2px solid var(--md-primary); outline-offset:2px; }

.size-block{ margin-top:8px; padding-top:8px; border-top:1px solid var(--md-outline-variant); }
.size-slider{ width:100%; }
.size-preview-row{ display:flex; align-items:center; gap:10px; height:60px; }
.size-preview{
  border-radius:50%; background: var(--md-on-surface);
  flex:0 0 auto;
}
.size-preview-label{ font-size:.78rem; color:var(--md-on-surface-variant); }
.unit-note{ font-size:.68rem; color:var(--md-outline); line-height:1.4; margin:8px 0 0; }

input[type=range]{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background: var(--md-outline-variant); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background: var(--md-primary); cursor:pointer; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background: var(--md-primary);
  cursor:pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ============ Modal ============ */
.modal-scrim{
  position:fixed; inset:0; background: rgba(0,0,0,.4);
  display:none; align-items:center; justify-content:center; z-index:100;
  padding:16px;
}
.modal-scrim.show{ display:flex; }
.modal{
  background: var(--md-surface); border-radius: var(--radius-l);
  padding: 24px; width: 100%; max-width: 420px; box-shadow: var(--elev-3);
}
.modal h2{ margin:0 0 6px; font-size:1.25rem; }
.modal-sub{ margin:0 0 16px; font-size:.8rem; color:var(--md-on-surface-variant); }
.ratio-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:16px;
}
.ratio-chip{
  border:1.5px solid var(--md-outline-variant); background: var(--md-surface);
  border-radius: var(--radius-s); padding: 10px 4px; cursor:pointer;
  font-size:.8rem; font-weight:600; color: var(--md-on-surface);
  display:flex; flex-direction:column; gap:2px;
}
.ratio-chip small{ font-weight:400; color: var(--md-on-surface-variant); font-size:.66rem; }
.ratio-chip.selected{ border-color: var(--md-primary); background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ratio-chip:hover{ background: var(--md-surface-container-high); }

.modal .field-row select{ margin-left:auto; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 20px; }

.text-btn, .filled-btn{
  border:none; border-radius:20px; padding:10px 20px; font-size:.875rem;
  font-weight:500; cursor:pointer;
}
.text-btn{ background:transparent; color: var(--md-primary); }
.text-btn:hover{ background: rgba(103,80,164,.08); }
.filled-btn{ background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--elev-1); }
.filled-btn:hover{ box-shadow: var(--elev-2); }

.export-options{ display:flex; flex-direction:column; gap:6px; }
.text-btn.wide{ text-align:left; background: var(--md-surface-container); border-radius: var(--radius-s); }
.text-btn.wide:hover{ background: var(--md-surface-container-high); }

/* ============ Scrim for mobile drawers ============ */
.scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.3);
  z-index:10; display:none;
}
.scrim.show{ display:block; }

/* ============ FAB ============ */
.fab{
  position:absolute; right:20px; bottom:20px;
  width:56px; height:56px; border-radius:16px; border:none;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  box-shadow: var(--elev-2); cursor:pointer;
  display:none; align-items:center; justify-content:center;
  z-index: 12;
}
.fab svg{ width:24px; height:24px; fill:currentColor; }
.fab:hover{ box-shadow: var(--elev-3); }

/* ============ Responsive ============ */
@media (max-width: 900px){
  .layers-panel, .pens-panel{
    position:absolute; top:0; bottom:0;
    box-shadow: var(--elev-3);
  }
  .layers-panel{ left:0; transform: translateX(-100%); width: min(280px, 86vw); }
  .layers-panel.open{ transform: translateX(0); }
  .pens-panel{ right:0; transform: translateX(100%); width: min(300px, 86vw); }
  .pens-panel.open{ transform: translateX(0); }
  .brand span{ font-size:1rem; }
  .fab{ display:flex; }
  .page-strip{ height:110px; }
  .page-card{ width:64px; }
  .page-thumb-wrap{ width:58px; height:58px; }
}
@media (min-width: 901px){
  body:not(.canvas-fullscreen) .layers-panel{ transform: translateX(0) !important; }
  body:not(.canvas-fullscreen) .pens-panel{ transform: translateX(0) !important; }
}