/* ============================================================
   SubSeba PHP — Design system (matches React app)
   Primary: hsl(252, 85%, 60%)  — purple gradient theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --background: 240 20% 99%;
  --foreground: 232 25% 12%;
  --card: 0 0% 100%;
  --muted: 245 20% 96%;
  --muted-foreground: 232 12% 50%;
  --border: 240 15% 92%;
  --primary: 252 85% 60%;
  --primary-foreground: 0 0% 100%;

  --gradient-primary: linear-gradient(135deg, hsl(252, 85%, 60%), hsl(280, 85%, 55%));
  --gradient-hero: linear-gradient(135deg, hsl(252, 85%, 60%) 0%, hsl(280, 85%, 55%) 50%, hsl(320, 70%, 55%) 100%);
  --shadow-glow: 0 0 40px -10px hsl(252 85% 60% / 0.25);
  --shadow-card: 0 1px 3px hsl(232 25% 12% / 0.04), 0 8px 24px hsl(232 25% 12% / 0.06);
  --shadow-card-hover: 0 4px 12px hsl(232 25% 12% / 0.06), 0 16px 40px hsl(232 25% 12% / 0.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: hsl(var(--background) / 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; font-family: 'Plus Jakarta Sans', sans-serif; }
.brand-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 12px hsl(252 85% 60% / 0.25);
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-size: 14px; font-weight: 500; color: hsl(var(--foreground) / 0.7); transition: color .2s; }
.nav-links a:hover { color: hsl(var(--primary)); }
.nav-links .btn-ghost { padding: 6px 12px; border-radius: 8px; }
.nav-links .btn-ghost:hover { background: hsl(var(--muted)); }
.nav-links .btn-outline {
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-menu { display: none; padding: 16px 20px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 10px 0; font-size: 14px; color: hsl(var(--foreground) / 0.7); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px;
  border: none; cursor: pointer; transition: all .25s ease;
  font-family: inherit;
}
.btn-gradient {
  background-image: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 14px hsl(252 85% 60% / 0.25);
}
.btn-gradient:hover { box-shadow: var(--shadow-glow); filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: hsl(var(--foreground));
  border: 1px solid hsl(var(--primary) / 0.2);
}
.btn-outline:hover { background: hsl(var(--primary) / 0.05); }
.btn-lg { padding: 14px 26px; font-size: 15px; height: 48px; }
.btn-sm { padding: 8px 14px; font-size: 13px; height: 36px; }
.btn-full { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 96px 0 144px; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, hsl(252 85% 60% / 0.12), transparent);
  pointer-events: none;
}
.hero-blob1, .hero-blob2 {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.hero-blob1 { top: 80px; left: 40px; width: 288px; height: 288px; background: hsl(252 85% 60% / 0.1); animation: pulse 4s ease-in-out infinite; }
.hero-blob2 { bottom: 40px; right: 40px; width: 384px; height: 384px; background: hsl(252 85% 60% / 0.05); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; font-size: 13px; font-weight: 500;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.05);
  border: 1px solid hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
  margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(36px, 6vw, 72px); font-weight: 800;
  line-height: 1.1; margin: 0 0 24px;
}
.gradient-text {
  background-image: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(16px, 2vw, 20px); color: hsl(var(--muted-foreground));
  max-width: 640px; margin: 0 auto 36px; line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Stats ---------- */
.stats { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 56px 0; text-align: center; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-icon {
  width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 12px; background: hsl(var(--primary) / 0.1);
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--primary));
}
.stat-value { font-size: clamp(24px, 3vw, 32px); font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.stat-label { font-size: 14px; color: hsl(var(--muted-foreground)); }

/* ---------- Plans section ---------- */
.section { padding: 96px 0; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin: 0 0 12px; }
.section-header p { color: hsl(var(--muted-foreground)); max-width: 560px; margin: 0 auto; }

.plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: repeat(4, 1fr); } }

