/* Custom Pet Card Maker — You Gotta Be Kitten Me! */

:root{
  --magenta:#d80073;
  --blue:#0088ff;
  --lime:#a5ce3a;
  --ink:#2b2f38;
  --muted:#7a828e;
  --line:#e4e7ec;
  --soft:#f7f8fa;
  --display:"Barlow",Impact,sans-serif;
  --body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* keep [hidden] authoritative — display:flex on a block would otherwise beat it */
[hidden]{display:none !important}
body{font-family:var(--body);color:var(--ink);background:var(--soft);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

/* buttons */
.btn{display:inline-block;background:var(--magenta);color:#fff;border:3px solid var(--magenta);
  font-family:var(--display);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.5px;
  padding:11px 24px;border-radius:9999px;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover:not(:disabled){background:#fff;color:var(--magenta)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-blue{background:var(--blue);border-color:var(--blue)}
.btn-blue:hover{background:#fff;color:var(--blue)}
.btn-ghost{background:#fff;border:2px solid var(--line);color:var(--ink);border-radius:9999px;
  font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  padding:9px 16px;cursor:pointer;transition:.15s}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost.danger:hover{border-color:var(--magenta);color:var(--magenta)}

/* header */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.app-header .brand img{height:44px;width:auto}
.head-actions{display:flex;gap:10px;align-items:center}

/* layout */
.app{display:grid;grid-template-columns:1fr 340px;gap:22px;padding:22px;max-width:1400px;margin:0 auto;align-items:start}
@media (max-width:980px){ .app{grid-template-columns:1fr} }

/* stage */
.stage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.stage-inner{position:relative}
.dropzone{border:3px dashed #cfd4dc;border-radius:12px;background:var(--soft);
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;text-align:center;transition:.15s}
.dropzone.over{border-color:var(--blue);background:#eef7ff}
.dz-title{font-family:var(--display);font-size:30px;text-transform:uppercase;margin-bottom:4px}
.dz-sub{color:var(--muted);margin-bottom:14px}
.dz-note{color:var(--muted);font-size:13px;margin-top:12px}

.editor{position:relative}
#card-canvas{width:100%;height:auto;max-width:100%;display:block;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);touch-action:none;cursor:grab}
/* the panel/stage must be allowed to shrink inside the grid */
.stage,.panel,.panel-block{min-width:0}
#card-canvas.dragging{cursor:grabbing}

.res-warning{margin-top:12px;background:#fff6e5;border:1px solid #f0d089;color:#7a5c14;
  border-radius:8px;padding:10px 14px;font-size:14px}

.photo-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line)}
.ctl{display:flex;align-items:center;gap:10px;flex:1;min-width:190px}
.ctl span{font-family:var(--display);font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px}
.ctl input[type=range]{flex:1;accent-color:var(--blue)}

/* panel */
.panel{display:flex;flex-direction:column;gap:16px}
.panel-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.panel-block h2{font-family:var(--display);font-size:18px;text-transform:uppercase;margin-bottom:4px}
.hint{color:var(--muted);font-size:13px;margin-bottom:12px}

.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pal{border:2px solid var(--line);border-radius:10px;background:#fff;padding:8px 4px;cursor:pointer;transition:.15s}
.pal:hover{border-color:var(--blue);transform:translateY(-2px)}
.pal svg{width:100%;height:38px}

.sel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sel-colors{display:flex;gap:8px}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--line);cursor:pointer;transition:.15s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{box-shadow:0 0 0 3px var(--ink)}

.sheet-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.slot{aspect-ratio:3/2;border:2px solid var(--line);border-radius:8px;background:var(--soft);
  cursor:pointer;overflow:hidden;position:relative;transition:.15s}
.slot:hover{border-color:var(--blue)}
.slot.active{border-color:var(--magenta);box-shadow:0 0 0 2px rgba(216,0,115,.2)}
.slot canvas{width:100%;height:100%;display:block}
.slot .num{position:absolute;left:4px;top:2px;font-family:var(--display);font-size:11px;color:var(--muted)}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap}

/* dialogs */
.dlg{border:0;border-radius:16px;padding:24px;max-width:560px;width:calc(100% - 32px);
  box-shadow:0 24px 70px rgba(0,0,0,.3)}
.dlg::backdrop{background:rgba(20,24,31,.55)}
.dlg h2{font-family:var(--display);font-size:26px;text-transform:uppercase;margin-bottom:4px}
.dlg-sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.dlg-preview{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px;
  display:flex;justify-content:center;margin-bottom:14px}
.dlg-preview canvas{max-height:340px;width:auto;max-width:100%;box-shadow:0 3px 14px rgba(0,0,0,.14)}
.dlg-opt{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:12px}
.dlg-opt em{color:var(--muted);font-style:normal}
.dlg-tip{background:#eef7ff;border:1px solid #bfdcff;color:#12456f;border-radius:8px;
  padding:11px 14px;font-size:13.5px;margin-bottom:18px}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.help-list{margin:0 0 14px 20px}
.help-list li{margin-bottom:8px}

/* print surface — hidden on screen, exact physical size on paper */
#print-surface{display:none}
@media print{
  body > *{display:none !important}
  #print-surface{display:block !important;margin:0;padding:0}
  #print-surface img{width:8.5in;height:11in;display:block}
  @page{size:letter;margin:0}
}

.saved-note{margin:10px 0 0;font-size:12px}