/* ===== ANIMADEX ===================================================== */
:root{
  --bg:#07070e;
  --bg-soft:#0e0e1a;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-bright:rgba(255,255,255,.16);
  --text:#edecf6;
  --muted:#8e8ea8;
  --faint:#5d5d77;
  --c1:#ff2e88;          /* hot pink   */
  --c2:#8b5cff;          /* violet     */
  --c3:#23e3d3;          /* aqua       */
  --grad:linear-gradient(120deg,var(--c1),var(--c2) 52%,var(--c3));
  --topbar-h:66px;
  --radius:14px;
  font-synthesis-weight:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
img{display:block}
/* the hidden attribute must beat any class that sets `display` */
[hidden]{display:none!important}
::selection{background:var(--c2);color:#fff}

/* animated ambient background ---------------------------------------- */
.bg-fx{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(900px 600px at 80% -5%,rgba(139,92,255,.12),transparent 70%),
  radial-gradient(800px 600px at 5% 100%,rgba(35,227,211,.10),transparent 70%),
  var(--bg);}
.bg-fx::before,.bg-fx::after{
  content:'';position:absolute;width:46vw;height:46vw;border-radius:50%;
  filter:blur(140px);opacity:.20;z-index:-1;
}
.bg-fx::before{background:var(--c1);top:-16vw;left:-8vw;
  animation:drift 30s ease-in-out infinite alternate;}
.bg-fx::after{background:var(--c3);bottom:-20vw;right:-8vw;
  animation:drift 38s ease-in-out infinite alternate-reverse;}
@keyframes drift{to{transform:translate(7vw,5vw) scale(1.25)}}

/* scrollbars ---------------------------------------------------------- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-bright);border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:var(--c2)}

/* ===== top bar ====================================================== */
.topbar{
  position:sticky;top:0;z-index:50;min-height:var(--topbar-h);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 22px;padding:0 22px;
  background:rgba(9,9,17,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad);opacity:.55;
}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0;
  font-weight:700;font-size:20px;letter-spacing:.5px;}
.brand-mark{
  font-size:18px;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;
  animation:spin 7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-name b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:700;
}

/* Three-column topbar layout: the side groups each absorb half of the
   leftover space, so the search bar stays viewport-centered regardless
   of how wide either side gets (margin:auto on the search alone would
   only center it between siblings -- and drifts whenever the right
   group gets heavier, e.g. with the gh-btn pill). */
.topbar-left, .topbar-right{
  display:flex;align-items:center;gap:22px;flex:1 1 0;min-width:0;
}
.topbar-left { justify-content:flex-start; }
.topbar-right{ justify-content:flex-end;   }
/* The legacy .acct rule (line ~1290) uses margin-left:auto to pin
   itself to the right of the flat-topbar layout the subpages still
   use. Inside .topbar-right (which already flex-end-justifies) that
   auto margin would instead create a gap between sort and acct, so
   neutralise it locally. */
.topbar-right .acct{ margin-left:0; }
.search{
  position:relative;flex:0 1 620px;width:100%;max-width:620px;margin:0;
  display:flex;align-items:center;
}
/* the search trigger -- a full-height round button on the right end of
   the pill, inscribed so its right curve matches the input's */
.search-icon{
  position:absolute;right:0;top:0;bottom:0;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;border-radius:50%;
  font-size:18px;color:var(--muted);
  transition:color .13s,background .13s,transform .13s;
}
.search-icon:hover{color:var(--text);background:var(--panel-2)}
.search-icon:active{transform:scale(.92)}
#q{
  width:100%;padding:11px 48px 11px 18px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);font-size:14px;transition:.18s;
}
#q::placeholder{color:var(--faint)}
#q:focus{
  outline:none;border-color:transparent;background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px var(--c2),0 0 22px -4px rgba(139,92,255,.6);
}
#q::-webkit-search-cancel-button{filter:invert(.6)}

.sort{
  display:flex;align-items:center;flex-shrink:0;padding:3px;
  border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.sort > button{
  padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--muted);transition:.16s;white-space:nowrap;
}
.sort > button.on{color:#fff;background:var(--grad);
  box-shadow:0 4px 16px -5px rgba(139,92,255,.8);}
.sort > button:not(.on):hover{color:var(--text)}

/* sort overflow ("…") -- holds extra sort options off-bar */
.sort-more{position:relative}
.sort-more-btn{
  padding:4px 10px;border-radius:999px;font-size:14px;font-weight:700;
  color:var(--muted);line-height:1;
}
.sort-more-btn:hover{color:var(--text);background:var(--panel-2)}
.sort-more.open .sort-more-btn{color:#fff;background:var(--panel-2)}
.sort-more-list{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:200px;display:none;flex-direction:column;gap:1px;padding:6px;
  background:rgba(14,14,24,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line-bright);border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
}
.sort-more.open .sort-more-list{display:flex}
.sort-more-list button{
  text-align:left;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text);
  background:transparent;transition:background .13s;
}
.sort-more-list button:hover{background:var(--panel-2)}
.sort-more-list button.on{
  background:rgba(139,92,255,.16);color:#fff
}

/* dataset switch (Characters / Artists) -- primary navigation */
.modeswitch{
  display:flex;flex-shrink:0;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.modeswitch button,
.modeswitch a{
  padding:7px 17px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--muted);transition:.16s;white-space:nowrap;
  display:inline-flex;align-items:center;text-decoration:none;
}
.modeswitch button.on,
.modeswitch a.on{color:#fff;background:var(--grad);
  box-shadow:0 4px 16px -5px rgba(139,92,255,.8);}
.modeswitch button:not(.on):hover,
.modeswitch a:not(.on):hover{color:var(--text)}
/* on the subpage topbar these are just nav links, not toggles */
.nav-links{background:transparent;border-color:transparent;padding:0;gap:2px}

/* "Browse by" dropdown nav menu */
.navmenu{position:relative;flex-shrink:0}
.navmenu-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--muted);background:rgba(255,255,255,.05);
  border:1px solid var(--line);transition:.16s;white-space:nowrap;
}
.navmenu-btn:hover{color:var(--text)}
.navmenu.open .navmenu-btn{color:#fff;border-color:var(--c2)}
.navcaret{font-size:9px;transition:transform .16s}
.navmenu.open .navcaret{transform:rotate(180deg)}
.navmenu-list{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:240px;display:none;flex-direction:column;gap:1px;padding:8px;
  background:rgba(14,14,24,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line-bright);border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
}
.navmenu.open .navmenu-list{display:flex}
.navmenu-list button,
.navmenu-list a{
  display:flex;align-items:center;gap:10px;
  text-align:left;padding:9px 11px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text);transition:background .13s;
  text-decoration:none;
}
.navmenu-list button:hover,
.navmenu-list a:hover{background:var(--panel-2)}
.navmenu-list .nm-section{
  font:800 9.5px/1 'Space Grotesk',sans-serif;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--faint);
  padding:10px 11px 4px;margin-top:2px;
}
.navmenu-list .nm-section:first-child{margin-top:0;padding-top:4px}
.navmenu-list .nm-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--c2);font-size:13px
}
.navmenu-list button.on{background:rgba(139,92,255,.16);color:#fff}

/* ===== layout ======================================================= */
.layout{
  display:grid;grid-template-columns:270px 1fr;
  align-items:start;max-width:2200px;margin:0 auto;
}
/* the copyright browse view has no filter sidebar */
body.no-sidebar .sidebar{display:none}
body.no-sidebar .layout{grid-template-columns:1fr}
body.no-sidebar .main{border-left:none}

/* ===== sidebar ====================================================== */
.sidebar{
  position:sticky;top:var(--topbar-h);
  /* one scroll region: facet groups keep their natural height, and the
     sidebar scrolls only when they genuinely exceed the viewport */
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;padding:20px 16px 24px;
}
.sidebar-title{
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;padding-left:4px;
}

/* collapsible filter group ------------------------------------------- */
.fgroup{margin-bottom:6px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:none}
.fgroup-head{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:9px 5px;border-radius:8px;transition:background .13s;
}
.fgroup-head:hover{background:var(--panel-2)}
.fgroup-head .ti{
  flex:1;text-align:left;font-size:13px;font-weight:600;letter-spacing:.4px;
}
.fgroup-head .ti::before{
  content:'';display:inline-block;width:3px;height:13px;border-radius:2px;
  background:var(--grad);margin-right:8px;vertical-align:-2px;
}
.fgroup-head .badge-n{
  font-size:10.5px;font-weight:700;color:#fff;
  background:var(--grad);border-radius:999px;padding:1px 7px;
}
.caret{font-size:9px;color:var(--muted);transition:transform .16s}
.fgroup.collapsed .caret{transform:rotate(-90deg)}
.fgroup-body{padding:2px 0 12px}
.fgroup.collapsed .fgroup-body{display:none}

.fsearch{
  width:100%;padding:7px 11px;font-size:12px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--text);margin-bottom:6px;transition:.16s;
}
.fsearch::placeholder{color:var(--faint)}
.fsearch:focus{outline:none;border-color:var(--c2);
  background:rgba(255,255,255,.06);}
