/* =========================================================
   Evyant UI — Single-source CSS
   Font: Inter
========================================================= */

/* ===== Inter font ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* ===== Theme tokens ===== */
:root{
  --primary-color:#C1174A;
  --primary-hover:#E63E6D;
  --primary-active:#8F0E35;

  --dark-bg:#0A0A0A;
  --card-bg:#18181B;
  --text:#ffffff;
  --muted:#C8C9D1;

  --border-zinc-800:#27272a;

  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* client/css/app.css */
/*.hidden { display: none !important; }*/
/* planner stepper */
.stepper{display:flex;align-items:center;gap:10px}
.stepper .dot{
  width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
  font-weight:700;font-size:12px;color:#fff;
  background:#18181b;border:1px solid #2b2b2f;
}
.stepper .dot.active{background:var(--primary-color);border-color:var(--primary-color)}
.stepper .line{height:2px;flex:1;background:#2b2b2f;border-radius:2px}

/* NEW: stack labels under dots */
.stepper{align-items:flex-start}
.stepper .step-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px}
.stepper .label{color:#c8c9d1;font-size:.82rem;line-height:1.25;text-align:center;max-width:180px}

/* optional: highlight completed links */
.stepper .line.done{background:var(--primary-color)}

/* Dropdown */

.avatar-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem; border-radius: .5rem;
  background: rgba(255,255,255,0.04);
}
.avatar-dot {
  width: 26px; height: 26px; border-radius: 9999px;
  background: var(--brand-red);
  display: inline-block;
}
.dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px; padding: .35rem; border-radius: .5rem;
  background: #161616; border: 1px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.dropdown a, .dropdown button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6rem; border-radius: .35rem;
}
.dropdown a:hover, .dropdown button:hover {
  background: rgba(255,255,255,.06);
}

.user-menu { position: relative; }

/* ===== Base ===== */
*{ box-sizing:border-box; margin:0; padding:0 }
body{
  min-height:100svh;                    /* key for sticky footer grid */
  display:grid;                         /* header | main | footer */
  grid-template-rows:auto 1fr auto;
  font-family:'Inter',sans-serif;
  background:var(--dark-bg);
  color:var(--text);
  scroll-behavior:smooth;
}
main{ min-height:0 }                    /* allow proper shrinking inside grid */
.container{ max-width:1280px; margin:0 auto; padding:0 1rem }

/* ===== Buttons (filled) ===== */
.btn,.primary-btn,.btn-primary{
  display:inline-block; border-radius:12px; padding:10px 14px; font-weight:600;
  color:#fff; background:var(--primary-color);
  box-shadow:0 6px 18px rgba(193,23,74,.25);
  transition:background-color .2s,box-shadow .2s,transform .15s; text-align:center;
}
.btn:hover,.primary-btn:hover,.btn-primary:hover{
  background:var(--primary-hover); transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(230,62,109,.4);
}
.btn:active,.primary-btn:active,.btn-primary:active{
  background:var(--primary-active); transform:translateY(0);
  box-shadow:0 6px 18px rgba(193,23,74,.25);
}

/* ===== Buttons (ghost / outline) ===== */
.btn-ghost{
  display:inline-block; padding:10px 14px; border-radius:12px; background:transparent;
  border:1px solid #2E2E2E; color:#d4d7e3;
  transition:transform .15s,border-color .2s,color .2s,box-shadow .2s;
}
.btn-ghost:hover{
  color:#fff; border-color:var(--primary-color);
  box-shadow:0 0 12px rgba(193,23,74,.45); transform:translateY(-1px);
}
.btn-ghost:active{
  border-color:var(--primary-active); box-shadow:0 0 6px rgba(193,23,74,.25);
  transform:translateY(0);
}

/* ===== Cards / Surfaces ===== */
.glow-border{ border:1px solid rgba(255,255,255,.05); box-shadow:0 0 10px rgba(193,23,74,.05) }
.feature-card{ background:var(--card-bg); transition:transform .3s,box-shadow .3s }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(193,23,74,.15) }

/* Inputs (shared) */
.input-style{
  background:#11131a; border:1px solid #2a2d3a; color:#fff; outline:0;
  transition:border-color .18s, box-shadow .18s;
}
.input-style:focus{ border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(193,23,74,.18) }
textarea.input-style{ resize:vertical }

