/* ============================================================
   Life Coaching Academy — app.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f5f3ee;
  --card:     #ffffff;
  --dark:     #1a1a1a;
  --text:     #1a1a1a;
  --muted:    #7a7a72;
  --accent:   #f5c842;
  --border:   #e2e0d8;
  --danger:   #e05a3a;
  --success:  #2d7a4f;
  --warning:  #c47f00;
  --info:     #1a6eb5;
  --radius:   14px;
  --sidebar:  64px;
  --admin-sidebar: 230px;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3 { font-family: 'DM Serif Display', serif; font-weight: 400; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
a  { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout helpers ─────────────────────────────────────────── */
.page        { max-width: 1060px; margin: 0 auto; padding: 32px 24px; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.mb-16       { margin-bottom: 16px; }
.mb-24       { margin-bottom: 24px; }
.text-muted  { color: var(--muted); }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11px; }
.text-center { text-align: center; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  padding: 20px;
}
.card-dark {
  background: var(--dark);
  border-radius: var(--radius);
  padding: 20px;
}
.card-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.card-sub   { font-size: 12px; color: var(--muted); }

.form-group label, .lbl {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.form-control, .input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.form-control:hover, .input:hover {
  border-color: #aaa;
}
.form-control:focus, .input:focus { 
  border-color: var(--dark); 
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26,26,26,0.05), 0 1px 2px rgba(0,0,0,0.05);
}
.form-control.is-invalid { border-color: var(--danger); }
textarea.form-control, textarea.input { resize: vertical; min-height: 90px; }
select.form-control, select.input    { cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity .2s, transform .1s;
  text-decoration: none;
}
.btn:hover           { opacity: .88; text-decoration: none; }
.btn:active          { transform: scale(.98); }
.btn-dark            { background: var(--dark); color: #fff; }
.btn-accent          { background: var(--accent); color: var(--dark); }
.btn-outline         { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover   { border-color: #999; }
.btn-danger          { background: #fef2f0; color: var(--danger); border: 1px solid #f9c8bf; }
.btn-success         { background: #f0faf4; color: var(--success); border: 1px solid #b8e8ca; }
.btn-sm              { padding: 6px 14px; font-size: 12px; }
.btn-full            { width: 100%; }
.btn-primary-full {
  width: 100%; padding: 14px;
  background: var(--dark); color: #fff;
  border: none; border-radius: 12px;
  font-family: 'DM Serif Display', serif;
  font-size: 17px; cursor: pointer;
  transition: opacity .2s;
}
.btn-primary-full:hover { opacity: .88; }
.btn-primary         { background: var(--dark); color: #fff; }

/* ── Flash notifications ─────────────────────────────────────── */
.flash {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); animation: slideInFlash .3s ease;
  max-width: 360px;
}
@keyframes slideInFlash { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.flash-success { background: #f0faf4; color: var(--success); border: 1px solid #b8e8ca; }
.flash-error   { background: #fef2f0; color: var(--danger);  border: 1px solid #f9c8bf; }
.flash-warning { background: #fffbef; color: var(--warning); border: 1px solid #f5e4a0; }
.flash-info    { background: #edf4fd; color: var(--info);    border: 1px solid #b8d4f5; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.badge-pending   { background: #fffbef; color: #7a6500; border: 1px solid #f5e4a0; }
.badge-approved  { background: #f0faf4; color: var(--success); border: 1px solid #b8e8ca; }
.badge-rejected  { background: #fef2f0; color: var(--danger);  border: 1px solid #f9c8bf; }
.badge-active    { background: #f0faf4; color: var(--success); border: 1px solid #b8e8ca; }
.badge-inactive  { background: #fef2f0; color: var(--danger);  border: 1px solid #f9c8bf; }
.badge-dark      { background: var(--dark); color: #fff; }
.badge-accent    { background: var(--accent); color: var(--dark); }
.badge-count {
  background: var(--danger); color: #fff;
  font-size: 10px; padding: 2px 6px;
  border-radius: 10px; min-width: 18px; text-align: center;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; }
.alert-error   { background: #fef2f0; border: 1px solid #f9c8bf; color: var(--danger); }
.alert-success { background: #f0faf4; border: 1px solid #b8e8ca; color: var(--success); }
.alert-warning { background: #fffbef; border: 1px solid #f5e4a0; color: var(--warning); }
.alert-info    { background: #edf4fd; border: 1px solid #b8d4f5; color: var(--info); }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border); font-weight: 500;
}
td { padding: 12px 12px; font-size: 13px; border-bottom: 0.5px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafaf8; }

/* ── Panels ──────────────────────────────────────────────────── */
.panel { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.panel-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-hdr h2 { font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif; }

/* ── User sidebar ────────────────────────────────────────────── */
.user-layout   { display: flex; min-height: 100vh; }
.user-sidebar  {
  width: var(--sidebar); background: var(--dark);
  display: flex; flex-direction: column;
  align-items: center; padding: 20px 0;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
}
.user-main { margin-left: var(--sidebar); flex: 1; padding: 24px 28px; }
.sidebar-logo  {
  width: 36px; height: 36px; background: var(--accent);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 20px; flex-shrink: 0;
}
.sidebar-logo svg { width: 18px; height: 18px; fill: var(--dark); }
.nav-btn {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; background: transparent;
  color: #666; margin-bottom: 4px; transition: all .2s;
  position: relative; text-decoration: none;
}
.nav-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn:hover { background: rgba(255,255,255,.08); color: #aaa; text-decoration: none; }
.nav-btn.active { background: rgba(245,200,66,.15); color: var(--accent); }
.nav-btn .tip {
  position: absolute; left: 54px;
  background: #333; color: #fff;
  font-size: 11px; padding: 4px 10px;
  border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 200;
}
.nav-btn:hover .tip { opacity: 1; }
.nav-spacer  { flex: 1; }
.user-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: #c9a87c; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 500; color: #fff;
  cursor: pointer; flex-shrink: 0;
}

/* ── Admin sidebar ───────────────────────────────────────────── */
.admin-layout   { display: flex; min-height: 100vh; }
.admin-sidebar  {
  width: var(--admin-sidebar); background: var(--dark);
  display: flex; flex-direction: column;
  padding: 24px 16px;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
}
.admin-main { margin-left: var(--admin-sidebar); flex: 1; padding: 28px 32px; }
.admin-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 0 8px; }
.admin-brand-icon { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.admin-brand-icon svg { width: 16px; height: 16px; fill: var(--dark); }
.admin-brand-name { font-family: 'DM Serif Display', serif; color: #fff; font-size: 15px; }
.admin-nav-section { font-size: 10px; color: #555; letter-spacing: 1px; text-transform: uppercase; padding: 0 8px; margin: 12px 0 6px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: #888; font-size: 13px; cursor: pointer;
  margin-bottom: 2px; border: none; background: transparent;
  width: 100%; text-align: left;
  transition: all .2s; text-decoration: none;
}
.admin-nav-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.admin-nav-item:hover  { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.admin-nav-item.active { background: rgba(245,200,66,.15); color: var(--accent); }
.admin-nav-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-user-info { display: flex; align-items: center; gap: 10px; padding: 8px; }
.admin-user-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--dark); flex-shrink: 0; }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.topbar h1 { font-size: 24px; }
.topbar p  { font-size: 13px; color: var(--muted); margin-top: 2px; }
.topbar-right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 9px 14px;
  font-size: 13px; color: var(--muted); min-width: 200px;
}
.search-box svg { width: 14px; height: 14px; fill: var(--muted); flex-shrink: 0; }

/* ── Stats grid ──────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card  { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 500; }
.stat-change { font-size: 12px; margin-top: 4px; }
.stat-change.up   { color: var(--success); }
.stat-change.warn { color: var(--warning); }
.stat-change.down { color: var(--danger);  }

/* ── Subscription banner ─────────────────────────────────────── */
.sub-banner {
  background: var(--dark); border-radius: var(--radius);
  padding: 16px 22px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 20px;
}
.sub-banner p       { color: #aaa; font-size: 13px; }
.sub-banner strong  { color: #fff; }
.sub-days {
  background: rgba(245,200,66,.15); color: var(--accent);
  font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 20px;
}

/* ── Content item ────────────────────────────────────────────── */
.content-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 0.5px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.content-item:last-child { border-bottom: none; }
.content-item:hover { background: #fafaf8; margin: 0 -20px; padding: 12px 20px; }
.ct-icon {
  width: 44px; height: 36px; border-radius: 8px;
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 18px;
}
.ct-info .ct-name { font-size: 13px; font-weight: 500; }
.ct-info .ct-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ct-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.prog-pill  { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #f5f3ee; color: var(--muted); }
.prog-started   { background: #fff8e6; color: #7a6500; }
.prog-completed { background: #f0faf4; color: var(--success); }

/* ── Habit item ──────────────────────────────────────────────── */
.habit-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.habit-item:last-child { border-bottom: none; }
.hab-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.hab-info .hab-name  { font-size: 13px; font-weight: 500; }
.hab-info .hab-coach { font-size: 11px; color: var(--muted); }
.hab-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.sess-txt { font-size: 10px; color: var(--muted); }
.dots-row { display: flex; gap: 2px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-on  { background: var(--danger); }
.dot-off { background: var(--border); }

/* ── Calendar ────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.ch { font-size: 9px; color: #666; text-align: center; padding: 2px; }
.cd { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #666; cursor: pointer; margin: auto; }
.cd.today { border: 1.5px solid var(--accent); color: #fff; }
.cd.done  { background: var(--accent); color: var(--dark); font-weight: 500; }
.cd.sched { background: #2e2e2e; color: #888; }
.cd.cur   { color: #aaa; }

/* ── Player ──────────────────────────────────────────────────── */
.player-wrap { background: var(--dark); border-radius: 14px; padding: 20px; margin: 16px 0; }
.player-screen { background: #111; border-radius: 10px; height: 180px; display: flex; align-items: center; justify-content: center; font-size: 52px; margin-bottom: 16px; }
.player-controls { display: flex; align-items: center; gap: 12px; }
.p-bar { flex: 1; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; cursor: pointer; position: relative; }
.p-fill { height: 100%; background: var(--accent); border-radius: 3px; pointer-events: none; }
.p-time { font-size: 12px; color: #888; white-space: nowrap; }
.p-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-btn svg { width: 13px; height: 13px; stroke: #aaa; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-btn.play-main { background: var(--accent); border-color: var(--accent); }
.p-btn.play-main svg { stroke: var(--dark); width: 14px; height: 14px; }

/* ── Payment page ────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 32px; }
.plan-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 28px 24px;
  cursor: pointer; transition: all .2s; position: relative;
}
.plan-card:hover   { border-color: #aaa; transform: translateY(-2px); }
.plan-card.selected { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); }
.plan-card.popular  { border-color: var(--accent); }
.plan-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--dark);
  font-size: 11px; font-weight: 500; padding: 4px 14px;
  border-radius: 20px; white-space: nowrap;
}
.plan-price { font-family: 'DM Serif Display', serif; font-size: 34px; line-height: 1; }
.plan-price sup { font-size: 15px; font-family: 'DM Sans', sans-serif; }
.plan-price span { font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--muted); }
.plan-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); margin-left: auto; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.plan-card.selected .plan-check { background: var(--dark); border-color: var(--dark); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 14px 0 16px; }
.plan-features li { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.plan-features li::before {
  content: ''; flex-shrink: 0; width: 15px; height: 15px;
  background-color: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Inline SVG icon defaults */
.icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.pay-methods-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 24px; }
.pay-method {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 16px 10px;
  cursor: pointer; text-align: center; transition: all .2s;
}
.pay-method:hover     { border-color: #aaa; }
.pay-method.selected  { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); }
.pay-method-logo { width: 38px; height: 38px; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.pay-method-name { font-size: 12px; font-weight: 500; }
.pay-method-sub  { font-size: 10px; color: var(--muted); margin-top: 2px; }
.pay-instruction {
  background: #fffbef; border: 1px solid #f5e4a0;
  border-radius: 12px; padding: 16px; margin-bottom: 18px;
}
.pay-instruction p { font-size: 13px; color: #7a6500; line-height: 1.7; }
.pay-number-box {
  background: var(--dark); color: #fff;
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; margin: 8px 0;
}
.pay-number-box span { font-size: 18px; font-weight: 500; letter-spacing: 1px; }
.pay-number-box button { background: rgba(255,255,255,.15); border: none; color: #fff; padding: 5px 12px; border-radius: 7px; font-size: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.pay-number-box button:hover { background: rgba(255,255,255,.25); }
.pay-summary {
  background: var(--dark); color: #fff;
  border-radius: 20px; padding: 22px; margin-bottom: 18px;
}
.pay-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: #aaa; margin-bottom: 8px; }
.pay-sum-row strong { color: #fff; }
.pay-sum-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 500; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 4px; }
.pay-sum-total .price { color: var(--accent); }
.secure-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.file-dropzone {
  border: 1.5px dashed var(--border); border-radius: 12px;
  padding: 24px; text-align: center; cursor: pointer; transition: border-color .2s;
}
.file-dropzone:hover { border-color: #aaa; }

/* ── Auth page ───────────────────────────────────────────────── */
.auth-wrapper { display: grid; grid-template-columns: 1fr 1fr; max-width: 960px; width: 100%; min-height: 600px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.1); }
.auth-left { background: var(--dark); padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-left::before { content:''; position:absolute; width:300px;height:300px;border-radius:50%;background:rgba(245,200,66,.07);top:-80px;right:-80px; }
.auth-left::after  { content:''; position:absolute; width:180px;height:180px;border-radius:50%;background:rgba(245,200,66,.04);bottom:40px;left:-50px; }
.auth-right { background: var(--card); padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.auth-brand { display:flex;align-items:center;gap:12px;z-index:1; }
.auth-brand-icon { width:38px;height:38px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center; }
.auth-brand-icon svg { width:19px;height:19px;fill:var(--dark); }
.auth-brand-name { font-family:'DM Serif Display',serif;color:#fff;font-size:18px; }
.auth-hero { z-index:1; }
.auth-hero h2 { font-family:'DM Serif Display',serif;color:#fff;font-size:32px;line-height:1.25;margin-bottom:14px; }
.auth-hero h2 em { color:var(--accent);font-style:normal; }
.auth-hero p  { color:#777;font-size:14px;line-height:1.7; }
.auth-stats { display:grid;grid-template-columns:1fr 1fr;gap:12px;z-index:1; }
.auth-stat { background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.1);border-radius:12px;padding:14px; }
.auth-stat .num  { font-size:20px;font-weight:500;color:#fff; }
.auth-stat .lbl  { font-size:11px;color:#666; }
.tab-row { display:flex;background:#f5f3ee;border-radius:10px;padding:4px;margin-bottom:28px; }
.tab-btn { flex:1;padding:9px;text-align:center;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;color:var(--muted);border:none;background:transparent;transition:all .2s;font-family:'DM Sans',sans-serif; }
.tab-btn.active { background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08); }
.or-divider { display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px; }
.or-divider::before,.or-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.social-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.btn-social { padding:11px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'DM Sans',sans-serif;transition:border-color .2s; }
.btn-social:hover { border-color:#999; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(26,26,26,.7);z-index:1000;display:none;align-items:center;justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-card { background:#fff;border-radius:20px;padding:32px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto; }
.modal-card h3 { font-family:'DM Serif Display',serif;font-size:22px;margin-bottom:18px; }
.modal-footer { display:flex;gap:10px;justify-content:flex-end;margin-top:20px; }

/* ── Misc ────────────────────────────────────────────────────── */
.ring-wrap { position:relative; }
.ring-wrap svg { display:block; }
.ring-center { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.spinner { width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--dark);border-radius:50%;animation:spin .6s linear infinite;display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .plans-grid  { grid-template-columns: 1fr; }
  .pay-methods-grid { grid-template-columns: repeat(3, 1fr); }
  .auth-wrapper { grid-template-columns: 1fr; }
  .auth-left    { display: none; }
  .form-row     { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .admin-sidebar { display: none; }
  .admin-main    { margin-left: 0; padding: 16px; }
  .user-main     { margin-left: 0; padding: 16px; }
  .user-sidebar  { display: none; }
  .stats-grid    { grid-template-columns: 1fr; }
  .pay-methods-grid { grid-template-columns: repeat(2, 1fr); }
}