/* ============================================================
   InstaPV — Main Stylesheet
   Dark Cyberpunk Design System
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg:         #0B1020;
  --bg2:        #0D1427;
  --card:       #111827;
  --card2:      #1a2236;
  --border:     rgba(255,255,255,.08);
  --border-glow:rgba(0,229,255,.25);
  --primary:    #00E5FF;
  --primary-d:  #00b8cc;
  --secondary:  #7C3AED;
  --accent:     #00FFB2;
  --danger:     #FF4D6D;
  --success:    #00FFB2;
  --warning:    #FFC857;
  --info:       #60A5FA;
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --radius:     12px;
  --radius-lg:  20px;
  --shadow:     0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 48px rgba(0,0,0,.6);
  --glow:       0 0 20px rgba(0,229,255,.3);
  --glow-purple:0 0 20px rgba(124,58,237,.3);
  --transition: all .2s cubic-bezier(.4,0,.2,1);
  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head:  'Space Grotesk', var(--font);
  --z-nav:      100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ── Reset & Base ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration:none; transition: var(--transition) }
a:hover { opacity:.85 }
img { max-width:100%; height:auto; display:block }
ul { list-style:none }
button { cursor:pointer; font-family:var(--font) }
input,select,textarea { font-family:var(--font) }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); line-height:1.2; color:var(--text) }
p { color:var(--text-muted) }

/* ── Grid Background ─────────────────────────────────────────── */
.grid-bg {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Container ───────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem }

/* ── Glass Card ─────────────────────────────────────────────── */
.glass {
  background: rgba(17,24,39,.7);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.glass:hover { border-color: var(--border-glow) }
.card { border-radius:var(--radius); overflow:hidden }
.p-2 { padding:1rem }
.p-3 { padding:1.5rem }
.p-4 { padding:2rem }

/* ── Gradient Text ───────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-primary { color: var(--primary) !important }
.text-success  { color: var(--success) !important }
.text-danger   { color: var(--danger)  !important }
.text-warning  { color: var(--warning) !important }
.text-muted    { color: var(--text-muted) !important }
.text-sm       { font-size:.875rem }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem; border-radius:8px; font-weight:600;
  font-size:.9rem; border:none; transition:var(--transition);
  white-space:nowrap; cursor:pointer; text-decoration:none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow: 0 4px 15px rgba(0,229,255,.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,229,255,.5); color:#fff; opacity:1 }
.btn-outline {
  background:transparent; color:var(--primary);
  border:1px solid var(--primary);
}
.btn-outline:hover { background:var(--primary); color:var(--bg); opacity:1 }
.btn-ghost {
  background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--text); opacity:1 }
.btn-success  { background:var(--success); color:var(--bg) }
.btn-danger   { background:var(--danger);  color:#fff }
.btn-warning  { background:var(--warning); color:var(--bg) }
.btn-sm  { padding:.4rem .9rem; font-size:.8rem }
.btn-lg  { padding:.85rem 1.75rem; font-size:1rem }
.btn-xs  { padding:.25rem .6rem; font-size:.75rem; border-radius:6px }
.btn-full { width:100%; justify-content:center }
.btn-icon { padding:.5rem; border-radius:50%; background:rgba(255,255,255,.1); color:var(--text); border:none }
.btn-icon:hover { background:rgba(255,255,255,.2) }
.btn-social {
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--text); justify-content:center; padding:.75rem;
}
.btn-social:hover { background:rgba(255,255,255,.1); color:var(--text) }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem }
.form-label { display:block; font-size:.875rem; font-weight:500; color:var(--text); margin-bottom:.4rem }
.form-label-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem }
.form-link { font-size:.8rem; color:var(--primary) }
.form-input {
  width:100%; padding:.65rem 1rem;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.9rem;
  transition:var(--transition);
}
.form-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.15) }
.form-input::placeholder { color:var(--text-muted) }
.form-input-sm { padding:.4rem .75rem; font-size:.8rem }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.input-group { position:relative; display:flex }
.input-group .form-input { padding-left:2.5rem }
.input-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; z-index:1 }
.input-append { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); padding:.25rem }
.input-append:hover { color:var(--text) }
.form-check { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1rem }
.check-input { width:1rem; height:1rem; margin-top:.15rem; accent-color:var(--primary) }
.check-label { font-size:.875rem; color:var(--text-muted); cursor:pointer }
.password-strength { margin-top:.5rem; min-height:24px }
select.form-input { cursor:pointer }
textarea.form-input { resize:vertical; min-height:120px }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  padding:.85rem 1rem; border-radius:8px; margin-bottom:1rem;
  display:flex; align-items:center; gap:.75rem; font-size:.875rem;
}
.alert-success { background:rgba(0,255,178,.1); border:1px solid rgba(0,255,178,.3); color:var(--success) }
.alert-danger  { background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.3); color:var(--danger) }
.alert-warning { background:rgba(255,200,87,.1); border:1px solid rgba(255,200,87,.3); color:var(--warning) }
.alert-info    { background:rgba(96,165,250,.1);  border:1px solid rgba(96,165,250,.3);  color:var(--info) }
.alert-dismissible { justify-content:space-between }
.close-btn { background:none; border:none; color:inherit; opacity:.7; font-size:1.1rem; padding:0; margin-left:auto }
.close-btn:hover { opacity:1 }

/* ── Flash Container ─────────────────────────────────────────── */
.flash-container {
  position:fixed; top:80px; right:1.5rem; z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:.5rem; max-width:400px;
}
.flash-container .alert { box-shadow:var(--shadow) }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; color:var(--text-muted) }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border) }

/* ── Badge & Pills ───────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:.15rem .5rem; border-radius:999px; font-size:.7rem; font-weight:600 }
.badge-default  { background:rgba(255,255,255,.1); color:var(--text) }
.badge-danger   { background:rgba(255,77,109,.2); color:var(--danger) }
.plan-badge {
  display:inline-block; padding:.15rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.plan-free     { background:rgba(255,255,255,.1); color:var(--text-muted) }
.plan-starter  { background:rgba(96,165,250,.2);  color:var(--info) }
.plan-pro      { background:rgba(0,229,255,.2);   color:var(--primary) }
.plan-business { background:rgba(124,58,237,.2);  color:#a78bfa }
.status-badge { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.7rem; font-weight:600 }
.status-active    { background:rgba(0,255,178,.2); color:var(--success) }
.status-suspended { background:rgba(255,200,87,.2); color:var(--warning) }
.status-deleted   { background:rgba(255,77,109,.2); color:var(--danger) }
.verified-badge { position:absolute; bottom:2px; right:2px; color:var(--primary); font-size:.9rem; filter:drop-shadow(0 0 4px var(--primary)) }
.verified-pill { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; background:rgba(0,229,255,.15); border-radius:999px; font-size:.75rem; color:var(--primary) }

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(11,16,32,.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:64px;
}
.navbar-inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:1.5rem }
.navbar-brand { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.2rem; color:var(--text); text-decoration:none }
.brand-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:8px; color:#fff; font-size:1rem }
.brand-name { color:var(--text) }
.navbar-nav { display:flex; align-items:center; gap:.25rem }
.nav-mobile-auth { display:none }
.nav-auth-desktop { display:flex; align-items:center; gap:.5rem }
.nav-link { padding:.5rem .75rem; border-radius:8px; color:var(--text-muted); font-size:.875rem; font-weight:500; transition:var(--transition); display:flex; align-items:center; gap:.35rem }
.nav-link:hover,.nav-link.active { color:var(--primary); background:rgba(0,229,255,.08) }
.navbar-right { display:flex; align-items:center; gap:.75rem }
.user-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid var(--primary) }
.username { font-size:.875rem; font-weight:500; color:var(--text) }
.navbar-toggle { display:none; flex-direction:column; gap:5px; padding:.5rem; background:none; border:none }
.navbar-toggle span { display:block; width:22px; height:2px; background:var(--text); transition:var(--transition) }

/* Dropdown */
.dropdown { position:relative }
.dropdown-toggle { cursor:pointer }
.dropdown-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); min-width:200px; padding:.5rem;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); z-index:var(--z-dropdown);
}
.dropdown-menu-right { left:auto; right:0; transform:none }
.dropdown:hover .dropdown-menu { display:block }
.dropdown-menu li a,.dropdown-menu a {
  display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem;
  border-radius:6px; color:var(--text); font-size:.875rem; transition:var(--transition)
}
.dropdown-menu li a:hover { background:rgba(255,255,255,.06); color:var(--primary) }
.dropdown-header { padding:.5rem .75rem; font-size:.8rem; color:var(--text-muted); display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:.25rem }
.dropdown-menu .divider { height:1px; background:var(--border); margin:.25rem 0 }

