/* ============================================================================
   NOVA customer app — screen/layout styles (built on tokens + app.css).
   Desktop: fixed left sidebar + content. Mobile: top bar + bottom nav.
   ========================================================================== */

/* ---- Splash (logo on open) --------------------------------------------- */
.splash { position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 0%, #26396340 0, #0b1424 60%), #0b1424;
  animation:splashOut .6s var(--nova-ease) 1.15s forwards; }
.splash__mark { width:78px; height:78px; border-radius:22px; background:#fff; color:#16233f;
  display:grid; place-items:center; font-family:var(--nova-font-display); font-weight:800; font-size:40px;
  box-shadow:0 24px 70px rgba(0,0,0,.45); animation:pop .7s var(--nova-ease); }
.splash__word { margin-top:18px; color:#fff; letter-spacing:.34em; font-size:12px; font-weight:600;
  opacity:0; animation:fadeUp .5s ease .35s forwards; }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:.9;transform:none} }
@keyframes splashOut { to{opacity:0; visibility:hidden} }

/* ---- Welcome (hero landing) -------------------------------------------- */
.welcome { min-height:100vh; display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(130% 90% at 50% -10%, #28407036 0, transparent 60%),
             linear-gradient(165deg, #21365f 0%, #16233f 46%, #0b1424 100%); }
.welcome__top { display:flex; align-items:center; gap:10px; padding:22px 24px;
  font-family:var(--nova-font-display); font-weight:800; font-size:20px; }
.welcome__mark { width:32px; height:32px; border-radius:9px; background:#fff; color:#16233f;
  display:grid; place-items:center; font-weight:800; }
.welcome__body { flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:4px 26px 8px; max-width:540px; width:100%; margin:0 auto; }
.welcome__illus { width:86%; max-width:330px; margin:0 auto 26px; display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.35)); animation:floatY 4.5s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.welcome h1 { font-family:var(--nova-font-display); font-size:34px; line-height:1.08;
  letter-spacing:-.02em; margin:0 0 10px; }
.welcome .lead { color:rgba(255,255,255,.74); font-size:16px; margin:0 0 24px; }
.pills { display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.pill { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.92); }
.pill .dot { width:28px; height:28px; border-radius:9px; flex:none;
  background:rgba(255,255,255,.12); display:grid; place-items:center; font-size:14px; }
.welcome__actions { display:flex; flex-direction:column; gap:12px; padding:0 26px 34px;
  max-width:540px; width:100%; margin:0 auto; }
.btn-hero { min-height:54px; border-radius:14px; border:0; font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none;
  transition:transform var(--nova-dur-fast) var(--nova-ease); }
.btn-hero:active { transform:translateY(1px); }
.btn-hero--primary { background:#fff; color:#16233f; }
.btn-hero--ghost { background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.24); }
@media (min-width:860px){
  .welcome__body { flex-direction:row-reverse; align-items:center; gap:56px; max-width:1000px; }
  .welcome__illus { margin:0; max-width:440px; }
  .welcome__content { flex:1; }
  .welcome h1 { font-size:46px; }
  .welcome__actions { max-width:1000px; padding-left:26px; }
  .welcome__actions { flex-direction:row; }
  .welcome__actions .btn-hero { min-width:200px; }
}

/* ---- Auth (login / register) ------------------------------------------- */
.auth { min-height:100vh; display:flex; flex-direction:column; background:var(--nova-paper); }
.auth__hero { color:#fff; padding:26px 24px 40px;
  background:radial-gradient(120% 120% at 50% -30%, #28406e 0, #16233f 72%); }
.auth__back { background:none; border:0; color:rgba(255,255,255,.82); font-size:14px;
  cursor:pointer; padding:0; margin-bottom:20px; display:inline-flex; align-items:center; gap:6px; }
.auth__brand { display:flex; align-items:center; gap:10px; font-family:var(--nova-font-display);
  font-weight:800; font-size:20px; }
.auth__brand .nova-brand__mark { background:#fff; color:#16233f; }
.auth__hero h1 { font-family:var(--nova-font-display); font-size:26px; letter-spacing:-.02em; margin:22px 0 2px; }
.auth__hero p { color:rgba(255,255,255,.72); font-size:14px; margin:0; }
.auth__card { flex:1; background:var(--nova-surface); border-radius:24px 24px 0 0; margin-top:-22px;
  padding:28px 24px 60px; width:100%; max-width:480px; margin-left:auto; margin-right:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.10); }
.auth__switch { margin-top:22px; text-align:center; color:var(--nova-ink-muted); font-size:14px; }
.auth .nova-input { min-height:50px; border-radius:12px; }
.auth .nova-btn { min-height:52px; border-radius:12px; font-size:16px; }

/* ---- App layout -------------------------------------------------------- */
.app { display:grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 34px); }
.sidebar { border-right:1px solid var(--nova-hairline); background:var(--nova-surface); padding:var(--nova-space-6) var(--nova-space-4);
  display:flex; flex-direction:column; gap:var(--nova-space-2); position:sticky; top:0; height:calc(100vh - 34px); }
.sidebar .nova-brand { padding:0 var(--nova-space-3) var(--nova-space-4); }
.navlink { display:flex; align-items:center; gap:var(--nova-space-3); padding:10px var(--nova-space-3); border-radius:var(--nova-radius-md);
  color:var(--nova-ink-2); font-weight:500; cursor:pointer; text-decoration:none; }
.navlink:hover { background:var(--nova-surface-2); text-decoration:none; }
.navlink[aria-current="page"] { background:var(--nova-primary-soft); color:var(--nova-ink); font-weight:600; }
.navlink__icon { width:22px; text-align:center; opacity:.85; }
.sidebar__spacer { flex:1; }

.content { padding:var(--nova-space-8); max-width:1040px; }
.topbar-mobile { display:none; }
.bottomnav { display:none; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--nova-space-6); gap:var(--nova-space-4); }
.page-head h1 { font-family:var(--nova-font-display); font-size:var(--nova-fs-h1); letter-spacing:var(--nova-tracking-tight); }
.page-head p { color:var(--nova-ink-muted); font-size:var(--nova-fs-sm); margin-top:2px; }

/* ---- Balance card ------------------------------------------------------ */
.balance-card { background:var(--nova-primary); color:var(--nova-primary-ink); border-radius:var(--nova-radius-lg);
  padding:var(--nova-space-6); box-shadow:var(--nova-shadow-md); }
:root[data-theme="dark"] .balance-card, :root:not([data-theme="light"]) .balance-card { color:#0c1220; }
.balance-card .label { font-size:var(--nova-fs-xs); font-weight:600; letter-spacing:var(--nova-tracking-wide); text-transform:uppercase; opacity:.72; }
.balance-card .amount { font-family:var(--nova-font-display); font-size:2.25rem; font-weight:700; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.balance-card .split { display:flex; gap:var(--nova-space-8); margin-top:var(--nova-space-5); }
.balance-card .split .v { font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }

/* ---- Quick actions ----------------------------------------------------- */
.quick { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--nova-space-3); margin-top:var(--nova-space-5); }
.quick button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--nova-space-4) var(--nova-space-2);
  background:var(--nova-surface); border:1px solid var(--nova-hairline); border-radius:var(--nova-radius-md); cursor:pointer;
  font-size:var(--nova-fs-xs); font-weight:600; color:var(--nova-ink); transition:background var(--nova-dur-fast) var(--nova-ease); }
.quick button:hover { background:var(--nova-surface-2); }
.quick .qi { width:34px; height:34px; border-radius:50%; background:var(--nova-primary-soft); color:var(--nova-primary);
  display:grid; place-items:center; font-size:16px; }

/* ---- Section + grid ---------------------------------------------------- */
.section-title { display:flex; align-items:center; justify-content:space-between; margin:var(--nova-space-8) 0 var(--nova-space-3); }
.section-title h2 { font-size:var(--nova-fs-h3); font-weight:600; }
.section-title a, .link { color:var(--nova-primary); font-size:var(--nova-fs-sm); font-weight:600; cursor:pointer; }
.grid-2 { display:grid; gap:var(--nova-space-6); }
@media (min-width:900px){ .grid-2 { grid-template-columns:1fr 1fr; align-items:start; } }

/* ---- Insight chips / bars --------------------------------------------- */
.headline { padding:var(--nova-space-4); border-left:3px solid var(--nova-primary); background:var(--nova-surface-2);
  border-radius:0 var(--nova-radius-md) var(--nova-radius-md) 0; font-size:var(--nova-fs-sm); }
.bar-row { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:var(--nova-space-3); padding:8px 0; font-size:var(--nova-fs-sm); }
.bar-track { height:8px; background:var(--nova-surface-2); border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; background:var(--nova-primary); border-radius:99px; }
.money-num { font-variant-numeric:tabular-nums; font-weight:600; }
.trend-up { color:var(--nova-danger); font-weight:600; }
.trend-down { color:var(--nova-success); font-weight:600; }

/* ---- Virtual card ------------------------------------------------------ */
.vcard { position:relative; border-radius:var(--nova-radius-lg); padding:var(--nova-space-6); color:#fff; min-height:190px;
  background:linear-gradient(135deg,#1e3155,#16233f 60%,#0f1830); box-shadow:var(--nova-shadow-md); display:flex; flex-direction:column; justify-content:space-between; }
.vcard.frozen { filter:grayscale(.7) opacity(.8); }
.vcard .brand { font-family:var(--nova-font-display); font-weight:700; letter-spacing:.04em; }
.vcard .pan { font-family:var(--nova-font-mono); font-size:1.25rem; letter-spacing:.12em; }
.vcard .row { display:flex; justify-content:space-between; align-items:flex-end; font-size:var(--nova-fs-sm); }
.vcard .cap { font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }

/* ---- Forms ------------------------------------------------------------- */
.form { display:flex; flex-direction:column; gap:var(--nova-space-4); }
.pin-input { letter-spacing:.5em; text-align:center; font-family:var(--nova-font-mono); }

/* ---- Sheet (bottom sheet / modal) ------------------------------------- */
.sheet-backdrop { position:fixed; inset:0; background:rgba(10,10,8,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50;
  animation:fade var(--nova-dur-fast) var(--nova-ease); }
@media (min-width:720px){ .sheet-backdrop { align-items:center; } }
.sheet { background:var(--nova-surface); width:100%; max-width:460px; border-radius:var(--nova-radius-lg) var(--nova-radius-lg) 0 0;
  padding:var(--nova-space-6); box-shadow:var(--nova-shadow-lg); animation:slideup var(--nova-dur-normal) var(--nova-ease); max-height:90vh; overflow:auto; }
@media (min-width:720px){ .sheet { border-radius:var(--nova-radius-lg); } }
.sheet h3 { font-size:var(--nova-fs-h3); font-weight:600; margin-bottom:var(--nova-space-4); }
@keyframes slideup { from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } }
@keyframes fade { from{opacity:0} to{opacity:1} }

/* ---- Toast ------------------------------------------------------------- */
#toast-host { position:fixed; left:50%; bottom:88px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; }
@media (min-width:900px){ #toast-host { bottom:24px; } }
.toast { background:var(--nova-ink); color:var(--nova-paper); padding:10px 16px; border-radius:var(--nova-radius-pill);
  font-size:var(--nova-fs-sm); box-shadow:var(--nova-shadow-md); animation:slideup var(--nova-dur-normal) var(--nova-ease); max-width:88vw; }
.toast.ok { background:var(--nova-success); color:#fff; }
.toast.err { background:var(--nova-danger); color:#fff; }

/* ---- Notification bell ------------------------------------------------- */
.bell { position:relative; cursor:pointer; background:none; border:0; font-size:20px; color:var(--nova-ink-2); }
.bell .dot { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:var(--nova-danger); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width:899px){
  .app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .content { padding:var(--nova-space-4) var(--nova-space-4) 92px; }
  .topbar-mobile { display:flex; align-items:center; justify-content:space-between; padding:var(--nova-space-4);
    position:sticky; top:0; background:var(--nova-paper); z-index:10; }
  .bottomnav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0;
    background:var(--nova-surface); border-top:1px solid var(--nova-hairline); z-index:40; }
  .bottomnav a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0 14px; font-size:10px;
    color:var(--nova-ink-muted); text-decoration:none; }
  .bottomnav a[aria-current="page"]{ color:var(--nova-primary); font-weight:700; }
  .bottomnav .bn-i { font-size:18px; }
  .quick { grid-template-columns:repeat(4,1fr); }
}