.plan-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .3s ease;
}
.plan-card:hover { border-color: hsl(var(--primary) / 0.4); box-shadow: var(--shadow-card-hover); }
.plan-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #fff; border-radius: 999px; background-image: var(--gradient-primary);
}
.plan-thumb {
  aspect-ratio: 16 / 10; width: 100%;
  background: linear-gradient(135deg, hsl(252 85% 60% / 0.1), hsl(252 85% 60% / 0.2));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.plan-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.plan-card:hover .plan-thumb img { transform: scale(1.05); }
.plan-thumb .plan-thumb-icon { color: hsl(var(--primary) / 0.4); }
.plan-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-name { font-weight: 600; font-size: 14px; margin: 0; line-height: 1.3; }
.plan-desc { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price-main { font-weight: 700; font-size: 18px; color: hsl(var(--primary)); }
.plan-price-old { font-size: 12px; text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.plan-duration { font-size: 11px; color: hsl(var(--muted-foreground)); }
.plan-cta { margin-top: auto; padding-top: 4px; }

/* ---------- How it works ---------- */
.howto { background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.howto-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .howto-grid { grid-template-columns: repeat(4, 1fr); } }
.howto-step { text-align: center; }
.howto-num {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 16px; background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: var(--shadow-glow);
}
.howto-step h3 { font-size: 16px; margin: 0 0 8px; font-weight: 600; }
.howto-step p { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 0; line-height: 1.6; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 64px;
  background: hsl(232, 35%, 8%);
  color: hsl(240 10% 85%);
}
.footer-strip { height: 4px; background: linear-gradient(90deg, hsl(252 85% 60%), hsl(280 85% 55%), hsl(320 70% 55%)); }
.footer-inner { padding: 56px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .footer-brand { grid-column: auto; } }
.footer-brand .brand { color: #fff; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; color: hsl(232 15% 55%); line-height: 1.6; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: hsl(232 15% 55%); transition: color .2s; }
.footer-col a:hover { color: hsl(var(--primary)); }
.footer-bottom {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  text-align: center; font-size: 14px; color: hsl(232 15% 45%);
}

/* ---------- Cards + forms (used elsewhere) ---------- */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px; padding: 24px;
  box-shadow: var(--shadow-card);
}
form label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
form input, form textarea, form select {
  width: 100%; padding: 10px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px; font-size: 14px; font-family: inherit;
  background: hsl(var(--card));
}
form input:focus, form textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15); }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: hsl(0 84% 60% / 0.1); color: hsl(0 63% 40%); border: 1px solid hsl(0 84% 60% / 0.2); }
.alert-success { background: hsl(152 76% 36% / 0.1); color: hsl(152 76% 26%); border: 1px solid hsl(152 76% 36% / 0.2); }

table { width: 100%; border-collapse: collapse; background: hsl(var(--card)); border-radius: 10px; overflow: hidden; }
table th, table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; }
table th { background: hsl(var(--muted)); font-weight: 600; text-transform: uppercase; font-size: 11px; color: hsl(var(--muted-foreground)); letter-spacing: 0.05em; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-green { background: hsl(152 76% 36% / 0.15); color: hsl(152 76% 26%); }
.badge-yellow { background: hsl(38 92% 50% / 0.15); color: hsl(38 92% 30%); }
.badge-red { background: hsl(0 84% 60% / 0.15); color: hsl(0 63% 40%); }

.sidebar-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px); }
.sidebar { background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); padding: 24px 16px; }
.sidebar a { display: block; padding: 10px 12px; border-radius: 8px; color: hsl(var(--foreground) / 0.7); margin-bottom: 4px; font-weight: 500; font-size: 14px; }
.sidebar a:hover, .sidebar a.active { background: hsl(var(--primary) / 0.08); color: hsl(var(--primary)); }
.main { padding: 32px; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 460px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-card); }
.auth-brand { text-align: center; margin-bottom: 20px; }
.brand-logo-lg { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 12px; font-size: 22px; box-shadow: var(--shadow-glow); }
.auth-brand h1 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.auth-brand p { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 0; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: hsl(var(--muted)); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-tabs a { text-align: center; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); transition: all .2s; }
.auth-tabs a.active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.auth-form label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: 13px; }
.auth-form input { width: 100%; padding: 11px 13px; border: 1px solid hsl(var(--border)); border-radius: 10px; font-size: 14px; background: hsl(var(--card)); }
.auth-form input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15); }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.muted { color: hsl(var(--muted-foreground)); font-weight: 400; }

