:root {
  --bg: #050505;
  --bg-2: #0f0f10;
  --panel: rgba(17, 17, 18, 0.95);
  --panel-2: #171717;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #f3f3f3;
  --muted: #a9a9ab;
  --accent: #ef1515;
  --accent-soft: rgba(239, 21, 21, 0.12);
  --accent-line: rgba(239, 21, 21, 0.24);
  --success: #39c979;
  --warning: #ffc85c;
  --danger: #ff7f7f;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(239, 21, 21, 0.12), transparent 22%),
    linear-gradient(180deg, #070707 0%, #050505 100%);
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  background: rgba(9, 9, 9, 0.92);
  overflow-y: auto;
}

.brand-block,
.side-section,
.side-card,
.panel-card,
.stat-card,
.mini-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.brand-block.compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
  border-color: var(--accent-line);
  background: linear-gradient(180deg, rgba(67, 6, 6, 0.5), rgba(10, 10, 10, 0.88));
}
.brand-logo { width: min(100%, 210px); display: block; }
.brand-meta h1 {
  margin: 4px 0 6px;
  font-size: 1rem;
  line-height: 1.15;
}
.brand-meta p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #dbdbdb;
}

.side-section, .side-card { margin-top: 14px; padding: 14px; }
.side-card { border-radius: var(--radius-md); }
.compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.side-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #d8d8d8;
  font-size: 0.88rem;
  line-height: 1.55;
}
.section-label, .mini-kicker, .eyebrow, .stat-label, .detail-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.69rem;
  color: var(--muted);
}
.mini-strong { display: block; margin-top: 4px; font-size: 0.96rem; }
.nav-item {
  width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px;
  background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; transition: .18s ease;
}
.nav-item:hover, .nav-item.active { background: var(--accent-soft); border-color: var(--accent-line); }

.main-content { padding: 24px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 16px; margin-bottom: 18px; }
.hero-copy-block, .hero-sidecard { padding: 24px; }
.hero-copy-block h2 {
  margin: 10px 0 10px;
  font-size: clamp(1.42rem, 2.2vw, 2.1rem);
  line-height: 1.14;
}
.hero-copy { margin: 0; color: #d7d7d7; font-size: 0.95rem; line-height: 1.65; max-width: 720px; }
.hero-badges, .hero-actions, .form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.hero-sidecard { background: linear-gradient(180deg, rgba(239,21,21,.07), rgba(16,16,16,.95)); }
.hero-side-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hero-side-title { margin-top:16px; font-size:1.05rem; font-weight:700; }
.hero-side-copy { margin:8px 0 0; color:#dadada; line-height:1.6; font-size:.92rem; }

.hero-badge, .chip, .status {
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; font-size:.77rem; font-weight:700;
  border:1px solid var(--line-strong); background: rgba(255,255,255,.04);
}
.chip-accent { background: rgba(239,21,21,.12); border-color: var(--accent-line); }
.chip-outline { background: transparent; }

.btn {
  padding: 10px 13px; border: 1px solid var(--accent-line); border-radius: 12px;
  background: linear-gradient(180deg, #ef1515, #d30f0f); color: white; font-weight: 700; cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn.secondary, .btn.tertiary, .btn.small { background: var(--panel-2); border-color: var(--line-strong); }
.btn.small { padding: 7px 10px; font-size: .8rem; }

.stats-grid, .store-grid, .connector-grid { display:grid; gap:14px; margin-bottom:18px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.store-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.connector-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat-card, .mini-panel { padding:18px; }
.stat-card.accent-red { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(239,21,21,.12), rgba(17,17,18,.96)); }
.stat-value { display:block; margin-top:8px; font-size:2rem; line-height:1; }
.stat-foot { display:block; margin-top:8px; color:var(--muted); font-size:.86rem; }
.store-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.summary-lines { display:grid; gap:8px; margin-top:10px; color:#ddd; font-size:.9rem; }
.summary-lines strong { display:block; color:#fff; font-size:.92rem; }

.content-grid { display:grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap:16px; margin-bottom:18px; }
.panel-card { padding:20px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.panel-head.wrap { flex-wrap: wrap; }
.panel-title { font-size: 1rem; font-weight: 800; }
.panel-subtitle { margin: 4px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.connector-list { margin: 0; padding-left: 18px; color:#ddd; line-height:1.65; font-size:.92rem; }

label { display:block; margin-bottom:7px; font-size:.88rem; color:#ddd; }
input, select, textarea {
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:#101010; color:var(--text);
}
textarea { resize: vertical; min-height: 220px; }
.field-row.two-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; }
.toolbar-input, .toolbar-select { min-width: 220px; }

.table-wrap { overflow:auto; border-radius: 16px; border:1px solid var(--line); }
table { width:100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align:left; font-size:.9rem; vertical-align:top; }
th { position: sticky; top: 0; background: #121212; z-index:1; }
tr.offer-row { cursor:pointer; }
tr.offer-row:hover { background: rgba(255,255,255,.02); }
tr.offer-row.selected { background: rgba(239,21,21,.08); }
.cell-sub { color: var(--muted); }

.offer-detail.empty-state { display:grid; place-items:center; min-height:260px; color:var(--muted); text-align:center; }
.offer-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.offer-name { margin:0; font-size:1.18rem; line-height:1.2; }
.offer-meta { margin-top:6px; color:var(--muted); font-size:.9rem; }
.offer-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:16px; }
.detail-box { padding:14px; border:1px solid var(--line); border-radius: 14px; background: #101010; }
.detail-value { margin-top:8px; line-height:1.6; word-break: break-word; }
.detail-link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.score-bar { margin-top:10px; height: 8px; border-radius: 999px; background: #1f1f1f; overflow:hidden; }
.score-fill { height:100%; background: linear-gradient(90deg, #ef1515, #ff6767); }
.message-preview {
  margin-top:16px; padding:14px; border-radius:14px; border:1px solid var(--accent-line);
  background: linear-gradient(180deg, rgba(239,21,21,.08), rgba(15,15,15,.95)); white-space: pre-wrap; line-height:1.65;
}

.changelog-box {
  margin:0; padding:16px; min-height: 220px; overflow:auto; border-radius: 14px; background:#0f0f0f; border:1px solid var(--line);
  color:#ddd; font-size:.88rem; line-height:1.65;
}
.status.ready { background: rgba(57,201,121,.12); color: #b7ffd3; }
.status.review { background: rgba(255,200,92,.14); color: #ffe2a3; }
.status.published { background: rgba(93,148,255,.15); color: #c7dbff; }
.status.duplicate { background: rgba(255,127,127,.12); color: #ffc8c8; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-grid, .store-grid, .connector-grid, .content-grid, .hero, .field-row.two-cols, .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main-content { padding: 16px; }
  .panel-card, .hero-copy-block, .hero-sidecard, .stat-card, .mini-panel { padding: 16px; }
  .brand-logo { width: min(100%, 170px); }
}


.detail-box-image img.offer-image {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  background: #0a0a0a;
}
.detail-box-wide { grid-column: 1 / -1; }
.summary-lines span { color:#ddd; font-size:.9rem; }