/* Palette from the goblin mascot: skin #ff68b4, shirt #0050aa, eyes #85e0e0, outline #27004d */
:root {
  color-scheme: dark;
  --bg: #12131f;
  --panel: #181a2a;
  --panel-2: #20233a;
  --border: #33365c;
  --text: #f1f0f7;
  --muted: #a8abc8;
  --accent: #85e0e0;
  --accent-2: #3fa9a9;
  --green: #85e0e0; /* legacy token name; emotes accent is goblin teal */
  --gold: #85e0e0; /* legacy token name; single-accent rule */
  --red: #85e0e0; /* legacy token name; single-accent rule */
  --twitch: #9146FF;
  --kick: #53FC18;
  --check-a: #212439;
  --check-b: #15161f;
}
::selection { background: var(--accent-2); color: #fff; }
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/assets/nunito-latin.woff2) format("woff2");
}
/* Hand-synced copy of BRAND_FONT_CSS in shared/platform.js; keep the two identical.
   Regenerate the base64 if nunito-latin.woff2 changes (fonttools subset a-z, space, "!", wght 700:1000). */
@font-face { font-family: "Nunito Brand"; font-style: normal; font-weight: 700 1000; src: url(data:font/woff2;base64,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) format("woff2"); }
.logo h1, .logo-product, .footer-brand, .foot-tag, .footer-links a { font-family: "Nunito Brand", "Nunito", "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(900px 420px at 50% -140px, #1b1e30, var(--bg) 70%) no-repeat, var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
button, input, select, textarea { font-family: inherit; }
body.page-drag-over {
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* ------------------------------- header ------------------------------- */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
}
.logo { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; user-select: none; -webkit-user-select: none; }
.logo::before {
  content: ""; width: 45px; height: 30px; flex: none;
  background: url(/assets/goblin.png) center / contain no-repeat;
}
.logo h1 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.logo h1 .logo-product {
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  margin-left: 9px;
  display: inline-block;
  transform: rotate(-4deg);
  vertical-align: 4px;
}
nav { display: flex; gap: 4px; margin-left: 14px; }
nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 12px;
}
nav a:hover { color: var(--text); }
nav a.active { background: var(--panel-2); color: var(--text); }
@media (max-width: 700px) {
  header { padding: 10px 12px; gap: 6px 10px; }
  #authArea { order: 2; }
  nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 0; }
  nav a { padding: 7px 9px; font-size: 13px; }
}
#authArea { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  text-decoration: none; color: #fff; border: 0; cursor: pointer;
}
.auth-twitch { background: var(--twitch); }
.auth-kick { background: var(--kick); color: #12131f; }
.auth-discord { background: #5865F2; }
.auth-link { padding: 5px 10px; font-size: 11px; opacity: 0.85; }
.auth-email, .auth-account { background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent); }
.auth-email:hover, .auth-account:hover { background: var(--panel); }
.notif-btn { padding: 5px 10px; font-size: 11px; font-weight: 800; background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent); cursor: pointer; font-family: inherit; }
.notif-btn.read { border-color: var(--border); color: var(--muted); }
.notif-pop { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.notif-row { display: flex; justify-content: space-between; gap: 10px; }
.notif-row a { color: var(--accent); text-decoration: none; }
.notif-row a:hover { text-decoration: underline; }
.notif-when { color: var(--muted); flex: none; font-weight: 600; }
/* Markup mirrors shared/platform.js authMenuHtml. */
.authmenu-signin { color: var(--muted); padding: 4px 0; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: 0.5px; }
.authmenu-signin:hover { color: var(--text); }
.authmenu { position: relative; }
.authmenu summary { list-style: none; cursor: pointer; display: flex; }
.authmenu summary::-webkit-details-marker { display: none; }
.authmenu-face { width: 34px; height: 34px; border: 1px solid var(--border); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.authmenu[open] .authmenu-face, .authmenu summary:hover .authmenu-face { border-color: var(--accent); }
.authmenu-letter { color: var(--accent); font-weight: 900; font-size: 15px; background: var(--panel-2); text-transform: lowercase; }
.authmenu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--border); min-width: 160px; }
.authmenu-pop a, .authmenu-pop button { padding: 9px 14px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 800; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; width: 100%; }
.authmenu-pop a:hover, .authmenu-pop button:hover { color: var(--text); background: var(--panel); }

.whoami { font-size: 13px; }
.whoami b { color: var(--accent); }
.plat-badge {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--border); color: var(--muted); text-transform: capitalize;
}
.logout-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 12px; font-size: 12px; cursor: pointer;
}

/* ------------------------------- layout ------------------------------- */
main { max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px; }
body.browse main { max-width: 2000px; padding: 28px 14px 80px; }
.page-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 18px; }
.page-head span { color: var(--muted); font-size: 13px; }
.card-section {
  background: var(--panel); border: 1px solid var(--border);
  padding: 22px; margin-bottom: 26px;
}
.card-section h2 { font-size: 15px; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.limits-note a, .collection-count a, .empty a { color: var(--text); }
.limits-note { font-size: 12px; color: var(--muted); margin: -10px 0 16px; }
.field + .limits-note, .acct-list + .limits-note { margin-top: 8px; }
.policy-list { list-style-position: inside; }
.policy-list li { margin: 6px 0; }

/* -------------------------------- forms ------------------------------- */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
input[type=text], input[type=email] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; font-size: 14px; min-width: 200px; outline: none;
}
input[type=text]:focus, input[type=email]:focus { border-color: var(--accent); }

body.auth main { max-width: 460px; }
.auth main { max-width: 460px; }
body.auth.wide main { max-width: 1100px; }
.code-input { letter-spacing: 8px; font-size: 22px; text-align: center; font-weight: 800; }
.auth-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.auth-or { color: var(--dim, #63678c); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 10px; }
.acct-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.acct-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--border); padding: 10px 12px; font-size: 13px; }
.acct-item .mono { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.mini-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 6px 10px; font-size: 12px; cursor: pointer; }
.mini-btn:hover { color: var(--text); border-color: var(--accent); }
.file-btn {
  background: var(--panel-2); border: 1px dashed var(--border); color: var(--muted);
  padding: 10px 14px; font-size: 13px; cursor: pointer;
}
.file-btn.has-file { color: var(--green); border-style: solid; }
.file-btn.drag-over {
  border-color: var(--accent); color: var(--accent); background: var(--panel);
}
input[type=file] { display: none; }
button.primary {
  background: none; color: var(--accent); border: 1px solid var(--accent); padding: 10px 21px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
button.primary:hover:not(:disabled) { background: var(--accent); color: #12131f; }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.status { margin-top: 12px; font-size: 13px; min-height: 18px; }
.status.ok { color: var(--green); }
.status.err { color: var(--red); }
.upload-locked { color: var(--muted); font-size: 14px; }

/* ------------------------------ collections ---------------------------- */
.collection-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.collection-row:last-child { border-bottom: 0; }
.collection-name { font-weight: 700; font-size: 15px; }
.collection-name.viewing { color: var(--accent); }
.collection-count { font-size: 12px; color: var(--muted); }
.chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.chip.on-doink { background: #ff68b4; border-color: #ff68b4; color: #12131f; }
.chip-group { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.chan-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; }
.chan-radio input { accent-color: #ff68b4; margin: 0; }
.chan-radio.on { color: #ff68b4; }
.mini-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.mini-btn:hover { color: var(--text); border-color: var(--accent); }
.mini-btn.danger:hover { color: var(--red); border-color: var(--red); }
.mini-btn:disabled { opacity: 0.6; cursor: default; }
.mini-btn.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.mini-btn.active:hover { color: #fff; border-color: var(--accent); }

/* Every place user data is collected wears a .why toggle; /privacy lists them all. */

/* ------------------------------- browse -------------------------------- */
.browse-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.browse-controls input[type=text] { min-width: 260px; flex: 1 1 260px; }
.page-size-label {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.page-size-label select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 8px; font-size: 12px;
}
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.pager-ellipsis { color: var(--muted); font-size: 12px; padding: 0 2px; }

/* ------------------------------- gallery ------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  overflow: hidden; display: flex; flex-direction: column;
}
.img-box {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 20px 20px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.img-box img { max-width: 140px; max-height: 140px; }
.img-box.censored img { filter: blur(18px); transform: scale(1.15); }
.censor-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: rgba(18,19,31,0.35); font-size: 12px; font-weight: 700; color: var(--text);
  text-align: center; pointer-events: none;
}
.censor-label small { font-weight: 400; color: var(--muted); font-size: 10px; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.kw { font-weight: 700; font-size: 15px; }
.anim {
  font-size: 10px; color: var(--gold); border: 1px solid var(--gold);
  padding: 1px 4px; margin-left: 6px; vertical-align: 2px;
}
.pend {
  font-size: 10px; color: var(--red); border: 1px solid var(--red);
  padding: 1px 4px; margin-left: 6px; vertical-align: 2px;
}
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 11px; background: var(--panel-2); color: var(--muted); padding: 2px 8px; }
.variants { display: flex; gap: 6px; margin-top: 2px; }
.variants button {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 0; font-size: 12px; font-weight: 600; cursor: pointer;
}
.variants button.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.url {
  font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.url:hover { color: var(--accent); }
.meta { font-size: 11px; color: var(--muted); }
.collection-ctl select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 8px; font-size: 12px;
}
.remove-btn {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 0; font-size: 12px; cursor: pointer;
}
.remove-btn:hover { color: var(--red); border-color: var(--red); }
.empty { color: var(--muted); font-size: 14px; padding: 40px; text-align: center; grid-column: 1 / -1; }
.empty a { color: var(--accent); }
.link-btn { background: none; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; text-decoration: underline; }

/* --------------------------- compact browse ---------------------------- */
.cgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.ccard {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--border);
  overflow: hidden;
}
.ccard:hover { border-color: var(--accent); }
.cimg {
  height: 84px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 14px 14px;
  border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
}
.cimg img { max-width: 100%; max-height: 64px; }
.cimg.censored img { filter: blur(12px); transform: scale(1.2); }
.cpend {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--red); background: rgba(18,19,31,0.75);
  padding: 1px 6px;
}
.cmeta { padding: 7px 10px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ckw { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cby { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadd {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  background: var(--accent-2); color: #fff; border: 0;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0;
}
.cnick, .cremove {
  position: absolute; top: 5px; width: 24px; height: 24px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0;
}
.cnick { right: 33px; color: var(--text); }
.cremove { right: 5px; color: var(--red); font-size: 16px; }
.cnick:hover { border-color: var(--accent); }
.cremove:hover { border-color: var(--red); }
.ccard:hover .cadd, .cadd:focus,
.ccard:hover .cnick, .cnick:focus,
.ccard:hover .cremove, .cremove:focus { opacity: 1; }
.cmenu {
  position: absolute; top: 33px; right: 5px; z-index: 5;
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; min-width: 140px; max-width: 100%; overflow: hidden;
}
.cmenu button {
  background: none; border: 0; color: var(--text); padding: 8px 12px;
  text-align: left; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmenu button:hover { background: var(--panel); }
.cmenu button:disabled { color: var(--muted); cursor: default; }

/* ----------------------------- doink detail ---------------------------- */
.detail { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.preview-col { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.preview-box {
  height: 260px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 20px 20px;
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.preview-box img { max-width: 90%; max-height: 90%; }
.detail-info { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.detail-info h2 { font-size: 24px; }
.detail-kv { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.detail-kv b { color: var(--text); font-weight: 600; }
.channel-list { display: flex; flex-direction: column; }
.channel-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.channel-row:last-child { border-bottom: 0; }
.back-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--accent); }

/* ------------------------- owner edit panel (doink detail) ------------------------- */
#editToggleBtn { align-self: flex-start; }
.edit-panel {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.edit-panel input[type=text] { width: 100%; min-width: 0; }
.edit-options {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.edit-options-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.bg-remove-ctl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bg-preview-row { display: flex; gap: 14px; }
.bg-preview-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bg-preview-col img {
  width: 96px; height: 96px; object-fit: contain;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 12px 12px;
  border: 1px solid var(--border);
}
.bg-preview-actions { display: flex; gap: 8px; }

/* ----------------------------- mod queue ------------------------------ */
.mod-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mod-row:last-child { border-bottom: 0; }
.mod-thumb {
  width: 64px; height: 64px; object-fit: contain;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 12px 12px;
}
.mod-info { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.mod-actions { margin-left: auto; display: flex; gap: 8px; }
.approve-btn {
  background: var(--green); color: #12131f; border: 0; font-weight: 700;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.deny-btn {
  background: transparent; color: var(--red); border: 1px solid var(--red); font-weight: 700;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.deny-btn:hover { background: var(--red); color: #12131f; }

/* -------------------------------- toast ------------------------------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 18px; font-size: 13px; display: none; z-index: 10;
  max-width: 90vw;
}
#toast.ok { border-color: var(--green); color: var(--green); }
#toast.err { border-color: var(--red); color: var(--red); }

/* ------------------------------- footer ------------------------------- */
/* sticky + top:100vh pins the footer to the viewport bottom on short pages without restructuring body/main. */
.site-footer {
  position: sticky;
  top: 100vh;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.footer-brand { font-weight: 900; color: var(--text); user-select: none; -webkit-user-select: none; }
.footer-nav { display: inline-flex; align-items: center; gap: 9px; }
.foot-tag { text-decoration: none; color: #ff68b4; border: 1px solid #ff68b4; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; display: inline-block; transform: rotate(-4deg); }
.foot-tag:hover { color: var(--text); border-color: var(--text); }
.foot-tag.everything { color: #8577e6; border-color: #8577e6; }
.foot-tag.everything:hover { background: #8577e6; color: var(--bg); }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--text); }

.auth-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 300px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--accent);
  color: var(--text); font-size: 13px; font-weight: 600; text-align: left;
  z-index: 60;
}
.auth-pop a { color: var(--accent); font-weight: 800; }

/* -------------------------------- editor ------------------------------- */
body.editor main.editor-main { display: block; }
body.editor main.editor-main::after { content: ""; display: block; clear: both; }
.editor-stage {
  float: left; width: fit-content; min-width: 340px; max-width: 100%;
  margin: 0 20px 20px 0;
}
.editor-stage .stage {
  position: relative; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; max-height: 60vh; overflow: hidden;
  border: 1px solid var(--border);
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 20px 20px;
}
#previewImg { max-width: min(100%, 56vw); max-height: calc(60vh - 2px); user-select: none; -webkit-user-drag: none; }
.stage-meta { font-size: 12px; color: var(--muted); min-height: 16px; margin-bottom: 12px; display: flex; gap: 12px; }
#stageBusy { color: var(--accent); }
.editor-stage .file-btn { display: block; text-align: center; padding: 46px 14px; margin-bottom: 12px; }

.crop-box {
  position: absolute; border: 1px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(18, 19, 31, 0.6);
  cursor: move; touch-action: none;
}
.crop-handle {
  position: absolute; width: 24px; height: 24px;
  border: 1px solid var(--accent); background: var(--panel);
}
.crop-handle.nw { top: -12px; left: -12px; cursor: nwse-resize; }
.crop-handle.n { top: -12px; left: calc(50% - 12px); cursor: ns-resize; }
.crop-handle.ne { top: -12px; right: -12px; cursor: nesw-resize; }
.crop-handle.w { top: calc(50% - 12px); left: -12px; cursor: ew-resize; }
.crop-handle.e { top: calc(50% - 12px); right: -12px; cursor: ew-resize; }
.crop-handle.sw { bottom: -12px; left: -12px; cursor: nesw-resize; }
.crop-handle.s { bottom: -12px; left: calc(50% - 12px); cursor: ns-resize; }
.crop-handle.se { bottom: -12px; right: -12px; cursor: nwse-resize; }

.ed-sec {
  border: 1px solid var(--border); background: var(--panel); margin-bottom: 12px;
  display: flow-root; min-width: 360px;
}
.ed-sec summary {
  padding: 12px 16px; cursor: pointer; user-select: none;
  font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
}
.ed-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 4px 16px 14px; }
.ed-row .mini-btn { padding: 9px 14px; font-size: 13px; }
.ed-presets { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 14px; }
.ed-presets .mini-btn { padding: 9px 12px; font-size: 13px; }
.ed-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding-bottom: 11px; cursor: pointer; }
.ed-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.editor-controls input[type=number] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; font-size: 14px; width: 90px; outline: none;
}
.editor-controls input[type=number]:focus { border-color: var(--accent); }
.editor-controls select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; font-size: 14px;
}
.editor-controls input[type=color] {
  border: 1px solid var(--border); background: var(--panel-2);
  width: 44px; height: 37px; padding: 2px; cursor: pointer;
}
.ed-sliders { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 12px; }
.ed-sliders label {
  display: grid; grid-template-columns: 84px 1fr 44px; gap: 10px; align-items: center;
  font-size: 12px; color: var(--muted);
}
.ed-sliders output { text-align: right; font-size: 12px; color: var(--text); }
.editor-controls input[type=range] { accent-color: var(--accent); height: 28px; }
.ed-quality { min-width: 160px; }
.ed-quality label { display: block; }
.ed-quality output { font-size: 12px; color: var(--text); margin-left: 8px; }

@media (max-width: 900px) {
  .editor-stage { float: none; width: auto; min-width: 0; margin: 0 0 20px; position: sticky; top: 0; z-index: 5; }
  .editor-stage .stage { max-height: 38vh; }
  #previewImg { max-height: calc(38vh - 2px); max-width: 100%; }
  .ed-sec { min-width: 0; }
}
body.editor [hidden] { display: none !important; }

/* Anton: self-hosted, OFL. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/anton-latin.woff2) format("woff2");
}
#layerBox { position: absolute; pointer-events: none; }
.ov-layer {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: move; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.ov-layer.ov-text { white-space: pre; line-height: 1.15; text-align: center; }
.ov-layer img { display: block; width: 100%; -webkit-user-drag: none; }
.ov-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.ov-row textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; font-size: 14px; width: 100%; min-height: 38px; resize: vertical; outline: none;
}
.ov-row textarea:focus { border-color: var(--accent); }
.ov-row .field input[type=number] { width: 64px; }
.ov-row .field select { padding: 8px 8px; }
.ov-row input[type=range] { width: 90px; height: 28px; accent-color: var(--accent); }
#approxBox { position: relative; overflow: hidden; flex: none; box-sizing: content-box; }
#approxBox img {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none;
  user-select: none; -webkit-user-drag: none;
}

/* ---------------- shared account surfaces (/account, /auth/email) ---------- */
body.auth {
  --auth-g: linear-gradient(#8577e6, #8577e6);
}
body.auth .logo h1 .logo-product {
  color: transparent; border-color: transparent;
  background: var(--auth-g); -webkit-background-clip: text; background-clip: text;
  border-image: var(--auth-g) 1;
}
body.auth button.primary { background: none; border: 1px solid transparent; border-image: var(--auth-g) 1; color: var(--text); }
body.auth button.primary:hover:not(:disabled) { background: var(--auth-g); border-image: none; color: #12131f; }
body.auth .mini-btn:hover { color: var(--text); border-image: var(--auth-g) 1; }
body.auth input[type=text]:focus, body.auth input[type=email]:focus { border-image: var(--auth-g) 1; }
body.auth .status.err { color: #ff6470; }
body.auth .whoami b { color: transparent; background: var(--auth-g); -webkit-background-clip: text; background-clip: text; }
body.auth .auth-email, body.auth .auth-account { color: var(--text); border: 1px solid transparent; border-image: var(--auth-g) 1; }
body.auth .authmenu[open] .authmenu-face, body.auth .authmenu summary:hover .authmenu-face { border-image: var(--auth-g) 1; }

.agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.agree input { margin-top: 3px; accent-color: #8577e6; }
.agree a { color: var(--text); }

.nick-form {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--accent);
  padding: 9px;
}
.nick-form-title { font-size: 11px; color: var(--muted); }
.nick-form input[type=text] { width: 100%; min-width: 0; font-size: 12px; padding: 6px 8px; }
.nick-form-row { display: flex; gap: 6px; }
.nick-form-row .mini-btn { flex: 1; }
.ccard .nick-form { position: absolute; inset: 0; z-index: 6; overflow: auto; justify-content: center; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Hand-synced copy of MOTION_CSS in shared/platform.js; keep the two identical. */
a, button, summary, input, select, textarea { transition: color .12s, background-color .12s, border-color .12s, opacity .12s; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .15s; }
body > header { view-transition-name: doink-header; }
.site-footer { view-transition-name: doink-footer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}