:root{
  --bg:#0f0f13;--sur:#17171f;--sur2:#1e1e28;--sur3:#26263a;
  --bdr:#2e2e42;--acc:#6c63ff;--acc2:#ff6584;--acc3:#43e97b;
  --tx:#f0f0f8;--tx2:#9090b0;--tx3:#5a5a7a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--tx);}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--tx);}
.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:50px;background:var(--sur);border-bottom:1px solid var(--bdr);flex-shrink:0;z-index:200;}
.logo{font-family:'Playfair Display',serif;font-size:18px;font-weight:900;background:linear-gradient(135deg,#6c63ff,#ff6584);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.top-r{display:flex;gap:5px;align-items:center;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .14s;white-space:nowrap;}
.btn-g{background:none;color:var(--tx2);border:1px solid var(--bdr);}
.btn-g:hover{background:var(--sur3);color:var(--tx);}
.btn-a{background:linear-gradient(135deg,#6c63ff,#8b5cf6);color:#fff;}
.btn-a:hover{opacity:.9;}
.btn-r{background:none;color:#f87171;border:1px solid #7f1d1d;}
.btn-r:hover{background:#7f1d1d;}

/* LAYOUT */
.app{display:flex;flex:1;overflow:hidden;}

/* ═══ LEFT PANEL ═══ */
.lp{width:260px;flex-shrink:0;background:var(--sur);border-right:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden;}
.tabs{display:flex;border-bottom:1px solid var(--bdr);flex-shrink:0;overflow-x:auto;}
.tabs::-webkit-scrollbar{height:0;}
.tab{flex-shrink:0;padding:8px 10px;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;transition:all .14s;}
.tab.on{color:var(--acc);border-bottom-color:var(--acc);}
.pane{display:none;overflow-y:auto;padding:11px;flex:1;}
.pane.on{display:block;}
.pane::-webkit-scrollbar{width:6px;}
.pane::-webkit-scrollbar-track{background:var(--sur2);border-radius:3px;}
.pane::-webkit-scrollbar-thumb{background:var(--acc);border-radius:3px;opacity:.7;}
.pane::-webkit-scrollbar-thumb:hover{background:var(--acc);opacity:1;}
.sl{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2);margin:12px 0 5px;}
.sl:first-child{margin-top:0;}

/* INPUTS */
.row{margin-bottom:8px;}
.row label{display:block;font-size:10px;font-weight:600;color:var(--tx2);margin-bottom:3px;}
.row input,.row select,.row textarea{width:100%;padding:6px 8px;background:var(--sur3);border:1px solid var(--bdr);border-radius:7px;color:var(--tx);font-size:12px;font-family:inherit;outline:none;}
.row input:focus,.row select:focus{border-color:var(--acc);}
.row select option{background:var(--sur2);}
input[type=range]{width:100%;accent-color:var(--acc);cursor:pointer;}
input[type=color]{width:100%;height:32px;border:1px solid var(--bdr);border-radius:7px;cursor:pointer;background:var(--sur3);padding:2px;}
.rrow{margin-bottom:8px;}
.rrl{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--tx2);margin-bottom:3px;}
.rrl span{color:var(--acc);font-weight:800;}

/* SIZE PRESETS */
.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;}
.size-chip{padding:7px 6px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--sur3);cursor:pointer;transition:all .13s;text-align:center;font-family:inherit;}
.size-chip:hover{border-color:var(--acc);}
.size-chip.on{border-color:var(--acc);background:rgba(108,99,255,.18);}
.size-chip-name{font-size:10px;font-weight:800;color:var(--tx);display:block;}
.size-chip-dim{font-size:9px;color:var(--tx3);display:block;margin-top:1px;}
.custom-size-row{display:flex;gap:5px;align-items:center;margin-bottom:8px;}
.custom-size-row input{flex:1;padding:6px 7px;background:var(--sur3);border:1px solid var(--bdr);border-radius:7px;color:var(--tx);font-size:12px;font-family:inherit;outline:none;text-align:center;}
.custom-size-row input:focus{border-color:var(--acc);}
.custom-size-row span{color:var(--tx3);font-size:12px;flex-shrink:0;}

/* SWATCHES */
.swr{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px;}
.sw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.sw:hover{transform:scale(1.18);box-shadow:0 3px 10px rgba(0,0,0,.5);}
.sw.on{border-color:#fff;box-shadow:0 0 0 3px var(--acc),0 2px 8px rgba(0,0,0,.4);}

/* FONT GRID */
.fg{display:flex;flex-direction:column;gap:4px;}
.fi{padding:7px 9px;background:var(--sur3);border:1.5px solid var(--bdr);border-radius:7px;cursor:pointer;transition:all .12s;}
.fi:hover{border-color:var(--acc);}
.fi.on{border-color:var(--acc);background:rgba(108,99,255,.15);}
.fin{font-size:9px;color:var(--tx2);}
.fip{font-size:17px;color:var(--tx);line-height:1.2;}

/* SHAPE / ICON GRIDS */
.igrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.ii{aspect-ratio:1;background:var(--sur3);border:1.5px solid var(--bdr);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .12s;}
.ii:hover{border-color:var(--acc);transform:scale(1.06);}
.ii.on{border-color:var(--acc);background:rgba(108,99,255,.2);}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px;}
.gi{aspect-ratio:1;background:var(--sur3);border:1.5px solid var(--bdr);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.gi:hover{border-color:var(--acc);}
.gi svg{width:22px;height:22px;}

/* TOOLS BAR */
.tools-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px;}
.tool-btn{padding:8px 4px;border-radius:7px;border:1.5px solid var(--bdr);background:var(--sur3);color:var(--tx2);font-size:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .12s;font-family:inherit;}
.tool-btn:hover{border-color:var(--acc);color:var(--tx);}
.tool-btn.on{border-color:var(--acc);background:rgba(108,99,255,.2);color:var(--acc);}
.tool-lbl{font-size:8px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;}

/* GRADIENT */
.gg2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px;}
.gsw{height:28px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:all .12s;}
.gsw:hover{transform:scale(1.05);}
.gsw.on{border-color:#fff;}

/* TPL GRID */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.tc{aspect-ratio:1;border-radius:9px;cursor:pointer;border:1.5px solid var(--bdr);overflow:hidden;position:relative;transition:all .14s;}
.tc:hover{border-color:var(--acc);transform:translateY(-2px);}

/* FMT BAR */
.fbar{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px;}
.fb{padding:4px 7px;border-radius:5px;border:1px solid var(--bdr);background:var(--sur3);color:var(--tx2);font-size:12px;cursor:pointer;font-family:inherit;font-weight:700;transition:all .12s;min-width:26px;text-align:center;}
.fb:hover{border-color:var(--acc);color:var(--tx);}
.fb.on{background:rgba(108,99,255,.25);border-color:var(--acc);color:var(--acc);}

/* AD SLOT */
.ad{background:var(--sur2);border:1px dashed var(--bdr);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:10px;text-align:center;flex-shrink:0;}

/* ═══ CANVAS AREA ═══ */
.ca{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:radial-gradient(ellipse at 20% 30%,rgba(108,99,255,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(255,101,132,.05) 0%,transparent 60%),var(--bg);position:relative;overflow:auto;padding:20px;min-height:300px;box-sizing:border-box;}
.ca::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--bdr) 1px,transparent 1px);background-size:26px 26px;opacity:.3;pointer-events:none;}
.cwrap{position:relative;box-shadow:0 16px 50px rgba(0,0,0,.6),0 0 0 1px var(--bdr);border-radius:2px;flex-shrink:0;overflow:visible;}
#cnv{display:block;cursor:crosshair;touch-action:none;}
/* drawing canvas overlay */
#drawCnv{position:absolute;top:0;left:0;cursor:crosshair;pointer-events:auto;touch-action:none;}

