/* ==========================================================================
   VidMobi · Aurora theme
   A complete replacement for the previous five stylesheets.

   Structure
     1  Tokens
     2  Reset and base
     3  App shell and view routing
     4  Icons
     5  Shared controls
     6  Home
     7  Discover
     8  Creator
     9  History and results
    10  Templates
    11  Commerce (subscription, credits, checkout)
    12  Auth
    13  Profile
    14  Documents
    15  Overlays (modal, toast, referral, PWA)
    16  Empty, error and loading states
    17  Responsive

   Colour is defined once here. The old build carried two :root blocks that
   disagreed about --accent, --surface, --line and both radii; whichever file
   loaded last silently won. There is a single source now.
   ========================================================================== */

/* ---------- 1 Tokens ---------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Surfaces, deepest to lightest. Five steps, one purpose each. */
  --ink-0: #0A0B0D;   /* page */
  --ink-1: #12141A;   /* raised: bars, sheets, inputs */
  --ink-2: #1A1D25;   /* cards */
  --ink-3: #242832;   /* selected, icon plate */
  --ink-4: #2F3441;   /* hover, dividers on light */

  /* Text. Every value below is measured against --ink-0 and --ink-1. */
  --tx-1: #F2F4F8;    /* 17.9:1  body and headings */
  --tx-2: #A8AEBC;    /*  8.9:1  secondary */
  --tx-3: #6E7686;    /*  4.3:1  captions, 13px and up only */

  /* The one accent. */
  --sig: #FF3B5C;     /* 5.66:1 on ink-0; carries --sig-ink at 5.52:1 */
  --sig-hi: #FF6B84;  /* 7.21:1 on ink-0, for accent text */
  --sig-ink: #1A0A0E; /* text that sits on --sig */
  --sig-wash: #FF3B5C1f;
  --sig-line: #FF3B5C4d;

  /* Gold is reserved for credits. Nothing else may use it. */
  --gold: #FFC53D;
  --gold-ink: #2A1D00;

  /* Functional. Used only in status, never for decoration. */
  --ok: #4ADE9B;
  --warn: #FFB020;
  --danger: #FF5C5C;

  --line: #ffffff14;
  --line-soft: #ffffff0a;
  --line-strong: #ffffff26;

  /* Type. One family, shipped with the app; hierarchy comes from weight. */
  --ui: "VidMobi Sans", Roboto, system-ui, -apple-system, sans-serif;
  --num: "Roboto Numbers", "VidMobi Sans", Roboto, sans-serif;

  --t-display: 30px;  /* hero headline */
  --t-title: 27px;    /* page title over artwork */
  --t-h2: 19px;       /* section heading */
  --t-h3: 16.5px;     /* card heading, primary button */
  --t-body: 14px;
  --t-body-s: 13.5px;
  --t-label: 13px;    /* smallest permitted */
  --t-micro: 12px;    /* badges only, never running text */

  --w-reg: 400;
  --w-med: 650;
  --w-bold: 700;
  --w-semi: 750;
  --w-black: 800;

  /* Radii. Three steps, one meaning each. */
  --r-ctl: 13px;      /* buttons, inputs, chips */
  --r-card: 15px;     /* cards, sheets, panels */
  --r-pill: 999px;

  --gut: 16px;
  --tap: 44px;        /* minimum touch target */
  --max: 375px;

  --shadow-1: 0 1px 2px #00000040;
  --shadow-2: 0 10px 26px #00000073;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- 2 Reset and base ------------------------------------------- */

@font-face {
  font-family: "Roboto Numbers";
  src: url("assets/apk/font/roboto_medium_numbers.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VidMobi Sans";
  src: url("assets/fonts/roboto-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--ink-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--ink-0);
  color: var(--tx-1);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
a { color: var(--sig-hi); }
img, video, canvas { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* A single visible focus ring, on everything focusable, never suppressed. */
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sig-hi);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--sig); color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Scrollbars, dark. */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }

/* ---------- 3 App shell and view routing ------------------------------- */

.app-shell {
  position: relative;
  width: min(100%, var(--max));
  min-height: 100vh;
  margin: 0 auto;
  background: var(--ink-0);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-soft);
}

