/* ═══════════════════════════════════════════════════════════════════
   UNITED INDEPENDENCE — FINAL PALETTE v10.0
   Navy · Orange · Green · Cream
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Navy ramp ─────────────────────────────────────── */
  --navy-bg:     #0A1628;
  --navy-nav:    #132240;
  --navy-card:   #1E3A5F;
  --navy-border: #2A527A;
  --navy-hover:  #3D6E96;

  /* ── Orange ramp ───────────────────────────────────── */
  --or-tint:    #FFF0DB;
  --or-mid:     #FFB347;
  --or-brand:   #F5921E;
  --or-dark:    #C46D08;

  /* ── Green ramp ────────────────────────────────────── */
  --gr-tint:    #E8F4EC;
  --gr-mid:     #5BB37F;
  --gr-dark:    #2D7A4F;
  --gr-deep:    #1A5235;

  /* ── Neutral ramp ──────────────────────────────────── */
  --cream:      #F4F1EA;
  --white:      #FFFFFF;
  --cloud:      #C8D4E0;
  --ash:        #9AA5B4;
  --dusk:       #3D5166;

  /* ── Semantic ──────────────────────────────────────── */
  --success:    #2D7A4F;
  --success-bg: #E8F4EC;
  --warning:    #F5921E;
  --danger:     #D94040;
  --danger-bg:  rgba(217,64,64,.12);
  /* ── Extended semantic tokens ───────────────────── */
  --color-info:     #4F9CF9;
  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #DC2626;
  --text-primary:   rgba(255,255,255,1);
  --text-secondary: rgba(255,255,255,.78);
  --text-muted:     rgba(255,255,255,.48);
  --surface-3:      #2A527A;

  --info:       #3D6E96;
  --info-bg:    rgba(61,110,150,.15);

  /* ── Aliases for existing components ──────────────── */
  --bg:         var(--navy-bg);
  --surface:    var(--navy-card);
  --surface-2:  #162D4A;
  --ink:        var(--white);
  --slate:      var(--cloud);
  --muted:      var(--ash);
  --subtle:     var(--dusk);
  --border:     var(--navy-border);
  --border-light: rgba(42,82,122,.6);

  --font:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container:    1240px;
  --section-pad:  5rem;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.35);
  --shadow-md:  0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.5);
  --shadow-or:  0 8px 28px rgba(245,146,30,.25);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:120ms; --t-base:180ms;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--navy-bg);color:var(--white);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
ul{list-style:none}

/* ── Layout ──────────────────────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:var(--section-pad) 0}
.section-sm{padding:2.5rem 0}
.section-lg{padding:7rem 0}

/* ── Typography ──────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--white);line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem)}
h3{font-size:clamp(1.125rem,2vw,1.5rem)}
h4{font-size:1rem;font-weight:600}
p{color:var(--cloud);line-height:1.75}
.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}
.text-muted{color:var(--ash)}.text-subtle{color:var(--dusk)}.text-center{text-align:center}

.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or-brand);background:rgba(245,146,30,.12);padding:4px 12px;border-radius:var(--r-full);margin-bottom:1rem;border:1px solid rgba(245,146,30,.3)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.625rem 1.375rem;border-radius:var(--r-md);font-size:.9rem;font-weight:600;font-family:var(--font);border:1.5px solid transparent;transition:all var(--t-base) var(--ease);white-space:nowrap;line-height:1;cursor:pointer;text-decoration:none}
.btn:active{transform:scale(.98)}

.btn-primary{background:var(--or-brand);color:var(--white);border-color:var(--or-brand)}
.btn-primary:hover{background:var(--or-dark);border-color:var(--or-dark);box-shadow:var(--shadow-or)}

/* btn-accent removed — use .btn-primary */

.btn-outline{background:transparent;color:var(--or-brand);border-color:var(--or-brand)}
.btn-outline:hover{background:var(--or-brand);color:var(--white)}

.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:var(--white)}

.btn-ghost{background:transparent;color:var(--ash);border-color:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--white)}

.btn-dark{background:var(--navy-nav);color:var(--white);border-color:var(--navy-border)}
.btn-dark:hover{background:var(--navy-card)}

