/* Ravyo Pro · shared design tokens + base components.
   Inherits the brand established by the preview app (Video-styles)
   but with a more premium feel — denser type, fewer accents per screen. */

:root{
  color-scheme: dark;
  --bg:      #06060c;
  --bg-1:    #0a0c14;
  --bg-card: #0E1119;
  --bg-card-hi: #131725;
  --text:    #F2EFE6;
  --text-soft: rgba(242,239,230,0.72);
  --text-faint: rgba(242,239,230,0.42);
  --text-mute: rgba(242,239,230,0.22);

  --gold-warm: #DEB97A;
  --fire:      #ff5722;
  --emerald:   #34d399;
  --violet:    #7c3aed;
  --rose:      #f472b6;
  --sky:       #60a5fa;

  --border:    rgba(255,255,255,0.08);
  --border-hi: rgba(255,255,255,0.14);
  --shadow:    0 4px 20px rgba(0,0,0,0.4);

  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --serif:'Fraunces',Georgia,serif;
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono: 'JetBrains Mono','SF Mono',Menlo,monospace;
  --deva: 'Noto Sans Devanagari',var(--sans);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100vh; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans);
  font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

/* ─── Mockup nav strip ───
   Visible only on localhost / 127.0.0.1 / *.local / dev IPs so we can flip
   between pages during review. Hidden everywhere else (prod hostnames).
   The hide class is set by app.js based on hostname; default is HIDDEN so
   a malformed deploy never leaks the review strip to a paying user. */
.mock-nav{ display:none; }
body.show-mock-nav .mock-nav{
  display:flex;
  position:sticky; top:0; z-index:90;
  background:rgba(6,6,12,0.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:8px 16px;
  align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px;
  font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
}
.mock-nav .lbl{ color:var(--fire); margin-right:6px; }
.mock-nav a{
  padding:4px 10px; border-radius:5px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  color:var(--text-soft); transition:all .12s;
}
.mock-nav a:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.mock-nav a.active{
  background:linear-gradient(135deg, var(--gold-warm), var(--fire));
  border-color:transparent; color:#0c0c10;
}

/* ─── App top nav ─── */
.app-nav{
  display:flex; align-items:center; gap:14px;
  padding:16px 28px; border-bottom:1px solid var(--border);
  background:var(--bg);
}
.app-nav .logo{
  font-family:var(--serif); font-size:22px; font-weight:500;
  letter-spacing:-0.01em; color:#fff;
}
.app-nav .logo em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold-warm), var(--fire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─── Brand lockup ───
   Two-tier hierarchy: parent brand "Ravyo" + product "AI Video Pro".
   Mirrors the aivideopro/ landing navbar (gold mark + Fraunces name +
   left-border divider + uppercase Mono product label) so the Pro app
   sits visibly under the same parent brand as the marketing site. */
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff;
}
.brand .mark{
  width:30px; height:30px; border-radius:9px;
  background:radial-gradient(circle at 30% 30%, var(--gold-warm), var(--fire) 80%);
  box-shadow:0 0 16px rgba(222,185,122,0.30);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:18px;
  color:#1a0e02;
}
.brand .brand-name{
  font-family:var(--serif); font-weight:500; font-size:22px;
  letter-spacing:-0.02em; color:#fff;
}
.brand .product{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.16em; color:var(--text-faint);
  text-transform:uppercase;
  border-left:1px solid var(--border); padding-left:10px; margin-left:2px;
}
.brand:hover .product{ color:var(--text-soft); }
@media (max-width:760px){
  .brand .brand-name{ font-size:18px; }
  .brand .product{ font-size:9.5px; letter-spacing:0.12em; }
  .brand .mark{ width:26px; height:26px; font-size:15px; border-radius:7px; }
}

/* Parent-brand footer — small Mono line at page bottom that surfaces
   "Ravyo Labs" (parent) without bloating the navbar. Used on dashboard
   + login + signup. Other pages stay clean. */
.brand-foot{
  text-align:center;
  padding:24px 16px 28px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; color:var(--text-faint);
  text-transform:uppercase;
}
.brand-foot a{ color:var(--text-soft); border-bottom:1px solid var(--border); }
.brand-foot a:hover{ color:#fff; border-bottom-color:var(--gold-warm); }
.brand-foot .sep{
  display:inline-block; margin:0 10px;
  width:3px; height:3px; border-radius:50%;
  background:var(--text-mute); vertical-align:middle;
}
/* Fixed-bottom variant for centered card auth pages (login / signup)
   where the body is a vertical flex container — a normal-flow footer
   would push the centered card off-axis. */
.brand-foot.brand-foot-fixed{
  position:fixed; left:0; right:0; bottom:0;
  pointer-events:none; padding:14px 16px 18px;
}
.brand-foot.brand-foot-fixed a{ pointer-events:auto; }

/* Stacked variant for centered card layouts (login / signup) — mark on
   top, name + product on a second line so the lockup stays compact. */
.brand.brand-stacked{
  flex-direction:column; gap:12px; align-items:center;
}
.brand.brand-stacked .mark{
  width:44px; height:44px; font-size:24px; border-radius:12px;
  box-shadow:0 0 22px rgba(222,185,122,0.32);
}
.brand.brand-stacked .lockup{
  display:inline-flex; align-items:center; gap:10px;
}
.brand.brand-stacked .brand-name{ font-size:26px; }
.brand.brand-stacked .product{ font-size:11px; }
.app-nav .nav-pill{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:0.14em; color:var(--gold-warm);
  padding:3px 8px; border-radius:4px;
  background:rgba(222,185,122,0.10); border:1px solid rgba(222,185,122,0.25);
  text-transform:uppercase;
}
.app-nav .spacer{ flex:1; }
.app-nav .nav-links{ display:flex; gap:6px; }
.app-nav .nav-links a{
  padding:7px 12px; border-radius:7px;
  font-size:13px; color:var(--text-soft);
  transition:all .12s;
}
.app-nav .nav-links a:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.app-nav .nav-links a.active{
  background:rgba(255,255,255,0.06); color:#fff;
  font-weight:600;
}
.app-nav .avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-warm), var(--fire));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#0c0c10;
  cursor:pointer; transition:transform .12s;
}
.app-nav .avatar:hover{ transform:scale(1.05); }
.app-nav .ham{
  display:none; width:34px; height:34px;
  align-items:center; justify-content:center; cursor:pointer;
  border-radius:7px;
}
.app-nav .ham:hover{ background:rgba(255,255,255,0.05); }
.app-nav .ham svg{ width:18px; height:18px; }

