/* ════════════════════════════════════════════════════════════
   FRONT STYLE · DIGITAL BRAND LIBRARY
   ════════════════════════════════════════════════════════════ */
:root{
  --bar:#121016;
  --rail:#0f171d;
  --canvas:#232425;
  --tile-dark:#1b1c1d;
  --line:#47454a;
  --grey8:#515151;
  --lemon:#32C6AE;   /* accent — static teal fallback (reduced motion) */
  --white:#ffffff;
  --bar-h:30px;
  --rail-w:85px;
  --radius:12px;
}
/* ── accent: gentle blue ↔ green pulse (replaces the lemon yellow).
   @property registers the variable as a color so it interpolates
   smoothly — no hard blink. Reduced-motion users keep the teal. ── */
@property --lemon{syntax:'<color>';inherits:true;initial-value:#32C6AE}
@keyframes fs-accent{0%,100%{--lemon:#36A7F0}50%{--lemon:#2EE56B}}
html{animation:fs-accent 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html{animation:none}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Bai Jamjuree',-apple-system,sans-serif;
  background:#000;color:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--lemon);color:#000}

/* scrollbar, app-window vibe */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#3a3b3c;border-radius:6px;border:2px solid var(--canvas)}
::-webkit-scrollbar-track{background:transparent}

.window{
  min-height:100vh;
  overflow:clip;display:flex;flex-direction:column;
  background:var(--canvas);
}

/* ─── top bar ─────────────────────────────────────────────── */
.bar-top{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--bar-h);background:var(--bar);
  display:flex;align-items:center;
}
.bar-title{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;letter-spacing:5px;text-transform:uppercase;
  white-space:nowrap;
}
.bar-title .muted{color:var(--grey8)}
.bar-title .t-mob{display:none}

/* ─── layout: rail + canvas ───────────────────────────────── */
.app-body{display:flex;flex:1;padding-top:var(--bar-h)}
.rail{
  position:fixed;left:0;top:var(--bar-h);bottom:0;z-index:150;
  width:var(--rail-w);background:var(--rail);
  display:flex;flex-direction:column;align-items:center;
}
.rail-logo{width:100%;height:59px;padding:0;display:block;position:relative}
.rail-logo img{
  position:absolute;inset:0;width:100%;height:59px;object-fit:contain;
  padding:10px 18px;   /* the mark never touches the rail edges */
  transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1);
}
/* scrolled: brand mark replaces the FRONT STYLE logo; hover brings F back */
.rail-logo .rl-b{opacity:0;transform:translateY(8px) scale(.85);padding:14px}
body.tabs-docked .rail-logo .rl-f{opacity:0;transform:translateY(-8px) scale(.9)}
body.tabs-docked .rail-logo .rl-b{opacity:1;transform:none}
body.tabs-docked .rail-logo:hover .rl-f{opacity:1;transform:none}
body.tabs-docked .rail-logo:hover .rl-b{opacity:0;transform:translateY(8px) scale(.85)}
/* brand switcher — scrolls between the FRONT STYLE logo and the bottom icons,
   never overlapping either */
.rail-brands{
  display:flex;flex-direction:column;gap:10px;align-items:center;
  flex:1 1 auto;min-height:0;width:100%;
  margin-top:16px;padding:4px 0 10px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.rail-brands::-webkit-scrollbar{width:6px}
.rail-brands::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.rail-brands::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}

/* app-icon tile — rounded square (iOS curvature), monochrome mark:
   white on dark · black on light · inverted when selected */
.rail-tile{
  flex:0 0 auto;
  width:56px;height:56px;border-radius:16px;overflow:hidden;padding:11px;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:transparent;          /* only the selected brand gets a chip — keeps the rail clean */
  transition:background .18s,transform .18s,box-shadow .18s;
}
.rail-tile img{
  width:100%;height:100%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;transition:.18s;   /* white mark on dark */
}
.rail-tile:hover{background:rgba(255,255,255,.12)}
.rail-tile:not(.active):hover img{opacity:1}
.rail-tile.active{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.rail-tile.active img{filter:brightness(0);opacity:1}          /* inverted: black mark on white */
.rail-tile.add{background:rgba(255,255,255,.05)}
.rail-tile.add .circ{
  width:34px;height:34px;border-radius:50%;background:#1e1e1e;
  box-shadow:inset 0 1px 2px #000;
  display:flex;align-items:center;justify-content:center;
  color:#9b9b9b;font-size:18px;font-weight:500;line-height:1;
}
.rail-tile.add img{filter:none}
.rail-tile.add:hover .circ{color:var(--lemon)}
.canvas{
  flex:1;margin-left:var(--rail-w);
  background:var(--canvas);
  min-width:0;
}

/* ─── hero ────────────────────────────────────────────────── */
.hero{
  position:fixed;top:var(--bar-h);left:var(--rail-w);right:0;z-index:30;
  height:calc(100vh - var(--bar-h));
  overflow:hidden;background:#181818;
  clip-path:inset(0 0 var(--clip,0px) 0);
  will-change:clip-path;
  color:#fff; /* hero text follows the COVER tone, not the UI theme */
}
body.tone-light .hero{color:#141414}
.hero-spacer{height:calc(100vh - var(--bar-h))}
body[data-page="colors"] .hero,
body[data-page="typography"] .hero,
body[data-page="photography"] .hero,
body[data-page="signature"] .hero,
body[data-page="print"] .hero,
body[data-page="social"] .hero,
body[data-page="logoeditor"] .hero,
body[data-page="code"] .hero{position:relative;top:0;left:0;height:199px;clip-path:none}
body[data-page="colors"] .hero .hero-logo,
body[data-page="typography"] .hero .hero-logo,
body[data-page="photography"] .hero .hero-logo,
body[data-page="signature"] .hero .hero-logo,
body[data-page="print"] .hero .hero-logo,
body[data-page="social"] .hero .hero-logo,
body[data-page="logoeditor"] .hero .hero-logo,
body[data-page="code"] .hero .hero-logo{height:52px;top:22px}
body[data-page="colors"] .hero .hero-title,
body[data-page="typography"] .hero .hero-title,
body[data-page="photography"] .hero .hero-title,
body[data-page="signature"] .hero .hero-title,
body[data-page="print"] .hero .hero-title,
body[data-page="social"] .hero .hero-title,
body[data-page="logoeditor"] .hero .hero-title,
body[data-page="code"] .hero .hero-title{top:160px;font-size:10px;letter-spacing:4px}
body[data-page="colors"] .hero .hero-meta,
body[data-page="typography"] .hero .hero-meta,
body[data-page="photography"] .hero .hero-meta,
body[data-page="signature"] .hero .hero-meta,
body[data-page="print"] .hero .hero-meta,
body[data-page="social"] .hero .hero-meta,
body[data-page="logoeditor"] .hero .hero-meta,
body[data-page="code"] .hero .hero-meta{display:none}
body[data-page="colors"] .hero .hero-edit,
body[data-page="typography"] .hero .hero-edit,
body[data-page="photography"] .hero .hero-edit,
body[data-page="signature"] .hero .hero-edit,
body[data-page="print"] .hero .hero-edit,
body[data-page="social"] .hero .hero-edit,
body[data-page="logoeditor"] .hero .hero-edit,
body[data-page="code"] .hero .hero-edit{width:34px;height:34px}
body[data-page="colors"] .hero .hero-reset,
body[data-page="typography"] .hero .hero-reset,
body[data-page="photography"] .hero .hero-reset,
body[data-page="signature"] .hero .hero-reset,
body[data-page="print"] .hero .hero-reset,
body[data-page="social"] .hero .hero-reset,
body[data-page="logoeditor"] .hero .hero-reset,
body[data-page="code"] .hero .hero-reset{width:34px;height:34px}
/* parallax: as the banner clips, the photo shifts up by half the clip,
   so the visible strip always shows the CENTER of the image */
.hero-media-wrap{
  position:absolute;inset:0;overflow:hidden;
  transform:translateY(calc(var(--clip,0px) * -0.5));
  will-change:transform;
}
.hero-media{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.yt-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.yt-wrap iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,178vh);height:max(56.25vw,100.5vh);border:0;
}
.hero-dim{position:absolute;inset:0;background:rgba(0,0,0,var(--dim,0.18))}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),transparent 30%,transparent 62%,rgba(0,0,0,.45))}

/* main menu — always visible in the hero, left-aligned clear of the logo */
.hero-nav{
  position:absolute;left:26px;top:21px;z-index:5;
  display:flex;gap:24px;align-items:center;
}
.hero-nav a{
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:inherit;opacity:.6;transition:.15s;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
body.tone-light .hero-nav a{text-shadow:0 1px 10px rgba(255,255,255,.4)}
.hero-nav a:hover{opacity:1}
.hero-nav a.on{opacity:1;color:#fff}
body.tone-light .hero-nav a.on{color:#0e7e78}

.hero-logo{
  position:absolute;left:50%;top:60px;transform:translateX(-50%);
  height:95px;width:130px;display:flex;align-items:center;justify-content:center;
}
.hero-logo img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
/* dark/light pair — only one shows, depending on the cover tone */
.hero-logo .logo-dark{display:none}
body.tone-light .hero-logo .logo-light{display:none}
body.tone-light .hero-logo .logo-dark{display:block;filter:drop-shadow(0 2px 14px rgba(255,255,255,.3))}
.hero-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:22px;font-weight:700;letter-spacing:6px;text-transform:uppercase;
  text-align:center;white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
/* inline rename — click the title to edit the brand name */
.hero-title[contenteditable]{cursor:text;padding:3px 12px;border-radius:8px;transition:background .15s,box-shadow .15s}
.hero-title[contenteditable]:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:rgba(0,0,0,.2)}
.hero-title[contenteditable]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--lemon);background:rgba(0,0,0,.32)}
body.tone-light .hero-title[contenteditable]:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);background:rgba(255,255,255,.35)}