.btn-danger{background:var(--danger);color:var(--white);border-color:var(--danger)}
.btn-danger:hover{background:#B83030}

.btn-success{background:var(--success);color:var(--white);border-color:var(--success)}

.btn-sm{padding:.4375rem 1rem;font-size:.8125rem}
.btn-lg{padding:.8125rem 1.75rem;font-size:.9375rem}
.btn-xl{padding:.9375rem 2rem;font-size:1rem}
.btn-full{width:100%}

/* ── Navigation ──────────────────────────────────────────────────── */
.site-nav{position:sticky;top:0;z-index:10000;background:var(--navy-nav);border-bottom:1px solid var(--navy-border)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;gap:2rem}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.nav-logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(245,146,30,.4)}
.nav-logo-mark{width:36px;height:36px;background:var(--or-brand);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:var(--white);flex-shrink:0}
.nav-logo-text{font-weight:700;font-size:.9rem;color:var(--white);line-height:1.1}
.nav-logo-sub{font-size:.6rem;color:var(--ash);letter-spacing:.05em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:.125rem;flex:1}
.nav-link{padding:.375rem .75rem;border-radius:var(--r-md);font-size:.84rem;font-weight:500;color:var(--cloud);transition:all var(--t-fast);white-space:nowrap}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav-link.active{color:var(--or-brand);background:rgba(245,146,30,.1);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:.625rem;margin-left:auto}
.nav-badge{min-width:17px;height:17px;padding:0 4px;background:var(--or-brand);color:var(--white);border-radius:99px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--or-brand);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--white);border:2px solid rgba(255,255,255,.2)}
.nav-avatar-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid var(--navy-border);border-radius:var(--r-full);padding:3px 10px 3px 3px;color:var(--cloud);font-size:.8125rem;font-weight:500;transition:all var(--t-fast)}
.nav-avatar-btn:hover{background:rgba(255,255,255,.12);color:var(--white)}
.nav-user{position:relative}
.nav-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:215px;background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--t-base);z-index:10001}
.nav-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-header{padding:.875rem 1rem .75rem;border-bottom:1px solid var(--navy-border);background:var(--surface-2)}
.nav-dropdown-name{font-weight:600;font-size:.875rem;color:var(--white)}
.nav-dropdown-email{font-size:.72rem;color:var(--ash);margin-top:1px}
.nav-dropdown-item{display:flex;align-items:center;gap:9px;padding:.5625rem 1rem;font-size:.84rem;color:var(--cloud);transition:background var(--t-fast)}
.nav-dropdown-item:hover{background:rgba(255,255,255,.06);color:var(--white)}
.nav-dropdown-divider{height:1px;background:var(--navy-border);margin:3px 0}
.nav-dropdown-item.danger{color:var(--danger)}
.nav-dropdown-item.danger:hover{background:var(--danger-bg)}
.nav-hamburger{display:none;background:none;border:none;padding:7px;border-radius:var(--r-md);color:var(--white);font-size:1.2rem}
.nav-mobile-panel{display:none;position:fixed;inset:0;background:var(--navy-nav);z-index:500;padding:1.25rem;flex-direction:column;gap:.375rem;overflow-y:auto}
.nav-mobile-panel.open{display:flex}
.nav-mobile-close{align-self:flex-end;background:rgba(255,255,255,.07);border:none;border-radius:var(--r-md);padding:7px 12px;color:var(--white);font-size:1.1rem;margin-bottom:.5rem}
.nav-mobile-link{display:block;padding:.75rem 1rem;border-radius:var(--r-md);font-size:.9375rem;font-weight:500;color:var(--cloud);transition:background var(--t-fast),color var(--t-fast)}
.nav-mobile-link:hover{background:rgba(255,255,255,.06);color:var(--white)}