/* ── Sections ────────────────────────────────────────────────── */
.section { padding:4rem 0 }
.section-header { text-align:center; margin-bottom:3rem }
.section-header h2 { font-size:2rem; font-family:var(--font-head); margin-bottom:.75rem }
.section-header p { font-size:1rem; color:var(--text-muted); max-width:600px; margin:0 auto }
.section-header-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2rem }
.section-header-row h2 { font-size:1.75rem; margin-bottom:.25rem }
.section-title { font-size:1.5rem; margin-bottom:1.5rem }

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding:6rem 0 4rem;
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0,229,255,.12), transparent),
              radial-gradient(ellipse 50% 40% at 80% 80%, rgba(124,58,237,.1), transparent);
  text-align:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .9rem;
  background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.3); border-radius:999px;
  font-size:.8rem; font-weight:600; color:var(--primary); margin-bottom:1.5rem;
}
.hero-title { font-size:clamp(2rem, 6vw, 3.75rem); font-weight:800; line-height:1.1; margin-bottom:1.25rem }
.hero-subtitle { font-size:1.15rem; color:var(--text-muted); max-width:600px; margin:0 auto 2.5rem }
.hero-search { position:relative; max-width:700px; margin:0 auto 2rem }
.search-wrapper { display:flex; align-items:center; gap:0; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:var(--transition) }
.search-wrapper:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.15) }
.search-icon { color:var(--text-muted); padding:0 1rem; font-size:1.1rem }
.search-input { flex:1; padding:1rem .5rem; background:transparent; border:none; color:var(--text); font-size:1rem; outline:none }
.search-input::placeholder { color:var(--text-muted) }
.search-btn { padding:.9rem 1.5rem; border-radius:0 10px 10px 0; flex-shrink:0 }
.search-paste-btn { display:flex; align-items:center; justify-content:center; padding:.5rem .65rem; margin-right:.4rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:7px; color:rgba(255,255,255,.45); cursor:pointer; font-size:.85rem; flex-shrink:0; transition:var(--transition); line-height:1 }
.search-paste-btn:hover { color:var(--primary); background:rgba(0,229,255,.1); border-color:rgba(0,229,255,.3) }
[data-theme="light"] .search-paste-btn { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); color:rgba(0,0,0,.4) }
[data-theme="light"] .search-paste-btn:hover { color:#0077aa; background:rgba(0,119,170,.08); border-color:rgba(0,119,170,.3) }
.search-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); z-index:var(--z-dropdown); display:none }
.search-dropdown.active { display:block }
.dropdown-item { display:flex; align-items:center; gap:.5rem; padding:.65rem 1rem; color:var(--text); font-size:.9rem; transition:var(--transition); cursor:pointer }
.dropdown-item:hover { background:rgba(0,229,255,.08); color:var(--primary) }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem }
.hero-stats { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--border) }
.stat-item { text-align:center }
.stat-num { display:block; font-size:1.5rem; font-weight:800; color:var(--primary) }
.stat-item span:last-child { font-size:.8rem; color:var(--text-muted) }

/* ── Features ────────────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem }
.feature-card { padding:2rem; transition:var(--transition) }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow) }
.feature-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.25rem }
.icon-primary { background:rgba(0,229,255,.15); color:var(--primary) }
.icon-secondary { background:rgba(124,58,237,.15); color:#a78bfa }
.icon-success { background:rgba(0,255,178,.15); color:var(--success) }
.icon-danger  { background:rgba(255,77,109,.15); color:var(--danger) }
.icon-warning { background:rgba(255,200,87,.15); color:var(--warning) }
.icon-purple  { background:rgba(124,58,237,.15); color:#a78bfa }
.icon-cyan    { background:rgba(0,229,255,.15); color:var(--primary) }
.feature-card h3 { font-size:1.1rem; margin-bottom:.5rem; font-family:var(--font-head) }
.feature-card p  { font-size:.875rem; line-height:1.6; margin-bottom:1rem }
.feature-link { font-size:.875rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:.25rem }

/* ── Profile Grid ────────────────────────────────────────────── */
.profiles-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem }
.profile-card { text-align:center; transition:var(--transition); overflow:hidden }
.profile-card:hover { transform:translateY(-4px); border-color:var(--border-glow) }
.profile-card-link { display:block; padding:1.5rem 1rem; color:inherit; text-decoration:none }
.profile-card-header { display:flex; flex-direction:column; align-items:center; margin-bottom:1rem }
.profile-pic-wrap { position:relative; margin-bottom:.75rem }
.profile-pic { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--border) }
.profile-card-info { text-align:center }
.profile-username { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:.15rem }
.profile-fullname { font-size:.8rem; color:var(--text-muted) }
.profile-stats { display:flex; justify-content:space-around; margin-bottom:1rem; padding-top:.75rem; border-top:1px solid var(--border) }
.profile-stats .stat { text-align:center }
.profile-stats .stat-val { display:block; font-weight:700; font-size:.95rem; color:var(--primary) }
.profile-stats .stat span:last-child { font-size:.7rem; color:var(--text-muted) }
.btn-full { width:100%; justify-content:center }

/* ── Tags Cloud ─────────────────────────────────────────────── */
.tags-cloud { display:flex; flex-wrap:wrap; gap:.5rem }
.tag-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .9rem; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:999px; font-size:.8rem; color:var(--text-muted); transition:var(--transition) }
.tag-pill:hover { border-color:var(--primary); color:var(--primary) }
.tag-count { background:rgba(255,255,255,.1); border-radius:999px; padding:.05rem .4rem; font-size:.7rem }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs-nav { display:flex; gap:.5rem; margin-bottom:2rem; border-bottom:1px solid var(--border); padding-bottom:0 }
.tab-btn { padding:.6rem 1.25rem; border-radius:8px 8px 0 0; background:transparent; border:none; color:var(--text-muted); font-weight:500; font-size:.875rem; cursor:pointer; transition:var(--transition); border-bottom:2px solid transparent; margin-bottom:-1px }
.tab-btn:hover { color:var(--text) }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary) }
.tab-content { display:none }
.tab-content.active { display:block }

