:root {
  --bg: #08030d;
  --bg-2: #100616;
  --panel: #0c0710;
  --panel-2: #15091b;
  --text: #f4f0e8;
  --muted: #9c95a1;
  --line: #b9b4b9;
  --soft-line: #3a2d40;
  --lime: #c8ff00;
  --magenta: #d000ff;
  --cyan: #00f5ff;
  --coral: #ff5d3a;
  --green: #55ff99;
  --mono: "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--mono); }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }

.desktop { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: var(--bg); }
.desktop::before { content: ""; position: absolute; inset: 52px 0 58px; background: linear-gradient(100deg, transparent 0 51%, #15051c 51% 64%, transparent 64%); opacity: .75; pointer-events: none; }
.wall-shape { position: absolute; z-index: 0; background: #1a0821; opacity: .62; pointer-events: none; }
.shape-a { top: 8%; left: 50%; width: 250px; height: 84%; clip-path: polygon(0 0,70% 0,100% 10%,82% 10%,82% 100%,50% 100%,50% 19%,0 19%); }
.shape-b { top: 31%; right: 8%; width: 180px; height: 54%; clip-path: polygon(0 0,100% 0,100% 100%,72% 100%,72% 32%,42% 32%,42% 83%,15% 83%,15% 12%,0 12%); }
.shape-c { bottom: 58px; left: 34%; width: 310px; height: 35%; clip-path: polygon(0 18%,24% 18%,24% 0,49% 0,49% 64%,72% 64%,72% 25%,100% 25%,100% 100%,0 100%); }

.system-bar { position: fixed; inset: 0 0 auto; z-index: 900; height: 52px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--magenta); background: #07020b; }
.system-brand { height: 100%; display: flex; align-items: center; gap: 16px; padding: 0 26px; background: transparent; cursor: pointer; }
.header-wordmark { position: relative; width: 245px; height: 42px; display: block; overflow: hidden; background: #000; }
.header-wordmark img { position: absolute; left: 0; top: 0; width: 245px; max-width: none; height: auto; transform: translateY(-22%); }
.header-note { color: var(--muted); font-size: 12px; letter-spacing: .09em; white-space: nowrap; }
.team-symbol { position: relative; width: 43px; height: 43px; display: block; flex: 0 0 43px; overflow: hidden; background: #000; }
.team-symbol img { position: absolute; width: 90px; height: 90px; max-width: none; object-fit: cover; transform: translate(-24px,-19px); }
.team-symbol.about-symbol { width: 220px; height: 220px; flex-basis: 220px; border: 1px solid var(--soft-line); }
.team-symbol.about-symbol img { width: 470px; height: 470px; transform: translate(-126px,-101px); }
.team-wordmark { position: relative; width: min(100%,460px); height: 94px; display: block; overflow: hidden; background: #000; }
.team-wordmark img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(-20%); }
.system-status { height: 100%; display: flex; align-items: center; gap: 22px; padding: 0 26px; font-size: 12px; }
.process-copy { color: var(--lime); }
.process-copy b { font-weight: 400; }
.sound-toggle { display: flex; align-items: center; gap: 5px; background: transparent; cursor: pointer; }
.sound-toggle i { width: 20px; height: 10px; border: 1px solid var(--line); border-radius: 2px; }
.sound-toggle span { font-size: 10px; }
.sound-toggle[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }

.desktop-rail { position: fixed; z-index: 20; top: 76px; bottom: 78px; left: 28px; width: 145px; display: grid; align-content: start; gap: 18px; }
.desktop-icon, .new-folder-shortcut, .community-folder { display: grid; justify-items: start; gap: 7px; background: transparent; cursor: pointer; text-align: left; }
.desktop-icon strong, .new-folder-shortcut strong, .community-folder strong { max-width: 130px; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.desktop-icon:hover strong, .community-folder:hover strong, .new-folder-shortcut:hover strong { color: var(--lime); }

.folder-glyph { --folder-accent: var(--lime); position: relative; width: 74px; height: 47px; display: grid; place-items: center; border: 1px solid var(--line); border-top: 0; background: rgba(8,3,13,.8); }
.folder-glyph::before { content: ""; position: absolute; left: -1px; right: -1px; top: -8px; height: 9px; border: 1px solid var(--line); border-bottom-color: var(--folder-accent); background: linear-gradient(90deg,var(--folder-accent) 0 28%,transparent 28%); clip-path: polygon(0 0,30% 0,38% 78%,100% 78%,100% 100%,0 100%); }
.folder-glyph i { color: var(--text); font-size: 14px; font-style: normal; font-weight: 900; }
.folder-glyph.magenta { --folder-accent: var(--magenta); }
.folder-glyph.cyan { --folder-accent: var(--cyan); }
.folder-glyph.coral { --folder-accent: var(--coral); }
.folder-glyph.green { --folder-accent: #1ed760; }
.folder-glyph.dashed { border-style: dashed; }
.file-glyph { position: relative; width: 52px; height: 61px; display: grid; place-items: center; border: 1px dashed var(--line); background: var(--bg); clip-path: polygon(0 0,72% 0,100% 23%,100% 100%,0 100%); }
.file-glyph::after { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.file-glyph i { font-size: 12px; font-style: normal; }

.desktop-field { position: absolute; z-index: auto; inset: 52px 0 58px; }
.folder-field { position: absolute; z-index: 5; left: 19%; top: 340px; width: 53%; display: grid; grid-template-columns: repeat(5,minmax(92px,1fr)); gap: 20px 26px; }
.community-folder { position: relative; }
.community-folder .folder-glyph { width: 72px; height: 43px; }
.community-folder small { color: var(--muted); font-size: 8px; }
.new-folder-shortcut { position: absolute; z-index: 5; left: 32px; top: 300px; }

.window { --x: 20%; --y: 70px; position: absolute; z-index: 50; left: var(--x); top: var(--y); width: min(760px,60vw); min-width: 300px; border: 1px solid var(--line); background: rgba(8,3,13,.97); box-shadow: 0 16px 44px rgba(0,0,0,.5); }
.window.is-minimized { display: none; }
.window.is-focused { border-color: var(--text); box-shadow: 0 18px 52px rgba(0,0,0,.68), 0 0 0 1px rgba(208,0,255,.18); }
.window.is-maximized { position: fixed; inset: 64px 14px 70px !important; width: auto !important; height: auto !important; z-index: 850 !important; }
.window.is-maximized .window-body { max-height: calc(100vh - 165px); }
.titlebar { height: 39px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 15px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; }
.titlebar strong { color: var(--text); font-size: 12px; font-weight: 400; }
.window.is-focused .titlebar strong { color: var(--lime); }
.window-controls { display: flex; align-items: center; gap: 8px; }
.window-controls button { width: 18px; height: 20px; padding: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 18px; }
.window-controls button:hover { color: var(--lime); }
.window-body { max-height: 520px; overflow: auto; }
.window-toolbar { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 13px; border-bottom: 1px solid var(--soft-line); color: var(--lime); font-size: 9px; }
.window-toolbar button { padding: 6px 9px; border: 1px solid var(--soft-line); background: transparent; cursor: pointer; font-size: 8px; }
.window-toolbar button:hover, .window-toolbar button.is-active { border-color: var(--lime); color: var(--lime); }
.window-toolbar input { width: 220px; padding: 7px 9px; border: 1px solid var(--soft-line); background: #08030d; font-size: 9px; }

.initial-games { --x: 22%; --y: 52px; width: min(850px,55vw); }
.games-body { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; padding: 17px; }
/* Anchor as well as button: ALIEN HUNT is a real outbound Steam link, the rest
   are still inert. The colour/decoration reset keeps the two indistinguishable. */
.game-file { position: relative; display: grid; grid-template-rows: 170px auto; gap: 9px; padding: 0; background: transparent; color: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.game-file img, .project-face, .wire-orb, .glitch-block { width: 100%; height: 170px; border: 1px solid var(--line); background: #07020a; object-fit: cover; }
.game-file span:not(.wire-orb):not(.project-face):not(.glitch-block) { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.game-file > i { position: absolute; right: 2px; bottom: 0; font-style: normal; }
.game-file .temp-label { position: absolute; top: 7px; right: 7px; padding: 4px 5px; border: 1px solid var(--lime); background: rgba(8,3,13,.9); color: var(--lime); font-size: 6px; }
.game-file:hover > span { color: var(--lime); }
.project-face { display: grid; place-items: center; font-size: 70px; filter: grayscale(1); }
.wire-orb { position: relative; display: block; border-color: #3b2641; border-radius: 50%; transform: scale(.48); }
.wire-orb::before, .wire-orb::after { content: ""; position: absolute; inset: 15%; border: 1px solid #5c2a66; border-radius: 50%; }
.wire-orb::after { inset: 8% 40%; }
.coming-card small { position: absolute; top: 128px; left: 0; right: 0; color: var(--muted); font-size: 8px; text-align: center; }
.glitch-block { display: grid; place-items: center; color: #542c60; font-size: 32px; letter-spacing: -.2em; }

.initial-maker { --x: auto; --y: 78px; right: 3.5%; left: auto; width: 315px; min-width: 280px; }
.maker-body { padding: 14px; }
.code-gate { display: grid; gap: 13px; justify-items: stretch; }
.code-gate .gate-folder { justify-self: center; margin: 9px 0; }
.code-gate p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.code-gate p b { color: var(--lime); font-weight: 400; }
.code-gate label, .folder-form label { display: grid; gap: 6px; color: var(--lime); font-size: 8px; }
.code-gate input, .folder-form input, .folder-form select, .folder-form textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); background: #09040c; font-size: 10px; }
.folder-form { display: grid; gap: 10px; }
.folder-form textarea { min-height: 62px; resize: vertical; }
/* appearance:none only reaches the closed box. The open list is drawn by the
   operating system and no CSS touches it, which is why a styled select still
   dropped a rounded macOS menu over a 1995 window. So app.js replaces these
   with a real listbox and hides the native element -- these rules are what the
   closed control looks like if that script never runs. */
.folder-form select { appearance: none; -webkit-appearance: none; border-radius: 0; padding-right: 28px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c8ff00'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 9px 6px; }
.folder-form select option { background: #09040c; color: var(--text); }

/* The replacement. The native select stays in the DOM and stays the source of
   truth -- publishFolder() still reads $('#folderColor').value -- it is just
   not what you look at or click. */
.select-shell { position: relative; }
.select-shell > select { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.select-value { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); background: #09040c; color: var(--text); font-size: 10px; text-align: left; cursor: pointer; }
.select-value::after { content: ''; flex: none; margin-left: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--lime); }
.select-shell.has-swatches .select-value { border-left: 12px solid var(--select-accent,var(--lime)); }
.select-shell.is-open .select-value, .select-value:focus-visible { border-color: var(--lime); }
.select-shell.is-open .select-value::after { transform: rotate(180deg); }
.select-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px); max-height: 178px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--lime); background: #09040c; box-shadow: 7px 8px 0 rgba(0,0,0,.55); }
.select-list li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 10px; cursor: pointer; }
.select-list li[aria-selected="true"] { box-shadow: inset 2px 0 var(--lime); }
.select-list li.is-active { background: var(--lime); color: #08030d; }
.select-swatch { width: 13px; height: 13px; flex: none; border: 1px solid rgba(255,255,255,.32); }
/* COLOR TAB carries its own answer: the left edge is the color being picked. A
   dropdown whose only content is color names should show them. */
#folderColorShell .select-value { border-left-color: var(--select-accent,var(--lime)); }

/* Same story as the select: a file input draws an OS button. The input keeps
   the file and the click -- the label forwards clicks to it for free -- so this
   is presentation with no interception in between. */
.folder-form label.file-field { grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 10px; }
.folder-form label.file-field > span:first-child { grid-column: 1 / -1; }
.folder-form input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.file-pick { padding: 9px 12px; border: 1px solid var(--lime); color: var(--lime); font-size: 9px; cursor: pointer; }
.file-field:hover .file-pick { background: var(--lime); color: #08030d; }
.folder-form input[type="file"]:focus-visible ~ .file-pick { outline: 1px solid var(--lime); outline-offset: 2px; }
.file-name { min-width: 0; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system-action { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 9px; }
.system-action:hover { background: var(--lime); color: #08030d; }
.system-action:disabled { border-color: var(--soft-line); color: var(--muted); cursor: not-allowed; }
.code-gate > small { color: var(--muted); font-size: 7px; }

.preview-window { width: 320px; }
.preview-one { --x: 23%; --y: 590px; }
.preview-two { --x: 45%; --y: 625px; }
.preview-three { --x: auto; --y: 575px; right: 13%; left: auto; }
.file-preview { display: grid; grid-template-columns: 130px 1fr; gap: 15px; min-height: 158px; padding: 14px; }
.preview-art { width: 130px; height: 130px; border: 1px solid var(--line); background: #17071e; }
.file-preview > div:last-child { display: grid; align-content: center; justify-items: start; gap: 10px; }
.file-preview strong { font-size: 12px; font-weight: 400; line-height: 1.45; }
.file-preview span { color: var(--muted); font-size: 9px; }
.file-preview button { width: 31px; height: 31px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.record-art { position: relative; background: radial-gradient(circle,#030104 0 28%,#6a0083 29% 36%,#1c0923 37% 50%,#9b00bd 51% 53%,#120519 54%); }
.record-art i { position: absolute; inset: 42%; border-radius: 50%; background: #000; }
.doodle-art { display: grid; place-items: center; background: #b6a887; color: #100b14; font-size: 22px; transform: rotate(-1deg); }
.micro-art { position: relative; background: #030104; }
.micro-art i { position: absolute; width: 16px; height: 16px; background: var(--text); }
.micro-art i:nth-child(1) { left: 28px; top: 28px; }.micro-art i:nth-child(2) { right: 31px; top: 54px; }.micro-art i:nth-child(3) { left: 62px; bottom: 19px; width: 6px; height: 6px; background: var(--lime); }

.community-browser { min-height: 330px; display: grid; align-content: start; gap: 18px; padding: 20px; }
.community-browser .community-folder { min-width: 90px; align-self: start; align-content: start; grid-template-rows: max-content max-content max-content; }
.community-section { display: grid; border: 1px solid var(--soft-line); }
.community-section > header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--magenta); }
.community-section > header strong { color: var(--magenta); font-size: 9px; font-weight: 400; }
.community-section > header small { color: var(--muted); font-size: 7px; }
.community-section > div { display: grid; }
.community-artworks > div { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 1px; background: var(--soft-line); }
.community-work-card { position: relative; min-height: 190px; display: grid; grid-template-rows: 145px auto; background: var(--panel); color: var(--text); text-decoration: none; }
.community-work-card img { width: 100%; height: 145px; object-fit: cover; background: #08030d; }
.community-work-card > span { display: grid; gap: 5px; padding: 10px; }
.community-work-card strong { overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.community-work-card small { color: var(--muted); font-size: 7px; }
.community-work-card > i { position: absolute; right: 9px; top: 9px; color: var(--lime); font-style: normal; }
.community-work-filetype { display: grid; place-items: center; color: var(--cyan); background: #0d0612; font-size: 18px; }
.community-folders > div { grid-template-columns: repeat(auto-fill,minmax(120px,160px)); align-content: start; gap: 26px; padding: 22px; }
.community-private-row { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--soft-line); }
.community-private-row > span { color: var(--cyan); font-size: 7px; }.community-private-row > div { display: grid; gap: 4px; }.community-private-row strong { font-size: 8px; font-weight: 400; }.community-private-row small { color: var(--muted); font-size: 7px; }.community-private-row > b { color: var(--lime); font-size: 8px; font-weight: 400; }.community-private-row.is-rejected > b { color: var(--coral); }
.community-section-empty { grid-column: 1 / -1; margin: 0; padding: 22px 12px; color: var(--muted); background: var(--panel); font-size: 8px; text-align: center; }

.market-window { --x: 16%; --y: 66px; width: min(1050px,72vw); }
.market-toolbar > div { display: flex; gap: 5px; }
.market-body { display: grid; grid-template-columns: 1fr 260px; min-height: 430px; }
.reward-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; border-right: 1px solid var(--line); }
.reward-file { min-height: 63px; display: grid; grid-template-columns: 37px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--soft-line); background: transparent; cursor: pointer; text-align: left; }
.reward-file:nth-child(odd) { border-right: 1px solid var(--soft-line); }
.reward-file:hover, .reward-file.is-selected { background: #16091d; }
.reward-file.is-selected { box-shadow: inset 2px 0 var(--lime); }
.reward-file .mini-file { width: 32px; height: 36px; display: grid; place-items: center; border: 1px solid var(--magenta); color: var(--magenta); font-size: 8px; }
.reward-file.is-unlock .mini-file { border-color: var(--cyan); color: var(--cyan); }
.reward-file > span { min-width: 0; display: grid; gap: 4px; }
.reward-file strong { overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reward-file small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.reward-file b { color: var(--lime); font-size: 11px; font-weight: 400; }
.reward-file.is-unlock b { color: var(--cyan); }
.reward-file.is-restocking b { color: var(--muted); font-size: 7px; letter-spacing: 0.08em; }
.reward-file.is-restocking .mini-file { border-color: var(--soft-line); color: var(--muted); }
.reward-file.is-pending { opacity: 0.55; }
.reward-file.is-pending strong { color: var(--muted); }
.pioneer-badge { display: inline-block; margin-left: 6px; padding: 2px 4px; border: 1px solid var(--cyan); color: var(--cyan); font-size: 6px; line-height: 1; vertical-align: middle; }
.claim-queue { display: flex; flex-direction: column; min-height: 430px; }
.claim-queue > div:first-child { display: flex; justify-content: space-between; padding: 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.claim-queue > div:first-child strong { color: var(--lime); }
.claim-lines { flex: 1; overflow: auto; }
.claim-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--soft-line); }
.claim-line strong { font-size: 8px; font-weight: 400; }
.claim-line span { color: var(--lime); font-size: 8px; }
.claim-line button { grid-column: 1 / -1; justify-self: end; background: transparent; color: var(--muted); cursor: pointer; font-size: 7px; }
.claim-queue .system-action { margin: 12px; }

.support-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--soft-line); }
.support-file { min-height: 210px; display: grid; align-content: start; gap: 11px; padding: 20px; background: var(--panel); }
.support-file.featured { grid-template-columns: 145px 1fr; }
.support-file > span, .support-file > div > span { color: var(--lime); font-size: 8px; }
.support-file h2 { margin: 0; font-size: 16px; font-weight: 400; }
.support-file p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.support-file button { justify-self: start; margin-top: auto; padding: 8px; border: 1px solid var(--soft-line); background: transparent; cursor: pointer; font-size: 8px; }
.support-file button:hover { border-color: var(--lime); color: var(--lime); }
.support-stamp { height: 155px; display: grid; place-items: center; align-content: center; gap: 10px; border: 1px solid var(--magenta); background: #13061a; color: var(--magenta); transform: rotate(-2deg); }
.support-stamp span { color: var(--text) !important; font-size: 9px !important; }.support-stamp strong { font-size: 30px; }.support-stamp small { font-size: 7px; }

.vote-files, .earn-browser { display: grid; }
.vote-files { min-height: 360px; align-content: start; gap: 10px; padding: 16px; }
.suggestion-file, .earn-file { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 13px; align-items: center; min-height: 66px; padding: 10px 14px; border-bottom: 1px solid var(--soft-line); }
.suggestion-file { grid-template-columns: 44px minmax(260px,1fr) 118px 180px; gap: 16px; min-height: 104px; padding: 14px 16px; border: 1px solid var(--soft-line); background: rgba(8,3,13,.94); }
.suggestion-file .file-type, .earn-file .file-type { width: 38px; height: 42px; display: grid; place-items: center; border: 1px solid var(--magenta); font-size: 7px; }
.suggestion-file > .file-type { width: 42px; height: 50px; color: var(--text); }
.suggestion-copy { display: grid; gap: 5px; min-width: 0; }.suggestion-file strong, .earn-file strong { font-size: 9px; font-weight: 400; }.suggestion-file small, .earn-file small { color: var(--muted); font-size: 7px; }
.earn-file > div { display: grid; gap: 5px; min-width: 0; }
.earn-file small { line-height: 1.45; }
.suggestion-copy > strong { font-size: 10px; }
.suggestion-file button, .earn-file button { padding: 7px; border: 1px solid var(--soft-line); background: transparent; cursor: pointer; font-size: 8px; }.suggestion-file button:hover, .earn-file button:hover { border-color: var(--lime); color: var(--lime); }
.suggestion-file p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.suggestion-file a { display: inline-block; margin-top: 6px; color: var(--cyan); font-size: 7px; text-decoration: none; }
.suggestion-status { width: max-content; margin-bottom: 5px; padding: 2px 5px; border: 1px solid var(--magenta); color: var(--magenta); font-size: 6px; }
.suggestion-status.is-in_progress { border-color: var(--cyan); color: var(--cyan); }
.suggestion-status.is-implemented { border-color: var(--lime); color: var(--lime); }
.suggestion-reward { display: block; width: max-content; margin-top: 6px; color: var(--lime); font-size: 7px; }
.suggestion-votes { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 64px; padding-inline: 12px; border-inline: 1px solid var(--soft-line); text-align: center; }
.suggestion-votes strong { color: var(--lime); font-size: 21px; line-height: 1; }
.suggestion-votes span { color: var(--lime); font-size: 8px; }
.suggestion-votes small { max-width: 110px; margin-top: 5px; line-height: 1.35; }
.suggestion-action { min-height: 54px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 9px !important; border-color: var(--lime) !important; color: var(--lime); text-align: center; }
.suggestion-action strong { font-size: 9px; }
.suggestion-action small { line-height: 1.35; }
.suggestion-action.is-static { border: 1px solid var(--soft-line); color: var(--text); }
.suggestion-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 42px 24px; text-align: center; }
.suggestion-empty > span { width: 58px; height: 66px; display: grid; place-items: center; border: 1px dashed var(--magenta); color: var(--magenta); font-size: 8px; clip-path: polygon(0 0,72% 0,100% 23%,100% 100%,0 100%); }
.suggestion-empty strong { color: var(--text); font-size: 15px; font-weight: 400; }
.suggestion-empty small { max-width: 470px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.suggestion-empty button { margin-top: 7px; padding: 10px 14px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 8px; }
.suggestion-empty button:hover { background: var(--lime); color: var(--bg); }
.earn-file { grid-template-columns: 46px 1fr 70px auto; }.earn-file b { color: var(--lime); font-size: 13px; font-weight: 400; }
.my-community-work { display: grid; margin: 18px 14px 14px; border: 1px solid var(--soft-line); }
.my-community-work > header { display: flex; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--magenta); }
.my-community-work > header strong { color: var(--magenta); font-size: 9px; font-weight: 400; }
.my-community-work > header small { color: var(--muted); font-size: 7px; }
.community-work-row { display: grid; grid-template-columns: 58px minmax(0,1fr) 78px 58px; gap: 12px; align-items: center; padding: 12px 13px; border-bottom: 1px solid var(--soft-line); }
.community-work-row:last-child { border-bottom: 0; }
.community-work-row > span { color: var(--cyan); font-size: 7px; }
.community-work-row > div { display: grid; gap: 4px; min-width: 0; }
.community-work-row strong { overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.community-work-row small { color: var(--muted); font-size: 6px; }
.community-work-row .community-work-note { color: var(--text); white-space: normal; }
.community-work-row > b { color: var(--lime); font-size: 8px; font-weight: 400; }
.community-work-row.is-rejected > b { color: var(--coral); }
.community-work-row > em { color: var(--lime); font-size: 9px; font-style: normal; text-align: right; }
.community-work-row.is-pending > em { color: var(--muted); }
.community-work-row.is-rejected > em { color: var(--coral); }
.community-work-empty { margin: 0; padding: 24px 13px; color: var(--muted); font-size: 8px; text-align: center; }

.ledger-browser table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 8px; }
.ledger-browser th, .ledger-browser td { padding: 11px 13px; border-bottom: 1px solid var(--soft-line); text-align: left; }
.ledger-browser th { color: var(--muted); font-weight: 400; }.ledger-browser td:nth-child(3) { color: var(--lime); }.ledger-browser td:last-child { color: var(--muted); }
.ledger-browser tr.is-you td:nth-child(2) { color: var(--cyan); }
.ledger-private { color: var(--muted); font-size: 7px; letter-spacing: 0.08em; }
.ledger-open { padding: 7px 8px; border: 1px solid var(--soft-line); background: transparent; color: var(--text); cursor: pointer; font-size: 7px; white-space: nowrap; }
.ledger-open:hover { border-color: var(--lime); color: var(--lime); }
.ledger-detail-window { --x: 15%; --y: 82px; width: min(1100px,78vw); }
.ledger-detail-toolbar { align-items: flex-start; flex-direction: column; }
.ledger-detail-toolbar small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.ledger-detail-browser { max-height: 520px; overflow: auto; }
.ledger-detail-browser table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 8px; }
.ledger-detail-browser th, .ledger-detail-browser td { padding: 10px 11px; border-bottom: 1px solid var(--soft-line); text-align: left; }
.ledger-detail-browser th { position: sticky; z-index: 1; top: 0; background: var(--panel); color: var(--muted); font-weight: 400; }
.ledger-detail-browser td:nth-child(3) b { color: var(--green); font-weight: 400; white-space: nowrap; }
.ledger-detail-browser tr.is-debit td:nth-child(3) b { color: var(--coral); }
.ledger-detail-browser td:nth-child(2), .ledger-detail-browser td:nth-child(6) { color: var(--muted); }

.etsy-browser { min-height: 330px; display: grid; grid-template-columns: 1fr 240px; gap: 30px; align-items: center; padding: 30px; }
.etsy-copy { display: grid; gap: 15px; }.etsy-copy > span { color: var(--magenta); font-size: 9px; }.etsy-copy h2 { margin: 0; font-size: 26px; font-weight: 400; }.etsy-copy p { max-width: 520px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.etsy-file-stack { position: relative; height: 180px; }.etsy-file-stack .file-glyph { position: absolute; width: 120px; height: 150px; border-style: solid; }.etsy-file-stack .file-glyph:nth-child(1) { left: 0; top: 20px; transform: rotate(-8deg); }.etsy-file-stack .file-glyph:nth-child(2) { left: 55px; top: 8px; border-color: var(--magenta); }.etsy-file-stack .file-glyph:nth-child(3) { left: 105px; top: 25px; border-color: var(--lime); transform: rotate(7deg); }

.archive-browser { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 360px; }.archive-browser img { width: 100%; height: 360px; object-fit: cover; border-right: 1px solid var(--line); }.archive-browser > div { display: grid; align-content: center; gap: 15px; padding: 25px; }.archive-browser span { color: var(--lime); font-size: 8px; }.archive-browser h2 { margin: 0; font-size: 22px; font-weight: 400; }.archive-browser p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.codes-browser { min-height: 360px; display: grid; align-content: start; gap: 22px; padding: 18px; }
.reward-history-section { display: grid; align-content: start; gap: 9px; }
.reward-history-section > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--soft-line); }
.reward-history-section > header strong { color: var(--lime); font-size: 9px; font-weight: 400; }
.reward-history-section > header small { color: var(--muted); font-size: 7px; }
.code-file,.claimed-prize { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--soft-line); }
.code-file .mini-file,.claimed-prize .mini-file { width: 38px; height: 43px; display: grid; place-items: center; border: 1px solid var(--lime); color: var(--lime); font-size: 8px; }
.code-file div,.claimed-prize > div { display: grid; gap: 5px; }
.code-file strong { color: var(--lime); font-size: 11px; font-weight: 400; }
.code-file small,.claimed-prize small { color: var(--muted); font-size: 7px; }
.code-file button { padding: 7px; border: 1px solid var(--soft-line); background: transparent; cursor: pointer; font-size: 8px; }
.code-file.is-used { opacity: .45; }
.claimed-prize { grid-template-columns: 44px minmax(0,1fr); }
.claimed-prize header { display: flex; justify-content: space-between; gap: 12px; }
.claimed-prize header strong { font-size: 9px; font-weight: 400; }
.claimed-prize header b { color: var(--coral); font-size: 8px; font-weight: 400; }
.claimed-prize p { margin: 0; color: var(--text); font-size: 9px; }
.claimed-prize.is-approved header b { color: var(--cyan); }
.claimed-prize.is-fulfilled header b { color: var(--green); }
.claimed-prize.is-rejected { opacity: .6; }

.connections-window { --x: 20%; --y: 82px; width: min(900px,72vw); }
.connections-browser { display: grid; min-height: 390px; }
.connection-line { min-height: 76px; display: grid; grid-template-columns: 44px minmax(0,1fr) 110px 120px; gap: 13px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--soft-line); }
.connection-mark { width: 39px; height: 43px; display: grid; place-items: center; border: 1px solid var(--magenta); color: var(--magenta); font-size: 8px; }
.steam-mark { border-color: var(--cyan); color: var(--cyan); }.discord-mark { border-color: var(--lime); color: var(--lime); }.spotify-mark { border-color: #1ed760; color: #1ed760; }
.connection-line > div { display: grid; gap: 5px; }.connection-line strong { font-size: 9px; font-weight: 400; }.connection-line small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.connection-line b { color: var(--lime); font-size: 8px; font-weight: 400; }.connection-line > span:last-child { color: var(--muted); font-size: 7px; }
.connection-line button { padding: 9px; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); cursor: pointer; font-size: 8px; }.connection-line button:hover { background: var(--cyan); color: var(--bg); }
.connection-flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; color: var(--lime); font-size: 8px; }.connection-flow i { color: var(--muted); font-style: normal; }

.listening-room-window { --x: 17%; --y: 74px; width: min(980px,76vw); }
.room-toolbar small { color: #1ed760; font-size: 7px; }
/* Fixed height, not min-height: the track list is 20 rows and the transport is
   the last grid row, so a growing body pushed the controls out of the window
   and left them behind the taskbar. The list scrolls inside itself instead. */
.listening-room-body { height: 470px; display: grid; grid-template-columns: 220px minmax(0,1fr); overflow: hidden; }
.window.is-maximized .listening-room-body { height: calc(100vh - 165px); }
.room-sidebar { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 13px; padding: 15px; border-right: 1px solid var(--line); background: rgba(30,215,96,.025); }
.sidebar-heading { display: grid; gap: 6px; }
.sidebar-heading strong { color: var(--lime); font-size: 8px; font-weight: 400; letter-spacing: .06em; }
.sidebar-heading small { color: var(--muted); font-size: 7px; line-height: 1.6; }
.toolbar-credit { display: flex; align-items: center; gap: 9px; }
.toolbar-credit .spotify-logo { width: 21px; height: 21px; }
.room-sidebar header { display: grid; grid-template-columns: 44px 1fr; gap: 11px; align-items: center; }
.room-sidebar header > div { display: grid; gap: 5px; }.room-sidebar header strong { font-size: 9px; font-weight: 400; }.room-sidebar header small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.room-sidebar > b { color: var(--coral); font-size: 8px; font-weight: 400; }
.room-sidebar dl { display: grid; margin: 4px 0 0; border-top: 1px solid var(--soft-line); }.room-sidebar dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--soft-line); font-size: 7px; }.room-sidebar dt { color: var(--muted); }.room-sidebar dd { margin: 0; color: var(--lime); text-align: right; }
.room-sidebar p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.65; }.room-sidebar p span { color: var(--text); }
/* min-height: 0 on both the panel and the list. A grid item defaults to
   min-height: auto, meaning "never smaller than my content" -- so the panel
   grew to its full 1216px inside a 470px body, the list never scrolled, and the
   transport row ended up below the window's edge. */
/* Explicit rows, because the embed frame is hidden most of the time and a
   display:none child takes no grid slot -- so auto-placement slid the track
   list onto an `auto` row and pushed the transport onto the flexible one,
   right out of the window. Each child names its own row instead. */
/* Four rows now the duplicate transport is gone: title, paste box, the embed,
   and one line of caption. The embed takes the flexible row so it fills the
   window instead of leaving a dead band under itself. */
.room-queue-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; }
.room-queue-panel > header { grid-row: 1; }
.spotify-search-form { grid-row: 2; }
.embed-form { grid-row: 3; }
.embed-frame, .spotify-search-results { grid-row: 4; }
.player-tracks { grid-row: 5; }
.spotify-search-form, .embed-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--soft-line); }
.spotify-search-form input, .embed-form input { min-width: 0; padding: 9px 10px; border: 1px solid var(--soft-line); background: #09040c; font-size: 8px; }
.spotify-search-form button, .embed-form button { padding: 9px 14px; border: 1px solid #1ed760; background: transparent; color: #1ed760; cursor: pointer; font-size: 8px; }
.spotify-search-form button:hover, .embed-form button:hover { background: #1ed760; color: #08030d; }
.embed-frame { min-height: 0; border-bottom: 1px solid var(--soft-line); }
.embed-frame iframe { display: block; width: 100%; height: 100%; min-height: 152px; border: 0; }
/* While an embed is loaded it takes the flexible row instead of the track list,
   and the iframe fills it. Spotify's playlist embed wants 420px; the window
   body is 470px total, so a fixed height simply hung out of the bottom. */
.room-queue-panel.is-embed { grid-template-rows: auto auto auto minmax(0,1fr) auto; }
/* The iFrame API exposes no volume and no next/previous, so in embed mode those
   controls are removed rather than left sitting there doing nothing. */

.room-queue-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 17px; border-bottom: 1px solid var(--soft-line); }.room-queue-panel > header > div { display: grid; gap: 4px; }.room-queue-panel > header span { color: #1ed760; font-size: 7px; }.room-queue-panel h2 { margin: 0; font-size: 16px; font-weight: 400; }.room-queue-panel > header button { padding: 8px 10px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 8px; }
.room-empty { margin: 0; padding: 11px 15px; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 7px; line-height: 1.6; }
.spotify-search-results { min-height: 0; overflow-y: auto; border-bottom: 1px solid var(--soft-line); }
.spotify-result { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; gap: 11px; align-items: center; padding: 8px 15px; border: 0; border-bottom: 1px solid var(--soft-line); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.spotify-result:hover, .spotify-result:focus-visible { background: #132619; outline: 1px solid #1ed760; outline-offset: -1px; }
.spotify-result img, .spotify-result-cover { width: 46px; height: 46px; display: grid; place-items: center; object-fit: cover; border: 1px solid var(--soft-line); color: #1ed760; }
.spotify-result div { min-width: 0; display: grid; gap: 4px; }
.spotify-result strong, .spotify-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotify-result strong { font-size: 9px; font-weight: 400; }
.spotify-result small, .spotify-result > span { color: var(--muted); font-size: 7px; }
.spotify-result-actions { display: flex !important; grid-auto-flow: column; gap: 5px !important; }
.spotify-result-actions button, .room-queue-track button { padding: 6px 7px; border: 1px solid #1ed760; background: transparent; color: #1ed760; font-size: 7px; cursor: pointer; }
.spotify-result-actions button:hover, .room-queue-track button:hover { background: #1ed760; color: #08030d; }
.spotify-search-status { margin: 0; padding: 18px 15px; color: var(--muted); font-size: 8px; }

/* Your playlists, down the sidebar. */
.player-sources { display: grid; align-content: start; gap: 1px; max-height: 190px; overflow-y: auto; border-top: 1px solid var(--soft-line); }
.player-source { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 8px; border: 0; background: transparent; color: var(--text); font-size: 8px; text-align: left; cursor: pointer; }
.player-source strong { min-width: 0; overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.player-source small { flex: none; color: var(--muted); font-size: 7px; }
.player-source:hover { background: #16091d; }
.player-source.is-active { background: #1ed760; color: #08030d; }
.player-source.is-active small { color: #08030d; }

/* Track list. Same row shape the queue used, minus the votes. */
.player-tracks { min-height: 0; overflow-y: auto; }
.room-queue-heading { padding: 7px 15px; border-top: 1px solid var(--soft-line); color: #1ed760; font-size: 7px; }
.room-queue-track { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 15px; border-top: 1px solid var(--soft-line); }
.room-queue-track > div { min-width: 0; display: grid; gap: 3px; }
.room-queue-track strong, .room-queue-track small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; font-weight: 400; }
.room-queue-track small { color: var(--muted); }
/* Attribution. Required by Spotify's design guidelines wherever their content
   is shown, and the review looks for it. */
/* Spotify's artwork, scaled proportionally and never recoloured. The clear
   space around it is deliberate -- their guidelines require breathing room and
   a minimum size, so the wordmark is 92px wide and the icon 21px, both well
   above the digital minimums, with padding rather than a tight crop. */
.spotify-credit { display: grid; gap: 9px; margin: 4px 0 0; padding-top: 13px; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 7px; line-height: 1.55; }
.spotify-wordmark { display: block; width: 92px; }
.spotify-wordmark img { display: block; width: 100%; height: auto; }
.spotify-logo { display: block; width: 21px; height: 21px; }
.spotify-logo img { display: block; width: 100%; height: 100%; }
.room-queue-panel > header #openSourceInSpotify { flex: none; padding: 8px 10px; border: 1px solid #1ed760; background: transparent; color: #1ed760; cursor: pointer; font-size: 8px; }
.room-queue-panel > header #openSourceInSpotify:hover { background: #1ed760; color: #08030d; }

/* Transport. Our buttons, not Spotify's -- the SDK gives playback, the UI is
   ours, which is the whole reason this is worth more than an embed. */
.player-transport { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px 14px; align-items: center; padding: 11px 15px; border-top: 1px solid var(--line); background: #09040c; }
.transport-cover { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--soft-line); background: #09040c; color: var(--muted); overflow: hidden; cursor: pointer; }
.transport-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.transport-meta { min-width: 0; display: grid; gap: 4px; }
.transport-meta strong { overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.transport-meta small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.transport-controls { display: flex; gap: 6px; }
.transport-controls button { min-width: 30px; padding: 7px 6px; border: 1px solid var(--soft-line); background: transparent; color: var(--text); cursor: pointer; font-size: 8px; }
.transport-controls button:hover { border-color: #1ed760; color: #1ed760; }
.transport-seek { grid-column: 1 / 3; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; color: var(--muted); font-size: 7px; }
.transport-seek input { appearance: none; height: 3px; background: var(--soft-line); cursor: pointer; }
.transport-seek input::-webkit-slider-thumb { appearance: none; width: 9px; height: 13px; background: #1ed760; }
.transport-seek input::-moz-range-thumb { width: 9px; height: 13px; border: 0; background: #1ed760; }
.room-position { color: var(--muted); font-size: 8px; }

.about-browser { min-height: 300px; display: grid; grid-template-columns: 250px 1fr; place-items: center; gap: 20px; padding: 35px; }.about-browser > div { display: grid; gap: 12px; }.about-browser > div > span { color: var(--magenta); font-size: 9px; }.about-browser .working-copy-note { color: var(--lime); font-size: 8px; letter-spacing: .12em; }.about-browser p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.folder-viewer { width: 650px; }.folder-viewer .window-toolbar > span:last-child { display: flex; gap: 5px; }.folder-view-body { min-height: 330px; display: grid; grid-template-columns: repeat(3,1fr); align-content: start; gap: 18px; padding: 20px; }.inside-file { display: grid; justify-items: start; gap: 8px; background: transparent; cursor: pointer; text-align: left; }.inside-file .file-glyph { width: 64px; height: 75px; border-style: solid; }.inside-file strong { max-width: 150px; overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.inside-file small { color: var(--muted); font-size: 7px; }.inside-file.image-file img { width: 130px; height: 100px; border: 1px solid var(--line); object-fit: cover; }.inside-file:hover strong { color: var(--lime); }

.system-folder-window { --x: 24%; --y: 90px; width: min(780px,64vw); }
.system-folder-toolbar { justify-content: flex-start; }
.system-folder-toolbar span { margin-left: auto; color: var(--muted); }
.system-folder-toolbar button:disabled { opacity: .28; cursor: default; }
.system-folder-body { min-height: 390px; display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); align-content: start; gap: 26px 18px; padding: 24px; }
.system-folder-item { min-width: 0; display: grid; justify-items: start; align-content: start; gap: 8px; padding: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; }
.system-folder-item:hover { border-color: var(--soft-line); background: rgba(208,0,255,.06); }
.system-folder-item:hover strong { color: var(--lime); }
.system-folder-item .folder-glyph { width: 78px; height: 48px; }
.system-folder-item .file-glyph { width: 58px; height: 67px; border-style: solid; }
.system-folder-item strong { width: 100%; overflow: hidden; font-size: 9px; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.system-folder-item small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.system-folder-item.is-image img { width: 118px; height: 82px; border: 1px solid var(--line); object-fit: cover; filter: saturate(.82) contrast(1.05); }
.system-folder-item.fan-art-file { color: var(--text); text-decoration: none; }
.fan-art-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--magenta); }
.fan-art-heading strong { color: var(--magenta); font-size: 8px; font-weight: 400; }.fan-art-heading small { color: var(--muted); font-size: 7px; }
.fan-art-empty { grid-column: 1 / -1; margin: 0; padding: 22px 8px; color: var(--muted); font-size: 8px; }
.fan-art-status { color: var(--text); text-decoration: none; }.fan-art-status:not(a) { cursor: default; }.fan-art-status:not(a):hover { border-color: transparent; background: transparent; }.fan-art-status:not(a):hover strong { color: var(--text); }.fan-art-status.is-image img { width: 150px; height: 112px; object-fit: contain; background: #0d0612; }

.bug-report-file { grid-column: 1 / -1; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--soft-line); background: rgba(255,255,255,.02); }
.bug-report-file header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bug-report-file header strong { font-size: 9px; font-weight: 400; }
.bug-report-file header small { flex-shrink: 0; color: var(--muted); font-size: 7px; letter-spacing: .06em; }
.bug-report-file.is-validated header small { color: var(--lime); }
.bug-report-file.is-rejected header small { color: var(--muted); }
.bug-report-file p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.bug-report-file footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bug-report-file footer small { color: var(--muted); font-size: 7px; }
.bug-report-vote { flex-shrink: 0; padding: 5px 9px; border: 1px solid var(--soft-line); background: transparent; color: var(--text); cursor: pointer; font-size: 7px; white-space: nowrap; }
.bug-report-vote:hover { border-color: var(--lime); color: var(--lime); }
.bug-report-mine { flex-shrink: 0; color: var(--magenta); font-size: 7px; letter-spacing: .06em; white-space: nowrap; }

.start-menu { position: fixed; z-index: 950; left: 14px; bottom: 66px; width: 300px; margin: 0; padding: 0; border: 1px solid var(--line); background: #08030d; box-shadow: 0 18px 50px #000; }
.start-menu header { display: flex; align-items: center; gap: 14px; padding: 15px; border-bottom: 1px solid var(--magenta); }.start-menu header > div { display: grid; gap: 4px; }.start-menu header strong { font-size: 11px; }.start-menu header small { color: var(--muted); font-size: 7px; }.start-menu > button { width: 100%; display: flex; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--soft-line); background: transparent; cursor: pointer; text-align: left; font-size: 9px; }.start-menu > button:hover { background: var(--magenta); color: #08030d; }.start-menu footer { display: flex; justify-content: space-between; padding: 11px 15px; color: var(--lime); font-size: 7px; }

.taskbar { position: fixed; inset: auto 0 0; z-index: 910; height: 58px; display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-top: 1px solid var(--magenta); background: #07020b; }
.start-button { width: 92px; height: 43px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 10px; }.start-button:hover { background: var(--lime); color: var(--bg); }
.task-buttons { min-width: 0; flex: 1; display: flex; gap: 6px; overflow-x: auto; }.task-button { min-width: 132px; max-width: 180px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); background: #0a050d; cursor: pointer; font-size: 8px; }.task-button i { color: var(--magenta); font-style: normal; }.task-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.task-button.is-focused { border-color: var(--lime); color: var(--lime); }
.task-add { width: 43px; height: 38px; border: 1px dashed var(--line); background: transparent; cursor: pointer; font-size: 22px; }.rent-button { height: 38px; min-width: 220px; flex: none; padding: 0 13px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 8px; }.rent-button:hover,.rent-button:focus-visible { background: rgba(200,255,0,.1); color: #e4ff82; }
.mobile-tab-bar { display: none; }

.system-dialog { width: min(430px,calc(100vw - 30px)); padding: 0; border: 1px solid var(--line); background: #09040c; color: var(--text); box-shadow: 12px 14px 0 rgba(0,0,0,.55); }.system-dialog::backdrop { background: rgba(3,0,5,.42); }.dialog-title { height: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 11px; border-bottom: 1px solid var(--coral); }.dialog-title strong { color: var(--coral); font-size: 9px; }.dialog-title button { background: transparent; cursor: pointer; font-size: 18px; }.dialog-body { display: grid; grid-template-columns: 54px 1fr; gap: 17px; align-items: center; padding: 24px; }.dialog-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--coral); color: var(--coral); font-size: 30px; }.dialog-body > div { display: grid; gap: 8px; }.dialog-body strong { font-size: 13px; }.dialog-body #dialogMessage { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.dialog-body #dialogMessage label { display: grid; gap: 6px; margin-top: 10px; color: var(--lime); }.dialog-body #dialogMessage select { padding: 8px; border: 1px solid var(--line); background: var(--bg); }.dialog-ok { float: right; min-width: 80px; margin: 0 15px 15px; padding: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 9px; }.system-dialog.is-success .dialog-title { border-color: var(--green); }.system-dialog.is-success .dialog-title strong, .system-dialog.is-success .dialog-icon { border-color: var(--green); color: var(--green); }
.system-dialog.is-signal { width: min(620px,calc(100vw - 30px)); border-color: var(--lime); background: linear-gradient(135deg,#09040c 0%,#0d0612 68%,rgba(195,255,0,.08) 100%); box-shadow: 14px 16px 0 rgba(0,0,0,.65),0 0 34px rgba(195,255,0,.12); }
.system-dialog.is-signal .dialog-title { height: 48px; padding: 0 18px; border-color: var(--lime); background: rgba(195,255,0,.045); }
.system-dialog.is-signal .dialog-title strong { color: var(--lime); font-size: 12px; letter-spacing: .08em; }
.system-dialog.is-signal .dialog-body { grid-template-columns: 112px 1fr; gap: 28px; padding: 38px 42px 32px; }
.system-dialog.is-signal .dialog-icon { width: 108px; height: 108px; border: 2px solid var(--lime); color: var(--lime); background: rgba(195,255,0,.07); font-size: 27px; box-shadow: inset 0 0 22px rgba(195,255,0,.08); }
.system-dialog.is-signal .dialog-body > div { gap: 13px; }
.system-dialog.is-signal .dialog-body strong#dialogHeading { color: #fff; font-size: 25px; line-height: 1; }
.system-dialog.is-signal .dialog-body #dialogMessage { display: grid; gap: 10px; color: #d6cfd9; font-size: 12px; line-height: 1.55; }
.system-dialog.is-signal .signal-confirm-line { color: var(--lime); font-size: 13px; letter-spacing: .12em; }
.system-dialog.is-signal #dialogMessage small { width: fit-content; padding: 6px 9px; border-left: 2px solid var(--purple); color: #fff; background: rgba(150,0,255,.13); font-size: 10px; }
.system-dialog.is-signal .dialog-ok { min-width: 150px; margin: 0 30px 26px; padding: 12px 20px; border-color: var(--lime); color: #09040c; background: var(--lime); font-size: 11px; font-weight: 800; cursor: pointer; }
.system-dialog.is-signal .dialog-ok:hover,.system-dialog.is-signal .dialog-ok:focus-visible { color: var(--lime); background: transparent; outline: 1px solid var(--lime); outline-offset: 3px; }
.system-dialog.is-wide { width: min(760px,calc(100vw - 30px)); }
.system-dialog.is-wide .dialog-body { display: block; padding: 24px 30px 16px; }
.system-dialog.is-wide .dialog-icon { display: none; }
.system-dialog.is-wide .dialog-body > div { gap: 14px; }
.balance-dialog { display: grid; gap: 14px; }
.dialog-body #dialogMessage .balance-dialog .auth-points { margin: 0; }
.dialog-body #dialogMessage .balance-dialog .point-history-list { max-height: 280px; }
.suggestion-form { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 13px 16px; }
.dialog-body #dialogMessage .suggestion-form label { margin: 0; }
.suggestion-form label:nth-child(3), .suggestion-form label:nth-child(4), .suggestion-form label:nth-child(5), .suggestion-form > small { grid-column: 1 / -1; }
.dialog-body #dialogMessage .suggestion-form textarea { min-height: 92px; }
.discord-claim-form { min-height: 390px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 14px 18px; }
.dialog-body #dialogMessage .discord-claim-form label { margin: 0; }
.discord-claim-form > span,.discord-claim-form > label:nth-of-type(3),.discord-claim-form > small { grid-column: 1 / -1; }
.discord-claim-form > small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.system-dialog.is-pioneer { width: min(520px,calc(100vw - 30px)); }
.system-dialog.is-pioneer .dialog-body { align-items: start; padding: 26px 28px 20px; }
.system-dialog.is-pioneer .dialog-icon { margin-top: 2px; }
.system-dialog.is-pioneer .dialog-body > div { gap: 11px; }
.pioneer-claim-form { min-height: 0; grid-template-columns: 1fr; gap: 13px; }
.pioneer-claim-form > span,.pioneer-claim-form > label,.pioneer-claim-form > small { grid-column: 1; }
.system-dialog.is-pioneer .dialog-ok { margin: 0 28px 24px; padding: 10px 13px; border-color: var(--lime); }
.suggestion-form > small { padding-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.5; }
.community-work-form .community-work-drop { min-height: 92px; place-items: center; align-content: center; gap: 9px !important; border: 1px dashed var(--magenta); background: rgba(208,0,255,.035); color: var(--text) !important; cursor: pointer; text-align: center; }
.community-work-drop:hover,.community-work-drop.is-dragging { border-color: var(--lime); background: rgba(200,255,0,.07); color: var(--lime) !important; }
.community-work-drop.has-file { border-style: solid; border-color: var(--cyan); }
.community-work-drop strong { color: var(--muted); font-size: 7px; font-weight: 400; }
.community-work-drop.has-file strong { color: var(--cyan); }
.community-work-drop input { position: absolute; width: 1px !important; height: 1px; padding: 0 !important; opacity: 0; pointer-events: none; }
.dialog-body #dialogMessage input,.dialog-body #dialogMessage textarea { width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--bg); }
.dialog-body #dialogMessage textarea { min-height: 86px; resize: vertical; }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: 72px; padding: 10px 14px; border: 1px solid var(--lime); background: #08030d; color: var(--lime); opacity: 0; pointer-events: none; font-size: 8px; transform: translate(-50%,10px); transition: .16s; }.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1250px) {
  .desktop-rail { left: 18px; width: 120px; }
  .initial-games { --x: 15%; width: 66vw; }
  .initial-maker { right: 18px; }
  .folder-field { left: 15%; width: 62%; }
  .preview-one { --x: 17%; }.preview-two { --x: 43%; }.preview-three { right: 4%; }
  .game-file { grid-template-rows: 135px auto; }.game-file img,.project-face,.wire-orb,.glitch-block { height: 135px; }.coming-card small { top: 103px; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .desktop { min-height: 100vh; height: auto; overflow: visible; padding-bottom: 66px; }
  .system-brand { padding-left: 13px; }.header-note,.process-copy { display: none; }.header-wordmark { width: 185px; }.header-wordmark img { width: 185px; }.system-status { padding-right: 13px; gap: 12px; }
  .desktop-rail { display: none; }
  .desktop-icon { min-width: 92px; }.desktop-icon .folder-glyph { width: 64px; }.desktop-icon strong { font-size: 8px; }
  .desktop-field { position: relative; inset: auto; min-height: 680px; }
  /* Redundant now that COMMUNITY (bottom tab) opens the same public folders
     through renderCommunityBrowser() -- desktop-canvas icons scattered behind
     the tab-based windows don't fit the mobile navigation model. */
  .folder-field, .new-folder-shortcut { display: none; }
  /* top+bottom both set on a fixed element stretches it to fill regardless of
     content (CSS positioning spec) -- that's wanted here, a consistent
     full-screen app slot on small viewports. What's needed is for
     .window-body to stretch along with it instead of only capping its own
     height, or short content leaves dead space below the titlebar. */
  .window { position: fixed; left: 10px !important; right: 10px !important; top: 66px !important; bottom: 66px; width: auto !important; min-width: 0; height: auto; overflow: hidden; display: flex; flex-direction: column; }
  .window .window-body { flex: 1 1 auto; max-height: none; }
  .window:not(.is-focused) { display: none; }
  .games-body { grid-template-columns: repeat(2,1fr); }.game-file { grid-template-rows: 145px auto; }.game-file img,.project-face,.wire-orb,.glitch-block { height: 145px; }
  .preview-window { display: none !important; }
  .market-body { grid-template-columns: 1fr; }.reward-files { border-right: 0; }.claim-queue { min-height: 220px; border-top: 1px solid var(--line); }
  .support-grid { grid-template-columns: 1fr; }.support-file.featured { grid-template-columns: 115px 1fr; }
  .suggestion-file { grid-template-columns: 44px minmax(220px,1fr) 110px; gap: 13px; padding: 13px; }
  .suggestion-file > .file-type { width: 42px; height: 50px; }
  .suggestion-action { grid-column: 2 / -1; min-height: 52px; }
  .taskbar, .start-menu { display: none; }
  .mobile-tab-bar { position: fixed; inset: auto 0 0; z-index: 920; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--magenta); background: #07020b; }
  .mobile-tab { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 8px; }
  .mobile-tab i { font-style: normal; font-size: 12px; }
  .mobile-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; letter-spacing: .03em; }
  .mobile-tab.is-active { color: var(--lime); }
  .mobile-account-links { display: grid; }
}

@media (max-width: 540px) {
  .system-dialog.is-wide .dialog-body { max-height: calc(100vh - 130px); padding: 18px; overflow-y: auto; }
  .system-dialog.is-signal .dialog-title { height: 42px; padding: 0 12px; }
  .system-dialog.is-signal .dialog-title strong { font-size: 9px; }
  .system-dialog.is-signal .dialog-body { grid-template-columns: 74px 1fr; gap: 16px; padding: 26px 20px; }
  .system-dialog.is-signal .dialog-icon { width: 72px; height: 72px; font-size: 20px; }
  .system-dialog.is-signal .dialog-body strong#dialogHeading { font-size: 19px; }
  .system-dialog.is-signal .dialog-body #dialogMessage { font-size: 10px; }
  .system-dialog.is-signal .dialog-ok { width: calc(100% - 40px); margin: 0 20px 20px; }
  .suggestion-form { grid-template-columns: 1fr; }
  .suggestion-form label { grid-column: 1 !important; }
  .discord-claim-form { grid-template-columns: 1fr; }
  .discord-claim-form > span,.discord-claim-form > label:nth-of-type(3),.discord-claim-form > small { grid-column: auto; }
  .system-clock { font-size: 9px; }.team-symbol { width: 38px; height: 38px; flex-basis: 38px; }.team-symbol img { width: 80px; height: 80px; transform: translate(-21px,-17px); }
  .folder-field { grid-template-columns: repeat(2,1fr); }
  .games-body { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }.game-file { grid-template-rows: 110px auto; }.game-file img,.project-face,.wire-orb,.glitch-block { height: 110px; }
  .reward-files { grid-template-columns: 1fr; }.reward-file:nth-child(odd) { border-right: 0; }
  .market-toolbar { align-items: flex-start; flex-direction: column; }
  .support-file.featured { grid-template-columns: 1fr; }.support-stamp { width: 140px; }
  .suggestion-file { grid-template-columns: 46px minmax(0,1fr); gap: 13px; padding: 15px 13px; }
  .suggestion-file > .file-type { width: 44px; height: 54px; }
  .suggestion-votes { grid-column: 2; justify-items: start; min-height: 0; padding: 12px 0; border-inline: 0; border-block: 1px solid var(--soft-line); text-align: left; }
  .suggestion-votes strong { font-size: 22px; }.suggestion-votes small { max-width: none; }
  .suggestion-action { grid-column: 2; width: 100%; }
  .earn-file { grid-template-columns: 38px 1fr auto; }.earn-file button { grid-column: 2 / -1; justify-self: start; }
  .community-work-row { grid-template-columns: 50px minmax(0,1fr) auto; }.community-work-row > em { grid-column: 2 / -1; text-align: left; }
  .connection-line { grid-template-columns: 38px 1fr; }.connection-line > b,.connection-line > button,.connection-line > span:last-child { grid-column: 2; justify-self: start; }.connection-flow { align-items: flex-start; flex-direction: column; }
  .listening-room-body { grid-template-columns: 1fr; }.room-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.player-transport { grid-template-columns: 36px minmax(0,1fr); }
  .etsy-browser,.archive-browser,.about-browser { grid-template-columns: 1fr; }.archive-browser img { border-right: 0; border-bottom: 1px solid var(--line); }.etsy-file-stack { display: none; }.about-browser { padding: 20px; }
  .folder-view-body { grid-template-columns: repeat(2,1fr); }
  .system-folder-body { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 10px; padding: 16px; }
  .system-folder-toolbar span { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ledger-browser,.ledger-detail-browser { overflow-x: auto; }.ledger-browser table { min-width: 420px; }
  .rent-button { min-width: 145px; padding: 0 8px; }.task-button { min-width: 110px; }.start-button { width: 70px; }
}

/* --- account / auth --- */
/* Lives in the taskbar. margin-left:auto claims the right end; the taskbar is
   a flex row, so this is what keeps it pinned there as task buttons come and
   go. Sized up from the old header chip, which was 8px and meant to be glanced
   past -- down here the balance is something people read on purpose. */
.auth-status { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; padding: 7px 12px; border: 1px solid var(--soft-line); background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.auth-status:hover { border-color: var(--line); color: var(--text); }
.auth-status b { font-weight: 400; letter-spacing: .04em; }
.auth-status span { color: var(--muted); font-size: 9px; }
.auth-status[data-state="in"] { border-color: var(--lime); color: var(--lime); }
.auth-status[data-state="in"] span { color: var(--lime); opacity: .65; }

.auth-window { width: min(720px, calc(100vw - 26px)); }
.auth-body { display: grid; gap: 15px; padding: 22px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; color: var(--lime); font-size: 10px; }
.auth-form input { width: 100%; padding: 12px 12px; border: 1px solid var(--line); background: #09040c; color: var(--text); font-size: 13px; }
.auth-form input:focus-visible { outline: 1px solid var(--lime); outline-offset: 1px; }
.auth-form input:disabled { border-color: var(--soft-line); color: var(--muted); }
.auth-form small { color: var(--muted); font-size: 10px; line-height: 1.6; }
.auth-form .system-action { padding: 13px 14px; font-size: 11px; }
.auth-hint { margin-top: -6px; font-size: 9px !important; }
.auth-sent { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-sent b { color: var(--cyan); font-weight: 400; }

.auth-alienhunt { display: grid; gap: 14px; width: 100%; padding: 18px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(70,239,255,.055), rgba(200,255,0,.018)); box-sizing: border-box; }
.auth-section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--soft-line); }
.auth-section-header > div { display: grid; gap: 4px; }
.auth-section-header span { color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.auth-section-header strong { color: var(--cyan); font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.auth-section-header > b { padding: 5px 8px; border: 1px solid currentColor; color: var(--lime); font-size: 8px; font-weight: 400; letter-spacing: .08em; }
.hunter-identity { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; }
.hunter-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font-size: 9px; }
.hunter-identity > div { display: grid; gap: 4px; }
.hunter-identity small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.hunter-identity b { font-size: 12px; }
.hunter-identity code { padding: 6px 8px; border: 1px solid var(--soft-line); color: var(--text); font: inherit; font-size: 9px; }
.alien-combat-profile { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--soft-line); background: rgba(8,3,13,.72); }
.alien-combat-profile > header { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 7px; letter-spacing: .08em; }
.alien-combat-profile > header small { color: var(--lime); }
.alien-stat-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.alien-stat-tabs button { padding: 7px 5px; border: 1px solid var(--soft-line); background: rgba(255,255,255,.02); color: var(--muted); font: inherit; font-size: 7px; cursor: pointer; }
.alien-stat-tabs button.is-active { border-color: rgba(70,239,255,.55); color: var(--cyan); background: rgba(70,239,255,.08); }
.alien-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.alien-stat-grid > div { min-width: 0; display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(124,79,255,.2); background: rgba(124,79,255,.035); }
.alien-stat-grid small { color: var(--muted); font-size: 6px; letter-spacing: .06em; }
.alien-stat-grid strong { color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.alien-reward-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.alien-reward { min-width: 0; display: grid; grid-template-rows: auto auto auto auto minmax(30px,auto); gap: 9px; padding: 13px; border: 1px solid var(--soft-line); background: rgba(8,3,13,.72); }
.alien-reward > header { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 7px; letter-spacing: .07em; }
.alien-reward > header b { color: var(--lime); font-weight: 400; white-space: nowrap; }
.reward-value { display: flex; align-items: baseline; gap: 7px; }
.reward-value strong { color: var(--text); font-size: 20px; font-weight: 400; }
.reward-value small { color: var(--muted); font-size: 7px; }
.reward-bar { height: 7px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.reward-bar > div { height: 100%; width: 0; background: linear-gradient(90deg,var(--cyan),var(--lime)); transition: width .25s ease; }
.alien-reward p { min-height: 12px; color: var(--muted); font-size: 7px; }
.alien-badges { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--soft-line); background: rgba(8,3,13,.72); }
.alien-badges > header { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 7px; letter-spacing: .08em; }
.alien-badges > header small { color: var(--lime); }
.alien-badge-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.alien-badge { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--soft-line); opacity: .45; }
.alien-badge.is-earned { opacity: 1; border-color: var(--lime); background: rgba(200,255,0,.05); }
.alien-badge-mark { width: 26px; height: 26px; display: grid; place-items: center; }
.alien-badge-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.alien-badge div { min-width: 0; display: grid; gap: 3px; }
.alien-badge strong { font-size: 8px; font-weight: 400; }
.alien-badge small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.reward-claim { align-self: end; width: 100%; padding: 8px 9px; border: 1px solid var(--lime); background: transparent; color: var(--lime); cursor: pointer; font-size: 8px; }
.reward-claim:hover:not(:disabled) { background: var(--lime); color: var(--bg); }
.reward-claim:disabled { border-color: var(--soft-line); color: var(--muted); cursor: default; }
.account-footer { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 2px; }
.account-footer small { color: var(--muted); font-size: 7px; line-height: 1.5; }
.auth-signout { flex: none; text-align: right; }
.auth-code { text-align: center; letter-spacing: .55em; font-size: 22px !important; padding: 14px 12px !important; text-indent: .55em; }
.auth-link { padding: 0; border: 0; background: transparent; color: var(--cyan); cursor: pointer; font: inherit; font-size: inherit; text-decoration: underline; }
.auth-link:hover { color: var(--lime); }
.auth-unlink { color:#ff769d; justify-self:start; }
.mobile-account-links { display: none; gap: 1px; background: var(--soft-line); border: 1px solid var(--soft-line); }
.mobile-account-links button { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border: 0; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 10px; text-align: left; }
.mobile-account-links button:hover { color: var(--lime); }
.mobile-account-links button span { color: var(--muted); }
.alien-report-history { display:grid; gap:8px; border-top:1px solid var(--soft-line); padding-top:12px; }
.alien-report-history header { color:var(--muted); font-size:8px; letter-spacing:.1em; }
.alien-report-list-item { display:grid; gap:3px; padding:8px; border:1px solid var(--soft-line); background:rgba(0,0,0,.16); }
.alien-report-list-item strong { font-size:10px; }
.alien-report-list-item span { color:var(--text); font-size:9px; line-height:1.4; }
.alien-report-list-item small { color:var(--muted); font-size:8px; }
.auth-error { margin: 0; padding: 10px 11px; border: 1px solid var(--coral); color: var(--coral); font-size: 10px; line-height: 1.6; }
.auth-session { display: grid; gap: 14px; justify-items: start; }
.auth-session p { margin: 0; color: var(--muted); font-size: 11px; }
.auth-session b { color: var(--lime); font-weight: 400; }
.account-identity { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.account-avatar { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--lime); background: rgba(200,255,0,.04); color: var(--lime); font-size: 9px; }
.account-identity > div { display: grid; gap: 4px; }
.account-identity small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.account-identity strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.account-online { color: var(--lime); font-size: 7px; letter-spacing: .08em; }
.auth-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; width: 100%; background: var(--line); border: 1px solid var(--line); }
.auth-points > div { display: grid; gap: 6px; padding: 13px 14px; background: var(--panel); }
.auth-points dt { color: var(--muted); font-size: 8px; letter-spacing: 0.1em; }
.auth-points dd { margin: 0; color: var(--lime); font-size: 22px; }
.auth-points small { color: var(--muted); font-size: 6px; letter-spacing: .06em; }
.point-history { width: 100%; border: 1px solid var(--line); background: rgba(8,3,13,.62); }
.point-history > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border-bottom: 1px solid var(--soft-line); }
.point-history > header > div { display: grid; gap: 4px; }
.point-history > header small { color: var(--muted); font-size: 6px; letter-spacing: .12em; }
.point-history > header strong { color: var(--text); font-size: 10px; font-weight: 400; letter-spacing: .08em; }
.point-history-filters { display: flex; gap: 5px; }
.point-history-filters button { padding: 5px 7px; border: 1px solid var(--soft-line); background: transparent; color: var(--muted); cursor: pointer; font-size: 7px; }
.point-history-filters button:hover, .point-history-filters button.is-active { border-color: var(--lime); color: var(--lime); }
.point-history-list { max-height: 210px; overflow-y: auto; }
.point-history-list > p { margin: 0; padding: 24px 13px; color: var(--muted); font-size: 8px; text-align: center; }
.point-history-row { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--soft-line); }
.point-history-row:last-child { border-bottom: 0; }
.point-history-row > b { color: var(--lime); font-size: 9px; font-weight: 400; white-space: nowrap; }
.point-history-row.is-spent > b { color: var(--coral); }
.point-history-row > div { min-width: 0; display: grid; gap: 4px; }
.point-history-row strong { overflow: hidden; font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.point-history-row small, .point-history-row time { color: var(--muted); font-size: 6px; }
.point-history-row time { white-space: nowrap; }
@media (max-width: 620px) {
  .auth-body { padding: 14px; }
  .alien-reward-grid { grid-template-columns: 1fr; }
  .alien-badge-grid { grid-template-columns: 1fr; }
  .hunter-identity { grid-template-columns: 42px minmax(0,1fr); }
  .hunter-identity code { grid-column: 2; justify-self: start; }
  .alien-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auth-points small { display: none; }
  .auth-points > div { padding: 10px; }
  .auth-points dd { font-size: 17px; }
  .point-history > header { align-items: flex-start; flex-direction: column; }
  .point-history-row { grid-template-columns: 62px minmax(0,1fr); }
  .point-history-row time { grid-column: 2; }
  .account-footer { align-items: flex-end; }
}

/* --- under construction gate (temporary; delete with construction.js) --- */
.is-construction { opacity: .5; }
.is-construction::after { content: 'SOON'; justify-self: start; padding: 2px 4px; border: 1px solid var(--coral); color: var(--coral); font-size: 6px; letter-spacing: .06em; }
.desktop-icon.is-construction strong { color: var(--muted); }
#startMenu .is-construction { display: flex; align-items: center; gap: 8px; }
.support-status { color: var(--coral); }
.support-status.is-live { color: var(--lime); }
.support-file.is-pending-payment { border-color: var(--coral); }
.support-file [data-support-action].is-construction { color: var(--coral); border-color: var(--coral); cursor: not-allowed; }