/* ── tokens ── */
:root {
  --bg:       #09090f;
  --s1:       #0f0f1a;
  --s2:       #141421;
  --s3:       #1a1a2a;
  --b1:       #1e1e2e;
  --b2:       #252538;
  --text:     #c0c0d0;
  --muted:    #52526a;
  --subtle:   #7a7a92;
  --pink:     #ff71b8;
  --purple:   #b388ff;
  --gold:     #ffd84d;
  --green:    #7EC87E;
  --red:      #ff4d4d;
  --orange:   #FFB347;
  --col-l:    260px;
  --col-r:    300px;
  --top:      58px;
  --proto:    0px;
  --r:        10px;
  --r-lg:     14px;
  --font-ui:      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px;height:100vh;overflow:hidden;}
:root{--footer:34px;}
a{color:inherit;text-decoration:none;}

/* ── fa-icon wrapper (Fontawesome Free webfont, self-hosted) ── */
/* Plain inline-block so FA's ::before glyph renders normally;
   inherits font-size and color from its parent → CSS-controlled sizing/coloring. */
.fa-icon{
  display:inline-block;
  font-style:normal;
  vertical-align:-0.125em;
  line-height:1;
}

/* ── topbar ── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--top);
  background:var(--s1);border-bottom:1px solid var(--b1);
  /* Grid: left auto / centered counter / right auto.
     Equal 1fr flex columns left+right ensures the counter is true-centered
     and CAN'T overlap the brand (they each occupy their own track). */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  padding:0 1.2rem;z-index:100;column-gap:1rem;
}
.tb-brand{display:flex;align-items:center;gap:.8rem;min-width:0;flex-wrap:nowrap;}
.tb-brand h1{font-family:var(--font-display);font-size:1.25rem;color:#fff;white-space:nowrap;letter-spacing:.5px;display:inline-flex;align-items:center;gap:.4rem;}

/* ── brand: animated pink gift + gradient 'Gifty' wordmark + sparkle ── */
.tb-brand-icon{
  color:#ff71b8;
  font-size:1.6em;
  filter:drop-shadow(0 0 10px rgba(255,113,184,.6));
  animation:brand-wobble 4s ease-in-out infinite;
  transform-origin:50% 70%;
}
.tb-brand-name{
  font-weight:800;
  letter-spacing:.5px;
  font-size:1.05em;
  background:linear-gradient(135deg,#ff71b8 0%,#ff5fb7 30%,#b388ff 65%,#7dd3fc 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,113,184,.28));
  animation:brand-shimmer 6s linear infinite;
}
.tb-brand-sparkle{
  color:#ffd84d;
  font-size:.7em;
  margin-left:.05em;
  filter:drop-shadow(0 0 8px rgba(255,216,77,.7));
  animation:brand-twinkle 2.2s ease-in-out infinite;
}
@keyframes brand-shimmer{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
@keyframes brand-wobble{
  0%,100%{transform:rotate(0deg) scale(1);}
  25%{transform:rotate(-6deg) scale(1.04);}
  50%{transform:rotate(0deg) scale(1);}
  75%{transform:rotate(6deg) scale(1.04);}
}
@keyframes brand-twinkle{
  0%,100%{opacity:.55;transform:scale(.85) rotate(0deg);}
  50%{opacity:1;transform:scale(1.15) rotate(20deg);}
}
.tb-brand h1:hover .tb-brand-icon{animation-duration:.8s;}
.tb-brand h1:hover .tb-brand-sparkle{animation-duration:.6s;}
@media (prefers-reduced-motion: reduce){
  .tb-brand-icon,.tb-brand-name,.tb-brand-sparkle{animation:none !important;}
}

/* ── thank-you popover triggered by hovering the gift icon ── */
.tb-brand h1{position:relative;}
.tb-brand-icon{cursor:pointer;}
.tb-thanks{
  position:absolute;
  /* anchored under the gift icon — left edge starts at icon's left */
  top:calc(100% + 10px);
  left:-12px;
  z-index:200;
  min-width:220px;
  padding:14px 18px 12px;
  background:linear-gradient(180deg, rgba(20,20,32,.96), rgba(15,15,26,.96));
  border:1px solid rgba(255,113,184,.45);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 18px 40px rgba(0,0,0,.55),
    0 0 24px rgba(255,113,184,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-ui);
  font-size:11.5px;
  color:#e8e8f4;
  white-space:nowrap;
  letter-spacing:.3px;
  text-transform:none;
  /* hidden by default */
  opacity:0;
  transform:translateY(-6px) scale(.95);
  pointer-events:none;
  /* delay closing slightly so cursor has time to cross the gap into the popup */
  transition:opacity .22s ease, transform .22s ease;
  transition-delay:.12s;
}
/* invisible bridge between icon and popup so cursor doesn't lose hover
   while moving from one to the other */
.tb-thanks::before{
  content:'';position:absolute;
  left:0;right:0;top:-10px;height:10px;
  background:transparent;
}
/* show: hovering the gift icon OR the popup itself (covered via :has) */
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks,
.tb-thanks:hover{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
}
.tb-thanks-title{
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:linear-gradient(135deg,#ff71b8 0%,#b388ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:inline-flex;align-items:center;gap:6px;
  padding-bottom:8px;margin-bottom:2px;
  border-bottom:1px solid rgba(255,113,184,.18);
  width:100%;justify-content:center;
}
.tb-thanks-title .fa-icon{
  font-size:12px;color:#ff71b8;
  -webkit-text-fill-color:#ff71b8;
  animation:thanks-heart 1.6s ease-in-out infinite;
}
@keyframes thanks-heart{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.2);}
}
.tb-thanks-list{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  font-size:12px;font-weight:600;
  color:#d8d8e8;
  padding:2px 0;
}
.tb-thanks-list > span{
  line-height:1.4;
  transition:color .15s;
}
/* each name gets a subtle staggered fade-in when popup appears */
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span,
.tb-thanks:hover .tb-thanks-list > span{animation:thanks-fade-in .35s ease both;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(1),
.tb-thanks:hover .tb-thanks-list > span:nth-child(1){animation-delay:.05s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(2),
.tb-thanks:hover .tb-thanks-list > span:nth-child(2){animation-delay:.10s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(3),
.tb-thanks:hover .tb-thanks-list > span:nth-child(3){animation-delay:.15s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(4),
.tb-thanks:hover .tb-thanks-list > span:nth-child(4){animation-delay:.20s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(5),
.tb-thanks:hover .tb-thanks-list > span:nth-child(5){animation-delay:.25s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(6),
.tb-thanks:hover .tb-thanks-list > span:nth-child(6){animation-delay:.30s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(7),
.tb-thanks:hover .tb-thanks-list > span:nth-child(7){animation-delay:.35s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(8),
.tb-thanks:hover .tb-thanks-list > span:nth-child(8){animation-delay:.40s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(9),
.tb-thanks:hover .tb-thanks-list > span:nth-child(9){animation-delay:.45s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(10),
.tb-thanks:hover .tb-thanks-list > span:nth-child(10){animation-delay:.50s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(11),
.tb-thanks:hover .tb-thanks-list > span:nth-child(11){animation-delay:.55s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(12),
.tb-thanks:hover .tb-thanks-list > span:nth-child(12){animation-delay:.60s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(13),
.tb-thanks:hover .tb-thanks-list > span:nth-child(13){animation-delay:.65s;}
.tb-brand h1:has(.tb-brand-icon:hover) .tb-thanks-list > span:nth-child(14),
.tb-thanks:hover .tb-thanks-list > span:nth-child(14){animation-delay:.70s;}
@keyframes thanks-fade-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
.tb-thanks-more{
  color:#ff71b8 !important;
  font-style:italic;font-weight:500 !important;
  font-size:11px;
  margin-top:2px;
}
.tb-thanks-foot{
  font-size:10px;color:#8d8da8;letter-spacing:.4px;
  padding-top:8px;margin-top:2px;
  border-top:1px solid rgba(255,113,184,.18);
  width:100%;text-align:center;
  display:inline-flex;align-items:center;gap:5px;justify-content:center;
}
.tb-thanks-foot .fa-icon{color:var(--green);font-size:10px;}

.tb-brand-sep{width:1px;height:20px;background:var(--b2);}
.tb-proto{
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  padding:3px 8px;border-radius:10px;white-space:nowrap;
  color:#ffb066;background:rgba(255,127,0,.12);
  border:1px solid rgba(255,127,0,.4);
  text-shadow:0 0 6px rgba(255,127,0,.4);
  margin-left:.2rem;cursor:help;
}
.tb-trust{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:600;letter-spacing:.5px;
  padding:3px 8px;border-radius:10px;white-space:nowrap;
  margin-left:.2rem;
  text-decoration:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.tb-trust-source{
  color:#7EC87E;background:rgba(126,200,126,.12);
  border:1px solid rgba(126,200,126,.4);
  text-shadow:0 0 6px rgba(126,200,126,.3);
  cursor:pointer;
}
.tb-trust-source:hover{
  background:rgba(126,200,126,.25);
  border-color:rgba(126,200,126,.7);
  box-shadow:0 0 8px rgba(126,200,126,.3);
}
.tb-trust-notrack{
  color:#85C8FF;background:rgba(133,200,255,.1);
  border:1px solid rgba(133,200,255,.35);
  text-shadow:0 0 6px rgba(133,200,255,.3);
  cursor:help;
}
.tb-brand-sub{font-size:13px;color:#b8b8c8;}
.tb-brand-sub a{color:var(--green);transition:opacity .15s,color .15s;}
.tb-brand-sub a:hover{color:#a8e0a8;}
.tb-brand-sub .by-sep{color:#8a8aa0;}
.tb-counter{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--s3);border:1px solid var(--b1);border-radius:20px;
  padding:6px 20px;transition:border-color .3s;
  line-height:1;justify-self:center;
  justify-self:center;
  white-space:nowrap;
}
.tb-counter.warn{border-color:var(--orange);}
.tb-counter.over{border-color:var(--red);}
.tb-counter > *{display:inline-flex;align-items:center;line-height:1;}
.tb-counter-label{font-size:12px;color:var(--muted);}
.cv{font-size:17px;font-weight:700;color:#fff;transition:color .2s;line-height:1;}
.cv.ok{color:var(--green);}
.cv.warn-v{color:var(--orange);}
.cv.over-v{color:var(--red);}
.tb-sep{color:var(--b2);font-size:10px;margin:0 .2rem;line-height:1;}
.tb-right{
  display:flex;align-items:center;gap:1rem;
  justify-self:end;min-width:0;
}
.tb-feedback{font-size:12px;color:#b8b8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tb-feedback a{color:var(--green);text-decoration:none;transition:opacity .15s,color .15s;}
.tb-feedback a:hover{color:#a8e0a8;text-decoration:underline;}
.tb-feedback a .fa-brands{color:var(--green);}
.ui-lang{
  display:flex;gap:6px;flex-shrink:0;
  padding-left:1rem;
  border-left:1px solid var(--b2);
}
.ui-lang-tab{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;padding:6px 12px;border-radius:14px;cursor:pointer;
  color:var(--text);border:1px solid var(--b2);background:var(--s3);
  user-select:none;white-space:nowrap;font-weight:600;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.ui-lang-tab:hover{
  border-color:var(--purple);color:#fff;
  background:rgba(179,136,255,.15);
  box-shadow:0 0 0 2px rgba(179,136,255,.1);
}
.ui-lang-tab.on{
  border-color:var(--purple);color:#fff;
  background:rgba(179,136,255,.25);
  box-shadow:0 0 12px rgba(179,136,255,.4);
}
/* flag images inside lang tabs */
.flag{
  width:18px;height:13px;
  object-fit:cover;
  border-radius:2px;
  vertical-align:middle;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  flex-shrink:0;
}

/* ── app layout ── */
.app{
  display:grid;
  grid-template-columns:var(--col-l) 1fr var(--col-r);
  height:100vh;
  padding-top:calc(var(--top) + var(--proto));
  padding-bottom:var(--footer);
}
.proto-notice{
  position:fixed;left:0;right:0;top:var(--top);z-index:99;
  height:var(--proto);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.2px;
  color:#ffd9b3;
  background:linear-gradient(90deg,
    rgba(255,127,0,.12) 0%,
    rgba(255,127,0,.22) 50%,
    rgba(255,127,0,.12) 100%);
  border-bottom:1px solid rgba(255,127,0,.35);
  box-shadow:0 2px 12px rgba(255,127,0,.2);
  text-shadow:0 0 8px rgba(255,127,0,.5);
  animation:proto-pulse 3s ease-in-out infinite;
}
@keyframes proto-pulse{
  0%,100%{box-shadow:0 2px 12px rgba(255,127,0,.2);}
  50%{box-shadow:0 2px 18px rgba(255,127,0,.4);}
}

/* ── columns ── */
.col{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--b2) transparent;}
.col-left{background:var(--s1);border-right:1px solid var(--b1);}
.col-mid{background:var(--bg);display:flex;flex-direction:column;align-items:center;overflow-y:auto;}
.col-right{
  background:var(--s1);border-left:1px solid var(--b1);
  display:flex;flex-direction:column;min-height:0;
  overflow:hidden;
}
.col-right > .col-toolbar,
.col-right > .fav-panel{flex-shrink:0;}
.col-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--b1);background:var(--s2);
}
/* Undo / Redo icon group — moved here (top-left) from the bottom code-
   actions row per maximilian's feedback: standard editor placement,
   icon-only with hover tooltip, frees vertical space at the bottom. */
.undo-redo-group{display:flex;gap:4px;}
.ur-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:28px;padding:0;
  border-radius:8px;cursor:pointer;font-size:13px;
  color:#c4b5fd;
  border:1px solid rgba(179,136,255,.4);
  background:linear-gradient(180deg, rgba(179,136,255,.12), rgba(179,136,255,.05));
  transition:all .15s;
}
.ur-btn:hover{
  color:#fff;border-color:var(--purple);
  background:linear-gradient(180deg, rgba(179,136,255,.28), rgba(179,136,255,.13));
  box-shadow:0 2px 8px rgba(179,136,255,.3);
}
.ur-btn:active{transform:scale(.92);}
.ur-btn.disabled{opacity:.3;pointer-events:none;}
/* When the left column has no undo group (right column toolbar), keep
   the expand-all button right-aligned. */
.col-right .col-toolbar{justify-content:flex-end;}
.col-toolbar-btn{
  font-size:11.5px;font-weight:600;letter-spacing:.3px;
  padding:5px 14px;border-radius:14px;cursor:pointer;
  color:#c4b5fd;
  border:1px solid rgba(179,136,255,.45);
  background:linear-gradient(180deg, rgba(179,136,255,.14), rgba(179,136,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.25);
  user-select:none;transition:all .18s;white-space:nowrap;font-family:inherit;
}
.col-toolbar-btn:hover{
  color:#fff;
  border-color:var(--purple);
  background:linear-gradient(180deg, rgba(179,136,255,.3), rgba(179,136,255,.15));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px rgba(179,136,255,.35);
}
.col-right > .lang-panel{flex:1 1 auto;overflow-y:auto;min-height:0;}
/* slim scrollbar for the section list */
.col-right > .lang-panel::-webkit-scrollbar{width:6px;}
.col-right > .lang-panel::-webkit-scrollbar-thumb{background:var(--b1);border-radius:3px;}
.col-right > .lang-panel::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* ── section (collapsible block) — rounded card style ── */
.sec{
  position:relative;
  margin:5px 8px;
  border:1px solid var(--b1);
  border-radius:12px;
  background:var(--s2);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.18);
  transition:box-shadow .18s, border-color .18s, background .18s;
}
.sec:hover{
  border-color:var(--b2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
}
.sec:has(.sec-head.open){
  border-color:rgba(125,211,252,.35);
  background:var(--s3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 3px 12px rgba(125,211,252,.12);
}
.sec::before{display:none;}

/* ── left column section accent — unified monochrome teal, just enough polish ── */
.col-left .sec .sec-title-icon{color:rgba(125,211,252,.85);}
.col-left .sec:hover .sec-title-icon{color:#7dd3fc;text-shadow:0 0 8px rgba(125,211,252,.4);}
.col-left .sec:has(.sec-head.open) .sec-title-icon{color:#7dd3fc;text-shadow:0 0 8px rgba(125,211,252,.4);}
/* Section dividers (Vibes / Holidays / Celebrations) — same metrics
   as the left column's .field-label so the right column reads
   consistently. Was 9px/600 muted, then briefly 13px/800 (too loud);
   landed on 10.5px/700 / #d8d8e8 to match. */
.sec-divider{
  display:flex;align-items:center;gap:8px;
  margin:10px 12px 4px;padding-top:6px;
  border-top:1px solid var(--b1);
  font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:#d8d8e8;font-weight:700;
}
.sec-divider::after{content:'';flex:1;height:1px;background:var(--b1);}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .85rem;cursor:pointer;user-select:none;
  transition:background .18s, color .18s;gap:.5rem;
}
.sec-head:hover{background:linear-gradient(180deg, rgba(125,211,252,.08), rgba(125,211,252,.03));}
.sec-head.open{
  background:linear-gradient(180deg, rgba(125,211,252,.18), rgba(125,211,252,.08));
  box-shadow:inset 0 -1px 0 rgba(125,211,252,.2);
}
.sec-head.open .sec-title{color:#9fdcff;}
.sec-title{
  font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#d8d8e8;
  display:flex;align-items:center;gap:.5rem;
}
.sec-title-icon{font-size:12px;opacity:1;flex-shrink:0;}
.sec-arrow{
  font-size:11px;color:#a0a0b8;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.sec-head.open .sec-arrow{transform:rotate(180deg);}

/* ── category title (right side templates) ─────────────────────────
   Each category header is split into two siblings:
     <span class="category-icon"><i …></i></span>
     <span class="category-label">Sweet</span>
   The fixed gap on .cat-title gives EVERY category the same icon-text
   spacing regardless of which icon it uses. */
.cat-title{display:inline-flex;align-items:center;gap:.55rem;}
.category-icon{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;
  width:1.1em;          /* fixed icon slot → guarantees aligned labels */
  flex-shrink:0;
  text-align:center;
}
.category-label{
  display:inline-block;
  line-height:1;
}
.sec-body{
  max-height:0;overflow:hidden;opacity:0;
  background:var(--bg);
  border-top:1px solid var(--b1);
  transition:max-height .3s ease,opacity .2s ease;
}
.sec-body.open{max-height:1600px;opacity:1;}
.sec-inner{padding:.75rem 1rem .9rem;}

/* ── field ── */
.field{margin-bottom:.7rem;}
.field:last-child{margin-bottom:0;}
.field-label{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#d8d8e8;margin-bottom:.35rem;display:block;}

/* ── inputs ── */
input[type="text"],input[type="number"],textarea{
  width:100%;background:var(--bg);border:1px solid var(--b1);
  border-radius:var(--r);color:#fff;padding:7px 11px;
  font-size:13.5px;font-family:inherit;outline:none;margin:0;
  transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 2px rgba(179,136,255,.08);}
input[type="number"]{width:68px;}
/* topText is a textarea so multi-line phrases (e.g. the Flipped
   layout's "3 wasn't enough / so here comes" two-liner) can be stored.
   Auto-grows with content via field-sizing where supported, otherwise
   the user can drag the corner. min-height matches the single-line
   input metric so layouts that use one line look the same. */
textarea{resize:vertical;min-height:33px;line-height:1.35;}

/* ── row ── */
.row{display:flex;gap:6px;align-items:center;}
.row input[type="text"],.row textarea{flex:1;}

/* ── field clear btn ── */
.field-clear{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;font-size:10px;line-height:1;
  color:var(--muted);cursor:pointer;border-radius:50%;
  flex-shrink:0;opacity:0;pointer-events:none;
  transition:color .15s,background .15s,opacity .15s;
}
.row:hover .field-clear,
.field-clear.has-val{opacity:.4;pointer-events:auto;}
.field-clear:hover{color:var(--red);background:rgba(255,100,100,.12);opacity:1!important;}

/* ── color btn ── */
.cbtn{
  width:26px;height:26px;border-radius:var(--r);
  border:2px solid var(--b2);cursor:pointer;flex-shrink:0;
  transition:transform .15s,box-shadow .15s;
}
.cbtn:hover{transform:scale(1.12);box-shadow:0 0 8px rgba(255,113,184,.25);}

/* ── "Without" pill: empties the deco field for that row ── */
.row-without{
  flex-shrink:0;
  font-size:10.5px;font-weight:600;letter-spacing:.3px;
  padding:4px 10px;border-radius:14px;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--b2);
  cursor:pointer;font-family:inherit;
  transition:color .15s,border-color .15s,background .15s;
  white-space:nowrap;
}
.row-without:hover{
  color:var(--red);
  border-color:var(--red);
  background:rgba(239,68,68,.08);
}
/* Visually "muted" when the field is already empty — same trick used for
   the quick-edit clear buttons previously. */
.row:has(input:placeholder-shown) .row-without{opacity:.4;}

/* ── chips ── */
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:.5rem;}
.chip{
  background:var(--s3);border:1px solid var(--b1);
  border-radius:20px;padding:3px 10px;font-size:12.5px;
  color:var(--text);cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,color .12s;white-space:nowrap;
}
.chip:hover{background:var(--b2);border-color:var(--purple);}
.chip.on{border-color:var(--purple)!important;color:var(--purple)!important;}
.chip.danger{border-color:#3a1a1a;color:#cc6666;}
.chip.danger:hover{background:#1a0e0e;}
.chip.gold{border-color:#5a4a00!important;color:var(--gold)!important;}
.chip.red{border-color:#5a1f1f!important;color:#ff7a7a!important;}
.chip.pink{border-color:#5a1f43!important;color:var(--pink)!important;}
.chip.spicy{border-color:#5a3a1f!important;color:#ffa566!important;}
.chip.xmas{border-color:#2a5a2a!important;color:#ff5252!important;}
.chip.halloween{border-color:#3a1f4a!important;color:#ff8c3a!important;}
.chip.easter{border-color:#4a2a4a!important;color:#f9a8d4!important;}
.chip.valentine{border-color:#5a1f2f!important;color:#ff4d6d!important;}
.chip.womans{border-color:#3a1f5a!important;color:#c084fc!important;}
.chip.july4{border-color:#1f2f5a!important;color:#60a5fa!important;}
.chip.hanukkah{border-color:#1f3a5a!important;color:#7dd3fc!important;}
.chip.stpat{border-color:#1f5a2a!important;color:#22c55e!important;}
.chip.newyear{border-color:#5a4a1f!important;color:#fbbf24!important;}
.chip.wedding{border-color:#4a3a2a!important;color:#d4af37!important;}
.chip.sub{border-color:#4a1f3a!important;color:#ec4899!important;}
.chip.aftercare{border-color:#3a2a4a!important;color:#fcd34d!important;}
.chip.goth{border-color:#2a1f3a!important;color:#a855f7!important;}
.chip.drunk{border-color:#5a3a2a!important;color:#f59e0b!important;}
.chip.soft{border-color:#2a4a3a!important;color:#86efac!important;}
.chip.thanksgiving{border-color:#5a3a1a!important;color:#d97706!important;}
.chip.anniv{border-color:#4a3a2a!important;color:#e8b4b8!important;}
.chip.pride{border-color:#5a1f43!important;}
.chip.wicked{border-color:#4a1f5a!important;color:#d946ef!important;}
.chip-rainbow{
  background:linear-gradient(90deg,#ffadad,#ffd6a5,#fdffb6,#caffbf,#a0c4ff,#bdb2ff)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  font-weight:600;
}

/* ── font toggle (legacy chips; kept for backwards compat) ── */
.ftoggle{display:flex;gap:3px;}

/* ── meta row ── */
.meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.4rem;}
.meta-label{font-size:10.5px;font-weight:600;color:#c8c8d8;letter-spacing:.5px;}

/* Font + size dropdowns — replaced the 5-chip ftoggle row + number-
   input size with two compact <select>s on each field. maximilian's
   feedback that the chip row was visually heavy. */
.font-select,.size-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--s2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23a8a8c0' d='M6 8.5L1.5 4h9z'/></svg>") no-repeat right 6px center;
  background-size:10px;
  border:1px solid var(--b2);
  border-radius:6px;color:var(--text);
  padding:5px 22px 5px 10px;
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;outline:none;
  transition:border-color .15s,background-color .15s;
}
.font-select{min-width:130px;}
.size-select{min-width:62px;text-align:left;}
.font-select:hover,.size-select:hover{border-color:var(--purple);}
.font-select:focus,.size-select:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,113,184,.12);}
.font-select option,.size-select option{background:var(--bg);color:var(--text);}

/* ── layout grid ── */
.layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:.6rem;}
.lbtn{
  padding:7px 0;border-radius:var(--r);border:1px solid var(--b2);
  background:var(--s3);color:var(--text);font-size:11px;font-weight:500;
  cursor:pointer;text-align:center;user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.2);
  transition:all .15s;
}
.lbtn:hover{
  border-color:var(--purple);color:var(--purple);
  background:rgba(179,136,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(179,136,255,.15);
}
.lbtn.on{
  border-color:var(--purple);color:#fff;font-weight:700;
  background:linear-gradient(180deg, rgba(179,136,255,.28), rgba(179,136,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(179,136,255,.4);
}
.lbtn.on:hover{background:linear-gradient(180deg, rgba(179,136,255,.35), rgba(179,136,255,.2));}

/* ── buttons ── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;padding:7px 12px;border-radius:var(--r);
  border:1px solid var(--b1);background:var(--s2);
  color:var(--text);font-size:12px;font-weight:500;
  cursor:pointer;transition:background .15s,border-color .15s;
  font-family:inherit;letter-spacing:.2px;
}
.btn:hover{background:var(--s3);border-color:var(--b2);}
.btn-copy{background:rgba(126,200,126,.07);border-color:rgba(126,200,126,.2);color:var(--green);font-weight:600;transition:background .15s,border-color .15s,color .15s;}
.btn-copy:hover{background:rgba(126,200,126,.13);}
.btn-copy.over-limit{background:rgba(255,77,77,.06)!important;border-color:rgba(255,77,77,.35)!important;color:#ff7a7a!important;cursor:not-allowed;}
.btn-copy.over-limit:hover{background:rgba(255,77,77,.12)!important;}
.btn-reset{background:rgba(204,102,102,.07);border-color:rgba(204,102,102,.15);color:#cc6666;}
.btn-reset:hover{background:rgba(204,102,102,.13);}
.code-actions{
  position:sticky;bottom:0;z-index:50;
  display:flex;gap:.5rem;width:100%;
  flex-shrink:0;
  padding:.5rem 0 .2rem;margin-top:.2rem;
  background:linear-gradient(to bottom,transparent 0%,var(--bg) 25%,var(--bg) 100%);
}
.code-actions > .btn{flex:1 1 0;width:auto;min-width:0;min-height:36px;}

/* ── kao toggle ── */
.kao-toggle{display:flex;gap:4px;margin-bottom:.6rem;}
.kao-toggle .chip{flex:1;text-align:center;}

/* ── divider ── */
.div{height:1px;background:var(--b1);margin:.5rem 0;}

/* ── sym label ── */
.sym-label{font-size:11.5px;color:#d8d8e8;margin-bottom:4px;margin-top:6px;font-weight:700;letter-spacing:.5px;}
.sym-label:first-child{margin-top:0;}

/* ── symbol chips: bigger so the glyphs are actually readable ── */
#sec-symbols .chip{
  font-size:18px;
  line-height:1;
  padding:6px 12px;
  min-width:36px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#sec-symbols .chips{gap:6px !important;}

/* ── preview column (middle) ── */
.preview-wrap{
  display:flex;flex-direction:column;
  padding:.75rem 1rem;gap:.6rem;
  align-items:center;
  width:580px;max-width:100%;
  flex-shrink:0;
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 6px 22px rgba(0,0,0,.35);
  margin:8px 0;
}
.pv-label{
  font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;
  gap:.8rem;
  width:100%;padding:0 2px .35rem;
}
.pv-label > span:first-child{color:#7dd3fc;font-size:11px;letter-spacing:1.8px;}
/* combined "Click to edit" + reorder toggle pill */
.click-edit-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:rgba(125,211,252,.08);border:1px solid rgba(125,211,252,.3);
  color:#cbd5e1;padding:4px 12px;border-radius:14px;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:none;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 0 8px rgba(125,211,252,.1);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;
}
.click-edit-btn:hover{
  background:rgba(125,211,252,.18);border-color:#7dd3fc;color:#fff;
  box-shadow:0 0 14px rgba(125,211,252,.35);transform:translateY(-1px);
}
.click-edit-btn.on{
  background:var(--purple);border-color:var(--purple);color:#fff;
  box-shadow:0 0 16px rgba(179,136,255,.6);
}
.click-edit-btn .fa-icon{font-size:11px;}
.pv-label .click-edit-btn span{font-size:11px;color:inherit;letter-spacing:.3px;text-transform:none;}
.pv-card{
  background:#141420;border:none;border-radius:0;
  padding:0 0 1rem;
  text-align:center;
  display:flex;flex-direction:column;
  justify-content:flex-start;align-items:center;gap:4px;width:100%;
  position:relative;overflow:hidden;
  min-height:460px;
}
.pv-gift-img{
  width:100%;flex-shrink:0;
  height:270px;
  background:#141420;
  border:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.pv-gift-img img{
  display:block;
  margin:0 auto;
  max-height:260px;max-width:260px;object-fit:contain;
}


.pv-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(179,136,255,.03) 0%,transparent 65%);
}
/* pre-wrap (not pre-line) so internal \n in field values renders as
   line breaks — needed for the Flipped layout where topText holds
   "3 wᴀsɴ'ᴛ\nᴇɴᴏᴜɢʜ ᴀᴘᴘᴀʀᴇɴᴛʟʏ..." as a two-line phrase. */
.pvc{cursor:pointer;border-radius:4px;padding:2px 8px;transition:background .15s;min-height:4px;position:relative;white-space:pre-wrap;}
/* In-place editing: clicking a preview text element makes it
   contentEditable so the user can type right there, then Enter/blur
   syncs back to the underlying field. Visual outline + tinted bg make
   the edit state obvious. */
.pvc.pv-editing{
  outline:2px solid var(--pink);outline-offset:2px;
  background:rgba(255,113,184,.08);
  cursor:text;
  caret-color:var(--pink);
}
.pvc.pv-editing:focus{outline-color:var(--pink);}

/* Flipped layout: the trailing \n in topText creates an explicit blank
   line in the gift code (so 3dxchat renders "...apparently..." then a
   blank then "so here comes"), but browsers swallow the visual line at
   the end of a div. Add margin-top to pvDekoBottom so the preview
   matches what the gift will actually look like. */
.pv-card[data-layout="flipped"] #pvDekoBottom{margin-top:.9rem;}
/* main-text bold/italic toggles — forced with !important so they win against inline styles + cached gradient cssText */
.pv-main-bold{font-weight:700 !important;}
.pv-main-italic{font-style:italic !important;}
/* reorder controls — hidden by default, only visible when reorder mode is on */
.pv-reorder{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:row;gap:4px;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:5;
  background:rgba(20,20,32,.92);padding:4px 6px;border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.pv-card.reorder-mode .pv-reorder{opacity:1;pointer-events:auto;}
.pv-card.reorder-mode{gap:12px;padding-top:8px;}
.pv-card.reorder-mode .pvc{
  padding-right:110px;
  padding-top:8px;padding-bottom:8px;
  min-height:32px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.025);border-radius:6px;
  margin:0 8px;
}
.pv-card.reorder-mode .pvc:empty{display:none !important;}
.pvc:empty{display:none !important;}
.pv-arr{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:22px;font-size:13px;font-weight:700;line-height:1;
  color:#fff;background:rgba(179,136,255,.25);
  border:1px solid var(--purple);border-radius:5px;
  cursor:pointer;user-select:none;
  box-shadow:0 0 6px rgba(179,136,255,.35);
  transition:background .12s,color .12s,border-color .12s,box-shadow .12s,transform .1s;
}
.pv-arr:hover{
  background:var(--purple);color:#fff;
  box-shadow:0 0 12px rgba(179,136,255,.7);
  transform:scale(1.08);
}
.pv-arr.disabled{opacity:.25;cursor:default;pointer-events:none;box-shadow:none;}
.pv-arr.pv-arr-rm{
  background:rgba(255,77,77,.25);border-color:#ff4d4d;
  box-shadow:0 0 6px rgba(255,77,77,.35);margin-top:0;margin-left:2px;
}
.pv-arr.pv-arr-rm:hover{
  background:#ff4d4d;color:#fff;border-color:#ff4d4d;
  box-shadow:0 0 12px rgba(255,77,77,.7);
}
/* subtle visual cue when in reorder mode */
.pv-card.reorder-mode{
  box-shadow:inset 0 0 0 2px rgba(179,136,255,.35);
  border-radius:8px;
}
.pv-card.reorder-mode .pvc:hover{background:rgba(179,136,255,.06);}
/* reorder toggle button in pv-label */
.reorder-toggle{
  margin-left:auto;padding:6px 14px;border-radius:16px;
  background:rgba(179,136,255,.12);border:1px solid var(--purple);color:var(--purple);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  letter-spacing:.3px;
  box-shadow:0 0 8px rgba(179,136,255,.2);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;
}
.reorder-toggle:hover{
  background:rgba(179,136,255,.22);color:#fff;
  box-shadow:0 0 14px rgba(179,136,255,.45);
  transform:translateY(-1px);
}
.reorder-toggle.on{
  background:var(--purple);border-color:var(--purple);color:#fff;
  box-shadow:0 0 16px rgba(179,136,255,.6);
}
.reorder-toggle .fa-icon{font-size:12px;}
.pv-label .reorder-toggle span{font-size:11px;color:inherit;letter-spacing:0;text-transform:none;}
.pv-popup{
  width:100%;border-radius:4px;overflow:hidden;
  border:1px solid #2a2a40;
  box-shadow:0 8px 32px rgba(0,0,0,.8);
  background:#141420;
}
.pv-popup-head{
  background:#141428;padding:7px 10px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #252540;
}
.pv-popup-uname{
  color:#ff71b8;font-size:14px;font-weight:700;flex:1;
}
.pv-popup-backbtn{
  background:#008080;color:#fff;font-size:11px;
  padding:3px 10px;border-radius:3px;cursor:default;font-weight:500;
}
.pv-popup-closex{
  color:#888;font-size:15px;cursor:default;margin-left:4px;line-height:1;
}
.pv-popup-tabs{
  display:flex;background:#141428;
  border-bottom:1px solid #252540;
}
.pv-popup-tab{
  flex:1;text-align:center;padding:5px 1px;font-size:9.5px;
  color:#666;border-right:1px solid #252540;cursor:default;white-space:nowrap;
}
.pv-popup-tab:last-child{border-right:none;}
.pv-popup-tab.on{color:#4dd9ac;background:#141428;border-bottom:2px solid #4dd9ac;}
.pv-popup-sender{text-align:center;padding:.5rem .8rem .3rem;background:#141420;}
.pv-popup-sender-name{color:#ffffff;font-size:13px;font-weight:600;font-style:italic;}
.pv-popup-sender-date{color:#777;font-size:11px;margin-top:3px;}
.pv-popup-sep{width:90%;height:1px;background:#252540;margin:.3rem auto .1rem;}
.pvc:hover{background:rgba(255,255,255,.04);}
.pvc:empty{display:none;}
.code-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);width:100%;}
.code-box{
  background:#060610;border:1px solid var(--b1);border-radius:var(--r);
  padding:.5rem .8rem;font-size:11px;color:#7799ee;white-space:pre-wrap;
  word-break:break-all;line-height:1.6;min-height:50px;
  font-family:'Courier New',monospace;user-select:all;cursor:pointer;
  transition:border-color .2s;margin:.3rem 0 .4rem;width:100%;
}
.code-box:hover{border-color:var(--b2);}
.tip{
  font-size:11px;color:var(--muted);line-height:1.6;
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r);padding:.6rem .8rem;
  width:100%;
}
.page-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  height:var(--footer);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;text-align:center;
  color:#ff9933;text-shadow:0 0 8px rgba(255,127,0,.5);
  padding:0 1.5rem;line-height:1.3;
  border-top:1px solid rgba(255,127,0,.3);
  background:var(--s1);
}
.page-footer details{display:inline-block;text-align:center;}
.page-footer summary{cursor:pointer;list-style:none;outline:none;}
.page-footer summary::-webkit-details-marker{display:none;}
.page-footer summary::after{content:' ▾';opacity:.6;font-size:10px;}
.page-footer details[open] summary::after{content:' ▴';}
.page-footer details .disclaimer-body{
  position:absolute;left:50%;bottom:calc(var(--footer) + 6px);
  transform:translateX(-50%);max-width:min(640px,calc(100vw - 2rem));
  background:var(--s2);border:1px solid rgba(255,127,0,.3);
  border-radius:8px;padding:12px 16px;margin:0;
  font-size:11px;font-weight:400;line-height:1.55;color:var(--text);
  text-shadow:none;text-align:left;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.page-footer details .disclaimer-body strong{
  display:block;color:#ff9933;font-size:11.5px;letter-spacing:.5px;
  margin-bottom:6px;text-transform:uppercase;
}
.page-footer details .disclaimer-body ul{
  margin:0;padding-left:18px;list-style:disc;
}
.page-footer details .disclaimer-body li{margin:2px 0;}
.howto{display:flex;flex-direction:column;gap:.55rem;font-size:12px;line-height:1.5;color:var(--text);}
.howto-row{display:flex;gap:.6rem;align-items:flex-start;}
.howto-step{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(179,136,255,.12);border:1px solid rgba(179,136,255,.35);
  color:var(--purple);font-size:11px;font-weight:600;
}
.howto-row b{color:var(--text);}
.howto-row i{color:var(--pink);font-style:normal;}
.howto-tip{
  margin-top:.2rem;padding:.45rem .6rem;
  background:rgba(126,200,126,.06);border:1px solid rgba(126,200,126,.18);
  border-radius:var(--r);color:var(--green);font-size:11px;line-height:1.5;
}
.howto-intro{
  font-size:12px;line-height:1.4;color:var(--muted);font-style:italic;
  margin-bottom:.15rem;
}
.howto-extras{
  margin-top:.6rem;padding:.55rem .7rem;
  background:rgba(126,200,126,.05);border:1px solid rgba(126,200,126,.18);
  border-radius:var(--r);
}
.howto-extras-title{
  font-size:11px;font-weight:600;color:var(--green);
  margin-bottom:.35rem;letter-spacing:.3px;
  display:flex;align-items:center;gap:.35rem;
}
.howto-extras-title .fa-icon{color:var(--gold);}
.howto-extras ul{
  margin:0;padding-left:1.1rem;list-style:disc;
  font-size:11.5px;line-height:1.55;color:var(--text);
}
.howto-extras li{margin:.2rem 0;}
.howto-extras li b{color:var(--text);}
.howto-row--highlight{
  padding:.5rem .6rem;border-radius:var(--r);
  background:rgba(255,127,0,.08);
  border:1px solid rgba(255,127,0,.3);
  box-shadow:0 0 10px rgba(255,127,0,.1);
}
.howto-row--highlight .howto-step{
  background:rgba(255,127,0,.2);
  border-color:#ff9933;color:#ff9933;
}
.howto-row--highlight b{color:#ffb066;}
.howto-row--highlight > div{color:#ffd9b3;}
.opt-panel{
  font-size:11px;line-height:1.6;
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r);padding:.6rem .8rem;
  display:none;width:100%;box-sizing:border-box;
  transition:border-color .3s;
}
.opt-panel.warn-state{border-color:rgba(255,179,71,.35);}
.opt-panel.over-state{border-color:rgba(255,77,77,.35);}
.opt-header{font-weight:600;font-size:11px;margin-bottom:.4rem;}
.opt-item{display:flex;gap:.4rem;align-items:flex-start;color:var(--muted);padding:1px 0;}
.opt-icon{flex-shrink:0;width:1.1rem;text-align:center;}
.opt-act{cursor:pointer;border-radius:4px;transition:background .12s;margin:-1px -3px;padding:1px 3px;}
.opt-act:hover{background:rgba(255,113,184,.08);}
.opt-act-btn{
  margin-left:auto;font-size:10px;
  color:var(--pink);
  background:rgba(255,113,184,.07);
  border:1px solid rgba(255,113,184,.18);
  border-radius:10px;padding:1px 7px;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .12s;
}
.opt-act:hover .opt-act-btn{background:rgba(255,113,184,.16);}

/* ── templates (right) ── */
.lang-tabs{display:flex;border-bottom:1px solid var(--b1);}
.ltab{
  flex:1;padding:.5rem;text-align:center;font-size:11px;
  font-weight:500;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  user-select:none;
}
.ltab:hover{color:var(--text);}
.ltab.on{color:var(--pink);border-bottom-color:var(--pink);}
.lang-panel{display:none;padding:.6rem .75rem;}
.lang-panel.on{display:block;}

/* ── modal ── */
.modal-bg{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:200;justify-content:center;align-items:center;
  backdrop-filter:blur(3px);
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--s2);border:1px solid var(--b2);
  border-radius:var(--r-lg);padding:1.1rem;
  width:300px;max-width:94vw;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-title{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--subtle);margin-bottom:.7rem;}
.swatches{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:.6rem;}
.swatch{width:22px;height:22px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .12s,border-color .12s;}
.swatch:hover{transform:scale(1.15);border-color:rgba(255,255,255,.5);}
.grad-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer;margin-bottom:.5rem;}
.grad-toggle input{margin:0;}
.grad-row{display:flex;gap:8px;margin-bottom:.5rem;}
.grad-row>div{flex:1;}
.grad-sub{font-size:10px;color:var(--muted);margin-bottom:3px;}
.grad-preview{height:22px;border-radius:var(--r);margin-bottom:.5rem;border:1px solid var(--b1);}
.color-row{display:flex;gap:6px;align-items:center;margin-bottom:.6rem;}
.color-row input[type="color"]{width:28px;height:28px;padding:2px;border-radius:var(--r);border:1px solid var(--b1);background:var(--s3);cursor:pointer;flex-shrink:0;}
.color-row input[type="text"]{margin:0;flex:1;}
.custom-color-block{
  background:rgba(125,211,252,.06);
  border:1px solid rgba(125,211,252,.18);
  border-radius:8px;
  padding:10px 12px;margin-bottom:.5rem;
}
.custom-color-label{
  font-size:11px;font-weight:600;color:#7dd3fc;
  letter-spacing:.3px;margin-bottom:6px;
}
.custom-color-row{margin-bottom:0;}
.custom-color-row input[type="color"]{width:34px;height:34px;}
.custom-color-row input[type="text"]{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;letter-spacing:1px;}
.modal-btns{display:flex;gap:6px;}
.modal-btns .btn{margin:0;}
.nocolor{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--b1);display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);cursor:pointer;}
.nocolor input{margin:0;}

/* ── custom checkbox ── */
input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:18px !important;height:18px;min-width:18px;
  background:var(--s3);border:1.5px solid var(--b2);
  border-radius:4px;cursor:pointer;position:relative;
  margin:0;flex-shrink:0;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
input[type="checkbox"]:hover{
  border-color:var(--purple);background:var(--b2);
}
input[type="checkbox"]:checked{
  background:var(--purple);border-color:var(--purple);
  box-shadow:0 0 8px rgba(179,136,255,.3);
}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;
  left:5.5px;top:1.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
input[type="checkbox"]:focus-visible{
  outline:2px solid var(--purple);outline-offset:2px;
}

/* ── scrollbar ── */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--subtle);}

/* ── icon sizing for specific spots ── */
.proto-notice-icon{color:#ff9933;font-size:1em;margin-right:.15em;}
.opt-header-icon{display:inline-flex;align-items:center;margin-right:.4em;font-size:1.1em;}
.opt-header{display:flex;align-items:center;gap:.1em;}
.opt-icon{flex-shrink:0;width:1.1rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:.95em;}
.pv-popup-closex .fa-icon{font-size:13px;}
.pv-arr .fa-icon{font-size:10px;}
.tb-trust .fa-icon{font-size:10px;margin-right:1px;}
.howto-tip .fa-icon{color:var(--gold);margin-right:.2em;}

/* ── animations & transitions ── */
.sec-body{max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease;opacity:0;}
.sec-body.open{max-height:2000px;opacity:1;}
.pvc{transition:color .2s,transform .15s;}
.pvc:hover{transform:scale(1.02);}
.lbtn{transition:background .2s,border-color .2s,color .2s,box-shadow .2s;}
.chip{transition:background .15s,border-color .15s,color .15s,box-shadow .15s;}
.code-box{transition:border-color .3s;}
.modal-bg{transition:opacity .2s;}
.modal{transition:transform .2s,opacity .2s;}
.modal-bg:not(.open){opacity:0;pointer-events:none;}
.modal-bg:not(.open) .modal{transform:scale(.95);opacity:0;}

/* ── undo / redo / share buttons ── */
.btn-undo,.btn-redo{border-color:var(--b2);color:var(--subtle);min-width:auto;padding:8px 14px;transition:opacity .25s,border-color .15s,color .15s;}
.btn-undo:hover,.btn-redo:hover{border-color:var(--purple);color:var(--purple);}
.btn-undo:not(.disabled){border-color:rgba(179,136,255,.4);color:var(--purple);}
.btn-undo.disabled,.btn-redo.disabled{opacity:.3;pointer-events:none;}
.btn-share{border-color:var(--green);color:var(--green);}
.btn-share:hover{background:rgba(126,200,126,.12);}

/* ── favorites panel ── */
.fav-empty{font-size:11px;color:var(--muted);font-style:italic;padding:2px 4px;}
.fav-panel{
  padding:10px 12px;margin:8px;
  background:
    radial-gradient(circle at top left, rgba(255,113,184,.12), transparent 60%),
    radial-gradient(circle at bottom right, rgba(179,136,255,.10), transparent 60%),
    var(--s2);
  border:1px solid rgba(255,113,184,.28);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 3px 10px rgba(0,0,0,.2);
}
.fav-header{font-size:12px;font-weight:600;color:var(--pink);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.fav-chip{position:relative;padding-right:22px !important;}
.fav-rm{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:14px;line-height:1;color:var(--red);cursor:pointer;opacity:.5;
  transition:opacity .15s;
}
.fav-rm:hover{opacity:1;}
.fav-star{
  cursor:pointer;font-size:11px;margin-left:4px;opacity:.4;
  transition:opacity .15s,color .15s;color:var(--gold);
}
.fav-star:hover,.fav-star.fav-on{opacity:1;}

/* ── per-field char counter badges ── */
.fc-badge{
  font-size:11.5px;color:#a0a0b8;background:var(--s3);
  border:1px solid var(--b1);border-radius:8px;
  padding:2px 7px;min-width:26px;text-align:center;
  display:inline-block;margin-left:auto;
}

/* Bold / Italic toggle labels next to each text field — were 11px
   inline; override here so they're easier to read with glasses. */
.meta label{font-size:12.5px !important;color:#c8c8d8 !important;}
.meta label b,.meta label i{font-size:12.5px;}

/* ── code actions layout ── */
.code-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── copy toast ── */
.copy-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(20,20,35,.95);border:1px solid var(--green);
  color:var(--green);padding:10px 22px;border-radius:10px;
  font-size:14px;font-weight:600;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 15px rgba(126,200,126,.15);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:300;
  backdrop-filter:blur(8px);
}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.copy-toast .fa-icon{font-size:16px;flex-shrink:0;}
.copy-toast.warn{
  border-color:#ff7a7a;color:#ffd6d6;
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 18px rgba(255,77,77,.25);
  max-width:min(420px, calc(100vw - 2rem));
  font-size:13px;line-height:1.45;letter-spacing:.2px;
  align-items:flex-start;text-align:left;padding:12px 18px;
}
.copy-toast.warn .fa-icon{color:#ff7a7a;margin-top:2px;}
.copy-toast.warn b{color:#ff7a7a;display:block;margin-bottom:2px;font-size:13.5px;letter-spacing:.3px;}
.copy-toast .toast-action{
  margin-left:10px;padding:4px 12px;border-radius:6px;
  background:var(--purple);color:#fff;border:none;
  font:inherit;font-weight:600;font-size:12px;cursor:pointer;
  transition:background .15s,transform .1s;
}
.copy-toast .toast-action:hover{background:#9c6dff;transform:translateY(-1px);}
.copy-toast .toast-action:active{transform:translateY(0);}

/* ── custom editor ── */
.custom-editor{width:100%;}
.ce-preview-label{
  font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;margin-top:.3rem;
}
.ce-preview-popup{margin-bottom:.6rem;}
.ce-preview-content{
  text-align:center;padding:8px 12px 12px;min-height:40px;
  line-height:1.6;word-break:break-word;
}
/* pre-wrap keeps leading/trailing/multiple spaces visible — otherwise the
   browser collapses them and "  spaced   out  " renders as "spaced out". */
.ce-preview-content .ce-line{margin-bottom:2px;white-space:pre-wrap;}
.ce-code-label{
  font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;
}
.ce-code-hint{font-weight:400;letter-spacing:.5px;color:var(--subtle);font-size:9px;text-transform:none;}
.ce-toolbar{
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;
  background:var(--s2);border:1px solid var(--b2);border-bottom:none;
  border-radius:var(--r) var(--r) 0 0;align-items:center;
}
.ce-toolbar-group{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid var(--b1);}
.ce-toolbar-group:last-child{border-right:none;padding-right:0;}
.ce-label{font-size:10.5px;color:#d8d8e8;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.ce-btn{
  padding:4px 10px;font-size:12px;background:var(--s3);color:var(--text);
  border:1px solid var(--b2);border-radius:4px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;font-family:inherit;
}
.ce-btn:hover{background:var(--b2);border-color:var(--pink);color:#fff;}
.ce-size-preset{min-width:30px;text-align:center;font-weight:700;font-size:11px;letter-spacing:.5px;}
.ce-size-preset:hover{border-color:var(--purple);color:var(--purple);}
.ce-font-btn{font-size:13px;letter-spacing:0;}
.ce-font-btn:hover{border-color:var(--gold);color:var(--gold);}
.ce-size{width:50px;padding:3px 6px;font-size:12px;background:var(--s3);color:var(--text);border:1px solid var(--b2);border-radius:4px;text-align:center;}
.ce-color{width:28px;height:24px;padding:0;border:1px solid var(--b2);border-radius:4px;cursor:pointer;background:none;}
/* gradient mode dropdown + middle-only checkbox — inline next to Apply */
.ce-select{
  font-size:11px;font-family:inherit;
  padding:3px 6px;border-radius:6px;
  background:var(--s2);color:var(--text);
  border:1px solid var(--b2);cursor:pointer;
  outline:none;
}
.ce-select:hover,.ce-select:focus{border-color:var(--pink);}
.ce-grad-mid{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--subtle);cursor:pointer;user-select:none;
}
.ce-grad-mid:hover{color:var(--text);}
.ce-grad-mid input[type="checkbox"]{margin:0;flex-shrink:0;}
.ce-textarea{
  width:100%;min-height:180px;max-height:400px;resize:vertical;
  padding:12px 14px;font-family:'Consolas','Monaco','Courier New',monospace;
  font-size:13px;line-height:1.6;color:var(--text);
  background:var(--s1);border:1px solid var(--b2);
  border-radius:0 0 var(--r) var(--r);
  outline:none;tab-size:2;
}
.ce-textarea:focus{border-color:var(--pink);}
.ce-textarea::selection{background:rgba(255,113,184,.3);}

/* ── responsive app layout ────────────────────────────────────────────
   The app uses CSS variables --col-l and --col-r for the side panel widths.
   We tune them per breakpoint so columns shrink/grow gracefully and the
   preview area stays comfortable across resolutions.
*/

/* ── HIGH-RES SCALING ─────────────────────────────────────────────────
   Scale up the entire UI so it doesn't look tiny on large monitors.
   We increase panel widths, font sizes, spacing, preview size, and
   the gift image to fill the extra space comfortably.
*/

/* Full HD+ (≥1920px) — wider panels, bigger preview */
@media (min-width: 1920px){
  :root{--col-l:300px;--col-r:340px;}
  .preview-wrap{width:660px;}
  .tb-counter{padding:7px 24px;}
  .cv{font-size:18px;}
}

/* QHD / 1440p (≥2560px) — scale up everything noticeably */
@media (min-width: 2560px){
  :root{
    --col-l:380px;--col-r:420px;
    --top:68px;--proto:0px;
    --r:10px;--r-lg:14px;
  }
  body{font-size:15px;}

  /* topbar */
  .topbar{padding:0 2rem;column-gap:1.4rem;}
  .tb-brand h1{font-size:1.55rem;gap:.65rem;}
  .tb-brand-icon{font-size:1.7em;}
  .tb-brand{gap:1rem;}
  .tb-brand-sub{font-size:15px;}
  .tb-proto{font-size:11px;padding:4px 10px;}
  .tb-trust{font-size:11px;padding:4px 10px;}
  .tb-counter{padding:8px 26px;gap:.7rem;border-radius:24px;}
  .tb-counter-label{font-size:14px;}
  .cv{font-size:20px;}
  .tb-sep{font-size:12px;}
  .tb-feedback{font-size:14px;}
  .ui-lang-tab{font-size:14px;padding:7px 14px;border-radius:16px;}
  .flag{width:22px;height:16px;border-radius:3px;}

  /* proto notice */
  .proto-notice{font-size:15px;}

  /* sections */
  .sec-head{padding:.8rem 1.2rem;}
  .sec-title{font-size:12px;letter-spacing:2.5px;}
  .sec-title-icon{font-size:14px;}
  .sec-arrow{font-size:13px;}
  .sec-inner{padding:.9rem 1.2rem 1rem;}

  /* inputs */
  input[type="text"],input[type="number"]{font-size:14px;padding:8px 12px;}
  input[type="number"]{width:70px;}
  .cbtn{width:30px;height:30px;}

  /* chips */
  .chip{font-size:13px;padding:4px 10px;}
  .chip.t{font-size:13px;padding:4px 11px;}
  .sym-label{font-size:12px;}
  .meta-label{font-size:12px;}

  /* layout grid */
  .lbtn{font-size:13px;padding:7px 0;}

  /* buttons */
  .btn{font-size:14px;padding:9px 14px;}

  /* preview */
  .preview-wrap{width:780px;padding:1rem 1.4rem;gap:.8rem;}
  .pv-label{font-size:12px;}
  .pv-label span{font-size:12px;}
  .pv-card{min-height:520px;gap:6px;}
  .pv-gift-img{height:320px;}
  .pv-gift-img img{max-height:310px;max-width:310px;}
  .pv-popup-tab{font-size:11px;}
  .pv-popup-uname{font-size:16px;}
  .pv-popup-sender-name{font-size:15px;}
  .pv-popup-sender-date{font-size:13px;}
  .code-label{font-size:12px;}
  .code-box{font-size:13px;padding:.6rem 1rem;min-height:60px;}

  /* howto */
  .howto{font-size:14px;gap:.65rem;}
  .howto-step{width:24px;height:24px;font-size:13px;}
  .howto-tip{font-size:13px;}

  /* optimize tips */
  .opt-panel{font-size:13px;padding:.7rem 1rem;}
  .opt-header{font-size:13px;}

  /* templates */
  .category-icon{font-size:15px;width:1.2em;}

  /* modal */
  .modal{width:360px;padding:1.3rem;}
  .modal-title{font-size:12px;}
  .swatch{width:26px;height:26px;}
  .grad-toggle{font-size:14px;}
  .grad-sub{font-size:12px;}
  .nocolor{font-size:13px;}

  /* footer */
  .page-footer{font-size:14px;}
  :root{--footer:38px;}
}

/* 4K / Ultra-wide (≥3840px) — max out UI scaling, center the app */
@media (min-width: 3840px){
  :root{
    --col-l:480px;--col-r:520px;
    --top:78px;--proto:0px;
    --footer:44px;
  }
  body{font-size:17px;display:flex;justify-content:center;}
  .topbar,.proto-notice,.page-footer{max-width:none;}
  .app{
    width:100%;
    max-width:3200px;
    margin:0 auto;
  }

  /* topbar */
  .topbar{padding:0 2.5rem;column-gap:1.8rem;}
  .tb-brand h1{font-size:1.8rem;gap:.8rem;}
  .tb-brand-icon{font-size:1.9em;}
  .tb-brand{gap:1.2rem;}
  .tb-brand-sub{font-size:17px;}
  .tb-proto{font-size:12px;padding:5px 12px;border-radius:12px;}
  .tb-trust{font-size:12px;padding:5px 12px;border-radius:12px;}
  .tb-counter{padding:10px 32px;gap:.8rem;border-radius:28px;}
  .tb-counter-label{font-size:16px;}
  .cv{font-size:24px;}
  .tb-sep{font-size:14px;}
  .tb-feedback{font-size:16px;}
  .ui-lang-tab{font-size:16px;padding:8px 16px;border-radius:18px;}
  .flag{width:26px;height:18px;border-radius:3px;}

  /* proto notice */
  .proto-notice{font-size:17px;}

  /* sections */
  .sec-head{padding:1rem 1.5rem;}
  .sec-title{font-size:14px;letter-spacing:3px;}
  .sec-title-icon{font-size:16px;}
  .sec-arrow{font-size:15px;}
  .sec-inner{padding:1rem 1.5rem 1.2rem;}

  /* inputs */
  input[type="text"],input[type="number"]{font-size:16px;padding:10px 14px;border-radius:10px;}
  input[type="number"]{width:80px;}
  .cbtn{width:36px;height:36px;border-radius:10px;}

  /* chips */
  .chip{font-size:15px;padding:5px 12px;border-radius:24px;}
  .chip.t{font-size:15px;padding:6px 14px;}
  .sym-label{font-size:14px;}
  .meta-label{font-size:14px;}

  /* layout grid */
  .lbtn{font-size:15px;padding:9px 0;border-radius:10px;}

  /* buttons */
  .btn{font-size:16px;padding:11px 16px;border-radius:10px;}

  /* preview */
  .preview-wrap{width:960px;padding:1.2rem 1.8rem;gap:1rem;}
  .pv-label{font-size:14px;}
  .pv-label span{font-size:14px;}
  .pv-card{min-height:600px;gap:8px;}
  .pv-gift-img{height:380px;}
  .pv-gift-img img{max-height:370px;max-width:370px;}
  .pv-popup{border-radius:6px;}
  .pv-popup-tab{font-size:13px;padding:7px 2px;}
  .pv-popup-head{padding:10px 14px;}
  .pv-popup-uname{font-size:18px;}
  .pv-popup-backbtn{font-size:13px;padding:4px 12px;}
  .pv-popup-sender-name{font-size:17px;}
  .pv-popup-sender-date{font-size:15px;}
  .code-label{font-size:14px;}
  .code-box{font-size:15px;padding:.8rem 1.2rem;min-height:70px;}

  /* howto */
  .howto{font-size:16px;gap:.8rem;}
  .howto-step{width:28px;height:28px;font-size:15px;}
  .howto-tip{font-size:15px;}

  /* optimize tips */
  .opt-panel{font-size:15px;padding:.8rem 1.2rem;}
  .opt-header{font-size:15px;}

  /* templates */
  .category-icon{font-size:17px;width:1.3em;}

  /* modal */
  .modal{width:420px;padding:1.5rem;border-radius:16px;}
  .modal-title{font-size:14px;}
  .swatch{width:30px;height:30px;border-radius:6px;}
  .grad-toggle{font-size:16px;}
  .grad-sub{font-size:14px;}
  .nocolor{font-size:15px;}

  /* footer */
  .page-footer{font-size:16px;}

  /* reorder controls */
  .pv-arr{width:28px;height:24px;font-size:14px;border-radius:6px;}
  .pv-reorder{right:-36px;gap:4px;}
}

/* In-between: 2K ultrawide (≥2400px but <2560px) — gentle scale, centered */
@media (min-width: 2400px){
  body{display:flex;justify-content:center;}
  .topbar,.proto-notice,.page-footer{max-width:none;}
  .app{
    width:100%;
    max-width:2200px;
    margin:0 auto;
  }
}

/* Mid-narrow (≤1400px) — tighten columns a touch */
@media (max-width: 1400px){
  :root{--col-l:240px;--col-r:280px;}
}

/* Smaller laptops / windowed (≤1180px) */
@media (max-width: 1180px){
  :root{--col-l:220px;--col-r:255px;}
  .preview-wrap{padding:.5rem .75rem;gap:.5rem;width:540px;}
}

/* Compact laptops (≤980px) */
@media (max-width: 980px){
  :root{--col-l:200px;--col-r:230px;}
  .sec-inner{padding:.55rem .75rem .65rem;}
  .sec-head{padding:.55rem .75rem;}
  .preview-wrap{width:480px;}
  .pv-gift-img{height:220px;}
  .pv-gift-img img{max-height:210px;max-width:210px;}
}

/* Very narrow — collapse the right templates column to an overlay area below */
@media (max-width: 860px){
  .app{
    grid-template-columns:var(--col-l) 1fr;
    grid-template-rows:1fr auto;
  }
  .col-right{
    grid-column:1 / -1;
    grid-row:2;
    border-left:none;
    border-top:1px solid var(--b1);
    max-height:240px;
  }
  .col-mid{grid-row:1;}
  .col-left{grid-row:1;}
}

/* ── MOBILE (≤680px) ───────────────────────────────────────────────
   Tablets and phones. Stack everything vertically, preview FIRST,
   bigger touch targets, compact topbar.
*/
@media (max-width: 680px){
  :root{--top:52px;--proto:0px;--footer:0px;}
  body{overflow:auto;height:auto;-webkit-text-size-adjust:100%;}

  /* Topbar: tight 2-track grid */
  .topbar{
    padding:0 .6rem;
    grid-template-columns:1fr auto;
    column-gap:.4rem;
  }
  .tb-brand{gap:.35rem;flex-wrap:nowrap;overflow:hidden;}
  .tb-brand h1{font-size:1rem;letter-spacing:.3px;}
  .tb-brand-icon{font-size:1.4em;}
  .tb-proto,.tb-trust,.tb-brand-sep,.tb-brand-sub{display:none;}
  .tb-feedback{display:none;}
  .tb-right{gap:0;}
  .ui-lang{padding-left:0;border-left:none;gap:3px;}
  .ui-lang-tab{padding:5px 7px;font-size:11px;font-weight:500;gap:4px;}
  .flag{width:16px;height:11px;}

  /* Proto notice: compact */
  .proto-notice{
    font-size:11px;line-height:1.25;text-align:center;
    padding:0 .55rem;
  }

  /* App: vertical flex stack, preview FIRST */
  .app{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    height:auto;
    min-height:calc(100vh - var(--top) - var(--proto));
    padding-top:calc(var(--top) + var(--proto));
    padding-bottom:0;
  }
  .col{width:100%;max-height:none;overflow:visible;}
  .col-mid{order:1;background:var(--bg);}
  .col-left{order:2;border-right:none;border-top:1px solid var(--b1);}
  .col-right{
    order:3;
    border-left:none;border-top:1px solid var(--b1);
    grid-column:auto;grid-row:auto;
    max-height:none;
  }

  /* Preview wrap fills full mobile width */
  .preview-wrap{
    width:100%;max-width:100%;
    padding:.65rem .8rem;gap:.6rem;
  }
  .pv-gift-img{height:200px;}
  .pv-gift-img img{max-height:190px;max-width:190px;}

  /* Reorder controls — move inside the preview card so they don't clip off-screen */
  .pv-reorder{
    right:4px;padding-left:6px;
    background:linear-gradient(to left,rgba(20,20,32,.85) 50%,transparent);
    padding:6px;border-radius:6px;
  }
  .pv-arr{width:26px;height:22px;}

  /* Bigger touch targets — everywhere */
  .btn{padding:12px 14px;font-size:13px;min-height:44px;}
  .lbtn{padding:11px 4px;font-size:12px;min-height:40px;}
  .chip{padding:5px 10px;font-size:12px;line-height:1.5;}
  .chip.t{padding:6px 12px;font-size:12px;}
  .kao-toggle .chip{padding:8px 10px;}
  .sec-head{padding:.9rem 1rem;min-height:48px;}
  .sec-inner{padding:.8rem 1rem 1rem;}
  input[type="text"]{padding:10px 12px;font-size:14px;}
  input[type="number"]{padding:10px 12px;font-size:14px;width:78px;}
  .cbtn{width:32px;height:32px;}
  .ftoggle .chip{padding:6px 10px;}

  /* Color modal: takes most of the screen */
  .modal{width:92vw;max-width:400px;padding:1rem;}
  .swatch{width:28px;height:28px;}

  /* Footer: inline at end (no fixed positioning on mobile) */
  .page-footer{
    position:static;
    height:auto;
    padding:.75rem .9rem;
    font-size:11px;line-height:1.4;
  }

  /* Templates panel: open the first category by default-ish look — but keep collapsibles */
  .col-right{padding-bottom:.5rem;}
}

/* ── SMALL PHONES (≤420px) ─────────────────────────────────────── */
@media (max-width: 420px){
  .topbar{padding:0 .45rem;column-gap:.3rem;}
  .tb-brand h1{font-size:.92rem;}
  .tb-brand-icon{font-size:1.3em;}
  .ui-lang-tab{padding:5px 5px;font-size:10px;gap:3px;}
  .flag{width:14px;height:10px;}
  .proto-notice{font-size:10.5px;}
  .sec-head{padding:.8rem .8rem;}
  .sec-inner{padding:.7rem .8rem .9rem;}
  .preview-wrap{padding:.55rem .6rem;}
  .pv-gift-img{height:170px;}
  .pv-gift-img img{max-height:160px;max-width:160px;}
}

/* ── topbar responsive — prevent counter pill from overlapping brand ── */
/* The topbar uses a 1fr / auto / 1fr grid so the centered counter
   always has its own track. As space gets tight we progressively
   shrink/hide pieces to keep everything readable.
*/

/* Hide the long "for 3dxchat.com · by MissLarifari" subtitle when room is tight */
@media (max-width: 1280px){
  .tb-brand-sep,.tb-brand-sub{display:none;}
}

/* Compact counter pill — kick in earlier so it doesn't shove against feedback */
@media (max-width: 1200px){
  .tb-counter{padding:5px 12px;gap:.45rem;}
  .tb-counter-label{font-size:11px;}
  .cv{font-size:15px;}
  .tb-feedback{font-size:11px;}
  .ui-lang-tab{font-size:12px;padding:5px 9px;}
}

/* Counter mini form — hide "Chars"/"Bytes" labels and shorten feedback to just the link.
   Drops the pill width substantially so it stops crowding the right block. */
@media (max-width: 1100px){
  .tb-counter{padding:4px 10px;gap:.35rem;}
  .tb-counter-label{display:none;}
  .tb-feedback span[data-i18n="feedback_post"]{display:none;}
}

/* Hide trust badge and shrink proto badge */
@media (max-width: 950px){
  .tb-trust{display:none;}
  .tb-proto{padding:3px 6px;letter-spacing:1px;}
}

/* Drop counter pill entirely when there's just no room. */
@media (max-width: 880px){
  .topbar{grid-template-columns:auto 1fr;column-gap:.6rem;}
  .tb-counter{display:none;}
  .tb-right{justify-self:end;}
}

/* Below this point the PROTOTYPE badge would still push the brand
   too far right next to the feedback+langs block. Drop it. */
@media (max-width: 760px){
  .tb-proto{display:none;}
}

@media (max-width: 640px){
  .tb-feedback{display:none;}
  .ui-lang{padding-left:.5rem;}
  .ui-lang-tab{padding:4px 7px;font-size:11px;}
}