:root {
  color-scheme: light;
  --bg: #f2f2f7;
  --panel: rgba(255,255,255,0.72);
  --panel-strong: rgba(255,255,255,0.88);
  --text: #111111;
  --muted: #6b7280;
  --accent: #007aff;
  --accent-2: #34c759;
  --danger: #ff3b30;
  --border: rgba(15,23,42,0.08);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --blur: saturate(180%) blur(24px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0,122,255,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(52,199,89,.10), transparent 24%),
    linear-gradient(180deg, #f8f9fd 0%, #eef1f7 100%);
  color: var(--text);
}

.app { max-width: 1680px; margin: 0 auto; padding: 24px; }
.hero, .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 28px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.hero {
  padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.hero h1 { margin: 8px 0 10px; font-size: 38px; letter-spacing: -0.03em; }
.subtitle, .muted { color: var(--muted); }
.eyebrow, .section-kicker {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
}
.pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,122,255,.10);
  color: var(--accent);
  border: 1px solid rgba(0,122,255,.12);
  white-space: nowrap;
  font-weight: 600;
}

.workspace-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.sidebar-stack,
.content-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-stack {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.panel { padding: 18px; }
.panel.full { grid-column: 1 / -1; }
.panel.tight-panel { padding: 12px; }
.sidebar-panel { padding: 13px; }
.section-heading,
.place-header-row,
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.section-heading h2,
.panel h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
label span, .label { display: block; margin-bottom: 6px; color: #4b5563; font-size: 12px; font-weight: 600; }
input, select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline: none;
  font-size: 15px;
}
input:focus, select:focus { border-color: rgba(0,122,255,.32); box-shadow: 0 0 0 4px rgba(0,122,255,.10); }
input[type="range"] {
  padding: 0;
  accent-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
button {
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  color: white;
  background: linear-gradient(180deg, #1590ff 0%, #007aff 100%);
  box-shadow: 0 8px 20px rgba(0,122,255,.18);
}
button.ghost {
  background: rgba(255,255,255,.82);
  color: var(--text);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: none;
}
button.active-tab {
  background: rgba(0,122,255,.12);
  color: var(--accent);
  border: 1px solid rgba(0,122,255,.16);
  box-shadow: none;
}
.row { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.top12 { margin-top: 12px; }
.top16 { margin-top: 16px; }
.hidden { display: none !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.provider-grid,
.action-grid {
  display: grid;
  gap: 6px;
}
.provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-grid { grid-template-columns: 1fr; }
.account-password-login-btn {
  width: 100%;
}
.compact-actions { gap: 6px; }
.single-column {
  grid-template-columns: 1fr !important;
}
.sidebar-meta-card,
.sidebar-summary-card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
}
.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--muted);
}
.meta-row + .meta-row {
  border-top: 1px solid rgba(15,23,42,.06);
}
.meta-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.summary-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.summary-main strong {
  font-size: 24px;
  letter-spacing: -0.03em;
}
.summary-main span,
.summary-sub-grid span {
  color: var(--muted);
  font-size: 11px;
}
.summary-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.summary-sub-grid > div {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 12px;
  padding: 8px;
}
.summary-sub-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--text);
}
.segmented-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.segmented-wrap { display: flex; flex-direction: column; gap: 6px; }
.segmented-title { color: #4b5563; font-size: 12px; font-weight: 600; }
.range-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.range-head .segmented-title {
  flex: 0 0 auto;
}
.range-head strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  color: var(--text);
  text-align: right;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.segmented-control {
  display: inline-flex;
  padding: 3px;
  border-radius: 14px;
  background: rgba(118,118,128,.12);
  border: 1px solid rgba(15,23,42,.06);
  gap: 4px;
}
.segment-btn {
  background: transparent;
  color: #374151;
  box-shadow: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
}
.segment-btn.active {
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.qr-wrap {
  display: flex; justify-content: center; align-items: center; min-height: 192px;
  border: 1px dashed rgba(15,23,42,.10); border-radius: 18px; background: rgba(255,255,255,.52);
}
.qr-wrap img { max-width: 176px; max-height: 176px; background: white; padding: 6px; border-radius: 16px; }
.compact-filter-panel {
  padding-top: 2px;
}
.upload-hint {
  font-size: 12px;
  line-height: 1.5;
}
.compact-chip-row {
  gap: 6px;
}
.compact-details {
  border: 1px dashed rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255,255,255,.48);
}
.compact-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.sidebar-stack::-webkit-scrollbar {
  width: 8px;
}
.sidebar-stack::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35);
  border-radius: 999px;
}
.sidebar-stack::-webkit-scrollbar-track {
  background: transparent;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card, .skin-card, .wall-tile, .overview-summary-card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}