/* Buttons — extras */
.btn-block, .btn-full { width: 100%; display: block; text-align: center; }
.btn-lg { padding: 13px 20px; font-size: 15px; }
.btn-outline { border: 1px solid hsl(var(--border)); background: transparent; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.btn-outline:hover { background: hsl(var(--muted)); }

/* ---------- Plan detail ---------- */
.breadcrumb { display: inline-block; margin: 32px 0 16px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.breadcrumb:hover { color: hsl(var(--primary)); }
.plan-detail-wrap { max-width: 1080px; padding-bottom: 64px; }
.plan-detail-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .plan-detail-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.plan-detail-media { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, hsl(252 85% 60% / 0.1), hsl(252 85% 60% / 0.2)); display: flex; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); }
.plan-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.plan-detail-placeholder { font-size: 72px; opacity: 0.5; }
.plan-badge-lg { top: 16px; right: 16px; padding: 6px 14px; font-size: 12px; }
.plan-detail-info h1 { font-size: 30px; font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.plan-detail-desc { font-size: 15px; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0 0 20px; }
.plan-detail-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.plan-detail-price .new { font-size: 36px; font-weight: 800; color: hsl(var(--primary)); line-height: 1; }
.plan-detail-price .old { font-size: 18px; color: hsl(var(--muted-foreground)); text-decoration: line-through; }
.plan-detail-price .save { font-size: 12px; font-weight: 700; color: hsl(152 76% 26%); background: hsl(152 76% 36% / 0.15); padding: 4px 10px; border-radius: 999px; }
.plan-duration-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: hsl(var(--muted)); border-radius: 999px; font-size: 13px; color: hsl(var(--foreground) / 0.8); font-weight: 500; margin-bottom: 24px; }
.plan-section { margin-top: 24px; }
.plan-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.included-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: hsl(var(--muted) / 0.5); border-radius: 10px; font-size: 13px; }
.tool-chip img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.tool-chip-dot { color: hsl(var(--primary)); font-weight: 700; }
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.feature-list li { font-size: 14px; color: hsl(var(--foreground) / 0.85); }
.plan-separator { height: 1px; background: hsl(var(--border)); margin: 28px 0; }

/* ---------- Checkout page ---------- */
.checkout-wrap { max-width: 1080px; padding-bottom: 64px; }
.checkout-title { font-size: 28px; font-weight: 700; margin: 8px 0 6px; }
.checkout-sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 0 0 24px; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.section-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.section-sub { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0 0 8px; }
.section-sub a { color: hsl(var(--primary)); font-weight: 600; }
.divider { height: 1px; background: hsl(var(--border)); margin: 20px 0; }

