/* ---------------------------------------------------------- tables */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;padding:11px 13px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table a{color:var(--primary)}
.table .pos{color:var(--primary);font-family:var(--f-mono)}
.table .neg{color:var(--danger);font-family:var(--f-mono)}
.thumb{width:42px;height:42px;object-fit:contain;background:var(--art);border-radius:6px}
.scroll{overflow-x:auto}

/* ---------------------------------------------------------- badges */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);text-transform:capitalize}
.badge.open{background:var(--primary-soft);color:var(--primary)}
.badge.answered{background:rgba(143,184,232,.12);color:var(--accent-cyan)}
.badge.closed{background:rgba(255,255,255,.06);color:var(--text-faint)}
.badge.role{background:rgba(143,184,232,.12);color:var(--accent-blue)}

/* ---------------------------------------------------------- library */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.lib article{display:flex;flex-direction:column;background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s var(--ease)}
.lib article:hover{transform:translateY(-3px);border-color:var(--line-hi)}
.lib .art{position:relative;display:block;background:var(--art)}
.lib .art img{width:100%;aspect-ratio:1;object-fit:contain}
.lib .art .count{position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:700}
.lib .meta{padding:12px 14px 0}
.lib .meta h3{margin-bottom:2px;overflow-wrap:anywhere}
.lib .meta small{font-size:12.5px}
.lib .meta .warn{color:var(--warn)}
.lib .tools{padding:10px;margin-top:auto}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:6px 2px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--bg-surface);color:var(--text-muted);font-family:var(--f-sans);
  font-size:11.5px;font-weight:600;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tool:hover{color:var(--primary);border-color:var(--line-hi)}
.tool.danger:hover{color:var(--danger);border-color:var(--danger-line)}
@media(max-width:760px){
  .lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lib .meta{padding:10px 10px 0}
  .lib .meta h3{font-size:14.5px}
  .lib .tools{padding:8px;gap:3px}
  .tool{min-height:50px;font-size:11px}
  .lib article:hover{transform:none}
}

/* ---------------------------------------------------------- image page
   The picture and its variations on the left, controls on the right. On a
   phone it stacks: picture, variations, download and delete, then controls. */
.crumb{margin-bottom:var(--s3);font-size:14px}
.crumb a{color:var(--text-muted)}
.crumb a:hover{color:var(--primary)}
.imgpage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s4);align-items:start}
.viewer{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.viewer-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.viewer-head h1{overflow-wrap:anywhere}
.sel-label{color:var(--primary);font-weight:600;font-size:15px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;
  background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:var(--s2)}
.tabs button{padding:10px 6px;min-height:42px;border:none;border-radius:var(--r-sm);background:none;
  color:var(--text-muted);font-family:var(--f-sans);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.tabs button:hover{color:var(--text-main)}
.tabs button.on{background:var(--primary-soft);color:var(--primary)}
.linkbtn{display:block;margin:var(--s3) auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--f-sans);font-size:13.5px;padding:8px}
.danger-link{color:var(--danger)}
.danger-link:hover{text-decoration:underline}
.varhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.varhead .hint-text{margin:4px 0 var(--s2)}
.varhead .btn{flex:none}
.saved-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s2)}
.saved-row .saved-list{flex:1;min-width:0}
.saved-row .hint{margin:0;font-size:12.5px;color:var(--text-faint)}
.ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ways .chip{padding:7px 11px;font-size:13px;border-radius:var(--r-sm);min-width:0}
@media(max-width:760px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
.side{position:sticky;top:82px}
.viewer .stage{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--art);display:grid;place-items:center}
.viewer canvas{display:block;width:auto;max-width:100%;height:auto;max-height:min(52vh,520px)}
.viewer-acts{display:flex;gap:var(--s2)}
.viewer-acts .btn{flex:1}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumbbtn{flex:none;width:92px;display:flex;flex-direction:column;gap:5px;padding:0;
  background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--f-sans);
  font-size:12px;text-align:left}
