/* ==========================================================================
   FUNFARM 2.0 — ULTRA-MINIMALIST CRYSTAL EDITION
   Clean, modern, razor-sharp Telegram Mini App UI
   ========================================================================== */

/* ----------------- GLOBAL RESET & VARIABLES ----------------- */
:root, [data-theme="dark"] {
  --bg-app: #080310;
  --bg-gradient: radial-gradient(circle at 50% 0%, #1a082e 0%, #0c0418 50%, #05010a 100%);
  
  --surface: rgba(20, 10, 36, 0.7);
  --surface-card: rgba(24, 12, 44, 0.65);
  --surface-elevated: rgba(32, 16, 60, 0.85);
  --surface-input: rgba(14, 6, 26, 0.85);
  --surface-hover: rgba(168, 85, 247, 0.12);
  
  --border: rgba(168, 85, 247, 0.18);
  --border-strong: rgba(168, 85, 247, 0.35);
  --border-focus: #38bdf8;
  
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: #94a3b8;
  
  --accent-cyan: #38bdf8;
  --accent-purple: #c084fc;
  --accent-green: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;
  
  --btn-primary-bg: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #0284c7 100%);
  --btn-primary-shadow: 0 4px 16px rgba(147, 51, 234, 0.35);
  
  --nav-bg: rgba(14, 7, 26, 0.88);
  --nav-border: rgba(168, 85, 247, 0.22);
  --nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  
  --card-blur: blur(20px) saturate(180%);
}

[data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-gradient: radial-gradient(circle at 50% 0%, #ede9fe 0%, #f5f3ff 50%, #ffffff 100%);
  
  --surface: rgba(255, 255, 255, 0.88);
  --surface-card: rgba(255, 255, 255, 0.82);
  --surface-elevated: rgba(255, 255, 255, 0.96);
  --surface-input: rgba(248, 250, 252, 0.95);
  --surface-hover: rgba(168, 85, 247, 0.08);
  
  --border: rgba(168, 85, 247, 0.2);
  --border-strong: rgba(168, 85, 247, 0.38);
  --border-focus: #0284c7;
  
  --text: #0f172a;
  --text-secondary: #475569;
  --muted: #64748b;
  
  --accent-cyan: #0284c7;
  --accent-purple: #7c3aed;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  
  --btn-primary-bg: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #0284c7 100%);
  --btn-primary-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
  
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(168, 85, 247, 0.2);
  --nav-shadow: 0 8px 24px rgba(124, 58, 237, 0.1);
  
  --card-blur: blur(18px) saturate(160%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* STRICT SVG SIZING: Never let any SVG explode */
svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

html, body {
  min-height: 100%;
  background: var(--bg-app);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}

body {
  padding: max(8px, env(safe-area-inset-top)) 0 calc(78px + max(10px, env(safe-area-inset-bottom)));
  overflow-x: hidden;
  position: relative;
}

/* Background Canvas */
#space-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 6px 12px 18px;
}

/* ----------------- HEADER ----------------- */
.brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 10px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
}

.brand-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--accent-purple);
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-text-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}

.brand-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: linear-gradient(135deg, #a855f7, #0284c7);
  color: #fff;
  letter-spacing: 0.05em;
}

.brand-text-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.brand-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon-btn-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn-toggle:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.brand-header-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
  font-size: 10.5px;
  font-weight: 700;
}

.brand-beacon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
}

/* ----------------- CARDS ----------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  animation: tab-in 0.2s ease both;
}

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

.card-title {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ----------------- MINIMALIST HERO CARD ----------------- */
.farm-hero-card {
  background: linear-gradient(145deg, rgba(26, 12, 48, 0.7) 0%, rgba(12, 6, 24, 0.9) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 18px 14px 16px;
  margin-bottom: 10px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  text-align: center;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .farm-hero-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 240, 255, 0.95) 100%);
}

.farm-hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.farm-hero-status-pill.stopped {
  color: var(--muted);
}

.farm-hero-status-pill.running {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.farm-hero-status-pill.paused_captcha {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.farm-hero-status-pill.waiting_flood {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.farm-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.farm-hero-big-number {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.farm-hero-big-label {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-purple);
  margin-bottom: 6px;
}

.farm-hero-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 320px;
  margin: 0 auto 14px;
}

/* ----------------- MINIMALIST BUTTONS ----------------- */
.btn-farm-primary {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 11px;
  background: var(--btn-primary-bg);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--btn-primary-shadow);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-farm-primary svg {
  width: 15px;
  height: 15px;
  stroke: none;
  fill: currentColor;
}

.btn-farm-primary:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
}

.btn-farm-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-farm-stop {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
  cursor: pointer;
}

.btn-farm-stop svg {
  width: 15px;
  height: 15px;
  stroke: none;
  fill: currentColor;
}

.btn-farm-secondary {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-farm-secondary svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.btn-farm-secondary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* ----------------- BENTO GRID ----------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.bento-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
}

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

.bento-label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}

