/* NovaPush light theme — calm, editorial SaaS workspace (inspired by modern creator tools). */
:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-2: #eef2f8;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-2: #f8faff;
  --line: #e5eaf2;
  --line-strong: #d6deeb;
  --text: #192338;
  --muted: #66738a;
  --muted-2: #8390a5;
  --blue: #4f46e5;
  --blue-deep: #3659d9;
  --cyan: #0891b2;
  --purple: #7652d6;
  --violet: #7652d6;
  --green: #16885f;
  --orange: #b65d13;
  --pink: #c23f78;
  --danger: #c43c52;
  --shadow: 0 8px 28px rgba(31, 48, 78, .06);
  --shadow-lg: 0 20px 60px rgba(31, 48, 78, .12);
  --glow-blue: 0 0 24px rgba(79, 70, 229, .12);
  --grad-primary: linear-gradient(135deg, #5148e5 0%, #7652d6 100%);
  --grad-accent: linear-gradient(135deg, #5148e5 0%, #7652d6 100%);
  --grad-aurora: linear-gradient(120deg, rgba(79,70,229,.045), rgba(14,165,233,.035));
}
html, body { background-color: var(--bg); color: var(--text); }
body { background: #f5f7fb; color: #192338; }
.app-shell { background: radial-gradient(ellipse 55% 35% at 80% 0%, rgba(116, 96, 224, .055), transparent 70%), #f5f7fb; }
.sidebar { background: rgba(255,255,255,.96); border-right-color: #e7ebf2; box-shadow: 4px 0 20px rgba(32,45,70,.025); }
.brand { color: #172238; }
.brand small { color: #65728a; }
.workspace-switcher { background: #f7f9fc; border-color: #e8edf4; }
.primary-nav a { color: #5b687d; }
.primary-nav a:hover { color: #283550; background: #f2f4ff; }
.primary-nav a.is-active { color: #4338ca; background: #f0efff; box-shadow: inset 3px 0 #5b50df; }
.nav-icon, .is-active .nav-icon { color: #697790; }
.primary-nav a.is-active .nav-icon { color: #5148d8; }
.nav-label, .eyebrow { color: #65728a !important; }
.sidebar-footer { border-color: #e7ebf2; }
.profile-mini:hover { background: #f3f5f9; }
.main-content { color: #192338; }
.topbar h1, h1, h2, h3, h4, strong { color: inherit; }
.muted, .lead-copy, .text-secondary { color: #66738a !important; }
.icon-button { background: #fff; color: #627087; border-color: #e1e7f0; }
.icon-button:hover { background: #f6f7fc; color: #312e81; border-color: #cfd7e6; }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 5px 14px rgba(81,72,229,.18); }
.btn-primary:hover { color: #fff; box-shadow: 0 8px 20px rgba(81,72,229,.24); }
.btn-secondary, .btn-outline-light { background: #fff !important; color: #37445b !important; border: 1px solid #dce3ed !important; }
.btn-secondary:hover, .btn-outline-light:hover { background: #f5f7fb; color: #222e44; border-color: #cbd5e3; }
.btn-outline-danger { color: #b9384d; border-color: #f0cbd1; }
.btn-danger-soft { color: #b9384d; background: #fff3f4; border-color: #f4d9dd; }
.text-link { color: #4f46d5; }
.text-link:hover { color: #342bb4; }
.panel, .card, .glass-card, .feature-card, .benefit-card, .media-card, .surface {
  color: #202c42 !important; background: #fff !important; border: 1px solid #e5eaf2 !important;
  box-shadow: 0 5px 22px rgba(31,48,78,.045) !important; backdrop-filter: none !important;
}
.panel:hover, .stat-card:hover, .media-card:hover { border-color: #d5ddec !important; }
.panel h1, .panel h2, .panel h3, .panel h4, .card h1, .card h2, .card h3, .card h4 { color: #1e293b; }
.stat-card, .stat-primary { background: #fff !important; border: 1px solid #e5eaf2 !important; color: #1e293b !important; box-shadow: 0 5px 22px rgba(31,48,78,.045) !important; }
.stat-card::after { display: none; }
.stat-card strong { background: none; color: #1d2940; -webkit-text-fill-color: #1d2940; }
.stat-label, .stat-trend-label, .table thead th { color: #65728a !important; }
.quick-actions a, .workspace-switcher, .account-row, .connection-row { color: #26344b; }
.quick-actions a { background: #fff; border-color: #e5eaf2; }
.quick-actions a:hover { background: #fafaff; border-color: #d6d5f4; }
.account-row, .connection-row, .table-person { background: #fff; }
.status-pill { background: #f1f4f8; color: #59677e; }
.status-pill.connected { color: #13734f; background: #eaf8f1; border-color: #c8ecda; }
.status-pill.pending { color: #97500f; background: #fff5e8; border-color: #f5dfbd; }
.status-pill.expired, .status-pill.error { color: #a82f45; background: #fff0f1; border-color: #f1d1d6; }
.date-chip, .setup-status { color: #58667c; background: #fff; border-color: #e2e8f0; }
.search-field { background: #fff; color: #68758a; border-color: #dfe5ee; }
.search-field input { color: #26344b !important; }
.form-control, .form-select, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], input[type=date], input[type=datetime-local], textarea, select {
  color: #202c42 !important; background: #fff !important; border-color: #dce3ed !important; box-shadow: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #96a1b2 !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { background: #fff !important; color: #202c42 !important; border-color: #8278e6 !important; box-shadow: 0 0 0 3px rgba(99,91,219,.12) !important; }
.form-label, label { color: #435169; }
.form-text { color: #77849a; }
select option { color: #202c42; background: #fff; }
.table, .table > :not(caption) > * > *, .table td, .table th { color: #334158; border-color: #e8edf3; }
.table > :not(caption) > * > * { background-color: transparent; }
.table thead th { color: #77849a !important; }
.table tbody tr:hover { background: #f7f8fc; }
.table-light, .table-dark { color: #334158 !important; background: #f7f9fc !important; }
.alert, .app-alert { color: #3d4b61; background: #f5f8fc; border-color: #e1e8f1; }
.alert-success, .app-alert:not(.alert-danger) { color: #176344; background: #edf8f2; border-color: #ceeade; }
.alert-danger { color: #a13245; background: #fff1f2; border-color: #f2d1d6; }
.alert-warning { color: #87500f; background: #fff7e9; border-color: #f1dfbd; }
.alert-info { color: #185b79; background: #eef8fc; border-color: #d2eaf3; }
.dropzone { color: #4b5a71; background: radial-gradient(circle at 50% 32%, rgba(99,91,219,.035), transparent 42%), #fbfcff; border-color: #c9d2e2; }
.dropzone.dragging { background-color: #f0efff; }
.upload-gate { color: #334158; background: linear-gradient(135deg,#f1f3ff,#f7f5ff); border-color: #dedcf7; }
.platform-toggles, .pt-item, .hashtag-field { color: #344258; background: #f8f9fc !important; border-color: #e4e9f1; }
.pt-item:hover { background: #f2f1ff !important; }
.pt-format-select { color: #29364d !important; background-color: #fff !important; border-color: #dce3ed !important; }
.pt-format-select option { background: #fff; color: #29364d; }
.cp-chip { color: #46536a; background: #f7f9fc; border-color: #e3e8f0; }
.connected-platforms-bar { background: #eff9f4; border-color: #d4ecdf; }
.mobile-nav { background: rgba(255,255,255,.97); border-color: #e4e9f0; box-shadow: 0 -5px 20px rgba(31,48,78,.05); }
.mobile-nav a { color: #758198; }
.mobile-nav a.is-active, .mobile-nav a.active { color: #5148d5; }
.site-footer { color: #7b879a; border-color: #e4e9f0; }
.site-footer a:hover { color: #3730a3; }
.np-toast { color: #26344b; background: rgba(255,255,255,.98); border-color: #e1e6ef; box-shadow: 0 12px 38px rgba(31,48,78,.16); }
.np-toast-body span { color: #59677c; }
.np-toast-close { color: #738099; }

/* Sign-in and public pages share the same bright, polished visual language. */
.auth-body, .error-body { color: #202c42; background: radial-gradient(ellipse at 15% 10%, rgba(99,91,219,.09), transparent 32%), #f5f7fb !important; }
.auth-card { color: #202c42; background: rgba(255,255,255,.96) !important; border-color: #e4e8f0 !important; box-shadow: 0 20px 60px rgba(31,48,78,.12) !important; backdrop-filter: blur(12px); }
.auth-card h2, .auth-promo h1, .auth-promo h2, .auth-promo p { color: #202c42; }
.auth-foot { color: #6b778c; }
.auth-foot a { color: #4f46d5; }
.landing-body { color: #202c42; background: radial-gradient(ellipse at 75% 0%, rgba(108,94,220,.08), transparent 34%), #f7f8fc !important; }
.landing-header { background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(225,230,239,.7); }
.landing-header .brand, .landing-header .brand small { color: #202c42; }
.landing-nav a { color: #526078; }
.landing-nav a:hover { color: #3730a3; }
.landing-hero-copy h1, .landing-hero-copy p, .landing-features h2, .landing-how h2 { color: #202c42; }
.landing-hero-copy .eyebrow { color: #5148ca; background: #f0efff; border-color: #dedcfb; }
.landing-trust { color: #59677e; }
.landing-steps > div { color: #334158; background: #fff; border-color: #e5eaf2; box-shadow: 0 5px 22px rgba(31,48,78,.045); }
.landing-footer { color: #69768b; border-color: #e4e9f0; }
.landing-footer .brand { color: #202c42; }
.about-head .brand, .about-hero h1 { color: #202c42 !important; }
.about-back { color: #5148d5; }
.about-back:hover { color: #3730a3; }
.error-body h1 { color: #202c42; }
.error-body p { color: #66738a; }
/* Delicate motion system: short, low-distance animations with no layout jank. */
@keyframes npPageEnter { from { opacity: .82; } to { opacity: 1; } }
@keyframes npSoftRise { from { opacity: .55; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes npModalOut { to { opacity: 0; } }
@keyframes npModalCardOut { to { opacity: .82; transform: translateY(8px) scale(.985); } }
body { animation: npPageEnter .34s ease-out both; }
.main-content, .landing-hero, .auth-card, .about-shell { animation: npSoftRise .42s cubic-bezier(.2,.7,.2,1) both; }
.topbar { animation: npSoftRise .42s .04s cubic-bezier(.2,.7,.2,1) both; }
.stat-card, .panel, .media-card { animation: npSoftRise .38s .08s cubic-bezier(.2,.7,.2,1) both !important; }
.stat-card:nth-child(2), .panel:nth-child(2) { animation-delay: .13s !important; }
.stat-card:nth-child(3), .panel:nth-child(3) { animation-delay: .18s !important; }
a, button, .btn, .icon-button, .quick-actions a, .pt-item, .account-row, .connection-row, .landing-steps > div, .media-card, .panel, .stat-card {
  transition: color .18s ease, background-color .2s ease, border-color .2s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
}
.btn:not(:disabled):hover, .icon-button:hover, .quick-actions a:hover, .landing-steps > div:hover { transform: translateY(-2px); }
.media-card:hover, .stat-card:hover, .panel:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(31,48,78,.09) !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(91,80,223,.28); outline-offset: 3px; }
.modal-overlay { transition: opacity .18s ease, background-color .18s ease; }
.modal-overlay.is-open { animation: npPageEnter .18s ease-out both; }
.modal-overlay.is-closing { animation: npModalOut .18s ease-in both; pointer-events: none; }
.modal-overlay.is-closing .modal-card { animation: npModalCardOut .18s ease-in both; }
.np-alert-fadeout { opacity: 0 !important; transform: translateY(-5px); transition: opacity .22s ease, transform .22s ease !important; }
.net-splash {
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(123,112,222,.08), rgba(247,248,252,.97)),
              radial-gradient(circle at 30% 20%, rgba(14,165,233,.045), transparent 40%),
              #f7f8fc !important;
}
.net-ring.r1 { border-color: rgba(99,91,219,.14); }
.net-ring.r2 { border-color: rgba(124,92,210,.16); }
.net-ring.r3 { border-color: rgba(14,165,233,.12); }
.net-node { background: rgba(255,255,255,.92) !important; border-color: rgba(124,92,210,.2) !important; box-shadow: 0 8px 24px rgba(31,48,78,.12), inset 0 0 0 1px rgba(255,255,255,.7) !important; }
/* Keep the loading transition consistent with the light UI and avoid the old
   dark, blurry full-screen overlay obscuring usable content. */
.np-splash {
  background: #f5f7fb !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.np-splash-glow { filter: none !important; opacity: .12 !important; }
.np-splash-logo { filter: none !important; }
.np-splash-name { color: #202c42 !important; }
.np-splash-status { color: #526078 !important; background: #fff !important; border-color: #e4e9f0 !important; }
.auth-orb { display: none !important; }

@media (max-width: 760px) {
  .sidebar { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}