:root {
  --bg: #181a1d;
  --bg-accent: #2a2d31;
  --surface: #22262b;
  --surface-muted: #2a2f34;
  --text: #e5e8ea;
  --text-soft: #a7b0b7;
  --border: #3a4148;
  --brand: #d0762c;
  --brand-dark: #9b4f1d;
  --danger: #c84a3f;
  --ok: #4fa172;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  --site-background-image: none;
  --hero-banner-image: url("/static/hero_tank.svg");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", "Noto Sans", sans-serif;
  color: var(--text);
  background-image:
    linear-gradient(180deg, rgba(29, 31, 35, 0.78), rgba(24, 26, 29, 0.88)),
    var(--site-background-image),
    radial-gradient(1200px 560px at -15% -12%, #343a40, transparent 70%),
    radial-gradient(1000px 460px at 110% 8%, #2e3237, transparent 70%),
    linear-gradient(180deg, #1d1f23 0%, var(--bg) 100%);
  background-position: center, center, -15% -12%, 110% 8%, center;
  background-size: auto, cover, auto, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

.page-shell {
  width: min(1280px, calc(100vw - 32px));
  margin: 20px auto 32px;
}

.topbar {
  background: linear-gradient(120deg, #24272c 0%, #1d2024 50%, #2b2f35 100%);
  border: 1px solid #3a4048;
  border-radius: 18px;
  color: #e3e6e8;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topbar-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 18px 12px;
}

.brand-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.brand-version {
  margin-top: 2px;
  font-size: 12px;
  color: #b1b8be;
}

.lang-switch {
  font-size: 13px;
  color: #c4c9ce;
}

.lang-switch a {
  color: #f0f2f4;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid #343b43;
  background: rgba(11, 12, 14, 0.28);
}

.main-nav a,
.main-nav button {
  color: #e8ecef;
  text-decoration: none;
  border: 1px solid #4a525b;
  background: linear-gradient(180deg, rgba(55, 60, 68, 0.74), rgba(37, 41, 47, 0.74));
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.18s ease;
}

.main-nav a:hover,
.main-nav button:hover {
  transform: translateY(-1px);
  border-color: #8f99a4;
  background: linear-gradient(180deg, rgba(72, 78, 86, 0.82), rgba(43, 48, 55, 0.82));
}

.nav-logout-form {
  margin: 0;
}

.content-wrap {
  margin-top: 16px;
}

.logout-form {
  margin: 0 0 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.26);
  animation: card-in 0.25s ease;
}

.admin-subpanel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #3a4148;
  border-radius: 10px;
  background: #24282d;
  color: var(--text);
}

.light-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d7dde2;
  border-radius: 10px;
  background: #f7f8fa;
  color: #222831;
}

.light-panel {
  margin: 0 0 10px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

.light-panel h2,
.light-panel h3,
.light-panel strong {
  color: #1d232b;
}

.light-panel p,
.light-panel li,
.light-panel label {
  color: #303842;
}

.admin-subpanel h2,
.admin-subpanel h3 {
  color: #f1f4f6;
}

.admin-subpanel p,
.admin-subpanel li,
.admin-subpanel label {
  color: #d8dde1;
}

.admin-subpanel code {
  color: #f0a15d;
}

.disk-widget {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.4fr);
  gap: 16px;
  align-items: end;
}

.disk-widget-value {
  font-size: 30px;
  font-weight: 700;
  color: #f1f4f6;
}

.disk-widget-label,
.disk-widget-meta {
  color: #aeb7be;
}

.disk-widget-meta {
  display: grid;
  gap: 6px;
}

.disk-meter {
  height: 12px;
  margin-top: 14px;
  border: 1px solid #3a4148;
  border-radius: 999px;
  background: #1b1e22;
  overflow: hidden;
}

.disk-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fa172, #d0a02c, #c84a3f);
}

.admin-subpanel table {
  color: #e5e8ea;
}

.admin-subpanel select {
  min-width: min(320px, 100%);
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.field-block {
  min-width: 0;
}

.permission-panel {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #24282d;
}

.permission-panel-head {
  margin-bottom: 12px;
}

.permission-panel-head h2 {
  margin: 0 0 6px;
}

.permission-panel-head p {
  margin: 0;
  color: var(--text-soft);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.check-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px;
  border: 1px solid #3f474f;
  border-radius: 10px;
  background: #1d2024;
  cursor: pointer;
}

.check-card:has(input:checked) {
  border-color: #d2884c;
  background: linear-gradient(180deg, #2b2d2f, #202326);
}

.check-card input,
.inline-check input {
  width: auto;
  margin-top: 3px;
}

.check-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.check-title {
  color: #f1f4f6;
  font-weight: 700;
}

.check-key,
.check-perms,
.check-note {
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.check-key,
.check-perms {
  font-size: 13px;
}

.inline-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}

.admin-meta-grid .meta-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.meta-muted {
  color: var(--text-soft);
  font-weight: 400;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #4b535b;
  border-radius: 999px;
  background: #1d2024;
  color: #eef2f4;
  font-size: 13px;
}

.admin-form-grid-span-2 {
  grid-column: span 2;
}

.role-card-grid,
.result-group-stack {
  display: grid;
  gap: 14px;
}

.role-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.role-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 14px;
  border: 1px solid #434b53;
  border-radius: 14px;
  background: linear-gradient(180deg, #24282d, #1f2327);
  cursor: pointer;
}

.role-card:has(input:checked) {
  border-color: #d2884c;
  box-shadow: 0 0 0 1px rgba(210, 136, 76, 0.25) inset;
}

.role-card input {
  width: auto;
  margin-top: 4px;
}

.role-card-body {
  display: grid;
  gap: 10px;
}

.role-card-head,
.ts-role-card-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.role-card-title {
  color: #f1f4f6;
  font-size: 18px;
  font-weight: 800;
}

.role-card-key {
  color: var(--text-soft);
  font-size: 13px;
  white-space: nowrap;
}

.role-card-block-title,
.permission-summary-title {
  color: #f1f4f6;
  font-size: 13px;
  font-weight: 700;
}

.role-mini-group,
.permission-summary-group {
  display: grid;
  gap: 8px;
}

.mini-pill-row,
.source-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-pill,
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.mini-pill {
  border: 1px solid #46505a;
  background: #1d2024;
  color: #eef2f4;
}

.mini-pill-note {
  color: var(--text-soft);
  font-size: 12px;
}

.details-panel {
  border: 1px solid #3f474f;
  border-radius: 12px;
  background: #1d2024;
}

.details-panel summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: #f1f4f6;
}

.details-panel-body {
  display: grid;
  gap: 16px;
  padding: 0 16px 16px;
}

.summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: 8px;
  border-radius: 999px;
  background: #d2884c;
  color: #131517;
  font-size: 12px;
}

.permission-subgroup {
  display: grid;
  gap: 10px;
}

.permission-subgroup h3,
.result-group-card h3,
.admin-subpanel h3,
.admin-subpanel h4 {
  margin: 0;
}

.admin-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.result-stack {
  display: grid;
  gap: 10px;
}

.result-item,
.result-group-card {
  border: 1px solid #3f474f;
  border-radius: 12px;
  background: #1d2024;
}

.result-item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.result-item-main {
  display: grid;
  gap: 4px;
}

.result-group-card {
  padding: 14px;
}

.source-badge {
  border: 1px solid #46505a;
}

.source-role {
  background: rgba(70, 126, 196, 0.18);
  color: #d9e8ff;
}

.source-extra,
.source-manual {
  background: rgba(210, 136, 76, 0.18);
  color: #ffe3c8;
}

.source-fallback {
  background: rgba(110, 140, 92, 0.18);
  color: #e0f0d4;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.section-actions form {
  margin: 0;
}

.ts-role-card {
  display: grid;
  gap: 14px;
}

.ts-role-card-head p,
.result-inline-footer {
  margin: 0;
  color: var(--text-soft);
}

.result-inline-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ts-compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 720px) {
  .admin-form-grid-span-2 {
    grid-column: auto;
  }
}