/* ── Flash messages ──────────────────────────────────────────────── */
.flash-stack{padding:.625rem 0}
.flash-wrap{max-width:var(--container);margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;gap:.375rem}
.flash{padding:.75rem 1rem;border-radius:var(--r-md);font-size:.875rem;font-weight:500;border:1px solid transparent;display:flex;align-items:center;gap:8px}
.flash-success{background:rgba(45,122,79,.2);color:#86EFAC;border-color:rgba(91,179,127,.4)}
.flash-danger{background:var(--danger-bg);color:#FCA5A5;border-color:rgba(217,64,64,.35)}
.flash-warning{background:rgba(245,146,30,.12);color:var(--or-mid);border-color:rgba(245,146,30,.35)}
.flash-info{background:var(--info-bg);color:var(--cloud);border-color:rgba(61,110,150,.4)}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer{background:var(--navy-nav);border-top:1px solid var(--navy-border);padding:3.5rem 0 2rem;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:.875rem}
.footer-logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(245,146,30,.35)}
.footer-brand-name{font-weight:700;font-size:.9rem;color:var(--white)}
.footer-desc{font-size:.84rem;line-height:1.7;color:var(--dusk);max-width:260px}
.footer-col-title{font-weight:600;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--or-brand);margin-bottom:.875rem}
.footer-link{display:block;padding:3px 0;font-size:.84rem;color:var(--ash);transition:color var(--t-fast)}
.footer-link:hover{color:var(--or-mid)}
.footer-bar{border-top:1px solid var(--navy-border);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-copy{font-size:.78rem;color:var(--dusk)}

/* ── Cards ───────────────────────────────────────────────────────── */
.card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:border-color var(--t-base),box-shadow var(--t-base);overflow:hidden}
.card:hover{border-color:var(--navy-hover);box-shadow:var(--shadow-md)}
.card-body{padding:1.375rem}
.card-body-lg{padding:1.875rem}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group{margin-bottom:1.125rem}
.form-label{display:block;font-size:.84rem;font-weight:600;color:var(--white);margin-bottom:.375rem}
.form-hint{font-size:.75rem;color:var(--ash);margin-top:.25rem}
.form-error-text{font-size:.78rem;color:var(--danger);margin-top:.25rem;display:flex;align-items:center;gap:4px}
.form-control{width:100%;padding:.6875rem .9375rem;border:1.5px solid var(--navy-border);border-radius:var(--r-md);font-size:.9rem;font-family:var(--font);color:var(--white);background:var(--navy-bg);transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:none;appearance:none}
.form-control:focus{border-color:var(--or-brand);box-shadow:0 0 0 3px rgba(245,146,30,.15)}
.form-control::placeholder{color:var(--dusk)}
.form-control.is-invalid{border-color:var(--danger)}
select.form-control option{background:var(--navy-card);color:var(--white)}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239AA5B4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem}
textarea.form-control{resize:vertical;min-height:110px}
.form-check{display:flex;align-items:flex-start;gap:9px}
.form-check-input{width:15px;height:15px;margin-top:3px;accent-color:var(--or-brand);flex-shrink:0;cursor:pointer}
.form-check-label{font-size:.84rem;color:var(--cloud);cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-errors{background:var(--danger-bg);border:1px solid rgba(217,64,64,.35);border-radius:var(--r-md);padding:.875rem 1rem;margin-bottom:1.25rem}
.form-errors ul{list-style:none}
.form-errors li{font-size:.84rem;color:#FCA5A5;padding:2px 0}
.form-errors li::before{content:'· ';font-weight:700}

/* ── Page hero ───────────────────────────────────────────────────── */
.page-hero{background:var(--navy-nav);padding:4rem 0;text-align:center;border-bottom:1px solid var(--navy-border)}
.page-hero h1{color:var(--white);margin-bottom:.75rem}
.page-hero p{color:var(--cloud);font-size:1rem;max-width:520px;margin:0 auto}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:var(--r-full);font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-active{background:rgba(91,179,127,.2);color:#86EFAC;border:1px solid rgba(91,179,127,.4)}
.badge-pending{background:rgba(245,146,30,.15);color:var(--or-mid);border:1px solid rgba(245,146,30,.35)}
.badge-expired{background:rgba(61,81,102,.4);color:var(--ash);border:1px solid var(--navy-border)}
.badge-cancelled{background:var(--danger-bg);color:#FCA5A5;border:1px solid rgba(217,64,64,.35)}
.badge-failed{background:var(--danger-bg);color:#FCA5A5;border:1px solid rgba(217,64,64,.35)}
.badge-admin{background:rgba(245,146,30,.15);color:var(--or-mid);border:1px solid rgba(245,146,30,.3)}
.badge-member{background:rgba(45,122,79,.2);color:#86EFAC;border:1px solid rgba(91,179,127,.4)}

/* ── Tables ──────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--navy-border)}
.table{width:100%;border-collapse:collapse;font-size:.84rem}
.table th{padding:.75rem 1.125rem;background:var(--surface-2);font-size:.7rem;font-weight:700;color:var(--or-brand);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--navy-border)}
.table td{padding:.875rem 1.125rem;border-bottom:1px solid var(--navy-border);color:var(--cloud);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:rgba(255,255,255,.03)}

/* ── Auth ────────────────────────────────────────────────────────── */
.auth-wrap{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1fr}
.auth-left{background:var(--navy-nav);padding:3.5rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;border-right:1px solid var(--navy-border)}
.auth-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 70%,rgba(245,146,30,.07) 0%,transparent 60%);pointer-events:none}
.auth-left-inner{position:relative;z-index:1;max-width:360px}
.auth-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-brand);margin-bottom:1.25rem;display:flex;align-items:center;gap:7px}
.auth-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700;color:var(--white);letter-spacing:-.03em;line-height:1.15;margin-bottom:.875rem}
.auth-headline em{font-style:italic;color:var(--or-mid)}
.auth-sub{color:var(--cloud);font-size:.9rem;line-height:1.7;margin-bottom:1.75rem}
.auth-perks{display:flex;flex-direction:column;gap:.875rem}
.auth-perk{display:flex;align-items:flex-start;gap:9px;color:var(--cloud);font-size:.84rem}
.auth-perk-icon{width:26px;height:26px;background:rgba(245,146,30,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.auth-right{background:var(--navy-bg);padding:3.5rem;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.auth-right-inner{max-width:400px;width:100%}
.auth-title{font-size:1.5rem;font-weight:700;color:var(--white);letter-spacing:-.025em;margin-bottom:.3rem}
.auth-subtitle{font-size:.875rem;color:var(--ash);margin-bottom:1.75rem}
.auth-divider{text-align:center;position:relative;margin:1.25rem 0}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--navy-border)}
.auth-divider span{background:var(--navy-bg);padding:0 .875rem;font-size:.78rem;color:var(--ash);position:relative}
.auth-footer-link{text-align:center;font-size:.84rem;color:var(--ash);margin-top:1.25rem}
.auth-footer-link a{color:var(--or-brand);font-weight:600}

/* ── App layout ──────────────────────────────────────────────────── */
.app-wrap{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 64px)}
.app-sidebar{background:var(--navy-nav);border-right:1px solid var(--navy-border);padding:1.25rem 0;display:flex;flex-direction:column;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}
.sidebar-section-title{padding:.75rem 1.25rem .35rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dusk)}
.sidebar-link{display:flex;align-items:center;gap:8px;padding:.5625rem 1.25rem;font-size:.84rem;font-weight:500;color:var(--ash);transition:all var(--t-fast);border-left:2px solid transparent}
.sidebar-link:hover{background:rgba(255,255,255,.05);color:var(--white)}
.sidebar-link.active{background:rgba(245,146,30,.1);color:var(--or-brand);border-left-color:var(--or-brand);font-weight:600}
.sidebar-link-icon{width:16px;text-align:center;font-size:.95rem}
.sidebar-badge{margin-left:auto;background:var(--or-brand);color:var(--white);border-radius:99px;padding:1px 6px;font-size:9px;font-weight:700;min-width:17px;text-align:center}
.sidebar-divider{height:1px;background:var(--navy-border);margin:.625rem 1.25rem}
.app-main{padding:1.875rem;background:var(--navy-bg)}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.page-header h1{font-size:1.5rem;font-weight:700;color:var(--white);letter-spacing:-.02em;margin-bottom:.2rem}
.page-header p,.page-header-sub{color:var(--ash);font-size:.875rem;margin:0}
.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.responsive-split{grid-template-columns:1fr 320px}
@media(max-width:767px){.responsive-split{grid-template-columns:1fr !important}}

