@import url('/css/flipkey-hud.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0f;
  color: #e0e0e0;
  min-height: 100vh;
}

a { color: #8b5cf6; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
/* Full-width brand bar (the CLI prompt) — populated by publisher-auth.js, which
   moves the .cli-brand here out of the sidebar so a long ~/path$ can't overflow. */
.topbar {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  background: rgba(11, 15, 20, 0.92);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: hidden; /* clip the light-cycle trail to the bar */
}
.topbar .cli-brand { margin-bottom: 0; padding: 0; position: relative; z-index: 1; }

/* Tron light-cycle trail — a glowing streak runs the bottom edge of the bar,
   bright "head" leading a fading tail. Pure CSS; honors reduced-motion. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 280px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(34, 211, 238, 0) 0%,
    rgba(34, 211, 238, 0.12) 55%,
    #22d3ee 88%,
    #e6feff 100%);
  box-shadow: 0 0 10px #22d3ee, 0 0 22px rgba(34, 211, 238, 0.65);
  transform: translateX(-280px);
  animation: topbar-trail 4.6s linear infinite;
  pointer-events: none;
}
@keyframes topbar-trail {
  0%   { transform: translateX(-280px); }
  100% { transform: translateX(100vw); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar::after { animation: none; opacity: 0; }
}

.layout {
  display: flex;
  min-height: calc(100vh - 52px);
}

.sidebar {
  width: 220px;
  background: #0f0f18;
  border-right: 1px solid #1a1a24;
  padding: 24px 0;
  flex-shrink: 0;
}

.sidebar .logo {
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 20px;
  margin-bottom: 32px;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar nav a {
  display: block;
  padding: 10px 20px;
  color: #888;
  font-size: 0.9rem;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}

.sidebar nav a:hover, .sidebar nav a.active {
  color: #e0e0e0;
  background: #111118;
  border-left-color: #6366f1;
  text-decoration: none;
}

.sidebar .publisher-name {
  padding: 0 20px;
  margin-bottom: 24px;
  font-size: 0.75rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar .logout {
  margin-top: auto;
  padding: 10px 20px;
  color: #666;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.sidebar .logout:hover { color: #ef4444; }

.main {
  flex: 1;
  padding: 32px 40px;
  overflow-y: auto;
}

.main h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  color: #fff;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.card {
  background: #111118;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
}

.card .label {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.card .value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.card .value.green { color: #22c55e; }
.card .value.yellow { color: #eab308; }
.card .value.red { color: #ef4444; }
.card .value.purple { color: #a855f7; }

/* Tables */
.table-wrap {
  background: #111118;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.table-wrap h3 {
  padding: 16px 20px;
  font-size: 0.85rem;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #1a1a24;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1a1a24;
}

td {
  padding: 10px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid #0f0f18;
}

tr:hover { background: #15151f; }
.empty { padding: 32px; text-align: center; color: #555; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.badge.draft { background: #333; color: #888; }
.badge.minting { background: #312e81; color: #818cf8; }
.badge.active { background: #064e3b; color: #34d399; }
.badge.paused { background: #422006; color: #f59e0b; }
.badge.sold_out, .badge.sold-out { background: #1e1b4b; color: #a78bfa; }
.badge.cancelled { background: #450a0a; color: #f87171; }
.badge.sent { background: #064e3b; color: #34d399; }
.badge.pending { background: #422006; color: #f59e0b; }
.badge.dead { background: #450a0a; color: #f87171; }
.badge.failed { background: #450a0a; color: #f87171; }
.badge.burned { background: #312e81; color: #818cf8; }
.badge.minted { background: #064e3b; color: #34d399; }

/* Forms */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 6px;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 10px 14px;
  background: #0a0a0f;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 0.9rem;
  outline: none;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: #6366f1;
}

.form-group textarea { resize: vertical; min-height: 60px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: #222;
  color: #e0e0e0;
}
.btn-secondary:hover { background: #333; }

.btn-danger {
  background: #450a0a;
  color: #f87171;
}
.btn-danger:hover { background: #5c1010; }

.btn-sm { padding: 6px 12px; font-size: 0.75rem; }

.btn + .btn { margin-left: 8px; }

/* Modal / Panel */
.panel {
  background: #111118;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.panel h3 {
  font-size: 0.85rem;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

/* Progress */
.progress {
  height: 8px;
  background: #1a1a24;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 4px;
  transition: width 0.3s;
}

/* Login page */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  text-align: center;
  max-width: 400px;
  width: 100%;
  padding: 40px;
}

.login-box h1 {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.login-box .subtitle {
  color: #666;
  margin-bottom: 32px;
  font-size: 0.95rem;
}

.login-box .error {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 12px;
  display: none;
}

/* Utilities */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-muted { color: #666; font-size: 0.85rem; }
.text-mono { font-family: 'SF Mono', monospace; font-size: 0.8rem; }

/* No programming ligatures in editable fields — mono fonts fuse "//" into
   one glyph, which reads as a missing slash in URL inputs. */
input, textarea, select { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-8 { margin-left: 8px; }

/* Sidebar user info */
.sidebar-user {
  padding: 0 20px;
  margin-top: auto;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 8px;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-content {
  background: #111118;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
}
.modal-content h3 {
  color: #fff;
  margin-bottom: 12px;
}

/* Wizard */
.wizard {
  max-width: 900px;
}

.wizard-nav {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  gap: 0;
}

.wizard-nav-step {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  position: relative;
}

.wizard-nav-step .step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  background: #0a0a0f;
  flex-shrink: 0;
  transition: all 0.2s;
}

.wizard-nav-step .step-label {
  font-size: 0.75rem;
  color: #555;
  white-space: nowrap;
  transition: color 0.2s;
}

.wizard-nav-step.active .step-circle {
  border-color: #6366f1;
  color: #fff;
  background: #6366f1;
}

.wizard-nav-step.active .step-label {
  color: #e0e0e0;
}

.wizard-nav-step.completed .step-circle {
  border-color: #22c55e;
  color: #fff;
  background: #22c55e;
}

.wizard-nav-step.completed .step-label {
  color: #888;
}

.wizard-nav-connector {
  flex: 0 0 24px;
  height: 2px;
  background: #333;
  margin: 0 4px;
}

.wizard-nav-connector.completed {
  background: #22c55e;
}

.wizard-panel {
  display: none;
}

.wizard-panel.active {
  display: block;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #222;
}

/* Tag input */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: #0a0a0f;
  border: 1px solid #333;
  border-radius: 8px;
  min-height: 42px;
  align-items: center;
  cursor: text;
}

.tag-input-wrap:focus-within {
  border-color: #6366f1;
}

.tag-input-wrap input {
  border: none;
  background: none;
  color: #e0e0e0;
  font-size: 0.85rem;
  outline: none;
  flex: 1;
  min-width: 80px;
  padding: 2px 0;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #1e1b4b;
  color: #a78bfa;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-pill .tag-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.85rem;
  line-height: 1;
}

.tag-pill .tag-remove:hover {
  opacity: 1;
}

/* Screenshot grid */
.screenshot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.screenshot-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.screenshot-row input {
  flex: 1;
  padding: 8px 12px;
  background: #0a0a0f;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 0.85rem;
  outline: none;
}

.screenshot-row input:focus {
  border-color: #6366f1;
}

.screenshot-row .btn-remove {
  color: #666;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  border: none;
  background: none;
}

.screenshot-row .btn-remove:hover {
  color: #ef4444;
}

/* Review cards */
.review-section {
  margin-bottom: 24px;
}

.review-section h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.review-section h4 .btn-sm {
  text-transform: none;
  letter-spacing: 0;
}

.review-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  font-size: 0.85rem;
}

.review-label {
  color: #666;
}

.review-value {
  color: #e0e0e0;
}

/* ── Marketplace Preview (mirrors /marketplace styles) ──────���──── */

.marketplace-preview {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mp-card-preview,
.mp-detail-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mp-card-label {
  font-size: 0.72rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Card preview (matches .game-card in marketplace) ─────────── */

.mp-card {
  width: 220px;
  background: #1c1f2e;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2a2d3e;
  display: flex;
  flex-direction: column;
}

.mp-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #242738;
  position: relative;
  overflow: hidden;
}

.mp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #5c6078;
  font-size: 0.78rem;
  background: #242738;
}

.mp-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mp-badge-sale {
  background: #f43f5e;
  color: #fff;
}

.mp-badge-new {
  background: #22d3ee;
  color: #0f1117;
}

.mp-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mp-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-card-publisher {
  font-size: 0.78rem;
  color: #8b8fa3;
}

.mp-card-platforms {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}

.mp-platform {
  font-size: 0.65rem;
  color: #5c6078;
  background: #161822;
  padding: 2px 6px;
  border-radius: 3px;
}

.mp-card-footer {
  padding: 10px 14px;
  border-top: 1px solid #2a2d3e;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-price {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.mp-price-original {
  font-size: 0.78rem;
  color: #5c6078;
  text-decoration: line-through;
  margin-left: 6px;
}

.mp-buy-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #22d3ee;
  color: #0f1117;
}

/* ── Detail preview (matches game detail in marketplace) ──────── */

.mp-detail {
  width: 420px;
  background: #161822;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2a2d3e;
}

.mp-detail-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #242738;
  position: relative;
  overflow: hidden;
}

.mp-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(22,24,34,0.8) 100%);
}

.mp-detail-logo {
  position: absolute;
  bottom: 10px;
  left: 14px;
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.mp-detail-content {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  padding: 16px;
}

.mp-detail-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.mp-detail-publisher {
  font-size: 0.78rem;
  color: #8b8fa3;
  margin-bottom: 8px;
}

.mp-detail-desc {
  font-size: 0.75rem;
  color: #8b8fa3;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mp-meta-item {
  background: #1c1f2e;
  border: 1px solid #2a2d3e;
  border-radius: 6px;
  padding: 6px 8px;
}

.mp-meta-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5c6078;
  margin-bottom: 2px;
}

.mp-meta-value {
  font-size: 0.75rem;
  color: #e2e4ed;
  font-weight: 500;
}

.mp-detail-purchase {
  text-align: center;
}

.mp-detail-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.mp-detail-price-original {
  font-size: 0.78rem;
  color: #5c6078;
  text-decoration: line-through;
}

.mp-detail-license-type {
  font-size: 0.7rem;
  color: #8b8fa3;
  margin-bottom: 12px;
}

.mp-detail-buy-btn {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  background: #22d3ee;
  color: #0f1117;
  margin-bottom: 6px;
  text-align: center;
}

.mp-detail-cart-btn {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  background: #161822;
  color: #e2e4ed;
  border: 1px solid #2a2d3e;
  text-align: center;
}

.mp-detail-note {
  font-size: 0.65rem;
  color: #5c6078;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .marketplace-preview { flex-direction: column; align-items: center; }
  .mp-detail { width: 100%; max-width: 420px; }
  .mp-detail-content { grid-template-columns: 1fr; }
}

/* ── Full-screen marketplace preview modal ────────────���───────── */

.mp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 24px;
}

.mp-modal {
  background: #0f1117;
  border-radius: 14px;
  width: 100%;
  max-width: 1100px;
  overflow: hidden;
  position: relative;
  margin: auto;
  border: 1px solid #2a2d3e;
}

.mp-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  border: 1px solid #2a2d3e;
  color: #e2e4ed;
  font-size: 1.4rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mp-modal-close:hover {
  background: rgba(99,102,241,0.3);
}

.mp-full-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #242738;
  position: relative;
  overflow: hidden;
}
.mp-full-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-full-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,17,23,0.85) 100%);
}

.mp-full-logo {
  position: absolute;
  bottom: 24px;
  left: 32px;
  max-height: 100px;
  max-width: 300px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}

.mp-full-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding: 28px 32px 32px;
}

.mp-full-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.mp-full-publisher {
  font-size: 0.9rem;
  color: #8b8fa3;
  margin-bottom: 16px;
}

.mp-full-desc {
  font-size: 0.92rem;
  color: #8b8fa3;
  line-height: 1.7;
  margin-bottom: 16px;
}

.mp-full-long-desc {
  font-size: 0.85rem;
  color: #8b8fa3;
  line-height: 1.7;
  margin-bottom: 24px;
  white-space: pre-wrap;
}

.mp-full-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.mp-full-meta {
  background: #1c1f2e;
  border: 1px solid #2a2d3e;
  border-radius: 10px;
  padding: 10px 14px;
}

.mp-full-screenshots h3,
.mp-full-sysreq h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.mp-full-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}
.mp-full-screenshot-grid img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2a2d3e;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mp-full-sysreq {
  margin-bottom: 24px;
}
.mp-full-sysreq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mp-full-sysreq-grid strong {
  display: block;
  font-size: 0.82rem;
  color: #e2e4ed;
  margin-bottom: 6px;
}
.mp-full-sysreq-grid p {
  font-size: 0.78rem;
  color: #8b8fa3;
  margin-bottom: 3px;
}

.mp-full-purchase {
  background: #1c1f2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 24px;
}

.mp-full-price {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.mp-full-price-original {
  font-size: 0.9rem;
  color: #5c6078;
  text-decoration: line-through;
  margin-bottom: 4px;
}

.mp-full-license-type {
  font-size: 0.8rem;
  color: #8b8fa3;
  margin-bottom: 18px;
}

.mp-full-buy-btn {
  display: block;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  background: #22d3ee;
  color: #0f1117;
  margin-bottom: 8px;
  text-align: center;
}

.mp-full-cart-btn {
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  background: #161822;
  color: #e2e4ed;
  border: 1px solid #2a2d3e;
  text-align: center;
}

.mp-full-note {
  font-size: 0.72rem;
  color: #5c6078;
  margin-top: 14px;
}

.mp-full-supply {
  background: #1c1f2e;
  border: 1px solid #2a2d3e;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .mp-full-layout {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .mp-full-purchase { position: static; }
  .mp-full-meta-grid { grid-template-columns: 1fr; }
  .mp-full-sysreq-grid { grid-template-columns: 1fr; }
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #e0e0e0;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
}

/* System requirements panel */
.sysreq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sysreq-grid .form-group label {
  font-size: 0.75rem;
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #333;
  border-radius: 24px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #e0e0e0;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .toggle-slider {
  background: #6366f1;
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Info icon tooltip */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
  color: #888;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 4px;
}

.info-icon:hover {
  background: #6366f1;
  color: #fff;
}

.info-icon:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: none;
  background: #1a1a2e;
  border: 1px solid #333;
  color: #e0e0e0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  width: 300px;
  white-space: normal;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
}

.info-icon:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 6px;
  transform: none;
  border: 6px solid transparent;
  border-top-color: #333;
  z-index: 201;
  pointer-events: none;
}

/* Form error */
.form-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 4px;
  display: none;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #ef4444;
}

.form-group.has-error .form-error {
  display: block;
}

/* ── Template Picker ───────────────────────────────────────────────── */

.template-section { margin-bottom: 24px; }

.template-hide-btn {
  background: none;
  border: none;
  color: #444;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.template-hide-btn:hover {
  color: #f87171;
  background: rgba(248,113,113,0.1);
}

.template-show-all {
  background: none;
  border: 1px dashed #333;
  color: #6366f1;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.template-show-all:hover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.06);
}
.template-section.collapsed .template-show-all { display: none; }
.template-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.template-section-header:hover .template-section-title { color: #fff; }
.template-section-chevron {
  font-size: 0.7rem;
  color: #666;
  transition: transform 0.2s;
  width: 16px;
  text-align: center;
}
.template-section.collapsed .template-section-chevron { transform: rotate(-90deg); }
.template-section.collapsed .template-grid { display: none; }
.template-section-title { font-size: 1rem; color: #e0e0e0; margin-bottom: 0; }
.template-section-count {
  font-size: 0.72rem;
  color: #555;
  margin-left: 4px;
}


.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.template-card {
  background: #111118;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}

.template-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
}

.template-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.template-card.disabled:hover {
  border-color: #222;
  transform: none;
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.template-card-desc {
  font-size: 0.82rem;
  color: #888;
  line-height: 1.4;
  margin-bottom: 10px;
}

.template-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.template-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  background: #1a1a24;
  border: 1px solid #333;
  border-radius: 4px;
  color: #999;
}

.template-learn-more {
  font-size: 0.75rem;
  color: #6366f1;
  margin-left: auto;
  text-decoration: none;
}
.template-learn-more:hover { text-decoration: underline; }

/* Template header (shown after selection) */
.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111118;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.template-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.template-header-info .badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Document Center ───────────────────────────────────────────────── */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.doc-card {
  display: block;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.doc-card, .doc-card:hover, .doc-card:focus { color: inherit; text-decoration: none; }
.doc-card:hover, .doc-card:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px var(--accent-dim); outline: none; }
.doc-card h4 { margin-bottom: 6px; }
.doc-card p { font-size: 0.82rem; color: #888; line-height: 1.4; }

.doc-article { max-width: 800px; }
.doc-article h2 { margin-top: 24px; margin-bottom: 12px; }
.doc-article h3 { margin-top: 20px; margin-bottom: 8px; color: #ccc; }
.doc-article p { color: #bbb; line-height: 1.6; margin-bottom: 12px; }
.doc-article ul, .doc-article ol { color: #bbb; padding-left: 24px; margin-bottom: 12px; }
.doc-article li { margin-bottom: 6px; line-height: 1.5; }
.doc-article code { background: #1a1a24; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }

.doc-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  margin-top: 24px;
  margin-bottom: 12px;
}

.doc-back {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color 0.15s, box-shadow 0.15s, background 0.15s;
}
.doc-back:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-dim); text-decoration: none; }

.doc-related {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #222;
}
.doc-related h4 { color: #888; margin-bottom: 8px; }
.doc-related a {
  display: block;
  color: #6366f1;
  text-decoration: none;
  padding: 4px 0;
  font-size: 0.85rem;
}
.doc-related a:hover { text-decoration: underline; }


.doc-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.doc-filter-btn {
  padding: 6px 10px;
  border: none;
  box-shadow: inset 0 0 0 1px var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.15s, box-shadow 0.15s, background 0.15s;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.doc-filter-btn:hover,
.doc-filter-btn.active {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text);
  background: var(--accent-dim);
}

/* ── Mobile Responsive ────────────────────────────────────────────── */

/* Hamburger toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: #111118;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 1.4rem;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
}
.sidebar-toggle:hover { border-color: #6366f1; }

@media (max-width: 768px) {
  .layout { flex-direction: column; }

  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 250px;
    height: 100vh;
    z-index: 150;
    transition: left 0.25s ease;
    overflow-y: auto;
  }
  .sidebar.open { left: 0; }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 140;
  }
  .sidebar-overlay.open { display: block; }

  .sidebar-toggle { display: block; }

  .main {
    padding: 16px;
    padding-top: 52px;
  }
  .main h2 { font-size: 1.2rem; margin-bottom: 16px; }

  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .sysreq-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 100px 1fr; gap: 6px 12px; }

  table { font-size: 0.78rem; }
  th, td { padding: 8px 10px; }

  .wizard-nav { flex-wrap: wrap; gap: 4px; }
  .wizard-nav-step .step-label { font-size: 0.65rem; }
  .wizard-nav-connector { flex: 0 0 12px; }
  .wizard-footer { flex-direction: column; gap: 8px; }

  .template-grid { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }

  .login-box { padding: 24px 16px; }
  .login-box h1 { font-size: 1.8rem; }

  .modal-content { padding: 20px; max-width: 95%; }

  .truncate { max-width: 120px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HUD THEME OVERRIDE — layered last so it wins on source order. Re-skins the
   dashboard chrome to the shared FlipKey sci-fi CLI aesthetic (cyan accent,
   clipped corners, inset borders, monospace) without disturbing layout.
   Tokens come from the @import at the top of this file.
   ════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(34,211,238,0.05), transparent 55%),
    var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
a:hover { color: var(--primary-hover); text-decoration: none; }

/* Sidebar → HUD rail */
.sidebar { background: rgba(11,15,20,0.92); border-right: 1px solid var(--border); }
.sidebar .logo,
.sidebar .cli-brand {
  display: flex; align-items: center; padding: 0 20px; margin-bottom: 32px;
  -webkit-text-fill-color: initial; background: none; font-size: 0.95rem;
}
.sidebar nav a {
  color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.3px;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover, .sidebar nav a.active {
  color: var(--accent); background: var(--accent-dim);
  border-left-color: var(--accent); text-shadow: 0 0 10px var(--accent-glow);
}
.sidebar .publisher-name, .sidebar-user { color: var(--text-dim); }
.sidebar .logout:hover { color: var(--danger); }

/* (v1 license-only) Collections/Creators nav links were removed from the
   dashboard markup entirely; the old display:none hide rule is no longer
   needed. The pages remain parked on disk for v2. */

/* ── Terminal menu (Fallout-style) — markup rendered by publisher-auth.js ──
   Collapsible `> SECTION` accordions (click the header to expand/collapse);
   items prefixed with a `›` prompt that lights up on hover/active; staggered
   scan-in reveal via the .shown class. */
.sidebar nav { padding: 0 12px; gap: 1px; }

.nav-group { display: flex; flex-direction: column; }

.nav-group-label {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 14px 0 4px; padding: 4px 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim);
  transition: color 0.12s;
}
.nav-group-label:hover, .nav-group-label:focus { color: var(--accent); outline: none; }
.nav-group-label::before { content: ">"; color: var(--accent); opacity: 0.55; }
.ngl-meta { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.nav-group-note {
  font-size: 0.55rem; letter-spacing: 0.5px;
  color: var(--warning); opacity: 0.9; text-transform: uppercase;
}
.nav-chevron {
  width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  opacity: 0.7; transition: transform 0.2s ease;
}
.nav-group.open .nav-chevron { transform: rotate(90deg); }

/* Collapsible body — animates open/closed. */
.nav-group-items {
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.nav-group.open .nav-group-items { max-height: 420px; opacity: 1; }

.sidebar nav a.nav-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-left: 2px solid transparent;
  font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.3px;
  color: var(--text-muted);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease,
              color 0.12s, background 0.12s, border-color 0.12s;
}
.sidebar nav a.nav-item.shown { opacity: 1; transform: none; }
.sidebar nav a.nav-item::before {
  content: "\203A"; color: var(--accent); opacity: 0.4;
  transition: opacity 0.12s, transform 0.12s;
}
.sidebar nav a.nav-item:hover,
.sidebar nav a.nav-item:focus,
.sidebar nav a.nav-item.active {
  color: var(--accent); background: var(--accent-dim); outline: none;
  border-left-color: var(--accent); text-shadow: 0 0 10px var(--accent-glow);
}
.sidebar nav a.nav-item:focus { box-shadow: inset 2px 0 0 var(--accent), 0 0 18px var(--accent-dim); }
.sidebar nav a.nav-item:hover::before,
.sidebar nav a.nav-item:focus::before,
.sidebar nav a.nav-item.active::before { opacity: 1; transform: translateX(2px); }
.sidebar nav a.nav-item .nav-label { flex: 1; }
.nav-lock { font-size: 0.7rem; opacity: 0.65; }

/* Pending-refund badge — lit on the Refunds item (count) and its collapsed
   group header (dot) whenever the review queue is non-empty. */
.nav-badge {
  min-width: 15px; height: 15px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 700; line-height: 1; letter-spacing: 0;
  color: var(--bg, #0a0f14); background: var(--warning);
  border-radius: 8px; box-shadow: 0 0 8px var(--warning);
}
.nav-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--warning); box-shadow: 0 0 6px var(--warning);
}
.nav-group.open .nav-group-label .nav-dot { display: none; }
.sidebar nav a.nav-item[data-locked] { color: var(--text-dim); }
.sidebar nav a.nav-item[data-locked]:hover { color: var(--accent); }

/* Keyboard focus cursor for main-window controls (arrow nav). Inputs keep their
   own focus glow from the form-field rules above. */
.main a:focus { outline: none; color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
.main button:focus, .main .btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px var(--accent-dim); }


/* Headings */
.main h2, .main h1 { color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.5px; }
.table-wrap h3, .panel h3, .review-section h4, .doc-section-title {
  color: var(--accent); text-shadow: 0 0 10px var(--accent-glow);
}

/* Stat cards / panels / tables → clipped inset cells */
.card, .panel, .table-wrap, .modal-content {
  background: var(--bg-card); border: none; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.card .label { color: var(--text-dim); }
.card .value { color: #fff; }
.card .value.green, td .badge.active { color: var(--success); }
.card .value.purple { color: var(--accent); }
th { color: var(--text-dim); border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--border); }
tr:hover { background: var(--bg-hover); }
.empty, .text-muted { color: var(--text-muted); }

/* Buttons */
.btn { border-radius: 0; font-family: var(--font); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.72rem;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn-primary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
.btn-primary:hover { background: var(--accent); color: #04161a; opacity: 1; box-shadow: inset 0 0 0 1px var(--accent), 0 0 22px var(--accent-glow); text-shadow: none; }
.btn-secondary { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text); }

/* Form fields */
.form-group input, .form-group textarea, .form-group select,
.tag-input-wrap, .screenshot-row input {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0; color: var(--text);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.tag-input-wrap:focus-within, .screenshot-row input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-dim);
}
.checkbox-group input[type="checkbox"], .toggle input:checked + .toggle-slider { accent-color: var(--accent); }
.toggle input:checked + .toggle-slider { background: var(--accent); }
.info-icon:hover { background: var(--accent); color: #04161a; }

/* Badges → square HUD chips (semantic colors kept) */
.badge { border-radius: 0; letter-spacing: 0.6px; }

/* Progress */
.progress { background: var(--border); border-radius: 0; }
.progress-bar { background: var(--accent); box-shadow: 0 0 12px var(--accent-dim); border-radius: 0; }

/* Login */
.login-box h1 { -webkit-text-fill-color: initial; background: none; color: var(--accent); font-family: var(--font-display); text-shadow: 0 0 24px var(--accent-glow); }
.login-box .subtitle { color: var(--text-muted); }

/* Wizard accents */
.wizard-nav-step.active .step-circle { border-color: var(--accent); background: var(--accent); color: #04161a; }
.wizard-nav-step.completed .step-circle { border-color: var(--success); background: var(--success); }

/* Docs / template accents indigo → cyan */
.template-card:hover { border-color: var(--accent); }
.doc-related a, .template-learn-more, .template-show-all { color: var(--accent); }
/* .doc-card / .doc-filter-btn hover handled by their clipped HUD rules above. */

/* ══════════════════════════════════════════════════════════════════════
   Editorial typography pass — shared dashboard layer (2026-09-19)

   Same language as the marketplace grid and detail page: section headings
   become wide-tracked kickers with a hairline, numbers get bigger and
   tighter, and everything gets more air. A publisher moving from a
   listing into their dashboard should not feel like they changed product.

   SCOPE, honestly: this is the SHARED layer only. 15 dashboard pages add
   their own inline <style> for page-specific components (home's action
   tiles, the roadmap, wizard steps), and those keep their current scale
   until each is done individually.
   ══════════════════════════════════════════════════════════════════════ */

/* Section headings → the same kicker used by .detail-section-title, with a
   hairline running to the end of the panel. The rule is what separates a
   section without drawing another box inside an already-boxed layout. */
.panel h3,
.table-wrap h3 {
  font-size: 0.6rem;
  letter-spacing: 2.8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
}
.panel h3::after,
.table-wrap h3::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.panel h3 { margin-bottom: 20px; }

/* Numbers are the reason anyone opens this dashboard, so let them lead.
   Tighter as they get bigger — the same optical rule as the page titles. */
.card .value {
  font-size: 2.05rem;
  letter-spacing: -1px;
  line-height: 1;
}
.card .label {
  font-size: 0.6rem;
  letter-spacing: 2.4px;
  margin-bottom: 11px;
}

/* Tables: the header row becomes a label, and rows get room to breathe.
   10px padding on a data table is a spreadsheet; 14/16 is a report. */
th {
  font-size: 0.58rem;
  letter-spacing: 2.2px;
  font-weight: 700;
  padding: 13px 16px;
}
td { padding: 14px 16px; font-size: 0.82rem; }

/* Form labels match the kicker language so a settings panel reads like the
   rest of the product rather than like a raw form. */
.form-group label {
  font-size: 0.6rem;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

/* Air. The panels were tight enough that nothing inside them could rank. */
.panel { padding: 28px 26px; }
.card  { padding: 24px 22px; }

/* This block sits AFTER the Mobile Responsive section in source order, so
   without restating these the phone layout would inherit desktop padding and
   the 2-column card grid would overflow. Same trap as marketplace/index.html
   — anything appended here must restate its mobile values. */
@media (max-width: 768px) {
  .panel { padding: 18px 16px; }
  .card  { padding: 16px 14px; }
  .card .value { font-size: 1.6rem; letter-spacing: -0.6px; }
  .card .label { font-size: 0.55rem; letter-spacing: 1.9px; margin-bottom: 8px; }
  th { padding: 9px 10px; letter-spacing: 1.6px; }
  td { padding: 10px 10px; font-size: 0.78rem; }
  .panel h3, .table-wrap h3 { gap: 10px; letter-spacing: 2.2px; }
}

/* Several panel headings carry a parenthetical note as a child span, e.g.
   <h3>Refund Policy <span style="font-size:0.75rem">(…)</span></h3>.
   Those spans set font-size INLINE, which outranks any selector here — and
   with the heading now at 0.6rem the note would render LARGER than the
   heading it belongs to, inverting exactly the hierarchy this pass exists to
   create. !important is the only thing that reaches an inline style, so it is
   deliberate and scoped to this one case rather than a shortcut.
   Also drops the inherited uppercase/tracking: a sentence in a parenthesis is
   prose, not a label. */
.panel h3 > span,
.table-wrap h3 > span {
  font-size: 0.62rem !important;
  color: var(--text-dim) !important;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .panel h3 > span,
  .table-wrap h3 > span { white-space: normal; }
}

/* ── Command palette trigger (sidebar) ─────────────────────────────────
   Injected by publisher-auth.js above the nav. It exists because the ⌘K
   palette shipped with no visible affordance — an undiscoverable shortcut
   is the same as no shortcut for anyone who was not told about it. Doubles
   as a click target so nobody has to learn a chord to reach commands. */
.cmd-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 18px; padding: 10px 12px;
  background: transparent; border: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font); color: var(--text-dim);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .15s, box-shadow .15s, background .15s;
}
.cmd-trigger:hover,
.cmd-trigger:focus-visible {
  color: var(--text); background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-bright); outline: none;
}
.cmd-trigger .ct-icon { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.cmd-trigger .ct-label {
  flex: 1; text-align: left;
  font-size: 0.6rem; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
}
/* The key hint must not shout — it is a reminder, not the button. */
.cmd-trigger .ct-key {
  font-family: var(--font); font-size: 0.55rem; letter-spacing: 0.8px;
  color: var(--text-dim); padding: 2px 6px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--border);
}
.cmd-trigger:hover .ct-key { color: var(--text-muted); }