/* TOP TOOL ROW */
.tool-row{display:flex;gap:4px;margin-bottom:12px;background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:5px;flex-wrap:wrap;justify-content:center;z-index:10;flex-shrink:0;}
.tbtn{width:32px;height:32px;border-radius:6px;border:1px solid transparent;cursor:pointer;background:none;color:var(--tx2);font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:inherit;title:attr(title);}
.tbtn:hover{background:var(--sur3);color:var(--tx);}
.tbtn.on{background:rgba(108,99,255,.2);color:var(--acc);border-color:var(--acc);}
.tdiv{width:1px;height:20px;background:var(--bdr);margin:0 2px;align-self:center;}

/* SNAP INDICATOR */
.snap-hint{position:absolute;bottom:38px;right:12px;background:rgba(108,99,255,.8);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:20;}
/* ZOOM BADGE */
.zoom-badge{position:absolute;bottom:12px;right:12px;background:var(--sur);border:1px solid var(--bdr);border-radius:6px;padding:3px 8px;font-size:10px;color:var(--tx2);font-weight:700;z-index:10;}

/* ═══ RIGHT PANEL ═══ */
.rp{width:210px;flex-shrink:0;background:var(--sur);border-left:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden;}
.rpt{padding:10px 12px;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--bdr);flex-shrink:0;}
.rpb{flex:1;overflow-y:auto;padding:11px;}
.rpb::-webkit-scrollbar{width:3px;}
.rpb::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px;}