.thumbbtn img{width:92px;height:92px;object-fit:contain;background:var(--art);
  border-radius:var(--r-sm);border:2px solid var(--line)}
.thumbbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbbtn.on img{border-color:var(--primary)}
.thumbbtn.on{color:var(--primary)}
.side{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.side .card + .card{margin-top:0}
.side .card-head{margin-bottom:var(--s2)}
.hint-text{color:var(--text-muted);font-size:13.5px;margin-bottom:var(--s3)}
.adj-actions{display:flex;gap:8px;align-items:center;margin-top:var(--s2)}
.adj-actions #resetAdj{margin-right:auto}
.adj-help{margin:10px 0 0;font-size:12.5px;opacity:.6;transition:opacity .2s var(--ease)}
.adj-help.on{opacity:1}
@media(max-width:900px){
  .imgpage{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .viewer canvas{max-height:none}
}

/* ---------------------------------------------------------- studio
   One page: mode, design, chain, words. A chosen pick folds to a one-line
   summary so a returning user only sees the words box. */
.studio{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s3)}
.studio .card + .card{margin-top:0}
.tabs.mode{grid-template-columns:repeat(2,1fr);margin:0}
.pick-head{display:flex;align-items:center;gap:var(--s2);min-height:40px}
.pick-title{font-weight:700;font-size:16px;flex:none;width:68px}
.pick-sum{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:var(--text-muted);
  font-size:14.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pick-sum img{width:40px;height:40px;object-fit:contain;background:var(--art);
  border-radius:6px;flex:none}
.pick-sum b{color:var(--text-main);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.pick-change{display:none}
.pick-body{margin-top:var(--s3)}
.pick.done .pick-body{display:none}
.pick.done .pick-change{display:inline-flex}
.center-text{text-align:center}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s2)}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.results figure{background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.results img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--art);cursor:zoom-in}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px}
@media(max-width:760px){.results{gap:10px}}

/* ---------------------------------------------------------- auth */
.auth{max-width:406px;margin:var(--s6) auto}
.auth .card{padding:var(--s5)}
.auth h1{margin-bottom:6px}
.auth .alt{margin-top:var(--s4);text-align:center;font-size:14px;color:var(--text-muted)}
.auth .alt a{color:var(--primary)}

/* ---------------------------------------------------------- pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.plan{position:relative;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4);backdrop-filter:blur(14px);
  display:flex;flex-direction:column}
.plan.best{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-glow),var(--sh)}
.plan .tag{position:absolute;top:15px;right:16px;font-size:11.5px;font-weight:600;
  color:var(--primary);background:var(--primary-soft);padding:3px 10px;
  border-radius:var(--r-pill)}
.plan .pname{font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:10px}
.plan .price{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan .rate{color:var(--text-faint);font-size:13.5px;margin-top:7px}
.plan ul{list-style:none;margin:var(--s3) 0 var(--s4);display:flex;flex-direction:column;
  gap:9px;font-size:14.5px;color:var(--text-muted);flex:1}
.plan li{position:relative;padding-left:19px}
.plan li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--primary)}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

/* ---------------------------------------------------------- tickets */
.thread{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s4) 0}
.msg{max-width:84%;padding:15px 17px;border-radius:var(--r);background:var(--bg-card);
  border:1px solid var(--line)}
.msg.staff{align-self:flex-end;background:var(--bg-card-hover);
  border-left:3px solid var(--primary)}
.msg .who{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}
.msg p{font-size:15px;line-height:1.6;white-space:pre-wrap;max-width:none;overflow-wrap:anywhere}
.attach{display:flex;gap:14px;align-items:center}
.attach img{width:58px;height:58px;object-fit:contain;background:var(--art);border-radius:8px}

/* ---------------------------------------------------------- admin */
.rows{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:var(--s3)}
.rows li{display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s var(--ease)}
.rows li:hover{border-color:var(--line-hi)}
.rows img{width:42px;height:42px;object-fit:cover;border-radius:6px;background:var(--art);
  flex:none}