.wall-tile { box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.card { padding: 16px; }
.card h3 { margin: 0 0 12px; }
.card p { margin: 6px 0; color: var(--muted); }
.empty {
  color: var(--muted);
  padding: 18px;
  border: 1px dashed rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.45);
}
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.skin-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.legendary-card {
  border: 1px solid rgba(255, 186, 73, .38);
  box-shadow: 0 0 0 1px rgba(255, 186, 73, .12) inset, 0 10px 24px rgba(201, 147, 47, .10);
}
.legendary-poster-card {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: #0f172a;
  border: 2px solid #79f2dc;
  box-shadow: 0 8px 20px rgba(121, 242, 220, .15);
}
.export-progress {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 10px 12px;
}
.export-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
}
.export-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
}
.export-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa 0%, #34d399 100%);
  transition: width .25s ease;
}
.card-media {
  position: relative;
}
.legendary-media {
  background: transparent !important;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.legendary-frame {
  position: relative;
  padding: 14px;
  border: 0;
  margin: 0;
  min-height: auto;
  background: transparent !important;
}
.legendary-image-stage {
  background: linear-gradient(180deg, #101722 0%, #141c28 100%) !important;
  border-radius: 24px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.legendary-frame img {
  height: 280px !important;
  background: transparent !important;
  padding: 18px 10px 4px !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}
.legendary-poster-card .legendary-image-stage,
.export-dom-shot .legendary-poster-card .legendary-image-stage {
  background: linear-gradient(180deg, #101722 0%, #141c28 100%) !important;
}
.legendary-topline {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.legendary-date {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 600;
}
.legendary-poster-card h3,
.legendary-poster-card .muted {
  color: #111827 !important;
}
.legendary-flag,
.wear-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.legendary-flag {
  color: #fff8e8;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.flag-premium {
  background: linear-gradient(180deg, #ffb547 0%, #d38a09 100%);
}
.flag-fine {
  background: linear-gradient(180deg, #74a8ff 0%, #3568d4 100%);
}
.flag-standard {
  background: linear-gradient(180deg, #7b8594 0%, #556070 100%);
}
.wear-chip {
  min-width: 32px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,23,42,.44);
}
.legendary-body {
  padding-top: 10px !important;
}
.legendary-inline-meta {
  font-size: 18px;
  font-weight: 800;
  color: #4b5563;
}
.legendary-inline-sub {
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
}
.legendary-poster-card .body > h3,
.legendary-poster-card .body > .muted {
  color: #111827;
}
.legendary-poster-card .detail-list,
.legendary-poster-card .badge {
  display: none !important;
}
.wear-s { background: linear-gradient(180deg, #34d399 0%, #059669 100%); }
.wear-a { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.wear-b { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
.wear-c { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }
.wear-na { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); }
.skin-card img, .summary-cover img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center;
  background: linear-gradient(180deg, rgba(245,247,255,.95), rgba(234,238,247,.95));
  padding: 10px;
}
.skin-card.dense img { height: 180px; padding: 8px; }
.skin-card .body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.skin-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  min-height: calc(1.35em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.skin-card .body > .muted {
  min-height: 1.2em;
}
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(15,23,42,.08);
  font-size: 12px;
  color: var(--muted);
}
.detail-row strong {
  color: var(--text);
  font-weight: 700;
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 12px;
  border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.82); color: #334155;
}
.badge.rare-6, .badge.rare-7 { background: rgba(255, 186, 73, .18); border-color: rgba(255, 186, 73, .30); color: #9a5f00; }
.badge.rare-5 { background: rgba(201, 125, 255, .18); border-color: rgba(201, 125, 255, .30); color: #7d3cc0; }
.badge.rare-4 { background: rgba(0, 122, 255, .14); border-color: rgba(0, 122, 255, .22); color: #005fd1; }
.badge.rare-3 { background: rgba(52, 199, 89, .14); border-color: rgba(52, 199, 89, .22); color: #22863a; }
.alert {
  padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.72); color: var(--text);
}
.alert.warning { background: rgba(255, 204, 0, .15); border-color: rgba(255, 204, 0, .24); color: #9a6b00; }
.alert.error { background: rgba(255, 59, 48, .12); border-color: rgba(255, 59, 48, .22); color: #c22920; }
.alert.success { background: rgba(52, 199, 89, .12); border-color: rgba(52, 199, 89, .22); color: #188038; }
.overview-canvas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin-top: 2px;
}
.wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
  justify-content: start;
}
.dense-mode .wall-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.wall-tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  display: flex;
  flex-direction: column;
}
.legendary-tile {
  box-shadow: 0 0 0 1px rgba(255, 186, 73, .12) inset, 0 12px 30px rgba(201, 147, 47, .14);
}
.dense-mode .wall-tile { border-radius: 22px; }
.wall-tile img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center;
  background: linear-gradient(180deg, rgba(245,247,255,.98), rgba(236,240,248,.96));
  padding: 8px;
  margin: 0;
  border-radius: 18px;
  flex-shrink: 0;
}
.dense-mode .wall-tile img { height: 130px; padding: 8px; margin: 0; border-radius: 16px; object-fit: contain; }
.tile-meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tile-meta strong {
  font-size: 15px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  min-height: calc(1.28em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.tile-meta span { color: var(--muted); font-size: 12px; line-height: 1.2; }
.group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 2px; }
.group-header h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.rare-border-6, .rare-border-7 { border-color: rgba(255, 186, 73, .45); box-shadow: 0 0 0 1px rgba(255, 186, 73, .10) inset; }
.rare-border-5 { border-color: rgba(201, 125, 255, .45); box-shadow: 0 0 0 1px rgba(201, 125, 255, .10) inset; }
.rare-border-4 { border-color: rgba(0, 122, 255, .34); box-shadow: 0 0 0 1px rgba(0, 122, 255, .08) inset; }
.rare-border-3 { border-color: rgba(52, 199, 89, .34); box-shadow: 0 0 0 1px rgba(52, 199, 89, .08) inset; }
.overview-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.overview-summary-card {
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.summary-cover {
  height: 120px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(245,247,255,.95), rgba(234,238,247,.95));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.summary-cover img { height: 100%; padding: 4px; }
.summary-fallback { font-size: 28px; }
.summary-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px 2px;
  flex: 1;
}
.summary-meta strong {
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.summary-meta span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.game-overview-panel {
  background: linear-gradient(180deg, rgba(24, 26, 31, .96), rgba(31, 34, 39, .96));
  color: #f3f4f6;
  border-color: rgba(0, 255, 170, .14);
}
.game-overview-panel h2,
.game-overview-panel .game-overview-kicker,
.game-overview-panel .game-overview-subline,
.game-overview-panel .stat-card,
.game-overview-panel .label {
  color: #f3f4f6;
}
.game-overview-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.game-overview-left h2 {
  margin: 4px 0 8px;
  font-size: 44px;
  letter-spacing: -0.04em;
}
.game-overview-kicker {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #20f59a;
}
.game-overview-subline {
  color: rgba(243,244,246,.7);
  font-size: 14px;
}
.game-rank-btn {
  background: rgba(13, 16, 20, .56);
  color: #24f2a1;
  border: 1px solid rgba(36, 242, 161, .4);
  box-shadow: inset 0 0 0 1px rgba(36, 242, 161, .06);
  border-radius: 0;
  padding: 18px 28px;
}
.game-overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.game-stat-card {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(71, 76, 82, .62), rgba(56, 61, 68, .72));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.game-stat-card strong {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #1df0a0;
}
.game-stat-card span {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(243,244,246,.82);
}
.ios-shell { padding-top: 28px; }
.ios-hero, .ios-panel, .ios-card, .ios-stat { position: relative; }
.ios-hero::after, .ios-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.place-header-row { justify-content: space-between; align-items: center; margin-bottom: 12px; }
.manual-place-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.filter-panel {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 14px;
}
.filter-block {
  border-top: 1px dashed rgba(15,23,42,.08);
  padding-top: 10px;
}
.filter-block-title {
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 8px;
}
.legendary-filter-block {
  background: linear-gradient(180deg, rgba(255,186,73,.08), rgba(255,255,255,.02));
  border-radius: 16px;
  padding: 10px;
}
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.filter-check input {
  width: auto;
}
.manual-place-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.place-level-heading {
  display: flex;
  align-items: center;
  min-height: 54px;
  gap: 11px;
}
.place-level-icon-shell {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  color: #f1f6f3;
  border-right: 1px solid rgba(231, 239, 234, .28);
  padding-right: 10px;
}
.place-level-icon {
  display: block;
  width: 38px;
  height: 38px;
  overflow: visible;
}
.place-level-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.place-level-copy strong {
  color: #edf3ef;
  font-size: 15px;
  line-height: 1.2;
}
.place-level-copy small {
  color: #788680;
  font-size: 10px;
  letter-spacing: .08em;
}
.order-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.order-item {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px;
}
.compact-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.export-capture {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1440px;
  display: none;
}
.canvas-export-bundle {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  color: #edf3ee;
  background:
    linear-gradient(rgba(184,255,53,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,53,.025) 1px, transparent 1px),
    #070b0e;
  background-size: 24px 24px;
}
.canvas-export-bundle > .export-top-panel,
.canvas-export-bundle > .export-canvas-content {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.canvas-export-bundle > .export-canvas-content {
  min-width: 0 !important;
}
.canvas-export-bundle .manual-place-grid input {
  opacity: 1 !important;
  color: #e8efea !important;
  -webkit-text-fill-color: #e8efea !important;
}
.canvas-export-bundle .ios-panel::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}
.canvas-export-bundle .ios-panel,
.canvas-export-bundle .game-overview-panel,
.canvas-export-bundle .game-stat-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.canvas-export-bundle .game-overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.canvas-export-bundle .manual-place-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.canvas-export-bundle .game-stat-card {
  box-shadow: none !important;
}
.export-dom-shot {
  width: 1440px;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(0,122,255,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(52,199,89,.10), transparent 24%),
    linear-gradient(180deg, #f8f9fd 0%, #eef1f7 100%);
}
.export-dom-shot .overview-stage-panel,
.export-dom-shot .game-overview-panel,
.export-dom-shot .ios-panel,
.export-dom-shot .ios-card,
.export-dom-shot .skin-card,
.export-dom-shot .wall-tile,
.export-dom-shot .game-stat-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.export-capture .export-img-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-capture .export-img-wrap > img,
.export-capture .export-img-wrap > canvas {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 auto;
}
.export-sheet {
  background: #eef1f7;
  color: #111827;
  padding: 24px;
}
.export-top {
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
}
.export-hero-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 28px;
  padding: 28px;
  margin-bottom: 16px;
}
.export-kicker {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: #20f59a;
}
.export-emblem {
  font-size: 48px;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.export-dark {
  background: linear-gradient(180deg, rgba(24,26,31,.98), rgba(31,34,39,.98));
  color: #f3f4f6;
}
.export-title { font-size: 38px; font-weight: 800; }
.export-subtitle { margin-top: 6px; color: rgba(243,244,246,.75); }
.export-stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.export-stat, .export-panel, .export-place, .export-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
}
.export-dark .export-stat { background: rgba(71,76,82,.68); border-color: rgba(255,255,255,.08); }
.export-stat { padding: 18px; text-align: center; }
.export-stat strong { display:block; font-size: 34px; color:#1df0a0; }
.export-stat span { color: rgba(243,244,246,.84); }
.export-panel { padding: 18px; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.export-place-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95)); }
.export-group-panel h3 { margin: 0; }
.export-group-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.export-place-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; }
.export-place { padding: 14px; display:flex; flex-direction:column; gap:6px; background: linear-gradient(180deg, #ffffff, #f8fafc); }
.export-card-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.export-card { overflow:hidden; }
.export-poster-card { background: linear-gradient(180deg, #ffffff, #f8fafc); min-height: 150px; position: relative; }
.export-poster-badge {
  margin: 14px 14px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  font-size: 12px;
  font-weight: 700;
}
.export-card img { width:100%; height:180px; object-fit:contain; background:#f8fafc; display:block; }
.export-noimg { height:180px; display:flex; align-items:center; justify-content:center; color:#6b7280; background:#f8fafc; }
.export-card-body { padding: 12px; display:flex; flex-direction:column; gap:4px; }
.export-text-card-body { padding-top: 12px; min-height: 110px; justify-content: center; }
.raw-dump {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 16px;
  max-height: 360px;
  overflow: auto;
}

@media (max-width: 1280px) {
  .overview-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .game-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .workspace-layout { grid-template-columns: 1fr; }
  .sidebar-stack {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .hero,
  .game-overview-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-status-grid,
  .auth-overview-grid,
  .manual-place-grid,
  .order-list,
  .game-overview-stats {
    grid-template-columns: 1fr 1fr;
  }
  .membership-shop-grid,
  .account-membership-grid,
  .auth-overview-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .app { padding: 14px; }
  .hero h1,
  .game-overview-left h2 {
    font-size: 30px;
  }
  .hero-status-grid,
  .manual-place-grid,
  .order-list,
  .game-overview-stats,
  .gallery,
  .auth-action-grid,
  .hub-actions,
  .hub-metrics,
  .payment-method-grid {
    grid-template-columns: 1fr;
  }
  .shop-actions {
    flex-direction: column;
  }
  .hero-welcome {
    width: 100%;
    justify-content: center;
  }
}

/* --- 新增：自定义列数与大图展示 --- */
.overview-canvas {
  --col-count: 5;
}
.wall-grid {
  grid-template-columns: repeat(var(--col-count), minmax(0, 1fr)) !important;
}
.wall-tile.large-item {
  grid-column: span 2;
  grid-row: span 2;
  border: 2px solid rgba(29, 240, 160, 0.6) !important;
  box-shadow: 0 0 15px rgba(29, 240, 160, 0.3);
}
.wall-tile.large-item img {
  height: 280px !important;
}
.dense-mode .wall-tile.large-item img {
  height: 240px !important;
}
@media (max-width: 980px) {
  .wall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 680px) {
  .wall-grid {
    grid-template-columns: 1fr !important;
  }
  .wall-tile.large-item {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.auth-tabbar {
  display: flex;
  width: 100%;
}
.auth-tabbar .segment-btn {
  flex: 1;
}
.auth-panel-body {
  border-top: 1px solid rgba(15,23,42,.06);
  padding-top: 14px;
}
.auth-form-tip {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,122,255,.06);
  border: 1px solid rgba(0,122,255,.10);
  color: #3b4a64;
  font-size: 13px;
  line-height: 1.65;
}
.auth-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-lock-note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,159,10,.10);
  border: 1px solid rgba(255,159,10,.18);
  color: #8a5a00;
  font-size: 12px;
  line-height: 1.5;
}
.order-list-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.order-list-card.empty-state {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.10);
  background: rgba(255,255,255,.56);
  color: var(--muted);
  line-height: 1.7;
}
.payment-order-item {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.payment-order-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.payment-order-head strong {
  word-break: break-all;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.08);
}
.status-pill.success {
  background: rgba(52,199,89,.12);
  color: #0f7a31;
}
.status-pill.warn {
  background: rgba(255,159,10,.12);
  color: #9a5d00;
}
.status-pill.muted {
  background: rgba(15,23,42,.06);
  color: #475569;
}
button:disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}
.hero-top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-wrap: wrap;
}
.hero-action-btn {
  min-width: 118px;
  padding: 12px 18px;
  font-size: 15px;
}
.service-contact-btn {
  min-width: 96px;
}
.hero-welcome {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
}
.functional-hero {
  background:
    radial-gradient(circle at top left, rgba(255,196,64,.10), transparent 22%),
    radial-gradient(circle at right, rgba(0,122,255,.10), transparent 26%),
    linear-gradient(135deg, rgba(15,23,42,.96) 0%, rgba(27,36,58,.94) 58%, rgba(31,44,74,.90) 100%);
  border-color: rgba(255,255,255,.08);
}
.functional-hero h1,
.functional-hero .subtitle,
.functional-hero .eyebrow {
  color: #f8fafc;
}
.hero-main-copy {
  max-width: 980px;
}
.full-width-copy {
  max-width: 100%;
}
.hero-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hero-status-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-status-card span,
.hero-status-card small {
  display: block;
  color: rgba(226,232,240,.80);
}
.hero-status-card span {
  font-size: 12px;
  margin-bottom: 6px;
}
.hero-status-card strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: -.02em;
}
.hero-status-card small {
  margin-top: 8px;
  line-height: 1.55;
  font-size: 12px;
}
.hero-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-tag {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(248,250,252,.92);
  font-size: 12px;
  font-weight: 700;
}
.top-access-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.account-corner-dock {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.access-mini-card {
  padding: 14px;
}
.auth-status-card {
  background: rgba(255,255,255,.96);
}
.auth-primary-btn {
  background: linear-gradient(180deg, #1590ff 0%, #007aff 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,122,255,.22);
}
.premium-kicker {
  color: #8b5a00;
}
.hero-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.premium-price-row strong {
  font-size: 28px;
  letter-spacing: -0.04em;
  color: #231815;
}
.premium-price-row span {
  color: #8b5a00;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.compact-price-row strong {
  font-size: 26px;
}
.premium-benefit-list {
  display: grid;
  gap: 8px;
}
.premium-benefit-item {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(178,134,33,.14);
  color: #5f4300;
  font-size: 12px;
  font-weight: 600;
}
.premium-meta-card {
  background: linear-gradient(180deg, rgba(255,244,216,.94) 0%, rgba(255,236,186,.86) 100%);
  border-color: rgba(178,134,33,.20);
}
.premium-pay-btn {
  background: linear-gradient(180deg, #ffcb63 0%, #d89a24 100%);
  color: #231815;
  box-shadow: 0 10px 24px rgba(216,154,36,.28);
}
.payment-orders-panel {
  padding: 18px;
}
.membership-shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 14px;
}
.membership-shop-card,
.membership-side-card,
.auth-highlight-card,
.hub-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.84);
}
.membership-shop-card h3,
.membership-side-card h3,
.auth-highlight-card h3,
.hub-card h3 {
  margin: 6px 0 0;
  font-size: 26px;
  letter-spacing: -.03em;
}
.membership-side-card h3,
.auth-highlight-card h3,
.email-hub-card h3,
.account-hub-card h3 {
  font-size: 20px;
}
.shop-note,
.hub-note {
  margin: 10px 0 0;
  color: #5b6475;
  line-height: 1.7;
}
.account-membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hub-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.hub-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(0,122,255,.10);
  border: 1px solid rgba(0,122,255,.12);
}
.premium-icon {
  background: rgba(255,203,99,.26);
  border-color: rgba(178,134,33,.18);
}
.hub-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hub-metric {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.06);
}
.hub-metric span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
}
.hub-metric strong {
  display: block;
  color: #111827;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}
.hub-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.orders-subheading h3 {
  margin: 0;
  font-size: 18px;
}
.shop-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(178,134,33,.18);
  color: #7a5200;
  font-size: 12px;
  font-weight: 700;
}
.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.step-list {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.75;
}
.compact-steps {
  gap: 6px;
}
.auth-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 14px;
  align-items: stretch;
}
.auth-side-stack {
  display: grid;
  gap: 14px;
}
.mini-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.mini-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.58);
  backdrop-filter: blur(10px);
}
.mini-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(15,23,42,.24);
  max-height: calc(100vh - 36px);
  overflow: auto;
}
.payment-dialog-card {
  width: min(440px, 100%);
}
.support-dialog-card {
  width: min(520px, 100%);
  text-align: center;
}
.game-account-login-card {
  width: min(470px, 100%);
}
.official-login-steps {
  display: grid;
  gap: 10px;
}
.official-login-steps > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: rgba(248,250,252,.86);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.official-login-steps strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
}
.official-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 14px;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(180deg, #1590ff 0%, #007aff 100%);
  box-shadow: 0 8px 20px rgba(0,122,255,.18);
  font-weight: 700;
  text-decoration: none;
}
.oauth-callback-card {
  padding: 14px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: rgba(248,250,252,.86);
}
.oauth-callback-card > strong {
  display: block;
  font-size: 15px;
}
.oauth-callback-card > p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.mini-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}
.mini-modal-head h2 {
  margin: 6px 0 0;
  font-size: 28px;
  letter-spacing: -.03em;
}
.support-modal-head h2 {
  font-size: 34px;
}
.support-modal-text {
  margin: 0;
  font-size: 30px;
  line-height: 1.45;
  color: #0f172a;
  font-weight: 700;
}
.auth-panel-stack {
  position: relative;
}
.auth-panel-view,
.payment-panel-view {
  animation: modalFadeIn .18s ease;
}
.auth-switch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 13px;
}
.link-btn {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.link-btn:hover {
  text-decoration: underline;
}
.payment-summary-card {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
  border: 1px solid rgba(15,23,42,.08);
}
.payment-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
}
.payment-summary-row + .payment-summary-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.06);
}
.payment-summary-row strong {
  color: #111827;
  font-size: 15px;
}
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.payment-method-btn {
  background: rgba(255,255,255,.92);
  color: #111827;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: none;
}
.payment-method-btn.active {
  background: linear-gradient(180deg, #1590ff 0%, #007aff 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,122,255,.18);
}
.auth-entry-note {
  color: var(--muted);
  line-height: 1.7;
  font-size: 13px;
}
body.modal-open {
  overflow: hidden;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1180px) {
  .top-access-bar {
    justify-content: stretch;
  }
  .account-corner-dock {
    width: 100%;
  }
}
@media (max-width: 840px) {
  .account-corner-dock {
    grid-template-columns: 1fr;
  }
  .hero-top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hero-status-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V50-HD · Delta Force Creative Studio
   Dark tactical workspace + high-density canvas presentation
   ========================================================= */
:root {
  color-scheme: dark;
  --bg: #070a0d;
  --panel: rgba(15, 21, 25, .96);
  --panel-strong: rgba(19, 27, 32, .98);
  --text: #eef4ef;
  --muted: #8d9b95;
  --accent: #b8ff35;
  --accent-2: #55f09a;
  --danger: #ff665e;
  --border: rgba(190, 255, 65, .13);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --blur: saturate(125%) blur(18px);
  --studio-grid: rgba(184, 255, 53, .035);
}

html { background: #070a0d; }
body {
  min-height: 100vh;
  background:
    linear-gradient(var(--studio-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--studio-grid) 1px, transparent 1px),
    radial-gradient(circle at 12% -10%, rgba(184,255,53,.14), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(34,197,94,.08), transparent 26%),
    linear-gradient(180deg, #0b0f12 0%, #070a0d 52%, #050709 100%);
  background-size: 40px 40px, 40px 40px, auto, auto, auto;
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 63%, rgba(184,255,53,.025) 63% 64%, transparent 64%);
  z-index: -1;
}

.app { max-width: 1880px; padding: 18px 22px 34px; }
.hero, .panel {
  background: var(--panel);
  border: 1px solid rgba(184,255,53,.12);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.hero {
  position: relative;
  min-height: 126px;
  padding: 22px 24px;
  border-radius: 18px;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(184,255,53,.07), transparent 34%),
    linear-gradient(180deg, rgba(20,29,32,.98), rgba(11,16,19,.98));
}
.hero::after {
  content: "";
  position: absolute;
  right: 29%;
  top: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(184,255,53,.1);
  transform: rotate(45deg);
  pointer-events: none;
}
.studio-brand-mark {
  position: relative;
  z-index: 1;
  width: 70px;
  min-width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  color: #0a0d0c;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 86%, 83% 100%, 17% 100%, 0 86%);
  filter: drop-shadow(0 14px 24px rgba(184,255,53,.2));
}
.studio-brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  clip-path: inherit;
  border: 1px solid rgba(7,10,13,.3);
}
.studio-brand-mark span { font: 900 39px/1 Arial, sans-serif; transform: translateY(2px); }
.hero-main-copy { position: relative; z-index: 1; }
.hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: -.045em;
  color: #f5faf6;
  text-shadow: 0 8px 30px rgba(0,0,0,.32);
}
.eyebrow, .section-kicker { color: var(--accent); letter-spacing: .17em; }
.studio-subline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #9ca9a3; font-size: 13px; }
.studio-subline i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.studio-subline b { margin-left: 4px; color: #d6ded9; font-weight: 600; }
.hero-top-actions { position: relative; z-index: 2; align-items: center; }
.hd-pipeline-badge,
.canvas-quality-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbeab7;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 11px;
  border: 1px solid rgba(184,255,53,.18);
  background: rgba(184,255,53,.065);
  border-radius: 8px;
}
.hd-pipeline-badge span,
.canvas-quality-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(184,255,53,.09), 0 0 16px rgba(184,255,53,.8);
}