/* ── Trending section ────────────────────────────────────────── */
.trending-section { background:rgba(255,255,255,.01) }

/* ── Steps ───────────────────────────────────────────────────── */
.steps-grid { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center }
.step-card { flex:1; min-width:200px; max-width:280px; padding:2rem; text-align:center }
.step-number { font-size:3rem; font-weight:900; color:var(--primary); opacity:.3; line-height:1; margin-bottom:.75rem; font-family:var(--font-head) }
.step-card h3 { font-size:1.1rem; margin-bottom:.5rem }
.step-card p  { font-size:.875rem }
.step-arrow { font-size:2rem; color:var(--border); flex-shrink:0 }

/* ── CTA Banner ─────────────────────────────────────────────── */
.cta-banner { padding:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.cta-text h2 { font-size:1.75rem; margin-bottom:.5rem }
.cta-actions { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap }

/* ── Blog ─────────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1.5rem }
.blog-card { overflow:hidden; transition:var(--transition) }
.blog-card:hover { transform:translateY(-4px); border-color:var(--border-glow) }
.blog-card-image { display:block; overflow:hidden; height:180px; width:100% }
.blog-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.blog-card:hover .blog-card-image img { transform:scale(1.05) }
.blog-card-body { padding:1.25rem }
.blog-category { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--primary); margin-bottom:.5rem }
.blog-card-body h3 { font-size:1rem; margin-bottom:.4rem; line-height:1.35 }
.blog-card-body h3 a { color:var(--text) }
.blog-card-body h3 a:hover { color:var(--primary) }
.blog-card-body p { font-size:.85rem; line-height:1.5; margin-bottom:.75rem }
.blog-meta { display:flex; gap:1rem; font-size:.75rem; color:var(--text-muted) }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { max-width:800px; margin:0 auto }
.faq-narrow { max-width:700px }
.faq-item { border-bottom:1px solid var(--border) }
.faq-question {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem 0; background:none; border:none; color:var(--text); font-size:.95rem;
  font-weight:500; text-align:left; cursor:pointer; transition:var(--transition);
}
.faq-question:hover { color:var(--primary) }
.faq-question[aria-expanded="true"] .bi-chevron-down { transform:rotate(180deg) }
.faq-question .bi-chevron-down { transition:transform .2s; color:var(--text-muted); flex-shrink:0 }
.faq-answer { padding-bottom:1rem; display:none }
.faq-answer p { font-size:.9rem; line-height:1.7 }
.faq-answer[hidden] { display:none }
.faq-category-section { margin-bottom:2.5rem }
.faq-cat-title { font-size:1.25rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { padding:4rem 0 2rem; border-top:1px solid var(--border); margin-top:4rem }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.footer-brand p { font-size:.875rem; color:var(--text-muted); margin:.75rem 0 1rem; max-width:300px }
.social-links { display:flex; gap:.75rem }
.social-links a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text-muted); transition:var(--transition) }
.social-links a:hover { background:rgba(0,229,255,.1); border-color:var(--primary); color:var(--primary) }
.footer-col h4 { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:1rem }
.footer-col ul { display:flex; flex-direction:column; gap:.6rem }
.footer-col ul a { font-size:.875rem; color:var(--text-muted); transition:var(--transition) }
.footer-col ul a:hover { color:var(--primary) }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; text-align:center }
.footer-bottom p { font-size:.8rem; color:var(--text-muted) }
.disclaimer { font-size:.75rem; opacity:.6; margin-top:.25rem }

/* ── Cookie Banner ───────────────────────────────────────────── */
.cookie-banner {
  position:fixed; bottom:1rem; left:1rem; right:1rem; z-index:var(--z-toast);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.25rem; max-width:700px; margin:0 auto;
  box-shadow:var(--shadow-lg);
}
.cookie-content { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.cookie-content span { flex:1; font-size:.875rem; color:var(--text-muted); min-width:0 }
.cookie-actions { display:flex; gap:.5rem; flex-shrink:0 }
@media (max-width:768px) {
  .cookie-banner { bottom:0; left:0; right:0; border-radius:var(--radius) var(--radius) 0 0; padding:.875rem 1rem; max-width:100% }
  .cookie-content { flex-direction:column; align-items:stretch; gap:.6rem }
  .cookie-content span { text-align:center; font-size:.82rem }
  .cookie-actions { justify-content:stretch; gap:.5rem }
  .cookie-actions .btn { flex:1; text-align:center; justify-content:center }
}

/* ── Auth Pages ──────────────────────────────────────────────── */
.auth-page { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:2rem 1rem }
.auth-card { width:100%; max-width:480px; padding:2.5rem }
.auth-card-wide { max-width:580px }
.auth-header { text-align:center; margin-bottom:2rem }
.auth-header h1 { font-size:1.75rem; margin:.75rem 0 .25rem }
.auth-header p { font-size:.9rem }
.auth-footer-text { text-align:center; margin-top:1.5rem; font-size:.875rem; color:var(--text-muted) }
.auth-perks { display:flex; justify-content:center; gap:1.5rem; margin:1rem 0; flex-wrap:wrap }
.auth-perks span { font-size:.8rem; color:var(--text-muted) }

/* ── Profile Hero ────────────────────────────────────────────── */
.profile-hero { padding:2rem 0 }
.profile-hero-inner { display:flex; gap:2rem; padding:2rem; align-items:flex-start; flex-wrap:wrap }
.profile-hero-pic { flex-shrink:0 }
.pic-ring { width:120px; height:120px; border-radius:50%; padding:3px; background:linear-gradient(135deg, var(--primary), var(--secondary)) }
.ring-default { background:linear-gradient(135deg, var(--border), var(--border)) }
.ring-verified { background:linear-gradient(135deg, var(--primary), var(--secondary)) }
.profile-hero-img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid var(--bg) }
.profile-hero-info { flex:1; min-width:0 }
.profile-hero-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem; margin-bottom:1.25rem }
.profile-handle { font-size:1.75rem; font-weight:800; margin-bottom:.1rem }
.profile-realname { color:var(--text-muted); font-size:.95rem }
.profile-actions { display:flex; gap:.5rem; flex-wrap:wrap }
.profile-stats-bar { display:flex; gap:2rem; margin-bottom:1.25rem; flex-wrap:wrap }
.stat-bar-item { text-align:center }
.stat-bar-val { display:block; font-size:1.4rem; font-weight:800; color:var(--primary) }
.stat-bar-item span:last-child { font-size:.75rem; color:var(--text-muted) }
.profile-bio { margin-bottom:.75rem }
.profile-bio p { font-size:.9rem; color:var(--text); white-space:pre-wrap }
.profile-url { display:inline-flex; align-items:center; gap:.25rem; font-size:.875rem; color:var(--primary); margin-bottom:.75rem }
.profile-meta-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem }
.meta-tag { font-size:.75rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:.25rem }
.seo-links { padding-left:1.25rem; display:flex; flex-direction:column; gap:.5rem }
.seo-links a { font-size:.875rem; color:var(--primary) }
.content-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem }
.related-profiles { display:flex; flex-direction:column; gap:.75rem; margin-top:1rem }
.related-item { display:flex; align-items:center; gap:.75rem; padding:.6rem; border-radius:8px; transition:var(--transition) }
.related-item:hover { background:rgba(255,255,255,.04) }
.related-item img { width:40px; height:40px; border-radius:50%; object-fit:cover }
.related-item div { flex:1; min-width:0 }
.related-item strong { display:block; font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.related-item span { font-size:.75rem; color:var(--text-muted) }

/* ── Analytics ───────────────────────────────────────────────── */
.analytics-section { padding:3rem 0 }
.analytics-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem }
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.chart-card { padding:1.5rem }
.chart-card h3 { font-size:1rem; margin-bottom:1rem }
.upsell-banner { padding:2rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
.upsell-banner h3 { margin-bottom:.25rem }

/* ── Dashboard ───────────────────────────────────────────────── */
.dashboard-layout { display:flex; min-height:calc(100vh - 64px) }
.dashboard-sidebar { width:260px; flex-shrink:0; padding:1.5rem 1rem; border-right:1px solid var(--border); border-radius:0; position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto }
.sidebar-user { display:flex; align-items:center; gap:.75rem; padding:.75rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border) }
.sidebar-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--primary) }
.sidebar-user strong { display:block; font-size:.9rem }
.sidebar-nav { display:flex; flex-direction:column; gap:.25rem }
.sidebar-link { display:flex; align-items:center; gap:.65rem; padding:.6rem .85rem; border-radius:8px; color:var(--text-muted); font-size:.875rem; font-weight:500; transition:var(--transition) }
.sidebar-link:hover { background:rgba(0,229,255,.08); color:var(--primary) }
.sidebar-link.active { background:rgba(0,229,255,.1); color:var(--primary) }
.sidebar-link .badge { margin-left:auto; background:rgba(255,77,109,.2); color:var(--danger) }
.sidebar-upgrade { margin-top:1.5rem; padding:.75rem; border-radius:8px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(124,58,237,.1)); border:1px solid rgba(0,229,255,.2); color:var(--primary); font-size:.875rem; font-weight:600; display:flex; align-items:center; gap:.5rem; transition:var(--transition) }
.sidebar-upgrade:hover { background:linear-gradient(135deg,rgba(0,229,255,.2),rgba(124,58,237,.2)) }
.dashboard-main { flex:1; padding:2rem; overflow-x:hidden }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem }
.dashboard-header h1 { font-size:1.75rem; margin-bottom:.15rem }
.stats-grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-bottom:1.5rem }
.stat-card { display:flex; align-items:center; gap:1rem; padding:1.25rem }
.stat-card-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0 }
.stat-card-info { flex:1 }
.stat-card-val { display:block; font-size:1.4rem; font-weight:800; color:var(--text) }
.stat-card-info span { font-size:.8rem; color:var(--text-muted) }
.stat-card-info small { font-size:.75rem; color:var(--text-muted) }
.dashboard-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem }
.card-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem }
.card-header-row h3 { font-size:1rem; display:flex; align-items:center; gap:.5rem }
.recent-list { display:flex; flex-direction:column; gap:.25rem }
.recent-item { display:flex; align-items:center; gap:.75rem; padding:.5rem .6rem; border-radius:8px; transition:var(--transition); color:var(--text) }
.recent-item:hover { background:rgba(255,255,255,.04) }
.recent-item img { width:36px; height:36px; border-radius:50%; object-fit:cover }
.recent-item div { flex:1 }
.recent-item div strong { display:block; font-size:.875rem }
.recent-item div span { font-size:.75rem; color:var(--text-muted) }
.progress-bar-wrap { height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:999px; transition:width .6s }
.referral-banner { background:linear-gradient(135deg,rgba(0,229,255,.05),rgba(124,58,237,.05)); border-color:rgba(0,229,255,.2) }
.referral-banner-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1rem }
.referral-link-row { display:flex; gap:.5rem }
.referral-stats-mini { display:flex; gap:2rem; font-size:.8rem; color:var(--text-muted) }
.referral-stats-mini strong { color:var(--primary) }
.upgrade-cta { padding:2rem; background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,58,237,.08)); border-color:rgba(0,229,255,.25) }
.upgrade-cta-inner { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap }
.upgrade-cta-inner i { font-size:2rem; color:var(--primary) }
.upgrade-cta-inner div { flex:1 }
.upgrade-cta-inner h3 { margin-bottom:.25rem }