.flist{display:flex;flex-direction:column;gap:1px}
/* the big facets (Character / Copyright / Artist) have long 30-row lists --
   cap them with their own scroll so they don't dominate the sidebar.
   The small trait facets stay uncapped at natural height. */
.fgroup.searchable .flist{max-height:360px;overflow-y:auto}
.fopt{
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  cursor:pointer;transition:background .13s;
}
.fopt:hover{background:var(--panel-2)}
.fopt.on{background:rgba(139,92,255,.12)}
.fopt input{position:absolute;opacity:0;pointer-events:none}
.fopt .box{
  flex-shrink:0;width:15px;height:15px;border-radius:5px;
  border:1.5px solid var(--line-bright);transition:.13s;position:relative;
}
.fopt.on .box{background:var(--grad);border-color:transparent}
.fopt.on .box::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.fopt .fl{
  flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
}
.fopt.on .fl{font-weight:600}
.fopt .fc{font-size:10.5px;color:var(--faint);font-weight:600;flex-shrink:0}
/* the standalone "LoRAs Available" toggle, below the facet groups */
.loras-filter{
  margin-top:4px;padding-top:13px; padding-bottom:13px;border-top:1px solid var(--line);
}

/* small "?" help affordance next to the LoRAs toggle (and reusable) */
.fhelp{
  flex-shrink:0;margin-left:auto;
  width:18px;height:18px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);font-size:11px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:help;padding:0;transition:.13s;
}
.fhelp:hover,.fhelp[aria-expanded="true"]{
  border-color:var(--c3);color:var(--c3);
}

/* the floating help popup -- positioned in JS relative to the button */
.fhelp-pop{
  position:fixed;z-index:120;
  width:320px;max-width:calc(100vw - 16px);
  background:black;border:1px solid var(--line);
  border-radius:10px;padding:14px 18px 14px 16px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  font-size:12.5px;line-height:1.5;color:var(--muted);
}
.fhelp-pop h3{
  font-size:13px;font-weight:700;margin:0 0 8px;color:var(--c3);
  padding-right:18px;                            /* room for close X */
}
.fhelp-pop h4{
  font-size:12px;font-weight:700;margin:12px 0 4px;color:var(--text);
  text-transform:uppercase;letter-spacing:.4px;
}
.fhelp-pop p,.fhelp-pop ul{margin:0 0 6px}
.fhelp-pop ul{padding-left:16px}
.fhelp-pop li{margin:2px 0}
.fhelp-pop b{color:var(--text);font-weight:600}
.fhelp-pop code{
  background:var(--panel-2);padding:1px 5px;border-radius:3px;
  font-size:11.5px;color:var(--text);
  font-family:ui-monospace,Consolas,monospace;
}
.fhelp-note{
  margin-top:10px !important;padding-top:9px;
  border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);
}
.fhelp-close{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;border-radius:50%;
  background:transparent;border:none;
  color:var(--muted);font-size:18px;line-height:1;
  cursor:pointer;padding:0;
}
.fhelp-close:hover{color:var(--text);background:var(--panel-2)}
.fempty{font-size:11.5px;color:var(--faint);padding:8px;font-style:italic}
.fhint{
  font-size:10.5px;color:var(--muted);line-height:1.45;
  padding:8px 6px 0;display:flex;gap:5px;align-items:baseline;
}
.fhint::before{content:'⌕';color:var(--c3);font-size:12px}

/* ===== results bar ================================================== */
/* the column divider lives here so it stays full-height as the gallery
   grows, instead of on the now content-sized sidebar */
.main{padding:18px 24px 80px;min-width:0;border-left:1px solid var(--line)}
.resultbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.rc{font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
.rc b{color:var(--text);font-weight:700}
.activechips{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.achip{
  display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--line);cursor:pointer;
}
.achip .x{color:var(--muted);font-size:13px;line-height:1;transition:.13s}
.achip:hover{border-color:var(--c1)}
.achip:hover .x{color:var(--c1)}
.achip .cat{color:var(--faint);text-transform:uppercase;font-size:9px;
  letter-spacing:.5px;}
.clearall{
  font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 10px;
  border-radius:999px;border:1px solid var(--line);transition:.14s;
}
.clearall:hover{color:#fff;border-color:var(--c1);background:rgba(255,46,136,.1)}

/* artist-page disclaimer about the model-derived Score */
.disclaimer{
  margin-bottom:16px;padding:9px 14px;
  font-size:11.5px;line-height:1.55;color:var(--muted);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-left:2px solid var(--c3);
  border-radius:8px;
}
.disclaimer b{color:var(--text);font-weight:700}

/* dev-mode category-curation bar */
.devbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:14px;padding:8px 12px;border-radius:10px;
  background:rgba(139,92,255,.08);border:1px dashed rgba(139,92,255,.55);
}
.dev-tag{
  font-size:9.5px;font-weight:800;letter-spacing:1.5px;color:#fff;
  background:var(--grad);border-radius:5px;padding:3px 7px;
}
.dev-cap{font-size:11.5px;font-weight:600;color:var(--muted)}
.dev-sel,.dev-input{
  font-size:12px;padding:5px 9px;border-radius:7px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--line-bright);
}
.dev-sel:focus,.dev-input:focus{outline:none;border-color:var(--c2)}
.dev-input{width:168px}
.dev-btn{
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;
  color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line-bright);cursor:pointer;transition:.13s;
}
.dev-btn:hover{border-color:var(--c2);color:#fff}
.dev-x{color:var(--c1)}
.dev-x:hover{border-color:var(--c1);background:rgba(255,46,136,.12)}
.dev-sep{width:1px;height:20px;background:var(--line-bright)}
.dev-hint{font-size:11px;font-weight:600;color:var(--c3)}

/* tiles while a tagging category is active */
#gallery.tagging .tile{cursor:pointer}
.tile.tagged{outline:2px solid var(--c2);outline-offset:-2px}
.tile.tagged::after{
  content:'✓';position:absolute;top:8px;left:8px;z-index:6;
  width:23px;height:23px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;border-radius:50%;
  background:var(--c2);box-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* dev 'Regenerate mode' toggle + the prompt editor */
.dev-toggle{
  font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:7px;
  color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line-bright);cursor:pointer;transition:.13s;
}
.dev-toggle:hover{border-color:var(--c2)}
.dev-toggle.on{background:var(--grad);color:#fff;border-color:transparent}
#gallery.regen-mode .tile{cursor:pointer}

.regen-ov{
  position:fixed;inset:0;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(5,5,12,.8);backdrop-filter:blur(5px);
}
.regen-box{
  width:min(560px,100%);background:var(--bg-soft);
  border:1px solid var(--line-bright);border-radius:14px;padding:20px 22px;
}
.regen-title{font-size:16px;font-weight:700}
.regen-desc{
  font-size:11.5px;color:var(--muted);line-height:1.5;margin:6px 0 12px;
}
.regen-ta{
  width:100%;resize:vertical;font-family:inherit;font-size:12.5px;
  line-height:1.55;padding:10px 12px;border-radius:9px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--line-bright);
}
.regen-ta:focus{outline:none;border-color:var(--c2)}
.regen-status{
  font-size:11.5px;font-weight:600;min-height:17px;margin-top:10px;
}
.regen-status.busy{color:var(--c3)}
.regen-status.ok{color:#4ade80}
.regen-status.err{color:var(--c1)}
.regen-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.regen-btn{
  font-size:12px;font-weight:600;padding:7px 16px;border-radius:8px;
  color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line-bright);cursor:pointer;transition:.13s;
}
.regen-btn:hover{border-color:var(--c2)}
.regen-btn.primary{background:var(--grad);color:#fff;border-color:transparent}
.regen-btn:disabled{opacity:.5;cursor:default}

/* a tile while its render is being regenerated in the background */
.tile.regenerating{pointer-events:none}
.regen-spin{
  position:absolute;inset:0;z-index:7;display:flex;
  align-items:center;justify-content:center;background:rgba(5,5,12,.62);
}
.regen-spinner{
  width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--c3);
  animation:regen-spin .8s linear infinite;
}
@keyframes regen-spin{to{transform:rotate(360deg)}}

/* GitHub / self-host pill in the toolbar (left of the sort group;
   desktop only -- hidden < 760px, see the mobile media query). */
.gh-btn{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--line-bright);transition:.16s;
}
.gh-btn .gh-btn-txt{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.gh-ico{flex-shrink:0;color:var(--muted);transition:.16s}
.gh-btn:hover{
  border-color:var(--c2);background:rgba(255,46,136,.10);
  box-shadow:0 0 18px rgba(255,46,136,.18);
}
.gh-btn:hover .gh-ico{color:var(--c3)}

/* ===== gallery + every tile-grid (favourites, collections, discovery)
 * Single canonical responsive grid so every page that shows tiles
 * (real images OR ctile/utile cards) breaks at the same widths. ==== */
.gallery,
.tile-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:1680px){
  .gallery, .tile-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1320px){
  .gallery, .tile-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1040px){
  .gallery, .tile-grid{grid-template-columns:repeat(3,1fr)}
  .layout{grid-template-columns:230px 1fr}}
/* Mobile: sidebar becomes a slide-in drawer. Search gets its own row
   in the topbar so it stays usable. Mode-switch / sort / Browse-by
   move INTO the drawer (handled in app.js -- DOM is reparented when
   crossing the 760px threshold). */
.filters-toggle{display:none}
.sidebar-close{display:none}
.sidebar-backdrop{display:none}

/* Progressive topbar wrap. Two intermediate steps before the mobile
   drawer kicks in at 760px. The base flex layout (stage 1) lets the
   side groups shrink below their nowrap content and visually overlap
   the search well before search would naturally wrap, so we trigger
   the first break at 2100px (the user reports ~100px gh-btn overlap
   creeping in well above the prior 1900 threshold).
     Stage 2 (<=2100px) -- search drops below, still capped at 620:
       row 1: [left ........ right]
       row 2: [          search          ]
     Stage 3 (<=1300px) -- the gh-btn / Characters-Artists toggle pair
     starts to clash, so the right group dissolves into three pieces:
     acct jumps up to row 1 (next to the left nav), gh + sort snap to
     the LEFT on row 2, search stays centered on row 3:
       row 1: [left .............. acct]
       row 2: [gh sort ...             ]
       row 3: [          search          ]
   Implementation:
   * Switch the topbar from flex to grid for stages 2/3 so we can place
     items into named areas (flex would need invisible break pseudo-
     elements to achieve the same row structure, and only one ::before
     is available -- ::after is taken by the gradient line).
   * `.topbar-right` becomes `display:contents` in stage 3 so its three
     children (gh-btn, sort, acct) participate in the topbar grid
     directly and can be placed independently.
   * `--topbar-h` is bumped per stage so the sticky sidebar (top:
     var(--topbar-h)) stays anchored below the topbar's actual height.
   * Scoped via :has(.topbar-left) so the simpler subpage topbar (no
     search, no sort, no gh-btn -- still fits on one row anyway) keeps
     the original single-row flex layout and the 66px default. */
@media (max-width:2100px){
  body:has(.topbar-left){--topbar-h:110px}
  .topbar:has(.topbar-left){
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "left   .       right"
      "search search  search";
    column-gap:22px;
    row-gap:12px;
    align-items:center;
  }
  .topbar:has(.topbar-left) .topbar-left {grid-area:left; min-width:auto}
  .topbar:has(.topbar-left) .topbar-right{grid-area:right;min-width:auto;margin-left:0}
  .topbar:has(.topbar-left) .search      {grid-area:search}
}
@media (max-width:1300px){
  body:has(.topbar-left){--topbar-h:160px}
  .topbar:has(.topbar-left){
    grid-template-columns:auto auto 1fr auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "left   left   left   acct"
      "gh     sort   .      ."
      "search search search search";
  }
  .topbar:has(.topbar-left) .topbar-right{display:contents}
  .topbar:has(.topbar-left) .acct  {grid-area:acct; margin-left:0; justify-self:end}
  .topbar:has(.topbar-left) .gh-btn{grid-area:gh;   justify-self:start}
  .topbar:has(.topbar-left) .sort  {grid-area:sort; justify-self:start}
}

@media(max-width:760px){
  .gallery,.tile-grid{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .main{border-left:none;padding:14px 14px 80px}

  /* topbar: two rows -- brand + filters button on row 1, search on row 2.
     Force display:flex to override the grid layout from stages 2/3. */
  .topbar{
    display:flex;
    height:auto;min-height:0;padding:10px 14px;
    flex-wrap:wrap;gap:10px;
  }
  .topbar .brand{flex:1 1 auto}
  .topbar .search{
    flex-basis:100%;max-width:none;margin:0;order:99;
  }
  /* hide the items we move into the drawer (+ the desktop-only GitHub
     pill; the footer GitHub link covers mobile). Descendant combinator
     so the new .topbar-left / .topbar-right wrappers don't shield them. */
  .topbar .modeswitch,
  .topbar .sort,
  .topbar .navmenu,
  .topbar .gh-btn{display:none}
  /* The desktop side groups become "transparent" on mobile so their
     children participate in the topbar's wrap-row layout directly,
     keeping the existing two-row mobile design intact. */
  .topbar-left, .topbar-right{display:contents}

  /* filters toggle: visible chip next to the brand */
  .filters-toggle{
    display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
    padding:8px 13px;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid var(--line);
    color:var(--muted);font-size:12.5px;font-weight:600;
  }
  .filters-toggle .ham{font-size:14px;line-height:1}
  .filters-toggle:hover,.filters-toggle[aria-expanded="true"]{
    color:var(--text);border-color:var(--c2);
  }

  /* sidebar -> slide-in drawer */
  .sidebar{
    display:block;position:fixed;top:0;left:-110%;
    width:min(320px,86vw);height:100dvh;
    z-index:200;background:var(--bg);
    border-right:1px solid var(--line);
    padding:54px 14px 32px;             /* room for close button */
    overflow-y:auto;
    transition:left .25s ease;
    box-shadow:0 0 0 1px rgba(0,0,0,0);
  }
  body.drawer-open .sidebar{
    left:0;box-shadow:0 0 40px rgba(0,0,0,.6);
  }
  body.drawer-open{overflow:hidden}        /* lock page scroll */

  /* close X (top-right of drawer) */
  .sidebar-close{
    display:flex;position:absolute;top:11px;right:12px;
    width:32px;height:32px;border-radius:50%;align-items:center;
    justify-content:center;cursor:pointer;
    background:var(--panel-2);border:1px solid var(--line);
    color:var(--muted);font-size:20px;line-height:1;padding:0;
  }
  .sidebar-close:hover{color:var(--text)}

  /* dimmed backdrop behind the drawer */
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;z-index:150;
    background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  body.drawer-open .sidebar-backdrop{opacity:1;pointer-events:auto}

  /* mode-switch and sort -- stack as full-width segmented controls in
     the drawer. CSS only applies once the elements are reparented
     into #sidebar by app.js; they keep the same DOM nodes so all
     existing event listeners still work. */
  #sidebar > .modeswitch,
  #sidebar > .sort,
  #sidebar > .navmenu{
    width:100%;margin:0 0 10px;
  }
  #sidebar > .modeswitch,
  #sidebar > .sort{display:flex;flex-wrap:wrap}
  #sidebar > .modeswitch button,
  #sidebar > .sort button{flex:1 1 0;min-width:0;text-align:center}

  /* the Browse-by menu's dropdown becomes inline inside the drawer */
  #sidebar > .navmenu .navmenu-btn{width:100%;justify-content:space-between}
  #sidebar > .navmenu .navmenu-list{
    position:static;display:flex;flex-direction:column;margin-top:6px;
    background:none;border:none;padding:0;min-width:0;
  }
  #sidebar > .navmenu.open .navmenu-list{display:flex}

  /* a thin divider between drawer-only controls and the facet groups */
  #sidebar .sidebar-title{
    margin-top:10px;padding-top:14px;
    border-top:1px solid var(--line);
  }
}

.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,
             border-color .22s;
  animation:pop .3s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.tile:hover{
  transform:translateY(-6px);border-color:var(--line-bright);
  box-shadow:0 18px 44px -14px rgba(139,92,255,.55);
}
/* copyright browse tiles -- the whole tile is a link, no hover overlay */
.tile-copyright{cursor:pointer}

/* thumb: placeholder + image are stacked layers --------------------- */
.thumb{
  position:relative;aspect-ratio:512/768;overflow:hidden;
  background:var(--bg-soft);
  /* explicit block so <a class="thumb"> (used by the favourites and
     collection-view grids) actually computes a height from
     aspect-ratio. Inline anchors collapse to 0 high otherwise. */
  display:block;
}
.thumb-link{text-decoration:none;color:inherit}
.ph,.shot{position:absolute;inset:0;width:100%;height:100%}
.shot{object-fit:cover}                       /* sits above .ph */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:linear-gradient(150deg,
    hsl(var(--h),58%,20%),hsl(calc(var(--h) + 45),52%,9%));
}
.ph span{font-size:74px;font-weight:700;line-height:1;
  color:hsla(var(--h),70%,85%,.22);}