/* hero mark picker — hover the symbol to choose another logo variant */
.hero-logo.pickable{cursor:pointer}
.hero-logo .logo-alts{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  width:max-content;max-width:330px;padding:9px;
  background:rgba(10,11,13,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:13px;
  box-shadow:0 18px 50px -16px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;
}
/* invisible bridge over the gap so the cursor never drops into a dead zone */
.hero-logo .logo-alts::before{content:'';position:absolute;left:-10px;right:-10px;top:-16px;height:16px}
.hero-logo.pickable:hover .logo-alts,
.hero-logo.open .logo-alts{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.logo-alt{
  width:48px;height:48px;flex:none;padding:7px;border-radius:9px;cursor:pointer;
  background:#6f6f6f;border:1.5px solid transparent;transition:.15s;
}
.logo-alt img{width:100%;height:100%;object-fit:contain;filter:none;display:block}
.logo-alt:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5)}
.logo-alt.on{border-color:var(--lemon)}
.hero-edit{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:10px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.hero-edit svg{width:19px;height:19px}
.hero-edit:hover{background:var(--lemon)}
.hero-edit:hover svg{stroke:#000}
.hero-reset{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:10px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.hero-reset[hidden],.hero-edit[hidden]{display:none}

/* reposition / zoom the cover */
.hero-crop{
  position:absolute;right:66px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:10px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:.18s;z-index:6;
}
.hero-crop svg{width:19px;height:19px}
.hero-crop:hover{background:var(--lemon)}
.hero-crop:hover svg{stroke:#000}
.hero.cropping .hero-crop{background:var(--lemon)}
.hero.cropping .hero-crop svg{stroke:#000}
.hero .hero-crop{opacity:calc(1 - 1.4*var(--t,0))}   /* fades out with the cover on scroll */
.hero-crophint{
  position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:8;
  display:none;align-items:center;gap:14px;
  background:rgba(0,0,0,.64);backdrop-filter:blur(8px);
  padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
}
.hero.cropping .hero-crophint{display:flex}
.hero-crophint .cw{font-size:9.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;white-space:nowrap}
.hero-crophint .cz{width:120px;accent-color:var(--lemon)}
.hero-crophint .cd{background:var(--lemon);color:#000;border-radius:7px;padding:7px 14px;font-size:9.5px;font-weight:700;letter-spacing:2px}
.hero.cropping .hero-media-wrap{cursor:grab;z-index:5}
.hero.cropping .hero-media-wrap:active{cursor:grabbing}
/* let drag reach the image — overlays/labels go pass-through while cropping */
.hero.cropping .hero-dim,.hero.cropping .hero-grad,.hero.cropping .hero-logo,
.hero.cropping .hero-title,.hero.cropping .hero-meta,.hero.cropping .hero-nav{pointer-events:none}
.hero-reset svg{width:18px;height:18px}
.hero-reset:hover{background:#ff4a4a}
.hero .hero-reset{opacity:calc(1 - 1.4*var(--t,0))}

.hero-meta{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;justify-content:center;
}
.hero-meta .col{width:158px;display:flex;flex-direction:column;gap:3px;text-align:center}
.hero-meta .lab{
  border-bottom:1px solid #fff;padding:6px 0;
  font-size:8px;font-weight:700;letter-spacing:3px;text-transform:capitalize;
}
.hero-meta .val{
  padding:8px 0 0;
  font-size:8px;font-weight:700;letter-spacing:5px;text-transform:uppercase;line-height:1.55;
}
/* the brand facts are editable — click to change Client / Location / Year … */
.hero-meta .val[contenteditable]{cursor:text;border-radius:5px;min-height:14px;transition:background .15s,box-shadow .15s}
.hero-meta .val[contenteditable]:empty::before{content:'—';opacity:.5}
.hero-meta .val[contenteditable]:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:rgba(0,0,0,.18)}
.hero-meta .val[contenteditable]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--lemon);background:rgba(0,0,0,.3)}
body.tone-light .hero-meta .val[contenteditable]:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);background:rgba(255,255,255,.4)}

/* light cover → dark text everywhere over the photo */
body.tone-light .hero-title{color:#141414;text-shadow:0 1px 16px rgba(255,255,255,.5)}
body.tone-light .hero-meta{color:#141414}
body.tone-light .hero-meta .lab{border-color:#141414}
body.tone-light .hero-grad{
  background:linear-gradient(to bottom,rgba(255,255,255,.18),transparent 30%,transparent 62%,rgba(255,255,255,.3));
}
body.tone-light .hero-dim{background:rgba(255,255,255,calc(var(--dim,.18)*.6))}

/* hero collapse states driven by --t (0 = full, 1 = banner) */
.hero .hero-logo{height:calc(95px - 43px*var(--t,0));top:calc(60px - 38px*var(--t,0))}
.hero .hero-title{
  top:calc(50% - (50% - 165px)*var(--t,0));
  font-size:calc(22px - 12px*var(--t,0));
  letter-spacing:calc(6px - 2px*var(--t,0));
}
.hero .hero-meta{opacity:calc(1 - 2.2*var(--t,0))}
.hero .hero-edit{opacity:calc(1 - 1.4*var(--t,0))}

/* ─── tabs row — retired: the hero-nav (always visible in the
   banner) is the single menu; keeping both duplicated the links */
.tabs{display:none}
/* when the in-page menu scrolls under the banner, its links dock
   into the top bar (left side) — see .bar-tabs */
.bar-tabs{
  /* starts right of the rail/logo column, with breathing room from the edge */
  position:absolute;left:calc(var(--rail-w) + 26px);top:0;bottom:0;
  display:flex;align-items:center;gap:20px;
  opacity:0;pointer-events:none;transform:translateY(4px);
  transition:.25s;
}
.bar-tabs a{
  font-size:8.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#fff;opacity:.45;transition:.15s;
}
.bar-tabs a:hover{opacity:1}
.bar-tabs a.on{opacity:1;color:#fff}
body.tabs-docked .bar-tabs{opacity:1;pointer-events:auto;transform:translateY(0)}
body.tabs-docked .bar-title{opacity:0;pointer-events:none;transition:.2s}
html.theme-light .bar-tabs a{color:#141414}
html.theme-light .bar-tabs a.on{color:#141414}
.bar-brand{height:13px;width:auto;margin-right:8px;display:block}
html.theme-light .bar-brand{filter:invert(1)}
.tabs a,.tabs span{
  font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
  opacity:.5;transition:.15s;
}
.tabs a:hover{opacity:1}
.tabs .on{opacity:1}
.tabs .new{
  margin-left:auto;color:#ff4a4a;font-size:9px;letter-spacing:3px;font-weight:700;opacity:1;
}

/* ─── library / chapters ──────────────────────────────────── */
.library{
  position:relative;z-index:5;
  background:var(--canvas);
  padding:0 44px 140px;
}
.chapter-chip{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:34px 0 4px;
  background:#191a1b;border:1.5px dashed #5a5b5c;border-radius:10px;
  font-size:24px;font-weight:300;line-height:1;color:#cfcfcf;
  transition:.15s;
}
.chapter-chip.add-chapter:hover{border-color:var(--lemon);color:var(--lemon);background:#222324}
.chapter-head{
  display:flex;align-items:center;gap:10px;
  margin:34px 0 14px;
  font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
}
.chapter-head .grip{color:#5c5c5c}
.ch-title{
  outline:none;padding:3px 6px;border-radius:6px;cursor:text;min-width:40px;
  transition:.15s;border-bottom:1px dashed transparent;
}
.ch-title:hover{border-bottom-color:#5a5b5c}
.ch-title:focus{background:#191a1b;border-bottom-color:var(--lemon)}
.ch-del{
  min-width:22px;height:22px;border-radius:11px;padding:0 7px;
  background:#161718;border:1px solid #3a3b3c;color:#ddd;
  font-size:13px;line-height:1;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;
}
.chapter-head:hover .ch-del{opacity:1}
.ch-del:hover{background:#ff4a4a;border-color:#ff4a4a;color:#fff}
.ch-del.armed{
  opacity:1;background:#ff4a4a;border-color:#ff4a4a;color:#fff;
  font-size:8px;font-weight:700;
}

/* download-all dropdown on the first chapter line */
.dl-all{margin-left:auto;position:relative}
.dl-all-btn{
  display:flex;align-items:center;gap:9px;
  background:#161718;border:1px solid #2e2f30;border-radius:9px;
  padding:10px 16px;
  font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  transition:.15s;
}
.dl-all-btn svg{width:13px;height:13px}
.dl-all:hover .dl-all-btn{border-color:var(--lemon);color:var(--lemon)}
.dl-all-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  background:var(--lemon);border-radius:10px;padding:7px;width:170px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:.18s;
}
/* invisible bridge so the cursor can cross the gap without closing it */
.dl-all-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dl-all.open .dl-all-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.dl-all-menu a{
  display:block;padding:10px 12px;border-radius:7px;color:#000;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
}
.dl-all-menu a:hover{background:rgba(0,0,0,.1)}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:26px;
}
.tile-card{position:relative}
.tile-card.big{grid-column:span 2;grid-row:span 2}
.tile{
  aspect-ratio:1/1;border-radius:6px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;
  /* always checkered — logo sits on top */
  background:
    conic-gradient(#262728 90deg,#202122 90deg 180deg,#262728 180deg 270deg,#202122 270deg);
  background-size:22px 22px;
}
.tile.light{ /* light checkerboard for dark logos */
  background:
    conic-gradient(#ffffff 90deg,#e9e7e4 90deg 180deg,#ffffff 180deg 270deg,#e9e7e4 270deg);
  background-size:22px 22px;
}
.tile img{width:56%;height:56%;object-fit:contain;position:relative;z-index:2}
.tile.invert img{filter:invert(1)}
.tile:hover{outline:1px solid #3c3d3e;outline-offset:2px}
.tile .zoom{
  position:absolute;right:8px;top:8px;z-index:4;
  width:28px;height:28px;border-radius:7px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;
}
.tile.light .zoom{background:rgba(0,0,0,.65)}
.tile:hover .zoom{opacity:1}
.tile .zoom:hover{background:var(--lemon);color:#000}
.tile .zoom svg{width:13px;height:13px}
.tile .tile-del{
  position:absolute;left:8px;top:8px;z-index:4;
  min-width:28px;height:28px;border-radius:7px;padding:0 6px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px);
  font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;
}
.tile.light .tile-del{background:rgba(0,0,0,.65)}
.tile:hover .tile-del{opacity:1}
.tile .tile-del:hover{background:#ff4a4a}
.tile .tile-del.armed{
  opacity:1;background:#ff4a4a;
  font-size:9px;font-weight:700;letter-spacing:1px;
}
.tile-label{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 0 0;
  font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#e9e9e9;
}
.tile-label .dl{opacity:.9;display:flex}
.tile-label .dl:hover{color:var(--lemon)}
.tile-label svg{width:13px;height:13px}

/* upload card */
.upload-card{
  aspect-ratio:1/1;border:1.5px dashed #5a5b5c;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#9a9a9a;cursor:pointer;transition:.15s;
}
.upload-card:hover{border-color:var(--lemon);color:#d6d6d6}
.upload-card svg{width:44px;height:44px;margin-bottom:14px}
.upload-card .l1{font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase}
.upload-card .l2{font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#6f6f6f}
.upload-card .browse{
  margin-top:16px;font-size:10px;font-weight:700;letter-spacing:6px;text-transform:uppercase;
}

/* ─── yellow context menu ─────────────────────────────────── */
.ctx{
  position:fixed;z-index:400;display:none;
  background:var(--lemon);color:#000;border-radius:10px;
  padding:7px;width:210px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.ctx.open{display:block}
.ctx button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:7px;text-align:left;
}
.ctx button:hover{background:rgba(0,0,0,.1)}
.ctx .ic{
  width:24px;height:24px;border:1.5px solid #000;border-radius:5px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.ctx .ic svg{width:12px;height:12px}
.ctx .tt{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.ctx .ss{font-size:8px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:.55}

/* ─── COLORS PAGE ─────────────────────────────────────────── */
.colors-wrap,.page-wrap{padding:0 44px 160px;position:relative;z-index:20;background:var(--canvas)}
.color-row{display:flex;gap:14px;margin-top:46px;flex-wrap:wrap}

/* ── gradients — living color swatches (cursor-reactive) ──── */
.grad-sec{margin-top:46px}
.grad-sec .lb{
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#9a9a9a;display:block;
}
.grad-row{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.grad-card{
  width:230px;border:.5px solid var(--grey8);border-radius:8px;
  display:flex;flex-direction:column;gap:4px;align-items:center;
  cursor:pointer;transition:.15s;position:relative;
}
.grad-card:hover{border-color:#8a8a8a}
.grad-card .gchip{
  width:100%;height:144px;border-radius:8px;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
}
.grad-card .nm{
  padding:10px 8px 12px;min-height:38px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  text-align:center;
}
.grad-card .hx{
  position:absolute;top:8px;right:8px;
  font-size:8px;letter-spacing:1px;background:rgba(0,0,0,.45);color:#fff;
  padding:3px 6px;border-radius:5px;opacity:0;transition:.15s;
}
.grad-card:hover .hx{opacity:1}
html.theme-light .grad-card{border-color:#c4c0b8}

.color-card{
  width:151px;border:.5px solid var(--grey8);border-radius:8px;
  display:flex;flex-direction:column;gap:4px;align-items:center;
  cursor:pointer;transition:.15s;position:relative;
}
.color-card:hover{border-color:#8a8a8a}
.color-card .chip{
  width:100%;height:144px;border-radius:8px;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
}
.color-card.add .chip{
  background:transparent;border:1px solid var(--grey8);
  display:flex;align-items:center;justify-content:center;
}
.color-card.add .chip::after{
  content:"+";font-size:46px;font-weight:300;color:#bdbdbd;line-height:1;
}
.color-card .nm{
  padding:10px 6px 12px;min-height:38px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  text-align:center;
}
.color-card .hx{
  position:absolute;top:8px;right:8px;
  font-size:8px;letter-spacing:1px;background:rgba(0,0,0,.45);color:#fff;
  padding:3px 6px;border-radius:5px;opacity:0;transition:.15s;
}
.color-card:hover .hx{opacity:1}
.color-card .del{
  position:absolute;top:-8px;left:-8px;z-index:5;
  width:22px;height:22px;border-radius:50%;
  background:#161718;border:1px solid #3a3b3c;color:#ddd;
  font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;
}
.color-card:hover .del{opacity:1}
.color-card .del:hover{background:#ff4a4a;border-color:#ff4a4a;color:#fff}
.color-card .pc{
  position:absolute;bottom:46px;left:8px;
  font-size:9px;font-weight:700;letter-spacing:1px;
  background:rgba(0,0,0,.45);color:#fff;
  padding:3px 7px;border-radius:5px;opacity:0;transition:.15s;
}
.color-card:hover .pc{opacity:1}

/* balance bubbles */
.balance{position:relative;min-height:460px;margin-top:30px}
.bubble{position:absolute;border-radius:50%}
.bubble-chip{
  position:absolute;display:flex;align-items:center;gap:9px;
  background:rgba(35,36,37,.8);border-radius:12px;padding:6px 10px 6px 8px;
  backdrop-filter:blur(4px);
}
.bubble-chip .sq{width:28px;height:28px;border-radius:8px;flex:none}
.bubble-chip b,.bubble-chip span{
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
}

/* picker: usage slider + actions */
.cb-pctrow{
  margin:12px 16px 0;display:flex;align-items:center;gap:12px;
  background:#15171c;border-radius:10px;padding:12px 14px;
}
.cb-pctrow .lb{font-size:9px;font-weight:700;letter-spacing:3px;color:#9a9a9a}
.cb-pctrow .pv{font-size:12px;font-weight:700;letter-spacing:2px;min-width:42px;text-align:right}
.cb-pctrow input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:#2e3138;outline:none;
}
.cb-pctrow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--lemon);border:3px solid #000;cursor:pointer;
}
.cb-actions{display:flex;gap:8px;margin:12px 16px 0}
.cb-actions button{
  flex:1;padding:12px 0;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  transition:.15s;
}
#cb-save{background:var(--lemon);color:#000}
#cb-save:hover{filter:brightness(1.08)}
#cb-del{background:#15171c;color:#bbb}
#cb-del:hover{background:#ff4a4a;color:#fff}
#cb-del.hidden{display:none}

/* ─── COLOR BOX picker panel ──────────────────────────────── */
.colorbox{
  position:fixed;right:26px;top:70px;z-index:500;
  width:340px;background:#000;border:1px solid #2c2d2e;border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.colorbox.open{display:block}
/* backdrop — blocks the page behind the picker (mobile only) */
.cb-backdrop{display:none}
.cb-bar{
  height:38px;display:flex;align-items:center;padding:0 12px;
  background:#0c0c0c;position:relative;flex:none;
}
.cb-bar .t{
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  position:absolute;left:50%;transform:translateX(-50%);
}
/* macOS-style close: red dot top-left, with a generous invisible tap zone */
.cb-bar .x{
  order:-1;flex:none;width:12px;height:12px;border-radius:50%;
  background:#ff4a4a;cursor:pointer;border:none;padding:0;position:relative;
}
.cb-bar .x::before{content:'';position:absolute;inset:-14px}
.cb-bar .x:hover,.cb-bar .x:focus-visible{box-shadow:0 0 0 3px rgba(255,74,74,.35)}
.cb-stage{position:relative;width:300px;height:300px;margin:14px auto 0}
.cb-stage canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.cb-dot{
  position:absolute;width:22px;height:22px;border-radius:50%;
  border:3px solid #000;box-shadow:0 0 0 2px #fff inset, 0 2px 6px rgba(0,0,0,.6);
  transform:translate(-50%,-50%);pointer-events:none;z-index:5;
}
.cb-name{
  text-align:center;margin:18px 0 4px;
  font-size:17px;font-weight:700;letter-spacing:6px;text-transform:uppercase;
}
.cb-name small{font-size:10px;letter-spacing:3px;color:#6f6f6f;font-weight:700;margin-left:8px}
.cb-swatch{
  margin:14px 16px 0;height:96px;border-radius:14px;
}
.cb-hexrow{
  margin:12px 16px 0;display:flex;align-items:center;gap:12px;
  background:#15171c;border-radius:10px;padding:10px 14px;
}
.cb-hexrow .sw{width:24px;height:24px;border-radius:6px;flex:none}
.cb-hexrow input{
  background:none;border:none;outline:none;color:#fff;flex:1;min-width:0;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.cb-hexrow .lbl{font-size:10px;font-weight:700;letter-spacing:3px;color:#9a9a9a;cursor:pointer}
.cb-hexrow .lbl:hover{color:var(--lemon)}
.cb-recent{display:flex;gap:8px;margin:14px 16px 16px}
.cb-recent .r{
  flex:1;height:42px;border-radius:8px;background:#4a4a4a;cursor:pointer;
  transition:.12s;
}
.cb-recent .r:hover{transform:translateY(-2px)}

/* ─── PHOTOGRAPHY PAGE ────────────────────────────────────── */
.photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;margin-top:40px;
}
.photo-card{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;background:#1b1c1d;border:.5px solid var(--grey8);
}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.photo-card:hover img{transform:scale(1.04)}
.photo-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:24px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  opacity:0;transform:translateY(6px);transition:.2s;
}
.photo-card:hover .photo-bar{opacity:1;transform:translateY(0)}
.photo-bar .pname{
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff;
}
.photo-bar .pbtns{display:flex;gap:8px}
.photo-bar button{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);color:#000;border-radius:99px;padding:7px 13px;
  font-size:9px;font-weight:700;letter-spacing:2px;transition:.15s;
}
.photo-bar button:hover{background:var(--lemon)}
.photo-bar button svg{width:11px;height:11px}
html.theme-light .photo-card{border-color:#c4c0b8;background:#fff}

/* ─── TYPOGRAPHY PAGE ─────────────────────────────────────── */
.add-row{display:flex;gap:10px;margin-top:36px;max-width:640px}
.add-row input,.gh-row input{
  flex:1;background:#161718;border:1px solid #2e2f30;border-radius:10px;
  color:#fff;padding:14px 16px;outline:none;min-width:0;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:2px;
}
.add-row input:focus,.gh-row input:focus{border-color:var(--lemon)}
.add-row button,.gh-row button{
  background:var(--lemon);color:#000;border-radius:10px;padding:0 22px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  transition:.15s;white-space:nowrap;
}
.add-row button:hover,.gh-row button:hover{filter:brightness(1.08)}
.hint{margin-top:10px;font-size:9px;font-weight:600;letter-spacing:2px;color:#7a7a7a;text-transform:uppercase}
.hint span{color:#bdbdbd}
.font-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;margin-top:38px}
.font-card{
  position:relative;background:#1b1c1d;border:.5px solid var(--grey8);border-radius:10px;
  padding:24px 24px 20px;transition:.15s;
}
.font-card:hover{border-color:#8a8a8a}
.font-card .fdel{
  position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;
  background:#161718;border:1px solid #3a3b3c;color:#ddd;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s;
}
.font-card:hover .fdel{opacity:1}
.font-card .fdel:hover{background:#ff4a4a;border-color:#ff4a4a;color:#fff}
.font-card .aa{font-size:58px;line-height:1.05;margin-bottom:8px}
.font-card .alpha{font-size:13px;color:#bdbdbd;line-height:1.6;word-break:break-all}
.font-card .fmeta{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:18px;padding-top:14px;border-top:1px solid #2e2f30;
}
.font-card .fname{font-family:'Bai Jamjuree';font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.font-card .frole{font-family:'Bai Jamjuree';font-size:8px;font-weight:700;letter-spacing:2px;color:#9a9a9a;text-transform:uppercase}

/* ─── CODE PAGE ───────────────────────────────────────────── */
.code-section{display:flex;flex-direction:column;gap:12px;margin-top:38px}
.code-section .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#1b1c1d;border:1px solid #2e2f30;border-radius:99px;
  padding:8px 8px 8px 14px;
  font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e9e9e9;
}
html.theme-light .chip{background:#fff;border-color:#d6d2ca;color:#141414}
.chip-x{
  width:18px;height:18px;border-radius:50%;background:#2a2b2c;color:#bbb;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s;
}
.chip-x:hover{background:#ff4a4a;color:#fff}
html.theme-light .chip-x{background:#e4e1db;color:#555}
.repo-list{display:flex;flex-direction:column;gap:8px;max-width:560px}
.repo{
  display:flex;align-items:center;gap:12px;
  background:#1b1c1d;border:.5px solid var(--grey8);border-radius:10px;
  padding:12px 14px;
}
html.theme-light .repo{background:#fff;border-color:#c4c0b8}
.repo svg{width:16px;height:16px;flex:none;color:#9a9a9a}
.repo a{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:1px;
}
.repo a:hover{color:var(--lemon)}
.repo-x{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:#161718;border:1px solid #3a3b3c;color:#ddd;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.repo-x:hover{background:#ff4a4a;border-color:#ff4a4a;color:#fff}
html.theme-light .repo-x{background:#fff;border-color:#cfcbc3;color:#444}
.gh-row{display:flex;gap:10px;margin-top:36px;max-width:640px;align-items:center}
.gh-link{
  font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--lemon);
  white-space:nowrap;
}
.snip-new{
  display:inline-block;align-self:flex-start;margin-top:0;
  background:#161718;border:1px dashed #5a5b5c;border-radius:10px;padding:13px 24px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#bdbdbd;
  transition:.15s;
}
.snip-new:hover{border-color:var(--lemon);color:var(--lemon)}
.snip-form{margin-top:18px;max-width:760px;display:flex;flex-direction:column;gap:10px}
.snip-form[hidden]{display:none}
.snip-form .row{display:flex;gap:10px}
.snip-form input,.snip-form select,.snip-form textarea{
  background:#161718;border:1px solid #2e2f30;border-radius:10px;color:#fff;
  padding:13px 16px;outline:none;font-family:ui-monospace,Menlo,monospace;font-size:12px;
}
.snip-form input{flex:1;font-family:'Bai Jamjuree';font-size:11px;font-weight:600;letter-spacing:2px}
.snip-form select{font-family:'Bai Jamjuree';font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.snip-form textarea{resize:vertical;line-height:1.5}
.snip-form input:focus,.snip-form textarea:focus{border-color:var(--lemon)}
.snip-form .save{
  background:var(--lemon);color:#000;border-radius:10px;padding:12px 24px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.snip-form .cancel{
  background:#161718;color:#bbb;border-radius:10px;padding:12px 24px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.snip-list{margin-top:34px;display:flex;flex-direction:column;gap:18px;max-width:860px}
.snippet{background:#1b1c1d;border:.5px solid var(--grey8);border-radius:10px;overflow:hidden}
.snippet .shead{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:#161718;border-bottom:1px solid #2e2f30;
}
.snippet .stitle{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.snippet .slang{
  font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  background:var(--lemon);color:#000;border-radius:5px;padding:3px 8px;
}
.snippet .sbtn{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:2px;color:#9a9a9a;
}
.snippet .sbtn:hover{color:var(--lemon)}
.snippet .sbtn.sdel:hover{color:#ff4a4a}
.snippet .sbtn+.sbtn{margin-left:14px}
.snippet pre{
  margin:0;padding:18px;overflow-x:auto;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.6;color:#d7d7d7;
}

/* live preview — runs the snippet in an isolated frame, above its code */
.snippet .spreview{position:relative;background:#0c0c0d;border-bottom:1px solid #2e2f30}
.snippet .spreview .spv-tag{
  position:absolute;top:10px;left:12px;z-index:1;pointer-events:none;
  font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#0c0c0d;background:var(--lemon);border-radius:5px;padding:3px 8px;
}
.snippet .spreview .sframe{display:block;width:100%;height:360px;border:0;background:transparent}
html.theme-light .snippet .spreview{background:#f4f2ec;border-color:#d6d2ca}

/* ─── MEDIA BOX (hero cover editor) ───────────────────────── */
.mediabox{
  position:fixed;right:26px;top:70px;z-index:500;
  width:340px;background:#000;border:1px solid #2c2d2e;border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.mediabox.open{display:block}
.mb-body{padding:16px}
.mb-upload{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1.5px dashed #5a5b5c;border-radius:12px;padding:26px 10px 22px;
  color:#9a9a9a;cursor:pointer;transition:.15s;
}
.mb-upload:hover{border-color:var(--lemon);color:#d6d6d6}
.mb-upload svg{width:36px;height:36px;margin-bottom:8px}
.mb-upload .l1{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.mb-upload .browse{margin-top:8px;font-size:10px;font-weight:700;letter-spacing:5px;text-transform:uppercase}
.mb-or{
  text-align:center;margin:14px 0;
  font-size:8px;font-weight:700;letter-spacing:3px;color:#6f6f6f;text-transform:uppercase;
}
.mb-url{
  width:100%;background:#15171c;border:1px solid #2e2f30;border-radius:10px;
  color:#fff;padding:13px 14px;outline:none;
  font-family:inherit;font-size:10px;font-weight:600;letter-spacing:1.5px;
}
.mb-url:focus{border-color:var(--lemon)}
.mb-actions{display:flex;gap:8px;margin-top:12px}
.mb-actions button{
  flex:1;padding:12px 0;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  transition:.15s;
}
.mb-apply{background:var(--lemon);color:#000}
.mb-apply:hover{filter:brightness(1.08)}
.mb-reset{background:#15171c;color:#bbb}
.mb-reset:hover{background:#2a2b2c;color:#fff}
.mb-note{margin-top:12px;font-size:8px;font-weight:600;letter-spacing:1.5px;color:#6f6f6f;text-transform:uppercase;line-height:1.7}
@media (max-width:760px){
  .mediabox{right:8px;left:8px;top:54px;width:auto}
}

/* ─── theme toggle (sun ↔ crescent, whybrilliant-style morph) ─── */
.theme-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:#fff;border-radius:7px;transition:.15s;
}
.theme-toggle:hover{color:var(--lemon)}
.theme-toggle svg{
  width:17px;height:17px;overflow:visible;
  transform:rotate(40deg);
  transition:transform .55s cubic-bezier(.45,.05,.2,1.2);
}
html.theme-light .theme-toggle svg{transform:rotate(90deg)}
.tt-sun{r:8px;transition:r .45s cubic-bezier(.45,.05,.2,1.2)}
html.theme-light .tt-sun{r:5.2px}
.tt-mask-c{cx:17px;cy:6px;r:8px;transition:cx .45s cubic-bezier(.45,.05,.2,1.2),cy .45s cubic-bezier(.45,.05,.2,1.2)}
html.theme-light .tt-mask-c{cx:30px;cy:0px}
.tt-rays{
  transform-origin:12px 12px;opacity:0;transform:scale(.45) rotate(-30deg);
  transition:opacity .35s,transform .45s cubic-bezier(.45,.05,.2,1.2);
}
html.theme-light .tt-rays{opacity:1;transform:scale(1) rotate(0deg)}
.m-head .theme-toggle{position:static;transform:none;flex:none;color:#fff;margin-left:4px}

/* ─── login page ──────────────────────────────────────────── */
.login-stage{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;
  padding:70px 16px 30px;
  background:
    conic-gradient(#222324 90deg,#1d1e1f 90deg 180deg,#222324 180deg 270deg,#1d1e1f 270deg);
  background-size:34px 34px;
}
.login-card{
  width:min(370px,92vw);
  background:#121315;border:1px solid #2c2d2e;border-radius:18px;
  padding:46px 38px 40px;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.login-logo{height:54px;margin-bottom:26px}
.login-card h1{
  font-size:15px;font-weight:700;letter-spacing:7px;text-transform:uppercase;
}
.login-sub{
  margin:10px 0 28px;
  font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#7c7c7c;
}
.login-card input{
  width:100%;background:#1b1d21;border:1px solid #2e2f30;border-radius:10px;
  color:#fff;padding:15px 10px;outline:none;text-align:center;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:7px;text-transform:uppercase;
  transition:.15s;
}
.login-card input:focus{border-color:var(--lemon)}
.login-card input::placeholder{letter-spacing:4px;color:#4a4b4c}
.login-card button{
  width:100%;margin-top:14px;
  background:var(--lemon);color:#000;border-radius:99px;padding:15px 0;
  font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;
  transition:.15s;
}
.login-card button:hover{filter:brightness(1.08)}
.login-err{
  margin-top:16px;height:14px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#ff4a4a;
  opacity:0;transition:.2s;
}
.login-err.show{opacity:1}
.login-card.shake{animation:shake .45s}
.login-card.shake input{border-color:#ff4a4a}
.login-card.ok{transform:scale(.97);opacity:.6;transition:.3s}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
.login-foot{
  font-size:8.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#6f6f6f;
  text-align:center;line-height:2.1;max-width:560px;
}
.login-foot span{color:var(--lemon)}
.login-foot b{color:inherit;font-weight:700}
.login-foot .foot-pricing{color:#fff;text-decoration:underline;text-underline-offset:3px}
.login-foot .foot-pricing:hover{color:var(--lemon)}
html.theme-light .login-foot .foot-pricing{color:#141414}

/* big "back home" arrow at the top-left of the login page */
.login-back{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:9px;color:#9a9a9a;transition:.15s;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
}
.login-back svg{width:26px;height:26px}
.login-back:hover{color:var(--lemon);transform:translateY(-50%) translateX(-2px)}
html.theme-light .login-back{color:#8a857b}
@media(max-width:560px){.login-back span{display:none}.login-back svg{width:24px;height:24px}}
.login-logo-link{display:inline-block;cursor:pointer}

/* sign in / register segmented toggle */
.login-seg{
  display:flex;gap:4px;margin:0 auto 24px;padding:4px;width:max-content;
  background:#1b1d21;border:1px solid #2e2f30;border-radius:99px;
}
.login-seg button{
  width:auto;margin:0;background:none;color:#8a8a8a;
  padding:8px 20px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;transition:.15s;
}
.login-seg button:hover{color:#cfcfcf;filter:none}
.login-seg button.on{background:var(--lemon);color:#000}
html.theme-light .login-seg{background:#f1efeb;border-color:#d6d2ca}
html.theme-light .login-seg button{color:#8a857b}
html.theme-light .login-seg button.on{color:#000}
.m-register{display:none}
.m-register .login-sub{margin-bottom:4px}
.m-register .login-sub b{color:var(--lemon)}
body[data-mode="register"] .m-signin{display:none}
body[data-mode="register"] .m-register{display:block}

/* access code — happy-face mask + reveal eye */
.code-wrap{position:relative}
.code-wrap input{padding-right:42px}
.code-mask{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;border-radius:10px;
  font-size:15px;font-weight:700;letter-spacing:7px;color:var(--lemon);
  padding:0 42px 0 10px;overflow:hidden;white-space:nowrap;
}
.code-wrap.masked input{color:transparent;caret-color:var(--lemon)}
.code-wrap.masked .code-mask{display:flex}
.code-wrap .code-eye{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:30px;height:30px;margin:0;padding:0;background:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#7c7c7c;
}
.code-wrap .code-eye:hover{color:var(--lemon);filter:none}
.code-wrap .code-eye svg{width:18px;height:18px}
html.theme-light .code-wrap .code-eye{color:#8a857b}

/* social sign-in under the card */
.login-social{width:min(370px,92vw);text-align:center;margin-top:-6px}
.login-social .or{
  display:flex;align-items:center;gap:12px;justify-content:center;
  font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#6f6f6f;
  margin-bottom:14px;
}
.login-social .or span{flex:1;height:1px;background:#2e2f30;max-width:90px}
/* quiet text links with icon — like a classic "Login with LinkedIn" row */
.soc-row{display:flex;flex-direction:column;gap:14px;align-items:center}
.soc{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:none;padding:2px 4px;
  font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:none;
  color:#a9a9a9;transition:.15s;
}
.soc:hover{color:#e9e9e9}
.soc svg{width:15px;height:15px;filter:grayscale(1);opacity:.6;transition:.15s}
.soc:hover svg{filter:grayscale(0);opacity:1}
.soon-chip{
  margin-left:2px;
  background:#26272a;color:#8a8a8a;border-radius:99px;padding:2px 7px;
  font-size:6.5px;font-weight:700;letter-spacing:2px;
}
html.theme-light .soc{color:#7a766d}
html.theme-light .soc:hover{color:#141414}
html.theme-light .soon-chip{background:#e4e1db;color:#8a857b}
.soc-note{
  margin-top:14px;
  font-size:8px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#6f6f6f;
  transition:.2s;
}
.soc-note b{color:#bdbdbd}
.soc-note.pulse{color:var(--lemon)}
.soc-note.pulse b{color:var(--lemon)}
html.theme-light .login-social .or{color:#8a857b}
html.theme-light .login-social .or span{background:#d6d2ca}
html.theme-light .soc{background:#fff;border-color:#d6d2ca;color:#141414}
html.theme-light .soc-note{color:#8a857b}
html.theme-light .soc-note b{color:#444}

/* ═══════════ LIGHT THEME ═══════════ */
html.theme-light body{background:#dcd9d3;color:#141414}
html.theme-light ::-webkit-scrollbar-thumb{background:#bdb9b1;border-color:#f1efeb}
html.theme-light .window{background:#f1efeb}
html.theme-light .bar-top{background:#e4e1db}
html.theme-light .bar-title,html.theme-light .bar-tabs a{color:#141414}
html.theme-light .bar-title .muted{color:#9b968c}
html.theme-light .bar-tabs a.on{color:#141414}
html.theme-light .theme-toggle{color:#141414}
html.theme-light .theme-toggle:hover{color:#0e7e78}
html.theme-light .rail{background:#e4e1db}
html.theme-light .rail-logo img{filter:invert(1)}
html.theme-light .rail-brands{scrollbar-color:rgba(0,0,0,.22) transparent}
html.theme-light .rail-brands::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18)}
html.theme-light .rail-tile{background:transparent}
html.theme-light .rail-tile img{filter:brightness(0);opacity:.6}      /* black mark on light */
html.theme-light .rail-tile:hover{background:rgba(0,0,0,.09)}
html.theme-light .rail-tile:not(.active):hover img{opacity:1}
html.theme-light .rail-tile.active{background:#0d0d0d;box-shadow:0 4px 16px rgba(0,0,0,.2)}
html.theme-light .rail-tile.active img{filter:brightness(0) invert(1);opacity:1}  /* white mark on black */
html.theme-light .rail-tile.add img{filter:none}
html.theme-light .canvas,html.theme-light .library,
html.theme-light .colors-wrap,html.theme-light .page-wrap{background:#f1efeb}
html.theme-light .tabs a,html.theme-light .tabs span{color:#141414}
html.theme-light .chapter-head,html.theme-light .ch-title{color:#141414}
html.theme-light .ch-title:focus{background:#e4e1db}
html.theme-light .ch-del{background:#fff;border-color:#cfcbc3;color:#444}
html.theme-light .tile-label{color:#2c2c2c}
/* tile checkerboards stay unchanged in light theme — they indicate the
   logo color (white logos need the dark checker to stay visible) */
html.theme-light .tile:hover{outline-color:#bdb9b1}
html.theme-light .upload-card{border-color:#b5b1a7;color:#8a857b}
html.theme-light .chapter-chip{background:#e4e1db;border-color:#b5b1a7;color:#555}
html.theme-light .dl-all-btn{background:#fff;border-color:#d6d2ca;color:#141414}
html.theme-light .dl-all:hover .dl-all-btn{border-color:#0e7e78;color:#0e7e78}
html.theme-light .color-card{border-color:#c4c0b8}
html.theme-light .color-card .nm{color:#141414}
html.theme-light .color-card.add .chip::after{color:#6f6b62}
html.theme-light .bubble-chip{background:rgba(255,255,255,.78)}
html.theme-light .bubble-chip b,html.theme-light .bubble-chip span{color:#141414}
html.theme-light .add-row input,html.theme-light .gh-row input,
html.theme-light .snip-form input,html.theme-light .snip-form select,
html.theme-light .snip-form textarea{background:#fff;border-color:#d6d2ca;color:#141414}
html.theme-light .hint{color:#8a857b}
html.theme-light .hint span{color:#444}
html.theme-light .font-card{background:#fff;border-color:#c4c0b8;color:#141414}
html.theme-light .font-card .alpha{color:#555}
html.theme-light .font-card .frole{color:#8a857b}
html.theme-light .font-card .fdel,html.theme-light .color-card .del{background:#fff;border-color:#cfcbc3;color:#444}
html.theme-light .snippet{background:#fff;border-color:#c4c0b8}
html.theme-light .snippet .shead{background:#eceae4;border-color:#d6d2ca}
html.theme-light .snippet .stitle{color:#141414}
html.theme-light .snippet pre{color:#333}
html.theme-light .snippet .sbtn{color:#6f6b62}
html.theme-light .snip-new{background:#fff;border-color:#b5b1a7;color:#555}
html.theme-light .gh-link{color:#0e7e78}
html.theme-light .m-head{background:#e4e1db}
html.theme-light .m-head .t{color:#141414}
html.theme-light .m-head .flogo{filter:invert(1)}
html.theme-light .m-head .theme-toggle{color:#141414}
html.theme-light .m-brandstrip{background:#eceae4}
html.theme-light .m-brandstrip .bt img{filter:invert(1)}
html.theme-light .login-stage{
  background:
    conic-gradient(#e8e5df 90deg,#dedbd4 90deg 180deg,#e8e5df 180deg 270deg,#dedbd4 270deg);
  background-size:34px 34px;
}
html.theme-light .login-card{background:#fff;border-color:#d6d2ca;box-shadow:0 40px 100px rgba(60,55,45,.25)}
html.theme-light .login-logo{filter:invert(1)}
html.theme-light .login-card h1{color:#141414}
html.theme-light .login-card input{background:#f1efeb;border-color:#d6d2ca;color:#141414}
html.theme-light .login-foot{color:#8a857b}

/* ─── tier locks (free vs subscribed) ─────────────────────── */
.lock-wrap{position:relative;overflow:hidden;border-radius:10px}
.lock-blur{filter:blur(7px);opacity:.55;user-select:none;pointer-events:none}
.lock-veil{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:16px;text-align:center;
  background:linear-gradient(rgba(13,14,16,.4),rgba(13,14,16,.6));
}
html.theme-light .lock-veil{background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.62))}
.lock-card{display:flex;flex-direction:column;align-items:center;gap:11px;max-width:300px}
.lock-card .lock-ic{width:26px;height:26px;color:var(--lemon)}
.lock-txt{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#dcdcdc;line-height:1.8}
html.theme-light .lock-txt{color:#444}
.lock-cta{
  background:var(--lemon);color:#000;border-radius:99px;padding:9px 18px;
  font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:.15s;
}
.lock-cta:hover{filter:brightness(1.08)}
html.theme-light .lock-cta{color:#04161a}
/* a gated action button — shows a small padlock */
.btn-lock{opacity:.65}
.btn-lock::after{content:'🔒';margin-left:6px;font-size:.85em;filter:grayscale(1)}

/* ─── share modal ─────────────────────────────────────────── */
.share-backdrop{position:fixed;inset:0;z-index:690;display:none;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.share-backdrop.open{display:block}
.sharebox{
  position:fixed;z-index:700;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px));background:#000;border:1px solid #2c2d2e;border-radius:16px;
  overflow:hidden;display:none;box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.sharebox.open{display:block}
html.theme-light .sharebox{background:#fff;border-color:#d6d2ca;color:#141414}
.sb-bar{height:40px;display:flex;align-items:center;padding:0 12px;background:#0c0c0c;position:relative}
html.theme-light .sb-bar{background:#f1efeb}
.sb-bar .t{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.sb-bar .x{width:12px;height:12px;border-radius:50%;background:#ff4a4a;border:none;cursor:pointer;padding:0;position:relative}
.sb-bar .x::before{content:'';position:absolute;inset:-12px}
.sb-bar .x:hover{box-shadow:0 0 0 3px rgba(255,74,74,.35)}
.sb-body{padding:22px}
.sb-lead{font-size:11px;font-weight:600;letter-spacing:.5px;line-height:1.8;color:#cfcfcf}
html.theme-light .sb-lead{color:#444}
.sb-lead b{color:var(--lemon)}
.sb-linkrow{display:flex;gap:8px;margin-top:16px}
.sb-link{flex:1;min-width:0;background:#15171c;border:1px solid #2e2f30;border-radius:10px;color:#fff;padding:11px 12px;font-family:inherit;font-size:11px;letter-spacing:.4px;outline:none}
html.theme-light .sb-link{background:#f1efeb;border-color:#d6d2ca;color:#141414}
.sb-copy{background:var(--lemon);color:#04161a;border-radius:10px;padding:0 16px;font-size:10px;font-weight:700;letter-spacing:2px;flex:none}
.sb-note{margin-top:12px;font-size:9px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#9a9a9a;line-height:1.9}
.sb-note b{color:var(--lemon)}
.sb-email{width:100%;margin-top:16px;background:#26272a;color:#fff;border-radius:10px;padding:13px 0;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
html.theme-light .sb-email{background:#e4e1db;color:#141414}
.sb-up{margin-top:10px;text-align:center;font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#7c7c7c}
.sb-up a{color:var(--lemon);text-decoration:underline}

/* toast — top-of-screen notifications: saves, errors, state changes */
.toast{
  position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-16px);
  background:var(--lemon);color:#000;border-radius:9px;padding:10px 20px;
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  max-width:calc(100vw - 28px);text-align:center;
  opacity:0;pointer-events:none;transition:.25s;z-index:700;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#ff4a4a;color:#fff}

/* ─── SIGNATURE PAGE ──────────────────────────────────────── */
.sig-wrap .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a}
.sig-logos{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap}
.sig-logo-row{display:flex;gap:8px;flex-wrap:wrap}
.sig-logo{
  display:flex;align-items:center;gap:9px;
  background:#1b1c1d;border:1px solid #2e2f30;border-radius:99px;
  padding:6px 14px 6px 6px;transition:.15s;
}
.sig-logo img{width:30px;height:30px;object-fit:contain;border-radius:50%;background:#3a3b3c;padding:4px}
.sig-logo span{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#cfcfcf}
.sig-logo:hover{border-color:#6a6b6c}
.sig-logo.on{background:var(--lemon);border-color:var(--lemon)}
.sig-logo.on span{color:#000}
html.theme-light .sig-logo{background:#fff;border-color:#d6d2ca}
html.theme-light .sig-logo span{color:#444}
html.theme-light .sig-logo.on{background:var(--lemon);border-color:#bcae00}
.sig-grid{display:grid;grid-template-columns:330px 1fr;gap:24px;margin-top:26px}
@media (max-width:1000px){.sig-grid{grid-template-columns:1fr}}
.sig-editor{display:flex;flex-direction:column;gap:10px;align-content:start}
.sf{display:flex;flex-direction:column;gap:5px}
.sf span{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a}
.sf input{
  background:#161718;border:1px solid #2e2f30;border-radius:8px;color:#fff;
  padding:10px 12px;outline:none;font-family:inherit;font-size:12px;letter-spacing:.5px;
}
.sf input:focus{border-color:var(--lemon)}
html.theme-light .sf input{background:#fff;border-color:#d6d2ca;color:#141414}
.sf-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sf-links .lb{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a}
.sf-link{display:flex;gap:6px;align-items:center}
.sf-link input{
  background:#161718;border:1px solid #2e2f30;border-radius:8px;color:#fff;
  padding:9px 10px;outline:none;font-family:inherit;font-size:11px;min-width:0;
}
.sf-link input[data-lk="label"]{flex:0 0 90px}
.sf-link input[data-lk="url"]{flex:1}
.sf-link input:focus{border-color:var(--lemon)}
html.theme-light .sf-link input{background:#fff;border-color:#d6d2ca;color:#141414}
.sf-link-x{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:#161718;border:1px solid #3a3b3c;color:#ddd;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.sf-link-x:hover{background:#ff4a4a;border-color:#ff4a4a;color:#fff}
.sf-link-add{
  align-self:flex-start;
  background:#161718;border:1px dashed #5a5b5c;border-radius:8px;padding:8px 14px;
  font-size:8.5px;font-weight:700;letter-spacing:2px;color:#bdbdbd;transition:.15s;
}
.sf-link-add:hover{border-color:var(--lemon);color:var(--lemon)}
html.theme-light .sf-link-add{background:#fff;border-color:#b5b1a7;color:#555}
.sf-toggles{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sf-t{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a;
}
.sf-t input{display:none}
.sf-t i{
  width:30px;height:17px;border-radius:99px;background:#3a3b3c;position:relative;transition:.2s;flex:none;
}
.sf-t i::after{
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:.2s;
}
.sf-t input:checked + i{background:var(--lemon)}
.sf-t input:checked + i::after{transform:translateX(13px);background:#000}
.sig-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.sig-card{background:#1b1c1d;border:.5px solid var(--grey8);border-radius:12px;overflow:hidden}
html.theme-light .sig-card{background:#fff;border-color:#c4c0b8}
.sig-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;background:#161718;border-bottom:1px solid #2e2f30;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#9a9a9a;
}
html.theme-light .sig-card-head{background:#eceae4;border-color:#d6d2ca}
.sig-card-head .btns{display:flex;gap:8px}
.sig-card-head button{
  background:var(--lemon);color:#000;border-radius:7px;padding:7px 12px;
  font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:.15s;
}
.sig-card-head button#sig-copy-html{background:#26272a;color:#fff}
html.theme-light .sig-card-head button#sig-copy-html{background:#e4e1db;color:#141414}
.sig-card-head button:hover{filter:brightness(1.12)}
.sig-preview{background:#fff;padding:30px;overflow-x:auto}
.sig-code{
  margin:0;padding:16px;max-height:300px;overflow:auto;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;line-height:1.6;color:#cfcfcf;
}
html.theme-light .sig-code{color:#444}
.sig-baseurl{display:flex;align-items:center;gap:12px}
.sig-baseurl input{
  flex:1;background:#161718;border:1px solid #2e2f30;border-radius:8px;color:#fff;
  padding:10px 12px;outline:none;font-family:ui-monospace,Menlo,monospace;font-size:11px;
}
.sig-baseurl input:focus{border-color:var(--lemon)}
html.theme-light .sig-baseurl input{background:#fff;border-color:#d6d2ca;color:#141414}

/* ─── PRINT PAGE ──────────────────────────────────────────── */
.print-wrap .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a}
.print-top{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap}
.print-views{display:flex;gap:8px;flex-wrap:wrap}
.pv{
  background:#1b1c1d;border:1px solid #2e2f30;border-radius:99px;padding:9px 18px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;color:#cfcfcf;transition:.15s;
}
.pv:hover{border-color:#6a6b6c}
.pv.on{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .pv{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .pv.on{background:var(--lemon);color:#000}
.print-shirt-colors{display:flex;align-items:center;gap:10px;margin-left:auto}
.shirt-c{width:30px;height:30px;border-radius:50%;border:2px solid #3a3b3c;transition:.15s}
.shirt-c.black{background:#1d1e20}
.shirt-c.white{background:#f2f1ee}
.shirt-c.on{border-color:var(--lemon)}
.print-grid{display:grid;grid-template-columns:1fr 280px;gap:28px;margin-top:26px}
@media (max-width:900px){.print-grid{grid-template-columns:1fr}}
.print-stage{
  background:#1b1c1d;border:.5px solid var(--grey8);border-radius:14px;
  padding:24px;display:flex;align-items:center;justify-content:center;
}
html.theme-light .print-stage{background:#fff;border-color:#c4c0b8}
.tee-holder{position:relative;width:min(540px,100%);aspect-ratio:1/1}
.tee-holder > svg{position:absolute;inset:0;width:100%;height:100%}
.print-area{
  position:absolute;border:1px dashed rgba(150,150,150,.45);border-radius:4px;
}
.pl-logo{
  position:absolute;transform:translate(-50%,-50%);
  cursor:grab;user-select:none;-webkit-user-drag:none;touch-action:none;
}
.pl-logo:active{cursor:grabbing}
.print-side{display:flex;flex-direction:column;gap:18px;align-content:start}
.ps-block{display:flex;flex-direction:column;gap:9px}
.print-logos{display:flex;gap:8px;flex-wrap:wrap}
.plog{
  width:52px;height:52px;border-radius:8px;border:1px solid #2e2f30;
  background:
    conic-gradient(#262728 90deg,#202122 90deg 180deg,#262728 180deg 270deg,#202122 270deg);
  background-size:14px 14px;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.plog img{width:70%;height:70%;object-fit:contain}
.plog:hover{border-color:#6a6b6c}
.plog.on{border:2px solid var(--lemon)}
.print-colors{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pcol{width:26px;height:26px;border-radius:50%;border:2px solid #3a3b3c;transition:.15s}
.pcol.on{border-color:var(--lemon)}
#pcol-custom{
  width:26px;height:26px;border:none;border-radius:50%;padding:0;background:none;cursor:pointer;
}
/* both print sliders share the exact same look — filled lemon track,
   big springy thumb that grows on hover and drag */
#print-size,#print-rot{
  -webkit-appearance:none;appearance:none;width:100%;
  height:8px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(to right,
    var(--lemon) 0%, var(--lemon) var(--p,40%),
    #2e3138 var(--p,40%), #2e3138 100%);
}
#print-size::-webkit-slider-thumb,#print-rot::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--lemon);border:4px solid #000;cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
#print-size:hover::-webkit-slider-thumb,#print-rot:hover::-webkit-slider-thumb{
  transform:scale(1.18);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--lemon) 18%, transparent),0 2px 10px rgba(0,0,0,.5);
}
#print-size:active::-webkit-slider-thumb,#print-rot:active::-webkit-slider-thumb{
  transform:scale(1.35);cursor:grabbing;
  box-shadow:0 0 0 10px color-mix(in srgb, var(--lemon) 25%, transparent),0 2px 12px rgba(0,0,0,.55);
}
#print-size::-moz-range-thumb,#print-rot::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--lemon);border:4px solid #000;cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
#print-size:hover::-moz-range-thumb,#print-rot:hover::-moz-range-thumb{transform:scale(1.18)}
#print-size:active::-moz-range-thumb,#print-rot:active::-moz-range-thumb{transform:scale(1.35)}
.ps-hint{font-size:8.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#7a7a7a;line-height:1.8}
#print-clear{
  background:#161718;border:1px solid #2e2f30;border-radius:9px;padding:11px 0;
  font-size:9px;font-weight:700;letter-spacing:2.5px;color:#bbb;transition:.15s;
}
#print-clear:hover{border-color:#ff4a4a;color:#ff4a4a}
html.theme-light #print-clear{background:#fff;border-color:#d6d2ca;color:#555}
#print-request{
  background:var(--lemon);color:#000;border-radius:9px;padding:13px 0;
  font-size:10px;font-weight:700;letter-spacing:2.5px;transition:.15s;
}
#print-request:hover{filter:brightness(1.08)}

/* quote dialog */
.quotebox{
  position:fixed;right:26px;top:70px;z-index:500;
  width:340px;background:#000;border:1px solid #2c2d2e;border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.quotebox.open{display:block}
.qb-body{padding:16px;display:flex;flex-direction:column;gap:11px}
.qb-body .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a}
.qb-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qb-size{
  display:flex;align-items:center;gap:8px;
  background:#15171c;border:1px solid #2e2f30;border-radius:9px;padding:8px 10px;
}
.qb-size span{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#9a9a9a;min-width:24px}
.qb-size input{
  width:100%;min-width:0;background:none;border:none;outline:none;color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;text-align:right;
}
.qb-size input::-webkit-outer-spin-button,.qb-size input::-webkit-inner-spin-button{-webkit-appearance:none}
.qb-in{
  background:#15171c;border:1px solid #2e2f30;border-radius:9px;color:#fff;
  padding:11px 12px;outline:none;font-family:inherit;
  font-size:10px;font-weight:600;letter-spacing:1.5px;resize:vertical;
}
.qb-in:focus{border-color:var(--lemon)}
#qb-send{
  background:var(--lemon);color:#000;border-radius:10px;padding:13px 0;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;transition:.15s;
}
#qb-send:hover{filter:brightness(1.08)}
@media (max-width:760px){
  .quotebox{right:8px;left:8px;top:54px;width:auto}
}

/* ─── SOCIAL MEDIA PAGE ───────────────────────────────────── */
.social-wrap .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a}
.sm-controls{
  display:flex;gap:34px;flex-wrap:wrap;margin-top:36px;
  padding:20px 22px;background:#1b1c1d;border:.5px solid var(--grey8);border-radius:14px;
}
html.theme-light .sm-controls{background:#fff;border-color:#c4c0b8}
.sm-controls .ps-block{min-width:200px}
.sm-logos{display:flex;gap:8px;flex-wrap:wrap}
.sm-modes{display:flex;gap:8px;flex-wrap:wrap}
.sm-opt{
  background:#161718;border:1px solid #2e2f30;border-radius:99px;padding:8px 15px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;color:#cfcfcf;transition:.15s;
}
.sm-opt:hover{border-color:#6a6b6c}
.sm-opt.on{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .sm-opt{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .sm-opt.on{background:var(--lemon);color:#000}
.sm-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sm-chips input[type=color]{
  width:26px;height:26px;border:none;border-radius:50%;padding:0;background:none;cursor:pointer;
}
.sm-photos,.sm-pickrow{display:flex;gap:8px;flex-wrap:wrap}
.sm-thumb{
  width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid #2e2f30;
  padding:0;transition:.15s;flex:none;
}
.sm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sm-thumb:hover{border-color:#6a6b6c}
.sm-thumb.on{border:2px solid var(--lemon)}
.sm-section{margin-top:44px;display:flex;flex-direction:column;gap:16px}
.sm-sec-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sm-cover-opts,.sm-car-opts{display:flex;gap:8px;flex-wrap:wrap}
.pro-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  background:var(--lemon);color:#000;font-size:8px;font-weight:700;letter-spacing:2px;
}
.sm-profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px}
.sm-covers{display:flex;flex-direction:column;gap:18px}
.sm-car-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.sm-car-row{grid-template-columns:1fr}}
.sm-card{
  background:#1b1c1d;border:.5px solid var(--grey8);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
html.theme-light .sm-card{background:#fff;border-color:#c4c0b8}
.sm-prev{
  position:relative;width:100%;border-radius:9px;overflow:hidden;
  background:
    conic-gradient(#262728 90deg,#202122 90deg 180deg,#262728 180deg 270deg,#202122 270deg);
  background-size:14px 14px;
}
html.theme-light .sm-prev{background:
  conic-gradient(#e8e6e1 90deg,#dedbd4 90deg 180deg,#e8e6e1 180deg 270deg,#dedbd4 270deg);
  background-size:14px 14px}
.sm-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sm-prev.circle img{border-radius:50%}
.sm-hide-zone{
  position:absolute;left:0;top:0;bottom:0;width:25%;
  background:rgba(0,0,0,.42);border-right:1px dashed rgba(255,255,255,.5);pointer-events:none;
}
.sm-safe-zone{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px dashed rgba(255,255,255,.65);border-radius:4px;pointer-events:none;
}
.sm-meta{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;row-gap:8px}
/* monochrome platform badge — icon takes the theme ink, never a brand colour */
.sm-badge{
  width:30px;height:30px;border-radius:8px;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
html.theme-light .sm-badge{color:#111;background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.sm-badge svg{width:16px;height:16px}

/* category (per-platform) sections */
.sm-cats{display:flex;flex-direction:column;gap:34px}
.sm-cat{display:flex;flex-direction:column;gap:16px}
.sm-cat-head{display:flex;align-items:center;gap:11px}
.sm-cat-ic{width:24px;height:24px;color:var(--text);flex:none}
.sm-cat-ic svg{width:100%;height:100%}
.sm-cat-head h3{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0}

/* dimension labels on the edges of every preview */
.sm-wlab,.sm-hlab{
  position:absolute;z-index:3;pointer-events:none;
  font-size:8px;font-weight:700;letter-spacing:1px;color:#fff;
  background:rgba(0,0,0,.55);padding:2px 5px;border-radius:4px;line-height:1;
}
.sm-wlab{top:6px;left:50%;transform:translateX(-50%)}
.sm-hlab{left:6px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.sm-prev.circle .sm-hlab{transform:translateY(-50%) rotate(-90deg)}

/* drag affordance */
.sm-prev.draggable{cursor:grab}
.sm-prev.dragging{cursor:grabbing}
.sm-draghint{
  position:absolute;right:6px;bottom:6px;z-index:3;pointer-events:none;
  font-size:8px;font-weight:700;letter-spacing:1px;color:#fff;
  background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px;opacity:0;transition:.2s;
}
.sm-prev.draggable:hover .sm-draghint{opacity:1}

/* per-asset logo controls */
.sm-logo-ctl{display:flex;gap:5px;flex:none}
.sm-logo-ctl button{
  background:#161718;border:1px solid #2e2f30;border-radius:7px;padding:6px 9px;
  font-size:8.5px;font-weight:700;letter-spacing:1.5px;color:#cfcfcf;transition:.15s;white-space:nowrap;
}
.sm-logo-ctl button:hover{border-color:#5a5b5c;color:#fff}
.sm-logo-ctl button.on{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .sm-logo-ctl button{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .sm-logo-ctl button:hover{border-color:#aaa;color:#111}
.sm-names{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.sm-names b{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.sm-names i{
  font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:#9a9a9a;white-space:nowrap;
}
.sm-dim{
  font-size:8.5px;font-weight:700;letter-spacing:1.5px;color:#9a9a9a;
  white-space:nowrap;flex:none;
}
.sm-dl{display:flex;gap:6px;flex:none}
.sm-dl button{
  background:#161718;border:1px solid #2e2f30;border-radius:7px;padding:6px 10px;
  font-size:8.5px;font-weight:700;letter-spacing:2px;color:#cfcfcf;transition:.15s;
}
.sm-dl button:hover{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .sm-dl button{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .sm-dl button:hover{background:var(--lemon);color:#000}
.sm-pickrow{padding-top:2px}
.sm-pickrow .sm-thumb{width:40px;height:40px}
#sm-car-all{
  align-self:flex-start;background:var(--lemon);color:#000;border-radius:9px;padding:12px 22px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;transition:.15s;margin-top:4px;
}
#sm-car-all:hover{filter:brightness(1.08)}
.sm-carousel{display:flex;flex-direction:column;gap:14px}
.sm-lock{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:#1b1c1d;border:1px dashed var(--grey8);border-radius:14px;padding:26px;
}
html.theme-light .sm-lock{background:#fff;border-color:#c4c0b8}
.sm-lock b{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--lemon)}
html.theme-light .sm-lock b{color:#0e7e78}
.sm-lock span{font-size:10px;font-weight:500;letter-spacing:1px;color:#9a9a9a;line-height:1.9}
.sm-lock a{font-size:9px;font-weight:700;letter-spacing:2.5px;color:#fff;text-decoration:underline;text-underline-offset:3px}
html.theme-light .sm-lock a{color:#141414}
.sm-post-grid{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start}
@media (max-width:900px){.sm-post-grid{grid-template-columns:1fr}}
.sm-post-side{display:flex;flex-direction:column;gap:10px}
.sm-in{
  background:#15171c;border:1px solid #2e2f30;border-radius:9px;color:#fff;
  padding:11px 12px;outline:none;font-family:inherit;
  font-size:10px;font-weight:600;letter-spacing:1.5px;
}
.sm-in:focus{border-color:var(--lemon)}
html.theme-light .sm-in{background:#fff;border-color:#d6d2ca;color:#141414}
.sm-zip-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}
.sm-zip-row button{
  background:#161718;border:1px solid #2e2f30;border-radius:9px;padding:13px 24px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;color:#cfcfcf;transition:.15s;
}
.sm-zip-row button:hover{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .sm-zip-row button{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .sm-zip-row button:hover{background:var(--lemon);color:#000}
@media (max-width:760px){
  .sm-controls{gap:22px;padding:16px}
  .sm-profiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .sm-meta{flex-wrap:wrap}
  .sm-names i{white-space:normal}
}

/* ─── legal pages (imprint / privacy) ─────────────────────── */
.legal-stage{
  min-height:calc(100vh - 90px);max-width:680px;margin:0 auto;
  padding:100px 24px 70px;
}
.legal-stage h1{font-size:22px;font-weight:700;letter-spacing:7px;text-transform:uppercase}
.legal-sub{
  margin-top:10px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#9a9a9a;
}
.legal-body{margin-top:40px}
.legal-body h2{
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  margin:30px 0 10px;color:var(--lemon);
}
html.theme-light .legal-body h2{color:#0e7e78}
.legal-body p{
  font-size:11px;font-weight:500;letter-spacing:.8px;line-height:2.1;color:#cfcfcf;
}
html.theme-light .legal-body p{color:#444}
.legal-body a{text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--lemon)}
.legal-body b{color:#fff;font-weight:700}
html.theme-light .legal-body b{color:#141414}
.legal-nav{display:flex;justify-content:space-between;gap:16px;margin-top:50px;flex-wrap:wrap}
.legal-nav a{
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a;
}
.legal-nav a:hover{color:var(--lemon)}

/* ─── LOGO EDITOR PAGE ────────────────────────────────────── */
.le-wrap .lb{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9a9a9a;display:block}
.le-grid{display:grid;grid-template-columns:280px 1fr;gap:30px;margin-top:36px}
@media (max-width:960px){.le-grid{grid-template-columns:1fr}}
.le-side{display:flex;flex-direction:column;gap:20px;align-content:start}
.le-logos{display:flex;gap:8px;flex-wrap:wrap}
.le-in{
  width:100%;background:#161718;border:1px solid #2e2f30;border-radius:9px;color:#fff;
  padding:12px;outline:none;font-family:inherit;font-size:12px;letter-spacing:1px;
}
.le-in:focus{border-color:var(--lemon)}
select.le-in{text-transform:none}
html.theme-light .le-in{background:#fff;border-color:#d6d2ca;color:#141414}
.le-pos{display:flex;gap:6px;flex-wrap:wrap}
.le-pos button{
  background:#1b1c1d;border:1px solid #2e2f30;border-radius:99px;padding:8px 14px;
  font-size:8.5px;font-weight:700;letter-spacing:2px;color:#cfcfcf;transition:.15s;
}
.le-pos button.on{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .le-pos button{background:#fff;border-color:#d6d2ca;color:#444}
html.theme-light .le-pos button.on{background:var(--lemon);color:#000}
#le-scale,#le-pad{
  -webkit-appearance:none;appearance:none;width:100%;
  height:8px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(to right,
    var(--lemon) 0%, var(--lemon) var(--p,40%),
    #2e3138 var(--p,40%), #2e3138 100%);
}
#le-scale::-webkit-slider-thumb,#le-pad::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--lemon);border:4px solid #000;cursor:grab;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
#le-scale:hover::-webkit-slider-thumb,#le-pad:hover::-webkit-slider-thumb{transform:scale(1.18)}

/* golden-ratio steppers */
.le-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.le-step button{
  width:34px;height:34px;border-radius:9px;
  background:#1b1c1d;border:1px solid #2e2f30;color:#fff;
  font-size:16px;line-height:1;transition:.15s;
}
.le-step button:hover{border-color:var(--lemon);color:var(--lemon)}
.le-step b{
  min-width:54px;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:1px;color:var(--lemon);
}
.le-step .fit{
  width:auto;padding:0 14px;
  font-size:8.5px;font-weight:700;letter-spacing:2px;
}
.le-step .fit.on{background:var(--lemon);border-color:var(--lemon);color:#000}
html.theme-light .le-step button{background:#fff;border-color:#d6d2ca;color:#141414}
html.theme-light .le-step b{color:#0e7e78}
html.theme-light .le-step .fit.on{background:var(--lemon);color:#000}
.cs-gold{position:absolute;color:#000;opacity:.1;pointer-events:none}

.le-main{min-width:0}
.cs-stage{
  position:relative;margin-top:12px;
  background:#fff;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:320px;padding:40px;
}
.cs-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.07) 1px, transparent 1px);
}
.cs-band{
  position:absolute;border:0 solid rgba(0,0,0,.05);
  inset:0;pointer-events:none;
}
.cs-box{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:#fff;outline:1px dashed rgba(0,0,0,.18);
}
.cs-logo{display:block;width:auto}
.cs-x{
  position:absolute;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:#555;
}
.le-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
@media (max-width:760px){.le-cards{grid-template-columns:1fr}}
.le-card{
  position:relative;
  border-radius:14px;min-height:300px;padding:40px 24px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.le-card.dark{background:#0d0d0d;border:1px solid #2a2b2c}
.le-card.light{background:#fff;border:1px solid #d6d2ca}
.lc-logo{display:block}
.lc-text,.cs-text{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* hover export — save the lockup locally as JPG / transparent PNG / SVG */
.le-save{
  position:absolute;top:10px;right:10px;z-index:6;
  display:flex;gap:6px;
  opacity:0;transform:translateY(-4px);transition:.18s;pointer-events:none;
}
.cs-stage:hover .le-save,.le-card:hover .le-save{opacity:1;transform:none;pointer-events:auto}
.le-save button{
  font-size:8.5px;font-weight:700;letter-spacing:2px;
  padding:7px 12px;border-radius:99px;
  background:rgba(13,13,13,.82);color:#fff;border:1px solid rgba(255,255,255,.22);
  transition:.15s;
}
.le-save button:hover{background:var(--lemon);border-color:var(--lemon);color:#000}

/* picker tile contrast — dark logos get a light checker (.lt) */
.plog.lt{
  background:
    conic-gradient(#efece5 90deg,#faf8f3 90deg 180deg,#efece5 180deg 270deg,#faf8f3 270deg);
  background-size:14px 14px;
  border-color:#d6d2ca;
}

/* ─── account switcher (rail bottom) ──────────────────────── */
.rail-switch{
  margin-top:auto;margin-bottom:16px;
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:#7c828a;transition:.18s;
}
.rail-switch + .rail-switch{margin-top:0}  /* stacked rail buttons: only the first pushes down */
.rail-switch svg{width:19px;height:19px}
.rail-switch:hover{background:#1d2730;color:var(--lemon)}
html.theme-light .rail-switch{color:#8a857b}
html.theme-light .rail-switch:hover{background:#dad6cf;color:#0e7e78}
.switchbox{
  position:fixed;left:96px;bottom:18px;z-index:500;
  width:300px;background:#000;border:1px solid #2c2d2e;border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.switchbox.open{display:block}
.switchbox.shake{animation:shake .45s}
.sb-body{padding:16px;display:flex;flex-direction:column;gap:11px}
.sb-body .lb{font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a;line-height:1.8}
#sb-code{
  background:#15171c;border:1px solid #2e2f30;border-radius:9px;color:#fff;
  padding:12px;outline:none;text-align:center;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:5px;text-transform:uppercase;
}
#sb-code:focus{border-color:var(--lemon)}
#sb-go{
  background:var(--lemon);color:#000;border-radius:9px;padding:12px 0;
  font-size:10px;font-weight:700;letter-spacing:4px;transition:.15s;
}
#sb-go:hover{filter:brightness(1.08)}
.sb-err{
  height:12px;font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#ff4a4a;opacity:0;transition:.2s;text-align:center;
}
.sb-err.show{opacity:1}
@media (max-width:760px){
  .switchbox{left:8px;right:8px;bottom:90px;width:auto}
}

/* ─── welcome panel (after social sign-in) ────────────────── */
.welcome-veil{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .65s;
}
.welcome-veil.show{opacity:1}
.welcome-card{
  width:min(460px,100%);max-height:86vh;overflow-y:auto;
  background:#0d0e0f;border:1px solid #2c2d2e;border-radius:18px;
  padding:42px 40px 34px;display:flex;flex-direction:column;align-items:center;
  box-shadow:0 40px 110px rgba(0,0,0,.8);
  transform:translateY(10px);transition:transform .65s;text-align:center;
}
.welcome-veil.show .welcome-card{transform:none}
.welcome-card .wl{font-size:10px;font-weight:700;letter-spacing:8px;color:var(--lemon)}
.welcome-card .wn{margin-top:8px;font-size:34px;font-weight:700;letter-spacing:1px;color:#fff}
.welcome-card .wsub{
  margin-top:8px;font-size:9.5px;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;color:#9a9a9a;
}
html.theme-light .welcome-card .wsub{color:#8a857b}
.welcome-card .wp{
  margin:20px 0 0;font-size:10.5px;font-weight:500;letter-spacing:.8px;line-height:2;
  color:#bdbdbd;
}
.welcome-card .wt{
  margin-top:22px;padding-top:20px;border-top:1px solid #232425;
  display:flex;flex-direction:column;gap:7px;
}
.welcome-card .wt-k{font-size:8.5px;font-weight:700;letter-spacing:3px;color:var(--lemon)}
.welcome-card .wt-v{font-size:9.5px;font-weight:500;letter-spacing:.8px;line-height:1.9;color:#9a9a9a}
.wplans{margin-top:16px;width:100%;display:flex;flex-direction:column;gap:6px}
.wplan{
  display:grid;grid-template-columns:84px 1fr;gap:2px 12px;align-items:baseline;text-align:left;
  background:#15171c;border:1px solid #232425;border-radius:10px;padding:11px 14px;
}
.wplan.on{border-color:var(--lemon)}
.wplan .a{grid-row:span 2;font-size:9px;font-weight:700;letter-spacing:2px;color:#fff}
.wplan.on .a{color:var(--lemon)}
.wplan .b{font-size:10px;font-weight:700;letter-spacing:.5px;color:#dfdfdf}
.wplan .c{font-size:8.5px;font-weight:500;letter-spacing:.8px;color:#8b8b8b}
.w-enter{
  margin-top:24px;width:100%;background:var(--lemon);color:#000;border-radius:10px;
  padding:13px 0;font-size:10px;font-weight:700;letter-spacing:3px;transition:.15s;
}
.w-enter:hover{filter:brightness(1.08)}
.w-pricing{margin-top:14px;font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a}
.w-pricing:hover{color:var(--lemon)}
html.theme-light .welcome-veil{background:rgba(241,239,235,.75)}
html.theme-light .welcome-card{background:#fff;border-color:#c4c0b8;box-shadow:0 40px 110px rgba(0,0,0,.25)}
html.theme-light .welcome-card .wn{color:#141414}
html.theme-light .welcome-card .wp{color:#555}
html.theme-light .welcome-card .wt{border-color:#e2ded6}
html.theme-light .wplan{background:#f4f2ee;border-color:#e2ded6}
html.theme-light .wplan .a{color:#141414}
html.theme-light .wplan.on .a{color:#0e7e78}
html.theme-light .wplan .b{color:#333}

/* ─── admin panel (manage invites) ────────────────────────── */
.adminbox{
  position:fixed;left:96px;bottom:18px;z-index:500;
  width:360px;max-height:70vh;background:#000;border:1px solid #2c2d2e;border-radius:14px;
  overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.adminbox.open{display:flex}
.ab-body{padding:16px;display:flex;flex-direction:column;gap:11px;overflow-y:auto}
.ab-body .lb{font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9a9a;line-height:1.8}
.ab-row{display:flex;align-items:center;gap:8px}
.ab-row input,.ab-row select{
  flex:1;background:#15171c;border:1px solid #2e2f30;border-radius:9px;color:#fff;
  padding:10px;outline:none;font-family:inherit;font-size:11px;min-width:0;
}
.ab-row input:focus,.ab-row select:focus{border-color:var(--lemon)}
.ab-add{
  background:var(--lemon);color:#000;border-radius:9px;padding:11px 14px;
  font-size:10px;font-weight:700;letter-spacing:3px;transition:.15s;flex:none;
}
.ab-add:hover{filter:brightness(1.08)}
.ab-chips{display:flex;flex-wrap:wrap;gap:6px}
.ab-chip{
  background:#15171c;border:1px solid #2e2f30;border-radius:99px;color:#bdbdbd;
  padding:7px 13px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:.15s;
}
.ab-chip:hover{border-color:#4a4b4c}
.ab-chip.on{background:var(--lemon);border-color:var(--lemon);color:#000}
.ab-list{display:flex;flex-direction:column;gap:6px}
.ab-item{
  display:flex;align-items:center;gap:8px;
  background:#15171c;border:1px solid #232425;border-radius:9px;padding:9px 11px;
  font-size:11px;
}
.ab-item .em{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-item .bs{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--lemon)}
.ab-item .rm{width:10px;height:10px;border-radius:50%;background:#ff4a4a;cursor:pointer;flex:none}
.ab-note{font-size:9px;color:#9a9a9a;text-align:center;min-height:12px}
@media (max-width:760px){
  .adminbox{left:8px;right:8px;bottom:90px;width:auto}
}

/* ─── footer ──────────────────────────────────────────────── */
.site-footer{
  position:relative;z-index:6;
  display:flex;align-items:center;gap:14px;
  background:var(--bar);border-top:1px solid #2a2b2c;
  padding:26px 44px;
}
.site-footer img{height:20px;flex:none}
.ft-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;margin-right:30px}
.ft-name{font-size:12px;font-weight:700;letter-spacing:1px}
.ft-name b{color:var(--lemon)}
.ft-tag{
  font-size:7.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#8a8a8a;line-height:1.9;max-width:none;
}
html.theme-light .ft-tag{color:#8a857b}
.site-footer .links{
  margin-left:auto;display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#9a9a9a;
}
.site-footer .links a:hover{color:var(--lemon)}
html.theme-light .site-footer{background:#e4e1db;border-color:#d6d2ca}
html.theme-light .site-footer img{filter:invert(1)}
html.theme-light .ft-name{color:#141414}
html.theme-light .ft-name b{color:#0e7e78}
html.theme-light .site-footer .links{color:#6f6b62}
html.theme-light .site-footer .links a:hover{color:#0e7e78}

/* ─── mobile bottom app navigation (hidden on desktop) ────── */
.m-nav{display:none}

/* ─── mobile header pieces (hidden on desktop) ────────────── */
.m-head,.m-brandstrip,.m-tools{display:none}

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width:760px){
  :root{--rail-w:0px}
  .bar-top{display:none}
  /* login + pricing keep their header + theme toggle on mobile */
  body[data-page="login"] .bar-top,
  body[data-page="pricing"] .bar-top{display:flex}
  body[data-page="login"] .bar-title .t-desk,
  body[data-page="pricing"] .bar-title .t-desk{display:none}
  body[data-page="login"] .bar-title .t-mob,
  body[data-page="pricing"] .bar-title .t-mob{display:inline}
  body[data-page="pricing"] .site-footer{padding-bottom:26px}
  .app-body{padding-top:0}
  .rail{display:none}
  .canvas{margin-left:0}

  .m-head{
    display:flex;align-items:center;gap:14px;
    background:#000;padding:14px 16px;
  }
  .m-head .mlogo{flex:none;width:50px;height:34px;position:relative}
  .m-head .mlogo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    transition:opacity .25s,transform .25s;
  }
  .m-head .blogo{opacity:0;transform:translateY(6px)}
  body.m-scrolled .m-head .flogo{opacity:0;transform:translateY(-6px)}
  body.m-scrolled .m-head .blogo{opacity:1;transform:translateY(0)}
  html.theme-light .m-head .blogo{filter:invert(1)}
  .m-head .t{
    flex:1;text-align:center;
    font-size:12px;font-weight:600;letter-spacing:2px;
  }
  .m-head img.av{width:34px;height:34px;border-radius:50%;object-fit:cover}

  .m-brandstrip{
    display:flex;gap:6px;align-items:center;
    background:#161718;padding:10px 12px;overflow-x:auto;
  }
  .m-brandstrip .bt{flex:none;width:54px;height:54px;border-radius:8px;display:flex;align-items:center;justify-content:center}
  .m-brandstrip .bt img{width:70%;height:70%;object-fit:contain}
  .m-brandstrip .add{
    flex:none;width:34px;height:34px;border-radius:50%;background:#1e1e1e;
    color:#aaa;font-size:17px;display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 1px 2px #000;
  }

  /* full-screen hero under the header rows — landing page only;
     subpages open straight with the content */
  .hero{height:calc(100svh - 62px) !important;min-height:420px;position:relative;top:0;left:0;clip-path:none;transform:none !important}
  body:not([data-page="index"]) .hero{display:none}
  .hero-spacer{display:none}
  .hero-nav{display:none}
  /* brand logo — bigger, top center */
  .hero-logo{display:flex;height:92px !important;width:150px;top:44px !important}
  .hero-title{font-size:13px;letter-spacing:3px;white-space:normal;width:86%;top:58% !important}
  .hero-meta{display:none}
  .hero-edit{top:auto;bottom:12px;transform:none}
  .hero-reset{top:auto;bottom:12px;transform:none}

  .library{padding:0 14px 170px}
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .tabs{display:none} /* the bottom app nav replaces the tab row on mobile */

  /* bottom app navigation */
  .m-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:350;
    display:flex;
    background:rgba(13,14,16,.92);backdrop-filter:blur(14px);
    border-top:1px solid #26272a;
    padding:9px 4px calc(9px + env(safe-area-inset-bottom));
  }
  .m-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    font-size:6.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
    color:#9a9a9a;transition:.15s;min-width:0;
  }
  .m-nav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .m-nav a svg{width:20px;height:20px;flex:none}
  .m-nav a.on{color:var(--lemon)}
  html.theme-light .m-nav{background:rgba(240,238,233,.94);border-color:#d6d2ca}
  html.theme-light .m-nav a{color:#6f6b62}
  html.theme-light .m-nav a.on{color:#0e7e78}

  .site-footer{padding:22px 16px 96px;flex-wrap:wrap}

  .colors-wrap,.page-wrap{padding:0 14px 190px}
  /* print sliders — much bigger touch targets on mobile */
  #print-size,#print-rot{height:14px;border-radius:7px}
  #print-size::-webkit-slider-thumb,#print-rot::-webkit-slider-thumb{
    width:38px;height:38px;border-width:6px;
  }
  #print-size::-moz-range-thumb,#print-rot::-moz-range-thumb{
    width:38px;height:38px;border-width:6px;
  }
  .ps-block .lb{font-size:11px}
  .ps-block .lb b{font-size:13px}
  .add-row,.gh-row{flex-wrap:wrap}
  .snip-form .row{flex-wrap:wrap}
  .balance{min-height:380px}

  /* ── touch: hover-revealed controls are always visible & tappable ── */
  .tile .zoom,.tile .tile-del,.ch-del,.color-card .del,.color-card .pc,
  .font-card .fdel,.grad-card .hx,.photo-bar{opacity:1}
  .photo-bar{transform:none}
  .le-save{opacity:1;transform:none;pointer-events:auto}
  .ch-del{min-width:30px;height:30px;border-radius:15px}
  .color-card .del,.font-card .fdel{width:30px;height:30px;font-size:15px}
  .chip-x{width:28px;height:28px;font-size:13px}
  .tile-label{gap:18px}
  .tile-label .dl{padding:9px;margin:-9px}      /* 13px icon, ~31px tap zone */
  .snippet .sbtn{padding:10px 4px}
  .soc{padding:10px 14px}
  .add-row button,.gh-row button{padding:13px 22px}  /* wrapped rows lose flex-stretch height */
  .login-foot .foot-pricing{display:inline-block;padding:8px 2px;margin:-6px 0}
  .site-footer .links a{display:inline-block;padding:8px 4px;margin:-8px -4px}
  .m-nav a{font-size:7.5px;letter-spacing:.5px}

  /* COLOR BOX — full-screen sheet: backdrop blocks the page, everything
     fits one screen, the save row sticks to the bottom */
  .cb-backdrop.open{
    display:block;position:fixed;inset:0;z-index:490;
    background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  }
  body.cb-open{overflow:hidden}
  .colorbox{
    inset:0;width:auto;border:none;border-radius:0;
    flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  }
  .colorbox.open{display:flex}
  .cb-stage{width:min(64vw,250px);height:min(64vw,250px);margin:10px auto 0}
  .cb-name{margin:12px 0 0}
  .cb-swatch{height:52px;flex:none}
  .cb-recent{order:98;margin:12px 16px}
  .cb-actions{
    order:99;position:sticky;bottom:0;margin:auto 0 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:#000;box-shadow:0 -10px 24px rgba(0,0,0,.6);
  }
  .cb-actions button{padding:15px 0}
}