/* ── Pricing Page ────────────────────────────────────────────── */
.pricing-page { padding:4rem 0 }
.billing-toggle { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:3rem }
.toggle-label { font-size:.9rem; font-weight:500 }
.toggle-switch { position:relative; display:inline-block; width:52px; height:26px }
.toggle-switch input { opacity:0; width:0; height:0 }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,.1); border-radius:999px; transition:.3s }
.toggle-slider:before { position:absolute; content:''; height:18px; width:18px; left:4px; bottom:4px; background:var(--text); border-radius:50%; transition:.3s }
.toggle-switch input:checked + .toggle-slider { background:var(--primary) }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(26px) }
.save-badge { background:rgba(0,255,178,.2); color:var(--success); padding:.1rem .5rem; border-radius:999px; font-size:.7rem; font-weight:700; margin-left:.35rem }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.5rem; margin-bottom:3rem }
.plan-card { padding:2rem; position:relative; transition:var(--transition) }
.plan-card:hover { transform:translateY(-4px) }
.plan-popular { border-color:var(--primary) !important; box-shadow:var(--glow) }
.popular-ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; padding:.2rem 1rem; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:.25rem }
.plan-header { margin-bottom:1.5rem }
.plan-name { font-size:1.35rem; margin-bottom:.25rem }
.plan-desc { font-size:.85rem; color:var(--text-muted); margin-bottom:1rem }
.plan-price { display:flex; align-items:baseline; gap:.1rem; margin-bottom:.25rem }
.price-currency { font-size:1rem; color:var(--text-muted) }
.price-amount { font-size:2.5rem; font-weight:800; color:var(--text) }
.price-period { font-size:.85rem; color:var(--text-muted) }
.price-yearly-note { font-size:.75rem; color:var(--text-muted) }
.plan-features { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.75rem }
.plan-features li { display:flex; align-items:center; gap:.5rem; font-size:.875rem }
.feature-yes { color:var(--text) }
.feature-limited { color:var(--text-muted) }
.feature-no { color:var(--text-muted); opacity:.4 }
.feature-yes i { color:var(--success) }
.feature-limited i { color:var(--warning) }
.feature-no i { color:var(--text-muted) }
.coupon-section { background:rgba(255,255,255,.02); border:1px dashed var(--border); border-radius:var(--radius); padding:2rem; text-align:center; max-width:600px; margin:2rem auto }
.coupon-section h3 { margin-bottom:1rem }
.coupon-form { display:flex; gap:.75rem; justify-content:center; max-width:400px; margin:0 auto }

