/* ============================================================
   Cache Club — Shared Design System
   Consumed by the Hub, Creator Cache™ and Womeown.
   Apps override the CSS variables to apply their own theme.
   ============================================================ */

:root {
  --bg-primary: #0b0b12;
  --bg-secondary: #14141f;
  --bg-card: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.09);
  --text-primary: #f5f5fa;
  --text-muted: #9a9ab0;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --accent-gradient: linear-gradient(135deg, #8b5cf6, #22d3ee);
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --radius: 14px;
  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

  /* ---------- Ground-dependent surfaces ----------
     Everything below used to be written inline as a literal that only
     works on a dark page — a black input well, a white 7% progress
     track, a near-black modal scrim. Creator Cache is now a light
     product end to end (css/dashboard.css redeclares these), while the
     Hub and Womeown are still dark, so the values live here as tokens
     with the dark defaults and each app states its own ground once.
     Add a component that needs a surface? Use a token, not a literal —
     a literal is what made the app and the marketing page disagree. */
  /* The same six hues as channel triplets, for the dozens of places that
     need a TINT of an accent rather than the accent itself — a 12% violet
     chip fill, a 30% ring, a 16% success pill. Written as rgba(var(--x-rgb),
     a) so an app that restates its palette restates these once and every
     tint follows. Before this they were literal rgba(139,92,246,...) copies,
     which is why the light theme still had bright-violet chips in it long
     after --accent had gone darker. Keep each triplet in sync with the hex
     above it. */
  --accent-rgb:   139, 92, 246;
  --accent-2-rgb: 34, 211, 238;
  --success-rgb:  52, 211, 153;
  --warning-rgb:  251, 191, 36;
  --danger-rgb:   248, 113, 113;

  --input-bg: rgba(0, 0, 0, 0.25);       /* text inputs, selects, textareas */
  --surface-sunken: rgba(255, 255, 255, 0.025); /* wells: kanban columns, summaries */
  --track: rgba(255, 255, 255, 0.07);    /* unfilled part of a progress bar */
  --chrome-bg: rgba(10, 10, 17, 0.85);   /* sidebar + mobile bar, behind blur */
  --scrim: rgba(5, 5, 12, 0.72);         /* dim behind a modal */
  --scrim-solid: rgba(5, 5, 12, 0.94);   /* the sign-in wall, near-opaque */
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--accent-2); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: none;
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  min-height: 44px; /* touch target */
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.5); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; min-height: 36px; }
.btn-danger { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Cards & glass ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.badge-gold { background: rgba(var(--warning-rgb), 0.14); color: var(--warning); border-color: rgba(var(--warning-rgb), 0.35); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.input, .field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 0.95rem; outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 90px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; animation: fadeIn 0.2s ease;
}
.modal {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 20px; padding: 26px; box-shadow: var(--shadow);
  animation: popIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* Wide enough for three plan cards side by side. At 640px the grid
   wrapped to 2+1, which pushed Elite — the anchor the ₹199 price is
   judged against — below the fold. */
.modal-wide { max-width: 880px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 10px; }
.modal-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 1.4rem; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-card); }

/* The sign-in wall in front of the dashboards (Auth.gate). Sits above
   every other overlay and is deliberately near-opaque: a blurred but
   legible dashboard behind a "sign in to continue" panel reads as a
   nag to be dismissed rather than a door. */
.auth-gate { z-index: 950; background: var(--scrim-solid); }
.auth-gate .modal-head { margin-bottom: 8px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 380px); }
.toast {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 13px 16px; font-size: 0.9rem; box-shadow: var(--shadow);
  animation: slideUp 0.25s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
/* "Your payment is still confirming" is neither a success nor a failure,
   and showing it in red makes a settling UPI charge look like a decline. */
.toast.info { border-left-color: var(--accent-2); }

/* ---------- Growth engine: promo banner ---------- */
.growth-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 44px 10px 16px; position: relative; text-align: center;
  background: var(--accent-gradient); color: #fff;
  font-size: 0.88rem; font-weight: 600; z-index: 50;
}
.growth-banner button.gb-cta {
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff; border-radius: 999px; padding: 5px 13px; font-size: 0.8rem; font-weight: 700;
  white-space: nowrap;
}
.growth-banner .gb-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255, 255, 255, 0.85); font-size: 1.15rem;
  padding: 4px 8px;
}