/* ===== Header / Navbar ===== */
.site-header,header.sticky-shadow{
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border-zinc-800);
}
header{ position:relative }
@media (min-width:768px){
  header nav{ position:absolute; left:50%; transform:translateX(-50%) }
}
.nav-link{
  position:relative; display:inline-flex; align-items:center;
  padding:10px 0 14px; color:#cfcfe3; transition:color .2s,transform .15s;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--primary-color); transform:scaleX(0);
  box-shadow:0 0 10px rgba(193,23,74,.55); transition:transform .22s ease;
}
.nav-link:hover{ color:#fff; transform:translateY(-1px) }
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1) }
.nav-actions{ margin-left:auto; display:flex; align-items:center; gap:10px }

#mobileMenu{ transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .25s,opacity .25s }
#mobileMenu.open{ transform:translateY(0); opacity:1; pointer-events:auto }
#headerAvatar {
  background-color: #C1174A;
}

/* ===== Logo ===== */
.logo svg{ height:40px; display:block }
@media (min-width:1024px){ .logo svg{ height:46px } }
@media (max-width:640px){  .logo svg{ height:34px } }
.logo .word{
  font: 900 52px "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  fill: currentColor; letter-spacing:.5px;
}
.logo .play{
  fill:#C1174A; filter: drop-shadow(0 0 8px rgba(193,23,74,.6)); transition: filter .25s ease;
}
.logo:hover .play{ filter: drop-shadow(0 0 14px rgba(230,62,109,.9)) }

/* ===== “How it works” hover ===== */
#how article{ transition:transform .18s,box-shadow .18s }
#how article:hover{ transform:translateY(-3px); box-shadow:0 12px 36px rgba(193,23,74,.35) }

/* ===== FAQ gradient section ===== */
.section--faq-gradient{
  background: linear-gradient(180deg, #C1174A 0%, #0A0A0A 60%);
  padding:72px 0; position:relative;
}
.section--faq-gradient .section-title{
  text-align:center; font-weight:900; letter-spacing:.3px; margin-bottom:28px;
}

/* Global section title underline */
.section-title{ position:relative; display:inline-block; padding-bottom:6px }
.section-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--primary-color); transform:scaleX(.25);
  transition:transform .25s ease; box-shadow:0 0 10px rgba(193,23,74,.45);
}
.section-title:hover::after{ transform:scaleX(1) }

