@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  --bg: #070914;
  --bg-2: #0d1122;
  --surface: rgba(18, 23, 45, .72);
  --surface-solid: #12172d;
  --surface-2: rgba(30, 37, 68, .7);
  --text: #f7f8ff;
  --muted: #9ca5c7;
  --line: rgba(255, 255, 255, .1);
  --primary: #7c5cff;
  --primary-2: #9b82ff;
  --cyan: #00d4ff;
  --success: #32e69a;
  --warning: #ffbf47;
  --danger: #ff5e7a;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
  --sidebar: 278px;
}

html[data-theme="light"] {
  --bg: #f4f6ff;
  --bg-2: #e9edff;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fff;
  --surface-2: rgba(241,243,255,.92);
  --text: #15182b;
  --muted: #68708f;
  --line: rgba(17,24,39,.1);
  --shadow: 0 24px 70px rgba(60, 67, 114, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 92, 255, .2), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(0, 212, 255, .14), transparent 28%),
    linear-gradient(150deg, var(--bg), var(--bg-2));
  font-family: Inter, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary-2); }
.w-full { width: 100%; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }

.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; position: relative; z-index: 1; }
.glass {
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: .25s ease;
}
.site-header.scrolled { background: rgba(7, 9, 20, .78); backdrop-filter: blur(18px); border-color: var(--line); }
html[data-theme="light"] .site-header.scrolled { background: rgba(244,246,255,.78); }
.navbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 42px; height: 42px; }
.brand-copy strong { display: block; font-family: "Space Grotesk"; font-size: 15px; }
.brand-copy small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 26px; color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: grid; place-items: center; transition: .2s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: rgba(124,92,255,.55); }
.menu-btn { display: none; }

