/* ════════════════════════════════════════════════════════
   PayLite — main.css  (navy #0A1628 + cyan #06B6D4 theme)
════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --navy:        #0A1628;
  --navy-light:  #0f2040;
  --navy-border: #1e3a5f;
  --cyan:        #06B6D4;
  --cyan-dark:   #0891b2;
  --cyan-light:  #e0f7fa;
  --teal:        #14b8a6;
  --green:       #22c55e;
  --green-dark:  #16a34a;
  --orange:      #f59e0b;
  --red:         #ef4444;
  --red-dark:    #dc2626;
  --bg:          #f0f4f8;
  --surface:     #ffffff;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --text-2:      #64748b;
  --text-3:      #94a3b8;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --radius:      10px;
  --radius-sm:   6px;
  --navbar-h:    64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--navbar-h);
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 8px;
}

/* Brand */
.brand {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  margin-right: 8px;
}
.brand span { color: var(--cyan); }

/* Spacer */
.nav-inner > .desk-nav { margin-left: auto; }

/* Desktop nav */
.desk-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  background: none;
  border: none;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }

.nav-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.8);
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-link-btn.active { background: rgba(6,182,212,.15); color: var(--cyan); }
.nav-link-btn .material-icons { font-size: 17px; }
.chaos-nav { color: #fca5a5; }
.chaos-nav:hover { color: #fff; background: rgba(239,68,68,.15); }

.nav-btn-outline {
  color: rgba(255,255,255,.9);
  background: none;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
}
.nav-btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.nav-btn-primary {
  color: var(--navy);
  background: var(--cyan);
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, transform .1s;
}
.nav-btn-primary:hover { background: var(--cyan-dark); }

/* User chip */
.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-sm);
  position: relative;
  margin-left: 8px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.user-name { color: #fff; font-size: 13.5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn { color: rgba(255,255,255,.65) !important; width: 28px; height: 28px; }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  display: none;
  z-index: 300;
  overflow: hidden;
  border: 1px solid var(--border);
}
.dropdown.open { display: block; }
.di {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--text); font-size: 14px;
  background: none; border: none; width: 100%; text-align: left;
  transition: background .12s;
}
.di:hover { background: #f8fafc; }
.di .material-icons { font-size: 18px; color: var(--text-2); }
.di-logout .material-icons { color: var(--red); }
.dd-div { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* ── Icon Button ── */
.ib {
  width: 40px; height: 40px;
  border: none; background: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background .15s;
  flex-shrink: 0;
}
.ib:hover { background: rgba(255,255,255,.1); color: #fff; }
.ib .material-icons { font-size: 22px; }
.page-ib { color: var(--text-2) !important; }
.page-ib:hover { background: rgba(0,0,0,.06) !important; color: var(--text) !important; }

/* Mobile hamburger */
.menu-btn { display: none; }

/* Overlay */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
.overlay.open { display: block; }

/* Sidenav */
.sidenav {
  position: fixed; top: 0; left: -280px; width: 260px; height: 100vh;
  background: var(--surface); z-index: 160;
  transition: left .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 16px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
}
.sidenav.open { left: 0; }
.sn-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: var(--navbar-h);
  background: var(--navy); flex-shrink: 0;
}
.sn-brand { font-size: 1.25rem; font-weight: 700; color: #fff; flex: 1; }
.sn-brand span { color: var(--cyan); }
.sn-close { color: rgba(255,255,255,.7); }
.sn-user { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.sn-links { flex: 1; overflow-y: auto; padding: 8px 0; }
.sn-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 16px;
  background: none; border: none; font-size: 14px; color: var(--text);
  text-align: left; transition: background .12s;
}
.sn-btn:hover { background: #f8fafc; }
.sn-btn .material-icons { font-size: 20px; color: var(--text-2); }
.chaos-sn .material-icons { color: var(--red) !important; }
.sn-footer { border-top: 1px solid var(--border); padding: 8px 0; }
.sn-logout .material-icons { color: var(--red) !important; }

/* ════════════════════════════════════════
   PAGES
════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; }

/* Auth pages centred */
.auth-shell.active {
  display: flex;
  min-height: calc(100vh - var(--navbar-h));
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #0c2a4a 60%, #0a3d5c 100%);
  padding: 32px 16px;
}

/* Inner app pages */
.inner-page {
  min-height: calc(100vh - var(--navbar-h));
  background: var(--bg);
}

/* Page containers */
.pc { max-width: 1000px; margin: 0 auto; padding: 28px 20px; }
.pc-md { max-width: 800px; margin: 0 auto; padding: 28px 20px; }

/* Page header */
.p-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.p-title { font-size: 1.5rem; font-weight: 600; color: var(--text); }
.p-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* Section title */
.sec-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 16px; letter-spacing: .01em; }

/* ── Card ── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 24px;
}
.c-head { padding: 20px 20px 0; }
.c-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.c-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.c-body { padding: 16px 20px; }

/* ── Spinner ── */
.sp {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: middle;
}
.sp-dk { border-color: rgba(0,0,0,.12); border-top-color: var(--cyan); }
.sp-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading / Empty states */
.loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 56px 16px;
  color: var(--text-2); font-size: 14px;
}
.empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 16px; color: var(--text-2); text-align: center;
}
.empty .material-icons { font-size: 60px; margin-bottom: 16px; opacity: .35; }
.empty h3 { font-weight: 600; margin-bottom: 8px; color: var(--text); font-size: 1.1rem; }

/* ════════════════════════════════════════
   AUTH CARD
════════════════════════════════════════ */
.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}