/* ── Stat cards ──────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-bottom:1.75rem}
.stat-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.25rem;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--or-brand)}
.stat-card.green::after{background:var(--gr-dark)}
.stat-card.orange::after{background:var(--or-mid)}
.stat-card.red::after{background:var(--danger)}
.stat-card.cyan::after{background:var(--info)}
.stat-val{font-size:1.875rem;font-weight:700;color:var(--white);letter-spacing:-.03em;line-height:1;margin-bottom:.2rem}
.stat-label{font-size:.72rem;font-weight:600;color:var(--ash);text-transform:uppercase;letter-spacing:.06em}
.stat-link{display:inline-block;font-size:.72rem;color:var(--or-brand);margin-top:.625rem;font-weight:500}

.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.module-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.25rem;display:flex;flex-direction:column;gap:.625rem;transition:all var(--t-base);text-decoration:none}
.module-card:hover{border-color:var(--or-brand);box-shadow:var(--shadow-or);transform:translateY(-1px)}
.module-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:rgba(245,146,30,.12)}
.module-count{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1}
.module-title{font-weight:600;font-size:.9375rem;color:var(--white)}
.module-desc{font-size:.8rem;color:var(--ash)}

/* ── Membership ──────────────────────────────────────────────────── */
.membership-banner{background:linear-gradient(135deg,rgba(245,146,30,.2) 0%,rgba(255,179,71,.1) 100%);border:1px solid rgba(245,146,30,.35);border-radius:var(--r-xl);padding:1.5rem 1.75rem;margin-bottom:1.75rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.membership-banner-inactive{background:var(--navy-card);border:1.5px dashed var(--navy-border);border-radius:var(--r-xl);padding:1.25rem 1.75rem;margin-bottom:1.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.membership-banner h3{color:var(--white);font-size:.9375rem;font-weight:600;margin-bottom:2px}
.membership-banner p{color:var(--cloud);font-size:.84rem}

/* ── Admin ───────────────────────────────────────────────────────── */
.admin-sidebar{background:var(--navy-nav);padding:1.25rem 0;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;border-right:1px solid var(--navy-border)}
.admin-sidebar-logo{padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--navy-border);font-size:.84rem;font-weight:700;color:var(--white)}
.admin-sidebar-section{padding:.875rem 1.25rem .35rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dusk)}
.admin-nav-link{display:flex;align-items:center;gap:9px;padding:.5625rem 1.25rem;font-size:.84rem;font-weight:500;color:var(--ash);transition:all var(--t-fast);border-left:2px solid transparent}
.admin-nav-link:hover{background:rgba(255,255,255,.05);color:var(--white)}
.admin-nav-link.active{background:rgba(245,146,30,.1);color:var(--or-brand);border-left-color:var(--or-brand);font-weight:600}
.admin-nav-badge{margin-left:auto;background:var(--danger);color:var(--white);border-radius:99px;padding:1px 6px;font-size:9px;font-weight:700}