/* ─── Common typography ─── */
h1.page-title{
  font-family:var(--serif); font-weight:400; font-size:30px;
  letter-spacing:-0.02em; margin-bottom:8px;
}
h1.page-title em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold-warm), var(--fire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-lede{ color:var(--text-soft); font-size:14.5px; max-width:680px; }
.page-lede strong{ color:#fff; }
.section-title{
  font-family:var(--mono); font-size:10.5px; font-weight:800;
  letter-spacing:0.16em; color:var(--gold-warm);
  text-transform:uppercase; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.section-title::after{
  content:''; flex:1; height:1px; background:var(--border);
}

/* ─── Cards ─── */
.card{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 20px;
}
.card.hi{ background:var(--bg-card-hi); }
.card.accent-gold{ border-left:3px solid var(--gold-warm); }
.card.accent-fire{ border-left:3px solid var(--fire); }
.card.accent-emerald{ border-left:3px solid var(--emerald); }
.card.accent-violet{ border-left:3px solid var(--violet); }

/* ─── Buttons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:8px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  color:var(--text); font-weight:600; font-size:13px;
  transition:all .15s; cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,0.08); border-color:var(--border-hi); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn.btn-primary{
  background:linear-gradient(135deg, var(--gold-warm), var(--fire));
  border:none; color:#0c0c10; font-weight:800;
}
.btn.btn-primary:hover{ filter:brightness(1.08); }
.btn.btn-ghost{ background:transparent; border-color:transparent; }
.btn.btn-ghost:hover{ background:rgba(255,255,255,0.04); }
.btn.btn-sm{ padding:6px 11px; font-size:12px; }
.btn.btn-lg{ padding:13px 22px; font-size:14.5px; }
.btn.btn-block{ width:100%; }
.btn.btn-emerald{
  background:rgba(52,211,153,0.12); border-color:rgba(52,211,153,0.35);
  color:var(--emerald);
}
.btn.btn-fire{
  background:rgba(255,87,34,0.12); border-color:rgba(255,87,34,0.35);
  color:var(--fire);
}

/* ─── Form elements ─── */
.input, .select, .textarea{
  width:100%; padding:10px 13px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13.5px;
  transition:border-color .15s;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--gold-warm);
  background:rgba(222,185,122,0.05);
}
.textarea{ resize:vertical; min-height:80px; font-family:var(--sans); line-height:1.55; }
.input-label{
  display:block; font-family:var(--mono);
  font-size:10px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-faint);
  margin-bottom:6px;
}
.input-hint{
  font-size:11.5px; color:var(--text-faint); margin-top:5px;
}

/* ─── Badges / pills ─── */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
}
.pill.gold{ background:rgba(222,185,122,0.10); border:1px solid rgba(222,185,122,0.25); color:var(--gold-warm); }
.pill.emerald{ background:rgba(52,211,153,0.10); border:1px solid rgba(52,211,153,0.30); color:var(--emerald); }
.pill.fire{ background:rgba(255,87,34,0.10); border:1px solid rgba(255,87,34,0.30); color:var(--fire); }
.pill.violet{ background:rgba(124,58,237,0.10); border:1px solid rgba(124,58,237,0.30); color:var(--violet); }
.pill.sky{ background:rgba(96,165,250,0.10); border:1px solid rgba(96,165,250,0.30); color:var(--sky); }
.pill.muted{ background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text-soft); }

/* ─── Containers ─── */
.container{ max-width:1200px; margin:0 auto; padding:24px 28px; }
.stack { display:flex; flex-direction:column; }
.row   { display:flex; align-items:center; }
.gap-1 { gap:6px; }
.gap-2 { gap:12px; }
.gap-3 { gap:18px; }
.gap-4 { gap:24px; }

/* ─── Responsive: mobile ─── */
@media (max-width: 760px){
  .app-nav{ padding:14px 16px; position:relative; }
  .app-nav .logo{ font-size:18px; }
  .app-nav .nav-links{ display:none; }
  .app-nav .ham{ display:flex; }
  .container{ padding:18px 14px; }
  h1.page-title{ font-size:24px; }
  .mock-nav{ font-size:9.5px; padding:8px 12px; }

  /* ─── Mobile nav drawer ─── */
  /* When the user taps .ham we add body.nav-drawer-open. The desktop
     .nav-links re-shows as a vertically stacked drawer below the nav,
     full-width with a subtle border + backdrop. Closes on any link tap
     or outside-tap (handled in app.js wireHamburger). */
  body.nav-drawer-open .app-nav .nav-links{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0; z-index:90;
    padding:10px 14px 14px;
    background:var(--bg-card); border-bottom:1px solid var(--border);
    box-shadow:0 10px 24px rgba(0,0,0,0.4);
  }
  body.nav-drawer-open .app-nav .nav-links a{
    padding:14px 12px; border-radius:8px; font-size:15px;
  }
}