.bento-icon-box {
  color: var(--accent-cyan);
}

.bento-icon-box svg {
  width: 14px;
  height: 14px;
}

.bento-num {
  font-size: 19px;
  font-weight: 850;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bento-num.infinity {
  color: var(--accent-cyan);
  font-size: 21px;
}

/* ----------------- AI RADAR & PROBIV VIEW ----------------- */
.ai-hero-card {
  background: linear-gradient(145deg, rgba(28, 12, 52, 0.75) 0%, rgba(10, 5, 22, 0.9) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 16px 14px;
  margin-bottom: 10px;
}

[data-theme="light"] .ai-hero-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 240, 255, 0.95) 100%);
}

.ai-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ai-header-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 800;
}

.ai-radar-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent-cyan);
  font-size: 10.5px;
  font-weight: 700;
}

.ai-radar-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.ai-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 10px 0;
  scrollbar-width: none;
}

.ai-chips-row::-webkit-scrollbar {
  display: none;
}

.ai-chip {
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chip:hover, .ai-chip.active {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.ai-search-wrap {
  display: flex;
  gap: 6px;
}

.ai-input {
  flex: 1;
  min-height: 40px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.ai-input:focus {
  border-color: var(--border-focus);
}

.ai-btn-scan {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--btn-primary-bg);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  white-space: nowrap;
}

.ai-btn-scan svg {
  width: 14px;
  height: 14px;
}

.ai-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.ai-metric-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
}

[data-theme="light"] .ai-metric-item {
  background: rgba(248, 250, 252, 0.85);
}

.ai-metric-label {
  font-size: 9.5px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}

.ai-metric-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

/* ----------------- SESSIONS LIST ----------------- */
.session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}

.session-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.session-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple);
  flex-shrink: 0;
}

.session-avatar svg {
  width: 15px;
  height: 15px;
}

.session-info {
  min-width: 0;
  flex: 1;
}

.session-title {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-pills-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
}

.session-pill.active {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.session-pill.stopped {
  background: rgba(244, 63, 94, 0.1);
  color: #fb7185;
}

.session-pill.captcha {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.session-pill.flood {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.session-pill.idle {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
}

.session-pill.proxy {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

.session-delete-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(244, 63, 94, 0.1);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
}

.session-delete-btn svg {
  width: 14px;
  height: 14px;
}

.session-delete-btn:hover {
  background: rgba(244, 63, 94, 0.25);
}

/* ----------------- DIALOG LOGS BOX ----------------- */
.dialog-logs-box {
  background: rgba(8, 4, 18, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

[data-theme="light"] .dialog-logs-box {
  background: rgba(245, 243, 255, 0.9);
}

.dialog-log-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.dialog-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.log-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
}

.log-badge.IN {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.log-badge.OUT {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.log-badge.EVENT {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.log-peer {
  font-weight: 750;
  color: var(--text);
  margin-left: 3px;
}

.log-time {
  font-size: 9.5px;
  color: var(--muted);
}

.log-body {
  color: var(--text-secondary);
  line-height: 1.35;
  font-size: 11px;
}

.log-links {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--accent-cyan);
  word-break: break-all;
}

/* ----------------- ADMIN HUB ----------------- */
.admin-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.admin-hub-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.admin-hub-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent-purple);
}

.admin-badge {
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--accent-cyan);
  font-size: 10px;
  font-weight: 750;
}

#admin-pool-sessions {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.admin-metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
}

.admin-metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.admin-metric-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.admin-metric-icon svg {
  width: 13px;
  height: 13px;
  color: var(--accent-purple);
}

.admin-metric-num {
  font-size: 17px;
  font-weight: 850;
  color: var(--text);
}

.admin-metric-num.infinity {
  color: var(--accent-cyan);
}

/* Amvera Failover Card */
.amvera-cloud-card {
  background: linear-gradient(145deg, rgba(22, 10, 42, 0.8) 0%, rgba(10, 5, 20, 0.95) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

[data-theme="light"] .amvera-cloud-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 240, 255, 0.9) 100%);
}

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

.amvera-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.amvera-title svg {
  width: 14px;
  height: 14px;
}

.amvera-balance-badge {
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}

.amvera-balance-badge.bal-positive {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.amvera-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}

.amvera-meta-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10.5px;
}

[data-theme="light"] .amvera-meta-item {
  background: rgba(245, 243, 255, 0.8);
}

.amvera-meta-label {
  color: var(--muted);
  font-size: 9.5px;
}