.user-chip { display: flex; align-items: center; gap: 12px; padding: 12px; background: hsl(var(--muted) / 0.5); border-radius: 10px; margin-bottom: 20px; }
.user-chip-avatar { width: 40px; height: 40px; border-radius: 50%; background-image: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.user-chip-name { font-weight: 600; font-size: 14px; }
.user-chip-email { font-size: 12px; color: hsl(var(--muted-foreground)); }

.method-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 6px; }
.method-opt { position: relative; }
.method-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.method-label { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 2px solid hsl(var(--border)); border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s; }
.method-opt input:checked + .method-label { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); color: hsl(var(--primary)); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-pink { background: #e2136e; }
.dot-orange { background: #f47b20; }
.dot-purple { background: #8a2be2; }

.pay-instructions { background: hsl(var(--muted) / 0.5); border: 1px dashed hsl(var(--border)); border-radius: 12px; padding: 14px 16px; margin: 14px 0 4px; }
.pay-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 0; flex-wrap: wrap; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
.copy-btn { padding: 3px 10px; font-size: 11px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 6px; cursor: pointer; font-weight: 600; }
.copy-btn:hover { background: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.pay-note { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 10px 0 0; }

.order-summary { position: sticky; top: 20px; }
.order-summary h3 { margin: 0 0 16px; font-size: 16px; }
.summary-plan { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 14px; }
.summary-plan img, .summary-plan-ph { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.summary-plan-name { font-weight: 600; font-size: 14px; }
.summary-plan-dur { font-size: 12px; color: hsl(var(--muted-foreground)); }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: hsl(var(--foreground) / 0.85); }
.summary-row.discount { color: hsl(152 76% 26%); }
.summary-total { display: flex; justify-content: space-between; padding: 12px 0 6px; border-top: 1px solid hsl(var(--border)); margin-top: 6px; font-weight: 700; font-size: 18px; }
.summary-total span:last-child { color: hsl(var(--primary)); }
.summary-note { margin-top: 16px; padding: 12px; background: hsl(var(--primary) / 0.06); border-radius: 10px; font-size: 13px; }
.summary-note strong { display: block; margin-bottom: 6px; color: hsl(var(--primary)); }
.summary-note ol { margin: 0; padding-left: 18px; color: hsl(var(--muted-foreground)); line-height: 1.7; }

/* ---------- Thank you ---------- */
.thankyou-wrap { max-width: 640px; padding: 64px 20px; }
.thankyou-card { text-align: center; }
.thankyou-icon { width: 72px; height: 72px; border-radius: 50%; background: hsl(152 76% 36% / 0.15); color: hsl(152 76% 26%); font-size: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: 700; }
.thankyou-card h1 { font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.thankyou-card .lead { color: hsl(var(--muted-foreground)); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.thankyou-details { display: flex; flex-direction: column; gap: 8px; background: hsl(var(--muted) / 0.5); border-radius: 12px; padding: 16px; margin-bottom: 20px; text-align: left; }
.thankyou-details > div { display: flex; justify-content: space-between; font-size: 14px; }
.thankyou-details span { color: hsl(var(--muted-foreground)); }
.small { font-size: 13px; }
.thankyou-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* ============================================================
   Admin Panel — dark sidebar + light content (v0.3)
   ============================================================ */
.admin-wrap { display: flex; min-height: 100vh; background: hsl(var(--muted) / 0.4); }
.admin-sidebar {
  width: 240px; flex-shrink: 0;
  background: hsl(222, 47%, 11%);
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width .2s ease;
}
.admin-wrap.collapsed .admin-sidebar { width: 64px; }
.admin-wrap.collapsed .admin-nav-text,
.admin-wrap.collapsed .admin-brand-name,
.admin-wrap.collapsed .admin-menu-label { display: none; }
.admin-wrap.collapsed .admin-nav-item { justify-content: center; padding: 10px; }

.admin-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-brand-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.admin-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.admin-menu-label { padding: 16px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 20px; flex: 1; }
.admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  color: rgba(255,255,255,0.7); font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}
.admin-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-item.active { background: hsl(var(--primary)); color: #fff; font-weight: 600; }
.admin-nav-item.active:hover { background: hsl(var(--primary)); }
.admin-nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-nav-text { flex: 1; }
.admin-nav-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.admin-nav-sep { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 8px; }

.admin-main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
.admin-toggle { background: none; border: none; padding: 6px; border-radius: 6px; cursor: pointer; color: hsl(var(--foreground)); display: flex; }
.admin-toggle:hover { background: hsl(var(--muted)); }
.admin-topbar-title { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.admin-topbar-spacer { flex: 1; }
.admin-topbar-link { font-size: 13px; color: hsl(var(--primary)); font-weight: 500; }
.admin-main { flex: 1; padding: 24px; min-width: 0; }

@media (max-width: 900px) {
  .admin-sidebar { width: 64px; }
  .admin-nav-text, .admin-brand-name, .admin-menu-label { display: none; }
  .admin-nav-item { justify-content: center; padding: 10px; }
  .admin-wrap.collapsed .admin-sidebar { width: 240px; }
  .admin-wrap.collapsed .admin-nav-text,
  .admin-wrap.collapsed .admin-brand-name,
  .admin-wrap.collapsed .admin-menu-label { display: block; }
  .admin-wrap.collapsed .admin-nav-item { justify-content: flex-start; padding: 8px 12px; }
}

/* ---- Dashboard cards ---- */
.dash-alert { display: flex; align-items: center; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; }
.dash-alert:hover { background: #dbeafe; }
.dash-alert-icon { font-size: 16px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-col { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.dash-card-head { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); }
.dash-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dash-card-body { padding: 16px; }
.dash-card-body h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.4); border-bottom: 1px solid hsl(var(--border)); }
.dash-table td { padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td.empty, .empty.pad { padding: 24px; text-align: center; color: hsl(var(--muted-foreground)); }

.u-name { font-weight: 500; font-size: 13px; }
.u-email { font-size: 12px; color: hsl(var(--muted-foreground)); }
.u-time { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.u-trx { font-size: 11px; color: hsl(var(--primary)); margin-top: 2px; }
.muted { color: hsl(var(--muted-foreground)); }
.strong { font-weight: 600; }
.small { font-size: 12px; font-weight: 400; }
.row-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.link { color: hsl(var(--primary)); font-size: 13px; font-weight: 500; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: lowercase; color: #fff; }
.pill-active { background: #22c55e; }
.pill-expired { background: #ef4444; }
.pill-pending { background: #eab308; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; border: 1px solid; }
.tag-new { color: #16a34a; border-color: #16a34a; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; font-size: 13px; }
.stat-row { display: flex; justify-content: space-between; }
.stat-val { font-weight: 600; }
.stat-val.primary { color: hsl(var(--primary)); }

.activity-list { max-height: 300px; overflow-y: auto; }
.activity-row { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); font-size: 13px; }
.activity-row:last-child { border-bottom: none; }
.activity-pay { background: #f0fdf4; border-left: 3px solid #22c55e; }

.bar-chart { display: flex; align-items: flex-end; gap: 16px; height: 220px; padding: 10px 4px 0; border-bottom: 1px solid hsl(var(--border)); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-fill-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill { width: 60%; background: var(--gradient-primary); border-radius: 6px 6px 0 0; position: relative; min-height: 4px; transition: height .4s ease; }
.bar-num { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); }
.bar-label { font-size: 11px; color: hsl(var(--muted-foreground)); text-align: center; }

/* ---------- Admin: page head, filters, tabs, modal ---------- */
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-title { font-size: 28px; margin: 0; font-weight: 800; }
.page-sub { color: hsl(var(--muted-foreground)); margin: 4px 0 0; font-size: 14px; }
.back-link { color: hsl(var(--muted-foreground)); font-size: 13px; }
.back-link:hover { color: hsl(var(--primary)); }

.filter-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:260px; display:flex; }
.search-input { flex:1; padding:9px 14px; border:1px solid hsl(var(--border)); border-radius:8px; font-size:14px; background:#fff; }
.btn-icon { padding:0 12px; border:1px solid hsl(var(--border)); border-left:0; border-radius:0 8px 8px 0; background:#fff; cursor:pointer; }
.filter-tabs { display:flex; gap:6px; background: hsl(var(--muted)); padding:4px; border-radius:10px; }
.filter-tab { padding:7px 14px; border-radius:7px; font-size:13px; color: hsl(var(--muted-foreground)); font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.filter-tab.active { background:#fff; color: hsl(var(--foreground)); box-shadow: var(--shadow-card); }
.filter-count { background: hsl(var(--muted)); padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; }
.filter-tab.active .filter-count { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }

.btn-mini { display:inline-block; padding:5px 10px; border-radius:6px; font-size:12px; font-weight:600; background: hsl(var(--muted)); color: hsl(var(--foreground)); border:0; cursor:pointer; margin-left:4px; }
.btn-mini:hover { background: hsl(var(--muted) / 0.7); }
.btn-mini-green { background: hsl(152 76% 36% / 0.15); color: hsl(152 76% 26%); }
.btn-mini-yellow { background: hsl(38 92% 50% / 0.15); color: hsl(38 92% 30%); }
.btn-mini-red { background: hsl(0 84% 60% / 0.15); color: hsl(0 63% 40%); }

.modal { display:none; position:fixed; inset:0; z-index:200; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background: rgba(15,15,30,0.55); }
.modal-card { position:relative; background:#fff; border-radius:14px; box-shadow: var(--shadow-card-hover); width: min(480px, 92vw); max-height:90vh; overflow:auto; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid hsl(var(--border)); }
.modal-head h3 { margin:0; font-size:18px; }
.modal-close { background:transparent; border:0; font-size:22px; cursor:pointer; color: hsl(var(--muted-foreground)); }
.modal-body { padding:22px; display:flex; flex-direction:column; gap:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; }
.field input, .field select, .input { padding:9px 12px; border:1px solid hsl(var(--border)); border-radius:8px; font-size:14px; background:#fff; font-family:inherit; }
.field input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.stat-cards-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:20px; }
.stat-card { background:#fff; border:1px solid hsl(var(--border)); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.stat-label { font-size:12px; color: hsl(var(--muted-foreground)); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.stat-num { font-size:24px; font-weight:800; }
@media (max-width: 720px) { .stat-cards-grid { grid-template-columns: repeat(2, 1fr); } }

.tab-bar { display:flex; gap:2px; border-bottom:1px solid hsl(var(--border)); margin-bottom:20px; overflow-x:auto; }
.tab { padding:10px 18px; font-size:14px; font-weight:600; color: hsl(var(--muted-foreground)); border-bottom:2px solid transparent; white-space:nowrap; }
.tab.active { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.tab:hover { color: hsl(var(--foreground)); }

.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.stack { display:flex; flex-direction:column; gap:14px; }
.pad { padding:20px; }
.dash-card.pad h3 { margin: 0 0 14px; font-size:16px; }
.row-inline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mono { font-family: 'JetBrains Mono', monospace; }

details.inline-edit { display:inline-block; }
details.inline-edit summary { list-style:none; cursor:pointer; }
details.inline-edit summary::-webkit-details-marker { display:none; }

/* ---------- Admin: alerts, product/plan grids, picker ---------- */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 500; border: 1px solid; }
.alert-success { background: hsl(152 76% 96%); color: hsl(152 76% 22%); border-color: hsl(152 76% 80%); }
.alert-error { background: hsl(0 84% 96%); color: hsl(0 63% 35%); border-color: hsl(0 84% 85%); }

.hint { color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 400; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.field textarea { padding: 9px 12px; border: 1px solid hsl(var(--border)); border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; resize: vertical; }
.field textarea.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.field.checkbox, .checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 10px 12px; background: hsl(var(--muted)); border-radius: 8px; }
.checkbox input[type=checkbox] { width: 16px; height: 16px; }

.btn.btn-ghost { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.btn.btn-ghost:hover { background: hsl(var(--muted)); }

.modal-lg { width: min(760px, 94vw); }

/* Product cards */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.product-card { background: #fff; border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s; }
.product-card:hover { box-shadow: var(--shadow-card-hover); }
.product-card-head { display: flex; align-items: flex-start; gap: 12px; }
.product-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--gradient-primary); color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.product-icon img { width: 100%; height: 100%; object-fit: cover; }
.product-name { margin: 0; font-size: 15px; font-weight: 700; }
.product-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.chip { display: inline-block; padding: 2px 8px; background: hsl(var(--muted)); border-radius: 6px; font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.chip-mono { font-family: 'JetBrains Mono', monospace; }
.product-desc { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.product-stats, .plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; background: hsl(var(--muted) / 0.5); border-radius: 8px; }
.product-stats > div, .plan-stats > div { display: flex; flex-direction: column; gap: 2px; }
.pl { font-size: 10px; color: hsl(var(--muted-foreground)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pv { font-size: 13px; font-weight: 700; }
.pv.mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.product-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 4px; }
.status-pill { padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.pill-green { background: hsl(152 76% 90%); color: hsl(152 76% 24%); }
.pill-gray { background: hsl(220 14% 92%); color: hsl(220 9% 40%); }

/* Plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.plan-card { position: relative; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s, transform .15s; }
.plan-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.plan-badge { position: absolute; top: -10px; right: 16px; padding: 4px 12px; background: var(--gradient-primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; }
.plan-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.plan-name { margin: 0; font-size: 18px; font-weight: 800; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price-main { font-size: 30px; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.plan-price-per { font-size: 13px; color: hsl(var(--muted-foreground)); }
.plan-price-old { display: flex; align-items: center; gap: 8px; font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: -6px; }
.save-pill { background: hsl(152 76% 90%); color: hsl(152 76% 24%); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.plan-desc { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-features li { font-size: 13px; color: hsl(var(--foreground)); }
.plan-features li.more { color: hsl(var(--primary)); font-weight: 600; }

/* Product picker (in plan modal) */
.product-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--muted) / 0.3); }
.picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: border-color .1s; }
.picker-item:hover { border-color: hsl(var(--border)); }
.picker-item:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
.picker-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.picker-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-cat { font-size: 11px; color: hsl(var(--muted-foreground)); }

/* ========== USER DASHBOARD (Part 7) ========== */
.user-dash .admin-brand-logo { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7)); }
.pill { display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; }
.pill-primary { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }

.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-top:8px; }
.stat-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 18px 20px; }
.stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.stat-value { font-size: 28px; font-weight: 800; margin-top: 6px; color: hsl(var(--foreground)); }
.stat-unit { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }

.tool-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.tool-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 18px; display:flex; flex-direction:column; gap:12px; transition: all .2s; }
.tool-card:hover { border-color: hsl(var(--primary) / 0.4); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.tool-card-head { display:flex; gap:12px; align-items:center; }
.tool-icon { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.tool-icon-fallback { display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7)); color:#fff; font-weight:700; font-size:18px; }
.tool-name { font-weight: 700; font-size: 15px; }
.tool-cat { font-size: 12px; }
.tool-expiry { font-size: 13px; padding: 6px 10px; background: hsl(var(--muted)); border-radius: 8px; font-weight: 600; }
.tool-expiry.urgent { background: hsl(0 84% 60% / 0.12); color: hsl(0 84% 40%); }

.empty-card { text-align:center; padding: 48px 24px; }
.empty-card h3 { margin: 12px 0 8px; }

.plan-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plan-card { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 24px; display:flex; flex-direction:column; gap:10px; }
.plan-card-featured { border-color: hsl(var(--primary)); box-shadow: 0 8px 30px hsl(var(--primary) / 0.12); }
.plan-badge { position:absolute; top:-10px; right:20px; padding: 4px 12px; background: hsl(var(--primary)); color:#fff; font-size: 11px; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-price-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:8px; }
.plan-price { font-size: 30px; font-weight: 800; color: hsl(var(--primary)); }
.plan-price-old { text-decoration: line-through; color: hsl(var(--muted-foreground)); font-size: 14px; }
.plan-save { background: hsl(152 76% 36% / 0.15); color: hsl(152 76% 26%); padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.plan-duration { font-size: 13px; color: hsl(var(--muted-foreground)); }
.plan-desc { font-size: 13px; }
.plan-features { list-style:none; padding:0; margin: 8px 0; font-size: 13px; display:flex; flex-direction:column; gap:6px; color: hsl(var(--foreground) / 0.8); }

.tab-row { display:flex; gap:6px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 16px; overflow-x:auto; }
.tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: hsl(var(--foreground)); }
.tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
.tab-count { display:inline-block; padding: 1px 8px; background: hsl(var(--muted)); border-radius: 999px; font-size: 11px; margin-left: 4px; }

.thread { display:flex; flex-direction:column; gap:12px; margin-top: 8px; }
.msg { border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 14px 16px; background: hsl(var(--card)); }
.msg-admin { background: hsl(var(--primary) / 0.05); border-color: hsl(var(--primary) / 0.25); }
.msg-head { display:flex; gap:10px; align-items:center; font-size: 13px; margin-bottom: 6px; }
.msg-body { font-size: 14px; line-height: 1.6; color: hsl(var(--foreground) / 0.9); }

.info-row { display:flex; justify-content:space-between; padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; }
.info-row:last-of-type { border-bottom: none; }

.ext-card { border: 1px solid hsl(var(--primary) / 0.25); background: linear-gradient(135deg, hsl(var(--primary) / 0.04), transparent); }
.ext-icon { width:60px; height:60px; background: hsl(var(--primary) / 0.12); border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 32px; }
.steps { padding-left: 20px; margin: 0; }
.steps li { padding: 6px 0; font-size: 14px; line-height: 1.5; color: hsl(var(--foreground) / 0.85); }
details { padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
details:last-child { border-bottom: none; }
details summary { cursor:pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
details p { margin: 6px 0 0; font-size: 13px; }

.badge-success { background: hsl(152 76% 36% / 0.15); color: hsl(152 76% 26%); }
.badge-warning { background: hsl(38 92% 50% / 0.15); color: hsl(38 92% 30%); }
.badge-danger  { background: hsl(0 84% 60% / 0.15); color: hsl(0 63% 40%); }
.badge-muted   { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }