/* UGC Team Portal — styled to match the Roblox Creator Dashboard.
   Tokens sampled live from create.roblox.com (bg #121215, Builder Sans,
   #313339 borders, translucent-lavender chips, light selected pills). */
:root {
  --bg:#121215;
  --panel:#1a1b1f;          /* raised section */
  --panel-2:#202127;        /* inputs / thumbnails */
  --line:#313339;           /* borders + dividers */
  --chip:rgba(208,217,251,0.12);
  --chip-hi:rgba(208,217,251,0.20);
  --fg:#ffffff;
  --subtle:#d5d7dd;         /* Roblox grey caption */
  --dim:#8b8e97;
  --accent:#00a2ff;         /* Roblox blue */
  --accent-hi:#33b4ff; --accent-lo:#0086d9; --accent-fg:#ffffff;
  --sel-bg:#d5d7dd; --sel-fg:#202227;   /* selected pill */
  --green:#5cc85c; --red:#ff6b5e; --amber:#f2b23e;
  --r-card:12px; --r-ctl:8px; --r-pill:16px;
  --font:"Builder Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:14px; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--fg); text-decoration:none; }
a:hover { text-decoration:underline; }

/* subtle scrollbars everywhere (keep scrolling, lose the ugly bar) */
* { scrollbar-width:thin; scrollbar-color:#3a3d44 transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#3a3d44; border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#4a4d55; }
::-webkit-scrollbar-track { background:transparent; }

/* ── top bar ── */
.topbar {
  display:flex; align-items:center; gap:18px;
  padding:0 26px; height:60px; background:var(--bg);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.topbar .brand { font-weight:700; font-size:18px; letter-spacing:-.2px; }
.topbar .brand .dot { color:var(--accent); }
.topbar nav { display:flex; gap:8px; }
.topbar nav a {
  padding:8px 16px; border-radius:var(--r-pill); color:var(--fg);
  background:var(--chip); font-weight:600; font-size:14px; line-height:1;
}
.topbar nav a:hover { background:var(--chip-hi); text-decoration:none; }
.topbar nav a.active { background:var(--sel-bg); color:var(--sel-fg); }
.topbar .spacer { flex:1; }
.robux-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--chip); color:var(--fg); font-weight:700; font-size:13px; line-height:1; }
.robux-pill svg { width:14px; height:14px; opacity:.92; }
.topbar .who { color:var(--subtle); font-size:13px; }
.topbar form { margin:0; }

.wrap { max-width:1180px; margin:0 auto; padding:30px 26px 70px; }
h1 { font-size:28px; margin:0 0 6px; font-weight:700; letter-spacing:-.3px; }
h2 { font-size:18px; margin:30px 0 12px; font-weight:700; }
.sub { color:var(--subtle); margin:0 0 22px; font-size:14px; }

.card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px; margin-bottom:16px;
}
.card h3 { margin:0 0 14px; font-size:15px; font-weight:700; }

/* ── forms ── */
label { display:block; font-size:13px; color:var(--subtle); margin:14px 0 6px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width:100%; background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:10px 12px;
  font-family:inherit; font-size:14px;
}
input::placeholder, textarea::placeholder { color:var(--dim); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
textarea { resize:vertical; min-height:66px; }
input[type=file] { color:var(--subtle); font-size:12px; }

.btn {
  display:inline-block; background:var(--chip); color:var(--fg); border:0;
  border-radius:var(--r-ctl); padding:10px 18px; font-weight:600; font-size:14px;
  cursor:pointer; font-family:inherit; line-height:1;
}
.btn:hover { background:var(--chip-hi); }
.btn.accent { background:var(--accent); color:var(--accent-fg); }
.btn.accent:hover { background:var(--accent-hi); }
.btn.green { background:var(--green); color:#08260a; }
.btn.red { background:var(--red); color:#2a0a08; }
.btn.small { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

.row { display:flex; gap:16px; flex-wrap:wrap; }
.row > * { flex:1; min-width:180px; }

.pill {
  display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:11px;
  font-weight:700; letter-spacing:.2px;
}
.pill.pending  { background:#3a3320; color:var(--amber); }
.pill.approved { background:#1f3320; color:var(--green); }
.pill.rejected { background:#3a1f1d; color:var(--red); }
.pill.onsale   { background:#1f3320; color:var(--green); }
.pill.offsale  { background:var(--chip); color:var(--subtle); }
.pill.uploaded, .pill.done { background:#0e2f47; color:var(--accent-hi); }
.pill.error    { background:#3a1f1d; color:var(--red); }
.pill.processing { background:#0e2f47; color:var(--accent-hi); }
.pill.admin    { background:#2a1f3a; color:#c39bff; }
.pill.member   { background:var(--chip); color:var(--subtle); }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); }
th { color:var(--subtle); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }

.flash { padding:12px 16px; border-radius:var(--r-ctl); margin-bottom:18px; font-weight:600; font-size:13px; }
.flash.ok  { background:#12301a; color:var(--green); border:1px solid #245c30; }
.flash.err { background:#301515; color:var(--red); border:1px solid #5c2c2c; }

.checks { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.checks label {
  display:flex; align-items:center; margin:0;
  background:var(--chip); padding:9px 15px; border-radius:var(--r-pill);
  color:var(--fg); font-size:13px; cursor:pointer; transition:background .1s, color .1s;
}
.checks label:hover { background:var(--chip-hi); }
.checks input { display:none; }                       /* no square box */
.checks label:has(input:checked) { background:var(--accent); color:var(--accent-fg); }

.muted { color:var(--subtle); font-size:12px; }

/* ── submission cards + 3D viewer modal ── */
.subcard {
  display:flex; align-items:stretch; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; margin-bottom:12px; cursor:pointer;
  transition:border-color .1s;
}
.subcard:hover { border-color:#45474d; }
.subcard-thumb {
  width:128px; min-width:128px; background:var(--panel-2); border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.subcard-thumb img { width:100%; height:100%; object-fit:contain; }
.subcard-thumb img.loading { opacity:.25; }
.subcard-thumb img.noimg { visibility:hidden; }
.subcard-info { padding:15px 18px; flex:1; min-width:0; }
.subcard-name { font-size:16px; font-weight:700; }
.subcard-desc { color:var(--subtle); font-size:13px; margin-top:6px; line-height:1.4;
  white-space:pre-wrap; max-height:4.2em; overflow:hidden; }
.subcard-meta { margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.subcard details { margin-top:12px; }
.subcard summary { color:var(--subtle); font-size:12px; cursor:pointer; }
.subcard details table { margin-top:8px; }

/* ── My Submissions: grid of tiles + click-to-expand color dropdown ── */
.sub-grid { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.subtile { width:170px; cursor:pointer; position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-card); padding:10px; text-align:center;
  transition:border-color .1s, box-shadow .1s; }
.subtile:hover { border-color:#45474d; }
.subtile.open { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.subtile-thumb { width:100%; aspect-ratio:1; background:var(--panel-2); border-radius:var(--r-ctl); overflow:hidden; }
.subtile-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.subtile-thumb img.loading { opacity:.25; }
.subtile-thumb img.noimg { visibility:hidden; }
.subtile .badge { position:absolute; top:16px; right:16px; }   /* status on the right, like on-sale/off-sale */
.subtile-name { font-weight:700; font-size:14px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subtile-meta { color:var(--subtle); font-size:11px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sub-detail { width:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--r-card); padding:16px 18px; margin-top:-2px; }
.sub-detail[hidden] { display:none; }
.sd-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sd-title { font-weight:700; font-size:16px; }
.sd-3d { margin-left:auto; }
.sd-colors { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
/* each colour is its own boxed card */
.sd-color { position:relative; background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:8px; text-align:center; transition:border-color .12s; }
.sd-color .sd-thumb { display:block; width:100%; aspect-ratio:1; object-fit:contain; background:#0d0d0f;
  border-radius:8px; cursor:pointer; }
.sd-color .sd-thumb.loading { opacity:.25; }
.sd-color:hover { border-color:#45474d; }
.sd-color.rej { border-color:var(--red); background:rgba(229,72,77,.09); }
.sd-cname { font-size:12px; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-cstatus { margin-top:5px; }
.sd-creason { font-size:11px; color:var(--red); margin-top:7px; line-height:1.35; text-align:left;
  background:rgba(0,0,0,.2); border-radius:6px; padding:5px 7px; }
.subtile.has-rej { border-color:var(--red); }
.subtile-rej { position:absolute; top:16px; left:16px; background:var(--red); color:#fff; font-size:11px;
  font-weight:700; padding:2px 7px; border-radius:20px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.sd-color .sd-repl { margin-top:7px; }
.sd-color .sd-x { top:12px; right:12px; }
.sd-x { position:absolute; top:5px; right:5px; width:20px; height:20px; line-height:19px; border-radius:50%;
  background:var(--red); color:#fff; font-size:12px; font-weight:700; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.sd-pop { position:absolute; z-index:5; top:100%; left:50%; transform:translateX(-50%); margin-top:6px; width:240px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:12px; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.5); cursor:default; }
.sd-reason { font-size:12px; color:var(--fg); margin-bottom:10px; line-height:1.4; }
.sd-repl { display:flex; flex-direction:column; gap:8px; }
.sd-file { cursor:pointer; }
.sd-file input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.sd-file span { display:block; text-align:center; padding:7px; border-radius:7px; font-size:11px; font-weight:600;
  background:var(--chip); color:var(--fg); border:1px dashed #55585f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-file:hover span { border-color:var(--accent); }
/* admin queue dropdown controls */
.sd-color { width:110px; }
.sd-cstatus { margin-top:4px; }
.sd-adminrej { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.sd-adminrej input { font-size:11px; padding:5px 7px; }
.sd-adminrej .btn { width:100%; }
.sd-actions { display:flex; gap:10px; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.sd-rejectall { display:flex; gap:8px; align-items:center; flex:1; }
.sd-rejectall input { flex:1; }

/* ── Submit page ── */
.submit-layout { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.submit-col { flex:1; min-width:300px; }
.submit-side { position:sticky; top:20px; }
.name-builder { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-top:8px; padding:8px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-ctl); min-height:44px; }
.nb-word { padding:6px 4px; font-weight:600; }
.nb-slot { min-width:10px; align-self:stretch; border-radius:6px; cursor:pointer; display:flex; align-items:center; }
.nb-slot:hover { background:rgba(255,255,255,.05); }
.nb-slot.over { background:var(--accent); }
.nb-slot.active { min-width:0; }
.nb-chip { padding:6px 12px; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  cursor:grab; user-select:none; }
.nb-chip.dragging { opacity:.5; }
.name-example { margin-top:8px; font-size:13px; }
.file-drop { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:6px; cursor:pointer;
  background:var(--chip); border:1px dashed #55585f; border-radius:var(--r-ctl); transition:border-color .12s, background .12s; }
.file-drop:hover, .file-drop.drag { border-color:var(--accent); background:var(--chip-hi); }
.file-drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.file-drop .fd-icon { font-size:18px; }
.file-drop .fd-text { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-card h3 { margin-top:0; }
.preview-wrap { position:relative; width:100%; aspect-ratio:1; background:#1f2024; border-radius:var(--r-ctl); overflow:hidden; }
.preview-wrap canvas { width:100%; height:100%; display:block; cursor:grab; }
.preview-wrap canvas:active { cursor:grabbing; }
.preview-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--subtle); font-size:12px; padding:20px; pointer-events:none; }
.preview-colors { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; max-height:96px; overflow:auto; }
.pv-color { width:38px; height:38px; border-radius:7px; background:var(--panel-2); object-fit:contain;
  border:2px solid transparent; cursor:pointer; }
.pv-color:hover { border-color:#45474d; }
.pv-color.sel { border-color:var(--accent); }
body.page-drag { outline:3px dashed var(--accent); outline-offset:-10px; }
.character-btn { width:100%; margin-top:10px; }
.character-btn[hidden] { display:none; }
.submit-btn { width:100%; margin-top:16px; padding:14px; font-size:15px; }

.viewer-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:400;
}
.viewer-modal.open { display:flex; }
.vm-box { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  width:520px; max-width:94vw; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55); }
.vm-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); }
.vm-title { font-weight:700; font-size:15px; }
.vm-modes { display:flex; gap:4px; margin-left:auto; margin-right:12px; background:var(--chip);
  border-radius:9px; padding:3px; }
.vm-modes button { background:transparent; border:0; color:var(--subtle); cursor:pointer;
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:7px; }
.vm-modes button:hover { color:var(--fg); }
.vm-modes button.on { background:var(--chip-hi); color:var(--fg); }
.vm-comp { background:var(--chip); border:0; color:var(--subtle); cursor:pointer; font-size:12px;
  font-weight:600; padding:6px 12px; border-radius:8px; margin-right:8px; }
.vm-comp:hover { color:var(--fg); }
.vm-comp.on { background:var(--accent); color:#fff; }
/* companion accessory picker (3.0 view) — vertical strip on the right of the canvas */
.vm-reset { position:absolute; top:12px; right:12px; z-index:6; width:32px; height:32px; padding:0; border:0;
  border-radius:50%; cursor:pointer; background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:.7; transition:opacity .15s, background .15s; }
.vm-reset svg { display:block; }
.vm-reset:hover { opacity:1; background:rgba(0,0,0,.7); }
.vm-reset[hidden] { display:none; }
/* horizontal accessory strip along the top of the canvas (leaves the L/R colour arrows clear) */
.vm-companions { position:absolute; top:12px; left:12px; right:12px; z-index:3; display:flex; flex-direction:row;
  gap:8px; max-width:calc(100% - 24px); overflow-x:auto; padding:2px; }
.vm-companions[hidden] { display:none; }
.vm-comp-item, .vm-comp-add { position:relative; width:52px; height:52px; border-radius:10px; cursor:pointer;
  background:rgba(0,0,0,.4); border:2px solid transparent; overflow:hidden; display:flex;
  align-items:center; justify-content:center; color:#cfd2d6; flex:0 0 auto; transition:border-color .12s, background .12s; }
.vm-comp-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.vm-comp-thumb img { width:100%; height:100%; object-fit:cover; }
.vm-comp-thumb span { font-weight:700; text-transform:uppercase; }
.vm-comp-item.on { border-color:var(--accent); background:rgba(0,0,0,.55); }
.vm-comp-x { position:absolute; top:2px; left:2px; z-index:2; width:15px; height:15px; padding:0;
  line-height:13px; border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:12px;
  cursor:pointer; text-align:center; opacity:.55; transition:opacity .12s, background .12s; }
.vm-comp-item:hover .vm-comp-x { opacity:1; }
.vm-comp-x:hover { background:#e5484d; }
.vm-comp-add { font-size:26px; font-weight:400; background:rgba(0,0,0,.4); border:2px dashed #55585f; }
.vm-comp-add:hover { border-color:var(--accent); color:#fff; }
.vm-comp-item.ro { cursor:default; }                 /* read-only (admin reviewing a member's item) */
.vm-comp-none { color:var(--muted); font-size:12px; padding:6px 4px; }

/* ── rejected submissions section: a proper divider + toggle, not the bland default marker ── */
.rejected-section { margin-top:36px; border-top:1px solid var(--line); padding-top:8px; }
.rejected-section > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 12px; margin-top:14px; border-radius:10px; user-select:none;
  font-size:14px; font-weight:600; color:#e6a1a1; background:rgba(229,72,77,.08);
  border:1px solid rgba(229,72,77,.28); transition:background .12s, border-color .12s; }
.rejected-section > summary::-webkit-details-marker { display:none; }
.rejected-section > summary:hover { background:rgba(229,72,77,.14); border-color:rgba(229,72,77,.5); }
.rs-chevron { display:inline-block; font-size:17px; line-height:1; color:#e5484d; transition:transform .15s; }
.rejected-section[open] > summary .rs-chevron { transform:rotate(90deg); }
.rs-count { min-width:20px; text-align:center; padding:1px 7px; border-radius:999px;
  background:#e5484d; color:#fff; font-size:12px; font-weight:700; }

/* ── approved submissions section: green mirror of the rejected section ── */
.subtile.has-app { border-color:var(--green); }
.subtile-app { position:absolute; top:16px; left:16px; background:var(--green); color:#08210f; font-size:11px;
  font-weight:700; padding:2px 7px; border-radius:20px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.approved-section { margin-top:36px; border-top:1px solid var(--line); padding-top:8px; }
.approved-section > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 12px; margin-top:14px; border-radius:10px; user-select:none;
  font-size:14px; font-weight:600; color:#a7e0b6; background:rgba(59,165,93,.08);
  border:1px solid rgba(59,165,93,.30); transition:background .12s, border-color .12s; }
.approved-section > summary::-webkit-details-marker { display:none; }
.approved-section > summary:hover { background:rgba(59,165,93,.15); border-color:rgba(59,165,93,.55); }
.as-chevron { display:inline-block; font-size:17px; line-height:1; color:var(--green); transition:transform .15s; }
.approved-section[open] > summary .as-chevron { transform:rotate(90deg); }
.as-count { min-width:20px; text-align:center; padding:1px 7px; border-radius:999px;
  background:var(--green); color:#08210f; font-size:12px; font-weight:700; }

/* ── queue tile upload animation (mirrors the publish grid's tile spinner) ── */
.subtile.uploading .subtile-thumb { filter:brightness(.4); }
.subtile.uploading { pointer-events:none; }
.subtile .spinner { position:absolute; top:calc(50% - 26px); left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border:3px solid rgba(255,255,255,.25); border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite; z-index:5; }
.subtile.uploaded-flash { border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.subtile.fading { opacity:0; transform:scale(.92); transition:opacity .4s, transform .4s; }
.vm-comp-form { position:absolute; top:12px; right:74px; z-index:4; width:230px; padding:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.vm-comp-form[hidden] { display:none; }
.vm-cf-title { font-weight:700; font-size:13px; margin-bottom:8px; }
.vm-cf-link { width:100%; box-sizing:border-box; font-size:12px; margin-bottom:8px; }
.vm-cf-hint { color:var(--subtle); font-size:11px; margin:6px 0 10px; }
/* drop overlay while dragging an .rbxm onto the character view */
.vm-drop { position:absolute; inset:8px; z-index:5; display:none; align-items:center; justify-content:center;
  border:2px dashed var(--accent); border-radius:12px; background:rgba(0,0,0,.45); color:#fff;
  font-weight:700; font-size:14px; pointer-events:none; }
.viewer-modal.dragging .vm-drop { display:flex; }
.vm-cf-msg { font-size:11px; color:var(--subtle); margin-top:8px; min-height:14px; }
.vm-close { background:var(--chip); border:0; color:var(--fg); border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:14px; }
.vm-close:hover { background:var(--chip-hi); }
.vm-canvas-wrap { position:relative; width:100%; aspect-ratio:1; background:#1f2024; }
.vm-canvas-wrap canvas { width:100%; height:100%; display:block; cursor:grab; }
.vm-canvas-wrap canvas:active { cursor:grabbing; }
.vm-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.42); color:#fff; font-size:26px; line-height:1; padding:0 0 3px;
  display:flex; align-items:center; justify-content:center; opacity:.7;
  transition:opacity .15s, background .15s; }
.vm-nav:hover { opacity:1; background:rgba(0,0,0,.68); }
.vm-prev { left:12px; } .vm-next { right:12px; }
.vm-nav[hidden] { display:none; }
.vm-hint { position:absolute; bottom:8px; left:0; right:0; text-align:center;
  color:var(--subtle); font-size:11px; pointer-events:none; opacity:.7; }
.vm-strip { display:flex; gap:8px; padding:14px; flex-wrap:wrap; justify-content:center; max-height:120px; overflow:auto; }
.vm-color { width:44px; height:44px; border-radius:8px; background:var(--panel-2);
  cursor:pointer; border:2px solid transparent; object-fit:contain; }
.vm-color:hover { border-color:#45474d; }
.vm-color.sel { border-color:var(--accent); }
.vm-color.loading { opacity:.35; }
.center-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { width:360px; }

/* ── publish grid ── */
.toolbar {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px;
}
.toolbar .grow { flex:1; }
.selcount { color:var(--subtle); font-size:13px; }
.natoggle {
  display:flex; align-items:center; margin:0; color:var(--fg);
  font-size:13px; cursor:pointer; background:var(--chip); padding:10px 16px; border-radius:var(--r-pill);
  transition:background .1s, color .1s;
}
.natoggle:hover { background:var(--chip-hi); }
.natoggle input { display:none; }                     /* no square box */
.natoggle:has(input:checked) { background:var(--accent); color:var(--accent-fg); }

/* custom Roblox-style dropdown (outlined field + floating label + dark menu) */
.rbx-field { position:relative; min-width:210px; }
.rbx-label {
  position:absolute; top:-8px; left:12px; padding:0 6px; background:var(--bg);
  font-size:11px; color:var(--subtle); z-index:1; pointer-events:none;
}
.rbx-select {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:11px 14px; font:inherit; font-size:14px; cursor:pointer;
}
.rbx-field.open .rbx-select, .rbx-select:hover { border-color:var(--accent); }
.rbx-chev { color:var(--subtle); font-size:12px; transition:transform .12s; }
.rbx-field.open .rbx-chev { transform:rotate(180deg); }
.rbx-menu {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:6px; max-height:340px; overflow:auto; box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.rbx-field.open .rbx-menu { display:block; }
.rbx-menu { scrollbar-width:none; }                    /* scrollable, no visible bar */
.rbx-menu::-webkit-scrollbar { display:none; }
.rbx-opt {
  padding:9px 12px; border-radius:var(--r-ctl); font-size:14px; color:var(--fg); cursor:pointer;
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.rbx-opt:hover { background:var(--chip); }
.rbx-opt.sel { background:var(--chip-hi); }
/* red count of unpublished (off-sale, non-pending, non-N/A) items */
.rbx-badge { min-width:18px; text-align:center; padding:1px 6px; border-radius:20px;
  background:var(--red); color:#2a0a08; font-size:11px; font-weight:800; line-height:1.5; }
.rbx-select .rbx-badge { margin-left:auto; margin-right:8px; }

#grid {
  position:relative; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));
  user-select:none;
}
/* boxed tiles, centered text (per user preference) */
.tile {
  cursor:pointer; position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-card); padding:10px;
  text-align:center; transition:border-color .1s;
}
.tile:hover { border-color:#45474d; }
.tile.sel { border-color:var(--accent); background:#12283a; }
.tile .thumb {
  width:100%; aspect-ratio:1; background:var(--panel-2); border-radius:var(--r-ctl);
  object-fit:contain; display:block;
}
.tile .thumb.ph { display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:11px; }
.tile.faded { opacity:.5; }
.tile.faded:hover, .tile.faded.sel { opacity:1; }
.tile.na { outline:1px dashed var(--red); }
/* publishing states */
.tile.queued { opacity:.5; }
.tile.publishing .thumb, .tile.queued .thumb { filter:brightness(.45); }
.tile.publishing { opacity:1; }
.tile .spinner {
  position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border:3px solid rgba(255,255,255,.25); border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite; z-index:5;
}
.tile.err .thumb { outline:2px solid var(--red); }
@keyframes spin { to { transform:rotate(360deg); } }
.tile .nm { font-size:13px; font-weight:600; margin-top:10px; line-height:1.3;
  word-break:break-word; max-height:2.6em; overflow:hidden; }
.tile .rename-input {
  width:100%; text-align:center; font-size:13px; font-weight:600; font-family:inherit;
  background:var(--panel-2); color:var(--fg); border:1px solid var(--accent);
  border-radius:6px; padding:3px 5px;
}
.tile .rename-input:focus { outline:none; }
.tile .badge { position:absolute; top:16px; right:16px; }

/* ── floating rename-group panel (base name + draggable colour chip) ── */
.rename-panel { position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:60; width:420px; max-width:calc(100vw - 32px);
  padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 44px rgba(0,0,0,.55); }
.rename-panel .rp-title { font-size:15px; font-weight:700; margin-bottom:12px; }
.rename-panel label { display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
.rename-panel .rp-base { width:100%; font-size:14px; font-family:inherit; background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:9px 11px; }
.rename-panel .rp-base:focus { outline:none; border-color:var(--accent); }
.rename-panel .rp-eg { margin-top:8px; font-size:13px; color:var(--muted); }
.rename-panel .rp-actions { display:flex; gap:8px; margin-top:16px; }
.rename-panel .rp-hint { margin-top:12px; font-size:11px; color:var(--muted); }
.tile .check {
  position:absolute; top:16px; left:16px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; box-shadow:0 0 0 2px var(--bg);
}
.tile .flagbtn {
  position:absolute; top:16px; left:16px; border:0; cursor:pointer;
  background:var(--chip); color:var(--subtle); font-size:10px; font-weight:700;
  border-radius:999px; padding:4px 10px; opacity:0; transition:opacity .1s, background .1s, color .1s;
}
.tile:hover .flagbtn { opacity:1; }
.tile.sel .flagbtn { display:none; }        /* checkmark lives here when selected */
.tile .flagbtn:hover { background:var(--red); color:#fff; }
.tile.na .flagbtn { opacity:1; background:var(--red); color:#fff; }   /* flagged = colored */
.marquee {
  position:absolute; border:1px solid var(--accent); background:rgba(0,162,255,.14);
  pointer-events:none; z-index:20; border-radius:2px;
}
.gridmsg { color:var(--subtle); padding:48px 0; text-align:center; }

/* themed confirm modal (replaces native confirm()) */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:300;
}
.modal {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; width:360px; max-width:90vw; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal h3 { margin:0 0 10px; font-size:16px; font-weight:700; }
.modal .modal-body { color:var(--subtle); font-size:14px; margin-bottom:20px; white-space:pre-wrap; line-height:1.45; }
.modal .modal-actions { display:flex; justify-content:flex-end; gap:10px; }
#jobLog {
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:12px; margin-top:12px; max-height:220px; overflow:auto;
  font-family:Consolas,monospace; font-size:12px; color:var(--subtle); white-space:pre-wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Motion & micro-interactions — additive polish only (no layout changes).
   Everything below is guarded by prefers-reduced-motion at the very end.
   ════════════════════════════════════════════════════════════════════════ */
:root { --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.2,.9,.3,1); }
html { scroll-behavior:smooth; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes popIn    { from { opacity:0; transform:scale(.96) translateY(6px); } to { opacity:1; transform:none; } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes overlayIn{ from { opacity:0; } to { opacity:1; } }
@keyframes boxIn    { from { opacity:0; transform:scale(.94) translateY(10px); } to { opacity:1; transform:none; } }

/* — the page arrives — */
.topbar { animation:fadeIn .45s ease both; }
.wrap h1 { animation:fadeInUp .5s var(--ease) both; }
.wrap .sub { animation:fadeInUp .5s var(--ease) .05s both; }
.card { animation:fadeInUp .5s var(--ease) both; }
.card:nth-of-type(2){ animation-delay:.06s } .card:nth-of-type(3){ animation-delay:.12s }
.card:nth-of-type(4){ animation-delay:.18s } .card:nth-of-type(5){ animation-delay:.24s }

/* — grid tiles pop in with a light stagger — */
.sub-grid .subtile, .grid .tile { animation:popIn .38s var(--ease) both; }
.sub-grid .subtile:nth-child(1),.grid .tile:nth-child(1){animation-delay:.02s}
.sub-grid .subtile:nth-child(2),.grid .tile:nth-child(2){animation-delay:.05s}
.sub-grid .subtile:nth-child(3),.grid .tile:nth-child(3){animation-delay:.08s}
.sub-grid .subtile:nth-child(4),.grid .tile:nth-child(4){animation-delay:.11s}
.sub-grid .subtile:nth-child(5),.grid .tile:nth-child(5){animation-delay:.14s}
.sub-grid .subtile:nth-child(6),.grid .tile:nth-child(6){animation-delay:.17s}
.sub-grid .subtile:nth-child(7),.grid .tile:nth-child(7){animation-delay:.20s}
.sub-grid .subtile:nth-child(8),.grid .tile:nth-child(8){animation-delay:.23s}
.sub-grid .subtile:nth-child(9),.grid .tile:nth-child(9){animation-delay:.26s}
.sub-grid .subtile:nth-child(n+10),.grid .tile:nth-child(n+10){animation-delay:.29s}

/* — interactive lift / feedback — */
.subtile { transition:transform .16s var(--ease), border-color .12s, box-shadow .16s; }
.subtile:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.tile { transition:transform .16s var(--ease), border-color .12s, box-shadow .16s, opacity .16s, filter .16s; }
.tile:not(.queued):not(.publishing):hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.4); }

.btn { transition:background .14s, transform .12s var(--ease), box-shadow .16s, color .14s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.28); }
.btn:active { transform:translateY(0) scale(.97); box-shadow:none; }
.btn.accent:hover { box-shadow:0 5px 18px rgba(0,162,255,.42); }
.btn.green:hover  { box-shadow:0 5px 18px rgba(92,200,92,.36); }
.btn.red:hover    { box-shadow:0 5px 18px rgba(255,107,94,.34); }
.btn:disabled, .btn:disabled:hover { transform:none; box-shadow:none; }

.topbar nav a { transition:background .15s, transform .12s var(--ease), color .15s; }
.topbar nav a:hover { transform:translateY(-1px); }
.topbar nav a:active { transform:translateY(0); }

/* form focus glow + smooth fields */
input[type=text], input[type=password], input[type=number], select, textarea {
  transition:border-color .15s, box-shadow .15s, background .15s; }
input:focus, select:focus, textarea:focus { box-shadow:0 0 0 3px rgba(0,162,255,.16); }
.file-drop { transition:border-color .15s, background .15s, transform .12s var(--ease); }
.file-drop:hover { transform:translateY(-1px); }

/* colour swatches / companion tiles / thumbnails */
.pv-color, .vm-color, .vm-comp-item, .vm-comp-add { transition:transform .13s var(--ease), border-color .12s, background .12s; }
.pv-color:hover, .vm-color:hover, .vm-comp-item:hover, .vm-comp-add:hover { transform:scale(1.09); }
.pill { transition:background .15s, color .15s; }
.sd-color { transition:transform .14s var(--ease), border-color .12s, box-shadow .14s; }
.sd-color:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.3); }

/* thumbnails fade in smoothly once rendered (pairs with the .loading opacity) */
.subtile-thumb img, .vm-color, .sd-thumb, .pv-color { transition:opacity .35s ease, transform .13s var(--ease); }

/* — overlays & panels — */
.viewer-modal.open { animation:overlayIn .18s ease; }
.viewer-modal.open .vm-box { animation:boxIn .26s var(--ease-out); }
.modal-overlay { animation:overlayIn .16s ease; }
.modal-overlay .modal { animation:boxIn .24s var(--ease-out); }
.rename-panel { animation:boxIn .22s var(--ease-out); }
.sub-detail:not([hidden]) { animation:slideDown .28s var(--ease); }
.flash { animation:slideDown .32s var(--ease); }
.vm-comp-form:not([hidden]) { animation:popIn .18s var(--ease-out); }

/* accessibility: honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}