/* ── eCard ───────────────────────────────────────────────────────── */
.ecard{background:linear-gradient(135deg,var(--navy-nav) 0%,#0E2040 100%);border-radius:16px;padding:1.75rem 2rem;position:relative;overflow:hidden;width:100%;max-width:500px;aspect-ratio:85.6/54;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 64px rgba(0,0,0,.6);border:1px solid var(--navy-border)}
.ecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 90% 10%,rgba(245,146,30,.12) 0%,transparent 55%)}
.ecard-chip{width:38px;height:28px;background:linear-gradient(135deg,var(--or-mid),var(--or-brand));border-radius:5px;position:relative;z-index:1}
.ecard-logo{position:relative;z-index:1;font-size:.8rem;font-weight:700;color:var(--cloud)}
.ecard-logo span{color:var(--or-brand)}
.ecard-id{font-family:'SF Mono','Fira Code',monospace;font-size:1rem;letter-spacing:.1em;color:var(--white);position:relative;z-index:1;font-weight:600}
.ecard-name{font-size:1.375rem;font-weight:700;color:var(--white);letter-spacing:-.02em;position:relative;z-index:1}
.ecard-meta{font-size:.65rem;color:var(--dusk);text-transform:uppercase;letter-spacing:.07em;position:relative;z-index:1}
.ecard-qr{position:absolute;bottom:1.375rem;right:1.625rem;z-index:1;opacity:.85}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{background:var(--navy-bg);padding:6rem 0 5rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(245,146,30,.1);border:1px solid rgba(245,146,30,.25);color:var(--or-brand);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-full);margin-bottom:1.25rem}
.hero h1{color:var(--white);margin-bottom:1.125rem}
.hero h1 em{font-style:italic;color:var(--or-mid)}
.hero p{color:var(--cloud);font-size:1rem;line-height:1.8;margin-bottom:1.875rem}
.hero-ctas{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.25rem;margin-top:2rem}
.hero-stat-val{font-size:1.5rem;font-weight:700;color:var(--white);letter-spacing:-.03em}
.hero-stat-label{font-size:.78rem;color:var(--dusk)}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}