/* FAQ layout */
.faq-wrap{
  max-width:980px; margin:0 auto; padding:0 1rem; text-align:center;
}
.faq-grid{
  margin-top:16px; display:grid; gap:12px; max-width:880px; margin-left:auto; margin-right:auto;
  text-align:left;
}
.faq-item{
  background:#17171b; border:1px solid #25252b; border-radius:12px;
  padding:14px 16px; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-weight:600; color:#fff; cursor:pointer;
}
.faq-item p{ color:#C8C9D1; font-size:14px; line-height:1.6; padding-top:8px }
.faq-item .chev{ width:18px; height:18px; opacity:.85; transition:transform .2s ease }
.faq-item[open] .chev{ transform:rotate(90deg) }

/* ===== Contact ===== */
.section--contact{ background:#0A0A0A; padding:72px 0; border-top:1px solid var(--border-zinc-800) }
.contact-wrap{ max-width:860px; margin:0 auto }
.contact-head{ text-align:center; margin-bottom:22px }
.contact-head h2{ font-size:clamp(28px,3.6vw,40px); font-weight:900; letter-spacing:.2px }
.contact-head p{ color:var(--muted); margin-top:8px }
.contact-card{
  background:#121216; border:1px solid #24242a; border-radius:16px;
  padding:20px; box-shadow:0 14px 36px rgba(0,0,0,.35)
}
.contact-form{ display:grid; gap:12px }
.form-row{ display:grid; gap:12px }
@media (min-width:768px){ .form-row{ grid-template-columns:1fr 1fr } }
.input,.textarea{
  width:100%; background:#111; border:1px solid #2b2b2f; color:#fff;
  border-radius:12px; padding:12px 14px; outline:none;
  transition:border-color .2s, box-shadow .2s
}
.input:focus,.textarea:focus{ border-color:var(--primary-color); box-shadow:0 0 0 4px rgba(193,23,74,.18) }
.textarea{ min-height:120px; resize:vertical }
.contact-actions{ margin-top:6px }
.contact-actions .btn,.contact-actions .primary-btn{ width:100% }
@media (min-width:480px){
  .contact-actions .btn,.contact-actions .primary-btn{ width:auto }
}

/* ===== Pricing ===== */
.pricing .pricing-wrap{ max-width:980px; margin:0 auto; text-align:center }
.tiers{ display:flex; flex-wrap:wrap; gap:32px; justify-content:center; align-items:stretch }
.tier{
  width:320px; max-width:92vw; background:#11131a;
  border:1px solid #1b1b22; border-radius:14px; padding:28px 24px;
  text-align:left; position:relative; box-shadow:0 8px 18px rgba(0,0,0,.25);
  display:flex; flex-direction:column; min-height:520px;
}
.tier h3{ font-size:22px; font-weight:800; margin-bottom:6px }
.tier .price{ font-size:40px; line-height:1.1; font-weight:900; margin:8px 0 4px }
.tier .price span{ font-size:14px; color:#a8acb8; font-weight:500; margin-left:2px }
.tier .sub{ font-size:12px; color:#9aa0ad; margin:0 0 10px }
.tier .features{
  list-style:none; margin:10px 0 16px; padding:0;
  display:flex; flex-direction:column; gap:10px; flex:1 1 auto;
}
/* compact right-side badge for “coming soon” */
.features .pill{
  display:inline-block;
  font-size:.675rem;
  line-height:1;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--primary-color);
  color:var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  white-space:nowrap;
}
.tier .features li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 0;
  color:#e7e7e7;
  font-size:14px;
}
.tier .subhead {
  font-size: 14px;
  font-weight: 700;
  color: #e7e7e7;
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
}

.tier .features li .label{ flex:1; min-width:0; }

/* only rows with a pill should space-between */
.tier .features li.has-pill{
  justify-content:space-between;
  align-items:center;
}
.tier .features li .label{          /* NEW */
  flex:1; min-width:0;
}
.tier .features li.has-pill{        
  align-items:center;
}
.tier .features li::before{ content:"✓"; color:var(--primary-color); font-weight:800; margin-top:1px }
.tier .features em.soon{ font-style:normal; color:var(--primary-hover); opacity:.85 }
.tier .block{ display:block; width:100%; margin-top:auto }
.tier.pro{
  border:2px solid var(--primary-color);
  background:linear-gradient(135deg,#11131a 0%,#1a0f14 100%);
  box-shadow:0 14px 42px rgba(193,23,74,.28);
}
.tier.pro .badge{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  background:var(--primary-color); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 16px; font-size:12px; font-weight:900;
  letter-spacing:.6px; text-transform:uppercase; box-shadow:0 10px 26px rgba(193,23,74,.35);
}
.tier:hover{ transform:translateY(-2px); transition:transform .18s,box-shadow .18s }
.tier.pro:hover{ box-shadow:0 18px 54px rgba(230,62,109,.35) }
@media (max-width:640px){ .tier{ min-height:500px } }
/* even height columns */
.pricing .tier{ display:flex; flex-direction:column; }
.pricing .tier .features{ flex:1; }

/* CTA/upsell block under the button */
.pricing .tier .cta .btn{ width:100%; }
.pricing .tier .upsell{
  margin-top:.6rem;
  font-size:.82rem;
  padding:.55rem .75rem;
  border:1px dashed #5b5b66;
  border-radius:.5rem;
  background: rgba(255,255,255,.03);
  min-height: 58px;
}
.pricing .tier .upsell em {
  color:#aaa;
  font-style:normal;
}

.pricing .tier .upsell strong {
  color:#fff;
  font-weight:600;
}

/* actions row */
.pricing .tier .actions{
  margin-top:auto;                 /* push to bottom */
  display:flex; flex-direction:column; gap:8px;
}

/* keep the hint from pushing other card off alignment */

.pricing .tier .upsell .discount{ color:var(--primary-color); font-weight:700; }
.pricing .tier .hint{
  display:block;
  margin-top:.35rem;
  color:#a1a1aa;
  font-size:.72rem;
  min-height:2.6rem; 
  line-height:1.2;
  /* Primary CTA style just for pricing cards */
}
.pricing .tier .btn.primary-btn{
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color:#fff;
}
.pricing .tier .btn.primary-btn:hover{
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
/* unified notice box under the CTA */
/* Subtle notice under Pro CTA */
.pricing .tier .notice {

  margin-top: 0.55rem;
  font-size: 0.75rem;              /* smaller size */
  line-height: 1.35;
  color: #a9aeba;                  /* same tone as “Billed monthly...” */
  background: transparent;         /* remove the gray box look */
  border: none;                    /* no border */
  padding: 0 0.25rem;
}

.pricing .tier .notice p {
  margin: 0.25rem 0;
}

.pricing .tier .notice .discount {
  color: var(--primary-color);
  font-weight: 600;
}

.pricing .tier .notice strong {
  color: #e7e7e7;
  font-weight: 600;
}
/* button borders – reuse class instead of inline style */
.btn.outline-primary {
  border:1px solid #C1174A;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* small helper text under CTAs */
.cta-hint{
  margin-top:.45rem;
  font-size:.78rem;
  color:#a1a1aa;
  line-height:1.25;
  text-align: center;
}
.btn-disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.5);
}
/* ===== Creator Advantage ===== */
.metrics-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:768px){ .metrics-grid{ gap:20px; grid-template-columns:repeat(4,1fr) } }
.metric-tile{
  background:#11131a; border:1px solid #1b1b22; border-radius:14px; padding:16px;
  text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.25); transition:transform .18s, box-shadow .18s;
}
.metric-tile:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.32) }
.metric-num{
  font-size:44px; line-height:1; font-weight:900;
  background:linear-gradient(180deg, var(--primary-hover), #d3042a 45%, #ee497b 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(230,62,109,.18));
}
.metric-label{ margin-top:8px; font-size:12px; color:#a9acb7 }

/* ===== Create while we post — compact preview ===== */
.preview-frame{
  width:100%; max-width:520px; margin-inline:auto; aspect-ratio:4/3;
  border:1px solid #202434; border-radius:16px; background:#14151b;
  box-shadow:0 16px 42px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
@media (min-width:1024px){ .preview-frame{ max-width:460px } }
.preview-frame::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(230,62,109,.35) 0%, transparent 45%);
  opacity:.18; pointer-events:none;
}
.preview-inner{ width:86%; max-width:420px }
.preview-title{ font-weight:800; letter-spacing:.2px; color:#cfd3df; margin-bottom:14px; text-align:center }
.preview-row{ display:flex; align-items:center; gap:10px; margin:10px 0 }
.preview-row .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--primary-color); box-shadow:0 0 10px rgba(230,62,109,.55);
}
.preview-row .line{ flex:1; height:12px; border-radius:8px; background:linear-gradient(90deg,#2a2e3d,#30354a) }
.preview-row .line.short{ width:70% }

/* ===== Motion primitives (reveal) ===== */
.reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out);
  will-change:opacity,transform,filter; filter:blur(2px);
}
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0) }
.fade-in{ transform:none } .fade-up{ transform:translateY(18px) }
.fade-down{ transform:translateY(-18px) } .fade-left{ transform:translateX(24px) }
.fade-right{ transform:translateX(-24px) } .zoom-in{ transform:scale(.98) }
.stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.stagger.is-visible > *{ opacity:1; transform:none }
.stagger.is-visible > *:nth-child(1){ transition-delay:.05s }
.stagger.is-visible > *:nth-child(2){ transition-delay:.10s }
.stagger.is-visible > *:nth-child(3){ transition-delay:.15s }
.stagger.is-visible > *:nth-child(4){ transition-delay:.20s }
.stagger.is-visible > *:nth-child(5){ transition-delay:.25s }
.stagger.is-visible > *:nth-child(6){ transition-delay:.30s }
.lift-on{ transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out) }
.lift-on.is-visible:hover{ transform:translateY(-4px); box-shadow:0 12px 34px rgba(0,0,0,.35) }
.site-header.scrolled{ background:rgba(10,10,14,.92); border-bottom-color:#1f1f25 }

/* ===== Verify inputs (OTP numeric) ===== */
.input-style[inputmode="numeric"]{
  text-align:center; font-weight:800; font-size:20px;
  letter-spacing:.5px; caret-color:var(--primary-color);
}

/* ===== Settings side menu ===== */
aside a{
  border:1px solid #232535; background:#0e0f14; color:#d1d4e0;
  transition:transform .15s,border-color .2s,color .2s,box-shadow .2s;
}
aside a:hover{
  transform:translateY(-1px); border-color:var(--primary-color);
  color:#fff; box-shadow:0 10px 26px rgba(193,23,74,.18);
}

/* ===== Footer (centered layout, global sticky) ===== */
.site-footer{
  background:#0b0b0e;
  border-top:1px solid #27272a;
  padding:20px 0;
  position:relative;     /* keep it in normal flow; no fixed */
  overflow:hidden;
  z-index:10;
}
.footer-inner{
  max-width:1280px; margin:0 auto; padding:0 1rem;
  display:flex; align-items:center; justify-content:center;
  gap:22px; flex-wrap:wrap; text-align:center;
}
.footer-links a{
  color:#CBC9D1; font-size:14px; margin:0 10px; transition:color .18s;
}
.footer-links a:hover{ color:#fff }
.footer-social{ display:flex; align-items:center; gap:10px }
.footer-social a{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  border:1px solid #22242d; color:#a4a7c7;
  transition:transform .15s, border-color .2s, box-shadow .2s, color .2s;
}
.footer-social a:hover{
  transform:translateY(-1px); border-color:var(--primary-color);
  color:#fff; box-shadow:0 0 12px rgba(193,23,74,.35);
}
.footer-copy{ color:#9aa0ad; font-size:13px }

/* Motif full visibility (no transparency) */
.footer-motif{
  position:absolute; left:-40px; bottom:-20px; width:460px; height:auto;
  pointer-events:none; filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); opacity:1;
}
@media (max-width:640px){ .footer-motif{ display:none } }

/* === Platform Color Themes === */
#board {
  gap: 1rem;
  background: radial-gradient(circle at center, rgba(255,255,255,0.02), transparent 60%);
}
/* ==== POP + COLOR-TINTED LANES ==== */

/* ========== X (cyan / blue) ========== */
.lane--x {
  background: linear-gradient(180deg, rgba(0,200,255,0.10), rgba(0,71,255,0.06));
  border: 1px solid rgba(0,200,255,0.25);
  box-shadow: inset 0 0 30px rgba(0,200,255,0.05);
  border-radius: 16px;
}

.lane--x .lane-head {
  background: linear-gradient(135deg, rgba(0,200,255,0.35), rgba(0,71,255,0.25));
  border: 1px solid rgba(0,200,255,0.45);
  box-shadow: 0 0 20px rgba(0,200,255,0.25);
  backdrop-filter: blur(12px) saturate(140%);
}

.lane--x .post-card {
  border-color: rgba(0,200,255,0.6);
  box-shadow: inset 0 0 10px rgba(0,200,255,0.25);
}
.lane--x .post-card:hover {
  box-shadow: 0 0 22px rgba(0,200,255,0.45);
}


/* ========== Instagram (magenta / orange) ========== */
.lane--instagram {
  background: linear-gradient(180deg, rgba(225,48,108,0.10), rgba(247,119,55,0.06));
  border: 1px solid rgba(225,48,108,0.25);
  box-shadow: inset 0 0 30px rgba(225,48,108,0.05);
  border-radius: 16px;
}

.lane--instagram .lane-head {
  background: linear-gradient(135deg, rgba(225,48,108,0.35), rgba(247,119,55,0.25));
  border: 1px solid rgba(225,48,108,0.45);
  box-shadow: 0 0 20px rgba(225,48,108,0.25);
  backdrop-filter: blur(12px) saturate(140%);
}

.lane--instagram .post-card {
  border-color: rgba(225,48,108,0.6);
  box-shadow: inset 0 0 10px rgba(225,48,108,0.25);
}
.lane--instagram .post-card:hover {
  box-shadow: 0 0 22px rgba(225,48,108,0.45);
}


/* ========== TikTok (amber / yellow) ========== */
.lane--tiktok {
  background: linear-gradient(180deg, rgba(255,210,26,0.10), rgba(255,140,0,0.06));
  border: 1px solid rgba(255,210,26,0.25);
  box-shadow: inset 0 0 30px rgba(255,210,26,0.05);
  border-radius: 16px;
}

.lane--tiktok .lane-head {
  background: linear-gradient(135deg, rgba(255,210,26,0.35), rgba(255,140,0,0.25));
  border: 1px solid rgba(255,210,26,0.45);
  box-shadow: 0 0 20px rgba(255,210,26,0.25);
  backdrop-filter: blur(12px) saturate(140%);
}

.lane--tiktok .post-card {
  border-color: rgba(255,210,26,0.6);
  box-shadow: inset 0 0 10px rgba(255,210,26,0.25);
}
.lane--tiktok .post-card:hover {
  box-shadow: 0 0 22px rgba(255,210,26,0.45);
}

/* modal summary*/
#summaryModal .modal-panel{
  background: linear-gradient(180deg,#11131a 0%,#0b0b0e 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  max-width: 90vw;
  width: 90vw;
}
/* ===== Schedule Summary Grid (v2 – Larger + Colored) ===== */
#summaryBody .summary-table-wrap{
  max-height:72vh;
  overflow:auto;
  padding:0.75rem;
  font-size:14px;              /* bumped up for readability */
}