/* DOWNLOAD GRID */
.dlg{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:5px 0 12px;}
.db{padding:9px 5px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border:1.5px solid var(--bdr);background:var(--sur3);transition:all .13s;font-family:inherit;}
.db:hover{border-color:var(--acc);background:rgba(108,99,255,.1);}
.di{font-size:18px;}
.dlbl{font-size:10px;font-weight:800;color:var(--tx2);}
.dext{font-size:9px;color:var(--tx3);}

/* PROP PANEL */
.prop-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.prop-row label{font-size:9px;color:var(--tx2);font-weight:600;}
.prop-row input{width:88px;padding:3px 6px;background:var(--sur3);border:1px solid var(--bdr);border-radius:5px;color:var(--tx);font-size:11px;font-family:inherit;outline:none;}
.prop-row input:focus{border-color:var(--acc);}

/* ═══ INLINE TEXT EDITOR ═══ */
#inlineEditor{
  position:absolute;
  display:none;
  background:transparent;
  border:2px dashed rgba(108,99,255,.9);
  outline:none;
  resize:none;
  font-family:inherit;
  color:inherit;
  padding:2px 4px;
  z-index:500;
  min-width:40px;
  min-height:24px;
  white-space:pre;
  overflow:hidden;
  line-height:1.15;
  box-shadow:0 0 0 1px rgba(108,99,255,.3);
  border-radius:2px;
  caret-color:#6c63ff;
}