.scene-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.scene-page-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #4a525b;
  border-radius: 10px;
  color: #e8ecef;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(55, 60, 68, 0.74), rgba(37, 41, 47, 0.74));
}

.scene-page-tab.is-active {
  border-color: #d2884c;
  background: linear-gradient(180deg, rgba(89, 62, 39, 0.82), rgba(52, 37, 25, 0.82));
  color: #fff3e5;
}

.scene-inline-tools {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.55fr);
  gap: 12px;
  margin: 18px 0 12px;
}

.scene-tool-card,
.scene-notes-form {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #24282d;
  padding: 12px;
}

.scene-add-take-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.inline-control-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.inline-control-row select {
  min-width: min(260px, 100%);
}

.scene-notes-form {
  margin: 0 0 18px;
}

.scene-upload-panel {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.scene-upload-form {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #24282d;
}

.scene-upload-delete {
  margin: 0;
}

.scene-upload-hint {
  margin: 10px 0 0;
  color: var(--text-soft);
}

.replay-status-flag {
  margin: 8px 0 10px;
  color: #d8dde1;
}

.replay-status-flag--compact {
  margin: 0;
  justify-content: flex-start;
}

.scene-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.slot-occupant {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.slot-replay-check {
  margin-bottom: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
}

@keyframes card-in {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

h1, h2, h3 {
  margin-top: 0;
  line-height: 1.2;
  color: #f1f4f6;
}

h1 { font-size: 34px; }
h2 { font-size: 22px; margin-top: 20px; }

p, li, td, th, label, input, textarea, select, button, a {
  font-size: 15px;
}

a { color: #f0a15d; }

.button-link {
  display: inline-block;
  border: 1px solid #8a4820;
  background: linear-gradient(180deg, #dc8742, #bd6528);
  color: #fff;
  border-radius: 10px;
  padding: 8px 13px;
  text-decoration: none;
}

.button-link:hover { filter: brightness(1.06); }

.access-state {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 28px;
}

.access-state-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 34px;
  margin-bottom: 14px;
  border: 1px solid #4a525b;
  border-radius: 999px;
  background: #2f343b;
  color: #d8dde1;
  font-weight: 700;
}

.access-state h1 { margin-bottom: 10px; }

.access-state-message {
  max-width: 620px;
  margin: 0 0 8px;
  font-size: 18px;
  color: #eef2f5;
}

.access-state-hint {
  max-width: 620px;
  margin: 0;
  color: var(--text-soft);
}

.access-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}

.access-state-detail {
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid #384048;
  border-radius: 10px;
  background: #1d2024;
  color: #aeb7be;
  overflow-wrap: anywhere;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  background: #24282d;
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  border-bottom: 1px solid #363d44;
  padding: 10px 9px;
  text-align: left;
}

thead th {
  background: #2f343b;
  color: #e2e7eb;
}

tr:hover td { background: #2b3036; }

label {
  display: block;
  margin-bottom: 6px;
  color: #c6cdd2;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #474f58;
  border-radius: 10px;
  outline: none;
  background: #1d2024;
  color: #ecf0f2;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: #d2884c;
  box-shadow: 0 0 0 3px rgba(208, 118, 44, 0.24);
}

button {
  border: 1px solid #8a4820;
  background: linear-gradient(180deg, #dc8742, #bd6528);
  color: #fff;
  border-radius: 10px;
  padding: 8px 13px;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease;
}

button:hover { transform: translateY(-1px); filter: brightness(1.06); }
button:active { transform: translateY(0); }

.project-user-access {
  margin-bottom: 16px;
}

.project-user-access h2 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.project-user-search-label {
  display: block;
  margin: 12px 0 5px;
}

.project-user-search {
  display: block;
  width: min(100%, 420px);
}

.project-user-access-list {
  margin-top: 8px;
  border: 1px solid #3a4148;
  border-radius: 8px;
  max-height: 360px;
  overflow: auto;
}

.project-user-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px;
  border-bottom: 1px solid #343b42;
}

.project-user-access-row[hidden] {
  display: none;
}

.project-user-access-row:last-of-type {
  border-bottom: 0;
}

.project-user-access-person {
  min-width: 220px;
}

.project-user-access-person strong,
.project-user-access-person .muted-text {
  display: block;
}

.project-user-access-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.project-user-access-controls label {
  white-space: nowrap;
}

.project-user-access-controls input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin-right: 6px;
}

.project-user-search-empty {
  margin: 10px;
}

.tester-feedback-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border: 1px solid #095952;
  border-radius: 999px;
  padding: 10px 14px;
  z-index: 1200;
}

.tester-feedback-modal {
  position: fixed;
  right: 20px;
  bottom: 72px;
  width: min(440px, calc(100vw - 36px));
  background: linear-gradient(180deg, #2b3036, #20252b);
  color: var(--text);
  border: 1px solid #46505a;
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  padding: 14px;
  display: none;
  z-index: 1201;
}

.tester-feedback-modal h3 { margin: 0 0 8px; color: #f5f7fa; }
.tester-feedback-modal label { color: #c8d1da; }
.tester-feedback-modal.open { display: block; }

.feedback-page-label {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.tester-feedback-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.meta-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 14px 0 18px;
}

.meta-item {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
}

.meta-label { font-size: 12px; color: var(--text-soft); margin-bottom: 4px; }
.meta-value { font-weight: 700; }

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.quick-link {
  display: block;
  text-decoration: none;
  color: #e5eaee;
  background: linear-gradient(180deg, #2f343a, #262b31);
  border: 1px solid #3f474f;
  border-radius: 12px;
  padding: 12px;
  min-height: 84px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.quick-link:hover {
  transform: translateY(-2px);
  border-color: #7f8a95;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.quick-link-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.quick-link-note { font-size: 13px; color: #a9b3bb; }

.hero-banner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.hero-copy {
  background: linear-gradient(165deg, #2a2f35, #202429);
  border: 1px solid #3b434b;
  border-radius: 14px;
  padding: 18px;
}

.hero-copy h1 { margin-bottom: 10px; }
.hero-copy p { color: #b2bcc4; margin-bottom: 14px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-actions a {
  text-decoration: none;
  background: #2f343a;
  border: 1px solid #49515a;
  border-radius: 10px;
  padding: 8px 12px;
  color: #e3e8eb;
  transition: all 0.15s ease;
}

.hero-actions a:hover { transform: translateY(-1px); border-color: #d2884c; }

.hero-activity {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #3d464f;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 26, 31, 0.88), rgba(33, 38, 44, 0.82));
}

.hero-activity-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #dce3e8;
  text-transform: uppercase;
}

.hero-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hero-activity-item {
  min-height: 82px;
  padding: 12px;
  border: 1px solid #404850;
  border-radius: 10px;
  background: rgba(46, 52, 59, 0.74);
}

.hero-activity-value { font-size: 30px; font-weight: 700; line-height: 1; color: #f5f7f8; }
.hero-activity-label { margin-top: 8px; color: #aeb8c1; }

.hero-visual {
  min-height: 230px;
  border-radius: 14px;
  border: 1px solid #264850;
  background-image:
    linear-gradient(180deg, rgba(16, 30, 36, 0.12), rgba(16, 30, 36, 0.18)),
    var(--hero-banner-image);
  background-size: cover;
  background-position: center;
}

.catalog-editor-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.catalog-editor-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(180px, 1fr) minmax(260px, 1.5fr) minmax(150px, .7fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #3b444d;
  border-radius: 10px;
  background: #20252a;
}

.catalog-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.ts-catalog-row {
  grid-template-columns: minmax(120px, .5fr) minmax(240px, 1.4fr) minmax(240px, 1fr) auto;
}

.inline-add-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) minmax(150px, .7fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #394149;
}

.danger-button {
  background: #622f35;
  border-color: #85444c;
}

.danger-button:hover { background: #7a3740; }
.success-button { background: #24663e; border-color: #3d9660; }
.success-button:hover { background: #2f7a4b; border-color: #62bc7f; }

.page-access-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Newsletter management — cards stay readable down to 360 px. */
.newsletter-heading,
.newsletter-section-heading,
.newsletter-history-topline,
.newsletter-compose-actions,
.newsletter-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.newsletter-heading { align-items: flex-start; margin-bottom: 18px; }
.newsletter-heading h1 { margin-bottom: 6px; }
.newsletter-heading p, .newsletter-section-heading p { margin: 0; color: var(--text-soft); }
.newsletter-access { white-space: nowrap; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 700; border: 1px solid #607080; }
.newsletter-access-admin { color: #e9f7ed; background: #215537; border-color: #3f9d62; }
.newsletter-access-operator { color: #fff3d1; background: #5c481e; border-color: #ba8a2a; }
.newsletter-access-viewer { color: #d7e3ef; background: #344556; border-color: #637b93; }
.newsletter-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 16px; align-items: start; }
.newsletter-compose, .newsletter-preview-card, .newsletter-rooms-section, .newsletter-history-section, .newsletter-settings-section { border: 1px solid #404a54; border-radius: 14px; padding: 16px; background: linear-gradient(180deg, #292f35, #22272d); }
.newsletter-compose h2, .newsletter-preview-card h2, .newsletter-rooms-section h2, .newsletter-history-section h2, .newsletter-settings-section h2 { margin-top: 0; }
.newsletter-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.newsletter-form-grid label, .newsletter-settings-card label { display: grid; gap: 5px; font-size: 14px; }
.newsletter-role-picker, .newsletter-auto-controls { margin: 14px 0; padding: 12px; border: 1px solid #45505a; border-radius: 10px; }
.newsletter-auto-controls { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.newsletter-auto-controls.is-active { border-color: #4eae72; background: linear-gradient(180deg, rgba(32, 104, 58, .34), rgba(27, 57, 37, .28)); box-shadow: inset 0 0 0 1px rgba(110, 214, 142, .12); }
.newsletter-auto-open-label { font-weight: 700; }
.newsletter-auto-open-state { display: inline-block; margin-left: 5px; padding: 2px 7px; border: 1px solid #62717f; border-radius: 999px; color: #b8c5d0; font-size: 12px; font-weight: 700; }
.newsletter-auto-controls.is-active .newsletter-auto-open-state { border-color: #4bb86e; color: #a8e9b6; background: #235a39; }
.newsletter-auto-open-note { margin: 8px 0 0 26px; color: var(--text-soft); font-size: 13px; }
.newsletter-auto-controls.is-active .newsletter-auto-open-note { color: #b1e6bd; }
.newsletter-role-picker legend, .newsletter-auto-controls legend { padding: 0 5px; font-weight: 700; }
.newsletter-role-options { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.newsletter-role-options label, .newsletter-auto-controls > label, .newsletter-test-option, .newsletter-settings-card > label { display: flex; align-items: center; gap: 7px; margin: 8px 0; }
.newsletter-auto-controls .newsletter-form-grid { margin-top: 10px; }
.newsletter-compose-actions { flex-wrap: wrap; margin-top: 14px; }
.newsletter-text-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 9px 0 14px; color: var(--text-soft); font-size: 13px; }
.newsletter-text-tools button { padding: 7px 10px; font-size: 13px; }
.newsletter-compose-actions > span { color: var(--text-soft); font-size: 13px; margin-right: auto; }
.newsletter-preview-card { position: sticky; top: 12px; }
.newsletter-preview-state { min-height: 22px; color: var(--text-soft); margin-bottom: 10px; }
.newsletter-preview-state.success, .field-note.success { color: #8bd69e; }
.newsletter-preview-state.warning { color: #f3c66b; }
.newsletter-preview-state.error, .field-note.error { color: #ff9292; }
.newsletter-discord-preview, .newsletter-history-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; border: 1px solid #414b55; border-left: 4px solid #5865f2; border-radius: 9px; padding: 12px; background: #1d2126; color: #f0f3f6; font: inherit; min-height: 64px; }
.newsletter-preview-meta, .newsletter-room-detection, .newsletter-history-meta { margin-top: 9px; color: var(--text-soft); font-size: 13px; }
.newsletter-room-detection.success { padding: 10px 12px; border: 1px solid #47ad6b; border-radius: 9px; background: rgba(34, 113, 62, .27); color: #a8edbb; font-weight: 700; }
.newsletter-rooms-section, .newsletter-history-section, .newsletter-settings-section { margin-top: 18px; }
.newsletter-room-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; border-bottom: 1px solid #43505a; padding-bottom: 9px; }
.newsletter-room-tab { background: #20262c; border: 1px solid #4c5964; color: #ccd6de; }
.newsletter-room-tab.active { background: #24553a; border-color: #54ae70; color: #d3f6dc; }
.newsletter-room-panel[hidden] { display: none; }
.newsletter-room-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; margin-top: 12px; }
.newsletter-room-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; color: var(--text-soft); font-size: 13px; }
.newsletter-room-card { border: 1px solid #4d5862; border-left-width: 5px; border-radius: 10px; padding: 12px; background: #20262c; }
.newsletter-room-card.room-open { border-color: #357a50; border-left-color: #55bd75; background: linear-gradient(135deg, rgba(35, 93, 53, .28), #20262c 48%); }
.newsletter-room-card.room-closed { border-color: #8a4147; border-left-color: #e06868; background: linear-gradient(135deg, rgba(112, 42, 48, .31), #20262c 48%); }
.newsletter-room-title-row { display: flex; align-items: start; justify-content: space-between; gap: 8px; }.newsletter-room-card h3 { margin: 0 0 8px; font-size: 16px; }.newsletter-room-card p { margin: 6px 0; }
.newsletter-room-badge { display: inline-block; flex: 0 0 auto; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 800; }.newsletter-room-badge.open { color: #b8f1c6; border: 1px solid #4ca96a; background: #1c5634; }.newsletter-room-badge.closed { color: #ffc0c0; border: 1px solid #c35a61; background: #6c2f35; }
.newsletter-room-card.status-active:not(.room-closed) .newsletter-room-state { color: #aeeabe; }.newsletter-room-card.status-filled .newsletter-room-state { color: #91e5aa; }.newsletter-room-card.status-paused .newsletter-room-state { color: #f3c66b; }.newsletter-room-card.status-stopped:not(.room-closed) .newsletter-room-state, .newsletter-room-card.status-unknown .newsletter-room-state { color: #aeb9c3; }
.newsletter-room-state { font-weight: 700; }
.newsletter-room-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }.newsletter-room-actions button { padding: 6px 8px; font-size: 12px; }.newsletter-room-actions input { width: 72px; margin: 0; padding: 5px 6px; }
.newsletter-room-limit-control { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; width: 100%; padding: 8px; border: 1px solid #436d56; border-radius: 8px; background: rgba(33, 91, 53, .2); }
.newsletter-room-limit-control label { display: grid; gap: 4px; color: #bdebc7; font-size: 12px; font-weight: 700; }
.newsletter-room-limit-control input { width: 86px; }
.newsletter-history-list { display: grid; gap: 10px; }.newsletter-history-item { padding: 12px; border: 1px solid #404a54; border-radius: 10px; background: #20262c; }.newsletter-history-item summary { cursor: pointer; list-style: none; }.newsletter-history-item summary::-webkit-details-marker { display: none; }.newsletter-history-item summary::before { content: '▸'; color: #9ba9b7; margin-right: 7px; }.newsletter-history-item[open] summary::before { content: '▾'; }.newsletter-history-summary-text { color: var(--text-soft); font-size: 13px; margin-right: auto; }.newsletter-history-text { margin-top: 9px; min-height: 0; max-height: 220px; overflow: auto; }
.newsletter-result { border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; }.newsletter-result-sent { background: #205238; color: #9be1ae; }.newsletter-result-error { background: #663338; color: #ffb1b1; }
.newsletter-history-actions { display: flex; gap: 8px; margin-top: 10px; }
.newsletter-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.newsletter-settings-card { border: 1px solid #46515c; border-radius: 10px; padding: 12px; background: #20262c; }.newsletter-settings-card h3 { margin-top: 0; }.newsletter-settings-card button { margin-top: 8px; }
.newsletter-viewer-note { padding: 12px; border-radius: 10px; background: #263442; border: 1px solid #445d73; }
.newsletter-modal { position: fixed; z-index: 1300; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .64); }.newsletter-modal.open { display: flex; }.newsletter-modal-card { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border: 1px solid #56626d; border-radius: 14px; background: #252b31; box-shadow: 0 20px 50px rgba(0,0,0,.55); }.newsletter-modal-card h2 { margin-top: 0; }.newsletter-final-summary { color: var(--text-soft); margin-bottom: 10px; }

@media (max-width: 840px) {
  .page-shell { width: calc(100vw - 16px); margin-top: 10px; }
  .topbar-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  h1 { font-size: 28px; }
  .card { padding: 14px; }
  table { display: block; overflow-x: auto; }
  .hero-banner { grid-template-columns: 1fr; }
  .disk-widget { grid-template-columns: 1fr; }
  .hero-visual { min-height: 190px; }
  .hero-activity-grid { grid-template-columns: 1fr; }
  .scene-inline-tools { grid-template-columns: 1fr; }
  .scene-upload-panel { grid-template-columns: 1fr; }
  .scene-add-take-card { align-items: stretch; flex-direction: column; }
  .inline-control-row { align-items: stretch; flex-direction: column; }
  .catalog-editor-row,
  .ts-catalog-row,
  .inline-add-form { grid-template-columns: 1fr; }
  .project-user-access-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .project-user-access-person { min-width: 0; }
  .newsletter-heading, .newsletter-section-heading, .newsletter-compose-actions, .newsletter-modal-actions { align-items: stretch; flex-direction: column; }
  .newsletter-heading .newsletter-access { align-self: flex-start; }
  .newsletter-grid, .newsletter-settings-grid { grid-template-columns: 1fr; }
  .newsletter-preview-card { position: static; }
  .newsletter-form-grid { grid-template-columns: 1fr; }
  .newsletter-text-tools { align-items: flex-start; flex-direction: column; }
  .newsletter-compose-actions > span { margin-right: 0; }
}