/* ---------- Pricing ---------- */
/* Three across, or one — never 2+1, which reads as "Elite is an
   afterthought" exactly where the anchor has to do its work. */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.price-card.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(var(--accent-rgb), 0.25); }
.price-card .plan-name { font-size: 1.05rem; }
.price-card .plan-price { font-size: 2rem; font-family: var(--font-display); font-weight: 800; }
.price-card .plan-price small { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 0.87rem; color: var(--text-muted); flex: 1; }
.price-card ul li::before { content: "✓  "; color: var(--success); font-weight: 700; }
.price-card ul li.no::before { content: "—  "; color: var(--text-muted); }
.popular-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent-gradient); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }

/* The plan they are already on. Marked rather than merely offered:
   an unmarked card is how an Elite member clicked "Get Pro" believing
   it was a step up. */
.price-card.is-current { border-color: var(--text-muted); opacity: 0.92; }
.current-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--bg-secondary); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase;
}
.price-card button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Manage subscription ---------- */
.sub-key {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.sub-val { font-size: 1.4rem; font-weight: 700; font-family: var(--font-display); line-height: 1.2; }

/* ---------- Mock UPI checkout ---------- */
.upi-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.upi-option {
  display: flex; align-items: center; gap: 10px; padding: 13px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-sunken);
  font-weight: 600; font-size: 0.9rem; color: var(--text-primary); transition: border-color 0.15s;
}
.upi-option:hover, .upi-option.selected { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.upi-option .upi-logo { font-size: 1.3rem; }
.checkout-summary { background: var(--surface-sunken); border: 1px dashed var(--border); border-radius: 12px; padding: 14px 16px; font-size: 0.9rem; display: flex; flex-direction: column; gap: 7px; }
.checkout-summary .row { display: flex; justify-content: space-between; }
.checkout-summary .total { font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.strike { text-decoration: line-through; color: var(--text-muted); }
.qr-box { width: 150px; height: 150px; margin: 14px auto; border-radius: 12px; background: repeating-conic-gradient(#fff 0% 25%, #111 0% 50%) 50%/22px 22px; border: 8px solid #fff; }
.spinner { width: 38px; height: 38px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 18px auto; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scratch card ---------- */
.scratch-wrap { text-align: center; }
.scratch-stage { position: relative; width: 280px; height: 175px; margin: 16px auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.scratch-prize {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%), var(--accent-gradient);
  color: #fff;
}
.scratch-prize .prize-big { font-size: 1.7rem; font-weight: 800; font-family: var(--font-display); }
.scratch-prize .prize-sub { font-size: 0.85rem; opacity: 0.9; }
.scratch-stage canvas { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.scratch-hint { font-size: 0.8rem; color: var(--text-muted); }

/* ---------- Plan chip in sidebars ---------- */
.plan-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); font-size: 0.8rem;
}

/* ---------- Utility ---------- */
.muted { color: var(--text-muted); }
.center { text-align: center; }
/* Policy links. A payment aggregator's reviewer has to be able to find
   these from the landing page, and so does a customer looking for how
   to cancel — so they sit in the footer of every entry point, not
   buried in an account screen. */
.legal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 22px clamp(16px, 5vw, 40px); margin-top: 40px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted);
}
.legal-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.legal-foot a { color: var(--text-muted); text-decoration: none; }
.legal-foot a:hover { color: var(--text-primary); text-decoration: underline; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.hidden { display: none !important; }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .modal { padding: 20px; border-radius: 16px; }
  .upi-options { grid-template-columns: 1fr; }
}

/* ---------- Shared socials editor (Creator Cache, Womeown, vault) ----------
   The handle list grew from 6 to 13 when Post Radar™ needed sources it
   could actually read. Opening a profile form onto 13 empty inputs
   reads as work, so the six a creator is most likely to have stay in
   the open and the rest sit behind one toggle. */
.soc-read {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
  padding: 1px 6px; margin-left: 6px; border-radius: 999px;
  color: var(--accent-2); border: 1px solid var(--accent-2); opacity: 0.75;
}
/* The three edit screens drop this inside their own .socials-grid, so
   without spanning it becomes ONE grid cell and its seven fields stack
   in a 244px column while 1300px sits empty beside them. */
.soc-more { margin-top: 6px; grid-column: 1 / -1; }
.soc-more > summary {
  cursor: pointer; font-size: 0.86rem; padding: 8px 0;
  color: var(--text-primary); list-style: none;
}
.soc-more > summary::-webkit-details-marker { display: none; }
.soc-more > summary::before { content: '▸ '; color: var(--text-muted); }
.soc-more[open] > summary::before { content: '▾ '; }
.soc-more > summary:hover { color: var(--accent-2); }

/* A button that has to read as a link because it navigates rather than
   acts — used inside body copy, where a real button would shout. */
.linkish {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px;
}

/* ==================== PRICING: period, founding, discounts ==================== */
/* A segmented control rather than a checkbox: "Annual" is a choice
   between two prices, and a toggle labelled "annual?" makes the reader
   work out what the other state costs. */
.period-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 4px auto 0;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 999px;
}
.pricing-grid + .code-row, .period-toggle { align-self: center; }
.modal .period-toggle { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.pt-opt {
  background: transparent; border: none; border-radius: 999px; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-body); font-size: 0.84rem; font-weight: 600;
  padding: 8px 18px; min-height: 38px; display: inline-flex; align-items: center; gap: 7px;
  transition: background 0.18s ease, color 0.18s ease;
}
.pt-opt:hover { color: var(--text-primary); }
.pt-opt.active { background: var(--accent-gradient); color: #fff; }
.pt-save {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px;
  border-radius: 999px; background: rgba(var(--success-rgb),0.16); color: var(--success);
}
.pt-opt.active .pt-save { background: rgba(255,255,255,0.22); color: #fff; }

/* The founding offer sits ABOVE the grid: it is one offer on one plan,
   and a fourth card would read as a fourth tier. */
.founding-band {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid rgba(var(--warning-rgb),0.42);
  background: linear-gradient(135deg, rgba(var(--warning-rgb),0.10), rgba(var(--accent-rgb),0.08));
}
.fb-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 7px; }
.fb-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warning);
}
.fb-price {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.fb-price .fb-per { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.fb-price .fb-was { font-size: 0.95rem; font-weight: 500; }
.fb-copy { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; max-width: 60ch; }
.fb-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 3px; }
.fb-bar .fill { height: 100%; background: linear-gradient(90deg, var(--warning), var(--accent)); border-radius: 999px; }
.fb-cta { display: flex; flex-direction: column; align-items: stretch; min-width: 190px; }
@media (max-width: 620px) { .founding-band { flex-direction: column; align-items: stretch; } }

/* What a discount did, said in words next to the number it changed. */
.price-tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--success);
  margin-top: -6px;
}

.code-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.code-row input {
  flex: 0 1 190px; padding: 9px 12px; border-radius: 10px; min-height: 40px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  font-family: var(--font-mono, var(--font-body)); font-size: 0.84rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.code-row input:focus { outline: none; border-color: var(--accent); }
.code-row.applied { justify-content: flex-start; gap: 12px; }
.link-btn {
  background: none; border: none; padding: 0; color: var(--accent-2);
  font: inherit; font-size: 0.78rem; text-decoration: underline; cursor: pointer;
}