/* ═══ MOVE / RESIZE HANDLE OVERLAY ═══ */
#selOverlay{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:400;
  box-sizing:border-box;
}
.sel-handle{
  position:absolute;
  width:10px;height:10px;
  background:#6c63ff;
  border:2px solid #fff;
  border-radius:2px;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  cursor:nwse-resize;
  pointer-events:auto;
}
.sel-handle.nw{top:-5px;left:-5px;cursor:nw-resize;}
.sel-handle.ne{top:-5px;right:-5px;cursor:ne-resize;}
.sel-handle.sw{bottom:-5px;left:-5px;cursor:sw-resize;}
.sel-handle.se{bottom:-5px;right:-5px;cursor:se-resize;}
.sel-handle.n {top:-5px;left:50%;transform:translateX(-50%);cursor:n-resize;}
.sel-handle.s {bottom:-5px;left:50%;transform:translateX(-50%);cursor:s-resize;}
.sel-handle.e {right:-5px;top:50%;transform:translateY(-50%);cursor:e-resize;}
.sel-handle.w {left:-5px;top:50%;transform:translateY(-50%);cursor:w-resize;}
.sel-border{
  position:absolute;inset:-2px;
  border:2px dashed rgba(108,99,255,.85);
  border-radius:2px;
  pointer-events:none;
}
/* ═══ OVERLAP SETTINGS — ⚙ on upper object + layer/transparency menu ═══ */
#ovlpBtn{
  position:absolute;display:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--acc);color:#fff;border:2px solid #fff;
  font-size:13px;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  z-index:650;pointer-events:auto;
}
#ovlpMenu{
  position:absolute;display:none;
  flex-direction:column;gap:2px;
  background:var(--sur2);border:1px solid var(--bdr);
  border-radius:8px;padding:6px;min-width:160px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  z-index:660;pointer-events:auto;
}
.ovlp-opt{
  display:block;width:100%;text-align:left;
  font-size:12px;font-weight:600;color:var(--tx);
  background:none;border:none;border-radius:5px;
  padding:6px 8px;cursor:pointer;font-family:inherit;
}
.ovlp-opt:hover{background:var(--sur3);color:var(--acc);}
.ovlp-op-row{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px 2px;border-top:1px solid var(--bdr);margin-top:3px;
}
.ovlp-op-row span{font-size:10px;color:var(--tx2);white-space:nowrap;}
.ovlp-op-row input[type=range]{flex:1;min-width:60px;}
/* Move bar at top of selection */
.sel-move-bar{
  position:absolute;
  top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  display:flex;gap:3px;
  background:rgba(108,99,255,.95);
  border-radius:6px;padding:3px 6px;
  white-space:nowrap;
  pointer-events:auto;
  z-index:600;
}
.sel-move-btn{
  font-size:11px;color:#fff;cursor:pointer;
  padding:1px 4px;border-radius:3px;border:none;background:none;
  font-family:inherit;font-weight:700;
  transition:background .1s;
}
.sel-move-btn:hover{background:rgba(255,255,255,.2);}

/* RGB picker is position:fixed body-level — see #scbPanel inline styles */

/* TEXT TYPE QUICK-ADD BAR */
.txt-type-bar{display:flex;gap:5px;margin-bottom:10px;background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:6px 10px;flex-wrap:wrap;align-items:center;flex-shrink:0;z-index:10;}
.txt-type-bar .ttlabel{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);flex-shrink:0;margin-right:2px;}
.ttbtn{padding:4px 11px;border-radius:6px;border:1.5px solid var(--bdr);background:var(--sur3);color:var(--tx);cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all .13s;white-space:nowrap;line-height:1.3;}
.ttbtn:hover{border-color:var(--acc);background:rgba(108,99,255,.15);color:var(--acc);}

/* ═══════════════════════════════════════════════════
   SEO CONTENT SECTION (below the fixed-height app)
   ═══════════════════════════════════════════════════ */
.site-content{background:var(--bg);padding:0 0 40px;}
.content-wrap{max-width:880px;margin:0 auto;padding:36px 20px 0;}

.c-block{margin-bottom:40px;}
.c-h1{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);
  line-height:1.25;margin-bottom:14px;color:var(--tx);
}
.c-h2{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.2rem,1rem + 0.8vw,1.55rem);
  line-height:1.3;margin-bottom:14px;color:var(--tx);
}
.c-block h3{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:6px;}
.c-block p{font-size:14px;line-height:1.7;color:var(--tx2);margin-bottom:12px;}
.c-block p:last-child{margin-bottom:0;}
.c-intro{font-size:15px;line-height:1.75;color:var(--tx);}

.c-steps{margin:0;padding-left:0;list-style:none;counter-reset:c-step;}
.c-steps li{
  counter-increment:c-step;position:relative;padding-left:38px;
  font-size:14px;line-height:1.65;color:var(--tx2);margin-bottom:14px;
}
.c-steps li:last-child{margin-bottom:0;}
.c-steps li::before{
  content:counter(c-step);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;
  background:rgba(108,99,255,.2);border:1.5px solid var(--acc);
  color:var(--acc);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.c-steps strong{color:var(--tx);}

.c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.c-card{
  background:var(--sur);border:1px solid var(--bdr);border-radius:12px;
  padding:18px;
}
.c-card-icon{font-size:24px;display:block;margin-bottom:8px;}
.c-card p{font-size:13px;margin-bottom:0;}

.c-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bdr);border-radius:10px;margin-top:8px;}
.c-compare{width:100%;min-width:480px;border-collapse:collapse;font-size:13px;}
.c-compare th,.c-compare td{
  padding:10px 12px;text-align:left;border-bottom:1px solid var(--bdr);
  color:var(--tx2);white-space:nowrap;
}
.c-compare th{color:var(--tx);font-weight:800;font-size:12px;background:var(--sur);}
.c-compare td:first-child{color:var(--tx);font-weight:600;}