.ph em{font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;color:hsla(var(--h),60%,85%,.4);}

.tbadges{
  position:absolute;top:9px;right:9px;z-index:5;
  display:flex;gap:5px;align-items:flex-start;
}
/* Only the LoRA capsule rides on the image now; the count + fav-count
   chips moved into .tile-tools (see below) so they don't collide with
   the hover overlay's action buttons. */
.tbadges-top   { top:9px; align-items:flex-start; }
/* "+ LORA" capsule -- a character with a CivitAI LoRA available */
.lora-cap{
  font-size:10.5px;font-weight:800;letter-spacing:.4px;white-space:nowrap;
  padding:3px 8px;border-radius:999px;
  color:#fff;background:#2f80ed;border:1px solid rgba(255,255,255,.28);
}

/* LoRA hover panel ---------------------------------------------------- */
.lora-panel{
  position:fixed;z-index:55;width:300px;max-height:432px;
  display:flex;flex-direction:column;overflow:hidden;border-radius:12px;
  background:rgba(14,14,24,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line-bright);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.75);
  opacity:0;transform:translateX(-8px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.lora-head{
  flex:0 0 auto;padding:8px 12px 7px;
  font-size:9.5px;font-weight:800;letter-spacing:1.5px;
  color:#6aa6f2;border-bottom:1px solid var(--line);
}
.lora-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px}
.lora-foot{
  flex:0 0 auto;padding:6px 10px 7px;text-align:center;
  font-size:9px;color:var(--faint);border-top:1px solid var(--line);
}
.lora-panel.on-left{transform:translateX(8px)}
.lora-panel.show{opacity:1;transform:translateX(0);pointer-events:auto}
.lora-item{
  display:flex;align-items:center;gap:10px;padding:4px;border-radius:9px;
}
.lora-item:hover{background:var(--panel-2)}
.lora-thumb{
  width:80px;height:80px;flex-shrink:0;border-radius:7px;
  object-fit:cover;background:var(--bg-soft);
}
.lora-name{
  font-size:12px;font-weight:600;line-height:1.34;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* hover overlay ------------------------------------------------------- */
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transition:opacity .2s;
  background:linear-gradient(to top,
    rgba(6,6,12,.82) 30%,rgba(6,6,12,.52) 70%,rgba(6,6,12,.16));
}
.thumb:hover .overlay{opacity:1}
/* top padding clears the popularity badge so content sits below it */
.ov-scroll{flex:1;overflow-y:auto;padding:40px 12px 4px}
.ov-label{
  font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#fff;margin-bottom:5px;
}
.ov-trigger{
  font-size:12px;font-weight:600;line-height:1.4;color:var(--text);
  background:rgba(6,6,12,.62);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;margin-bottom:11px;user-select:all;
}
.ov-tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{
  font-size:10px;font-weight:500;color:var(--text);
  background:rgba(255,255,255,.08);border:1px solid var(--line-bright);
  border-radius:6px;padding:2px 6px;line-height:1.4;
  cursor:pointer;transition:.12s;
}
.tag:hover{color:#fff;background:rgba(255,46,136,.22);border-color:var(--c1)}

/* actions: preview + Danbooru on top, then the two copy buttons ------ */
.ov-actions{display:flex;flex-direction:column;gap:6px;padding:8px}
.ov-top{display:flex;gap:6px}
.ov-copy{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* all four action buttons share one style -- identical height + colour */
.actbtn,.copybtn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  height:34px;padding:0 7px;border-radius:9px;
  font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;
  color:var(--text);background:rgba(255,255,255,.07);
  border:1px solid var(--line-bright);transition:.14s;
}
.actbtn{flex:1}
.actbtn:hover,.copybtn:hover{
  color:#fff;background:var(--grad);border-color:transparent;
  box-shadow:0 5px 16px -6px rgba(139,92,255,.8);
}
.actbtn:active,.copybtn:active{transform:translateY(1px)}
.actbtn .ic,.copybtn .ic{font-size:12px;opacity:.9;flex-shrink:0}

/* meta ---------------------------------------------------------------- */
.meta{padding:11px 12px 13px}
.name{
  font-size:15px;font-weight:700;line-height:1.25;letter-spacing:.1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.copyright{
  /* an <a> link, but must stay block-level for the ellipsis + margin */
  display:block;margin-top:4px;font-size:11px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:color .13s;
}
.copyright:hover{color:var(--c3)}
/* artist tile subheading -- the raw danbooru tag, not interactive */
.subtag{
  margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.4px;
  color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* artwork-score badge on artist tiles (replaces the redundant subtag) */
.scorebadge{
  display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:2px 9px;border-radius:999px;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line-bright);
}
.scorebadge i{
  font-style:normal;font-size:9px;letter-spacing:1px;color:#4ade80;
}

/* skeleton ------------------------------------------------------------ */
.skel{pointer-events:none;animation:none}
.skel .thumb,.skel .sk-line{
  background:linear-gradient(100deg,
    rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 70%);
  background-size:220% 100%;animation:sweep 1.3s linear infinite;
}
.sk-line{height:13px;border-radius:5px;margin:11px 12px 0}
.sk-line.short{width:55%;height:10px}
@keyframes sweep{to{background-position:-220% 0}}

/* ===== pagination =================================================== */
.pager{
  display:flex;justify-content:center;align-items:center;gap:6px;
  flex-wrap:wrap;margin-top:32px;
}
.pg{
  min-width:38px;height:38px;padding:0 12px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);transition:.14s;
}
.pg:hover:not(:disabled):not(.on){
  border-color:var(--c2);color:#fff;background:rgba(139,92,255,.16);
}
.pg.on{
  background:var(--grad);border-color:transparent;color:#fff;cursor:default;
  box-shadow:0 5px 16px -6px rgba(139,92,255,.8);
}
.pg:disabled{opacity:.3;cursor:default}
.pg-gap{color:var(--faint);font-weight:700;padding:0 3px;user-select:none}

/* status / empty ------------------------------------------------------ */
.status{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:46px 20px;color:var(--muted);text-align:center;
}
.status .big{font-size:42px;line-height:1}
.status .t1{font-size:16px;font-weight:600;color:var(--text)}
.status .t2{font-size:13px}
.spinner{
  width:28px;height:28px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--c2);
  animation:spin .7s linear infinite;
}

/* ===== preview modal ================================================ */
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.modal[hidden]{display:none}
.modal-bg{
  position:absolute;inset:0;background:rgba(4,4,9,.86);
  backdrop-filter:blur(9px);animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}}
.modal-box{
  position:relative;display:flex;flex-direction:column;gap:12px;
  max-width:min(92vw,560px);animation:popin .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes popin{from{opacity:0;transform:scale(.94) translateY(12px)}}
.modal-close{
  position:absolute;top:9px;right:9px;z-index:3;
  width:34px;height:34px;border-radius:10px;font-size:15px;color:#fff;
  background:rgba(7,7,14,.8);border:1px solid var(--line-bright);
  backdrop-filter:blur(6px);transition:.14s;
}
.modal-close:hover{background:var(--c1);border-color:transparent}
.modal-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:280px;border-radius:16px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line-bright);
  box-shadow:0 30px 80px -20px #000;
}
#modal-img{max-width:100%;max-height:80vh;transition:opacity .2s}
.modal.loading #modal-img{opacity:0}
.modal:not(.loading) .modal-stage .spinner{display:none}
.modal-cap{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.modal-name{font-size:17px;font-weight:700}
.modal-sub{
  font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);
}

/* toast --------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,24px);
  z-index:300;padding:11px 20px;border-radius:999px;font-size:13px;
  font-weight:600;background:rgba(12,12,22,.96);
  border:1px solid transparent;
  background-image:linear-gradient(rgba(12,12,22,.96),rgba(12,12,22,.96)),
                   var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transition:.24s cubic-bezier(.2,.7,.3,1);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ===== site footer + contact modal ================================== */