.rows .info{min-width:0;flex:1}
.rows .info b{display:block;font-size:14.5px;font-weight:600}
.rows .info small{display:block;color:var(--text-faint);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{padding:6px 12px;border-radius:6px;background:transparent;border:1px solid var(--line-hi);
  color:var(--text-muted);font-family:var(--f-sans);font-size:12.5px;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.mini:hover{color:var(--primary);border-color:var(--primary)}
.mini.danger:hover{color:var(--danger);border-color:var(--danger)}

/* spend meters, so a runaway is visible before the bill */
.meters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.meter .top{display:flex;justify-content:space-between;font-size:13px;
  color:var(--text-muted);margin-bottom:8px}
.meter .bar{height:7px;border-radius:4px;background:var(--bg-input);overflow:hidden}
.meter .fill{height:100%;border-radius:4px;background:var(--primary);
  transition:width .5s var(--ease)}
.meter.hot .fill{background:var(--gold)}
.meter.over .fill{background:var(--danger)}
@media(max-width:620px){.meters{grid-template-columns:1fr}}

.promptcell{max-width:300px}
.promptcell summary{cursor:pointer;color:var(--accent-cyan);font-size:13px}
.promptcell p{margin-top:7px;font-size:12.5px;color:var(--text-muted);line-height:1.5}

#icon-out img,.pixel img{image-rendering:pixelated}

@media(max-width:620px){
  .shell{padding:var(--s4) var(--s3) 80px}
  .card{padding:var(--s3)}
  .topbar{padding:0 var(--s3);gap:var(--s3)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ---------------------------------------------------------- work split
   Controls on the left, the result beside them, so nothing has to be
   scrolled to after a generation finishes. */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s4);align-items:start}
.work-result .stage{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--art)}
.work-result .stage img{width:100%;display:block;cursor:zoom-in}
.work-result .placeholder{display:grid;place-items:center;aspect-ratio:1;
  border-style:dashed;color:var(--text-faint);font-size:14px}
@media(max-width:880px){.work{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------- lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:64px var(--s6);
  background:var(--overlay);backdrop-filter:blur(8px)}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);border-radius:var(--r);
  border:1px solid var(--line);background:var(--art)}
.lb-close,.lb-nav{position:absolute;border-radius:50%;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--line-hi);color:var(--text-main);
  line-height:1;transition:background-color .2s var(--ease),
  border-color .2s var(--ease),transform .15s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:var(--bg-card-hover);border-color:var(--primary)}
.lb-close{top:18px;right:20px;width:42px;height:42px;font-size:25px}
.lb-nav{top:50%;margin-top:-24px;width:48px;height:48px;font-size:30px}
.lb-nav:hover{transform:scale(1.06)}
.lb-nav.prev{left:18px}
.lb-nav.next{right:18px}
.lb-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:var(--text-muted);font-size:14px;font-family:var(--f-mono)}
[data-zoom]{cursor:zoom-in}
@media(max-width:620px){.lightbox{padding:56px 8px}
  .lb-nav{width:40px;height:40px;font-size:24px}
  .lb-nav.prev{left:6px}.lb-nav.next{right:6px}}


/* ---------------------------------------------------------- variation builder */
.builder{background:var(--bg-surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s3)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.slots .field{margin-bottom:0}
@media(max-width:820px){.slots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.slots{grid-template-columns:minmax(0,1fr)}}

.varlist{list-style:none;display:flex;flex-direction:column;gap:8px;
  margin-top:var(--s3)}
.varlist li{display:flex;align-items:center;gap:var(--s2);padding:10px 13px;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:14.5px;animation:varin .28s var(--ease) both}
.varlist li span{flex:1;min-width:0}
.varlist li button{margin-left:auto}
@keyframes varin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- reviews */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s3);margin-top:var(--s4)}
.review-slot{padding:var(--s4);border:1px dashed var(--line-hi);
  border-radius:var(--r-lg);text-align:center;color:var(--text-muted);
  font-size:15px}