#summaryBody .summary-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  line-height:1.45;
}

#summaryBody .summary-table th,
#summaryBody .summary-table td{
  border:1px solid #27272a;
  padding:14px 12px;
  vertical-align:top;
  background:#101114;
}

/* sticky header */
#summaryBody .summary-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#16171b;
  color:#fafafa;
  font-weight:700;
  text-align:left;
}

/* platform rows (colored gradient bar on left) */
#summaryBody .summary-table th.plat{
  white-space:nowrap;
  text-align:left;
  font-weight:800;
  color:#fff;
  border-right:2px solid transparent;
}

/* ===== Summary colors by platform (attribute-based, not nth-child) ===== */
#summaryBody .summary-table tr[data-plat="instagram"] th.plat{
  background:linear-gradient(90deg, rgba(225,48,108,.25), transparent);
  border-right-color:#e1306c;               /* magenta */
}

#summaryBody .summary-table tr[data-plat="tiktok"] th.plat{
  background:linear-gradient(90deg, rgba(255,210,26,.25), transparent);
  border-right-color:#ffd21a;               /* amber */
}

#summaryBody .summary-table tr[data-plat="x"] th.plat{
  background:linear-gradient(90deg, rgba(0,200,255,.25), transparent);
  border-right-color:#00c8ff;               /* cyan */
}