/* ── Features + steps + pricing ──────────────────────────────────── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.feature-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.5rem;transition:all var(--t-base)}
.feature-card:hover{border-color:var(--or-brand);transform:translateY(-2px)}
.feature-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.375rem;margin-bottom:1rem;background:rgba(245,146,30,.1)}
.feature-card h3{font-size:1rem;margin-bottom:.4rem;color:var(--white)}
.feature-card p{font-size:.84rem}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step-card{text-align:center}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--or-brand);color:var(--white);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.step-card h3{font-size:1rem;margin-bottom:.4rem;color:var(--white)}
.plan-card{background:var(--navy-card);border:1.5px solid var(--navy-border);border-radius:var(--r-xl);padding:1.875rem;transition:all var(--t-base)}
.plan-card.featured{border-color:var(--or-brand);box-shadow:var(--shadow-or)}
.plan-badge{background:var(--or-brand);color:var(--white);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-full);display:inline-block;margin-bottom:1rem}
.plan-price{font-size:2.75rem;font-weight:700;color:var(--white);letter-spacing:-.04em;line-height:1}
.plan-price sup{font-size:1.1rem;vertical-align:top;margin-top:.4rem}
.plan-price sub{font-size:.9rem;color:var(--ash);font-weight:400;letter-spacing:0}
.plan-features{list-style:none;margin:1.25rem 0;display:flex;flex-direction:column;gap:.5625rem}
.plan-features li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--cloud)}
.plan-features li::before{content:'✓';color:var(--gr-mid);font-weight:700;flex-shrink:0}

/* ── Sponsors + deals ────────────────────────────────────────────── */
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.sponsor-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;transition:all var(--t-base)}
.sponsor-card:hover{border-color:var(--or-brand)}
.sponsor-logo{width:52px;height:52px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.375rem;overflow:hidden}
.sponsor-logo img{width:100%;height:100%;object-fit:contain}
.sponsor-name{font-weight:600;font-size:.9rem;color:var(--white)}
.sponsor-category{font-size:.72rem;color:var(--ash)}
.deal-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.125rem;display:flex;flex-direction:column;gap:.625rem}
.deal-tag{background:rgba(245,146,30,.12);color:var(--or-mid);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:var(--r-full);border:1px solid rgba(245,146,30,.3);display:inline-flex;align-items:center;gap:3px}
.deal-discount{font-size:1.625rem;font-weight:700;color:var(--or-brand);letter-spacing:-.03em}
.deal-lock{background:var(--surface-2);border:1px solid var(--navy-border);border-radius:var(--r-md);padding:.75rem;text-align:center;font-size:.84rem;color:var(--ash)}

/* ── Notifications + profile + verify ───────────────────────────── */
.notif-item{display:flex;gap:.875rem;padding:.875rem 1rem;border-bottom:1px solid var(--navy-border);transition:background var(--t-fast)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(255,255,255,.03)}
.notif-item.unread{background:rgba(245,146,30,.05);border-left:2px solid var(--or-brand)}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--or-brand);flex-shrink:0;margin-top:5px}
.notif-body{flex:1;font-size:.84rem;color:var(--cloud)}
.notif-time{font-size:.72rem;color:var(--dusk);flex-shrink:0}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--or-brand);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--white)}
.verify-card{max-width:460px;margin:3.5rem auto;background:var(--navy-card);border-radius:var(--r-xl);padding:2.5rem;box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--navy-border)}
.verify-icon{font-size:3.5rem;margin-bottom:.875rem}
.verify-status{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.4rem;color:var(--white)}
.verify-valid .verify-status{color:var(--gr-mid)}
.verify-invalid .verify-status{color:var(--danger)}
.verify-meta{background:var(--surface-2);border-radius:var(--r-md);padding:1.125rem;margin:1.25rem 0;text-align:left;display:flex;flex-direction:column;gap:.625rem;border:1px solid var(--navy-border)}
.verify-meta-row{display:flex;justify-content:space-between;font-size:.84rem}
.verify-meta-label{color:var(--ash);font-weight:500}
.verify-meta-value{font-weight:600;color:var(--white)}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.75rem}
.admin-stat{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.125rem 1.375rem}
.admin-stat-val{font-size:1.75rem;font-weight:700;color:var(--white);letter-spacing:-.03em;line-height:1;margin-bottom:.2rem}
.admin-stat-label{font-size:.7rem;font-weight:600;color:var(--ash);text-transform:uppercase;letter-spacing:.06em}

