/* HẠO NAM AI V2.0.6 — APP FOUNDATION
   Layer 1 owns tokens, reset, typography and the shared blue-purple ambient background. */
:root{
  --bg:#040811;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --text:#fff;
  --text-2:#a9a9af;
  --line:rgba(255,255,255,.10);
  --blue:#0a84ff;
  --blue-2:#59b6ff;
  --green:#30d158;
  --nav-active:#bf5af2;
  --nav-active-hover:#ca7cff;
  --safe-top:max(10px,env(safe-area-inset-top));
  --safe-bottom:max(10px,env(safe-area-inset-bottom));
  --side:18px;
  --radius-card:24px;
  --content-max:1180px;
  --module-max:1040px;
  --motion:cubic-bezier(.22,.8,.2,1);
  --motion-spring:cubic-bezier(.2,.9,.25,1.12);
  --glass-bg:linear-gradient(145deg,rgba(53,53,58,.52),rgba(24,24,28,.52));
  --glass-border:1px solid rgba(255,255,255,.11);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 34px rgba(0,0,0,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{
  margin:0;width:100%;min-height:100%;overflow:hidden;overflow-x:hidden;
  background:var(--bg);color:var(--text);color-scheme:dark;overscroll-behavior:none;
}
body{
  position:relative;margin:0;width:100%;height:100dvh;min-height:100svh;overflow:hidden;overflow-x:hidden;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;
  background:var(--bg);
}
button,input{font:inherit}button{color:inherit}button,a{-webkit-tap-highlight-color:transparent}
.app{
  position:relative;z-index:1;isolation:isolate;width:100%;height:100dvh;min-height:100svh;overflow:hidden;overflow-x:hidden;
  background:
    radial-gradient(70% 42% at -10% -8%,rgba(10,132,255,.16),transparent 64%),
    radial-gradient(64% 42% at 110% 2%,rgba(191,90,242,.12),transparent 66%),
    radial-gradient(78% 36% at -8% 112%,rgba(10,132,255,.13),transparent 67%),
    radial-gradient(74% 36% at 108% 112%,rgba(191,90,242,.11),transparent 69%),
    linear-gradient(180deg,#081421 0%,#040811 35%,#05060c 100%);
}
.app::before{content:none}
.app::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.035) 78%,rgba(0,0,0,.12) 100%);
}
.screen{
  position:absolute;inset:0;z-index:1;display:none;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-x:none;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:calc(var(--safe-top) + 8px) var(--side) calc(92px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom));background:transparent;
}
.screen::-webkit-scrollbar{display:none}.screen.active{display:block}
.head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 18px}
.title{margin:0;font-size:clamp(34px,8vw,46px);line-height:1.03;letter-spacing:-1.5px;font-weight:780}
.build-badge{position:absolute;right:54px;top:5px;padding:4px 6px;border-radius:999px;color:rgba(255,255,255,.66);font-size:9px;line-height:1;font-weight:700;letter-spacing:.2px;background:rgba(35,35,39,.44);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(12px) saturate(145%);backdrop-filter:blur(12px) saturate(145%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);pointer-events:none;user-select:none}
.avatar{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:3px solid var(--blue);color:var(--blue);font-size:21px}
.hero{min-height:280px;margin-bottom:30px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:var(--radius-card);background:radial-gradient(circle at 15% 5%,#78e7ff,transparent 34%),radial-gradient(circle at 90% 18%,#ffd56d,transparent 34%),linear-gradient(145deg,#5e5ce6,#30d158)}
.hero h2{margin:5px 0 8px;font-size:32px;line-height:1.05;letter-spacing:-.8px}.hero p{margin:0 0 16px;color:rgba(255,255,255,.86)}
.section{margin-top:28px}.section h2{margin:0 0 14px;font-size:27px;line-height:1.1;letter-spacing:-.5px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.muted{color:var(--text-2)}.card-title{margin:0}
#homeList,#quoteList,#catalogList,#searchList{min-width:0}
.quote-root,.series-nav,.other-nav{max-width:100%;overscroll-behavior-x:contain;overscroll-behavior-inline:contain}
.app .detail,.app .quote-composer{
  background:
    radial-gradient(82% 44% at -8% -6%,rgba(10,132,255,.15),transparent 62%),
    radial-gradient(74% 40% at 108% 0%,rgba(191,90,242,.11),transparent 64%),
    radial-gradient(72% 30% at -8% 110%,rgba(10,132,255,.09),transparent 70%),
    radial-gradient(70% 30% at 108% 110%,rgba(191,90,242,.08),transparent 72%),
    linear-gradient(180deg,#07121e 0%,#040811 52%,#05060c 100%);
}
@supports(overflow:clip){html,body,.app{overflow-x:clip}}
@supports(height:100svh){html,body,.app{min-height:100svh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}