.site-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;margin-top:36px;max-width:2200px;margin-left:auto;
  margin-right:auto;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--line);
}
.site-mark{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.footer-link{
  font:inherit;color:var(--muted);background:none;border:none;cursor:pointer;
  padding:6px 12px;border-radius:8px;transition:color .13s,background .13s;
}
.footer-link:hover{color:var(--c3);background:var(--panel-2)}

/* Footer language switcher pill: EN | 日本語. The `.on` highlight is
   toggled by i18n.js whenever setLang() runs. */
.lang-switch{display:inline-flex;align-items:center;gap:0}
.lang-btn{
  font:inherit;color:var(--muted);background:none;border:none;cursor:pointer;
  padding:6px 10px;border-radius:8px;transition:color .13s,background .13s;
}
.lang-btn[lang="ja"]{letter-spacing:0;text-transform:none}
.lang-btn:hover{color:var(--c3);background:var(--panel-2)}
.lang-btn.on{color:var(--text);background:rgba(255,255,255,.06)}
.lang-sep{color:var(--faint);padding:0 4px}

.cmodal-ov{
  position:fixed;inset:0;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(5,5,12,.8);backdrop-filter:blur(5px);
}
.cmodal-card{
  width:min(520px,100%);background:var(--bg-soft);
  border:1px solid var(--line-bright);border-radius:14px;
  padding:22px 24px;
}
.cmodal-title{font-size:17px;font-weight:700}
.cmodal-desc{
  font-size:11.5px;color:var(--muted);line-height:1.55;margin:6px 0 16px;
}
.cmodal-form{display:flex;flex-direction:column;gap:13px;position:relative}
.cmodal-form label{
  display:flex;flex-direction:column;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
}
.cmodal-form select,
.cmodal-form textarea,
.cmodal-form input[type=text],
.cmodal-form input[type=password],
.cmodal-form input[type=search],
.cmodal-form input[type=email],
.cmodal-form input[type=number]{
  font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--text);
  padding:9px 12px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-bright);
}
.cmodal-form textarea{resize:vertical;min-height:120px;line-height:1.5}
.cmodal-form select:focus,
.cmodal-form textarea:focus,
.cmodal-form input:focus{outline:none;border-color:var(--c2)}
.cmodal-hint{
  font-size:11.5px;color:var(--c3);line-height:1.5;
  padding:8px 10px;border-radius:8px;
  background:rgba(35,227,211,.08);border:1px solid rgba(35,227,211,.3);
}
.captcha-row{flex-direction:row !important;align-items:center;gap:10px !important}
.captcha-q{
  text-transform:none !important;letter-spacing:0 !important;
  font-weight:700;color:var(--text);font-size:14px;font-family:monospace;
}
.captcha-row input{width:80px}
.cmodal-honey{
  position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;
  overflow:hidden;
}
.cmodal-status{font-size:12px;font-weight:600;min-height:18px}
.cmodal-status.err{color:var(--c1)}
.cmodal-status.ok{color:#4ade80}
.cmodal-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:4px;
}
.cmodal-btn{
  font-size:12px;font-weight:600;padding:8px 18px;border-radius:8px;
  color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line-bright);cursor:pointer;transition:.13s;
}
.cmodal-btn:hover{border-color:var(--c2)}
.cmodal-btn.primary{background:var(--grad);color:#fff;border-color:transparent}
.cmodal-btn:disabled{opacity:.5;cursor:default}

/* ===== admin pages ================================================== */
.admin-page{
  background:var(--bg);color:var(--text);min-height:100vh;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;
}
.admin-title{
  font-size:18px;font-weight:700;letter-spacing:.5px;
}
.admin-title b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.admin-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--line);
  background:rgba(9,9,17,.78);backdrop-filter:blur(16px);
}
.admin-bar nav a{
  color:var(--muted);font-size:12.5px;font-weight:600;
  margin-left:18px;transition:color .13s;
}
.admin-bar nav a:hover{color:var(--text)}
.admin-shell{
  max-width:880px;margin:30px auto;padding:0 28px;
}
.admin-login{
  max-width:380px;margin:9vh auto 0;padding:0 28px;text-align:center;
}
.admin-login .admin-title{margin-bottom:24px}
.admin-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.admin-form label{
  display:flex;flex-direction:column;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
}
.admin-form input{
  font-family:inherit;font-size:14px;color:var(--text);
  padding:11px 12px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-bright);
}
.admin-form input:focus{outline:none;border-color:var(--c2)}
.admin-form button{
  font-size:13px;font-weight:700;padding:12px;border-radius:9px;
  background:var(--grad);color:#fff;border:none;cursor:pointer;
  margin-top:6px;
}
.admin-back{
  text-align:center;color:var(--faint);font-size:11.5px;margin-top:6px;
  text-transform:uppercase;letter-spacing:1px;
}
.admin-back:hover{color:var(--muted)}
.admin-error{
  font-size:12.5px;color:var(--c1);padding:10px 13px;border-radius:9px;
  background:rgba(255,46,136,.1);border:1px solid rgba(255,46,136,.4);
  margin-bottom:14px;text-align:left;
}
.admin-empty{
  color:var(--muted);font-size:14px;margin-top:60px;text-align:center;
}
.admin-count{
  color:var(--muted);font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:16px;
}
.admin-msg{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:14px;
}
.admin-msg-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.admin-reason{
  font-size:10.5px;font-weight:800;letter-spacing:.5px;
  padding:3px 10px;border-radius:999px;color:#fff;background:var(--grad);
}
.admin-meta{font-size:10.5px;color:var(--faint);flex:1}
.admin-msg-head form{margin:0}
.admin-del{
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;
  color:var(--c1);background:rgba(255,46,136,.08);
  border:1px solid rgba(255,46,136,.35);cursor:pointer;transition:.13s;
}
.admin-del:hover{background:rgba(255,46,136,.18);color:#fff}
.admin-body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:13.5px;line-height:1.55;color:var(--text);
  white-space:pre-wrap;word-wrap:break-word;
  background:rgba(255,255,255,.03);padding:12px;border-radius:9px;
}
.admin-ua{
  font-size:10.5px;color:var(--faint);margin-top:8px;
  font-family:monospace;word-break:break-all;
}

/* ===== landing page ================================================== */
.landing-page{
  min-height:100vh;display:flex;flex-direction:column;
}
.landing-page .bg-fx{z-index:-3}        /* sit below the collage */

/* the soft collage that sits behind everything */
.collage{
  position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
}
.collage img{
  position:absolute;border-radius:12px;display:block;height:auto;
  aspect-ratio:512/768;object-fit:cover;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55);
  will-change:transform;
}
/* readability vignette: dark in the centre, less so at the edges */
.collage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 60% at 50% 42%,
              rgba(7,7,14,.55) 0%, rgba(7,7,14,.78) 55%,
              rgba(7,7,14,.92) 100%);
}

/* hero content */
.land{
  flex:1;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 24px 60px;text-align:center;
}
/* When the topbar is rendered above (logged-in or new layout), the
   landing's own brand block becomes redundant; the topbar pulls the
   hero up a notch so the title doesn't get pushed off-screen. */
.land-with-topbar{padding-top:18px}
.landing-page .topbar{
  background:rgba(9,9,17,.62);  /* slightly more translucent over collage */
}
.land-brand{
  display:flex;align-items:center;gap:9px;
  font-size:22px;font-weight:700;letter-spacing:.5px;margin-bottom:48px;
}
.land-title{
  font-size:clamp(30px, 5.4vw, 60px);font-weight:800;line-height:1.08;
  letter-spacing:-.6px;max-width:980px;margin:0 auto;
}
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.land-title::after{
  content:'';display:block;width:96px;height:4px;border-radius:2px;
  background:var(--grad);margin:22px auto 0;opacity:.95;
}
.land-sub{
  font-size:clamp(15px, 1.7vw, 19px);font-weight:500;line-height:1.55;
  color:var(--muted);margin-top:24px;max-width:680px;
}
.land-sub a{
  color:var(--text);font-weight:600;padding-bottom:2px;
  border-bottom:1px dashed rgba(255,255,255,.25);
  transition:color .14s,border-color .14s;
}
.land-sub a:hover{color:var(--c3);border-color:var(--c3)}

.land-cta{
  display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;
  justify-content:center;
}
.land-btn{
  font-size:14px;font-weight:700;letter-spacing:.4px;
  padding:13px 28px;border-radius:999px;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line-bright);
  transition:transform .14s,box-shadow .14s,border-color .14s,color .14s;
  white-space:nowrap;
}
.land-btn:hover{
  transform:translateY(-2px);border-color:var(--c2);color:#fff;
}
.land-btn.primary{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 12px 30px -10px rgba(139,92,255,.55);
}
.land-btn.primary:hover{box-shadow:0 18px 40px -10px rgba(139,92,255,.75)}

