/* =========================================================
   Creoveya — Professional White/Blue Fintech Design System
   ========================================================= */

:root {
  --white: #ffffff;
  --bg-soft: #f6f9ff;
  --bg-panel: #ffffff;
  --border: #e3e9f5;
  --border-strong: #c9d6ec;

  --blue-900: #0a1f4d;
  --blue-800: #0f2c66;
  --blue-700: #133a85;
  --blue-600: #1a4fb4;
  --blue-500: #2563eb;
  --blue-400: #4f83f2;
  --blue-100: #e8f0fe;
  --blue-50: #f2f6ff;

  --text-primary: #10193a;
  --text-secondary: #4b5875;
  --text-muted: #8794ac;

  --success: #16a34a;
  --success-bg: #e9f9ef;
  --warning: #d97706;
  --warning-bg: #fff6e8;
  --danger: #dc2626;
  --danger-bg: #fdeceb;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 25, 58, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 25, 58, 0.08);
  --shadow-lg: 0 20px 50px rgba(16, 25, 58, 0.12);

  --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { color: var(--blue-900); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 .5em; overflow-wrap: break-word; word-break: break-word; }
p { color: var(--text-secondary); margin: 0 0 1em; overflow-wrap: break-word; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
  padding: .75rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-700); color: #fff; box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--blue-700); }
.btn-outline:hover { background: var(--blue-50); border-color: var(--blue-500); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Nav ---------------- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1180px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: var(--blue-900); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: block;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--text-secondary); font-weight: 500; font-size: .95rem; }
.nav-links a:hover { color: var(--blue-700); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--blue-800); cursor: pointer; }

/* ---------------- Hero (video background) ---------------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 65%); padding: 48px 0 0; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-100); color: var(--blue-700); font-weight: 600; font-size: .8rem;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* Full-bleed hero background video, with the headline/CTA overlaid
   directly on top — replaces the old image carousel. */
.hero-video {
  min-height: 640px; display: flex; align-items: center; padding: 0;
  background: #060e26; /* shows briefly before the video/poster paints */
}
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,14,38,.45) 0%, rgba(6,14,38,.62) 55%, rgba(4,9,24,.85) 100%);
}
.hero-video .hero-content { position: relative; z-index: 2; padding: 100px 0 120px; }
.hero-video .hero-content h1, .hero-video .hero-content p { color: #fff; }
.hero-video .hero-content p { color: rgba(255,255,255,.88); }
.hero-video .hero-eyebrow { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
.btn-outline-light { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); }
.btn-outline-light:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Global live-activity toast: fixed to the viewport bottom-left,
   cycles through many activity lines. */
.live-activity-toast {
  position: fixed; left: 18px; bottom: 18px; z-index: 400;
  background: #fff; border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-lg);
  display: flex; gap: 10px; align-items: flex-start; max-width: 300px;
  border: 1px solid var(--border);
  animation: liveToastIn .4s ease;
}
@keyframes liveToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.live-activity-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-top: 6px; flex-shrink: 0; animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.live-activity-toast strong { display: block; font-size: .78rem; color: var(--text-primary); margin-bottom: 2px; }
.live-activity-toast span { font-size: .78rem; color: var(--text-muted); }
.live-activity-toast .close-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; padding: 0 0 0 6px; margin-left: auto; }
@media (max-width: 640px) { .live-activity-toast { left: 10px; bottom: 10px; max-width: calc(100vw - 20px); } }

/* ---------------- Sections ---------------- */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-soft); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-eyebrow { color: var(--blue-600); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; color: var(--blue-600); font-size: 1.3rem; margin-bottom: 16px;
}

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: 18px; text-align: left; }
label { display: block; font-weight: 600; font-size: .85rem; color: var(--text-primary); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: .95rem; color: var(--text-primary); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
textarea { resize: vertical; min-height: 100px; }

.auth-shell { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-soft); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px; }
.auth-tabs { display: flex; background: var(--bg-soft); border-radius: 999px; padding: 4px; margin-bottom: 28px; }

/* Elements only shown when running inside the desktop app (see
   isDesktopApp() in common.js) — hidden by default on the website. */
.desktop-app-brand, .desktop-app-footer { display: none; }