.c-faq-list{display:flex;flex-direction:column;gap:8px;}
.c-faq-item{
  background:var(--sur);border:1px solid var(--bdr);border-radius:10px;
  padding:2px 16px;
}
.c-faq-item summary{
  font-size:14px;font-weight:700;color:var(--tx);padding:13px 0;
  cursor:pointer;list-style:none;
}
.c-faq-item summary::-webkit-details-marker{display:none;}
.c-faq-item summary::after{
  content:'+';float:right;color:var(--acc);font-weight:800;font-size:16px;
}
.c-faq-item[open] summary::after{content:'−';}
.c-faq-a{font-size:13px;line-height:1.65;color:var(--tx2);padding:0 0 14px;}

/* Ad slot — intentionally empty, ready for real ad unit code */
.c-ad-slot{
  min-height:90px;margin:36px 0;border-radius:10px;
  background:var(--sur2);border:1px dashed var(--bdr);
}

/* ═══ AUTHOR BYLINE ═══ */
.author-line{
  font-size:12.5px;color:var(--tx2);
  text-align:center;margin:20px 0 4px;
}
.author-label{text-transform:uppercase;letter-spacing:.6px;font-size:10px;font-weight:800;}
.author-link{color:var(--acc);text-decoration:none;}
.author-link:hover{text-decoration:underline;}