#summaryBody .summary-table td.empty{
  color:#71717a;
  text-align:center;
  font-style:italic;
}

#summaryBody .cell-top{
  color:#a1a1aa;
  font-size:13px;
  margin-bottom:4px;
}

#summaryBody .cell-cap{
  color:#fafafa;
  font-weight:500;
  margin-bottom:4px;
  max-height:3.5em;
  overflow:hidden;
}

#summaryBody .cell-att{
  color:#93c5fd;
  font-size:12px;
  font-weight:500;
}

/* =========================================================
   MEDIA PREVIEW — FIT THUMBS INSIDE CARDS (ONLY CHANGE ADDED)
========================================================= */
.post-card .media-preview{
  border:1px solid #2a2d3a;
  border-radius:12px;
  overflow:hidden;
  background:#0e0f16;
  /* Give the box a predictable height while keeping responsive feel */
  min-height:120px;
}

.post-card .media-preview > img,
.post-card .media-preview > video{
  display:block;
  width:100%;
  height:220px;              /* base height for laptop widths */
  object-fit:cover;          /* crop instead of overflow */
}

@media (min-width:1024px){
  .post-card .media-preview > img,
  .post-card .media-preview > video{
    height:260px;            /* a bit taller on large screens */
  }
}

@media (max-width:480px){
  .post-card .media-preview > img,
  .post-card .media-preview > video{
    height:180px;            /* tighter on small phones */
  }
}
/* flash highlight when jumping from summary */
.evy-flash{
  box-shadow: 0 0 0 2px #22d3ee, 0 0 0 6px rgba(34,211,238,.25);
  transition: box-shadow .2s;
}
/* Tiny scoped CSS for media sizing + danger button */
.media-thumbs{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-bottom:.5rem;
}
.media-thumb{
  position:relative; width:100%; aspect-ratio:1/1; border:1px solid #2a2d3a; border-radius:.5rem; overflow:hidden; background:#0e0f16;
}
.media-thumb img, .media-thumb video{ width:100%; height:100%; object-fit:cover; display:block }
.media-chip{
  position:absolute; left:.35rem; top:.35rem; font-size:.625rem; padding:.1rem .35rem; border-radius:.35rem;
  background:#111827; border:1px solid #374151; color:#e5e7eb;
}
.media-remove{
  position:absolute; right:.35rem; top:.35rem; width:1.25rem; height:1.25rem; line-height:1.1rem;
  text-align:center; border-radius:.35rem; background:#111827; border:1px solid #b91c1c; color:#fecaca; font-weight:700;
}
.btn-danger{
  background:#7f102f; color:#fff; border:1px solid #a1123a;
}
.btn-danger:hover{ background:#a1123a; }
.hidden-if-empty{ display:none; }

/* Summary thumbnails */
#summaryBody .summary-thumb{ aspect-ratio:1/1; }
#summaryBody .summary-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ----- MY CONTENT PLANS LAYOUT TWEAKS ----- */
.page--plans .plans__create {
  display:flex; gap:.75rem; align-items:center;
  padding: 1.25rem 0;
}
.page--plans #newPlanTitle {
  flex:1; min-width: 220px;
  background:#0f1016; color:#fff;
  border:1px solid #27272a; border-radius:.5rem;
  padding:.65rem .8rem; font-size:.95rem;
}
.page--plans .plans__filters { display:flex; gap:.5rem; margin:.25rem 0 1rem; }
.chip {
  padding:.35rem .6rem; border-radius:999px; font-size:.8rem; line-height:1;
  border:1px solid #27272a; background:#0f1016; color:#cfcfd4; cursor:pointer;
}
.chip--active { border-color: var(--primary-color); color:#fff; }

.plans__grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; padding-bottom: 2.5rem;
}
.plan-card {
  border:1px solid #27272a; border-radius:.75rem; background:#11131a;
  padding:.85rem; display:flex; flex-direction:column; gap:.65rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.plan-card__top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.plan-card__title { font-weight:700; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }

.badge {
  font-size:.72rem; padding:.25rem .45rem; border-radius:.4rem;
  border:1px solid #333; background:#0f1016; text-transform:capitalize;
}
.badge--green { border-color:#134e4a; background:#052e2b; color:#34d399; }
.badge--amber { border-color:#4a3a05; background:#2b2305; color:#fbbf24; }
.badge--slate { border-color:#374151; background:#0f172a; color:#94a3b8; }

.plan-card__meta { display:flex; justify-content:space-between; gap:.5rem; font-size:.8rem; color:#c5c6cc; }
.plan-card__range { color:#d1d2d7; }
.plan-card__saved { color:#9ca3af; }

.plan-card__actions { display:flex; gap:.5rem; }
.btn { border-radius:.5rem; padding:.45rem .7rem; font-size:.85rem; border:1px solid #27272a; background:#0f1016; color:#e5e7eb; }
.btn--primary { background: var(--primary-color); border-color: var(--primary-color); color:#111; font-weight:700; }
.btn--ghost { background:#0f1016; }
.btn--danger { background:#3a0b0b; border-color:#5b1515; color:#fca5a5; }

.plans__empty { opacity:.8; padding:2.5rem; border:1px dashed #3a3a41; border-radius:.75rem; text-align:center; }
.plans__empty .hint { margin-top:.35rem; color:#9ca3af; font-size:.9rem; }

/* modal basics */
#payModal.hidden{ display:none; }
#payModal:not(.hidden){ display:block; }
#payModal footer {
  margin-top: 1rem;
  padding: 1rem;
  border-top: 1px solid #2a2a2a;
}
/* Payment modal option states */
.option { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.option.selected {
  border-color: var(--primary-color);
  background-color: rgba(193, 23, 74, 0.07);
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}


/* Billing */

.card-sm{background:#0e0f13;border:1px solid #27272a;border-radius:12px;padding:14px}
.card-sm-title{font-weight:600;margin-bottom:.35rem}
.badge{font-size:10px;line-height:1; padding:4px 6px;border:1px solid #3f3f46;border-radius:999px;color:#a1a1aa}
.mini-row{display:flex;justify-content:space-between;gap:12px;margin:.35rem 0}
.mini-row .k{font-size:11px;color:#a1a1aa}
.mini-row .v{font-size:12px}
.hint{font-size:11px;color:#a1a1aa;margin-top:.2rem}
.chip{font-size:11px;padding:2px 6px;border:1px solid #3f3f46;border-radius:8px}
#betaBlurb p { margin-bottom: 0.4rem; line-height: 1.4; }
.btn-ghost-1{background:#0b0b0e;border:1px solid #27272a}
/*.btn-primary{background:#e11d48;border:1px solid #7f1d1d;color:#fff;border-radius:10px;padding:.55rem .9rem}

/* toast */
.evy-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #0b0e0e;
  color: #fff;
  border: 1px solid #3a3a41;
  border-radius: .5rem;
  padding: .55rem .8rem;
  font-size: .85rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.evy-toast.show{
  opacity: 1;
  transform: translateY(0);
}