/* ---------------- Desktop app: standalone sign-in/register screen ----------------
   Applied via the .desktop-app class on <html>, added the instant the page
   loads if it detects it's running inside Electron (see the inline script
   at the top of login.html/register.html, and desktop-app/main.js's
   custom User-Agent). Deliberately different from the website's auth
   page: no "Back to Home" escape hatch, richer full-bleed background,
   and a standalone branded header — reads as a real native app, not a
   browser tab. */
html.desktop-app .auth-web-nav { display: none; }
html.desktop-app .auth-shell {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 10%, #17275e 0%, #0a1230 55%, #060a1c 100%);
  padding: 48px 20px;
}
html.desktop-app .desktop-app-brand {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
html.desktop-app .desktop-app-brand img { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 8px 24px rgba(37,99,235,.45); }
html.desktop-app .desktop-app-brand-text { display: flex; flex-direction: column; }
html.desktop-app .desktop-app-brand-text strong { color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
html.desktop-app .desktop-app-brand-text span { color: #8fa8e0; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
html.desktop-app .auth-card {
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
html.desktop-app .auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-700));
}
html.desktop-app .desktop-app-footer {
  display: block; color: #6c82b8; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; margin-top: 24px; text-align: center;
}
@media (max-width: 480px) {
  html.desktop-app .desktop-app-brand img { width: 40px; height: 40px; }
  html.desktop-app .desktop-app-brand-text strong { font-size: 1.2rem; }
}
.auth-tab { flex: 1; text-align: center; padding: .6rem; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--text-secondary); }
.auth-tab.active { background: var(--blue-600); color: #fff; }

.error-banner { background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 16px; display: none; }
.error-banner.show { display: block; }
.success-banner { background: var(--success-bg); color: var(--success); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 16px; display: none; }
.success-banner.show { display: block; }

/* ---------------- Footer ---------------- */
.footer { background: var(--blue-900); color: rgba(255,255,255,.7); padding: 56px 0 28px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.footer a { color: rgba(255,255,255,.65); font-size: .88rem; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------------- Cookie consent ---------------- */
.cookie-banner {
  position: fixed; bottom: 18px; left: 18px; right: 18px; z-index: 400;
  max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px 26px;
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.cookie-banner.cookie-banner-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.cookie-banner-body { flex: 1 1 280px; min-width: 0; }
.cookie-banner-body strong { display: block; font-size: .95rem; color: var(--text-primary); margin-bottom: 4px; }
.cookie-banner-body p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.cookie-banner-body a { color: var(--blue-600); font-weight: 600; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; justify-content: flex-end; }
@media (max-width: 640px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1 1 auto; }
}

.cookie-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.cookie-pref-row:last-of-type { border-bottom: none; }
.cookie-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle span {
  position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px;
  transition: background .15s ease; cursor: pointer;
}
.cookie-toggle span::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: var(--shadow-sm);
}
.cookie-toggle input:checked + span { background: var(--blue-600); }
.cookie-toggle input:checked + span::before { transform: translateX(20px); }
.cookie-toggle-locked span { background: var(--blue-300, #93b8f5); cursor: not-allowed; opacity: .7; }

/* ---------------- Dashboard shell (user + admin) ---------------- */
.app-shell { display: flex; min-height: 100vh; background: var(--bg-soft); }
.app-sidebar {
  width: 250px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: transform .2s ease;
}
.app-sidebar .brand { padding: 6px 10px 20px; }
.sidebar-close { display: none; align-self: flex-end; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 2px 8px; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-weight: 500; font-size: .92rem; cursor: pointer; border: none; background: none; width: 100%; text-align: left;
}
.sidebar-link:hover { background: var(--blue-50); color: var(--blue-700); }
.sidebar-link.active { background: var(--blue-600); color: #fff; }
.sidebar-link .icon { width: 18px; text-align: center; }
.sidebar-divider { height: 1px; background: var(--border); margin: 12px 6px; }

.app-main { flex: 1; min-width: 0; }
.app-topbar {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 28px;
  background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.app-topbar h1 { font-size: 1.25rem; margin: 0; }
.app-topbar p { margin: 2px 0 0; font-size: .85rem; }
.app-content { padding: 28px; max-width: 1200px; }

.menu-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; color: var(--blue-800); }

.profile-menu-wrap { position: relative; }
.profile-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 999px; }
.profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.profile-dropdown {
  position: absolute; right: 0; top: 48px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); min-width: 190px; padding: 8px; display: none; z-index: 30;
}
.profile-dropdown.open { display: block; }
.profile-dropdown a, .profile-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: var(--radius-sm); border: none; background: none; cursor: pointer; font-size: .9rem; color: var(--text-primary); font-family: var(--font-sans);
}
.profile-dropdown a:hover, .profile-dropdown button:hover { background: var(--blue-50); }

.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.stat-card .label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stat-card .value { font-size: 1.9rem; font-weight: 800; color: var(--blue-900); margin-top: 6px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; padding: 12px 14px; color: var(--text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
tr:last-child td { border-bottom: none; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--blue-100); color: var(--blue-700); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10,25,58,.5); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-muted); }

/* ---------------- Studio ---------------- */
.camera-wrap { position: relative; background: #0a0f1f; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--border); }
.camera-wrap video { width: 100%; height: 100%; object-fit: cover; }
.camera-wrap.mirrored video { transform: scaleX(-1); }
/* Pseudo-fullscreen: a CSS-only "maximize within the page" overlay,
   deliberately NOT using the native Fullscreen API. The native API
   hides the OS taskbar and browser chrome entirely, which is the exact
   thing this is meant to avoid — on a laptop browser the taskbar and
   window minimize/close controls must stay visible, and in the Electron
   desktop app the native Fullscreen API is unreliable/inconsistent
   depending on window configuration. A fixed-position overlay achieves
   the same "fills the screen" effect everywhere (web, mobile, desktop
   app) with completely consistent, first-party-controlled behavior. */
.camera-wrap.pseudo-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  border: none;
  aspect-ratio: unset;
}
.camera-wrap.pseudo-fullscreen video { object-fit: contain; }
body.pseudo-fullscreen-lock { overflow: hidden; }
.exit-fullscreen-btn {
  display: none; position: absolute; top: 14px; right: 14px; z-index: 10000;
  align-items: center; gap: 6px; background: rgba(10,15,31,0.85); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 16px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.camera-wrap.pseudo-fullscreen .exit-fullscreen-btn { display: flex; }
.camera-wrap.pseudo-fullscreen .exit-fullscreen-btn:hover { background: rgba(37,99,235,0.7); }
.camera-overlay-top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; }
.camera-overlay-bottom { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; }
.camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.6); }
.pill-badge { background: rgba(10,15,31,0.8); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill-badge.live { background: var(--danger); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(10,15,31,0.75); border: 1px solid rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { background: rgba(37,99,235,0.55); }
.icon-btn.sm { width: 32px; height: 32px; font-size: .8rem; }

.look-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.look-card { text-align: center; cursor: pointer; width: 76px; }
.look-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 6px; object-fit: cover; border: 2px solid transparent; background: var(--blue-100); display: flex; align-items: center; justify-content: center; color: var(--blue-600); }
.look-card.active .look-avatar { border-color: var(--blue-600); }
.look-card span { font-size: .78rem; color: var(--text-secondary); display: block; }
.look-delete-btn { margin-top: 5px; padding: 2px 6px; border: 0; background: none; color: var(--danger); cursor: pointer; font: inherit; font-size: .7rem; }
.look-delete-btn:hover { text-decoration: underline; }

/* ---------------- Utility ---------------- */
.flex { display: flex; flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .app-sidebar { position: fixed; left: 0; top: 0; z-index: 150; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block; }
  .menu-toggle { display: flex; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-video { min-height: 520px; }
  .hero-video .hero-content { padding: 70px 0 80px; }
  .app-content { padding: 18px; }
  .app-topbar { padding: 14px 16px; }
  .auth-card { padding: 26px; }
  .hero { padding: 32px 0 0; }
  .hero h1 { font-size: 1.9rem !important; }
}
@media (max-width: 480px) {
  .hero-video { min-height: 460px; }
  .hero-video .hero-content { padding: 56px 0 64px; }
  .hero { padding: 24px 0 0; }
  .hero h1 { font-size: 1.6rem !important; }
  .section { padding: 40px 0; }
  .container { padding: 0 16px; }
  .btn { padding: .65rem 1.1rem; font-size: .88rem; }
  .card { padding: 20px; }
  .navbar-inner { padding: 12px 16px; gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: .5rem .8rem; font-size: .8rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-card .value { font-size: 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}