#app-main { min-height: 100vh; }

.view { display: none; min-height: 100vh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.view.active { display: block; }
.view.no-main-nav { padding-bottom: 0; }

/* Shared top bar for二级 pages. */
.app-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px var(--gut);
  padding-top: calc(12px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--ink-0) 88%, transparent);
  backdrop-filter: blur(14px);
}
.app-toolbar h1 {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: -.018em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-toolbar > :last-child { margin-left: auto; }

.back-button,
.history-button,
.delete-button,
.favorite-button {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-1);
}
.back-button:hover,
.history-button:hover,
.delete-button:hover,
.favorite-button:hover { background: var(--ink-3); }

/* ---------- 4 Icons ---------------------------------------------------- */

/* Linear, 1.9px stroke, currentColor. Replaces the bitmap atlas. */
.ic {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 22px; height: 22px; }

/* Menu rows use a plate behind the glyph. */
.menu-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink-3);
  color: var(--tx-2);
}

/* The credit coin. */
.credit-coin {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE07A, var(--gold) 62%, #D89A08);
  box-shadow: inset 0 0 0 1px #0000002e;
}

/* ---------- 5 Shared controls ------------------------------------------ */

/* Primary action. Dark ink on the accent measures 5.52:1, against 3.73:1 for
   the white-on-magenta it replaces. */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: -.012em;
  box-shadow: 0 8px 22px -8px var(--sig);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.btn-primary:hover:not(:disabled) { background: #FF5570; }
.btn-primary:active:not(:disabled) { transform: scale(.988); }
.btn-primary:disabled { background: var(--ink-3); color: var(--tx-3); box-shadow: none; }

.btn-secondary {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--tx-1);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}
.btn-secondary:hover { background: var(--ink-2); }

/* Option pills, used for ratios, durations, filters. Never below 40px. */
.chip,
.n-opt {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-2);
  font-size: var(--t-body-s);
  font-weight: var(--w-med);
  white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.chip:hover, .n-opt:hover { background: var(--ink-2); }
.chip.active, .n-opt.selected, .option-group button.selected {
  background: var(--tx-1);
  border-color: transparent;
  color: var(--ink-0);
  font-weight: var(--w-bold);
}

/* Section heading with an optional count and trailing action. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 26px var(--gut) 0;
}
.section-head h1,
.section-head h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: -.018em;
}
.section-head .count { color: var(--tx-3); font-size: var(--t-label); font-weight: var(--w-med); }
.section-head button {
  margin-left: auto;
  color: var(--sig-hi);
  font-size: var(--t-label);
  font-weight: var(--w-med);
}
.section-head button:hover { text-decoration: underline; }

/* Bottom navigation. Labelled, not icon-only. */
.bottom-nav {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-1) 94%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-2);
  width: max-content;
  max-width: calc(100% - 24px);
}
.bottom-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--tap);
  padding: 0 17px;
  border-radius: var(--r-pill);
  color: var(--tx-3);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.bottom-nav button:hover { color: var(--tx-2); }
.bottom-nav button.active { background: var(--ink-3); color: var(--tx-1); }
.bottom-nav .nav-icon { display: grid; place-items: center; }
/* Labels are always shown. A previous width gate hid them under 360px, which
   made the bar read as an icon-only strip on 353px-wide phones. */
.bottom-nav .nav-label {
  display: block;
  font-size: var(--t-label);
  font-weight: var(--w-med);
  line-height: 1;
  white-space: nowrap;
}

/* Pages that own the bottom of the screen hide the nav: the creator page has
   its generate button there, auth is a focused form, and the commerce pages
   and result/template views carry their own action dock. */
body.route-create .bottom-nav,
body.route-auth .bottom-nav,
body.route-subscription .bottom-nav,
body.route-credits .bottom-nav,
body.route-template .bottom-nav,
body.route-result .bottom-nav,
body.route-credit-details .bottom-nav,
body.route-purchase-history .bottom-nav,
body.route-document .bottom-nav,
body.route-search .bottom-nav { display: none; }