.btn {
  border: 0;
  border-radius: 14px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #5d8cff); color: white; box-shadow: 0 12px 30px rgba(124,92,255,.28); }
.btn-secondary { background: var(--surface-2); border: 1px solid var(--line); }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn-danger { background: rgba(255,94,122,.14); border: 1px solid rgba(255,94,122,.28); color: #ff8ca0; }
.btn-success { background: rgba(50,230,154,.14); border: 1px solid rgba(50,230,154,.28); color: var(--success); }
.btn-sm { min-height: 36px; border-radius: 11px; padding: 0 13px; font-size: 12px; }
.btn-lg { min-height: 54px; padding-inline: 24px; border-radius: 16px; }

.hero { min-height: 720px; display: grid; place-items: center; padding: 78px 0 86px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(124,92,255,.3); background: rgba(124,92,255,.1); color: #bcaeff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 7px rgba(50,230,154,.1); animation: pulse 2s infinite; }
.hero h1 { font-family: "Space Grotesk"; font-size: clamp(45px, 6vw, 78px); letter-spacing: -.055em; line-height: .98; margin: 24px 0 22px; max-width: 760px; }
.gradient-text { background: linear-gradient(100deg, #b8a8ff, #70ddff 55%, #69f4bd); color: transparent; background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { color: var(--muted); font-size: clamp(16px,2vw,19px); line-height: 1.8; max-width: 650px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.mini-trust { display: flex; align-items: center; gap: 16px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#7256ff,#00c9ef); border: 3px solid var(--bg); margin-left: -9px; font-size: 10px; font-weight: 800; }
.avatar-stack span:first-child { margin-left: 0; }

.bot-console { border-radius: 28px; padding: 20px; position: relative; overflow: hidden; transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); }
.bot-console::before { content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-90px; top:-80px; background:rgba(0,212,255,.18); filter:blur(20px); }
.console-top { display:flex; justify-content:space-between; align-items:center; padding: 4px 4px 20px; }
.window-dots { display:flex; gap:7px; }
.window-dots i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.console-status { font-size: 11px; color: var(--success); font-weight: 800; }
.phone-shell { background: rgba(5,8,17,.88); border: 1px solid var(--line); border-radius: 24px; padding: 17px; min-height: 440px; }
.chat-head { display:flex; align-items:center; gap:12px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.bot-avatar { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--cyan)); display:grid; place-items:center; color:white; font-weight:900; }
.chat-head strong { display:block; font-size:14px; }.chat-head small { color:var(--success); }
.chat-body { padding: 24px 0 4px; display:flex; flex-direction:column; gap:13px; }
.bubble { max-width:82%; padding:13px 15px; border-radius:16px; font-size:13px; line-height:1.55; animation: floatIn .7s both; }
.bubble.in { background: var(--surface-2); border-top-left-radius:5px; }
.bubble.out { margin-left:auto; background:linear-gradient(135deg,#6e52ec,#4b70e8); color:white; border-top-right-radius:5px; animation-delay:.2s; }
.command-pills { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
.command-pills span { padding:11px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:11px; text-align:center; }
.floating-chip { position:absolute; padding:12px 14px; border-radius:14px; font-size:12px; font-weight:700; animation: hover 5s ease-in-out infinite; }
.chip-a { left:-26px; top:82px; }.chip-b { right:-20px; bottom:70px; animation-delay:1.2s; }

.stats-strip { padding-bottom: 70px; }
.stats-grid { border-radius: 24px; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.stat { padding:25px 28px; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat strong { font-family:"Space Grotesk"; font-size:27px; display:block; }
.stat span { color:var(--muted); font-size:12px; margin-top:6px; display:block; }
.section { padding: 92px 0; position:relative; }
.section-head { text-align:center; max-width:720px; margin:0 auto 46px; }
.section-head h2 { font-family:"Space Grotesk"; font-size:clamp(32px,4vw,48px); margin:18px 0 14px; letter-spacing:-.04em; }
.section-head p { color:var(--muted); line-height:1.75; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { padding:26px; border-radius:22px; transition:.25s; }
.feature-card:hover { transform:translateY(-6px); border-color:rgba(124,92,255,.35); }
.feature-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(0,212,255,.14)); font-size:21px; }
.feature-card h3 { font-size:17px; margin:20px 0 10px; }.feature-card p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { border-radius:22px; overflow:hidden; }
.product-image { height:170px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(0,212,255,.12)); font-size:46px; position:relative; }
.product-image img { width:100%; height:100%; object-fit:cover; }
.badge { display:inline-flex; align-items:center; min-height:25px; padding:0 9px; border-radius:999px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:rgba(124,92,255,.14); color:#b7a8ff; border:1px solid rgba(124,92,255,.25); }
.badge.success { color:var(--success); background:rgba(50,230,154,.1); border-color:rgba(50,230,154,.22); }
.badge.warning { color:var(--warning); background:rgba(255,191,71,.1); border-color:rgba(255,191,71,.22); }
.badge.danger { color:var(--danger); background:rgba(255,94,122,.1); border-color:rgba(255,94,122,.22); }
.product-body { padding:22px; }.product-body h3 { margin:12px 0 8px; }.product-body p { color:var(--muted); font-size:13px; line-height:1.65; min-height:44px; }
.product-foot { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:20px; }.price { font-family:"Space Grotesk"; font-size:23px; font-weight:700; }.stock { color:var(--muted); font-size:11px; }
.cta-box { padding:44px; border-radius:28px; display:flex; justify-content:space-between; align-items:center; gap:30px; overflow:hidden; position:relative; }
.cta-box::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-70px; background:rgba(124,92,255,.24); filter:blur(35px); }.cta-box > * { position:relative; z-index:1; }.cta-box h2 { font-family:"Space Grotesk"; font-size:34px; margin:0 0 10px; }.cta-box p { margin:0; color:var(--muted); }
.footer { padding:32px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.footer-row { display:flex; justify-content:space-between; gap:20px; align-items:center; }

/* Auth */
.auth-layout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual { padding:44px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-visual::after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,.38),transparent 68%); right:-150px; bottom:-170px; }
.auth-message { max-width:630px; position:relative; z-index:1; }.auth-message h1 { font-family:"Space Grotesk"; font-size:clamp(44px,6vw,76px); line-height:1; letter-spacing:-.055em; margin:22px 0; }.auth-message p { color:var(--muted); font-size:17px; line-height:1.8; }
.auth-perks { display:grid; gap:12px; position:relative; z-index:1; }.auth-perk { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }.auth-perk i { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(50,230,154,.12); color:var(--success); font-style:normal; }
.auth-panel { background:var(--surface-solid); padding:40px; display:grid; place-items:center; border-left:1px solid var(--line); }
.auth-card { width:min(460px,100%); }.auth-card h2 { font-family:"Space Grotesk"; font-size:32px; margin:18px 0 8px; }.auth-card > p { color:var(--muted); margin:0 0 28px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; margin-bottom:24px; }.auth-tab { border:0; background:transparent; padding:11px; border-radius:10px; cursor:pointer; color:var(--muted); font-weight:700; }.auth-tab.active { background:var(--surface-solid); color:var(--text); box-shadow:0 4px 18px rgba(0,0,0,.12); }
.form-grid { display:grid; gap:16px; }.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field { display:grid; gap:8px; }.field label { color:var(--muted); font-size:12px; font-weight:700; }.field input,.field textarea,.field select { width:100%; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; outline:0; padding:13px 14px; transition:.2s; }.field textarea { min-height:100px; resize:vertical; }.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(124,92,255,.1); }.field small { color:var(--muted); font-size:11px; }.input-wrap { position:relative; }.input-wrap input { padding-right:46px; }.input-action { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent; cursor:pointer; color:var(--muted); }
.form-row { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; }.check { display:flex; align-items:center; gap:8px; color:var(--muted); }.text-link { color:var(--primary-2); font-weight:700; border:0; background:transparent; padding:0; cursor:pointer; }
.setup-alert { padding:14px; border:1px solid rgba(255,191,71,.28); background:rgba(255,191,71,.09); border-radius:14px; color:var(--warning); font-size:12px; line-height:1.55; margin-bottom:18px; }

/* Dashboard */
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:22px 16px; border-right:1px solid var(--line); background:rgba(8,11,25,.88); backdrop-filter:blur(22px); z-index:60; display:flex; flex-direction:column; }
html[data-theme="light"] .sidebar { background:rgba(255,255,255,.86); }
.sidebar .brand { padding:0 10px 22px; }
.side-nav { display:grid; gap:5px; margin-top:14px; }.side-link { width:100%; min-height:45px; padding:0 13px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--muted); display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left; font-weight:600; font-size:13px; }.side-link:hover,.side-link.active { color:var(--text); background:var(--surface-2); border-color:var(--line); }.side-link .nav-icon { width:24px; text-align:center; }.side-link.admin-only { color:#c6b9ff; }
.sidebar-foot { margin-top:auto; }.user-mini { padding:13px; border-radius:15px; display:flex; align-items:center; gap:11px; margin-bottom:9px; }.avatar { width:40px; height:40px; border-radius:13px; object-fit:cover; background:linear-gradient(135deg,var(--primary),var(--cyan)); display:grid; place-items:center; color:white; font-weight:800; flex:0 0 auto; }.user-mini strong { display:block; font-size:12px; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-mini small { color:var(--muted); font-size:10px; text-transform:capitalize; }
.app-main { grid-column:2; min-width:0; }
.topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 30px; position:sticky; top:0; background:rgba(7,9,20,.78); backdrop-filter:blur(18px); z-index:40; }.topbar-left { display:flex; align-items:center; gap:13px; }.topbar h1 { font-size:18px; margin:0; }.topbar p { color:var(--muted); font-size:11px; margin:3px 0 0; }.topbar-actions { display:flex; gap:9px; align-items:center; }.mobile-side-btn { display:none; }
.app-content { padding:30px; max-width:1500px; margin-inline:auto; }
.view { display:none; animation:fadeUp .35s ease; }.view.active { display:block; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }.page-head h2 { font-family:"Space Grotesk"; font-size:29px; margin:0 0 7px; }.page-head p { color:var(--muted); margin:0; font-size:13px; }
.card { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:22px; box-shadow:0 14px 45px rgba(0,0,0,.12); }.card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }.card-head h3 { margin:0; font-size:15px; }.card-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:18px; }.metric-card { padding:20px; border-radius:20px; overflow:hidden; position:relative; }.metric-card::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; background:rgba(124,92,255,.16); right:-30px; top:-30px; }.metric-label { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; }.metric-icon { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); }.metric-value { font-family:"Space Grotesk"; font-size:27px; margin-top:17px; display:block; }.metric-meta { color:var(--muted); font-size:10px; margin-top:6px; display:block; }
.dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; }.stack { display:grid; gap:18px; align-content:start; }
.bot-status-card { min-height:260px; background:linear-gradient(145deg,rgba(124,92,255,.18),var(--surface)); position:relative; overflow:hidden; }.bot-orb { width:128px; height:128px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d8d0ff,var(--primary) 42%,#2c235d 73%); box-shadow:0 0 70px rgba(124,92,255,.42); display:grid; place-items:center; margin:10px auto 20px; animation:orb 4s ease-in-out infinite; }.bot-orb span { font-size:34px; }.status-row { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; text-align:center; }.status-row strong { display:block; font-size:15px; }.status-row small { color:var(--muted); font-size:10px; }
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.quick-action { min-height:86px; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); cursor:pointer; text-align:left; }.quick-action:hover { border-color:rgba(124,92,255,.45); }.quick-action span { display:block; font-size:20px; }.quick-action strong { display:block; font-size:11px; margin-top:9px; }.quick-action small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.announcement { padding:14px; border-radius:15px; border:1px solid var(--line); background:var(--surface-2); margin-bottom:10px; }.announcement:last-child { margin-bottom:0; }.announcement-top { display:flex; justify-content:space-between; gap:10px; }.announcement h4 { margin:0; font-size:12px; }.announcement p { color:var(--muted); font-size:11px; line-height:1.6; margin:8px 0 0; }
.community-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.community-card { text-align:center; padding:28px 20px; }.community-icon { font-size:32px; }.community-card h3 { margin:14px 0 8px; }.community-card p { color:var(--muted); font-size:12px; line-height:1.6; min-height:38px; }
.wallet-card { padding:28px; background:linear-gradient(135deg,#6245e7,#166fbc); color:white; position:relative; overflow:hidden; }.wallet-card::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.1); right:-80px; top:-100px; }.wallet-card small { opacity:.72; }.wallet-balance { display:block; font-family:"Space Grotesk"; font-size:40px; margin:12px 0 28px; }.wallet-row { display:flex; justify-content:space-between; align-items:end; position:relative; z-index:1; }
.profile-grid { display:grid; grid-template-columns:330px 1fr; gap:18px; }.profile-summary { text-align:center; }.profile-summary .avatar { width:90px; height:90px; border-radius:26px; margin:0 auto 18px; font-size:27px; }.profile-summary h3 { margin:0 0 6px; }.profile-summary p { color:var(--muted); font-size:12px; }.profile-meta { display:grid; gap:10px; margin-top:22px; text-align:left; }.profile-meta div { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:10px; font-size:11px; }.profile-meta span { color:var(--muted); }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:11px; vertical-align:middle; }th { color:var(--muted); font-weight:700; background:var(--surface-2); position:sticky; top:0; }tr:last-child td { border-bottom:0; }td strong { font-size:12px; }.table-actions { display:flex; gap:7px; flex-wrap:wrap; }
.product-dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.product-dashboard-grid .product-card { border:1px solid var(--line); background:var(--surface); }.product-dashboard-grid .product-image { height:140px; }
.empty-state { padding:45px 24px; text-align:center; border-radius:22px; }.empty-state .empty-icon { font-size:38px; display:block; margin-bottom:14px; }.empty-state h3 { margin:0 0 8px; }.empty-state p { color:var(--muted); font-size:12px; margin:0 0 18px; }

/* Admin */
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.admin-grid .span-2 { grid-column:1/-1; }.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.toolbar input,.toolbar select { background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:11px; min-height:38px; padding:0 11px; outline:0; }
.color-input { height:48px!important; padding:5px!important; }
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 7px; font-size:10px; }