/* ═══ FOOTER ═══ */
.site-footer{
  border-top:1px solid var(--bdr);
  margin-top:8px;
  padding:28px 0 36px;
}
.footer-inner{
  max-width:760px;margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
}
.footer-links a{
  font-size:12.5px;color:var(--tx2);text-decoration:none;
  transition:color .15s;
}
.footer-links a:hover{color:var(--acc);}
.footer-copy{
  font-size:11.5px;color:var(--tx3);margin:0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — mobile-first, fine-grained
   Ordered widest → narrowest. Each block only overrides what
   changes at that width; narrower blocks build on wider ones
   rather than re-declaring full rule sets.

   Tier map:
   - 1280px+        desktop (default styles, no query needed)
   - 1024–1279px    small laptop / tablet landscape
   - 768–1023px     tablet portrait
   - 621–767px      large phone landscape / phablet
   - 521–620px      large phone portrait
   - 421–520px      standard phone portrait
   - 361–420px      compact phone portrait
   - 321–360px      small phone portrait (iPhone SE class)
   - 281–320px      very small / older phones
   - ≤280px         smallest feature-constrained screens

   Structural reflow (3-column tool → single-column stacked
   page flow, one scroll container) triggers once at 1024px
   and holds through every narrower tier below it. Each tier
   below only adjusts sizing/density, not structure again.

   fitZoom() in JS reads live clientWidth/clientHeight off
   #canvasArea, so adjusting .ca's height per tier is all
   that's needed for the canvas to size itself correctly —
   no JS changes required at any breakpoint.
   ═══════════════════════════════════════════════════════════ */

/* ── 1024–1279px : tablet landscape / small laptop ── */
@media (max-width:1279px){
  .lp{width:230px;}
  .rp{width:190px;}
}

/* ── 768–1023px : tablet portrait ── */
@media (max-width:1023px){
  .lp{width:210px;}
  .rp{width:175px;}
  .content-wrap{padding:32px 24px 0;}
}

/* ── ≤1023px structural trigger : single-column stacked flow ──
   (Tablet portrait and everything narrower share this base
   structure; finer tiers below only resize within it.) ── */
@media (max-width:1023px){
  .app-shell{height:auto;overflow:visible;}
  body{overflow-y:auto;}
  .app{flex-direction:column;overflow:visible;}
  .ca{order:1;flex:0 0 auto;height:64vh;min-height:360px;overflow:auto;}
  .lp,.rp{
    order:2;width:100%;flex-shrink:0;
    max-height:none;height:auto;
    border:none;border-top:1px solid var(--bdr);
    overflow:visible;
  }
  .rp{order:3;}
  .pane{overflow-y:visible;max-height:none;}
  .rpb{overflow-y:visible;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Topbar: same overflow risk applies the moment the tool
     drops below its full 3-column desktop width, not just on
     small phones — wrap it here instead of leaving a dead zone
     between this breakpoint and the phone-only tier below. */
  .topbar{flex-wrap:wrap;height:auto;padding:8px 14px;gap:8px;row-gap:6px;}
  .top-r{flex-wrap:wrap;justify-content:flex-end;}

  /* Live Preview thumbnail is redundant on mobile — the real
     canvas above is already fully visible at a comfortable
     size, so this small duplicate just adds extra scroll
     length for no benefit. JS keeps rendering to #prev in the
     background regardless; hiding it here is purely visual
     and carries no risk of breaking the draw()/pctx logic. */
  #livePreviewWrap{display:none;}
}

/* ── 621–767px : large phone landscape / phablet ── */
@media (max-width:767px){
  .content-wrap{padding:28px 20px 0;}
  .c-block{margin-bottom:32px;}
  .c-grid{grid-template-columns:1fr 1fr;}
  .ca{height:60vh;min-height:340px;}
}

/* ── 521–620px : large phone portrait ── */
@media (max-width:620px){
  .content-wrap{padding:26px 16px 0;}
  .c-grid{grid-template-columns:1fr;}
  .c-compare{font-size:12px;}
  .c-compare th,.c-compare td{padding:8px 8px;}
  .ca{height:58vh;min-height:320px;}
}

/* ── 421–520px : standard phone portrait ── */
@media (max-width:520px){
  .topbar .kb-hints{display:none !important;}
  .ca{height:54vh;min-height:300px;padding:10px;}
  .tool-row{gap:3px;padding:4px;}
  .tbtn{width:28px;height:28px;font-size:11px;}
  .c-h1{font-size:1.4rem;}
  .c-h2{font-size:1.15rem;}
  .c-intro{font-size:14px;}
}

/* ── 361–420px : compact phone portrait ── */
@media (max-width:420px){
  .ca{height:50vh;min-height:280px;}
  .size-grid{grid-template-columns:1fr 1fr;}
  .tool-row{flex-wrap:wrap;justify-content:flex-start;}
  .c-h1{font-size:1.3rem;}
  .c-card{padding:14px;}
}

/* ── 321–360px : small phone portrait (iPhone SE class) ── */
@media (max-width:360px){
  .ca{height:46vh;min-height:260px;}
  .topbar .logo{font-size:15px;}
  .btn{padding:4px 9px;font-size:10px;}
  .content-wrap{padding:22px 12px 0;}
  .c-h1{font-size:1.2rem;}
  .c-h2{font-size:1.05rem;}
  .c-card-icon{font-size:20px;}
}

/* ── 281–320px : very small / older phones ── */
@media (max-width:320px){
  .ca{height:42vh;min-height:230px;padding:6px;}
  .size-grid{grid-template-columns:1fr;}
  .dlg{grid-template-columns:1fr 1fr;}
  .tbtn{width:24px;height:24px;font-size:10px;}
  .topbar{padding:6px 8px;}
  .c-h1{font-size:1.1rem;}
  .c-faq-item summary{font-size:13px;}
}

/* ── ≤280px : smallest feature-constrained screens ── */
@media (max-width:280px){
  .ca{height:38vh;min-height:200px;padding:4px;}
  .topbar .logo{font-size:13px;}
  .igrid{grid-template-columns:repeat(4,1fr);}
  .ggrid{grid-template-columns:repeat(3,1fr);}
  .c-h1{font-size:1rem;}
  .c-h2{font-size:0.95rem;}
  .c-intro,.c-block p{font-size:13px;}
}