.workspace-layout { grid-template-columns: 318px minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.sidebar-stack, .content-stack { gap: 12px; }
.sidebar-stack { top: 12px; max-height: calc(100vh - 24px); }
.panel { padding: 18px; border-radius: 16px; }
.sidebar-panel { padding: 15px; }
.section-heading h2, .panel h2 { color: #edf3ee; }
.section-kicker { font-size: 10px; }

button {
  min-height: 40px;
  border-radius: 9px;
  color: #071008;
  background: linear-gradient(180deg, #c6ff53 0%, #9eea24 100%);
  box-shadow: 0 10px 24px rgba(151, 231, 36, .13);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
button.ghost,
.payment-method-btn {
  color: #dce5df;
  background: #151d21;
  border: 1px solid #2a3538;
  box-shadow: none;
}
button.ghost:hover:not(:disabled) { border-color: rgba(184,255,53,.32); background: #192226; }
button.active-tab,
.segment-btn.active,
.payment-method-btn.active {
  color: #071008 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(184,255,53,.12), 0 8px 24px rgba(184,255,53,.12) !important;
}
.export-primary-btn { position: relative; overflow: hidden; font-size: 14px; letter-spacing: .02em; }
.export-primary-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -35%;
  width: 24%;
  height: 220%;
  background: rgba(255,255,255,.28);
  transform: rotate(22deg);
  transition: left .45s ease;
}
.export-primary-btn:hover::after { left: 118%; }

input, select {
  color: #edf3ee;
  background: #0d1317;
  border-color: #263136;
  border-radius: 9px;
}
input:focus, select:focus { border-color: rgba(184,255,53,.52); box-shadow: 0 0 0 3px rgba(184,255,53,.09); }
input[type="range"] { accent-color: var(--accent); }
label span, .label { color: #9ba7a2; }

.sidebar-meta-card,
.sidebar-summary-card,
.filter-panel,
.segmented-wrap,
.export-progress,
.premium-meta-card,
.access-mini-card,
.hero-status-card,
.hub-card,
.membership-shop-card,
.membership-side-card,
.auth-highlight-card {
  background: #11181c !important;
  border: 1px solid #263035 !important;
  color: var(--text);
  border-radius: 11px;
}
.meta-row + .meta-row { border-top-color: #252f33; }
.meta-row strong, .range-head strong, .segmented-title { color: #e6ede8; }
.summary-main strong { color: var(--accent); }
.summary-main span, .summary-sub-grid span, .quality-hint { color: #7f8d87; }
.quality-hint { font-size: 10px; }
.segmented-control { background: #090e11; border: 1px solid #242e32; border-radius: 9px; padding: 3px; }
.segmented-control.three-way { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.segment-btn { min-height: 32px; border-radius: 7px; color: #99a69f; background: transparent; border: 0; box-shadow: none; padding: 7px 8px; }
.feature-lock-note { color: #aeb9b3; background: rgba(184,255,53,.045); border-color: rgba(184,255,53,.1); }
.alert { color: #dce5df; background: #141c20; border-color: #2a3538; border-radius: 10px; }
.alert.success { background: rgba(56,189,123,.1); border-color: rgba(85,240,154,.22); color: #9af0c1; }
.alert.warning { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.2); color: #f3c879; }
.alert.error { background: rgba(255,102,94,.09); border-color: rgba(255,102,94,.2); color: #ffaaa5; }

.game-overview-panel {
  background:
    radial-gradient(circle at 92% 0%, rgba(184,255,53,.11), transparent 26%),
    linear-gradient(135deg, #151e21 0%, #0d1317 72%) !important;
  border-color: rgba(184,255,53,.19);
  overflow: hidden;
}
.game-overview-panel::after {
  content: "TACTICAL ASSET DATA";
  position: absolute;
  right: 18px;
  bottom: 10px;
  color: rgba(184,255,53,.07);
  font: 800 28px/1 Arial, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}
.game-stat-card, .stat-card { background: #11191d !important; border-color: #2b3739 !important; color: #f0f5f1 !important; }
.game-stat-card strong, .stat-card strong { color: var(--accent) !important; }

.overview-stage-panel { padding: 12px !important; overflow: hidden; background: #0b1013; }
.overview-stage-panel > .section-heading { padding: 5px 6px 12px; }
.canvas-viewport {
  position: relative;
  min-height: 520px;
  max-height: 78vh;
  padding: 34px 18px 20px 36px;
  overflow: auto;
  border: 1px solid #263136;
  border-radius: 12px;
  background:
    linear-gradient(rgba(184,255,53,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,53,.035) 1px, transparent 1px),
    #070b0e;
  background-size: 24px 24px;
  box-shadow: inset 0 24px 70px rgba(0,0,0,.34);
}
.canvas-viewport::after {
  content: "LIVE CANVAS";
  position: absolute;
  right: 12px;
  top: 9px;
  color: rgba(184,255,53,.34);
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .16em;
}
.canvas-ruler { position: absolute; z-index: 2; pointer-events: none; opacity: .52; }
.canvas-ruler-x {
  left: 36px; right: 0; top: 0; height: 24px;
  border-bottom: 1px solid #273135;
  background: repeating-linear-gradient(90deg, #60706a 0 1px, transparent 1px 12px);
  mask: linear-gradient(180deg, transparent 0 42%, #000 42% 100%);
}
.canvas-ruler-y {
  left: 0; top: 34px; bottom: 0; width: 24px;
  border-right: 1px solid #273135;
  background: repeating-linear-gradient(180deg, #60706a 0 1px, transparent 1px 12px);
  mask: linear-gradient(90deg, transparent 0 42%, #000 42% 100%);
}
.overview-canvas {
  min-width: 720px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(184,255,53,.1);
  border-radius: 10px;
  background: linear-gradient(180deg, #10171b, #0b1013);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  transform-origin: top left;
}
.overview-canvas.empty { min-height: 430px; display: grid; place-items: center; border-style: dashed; color: #718079; }
.wall-grid { gap: 10px; }
.wall-tile,
.skin-card,
.overview-summary-card,
.card {
  color: #e9f0eb;
  background: #141c20;
  border-color: #2a3539;
  border-radius: 12px;
}
.wall-tile { box-shadow: 0 9px 28px rgba(0,0,0,.2); transition: transform .18s ease, border-color .18s ease; }
.wall-tile:hover { transform: translateY(-2px); border-color: rgba(184,255,53,.32); }
.wall-tile img,
.skin-card img,
.summary-cover img {
  background:
    radial-gradient(circle at 50% 60%, rgba(184,255,53,.075), transparent 52%),
    linear-gradient(180deg, #10171b, #090e11);
  image-rendering: auto;
}
.wall-tile img { height: 172px; border-radius: 10px; }
.wall-tile.large-item { border-color: rgba(184,255,53,.55) !important; box-shadow: 0 0 0 1px rgba(184,255,53,.08), 0 16px 44px rgba(0,0,0,.3); }
.wall-tile.large-item img { height: 320px !important; }
.tile-meta strong, .skin-card h3, .summary-meta strong { color: #f0f5f1; }
.tile-meta span, .skin-card .muted, .summary-meta span { color: #89968f; }
.group-header h3 { color: #eef4ef; }
.group-header span { color: var(--accent); }
.legendary-image-stage { background: linear-gradient(180deg, #10191d, #080d10) !important; }
.legendary-poster-card { color: #eef4ef; background: #121a1e; border-color: rgba(184,255,53,.55); box-shadow: 0 15px 44px rgba(0,0,0,.28); }
.legendary-poster-card h3, .legendary-poster-card .muted, .legendary-poster-card .body > h3, .legendary-poster-card .body > .muted { color: #edf3ee !important; }
.legendary-inline-meta { color: var(--accent); }
.legendary-inline-sub { color: #8e9b95; }
.badge { color: #c2cdc7; background: #192226; border-color: #303b3f; }
.tabs { border-bottom: 1px solid #263135; padding-bottom: 12px; }
.empty { color: #7f8d87; background: #0d1316; border-color: #293438; border-radius: 10px; }

.manual-place-grid label {
  background: linear-gradient(135deg, rgba(31, 42, 45, .96), rgba(15, 22, 25, .98));
  border: 1px solid #34413f;
  border-radius: 10px;
  padding: 11px;
}
.manual-place-grid label:focus-within {
  border-color: rgba(184, 255, 53, .6);
  box-shadow: 0 0 0 2px rgba(184, 255, 53, .08);
}
.order-list-card { background: #11181c; border-color: #293438; color: #dce5df; }
.compact-details { color: #aeb9b3; }
.compact-details summary { color: #dce5df; }

.mini-modal-backdrop { background: rgba(2,5,7,.82); backdrop-filter: blur(12px); }
.mini-modal-card {
  color: #edf3ee;
  background: linear-gradient(180deg, #151e22, #0d1317);
  border: 1px solid rgba(184,255,53,.16);
  box-shadow: 0 35px 100px rgba(0,0,0,.55);
  border-radius: 16px;
}
.mini-modal-card h2, .payment-summary-row strong { color: #f0f5f1; }
.official-login-steps > div {
  color: #aeb9b3;
  background: #10181b;
  border-color: #293438;
}
.official-login-steps strong {
  color: #071008;
  background: var(--accent);
}
.official-login-link {
  color: #071008;
  background: linear-gradient(180deg, #c6ff53 0%, #9eea24 100%);
  box-shadow: 0 10px 24px rgba(151,231,36,.13);
}
.oauth-callback-card {
  background: #10181b;
  border-color: #293438;
}
.oauth-callback-card > strong { color: #f0f5f1; }
.oauth-callback-card > p { color: #93a09a; }
.payment-summary-card { background: #0d1417; border-color: #283338; }
.payment-summary-row { border-color: #263136; }
.payment-summary-row span { color: #8d9b95; }

.export-progress-fill { background: linear-gradient(90deg, #7bcf19, #c5ff51); box-shadow: 0 0 16px rgba(184,255,53,.35); }
.sidebar-stack::-webkit-scrollbar-thumb, .canvas-viewport::-webkit-scrollbar-thumb { background: #34413f; border-radius: 999px; }
.canvas-viewport::-webkit-scrollbar { width: 10px; height: 10px; }
.canvas-viewport::-webkit-scrollbar-track { background: #080c0f; }

/* 干员臻品馆：使用游戏原生 16:9 横幅展示，不再裁成普通素材卡。 */
.operator-gallery-group {
  padding: 16px;
  border: 1px solid rgba(68, 255, 194, .15);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(36, 255, 186, .045), transparent 38%),
    linear-gradient(180deg, #111a1e 0%, #0a1013 100%);
}
.operator-gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 12px;
}
.operator-gallery-heading h3 {
  margin: 4px 0 0;
  color: #f4f8f6;
  font-size: 24px;
  letter-spacing: -.035em;
}
.operator-gallery-kicker {
  color: #48f3b0;
  font: 800 10px/1.2 Arial, sans-serif;
  letter-spacing: .18em;
}
.operator-unlock-count {
  color: #9aa8a2;
  font-size: 13px;
  white-space: nowrap;
}
.operator-unlock-count strong {
  color: #45f3ad;
  font-size: 20px;
}
.operator-gallery-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.operator-rarity-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.operator-rarity-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c7d0cc;
  font-size: 12px;
  font-weight: 800;
}
.operator-rarity-counts i {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(var(--showcase-accent-rgb), .28);
}
.operator-gallery-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #283237;
}
.operator-gallery-tabs span {
  position: relative;
  min-height: 34px;
  display: grid;
  place-items: center;
  color: #87948e;
  border: 1px solid #2b363a;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(255,255,255,.035) 72%),
    #10171b;
  font-size: 12px;
  font-weight: 700;
}
.operator-gallery-tabs span.active {
  color: #4ef4b2;
  border-color: rgba(78, 244, 178, .62);
  background: rgba(43, 229, 166, .08);
  box-shadow: inset 0 -2px #43edaa;
}
.operator-showcase-grid,
.operator-gallery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.operator-gallery-list {
  grid-column: 1 / -1;
}
.wall-mode .wall-grid > .operator-showcase-card {
  grid-column: span 2;
}
.showcase-rarity-top {
  --showcase-accent: #ff5f66;
  --showcase-accent-rgb: 255, 95, 102;
}
.showcase-rarity-legend {
  --showcase-accent: #df8b3f;
  --showcase-accent-rgb: 223, 139, 63;
}
.showcase-rarity-epic {
  --showcase-accent: #a57bf4;
  --showcase-accent-rgb: 165, 123, 244;
}
.showcase-rarity-rare {
  --showcase-accent: #5b9ee9;
  --showcase-accent-rgb: 91, 158, 233;
}
.showcase-rarity-standard {
  --showcase-accent: #d6dfdb;
  --showcase-accent-rgb: 214, 223, 219;
}
.operator-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--showcase-accent-rgb), .64);
  border-radius: 3px;
  background: #070b0d;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 -1px rgba(var(--showcase-accent-rgb), .28);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.operator-showcase-card:hover {
  transform: translateY(-2px);
  border-color: var(--showcase-accent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 1px rgba(var(--showcase-accent-rgb), .12);
}
.operator-showcase-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #0a0e11;
}
.operator-showcase-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 5, 7, .18), transparent 28% 72%, rgba(1, 5, 7, .08)),
    linear-gradient(180deg, transparent 55%, rgba(4, 7, 9, .18) 69%, rgba(9, 12, 15, .93) 100%);
}
.operator-showcase-media::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.12) 3px 4px);
  mix-blend-mode: soft-light;
}
.operator-showcase-media > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #080d10 !important;
  transform: scale(1.002);
}
.operator-corner-tag {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 0;
  min-width: 52px;
  padding: 6px 10px 6px 14px;
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 95, 100, .68), #ff686d);
  border: 1px solid rgba(255,255,255,.42);
  border-right: 0;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .08em;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.operator-showcase-overlay {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 14px 12px;
  border-bottom: 2px solid var(--showcase-accent);
  background: linear-gradient(90deg, rgba(23, 28, 32, .96), rgba(23, 28, 32, .73) 58%, rgba(var(--showcase-accent-rgb), .26));
}
.operator-showcase-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.operator-showcase-name strong {
  overflow: hidden;
  color: #f7f9f8;
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.76);
}
.operator-diamond {
  width: 13px;
  min-width: 13px;
  height: 13px;
  border: 2px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 3px rgba(var(--showcase-accent-rgb), .14), 0 0 9px rgba(var(--showcase-accent-rgb), .3);
}
.operator-showcase-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #bac5c0;
  font-size: 10px;
  white-space: nowrap;
}
.operator-showcase-meta span {
  padding: 4px 7px;
  border: 1px solid rgba(var(--showcase-accent-rgb), .34);
  background: rgba(6,10,12,.48);
}

/* 近战刀皮：按小程序的横向武器展柜绘制。 */
.melee-gallery-group {
  padding: 16px;
  border: 1px solid rgba(223, 139, 63, .16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(223, 139, 63, .035), transparent 42%),
    linear-gradient(180deg, #11191d 0%, #090f12 100%);
}
.melee-gallery-heading {
  margin-bottom: 12px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid #283237;
}
.melee-gallery-heading h3 {
  margin: 4px 0 0;
  color: #f2f6f4;
  font-size: 24px;
  letter-spacing: -.035em;
}
.melee-gallery-heading > span {
  color: #a8b3ae;
  font-size: 13px;
}
.melee-showcase-grid,
.melee-gallery-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.melee-gallery-list { grid-column: 1 / -1; }
.wall-mode .wall-grid > .melee-showcase-card { grid-column: span 2; }
.melee-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--showcase-accent-rgb), .68);
  border-radius: 2px;
  background: #091012;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.melee-showcase-card:hover {
  transform: translateY(-2px);
  border-color: var(--showcase-accent);
  box-shadow: 0 18px 42px rgba(0,0,0,.44), 0 0 0 1px rgba(var(--showcase-accent-rgb), .1);
}
.melee-showcase-media {
  position: relative;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(75, 113, 109, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 113, 109, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% 58%, rgba(var(--showcase-accent-rgb), .08), transparent 46%),
    linear-gradient(180deg, #111a1d 0%, #0a1114 100%);
  background-size: 14px 14px, 14px 14px, auto, auto;
}
.melee-showcase-media::before {
  content: "STRICT / MELEE ASSET / TACTICAL DISPLAY";
  position: absolute;
  z-index: 1;
  left: 18px;
  top: 15px;
  width: 150px;
  color: rgba(136, 183, 173, .11);
  font: 700 8px/1.65 Arial, sans-serif;
  letter-spacing: .08em;
  white-space: normal;
}
.melee-showcase-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--showcase-accent-rgb), .09) 52%, rgba(var(--showcase-accent-rgb), .52) 100%);
}
.melee-showcase-media > img {
  position: absolute;
  z-index: 3;
  inset: 10% 4% 22%;
  display: block;
  width: 92% !important;
  height: 68% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.56));
}
.melee-showcase-overlay {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 43px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px 8px;
  border-bottom: 2px solid var(--showcase-accent);
  background: linear-gradient(90deg, rgba(11,16,19,.78), rgba(11,16,19,.3) 58%, transparent);
}
.melee-showcase-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.melee-showcase-name strong {
  overflow: hidden;
  color: #f5f8f6;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.72);
}
.melee-diamond {
  width: 10px;
  min-width: 10px;
  height: 10px;
  border: 2px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(var(--showcase-accent-rgb), .32);
}
.melee-showcase-meta {
  display: flex;
  gap: 6px;
  color: #d0d8d4;
  font-size: 10px;
  white-space: nowrap;
}
.melee-showcase-meta span {
  padding: 4px 7px;
  border: 1px solid rgba(var(--showcase-accent-rgb), .34);
  background: rgba(5,9,11,.46);
}
.export-dom-shot .operator-showcase-card,
.export-capture .operator-showcase-card,
.export-dom-shot .melee-showcase-card,
.export-capture .melee-showcase-card {
  transform: none !important;
}

@media (max-width: 1180px) {
  .workspace-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .hd-pipeline-badge { display: none; }
  .operator-showcase-grid,
  .operator-gallery-list { grid-template-columns: 1fr; }
  .wall-mode .wall-grid > .operator-showcase-card,
  .wall-mode .wall-grid > .melee-showcase-card { grid-column: span 2; }
}
@media (max-width: 980px) {
  .app { padding: 12px; }
  .hero { align-items: flex-start; }
  .studio-brand-mark { width: 54px; min-width: 54px; height: 54px; }
  .studio-brand-mark span { font-size: 31px; }
  .workspace-layout { grid-template-columns: 1fr; }
  .sidebar-stack { position: static; max-height: none; overflow: visible; }
  .canvas-viewport { min-height: 460px; max-height: 72vh; }
  .overview-canvas { min-width: 660px; }
}
@media (max-width: 680px) {
  .hero { padding: 18px; gap: 12px; }
  .studio-brand-mark { display: none; }
  .hero-top-actions { width: 100%; }
  .studio-subline b { width: 100%; margin-left: 0; }
  .canvas-viewport { padding-left: 18px; }
  .canvas-ruler-y { display: none; }
  .overview-canvas { min-width: 560px; }
  .canvas-quality-status { display: none; }
  .operator-gallery-heading { align-items: flex-start; }
  .operator-gallery-summary { align-items: flex-start; }
  .operator-gallery-tabs { grid-template-columns: repeat(5, minmax(64px, 1fr)); }
  .wall-mode .wall-grid > .operator-showcase-card,
  .wall-mode .wall-grid > .melee-showcase-card { grid-column: span 1; }
}

/* --- V52: official-style weapon showcase cards and column-aware melee grid --- */
.weapon-gallery-heading {
  margin-bottom: 12px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid #283237;
}
.weapon-gallery-heading h3 {
  margin: 4px 0 0;
  color: #f2f6f4;
  font-size: 24px;
  letter-spacing: -.035em;
}
.weapon-gallery-heading > span {
  color: #a8b3ae;
  font-size: 13px;
}

.legendary-weapon-showcase-grid,
.legendary-weapon-gallery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(390px, 1fr));
  gap: 14px;
  align-items: start;
}
.legendary-weapon-gallery-list,
.weapon-gallery-list,
.melee-gallery-list { grid-column: 1 / -1; }
.wall-mode .wall-grid > .legendary-weapon-showcase-card {
  grid-column: span 2;
}
.legendary-weapon-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--showcase-accent-rgb), .72);
  border-radius: 2px;
  background: #080e11;
  color: #edf2f4;
  box-shadow: 0 16px 38px rgba(0,0,0,.42);
}
.legendary-weapon-media {
  position: relative;
  aspect-ratio: 1.94 / 1;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 2px solid var(--showcase-accent);
  background:
    linear-gradient(rgba(79, 113, 110, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 113, 110, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(68, 94, 91, .28), transparent 56%),
    linear-gradient(180deg, #111a1d 0%, #0e171a 66%, #7d3d18 100%);
  background-size: 14px 14px, 14px 14px, auto, auto;
}
.legendary-weapon-media::before {
  content: "STRICT / COLLECTIBLE WEAPON / DISPLAY";
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 14px;
  width: 168px;
  color: rgba(143, 183, 177, .1);
  font: 700 8px/1.65 Arial, sans-serif;
  letter-spacing: .08em;
}
.legendary-weapon-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(var(--showcase-accent-rgb), .13) 54%, rgba(var(--showcase-accent-rgb), .5));
  pointer-events: none;
}
.legendary-weapon-media > img {
  position: absolute;
  z-index: 3;
  inset: 7% 4% 14%;
  width: 92% !important;
  height: 79% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.58));
}
.legendary-weapon-diamond {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 14px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(var(--showcase-accent-rgb), .4);
}
.legendary-weapon-details { padding: 10px 14px 13px; }
.legendary-weapon-quality-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(114, 137, 135, .28);
}
.legendary-weapon-quality {
  color: #dce4e7;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -.06em;
}
.legendary-weapon-quality.quality-premium { color: #f7b85c; }
.legendary-weapon-quality.quality-fine { color: #dce4e7; }
.legendary-weapon-serial {
  padding: 3px 7px;
  color: #dff0ff;
  background: #4f99d7;
  font: 700 11px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}
.legendary-weapon-date {
  margin-left: auto;
  color: #82908d;
  font-size: 11px;
  white-space: nowrap;
}
.legendary-weapon-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.legendary-wear-grade {
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(80, 151, 210, .5);
  color: #59a9e9;
  background: rgba(36, 93, 138, .13);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}
.legendary-weapon-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legendary-weapon-copy strong {
  overflow: hidden;
  color: #d8e0e2;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legendary-weapon-copy span { color: #58a8e9; font-size: 12px; }
.legendary-section-label,
.weapon-section-label {
  color: #7f8d89;
  font-size: 10px;
  white-space: nowrap;
}

.weapon-showcase-grid,
.weapon-gallery-list,
.melee-showcase-grid,
.melee-gallery-list {
  display: grid;
  grid-template-columns: repeat(var(--asset-col-count, var(--melee-col-count, 2)), minmax(170px, 1fr));
  gap: 10px;
  align-items: start;
}
.melee-showcase-grid,
.melee-gallery-list {
  grid-template-columns: repeat(var(--melee-col-count, var(--asset-col-count, 2)), minmax(180px, 1fr));
}
.wall-mode .wall-grid > .weapon-showcase-card,
.wall-mode .wall-grid > .melee-showcase-card {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}
.weapon-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--showcase-accent-rgb), .7);
  border-radius: 1px;
  background: #091013;
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
  transition: transform .2s ease, border-color .2s ease;
}
.weapon-showcase-card:hover {
  transform: translateY(-2px);
  border-color: var(--showcase-accent);
}
.weapon-showcase-media {
  position: relative;
  aspect-ratio: 1.58 / 1;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(78, 112, 108, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 112, 108, .06) 1px, transparent 1px),
    radial-gradient(circle at 54% 44%, rgba(65, 95, 91, .2), transparent 54%),
    linear-gradient(180deg, #111b1e 0%, #0c1518 62%, #77431f 100%);
  background-size: 13px 13px, 13px 13px, auto, auto;
}
.weapon-showcase-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgba(var(--showcase-accent-rgb), .11) 52%, rgba(var(--showcase-accent-rgb), .46));
  pointer-events: none;
}
.weapon-showcase-media > img {
  position: absolute;
  z-index: 3;
  inset: 10% 5% 25%;
  width: 90% !important;
  height: 65% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 13px rgba(0,0,0,.58));
}
.weapon-corner-tag {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  padding: 4px 7px;
  color: #fff;
  background: #e85b67;
  font-size: 10px;
  line-height: 1;
}
.weapon-showcase-overlay {
  position: absolute;
  z-index: 5;
  left: 7px;
  right: 7px;
  bottom: 6px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.weapon-showcase-overlay strong {
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  color: #f4f7f5;
  background: rgba(15, 18, 18, .76);
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px #000;
  white-space: nowrap;
}
.weapon-diamond {
  width: 9px;
  min-width: 9px;
  height: 9px;
  border: 2px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(var(--showcase-accent-rgb), .38);
}
.weapon-section-label {
  position: absolute;
  z-index: 7;
  right: 6px;
  bottom: 6px;
  padding: 3px 5px;
  background: rgba(6, 10, 11, .72);
}

/* The knife art now scales with each column instead of forcing a two-column span. */
.melee-showcase-card { box-shadow: 0 10px 24px rgba(0,0,0,.34); }
.melee-showcase-media { aspect-ratio: 16 / 9; }
.melee-showcase-media > img {
  inset: 14% 7% 28%;
  width: 86% !important;
  height: 58% !important;
  filter: drop-shadow(0 12px 13px rgba(0,0,0,.58));
}
.melee-showcase-overlay {
  min-height: 36px;
  gap: 7px;
  padding: 7px 9px 6px;
}
.melee-showcase-name { gap: 6px; }
.melee-showcase-name strong { font-size: clamp(11px, .95vw, 15px); }
.melee-showcase-meta { display: none; }

.export-dom-shot .legendary-weapon-showcase-card,
.export-capture .legendary-weapon-showcase-card,
.export-dom-shot .weapon-showcase-card,
.export-capture .weapon-showcase-card {
  transform: none !important;
}

@media (max-width: 680px) {
  .legendary-weapon-showcase-grid,
  .legendary-weapon-gallery-list { grid-template-columns: minmax(360px, 1fr); }
  .legendary-weapon-date { display: none; }
}

/* --- V53: larger collectible weapons, mini-program charm gallery, 4K-safe art --- */
.legendary-weapon-showcase-grid,
.legendary-weapon-gallery-list {
  grid-template-columns: minmax(0, 1fr);
}
.wall-mode .wall-grid > .legendary-weapon-showcase-card {
  grid-column: 1 / -1 !important;
  grid-row: span 1 !important;
}
.legendary-weapon-media { aspect-ratio: 12 / 5; }
.legendary-weapon-media > img {
  inset: 4% 3% 10%;
  width: 94% !important;
  height: 86% !important;
}
.legendary-weapon-details { padding: 13px 18px 16px; }
.legendary-weapon-quality-row { padding-bottom: 12px; }
.legendary-weapon-identity { padding-top: 12px; }

.charm-gallery-heading {
  margin-bottom: 12px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid #283237;
}
.charm-gallery-heading h3 {
  margin: 4px 0 0;
  color: #f2f6f4;
  font-size: 24px;
  letter-spacing: -.035em;
}
.charm-gallery-heading > span {
  color: #a8b3ae;
  font-size: 13px;
}
.charm-showcase-grid,
.charm-gallery-list {
  display: grid;
  grid-template-columns: repeat(var(--asset-col-count, 5), minmax(140px, 1fr));
  gap: 10px;
  align-items: start;
}
.charm-gallery-list { grid-column: 1 / -1; }
.wall-mode .wall-grid > .charm-showcase-card {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}
.charm-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--showcase-accent-rgb), .68);
  border-radius: 1px;
  color: #eef3f1;
  background: #091013;
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
  transition: transform .2s ease, border-color .2s ease;
}
.charm-showcase-card:hover {
  transform: translateY(-2px);
  border-color: var(--showcase-accent);
}
.charm-showcase-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(78, 112, 108, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 112, 108, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% 43%, rgba(var(--showcase-accent-rgb), .1), transparent 46%),
    linear-gradient(180deg, #111b1e 0%, #0c1518 64%, #75411f 100%);
  background-size: 13px 13px, 13px 13px, auto, auto;
}
.charm-showcase-media::before,
.charm-showcase-media::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.charm-showcase-media::before {
  left: 0;
  top: 0;
  border-left: 1px solid #d5ded9;
  border-top: 1px solid #d5ded9;
}
.charm-showcase-media::after {
  right: 0;
  top: 0;
  border-right: 1px solid #d5ded9;
  border-top: 1px solid #d5ded9;
}
.charm-showcase-media > img {
  position: absolute;
  z-index: 3;
  inset: 8% 9% 20%;
  width: 82% !important;
  height: 72% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(0,0,0,.58));
}
.charm-rarity-diamond {
  position: absolute;
  z-index: 6;
  left: 9px;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--showcase-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(var(--showcase-accent-rgb), .38);
}
.charm-corner-tag {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  padding: 4px 7px;
  color: #fff;
  background: #e85b67;
  font-size: 10px;
  line-height: 1;
}
.charm-showcase-overlay {
  position: absolute;
  z-index: 5;
  left: 7px;
  right: 7px;
  bottom: 6px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.charm-showcase-overlay strong {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  color: #f4f7f5;
  background: rgba(15,18,18,.78);
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px #000;
  white-space: nowrap;
}
.charm-section-label { display: none; }
.export-dom-shot .charm-showcase-card,
.export-capture .charm-showcase-card { transform: none !important; }

@media (max-width: 680px) {
  .charm-showcase-grid,
  .charm-gallery-list {
    grid-template-columns: repeat(var(--asset-col-count, 3), minmax(112px, 1fr));
  }
}

/* --- V54: mini-program charm detail cards + compact operator section --- */
.operator-gallery-group.operator-gallery-compact {
  padding: 10px;
}

.charm-showcase-grid,
.charm-gallery-list {
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 18px;
}

.wall-mode .wall-grid > .charm-showcase-card {
  grid-column: span 2 !important;
}

.charm-showcase-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.charm-showcase-card:hover {
  transform: none;
  border-color: transparent;
}

.charm-showcase-media {
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(var(--showcase-accent-rgb), .72);
  background:
    linear-gradient(rgba(73, 103, 105, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 103, 105, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, rgba(var(--showcase-accent-rgb), .13), transparent 48%),
    linear-gradient(180deg, #102024 0%, #101b1e 66%, #a75b29 100%);
  background-size: 16px 16px, 16px 16px, auto, auto;
  box-shadow: inset 0 -2px rgba(var(--showcase-accent-rgb), .72), 0 14px 30px rgba(0,0,0,.3);
}

.charm-showcase-media::before,
.charm-showcase-media::after {
  width: 12px;
  height: 12px;
}

.charm-showcase-media > img {
  inset: 11% 10% 7%;
  width: 80% !important;
  height: 82% !important;
  max-width: 80% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: contrast(1.07) saturate(1.06) drop-shadow(0 12px 16px rgba(0,0,0,.38));
}

.charm-serial {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  padding: 3px 8px 4px;
  color: #e7edeb;
  border-right: 1px solid #53656a;
  border-bottom: 1px solid #53656a;
  background: rgba(12, 20, 23, .86);
  font: 600 12px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .025em;
}

.charm-showcase-details {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 10px 2px;
  color: #edf2ef;
  background: linear-gradient(180deg, rgba(8, 14, 17, .98), rgba(9, 15, 18, .96));
}

.charm-showcase-name {
  max-width: 88%;
  overflow: hidden;
  padding: 7px 24px;
  color: var(--showcase-accent);
  border: 1px solid #4d5b60;
  background: rgba(11, 20, 23, .84);
  font-size: 18px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charm-acquired-date {
  color: #e4e9e6;
  font-size: 14px;
}

.charm-page-index {
  color: #bdc7c2;
  font-size: 11px;
  line-height: 1;
}

.charm-corner-tag {
  top: 7px;
  right: 7px;
}

@media (max-width: 760px) {
  .charm-showcase-grid,
  .charm-gallery-list {
    grid-template-columns: minmax(300px, 1fr);
  }
  .wall-mode .wall-grid > .charm-showcase-card {
    grid-column: 1 / -1 !important;
  }
}

/* --- V65: readable 4K export summary and place levels --- */
.canvas-export-bundle > .export-summary-panel,
.canvas-export-bundle > .export-place-panel {
  padding: 30px !important;
  border-width: 2px !important;
  border-radius: 20px !important;
}

.canvas-export-bundle .export-summary-panel .game-overview-hero {
  gap: 32px;
  margin-bottom: 28px;
}

.canvas-export-bundle .export-summary-panel .game-overview-kicker {
  font-size: 18px !important;
  line-height: 1.2;
  letter-spacing: .16em;
}

.canvas-export-bundle .export-summary-panel .game-overview-left h2 {
  margin: 8px 0 12px;
  font-size: 64px !important;
  line-height: 1.04;
}

.canvas-export-bundle .export-summary-panel .game-overview-subline {
  font-size: 22px !important;
  line-height: 1.45;
}

.canvas-export-bundle .export-summary-panel .game-rank-btn {
  min-width: 220px;
  min-height: 78px;
  padding: 20px 32px;
  font-size: 20px;
  font-weight: 800;
}

.canvas-export-bundle .export-summary-panel .game-overview-stats {
  gap: 18px;
}

.canvas-export-bundle .export-summary-panel .game-stat-card {
  min-height: 184px !important;
  border-width: 2px !important;
}

.canvas-export-bundle .export-summary-panel .game-stat-card strong {
  font-size: 64px !important;
  line-height: 1;
}

.canvas-export-bundle .export-summary-panel .game-stat-card span {
  margin-top: 16px;
  font-size: 24px !important;
  line-height: 1.2;
}

.canvas-export-bundle .export-place-panel .place-header-row {
  margin-bottom: 24px;
}

.canvas-export-bundle .export-place-panel .place-header-row h2 {
  font-size: 36px !important;
  line-height: 1.15;
}

.canvas-export-bundle .export-place-panel .place-header-row button {
  min-height: 58px;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
}

.canvas-export-bundle .export-place-panel .manual-place-grid {
  gap: 18px !important;
}

.canvas-export-bundle .export-place-panel .manual-place-grid label {
  min-height: 164px;
  gap: 14px;
  padding: 18px !important;
  border-width: 2px;
  border-radius: 14px;
}

.canvas-export-bundle .export-place-panel .place-level-heading {
  min-height: 76px;
  gap: 16px;
}

.canvas-export-bundle .export-place-panel .place-level-icon-shell {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  padding-right: 14px;
}

.canvas-export-bundle .export-place-panel .place-level-icon {
  width: 54px;
  height: 54px;
}

.canvas-export-bundle .export-place-panel .place-level-copy {
  gap: 5px;
}

.canvas-export-bundle .export-place-panel .place-level-copy strong {
  font-size: 24px !important;
  line-height: 1.15;
}

.canvas-export-bundle .export-place-panel .place-level-copy small {
  font-size: 14px !important;
  line-height: 1.2;
  letter-spacing: .06em;
}

/* --- V66: editable overview copy, visible imports and free canvas layout --- */
.overview-editable-copy {
  position: relative;
  min-width: 2ch;
  border-radius: 5px;
  outline: 1px dashed transparent;
  outline-offset: 5px;
  cursor: text;
  transition: outline-color .16s ease, background .16s ease;
}

.overview-editable-copy:hover {
  outline-color: rgba(184, 255, 53, .32);
  background: rgba(184, 255, 53, .035);
}

.overview-editable-copy:focus {
  outline: 1px solid rgba(184, 255, 53, .72);
  background: rgba(184, 255, 53, .07);
}

.canvas-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.canvas-editor-btn {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.canvas-editor-btn.active {
  color: #071008;
  border-color: var(--accent);
  background: var(--accent);
}

.canvas-editable-item {
  position: relative;
  transform: translate(var(--canvas-x, 0), var(--canvas-y, 0)) !important;
  transition: box-shadow .16s ease, outline-color .16s ease;
}

.canvas-edit-mode .canvas-editable-item {
  z-index: 3;
  outline: 1px dashed rgba(184, 255, 53, .38);
  outline-offset: 3px;
}

.canvas-edit-mode .canvas-editable-item:hover {
  z-index: 8;
  outline-color: rgba(184, 255, 53, .92);
}

.canvas-editable-item.canvas-item-dragging {
  z-index: 40 !important;
  outline: 2px solid var(--accent) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6) !important;
  transition: none !important;
}

.canvas-item-tools {
  position: absolute;
  z-index: 60;
  top: 8px;
  right: 8px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(184, 255, 53, .32);
  border-radius: 8px;
  background: rgba(6, 10, 12, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
}

.canvas-edit-mode .canvas-item-tools {
  display: flex;
}

.canvas-item-tools button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}

.canvas-item-drag {
  cursor: grab;
  touch-action: none;
}

.canvas-item-drag:active {
  cursor: grabbing;
}

.canvas-item-delete {
  color: #fff !important;
  border-color: rgba(255, 83, 83, .65) !important;
  background: rgba(158, 29, 38, .92) !important;
}

.legendary-insert-showcase-card {
  position: relative;
  min-width: 0;
  grid-column: 1 / -1 !important;
  overflow: hidden;
  border: 1px solid rgba(184, 255, 53, .38);
  border-radius: 3px;
  background: #080e11;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}

.legendary-insert-media {
  width: 100%;
  min-height: 160px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(79, 113, 110, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 113, 110, .045) 1px, transparent 1px),
    #0b1215;
  background-size: 16px 16px;
}

.legendary-insert-media > img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.canvas-export-bundle .overview-editable-copy {
  outline: none !important;
  background: transparent !important;
  cursor: default !important;
}

.canvas-export-bundle .canvas-item-tools {
  display: none !important;
}

.canvas-export-bundle .canvas-editable-item {
  outline: none !important;
  transform: translate(var(--canvas-x, 0), var(--canvas-y, 0)) !important;
}

@media (max-width: 760px) {
  .overview-stage-panel > .section-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .canvas-editor-actions {
    justify-content: flex-start;
  }
}

.canvas-export-bundle .export-place-panel .manual-place-grid input {
  min-height: 62px;
  padding: 14px 18px;
  font-size: 24px !important;
  line-height: 1;
  border-width: 2px;
}

/* --- V67: independent operator skin column control --- */
.operator-showcase-grid,
.operator-gallery-list {
  grid-template-columns: repeat(var(--operator-col-count, 2), minmax(0, 1fr)) !important;
}

/* --- V70: independent charm/accessory column control --- */
.charm-showcase-grid,
.charm-gallery-list {
  grid-template-columns: repeat(var(--charm-col-count, 2), minmax(0, 1fr)) !important;
}
/* V74 credit membership admin */
.credit-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.credit-package-card { min-height: 106px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border: 1px solid #31423f; background: #10191b; color: #eaf4f0; }
.credit-package-card strong { font-size: 24px; }
.credit-package-card span { color: #aaff2c; }
.credit-package-card small { color: #899b96; }
.credit-package-card.active { border-color: #aaff2c; box-shadow: inset 0 0 0 1px #aaff2c; background: #142116; }
.admin-console-link { text-decoration: none; }
.admin-body { min-height: 100vh; background: #07100f; color: #edf7f3; }
.admin-login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 20%, rgba(80, 255, 185, .09), transparent 38%); }
.admin-login-card { width: min(430px, 100%); padding: 36px; border: 1px solid #2e4941; border-radius: 24px; background: linear-gradient(145deg, #111d1e, #0b1415); box-shadow: 0 28px 90px rgba(0, 0, 0, .48); }
.admin-login-card h1 { margin: 8px 0; font-size: 40px; }
.admin-login-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 24px; background: #aaff2c; color: #07100f; font-size: 28px; font-weight: 900; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.admin-login-form { display: grid; gap: 16px; }
.admin-login-form label span { display: block; margin-bottom: 8px; color: #9eb1aa; }
.admin-login-form input { width: 100%; }
.admin-login-form button { min-height: 48px; margin-top: 4px; }
.admin-shell { width: min(1500px, calc(100% - 36px)); margin: 0 auto; padding: 32px 0 80px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; border: 1px solid #26433c; border-radius: 24px; background: linear-gradient(135deg, #101b1c, #102117); }
.admin-header h1 { margin: 6px 0 8px; font-size: clamp(32px, 4vw, 54px); }
.admin-header-actions { display: flex; gap: 12px; align-items: center; }
.admin-identity { color: #9eb1aa; }
.admin-link-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; text-decoration: none; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-summary-card { min-height: 126px; padding: 22px; border: 1px solid #274039; border-radius: 18px; background: #101a1c; display: flex; flex-direction: column; justify-content: center; }
.admin-summary-card strong { color: #aaff2c; font-size: 32px; line-height: 1; }
.admin-summary-card span { color: #9dafaa; margin-top: 12px; }
.admin-panel { border: 1px solid #29433c; border-radius: 22px; background: #0d1719; overflow: hidden; }
.admin-toolbar { padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #263b37; }
.admin-toolbar h2 { margin: 0 0 4px; }
.admin-search { display: flex; gap: 8px; }
.admin-search input { min-width: 280px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 1080px; }
.admin-table th, .admin-table td { padding: 16px; text-align: left; border-bottom: 1px solid #1e312d; vertical-align: top; }
.admin-table th { color: #7f958e; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.admin-table td > strong, .admin-table td > span, .admin-table td > small { display: block; margin-bottom: 5px; }
.admin-table small { color: #789089; }
.credit-number { color: #aaff2c; font-size: 25px; }
.admin-badge { display: inline-block !important; width: fit-content; padding: 4px 8px; border: 1px solid #41534e; border-radius: 99px; font-size: 12px; }
.admin-badge.admin, .admin-badge.active { color: #57f4bd; border-color: #278f6e; }
.admin-badge.disabled { color: #ff9191; border-color: #8f3c46; }
.admin-empty { padding: 60px !important; text-align: center !important; color: #879a95; }
.admin-edit-card { width: min(760px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form-grid label span { display: block; margin-bottom: 7px; color: #91a59f; }
.admin-form-grid input, .admin-form-grid select { width: 100%; }
.admin-form-wide { grid-column: 1 / -1; }
.admin-checkbox { display: flex !important; align-items: center; gap: 10px; }
.admin-checkbox input { width: auto; }
.admin-checkbox span { margin: 0 !important; }
.admin-ledger { padding: 16px; border: 1px solid #29413b; border-radius: 14px; background: #091214; }
.admin-ledger h3 { margin: 16px 0 10px; }
.admin-ledger h3:first-child { margin-top: 0; }
.admin-ledger-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid #20312e; }
.admin-ledger-row .plus { color: #aaff2c; }
.admin-ledger-row .minus { color: #ff817d; }
.admin-ledger-row small { color: #789089; }
@media (max-width: 1100px) { .admin-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .admin-header, .admin-toolbar { align-items: stretch; flex-direction: column; }
  .admin-header-actions, .admin-search { flex-wrap: wrap; }
  .admin-search input { min-width: 100%; }
  .admin-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-wide { grid-column: auto; }
}