/* Modals & toast */
.modal-backdrop { position:fixed; inset:0; background:rgba(2,4,12,.72); backdrop-filter:blur(8px); display:none; place-items:center; padding:20px; z-index:100; }.modal-backdrop.open { display:grid; }.modal { width:min(560px,100%); max-height:min(88vh,850px); overflow:auto; border-radius:24px; padding:24px; animation:modalIn .25s ease; }.modal-lg { width:min(820px,100%); }.modal-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:20px; }.modal-head h3 { margin:0; font-family:"Space Grotesk"; font-size:22px; }.modal-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }.close-btn { width:36px; height:36px; border-radius:11px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.toast-host { position:fixed; right:20px; bottom:20px; z-index:150; display:grid; gap:10px; width:min(360px,calc(100% - 40px)); }.toast { border:1px solid var(--line); background:var(--surface-solid); border-radius:15px; padding:14px 15px; box-shadow:var(--shadow); display:flex; gap:11px; align-items:flex-start; animation:toastIn .3s ease; }.toast-icon { width:27px; height:27px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); }.toast strong { display:block; font-size:12px; }.toast p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }.toast.success .toast-icon { color:var(--success); }.toast.error .toast-icon { color:var(--danger); }.toast.warning .toast-icon { color:var(--warning); }
.loader { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; }
.page-loader { position:fixed; inset:0; background:var(--bg); z-index:200; display:grid; place-items:center; transition:.35s; }.page-loader.done { opacity:0; visibility:hidden; }.loader-logo { width:66px; height:66px; animation:orb 1.5s infinite; }
.setup-screen { min-height:100vh; display:grid; place-items:center; padding:25px; }.setup-card { width:min(650px,100%); padding:34px; border-radius:26px; }.setup-card h1 { font-family:"Space Grotesk"; }.setup-card ol { color:var(--muted); line-height:1.9; }.setup-card code { color:#c8bdff; }
.center-page { min-height:100vh; display:grid; place-items:center; padding:24px; }.center-page .empty-state { width:min(600px,100%); }

@keyframes pulse { 0%,100% { box-shadow:0 0 0 7px rgba(50,230,154,.08); } 50% { box-shadow:0 0 0 12px rgba(50,230,154,0); } }
@keyframes floatIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes orb { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.03); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes modalIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero-copy > p { margin-inline:auto; }.hero-actions,.mini-trust { justify-content:center; }.bot-console { width:min(600px,100%); margin:auto; transform:none; }
  .feature-grid,.product-grid,.product-dashboard-grid { grid-template-columns:repeat(2,1fr); }.metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.community-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px) {
  :root { --sidebar: 265px; }.nav-links { position:fixed; top:78px; left:18px; right:18px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); display:none; flex-direction:column; align-items:stretch; box-shadow:var(--shadow); }.nav-links.open { display:flex; }.menu-btn { display:grid; }.auth-layout { grid-template-columns:1fr; }.auth-visual { min-height:430px; }.auth-panel { border-left:0; border-top:1px solid var(--line); }.sidebar { transform:translateX(-105%); transition:.28s; }.sidebar.open { transform:none; }.app-shell { grid-template-columns:1fr; }.app-main { grid-column:1; }.mobile-side-btn { display:grid; }.topbar { padding:0 18px; }.app-content { padding:22px 18px; }.profile-grid { grid-template-columns:1fr; }.admin-grid { grid-template-columns:1fr; }.admin-grid .span-2 { grid-column:auto; }
}
@media (max-width: 650px) {
  .container { width:min(100% - 28px,1180px); }.navbar { height:70px; }.brand-copy small { display:none; }.nav-actions .desktop-only { display:none; }.hero { padding-top:50px; min-height:auto; }.hero h1 { font-size:43px; }.floating-chip { display:none; }.stats-grid { grid-template-columns:repeat(2,1fr); }.stat:nth-child(2) { border-right:0; }.stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }.feature-grid,.product-grid,.product-dashboard-grid,.community-grid,.metric-grid { grid-template-columns:1fr; }.cta-box { padding:30px 24px; flex-direction:column; align-items:flex-start; }.footer-row { flex-direction:column; text-align:center; }.form-grid.two { grid-template-columns:1fr; }.auth-visual { padding:27px 22px; }.auth-message h1 { font-size:45px; }.auth-panel { padding:30px 20px; }.page-head { align-items:flex-start; flex-direction:column; }.topbar-actions .hide-mobile { display:none; }.topbar h1 { font-size:15px; }.app-content { padding:18px 13px; }.card { padding:17px; border-radius:18px; }.quick-actions { grid-template-columns:1fr 1fr; }.wallet-balance { font-size:32px; }.modal { padding:19px; }.hero-actions .btn { width:100%; }.section { padding:70px 0; }
}