.land-feats{
  margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;max-width:1180px;width:100%;
}
@media(max-width:980px){.land-feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.land-feats{grid-template-columns:1fr}}
.feat{
  text-align:left;padding:20px 22px;border-radius:14px;
  background:rgba(14,14,24,.62);backdrop-filter:blur(10px);
  border:1px solid var(--line);
  transition:transform .15s,border-color .15s;
}
.feat:hover{transform:translateY(-2px);border-color:var(--line-bright)}
.feat-mark{
  font-size:22px;color:var(--c3);display:block;margin-bottom:8px;
  line-height:1;
}
.feat h2{
  font-size:15px;font-weight:700;letter-spacing:.3px;margin-bottom:6px;
}
.feat p{
  font-size:12.5px;line-height:1.55;color:var(--muted);font-weight:500;
}

.land-foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 28px;margin-top:24px;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--line);
}
.land-foot nav a{
  color:var(--muted);margin-left:18px;transition:color .13s;
}
.land-foot nav a:hover{color:var(--c3)}

/* ===== /c/<slug>  per-character SEO landing page ==================== */
body.character-page{display:block}
.character-page .topbar{justify-content:space-between}
.char-back{
  margin-right:14px;text-decoration:none;font-size:13px;font-weight:500;
  color:var(--muted);transition:.13s;
}
.char-back:hover{color:var(--text)}
.char-main{
  max-width:1080px;margin:32px auto;padding:0 24px 80px;
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:36px;align-items:start;
}
.char-hero{
  margin:0;border-radius:14px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
}
.char-hero img{display:block;width:100%;height:auto}
.char-info{display:flex;flex-direction:column;gap:22px}
.char-name{
  font-size:clamp(28px,4vw,42px);font-weight:800;
  margin:0;line-height:1.1;letter-spacing:-.01em;
}
.char-meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:13.5px;color:var(--muted);
}
.char-series{color:var(--c2);text-decoration:none;font-weight:600}
.char-series:hover{text-decoration:underline}
.char-count{color:var(--faint)}
.char-info h2{
  font-size:11px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.char-info section{margin:0}
.char-trigger-code{
  display:block;padding:11px 14px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:ui-monospace,Consolas,monospace;font-size:13px;
  color:var(--text);user-select:all;word-break:break-word;
}
.char-tag-list{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;
}
.char-tag-list .tag{
  background:var(--panel-2);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;font-size:12px;color:var(--muted);
}
.char-lora-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.char-lora-list a{
  display:flex;align-items:center;gap:12px;padding:8px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--text);transition:.13s;
}
.char-lora-list a:hover{border-color:var(--c1);background:var(--panel)}
.char-lora-list img{
  width:60px;height:60px;border-radius:6px;object-fit:cover;flex-shrink:0;
}
.char-lora-disclaim{
  font-size:10.5px;color:var(--faint);margin:8px 0 0;font-style:italic;
}
.char-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.char-cta-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;font-weight:600;font-size:13.5px;
  text-decoration:none;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);transition:.13s;
}
.char-cta-btn:hover{border-color:var(--c1)}
.char-cta-btn.primary{
  background:var(--grad);border-color:transparent;color:#0c0c14;
}
.char-cta-btn.primary:hover{filter:brightness(1.08)}
@media (max-width:760px){
  .char-main{grid-template-columns:1fr}
}