/* ── Story Viewer ────────────────────────────────────────────── */
.story-viewer-page { padding:2rem 0 }
.story-layout { display:grid; grid-template-columns:1fr 280px; gap:2rem }
.story-profile-header { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; margin-bottom:1.25rem; flex-wrap:wrap }
.story-profile-pic { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--primary) }
.story-profile-header div { flex:1 }
.story-profile-header h1 { font-size:1.25rem; margin-bottom:.1rem }
.story-profile-header p { font-size:.8rem; color:var(--text-muted) }
.story-viewer-container { position:relative; background:var(--card2); border-radius:var(--radius); overflow:hidden; min-height:400px; display:flex; align-items:center; justify-content:center }
.story-placeholder { width:100%; padding:3rem; display:flex; align-items:center; justify-content:center }
.story-loading-anim { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem }
.story-ring { width:100px; height:100px; border-radius:50%; padding:3px; background:linear-gradient(135deg,var(--primary),var(--secondary)); margin-bottom:.5rem }
.story-ring-pic { width:100%; height:100%; border-radius:50%; object-fit:cover }
.story-slides { position:relative; width:100%; height:500px; display:flex; flex-direction:column }
.story-progress-bars { display:flex; gap:4px; padding:.75rem .75rem 0; position:absolute; top:0; left:0; right:0; z-index:10 }
.progress-bar-story { flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden }
.pb-fill { height:100%; background:#fff; border-radius:2px }
.story-content { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden }
.story-media { max-width:100%; max-height:500px; object-fit:contain }
.story-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:20; background:rgba(0,0,0,.4); border:none; color:#fff; font-size:1.4rem; padding:.75rem; border-radius:50%; transition:var(--transition) }
.story-nav:hover { background:rgba(0,0,0,.7) }
.story-prev { left:1rem }
.story-next { right:1rem }
.story-overlay-top { position:absolute; top:2.5rem; left:0; right:0; padding:.5rem .75rem; display:flex; justify-content:space-between; align-items:center; z-index:15 }
.story-user-info { display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5) }
.story-mini-pic { width:28px; height:28px; border-radius:50%; border:2px solid #fff }
.story-overlay-actions { display:flex; gap:.5rem }
.story-counter { position:absolute; bottom:.75rem; right:.75rem; font-size:.75rem; color:rgba(255,255,255,.7); z-index:10 }
.story-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:3rem; text-align:center }
.story-timeline { display:flex; gap:.5rem; overflow-x:auto; padding:.75rem; scrollbar-width:thin }
.story-thumb { position:relative; flex-shrink:0; width:64px; height:64px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:var(--transition) }
.story-thumb.active { border-color:var(--primary) }
.story-thumb img { width:100%; height:100%; object-fit:cover }
.story-thumb span { position:absolute; bottom:2px; right:3px; font-size:.6rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8) }
.story-stats { margin-top:1rem }
.story-sidebar { display:flex; flex-direction:column; gap:1.5rem }
.sidebar-search-form { display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem }
.seo-content { margin-top:1.5rem }
.spinner { width:40px; height:40px; border:3px solid rgba(0,229,255,.2); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto }
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Stats Row ───────────────────────────────────────────────── */
.stats-row { display:flex; justify-content:space-around; text-align:center }
.stats-row .stat-item { display:flex; flex-direction:column; align-items:center; gap:.25rem }
.stats-row .stat-item i { font-size:1.25rem }
.stats-row .stat-item span { font-size:1.1rem; font-weight:700; color:var(--text) }
.stats-row .stat-item small { font-size:.75rem; color:var(--text-muted) }

/* ── Search Page ─────────────────────────────────────────────── */
.search-page { padding:3rem 0 }
.search-form-main { position:relative; margin-bottom:2.5rem }
.search-wrapper-lg { display:flex; align-items:center; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:var(--transition) }
.search-wrapper-lg:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.15) }
.search-icon-lg { color:var(--text-muted); padding:0 1.25rem; font-size:1.2rem; flex-shrink:0 }
.search-input-lg { flex:1; padding:1.1rem .5rem; background:transparent; border:none; color:var(--text); font-size:1.05rem; outline:none }
.search-btn-lg { padding:1rem 1.75rem; border-radius:0 12px 12px 0; flex-shrink:0 }
.search-dropdown-lg { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); z-index:var(--z-dropdown); display:none }
.search-dropdown-lg.active { display:block }
.search-tools-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-bottom:2rem }
.search-tool-card { padding:1.5rem; text-align:center; transition:var(--transition) }
.search-tool-card:hover { transform:translateY(-3px); border-color:var(--border-glow) }
.search-tool-card i { font-size:2rem; color:var(--primary); margin-bottom:.75rem; display:block }
.search-tool-card h3 { font-size:1rem; margin-bottom:.25rem }
.search-tool-card p { font-size:.8rem }
.search-history { margin-bottom:1.5rem }
.filter-active { display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2); border-radius:999px; font-size:.8rem; color:var(--primary) }
.remove-filter { color:var(--primary); opacity:.7 }
.remove-filter:hover { opacity:1 }

/* ── Blog Page ───────────────────────────────────────────────── */
.blog-page { padding:3rem 0 }
.featured-post { display:grid; grid-template-columns:1fr 1fr; margin-bottom:3rem; overflow:hidden }
.featured-post-image { display:block; height:320px; overflow:hidden; position:relative }
.featured-post-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.featured-post:hover .featured-post-image img { transform:scale(1.05) }
.featured-badge { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; padding:.2rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; display:flex; align-items:center; gap:.25rem }
.featured-post-content { padding:2rem; display:flex; flex-direction:column; justify-content:center }
.featured-post-content h2 { font-size:1.5rem; margin:.5rem 0 .75rem; line-height:1.3 }
.featured-post-content h2 a { color:var(--text) }
.featured-post-content h2 a:hover { color:var(--primary) }
.featured-post-content p { margin-bottom:1.25rem; line-height:1.7 }
.blog-layout { display:grid; grid-template-columns:1fr 280px; gap:2rem }
.blog-controls { padding:1rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.blog-search-form { display:flex; gap:.5rem; flex:1 }
.blog-grid-main { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem }
.blog-sidebar { display:flex; flex-direction:column; gap:1.5rem }
.sidebar-widget h3 { font-size:1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }
.category-list { display:flex; flex-direction:column; gap:.35rem }
.category-list a { display:flex; justify-content:space-between; align-items:center; padding:.4rem .6rem; border-radius:6px; font-size:.875rem; color:var(--text-muted); transition:var(--transition) }
.category-list a:hover,.category-list a.active { color:var(--primary); background:rgba(0,229,255,.06) }
.sidebar-profile-item { display:flex; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--border) }
.sidebar-profile-item:last-child { border-bottom:none }
.sidebar-profile-item img { width:36px; height:36px; border-radius:50%; object-fit:cover }
.sidebar-profile-item div strong { display:block; font-size:.8rem }
.sidebar-profile-item div span  { font-size:.75rem; color:var(--text-muted) }

/* ── Legal Pages ─────────────────────────────────────────────── */
.legal-page { padding:3rem 0 }
.legal-page h1 { font-size:2rem; margin-bottom:.25rem }
.legal-content h2 { font-size:1.15rem; color:var(--primary); margin:1.75rem 0 .5rem }
.legal-content h3 { font-size:1rem; margin:1.25rem 0 .4rem }
.legal-content p { font-size:.9rem; line-height:1.8; margin-bottom:.75rem }
.legal-content ul { padding-left:1.25rem; margin-bottom:1rem }
.legal-content ul li { font-size:.9rem; line-height:1.8; color:var(--text-muted); list-style:disc }
.legal-content a { color:var(--primary) }
.legal-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.875rem }
.legal-table th { padding:.6rem; background:rgba(255,255,255,.05); color:var(--text); text-align:left; border-bottom:1px solid var(--border) }
.legal-table td { padding:.6rem; border-bottom:1px solid var(--border); color:var(--text-muted); vertical-align:top }