.auth-header {
  background: var(--navy);
  padding: 28px 32px 24px;
  text-align: center;
}
.auth-header .logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.auth-header .logo span { color: var(--cyan); }
.auth-header p { color: rgba(255,255,255,.65); font-size: 14px; }

.auth-body { padding: 28px 32px 32px; }

/* Form elements */
.fl { margin-bottom: 16px; }
.fl-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.fi {
  display: block; width: 100%; height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fi:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6,182,212,.12); }
.fi::placeholder { color: #c0ccd8; }

/* Password wrapper */
.pw-wrap { position: relative; }
.pw-wrap .fi { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-3); width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.pw-toggle:hover { background: rgba(0,0,0,.06); }
.pw-toggle .material-icons { font-size: 18px; }

/* Error box */
.err-box {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 12px 14px; color: #b91c1c;
  font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}

/* Auth buttons */
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  background: var(--cyan); color: var(--navy);
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 8px;
  transition: background .15s, transform .1s;
}
.auth-btn:hover { background: var(--cyan-dark); color: #fff; }
.auth-btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }

.demo-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px;
  background: transparent; color: var(--cyan-dark);
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 10px;
  transition: all .15s;
}
.demo-btn:hover { background: var(--cyan); color: var(--navy); }
.demo-btn .material-icons { font-size: 18px; }

.demo-fill-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  padding: 10px;
  background: #f0f9ff; color: var(--cyan-dark);
  border: 1.5px dashed var(--cyan);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; margin-bottom: 18px;
  transition: all .15s;
}
.demo-fill-btn:hover { background: var(--cyan-light); }
.demo-fill-btn .material-icons { font-size: 17px; }

/* Agree row */
.agree-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 8px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.agree-row input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--cyan); cursor: pointer;
}
.agree-row label { cursor: pointer; }

/* Auth switch */
.auth-switch {
  text-align: center; margin-top: 16px;
  color: var(--text-2); font-size: 14px;
}
.auth-switch a { color: var(--cyan-dark); font-weight: 600; }

/* ════════════════════════════════════════
   LANDING PAGE
════════════════════════════════════════ */

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0c2a4a 55%, #0a3d5c 100%);
  min-height: calc(100vh - var(--navbar-h));
  display: flex;
  align-items: center;
  padding: 60px 24px;
  gap: 48px;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-block;
  background: rgba(6,182,212,.15);
  color: var(--cyan);
  font-size: 12px; font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(6,182,212,.3);
  margin-bottom: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-title {
  font-size: 3rem; font-weight: 700;
  color: #fff; line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.7);
  line-height: 1.7; margin-bottom: 32px; max-width: 460px;
}

.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn-primary-lg {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan); color: var(--navy);
  border: none; border-radius: var(--radius-sm);
  padding: 14px 28px; font-family: inherit;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.btn-primary-lg:hover { background: var(--cyan-dark); color: #fff; transform: translateY(-1px); }

.btn-outline-lg {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--radius-sm);
  padding: 13px 28px; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.btn-outline-lg:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }

.hero-stats {
  display: flex; align-items: center; gap: 16px;
}
.stat-num { font-size: 1.5rem; font-weight: 700; color: #fff; }
.stat-lbl { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.stat-div { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

/* Phone mockup */
.hero-visual {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.phone-mockup {
  width: 280px;
  background: var(--navy-light);
  border-radius: 28px;
  padding: 20px 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(6,182,212,.2);
  border: 1px solid var(--navy-border);
}

.pm-screen {}
.pm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.pm-logo { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.pm-logo span { color: var(--cyan); }
.pm-badge {
  background: rgba(34,197,94,.15); color: #4ade80;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 10px; border: 1px solid rgba(34,197,94,.3);
  letter-spacing: .04em;
}
.pm-bal-label { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.pm-bal { font-size: 1.7rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
.pm-actions {
  display: flex; gap: 10px; margin-bottom: 20px;
}
.pm-act {
  flex: 1; background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.2);
  border-radius: 8px; padding: 10px 6px; text-align: center;
  color: var(--cyan); font-size: 10px; font-weight: 600;
}
.pm-act .material-icons { display: block; font-size: 18px; margin-bottom: 4px; }
.pm-txns { display: flex; flex-direction: column; gap: 10px; }
.pm-txn { display: flex; align-items: center; gap: 10px; }
.pm-arrow { font-size: 16px !important; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-arrow.out { background: rgba(239,68,68,.15); color: #f87171; }
.pm-arrow.in { background: rgba(34,197,94,.15); color: #4ade80; }
.pm-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); }
.pm-date { font-size: 10px; color: rgba(255,255,255,.45); }
.pm-amt { margin-left: auto; font-size: 13px; font-weight: 700; }
.pm-amt.out { color: #f87171; }
.pm-amt.in { color: #4ade80; }

/* Trust bar */
.trust-bar {
  background: var(--navy);
  padding: 0;
}
.trust-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
}
.trust-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
}
.trust-icon { font-size: 24px !important; color: var(--cyan); }
.trust-title { font-size: 14px; font-weight: 600; color: #fff; }
.trust-sub { font-size: 12px; color: rgba(255,255,255,.5); }
.trust-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }

/* Features section */
.features-section {
  background: var(--bg);
  padding: 80px 24px;
}
.section-container { max-width: 1100px; margin: 0 auto; text-align: center; }
.section-tag {
  display: inline-block;
  background: rgba(6,182,212,.1); color: var(--cyan-dark);
  font-size: 12px; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}
.section-title { font-size: 2.2rem; font-weight: 700; color: var(--text); margin-bottom: 12px; letter-spacing: -.02em; }
.section-sub { font-size: 1.05rem; color: var(--text-2); max-width: 500px; margin: 0 auto 48px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  text-align: left;
}
.feature-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fc-icon {
  width: 48px; height: 48px;
  background: rgba(6,182,212,.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.fc-icon .material-icons { font-size: 24px; color: var(--cyan-dark); }
.feature-card h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* About section */
.about-section { background: var(--navy); padding: 80px 24px; }
.about-inner {
  display: flex; align-items: center; gap: 60px;
  text-align: left;
}
.about-text { flex: 1; }
.about-text .section-title { color: #fff; }
.about-text .section-tag { background: rgba(6,182,212,.15); color: var(--cyan); }
.about-text p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; }

.about-badges { flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; min-width: 240px; }
.ab-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
}
.ab-icon { font-size: 28px !important; color: var(--cyan); flex-shrink: 0; }
.ab-title { font-size: 14px; font-weight: 600; color: #fff; }
.ab-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* Footer */
.footer { background: #050d1a; padding: 32px 24px; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-brand { font-size: 1.2rem; font-weight: 700; color: #fff; }
.footer-brand span { color: var(--cyan); }
.footer-links { display: flex; gap: 20px; margin-left: auto; }
.footer-links a { color: rgba(255,255,255,.5); font-size: 13px; }
.footer-links a:hover { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-copy { width: 100%; font-size: 12px; color: rgba(255,255,255,.3); margin-top: 8px; }

/* ════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════ */
.welcome-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.welcome-title { font-size: 1.65rem; font-weight: 600; color: var(--text); }
.welcome-sub { font-size: 14px; color: var(--text-2); margin-top: 3px; }

/* KYC badge */
.kyc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.kyc-badge .material-icons { font-size: 16px; }
.kv { background: #dcfce7; color: #15803d; }
.kp { background: #fef3c7; color: #b45309; }
.kf { background: #fee2e2; color: #b91c1c; }

/* Balance card */
.bal-card {
  background: linear-gradient(135deg, var(--navy) 0%, #0c3460 50%, #0a4080 100%);
  color: #fff; border-radius: 14px;
  padding: 28px 28px; margin-bottom: 28px;
  display: flex; justify-content: space-between; align-items: flex-start;
  box-shadow: 0 8px 32px rgba(10,22,40,.35);
  min-height: 130px; position: relative; overflow: hidden;
}
.bal-card::after {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.12) 0%, transparent 70%);
}
.bal-left { flex: 1; }
.bal-label { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.bal-amt { font-size: 2.4rem; font-weight: 700; letter-spacing: -.01em; min-height: 48px; display: flex; align-items: center; }
.bal-id { font-size: 11px; opacity: .55; font-family: monospace; margin-top: 6px; }
.bal-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: relative; z-index: 1; }
.bal-icon { font-size: 52px !important; opacity: .15; }
.st-chip {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(6,182,212,.2); border: 1px solid rgba(6,182,212,.35); color: var(--cyan);
}
.bal-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,182,212,.15); color: var(--cyan);
  border: 1px solid rgba(6,182,212,.35);
  border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.bal-create-btn:hover { background: rgba(6,182,212,.25); }
.bal-create-btn .material-icons { font-size: 16px; }

/* Action cards */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.ac {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 14px;
  text-align: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ac:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--cyan); }
.ac-icon { font-size: 36px !important; color: var(--cyan-dark); display: block; margin-bottom: 10px; }
.ac-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ac-desc { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.chaos-ac { border-color: rgba(239,68,68,.3); }
.chaos-ac:hover { border-color: var(--red); box-shadow: 0 8px 24px rgba(239,68,68,.15); }

/* ════════════════════════════════════════
   HISTORY TABLE
════════════════════════════════════════ */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dt { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.dt th {
  text-align: left; padding: 11px 16px;
  font-weight: 600; font-size: 11px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--border); background: #f8fafc; white-space: nowrap;
}
.dt td { padding: 13px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.dt tr:last-child td { border-bottom: none; }
.dt tr:hover td { background: #f8fafc; }

/* Amount colours */
.ai { color: var(--green-dark); font-weight: 600; }
.ao { color: var(--red); font-weight: 600; }

/* Type badge */
.tbadge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tbadge .material-icons { font-size: 12px; }
.t-in { background: #dcfce7; color: #15803d; }
.t-out { background: #fef3c7; color: #b45309; }

/* Status badge */
.sbadge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
}
.sc { background: #dcfce7; color: #15803d; }
.sp2 { background: #fef3c7; color: #b45309; }
.sf { background: #fee2e2; color: #b91c1c; }

/* Mono code */
code.m {
  font-family: 'Courier New', monospace;
  font-size: 12px; background: #f1f5f9;
  padding: 2px 6px; border-radius: 3px; color: var(--text);
  word-break: break-all;
}

/* Pagination */
.pag {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}
.pb {
  width: 32px; height: 32px; border: none; background: none;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: background .12s;
}
.pb:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.pb:disabled { opacity: .35; cursor: not-allowed; }
.pb .material-icons { font-size: 18px; }

/* ════════════════════════════════════════
   KYC PAGE
════════════════════════════════════════ */
.kyc-sc {
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; color: #fff;
}
.kyc-sc.ver  { background: linear-gradient(135deg, #16a34a, #22c55e); }
.kyc-sc.pend { background: linear-gradient(135deg, #b45309, #f59e0b); }
.kyc-sc.fail { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.kyc-sc-icon { font-size: 48px !important; opacity: .9; flex-shrink: 0; }
.kyc-sc-label { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.kyc-sc-val { font-size: 1.2rem; font-weight: 600; margin-bottom: 2px; }
.kyc-sc-desc { font-size: 13px; opacity: .85; }

/* Toggle */
.tog-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.tog-label { font-size: 14px; color: var(--text); }
.tog-wrap { position: relative; display: inline-block; cursor: pointer; }
.tog-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.tog-track {
  display: block; width: 42px; height: 24px;
  background: #cbd5e1; border-radius: 12px; position: relative;
  transition: background .2s;
}
.tog-thumb {
  position: absolute; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog-wrap input:checked ~ .tog-track { background: var(--red); }
.tog-wrap input:checked ~ .tog-track .tog-thumb { transform: translateX(18px); }
.tog-hint { font-size: 13px; color: var(--text-2); }

/* Big button */
.big-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; background: var(--cyan); color: var(--navy);
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 0 24px; cursor: pointer;
  transition: background .15s; margin-top: 8px;
}
.big-btn:hover { background: var(--cyan-dark); color: #fff; }
.big-btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }

/* Result cards */
.rc {
  border-radius: var(--radius-sm); padding: 18px;
  margin-top: 16px; background: var(--surface);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.rc.ok  { border-left: 4px solid var(--green); }
.rc.er  { border-left: 4px solid var(--red); }
.rc.inf { border-left: 4px solid var(--cyan-dark); }
.r-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.r-head .material-icons { font-size: 20px; }
.ok-head  { color: var(--green-dark); }
.er-head  { color: var(--red); }
.inf-head { color: var(--cyan-dark); }
.dr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
  font-size: 14px; gap: 12px;
}
.dr:last-child { border-bottom: none; }
.dl { color: var(--text-2); font-size: 13px; flex-shrink: 0; }
.obs {
  display: flex; gap: 12px;
  background: #eff6ff; border-radius: var(--radius-sm);
  padding: 12px; margin-top: 14px;
  font-size: 13px; color: #1d4ed8; line-height: 1.6;
}
.obs .material-icons { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════
   PREFERENCES
════════════════════════════════════════ */
.pref-info {
  display: flex; align-items: flex-start; gap: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; color: #1d4ed8;
  margin-bottom: 20px; line-height: 1.5;
}
.pref-info .material-icons { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.pref-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.pref-item:last-child { border-bottom: none; }
.pref-toggle {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0; margin-top: 2px;
}
.pref-tog-wrap { position: relative; cursor: pointer; }
.pref-tog-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.pref-tog-track {
  display: block; width: 42px; height: 24px;
  background: #cbd5e1; border-radius: 12px; position: relative;
  transition: background .2s;
}
.pref-tog-thumb {
  position: absolute; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  top: 3px; left: 3px; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pref-tog-wrap input:checked ~ .pref-tog-track { background: var(--cyan); }
.pref-tog-wrap input:checked ~ .pref-tog-track .pref-tog-thumb { transform: translateX(18px); }
.pref-tog-wrap input:disabled ~ .pref-tog-track { background: #e2e8f0; cursor: not-allowed; opacity: .7; }
.pref-tog-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pref-tog-label.on { color: var(--cyan-dark); }
.pref-tog-label.off { color: var(--text-3); }
.pref-tog-label.locked { color: var(--text-3); }

.pref-text { flex: 1; }
.pref-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.pref-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pref-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .03em; margin-top: 5px;
}
.badge-req { background: #fee2e2; color: #b91c1c; }
.badge-opt { background: #dcfce7; color: #15803d; }

.pref-saved {
  display: flex; align-items: center; gap: 8px;
  background: #dcfce7; border: 1px solid #86efac;
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 14px; font-weight: 600; color: #15803d;
  margin-bottom: 12px;
}
.pref-saved .material-icons { font-size: 18px; }

/* ════════════════════════════════════════
   SEND PAGE
════════════════════════════════════════ */
.sg { display: grid; gap: 24px; }
@media (min-width: 700px) {
  .sg { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ════════════════════════════════════════
   CHAOS LAB
════════════════════════════════════════ */
.ch-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #0c2a4a 100%);
  color: #fff; border-radius: var(--radius);
  padding: 28px; margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.ch-banner-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ch-banner-icon { font-size: 40px !important; opacity: .8; flex-shrink: 0; color: var(--cyan); }
.ch-banner-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; }
.ch-banner-sub { font-size: 13.5px; opacity: .75; line-height: 1.5; }

.wf { display: flex; align-items: center; gap: 8px; }
.ws {
  flex: 1; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 12px 8px; text-align: center;
}
.ws-icon { font-size: 24px !important; color: var(--cyan); margin-bottom: 5px; }
.ws-step { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.ws-label { font-size: 13px; font-weight: 500; }
.ws-arrow { color: rgba(255,255,255,.3); flex-shrink: 0; }
.ws-arrow .material-icons { font-size: 20px; }

.ch-warn {
  display: flex; align-items: center; gap: 12px;
  background: #fef3c7; border: 1.5px solid #fde68a;
  border-radius: var(--radius-sm); padding: 13px 16px;
  margin-bottom: 24px; font-size: 14px; color: #92400e;
}
.ch-warn .material-icons { font-size: 22px; flex-shrink: 0; }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.sc-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  border-top: 4px solid transparent;
  display: flex; flex-direction: column;
}
.sc-card.warn   { border-top-color: var(--orange); }
.sc-card.danger { border-top-color: var(--red); }
.sc-card.info   { border-top-color: var(--cyan-dark); }

.sc-hd { padding: 16px 16px 8px; display: flex; align-items: flex-start; gap: 12px; }
.sc-icon { font-size: 28px !important; flex-shrink: 0; }
.sc-icon.warn   { color: var(--orange); }
.sc-icon.danger { color: var(--red); }
.sc-icon.info   { color: var(--cyan-dark); }
.sc-name { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.sc-svc {
  display: inline-block; font-size: 10px;
  background: #f1f5f9; color: var(--text-2);
  padding: 2px 7px; border-radius: 3px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.sc-bd { padding: 4px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.sc-desc { font-size: 13px; color: var(--text-2); margin-bottom: 8px; line-height: 1.5; }
.sc-exp {
  font-size: 12px; color: var(--text-2);
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px;
  margin-bottom: 12px; line-height: 1.5;
}
.sc-exp strong { color: var(--text); }

.tr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; background: var(--cyan-dark); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 0 14px; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.tr-btn:hover { opacity: .9; }
.tr-btn:disabled { background: #cbd5e1; cursor: not-allowed; opacity: 1; }
.tr-btn .material-icons { font-size: 16px; }
.warn-b   { background: var(--orange); color: #fff; }
.danger-b { background: var(--red); color: #fff; }

.sc-res {
  margin-top: 12px; border-radius: var(--radius-sm);
  padding: 12px; font-size: 13px;
}
.sc-res.ok  { background: #f0fdf4; border: 1px solid #86efac; }
.sc-res.err { background: #fef2f2; border: 1px solid #fecaca; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.p-ok { background: #bbf7d0; color: #14532d; }
.p-er { background: #fecaca; color: #7f1d1d; }
.p-du { background: #dbeafe; color: #1e3a8a; }
.p-ts { background: #ede9fe; color: #4c1d95; }

.dbg {
  margin-top: 10px; background: #f8fafc;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12px;
}
.dbg-title {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.dbg-s { display: flex; gap: 8px; margin-bottom: 4px; line-height: 1.5; }
.dbg-l { font-weight: 700; color: var(--text); min-width: 60px; flex-shrink: 0; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero { flex-direction: column; padding: 48px 20px; text-align: center; }
  .hero-content { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .about-inner { flex-direction: column; }
  .about-badges { width: 100%; }
}

@media (max-width: 768px) {
  .desk-nav { display: none !important; }
  .menu-btn { display: inline-flex !important; }
  .trust-sep { display: none; }
  .trust-inner { gap: 4px; }
  .ac-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wf { flex-direction: column; }
  .ws-arrow { transform: rotate(90deg); }
  .sc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 2.2rem; }
  .section-title { font-size: 1.7rem; }
  .auth-card { border-radius: 10px; }
  .auth-header { padding: 24px 24px 20px; }
  .auth-body { padding: 22px 24px 28px; }
}

@media (max-width: 480px) {
  .p-title { font-size: 1.25rem; }
  .pc, .pc-md { padding: 18px 14px; }
  .bal-amt { font-size: 1.9rem; }
  .ch-banner { padding: 20px; }
}

/* ════════════════════════════════════════════════════════
   KYC BLOCK (register page)
════════════════════════════════════════════════════════ */
.kyc-block {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
}
.kyc-block-title {
  font-size: 14px;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 6px;
}
.kyc-block-sub {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 14px;
  line-height: 1.5;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════
   PRIVACY ACCORDION (register page)
════════════════════════════════════════════════════════ */
.pp-accordion {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin: 18px 0;
}
.pp-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  background: #f8fafc;
  user-select: none;
  gap: 10px;
}
.pp-accordion-header:hover { background: #eff6ff; }
.pp-accordion-header-left { display: flex; align-items: center; gap: 10px; }
.pp-accordion-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #0A1628;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.pp-accordion-title { font-size: 13px; font-weight: 700; color: #0A1628; }
.pp-accordion-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.pp-accordion-chevron { font-size: 13px; color: #64748b; transition: transform .2s; }
.pp-accordion-chevron.open { transform: rotate(180deg); }
.pp-accordion-body { display: none; border-top: 1.5px solid #e2e8f0; }
.pp-accordion-body.open { display: block; }
.pp-body-note {
  font-size: 12.5px;
  color: #64748b;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   CONSENT ITEMS
════════════════════════════════════════════════════════ */
.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .15s;
}
.consent-item:last-child { border-bottom: none; }
.consent-item:hover { background: #f8fafc; }
.consent-item.checked { background: #f0fdf4; }
.consent-item.checked:hover { background: #dcfce7; }
.consent-item input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #06B6D4;
  cursor: pointer;
}
.consent-item-text {
  flex: 1;
  font-size: 13px;
  color: #0A1628;
  line-height: 1.5;
}
.consent-item-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.consent-item-text > span {
  display: block;
  color: #64748b;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.req-badge {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.opt-badge {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.consent-why-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #06B6D4;
  cursor: pointer;
  font-weight: 600;
  margin-top: 4px;
}
.consent-why-toggle:hover { text-decoration: underline; }
.why-chev { font-size: 10px; transition: transform .2s; }
.why-chev.open { transform: rotate(180deg); }
.consent-why {
  display: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.6;
}
.consent-why.open { display: block; }
.consent-why p { margin-bottom: 10px; }
.consent-why-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.consent-why-dl dt { font-weight: 700; color: #0A1628; white-space: nowrap; }
.consent-why-dl dd { margin: 0; color: #374151; }
.lb-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.lb-legal  { background: #fee2e2; color: #991b1b; }
.lb-contract { background: #dbeafe; color: #1e40af; }
.lb-legit  { background: #fef3c7; color: #92400e; }
.lb-consent { background: #d1fae5; color: #065f46; }
.lb-special { background: #ede9fe; color: #6b21a8; }

/* ════════════════════════════════════════════════════════
   PRIVACY NOTICE PAGE
════════════════════════════════════════════════════════ */
.notice-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.notice-wrap h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #0A1628;
  margin-bottom: 8px;
}
.notice-wrap h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0A1628;
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e2e8f0;
}
.notice-wrap h3 { font-size: 1rem; font-weight: 700; color: #0A1628; margin: 20px 0 8px; }
.notice-wrap p { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 12px; }
.notice-wrap ul, .notice-wrap ol { padding-left: 22px; margin-bottom: 14px; }
.notice-wrap li { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 6px; }
.notice-wrap a { color: #06B6D4; }
.notice-meta {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 20px;
}
.notice-highlight {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 14px;
  color: #1e40af;
  line-height: 1.6;
  margin-bottom: 24px;
}
.notice-summary {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 20px 0 28px;
}
.notice-summary-label {
  font-size: 11px;
  font-weight: 700;
  color: #06B6D4;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.notice-table-wrap { overflow-x: auto; margin: 16px 0 24px; }
.notice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 780px;
}
.notice-table thead tr { background: #0A1628; color: #fff; }
.notice-table th { text-align: left; padding: 10px 12px; font-weight: 700; }
.notice-table td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.notice-table small { font-size: 11.5px; color: #64748b; display: block; margin-top: 2px; }
.nt-row-red    { background: #fef2f2; }
.nt-row-blue   { background: #eff6ff; }
.nt-row-amber  { background: #fefce8; }
.nt-row-green  { background: #f0fdf4; }
.nt-row-purple { background: #faf5ff; }
.nt-no  { color: #991b1b; font-weight: 600; }
.nt-yes { color: #166534; font-weight: 600; }
.notice-color-key {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0 24px;
  font-size: 13px;
}
.notice-color-key p { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
.notice-color-key ul { margin: 0; padding-left: 0; list-style: none; }
.notice-color-key li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: #374151; }
.ck-red    { display:inline-block; width:12px; height:12px; background:#fee2e2; border-radius:2px; flex-shrink:0; }
.ck-blue   { display:inline-block; width:12px; height:12px; background:#dbeafe; border-radius:2px; flex-shrink:0; }
.ck-amber  { display:inline-block; width:12px; height:12px; background:#fef3c7; border-radius:2px; flex-shrink:0; }
.ck-green  { display:inline-block; width:12px; height:12px; background:#dcfce7; border-radius:2px; flex-shrink:0; }
.ck-purple { display:inline-block; width:12px; height:12px; background:#ede9fe; border-radius:2px; flex-shrink:0; }
.notice-back-row { margin-top: 40px; }

/* ════════════════════════════════════════════════════════
   PREFERENCES PAGE
════════════════════════════════════════════════════════ */
.prefs-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.prefs-wrap h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0A1628;
  margin-bottom: 8px;
}
.prefs-sub { font-size: 14px; color: #64748b; margin-bottom: 24px; line-height: 1.6; }
.prefs-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 20px;
}
.prefs-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; }
.prefs-pn-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
}
.prefs-pn-box strong { display: block; color: #166534; font-weight: 700; }
.prefs-pn-box span { color: #64748b; }

/* pref items rendered by preferences.js — reuse .consent-item styles */
#pref-list .consent-item { border: 1.5px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px; border-bottom: 1.5px solid #e2e8f0; }
#pref-list .consent-item:hover { background: #f8fafc; }
#pref-list .consent-item.checked { background: #f0fdf4; border-color: #bbf7d0; }

.prefs-save-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: #0A1628;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.prefs-save-btn:hover { background: #1e3a5f; }
.prefs-saved-msg {
  text-align: center;
  padding: 12px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  color: #166534;
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
}
.prefs-privacy-link {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
}
.prefs-privacy-link a { color: #06B6D4; text-decoration: none; }
.prefs-privacy-link a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .notice-wrap, .prefs-wrap { padding: 24px 16px 60px; }
  .notice-wrap h1, .prefs-wrap h1 { font-size: 1.5rem; }
}

/* ── DSR Page ── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  font-family: inherit;
  transition: border-color .15s;
  outline: none;
}
.form-input:focus { border-color: #06B6D4; box-shadow: 0 0 0 3px rgba(6,182,212,.1); }
.form-input::placeholder { color: #9ca3af; }
.form-error {
  font-size: 13px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  padding: 10px 14px;
  margin-top: 4px;
}

.dsr-form-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.dsr-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.dsr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}
.dsr-type-label { font-size: 14px; font-weight: 600; color: #0f172a; display: block; }
.dsr-id { font-size: 11px; color: #64748b; margin-top: 2px; display: block; }
.dsr-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dsr-desc-text { font-size: 13px; color: #475569; margin: 4px 0 8px; }
.dsr-meta { font-size: 11px; color: #64748b; margin-bottom: 12px; }
.dsr-timeline { display: flex; gap: 8px; flex-wrap: wrap; }
.dsr-tl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
}
.dsr-tl-item.done { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.dsr-tl-item.done .material-icons { font-size: 14px; }
.dsr-tl-item.pending { background: #f8fafc; color: #94a3b8; border: 1px solid #e2e8f0; }
.dsr-tl-item.pending .material-icons { font-size: 14px; }
.prefs-saved-msg { color: #166534; }

/* ════════════════════════════════ ADMIN PANEL — LIGHT THEME ════════════════════════════════ */
.adm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.adm-header-title { display:flex; align-items:center; gap:14px; }
.adm-header-icon { font-size:36px!important; color:#7c3aed; }
.adm-header-title h1 { margin:0; font-size:1.6rem; color:#111827; }
.adm-subtitle { margin:4px 0 0; color:#6b7280; font-size:0.85rem; }

/* Stats */
.adm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.adm-stat-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.adm-stat-icon { width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.adm-stat-icon .material-icons { color:#fff; font-size:22px!important; }
.adm-stat-val { font-size:1.5rem; font-weight:700; color:#111827; line-height:1; }
.adm-stat-lbl { font-size:0.75rem; color:#6b7280; margin-top:4px; }

/* Tabs */
.adm-tabs { display:flex; gap:0; border-bottom:2px solid #e5e7eb; margin-bottom:0; }
.adm-tab { background:none; border:none; cursor:pointer; padding:11px 20px; font-size:0.88rem; font-weight:500; color:#6b7280; display:flex; align-items:center; gap:6px; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.adm-tab .material-icons { font-size:17px!important; }
.adm-tab:hover { color:#374151; }
.adm-tab.active { color:#7c3aed; border-bottom-color:#7c3aed; font-weight:600; }

/* Panes */
.adm-pane { background:#fff; border:1px solid #e5e7eb; border-top:none; border-radius:0 0 10px 10px; padding:20px; box-shadow:0 1px 4px rgba(0,0,0,.04); }

/* Toolbar */
.adm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.adm-count { font-size:0.82rem; color:#6b7280; flex:1; font-weight:500; }
.adm-search-wrap { display:flex; align-items:center; gap:6px; background:#f9fafb; border:1px solid #d1d5db; border-radius:7px; padding:6px 12px; min-width:260px; }
.adm-search-wrap .material-icons { color:#9ca3af; font-size:18px!important; }
.adm-search { background:none; border:none; outline:none; color:#111827; font-size:0.85rem; width:100%; }
.adm-search::placeholder { color:#9ca3af; }

/* Table */
.adm-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.adm-table th { text-align:left; padding:10px 12px; font-size:0.73rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; border-bottom:2px solid #e5e7eb; white-space:nowrap; background:#f9fafb; }
.adm-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#374151; vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr:hover td { background:#f9fafb; }

/* User cell */
.adm-user-cell { display:flex; align-items:center; gap:10px; }
.adm-av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:700; flex-shrink:0; }
.adm-uname { font-weight:600; color:#111827; font-size:0.85rem; }
.adm-uemail { font-size:0.78rem; color:#6b7280; }
.adm-bal { font-weight:600; color:#059669; }

/* Badges */
.adm-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:10px; font-size:0.72rem; font-weight:600; white-space:nowrap; }
.adm-badge .material-icons { font-size:12px!important; }
.adm-badge-ok   { background:#d1fae5; color:#065f46; }
.adm-badge-warn { background:#fef3c7; color:#92400e; }
.adm-badge-err  { background:#fee2e2; color:#991b1b; }
.adm-badge-blue { background:#dbeafe; color:#1e40af; }
.adm-badge-purple { background:#ede9fe; color:#5b21b6; }
.adm-badge-teal { background:#ccfbf1; color:#0f766e; }
.adm-badge-pink { background:#fce7f3; color:#9d174d; }
.adm-badge-gray { background:#f3f4f6; color:#374151; }

/* DSR action type column */
.adm-req-type { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-size:0.78rem; font-weight:600; white-space:nowrap; }
.adm-req-erasure  { background:#fee2e2; color:#991b1b; }
.adm-req-access   { background:#dbeafe; color:#1e40af; }
.adm-req-portability { background:#d1fae5; color:#065f46; }
.adm-req-correction { background:#fef3c7; color:#92400e; }
.adm-req-consent-granted  { background:#d1fae5; color:#065f46; }
.adm-req-consent-withdrawn { background:#fee2e2; color:#991b1b; }
.adm-req-completed { background:#f3f4f6; color:#374151; }
.adm-req-unknown  { background:#f3f4f6; color:#6b7280; }

/* State */
.adm-loading { text-align:center; padding:32px; color:#9ca3af; }
.adm-empty   { text-align:center; padding:32px; color:#9ca3af; font-style:italic; }

/* View button */
.adm-view-btn { background:#ede9fe; border:none; cursor:pointer; color:#5b21b6; border-radius:6px; padding:5px 10px; font-size:0.78rem; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.adm-view-btn .material-icons { font-size:14px!important; }
.adm-view-btn:hover { background:#ddd6fe; }

/* Reports */
.adm-reports-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.adm-report-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:24px; cursor:pointer; transition:border-color .15s,box-shadow .15s; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.adm-report-card:hover { border-color:#7c3aed; box-shadow:0 4px 16px rgba(124,58,237,.1); }
.adm-report-icon { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.adm-report-icon .material-icons { color:#fff; font-size:26px!important; }
.adm-report-card h3 { margin:0; font-size:0.95rem; font-weight:700; color:#111827; }
.adm-report-card p { margin:0; font-size:0.8rem; color:#6b7280; line-height:1.5; }
.adm-dl-btn { background:#7c3aed; border:none; cursor:pointer; color:#fff; border-radius:7px; padding:8px 16px; font-size:0.82rem; display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.adm-dl-btn .material-icons { font-size:16px!important; }
.adm-dl-btn:hover { background:#6d28d9; }

/* Nav highlight */
.admin-nav { color:#7c3aed!important; }
.admin-nav.active { background:rgba(124,58,237,.08)!important; color:#7c3aed!important; }
.admin-sn { color:#7c3aed!important; }

/* Modal override for light */
#adm-user-modal > div { background:#fff!important; border:1px solid #e5e7eb; box-shadow:0 20px 60px rgba(0,0,0,.2); }
#adm-modal-title { color:#111827!important; }
#adm-modal-body { color:#374151; }
#adm-user-modal button[onclick="_closeAdminModal()"] { color:#6b7280!important; }

@media(max-width:900px) { .adm-stats { grid-template-columns:repeat(2,1fr); } .adm-reports-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .adm-stats { grid-template-columns:1fr 1fr; } .adm-tab span.material-icons + * { display:none; } }