/* ── Helpers ─────────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.p-0{padding:0}
.divider{height:1px;background:var(--navy-border);margin:1.25rem 0}
.empty-state{text-align:center;padding:2.5rem 1.75rem;color:var(--ash)}
.empty-state-icon{font-size:2.25rem;margin-bottom:.875rem}
.pagination{display:flex;align-items:center;gap:.4rem;justify-content:center;margin-top:1.75rem}
.page-num{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:.84rem;font-weight:500;color:var(--ash);border:1px solid var(--navy-border);background:transparent;transition:all var(--t-fast)}
.page-num:hover,.page-num.active{background:var(--or-brand);color:var(--white);border-color:var(--or-brand)}
.search-wrap{position:relative}
.search-input{padding-left:2.5rem !important}
.search-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--dusk);pointer-events:none}
.alert{padding:.875rem 1rem;border-radius:var(--r-md);border:1px solid transparent;font-size:.875rem}
.alert-success{background:rgba(45,122,79,.15);color:#86EFAC;border-color:rgba(91,179,127,.35)}
.alert-danger{background:var(--danger-bg);color:#FCA5A5;border-color:rgba(217,64,64,.35)}
.alert-warning{background:rgba(245,146,30,.12);color:var(--or-mid);border-color:rgba(245,146,30,.3)}
.alert-info{background:var(--info-bg);color:var(--cloud);border-color:rgba(61,110,150,.35)}
.action-menu{position:relative;display:inline-block}
.action-menu-panel{position:absolute;top:100%;right:0;min-width:155px;background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:100;padding:3px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--t-fast)}
.action-menu.open .action-menu-panel{opacity:1;visibility:visible;transform:translateY(3px)}
.action-menu-item{display:block;padding:.5rem .875rem;font-size:.84rem;color:var(--cloud);transition:background var(--t-fast)}
.action-menu-item:hover{background:rgba(255,255,255,.05);color:var(--white)}
.action-menu-item.danger{color:var(--danger)}
.action-menu-item.danger:hover{background:var(--danger-bg)}
.filters-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.filter-chip{padding:.375rem .875rem;border-radius:var(--r-full);font-size:.8rem;font-weight:500;border:1.5px solid var(--navy-border);background:transparent;color:var(--ash);cursor:pointer;transition:all var(--t-fast)}
.filter-chip:hover{border-color:var(--or-brand);color:var(--or-brand)}
.filter-chip.active{background:var(--or-brand);border-color:var(--or-brand);color:var(--white)}


/* ── Button loading state ────────────────────────────────── */
.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:btn-spin .65s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ── Staggered list animation ─────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:fadeInUp .25s cubic-bezier(.4,0,.2,1) both}
.anim-in:nth-child(1){animation-delay:0ms}
.anim-in:nth-child(2){animation-delay:50ms}
.anim-in:nth-child(3){animation-delay:100ms}
.anim-in:nth-child(4){animation-delay:150ms}
.anim-in:nth-child(5){animation-delay:200ms}
.anim-in:nth-child(n+6){animation-delay:250ms}

