/* Social Affiliate Bot V1.8 - Premium SaaS UI */
:root {
  color-scheme: light;
  --ink:#172821;
  --muted:#78877f;
  --line:#e5ebe7;
  --paper:#f5f7f6;
  --surface:#ffffff;
  --surface-2:#f9fbfa;
  --surface-3:#eef4f0;
  --green:#087b59;
  --green-2:#11966c;
  --green-soft:#e7f5ee;
  --orange:#e98b4b;
  --danger:#bd4949;
  --shadow:0 10px 32px rgba(23,49,37,.055);
  --shadow-hover:0 16px 42px rgba(23,49,37,.10);
  --radius:18px;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --ink:#e8f1eb;
  --muted:#9aaba1;
  --line:#293c32;
  --paper:#0d1511;
  --surface:#142019;
  --surface-2:#18271f;
  --surface-3:#20352a;
  --green:#42c996;
  --green-2:#62d9a8;
  --green-soft:#1c3a2c;
  --orange:#f0ad70;
  --danger:#ff8585;
  --shadow:0 12px 35px rgba(0,0,0,.18);
  --shadow-hover:0 18px 45px rgba(0,0,0,.27);
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {
  background:
    radial-gradient(ellipse at 85% 0%,rgba(22,155,105,.055),transparent 32%),
    var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,b,strong {font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em}
h1 {font-size:clamp(25px,3vw,32px);font-weight:750;letter-spacing:-.045em}
h2 {font-size:22px;font-weight:720}
h3 {font-size:15px;font-weight:730}
p {line-height:1.65}
a {color:var(--green)}
.hidden {display:none!important}
.muted {color:var(--muted)}
.eyebrow {font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--muted)}
.tiny {font-size:11px}

/* Authentication */
.auth-shell {
  min-height:100vh;
  padding:24px;
  background:
    radial-gradient(circle at 15% 15%,rgba(30,166,111,.15),transparent 34%),
    radial-gradient(circle at 90% 85%,rgba(64,132,100,.10),transparent 28%),
    var(--paper);
}
.auth-card {
  width:min(460px,100%);
  padding:38px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 25px 80px rgba(15,51,33,.11);
}
.auth-card h1 {margin-bottom:9px}
.auth-card>p {color:var(--muted)}
.auth-card .brand-mark {box-shadow:0 7px 18px rgba(8,123,89,.2)}

/* Main shell and sidebar */
.app-shell {
  grid-template-columns:264px minmax(0,1fr);
  min-height:100vh;
}
.sidebar {
  background:linear-gradient(165deg,#102d23 0%,#0d241c 60%,#102b22 100%);
  border-right:1px solid rgba(255,255,255,.055);
  padding:25px 17px 16px;
  box-shadow:8px 0 35px rgba(9,36,24,.05);
}
.brand {padding:5px 9px 33px;gap:12px}
.brand-mark.small {
  width:39px;height:39px;border-radius:13px;
  background:linear-gradient(145deg,#20a979,#087b59);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.brand b {font-size:13px;letter-spacing:-.01em}
.brand small {font-size:10px;color:#9ab9a8}
#nav {display:grid;gap:5px}
.nav-item {
  position:relative;
  min-height:45px;
  border-radius:12px;
  padding:11px 13px;
  color:#a8c2b4;
  gap:13px;
  font-size:14px;
  transition:background .18s,color .18s,transform .18s;
}
.nav-item span {font-size:12px;font-weight:650;letter-spacing:.005em}
.nav-item:hover {background:rgba(255,255,255,.075);color:#fff;transform:translateX(2px)}
.nav-item.active {
  color:#fff;
  background:linear-gradient(100deg,rgba(39,163,115,.28),rgba(39,163,115,.11));
  box-shadow:inset 3px 0 #45d39a,inset 0 0 0 1px rgba(109,224,169,.07);
}
.sidebar-bottom {
  padding:15px 9px 7px;
  border-top:1px solid rgba(255,255,255,.11);
  color:#a8c2b4;
}
.online-dot {box-shadow:0 0 0 4px rgba(105,213,156,.10)}
.sidebar-bottom .ghost {
  min-height:42px;
  color:#d4e5dc;
  border-color:rgba(225,244,233,.24);
}
.sidebar-bottom .ghost:hover {background:rgba(255,255,255,.08)}

/* Header and theme switch */
.main {max-width:1760px;min-width:0;padding:28px clamp(22px,4vw,58px)}
.topbar {
  position:sticky;
  top:0;
  z-index:25;
  min-height:72px;
  margin:-28px calc(clamp(22px,4vw,58px) * -1) 27px;
  padding:14px clamp(22px,4vw,58px);
  background:color-mix(in srgb,var(--paper) 91%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar-heading {gap:14px}
.topbar-heading .eyebrow {margin-bottom:4px}
.topbar-heading h1 {margin:0}
.topbar-right {gap:12px}
.topbar-right #userEmail {font-size:11px}
.topbar-right .pill {white-space:nowrap}
.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(20,40,30,.035);
  font-size:11px;
  font-weight:700;
}
.theme-toggle:hover {border-color:var(--green);background:var(--surface-2);transform:translateY(-1px)}
.theme-toggle-icon {font-size:16px;line-height:1;color:var(--green)}

/* Overview hero */
.hero {
  isolation:isolate;
  min-height:205px;
  padding:34px 36px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:23px;
  background:
    radial-gradient(circle at 88% 18%,rgba(115,228,176,.18),transparent 22%),
    radial-gradient(circle at 70% 120%,rgba(29,194,130,.22),transparent 38%),
    linear-gradient(115deg,#0b684b 0%,#10543c 55%,#123d30 100%);
  box-shadow:0 16px 40px rgba(9,91,61,.15);
}
.hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.15;
  background-image:radial-gradient(rgba(255,255,255,.7) .7px,transparent .7px);
  background-size:17px 17px;
  mask-image:linear-gradient(90deg,transparent 20%,#000);
}
.hero h2 {max-width:680px;font-size:clamp(23px,3vw,31px);line-height:1.2;letter-spacing:-.04em}
.hero p:not(.eyebrow) {max-width:670px;font-size:13px;color:#c8e9d7}
.hero-orbit {font-size:116px;color:#a6e8c5;opacity:.42}

/* Cards and sections */
.stats-grid {gap:14px;margin-bottom:20px}
.stat-card {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.stat-card:hover {transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}
.stat-card span {font-size:11px;font-weight:600;color:var(--muted)}
.stat-card strong {font-size:30px;font-weight:760;letter-spacing:-.055em;color:var(--ink);margin:9px 0 2px}
.stat-card small {font-size:10px;color:var(--muted)}
.grid-two {gap:18px}
.panel {
  min-width:0;
  padding:22px;
  margin-bottom:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.panel-head,.section-intro {gap:16px}
.panel-head h3 {margin-bottom:5px}
.panel-head p,.section-intro p {font-size:12px;color:var(--muted)}
.section-intro {margin:5px 0 21px}
.section-intro h2 {font-size:23px;letter-spacing:-.04em}
.workflow {gap:15px}
.workflow div {font-size:12px;color:var(--muted)}
.workflow b {
  display:grid;
  place-items:center;
  width:36px;height:36px;flex:0 0 36px;
  padding:0;
  border-radius:12px;
  background:var(--green-soft);
  color:var(--green);
}
.platform-list {gap:13px}
.platform-row {font-size:12px}
.platform-row b {font-weight:700}
.platform-row span:last-child {background:var(--surface-3);color:var(--muted);padding:6px 10px}

/* Forms */
.stack {gap:15px}
.stack label,.form-grid label,.product-dialog label {
  gap:8px;
  color:var(--ink);
  font-size:11px;
  font-weight:700;
}
input,select,textarea {
  min-width:0;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 13px;
  background:var(--surface-2);
  color:var(--ink);
  font:400 13px Inter,ui-sans-serif,system-ui,sans-serif;
  box-shadow:inset 0 1px 2px rgba(15,30,20,.015);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:.75}
input:hover,select:hover,textarea:hover {border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--green);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent);
}
textarea {line-height:1.6}
.check {background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.check input {accent-color:var(--green)}
.form-grid {gap:16px}
.form-panel {padding:24px}
.product-form-help {color:var(--muted);line-height:1.7}
.product-research-source {padding:17px;background:var(--surface)}
.product-research-source label {color:var(--ink)}

/* Buttons */
button {
  min-height:39px;
  border-radius:11px;
  padding:10px 15px;
  font-size:11px;
  font-weight:720;
  letter-spacing:.005em;
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
button:focus-visible {outline:3px solid color-mix(in srgb,var(--green) 45%,transparent);outline-offset:2px}
button:hover {transform:translateY(-1px)}
.primary {
  color:#fff;
  background:linear-gradient(130deg,#0b8d64,#087353);
  box-shadow:0 4px 12px rgba(8,123,89,.16);
}
.primary:hover {background:linear-gradient(130deg,#087b58,#065e43);box-shadow:0 7px 18px rgba(8,123,89,.22)}
.secondary {
  color:var(--green);
  background:var(--green-soft);
  border:1px solid color-mix(in srgb,var(--green) 11%,transparent);
}
.secondary:hover {background:var(--surface-3)}
.ghost {color:var(--muted);border:1px solid var(--line);background:var(--surface)}
.ghost:hover {color:var(--ink);background:var(--surface-2);border-color:var(--muted)}
.button-row {gap:9px}
.mini-btn,.small-btn {min-height:32px}

/* Product cards, tables and AI workspace */
.card-list {gap:12px}
.data-card {
  min-width:0;
  padding:17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 3px 12px rgba(20,40,30,.025);
  transition:border-color .16s,box-shadow .16s;
}
.data-card:hover {border-color:color-mix(in srgb,var(--green) 28%,var(--line));box-shadow:var(--shadow)}
.data-card b {font-weight:720;color:var(--ink)}
.data-card small {line-height:1.55;color:var(--muted)}
.product-actions {gap:7px}
.product-actions .meta {font-size:9px;letter-spacing:.09em}
.table-wrap {max-width:100%;border-radius:12px}
.data-table {font-size:11px}
.data-table th {color:var(--muted);font-size:9px;letter-spacing:.10em}
.data-table th,.data-table td {padding:13px 12px;border-bottom:1px solid var(--line)}
.data-table tbody tr:hover {background:var(--surface-2)}
.status {border:1px solid var(--line);background:var(--surface-3);color:var(--muted)}
.status.PUBLISHED,.status.APPROVED {background:var(--green-soft);color:var(--green)}
.preview-panel {padding:22px;min-height:420px}
#aiPreview {min-width:0}
#aiPreview>.notice {margin-bottom:13px}
.preview-item {
  margin:12px 0;
  padding:17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-2);
}
.preview-item>b {font-size:13px}
.preview-item textarea,.preview-item input {background:var(--surface);color:var(--ink)}
.preview-item label {font-size:10px;color:var(--muted)}
.product-research-card,.hashtag-plan {
  border-color:var(--line);
  background:var(--surface-2);
  color:var(--ink);
}
.product-research-card>summary,.hashtag-plan>summary {color:var(--green)}
.product-research-card>section,.hashtag-plan-grid>section {
  background:var(--surface);
  border-color:var(--line);
}
.research-keywords>div,.research-comparisons>div {background:var(--surface-2);border-color:var(--line)}
.research-keywords b,.research-comparisons b {color:var(--ink)}
.research-keywords small,.research-comparisons small {color:var(--muted)}
.buyer-analysis-card {
  background:var(--green-soft);
  border-color:color-mix(in srgb,var(--green) 25%,var(--line));
  color:var(--ink);
}
.buyer-analysis-card>summary,.copy-strategy>b,.buyer-strategy b {color:var(--green)}
.buyer-analysis-grid>div,.copy-strategy,.buyer-strategy {
  background:var(--surface);
  border-color:var(--line);
}
.buyer-analysis-grid b,.copy-strategy>div span,.buyer-analysis-grid span {color:var(--ink)}
.feedback-panel,.learning-memory-row,.product-intelligence {
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink);
}
.feedback-panel>b,.product-intelligence summary {color:var(--green)}
.feedback-panel label {color:var(--muted)}
.feedback-panel select,.feedback-panel textarea {background:var(--surface);color:var(--ink);border-color:var(--line)}
.quality-score {background:var(--green-soft);border-color:var(--line);color:var(--ink)}
.quality-score b {color:var(--green)}
.trend-source-card,.hub-selected-item,.hub-admin-preview,.hub-preview-products>div {
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink);
}
.hub-admin-preview>p,.hub-admin-preview>small {color:var(--muted)}
.hub-preview-products>div {background:var(--surface)}
.empty-state {background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.empty-note {color:var(--muted)}
.notice {
  background:var(--green-soft);
  border:1px solid color-mix(in srgb,var(--green) 17%,var(--line));
  color:var(--ink);
}
.notice.warning {background:#fff5e8;border-color:#f1dfc6;color:#80501e}
.pill {background:var(--green-soft);color:var(--green)}
.pill.orange {background:#fff1e6;color:#a85a2d}
.pill.green {background:var(--green-soft);color:var(--green)}
.toast {box-shadow:var(--shadow-hover)}
.product-dialog {background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.product-dialog input,.product-dialog textarea,.product-dialog select {background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.slug-input {background:var(--surface);border-color:var(--line)}
.slug-input input {background:transparent}
footer {color:var(--muted);padding:30px 12px}
.mobile-menu-close {border-color:rgba(255,255,255,.2)}

/* Dark theme: ensure every legacy component follows the palette */
html[data-theme="dark"] body {background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .main {background:transparent}
html[data-theme="dark"] .topbar {background:rgba(13,21,17,.91);border-color:var(--line)}
html[data-theme="dark"] .sidebar {background:linear-gradient(165deg,#0b2118,#091a13)}
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .data-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .product-dialog {background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(circle at 15% 15%,rgba(24,145,94,.17),transparent 34%),
    radial-gradient(circle at 90% 85%,rgba(64,132,100,.09),transparent 25%),
    var(--paper);
}
html[data-theme="dark"] .notice {background:var(--green-soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .notice.warning {background:#392b1b;border-color:#5a4429;color:#f0c48b}
html[data-theme="dark"] .pill.orange {background:#3b2b1f;color:#f2b47c}
html[data-theme="dark"] .platform-row span:last-child {background:var(--surface-3);color:var(--muted)}
html[data-theme="dark"] .workflow b {background:var(--green-soft);color:var(--green)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .feedback-panel select,
html[data-theme="dark"] .feedback-panel textarea {background:#101b15;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {background:#14231a}
html[data-theme="dark"] .check,
html[data-theme="dark"] .feedback-panel,
html[data-theme="dark"] .learning-memory-row,
html[data-theme="dark"] .product-intelligence,
html[data-theme="dark"] .product-research-card,
html[data-theme="dark"] .hashtag-plan,
html[data-theme="dark"] .trend-source-card,
html[data-theme="dark"] .hub-selected-item,
html[data-theme="dark"] .hub-admin-preview,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .preview-item,
html[data-theme="dark"] .copy-strategy,
html[data-theme="dark"] .buyer-strategy,
html[data-theme="dark"] .quality-score {background:var(--surface-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .buyer-analysis-card {background:#1a3527;border-color:#315943;color:var(--ink)}
html[data-theme="dark"] .buyer-analysis-grid>div,
html[data-theme="dark"] .product-research-card>section,
html[data-theme="dark"] .hashtag-plan-grid>section,
html[data-theme="dark"] .research-keywords>div,
html[data-theme="dark"] .research-comparisons>div,
html[data-theme="dark"] .hub-preview-products>div {background:#14221a;border-color:var(--line)}
html[data-theme="dark"] .data-table tbody tr:hover {background:var(--surface-2)}
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td {border-color:var(--line)}
html[data-theme="dark"] .hub-preview-products>div {color:var(--ink)}
html[data-theme="dark"] .slug-input {background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] .slug-input input {background:transparent}
html[data-theme="dark"] .product-dialog::backdrop {background:rgba(0,0,0,.72)}
html[data-theme="dark"] .trend-tags span {background:var(--green-soft);color:var(--green)}
html[data-theme="dark"] .trend-warning {background:#392f1c;color:#f1d18e}
html[data-theme="dark"] .toast {background:#193b2a;color:#e8f1eb}
html[data-theme="dark"] .toast.bad {background:#7b2929;color:#fff}
html[data-theme="dark"] .theme-toggle {background:var(--surface);border-color:var(--line);color:var(--ink)}

/* Tablet */
@media(max-width:1100px) {
  .app-shell {grid-template-columns:235px minmax(0,1fr)}
  .main {padding-left:25px;padding-right:25px}
  .topbar {margin-left:-25px;margin-right:-25px;padding-left:25px;padding-right:25px}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero {padding:28px}
}
@media(max-width:900px) {
  .app-shell {display:block}
  .main {max-width:none;padding:16px 18px 32px}
  .topbar {
    margin:-16px -18px 20px;
    padding:12px 18px;
    min-height:66px;
  }
  .topbar-heading h1 {font-size:24px}
  .topbar-right {gap:8px}
  .topbar-right #userEmail {display:none}
  .mobile-menu-toggle {background:var(--surface);border-color:var(--line);color:var(--ink)}
  .grid-two {grid-template-columns:minmax(0,1fr)}
  .section-intro {align-items:flex-start}
  .panel {padding:19px}
}
@media(max-width:600px) {
  .main {padding:13px 12px 27px}
  .topbar {margin:-13px -12px 16px;padding:10px 12px;gap:8px}
  .topbar-heading {gap:9px}
  .topbar-heading h1 {font-size:21px}
  .topbar-heading .eyebrow {font-size:8px}
  .topbar-right {gap:6px}
  .topbar-right .pill {font-size:8px;padding:6px 7px}
  .theme-toggle {width:39px;min-width:39px;height:39px;min-height:39px;padding:0}
  .theme-toggle-label {display:none}
  .mobile-menu-toggle {width:39px;height:39px;min-width:39px;flex-basis:39px}
  .hero {min-height:0;padding:21px 19px;border-radius:17px}
  .hero h2 {font-size:21px}
  .hero p:not(.eyebrow) {font-size:12px}
  .hero-orbit {display:none}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .stat-card {padding:14px;border-radius:14px}
  .stat-card strong {font-size:25px}
  .panel {padding:15px;border-radius:15px}
  .section-intro h2 {font-size:20px}
  .section-intro p {font-size:11px}
  .form-grid {grid-template-columns:minmax(0,1fr);gap:12px}
  .span-2 {grid-column:1/-1}
  .checks {grid-template-columns:repeat(2,minmax(0,1fr))}
  .button-row {gap:7px}
  .button-row>button {flex:1 1 135px}
  input,select,textarea {font-size:16px;min-height:45px}
  textarea {min-height:90px}
  button {min-height:43px}
  .data-card {padding:14px}
  .product-actions {justify-content:flex-start;margin-top:10px}
  .product-actions .meta {width:auto;margin-right:auto}
  .preview-item {padding:13px}
  .buyer-analysis-grid {grid-template-columns:1fr}
  .trend-platform-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hashtag-plan-grid,.trend-source-grid {grid-template-columns:1fr}
  .table-wrap {width:100%;overflow-x:auto}
  .data-table {min-width:620px}
  .toast {left:12px;right:12px;bottom:12px;max-width:none}
  .auth-card {padding:24px}
}
@media(max-width:370px) {
  .topbar-heading .eyebrow {display:none}
  .topbar-heading h1 {font-size:19px}
  .topbar-right .pill {display:none}
  .stats-grid {grid-template-columns:1fr 1fr}
  .stat-card {padding:12px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}