/* =====================================================================
   asklena.co — THỬ NGHIỆM giao diện tối (theo style artifact intro)
   Lớp phủ: load SAU styles.css, remap token + thêm glow/gradient/intro.
   Dùng chung cấu trúc HTML & app.js với bản minimal — chỉ đổi "da".
   ===================================================================== */

/* Font của artifact */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@200;400;500;600;700;800&display=swap");

:root {
  --bg:        #0E0B1A;
  --bg2:       #15112A;
  --card:      rgba(255,255,255,.05);
  --card2:     rgba(255,255,255,.08);
  --ink:       #F5F3FF;
  --muted:     #A79FC9;
  --muted-2:   #6C6490;
  --accent:    #8B7CF8;   /* purple primary */
  --accent-2:  #FF7A59;   /* orange */
  --mint:      #34D9B4;
  --accent-soft: rgba(139,124,248,.18);
  --hairline:  rgba(255,255,255,.12);
  --hairline-2: rgba(255,255,255,.08);
  --mini-fill: rgba(255,255,255,.14);

  --sys: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Be Vietnam Pro", system-ui, sans-serif;
}

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- header ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom-color: var(--hairline); }
.nav-intro { color: var(--accent); font-weight: 600; cursor: pointer; }
.nav-intro:hover { color: var(--accent); text-decoration: underline; }

/* ---------- hero: ambient glows + gradient headline ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero .wrap { position: relative; z-index: 1; }
.hero .glow {
  position: absolute; border-radius: 50%; filter: blur(70px);
  z-index: 0; pointer-events: none;
}
.hero .glow.a { width: 46vmax; height: 46vmax; left: -16vmax; top: -20vmax;
  background: radial-gradient(circle, #5B4BE8 0%, transparent 68%); opacity: .45;
  animation: driftA 26s cubic-bezier(.2,.7,.25,1) infinite alternate; }
.hero .glow.b { width: 38vmax; height: 38vmax; right: -14vmax; bottom: -18vmax;
  background: radial-gradient(circle, #FF7A59 0%, transparent 66%); opacity: .3;
  animation: driftB 30s cubic-bezier(.2,.7,.25,1) infinite alternate; }
.hero .glow.c { width: 32vmax; height: 32vmax; right: 10vmax; top: -10vmax;
  background: radial-gradient(circle, #34D9B4 0%, transparent 70%); opacity: .18;
  animation: driftA 34s cubic-bezier(.2,.7,.25,1) infinite alternate-reverse; }
@keyframes driftA { to { transform: translate(8vmax,10vmax) scale(1.12); } }
@keyframes driftB { to { transform: translate(-9vmax,-7vmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero .glow { animation: none !important; } }

.hero-line {
  background: linear-gradient(120deg, #fff 0%, #C9BEFF 55%, #FFB199 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}
.hero-line b { -webkit-text-fill-color: transparent; font-weight: 800; }

/* ---------- browser frame + input ---------- */
.browser { background: rgba(255,255,255,.04); border-color: var(--hairline-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.browser .bar { background: rgba(255,255,255,.04); border-bottom-color: var(--hairline); }
.browser .urlbar { background: rgba(255,255,255,.04); border-color: var(--hairline); color: var(--muted); }
.browser .dot { background: rgba(255,255,255,.18); }
.browser .dot.r { background: var(--accent-2); }

.inputbox { background: rgba(255,255,255,.05); border-color: var(--hairline); box-shadow: none; }
.inputbox .chev { color: var(--accent); }
.inputbox input { color: var(--ink); caret-color: var(--accent); }
.inputbox .go { background: var(--accent-soft); color: var(--accent); }

/* ---------- polaroid ---------- */
.polaroid { background: rgba(255,255,255,.05); border-color: var(--hairline); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.polaroid .photo { background: var(--bg2); }
.state-tag.ing  { background: rgba(255,255,255,.08); color: var(--muted-2); }
.state-tag.done { background: var(--accent-soft); color: var(--accent); }

/* ---------- buttons ---------- */
.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff;
  box-shadow: 0 14px 34px rgba(139,124,248,.4);
}
.btn-primary:hover { box-shadow: 0 18px 42px rgba(139,124,248,.52); }
.btn-primary .os { color: rgba(255,255,255,.85); }
.btn-ghost { color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- section headings ---------- */
.eyebrow, .kicker { color: var(--accent); }
h2.title { color: var(--ink); }

/* ---------- value / step / price / cards : glass ---------- */
.value, .step, .price-card, .manifesto-teaser, .install-card {
  background: var(--card); border-color: var(--hairline);
}
.value:hover, .step:hover { border-color: var(--hairline); }
.step .n { color: var(--accent); background: var(--accent-soft); }
.chip { background: var(--card); color: var(--accent); border-color: var(--accent-soft); }
.price-big b, .price-sub b, .finewidth b, .hint b { color: var(--accent); }

/* ---------- download picker ---------- */
.dl-version select {
  background-color: rgba(255,255,255,.05); border-color: var(--hairline); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%238B7CF8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn.dl.disabled { filter: grayscale(.6) opacity(.5); }

/* ---------- install guide ---------- */
.install-hint { border-top-color: var(--hairline); }
.install-hint code { background: rgba(0,0,0,.35); border-color: var(--hairline); color: var(--accent); }

/* ---------- divider / footer ---------- */
.divider { background: var(--hairline); }
.site-footer { border-top-color: var(--hairline); color: var(--muted); }

/* ---------- QR modal (solid on dark) ---------- */
.modal { background: #171331; border: 1px solid var(--hairline); }
.modal h3 { color: var(--ink); }

/* =====================================================================
   Intro overlay (iframe của intro.html) — chạy khi vào trang
   ===================================================================== */
body.intro-lock { overflow: hidden; }
#intro-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg);
  opacity: 1; transition: opacity .6s ease;
}
#intro-overlay.hide { opacity: 0; pointer-events: none; }
#intro-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
#intro-skip {
  position: fixed; top: 16px; right: 16px; z-index: 1001;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--sys); font-weight: 600; font-size: 13px; color: #F5F3FF;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 9px 16px; backdrop-filter: blur(6px);
  transition: background .2s;
}
#intro-skip:hover { background: rgba(255,255,255,.2); }