:root {
  --ink: #102328;
  --ink-deep: #09181c;
  --panel: #142d33;
  --panel-light: #1a373c;
  --paper: #f5f1e8;
  --paper-dim: #c6d3ce;
  --muted: #789095;
  --line: rgba(188, 218, 208, .14);
  --mint: #b9f28a;
  --coral: #ff735d;
  --yellow: #f5c96a;
  --white: #fffdf7;
  --shadow: 0 24px 70px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink-deep); scrollbar-gutter: stable; }
html.scroll-locked, html.scroll-locked body { overflow: hidden; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { cursor: pointer; }
button { color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
h1, h2, h3, p { margin-top: 0; }

.onboarding-screen, .welcome-screen { min-height: 100vh; background: radial-gradient(circle at 76% 18%, rgba(185, 242, 138, .1), transparent 27rem), var(--ink-deep); }
.onboarding-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px); height: 100svh; padding: clamp(28px, 4vh, 48px) 8vw; overflow: hidden; }
.onboarding-copy { width: 100%; max-width: 740px; justify-self: center; padding-top: 88px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-large { position: absolute; z-index: 2; top: clamp(18px, 3vh, 34px); left: 50%; margin: 0; transform: translateX(-50%); }
.brand-mark { display: block; width: 56px; height: 44px; object-fit: contain; background: transparent; filter: drop-shadow(0 5px 12px rgba(104, 169, 165, .2)); }
.brand-name { color: var(--white); font-family: "Avenir Next", Montserrat, Raleway, "Century Gothic", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 300; letter-spacing: .2em; line-height: 1; white-space: nowrap; }
.brand-sub { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.brand-large .brand-mark { width: 76px; height: 60px; }
.brand-large .brand-name { font-size: 20px; }
.brand-large .brand-sub { margin-top: 5px; font-size: 12px; }
.eyebrow, .metric-label, .rail-label { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.accent, .kicker { color: var(--mint); }
.onboarding-copy h1, .welcome-card h1 { margin: 18px 0 19px; font-family: Georgia, serif; font-size: clamp(48px, 6vw, 82px); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.onboarding-copy h1 { white-space: nowrap; }
.onboarding-copy h1 em, .welcome-card h1 em, .forum-hero h1 em { color: var(--mint); font-style: normal; }
.onboarding-lede, .welcome-card > p { max-width: 465px; color: var(--paper-dim); font-size: 15px; line-height: 1.65; }
.onboarding-form { display: grid; max-width: 390px; margin-top: 32px; }
.onboarding-form label, .feedback-card label, .modal label { margin-bottom: 7px; color: var(--paper-dim); font-size: 12px; font-weight: 800; }
.onboarding-form label:not(:first-child) { margin-top: 14px; }
.onboarding-form label span { color: var(--muted); font-weight: 400; }
input, textarea, select { color: var(--paper); background: #0f2329; border: 1px solid var(--line); border-radius: 5px; outline: 0; }
input, select { min-height: 43px; padding: 0 13px; }
textarea { padding: 12px 13px; }
input:focus, textarea:focus, select:focus { border-color: rgba(185, 242, 138, .6); box-shadow: 0 0 0 3px rgba(185, 242, 138, .08); }
.onboarding-form input { margin-bottom: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 43px; padding: 0 17px; border-radius: 7px; font-size: 13px; font-weight: 900; letter-spacing: .03em; text-decoration: none; transition: .2s ease; }
.button span { font-size: 17px; line-height: 0; }
.button-primary { color: var(--ink-deep); background: var(--mint); border: 1px solid var(--mint); }
.button-primary:hover { background: #d3ffad; box-shadow: 0 8px 24px rgba(185, 242, 138, .18); transform: translateY(-1px); }
.button-ghost { color: var(--paper); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .18); }
.button-ghost:hover { background: rgba(255, 255, 255, .09); }
.button.disabled { cursor: not-allowed; opacity: .38; pointer-events: auto; }
.button:disabled { cursor: not-allowed; opacity: .38; }
.button:disabled:hover { transform: none; box-shadow: none; }
.onboarding-form .button { margin-top: 22px; }
.form-status { min-height: 18px; margin-top: 9px; color: var(--coral); font-size: 12px; }
.onboarding-note, .welcome-foot { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pulse, .status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(185, 242, 138, .08); }

.onboarding-art { position: relative; min-height: 560px; overflow: hidden; }
.art-orbit { position: absolute; border: 1px solid rgba(185, 242, 138, .25); border-radius: 50%; transform: rotate(-27deg); }
.art-orbit-one { top: 8%; left: 12%; width: 330px; height: 490px; }
.art-orbit-two { top: 20%; left: 23%; width: 250px; height: 350px; border-color: rgba(255, 115, 93, .35); transform: rotate(52deg); }
.art-card { position: absolute; width: 180px; height: 270px; border-radius: 11px; box-shadow: 25px 35px 60px rgba(0, 0, 0, .35); }
.art-card-back { top: 20%; left: 27%; display: grid; place-items: center; color: rgba(185, 242, 138, .65); background: repeating-linear-gradient(135deg, rgba(185, 242, 138, .08) 0 2px, transparent 2px 8px), #20434a; border: 1px solid rgba(185, 242, 138, .3); font-family: Georgia, serif; font-size: 80px; transform: rotate(-12deg); }
.art-card-front { top: 31%; left: 42%; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; color: var(--ink); background: var(--paper); transform: rotate(12deg); }
.art-card-front span { align-self: end; color: var(--coral); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 900; }
.art-card-front strong { font-family: Georgia, serif; font-size: 26px; font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.onboarding-art > p { position: absolute; right: 4%; bottom: 8%; color: rgba(245, 241, 232, .4); font-size: 11px; font-weight: 900; letter-spacing: .18em; line-height: 1.5; text-align: right; }
.onboarding-splash-art { display: none; }
.splash-art-active > :not(.onboarding-splash-art):not(.splash-particles) { display: none; }
.splash-art-active .onboarding-splash-art {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  display: block;
  width: min(96%, 620px);
  aspect-ratio: 1;
  object-fit: contain;
  opacity: .55;
  transform: translate(-50%, -50%);
}
.splash-particles { display: none; }
.splash-art-active .splash-particles {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  display: block;
  width: min(96%, 620px);
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.splash-particles i {
  --duration: 15s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 13px;
  background: rgba(211, 255, 173, .82);
  border-radius: 85% 15% 80% 20%;
  box-shadow: 0 0 9px rgba(185, 242, 138, .42);
  opacity: 0;
  animation: leaf-swirl var(--duration) ease-in-out infinite;
}
.splash-particles i:nth-child(1) { --x0: -220px; --y0: -55px; --x1: -145px; --y1: -145px; --x2: -35px; --y2: -190px; --x3: 105px; --y3: -145px; animation-delay: -2s; }
.splash-particles i:nth-child(2) { --x0: -165px; --y0: 150px; --x1: -55px; --y1: 190px; --x2: 85px; --y2: 145px; --x3: 190px; --y3: 45px; --duration: 18s; animation-delay: -11s; }
.splash-particles i:nth-child(3) { --x0: 25px; --y0: -215px; --x1: 135px; --y1: -165px; --x2: 195px; --y2: -45px; --x3: 145px; --y3: 90px; --duration: 17s; animation-delay: -6s; }
.splash-particles i:nth-child(4) { --x0: 190px; --y0: 65px; --x1: 125px; --y1: 155px; --x2: 5px; --y2: 195px; --x3: -125px; --y3: 145px; --duration: 20s; animation-delay: -14s; }
.splash-particles i:nth-child(5) { --x0: -75px; --y0: -180px; --x1: 25px; --y1: -120px; --x2: 75px; --y2: -20px; --x3: 40px; --y3: 95px; --duration: 13s; animation-delay: -8s; }
.splash-particles i:nth-child(6) { --x0: -190px; --y0: 30px; --x1: -105px; --y1: -35px; --x2: 15px; --y2: -50px; --x3: 130px; --y3: 10px; --duration: 16s; animation-delay: -4s; }
.splash-particles i:nth-child(7) { --x0: 75px; --y0: 185px; --x1: -25px; --y1: 135px; --x2: -75px; --y2: 35px; --x3: -35px; --y3: -80px; --duration: 19s; animation-delay: -16s; }
.splash-particles i:nth-child(8) { --x0: 170px; --y0: -105px; --x1: 195px; --y1: 5px; --x2: 140px; --y2: 115px; --x3: 25px; --y3: 175px; --duration: 14s; animation-delay: -9s; }
.splash-particles i:nth-child(9) { --x0: -120px; --y0: 185px; --x1: -195px; --y1: 90px; --x2: -185px; --y2: -35px; --x3: -95px; --y3: -125px; --duration: 21s; animation-delay: -5s; }
.splash-particles i:nth-child(10) { --x0: 205px; --y0: -20px; --x1: 145px; --y1: -105px; --x2: 40px; --y2: -145px; --x3: -65px; --y3: -105px; --duration: 18s; animation-delay: -1s; }
.splash-particles i:nth-child(11) { --x0: -30px; --y0: 210px; --x1: 85px; --y1: 180px; --x2: 155px; --y2: 85px; --x3: 155px; --y3: -30px; --duration: 16s; animation-delay: -13s; }
.splash-particles i:nth-child(12) { --x0: -205px; --y0: -115px; --x1: -105px; --y1: -185px; --x2: 20px; --y2: -175px; --x3: 115px; --y3: -95px; --duration: 22s; animation-delay: -18s; }
.splash-particles i:nth-child(3n) { width: 5px; height: 9px; background: rgba(255, 255, 245, .7); }
.splash-particles i:nth-child(4n) { width: 10px; height: 16px; background: rgba(121, 185, 178, .65); }
@keyframes leaf-swirl {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(0deg) scale(.55); }
  16% { opacity: .58; }
  38% { transform: translate(var(--x1), var(--y1)) rotate(145deg) scale(.85); }
  68% { opacity: .42; transform: translate(var(--x2), var(--y2)) rotate(285deg) scale(.7); }
  100% { opacity: 0; transform: translate(var(--x3), var(--y3)) rotate(440deg) scale(.45); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-particles { display: none !important; }
}

.welcome-screen { display: grid; place-items: center; padding: 25px; }
.welcome-card { width: min(820px, 100%); padding: clamp(28px, 6vw, 70px); background: linear-gradient(125deg, #1c3b40, #122b31); border: 1px solid rgba(185, 242, 138, .18); border-radius: 17px; box-shadow: var(--shadow); }
.welcome-overline { display: flex; align-items: center; gap: 9px; margin-bottom: 38px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.welcome-card h1 { font-size: clamp(45px, 6vw, 75px); }
.welcome-release { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 36px 0 28px; background: var(--line); border: 1px solid var(--line); }
.welcome-release > div { min-height: 110px; padding: 18px; background: rgba(10, 25, 29, .35); }
.welcome-release strong, .welcome-release small { display: block; }
.welcome-release strong { margin-top: 14px; color: var(--white); font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.welcome-release small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; padding: 31px 22px 25px; background: var(--ink-deep); border-right: 1px solid var(--line); }
.sidebar .brand { position: relative; min-height: 72px; margin-bottom: 32px; isolation: isolate; }
.sidebar .brand-mark { z-index: -1; width: 108px; height: 82px; margin: -5px -39px -5px -18px; opacity: .78; filter: drop-shadow(0 7px 15px rgba(104, 169, 165, .3)); }
.sidebar .brand-name { text-shadow: 0 2px 8px var(--ink-deep); }
.local-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 36px; padding: 7px 10px; color: var(--mint); border: 1px solid rgba(185, 242, 138, .2); border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 11px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 15px; text-align: left; transition: .2s ease; }
.nav-item span { color: #52737b; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.nav-item:hover, .nav-item.active { color: var(--paper); background: rgba(185, 242, 138, .09); }
.nav-item.active span { color: var(--mint); }
.sidebar-foot { margin-top: auto; padding: 17px 10px 0; border-top: 1px solid var(--line); }
.workspace-name { margin-top: 9px; color: var(--paper-dim); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-note { margin-top: 8px; color: #5d7d85; font-size: 13px; line-height: 1.45; }
.main { min-width: 0; padding: 0 52px 65px; background: radial-gradient(circle at 85% 0%, rgba(185, 242, 138, .07), transparent 25rem), var(--ink); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 104px; border-bottom: 1px solid var(--line); }
.topbar-title { margin-top: 6px; color: var(--paper-dim); font-family: Georgia, serif; font-size: 20px; }
.topbar .eyebrow span { padding: 0 5px; color: #466269; }
.breadcrumb-link { text-decoration: none; user-select: text; }
.profile-button { display: flex; align-items: center; gap: 10px; padding: 7px 9px; color: var(--paper); background: transparent; border: 1px solid transparent; border-radius: 10px; text-align: left; }
.profile-button:hover { border-color: var(--line); background: rgba(255, 255, 255, .03); }
.avatar { display: grid; place-items: center; width: 31px; height: 31px; color: var(--ink-deep); background: var(--yellow); border-radius: 50%; font-size: 14px; font-weight: 900; overflow: hidden; }
.avatar.avatar-image, .profile-hero-avatar.avatar-image, .comment-avatar.avatar-image { background: rgba(255, 255, 255, .06); }
.avatar img, .profile-hero-avatar img, .comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.profile-button strong, .profile-button small { display: block; }
.profile-button strong { font-size: 13px; }
.profile-button small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.chevron { margin-left: 7px; color: var(--muted); }
.view { display: none; padding-top: 49px; animation: rise .3s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.forum-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 35px; padding: 39px 45px; background: linear-gradient(120deg, #1b383d, #193038 55%, #163034); border: 1px solid rgba(185, 242, 138, .1); border-radius: 18px; box-shadow: var(--shadow); }
.kicker { font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.spark { display: inline-block; margin-right: 6px; color: var(--coral); font-size: 15px; }
.forum-hero h1 { max-width: 590px; margin: 21px 0 17px; font-family: Georgia, serif; font-size: clamp(42px, 5vw, 70px); font-weight: 400; letter-spacing: -.055em; line-height: .94; }
.forum-hero p { max-width: 520px; color: var(--paper-dim); font-size: 15px; line-height: 1.6; }
.hero-stat { align-self: end; padding-left: 21px; border-left: 1px solid var(--line); }
.hero-stat strong, .hero-stat span { display: block; }
.hero-stat strong { margin: 13px 0 3px; color: var(--mint); font-family: Georgia, serif; font-size: 39px; font-weight: 400; }
.hero-stat > span:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.text-button, .back-link { color: var(--mint); background: none; border: 0; font-size: 12px; font-weight: 900; text-decoration: none; }
.hero-stat .text-button { display: block; margin-top: 35px; padding: 0; }
.text-button span { padding-left: 6px; font-size: 16px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.forum-metrics { margin-top: 12px; }
.metric-card { position: relative; min-height: 126px; padding: 20px; background: #173037; border: 1px solid var(--line); border-radius: 9px; }
.metric-featured { background: linear-gradient(135deg, #315054, #19353b); }
.metric-warm { background: linear-gradient(135deg, #604b38, #38372e); }
.metric-value { margin-top: 18px; color: var(--white); font-family: Georgia, serif; font-size: 28px; letter-spacing: -.04em; }
.metric-meta { margin-top: 5px; color: #87a0a1; font-size: 12px; }
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 28px; margin-top: 48px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 45px 0 18px; }
.section-heading.tight { margin: 0 0 18px; }
.section-heading h2, .page-intro h1 { margin: 7px 0 0; font-family: Georgia, serif; font-size: 26px; font-weight: 400; letter-spacing: -.035em; }
.section-heading h3 { margin: 7px 0 0; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.date-stamp { color: #547178; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.thread-list { display: grid; gap: 8px; }
.thread-card { padding: 20px; color: var(--paper); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; text-align: left; transition: .2s ease; }
.thread-card:hover, .card-tile:hover { border-color: rgba(185, 242, 138, .4); background: var(--panel-light); transform: translateY(-2px); }
.thread-top, .thread-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.thread-kind { color: var(--coral); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.thread-card h3 { margin: 17px 0 8px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.thread-card p { max-width: 620px; margin-bottom: 22px; color: var(--paper-dim); font-size: 13px; line-height: 1.55; }
.thread-foot strong { color: var(--mint); font-size: 12px; font-weight: 800; }
.thread-foot strong span { padding-left: 5px; font-size: 16px; }
.forum-rail { display: grid; align-content: start; gap: 26px; }
.rail-block { padding: 20px; background: #142b31; border: 1px solid var(--line); border-radius: 9px; }
.rail-list, .change-list, .pending-list { display: grid; gap: 0; margin-top: 14px; }
.rail-item, .change-item, .pending-item { display: flex; gap: 11px; width: 100%; padding: 13px 0; color: var(--paper); background: none; border: 0; border-top: 1px solid var(--line); text-align: left; }
.rail-item:first-child, .change-item:first-child, .pending-item:first-child { border-top: 0; }
.rail-item:hover strong, .change-item:hover strong, .pending-item:hover strong { color: var(--mint); }
.rail-index { color: var(--mint); font-family: Georgia, serif; font-size: 19px; }
.rail-item strong, .rail-item small, .change-item strong, .change-item small, .pending-item strong, .pending-item small { display: block; }
.rail-item strong, .change-item strong, .pending-item strong { font-size: 12px; }
.rail-item small, .change-item small, .pending-item small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.change-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 3px; background: var(--mint); border-radius: 50%; }
.change-dot.balance { background: var(--coral); }
.change-dot.artwork { background: #ff8fba; }
.change-dot.content { background: var(--yellow); }
.pending-item { display: block; }

.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 34px; }
.page-intro p { max-width: 580px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.catalog-total { display: flex; align-items: end; gap: 8px; padding-bottom: 3px; color: var(--muted); font-size: 12px; }
.catalog-total strong { color: var(--mint); font-family: Georgia, serif; font-size: 31px; font-weight: 400; }
.library-tools { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 150px; align-items: end; gap: 10px; margin-bottom: 14px; }
.library-tools label:not(.search-box) { display: grid; gap: 7px; }
.search-box { position: relative; display: block; }
.search-box span { position: absolute; top: 11px; left: 13px; color: var(--mint); font-size: 17px; }
.search-box input { width: 100%; padding-left: 35px; }
.library-summary { margin: 15px 0; color: var(--muted); font-size: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.card-tile { min-width: 0; padding: 0; overflow: hidden; color: var(--paper); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; text-align: left; transition: .2s ease; }
.card-tile-art { position: relative; display: grid; place-items: center; height: 145px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #476d69, #1b3d43 65%, #132a30); }
.card-tile-art img { width: 100%; height: 100%; object-fit: cover; }
.card-placeholder { position: absolute; color: rgba(185, 242, 138, .45); font-family: Georgia, serif; font-size: 58px; }
.card-tile-art img + .card-placeholder { display: none; }
.card-cost, .large-card-art b { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 27px; height: 27px; color: var(--white); background: var(--coral); border-radius: 50%; font-size: 11px; font-weight: 900; }
.card-tile-copy { padding: 13px; }
.card-tile-copy strong, .card-tile-copy span, .card-tile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-tile-copy strong { font-family: Georgia, serif; font-size: 16px; font-weight: 400; }
.card-tile-copy span { margin-top: 5px; color: var(--mint); font-size: 9px; text-transform: uppercase; }
.card-tile-copy small { margin-top: 10px; color: var(--muted); font-size: 10px; }
.card-detail { padding-top: 4px; }
.back-link { padding: 0; margin-bottom: 22px; }
.card-detail-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 35px; padding: 28px; background: linear-gradient(125deg, #28474b, #173137); border: 1px solid rgba(185, 242, 138, .16); border-radius: 11px; }
.large-card-art { position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #58756d, #1a3b41 62%, #11262c); border-radius: 8px; }
.large-card-art img { width: 100%; height: 100%; object-fit: cover; }
.large-card-art span { position: absolute; color: rgba(185, 242, 138, .45); font-family: Georgia, serif; font-size: 90px; }
.large-card-art img + span { display: none; }
.large-card-art b { top: 15px; left: 15px; }
.card-detail-copy { padding: 19px 0; }
.card-detail-copy h2 { margin: 13px 0 17px; font-family: Georgia, serif; font-size: 40px; font-weight: 400; letter-spacing: -.05em; }
.detail-stat-row { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; text-transform: uppercase; }
.detail-stat-row strong { color: var(--mint); font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.effect-text { margin: 24px 0; color: var(--paper-dim); font-size: 15px; line-height: 1.65; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row span { padding: 5px 7px; color: var(--mint); background: rgba(185, 242, 138, .08); border-radius: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.detail-meta { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.discussion-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; margin-top: 34px; }
.comment-list { display: grid; gap: 7px; }
.comment-card { display: flex; gap: 12px; padding: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; }
.comment-card-body { flex: 1; min-width: 0; }
.comment-card-body > div { display: flex; justify-content: space-between; gap: 12px; }
.comment-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: var(--ink-deep); background: var(--yellow); border-radius: 50%; font-size: 13px; font-weight: 900; overflow: hidden; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comment-card strong { font-size: 12px; }
.comment-card small { color: var(--muted); font-size: 11px; }
.comment-card p { margin: 9px 0 0; color: var(--paper-dim); font-size: 13px; line-height: 1.5; }
.comment-meta { display: flex; align-items: center; gap: 9px; }
.comment-controls { display: inline-flex; gap: 7px; }
.comment-controls button { padding: 0; color: #89a8b9; background: none; border: 0; font: inherit; font-size: 10px; cursor: pointer; }
.comment-controls button:hover { color: #b7efff; }
.comment-controls button:disabled { opacity: .45; cursor: wait; }
.comment-edit-form { display: grid; gap: 7px; margin-top: 9px; }
.comment-edit-form textarea { width: 100%; min-height: 72px; resize: vertical; color: var(--paper); background: rgba(7, 17, 27, .72); border: 1px solid rgba(142, 216, 234, .28); border-radius: 4px; padding: 9px; font: inherit; line-height: 1.45; }
.comment-edit-form > span { display: flex; gap: 6px; }
.comment-edit-form .button { min-height: 27px; width: auto; padding: 0 9px; font-size: 10px; }
.system-comment { border-left: 2px solid var(--yellow); }
.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form input { min-width: 0; flex: 1; }
.detail-history { margin-top: 14px; }
.history-item { padding: 12px 0; border-top: 1px solid var(--line); }
.history-item strong, .history-item small { display: block; }
.history-item strong { font-size: 12px; }
.history-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }

.sound-intro h1 { margin: 7px 0 0; font-family: Georgia, serif; font-size: clamp(35px, 5vw, 58px); font-weight: 400; letter-spacing: -.05em; }
.sound-category { max-width: 900px; overflow: hidden; background: linear-gradient(135deg, #17343a, #12282e); border: 1px solid rgba(185, 242, 138, .15); border-radius: 11px; box-shadow: var(--shadow); }
.sound-category > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px 25px; border-bottom: 1px solid var(--line); }
.sound-category > header h2 { margin: 7px 0 0; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.sound-category > header strong { color: var(--mint); font-size: 10px; letter-spacing: .13em; }
.sound-track { display: grid; grid-template-columns: 42px minmax(150px, 1fr) minmax(280px, 390px); align-items: center; gap: 18px; padding: 20px 25px; }
.sound-track-index { color: var(--coral); font-family: Georgia, serif; font-size: 22px; }
.sound-track-copy h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.sound-track-copy p { margin: 5px 0 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.sound-player { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 11px; }
.sound-play-button { min-height: 36px; color: var(--ink-deep); background: var(--mint); border: 1px solid var(--mint); border-radius: 999px; font-size: 12px; font-weight: 900; }
.sound-play-button:hover { background: #d3ffad; }
.sound-play-button[aria-pressed="true"] { color: var(--paper); background: rgba(255, 255, 255, .07); border-color: rgba(185, 242, 138, .35); }
.sound-player-status { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.presentation-contribution { display: flex; max-width: 900px; align-items: center; justify-content: space-between; gap: 20px; margin: 18px 0; padding: 14px 17px; background: rgba(185, 242, 138, .045); border: 1px solid rgba(185, 242, 138, .14); border-radius: 9px; }
.presentation-contribution p { max-width: 700px; margin: 5px 0 0; color: var(--paper-dim); font-size: 12.5px; line-height: 1.55; }
.presentation-contribution code, .presentation-batch code { color: var(--mint); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.presentation-contribution .release-badge { flex: 0 0 auto; }
.presentation-batches { max-width: 900px; margin-top: 24px; }
.presentation-batches > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.presentation-batches > header h2 { margin: 6px 0 0; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.presentation-batches > header > strong { color: var(--mint); font-size: 10px; letter-spacing: .13em; }
.presentation-state { padding: 24px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 9px; font-size: 13px; text-align: center; }
.presentation-state .text-button { margin-left: 6px; }
.presentation-batch-list { display: grid; gap: 12px; }
.presentation-batch { overflow: hidden; background: linear-gradient(135deg, #17343a, #12282e); border: 1px solid var(--line); border-radius: 10px; }
.presentation-batch > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.presentation-batch > header h3 { margin: 8px 0 4px; font-size: 15px; font-weight: 750; overflow-wrap: anywhere; }
.presentation-batch > header p { margin: 0; color: var(--muted); font-size: 11px; }
.presentation-batch-status { display: inline-block; padding: 3px 7px; color: var(--yellow); background: rgba(245, 201, 106, .1); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.presentation-batch-status.status-published, .presentation-batch-status.status-approved { color: var(--mint); background: rgba(185, 242, 138, .1); }
.presentation-batch-status.status-rejected, .presentation-batch-status.status-withdrawn { color: #ffc1b7; background: rgba(255, 115, 93, .1); }
.presentation-cue-diff { display: grid; gap: 1px; margin-top: 6px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 5px; }
.presentation-cue-diff-head, .presentation-cue-diff-row { display: grid; grid-template-columns: 28px repeat(2, minmax(0, 1fr)); gap: 1px; min-width: 0; background: var(--line); }
.presentation-cue-diff-head > *, .presentation-cue-diff-row > * { min-width: 0; margin: 0; padding: 6px 8px; background: rgba(8, 23, 27, .88); }
.presentation-cue-diff-head b { color: var(--muted); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.presentation-cue-diff-row > b { color: var(--muted); font-size: 9px; text-align: center; }
.presentation-cue-diff code { color: var(--paper-dim); font-size: 9.5px; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
.sound-cue-diff-properties { display: flex; flex-wrap: wrap; align-content: start; gap: 4px; }
.sound-cue-diff-properties span { display: inline-flex; gap: 4px; padding: 2px 5px; background: rgba(255, 255, 255, .035); border-radius: 3px; }
.sound-cue-diff-properties span.changed { color: var(--paper); background: rgba(245, 201, 106, .14); outline: 1px solid rgba(245, 201, 106, .3); }
.sound-cue-diff-properties b { color: var(--muted); font-size: 7.5px; letter-spacing: .05em; text-transform: uppercase; }
.sound-cue-diff-empty { color: var(--muted) !important; font-style: italic; }
.presentation-revision { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.presentation-note { margin: 0; padding: 13px 19px; color: var(--paper-dim); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.presentation-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 19px; }
.presentation-summary-grid h4 { margin: 0 0 8px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.presentation-card-list, .presentation-asset-list { display: grid; gap: 7px; }
.presentation-card-summary, .presentation-asset { min-width: 0; padding: 10px 11px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 7px; }
.presentation-card-summary { display: grid; gap: 5px; }
.presentation-domain { display: grid; gap: 5px; min-width: 0; }
.presentation-item-select { display: flex; width: fit-content; align-items: center; gap: 7px; color: var(--mint); font-size: 10px; font-weight: 850; }
.presentation-item-select input { margin: 0; accent-color: var(--mint); }
.presentation-item-outcome { width: fit-content; padding: 2px 6px; border-radius: 999px; font-size: 8px !important; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.presentation-item-outcome.outcome-published { color: var(--mint); background: rgba(185, 242, 138, .1); }
.presentation-item-outcome.outcome-declined { color: #ffc1b7; background: rgba(255, 115, 93, .1); }
.presentation-card-summary > a, .presentation-card-summary > strong, .presentation-asset strong { color: var(--paper); overflow-wrap: anywhere; font-size: 12px; font-weight: 800; }
.presentation-card-summary > a { width: fit-content; text-decoration: none; }
.presentation-card-summary > a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.presentation-card-summary span, .presentation-asset span { color: var(--paper-dim); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.presentation-card-summary b { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.presentation-vfx-diff { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 7px; }
.presentation-vfx-diff code { min-width: 0; color: var(--mint); font-size: 10px; overflow-wrap: anywhere; }
.presentation-vfx-diff > span { color: var(--muted); }
.presentation-assets { padding-top: 12px; border-top: 1px solid var(--line); }
.presentation-asset-warning { margin: -2px 0 9px; color: var(--yellow); font-size: 10px; line-height: 1.45; }
.presentation-asset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); align-items: center; gap: 10px; }
.presentation-asset > div { display: grid; gap: 3px; min-width: 0; }
.presentation-asset audio { width: 100%; height: 34px; color-scheme: dark; }
.presentation-empty-note { margin: 0; color: var(--muted); font-size: 11px; }
.presentation-review-record, .presentation-provenance, .presentation-owner-actions, .presentation-review { margin: 0 19px 16px; }
.presentation-review-record { padding: 11px 13px; background: rgba(255, 255, 255, .03); border-left: 2px solid var(--yellow); }
.presentation-review-record strong { font-size: 11px; }
.presentation-review-record p { margin: 5px 0 0; color: var(--paper-dim); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.presentation-provenance { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; overflow-wrap: anywhere; }
.presentation-provenance span { padding: 0 3px; color: var(--mint); }
.presentation-owner-actions { display: flex; justify-content: flex-end; }
.presentation-owner-actions .button { min-height: 34px; }
.presentation-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 14px; padding: 14px; background: rgba(245, 201, 106, .045); border: 1px solid rgba(245, 201, 106, .16); border-radius: 8px; }
.presentation-review > p { grid-column: 1 / -1; margin: 0; color: var(--yellow); font-size: 11px; font-weight: 800; }
.presentation-selection-toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.presentation-selection-toolbar strong { margin-left: auto; color: var(--paper-dim); font-size: 10px; }
.presentation-review label { display: grid; gap: 6px; color: var(--paper-dim); font-size: 11px; font-weight: 800; }
.presentation-review textarea { width: 100%; resize: vertical; }
.presentation-review > div { display: flex; gap: 7px; }
.presentation-review .button { min-height: 40px; white-space: nowrap; }
.presentation-reject { color: #ffc1b7; border-color: rgba(255, 115, 93, .3); }
.presentation-publication-progress { display: flex; align-items: center; gap: 11px; margin: 0 19px 16px; padding: 12px 14px; background: rgba(185, 242, 138, .065); border: 1px solid rgba(185, 242, 138, .2); border-radius: 8px; }
.presentation-publication-progress > div { display: grid; gap: 3px; }
.presentation-publication-progress strong { color: var(--mint); font-size: 11px; }
.presentation-publication-progress p { margin: 0; color: var(--muted); font-size: 10px; }
.sound-card-indexes { display: grid; gap: 18px; width: min(1180px, 100%); margin-top: 24px; }
.released-card-sounds { max-width: 1180px; }
.released-card-sounds > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.released-card-sounds > header h2 { margin: 6px 0 0; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.released-card-sounds > header p { max-width: 700px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.released-card-sounds > header > strong { color: var(--mint); font-size: 10px; letter-spacing: .13em; }
.sound-alpha-index { column-width: 235px; column-gap: 24px; padding: 18px 20px; background: rgba(12, 29, 42, .7); border: 1px solid var(--line); border-radius: 8px; }
.sound-index-group { display: inline-block; width: 100%; margin: 0 0 18px; break-inside: avoid; }
.sound-index-group h3 { margin: 0 0 5px; padding-bottom: 4px; color: var(--mint); border-bottom: 1px solid rgba(185, 242, 138, .25); font-family: Georgia, serif; font-size: 18px; font-weight: 400; }
.sound-index-group ul { margin: 0; padding: 0; list-style: none; }
.sound-index-group li + li { border-top: 1px solid rgba(151, 181, 205, .08); }
.sound-index-group .sound-index-card { display: grid; gap: 2px; padding: 6px 3px 3px; color: var(--paper); text-decoration: none; }
.sound-index-group .sound-index-card:hover strong { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.sound-index-group strong { font-size: 12px; font-weight: 700; }
.sound-index-group span { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.sound-index-assets { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 3px 6px; }
.sound-index-group .sound-index-assets a { min-width: 0; padding: 2px 5px; color: rgba(142, 216, 234, .75); background: rgba(142, 216, 234, .045); border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; overflow-wrap: anywhere; text-decoration: none; }
.sound-index-group .sound-index-assets a:hover { color: var(--mint); background: rgba(185, 242, 138, .08); }
.missing-sounds .sound-alpha-index { border-left: 3px solid rgba(255, 115, 93, .52); }
.available-sounds .sound-alpha-index { border-left: 3px solid rgba(185, 242, 138, .52); }
.released-card-sound { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.released-card-sound > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.released-card-sound > header div { display: grid; gap: 3px; }
.released-card-sound > header span, .released-card-sound > header small { color: var(--muted); font-size: 10px; }
.released-card-sound > header aside { display: flex; align-items: center; gap: 9px; }
.released-card-sound > div, .detail-presentation > div { display: grid; gap: 12px; }
.sound-cue-context-group { display: grid; gap: 7px; }
.sound-cue-context-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; background: rgba(142, 216, 234, .06); border-left: 3px solid #8ed8ea; border-radius: 4px; }
.sound-cue-context-group > header span { color: #a9eafa; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sound-cue-context-group > header strong { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.sound-cue-context-group.trigger-died > header { background: rgba(177, 119, 255, .07); border-left-color: #b177ff; }
.sound-cue-context-group.trigger-died > header span { color: #c9a5ff; }
.sound-cue-context-group.trigger-attacking > header, .sound-cue-context-group.trigger-killing-an-enemy > header { background: rgba(255, 115, 93, .07); border-left-color: #ff735d; }
.sound-cue-context-group.trigger-attacking > header span, .sound-cue-context-group.trigger-killing-an-enemy > header span { color: #ffad9d; }
.sound-cue-context-group.trigger-taking-damage > header { background: rgba(245, 201, 106, .07); border-left-color: #f5c96a; }
.sound-cue-context-group.trigger-taking-damage > header span { color: #f8d993; }
.sound-cue-context-group.trigger-clicked > header { background: rgba(185, 242, 138, .07); border-left-color: #b9f28a; }
.sound-cue-context-group.trigger-clicked > header span { color: #d3ffad; }
.sound-cue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 7px; }
.sound-cue-chain { display: grid; gap: 7px; padding: 9px; background: rgba(245, 201, 106, .035); border: 1px solid rgba(245, 201, 106, .15); border-radius: 7px; }
.sound-cue-chain > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sound-cue-chain > header span { color: #f5c96a; font-size: 8px; font-weight: 950; letter-spacing: .11em; }
.sound-cue-chain > header strong { color: rgba(245, 217, 158, .6); font-size: 9px; font-weight: 600; }
.sound-cue-chain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px 38px; padding: 3px 6px 5px; counter-reset: cue-chain; }
.sound-cue-chain-grid .released-card-cue { position: relative; grid-row: var(--sound-chain-row); grid-column: var(--sound-chain-column); border-color: rgba(245, 201, 106, .24); counter-increment: cue-chain; }
.sound-cue-chain-grid .released-card-cue::before { position: absolute; z-index: 2; top: -8px; right: 9px; content: counter(cue-chain, decimal-leading-zero); padding: 2px 5px; color: rgba(245, 217, 158, .72); background: #13202a; border: 1px solid rgba(245, 201, 106, .22); border-radius: 999px; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.sound-cue-chain-grid .released-card-cue:not(:last-child)::after { position: absolute; z-index: 1; content: ""; pointer-events: none; }
.sound-cue-chain-grid .released-card-cue:nth-child(4n + 1):not(:last-child)::after { top: 50%; left: calc(100% + 5px); width: 28px; content: "→"; color: #f5c96a; text-align: center; transform: translateY(-50%); }
.sound-cue-chain-grid .released-card-cue:nth-child(4n + 3):not(:last-child)::after { top: 50%; right: calc(100% + 5px); width: 28px; content: "←"; color: #f5c96a; text-align: center; transform: translateY(-50%); }
.sound-cue-chain-grid .released-card-cue:nth-child(2n):not(:last-child)::after { top: calc(100% + 5px); left: 50%; height: 12px; content: "↓"; color: #f5c96a; line-height: 12px; transform: translateX(-50%); }
.released-card-cue > header > div { display: grid; gap: 3px; min-width: 0; }
.sound-cue-chain-step { width: fit-content; padding: 2px 5px; color: #271c08; background: #f5c96a; border-radius: 3px; font-size: 7px; font-weight: 950; letter-spacing: .09em; }
.released-card-cue { display: grid; align-content: start; gap: 8px; padding: 11px 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(151, 181, 205, .08); border-radius: 7px; }
.released-card-cue.cue-context-otherwise { border-color: rgba(245, 201, 106, .2); background: rgba(245, 201, 106, .035); }
.released-card-cue:not(.cue-context-always):not(.cue-context-otherwise) { border-color: rgba(142, 216, 234, .17); background: rgba(142, 216, 234, .025); }
.released-card-cue > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.released-card-cue strong { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.sound-asset-link { color: inherit; text-decoration-color: rgba(142, 216, 234, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sound-asset-link:hover { color: var(--mint); text-decoration-color: currentColor; }
.released-card-cue p { margin: 0; color: var(--muted); font-size: 9.5px; overflow-wrap: anywhere; }
.released-card-cue p b { margin-right: 5px; color: var(--paper-dim); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; }
.sound-cue-edit { flex: 0 0 auto; }
.released-card-cue audio { width: 100%; height: 34px; color-scheme: dark; }
.sound-cue-properties { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.sound-cue-properties div { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 6px; background: rgba(142, 216, 234, .06); border: 1px solid rgba(142, 216, 234, .12); border-radius: 999px; cursor: help; }
.sound-cue-properties .property-volume { background: rgba(185, 242, 138, .055); border-color: rgba(185, 242, 138, .14); }
.sound-cue-properties .property-chance { background: rgba(245, 201, 106, .055); border-color: rgba(245, 201, 106, .14); }
.sound-cue-properties .property-delay, .sound-cue-properties .property-no-repeat { background: rgba(177, 119, 255, .055); border-color: rgba(177, 119, 255, .14); }
.sound-cue-properties dt { color: var(--muted); font-size: 7.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.sound-cue-properties dd { margin: 0; color: var(--paper-dim); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8.5px; }
@media (max-width: 700px) {
  .sound-cue-grid { grid-template-columns: 1fr; }
  .sound-cue-chain-grid { grid-template-columns: 1fr; gap: 20px; padding-inline: 3px; }
  .sound-cue-chain-grid .released-card-cue { grid-row: auto !important; grid-column: 1 !important; }
  .sound-cue-chain-grid .released-card-cue:not(:last-child)::after { top: calc(100% + 5px) !important; right: auto !important; left: 50% !important; width: 20px !important; height: 12px !important; content: "↓" !important; border: 0 !important; border-radius: 0 !important; line-height: 12px; text-align: center; transform: translateX(-50%) !important; }
  .presentation-cue-diff-head, .presentation-cue-diff-row { grid-template-columns: 24px repeat(2, minmax(0, 1fr)); }
}
.sound-unavailable { padding: 9px; background: rgba(255, 115, 93, .04); border: 1px dashed rgba(255, 115, 93, .2); border-radius: 5px; }
.sound-shared-usage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 9px; padding: 8px 9px; background: rgba(185, 242, 138, .045); border-left: 2px solid rgba(185, 242, 138, .45); }
.sound-shared-usage b { color: var(--mint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sound-shared-usage span, .sound-shared-usage a { color: var(--paper-dim); font-size: 10px; line-height: 1.4; }
.sound-shared-usage a:hover { color: var(--mint); }
.sound-cue-editor-dialog { z-index: 78; padding: 16px; background: rgba(3, 6, 11, .91); }
.modal.sound-cue-editor-modal { display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(1220px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); padding: 0; overflow: hidden; color: #e7eff3; background: #101b27; border-color: rgba(142, 216, 234, .23); border-radius: 10px; }
.sound-cue-editor-modal > .modal-close { z-index: 4; top: 13px; right: 16px; }
.modal.sound-cue-editor-modal .button { width: auto; }
.modal.sound-cue-editor-modal label { margin: 0; }
.modal.sound-cue-editor-modal input { width: 100%; margin: 0; }
.sound-cue-editor-rail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding: 24px 13px 15px; background: #08131f; border-right: 1px solid rgba(151, 181, 205, .14); }
.sound-cue-editor-rail > header { display: grid; gap: 5px; padding: 0 8px 20px; }
.sound-cue-editor-rail > header strong { margin-top: 4px; color: #f1f6f8; font-size: 16px; overflow-wrap: anywhere; }
.sound-cue-editor-rail > header small { color: rgba(231, 239, 244, .42); font-size: 11px; }
.sound-cue-editor-rail nav { display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.sound-cue-editor-rail nav button { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 3px 9px; min-width: 0; padding: 11px 10px; color: rgba(231, 239, 244, .62); background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: left; }
.sound-cue-editor-rail nav button:hover, .sound-cue-editor-rail nav button.active { color: #f4f8fa; background: rgba(142, 216, 234, .08); border-color: rgba(142, 216, 234, .18); }
.sound-cue-editor-rail nav button.active { box-shadow: inset 3px 0 #8ed8ea; }
.sound-cue-editor-rail nav b, .sound-cue-editor-rail nav small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-cue-editor-rail nav b { font-size: 12px; }
.sound-cue-editor-rail nav b em { margin-left: 6px; padding: 2px 4px; color: #271c08; background: #f5c96a; border-radius: 3px; font-size: 7px; font-style: normal; letter-spacing: .07em; }
.sound-cue-editor-rail nav button.ordered { border-left-color: rgba(245, 201, 106, .35); }
.sound-cue-editor-rail nav small { grid-column: 2; color: rgba(231, 239, 244, .38); font-size: 10px; }
.sound-editor-event-dot { width: 9px; height: 9px; margin-top: 2px; background: #8ed8ea; border-radius: 50%; box-shadow: 0 0 0 3px rgba(142, 216, 234, .08); }
.sound-editor-event-dot.trigger-died { background: #b177ff; }
.sound-editor-event-dot.trigger-attacking, .sound-editor-event-dot.trigger-killing-an-enemy { background: #ff735d; }
.sound-editor-event-dot.trigger-taking-damage { background: #f5c96a; }
.sound-editor-event-dot.trigger-clicked { background: #b9f28a; }
.sound-editor-add { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 10px; color: #b9f28a; background: rgba(185, 242, 138, .04); border: 1px dashed rgba(185, 242, 138, .25); border-radius: 6px; font-size: 11px; font-weight: 850; }
.sound-editor-add:hover { color: #e5ffd1; background: rgba(185, 242, 138, .09); }
.sound-cue-editor-panel { min-width: 0; padding: clamp(24px, 3vw, 40px); overflow-y: auto; background: linear-gradient(145deg, rgba(14, 31, 44, .98), rgba(8, 19, 30, .99)); }
.sound-editor-head { margin-bottom: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(151, 181, 205, .13); }
.sound-editor-head > div { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 15px; }
.sound-editor-head-icon { display: grid; width: 50px; height: 50px; place-items: center; color: #10202a; background: linear-gradient(145deg, #8ed8ea, #b9f28a); border-radius: 13px; font-family: Georgia, serif; font-size: 27px; font-weight: 800; }
.sound-cue-editor-modal .sound-editor-head h2 { margin: 4px 0 5px; color: #f2f7f9; font-family: inherit; font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
.sound-cue-editor-modal .sound-editor-head p { max-width: 790px; margin: 0; color: rgba(231, 239, 244, .57); font-size: 13px; line-height: 1.5; }
.sound-cue-editor-panel form { display: grid; gap: 10px; }
.sound-editor-sequence { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px; color: rgba(231, 239, 244, .42); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.sound-editor-sequence div { display: flex; gap: 5px; }
.sound-editor-sequence button { padding: 5px 7px; color: #8ed8ea; background: rgba(142, 216, 234, .04); border: 1px solid rgba(142, 216, 234, .15); border-radius: 4px; font-size: 9px; font-weight: 800; }
.sound-editor-sequence button:disabled { opacity: .3; }
.sound-editor-chain-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 11px; color: rgba(245, 217, 158, .65); background: rgba(245, 201, 106, .055); border-left: 3px solid #f5c96a; font-size: 10px; }
.sound-editor-chain-notice strong { color: #f8d993; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.sound-editor-section { padding: 18px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-radius: 7px; }
.sound-editor-section > header { margin-bottom: 13px; }
.sound-editor-section > header h3 { margin: 5px 0 0; color: #eef4f7; font-size: 17px; font-weight: 620; }
.sound-editor-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sound-editor-event-grid button { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 3px 8px; padding: 11px; color: rgba(231, 239, 244, .58); background: rgba(255, 255, 255, .02); border: 1px solid rgba(151, 181, 205, .11); border-radius: 6px; text-align: left; }
.sound-editor-event-grid button:hover, .sound-editor-event-grid button.active { color: #f3f8fa; background: rgba(142, 216, 234, .08); border-color: rgba(142, 216, 234, .25); }
.sound-editor-event-grid button.active { box-shadow: inset 0 -2px #8ed8ea; }
.sound-editor-event-grid b { font-size: 11px; }
.sound-editor-event-grid small { grid-column: 2; color: rgba(231, 239, 244, .38); font-size: 9px; line-height: 1.3; }
.sound-editor-advanced-events { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(151, 181, 205, .11); }
.sound-editor-event-grid > .sound-editor-event-grid { display: contents; }
.sound-editor-event-grid > .sound-editor-advanced-events { grid-column: 1 / -1; }
.sound-editor-advanced-events summary { cursor: pointer; color: rgba(231, 239, 244, .72); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sound-editor-advanced-events > p { margin: 7px 0 10px; color: rgba(231, 239, 244, .45); font-size: 10px; }
.sound-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.sound-editor-fields label, .sound-editor-repeat label { display: grid; gap: 6px; color: rgba(231, 239, 244, .54); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.sound-editor-fields label.field-wide { grid-column: 1 / -1; }
.sound-editor-fields label > small { color: rgba(231, 239, 244, .38); font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.sound-editor-fields input, .sound-editor-fields select, .sound-editor-repeat input { min-height: 41px; font-size: 12px; }
.sound-editor-context .sound-editor-fields { grid-template-columns: minmax(220px, 1fr) minmax(130px, .5fr) 88px minmax(145px, .58fr); align-items: end; }
.sound-editor-context .sound-editor-fields .field-wide { grid-column: auto; }
.sound-editor-context [data-sound-condition="threshold"] { max-width: 88px; }
.sound-editor-context [data-sound-condition="tag"] { max-width: 180px; }
.sound-editor-sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sound-editor-sliders label { display: grid; gap: 9px; padding: 11px; background: rgba(5, 16, 26, .55); border-radius: 6px; }
.sound-editor-sliders label > span { display: flex; justify-content: space-between; gap: 9px; color: rgba(231, 239, 244, .55); font-size: 9px; letter-spacing: .08em; }
.sound-editor-sliders output { color: #d3ffad; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 800; }
.sound-editor-sliders input[type="range"] { min-height: 20px; accent-color: #b9f28a; }
.modal.sound-cue-editor-modal .sound-editor-delay-value { width: 74px; min-height: 30px; justify-self: end; padding: 4px 6px; font-size: 10px; }
.modal.sound-cue-editor-modal .sound-editor-precise-value { width: 78px; min-height: 30px; justify-self: end; padding: 4px 6px; font-size: 10px; }
.sound-editor-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sound-editor-checks label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 11px; background: rgba(5, 16, 26, .48); border: 1px solid rgba(151, 181, 205, .09); border-radius: 6px; }
.sound-editor-checks input { grid-column: 2; grid-row: 1; width: auto; margin: 0; accent-color: #b9f28a; }
.sound-editor-checks span { display: grid; grid-column: 1; grid-row: 1; gap: 3px; }
.sound-editor-checks b { color: #e7eff3; font-size: 11px; }
.sound-editor-checks small { color: rgba(231, 239, 244, .4); font-size: 9.5px; line-height: 1.4; }
.sound-editor-repeat { display: grid; grid-template-columns: minmax(90px, 150px) auto minmax(90px, 150px); align-items: end; gap: 9px; margin-top: 10px; }
.sound-editor-repeat > span { padding-bottom: 12px; color: rgba(231, 239, 244, .4); font-size: 10px; }
.sound-editor-preview { display: grid; gap: 6px; padding: 13px 15px; background: rgba(185, 242, 138, .045); border-left: 3px solid #b9f28a; }
.sound-editor-preview > span { color: #b9f28a; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.sound-editor-preview code { color: #edf8e5; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.sound-editor-preview small { color: rgba(231, 239, 244, .38); font-size: 9.5px; }
.sound-editor-presentation { margin-top: 3px; }
.sound-editor-actions { position: sticky; bottom: -40px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin: 5px -40px -40px; padding: 14px 40px; background: rgba(8, 19, 30, .96); border-top: 1px solid rgba(151, 181, 205, .13); backdrop-filter: blur(8px); }
.sound-editor-actions .form-status { min-width: 180px; flex: 1; margin: 0; color: #ffad9d; }
.sound-editor-actions .button { min-height: 39px; }
.sound-editor-remove { margin-right: auto; color: #ffad9d; background: rgba(255, 115, 93, .04); border-color: rgba(255, 115, 93, .2); }
.sound-editor-empty { display: grid; justify-items: center; gap: 8px; padding: 45px 20px; color: rgba(231, 239, 244, .48); border: 1px dashed rgba(151, 181, 205, .17); border-radius: 7px; text-align: center; }
.sound-editor-empty strong { color: #eef4f7; font-size: 17px; }
.sound-editor-empty p { max-width: 530px; margin: 0 0 8px; font-size: 12px; }
.sound-editor-upload { display: grid; gap: 11px; margin-top: 15px; padding-top: 16px; border-top: 1px solid rgba(151, 181, 205, .12); }
.sound-editor-upload > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.sound-editor-upload h4 { margin: 4px 0 4px; color: #eef4f7; font-size: 14px; }
.sound-cue-editor-modal .sound-editor-upload p { max-width: 660px; margin: 0; color: rgba(231, 239, 244, .45); font-size: 10.5px; line-height: 1.45; }
.sound-upload-placement { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sound-upload-placement label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; background: rgba(5, 16, 26, .48); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.sound-upload-placement label:has(input:checked) { background: rgba(185, 242, 138, .055); border-color: rgba(185, 242, 138, .24); }
.sound-upload-placement input { width: auto !important; margin-top: 2px !important; accent-color: #b9f28a; }
.sound-upload-placement span { display: grid; gap: 3px; }
.sound-upload-placement b { color: #e7eff3; font-size: 10.5px; }
.sound-upload-placement small { color: rgba(231, 239, 244, .4); font-size: 9px; line-height: 1.35; }
.sound-upload-placement code, .sound-upload-destination code, .sound-upload-list code { color: #b9f28a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.sound-upload-custom label { display: grid; max-width: 430px; gap: 5px; color: rgba(231, 239, 244, .52); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.sound-upload-custom small { color: rgba(231, 239, 244, .38); font-size: 9px; font-weight: 500; letter-spacing: 0; }
.sound-upload-destination { display: grid; gap: 5px; padding: 9px 11px; background: rgba(185, 242, 138, .035); border-left: 2px solid rgba(185, 242, 138, .45); }
.sound-upload-destination span { color: #b9f28a; font-size: 8px; font-weight: 950; letter-spacing: .1em; }
.sound-upload-destination code { font-size: 10px; overflow-wrap: anywhere; }
.sound-upload-list { display: grid; gap: 5px; }
.sound-upload-list article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: rgba(142, 216, 234, .04); border: 1px solid rgba(142, 216, 234, .12); border-radius: 5px; }
.sound-upload-list article > div { display: grid; gap: 3px; min-width: 0; }
.sound-upload-list strong, .sound-upload-list small { overflow-wrap: anywhere; }
.sound-upload-list strong { font-size: 10.5px; }
.sound-upload-list small { color: rgba(231, 239, 244, .4); font-size: 9px; }
.sound-upload-list button { padding: 3px 6px; color: #ffad9d; background: rgba(255, 115, 93, .05); border: 1px solid rgba(255, 115, 93, .17); border-radius: 4px; }
@media (max-width: 860px) {
  .sound-cue-editor-dialog { padding: 6px; }
  .modal.sound-cue-editor-modal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .sound-cue-editor-rail { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 8px; padding: 47px 8px 8px; border-right: 0; border-bottom: 1px solid rgba(151, 181, 205, .14); }
  .sound-cue-editor-rail > header { padding: 0; }
  .sound-cue-editor-rail > header .eyebrow, .sound-cue-editor-rail > header small { display: none; }
  .sound-cue-editor-rail > header strong { max-width: 120px; margin: 0; font-size: 12px; }
  .sound-cue-editor-rail nav { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; }
  .sound-cue-editor-rail nav button { flex: 0 0 120px; }
  .sound-editor-add { margin: 0; white-space: nowrap; }
  .sound-cue-editor-panel { padding: 18px 13px; }
  .sound-editor-actions { bottom: -18px; margin: 5px -13px -18px; padding: 11px 13px; }
  .sound-editor-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sound-editor-context .sound-editor-fields { grid-template-columns: minmax(180px, 1fr) minmax(120px, .6fr) 80px; }
  .sound-editor-context [data-sound-condition="tag"] { max-width: none; }
  .sound-upload-placement { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sound-editor-head > div { grid-template-columns: 40px minmax(0, 1fr); }
  .sound-editor-head-icon { width: 40px; height: 40px; font-size: 22px; }
  .sound-cue-editor-modal .sound-editor-head h2 { font-size: 22px; }
  .sound-editor-event-grid, .sound-editor-fields, .sound-editor-sliders, .sound-editor-checks { grid-template-columns: 1fr; }
  .sound-editor-context .sound-editor-fields { grid-template-columns: minmax(0, 1fr) 82px; }
  .sound-editor-context .field-wide, .sound-editor-context [data-sound-condition="tag"] { grid-column: 1 / -1; max-width: none; }
  .sound-editor-upload > header { flex-direction: column; }
  .sound-editor-fields label.field-wide { grid-column: auto; }
  .sound-editor-actions .form-status { flex-basis: 100%; }
  .sound-editor-actions .button { flex: 1; }
  .sound-editor-remove { flex-basis: 100% !important; margin: 0; }
}
.detail-presentation { padding: 14px 17px; background: rgba(12, 21, 32, .78); border: 1px solid rgba(151, 181, 205, .16); border-radius: 7px; }
.detail-presentation-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-vfx { margin: 7px 0 10px; color: var(--paper-dim); font-size: 11px; }

.release-badge { display: inline-block; padding: 5px 7px; color: var(--mint); background: rgba(185, 242, 138, .09); border-radius: 4px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.build-release-summary { padding: 25px; background: linear-gradient(120deg, #28474b, #173137); border: 1px solid rgba(185, 242, 138, .16); border-radius: 9px; }
.build-release-summary h2 { margin: 14px 0 7px; color: var(--paper); font-size: 27px; font-weight: 650; letter-spacing: -.03em; }
.build-release-summary p { margin: 0; color: var(--paper-dim); font-size: 13px; overflow-wrap: anywhere; }
.build-changelog { margin-top: 20px; padding: 20px; background: rgba(10, 24, 36, .7); border: 1px solid rgba(151, 181, 205, .14); border-radius: 8px; }
.build-changelog > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.build-changelog h2 { margin: 6px 0 0; color: var(--paper); font-size: 22px; font-weight: 650; }
.build-change-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.build-change-filters button { padding: 7px 9px; color: rgba(231, 239, 244, .52); background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-radius: 3px; font-size: 10px; font-weight: 850; }
.build-change-filters button:hover, .build-change-filters button.active { color: #0b1b21; background: #b9f28a; border-color: #b9f28a; }
.build-change-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.build-change-card { min-width: 0; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-top: 2px solid #ff9c83; border-radius: 5px; }
.build-change-card.update { border-top-color: #8ed8ea; }
.build-change-card.artwork { border-top-color: #ff8fba; }
.build-change-card > button { display: grid; gap: 7px; width: 100%; height: 100%; padding: 13px; color: var(--paper); background: transparent; border: 0; text-align: left; }
.build-change-card > button:hover { background: rgba(255, 255, 255, .025); }
.build-change-kind { color: #ffad94; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.build-change-card.update .build-change-kind { color: #8ed8ea; }
.build-change-card.artwork .build-change-kind { color: #ff9cc1; }
.build-change-card strong { font-size: 14px; }
.build-change-card p { margin: 0; color: rgba(231, 239, 244, .58); font-size: 11px; line-height: 1.5; }
.build-change-card small { color: rgba(231, 239, 244, .38); font-size: 10px; }
.build-change-empty { display: grid; grid-column: 1 / -1; gap: 6px; padding: 35px 18px; color: rgba(231, 239, 244, .42); border: 1px dashed rgba(151, 181, 205, .16); border-radius: 5px; text-align: center; }
.build-change-empty strong { color: rgba(231, 239, 244, .68); font-size: 13px; }
.build-change-empty span { font-size: 11px; }
.build-training-upload { margin-top: 20px; padding: 20px; background: linear-gradient(135deg, rgba(30, 66, 69, .8), rgba(12, 29, 39, .9)); border: 1px solid rgba(185, 242, 138, .18); border-radius: 8px; }
.build-training-upload > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.build-training-upload h2 { margin: 6px 0 7px; color: var(--paper); font-size: 22px; }
.build-training-upload header p { max-width: 720px; margin: 0; color: var(--paper-dim); font-size: 13px; line-height: 1.5; }
.build-training-upload code { color: var(--mint); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.build-training-controls { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 14px; margin-top: 18px; }
.build-training-controls label { display: grid; gap: 7px; color: var(--paper-dim); font-size: 12px; font-weight: 800; }
.build-training-controls input { width: 100%; }
.build-training-actions { display: flex; gap: 7px; }
.build-training-file { margin-top: 10px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.build-training-progress { height: 8px; margin-top: 15px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(151, 181, 205, .15); border-radius: 999px; }
.build-training-progress i { display: block; width: 0; height: 100%; background: var(--mint); transition: width .12s linear; }
.build-training-status { min-height: 20px; margin: 11px 0 0; color: var(--paper-dim); font-size: 13px; line-height: 1.5; }
.build-training-status.is-valid { color: var(--mint); }
.build-training-status.is-warning { color: var(--yellow); }
.build-training-status.is-error { color: #ffc1b7; }
.feedback-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 12px; }
.feedback-card, .feedback-aside { padding: 25px; background: #142b31; border: 1px solid var(--line); border-radius: 9px; }
.feedback-card label { display: block; margin-bottom: 7px; }
.feedback-card input, .feedback-card textarea { width: 100%; margin-bottom: 17px; }
.feedback-card textarea { resize: vertical; line-height: 1.55; }
.feedback-actions { display: flex; align-items: center; gap: 13px; }
.feedback-actions span { color: var(--mint); font-size: 12px; }
.feedback-aside { align-self: start; }
.feedback-aside ul { display: grid; gap: 14px; margin: 22px 0 0; padding-left: 17px; color: var(--paper-dim); font-size: 13px; line-height: 1.4; }
.feedback-aside li::marker { color: var(--coral); }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 13, 16, .78); backdrop-filter: blur(7px); }
.modal { position: relative; width: min(410px, 100%); padding: 32px; background: #18353b; border: 1px solid rgba(185, 242, 138, .2); border-radius: 12px; box-shadow: var(--shadow); }
.modal h2 { margin: 13px 0 9px; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.modal p { color: var(--paper-dim); font-size: 14px; line-height: 1.55; }
.modal label { display: block; margin: 21px 0 7px; }
.modal input { width: 100%; margin-bottom: 17px; }
.modal .button { width: 100%; }
.profile-logout { margin-top: 10px; }
.modal-close { position: absolute; top: 14px; right: 17px; color: var(--muted); background: none; border: 0; font-size: 25px; }
.modal-foot { margin-top: 21px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.avatar-modal { width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.avatar-modal .search-box { display: grid; gap: 4px; margin: 16px 0 14px; }
.avatar-modal .search-box input { margin-bottom: 0; }
.avatar-modal-head { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.avatar-modal-intro { flex: 1 1 280px; min-width: 0; }
.avatar-modal-intro h2 { margin: 0 0 8px; }
.avatar-modal-intro p { margin: 0; }
.avatar-preview-row { display: flex; flex: 0 0 240px; align-items: center; gap: 12px; padding: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(151, 181, 205, .16); border-radius: 10px; }
.avatar-preview-image { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; color: var(--ink-deep); background: var(--yellow); border-radius: 50%; font-size: 18px; font-weight: 900; overflow: hidden; }
.avatar-preview-image.avatar-image { background: rgba(255, 255, 255, .06); }
.avatar-preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview-copy { min-width: 0; }
.avatar-preview-copy strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-preview-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  .avatar-modal-head { flex-wrap: wrap; }
  .avatar-preview-row { flex-basis: 100%; }
}
.avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: minmax(64px, 1fr); align-content: start; gap: 8px; height: min(58vh, 560px); margin-bottom: 6px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; }
.avatar-pick-tile { position: relative; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: rgba(255, 255, 255, .04); border: 2px solid transparent; border-radius: 9px; cursor: pointer; }
.avatar-pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-pick-tile:hover { border-color: rgba(185, 242, 138, .35); }
.avatar-pick-tile.selected { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(185, 242, 138, .25); }
.avatar-pick-skin-tag { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; color: var(--ink-deep); background: rgba(245, 201, 106, .92); border-radius: 4px; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.avatar-picker-empty { grid-column: 1 / -1; padding: 18px 0; color: var(--muted); font-size: 13px; text-align: center; }
.avatar-picker-actions { display: flex; gap: 10px; }
.avatar-picker-actions .button { width: auto; flex: 1; }
.server-activity { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: min(450px, calc(100vw - 48px)); align-items: center; gap: 10px; padding: 11px 13px; color: var(--paper-dim); background: rgba(11, 29, 34, .96); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.server-activity-dot { width: 9px; height: 9px; background: var(--muted); border-radius: 50%; box-shadow: 0 0 0 4px rgba(120, 144, 149, .09); }
.server-activity-copy { display: grid; min-width: 0; gap: 2px; }
.server-activity-copy strong { overflow: hidden; color: var(--paper); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.server-activity-copy small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.server-activity-meta { display: flex; gap: 6px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.server-activity-meta b { padding: 3px 5px; background: rgba(255, 255, 255, .05); border-radius: 4px; }
.server-activity[data-state="active"] { border-color: rgba(142, 216, 234, .35); }
.server-activity[data-state="active"] .server-activity-dot { background: #8ed8ea; animation: server-activity-pulse 1.2s ease-in-out infinite; }
.server-activity[data-state="success"] { border-color: rgba(185, 242, 138, .3); }
.server-activity[data-state="success"] .server-activity-dot { background: var(--mint); }
.server-activity[data-state="error"] { border-color: rgba(255, 115, 93, .45); }
.server-activity[data-state="error"] .server-activity-dot { background: var(--coral); }
.server-activity[data-state="error"] .server-activity-copy strong { color: #ffc1b7; }
@keyframes server-activity-pulse { 50% { opacity: .35; transform: scale(.72); } }
.toast { position: fixed; z-index: 101; right: 24px; bottom: 100px; max-width: 360px; padding: 13px 16px; color: var(--ink-deep); background: var(--mint); border-radius: 6px; box-shadow: var(--shadow); font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 620px) {
  .server-activity { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
  .toast { right: 14px; bottom: 90px; max-width: calc(100vw - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .server-activity-dot { animation: none !important; }
}

@media (min-width: 781px) and (max-height: 900px) {
  .onboarding-screen { padding-top: 42px; padding-bottom: 42px; }
  .onboarding-copy h1 { font-size: clamp(48px, 5.2vw, 68px); }
  .onboarding-form { margin-top: 24px; }
  .onboarding-note { margin-top: 18px; }
}

@media (max-width: 1050px) {
  .onboarding-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; padding-right: 5vw; padding-left: 5vw; }
  .onboarding-art { min-height: 470px; }
  .main { padding: 0 28px 50px; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .presentation-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .onboarding-screen { display: block; height: auto; min-height: 100svh; padding: 26px 22px 42px; overflow: visible; }
  .onboarding-copy { width: auto; padding-top: 0; transform: none; }
  .brand-large { position: static; margin-bottom: 75px; transform: none; }
  .brand-large .brand-mark { width: 64px; height: 50px; }
  .brand-large .brand-name { font-size: 17px; }
  .brand-large .brand-sub { margin-top: 4px; font-size: 11px; }
  .onboarding-art { display: none; }
  .onboarding-copy h1, .welcome-card h1 { font-size: 52px; }
  .onboarding-copy h1 { white-space: normal; }
  .welcome-release { grid-template-columns: 1fr; }
  .welcome-release > div { min-height: 85px; }
  .shell { display: block; }
  .sidebar { display: block; padding: 17px 18px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { display: inline-flex; min-height: 48px; margin: 0; }
  .sidebar .brand-mark { width: 78px; height: 58px; margin: -5px -27px -5px -12px; }
  .local-pill { float: right; margin: 5px 0 0; }
  .nav { display: flex; gap: 4px; clear: both; margin-top: 18px; overflow-x: auto; }
  .nav-item { flex: 0 0 auto; padding: 9px 10px; }
  .nav-item span { display: none; }
  .sidebar-foot { display: none; }
  .main { padding: 0 17px 42px; }
  .topbar { min-height: 82px; }
  .topbar-title { font-size: 15px; }
  .profile-button { padding-right: 0; }
  .profile-button small, .chevron { display: none; }
  .view { padding-top: 28px; }
  .forum-hero { display: block; padding: 27px 23px; }
  .forum-hero h1 { font-size: 49px; }
  .hero-stat { margin-top: 32px; padding: 20px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .hero-stat .text-button { margin-top: 22px; }
  .metric-grid, .forum-layout, .library-tools, .card-detail-grid, .discussion-grid, .feedback-layout { grid-template-columns: 1fr; }
  .metric-grid { gap: 8px; }
  .metric-card { min-height: 108px; }
  .forum-layout { gap: 32px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-intro { align-items: start; flex-direction: column; margin-top: 0; }
  .catalog-total { align-self: end; }
  .card-detail-grid { padding: 18px; }
  .large-card-art { min-height: 280px; }
  .card-detail-copy { padding: 0; }
  .build-changelog > header { align-items: start; flex-direction: column; }
  .build-training-upload > header, .build-training-actions { align-items: stretch; flex-direction: column; }
  .build-training-controls { grid-template-columns: 1fr; }
  .build-training-actions .button { width: 100%; }
  .sound-track { grid-template-columns: 35px minmax(0, 1fr); }
  .sound-player { grid-column: 1 / -1; }
  .presentation-contribution { align-items: start; flex-direction: column; }
  .presentation-summary-grid, .presentation-review { grid-template-columns: 1fr; }
  .presentation-asset { grid-template-columns: 1fr; }
  .presentation-review > div { flex-direction: column; }
  .presentation-review .button { width: 100%; }
  .released-card-cue { grid-template-columns: 1fr; }
  .comment-form { display: grid; }
  .button { min-height: 43px; }
}

/* Inspector pass: use the Godot dark chrome and fixed card-face zones. */
body { background: #0d1119; }
.main { background: #0d1119; }
.artwork-viewer-open { overflow: hidden; }
.card-detail { background: #0d1119; }
.inspector-layout { grid-template-columns: minmax(350px, .95fr) minmax(390px, 1.1fr) minmax(300px, 360px); gap: 18px; align-items: start; width: min(1560px, 100%); }
.inspector-discussion { order: 1; min-height: calc(100vh - 100px); display: flex; flex-direction: column; padding: 20px; }
.inspector-discussion .comment-list { flex: 1; max-height: none; overflow: visible; align-content: start; }
.inspector-discussion .comment-card { padding: 16px; background: rgba(28, 42, 57, .9); border-color: rgba(151, 181, 205, .18); }
.inspector-discussion .comment-card p { font-size: 14px; line-height: 1.6; }
.inspector-page { order: 2; min-height: calc(100vh - 100px); padding: 34px; background: rgba(12, 21, 32, .86); border-color: rgba(151, 181, 205, .2); }
.inspector-page .inspector-heading h2 { font-size: 38px; }
.inspector-page .detail-stat-row { padding: 19px 0; }
.inspector-page .detail-stat-row strong { font-size: 26px; }
.inspector-page .effect-text { max-width: none; margin: 31px 0; font-size: 16px; line-height: 1.8; }
.inspector-side { order: 3; gap: 16px; }
.detail-art-wrap { min-height: 610px; padding: 26px 20px; background: rgba(12, 21, 32, .86); border-color: rgba(151, 181, 205, .2); }
.card-face { display: block; width: min(350px, 100%); height: auto; padding: 0; color: #f5f8fb; background: transparent; border: 0; border-radius: 0; font-family: ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: zoom-in; }
.card-face:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
.card-face-art { top: 17.5%; left: 7%; width: 86%; }
.card-face-cost { top: 3.6%; left: 5%; width: 14%; color: #8fd3ff; background: transparent; border: 0; font-size: 31px; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-name { top: 6.5%; left: 16%; width: 78%; color: #fff; font-size: 24px; font-weight: 600; text-align: right; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-effect { top: auto; bottom: 9%; left: 16%; width: 68%; max-height: 17%; color: #ffe6a8; font-size: 15px; font-weight: 600; line-height: 1.08; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-attack, .card-face-health, .card-face-spell { position: absolute; z-index: 4; bottom: 2.5%; color: #ffe08a; font-size: 28px; font-weight: 800; line-height: 1; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-attack { left: 8%; }
.card-face-health { right: 8%; color: #ff8b8b; }
.card-face-spell { right: 8%; color: #ffe6a8; font-size: 15px; }
.history-box { padding: 18px; background: rgba(12, 21, 32, .86); border: 1px solid rgba(151, 181, 205, .2); border-radius: 8px; }
.history-box .section-heading { margin: 0; }
.history-box .history-item { padding: 12px 0; }

.artwork-viewer { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; }
.artwork-viewer-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 11, .94); }
.artwork-viewer-shell { position: relative; z-index: 1; width: min(1680px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #111b28; border: 1px solid rgba(151, 181, 205, .28); border-radius: 9px; box-shadow: 0 30px 100px rgba(0, 0, 0, .55); }
.artwork-review-layout { display: grid; grid-template-columns: minmax(290px, .62fr) minmax(520px, 1.38fr); min-height: min(860px, calc(100vh - 50px)); }
.artwork-review-copy { grid-column: 1; grid-row: 1; display: flex; min-width: 0; flex-direction: column; padding: clamp(24px, 3vw, 52px); background: linear-gradient(145deg, rgba(25, 42, 58, .68), rgba(10, 17, 27, .86)); border-right: 1px solid rgba(151, 181, 205, .18); }
.artwork-viewer-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(151, 181, 205, .18); }
.artwork-viewer-head h2 { margin: 8px 0 0; color: #f0f5f8; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 46px); font-weight: 400; line-height: 1.05; }
.artwork-viewer-head .modal-close { position: static; flex: 0 0 auto; }
.artwork-viewer-main { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; display: grid; grid-template-columns: clamp(66px, 5.5vw, 88px) minmax(0, 1fr); width: min(100%, calc(100vh - 50px + clamp(66px, 5.5vw, 88px))); min-height: 0; padding: 0; }
.artwork-stage { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; background: #080d14; border-left: 1px solid rgba(151, 181, 205, .2); }
.artwork-stage.dragging { outline: 2px solid #8ed8ea; outline-offset: -2px; background: #102536; }
.artwork-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artwork-stage-empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: clamp(24px, 5vw, 72px); color: rgba(231, 239, 244, .58); background: radial-gradient(circle at 50% 42%, rgba(142, 216, 234, .09), transparent 48%), #080d14; text-align: center; }
.artwork-stage-empty > span { color: #8ed8ea; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.artwork-stage-empty > strong { color: #edf5f7; font-family: Georgia, serif; font-size: clamp(25px, 3vw, 42px); font-weight: 400; }
.artwork-stage-empty > p { max-width: 370px; margin: 0 0 5px; font-size: 13px; line-height: 1.6; }
.artwork-variants { display: flex; min-height: 0; max-height: calc(100vh - 50px); flex-direction: column; overflow-x: hidden; overflow-y: auto; background: #09111b; border-top: 1px solid rgba(151, 181, 205, .2); }
.artwork-variant-separator { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; min-height: 24px; flex: 0 0 auto; padding: 0 5px; color: rgba(142, 216, 234, .72); background: #07101a; }
.artwork-variant-separator::before, .artwork-variant-separator::after { height: 1px; content: ""; background: rgba(142, 216, 234, .28); }
.artwork-variant-separator span { font-size: 7px; font-weight: 950; letter-spacing: .1em; }
.artwork-variant { position: relative; aspect-ratio: 1; width: 100%; flex: 0 0 auto; padding: 0; overflow: hidden; background: #0b131e; border: 0; border-bottom: 1px solid rgba(151, 181, 205, .2); border-radius: 0; opacity: .62; }
.artwork-variant.active { border-color: #8ed8ea; box-shadow: 0 0 0 1px #8ed8ea; }
.artwork-variant:hover, .artwork-variant.active { opacity: 1; }
.artwork-variant img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artwork-variant span { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; color: #fff; background: rgba(0, 0, 0, .76); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.artwork-variant-detail { display: grid; justify-items: start; gap: 8px; margin-top: auto; padding: 36px 0; }
.artwork-availability { padding: 5px 8px; color: #9de3bd; background: rgba(67, 182, 123, .12); border: 1px solid rgba(67, 182, 123, .38); border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.artwork-availability.website-only { color: #8ed8ea; background: rgba(91, 187, 232, .1); border-color: rgba(91, 187, 232, .35); }
.artwork-role { margin: 8px 0 0; color: #f0f5f8; font-size: 25px; }
.artwork-variant-detail strong { color: rgba(220, 232, 238, .62); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.artwork-variant-detail > span:last-child { color: #8ed8ea; font-family: ui-monospace, monospace; font-size: 12px; }
.artwork-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.artwork-actions .button { min-height: 35px; }
.artwork-actions > span { color: #8ed8ea; font-family: ui-monospace, monospace; font-size: 11px; }
.artwork-proposal-form { display: grid; gap: 11px; margin-top: 18px; padding: 15px; background: rgba(3, 12, 20, .42); border: 1px solid rgba(142, 216, 234, .2); border-radius: 6px; }
.artwork-proposal-form label { color: rgba(231, 239, 244, .62); font-size: 11px; font-weight: 800; }
.artwork-proposal-form label > span { color: rgba(231, 239, 244, .35); font-weight: 500; }
.artwork-proposal-form select, .artwork-proposal-form input, .artwork-proposal-form textarea { width: 100%; margin-top: 5px; }
.artwork-proposal-form textarea { resize: vertical; }
.artwork-proposal-form > div { display: flex; flex-wrap: wrap; gap: 7px; }
#artworkViewerNote { margin: 18px 0 0; color: rgba(220, 232, 238, .5); font-size: 13px; line-height: 1.55; }

@media (max-width: 1180px) {
  .inspector-layout { grid-template-columns: minmax(300px, .9fr) minmax(340px, 1fr); }
  .inspector-discussion { grid-row: 2; grid-column: 1 / -1; min-height: 300px; }
  .inspector-discussion .comment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .artwork-viewer { display: block; padding: 8px; overflow-y: auto; }
  .artwork-viewer-shell { max-height: none; }
  .artwork-review-layout { grid-template-columns: 1fr; min-height: 0; }
  .artwork-viewer-main { grid-column: 1; grid-row: 1; width: 100%; grid-template-columns: 58px minmax(0, 1fr); }
  .artwork-variants { max-height: calc(100vw - 74px); }
  .artwork-review-copy { grid-column: 1; grid-row: 2; padding: 22px; border-top: 1px solid rgba(151, 181, 205, .18); border-right: 0; }
  .artwork-variant-detail { margin-top: 0; padding: 26px 0; }
}
@media (max-width: 780px) {
  .inspector-layout { display: flex; flex-direction: column; }
  .inspector-side, .inspector-page, .inspector-discussion { width: 100%; min-height: 0; }
  .inspector-side { order: 1; }
  .inspector-page { order: 2; }
  .inspector-discussion { order: 3; }
  .detail-art-wrap { min-height: 0; }
  .card-face { width: min(330px, 100%); }
  .inspector-discussion .comment-list { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .card-grid { gap: 7px; }
  .card-tile-art { height: 115px; }
  .card-tile-copy { padding: 10px; }
  .card-tile-copy strong { font-size: 14px; }
  .card-tile-copy small { font-size: 9px; }
  .welcome-actions, .welcome-actions .button { width: 100%; }
}

/* Card Library: mirror the Godot browser's compact tile, cost rail, grouped chips, and dark art surface. */
body { background: #0d1119; }
.main { background: #0d1119; }
.library-filter-shell { padding: 8px; background: rgba(8, 14, 23, .72); border: 1px solid rgba(151, 181, 205, .18); border-radius: 8px; box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.library-tools { grid-template-columns: minmax(220px, 1fr) 205px 180px; align-items: end; gap: 6px; margin-bottom: 7px; }
.library-tools label:not(.search-box) { display: grid; gap: 4px; }
.library-tools select { min-height: 32px; padding: 0 9px; color: #e8edf2; background: rgba(29, 42, 58, .96); border-color: rgba(151, 181, 205, .22); border-radius: 5px; font-size: 13px; }
.search-box input { min-height: 32px; background: rgba(29, 42, 58, .96); border-color: rgba(151, 181, 205, .22); font-size: 13px; }
.search-box { display: grid; gap: 4px; }
.search-box .search-label { position: static; color: rgba(220, 232, 238, .55); font-size: 10px; }
.search-box .search-icon { position: absolute; top: 14px; left: 10px; color: #8ed8ea; font-size: 16px; line-height: 32px; }
.search-box input { padding-right: 31px; padding-left: 30px; }
.search-clear { position: absolute; top: 14px; right: 5px; display: grid; place-items: center; width: 24px; height: 32px; padding: 0; color: rgba(231, 239, 244, .62); background: none; border: 0; font-size: 17px; line-height: 1; }
.search-clear:hover { color: #f0f5f8; }
.search-box span { top: 6px; }
.filter-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-group { display: flex; align-items: center; gap: 5px; min-height: 31px; padding: 3px 5px; background: rgba(255, 255, 255, .055); border-radius: 7px; }
.filter-group > .eyebrow { padding: 0 3px; color: rgba(220, 232, 238, .55); font-size: 10px; white-space: nowrap; }
.filter-options { display: flex; flex-wrap: wrap; gap: 3px; }
.filter-chip, .cost-chip { min-height: 24px; padding: 0 8px; color: rgba(231, 239, 244, .72); background: rgba(13, 20, 31, .72); border: 1px solid transparent; border-radius: 5px; font-size: 12px; }
.filter-chip:hover, .filter-chip.active, .cost-chip:hover, .cost-chip.active { color: #101722; background: #8ed8ea; border-color: #b7efff; box-shadow: 0 0 10px rgba(91, 187, 232, .18); }
.library-summary { margin: 10px 0 8px 66px; color: rgba(220, 232, 238, .55); font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.library-body { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: start; }
.cost-rail { display: grid; align-content: start; justify-items: center; gap: 4px; padding: 4px 3px 7px; background: rgba(8, 14, 23, .62); border: 1px solid rgba(151, 181, 205, .14); border-radius: 7px; }
.cost-rail > .eyebrow { margin-bottom: 2px; font-size: 10px; }
.cost-chip { width: 52px; min-height: 30px; color: rgba(231, 239, 244, .65); background: rgba(38, 52, 69, .86); border-color: rgba(151, 181, 205, .12); }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); grid-auto-rows: 100px; gap: 10px; }
.card-tile { position: relative; height: 100px; min-width: 0; overflow: hidden; background: #152435; border-color: rgba(151, 181, 205, .22); border-radius: 8px; }
.card-tile:hover { background: #20354a; border-color: #8ed8ea; box-shadow: 0 0 0 1px rgba(91, 187, 232, .18), 0 8px 20px rgba(0, 0, 0, .26); transform: translateY(-1px); }
.card-tile-art { position: absolute; inset: 0; height: auto; background: linear-gradient(115deg, #29485d, #122331 75%); }
.card-tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; object-fit: cover; filter: saturate(.9) contrast(1.05); }
.card-tile-art img + .card-placeholder { display: none; }
.card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(142, 216, 234, .3); font-family: Georgia, serif; font-size: 42px; }
.card-tile-copy { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr; height: 100%; padding: 8px; background: linear-gradient(90deg, rgba(10, 18, 28, .76), rgba(10, 18, 28, .25) 80%); }
.card-title-row { display: flex; align-items: center; min-width: 0; gap: 5px; }
.card-home-dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--home-color, #8ed8ea); border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; box-shadow: 0 0 7px var(--home-color, #8ed8ea); }
.card-title-row strong { min-width: 0; }
.card-tile-copy strong, .card-tile-copy span, .card-tile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-tile-copy strong { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.card-tile-copy span { margin-top: 3px; color: #ffe08a; font-family: ui-monospace, monospace; font-size: 13px; }
.card-tile-copy small { align-self: end; color: rgba(231, 239, 244, .68); font-size: 9px; text-transform: uppercase; }

.card-detail { position: fixed; z-index: 8; inset: 0; overflow: auto; padding: 28px 40px 45px; background: #0d1119; }
.card-detail > .back-link { display: block; max-width: 1280px; margin: 0 auto 16px; }
.inspector-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 380px); gap: 24px; width: min(1280px, 100%); margin: 0 auto; }
.inspector-page { min-height: 720px; padding: 31px 36px; background: rgba(12, 21, 32, .78); border: 1px solid rgba(151, 181, 205, .2); border-radius: 8px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); }
.inspector-heading { padding-bottom: 18px; border-bottom: 1px solid rgba(151, 181, 205, .18); }
.inspector-heading h2 { margin: 8px 0 0; color: #f0f5f8; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.inspector-page .detail-stat-row { margin-top: 20px; color: rgba(231, 239, 244, .62); border-color: rgba(151, 181, 205, .18); }
.inspector-page .effect-text { max-width: 720px; margin: 25px 0; color: #d8e2e7; font-size: 15px; }
.inspector-page .tag-row span { color: #8ed8ea; background: rgba(91, 187, 232, .1); border: 1px solid rgba(91, 187, 232, .2); }
.detail-history-block { margin-top: 70px; }
.inspector-side { display: grid; align-content: start; gap: 16px; }
.detail-art-wrap { display: flex; justify-content: center; padding: 18px; background: rgba(12, 21, 32, .75); border: 1px solid rgba(151, 181, 205, .2); border-radius: 8px; }
.card-face { position: relative; width: min(270px, 100%); aspect-ratio: 114 / 175; overflow: hidden; filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .45)); }
.card-face-art { position: absolute; z-index: 1; top: 17%; left: 7.5%; width: 85%; aspect-ratio: 1; overflow: hidden; background: #152435; border-radius: 2px; }
.card-face-art img { width: 100%; height: 100%; object-fit: cover; }
.card-face-art span { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(142, 216, 234, .35); font-family: Georgia, serif; font-size: 70px; }
.card-face-art img + span { display: none; }
.card-face-frame { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card-face-cost { position: absolute; z-index: 4; top: 5%; left: 8%; display: grid; place-items: center; width: 12%; aspect-ratio: 1; color: #e8faff; background: #126eaa; border: 1px solid #9ce7ff; border-radius: 50%; font-size: clamp(10px, 1.7vw, 16px); font-weight: 900; }
.card-face-name { position: absolute; z-index: 4; top: 8%; left: 24%; width: 67%; overflow: hidden; color: #f6fbff; font-size: clamp(11px, 1.8vw, 17px); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.card-face-effect { position: absolute; z-index: 4; top: 74%; left: 13%; width: 74%; max-height: 9%; overflow: hidden; margin: 0; color: #f1f6f8; font-size: clamp(7px, 1.15vw, 10px); line-height: 1.1; text-align: center; }
.card-face-stats { position: absolute; z-index: 4; right: 12%; bottom: 5%; color: #ffe08a; font-size: clamp(10px, 1.7vw, 16px); font-weight: 900; }
.discussion-box { padding: 18px; background: rgba(12, 21, 32, .88); border: 1px solid rgba(200, 162, 74, .55); border-radius: 8px; box-shadow: 0 12px 35px rgba(0, 0, 0, .3); }
.discussion-box .section-heading { margin: 0 0 12px; }
.discussion-box .section-heading h3 { color: #f0f5f8; }
.discussion-box .comment-list { max-height: 335px; overflow: auto; }
.discussion-box .comment-card { padding: 12px; background: rgba(28, 42, 57, .88); border-color: rgba(151, 181, 205, .16); }
.discussion-box .system-comment { border-left-color: #ffd36b; }
.discussion-box .comment-form { display: grid; grid-template-columns: 1fr; }
.discussion-box .comment-form .button { width: 100%; }
.history-item { border-color: rgba(151, 181, 205, .16); }

@media (max-width: 780px) {
  .library-tools { grid-template-columns: 1fr; }
  .filter-groups { display: grid; grid-template-columns: 1fr; }
  .filter-group { align-items: start; }
  .library-body { grid-template-columns: 1fr; }
  .cost-rail { display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; }
  .cost-rail > .eyebrow { flex: 0 0 auto; margin-right: 2px; }
  .cost-chip { flex: 0 0 52px; }
  .library-summary { margin-left: 0; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows: 100px; }
  .card-detail { padding: 18px 17px 35px; }
  .inspector-layout { grid-template-columns: 1fr; }
  .inspector-page { min-height: 0; padding: 23px; }
  .inspector-side { order: -1; }
  .detail-history-block { margin-top: 35px; }
}

/* Final library/inspector geometry: seven compact Godot-like columns, then a two-column full-screen inspector. */
.library-filter-shell { position: relative; padding: 7px 7px 31px; }
.library-tools { grid-template-columns: minmax(220px, 1fr) 190px 170px; }
.filter-check { display: flex !important; align-items: center; align-self: end; gap: 6px; min-height: 32px; padding: 0 8px; color: rgba(231, 239, 244, .72); background: rgba(255, 255, 255, .055); border-radius: 5px; font-size: 12px; white-space: nowrap; }
.filter-check input { width: 13px; height: 13px; min-height: 0; margin: 0; accent-color: #8ed8ea; }
.library-total { position: absolute; right: 10px; bottom: 7px; display: flex; align-items: baseline; gap: 7px; color: rgba(220, 232, 238, .5); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.library-total strong { color: #8ed8ea; font-size: 17px; font-weight: 500; letter-spacing: 0; }
.library-summary { margin: 7px 0 6px 66px; font-size: 10px; }
.card-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: var(--card-tile-height, 100px); align-items: stretch; }
.card-grid .card-tile { width: 100%; height: 100%; aspect-ratio: auto; align-self: stretch; }
.card-grid .card-tile-copy { position: absolute; inset: 0; height: auto; }
.color-filter-chip { display: inline-flex; align-items: center; gap: 5px; }
.filter-color-dot { display: inline-block; width: 9px; height: 9px; background: var(--dot-color, #8ed8ea); border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; box-shadow: 0 0 6px color-mix(in srgb, var(--dot-color, #8ed8ea) 60%, transparent); }

.card-detail { width: 100vw; height: 100vh; padding: 17px 24px 34px; border: 0; border-radius: 0; }
.card-detail > .back-link { width: min(1500px, 100%); max-width: none; margin-bottom: 10px; }
.inspector-layout { grid-template-columns: minmax(330px, .62fr) minmax(560px, 1.38fr); gap: 18px; width: min(1500px, 100%); }
.inspector-discussion { min-height: calc(100vh - 80px); max-height: none; padding: 17px; }
.inspector-discussion .comment-list { min-height: 0; max-height: none; overflow: visible; }
.inspector-discussion .comment-card { padding: 14px; }
.inspector-discussion .comment-card p { font-size: 13px; line-height: 1.55; }
.inspector-side { gap: 12px; }
.detail-art-wrap { min-height: min(69vh, 690px); padding: 22px; align-items: flex-start; background: rgba(12, 21, 32, .7); }
.card-face { width: min(420px, 100%); }
.card-face-cost { font-size: 36px; }
.card-face-name { font-size: 27px; }
.card-face-effect { bottom: 8.5%; max-height: 18%; font-size: 16px; line-height: 1.08; }
.card-face-attack, .card-face-health { font-size: 34px; }
.history-box { padding: 14px 17px; }
.history-box .history-item { padding: 9px 0; }
.archetype-requirements { padding: 14px 17px; background: rgba(12, 21, 32, .86); border: 1px solid rgba(151, 181, 205, .2); border-radius: 8px; }
.archetype-requirements .section-heading { margin: 0 0 9px; }
.requirement-paths { display: grid; gap: 7px; }
.requirement-path { display: grid; gap: 6px; }
.requirement-group { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 5px; color: var(--requirement-color, rgba(255, 255, 255, .7)); font-size: 13px; line-height: 1.4; }
.requirement-group span { color: rgba(255, 255, 255, .42); }
.requirement-group strong { font-weight: 600; }
.requirement-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; color: rgba(255, 255, 255, .38); font-size: 10px; font-weight: 700; }
.requirement-or i { height: 1px; background: rgba(255, 255, 255, .12); }
.requirement-generic { margin: 0; color: rgba(255, 255, 255, .45); font-size: 13px; }
.card-compact-info { padding: 14px 17px; background: rgba(12, 21, 32, .78); border: 1px solid rgba(151, 181, 205, .16); border-radius: 7px; }
.card-compact-info h2 { margin: 4px 0 9px; color: #f0f5f8; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.card-compact-info .detail-stat-row { margin: 0; padding: 8px 0; border-color: rgba(151, 181, 205, .14); font-size: 11px; }
.card-compact-info .detail-stat-row strong { font-size: 17px; }
.card-compact-info .effect-text { margin: 10px 0; color: rgba(231, 239, 244, .72); font-size: 13px; line-height: 1.35; }
.card-compact-info .tag-row span { padding: 3px 5px; font-size: 10px; }
.card-compact-info .detail-meta { margin: 8px 0 0; font-size: 10px; }

@media (max-width: 1200px) {
  .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .library-tools { grid-template-columns: minmax(180px, 1fr) 160px; }
  .library-tools label:nth-child(3), .filter-check { align-self: center; }
  .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inspector-layout { grid-template-columns: minmax(280px, .65fr) minmax(430px, 1.35fr); }
}
@media (max-width: 780px) {
  .library-tools { grid-template-columns: 1fr; }
  .library-tools label:nth-child(3), .filter-check { align-self: auto; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-detail { padding: 12px 12px 28px; }
  .inspector-layout { display: flex; flex-direction: column; }
  .inspector-side, .inspector-discussion { width: 100%; }
  .inspector-side { order: 1; }
  .inspector-discussion { order: 2; min-height: 0; }
  .detail-art-wrap { min-height: 0; }
  .card-face { width: min(370px, 100%); }
}
@media (max-width: 520px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Match the Godot library: one muted archetype wash under the art, with a dark neutral frame. */
#cardGrid .card-tile { background: var(--tile-color, #152435); border-width: 1.4px; border-color: color-mix(in srgb, var(--home-color, #29485d) 55%, transparent); }
#cardGrid .card-tile:hover { background: var(--tile-hover-color, #18283a); border-color: color-mix(in srgb, var(--home-color, #29485d) 68%, transparent); box-shadow: 0 8px 20px rgba(0, 0, 0, .26); transform: none; }
#cardGrid .card-tile-art { background: transparent; }
#cardGrid .card-tile-art img { opacity: .6; filter: none; }
#cardGrid .card-tile-art::after { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--home-color, #29485d) 16%, transparent); content: ""; }
#cardGrid .card-tile:hover .card-tile-art::after { background: color-mix(in srgb, var(--home-color, #29485d) 20%, transparent); }
#cardGrid .card-tile-copy { background: rgba(10, 18, 28, .38); }

.card-detail { padding: 12px 12px 28px; }
.card-detail > .back-link { width: 100%; margin: 0 0 8px; }
.inspector-layout { grid-template-columns: minmax(300px, .58fr) minmax(600px, 1.42fr); width: min(1180px, 100%); gap: 16px; }
.inspector-discussion { min-height: calc(100vh - 64px); padding: 14px; }
.inspector-discussion .section-heading { margin-bottom: 9px; }
.inspector-side { gap: 9px; }
.detail-art-wrap { min-height: 0; padding: 12px; align-items: flex-start; }
.card-face { width: min(300px, 100%); }
.card-face-frame { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; border: 2px solid rgba(188, 209, 221, .82); border-radius: 11px; box-shadow: inset 0 0 0 2px rgba(9, 16, 25, .72), inset 0 0 16px rgba(0, 0, 0, .55); }
.card-face-cost { top: 3.6%; left: 5%; width: auto; height: auto; aspect-ratio: auto; display: block; color: #8fd3ff; background: transparent; border: 0; border-radius: 0; font-size: 30px; font-weight: 700; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-name { top: 6.5%; left: 16%; width: 78%; font-size: 21px; }
.card-face-effect { bottom: 8.8%; max-height: 17%; font-size: 12px; }
.card-face-attack, .card-face-health { bottom: 5.3%; font-size: 31px; }
.card-face-spell { bottom: 5.5%; font-size: 13px; }
.history-box { padding: 11px 14px; }
.card-compact-info { padding: 11px 14px; }
.card-compact-info h2 { font-size: 18px; }

.effect-tooltip { margin-top: 10px; padding: 11px; color: #2b2112; background: #ffe6a8; border: 2px solid #c8a24a; border-radius: 9px; box-shadow: 0 5px 18px rgba(0, 0, 0, .28); font-size: 14px; }
.effect-tooltip-title { color: #6e4c13; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.effect-tooltip > p { margin: 7px 0 0; color: #2b2112; font-size: 14px; line-height: 1.42; white-space: pre-wrap; }
.summon-preview-label { margin-top: 11px; padding-top: 8px; color: #6e4c13; border-top: 1px solid rgba(110, 76, 19, .28); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.summon-previews { display: grid; gap: 5px; margin-top: 5px; }
.summon-preview { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px; color: #2b2112; background: rgba(255, 255, 255, .33); border: 1px solid rgba(110, 76, 19, .26); border-radius: 5px; text-align: left; }
.summon-preview:hover { background: rgba(255, 255, 255, .65); border-color: #8b641e; }
.summon-preview-art { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; background: #a68a55; border-radius: 3px; }
.summon-preview-art img { width: 100%; height: 100%; object-fit: cover; }
.summon-preview-art > span { color: #fff4d0; font-family: Georgia, serif; font-size: 17px; }
.summon-preview strong, .summon-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summon-preview strong { font-size: 12px; }
.summon-preview small { margin-top: 2px; color: #765b2d; font-size: 10px; }
.summon-preview b { color: #765b2d; font-size: 16px; }

@media (max-width: 980px) {
  .inspector-layout { grid-template-columns: minmax(280px, .58fr) minmax(500px, 1.42fr); width: 100%; }
}
@media (max-width: 780px) {
  .inspector-layout { display: flex; flex-direction: column; }
  .inspector-side, .inspector-discussion { width: 100%; }
  .inspector-side { order: 1; }
  .inspector-discussion { order: 2; min-height: 0; }
  .card-face { width: min(315px, 100%); }
}

/* Inspector geometry follows the Godot split: discussion left, tooltip immediately left of the card, metadata below. */
.inspector-layout { grid-template-columns: minmax(300px, .58fr) minmax(600px, 1.42fr); width: min(1060px, 100%); gap: 14px; }
.inspector-discussion { min-height: calc(100vh - 60px); padding: 13px; }
.inspector-discussion .comment-card p { font-size: 15px; line-height: 1.58; }
.card-preview-row { display: grid; grid-template-columns: minmax(250px, 1fr) 290px; align-items: start; gap: 10px; }
.detail-effect-wrap { min-width: 0; padding-top: 15px; }
.detail-effect-wrap .effect-tooltip { margin: 0; }
.detail-art-wrap { min-height: 0; padding: 9px; background: rgba(12, 21, 32, .55); }
.card-face { width: min(290px, 100%); }
.card-face-frame { border-width: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(9, 16, 25, .72), inset 0 0 9px rgba(0, 0, 0, .55); }
.card-face-art { top: 16%; left: 3.5%; width: 93%; border-radius: 1px; }
.card-face-cost { top: 2.3%; left: 4%; font-size: 29px; }
.card-face-name { top: 5.4%; left: 17%; width: 78%; font-size: 20px; }
.card-face-meta { position: absolute; z-index: 4; top: 77.55%; left: 3.5%; display: flex; align-items: center; width: 93%; height: 7.2%; color: #9aa3c0; font-size: 9px; text-align: left; text-shadow: 0 1px 2px #000; }
.card-face-gender { width: 13px; flex: 0 0 13px; color: #8ed8ea; font-size: 13px; text-align: center; }
.card-face-tags { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-face-colors { display: flex; flex: 0 0 auto; gap: 3px; margin-left: 3px; }
.card-face-colors i, .color-dots i { display: inline-block; width: 8px; height: 8px; background: var(--dot-color, #8ed8ea); border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; box-shadow: 0 0 4px var(--dot-color, #8ed8ea); }
.card-face-effect { bottom: 8.2%; left: 16.5%; width: 67%; max-height: 18%; font-size: 12px; }
.card-face-attack, .card-face-health { bottom: 5.8%; font-size: 32px; }
.detail-identity { display: flex; align-items: center; gap: 9px; margin-top: 8px; min-height: 17px; }
.gender-glyph { min-width: 16px; color: #8ed8ea; font-size: 17px; text-align: center; }
.gender-glyph:empty { display: none; }
.color-dots { display: flex; gap: 4px; }

@media (orientation: portrait) and (min-width: 781px) {
  .inspector-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); width: 100%; }
  .inspector-side { display: contents; }
  .card-preview-row { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr) 300px; }
  .inspector-discussion { grid-column: 1; grid-row: 2 / span 2; min-height: 500px; }
  .history-box { grid-column: 2; grid-row: 2; }
  .card-compact-info { grid-column: 2; grid-row: 3; }
}

@media (max-width: 780px) {
  .card-preview-row { grid-template-columns: minmax(0, 1fr) 260px; }
  .card-face { width: min(260px, 100%); }
  .inspector-discussion .comment-card p { font-size: 14px; }
}

/* Fixed Godot inspector dimensions prevent flex growth and horizontal overflow on 1080p landscape. */
.card-detail { overflow-x: hidden; overflow-y: auto; }
.inspector-layout { grid-template-columns: minmax(0, 1.18fr) minmax(414px, .82fr); width: min(1080px, 100%); min-width: 0; gap: 14px; }
.inspector-side, .inspector-discussion, .card-preview-row, .detail-effect-wrap { min-width: 0; }
.inspector-side { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); }
.inspector-discussion { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: calc(100dvh - 62px); min-height: 0; padding: 15px; overflow: hidden; }
.inspector-discussion .comment-form { margin: 0 0 11px; padding: 0 0 11px; border-bottom: 1px solid rgba(151, 181, 205, .18); }
.inspector-discussion .comment-list { display: grid; align-content: start; gap: 8px; min-height: 0; max-height: none; padding: 0 4px 8px 0; overflow-y: auto; overflow-x: hidden; scrollbar-color: #54788c rgba(9, 16, 25, .55); }
.inspector-discussion .comment-card { padding: 15px; }
.inspector-discussion .comment-card p { font-size: 15px; line-height: 1.62; }
.card-preview-row { grid-template-columns: 190px 194px; justify-content: center; align-items: center; gap: 14px; }
.detail-effect-wrap { width: 190px; padding: 0; align-self: center; }
.detail-effect-wrap .effect-tooltip { width: 190px; max-width: 190px; margin: 0; padding: 11px; border-radius: 10px; }
.detail-effect-wrap .effect-tooltip > p { font-size: 13px; line-height: 1.38; }
.detail-art-wrap { width: 194px; min-height: 298px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.card-face { width: 194px; height: 298px; flex: 0 0 194px; }
.card-face-frame { border-color: rgba(185, 204, 217, .8); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(5, 11, 18, .8), inset 0 0 8px rgba(0, 0, 0, .5); }
.card-face-art { top: 16%; left: 3.5%; width: 93%; height: 60.6%; aspect-ratio: auto; }
.card-face-cost { top: 2.3%; left: 3.5%; font-size: 27px; line-height: 1; }
.card-face-name { top: 4%; left: 15.8%; width: 80.7%; font-size: 18px; }
.card-face-meta { top: 74.9%; left: 3.5%; width: 93%; height: 7.2%; font-size: 8px; }
.card-face-effect { top: 83%; bottom: auto; left: 16.7%; width: 66.7%; height: 19.4%; max-height: none; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #ffe6a8; font-size: 15px; font-weight: 600; line-height: .86; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.card-face-attack, .card-face-health { top: 85.7%; bottom: auto; color: #ffe08a; font-size: 27px; line-height: 1; }
.card-face-attack { left: 4.4%; }
.card-face-health { right: 4.4%; color: #ff8b8b; }
.card-face-spell { top: 87%; right: 5%; bottom: auto; font-size: 12px; }

@media (orientation: portrait) and (min-width: 781px) {
  .inspector-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); grid-template-areas: "preview preview" "discussion requirements" "discussion history" "discussion info"; width: 100%; }
  .inspector-side { display: contents; }
  .card-preview-row { grid-area: preview; grid-template-columns: 190px 194px; }
  .inspector-discussion { grid-area: discussion; height: calc(100dvh - 400px); min-height: 420px; }
  .archetype-requirements { grid-area: requirements; }
  .history-box { grid-area: history; }
  .card-compact-info { grid-area: info; }
}

@media (max-width: 780px) {
  .inspector-layout { display: flex; flex-direction: column; width: 100%; }
  .inspector-side, .inspector-discussion { width: 100%; }
  .inspector-side { order: 1; display: grid; }
  .inspector-discussion { order: 2; height: min(650px, 72dvh); }
}
@media (max-width: 520px) {
  .card-preview-row { grid-template-columns: 1fr; justify-items: center; }
  .detail-effect-wrap { order: 2; }
  .detail-art-wrap { order: 1; grid-column: auto; }
}

/* Final inspector bounds and exact Effect tooltip treatment. */
.card-detail { width: auto; max-width: 100%; height: auto; max-height: 100%; inset: 0; contain: inline-size; }
.inspector-layout { grid-template-columns: minmax(0, 1fr) minmax(430px, .72fr); width: min(1060px, 100%); max-width: 100%; }
.card-preview-row { grid-template-columns: 190px 213px; gap: 14px; }
.detail-art-wrap { width: 213px; min-height: 328px; grid-column: 2; }
.card-face { width: 213px; height: 328px; flex-basis: 213px; }
.card-face-cost { font-size: 30px; }
.card-face-name { font-size: 20px; }
.card-face-meta { font-size: 9px; }
.card-face-effect { color: #ffe6a8; font-size: 16px; }
.card-face-attack, .card-face-health { font-size: 30px; }

.effect-tooltip { color: #dfe6ff; background: #12162a; border: 2px solid #c8a24a; }
.effect-note strong { display: block; color: #ffe6a8; font-size: 16px; font-weight: 700; line-height: 1.2; }
.effect-note.generic strong { color: #cdbd86; font-size: 15px; }
.effect-note p { margin: 5px 0 0; color: #dfe6ff; font-size: 14px; line-height: 1.4; }
.effect-section-rule { height: 1px; margin: 8px 0; background: rgba(255, 255, 255, .12); }
.effect-then { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; min-height: 14px; margin: 6px 0; }
.effect-then i { height: 1px; background: rgba(255, 255, 255, .12); }
.effect-then span { color: rgba(255, 255, 255, .38); font-size: 12px; font-style: normal; font-weight: 700; }
.summon-preview-label { color: #cdbd86; }
.summon-preview { color: #dfe6ff; background: rgba(255, 255, 255, .04); border-color: rgba(200, 162, 74, .35); }
.summon-preview:hover { background: rgba(200, 162, 74, .12); border-color: #c8a24a; }
.summon-preview small, .summon-preview b { color: #cdbd86; }

@media (orientation: portrait) and (min-width: 781px) {
  .card-preview-row { grid-template-columns: 190px 213px; }
}
@media (max-width: 780px) {
  .inspector-layout { width: 100%; max-width: 100%; }
}

/* Details scroll as one page and align to the library's viewport instead of behaving like a nested frame. */
.card-detail { padding: 14px 22px 36px; overflow-y: auto; scrollbar-color: #54788c #0d1119; }
.card-detail > .back-link { width: min(1400px, 100%); margin: 0 auto 10px; }
.inspector-layout { width: 100%; max-width: 1400px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 430px; align-items: start; }
.inspector-discussion { display: block; height: auto; min-height: calc(100dvh - 74px); overflow: visible; }
.inspector-discussion .comment-form { position: static; }
.inspector-discussion .comment-list { display: grid; min-height: 0; max-height: none; padding-right: 0; overflow: visible; }
.card-face { background: #262b40; }
.card-face-meta { gap: 3px; }
.card-face-meta.no-gender { gap: 0; }
.card-face-meta.no-gender .card-face-tags { padding-left: 0; }
.card-face-colors { gap: 4px; margin-right: 2px; margin-left: 8px; transform: translateY(1px); }
.card-face-colors i { width: 9px; height: 9px; }

@media (orientation: portrait) and (min-width: 781px) {
  .inspector-layout { max-width: 100%; }
  .inspector-discussion { min-height: 0; height: auto; }
}
@media (max-width: 780px) {
  .card-detail { padding-right: 14px; padding-left: 14px; }
  .inspector-discussion { min-height: 0; height: auto; }
}

/* Card details are a normal library page, not a fixed independently scrolling overlay. */
.card-detail {
  position: static;
  z-index: auto;
  inset: auto;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 0 36px;
  overflow: visible;
  contain: none;
  background: transparent;
}
.card-detail > .back-link { width: min(1400px, 100%); margin: 0 auto 12px; }
.inspector-layout { width: 100%; max-width: 1400px; }
.inspector-discussion {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.inspector-discussion .comment-list {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

@media (orientation: portrait) and (min-width: 781px) {
  .inspector-discussion { height: auto; min-height: 0; }
}
@media (max-width: 780px) {
  .card-detail { padding: 0 0 28px; }
  .inspector-discussion { height: auto; min-height: 0; }
}

/* Keep the shared interface art behind every screen and panel. */
body {
  position: relative;
  isolation: isolate;
  background: #0d1119;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 12, 22, .58), rgba(5, 12, 22, .78)), url("/assets/background_darkmode.png") center / cover no-repeat;
  content: "";
}
.onboarding-screen, .welcome-screen { background: radial-gradient(circle at 76% 18%, rgba(185, 242, 138, .1), transparent 27rem), rgba(9, 24, 28, .64); }
.sidebar { background: rgba(9, 24, 28, .84); }
.main { background: radial-gradient(circle at 85% 0%, rgba(185, 242, 138, .07), transparent 25rem), rgba(13, 17, 25, .84); }

/* Forum threads are the primary content now: keep them compact, readable, and keyed to their archetype. */
.view { padding-top: 24px; }
.forum-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: end; gap: 18px; max-width: 1083px; margin-bottom: 10px; padding: 14px; background: rgba(10, 24, 36, .54); border: 1px solid rgba(151, 181, 205, .13); border-radius: 6px; }
.forum-toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.new-topic-button { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.forum-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.forum-filters button { padding: 7px 10px; color: rgba(231, 239, 244, .54); background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-radius: 3px; font-size: 11px; font-weight: 850; }
.forum-filters button:hover, .forum-filters button.active { color: #0b1b21; background: #b9f28a; border-color: #b9f28a; }
.forum-search input { min-height: 42px; padding-right: 34px; }
.forum-summary { max-width: 1083px; margin: 0 0 10px; color: rgba(231, 239, 244, .42); font-size: 11px; }
.forum-layout { grid-template-columns: minmax(0, 770px) 285px; gap: 28px; max-width: 1083px; margin-top: 0; }
.thread-list { max-width: 770px; gap: 4px; }
.forum-empty { display: grid; justify-items: center; gap: 7px; padding: 55px 24px; color: rgba(231, 239, 244, .46); background: rgba(18, 31, 45, .18); border: 1px dashed rgba(151, 181, 205, .18); border-radius: 6px; text-align: center; }
.forum-empty strong { color: rgba(240, 245, 247, .76); font-size: 15px; }
.forum-empty span { font-size: 12px; }
.forum-rail-empty { padding: 12px 0; color: rgba(231, 239, 244, .4); border-top: 1px solid var(--line); font-size: 11px; line-height: 1.45; }
.artwork-pending { background: linear-gradient(145deg, rgba(255, 123, 172, .055), transparent 70%), #142b31; border-color: rgba(255, 123, 172, .18); }
.artwork-pending > .eyebrow { color: #ff9cc1; }
.thread-top { align-items: baseline; justify-content: space-between; font-size: 12px; }
.thread-top > span { position: relative; top: -2px; }
.thread-foot { align-items: baseline; font-size: 13px; }
.thread-card {
  padding: 8px 9px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--thread-color, #29485d) 15%, transparent), transparent 82%), rgba(18, 31, 45, .2);
  border-color: color-mix(in srgb, var(--thread-color, #29485d) 24%, transparent);
  border-radius: 5px;
  backdrop-filter: blur(2px);
}
.thread-card.is-pinned { border-color: #d6ae4a; box-shadow: inset 0 0 0 1px rgba(255, 219, 119, .18), 0 0 0 1px rgba(114, 78, 16, .28); }
.thread-card.is-pinned:hover { border-color: #f0cb69; }
.thread-card.is-pinned .thread-title b { color: #f6d477; font-size: .78em; letter-spacing: .04em; }
.thread-top-actions { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topic-pin-button { padding: 4px 7px; color: #f6d477; background: rgba(246, 212, 119, .07); border: 1px solid rgba(246, 212, 119, .34); border-radius: 3px; font-size: 10px; font-weight: 850; }
.topic-pin-button:hover { color: #171207; background: #f6d477; border-color: #f6d477; }
.thread-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 7px; vertical-align: middle; }
.thread-tags i, .general-topic-tags span { padding: 2px 6px; color: #a8dfed; background: rgba(142, 216, 234, .07); border: 1px solid rgba(142, 216, 234, .16); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 750; text-transform: lowercase; }
.thread-card:hover {
  background: linear-gradient(120deg, color-mix(in srgb, var(--thread-color, #29485d) 20%, transparent), transparent 82%), rgba(24, 40, 55, .28);
  border-color: color-mix(in srgb, var(--thread-color, #29485d) 28%, transparent);
  transform: none;
}
.thread-card .thread-title { min-width: 0; margin: 0; font-family: inherit; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.thread-title-link { color: var(--paper); text-decoration: none; user-select: text; }
.thread-title-link:hover { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.thread-card p { max-width: 650px; margin: 5px 0 7px; font-size: 15px; line-height: 1.55; }
.thread-comments-link { color: var(--mint); font-size: 13px; font-weight: 800; text-decoration: none; }
.thread-comments-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread-kind { color: color-mix(in srgb, var(--thread-color, #29485d) 72%, #f5f8fb); }
.general-topic-detail { width: min(770px, 100%); }
.general-topic-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin: 8px 0 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(151, 181, 205, .18); }
.general-topic-head h2 { margin: 7px 0 8px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.035em; }
.general-topic-head p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.general-topic-actions { display: flex; gap: 7px; }
.general-topic-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.general-opening-post { margin-bottom: 12px; }
.general-opening-card { background: linear-gradient(115deg, rgba(142, 216, 234, .08), transparent), rgba(18, 31, 45, .42); border-color: rgba(142, 216, 234, .25); }
.general-comment-form { margin: 0 0 12px; padding: 11px 0; border-top: 1px solid rgba(151, 181, 205, .15); border-bottom: 1px solid rgba(151, 181, 205, .15); }
.general-topic-modal { width: min(540px, 100%); }
.general-topic-modal { max-height: calc(100dvh - 40px); overflow-y: auto; }
.general-topic-modal textarea { width: 100%; margin-bottom: 17px; resize: vertical; line-height: 1.5; }
.general-topic-modal label span { color: var(--muted); font-size: 11px; font-weight: 500; }
.general-topic-edit-form { display: grid; gap: 12px; margin-bottom: 12px; padding: 15px; background: rgba(18, 31, 45, .42); border: 1px solid rgba(142, 216, 234, .25); border-radius: 6px; }
.general-topic-edit-form label { display: grid; gap: 6px; color: var(--paper-dim); font-size: 12px; font-weight: 800; }
.general-topic-edit-form label > span { color: var(--muted); font-size: 10px; font-weight: 500; }
.general-topic-edit-form input, .general-topic-edit-form textarea { width: 100%; }
.general-topic-edit-form textarea { resize: vertical; line-height: 1.5; }
.general-topic-edit-form > div { display: flex; gap: 7px; }

@media (max-width: 780px) {
  .forum-toolbar, .forum-toolbar-actions { grid-template-columns: 1fr; }
  .new-topic-button { width: 100%; }
  .thread-top, .thread-foot, .general-topic-head { align-items: flex-start; flex-direction: column; }
  .thread-top-actions { width: 100%; justify-content: space-between; }
  .thread-comments-link { align-self: flex-end; }
}

.breadcrumb-link { padding: 0; color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.breadcrumb-link:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-separator { padding: 0 7px; color: #466269; }

/* Use the same straightforward sans-serif voice as the sidebar throughout the interface. */
.brand-mark, .brand-name, .onboarding-copy h1, .welcome-card h1, .art-card-back, .art-card-front strong,
.welcome-release strong, .topbar-title, .forum-hero h1, .hero-stat strong, .metric-value,
.section-heading h2, .page-intro h1, .section-heading h3, .rail-index, .catalog-total strong,
.card-placeholder, .card-tile-copy strong, .large-card-art span, .card-detail-copy h2,
.detail-stat-row strong, .build-release-summary h2, .build-changelog h2,
.modal h2, .artwork-viewer-head h2, .card-face-art span, .card-compact-info h2,
.summon-preview-art > span { font-family: inherit; }

/* Keep the card discussion's left edge and reading width in line with the forum. */
.card-detail > .back-link { width: 100%; max-width: none; margin-left: 0; }
.inspector-layout { grid-template-columns: minmax(0, 770px) minmax(0, 430px); gap: 28px; width: 100%; max-width: 1228px; margin-right: 0; margin-left: 0; }
.inspector-discussion {
  width: min(770px, 100%);
  max-width: 770px;
  padding: 0 0 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.inspector-discussion .section-heading { margin-bottom: 8px; }
.inspector-discussion .discussion-heading { align-items: center; }
.inspector-discussion .discussion-heading h3 { margin: 0; font-size: 22px; }
.inspector-discussion .comment-form {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.inspector-discussion .comment-form .button { width: auto; min-height: 30px; gap: 5px; padding: 0 9px; font-size: 11px; }
.inspector-discussion .comment-card {
  padding: 10px;
  background: rgba(18, 31, 45, .3);
  border-color: rgba(151, 181, 205, .14);
  border-radius: 5px;
}
.inspector-discussion .comment-card strong { font-size: 13px; }
.inspector-discussion .system-comment {
  background: rgba(200, 162, 74, .1);
  border-color: rgba(200, 162, 74, .3);
  border-left: 2px solid #c8a24a;
}
.inspector-discussion .system-comment strong { color: #ffe6a8; }
.inspector-discussion .system-comment small { color: #cdbd86; }
.inspector-discussion .system-comment p { color: #d8c98e; }
.view.active[data-panel="library"] .card-detail:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-layout {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-discussion {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.view.active[data-panel="library"] .card-detail:not([hidden]) .comment-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
}
.view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-side {
  min-height: 0;
  overflow-y: auto;
}
@media (min-width: 781px) {
  .main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-side {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100dvh;
  }
}
.comment-card-link { color: #8ed8ea; text-decoration: underline; text-decoration-color: rgba(142, 216, 234, .35); text-underline-offset: 2px; }
.comment-card-link:hover { color: #b7efff; text-decoration-color: currentColor; }
.mention-suggestions {
  position: absolute;
  z-index: 65;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: min(360px, 100%);
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
  background: #12162a;
  border: 1px solid rgba(142, 216, 234, .28);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.mention-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  color: #dfe6ff;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
}
.mention-suggestion:hover, .mention-suggestion.active { background: rgba(142, 216, 234, .12); }
.mention-suggestion strong { color: #8ed8ea; font-size: 13px; }
.mention-suggestion span { color: rgba(231, 239, 244, .65); font-size: 12px; }
.comment-card-tooltip {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 16px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .42));
}
.comment-tooltip-body { display: flex; align-items: flex-start; gap: 10px; }
.comment-card-tooltip.is-left .comment-tooltip-body { flex-direction: row-reverse; }
.comment-tooltip-card { width: 213px; height: 328px; flex: 0 0 213px; }
.comment-tooltip-card .card-face { width: 213px; height: 328px; }
.comment-tooltip-effect { align-self: center; width: 190px; flex: 0 0 190px; }
.comment-tooltip-effect .effect-tooltip { width: 190px; max-width: 190px; max-height: none; margin: 0; overflow: visible; }
.comment-card-tooltip .summon-preview { cursor: default; }
.comment-card-tooltip .card-face-frame { border: 2px solid #0e1018; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(38, 43, 64, .8), inset 0 0 8px rgba(0, 0, 0, .55); }

@media (max-width: 520px) {
  .comment-card-tooltip { max-width: calc(100vw - 16px); }
  .comment-tooltip-body { flex-direction: column; }
  .comment-card-tooltip.is-left .comment-tooltip-body { flex-direction: column; }
  .comment-tooltip-effect { align-self: center; width: min(190px, calc(100vw - 16px)); flex-basis: auto; }
  .comment-tooltip-effect .effect-tooltip { width: 100%; max-width: none; }
}

/* Keep the desktop navigation in view while the active page scrolls independently. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}

@media (max-width: 780px) {
  .view { padding-top: 20px; }
  .forum-toolbar { grid-template-columns: 1fr; max-width: none; }
  .forum-layout { grid-template-columns: 1fr; max-width: none; margin-top: 0; }
  .thread-list { max-width: none; }
  .thread-card { padding: 8px; }
  .thread-card .thread-title { font-size: 19px; }
  .sidebar { position: static; height: auto; max-height: none; overflow: visible; }
  .view.active[data-panel="library"] .card-detail:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
  }
  .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-layout { height: auto; }
  .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-discussion { height: auto; min-height: 0; overflow: visible; }
  .view.active[data-panel="library"] .card-detail:not([hidden]) .comment-list { max-height: min(520px, 60dvh); overflow-y: auto; }
  .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-side { overflow: visible; }
}

/* Card details use the page scrollbar; the library grid alone remains an internal scroller. */
.main.card-detail-scroll-mode { padding-bottom: 65px; }
.main.card-detail-scroll-mode .view.active[data-panel="library"] {
  display: block;
  height: auto;
  min-height: 0;
}
.main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) {
  display: block;
  flex: none;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 36px;
}
.main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-layout {
  height: auto;
  min-height: 0;
  align-items: start;
}
.main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-discussion {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) .comment-list {
  flex: none;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.main.card-detail-scroll-mode .view.active[data-panel="library"] .card-detail:not([hidden]) .inspector-side { position: static; max-height: none; overflow: visible; }

.card-detail-navigation { display: flex; width: 100%; align-items: center; gap: 8px; margin-bottom: 13px; padding: 7px 0; border-top: 1px solid rgba(151, 181, 205, .12); border-bottom: 1px solid rgba(151, 181, 205, .12); }
.card-detail-navigation a { padding: 4px 1px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-decoration: none; }
.card-detail-navigation a:hover, .card-detail-navigation a.active { color: var(--mint); }
.card-detail-navigation a.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.card-detail-navigation span { color: rgba(151, 181, 205, .28); }
.inspector-sound { display: grid; grid-column: 1; grid-row: 1; width: min(770px, 100%); max-width: 770px; align-content: start; gap: 12px; }
.card-sound-workspace-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 20px; background: linear-gradient(135deg, rgba(31, 61, 69, .94), rgba(15, 32, 43, .92)); border: 1px solid rgba(185, 242, 138, .16); border-radius: 8px; }
.card-sound-workspace-head h2 { margin: 5px 0 7px; color: var(--paper); font-size: 27px; letter-spacing: -.03em; }
.card-sound-workspace-head p { max-width: 570px; margin: 0; color: var(--paper-dim); font-size: 12px; line-height: 1.5; }
.card-sound-workspace-head .text-button { flex: 0 0 auto; }
.card-sound-facts { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 6px; }
.card-sound-facts > div { display: grid; gap: 5px; min-width: 0; padding: 12px 14px; background: rgba(12, 29, 42, .84); }
.card-sound-facts span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.card-sound-facts strong { color: var(--paper); font-size: 12px; overflow-wrap: anywhere; }
.card-sound-cues, .card-presentation-history { display: grid; gap: 8px; padding: 16px; background: rgba(12, 29, 42, .72); border: 1px solid var(--line); border-radius: 7px; }
.card-sound-cues > header, .card-presentation-history > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.card-sound-cues h3, .card-presentation-history h3 { margin: 4px 0 0; color: var(--paper); font-size: 17px; }
.card-presentation-history > header > strong { color: var(--mint); font-size: 10px; }
.card-presentation-history-item { display: grid; gap: 8px; padding: 11px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-radius: 6px; }
.card-presentation-history-item > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-presentation-history-item time, .card-presentation-history-item > small { color: var(--muted); font-size: 9.5px; }
.card-presentation-history-item > p { margin: 0; color: var(--paper-dim); font-size: 11px; line-height: 1.45; }

.view.active[data-panel="sound"] { min-height: calc(100dvh - 104px); padding-bottom: 65px; overflow: visible; }
.sound-asset-workspace { display: grid; gap: 14px; width: min(1180px, 100%); }
.sound-asset-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 43px); background: radial-gradient(circle at 85% 15%, rgba(185, 242, 138, .12), transparent 30%), linear-gradient(135deg, rgba(24, 54, 62, .96), rgba(9, 24, 36, .98)); border: 1px solid rgba(185, 242, 138, .18); border-radius: 10px; }
.sound-asset-hero > div { display: grid; gap: 8px; min-width: 0; }
.sound-asset-hero > div > a { width: fit-content; margin-bottom: 15px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.sound-asset-hero > div > a:hover { color: var(--mint); }
.sound-asset-hero h1 { margin: 0; color: var(--paper); font-family: Georgia, serif; font-size: clamp(30px, 5vw, 52px); font-weight: 400; letter-spacing: -.035em; overflow-wrap: anywhere; }
.sound-asset-hero code { color: rgba(185, 242, 138, .72); font-size: 11px; overflow-wrap: anywhere; }
.sound-asset-state { flex: 0 0 auto; padding: 6px 9px; color: #b9f28a; background: rgba(185, 242, 138, .08); border: 1px solid rgba(185, 242, 138, .23); border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.sound-asset-player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 470px); align-items: center; gap: 24px; padding: 20px 23px; background: rgba(12, 29, 42, .76); border: 1px solid var(--line); border-radius: 8px; }
.sound-asset-player h2 { margin: 5px 0; color: var(--paper); font-size: 19px; }
.sound-asset-player p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sound-asset-player audio { width: 100%; color-scheme: dark; }
.sound-asset-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.sound-asset-facts > div { display: grid; gap: 6px; min-width: 0; padding: 13px 15px; background: rgba(12, 29, 42, .86); }
.sound-asset-facts span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.sound-asset-facts strong { color: var(--paper); font-size: 12px; overflow-wrap: anywhere; }
.sound-asset-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: 14px; }
.sound-asset-usage, .sound-asset-history { display: grid; gap: 8px; padding: 18px; background: rgba(12, 29, 42, .72); border: 1px solid var(--line); border-radius: 8px; }
.sound-asset-usage > header, .sound-asset-history > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sound-asset-usage h2, .sound-asset-history h2 { margin: 4px 0 0; color: var(--paper); font-size: 18px; }
.sound-asset-usage > header > strong, .sound-asset-history > header > strong { color: var(--mint); font-size: 9px; letter-spacing: .1em; }
.sound-asset-card-use, .sound-asset-history-item { display: grid; gap: 8px; padding: 12px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .11); border-radius: 6px; }
.sound-asset-card-use > header, .sound-asset-history-item > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sound-asset-card-use a, .sound-asset-history-item nav a { display: grid; gap: 2px; min-width: 0; color: var(--paper); text-decoration: none; }
.sound-asset-card-use a:hover strong, .sound-asset-history-item nav a:hover strong { color: var(--mint); }
.sound-asset-card-use a small, .sound-asset-history-item nav small { color: var(--muted); font-size: 8.5px; font-weight: 500; }
.sound-asset-card-use > header > span { padding: 3px 5px; color: #a9eafa; background: rgba(142, 216, 234, .07); border-radius: 3px; font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.sound-asset-card-use p, .sound-asset-history-item p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.sound-asset-card-use p b { margin-right: 5px; color: var(--paper-dim); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.sound-asset-history-item > header time { color: var(--muted); font-size: 9px; }
.sound-asset-history-item > div { display: grid; gap: 3px; }
.sound-asset-history-item > div strong { color: var(--paper); font-size: 10.5px; }
.sound-asset-history-item > div span { color: var(--muted); font-size: 9.5px; }
.sound-asset-history-item nav { display: flex; flex-wrap: wrap; gap: 5px; }
.sound-asset-history-item nav a { padding: 5px 7px; background: rgba(185, 242, 138, .04); border: 1px solid rgba(185, 242, 138, .12); border-radius: 4px; }

.card-reactions {
  position: relative;
  margin-top: 10px;
  padding: 11px;
  background: rgba(18, 31, 45, .3);
  border: 1px solid rgba(151, 181, 205, .14);
  border-radius: 5px;
}
.reaction-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.reaction-heading h3 { margin: 4px 0 0; color: #f0f5f8; font-size: 15px; font-weight: 600; }
.reaction-energy { color: #cdbd86; font-size: 11px; white-space: nowrap; }
.reaction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.reaction-button { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 4px; color: #dfe6ff; background: rgba(255, 255, 255, .035); border: 1px solid rgba(151, 181, 205, .12); border-radius: 4px; user-select: none; }
.reaction-button:hover { background: rgba(142, 216, 234, .1); border-color: rgba(142, 216, 234, .3); }
.reaction-emoji { font-size: 23px; line-height: 1.1; }
.reaction-button strong { color: #f0f5f8; font-size: 15px; line-height: 1.1; }
.reaction-button small { color: #8ed8ea; font-size: 10px; line-height: 1; }
.reaction-add-toggle { margin-top: 8px; padding: 0; color: #8ed8ea; background: transparent; border: 0; font-size: 12px; }
.reaction-add-toggle:hover { color: #b7efff; text-decoration: underline; text-underline-offset: 3px; }
.emoji-picker {
  position: fixed;
  z-index: 65;
  width: min(320px, calc(100vw - 24px));
  max-height: min(280px, calc(100dvh - 24px));
  overflow-y: auto;
  padding: 8px;
  background: #12162a;
  border: 1px solid rgba(142, 216, 234, .28);
  border-radius: 5px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
}
.emoji-picker input { display: block; width: 100%; min-height: 32px; padding: 0 8px; font-size: 13px; }
.emoji-picker-groups { margin-top: 8px; }
.emoji-picker-grid { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }
.emoji-picker-option { display: grid; place-items: center; min-width: 0; height: 32px; padding: 0; color: #f0f5f8; background: rgba(255, 255, 255, .04); border: 1px solid transparent; border-radius: 4px; font-size: 20px; }
.emoji-picker-option:hover { background: rgba(142, 216, 234, .14); border-color: rgba(142, 216, 234, .3); }
.emoji-picker-empty { display: block; margin-top: 8px; color: rgba(231, 239, 244, .6); font-size: 13px; line-height: 1.4; }
.emoji-field { position: relative; display: block; width: 100%; min-width: 0; }
.emoji-field > input, .emoji-field > textarea { display: block; width: 100%; padding-right: 42px; }
.emoji-field-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: rgba(231, 239, 244, .62);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
}
.emoji-field-toggle:hover, .emoji-field-toggle[aria-expanded="true"] { color: #d7f6ff; background: rgba(142, 216, 234, .1); border-color: rgba(142, 216, 234, .24); }
.emoji-field-toggle:focus-visible { outline: 2px solid rgba(185, 242, 138, .7); outline-offset: 1px; }
.emoji-field-toggle:disabled { cursor: not-allowed; opacity: .4; }
.emoji-field-textarea .emoji-field-toggle { top: 7px; transform: none; }
.composer-emoji-picker { overscroll-behavior: contain; }

@media (min-width: 1800px) {
  .inspector-layout { grid-template-columns: minmax(0, 770px) minmax(0, 430px) 230px; gap: 28px; max-width: 1486px; }
  .inspector-discussion { grid-column: 1; grid-row: 1 / span 3; }
  .inspector-side { display: grid; grid-column: 2 / 4; grid-row: 1; grid-template-columns: minmax(0, 430px) 230px; gap: 16px 28px; }
  .card-preview-row { grid-column: 1; grid-row: 1; }
  .archetype-requirements { grid-column: 1; grid-row: 2; }
  .history-box { grid-column: 1; grid-row: 3; }
  .card-compact-info { grid-column: 1; grid-row: 4; }
  .card-reactions { position: relative; grid-column: 2; grid-row: 1 / span 4; align-self: start; width: 230px; margin-top: 0; }
}

/* Keep library controls fixed in the viewport while only the card collection scrolls. */
.view.active[data-panel="library"] {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 104px - 4px);
  min-height: 0;
}
.main.library-scroll-mode { padding-bottom: 4px; }
.view.active[data-panel="library"] .library-filter-shell,
.view.active[data-panel="library"] .library-summary {
  flex: 0 0 auto;
}
.view.active[data-panel="library"] .library-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.view.active[data-panel="library"] .card-grid {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}

@media (max-width: 1050px) {
  .view.active[data-panel="library"] { height: calc(100dvh - 104px - 4px); }
}
@media (max-width: 780px) {
  .view.active[data-panel="library"] { height: calc(100dvh - 82px - 4px); }
  .view.active[data-panel="sound"] { min-height: calc(100dvh - 82px); }
  .card-sound-workspace-head { flex-direction: column; }
  .card-sound-facts { grid-template-columns: 1fr; }
  .presentation-vfx-diff { grid-template-columns: 38px minmax(0, 1fr); }
  .presentation-vfx-diff > span { display: none; }
  .sound-asset-hero, .sound-asset-player { grid-template-columns: 1fr; align-items: start; }
  .sound-asset-hero { flex-direction: column; }
  .sound-asset-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sound-asset-columns { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sound-asset-facts { grid-template-columns: 1fr; }
}

.main.library-scroll-mode.card-detail-scroll-mode { padding-bottom: 65px; }

/* Card creator: an editorial workbench that still exposes the plain-text source. */
.creator-publish-note code { color: #8ed8ea; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.creator-layout { display: grid; grid-template-columns: minmax(500px, 760px) minmax(310px, 430px); align-items: start; gap: 20px; max-width: 1280px; }
.creator-editor, .creator-preview-panel, .creator-work-panel {
  background: linear-gradient(145deg, rgba(20, 35, 51, .9), rgba(12, 25, 37, .78));
  border: 1px solid rgba(151, 181, 205, .16);
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .16);
}
.creator-editor { padding: clamp(20px, 3vw, 31px); }
.creator-preview-column { position: sticky; top: 20px; display: grid; gap: 12px; }
.creator-preview-panel, .creator-work-panel { padding: 18px; }
.creator-section-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.creator-section-head h2 { margin: 5px 0 0; color: #f0f5f8; font-size: 18px; font-weight: 620; letter-spacing: -.02em; }
.creator-save-state, .creator-section-head > span:not(.eyebrow) { color: rgba(231, 239, 244, .5); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.creator-editor-head { align-items: center; }
.creator-editor-actions { display: flex; align-items: center; gap: 11px; }
.creator-fresh-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: rgba(231, 239, 244, .72); background: rgba(255, 255, 255, .035); border: 1px solid rgba(151, 181, 205, .14); border-radius: 5px; font-size: 11px; font-weight: 800; }
.creator-fresh-button:hover { color: #f1f7f9; background: rgba(142, 216, 234, .09); border-color: rgba(142, 216, 234, .28); }
.creator-fresh-button span { color: #8ed8ea; font-size: 15px; line-height: 1; }
.creator-label { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 7px; color: #d9e5eb; font-size: 12px; font-weight: 800; }
.creator-mode-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.creator-mode-line span { flex: 0 0 auto; padding: 4px 6px; color: #8ed8ea; background: rgba(142, 216, 234, .08); border-radius: 3px; font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.creator-mode-line p { margin: 0; color: rgba(231, 239, 244, .48); font-size: 13px; }
.creator-impact-control { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); align-items: end; gap: 0 12px; margin: 13px 0 4px; padding: 12px; background: rgba(142, 216, 234, .045); border: 1px solid rgba(142, 216, 234, .16); border-radius: 6px; }
.creator-impact-control[hidden] { display: none; }
.creator-impact-control .creator-label { grid-column: 1 / -1; margin: 0 0 7px; }
.creator-impact-control select { width: 100%; }
.creator-impact-control p { margin: 0; color: rgba(231, 239, 244, .58); font-size: 12px; line-height: 1.5; }
.creator-impact-control p > span { margin-left: 5px; }
.creator-id-row input[readonly] { color: rgba(231, 239, 244, .55); cursor: not-allowed; }
.creator-label small { color: rgba(231, 239, 244, .42); font-size: 11px; font-weight: 500; }
.creator-id-row { display: flex; align-items: center; overflow: hidden; background: #0c1725; border: 1px solid rgba(151, 181, 205, .18); border-radius: 5px; }
.creator-id-row:focus-within { border-color: rgba(142, 216, 234, .58); box-shadow: 0 0 0 3px rgba(142, 216, 234, .07); }
.creator-id-row input { width: 100%; background: transparent; border: 0; box-shadow: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.creator-id-row span { padding: 0 13px; color: #8ed8ea; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.creator-source-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.creator-source-grid.has-original { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.creator-source-pane { min-width: 0; }
.creator-descriptor-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: stretch; gap: 7px; }
.creator-source-editor { position: relative; min-width: 0; }
.creator-source { width: 100%; min-height: 340px; resize: vertical; color: #e5edf3; background: #0a1421; border-color: rgba(151, 181, 205, .18); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.65; tab-size: 2; }
.creator-source-editor .creator-source { position: relative; z-index: 2; display: block; white-space: pre; }
.creator-source-editor.enhanced .creator-source { color: transparent; background: transparent; caret-color: #e5edf3; -webkit-text-fill-color: transparent; }
.creator-source-editor.enhanced .creator-source::selection { background: rgba(142, 216, 234, .2); }
.creator-source-highlight { position: absolute; z-index: 1; inset: 0; margin: 0; overflow: hidden; padding: 12px 13px; color: rgba(229, 237, 243, .88); background: #0a1421; border: 1px solid rgba(151, 181, 205, .18); border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.65; tab-size: 2; white-space: pre; }
.creator-source-highlight code { display: block; width: max-content; min-width: 100%; color: inherit; font: inherit; transform-origin: top left; }
.creator-syntax-key { color: rgba(203, 216, 225, .68); }
.creator-syntax-value { color: rgba(229, 237, 243, .88); }
.creator-syntax-comment { color: rgba(150, 170, 181, .58); font-style: italic; }
.syntax-name .creator-syntax-value { color: rgba(241, 245, 248, .95); }
.syntax-type .creator-syntax-value, .syntax-requires .creator-syntax-value { color: rgba(204, 188, 226, .9); }
.syntax-cost .creator-syntax-value { color: rgba(176, 214, 231, .92); }
.syntax-attack .creator-syntax-value { color: rgba(229, 210, 151, .92); }
.syntax-health .creator-syntax-value { color: rgba(221, 174, 176, .92); }
.syntax-poison .creator-syntax-value { color: rgba(179, 207, 157, .9); }
.syntax-tags .creator-syntax-value { color: rgba(157, 205, 202, .9); }
.syntax-colors .creator-syntax-value { color: rgba(190, 201, 225, .9); }
.syntax-gender .creator-syntax-value { color: rgba(218, 193, 172, .9); }
.syntax-effect .creator-syntax-value { color: rgba(183, 215, 198, .9); }
.creator-card-reference { color: rgba(169, 221, 233, .96); text-decoration: underline; text-decoration-color: rgba(142, 216, 234, .45); text-underline-offset: 2px; }
.creator-source[readonly] { color: rgba(229, 237, 243, .57); background: rgba(8, 18, 29, .72); border-color: rgba(151, 181, 205, .11); resize: none; }
.creator-card-suggestions { z-index: 4; top: 8px; width: min(430px, calc(100% - 16px)); max-height: 280px; }
.creator-card-suggestion { grid-template-columns: 38px minmax(0, 1fr) auto; }
.creator-card-suggestion > span:nth-child(2) { min-width: 0; }
.creator-card-suggestion strong, .creator-card-suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-card-suggestion small { margin-top: 3px; color: rgba(231, 239, 244, .5); font-size: 11px; }
.creator-card-suggestion > b { color: #8ed8ea; font-size: 11px; text-transform: uppercase; }
.creator-card-suggestion-art { display: grid; width: 35px; height: 35px; place-items: center; overflow: hidden; color: rgba(142, 216, 234, .7); background: #203249; border-radius: 4px; font-family: Georgia, serif; }
.creator-card-suggestion-art img { width: 100%; height: 100%; object-fit: cover; }
.creator-helper-rail { display: grid; align-content: start; gap: 6px; padding: 6px; background: rgba(5, 15, 25, .74); border: 1px solid rgba(151, 181, 205, .14); border-radius: 6px; }
.creator-helper-rail button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 9px 3px 7px; color: rgba(231, 239, 244, .54); background: transparent; border: 1px solid transparent; border-radius: 5px; transition: .16s ease; }
.creator-helper-rail button:hover, .creator-helper-rail button.active { color: #f2f7f9; background: rgba(142, 216, 234, .1); border-color: rgba(142, 216, 234, .22); }
.creator-helper-rail button.active { box-shadow: inset 2px 0 #8ed8ea; }
.creator-helper-rail button > span { font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 19px; line-height: 1.2; }
.creator-helper-rail small { overflow: hidden; width: 100%; font-size: 10px; font-weight: 850; letter-spacing: .02em; text-align: center; text-overflow: ellipsis; }
.creator-helper-dialog { z-index: 75; padding: 16px; background: rgba(3, 6, 11, .9); }
.creator-helper-modal { display: grid; grid-template-columns: 230px minmax(0, 1fr); width: min(1600px, calc(100vw - 32px)); height: min(940px, calc(100dvh - 32px)); padding: 0; overflow: hidden; color: #e7eff3; background: #111b28; border-color: rgba(142, 216, 234, .25); border-radius: 9px; }
.creator-helper-modal > .modal-close { z-index: 3; top: 13px; right: 16px; }
.creator-helper-modal .button { width: auto; }
.creator-helper-modal label { margin: 0; }
.creator-helper-modal input { margin-bottom: 0; }
.creator-helper-modal-nav { display: grid; align-content: start; gap: 5px; padding: 67px 12px 16px; overflow-y: auto; background: #09131f; border-right: 1px solid rgba(151, 181, 205, .15); }
.creator-helper-modal-nav button { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 3px 10px; padding: 13px 11px; color: rgba(231, 239, 244, .58); background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: left; }
.creator-helper-modal-nav button:hover, .creator-helper-modal-nav button.active { color: #f1f7f9; background: rgba(142, 216, 234, .09); border-color: rgba(142, 216, 234, .2); }
.creator-helper-modal-nav button.active { box-shadow: inset 3px 0 #8ed8ea; }
.creator-helper-modal-nav button > span { grid-row: 1 / 3; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 22px; text-align: center; }
.creator-helper-modal-nav b { font-size: 13px; }
.creator-helper-modal-nav small { color: rgba(231, 239, 244, .42); font-size: 11px; }
.creator-helper-panel { min-width: 0; margin: 0; padding: clamp(22px, 3vw, 38px); overflow-y: auto; background: linear-gradient(145deg, rgba(12, 29, 42, .97), rgba(7, 18, 29, .98)); border: 0; border-radius: 0; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.creator-helper-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(151, 181, 205, .13); }
.creator-helper-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 19px; padding: 0; color: #8ed8ea; background: none; border: 0; font-size: 13px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.creator-helper-back:hover { color: #d7f8ff; }
.creator-helper-title { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px; }
.creator-helper-title-icon { display: grid; width: 48px; height: 48px; place-items: center; background: rgba(142, 216, 234, .1); border: 1px solid rgba(142, 216, 234, .2); border-radius: 12px; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 23px; }
.creator-helper-title h2 { margin: 5px 0 6px; color: #f2f7f9; font-size: 29px; font-weight: 650; letter-spacing: -.03em; }
.creator-helper-title p { max-width: 760px; margin: 0; color: rgba(231, 239, 244, .62); font-size: 15px; line-height: 1.55; }
.creator-helper-toolbar { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(220px, 1.2fr); gap: 10px; }
.creator-helper-toolbar label, .creator-tag-search { display: grid; gap: 7px; color: rgba(231, 239, 244, .58); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.creator-helper-toolbar select, .creator-helper-toolbar input, .creator-tag-search input { width: 100%; min-height: 44px; font-size: 14px; }
.creator-trigger-builder { display: grid; gap: 10px; margin-top: 11px; padding: 14px; background: linear-gradient(110deg, rgba(142, 216, 234, .075), rgba(255, 255, 255, .018)); border: 1px solid rgba(142, 216, 234, .18); border-left: 3px solid #8ed8ea; border-radius: 6px; }
.creator-trigger-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.creator-trigger-guide .eyebrow { color: #8ed8ea; font-size: 10px; }
.creator-trigger-guide strong { display: block; margin-top: 4px; color: #eef6f8; font-size: 15px; }
.creator-trigger-guide p { max-width: 780px; margin: 5px 0 0; color: rgba(231, 239, 244, .58); font-size: 12px; line-height: 1.5; }
.creator-trigger-guide code, .creator-trigger-example code { color: #d3ffad; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.creator-trigger-guide > code { padding: 8px 10px; background: rgba(4, 13, 21, .62); border: 1px solid rgba(185, 242, 138, .13); border-radius: 4px; white-space: nowrap; }
.creator-trigger-controls { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(140px, .55fr) minmax(230px, 1fr); gap: 9px; padding-top: 10px; border-top: 1px solid rgba(142, 216, 234, .13); }
.creator-trigger-controls label { display: grid; align-content: start; gap: 6px; min-width: 0; color: rgba(231, 239, 244, .58); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.creator-trigger-controls select, .creator-trigger-controls input { width: 100%; min-width: 0; min-height: 42px; margin: 0; font-size: 13px; }
.creator-trigger-controls select:disabled { opacity: .5; }
.creator-trigger-controls small { color: rgba(231, 239, 244, .42); font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.creator-trigger-example { display: flex; align-items: baseline; gap: 9px; color: rgba(231, 239, 244, .42); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.creator-trigger-example code { overflow: hidden; color: rgba(211, 255, 173, .72); font-weight: 500; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.effect-category-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 11px; }
.effect-category-list button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; color: rgba(231, 239, 244, .62); background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .14); border-radius: 999px; font-size: 12px; font-weight: 800; }
.effect-category-list button:hover, .effect-category-list button.active { color: #0b1b21; background: #8ed8ea; border-color: #8ed8ea; }
.effect-template-summary { margin-bottom: 11px; color: rgba(231, 239, 244, .5); font-size: 13px; }
.effect-template-summary strong { color: #8ed8ea; }
.effect-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 640px; padding-right: 5px; overflow-y: auto; }
.effect-template-card { --effect-accent: #8ed8ea; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 11px; min-width: 0; padding: 14px; color: #e7eff3; background: linear-gradient(145deg, color-mix(in srgb, var(--effect-accent) 7%, transparent), rgba(255, 255, 255, .025)); border: 1px solid color-mix(in srgb, var(--effect-accent) 24%, rgba(151, 181, 205, .15)); border-top: 2px solid color-mix(in srgb, var(--effect-accent) 75%, transparent); border-radius: 7px; text-align: left; transition: .16s ease; }
.effect-template-card[data-effect-category-name="offense"] { --effect-accent: #e98d7d; }
.effect-template-card[data-effect-category-name="healing"] { --effect-accent: #91d29b; }
.effect-template-card[data-effect-category-name="control"] { --effect-accent: #8ab9e6; }
.effect-template-card[data-effect-category-name="cards"] { --effect-accent: #c0a3df; }
.effect-template-card[data-effect-category-name="buffs"] { --effect-accent: #e3c86f; }
.effect-template-card[data-effect-category-name="energy"] { --effect-accent: #72d4d0; }
.effect-template-card[data-effect-category-name="advanced"] { --effect-accent: #a9b7c9; }
.effect-template-card:hover { background: color-mix(in srgb, var(--effect-accent) 12%, rgba(255, 255, 255, .025)); border-color: color-mix(in srgb, var(--effect-accent) 48%, transparent); transform: translateY(-1px); }
.effect-template-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--effect-accent); background: color-mix(in srgb, var(--effect-accent) 12%, transparent); border-radius: 8px; font-size: 19px; }
.effect-template-copy, .effect-template-copy > * { display: block; min-width: 0; }
.effect-template-meta { color: var(--effect-accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.effect-template-timing { display: inline; margin-left: 6px; color: #d3ffad; }
.effect-template-copy strong { margin-top: 5px; font-size: 15px; }
.effect-template-copy small { margin-top: 5px; color: rgba(231, 239, 244, .58); font-size: 12px; line-height: 1.45; }
.effect-template-copy code { margin-top: 9px; overflow: hidden; color: rgba(231, 239, 244, .74); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; }
.effect-template-use { grid-column: 2; align-self: end; margin-top: 2px; color: #8ed8ea; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.creator-helper-feedback { min-height: 20px; margin-top: 14px; color: #d3ffad; font-size: 14px; }
.creator-helper-warning { margin-bottom: 15px; padding: 12px 14px; color: #ffd6a1; background: rgba(245, 201, 106, .07); border-left: 3px solid #f5c96a; font-size: 14px; line-height: 1.5; }
.creator-helper-warning code { color: #fff0cb; }
.creator-property-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.creator-property-sections > section { --section-accent: #8ed8ea; min-width: 0; padding: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--section-accent) 9%, transparent), rgba(255, 255, 255, .022) 48%); border: 1px solid color-mix(in srgb, var(--section-accent) 30%, rgba(151, 181, 205, .12)); border-top: 3px solid var(--section-accent); border-radius: 8px; }
.creator-property-sections > section:nth-child(1) { --section-accent: #79c9e5; }
.creator-property-sections > section:nth-child(2) { --section-accent: #e8c66f; }
.creator-property-sections > section:nth-child(3) { --section-accent: #b99adb; }
.creator-property-sections > section > header { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 25%, transparent); }
.creator-property-sections > section > header .eyebrow { color: var(--section-accent); font-size: 11px; }
.creator-property-sections h3 { margin: 6px 0 0; color: #edf4f7; font-size: 19px; }
.creator-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 9px; }
.creator-property-grid label { display: grid; align-content: start; gap: 7px; min-width: 0; margin: 0; color: rgba(231, 239, 244, .62); font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.creator-property-grid label > span { display: flex; justify-content: space-between; gap: 5px; }
.creator-property-grid label > span small { color: rgba(231, 239, 244, .4); font-size: 10px; font-weight: 600; text-transform: none; }
.creator-property-grid input, .creator-property-grid select { width: 100%; min-width: 0; min-height: 44px; margin: 0; border-color: color-mix(in srgb, var(--section-accent) 22%, rgba(151, 181, 205, .18)); font-size: 14px; }
.creator-property-grid input:disabled { opacity: .34; }
.creator-property-grid .property-wide { grid-column: 1 / -1; }
.creator-property-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 10px; background: rgba(142, 216, 234, .045); border: 1px solid rgba(142, 216, 234, .13); border-radius: 5px; cursor: pointer; }
.creator-property-check input { width: 16px; min-height: 16px; margin: 0; accent-color: #8ed8ea; }
.creator-property-check > span { display: block !important; }
.creator-property-check b, .creator-property-check small { display: block; letter-spacing: 0; text-transform: none; }
.creator-property-check b { color: #e6eef2; font-size: 13px; }
.creator-property-check small { margin-top: 4px; color: rgba(231, 239, 244, .5); font-size: 11px; }
.requirement-paths { display: grid; gap: 12px; }
.requirement-path { --path-color: #8ed8ea; padding: 15px; background: linear-gradient(105deg, color-mix(in srgb, var(--path-color) 10%, transparent), rgba(255, 255, 255, .018) 62%); border: 1px solid color-mix(in srgb, var(--path-color) 34%, rgba(151, 181, 205, .12)); border-left: 4px solid var(--path-color); border-radius: 7px; }
.requirement-path > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--path-color) 22%, transparent); }
.requirement-path > header .eyebrow { color: var(--path-color); font-size: 10px; }
.requirement-path h3 { margin: 4px 0 0; color: #e7eff3; font-size: 16px; }
.requirement-path-remove { padding: 7px 9px; color: rgba(255, 193, 183, .75); background: transparent; border: 1px solid rgba(255, 115, 93, .15); border-radius: 4px; font-size: 11px; }
.requirement-path-remove:hover { color: #ffc1b7; background: rgba(255, 115, 93, .1); }
.requirement-path .requirement-table-wrap { margin-top: 7px; }
.requirement-path-empty, .requirement-paths-empty { color: rgba(231, 239, 244, .48); font-size: 12px; }
.requirement-path-empty { margin: 8px 3px; }
.requirement-paths-empty { display: grid; gap: 5px; padding: 20px; text-align: center; background: rgba(255, 255, 255, .018); border: 1px dashed rgba(142, 216, 234, .22); border-radius: 7px; }
.requirement-paths-empty strong { color: rgba(231, 239, 244, .72); font-size: 14px; }
.requirement-explainer b { color: #0b1b21; background: #8ed8ea; border-radius: 3px; }
.requirement-table-wrap { margin-top: 12px; overflow-x: auto; }
.requirement-table { width: 100%; border-collapse: separate; border-spacing: 0 7px; }
.requirement-table th { padding: 0 6px 3px; color: rgba(231, 239, 244, .5); font-size: 10px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.requirement-table td { padding: 0 3px; }
.requirement-table select { width: 100%; min-height: 44px; padding: 0 10px; font-size: 13px; }
.requirement-table tr { --archetype-color: #8ed8ea; }
.requirement-table .requirement-tag { border-color: color-mix(in srgb, var(--archetype-color) 42%, rgba(151, 181, 205, .18)); border-left: 5px solid var(--archetype-color); }
.requirement-table tr[data-relation="or"] .requirement-relation { color: #d6b6f2; border-color: rgba(185, 154, 219, .42); }
.requirement-table tr[data-tier="primary"] .requirement-tier { color: #8ed8ea; border-color: rgba(142, 216, 234, .44); }
.requirement-table tr[data-tier="secondary+"] .requirement-tier { color: #efd58b; border-color: rgba(232, 198, 111, .42); }
.requirement-table tr[data-tier="tertiary+"] .requirement-tier { color: #aad8e8; border-color: rgba(121, 201, 229, .38); }
.requirement-table td:first-child { width: 74px; }
.requirement-table td:nth-child(2) { width: 31%; }
.requirement-table td:last-child { width: 34px; }
.requirement-remove { width: 32px; height: 32px; color: rgba(255, 173, 157, .75); background: rgba(255, 115, 93, .05); border: 1px solid rgba(255, 115, 93, .14); border-radius: 5px; }
.requirement-remove:hover { color: #ffc1b7; background: rgba(255, 115, 93, .12); }
.requirement-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; color: #8ed8ea; background: transparent; border: 1px dashed rgba(142, 216, 234, .32); border-radius: 5px; font-size: 13px; font-weight: 800; }
.requirement-add:hover { background: rgba(142, 216, 234, .07); border-style: solid; }
.requirement-path-add { margin-top: 12px; }
.requirement-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 17px; }
.requirement-explainer div { display: grid; grid-template-columns: 37px 1fr; align-items: center; gap: 10px; padding: 11px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.requirement-explainer div:nth-child(1) { border-color: rgba(142, 216, 234, .26); }
.requirement-explainer div:nth-child(2) { border-color: rgba(232, 198, 111, .26); }
.requirement-explainer div:nth-child(3) { border-color: rgba(185, 154, 219, .26); }
.requirement-explainer div:nth-child(2) b { background: #e8c66f; }
.requirement-explainer div:nth-child(3) b { background: #b99adb; }
.requirement-explainer b { display: grid; height: 32px; place-items: center; font-size: 11px; }
.requirement-explainer span { color: rgba(231, 239, 244, .6); font-size: 12px; line-height: 1.4; }
.requirement-result, .creator-picker-result { margin-top: 15px; padding: 12px; background: rgba(4, 14, 23, .65); border: 1px solid rgba(151, 181, 205, .1); border-radius: 5px; }
.requirement-result > span, .creator-picker-result > span { color: rgba(231, 239, 244, .5); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.requirement-result p, .creator-picker-result p { margin: 7px 0 0; color: #e6eef2; font-size: 14px; line-height: 1.5; }
.requirement-result code { display: block; margin-top: 9px; color: #8ed8ea; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.creator-helper-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.creator-helper-actions .button { min-height: 42px; font-size: 14px; }
.creator-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.creator-color-option { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 8px; padding: 10px; color: #dfe9ee; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .12); border-radius: 6px; text-align: left; }
.creator-color-option:hover, .creator-color-option.selected { background: rgba(142, 216, 234, .08); border-color: rgba(142, 216, 234, .35); }
.creator-color-option i { grid-row: 1 / 3; width: 27px; height: 27px; background: var(--picker-color); border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; box-shadow: 0 3px 9px rgba(0, 0, 0, .25); }
.creator-color-option.selected i { box-shadow: 0 0 0 3px rgba(142, 216, 234, .2), 0 3px 9px rgba(0, 0, 0, .25); }
.creator-color-option span { font-size: 13px; font-weight: 800; }
.creator-color-option small { color: rgba(231, 239, 244, .48); font-size: 11px; }
.creator-color-option.selected small { color: #8ed8ea; }
.creator-tag-search { margin-bottom: 17px; }
.creator-tag-group + .creator-tag-group { margin-top: 21px; }
.creator-tag-group > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.creator-tag-group h3 { margin: 5px 0 0; color: #e9f1f4; font-size: 18px; }
.creator-tag-group > header > span { color: rgba(231, 239, 244, .48); font-size: 13px; }
.creator-tag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.creator-tag-option { display: grid; gap: 4px; padding: 10px 11px; color: #dfe9ee; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .11); border-radius: 5px; text-align: left; }
.creator-tag-option:hover, .creator-tag-option.selected { background: rgba(142, 216, 234, .08); border-color: rgba(142, 216, 234, .32); }
.creator-tag-option.selected { box-shadow: inset 3px 0 #8ed8ea; }
.creator-tag-option span { font-size: 13px; font-weight: 800; }
.creator-tag-option small { color: rgba(231, 239, 244, .52); font-size: 11px; line-height: 1.4; }
.creator-tag-option.selected small { color: rgba(190, 235, 246, .7); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.creator-dropzone { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; color: #dce9ef; background: rgba(142, 216, 234, .035); border: 1px dashed rgba(142, 216, 234, .32); border-radius: 6px; cursor: pointer; transition: .18s ease; }
.creator-dropzone:hover, .creator-dropzone:focus, .creator-dropzone.dragging { background: rgba(142, 216, 234, .09); border-color: #8ed8ea; outline: 0; }
.drop-mark { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; color: #0c1725; background: #8ed8ea; border-radius: 50%; font-size: 18px; }
.creator-dropzone strong, .creator-dropzone small { display: block; }
.creator-dropzone strong { font-size: 13px; }
.creator-dropzone small { margin-top: 4px; color: rgba(231, 239, 244, .5); font-size: 13px; }
.creator-file-list { min-height: 24px; padding: 8px 2px 0; color: rgba(231, 239, 244, .5); font-size: 13px; }
.creator-file-list strong { color: #8ed8ea; }
.creator-validation { margin-top: 14px; padding: 11px 12px; color: rgba(231, 239, 244, .62); background: rgba(255, 255, 255, .025); border-left: 2px solid rgba(151, 181, 205, .28); font-size: 13px; line-height: 1.5; }
.creator-validation.is-valid { color: #d3ffad; background: rgba(185, 242, 138, .06); border-left-color: #b9f28a; }
.creator-validation.is-error { color: #ffc1b7; background: rgba(255, 115, 93, .07); border-left-color: #ff735d; }
.creator-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.creator-actions .button { min-height: 38px; }
.creator-publish-note { margin: 14px 0 0; color: rgba(231, 239, 244, .48); font-size: 13px; line-height: 1.55; }
.creator-publish-note strong { color: #d3ffad; }
.creator-preview-stage { display: grid; min-height: 430px; place-items: center; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(83, 126, 129, .34), rgba(7, 15, 24, .84) 68%); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.creator-preview-stage .card-face { width: 260px; height: 399px; flex: 0 0 260px; cursor: default; }
.creator-preview-empty { display: grid; gap: 7px; justify-items: center; color: rgba(231, 239, 244, .36); text-align: center; }
.creator-preview-empty strong { color: rgba(231, 239, 244, .65); font-size: 15px; }
.creator-preview-empty span { font-size: 11px; }
.creator-preview-summary { min-height: 34px; margin-top: 12px; color: rgba(231, 239, 244, .58); font-size: 13px; line-height: 1.5; }
.creator-preview-facts { margin: 0; }
.creator-preview-rules { display: grid; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(151, 181, 205, .14); }
.creator-preview-rules > span { color: #8ed8ea; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.creator-preview-rules section { padding-left: 9px; border-left: 2px solid rgba(142, 216, 234, .28); }
.creator-preview-rules strong { display: block; color: #e8f0f4; font-size: 11px; }
.creator-preview-rules p { margin: 3px 0 0; color: rgba(231, 239, 244, .56); font-size: 11px; line-height: 1.45; }
.creator-change-preview { margin-top: 10px; }
.creator-work-list { display: grid; gap: 6px; }
.creator-work-list > p { margin: 0; color: rgba(231, 239, 244, .45); font-size: 12px; }
.creator-work-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px; color: #e4edf2; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .11); border-radius: 5px; text-align: left; }
.creator-work-item:hover { background: rgba(142, 216, 234, .08); border-color: rgba(142, 216, 234, .26); }
.creator-work-item strong, .creator-work-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-work-item strong { font-size: 13px; }
.creator-work-item small { margin-top: 4px; color: rgba(231, 239, 244, .47); font-size: 11px; }
.creator-work-status { padding: 4px 6px; color: #d3ffad; background: rgba(185, 242, 138, .08); border-radius: 3px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.creator-work-status.suggestion { color: #ffc2b8; background: rgba(255, 115, 93, .09); }
.creator-work-status .impact-badge { margin-right: 6px; }

.card-tile-status { position: absolute; z-index: 2; top: 7px; right: 7px; padding: 4px 6px; color: #20130f; background: #ff9c83; border-radius: 3px; font-size: 7px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, .24); }
.card-tile.is-suggestion { border-color: rgba(255, 156, 131, .32); }
.card-tile-status.change { color: #081b20; background: #8ed8ea; }
.card-tile-status.art { color: #2a0b18; background: #ff8fba; }
.card-tile-status.deprecated { color: #f4e6e2; background: #764f52; border: 1px solid rgba(255, 218, 211, .22); }
.card-tile.has-proposal { border-color: rgba(142, 216, 234, .3); }
.card-tile.is-deprecated { border-color: rgba(190, 145, 145, .26); filter: saturate(.45); opacity: .68; }
.card-tile.is-deprecated:hover, .card-tile.is-deprecated:focus-within { filter: saturate(.65); opacity: .88; }

.creator-meta-state { margin: 13px 0 5px; padding: 14px; background: linear-gradient(110deg, rgba(255, 115, 93, .09), rgba(118, 79, 82, .06)); border: 1px solid rgba(255, 145, 127, .25); border-left: 3px solid #ff927f; border-radius: 6px; }
.creator-meta-state > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.creator-meta-state .eyebrow { color: #ffad9d; }
.creator-meta-state-button { width: auto; min-width: 180px; color: #24100d; background: #ff927f; border-color: #ff927f; font-weight: 900; }
.creator-meta-state-button:hover:not(:disabled) { color: #150806; background: #ffc0b5; border-color: #ffc0b5; }
.creator-meta-state-button.restore { color: #10200d; background: #b9f28a; border-color: #b9f28a; }
.creator-meta-state-button.restore:hover:not(:disabled) { background: #dcffbd; border-color: #dcffbd; }
.creator-meta-state-button.staged { color: rgba(231, 239, 244, .58); background: rgba(255, 255, 255, .06); border-color: rgba(151, 181, 205, .16); }
.creator-meta-state p { margin: 10px 0 0; color: rgba(231, 239, 244, .62); font-size: 12px; line-height: 1.5; }

@media (max-width: 1120px) {
  .creator-layout { grid-template-columns: minmax(440px, 1fr) minmax(280px, 360px); }
  .creator-source-grid.has-original { grid-template-columns: 1fr; }
  .creator-preview-stage .card-face { width: 230px; height: 353px; flex-basis: 230px; }
  .creator-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-property-sections { grid-template-columns: 1fr; }
  .effect-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .creator-layout { grid-template-columns: 1fr; }
  .creator-preview-column { position: static; grid-template-columns: minmax(280px, .9fr) minmax(280px, 1.1fr); }
}
@media (max-width: 620px) {
  .creator-editor { padding: 17px; }
  .creator-editor-head { align-items: start; }
  .creator-editor-actions { align-items: end; flex-direction: column-reverse; gap: 7px; }
  .creator-preview-column { grid-template-columns: 1fr; }
  .creator-actions { display: grid; }
  .creator-actions .button { width: 100%; }
  .creator-source { min-height: 300px; }
  .creator-descriptor-row { grid-template-columns: 1fr; }
  .creator-helper-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .creator-helper-rail button.active { box-shadow: inset 0 -2px #8ed8ea; }
  .creator-helper-panel { padding: 16px 13px; }
  .creator-helper-toolbar { grid-template-columns: 1fr; }
  .creator-trigger-guide, .creator-trigger-controls { grid-template-columns: 1fr; }
  .creator-trigger-guide > code { overflow: hidden; text-overflow: ellipsis; }
  .effect-template-grid, .creator-tag-grid { grid-template-columns: 1fr; max-height: none; }
  .creator-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .requirement-explainer { grid-template-columns: 1fr; }
  .creator-helper-actions { display: grid; }
  .creator-helper-actions .button { width: 100%; }
  .creator-meta-state > div { align-items: stretch; flex-direction: column; }
  .creator-meta-state-button { width: 100%; }
}
@media (max-width: 760px) {
  .creator-helper-dialog { padding: 6px; }
  .creator-helper-modal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .creator-helper-modal-nav { grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 3px; padding: 48px 7px 7px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(151, 181, 205, .15); }
  .creator-helper-modal-nav button { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; gap: 3px; min-width: 64px; padding: 7px 3px; text-align: center; }
  .creator-helper-modal-nav button.active { box-shadow: inset 0 -2px #8ed8ea; }
  .creator-helper-modal-nav button > span { grid-row: auto; font-size: 18px; }
  .creator-helper-modal-nav small { display: none; }
  .creator-helper-panel { padding: 18px 13px; }
}

/* Next patch: public editorial lanes for proposals without pretending they are already live. */
.workshop-wave { padding: 16px; background: rgba(6, 20, 27, .5); border-left: 2px solid #b9f28a; }
.workshop-wave span, .workshop-wave strong, .workshop-wave small { display: block; }
.workshop-wave span { color: #b9f28a; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.workshop-wave strong { margin-top: 10px; color: #f1f7f8; font-size: 23px; font-weight: 620; }
.workshop-wave small { margin-top: 5px; color: rgba(231, 239, 244, .44); font-size: 11px; }
.workshop-lock { width: 100%; margin-top: 13px; padding: 9px 10px; color: #102024; background: #b9f28a; border-color: #b9f28a; font-size: 10px; font-weight: 950; }
.workshop-lock:hover:not(:disabled) { background: #d8ffb9; border-color: #d8ffb9; }
.workshop-lock:disabled { color: rgba(231, 239, 244, .35); background: rgba(255, 255, 255, .05); border-color: rgba(151, 181, 205, .13); cursor: not-allowed; }
.workshop-metrics { display: grid; grid-template-columns: repeat(5, 1fr) 220px; width: min(1720px, 100%); margin-top: 10px; overflow: hidden; background: rgba(151, 181, 205, .12); border: 1px solid rgba(151, 181, 205, .12); border-radius: 6px; gap: 1px; }
.workshop-metrics > div:not(.workshop-wave) { padding: 16px; background: rgba(10, 24, 36, .8); }
.workshop-metrics span, .workshop-metrics strong { display: block; }
.workshop-metrics span { color: rgba(231, 239, 244, .42); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.workshop-metrics strong { margin-top: 7px; color: #d3ffad; font-size: 25px; font-weight: 620; }
.workshop-release-panel { width: min(1720px, 100%); margin-top: 14px; padding: 20px; background: linear-gradient(135deg, rgba(20, 44, 52, .94), rgba(9, 23, 35, .92)); border: 1px solid rgba(185, 242, 138, .2); border-radius: 8px; box-shadow: 0 18px 42px rgba(0, 0, 0, .16); }
.workshop-release-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.workshop-release-panel h2 { margin: 5px 0 0; color: #f2f7f8; font-size: 22px; font-weight: 650; }
.workshop-release-panel header p { margin: 7px 0 0; color: rgba(231, 239, 244, .52); font-size: 13px; }
.workshop-release-state { padding: 6px 8px; color: #f5c96a; background: rgba(245, 201, 106, .08); border: 1px solid rgba(245, 201, 106, .24); border-radius: 3px; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.workshop-release-state.ready, .workshop-release-state.published { color: #b9f28a; background: rgba(185, 242, 138, .08); border-color: rgba(185, 242, 138, .3); }
.workshop-release-state.blocked { color: #ffad9d; background: rgba(255, 115, 93, .08); border-color: rgba(255, 115, 93, .24); }
.workshop-release-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; background: rgba(151, 181, 205, .12); border: 1px solid rgba(151, 181, 205, .12); border-radius: 5px; }
.workshop-release-facts > div { min-width: 0; padding: 13px; background: rgba(4, 16, 25, .54); }
.workshop-release-facts span, .workshop-release-facts strong { display: block; }
.workshop-release-facts span { color: rgba(231, 239, 244, .38); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.workshop-release-facts strong { margin-top: 6px; overflow: hidden; color: #e8f2f4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.workshop-release-blockers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.workshop-release-blockers span { padding: 6px 8px; color: #ffb4a6; background: rgba(255, 115, 93, .07); border: 1px solid rgba(255, 115, 93, .16); border-radius: 3px; font-size: 11px; }
.workshop-release-blockers span.ready { color: #b9f28a; background: rgba(185, 242, 138, .06); border-color: rgba(185, 242, 138, .18); }
.workshop-release-controls { display: grid; grid-template-columns: minmax(260px, 1fr) 250px; align-items: end; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(151, 181, 205, .12); }
.workshop-release-controls label { color: rgba(231, 239, 244, .55); font-size: 11px; font-weight: 800; }
.workshop-release-controls textarea { width: 100%; margin-top: 6px; resize: vertical; }
.workshop-release-controls .workshop-lock { min-height: 46px; margin: 0; }
.workshop-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; width: min(1720px, 100%); margin: 34px 0 13px; }
.workshop-toolbar h2 { margin: 6px 0 0; color: #f0f5f8; font-size: 25px; font-weight: 620; letter-spacing: -.03em; }
.workshop-filters { display: flex; gap: 4px; padding: 3px; background: rgba(10, 24, 36, .66); border: 1px solid rgba(151, 181, 205, .12); border-radius: 5px; }
.workshop-filters button { padding: 7px 9px; color: rgba(231, 239, 244, .5); background: transparent; border: 0; border-radius: 3px; font-size: 11px; font-weight: 800; }
.workshop-filters button:hover, .workshop-filters button.active { color: #0b1b21; background: #8ed8ea; }
.workshop-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(1720px, 100%); }
.workshop-lane { min-height: 400px; padding: 16px; background: linear-gradient(155deg, rgba(19, 35, 51, .88), rgba(9, 22, 34, .78)); border: 1px solid rgba(151, 181, 205, .13); border-top: 2px solid #8ed8ea; border-radius: 7px; }
.workshop-lane.playtest { border-top-color: #f5c96a; }
.workshop-lane.accepted { border-top-color: #b9f28a; }
.workshop-lane > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 5px 3px 14px; }
.workshop-lane > header > span { color: rgba(142, 216, 234, .6); font-size: 11px; font-weight: 900; }
.workshop-lane.playtest > header > span { color: #f5c96a; }
.workshop-lane.accepted > header > span { color: #b9f28a; }
.workshop-lane h3 { margin: 0; color: #edf4f7; font-size: 15px; font-weight: 650; }
.workshop-lane header p { margin: 3px 0 0; color: rgba(231, 239, 244, .38); font-size: 10px; }
.workshop-lane header > strong { color: rgba(231, 239, 244, .36); font-size: 18px; }
.workshop-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-content: start; gap: 9px; }
.workshop-proposal { padding: 8px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .11); border-radius: 5px; }
.workshop-proposal.update { background: linear-gradient(120deg, rgba(142, 216, 234, .055), transparent 70%), rgba(255, 255, 255, .02); }
.workshop-proposal.new { background: linear-gradient(120deg, rgba(255, 156, 131, .055), transparent 70%), rgba(255, 255, 255, .02); }
.workshop-proposal.artwork { background: linear-gradient(120deg, rgba(255, 123, 172, .07), transparent 70%), rgba(255, 255, 255, .02); }
.workshop-proposal:hover { border-color: rgba(142, 216, 234, .3); }
.workshop-proposal-main { display: grid; grid-template-columns: 63px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 0; color: #ebf2f5; background: transparent; border: 0; text-align: left; }
.workshop-card-art { display: grid; place-items: center; width: 63px; height: 72px; overflow: hidden; color: rgba(142, 216, 234, .5); background: #13283a; border-radius: 4px; font-size: 25px; font-weight: 700; }
.workshop-card-art img { width: 100%; height: 100%; object-fit: cover; }
.workshop-proposal-copy { min-width: 0; }
.workshop-proposal-copy > span, .workshop-proposal-copy > strong, .workshop-proposal-copy > small { display: block; }
.workshop-kind { color: #8ed8ea; font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.workshop-proposal.new .workshop-kind { color: #ff9c83; }
.workshop-proposal.artwork .workshop-kind { color: #ff9cc1; }
.workshop-proposal-copy strong { margin-top: 5px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.workshop-proposal-copy small { margin-top: 5px; color: rgba(231, 239, 244, .48); font-size: 11px; line-height: 1.4; }
.workshop-proposal-flags { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.workshop-proposal-flags b { padding: 3px 4px; color: #8ed8ea; background: rgba(142, 216, 234, .07); border-radius: 2px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.workshop-proposal-flags b.blocked { color: #ffb1a3; background: rgba(255, 115, 93, .08); }
.workshop-proposal-flags b.resolved { color: #f5c96a; background: rgba(245, 201, 106, .08); }
.workshop-proposal-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 7px; color: rgba(231, 239, 244, .32); border-top: 1px solid rgba(151, 181, 205, .09); font-size: 10px; }
.workshop-empty { display: grid; gap: 5px; padding: 22px 12px; color: rgba(231, 239, 244, .36); border: 1px dashed rgba(151, 181, 205, .12); border-radius: 5px; }
.workshop-empty strong { color: rgba(231, 239, 244, .58); font-size: 12px; }
.workshop-empty span { font-size: 13px; line-height: 1.45; }
.workshop-resolved { width: min(1720px, 100%); margin-top: 14px; padding: 15px; background: rgba(9, 22, 34, .65); border: 1px solid rgba(151, 181, 205, .11); border-radius: 7px; }
.workshop-resolved > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.workshop-resolved h3 { margin: 5px 0 0; color: #e6eef2; font-size: 15px; font-weight: 620; }
.workshop-resolved header > strong { color: rgba(231, 239, 244, .34); font-size: 20px; }
.workshop-resolved-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.workshop-resolved-list > .workshop-empty { grid-column: 1 / -1; }
.workshop-detail { position: fixed; z-index: 72; inset: 0; display: grid; place-items: center; padding: 20px; }
.workshop-detail-backdrop { position: absolute; inset: 0; background: rgba(4, 12, 18, .86); backdrop-filter: blur(8px); }
.workshop-detail-shell { position: relative; width: min(980px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 25px; background: linear-gradient(145deg, #172d3d, #0c1928); border: 1px solid rgba(142, 216, 234, .23); border-radius: 9px; box-shadow: 0 30px 90px rgba(0, 0, 0, .48); }
.workshop-detail-shell > header { display: flex; justify-content: space-between; gap: 20px; padding-right: 30px; }
.workshop-detail-shell > header h2 { margin: 6px 0 4px; color: #f2f7f9; font-size: 31px; font-weight: 650; letter-spacing: -.04em; }
.workshop-detail-shell > header p { margin: 0; color: rgba(231, 239, 244, .48); font-size: 13px; }
.workshop-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 21px; }
.workshop-compare > section { display: grid; justify-items: center; gap: 10px; min-height: 390px; padding: 13px; background: rgba(255, 255, 255, .022); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.workshop-compare > section:last-child { background: linear-gradient(145deg, rgba(185, 242, 138, .055), rgba(255, 255, 255, .018)); border-color: rgba(185, 242, 138, .16); }
.workshop-compare > section:last-child > .eyebrow { color: #b9f28a; }
.workshop-compare > section > .eyebrow { justify-self: start; }
.workshop-compare-card { display: grid; place-items: center; width: 100%; min-height: 340px; }
.workshop-compare-card .card-face { width: 220px; height: 338px; flex: 0 0 220px; cursor: default; }
.workshop-no-live { display: grid; gap: 6px; place-items: center; color: rgba(231, 239, 244, .4); text-align: center; }
.workshop-no-live strong { color: rgba(231, 239, 244, .7); font-size: 14px; }
.workshop-no-live span { font-size: 11px; }
.workshop-diff { margin-top: 12px; padding: 15px; background: rgba(3, 12, 20, .32); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.workshop-diff > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; }
.workshop-diff > summary::-webkit-details-marker { display: none; }
.workshop-diff h3 { margin: 5px 0 0; color: #edf4f6; font-size: 16px; font-weight: 620; }
.workshop-diff > summary + div { margin-top: 12px; }
.workshop-diff-action { color: #8ed8ea; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.workshop-diff-action b { font-weight: inherit; }
.workshop-diff-action b:nth-child(2) { display: none; }
.workshop-diff[open] .workshop-diff-action b:first-child { display: none; }
.workshop-diff[open] .workshop-diff-action b:nth-child(2) { display: inline; }
.workshop-diff[open] .workshop-diff-action { color: #b9f28a; }
.workshop-diff-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); border-top: 1px solid rgba(151, 181, 205, .07); }
.workshop-diff-row:first-child { border-top: 0; }
.workshop-diff-row > span { display: grid; place-items: center; color: #b9f28a; background: rgba(185, 242, 138, .07); font-size: 11px; font-weight: 950; }
.workshop-diff-row.removed > span { color: #ff9c83; background: rgba(255, 115, 93, .08); }
.workshop-diff-row pre { margin: 0; padding: 7px 9px; overflow-x: auto; color: #dce8ed; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; white-space: pre-wrap; }
.workshop-diff-row.added pre { background: rgba(185, 242, 138, .035); }
.workshop-diff-row.removed pre { color: rgba(255, 193, 183, .75); background: rgba(255, 115, 93, .035); }
.workshop-no-diff { padding: 12px; color: rgba(231, 239, 244, .45); font-size: 11px; }
.workshop-artwork-diff { display: grid; gap: 7px; padding: 13px; color: rgba(231, 239, 244, .7); background: rgba(255, 123, 172, .055); border-left: 2px solid #ff7bac; }
.workshop-artwork-diff strong { color: #ffb4d0; font-size: 14px; }
.workshop-artwork-diff p { margin: 0; line-height: 1.5; }
.workshop-artwork-diff small { color: rgba(231, 239, 244, .43); font-family: ui-monospace, monospace; }
.workshop-governance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.workshop-governance > div { padding: 15px; background: rgba(3, 12, 20, .24); border: 1px solid rgba(151, 181, 205, .1); border-radius: 6px; }
.workshop-governance h3, .workshop-reviewer h3 { margin: 5px 0 11px; color: #edf4f6; font-size: 16px; font-weight: 620; }
#workshopRelationshipSummary p { margin: 6px 0 0; color: rgba(231, 239, 244, .56); font-size: 13px; line-height: 1.45; }
#workshopRelationshipSummary strong { color: #8ed8ea; }
#workshopRelationshipSummary .workshop-blocker { padding: 7px 8px; color: #ffc1b7; background: rgba(255, 115, 93, .06); border-left: 2px solid #ff735d; }
.workshop-no-relationships { color: rgba(231, 239, 244, .36) !important; }
.workshop-audit-list { display: grid; gap: 5px; }
.workshop-audit-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; padding: 7px 0; border-top: 1px solid rgba(151, 181, 205, .08); }
.workshop-audit-list > div:first-child { border-top: 0; }
.workshop-audit-list span { color: #f5c96a; font-size: 10px; font-weight: 850; }
.workshop-audit-list strong { color: #e4edf1; font-size: 11px; font-weight: 650; }
.workshop-audit-list small { grid-column: 1 / -1; color: rgba(231, 239, 244, .38); font-size: 10px; line-height: 1.4; }
.workshop-audit-list > p { color: rgba(231, 239, 244, .36); font-size: 11px; }
.workshop-reviewer { margin-top: 12px; padding: 16px; background: linear-gradient(120deg, rgba(185, 242, 138, .07), rgba(142, 216, 234, .04)); border: 1px solid rgba(185, 242, 138, .2); border-radius: 6px; }
.workshop-review-grid { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 9px; }
.workshop-review-grid label { color: rgba(231, 239, 244, .55); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.workshop-review-grid select, .workshop-review-grid textarea { width: 100%; margin-top: 5px; text-transform: none; }
.workshop-review-grid textarea { min-height: 74px; resize: vertical; }
.workshop-reviewer > .button { margin-top: 9px; }
.workshop-review-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.workshop-relationship-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.workshop-relationship-editor > div { min-width: 0; padding: 10px; background: rgba(3, 12, 20, .23); border: 1px solid rgba(151, 181, 205, .09); border-radius: 5px; }
.workshop-relationship-editor > div > div { display: grid; gap: 4px; margin-top: 7px; }
.workshop-relationship-editor label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px; color: #e3edf1; background: rgba(255, 255, 255, .025); border-radius: 3px; font-size: 11px; }
.workshop-relationship-editor label small { color: rgba(231, 239, 244, .37); font-size: 10px; }
.workshop-relationship-editor p { margin: 5px 0 0; color: rgba(231, 239, 244, .34); font-size: 10px; }
.workshop-detail-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.workshop-detail-shell > footer > span { color: #d3ffad; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
body.workshop-detail-open { overflow: hidden; }

@media (max-width: 1050px) {
  .workshop-lanes { grid-template-columns: 1fr; }
  .workshop-lane { min-height: 180px; }
  .workshop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-resolved-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .workshop-metrics { grid-template-columns: repeat(2, 1fr); }
  .workshop-release-panel > header { flex-direction: column; }
  .workshop-release-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-release-controls { grid-template-columns: 1fr; }
  .workshop-toolbar { align-items: start; flex-direction: column; }
  .workshop-filters { width: 100%; overflow-x: auto; }
  .workshop-filters button { flex: 1 0 auto; }
  .workshop-list { grid-template-columns: 1fr; }
  .workshop-resolved-list, .workshop-governance, .workshop-review-grid, .workshop-relationship-editor { grid-template-columns: 1fr; }
  .workshop-detail { padding: 8px; }
  .workshop-detail-shell { max-height: calc(100dvh - 16px); padding: 18px; }
  .workshop-compare { grid-template-columns: 1fr; }
  .workshop-compare > section { min-height: 350px; }
  .workshop-detail-shell > footer { align-items: stretch; flex-direction: column; }
}

/* Profile: one legible ledger for every contribution the current tester has made. */
.profile-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1240px; padding: 30px; overflow: hidden; background: linear-gradient(118deg, rgba(34, 72, 76, .96), rgba(18, 37, 53, .9) 60%, rgba(89, 59, 48, .72)); border: 1px solid rgba(185, 242, 138, .18); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .2); }
.profile-hero-identity { display: flex; align-items: center; gap: 20px; }
.profile-hero-avatar { display: grid; place-items: center; width: 88px; height: 88px; flex: 0 0 88px; color: #102328; background: linear-gradient(145deg, #f5c96a, #b9f28a); border: 5px solid rgba(255, 255, 255, .09); border-radius: 50%; font-size: 32px; font-weight: 900; box-shadow: 0 15px 35px rgba(0, 0, 0, .25); overflow: hidden; }
.profile-hero-avatar-button { position: relative; flex: 0 0 88px; width: 88px; height: 88px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.profile-hero-avatar-button:focus-visible .profile-hero-avatar { outline: 2px solid var(--mint); outline-offset: 3px; }
.avatar-edit-hint { position: absolute; inset: auto 0 -3px 0; display: grid; place-items: center; padding: 4px 0; color: #102328; background: var(--mint); border-radius: 0 0 40px 40px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.profile-hero-avatar-button:hover .avatar-edit-hint, .profile-hero-avatar-button:focus-visible .avatar-edit-hint { opacity: 1; transform: translateY(0); }
.profile-hero h1 { margin: 6px 0 3px; color: #f7fbfd; font-size: clamp(30px, 5vw, 53px); font-weight: 650; letter-spacing: -.05em; line-height: 1; }
.profile-hero p { margin: 0; color: rgba(231, 239, 244, .62); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.profile-metrics { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1240px; margin-top: 10px; background: rgba(151, 181, 205, .12); border: 1px solid rgba(151, 181, 205, .14); border-radius: 7px; gap: 1px; overflow: hidden; }
.profile-metrics > div { min-height: 92px; padding: 18px; background: rgba(12, 25, 37, .78); }
.profile-metrics strong, .profile-metrics span { display: block; }
.profile-metrics strong { color: #d3ffad; font-size: 28px; font-weight: 600; }
.profile-metrics span { margin-top: 7px; color: rgba(231, 239, 244, .48); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.profile-privacy-note { display: flex; align-items: center; gap: 13px; max-width: 1240px; margin-top: 10px; padding: 12px 15px; color: rgba(231, 239, 244, .6); background: rgba(142, 216, 234, .045); border: 1px solid rgba(142, 216, 234, .14); border-radius: 6px; }
.profile-privacy-note > span { padding: 4px 6px; color: #8ed8ea; background: rgba(142, 216, 234, .09); border-radius: 3px; font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.profile-privacy-note p { margin: 0; font-size: 13px; line-height: 1.5; }
.profile-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 38px 0 14px; }
.profile-section-heading h2 { margin: 6px 0 0; color: #f0f5f8; font-size: 25px; font-weight: 620; letter-spacing: -.03em; }
.profile-local-label { color: rgba(231, 239, 244, .38); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.profile-card-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1240px; }
.profile-collection, .profile-activity-card { background: linear-gradient(145deg, rgba(19, 35, 51, .88), rgba(10, 23, 35, .76)); border: 1px solid rgba(151, 181, 205, .14); border-radius: 8px; }
.profile-collection { min-height: 265px; padding: 19px; }
.profile-collection.private { border-top: 2px solid #8ed8ea; }
.profile-collection.public { border-top: 2px solid #ff9c83; }
.profile-collection > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.profile-collection header h3 { margin: 5px 0 0; color: #edf4f7; font-size: 17px; font-weight: 620; }
.profile-collection header > strong { color: rgba(231, 239, 244, .38); font-size: 25px; font-weight: 600; }
.profile-collection > p { margin: 8px 0 15px; color: rgba(231, 239, 244, .43); font-size: 11px; }
.profile-collection-mark { color: #8ed8ea; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.profile-collection.public .profile-collection-mark { color: #ff9c83; }
.profile-item-list { display: grid; gap: 6px; }
.profile-card-item { display: flex; align-items: center; gap: 8px; padding: 7px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .1); border-radius: 5px; }
.profile-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 0; color: #e9f0f4; background: transparent; border: 0; text-align: left; }
.profile-card-main > span:last-child { min-width: 0; }
.profile-card-main strong, .profile-card-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-main strong { font-size: 13px; }
.profile-card-main small { margin-top: 4px; color: rgba(231, 239, 244, .43); font-size: 11px; }
.profile-card-main:hover strong { color: #d3ffad; }
.profile-card-art { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; color: rgba(142, 216, 234, .55); background: #172b3a; border-radius: 4px; font-size: 20px; font-weight: 700; }
.profile-card-art img { width: 100%; height: 100%; object-fit: cover; }
.profile-withdraw { flex: 0 0 auto; padding: 6px 8px; color: #ffb1a3; background: rgba(255, 115, 93, .05); border: 1px solid rgba(255, 115, 93, .18); border-radius: 4px; font-size: 10px; font-weight: 850; }
.profile-withdraw:hover { color: #fff; background: rgba(255, 115, 93, .18); }
.profile-private-pill { flex: 0 0 auto; color: #8ed8ea; font-size: 10px; font-weight: 850; }
.profile-private-pill.review-state { max-width: 92px; color: #f5c96a; text-align: right; }
.profile-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1240px; }
.profile-activity-card { min-height: 235px; padding: 17px; }
.profile-activity-card > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid rgba(151, 181, 205, .12); }
.profile-activity-card > header span { color: #8ed8ea; font-size: 11px; font-weight: 900; }
.profile-activity-card > header h3 { margin: 0; color: #ecf3f6; font-size: 15px; font-weight: 620; }
.profile-activity-item { display: grid; width: 100%; gap: 4px; padding: 10px; color: #e8eff3; background: rgba(255, 255, 255, .025); border: 1px solid rgba(151, 181, 205, .09); border-radius: 4px; text-align: left; }
.profile-activity-item:hover { background: rgba(142, 216, 234, .07); border-color: rgba(142, 216, 234, .22); }
.profile-activity-item strong { font-size: 12px; }
.profile-activity-item span { color: rgba(231, 239, 244, .59); font-size: 12px; line-height: 1.4; }
.profile-activity-item small { color: rgba(231, 239, 244, .35); font-size: 10px; }
.profile-emoji-line { color: #f5c96a !important; font-size: 16px !important; letter-spacing: .04em; }
.profile-empty { display: grid; gap: 5px; padding: 18px 12px; color: rgba(231, 239, 244, .38); border: 1px dashed rgba(151, 181, 205, .13); border-radius: 5px; }
.profile-empty strong { color: rgba(231, 239, 244, .62); font-size: 12px; }
.profile-empty span { font-size: 11px; line-height: 1.45; }

@media (max-width: 780px) {
  .profile-hero { align-items: start; flex-direction: column; padding: 21px; }
  .profile-hero-avatar { width: 68px; height: 68px; flex-basis: 68px; font-size: 25px; }
  .profile-metrics { grid-template-columns: repeat(2, 1fr); }
  .profile-card-columns, .profile-activity-grid { grid-template-columns: 1fr; }
  .profile-section-heading { align-items: start; flex-direction: column; }
}
@media (max-width: 440px) {
  .profile-hero-identity { align-items: start; flex-direction: column; }
  .profile-metrics { grid-template-columns: 1fr; }
  .profile-metrics > div { min-height: 72px; }
  .profile-privacy-note { align-items: start; }
  .profile-card-item { align-items: stretch; flex-direction: column; }
  .profile-withdraw { width: 100%; }
}

/* Contribution shortcuts: small pencil affordances where cards are already being read. */
.pencil-icon { display: block; width: 15px; height: 15px; }
.thread-top-actions { display: inline-flex; align-items: center; gap: 7px; }
.thread-edit-card, .card-tile-edit { display: grid; place-items: center; color: #f6d477; background: rgba(246, 212, 119, .08); border: 1px solid rgba(246, 212, 119, .26); border-radius: 4px; transition: .16s ease; }
.thread-edit-card { width: 25px; height: 25px; padding: 0; }
.thread-edit-card:hover, .card-tile-edit:hover { color: #fff3bd; background: rgba(246, 212, 119, .18); border-color: rgba(246, 212, 119, .55); box-shadow: 0 0 15px rgba(246, 212, 119, .13); }
.card-tile { position: relative; }
.card-tile-open { display: block; width: 100%; height: 100%; padding: 0; color: inherit; background: transparent; border: 0; text-align: left; }
.card-tile-edit { position: absolute; z-index: 4; top: 7px; right: 7px; width: 29px; height: 29px; padding: 0; opacity: .72; backdrop-filter: blur(5px); }
.card-tile:has(.card-tile-edit) .card-tile-status { top: 42px; }
.card-tile:hover .card-tile-edit, .card-tile-edit:focus-visible { opacity: 1; }
.card-tile:has(.card-tile-edit) .card-tile-art { cursor: pointer; }
.inspector-discussion .comment-form { grid-template-columns: minmax(0, 1fr) auto auto; }
.inspector-discussion .comment-form .suggest-edit-button, .suggest-edit-button { color: #2a210d; background: #f6d477; border: 1px solid #f6d477; }
.inspector-discussion .comment-form .suggest-edit-button:hover, .suggest-edit-button:hover { color: #171207; background: #ffe7a0; border-color: #ffe7a0; box-shadow: 0 7px 20px rgba(246, 212, 119, .17); transform: translateY(-1px); }
.suggest-edit-button .pencil-icon { width: 13px; height: 13px; }
.creator-post-box { margin-top: 13px; padding: 13px; background: rgba(246, 212, 119, .035); border: 1px solid rgba(246, 212, 119, .15); border-radius: 6px; }
.creator-post-box .creator-label { margin-top: 0; }
.creator-post-box textarea { width: 100%; min-height: 92px; resize: vertical; line-height: 1.5; }
.creator-post-box > span { display: block; margin-top: 7px; color: rgba(231, 239, 244, .42); font-size: 13px; line-height: 1.45; }
.comment-author-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.inspector-discussion .creator-comment, .creator-comment { border-color: rgba(246, 218, 133, .25); border-left: 2px solid #f6da85; box-shadow: -4px 0 16px rgba(246, 218, 133, .11); }
.creator-comment-tag { padding: 3px 5px; color: #f9df91; background: rgba(246, 218, 133, .07); border: 1px solid rgba(246, 218, 133, .24); border-radius: 3px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 9px rgba(246, 218, 133, .25); }
.creator-comment-tag.proposal-record-tag { color: #8ed8ea; background: rgba(142, 216, 234, .07); border-color: rgba(142, 216, 234, .24); text-shadow: 0 0 9px rgba(142, 216, 234, .22); }
.comment-list-empty { padding: 28px 18px; color: rgba(231, 239, 244, .48); background: rgba(255, 255, 255, .018); border: 1px dashed rgba(151, 181, 205, .16); border-radius: 6px; font-size: 13px; text-align: center; }
.impact-badge { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .09em; line-height: 1; vertical-align: middle; }
.impact-buff { color: #cfffaa; background: rgba(185, 242, 138, .1); }
.impact-nerf { color: #ff9c8c; background: rgba(255, 115, 93, .11); }
.impact-change { color: #9de7f5; background: rgba(142, 216, 234, .1); }
.impact-art { color: #ff9cc1; background: rgba(255, 123, 172, .11); }
.impact-badge + .impact-badge { margin-left: 4px; }
.proposal-change-summary, .proposal-change-entry > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px; color: #eaf2f5; background: linear-gradient(110deg, rgba(142, 216, 234, .07), rgba(246, 218, 133, .04)); border: 1px solid rgba(142, 216, 234, .18); border-radius: 5px; text-align: left; cursor: pointer; }
.proposal-change-summary:hover, .proposal-change-entry > summary:hover { background: linear-gradient(110deg, rgba(142, 216, 234, .13), rgba(246, 218, 133, .08)); border-color: rgba(142, 216, 234, .36); }
.proposal-change-entry { margin-top: 12px; }
.proposal-change-entry > summary { list-style: none; }
.proposal-change-entry > summary::-webkit-details-marker { display: none; }
.proposal-change-kicker { color: #d7f6ff; font-family: Georgia, serif; font-size: 18px; font-weight: 400; letter-spacing: -.02em; }
.proposal-change-kicker.artwork { color: #ff9cc1; }
.proposal-change-copy { min-width: 0; }
.proposal-change-copy strong, .proposal-change-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proposal-change-copy > strong { color: rgba(240, 245, 247, .64); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.proposal-change-copy > small { margin-top: 6px; color: rgba(231, 239, 244, .46); font-size: 10px; }
.proposal-stat-changes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.proposal-stat-change { display: inline-flex; align-items: baseline; gap: 4px; color: #e8f2f5; font-family: Georgia, serif; font-size: 23px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }
.proposal-stat-change i { color: rgba(231, 239, 244, .38); font-family: inherit; font-size: 15px; font-style: normal; }
.proposal-stat-change em { margin-left: 1px; color: currentColor; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: .08em; opacity: .72; }
.proposal-stat-change.cost { color: #ff9c83; }
.proposal-stat-change.attack { color: #ffe08a; }
.proposal-stat-change.health { color: #ff8b8b; }
.proposal-stat-changes.new-card .proposal-stat-change { font-size: 19px; }
.proposal-change-action { color: #f6da85; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.proposal-change-collapse { display: none; }
.proposal-change-entry[open] .proposal-change-expand { display: none; }
.proposal-change-entry[open] .proposal-change-collapse { display: inline; }
.proposal-change-expanded { padding-top: 1px; }
.creator-comment-compare { margin-top: 10px; }
.creator-comment-compare > section { min-height: 330px; padding: 10px; }
.creator-comment-compare .workshop-compare-card { min-height: 290px; }
.creator-comment-compare .workshop-compare-card .card-face { width: 188px; height: 289px; flex-basis: 188px; }
.creator-comment-diff { padding: 12px; }
.proposal-inline-diff > header + div { margin-top: 12px; }
.proposal-inline-diff > header .eyebrow { color: #8ed8ea; }
.proposal-inline-diff.artwork-change > header .eyebrow { color: #ff9cc1; }
.proposal-change-entry.artwork-change > summary { background: linear-gradient(110deg, rgba(255, 123, 172, .09), rgba(246, 218, 133, .035)); border-color: rgba(255, 123, 172, .24); }
.proposal-change-entry.artwork-change > summary:hover { background: linear-gradient(110deg, rgba(255, 123, 172, .15), rgba(246, 218, 133, .06)); border-color: rgba(255, 123, 172, .42); }
.workshop-diff.artwork-change > summary .eyebrow { color: #ff9cc1; }
.workshop-compare.artwork-only > section { min-height: 320px; }
.workshop-compare.artwork-only > section:last-child { background: linear-gradient(145deg, rgba(255, 123, 172, .06), rgba(255, 255, 255, .018)); border-color: rgba(255, 123, 172, .18); }
.workshop-compare.artwork-only > section:last-child > .eyebrow { color: #ff9cc1; }
.workshop-compare.artwork-only .workshop-compare-card { min-height: 270px; }
.workshop-art-preview { display: grid; justify-items: center; gap: 7px; width: min(280px, 100%); text-align: center; }
.workshop-art-preview-image { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; color: rgba(255, 156, 193, .65); background: linear-gradient(145deg, #192b3b, #0b1724); border: 1px solid rgba(255, 123, 172, .2); border-radius: 5px; }
.workshop-art-preview-image img { width: 100%; height: 100%; object-fit: cover; }
.workshop-art-placeholder { font-family: Georgia, serif; font-size: 34px; letter-spacing: .08em; }
.workshop-art-preview strong { color: #f2f7f9; font-size: 14px; }
.workshop-art-preview small { color: rgba(231, 239, 244, .45); font-family: ui-monospace, monospace; font-size: 10px; overflow-wrap: anywhere; }
.workshop-art-result { display: grid; justify-items: center; gap: 8px; width: min(280px, 100%); padding: 35px 24px; color: #ffb4d0; background: rgba(255, 123, 172, .055); border: 1px dashed rgba(255, 123, 172, .3); border-radius: 6px; text-align: center; }
.workshop-art-result > span { font-family: Georgia, serif; font-size: 38px; line-height: 1; }
.workshop-art-result strong { color: #f7d7e4; font-size: 16px; }
.workshop-art-result small { color: rgba(231, 239, 244, .52); font-size: 11px; line-height: 1.45; }
.workshop-art-result.removed { color: #ff8ca4; background: rgba(255, 93, 125, .055); border-color: rgba(255, 93, 125, .32); }
.creator-comment-compare.artwork-only .workshop-art-preview, .creator-comment-compare.artwork-only .workshop-art-result { width: min(220px, 100%); }

@media (max-width: 700px) {
  .inspector-discussion .comment-form { grid-template-columns: minmax(0, 1fr) auto; }
  .inspector-discussion .comment-form .suggest-edit-button { grid-column: 1 / -1; width: 100%; }
  .proposal-change-summary, .proposal-change-entry > summary { grid-template-columns: 1fr auto; }
  .proposal-change-kicker { grid-column: 1 / -1; }
  .creator-impact-control { grid-template-columns: 1fr; }
  .creator-impact-control p { margin-top: 8px; }
}

/* ---------------------------------------------------------------- auth screen */

.auth-banner { padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; line-height: 1.45; }
.auth-banner-info { border-color: rgba(185, 242, 138, .35); background: rgba(185, 242, 138, .09); color: var(--mint); }
.auth-banner-error { border-color: rgba(255, 115, 93, .4); background: rgba(255, 115, 93, .1); color: var(--coral); }
.onboarding-form [data-auth-pane] { display: grid; gap: 4px; }

/* ---------------------------------------------------------------- administration */

.nav-item-admin { color: var(--yellow); }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-bottom: 18px; }
.admin-stat { padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); display: grid; gap: 2px; }
.admin-stat strong { font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.admin-stat small { color: var(--muted); font-size: 11px; }

.admin-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-panel { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); margin-bottom: 16px; }
.admin-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.admin-panel-head h2 { margin: 2px 0 0; font-size: 19px; }
.admin-search { margin-bottom: 11px; }
.admin-list { display: grid; gap: 8px; }
.admin-empty { color: var(--muted); font-size: 13px; margin: 4px 0; }

.admin-wav-cleanup .admin-panel-head p { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.admin-wav-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-wav-toolbar .search-box { flex: 1 1 420px; max-width: 620px; }
.admin-wav-selection-actions { display: flex; gap: 12px; }
.admin-wav-selection-actions select { min-height: 32px; padding: 4px 8px; color: var(--paper); background: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.admin-wav-summary { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; color: var(--paper-dim); background: rgba(246, 218, 133, .06); border: 1px solid rgba(246, 218, 133, .18); border-radius: 10px; font-size: 12px; }
.admin-wav-summary strong { color: var(--yellow); font-size: 18px; }
.admin-wav-summary small { color: var(--muted); }
.admin-wav-summary span { margin-left: auto; color: var(--mint); font-weight: 800; }
.admin-wav-list { display: grid; gap: 8px; max-height: 680px; margin: 10px 0; overflow-y: auto; }
.admin-wav-row { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(240px, 1fr) minmax(220px, .8fr); gap: 14px; align-items: center; padding: 12px; background: var(--panel-light); border: 1px solid var(--line); border-radius: 11px; }
.admin-wav-row.selected { border-color: rgba(185, 242, 138, .5); background: rgba(185, 242, 138, .055); }
.admin-wav-choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.admin-wav-choice input { width: auto; margin-top: 3px; accent-color: var(--mint); }
.admin-wav-choice span, .admin-wav-history { display: grid; gap: 3px; min-width: 0; }
.admin-wav-choice strong { font-size: 13px; overflow-wrap: anywhere; }
.admin-wav-kind { width: max-content; padding: 2px 6px; color: var(--yellow); background: rgba(246, 218, 133, .1); border-radius: 999px; font-size: 8.5px; letter-spacing: .07em; }
.admin-wav-kind.history { color: #8ed8ea; background: rgba(142, 216, 234, .1); }
.admin-wav-choice small, .admin-wav-history small { color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }
.admin-wav-history { color: var(--paper-dim); font-size: 11.5px; }
.admin-wav-row audio { width: 100%; height: 34px; }
.admin-wav-delete-bar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-wav-delete-bar label { display: grid; gap: 5px; color: var(--paper-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.admin-wav-delete-bar input { text-transform: none; letter-spacing: normal; }
.admin-wav-error { padding: 12px; color: var(--coral); border: 1px solid rgba(255, 115, 93, .3); border-radius: 10px; background: rgba(255, 115, 93, .07); }

.admin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-light); }
.admin-row-suspended { opacity: .62; }
.admin-row-main { display: grid; gap: 1px; min-width: 0; }
.admin-row-main strong { font-size: 14px; }
.admin-row-main small { color: var(--paper-dim); font-size: 11.5px; overflow-wrap: anywhere; }
.admin-row-meta { color: var(--muted) !important; }
.admin-row-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.admin-row-controls select { min-height: 30px; padding: 3px 7px; font-size: 12px; border-radius: 8px; background: var(--ink); color: var(--paper); border: 1px solid var(--line); }
.admin-row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.text-button-danger { color: var(--coral); }
.admin-you { color: var(--mint); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

.admin-status { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.admin-status-active { color: var(--mint); background: rgba(185, 242, 138, .13); }
.admin-status-suspended, .admin-status-revoked { color: var(--coral); background: rgba(255, 115, 93, .13); }
.admin-status-expired, .admin-status-used { color: var(--muted); background: rgba(120, 144, 149, .16); }

.admin-audit { display: grid; gap: 5px; max-height: 380px; overflow-y: auto; }
.admin-audit-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 11px; align-items: baseline; padding: 7px 10px; border-radius: 8px; background: var(--panel-light); font-size: 12.5px; }
.admin-audit-action { color: var(--yellow); font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.admin-audit-body { display: grid; gap: 1px; min-width: 0; }
.admin-audit-body small { color: var(--muted); font-size: 11px; }
.admin-audit-time { color: var(--muted); font-size: 11px; white-space: nowrap; }

.admin-password-row { display: flex; gap: 7px; }
.admin-password-row input { flex: 1 1 auto; min-width: 0; }
.admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.admin-field-row label { display: grid; gap: 4px; }
.admin-checkbox { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--paper-dim); margin: 4px 0 2px; }
.admin-checkbox input { width: auto; }
.admin-link-box { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-deep); margin: 10px 0 13px; overflow-x: auto; }
.admin-link-box code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--mint); white-space: nowrap; }

@media (max-width: 980px) {
  .admin-columns { grid-template-columns: minmax(0, 1fr); }
  .admin-audit-row { grid-template-columns: minmax(0, 1fr); }
  .admin-audit-time { grid-row: 1; justify-self: end; }
  .admin-wav-row { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); }
  .admin-wav-row audio { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .admin-wav-toolbar, .admin-wav-summary { align-items: stretch; flex-direction: column; }
  .admin-wav-summary span { margin-left: 0; }
  .admin-wav-row, .admin-wav-delete-bar { grid-template-columns: minmax(0, 1fr); }
}
.admin-locked { color: var(--coral); font-weight: 800; }
/* A required dialog has no exits: the server refuses every other route until it is resolved. */
.modal-required .modal-close { display: none; }
.modal-required .profile-logout { margin-top: 14px; }
/* Staged artwork is visibly not yet shared. */
.artwork-availability.website-only { color: var(--yellow); }
.profile-usage-note { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; }