/* ── Contact Page ─────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem }
.contact-info { display:flex; flex-direction:column; gap:1.5rem }
.contact-info-items { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem }
.contact-info-item { display:flex; align-items:flex-start; gap:.75rem }
.contact-info-item i { font-size:1.25rem; flex-shrink:0; margin-top:.1rem }
.contact-info-item strong { display:block; font-size:.875rem; color:var(--text); margin-bottom:.15rem }
.contact-info-item p { font-size:.8rem; color:var(--text-muted) }
.quick-links { display:flex; flex-direction:column; gap:.5rem }
.quick-links a { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--text-muted); padding:.4rem 0; transition:var(--transition) }
.quick-links a:hover { color:var(--primary) }

/* ── FAQ Page ─────────────────────────────────────────────────── */
.faq-page { padding:3rem 0 }
.faq-search { margin-bottom:2rem }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-muted); padding:.75rem 0 }
.breadcrumb a { color:var(--text-muted); transition:var(--transition) }
.breadcrumb a:hover { color:var(--primary) }
.breadcrumb span { color:var(--text) }
.breadcrumb i { font-size:.65rem }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted) }
.empty-state i  { font-size:2.5rem; margin-bottom:1rem; display:block; opacity:.4 }
.empty-state.sm { padding:2rem 1rem }

/* ── Error Page ──────────────────────────────────────────────── */
.error-page { min-height:60vh; display:flex; align-items:center; justify-content:center; padding:2rem }
.error-content { max-width:500px; text-align:center; padding:3rem }
.error-code { font-size:6rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.5rem }
.error-content h1 { font-size:1.75rem; margin-bottom:.75rem }
.error-content p { margin-bottom:1.5rem }
.error-actions { display:flex; gap:1rem; justify-content:center; margin-bottom:2rem }

/* ── Settings Page ───────────────────────────────────────────── */
.settings-page { padding:2rem }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.settings-grid .glass.card { padding:1.75rem }
.settings-grid h3 { font-size:1rem; margin-bottom:1.25rem; color:var(--primary) }

/* ── Saved Profiles Page ─────────────────────────────────────── */
.saved-page { padding:2rem 0 }
.saved-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem }

/* ── Referral Page ───────────────────────────────────────────── */
.referral-page { padding:2rem 0 }
.referral-hero { padding:3rem; text-align:center; margin-bottom:2rem }
.referral-hero h1 { font-size:2.25rem; margin-bottom:.75rem }
.referral-link-box { display:flex; gap:.75rem; max-width:500px; margin:1.5rem auto 0 }
.referral-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem }
.referral-stat { padding:1.5rem; text-align:center }
.referral-stat-val { font-size:2rem; font-weight:800; color:var(--primary); display:block; margin-bottom:.25rem }

/* ── Checkout ────────────────────────────────────────────────── */
.checkout-page { padding:3rem 0 }
.checkout-grid { display:grid; grid-template-columns:1fr 360px; gap:2rem }
.order-summary { padding:1.5rem; position:sticky; top:80px }
.order-summary h3 { font-size:1rem; margin-bottom:1.25rem }
.summary-row { display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.875rem }
.summary-total { font-size:1.1rem; font-weight:700; color:var(--primary) }
.payment-methods { display:flex; gap:.75rem; margin:1.25rem 0; flex-wrap:wrap }
.payment-method { padding:.5rem 1rem; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:.8rem; transition:var(--transition) }
.payment-method.active { border-color:var(--primary); background:rgba(0,229,255,.08) }

/* ── Blog Post Page ──────────────────────────────────────────── */
.blog-post-page { padding:3rem 0 }
.blog-post-layout { display:grid; grid-template-columns:1fr 300px; gap:3rem }
.blog-post-header { margin-bottom:2rem }
.blog-post-header h1 { font-size:2rem; line-height:1.25; margin:.75rem 0 }
.blog-post-meta { display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted) }
.blog-post-content { line-height:1.9 }
.blog-post-content h2 { font-size:1.4rem; margin:2rem 0 .75rem; color:var(--primary) }
.blog-post-content h3 { font-size:1.1rem; margin:1.5rem 0 .5rem }
.blog-post-content p  { margin-bottom:1.25rem; color:var(--text-muted) }
.blog-post-content ul,.blog-post-content ol { padding-left:1.5rem; margin-bottom:1.25rem }
.blog-post-content li { margin-bottom:.5rem; color:var(--text-muted) }
.blog-post-content a { color:var(--primary) }
.blog-post-content blockquote { border-left:3px solid var(--primary); padding:.75rem 1.25rem; margin:1.5rem 0; background:rgba(0,229,255,.05); border-radius:0 8px 8px 0 }
.blog-post-content img { border-radius:var(--radius); margin:1.5rem 0; max-width:100% }
.blog-post-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin:2rem 0 }
.blog-post-share { margin:2rem 0; padding:1.5rem; background:rgba(255,255,255,.02); border-radius:var(--radius) }
.blog-post-share h4 { margin-bottom:1rem }
.share-buttons { display:flex; gap:.75rem; flex-wrap:wrap }
.author-card { display:flex; align-items:flex-start; gap:1rem; padding:1.5rem; border-radius:var(--radius); background:rgba(255,255,255,.02); margin:2rem 0 }
.author-card img { width:60px; height:60px; border-radius:50%; object-fit:cover }
.author-card h4 { font-size:.95rem; margin-bottom:.25rem }
.author-card p { font-size:.85rem }
.related-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem }

/* ── Support Page ────────────────────────────────────────────── */
.support-page { padding:2rem 0 }
.ticket-list { display:flex; flex-direction:column; gap:1rem }
.ticket-item { padding:1.25rem; transition:var(--transition) }
.ticket-item:hover { border-color:var(--primary) }
.ticket-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem }
.ticket-meta { font-size:.75rem; color:var(--text-muted) }
.ticket-subject { font-weight:600; margin-bottom:.25rem }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination-nav { display:flex; justify-content:center; margin:2.5rem 0 }
.pagination { display:flex; gap:.35rem; list-style:none }
.pagination li a,.pagination li span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; font-size:.875rem; color:var(--text-muted); border:1px solid var(--border); transition:var(--transition) }
.pagination li a:hover { border-color:var(--primary); color:var(--primary) }
.pagination li.active a,.pagination li.active span { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border-color:transparent }

/* ── Install Wizard ──────────────────────────────────────────── */
.install-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem }
.install-card { max-width:640px; width:100%; padding:2.5rem }
.install-steps { display:flex; gap:0; margin-bottom:2rem }
.install-step { flex:1; text-align:center; position:relative }
.install-step::after { content:''; position:absolute; top:15px; right:-50%; width:100%; height:2px; background:var(--border); z-index:-1 }
.install-step:last-child::after { display:none }
.step-dot { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; margin:0 auto .5rem; transition:var(--transition) }
.install-step.active .step-dot { background:var(--primary); border-color:var(--primary); color:var(--bg) }
.install-step.done .step-dot  { background:var(--success); border-color:var(--success); color:var(--bg) }
.install-step span { font-size:.75rem; color:var(--text-muted) }
.check-list { display:flex; flex-direction:column; gap:.6rem; margin:1.25rem 0 }
.check-list-item { display:flex; align-items:center; gap:.75rem; font-size:.875rem; padding:.5rem .75rem; border-radius:6px; background:rgba(255,255,255,.02) }
.check-list-item.pass { color:var(--success) }
.check-list-item.fail { color:var(--danger) }
.check-list-item.warn { color:var(--warning) }