.amvera-meta-val {
  color: var(--text);
  font-weight: 750;
  margin-top: 1px;
}

/* ----------------- GENERAL BUTTONS & INPUTS ----------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  min-height: 38px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all 0.15s ease;
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn.primary {
  background: var(--btn-primary-bg);
  color: #ffffff;
  box-shadow: var(--btn-primary-shadow);
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.btn.secondary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.btn.compact {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 6px;
}

.btn.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}

.btn.orange {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}

.btn.blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff;
}

.btn.purple {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
}

.form-input {
  width: 100%;
  min-height: 38px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  margin-top: 4px;
  margin-bottom: 8px;
}

.form-input:focus {
  border-color: var(--border-focus);
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

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

.switch span {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: 0.2s ease;
}

.switch span:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.switch input:checked + span {
  background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
  border-color: var(--accent-cyan);
}

.switch input:checked + span:before {
  transform: translateX(18px);
}

/* ----------------- FLOATING GLASS DOCK (BOTTOM NAV) ----------------- */
nav {
  position: fixed;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 16px));
  height: 54px;
  background: var(--nav-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--nav-border);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3px 5px;
  z-index: 100;
  box-shadow: var(--nav-shadow);
}

nav button {
  flex: 1;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  border-radius: 99px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

nav button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav button .icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

nav button.active {
  color: var(--text);
  background: var(--surface-hover);
  border: 1px solid var(--border);
}

nav button.active .icon {
  color: var(--accent-cyan);
}

/* Toast */
.toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 7px 16px;
  border-radius: 99px;
  font-weight: 750;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  z-index: 999;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.modern-empty-box {
  text-align: center;
  padding: 24px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.modern-empty-box .empty-icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.modern-empty-box .empty-title {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
}

.modern-empty-box .empty-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.price-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

.price-main {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-amber);
  margin-bottom: 6px;
  text-align: center;
}

.buy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

/* Graphite: quiet surfaces, edge light and a few ambient sparks. */
:root,[data-theme="dark"] {
  --bg-app:#0b0e14;
  --bg-gradient:radial-gradient(ellipse at -10% 0%,rgba(74,121,161,.12),transparent 52%),radial-gradient(ellipse at 115% 50%,rgba(106,88,151,.09),transparent 48%);
  --surface:#12161e;
  --surface-card:#12161e;
  --surface-elevated:#191e27;
  --surface-input:#0d1118;
  --surface-hover:rgba(129,165,203,.08);
  --border:rgba(211,223,240,.09);
  --border-strong:rgba(211,223,240,.16);
  --btn-primary-bg:#2f79b5;
  --btn-primary-shadow:0 3px 10px rgba(21,61,95,.12);
  --nav-bg:rgba(17,21,29,.97);
  --nav-border:rgba(211,223,240,.1);
  --nav-shadow:0 6px 24px rgba(0,0,0,.2);
  --card-blur:none;
}
[data-theme="light"] {
  --bg-app:#f3f5f8;
  --bg-gradient:radial-gradient(ellipse at -10% 0%,rgba(151,180,204,.14),transparent 52%),radial-gradient(ellipse at 115% 50%,rgba(186,173,210,.12),transparent 48%);
  --surface:#fff;
  --surface-card:#fff;
  --surface-elevated:#f8f9fb;
  --surface-input:#f3f6fa;
  --surface-hover:rgba(47,121,181,.07);
  --border:rgba(40,54,76,.1);
  --border-strong:rgba(40,54,76,.17);
  --btn-primary-bg:#276eaa;
  --btn-primary-shadow:0 3px 10px rgba(21,61,95,.08);
  --nav-bg:rgba(248,251,255,.97);
  --nav-border:rgba(40,54,76,.1);
  --nav-shadow:0 6px 24px rgba(40,54,76,.06);
  --card-blur:none;
}
.app-atmosphere {position:fixed;inset:0;pointer-events:none;z-index:0;background:none}
#ambient-stars {position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ambient-spark {position:absolute;width:var(--spark-size);height:var(--spark-size);border-radius:50%;background:#a8bcd6;box-shadow:0 0 5px rgba(168,188,214,.18);opacity:.18;animation:ambient-drift var(--spark-time) ease-in-out var(--spark-delay) infinite alternate;pointer-events:none}
@keyframes ambient-drift {from {transform:translate3d(0,0,0);opacity:.12}to {transform:translate3d(var(--spark-drift),-36px,0);opacity:.3}}
#ambient-stars[data-paused="true"] .ambient-spark {animation-play-state:paused}
[data-theme="light"] .ambient-spark {background:#687f9c;box-shadow:none}
@media (prefers-reduced-motion:reduce) {.ambient-spark {animation:none!important;opacity:.16}}
.card {animation:none}
.brand-card {background:var(--surface-card);border-color:var(--border)}
.brand-main,.brand-text {min-width:0}
.brand-text-title {flex-wrap:wrap;overflow-wrap:anywhere}
.brand-controls {flex-shrink:0}
.farm-hero-card,.amvera-cloud-card,[data-theme="light"] .farm-hero-card,[data-theme="light"] .amvera-cloud-card {background:var(--surface-card);border-color:var(--border)}
.btn.blue,.btn.purple {background:var(--btn-primary-bg)}
.switch input:checked + span {background:var(--btn-primary-bg);border-color:var(--btn-primary-bg)}
.premium-nav .icon,.premium-tag {color:#edce90!important}
.premium-tag {background:rgba(204,163,77,.12)!important;border-color:rgba(232,197,125,.35)!important}
.premium-hero {position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(234,198,127,.2);border-radius:24px;padding:30px 24px 24px;margin:14px 0;background:#171b22;color:#f7f5f0}
.premium-hero h1 {white-space:pre-line;font-size:30px;line-height:1.12;letter-spacing:-1px;font-weight:800;margin:14px 0 12px;max-width:290px}
.premium-hero p {color:#b8c0cf;max-width:285px;font-size:12px;line-height:1.7}
.premium-eyebrow {font-size:9px;letter-spacing:2px;color:#c7ab72;font-weight:800}
.premium-orbit {position:absolute;right:-12px;top:25px;font-size:115px;line-height:1;color:#e7c47f;opacity:.06;transform:rotate(12deg);z-index:-1}
.premium-price {font-size:36px;font-weight:800;letter-spacing:-1px;margin:20px 0 12px;color:#f3d79f}
.premium-price span {font-size:12px;color:#b4bfd1;font-weight:500;letter-spacing:0}
.premium-pill {display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:10px;border-radius:20px;color:#d8bc84;background:rgba(195,155,79,.09);border:1px solid rgba(195,155,79,.22)}
.premium-benefits {display:grid;gap:1px;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:18px;margin:12px 0 18px}
.premium-benefits article {display:flex;gap:13px;align-items:center;background:var(--bg-app);padding:15px 17px}
.premium-feature-icon {display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;background:rgba(205,173,115,.09);border:1px solid rgba(205,173,115,.15);border-radius:12px;font-size:17px;color:#d8bc84;font-weight:600}
.premium-benefits h3 {font-size:12px;margin-bottom:3px;color:var(--text);font-weight:700}
.premium-benefits p {font-size:11px;color:var(--muted)}
.btn.premium-button {color:#241c10!important;background:linear-gradient(120deg,#f2d8a4,#d1ac67)!important;border:1px solid #efce91;box-shadow:0 4px 18px rgba(218,178,104,.08);font-weight:800}
.premium-pay-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 10px}
.premium-small {font-size:10px!important;line-height:1.6!important}
.premium-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.premium-section-head h2 {font-size:18px;margin-top:7px;letter-spacing:-.3px}
.mirror-settings label,.premium-checkout label {display:block;font-size:11px;color:var(--text-secondary);margin-top:15px}
.mirror-settings .btn {width:100%;margin-top:15px}
.mirror-bot-link {display:inline-block;color:var(--accent-cyan);margin-top:15px;text-decoration:none;font-size:13px;font-weight:700}
.premium-steps {padding-left:18px;color:var(--muted);line-height:1.8;font-size:11px;margin-top:15px}
.premium-toggle {display:flex!important;align-items:center;gap:9px;margin:14px 0!important;font-size:12px!important}
.premium-toggle input {accent-color:#d1ac67;width:17px;height:17px}
.mirror-delete {color:var(--accent-rose)!important;border-color:rgba(251,113,133,.22)!important}
.premium-invoice {border-top:1px solid var(--border);margin-top:14px;padding-top:14px;display:grid;gap:12px;font-size:11px;color:var(--muted)}
[data-theme="light"] .premium-eyebrow,[data-theme="light"] .premium-feature-icon,[data-theme="light"] .premium-pill {color:#876322}
[data-theme="light"] .premium-hero .premium-eyebrow {color:#ddc38e}
@media (max-width:360px) {.premium-hero {padding:24px 18px}.premium-hero h1 {font-size:26px}.premium-pay-grid {grid-template-columns:1fr}.premium-section-head h2 {font-size:16px}}
@media (max-width:380px) {.brand-card {gap:8px}.brand-logo {width:32px;height:32px}.brand-main {gap:8px}.brand-header-badge span:last-child {display:none}.brand-header-badge {padding:6px}.brand-text-title {font-size:13px}.brand-text-sub {font-size:10px}}
@media (prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;transition:none!important;animation:none!important}}