.review-slot a{color:var(--primary)}
.review{padding:var(--s4);background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.review p{font-size:15.5px;line-height:1.65}
.review .who{margin-top:var(--s3);font-size:13.5px;color:var(--text-faint)}
/* Sections start hidden only when JS will reveal them, never for
   visitors with scripting off or reduced motion on. */
.no-js .section, .no-js .reveal{opacity:1 !important}

/* Audit rows with no image: a generation that was never exported, or whose
   files have since expired. Saying which is more use than an empty cell. */
.thumb-note{display:inline-block;padding:5px 9px;border-radius:6px;
  background:var(--bg-input);border:1px solid var(--line);
  color:var(--text-faint);font-size:11px;font-family:var(--f-mono);
  white-space:nowrap}

/* Library search, page size and pager. */
.lib-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s3)}
.lib-bar input[type=search]{flex:1 1 220px;min-width:0}
.lib-bar .per{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13.5px;
  color:var(--text-muted);white-space:nowrap}
.lib-bar .per select{width:auto;min-height:40px;padding-top:7px;padding-bottom:7px}
.lib-found{font-size:13px;margin:-4px 0 var(--s3)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:var(--s3) 0;
  font-size:13.5px}
.pager [aria-disabled]{opacity:.35;pointer-events:none}

/* Listing tab and the extras on the Download tab. */
.copyrow{display:flex;gap:8px;align-items:flex-start}
.copyrow input,.copyrow textarea{flex:1;min-width:0}
.copyrow .btn{flex:none}
.namerow{align-items:center;margin-bottom:8px}
.namerow .count,#kwCount{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);
  min-width:40px;text-align:right}
.namerow .count.over,#kwCount.over{color:var(--danger)}
.brandrow{display:flex;gap:12px;align-items:flex-start}
.brandrow img{flex:none;width:100px;height:80px;border-radius:6px;background:#18181c;
  border:1px solid var(--line)}
.brandin{flex:1;min-width:0}
.skipchip{margin:4px 0 14px}
.howto{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-surface);font-size:14px}
.howto summary{cursor:pointer;font-weight:600;color:var(--primary)}
.howto ol{margin:10px 0 6px 18px;display:grid;gap:5px;color:var(--text-muted)}
.howto a{color:var(--primary)}
.copyrow textarea{resize:none;overflow:hidden}
@media (max-width:420px){.tabs button{font-size:13.5px;padding:10px 2px}}
.foot-links{display:flex;justify-content:space-between;gap:12px;margin-top:var(--s3)}
.foot-links .linkbtn{margin:0;color:var(--text-muted);font-size:13.5px}
.foot-links .linkbtn:hover{color:var(--primary)}
.foot-links .danger-link{color:var(--danger)}
.scroll{scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
.small-print{color:var(--text-faint);font-size:13px;margin-top:var(--s2)}

/* ---------------------------------------------------------- legal + footer */
.sitefoot{position:relative;z-index:1;max-width:1120px;margin:-56px auto 0;
  padding:var(--s4);display:flex;flex-wrap:wrap;gap:6px 20px;
  border-top:1px solid var(--line);color:var(--text-faint);font-size:13px}
.sitefoot a{color:var(--text-muted)}
.sitefoot a:hover{color:var(--text-main)}
@media(max-width:760px){
  .sitefoot{margin-top:calc(-1 * (var(--tabbar-h) + 16px));
    padding:var(--s3) 16px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom,0px))}
}
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.legal-tabs a{padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:13.5px;color:var(--text-muted)}
.legal-tabs a.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.legal{max-width:760px;padding:var(--s5);line-height:1.65}
.legal h2{font-size:17px;margin:var(--s5) 0 var(--s2)}
.legal p,.legal ul{margin:0 0 var(--s3);color:var(--text-muted)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.legal b{color:var(--text-main);font-weight:600}
.legal a{color:var(--primary)}
@media(max-width:760px){.legal{padding:var(--s4) 16px}}