/* ── Admin panel CSS (basic) ─────────────────────────────────── */
.admin-body { background:var(--bg); color:var(--text); font-family:var(--font) }
.admin-navbar { height:56px; background:rgba(11,16,32,.95); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:var(--z-nav) }
.admin-navbar-inner { display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; height:100% }
.admin-brand { display:flex; align-items:center; gap:.75rem }
.admin-brand-link { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--text); font-size:1rem }
.sidebar-toggle-btn { background:none; border:none; color:var(--text); font-size:1.2rem; padding:.25rem }
.admin-navbar-right { display:flex; align-items:center; gap:1rem }
.admin-layout { display:flex; min-height:calc(100vh - 56px) }
.admin-sidebar { width:220px; flex-shrink:0; background:rgba(255,255,255,.02); border-right:1px solid var(--border); padding:1rem .75rem; transition:width .3s }
.admin-sidebar.collapsed { width:60px }
.admin-nav { display:flex; flex-direction:column; gap:.1rem }
.admin-nav-section { margin-bottom:1rem }
.nav-section-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding:.25rem .75rem; display:block }
.admin-nav-link { display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; border-radius:8px; color:var(--text-muted); font-size:.85rem; font-weight:500; transition:var(--transition); white-space:nowrap }
.admin-nav-link:hover { background:rgba(0,229,255,.08); color:var(--primary) }
.admin-nav-link.active { background:rgba(0,229,255,.1); color:var(--primary) }
.nav-badge { background:var(--danger); color:#fff; border-radius:999px; padding:.05rem .4rem; font-size:.7rem; margin-left:auto }
.admin-main { flex:1; padding:1.5rem 2rem; overflow-x:hidden }
.admin-flash { padding:.75rem 1rem; font-size:.875rem; position:fixed; top:60px; right:1rem; z-index:var(--z-toast); border-radius:8px; min-width:280px; display:flex; align-items:center; justify-content:space-between; gap:1rem; box-shadow:var(--shadow); transition:opacity .5s }
.admin-flash.alert-success { background:rgba(0,255,178,.1); border:1px solid rgba(0,255,178,.3); color:var(--success) }
.admin-flash.alert-danger  { background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.3); color:var(--danger) }
.admin-page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem }
.admin-page-header h1 { font-size:1.5rem; display:flex; align-items:center; gap:.6rem }
.admin-stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-bottom:2rem }
.admin-stat { display:flex; align-items:center; gap:1rem; padding:1.25rem }
.admin-stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0 }
.admin-stat-val { display:block; font-size:1.4rem; font-weight:800 }
.admin-stat > div span { font-size:.8rem; color:var(--text-muted) }
.admin-stat > div small { font-size:.7rem; color:var(--text-muted) }
.admin-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.admin-table { width:100%; border-collapse:collapse; font-size:.875rem }
.admin-table th { padding:.6rem .75rem; text-align:left; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02) }
.admin-table td { padding:.65rem .75rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle }
.admin-table tr:hover td { background:rgba(255,255,255,.02) }
.admin-filters { margin-bottom:1rem }
.filter-form { display:flex; gap:.75rem; flex-wrap:wrap }
.action-buttons { display:flex; gap:.35rem; flex-wrap:wrap }

/* ── Media Queries ───────────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr }
  .charts-grid { grid-template-columns:1fr }
  .content-grid { grid-template-columns:1fr }
  .stats-grid-4 { grid-template-columns:1fr 1fr }
  .contact-grid { grid-template-columns:1fr }
  .checkout-grid { grid-template-columns:1fr }
  .blog-layout { grid-template-columns:1fr }
  .blog-post-layout { grid-template-columns:1fr }
  .admin-stats-grid { grid-template-columns:repeat(3,1fr) }
  .story-layout { grid-template-columns:1fr }
}
@media (max-width:768px) {
  /* ── Mobile nav drawer ─────────────────────────────────────── */
  .navbar-nav { display:none }
  .navbar-toggle { display:flex }

  .navbar-nav.nav-open {
    display:flex; flex-direction:column; gap:.25rem;
    position:fixed; top:64px; left:0; right:0;
    background:rgba(10,14,28,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:1rem 1rem 1.5rem; z-index:calc(var(--z-nav) - 1);
    overflow-y:auto; max-height:calc(100vh - 64px);
    box-shadow:0 24px 48px rgba(0,0,0,.5);
  }
  [data-theme="light"] .navbar-nav.nav-open {
    background:rgba(240,244,248,.98);
    box-shadow:0 24px 48px rgba(0,0,0,.12);
  }
  .navbar-nav.nav-open .nav-link { padding:.75rem 1rem; font-size:.95rem }
  .navbar-nav.nav-open .dropdown { position:static }
  .navbar-nav.nav-open .dropdown-menu {
    display:flex !important; flex-direction:column; position:static;
    transform:none; box-shadow:none; border:none;
    background:rgba(255,255,255,.04); border-radius:8px;
    margin:.25rem 0 .25rem .75rem; padding:.25rem .5rem;
  }
  [data-theme="light"] .navbar-nav.nav-open .dropdown-menu { background:rgba(0,0,0,.04) }
  .navbar-nav.nav-open .dropdown-toggle { pointer-events:none }

  /* Hamburger → X animation */
  .navbar-toggle span { transform-origin:center; transition:transform .25s, opacity .2s }
  .navbar-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
  .navbar-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
  .navbar-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

  /* Hide desktop auth buttons — they live inside the mobile drawer instead */
  .nav-auth-desktop { display:none }

  /* Mobile auth row inside the nav drawer */
  .nav-mobile-auth {
    display:flex; gap:.5rem; padding:.75rem .5rem .25rem; margin-top:.25rem;
    border-top:1px solid var(--border); list-style:none;
  }
  .nav-mobile-auth-btn { flex:1; justify-content:center; text-align:center }

  /* Right side: hide text labels on mobile */
  .navbar-right .username { display:none }

  .hero-title { font-size:2rem }
  .footer-grid { grid-template-columns:1fr }
  .profile-hero-inner { flex-direction:column; align-items:center; text-align:center }
  .profile-hero-header { flex-direction:column; text-align:center }
  .profile-actions { justify-content:center }
  .profile-stats-bar { justify-content:center }
  .stats-grid-4 { grid-template-columns:1fr 1fr }
  .dashboard-layout { flex-direction:column }
  .dashboard-sidebar { width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid var(--border) }
  .steps-grid { flex-direction:column }
  .step-arrow { transform:rotate(90deg) }
  .featured-post { grid-template-columns:1fr }
  .featured-post-image { height:220px }
  .form-row-2 { grid-template-columns:1fr }
  .search-tools-grid { grid-template-columns:1fr }
  .referral-stats-grid { grid-template-columns:repeat(2,1fr) }
  .plans-grid { grid-template-columns:1fr }
  .cta-banner { flex-direction:column }
  .admin-sidebar { width:60px }
  .admin-stats-grid { grid-template-columns:repeat(2,1fr) }
  .settings-grid { grid-template-columns:1fr }
  .related-posts-grid { grid-template-columns:1fr }
}
@media (max-width:480px) {
  .section { padding:2.5rem 0 }
  .hero { padding:4rem 0 3rem }
  .container { padding:0 1rem }
  .stats-grid-4 { grid-template-columns:1fr 1fr }
  .hero-stats { gap:1.25rem }
  .referral-stats-grid { grid-template-columns:repeat(2,1fr) }
  .admin-grid-2 { grid-template-columns:1fr }
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2) }