/* ── Skeleton loader ──────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,var(--navy-card) 25%,var(--navy-border) 50%,var(--navy-card) 75%);background-size:400px 100%;animation:shimmer 1.4s ease infinite;min-height:16px}
.skeleton-text{height:14px;margin-bottom:8px;border-radius:4px}
.skeleton-text.wide{width:85%}
.skeleton-text.medium{width:60%}
.skeleton-text.narrow{width:35%}
.skeleton-avatar{width:38px;height:38px;border-radius:50%}
.skeleton-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:.875rem}
.skeleton-img{height:160px;border-radius:var(--r-md);margin-bottom:.875rem}

/* ── Toast notifications ─────────────────────────────────── */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:99999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.125rem;border-radius:var(--r-lg);font-size:.875rem;font-weight:500;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.4);pointer-events:all;max-width:360px;animation:toastIn .25s cubic-bezier(.4,0,.2,1) both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}
.toast.hiding{animation:toastOut .2s cubic-bezier(.4,0,.2,1) forwards}
.toast-success{background:#166534;border:1px solid #22C55E}
.toast-error{background:#7F1D1D;border:1px solid #DC2626}
.toast-warning{background:#78350F;border:1px solid #F59E0B}
.toast-info{background:#1E3A5F;border:1px solid #4F9CF9}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem;padding:0;flex-shrink:0;line-height:1}
.toast-close:hover{color:#fff}
@media(max-width:480px){#toast-container{bottom:80px;left:1rem;right:1rem}.toast{max-width:100%}}

/* ── Inline field error ───────────────────────────────────── */
.field-error{font-size:.75rem;color:var(--color-danger,#DC2626);margin-top:.25rem;display:flex;align-items:center;gap:4px}
.field-error::before{content:"⚠ "}
.form-control.has-error{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.form-control.has-success{border-color:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.1)}

/* ── Touch targets ────────────────────────────────────────── */
@media(max-width:768px){
  .btn{min-height:44px}
  .form-control,select.form-control{min-height:48px;font-size:16px!important}
}


/* ── Mobile bottom nav ───────────────────────────────── */
.mob-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#0A1628;border-top:1px solid #2A527A;z-index:1000;padding-bottom:env(safe-area-inset-bottom,0px)}
.mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;text-decoration:none;color:#9AA5B4;min-height:56px;position:relative;transition:color .12s}
.mob-nav-item.active{color:#F5921E}
.mob-nav-icon{font-size:1.375rem;line-height:1;margin-bottom:2px;display:block}
.mob-nav-label{font-size:.6rem;font-weight:600;white-space:nowrap;display:block}
@media(max-width:768px){.mob-bottom-nav{display:flex}body{padding-bottom:60px}}
@media print{.site-nav,.site-footer,.app-sidebar,.btn,.no-print{display:none !important}body{background:white}.ecard{box-shadow:none;border:1px solid #ccc}}
@media(max-width:1024px){.hero-grid,.footer-grid{grid-template-columns:1fr}.hero-grid{gap:2.5rem}.footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem}.steps-grid{grid-template-columns:1fr;gap:1.25rem}.app-wrap{grid-template-columns:220px 1fr}}
@media(max-width:768px){:root{--section-pad:3.5rem}.nav-links,.nav-actions .btn{display:none}.nav-hamburger{display:flex}.auth-wrap{grid-template-columns:1fr}.auth-left{display:none}.auth-right{padding:2rem 1.25rem}.app-wrap{grid-template-columns:1fr}.app-sidebar{display:none}.footer-grid{grid-template-columns:1fr;gap:1.75rem}.grid-2,.grid-3,.form-row{grid-template-columns:1fr}.membership-banner,.membership-banner-inactive{flex-direction:column;align-items:flex-start}}
/* Mobile sidebar drawer */
.sidebar-drawer-btn{display:none;position:fixed;bottom:1.25rem;left:1.25rem;z-index:400;width:44px;height:44px;border-radius:50%;background:var(--indigo);border:none;color:#fff;font-size:1.25rem;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.35);align-items:center;justify-content:center}
.sidebar-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:490}
.sidebar-drawer-overlay.open{display:block}
.sidebar-drawer{position:fixed;top:0;left:0;bottom:0;width:260px;background:var(--navy-nav);z-index:495;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:1.25rem 0}
.sidebar-drawer.open{transform:translateX(0)}
.sidebar-drawer-close{display:flex;align-items:center;justify-content:space-between;padding:.625rem 1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:.5rem}
.sidebar-drawer-close span{font-size:.9rem;font-weight:600;color:#fff;opacity:.7}
.sidebar-drawer-close button{background:rgba(255,255,255,.07);border:none;color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.875rem}
@media(max-width:768px){.sidebar-drawer-btn{display:flex}}
@media(max-width:480px){.container{padding:0 1rem}.hero{padding:4rem 0 3.25rem}.auth-right{padding:1.75rem 1rem}}