/* Hunter Soft Prime v2 additions */
.compact-select { min-height:36px; padding:0 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:11px; font-weight:700; outline:0; }
.compact-check { padding:0 8px; min-height:38px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); white-space:nowrap; }
.page-loader { align-content:center; gap:12px; }.page-loader small { color:var(--muted); font-weight:700; letter-spacing:.08em; }
.bot-contact-row { display:flex; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.profile-meta.compact { margin-top:0; }.conversion-note { margin-top:18px; padding:12px; border-radius:12px; background:rgba(255,255,255,.1); font-size:11px; line-height:1.55; position:relative; z-index:1; }
.product-card { position:relative; }.favorite-btn { position:absolute; top:10px; right:10px; width:34px; height:34px; z-index:3; border-radius:11px; border:1px solid var(--line); background:rgba(7,9,20,.78); color:#ffd76a; font-size:20px; cursor:pointer; backdrop-filter:blur(10px); }.product-card.is-favorite { border-color:rgba(255,215,106,.45)!important; box-shadow:0 0 0 1px rgba(255,215,106,.1),0 16px 45px rgba(0,0,0,.16); }
.product-command { display:flex; align-items:center; gap:8px; margin-top:13px; font-size:10px; color:var(--muted); }.product-command code { color:var(--primary-2); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 7px; }
.receipt { display:grid; gap:18px; }.receipt-brand { display:flex; align-items:center; gap:12px; }.receipt-brand img { width:48px; height:48px; }.receipt-brand strong,.receipt-brand small { display:block; }.receipt-brand small { color:var(--muted); margin-top:3px; }.receipt-number { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:13px; text-align:center; border:1px dashed var(--line); border-radius:12px; font-weight:800; }.receipt-lines { display:grid; gap:11px; }.receipt-lines > div { display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:12px; }.receipt-lines span { color:var(--muted); }.receipt-lines .receipt-total { font-size:16px; padding-top:6px; }.receipt-lines .receipt-total strong { color:var(--primary-2); }
.fatal-state { max-width:660px; margin:8vh auto; text-align:center; padding:42px; }.fatal-icon { width:70px; height:70px; margin:0 auto 18px; border-radius:22px; display:grid; place-items:center; background:rgba(255,88,112,.13); color:var(--danger); font:800 32px/1 "Space Grotesk"; }.fatal-state h2 { font-family:"Space Grotesk"; font-size:30px; margin:0 0 12px; }.fatal-state p { color:var(--muted); line-height:1.7; }.fatal-actions { display:flex; justify-content:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.btn-success { background:rgba(50,230,154,.13); border-color:rgba(50,230,154,.3); color:var(--success); }.btn-success:hover { background:rgba(50,230,154,.2); }

@media (max-width:650px) {
  .topbar-actions .compact-select { width:54px; padding:0 5px; }.topbar-actions { gap:5px; }.topbar-actions .icon-btn { width:36px; height:36px; }.bot-contact-row .btn { flex:1; }.compact-check { width:100%; }.toolbar { width:100%; }.toolbar input,.toolbar select { flex:1 1 130px; }
}

@media print {
  body * { visibility:hidden!important; }
  #receiptModal,#receiptModal * { visibility:visible!important; }
  #receiptModal { position:absolute!important; inset:0!important; display:block!important; background:white!important; color:black!important; padding:0!important; }
  #receiptModal .modal { width:100%!important; max-height:none!important; box-shadow:none!important; border:0!important; background:white!important; color:black!important; }
  #receiptModal .modal-head button,#receiptModal .modal-foot { display:none!important; }
}
.auth-tools { display:flex; justify-content:flex-end; gap:8px; align-items:center; }


/* Hunter Soft Prime v3 — maintenance & fake-hack user modes */
.admin-mode-box { padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); display:grid; gap:14px; }
.admin-mode-box.danger-box { border-color:rgba(255,88,112,.28); background:linear-gradient(135deg,rgba(255,88,112,.08),var(--surface-2)); }
.admin-mode-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.admin-mode-head strong,.admin-mode-head small { display:block; }.admin-mode-head small { color:var(--muted); margin-top:5px; line-height:1.5; }
.switch { position:relative; flex:0 0 auto; width:50px; height:28px; }.switch input { position:absolute; opacity:0; pointer-events:none; }.switch span { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid var(--line); cursor:pointer; transition:.22s; }.switch span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.3); transition:.22s; }.switch input:checked + span { background:var(--primary); border-color:transparent; }.switch input:checked + span::after { transform:translateX(22px); }.danger-switch input:checked + span { background:var(--danger); }
.user-mode-screen { position:fixed; inset:0; z-index:500; display:none; place-items:center; align-content:center; text-align:center; padding:28px; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(124,92,255,.2),transparent 34%),var(--bg); }
.user-mode-screen.show { display:grid; }.maintenance-active .app-shell { visibility:hidden; }
.maintenance-screen::before,.maintenance-screen::after { content:""; position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(10px); pointer-events:none; }.maintenance-screen::before { top:-240px; left:-160px; background:rgba(124,92,255,.12); }.maintenance-screen::after { right:-220px; bottom:-260px; background:rgba(57,207,255,.1); }
.maintenance-orb { width:96px; height:96px; border-radius:30px; display:grid; place-items:center; margin-bottom:24px; color:white; font:800 23px/1 "Space Grotesk"; letter-spacing:.08em; background:linear-gradient(145deg,var(--primary),#31c8ff); box-shadow:0 22px 70px rgba(124,92,255,.35); animation:maintenanceFloat 2.4s ease-in-out infinite; z-index:1; }.maintenance-orb::after { content:""; position:absolute; width:116px; height:116px; border:1px solid rgba(255,255,255,.15); border-radius:38px; animation:maintenanceSpin 8s linear infinite; }
.maintenance-status { display:flex; align-items:center; gap:8px; color:var(--primary-2); font-size:10px; font-weight:900; letter-spacing:.16em; z-index:1; }.maintenance-status i { width:8px; height:8px; border-radius:50%; background:var(--warning); box-shadow:0 0 18px var(--warning); animation:pulseDot 1.2s infinite; }
.maintenance-screen h1 { z-index:1; margin:14px 0 12px; font:800 clamp(34px,7vw,70px)/1.03 "Space Grotesk"; max-width:900px; }.maintenance-screen > p { z-index:1; margin:0; max-width:650px; color:var(--muted); font-size:14px; line-height:1.8; }.maintenance-actions { z-index:1; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:27px; }.maintenance-screen > small { z-index:1; margin-top:22px; color:var(--muted); }
.fake-hack-overlay { position:fixed; inset:0; z-index:450; display:none; pointer-events:none; overflow:hidden; color:#ff385f; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.fake-hack-overlay.show { display:block; }.fake-hack-active { --primary:#ff173f; --primary-2:#ff7a22; --success:#ff335c; --warning:#ffcf3f; background:#030000!important; }
.fake-hack-active::before { content:""; position:fixed; inset:0; z-index:440; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,0,40,.03) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 50%,transparent 40%,rgba(255,0,30,.22)); mix-blend-mode:screen; }
.fake-hack-active .app-shell { animation:hackViewport 1.8s steps(2,end) infinite; filter:contrast(1.12) saturate(.7); }
.fake-hack-active .app-shell .card,.fake-hack-active .app-shell .metric-card,.fake-hack-active .app-shell .quick-action { transform:translate(var(--hack-x,0),var(--hack-y,0)) rotate(var(--hack-r,0)); animation:hackCard .8s steps(2,end) var(--hack-delay,0s) infinite; border-color:rgba(255,35,75,.38); box-shadow:8px 0 rgba(255,0,52,.08),-8px 0 rgba(0,205,255,.06); }
.fake-hack-active .topbar { transform:skewX(-1.3deg) translateX(4px); border-bottom-color:#ff173f; }.fake-hack-active .sidebar { transform:translateX(-3px) rotate(-.35deg); border-right-color:#ff173f; }.fake-hack-active img { filter:hue-rotate(120deg) contrast(1.35); }.fake-hack-active h1,.fake-hack-active h2,.fake-hack-active h3,.fake-hack-active .metric-value { text-shadow:3px 0 #00e5ff,-3px 0 #ff003c; }
.hack-scanlines { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,0,40,.065) 3px 4px); animation:hackScan 7s linear infinite; }.hack-alert { position:absolute; left:50%; top:24px; transform:translateX(-50%); width:min(760px,calc(100% - 30px)); padding:14px 17px; border:1px solid rgba(255,31,70,.75); border-radius:14px; background:rgba(16,0,4,.93); box-shadow:0 0 45px rgba(255,0,48,.25); display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; animation:hackAlert .28s steps(2,end) infinite alternate; }.hack-skull { font-size:30px; }.hack-alert small { color:#ff9aad; font-size:8px; letter-spacing:.18em; }.hack-alert strong { display:block; color:#fff; font-size:17px; margin:3px 0; }.hack-alert p { margin:0; color:#ff8499; font-size:10px; }.hack-live { color:#050000; background:#ff2048; border-radius:7px; padding:5px 7px; font-size:9px; font-weight:900; }.hack-terminal { position:absolute; left:20px; bottom:20px; width:min(440px,calc(100% - 40px)); padding:16px; border:1px solid rgba(255,32,72,.45); background:rgba(5,0,1,.88); font-size:10px; line-height:1.9; box-shadow:0 20px 70px rgba(0,0,0,.45); transform:rotate(-1deg); }.hack-terminal div:nth-child(2) { color:#ff8d21; }.hack-terminal div:nth-child(3) { color:#00e5ff; }.hack-cursor { animation:hackBlink .6s steps(2,end) infinite; }.hack-watermark { position:absolute; right:-55px; top:48%; transform:rotate(90deg); font-size:12px; font-weight:900; letter-spacing:.5em; opacity:.65; }
@keyframes maintenanceFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-12px) rotate(2deg); } }
@keyframes maintenanceSpin { to { transform:rotate(360deg); } }
@keyframes pulseDot { 50% { opacity:.3; transform:scale(.72); } }
@keyframes hackViewport { 0%,94%,100% { transform:none; } 95% { transform:translateX(7px) skewX(1deg); } 97% { transform:translateX(-5px) skewX(-1deg); } }
@keyframes hackCard { 0%,90%,100% { opacity:1; } 92% { opacity:.73; transform:translate(calc(var(--hack-x,0px) + 4px),var(--hack-y,0px)) rotate(var(--hack-r,0deg)); } 95% { opacity:.9; } }
@keyframes hackScan { to { transform:translateY(18px); } }
@keyframes hackAlert { from { margin-left:-2px; } to { margin-left:2px; } }
@keyframes hackBlink { 50% { opacity:.15; } }
@media (max-width:650px) { .admin-mode-head { align-items:flex-start; }.hack-alert { top:10px; }.hack-alert p { display:none; }.hack-terminal { bottom:10px; }.hack-watermark { display:none; } }
@media (prefers-reduced-motion:reduce) { .maintenance-orb,.maintenance-orb::after,.maintenance-status i,.fake-hack-active .app-shell,.fake-hack-active .app-shell .card,.fake-hack-active .app-shell .metric-card,.fake-hack-active .app-shell .quick-action,.hack-alert,.hack-scanlines,.hack-cursor { animation:none!important; } }

/* v3 small layout fix */
.maintenance-orb { position:relative; }