/* ── Selection ───────────────────────────────────────────────── */
::selection { background:rgba(0,229,255,.25); color:var(--text) }

/* ── Ad Placements ───────────────────────────────────────────── */
.ad-footer { padding:.5rem 0 }
.ad-sticky { position:fixed; bottom:0; left:0; right:0; z-index:var(--z-nav); background:var(--card); border-top:1px solid var(--border); padding:.5rem 1rem; display:flex; align-items:center; justify-content:center }
.ad-sticky-close { position:absolute; top:4px; right:8px; background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.profile-card,.feature-card,.blog-card,.plan-card { animation: fadeIn .3s ease both }

/* ── Light Mode Variables ─────────────────────────────────── */
[data-theme="light"] {
  --bg:         #f0f4f8;
  --bg2:        #e8edf5;
  --card:       #ffffff;
  --card2:      #f5f8fc;
  --border:     rgba(0,0,0,.09);
  --border-glow:rgba(0,150,210,.3);
  --text:       #1a202c;
  --text-muted: #5a6a80;
  --shadow:     0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.12);
  --glow:       0 0 15px rgba(0,130,180,.18);
}
[data-theme="light"] body { background:var(--bg); color:var(--text) }
[data-theme="light"] p { color:var(--text-muted) }
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6 { color:#1a202c }
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(0,100,200,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,100,200,.04) 1px, transparent 1px);
}
[data-theme="light"] .glass {
  background:rgba(255,255,255,.88); border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .glass:hover { border-color:rgba(0,150,210,.3) }
[data-theme="light"] .navbar {
  background:rgba(240,244,248,.96); border-bottom:1px solid rgba(0,0,0,.07);
}
[data-theme="light"] .navbar.scrolled { background:rgba(240,244,248,.99) }
[data-theme="light"] .nav-link { color:#334155 }
[data-theme="light"] .nav-link:hover { color:var(--primary) }
[data-theme="light"] .dropdown-menu { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 8px 24px rgba(0,0,0,.1) }
[data-theme="light"] .dropdown-menu a { color:#334155 }
[data-theme="light"] .dropdown-menu a:hover { background:rgba(0,0,0,.04); color:#1a202c }
[data-theme="light"] .btn-ghost { background:rgba(0,0,0,.05); color:#334155; border-color:rgba(0,0,0,.1) }
[data-theme="light"] .btn-ghost:hover { background:rgba(0,0,0,.1); color:#1a202c }
[data-theme="light"] .form-input,[data-theme="light"] .form-control {
  background:#fff; border-color:rgba(0,0,0,.14); color:#1a202c;
}
[data-theme="light"] .form-input:focus,[data-theme="light"] .form-control:focus {
  border-color:var(--primary); background:#fff;
}
[data-theme="light"] .hero { background:linear-gradient(160deg,#ddeeff 0%,#f0f4f8 50%,#e8edf5 100%) }
[data-theme="light"] code { background:rgba(0,0,0,.06); color:#0077aa }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15) }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.25) }
[data-theme="light"] ::selection { background:rgba(0,150,210,.2); color:#1a202c }

/* ── Polished Theme Toggle ────────────────────────────────── */
.theme-toggle {
  width:46px; height:26px; padding:3px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:99px; cursor:pointer; display:flex; align-items:center;
  transition:background .3s, border-color .3s; flex-shrink:0;
}
.tt-thumb {
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; color:#1a202c;
  transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transform:translateX(0); flex-shrink:0;
}
[data-theme="light"] .theme-toggle { background:rgba(0,0,0,.07); border-color:rgba(0,0,0,.12) }
[data-theme="light"] .tt-thumb { transform:translateX(20px); background:#fbbf24; color:#78350f }

/* ── Toast Notifications ─────────────────────────────────── */
#toast-container {
  position:fixed; top:1rem; right:1rem; z-index:var(--z-toast,9900);
  display:flex; flex-direction:column; gap:.5rem;
  pointer-events:none; max-width:370px; width:calc(100vw - 2rem);
}
.toast-item {
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.85rem 1rem; border-radius:14px;
  backdrop-filter:blur(20px); pointer-events:all;
  animation:toastIn .32s cubic-bezier(.4,0,.2,1) both;
  position:relative; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.25); border:1px solid;
}
.toast-item.toast-out { animation:toastOut .32s ease forwards }
.toast-item.toast-success { background:rgba(10,50,30,.94); border-color:rgba(52,211,153,.4) }
.toast-item.toast-error   { background:rgba(60,10,20,.94); border-color:rgba(239,68,68,.4)  }
.toast-item.toast-info    { background:rgba(10,30,60,.94); border-color:rgba(96,165,250,.4)  }
.toast-item.toast-warning { background:rgba(60,40,5,.94);  border-color:rgba(251,191,36,.4)  }
.toast-icon { font-size:1.05rem; flex-shrink:0; margin-top:.1rem }
.toast-item.toast-success .toast-icon { color:#34d399 }
.toast-item.toast-error   .toast-icon { color:#f87171 }
.toast-item.toast-info    .toast-icon { color:#60a5fa }
.toast-item.toast-warning .toast-icon { color:#fbbf24 }
.toast-body { flex:1; font-size:.84rem; line-height:1.45; color:#f0f4f8 }
.toast-close { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.35); font-size:.85rem; padding:0; flex-shrink:0; margin-top:.1rem; transition:color .15s }
.toast-close:hover { color:#fff }
.toast-bar {
  position:absolute; bottom:0; left:0; height:3px; border-radius:0 0 0 14px;
  animation:toastBar var(--dur,4500ms) linear forwards;
}
.toast-item.toast-success .toast-bar { background:#34d399 }
.toast-item.toast-error   .toast-bar { background:#f87171 }
.toast-item.toast-info    .toast-bar { background:#60a5fa }
.toast-item.toast-warning .toast-bar { background:#fbbf24 }
@keyframes toastIn  { from{opacity:0;transform:translateX(110%) scale(.92)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none;max-height:120px;margin-bottom:.5rem} to{opacity:0;transform:translateX(110%);max-height:0;margin:0;padding:0} }
@keyframes toastBar { from{width:100%} to{width:0} }

/* Light-mode toast overrides */
[data-theme="light"] .toast-item.toast-success { background:rgba(220,255,240,.97); border-color:rgba(52,211,153,.45) }
[data-theme="light"] .toast-item.toast-success .toast-body { color:#0d3025 }
[data-theme="light"] .toast-item.toast-error   { background:rgba(255,235,238,.97); border-color:rgba(239,68,68,.4)  }
[data-theme="light"] .toast-item.toast-error   .toast-body { color:#4a1520 }
[data-theme="light"] .toast-item.toast-info    { background:rgba(235,242,255,.97); border-color:rgba(96,165,250,.4)  }
[data-theme="light"] .toast-item.toast-info    .toast-body { color:#1e3a5f }
[data-theme="light"] .toast-item.toast-warning { background:rgba(255,250,230,.97); border-color:rgba(251,191,36,.4)  }
[data-theme="light"] .toast-item.toast-warning .toast-body { color:#4a3200 }
[data-theme="light"] .toast-close { color:rgba(0,0,0,.3) }
[data-theme="light"] .toast-close:hover { color:#1a202c }