/* ===== accounts / favourites / ratings / modals ====================== */
.acct{margin-left:auto;display:flex;align-items:center;gap:.5rem;position:relative}
.acct-out{display:flex;gap:.4rem}
.acct-btn{background:transparent;border:1px solid var(--line-bright,#444);color:#ddd;
  padding:.35rem .7rem;border-radius:6px;cursor:pointer;font-size:.85rem;
  font-family:inherit;white-space:nowrap}
.acct-btn.primary{background:var(--c2,#7c7cff);border-color:transparent;color:#0c0c14}
.acct-btn:hover{border-color:#888}
.acct-in{position:relative}
.acct-menu-btn{display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:1px solid var(--line-bright,#333);color:#eee;
  padding:.2rem .55rem;border-radius:6px;cursor:pointer;font-size:.85rem;
  font-family:inherit;white-space:nowrap}
.acct-avatar{width:24px;height:24px;border-radius:50%;background:#222;object-fit:cover;
  flex:none}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);
  background:#15151e;border:1px solid #2a2a36;border-radius:8px;padding:.4rem;
  min-width:200px;display:flex;flex-direction:column;gap:.15rem;z-index:30;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
.acct-menu a,.acct-menu button{background:transparent;border:0;color:#ddd;
  text-align:left;padding:.45rem .6rem;border-radius:5px;cursor:pointer;
  text-decoration:none;font-size:.85rem}
.acct-menu a:hover,.acct-menu button:hover{background:#23232f}

/* ---- tile corner buttons (fav heart + add-to-collection) ----
 * The pair lives across the TOP-LEFT strip of the thumb, in the empty
 * band cleared by .ov-scroll's 40px top padding -- so they never
 * compete with the trigger code box or the tag list inside the
 * hover overlay. Default state: hidden; revealed on tile hover.
 * Exception: a "favourited" heart stays visible always so users can
 * see what they've already saved without hovering. */
.tile{position:relative}
.tile-fav-btn,
.tile-coll-btn{
  position:absolute;top:9px;z-index:6;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,7,14,.65);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  opacity:0;pointer-events:none;cursor:pointer;
  transition:opacity .15s,color .15s,background .15s,
             transform .12s,border-color .15s;
}
.tile-fav-btn  {left:9px}
.tile-coll-btn {left:41px}
.tile-fav-btn svg,
.tile-coll-btn svg{width:14px;height:14px;display:block}
/* Reveal on tile hover (also catches keyboard focus). */
.tile:hover .tile-fav-btn,
.tile:hover .tile-coll-btn,
.tile:focus-within .tile-fav-btn,
.tile:focus-within .tile-coll-btn{
  opacity:1;pointer-events:auto;
}
.tile-fav-btn:hover,
.tile-coll-btn:hover{transform:scale(1.08)}
/* A favourited heart stays visible permanently. */
.tile-fav-btn.on{
  color:var(--c1);background:rgba(255,46,136,.18);
  border-color:rgba(255,46,136,.6);
  opacity:1;pointer-events:auto;
}
.tile-coll-btn.on{
  color:var(--c3);background:rgba(35,227,211,.14);
  border-color:rgba(35,227,211,.5);
}
/* Touch devices have no hover -- always show. */
@media (hover:none){
  .tile-fav-btn, .tile-coll-btn{opacity:1;pointer-events:auto}
}

/* ---- pencil pill + tag-list textarea swap ---- */
.tag-edit,
.tag-back{
  display:inline-flex !important;align-items:center;gap:4px;
  cursor:pointer;font-family:inherit;color:#fff;
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.05) !important;
  padding:2px 7px !important;line-height:1.4;
}
.tag-edit svg,.tag-back svg{width:11px;height:11px;display:block}
.tag-edit:hover,
.tag-back:hover{color:var(--c3) !important;border-color:var(--c3) !important;
  background:rgba(35,227,211,.1) !important}
.ov-tag-edit-wrap{display:flex;flex-direction:column;gap:6px}
.ov-tag-input{
  width:100%;min-height:90px;resize:none;
  font-family:'Space Grotesk','Fira Mono',ui-monospace,monospace;
  font-size:11.5px;line-height:1.55;color:var(--text);
  padding:8px 10px;border-radius:8px;
  background:rgba(6,6,12,.62);border:1px solid var(--line-bright);
  user-select:text;
}
.ov-tag-input:focus{outline:none;border-color:var(--c3)}
.ov-tag-edit-wrap .tag-back{align-self:flex-start}

/* ---- collection picker modal rows ---- */
.cpick-list{display:flex;flex-direction:column;gap:6px;margin:.5rem 0 1rem;
  max-height:260px;overflow-y:auto}
.cpick-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem .9rem;border-radius:8px;
  background:transparent;border:1px solid var(--line);
  color:var(--text);cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .12s,background .12s,color .12s
}
.cpick-row:hover{border-color:var(--c2);background:var(--panel-2)}
.cpick-row-name{font-weight:600;font-size:.9rem}
.cpick-row-meta{font-size:.75rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;font-weight:600}
.cpick-create{margin-top:.5rem}

/* ---- tile rating toolbar (below the meta row) ---- */
.tile-tools{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px 10px;color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:2px;
}
.tile-tools .t-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:7px;
  background:transparent;border:1px solid transparent;
  color:var(--muted);cursor:pointer;
  font:600 11px/1 'Space Grotesk',sans-serif;letter-spacing:.3px;
  transition:color .12s,background .12s,border-color .12s;
}
.tile-tools .t-btn:hover{color:var(--text);background:var(--panel-2)}
.tile-tools .t-btn svg{width:13px;height:13px}
.tile-tools .t-up.on{
  color:#7fffa1;background:rgba(127,255,161,.08);
  border-color:rgba(127,255,161,.32)
}
.tile-tools .t-down.on{
  color:#ff8c7a;background:rgba(255,140,122,.08);
  border-color:rgba(255,140,122,.32)
}
/* Image count + favourite count, right-aligned in the same row as
   the thumbs so the chips can't collide with the overlay's action
   buttons (which is where the old bottom-right badges landed).
   Typography matches .t-btn so the row reads as one unit. */
.tile-tools .t-stats{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
}
.tile-tools .t-stat{
  display:inline-flex;align-items:center;gap:4px;color:var(--muted);
  font:600 11px/1 'Space Grotesk',sans-serif;letter-spacing:.3px;
}
.tile-tools .t-stat i{font-style:normal;font-size:12px;line-height:1}
/* Glyphs inherit the muted .t-stat color so the whole row -- thumbs
   icons, count chips, fav chips -- shares one neutral tone in its
   resting state. The thumbs only light up green/red when the viewer
   has actually voted (.on), and the count chips never light up at
   all (they're informational, not interactive). */

/* ---- "missing" tile (favourited subject that's been deleted) ---- */
.tile-missing .thumb{filter:grayscale(.7)}
.tile-missing .name{color:var(--muted)}

/* ---- collection tile (2x2 preview) ---- */
.ctile{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.ctile:hover{border-color:var(--c2);transform:translateY(-2px);
  box-shadow:0 12px 32px -16px rgba(139,92,255,.55)}
.ctile-thumbs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:2px;background:#0a0a14;text-decoration:none
}
/* Per-slot aspect ratio + top-aligned crop. Square cells with
   `object-fit:cover` keeps each character at a natural scale and
   shows the head (which sits near the top of our 2:3 renders) rather
   than the lower torso. */
.ctile-slot{
  aspect-ratio:1/1;
  background-size:cover;background-position:center top;
  background-color:#13131c
}
.ctile-empty{
  background:linear-gradient(135deg,#13131c,#1c1c2a);
  background-image:none!important
}
.ctile-badge{
  position:absolute;left:8px;bottom:8px;
  font:700 10px/1 'Space Grotesk',sans-serif;letter-spacing:.6px;
  padding:4px 8px;border-radius:999px;
  background:rgba(7,7,14,.78);backdrop-filter:blur(6px);
  color:#fff;border:1px solid rgba(255,255,255,.14)
}
.ctile-body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.ctile-name{
  font-size:.95rem;font-weight:700;color:var(--text);text-decoration:none;
  letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ctile-name:hover{color:var(--c3)}
.ctile-row{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.ctile-owner{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  text-decoration:none;min-width:0
}
.ctile-owner img{
  width:18px;height:18px;border-radius:50%;object-fit:cover;background:#222
}
.ctile-owner:hover{color:var(--text)}
.ctile-owner span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctile-vis{
  font:800 9px/1 'Space Grotesk',sans-serif;letter-spacing:.8px;
  padding:3px 7px;border-radius:999px;color:#7fffa1;
  border:1px solid rgba(127,255,161,.32);background:rgba(127,255,161,.06)
}
.ctile-vis.priv{color:var(--faint);border-color:var(--line-bright);
  background:transparent}
.ctile-like{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:7px;border:1px solid var(--line-bright);
  background:transparent;color:var(--muted);font:600 11px/1 'Space Grotesk',sans-serif;
  cursor:pointer;transition:color .12s,border-color .12s,background .12s
}
.ctile-like svg{width:13px;height:13px}
.ctile-like:hover{color:var(--text)}
.ctile-like.on{color:var(--c1);border-color:rgba(255,46,136,.5);
  background:rgba(255,46,136,.08)}
.ctile-own{display:flex;gap:.4rem;flex-wrap:wrap;padding-top:.2rem;
  border-top:1px dashed var(--line)}
.ctile-own button{
  padding:.3rem .65rem;font-size:.74rem;border-radius:6px;
  border:1px solid var(--line-bright);background:transparent;
  color:var(--muted);cursor:pointer;font-family:inherit
}
.ctile-own button:hover{color:var(--text);border-color:var(--c2)}

/* ---- user tile (discovery) ---- */
.utile{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none;color:var(--text);
  transition:border-color .15s,transform .15s,background .15s
}
.utile:hover{border-color:var(--c2);background:var(--panel-2);transform:translateY(-1px)}
.utile-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  flex:none;background:#222;border:1px solid var(--line)
}
.utile-body{min-width:0;flex:1}
.utile-name{font-size:1rem;font-weight:700;letter-spacing:-.2px}
.utile-meta{font-size:.75rem;color:var(--muted);margin-top:.15rem;
  text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.utile-bio{
  margin-top:.45rem;font-size:.85rem;line-height:1.5;color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}

/* ---- discovery + library grids ---- */
.disco-bar{
  display:flex;gap:1rem;align-items:center;
  margin-bottom:1.2rem;flex-wrap:wrap
}
.disco-bar input[type=search]{
  flex:1;min-width:220px;padding:.65rem .9rem;
  background:var(--panel);border:1px solid var(--line-bright);
  border-radius:9px;color:var(--text);font-family:inherit;font-size:.9rem
}
.disco-bar input[type=search]:focus{outline:none;border-color:var(--c2)}
.disco-more{
  margin:1.5rem auto 0;display:block;padding:.7rem 1.6rem;
  background:transparent;color:var(--text);
  border:1px solid var(--line-bright);border-radius:9px;cursor:pointer;
  font-family:inherit;font-weight:600;letter-spacing:.4px
}
.disco-more:hover{border-color:var(--c2)}
/* User cards have their own typography (avatar + label, not artwork),
   so they get a slightly tighter rhythm than image tiles. */
.disco-grid-users{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px
}

/* collection page header */
.coll-head{margin-bottom:1.5rem}
.coll-head .page-title{margin-bottom:.3rem}
.coll-byline{color:var(--muted);font-size:.9rem;margin:0 0 .4rem}
.coll-actions{margin-top:.8rem;display:flex;gap:.5rem}
#coll-like-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:.5rem 1rem;border-radius:9px;
  border:1px solid var(--line-bright);background:transparent;
  color:var(--muted);font-family:inherit;font-weight:600;cursor:pointer
}
#coll-like-btn svg{width:14px;height:14px}
#coll-like-btn:hover{color:var(--text)}
#coll-like-btn.on{
  color:var(--c1);border-color:rgba(255,46,136,.5);
  background:rgba(255,46,136,.08)
}

/* auth tabs */
.auth-tabs{display:flex;gap:.4rem;margin-bottom:1.2rem}
.auth-tab{flex:1;background:transparent;border:1px solid var(--line-bright);
  color:var(--muted);padding:.55rem;border-radius:9px;cursor:pointer;
  font-family:inherit;font-weight:600;letter-spacing:.4px;font-size:.85rem}
.auth-tab.on{border-color:var(--c2);color:var(--text);
  background:rgba(139,92,255,.08)}

/* auth modal polish ------------------------------------------------- */
.auth-card{max-width:420px}
.auth-form{position:relative}
.auth-intro{
  font-size:13px;color:var(--muted);line-height:1.55;
  margin:-.25rem 0 .25rem;
  font-weight:500;letter-spacing:0;text-transform:none;
}
.auth-intro b{color:var(--text)}
/* Password reveal: place the input + button in one row so the eye
   icon sits inside the field visually. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:42px !important;width:100%}
.pw-reveal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:6px;cursor:pointer;
  background:transparent;border:0;color:var(--muted);font-size:14px;
  transition:color .12s,background .12s
}
.pw-reveal:hover{color:var(--text);background:rgba(255,255,255,.06)}
.auth-back-link{
  margin-top:.6rem;background:transparent;border:0;color:var(--muted);
  font-family:inherit;font-size:.8rem;cursor:pointer;letter-spacing:.3px;
  font-weight:600;padding:.2rem 0;text-transform:uppercase;
}
.auth-back-link:hover{color:var(--c3)}
/* Busy state for submit buttons. */
.cmodal-btn.is-busy{opacity:.65;cursor:wait;pointer-events:none}

/* ===== email-verify banner + post-verify toast ===================== */
.verify-banner{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:.85rem;
  padding:.65rem 1rem;
  background:linear-gradient(90deg,#3b2d05,#3a1b3d);
  border-bottom:1px solid rgba(255,221,128,.45);
  color:#fff8dc;font-size:.85rem;font-weight:500;
}
.verify-banner .vb-msg{flex:1;line-height:1.45}
.verify-banner .vb-msg b{color:#ffe8a8;font-weight:700;letter-spacing:.2px}
.verify-banner .vb-resend{
  padding:.35rem .9rem;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-family:inherit;font-size:.78rem;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;flex:none;
}
.verify-banner .vb-resend:hover{background:rgba(255,255,255,.22)}
.verify-banner .vb-resend:disabled{opacity:.7;cursor:wait}
.verify-banner .vb-close{
  width:24px;height:24px;border-radius:50%;background:transparent;
  border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;flex:none;
}
.verify-banner .vb-close:hover{background:rgba(255,255,255,.12)}
@media(max-width:760px){
  .verify-banner{flex-wrap:wrap;font-size:.8rem}
}

.verify-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);
  z-index:200;padding:.7rem 1.2rem;border-radius:9px;
  background:rgba(35,227,211,.18);border:1px solid rgba(35,227,211,.55);
  color:#7fffe2;font-weight:600;letter-spacing:.3px;font-size:.9rem;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.5);
  animation:vt-in .22s ease both;
}
@keyframes vt-in{from{opacity:0;transform:translate(-50%,8px)}}

/* ---- shared subpage layout (account / library / profile) ---- */
.subpage{min-height:100vh;display:flex;flex-direction:column}
.subpage-topbar{
  display:flex;align-items:center;gap:1rem;
  padding:0 1.25rem;height:var(--topbar-h);
  border-bottom:1px solid var(--line);
  background:rgba(10,10,18,.55);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.subpage-topbar .brand{display:flex;align-items:center;gap:.4rem;
  text-decoration:none;color:var(--text)}
.subpage-topbar .char-back{margin-left:auto;color:var(--muted);
  font-size:.9rem;text-decoration:none}
.subpage-topbar .char-back:hover{color:var(--text)}
.subpage-main{flex:1;max-width:880px;width:100%;margin:0 auto;
  padding:2.25rem 1.5rem 5rem}
@media(min-width:1100px){.subpage-main{padding-top:3rem}}
/* Pages that show tile grids (library favourites/collections, public
   collections, users discovery, collection viewer) need full gallery
   width -- the 880px form cap squashes a 6-column grid to 3 columns
   of squished cards. Apply --wide to the same <main> for those pages. */
.subpage-main--wide{max-width:1680px;padding-left:22px;padding-right:22px}
@media(max-width:1040px){
  .subpage-main--wide{padding-left:14px;padding-right:14px}}
.page-title{font-size:2rem;font-weight:700;letter-spacing:-.6px;
  margin:0 0 1.75rem;padding:0;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;display:inline-block}

/* ---- profile page ---- */
.profile-card{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  align-items:center;padding:1.4rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);margin-bottom:2rem}
.profile-avatar{width:140px;height:140px;border-radius:50%;
  background:var(--panel-2);object-fit:cover;border:1px solid var(--line)}
.profile-body{min-width:0}
.profile-name{margin:0;font-size:1.6rem;letter-spacing:-.3px}
.profile-joined{margin:.25rem 0 0;color:var(--muted);font-size:.85rem}
.profile-bio{margin:.7rem 0 0;color:var(--text);line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word}
.profile-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.profile-section{margin-top:2rem}
.profile-section h2{font-size:1.05rem;font-weight:600;margin:0 0 .8rem;
  color:var(--text)}
.profile-coll-list{list-style:none;padding:0;display:grid;gap:.5rem}
.profile-coll-list>li{border:1px solid var(--line);border-radius:10px;
  background:var(--panel);overflow:hidden}
.profile-coll-list a{display:flex;justify-content:space-between;
  align-items:center;padding:.75rem 1rem;color:var(--text);text-decoration:none}
.profile-coll-list a:hover{background:var(--panel-2)}
.coll-name{font-weight:500}
.coll-count{color:var(--muted);font-size:.8rem}
.coll-desc{margin:0;padding:.2rem 1rem .75rem;color:var(--muted);font-size:.85rem}

/* ---- account page sections ---- */
.account-section{margin-top:1.5rem;padding:1.5rem 1.6rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.account-section h2{margin:0 0 1.1rem;font-size:1.1rem;font-weight:600;
  letter-spacing:-.2px}
.account-section .cmodal-form{margin-top:.5rem}
.account-section .cmodal-form+.cmodal-form{margin-top:1.2rem}
.account-section .cmodal-actions{justify-content:flex-start;margin-top:.4rem}
.mfa-card{margin-top:1rem;padding:1.1rem;border:1px solid var(--line);
  border-radius:11px;background:rgba(255,255,255,.02)}
.mfa-card>*+*{margin-top:.7rem}
.mfa-qr{display:inline-block;background:#fff;padding:.6rem;border-radius:8px;
  line-height:0}
.mfa-card code{font-family:'Fira Mono',ui-monospace,monospace;font-size:.85rem;
  background:rgba(255,255,255,.05);padding:.18rem .4rem;border-radius:5px;
  color:var(--c3);letter-spacing:.5px}

/* avatar row */
.avatar-row{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.avatar-row-body{flex:1;min-width:200px;display:flex;flex-direction:column;
  gap:.5rem}
.file-pick{display:inline-block;padding:.55rem 1rem;border-radius:8px;
  border:1px solid var(--line-bright);background:rgba(255,255,255,.04);
  color:var(--text);cursor:pointer;font-size:.85rem;font-weight:600;
  letter-spacing:.4px;width:max-content;font-family:inherit}
.file-pick:hover{background:rgba(255,255,255,.08)}

.muted{color:var(--muted)}
.muted.small{font-size:.8rem}
.account-gate{padding:3rem 1rem;text-align:center}
.account-gate h1{margin:0 0 .5rem;font-size:1.5rem}

/* ---- library page ---- */
.lib-tabs{display:flex;gap:.4rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--line);padding-bottom:0}
.lib-tab{background:transparent;border:0;color:var(--muted);
  padding:.7rem 1.1rem;cursor:pointer;font-family:inherit;
  font-weight:600;letter-spacing:.4px;font-size:.85rem;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.lib-tab:hover{color:var(--text)}
.lib-tab.on{color:var(--text);border-bottom-color:var(--c2)}
.lib-pane{padding-top:.5rem}
.lib-create{margin-bottom:1.2rem;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);overflow:hidden}
.lib-create>summary{padding:.75rem 1rem;cursor:pointer;font-weight:600;
  color:var(--text);list-style:none}
.lib-create>summary::-webkit-details-marker{display:none}
.lib-create[open]>summary{border-bottom:1px solid var(--line)}
.lib-create form{padding:1rem}
/* (old text-list .lib-list rules removed -- favourites now render as
   the .gallery-style tile grid; collections as .ctile grid.) */
.row-check{display:inline-flex!important;gap:.5rem;align-items:center;
  flex-direction:row!important;text-transform:none!important;
  font-weight:500!important;letter-spacing:0!important;color:var(--text)!important;
  font-size:.9rem!important}
.row-check input{width:auto;margin:0}

/* ===== admin moderation widgets ====================================== */
/* Inline tile pills (Hide / Un-hide) + HIDDEN badge on character tiles
   when the viewer is an admin. Sits inside .thumb so it overlays the
   image without disturbing the surrounding gallery layout. */
.admin-tile-row{position:absolute;top:.4rem;right:.4rem;display:flex;
  gap:.35rem;align-items:center;z-index:3}
.admin-pill{font:600 .68rem/1 'Space Grotesk',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .55rem;border-radius:6px;cursor:pointer;
  background:rgba(20,18,40,.85);color:#fff;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(4px)}
.admin-pill:hover{background:rgba(140,40,40,.9);
  border-color:rgba(255,120,120,.5)}
.admin-pill-lg{font-size:.85rem;padding:.5rem .9rem}
.admin-badge{font:700 .65rem/1 'Space Grotesk',sans-serif;letter-spacing:.1em;
  padding:.32rem .5rem;border-radius:5px;color:#fff;background:#b03030}
.tile-hidden .thumb img.shot,.tile-hidden .thumb .ph{
  filter:grayscale(.85) brightness(.55)}
.tile-hidden .meta .name{text-decoration:line-through;color:var(--muted)}

.ctile-admin{margin-top:.4rem;display:flex;gap:.4rem}

/* /admin queue tables. Sparse styling -- this page is operator-only. */
.admin-table{width:100%;border-collapse:collapse;margin-top:.6rem;
  font-size:.92rem}
.admin-table th,.admin-table td{padding:.55rem .65rem;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table th{font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.admin-table td.num,.admin-table th.num{text-align:right;
  font-variant-numeric:tabular-nums}
.admin-table a{color:var(--text);text-decoration:none}
.admin-table a:hover{text-decoration:underline}
.admin-table td.admin-msg{white-space:pre-wrap;word-break:break-word;
  max-width:42rem;vertical-align:top}