/* ═══════════════════════════════════════════════════════════════
   MABROOKUGC — SHARED LIQUID GLASS DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════
   Used by: creator.mabrookugc.com, portal.mabrookugc.com, admin.mabrookugc.com
   Version: 1.0
   Last updated: 2026-04-19
   ═══════════════════════════════════════════════════════════════ */

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

/* ─── DESIGN TOKENS ─── */
:root{
  /* Colors — Brand */
  --dark: #043C3A;
  --dark2: #0A5854;
  --green: #15BC74;
  --green2: #0FA063;
  --mint: #D4F5E5;
  --mint-light: #E8FAF0;

  /* Colors — Neutrals */
  --pearl: #EDEEF1;
  --pearl-light: #F7F9FB;
  --white: #FFFFFF;
  --border: #D1D5DB;
  --text-body: #1F2937;
  --text-muted: #6B7280;
  --gray: #9CA3AF;
  --red: #DC2626;
  --amber: #F59E0B;
  --blue: #3B82F6;

  /* Typography */
  --font-h: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --r: 12px;
  --r2: 20px;
  --r3: 28px;

  /* Easings */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-bg-dark: rgba(6, 52, 50, 0.5);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(14px);
  --glass-blur-strong: blur(28px) saturate(1.4);
}

/* ─── RESET ─── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-b);color:var(--text-body);background:var(--pearl);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.1rem;font-family:var(--font-b);font-size:.85rem;font-weight:600;border-radius:var(--r);cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;border:1px solid transparent}
.btn-sm{padding:.45rem .85rem;font-size:.8rem}
.btn-lg{padding:.85rem 1.4rem;font-size:.92rem;border-radius:16px}
.btn-full{width:100%;justify-content:center}

.btn-primary{
  background:linear-gradient(180deg,#19CC80 0%,var(--green) 100%);
  color:white;
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 12px rgba(21,188,116,0.35), 0 8px 24px rgba(21,188,116,0.15);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 6px 16px rgba(21,188,116,0.4), 0 12px 30px rgba(21,188,116,0.2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-ghost{background:rgba(4,60,58,0.05);color:var(--dark);border:1px solid rgba(4,60,58,0.12)}
.btn-ghost:hover{background:rgba(4,60,58,0.1)}

.btn-dark{background:var(--dark);color:white}
.btn-dark:hover{background:var(--dark2)}

.btn-green{background:var(--green);color:white}
.btn-green:hover{background:var(--green2)}

.btn-red{background:var(--red);color:white}
.btn-red:hover{background:#B91C1C}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.fg{margin-bottom:1.05rem}
.fl{display:block;font-size:.78rem;font-weight:500;color:var(--text-muted);margin-bottom:.45rem;letter-spacing:0;text-transform:none}
.fc{
  width:100%;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  color:var(--text-body);
  padding:.9rem 1.05rem;
  font-family:var(--font-b);
  font-size:.9rem;
  outline:none;
  transition:all .25s var(--ease);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.fc:focus{border-color:var(--green);background:rgba(212,245,229,0.4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 4px rgba(21,188,116,0.12)}
.fc::placeholder{color:var(--gray)}
.fc:disabled{opacity:.6}
select.fc option{background:var(--white)}
textarea.fc{resize:vertical;min-height:75px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

.err{color:var(--red);font-size:.78rem;margin-top:.5rem;display:none}
.err.show{display:block}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur-strong);
  backdrop-filter:var(--glass-blur-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--r2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75), 0 16px 48px rgba(4,60,58,0.08), 0 32px 80px rgba(4,60,58,0.06);
  padding:1.3rem;
  margin-bottom:1rem;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS PILLS
   ═══════════════════════════════════════════════════════════════ */
.sp{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .75rem;border-radius:50px;font-size:.72rem;font-weight:600;letter-spacing:.01em}
.sp-g{background:rgba(212,245,229,0.8);color:var(--green2);border:1px solid rgba(21,188,116,0.3)}
.sp-o{background:rgba(254,243,199,0.9);color:#92400E;border:1px solid rgba(245,158,11,0.3)}
.sp-r{background:rgba(254,226,226,0.9);color:#B91C1C;border:1px solid rgba(220,38,38,0.3)}
.sp-b{background:rgba(219,234,254,0.9);color:#1D4ED8;border:1px solid rgba(59,130,246,0.3)}
.sp-gray{background:rgba(156,163,175,0.15);color:var(--text-muted);border:1px solid rgba(156,163,175,0.3)}

/* ═══════════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════════ */
.ob-logo, .mabrook-logo{display:flex;align-items:baseline;gap:2px}
.ob-logo .w, .mabrook-logo .w{font-family:var(--font-h);font-size:1.4rem;font-weight:800;color:var(--dark);letter-spacing:-0.01em}
.ob-logo sup, .mabrook-logo sup{font-family:var(--font-h);font-size:.72rem;font-weight:700;color:var(--green);vertical-align:super;margin-left:1px}

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN — Two-column Liquid Glass
   ═══════════════════════════════════════════════════════════════ */
.auth-screen{min-height:100vh;display:flex;flex-direction:row;font-family:var(--font-b);overflow:hidden;position:relative;background:linear-gradient(180deg,#F7F9FB 0%,#EDEEF1 100%)}
.auth-screen::before,.auth-screen::after{
  content:'';position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;
  animation:orbFloat 20s ease-in-out infinite alternate;
}
.auth-screen::before{width:600px;height:600px;background:radial-gradient(circle, rgba(21,188,116,0.35) 0%, transparent 70%);top:-200px;left:-200px}
.auth-screen::after{width:700px;height:700px;background:radial-gradient(circle, rgba(212,245,229,0.7) 0%, transparent 70%);bottom:-300px;right:-300px;animation-delay:-10s;animation-duration:25s}

.auth-left{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1;min-height:100vh;overflow-y:auto}
.auth-inner{width:100%;max-width:440px}
.auth-logo{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.brand-badge{background:rgba(212,245,229,0.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--green2);font-size:.72rem;font-weight:600;padding:.28rem .7rem;border-radius:50px;border:1px solid rgba(21,188,116,0.3)}

.auth-title{font-family:var(--font-h);font-size:2.6rem;font-weight:700;color:var(--dark);letter-spacing:-0.02em;line-height:1.05;margin-bottom:.65rem;animation:fadeSlideIn .9s var(--ease) both;animation-delay:.1s}
.auth-subtitle{color:var(--text-muted);font-size:.95rem;margin-bottom:2rem;animation:fadeSlideIn .9s var(--ease) both;animation-delay:.2s}

/* Tab switcher */
.tab-row,.auth-tabs{display:flex;gap:.4rem;padding:.28rem;background:rgba(255,255,255,0.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.6);border-radius:14px;margin-bottom:1.8rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 2px 8px rgba(4,60,58,0.04);animation:fadeSlideIn .9s var(--ease) both;animation-delay:.25s}
.tab-btn,.at{background:transparent;border:none;flex:1;padding:.58rem 1rem;font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;border-radius:10px;transition:all .25s var(--ease);font-family:var(--font-b);margin:0}
.tab-btn.active,.at.active{background:linear-gradient(180deg,#19CC80 0%,var(--green) 100%);color:white;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 12px rgba(21,188,116,0.3)}

/* Divider */
.auth-divider{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 1rem;animation:fadeSlideIn .9s var(--ease) both;animation-delay:.65s}
.auth-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(4,60,58,0.15),transparent)}
.auth-divider-text{font-size:.75rem;color:var(--text-muted);letter-spacing:.04em}

/* Social buttons */
.social-row{display:flex;gap:.6rem;animation:fadeSlideIn .9s var(--ease) both;animation-delay:.75s}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.92rem 1rem;background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.7);border-radius:16px;font-size:.88rem;font-weight:600;color:var(--dark);cursor:pointer;transition:all .25s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.social-btn:hover{background:rgba(255,255,255,0.8);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 4px 12px rgba(4,60,58,0.08)}
.social-btn.apple{background:#000;color:white;border-color:#000}
.social-btn.apple:hover{background:#222}

.auth-footer-text{text-align:center;font-size:.84rem;color:var(--text-muted);margin-top:1.4rem;animation:fadeSlideIn .9s var(--ease) both;animation-delay:.85s}
.auth-footer-text a{color:var(--green);font-weight:600;cursor:pointer;text-decoration:none}
.auth-footer-text a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
   AUTH RIGHT COLUMN — Gradient Hero
   ═══════════════════════════════════════════════════════════════ */
.auth-right{flex:1;display:none;position:relative;padding:1rem}
.auth-hero{position:absolute;inset:1rem;border-radius:28px;overflow:hidden;animation:slideRightIn 1s var(--ease) both;animation-delay:.3s;box-shadow:0 40px 80px rgba(4,60,58,0.25);background-color:#043C3A}
.auth-hero-gradient{
  background:
    radial-gradient(900px 700px at 85% 15%, rgba(21,188,116,0.45) 0%, transparent 55%),
    radial-gradient(800px 600px at 15% 85%, rgba(212,245,229,0.4) 0%, transparent 55%),
    radial-gradient(600px 500px at 50% 50%, rgba(25,204,128,0.2) 0%, transparent 60%),
    linear-gradient(135deg, #043C3A 0%, #065E5B 40%, #0A7F7A 70%, #15BC74 100%);
}
.auth-hero-gradient.brand{
  background:
    radial-gradient(900px 700px at 20% 20%, rgba(21,188,116,0.4) 0%, transparent 55%),
    radial-gradient(800px 600px at 80% 80%, rgba(212,245,229,0.35) 0%, transparent 55%),
    radial-gradient(600px 500px at 50% 50%, rgba(25,204,128,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #043C3A 0%, #074E4C 35%, #0A6B67 65%, #15BC74 100%);
}
.auth-hero-gradient.admin{
  background:
    radial-gradient(900px 700px at 15% 15%, rgba(21,188,116,0.3) 0%, transparent 55%),
    radial-gradient(800px 600px at 85% 85%, rgba(4,60,58,0.6) 0%, transparent 55%),
    radial-gradient(600px 500px at 50% 50%, rgba(25,204,128,0.12) 0%, transparent 60%),
    linear-gradient(135deg, #0B0D12 0%, #0F1920 30%, #0A3835 60%, #043C3A 100%);
}
.auth-hero-gradient::after{content:'';position:absolute;inset:0;background:radial-gradient(1200px 900px at 50% 50%, transparent 0%, rgba(4,60,58,0.25) 80%)}
.auth-hero-gradient::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);top:-150px;right:-100px;filter:blur(60px);animation:orbFloat 18s ease-in-out infinite alternate;z-index:1}

.auth-hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:3rem 3.5rem;color:white;max-width:80%}
.auth-hero-kicker{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:.9rem;display:inline-flex;align-items:center;gap:.5rem;width:fit-content;background:rgba(255,255,255,0.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);padding:.38rem .85rem;border-radius:50px}
.auth-hero-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(21,188,116,0.9)}
.auth-hero-headline{font-family:var(--font-h);font-size:2.6rem;font-weight:700;line-height:1.05;letter-spacing:-0.02em;margin-bottom:.85rem;text-shadow:0 4px 24px rgba(0,0,0,0.25)}
.auth-hero-sub{font-size:1rem;color:rgba(255,255,255,.85);max-width:440px;line-height:1.55}

/* ═══════════════════════════════════════════════════════════════
   AUTH RIGHT — TESTIMONIALS / STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.testimonials-row,.stat-row{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;gap:.8rem;padding:0 2rem;z-index:3;width:100%;justify-content:center}
.testimonial-card{display:flex;align-items:flex-start;gap:.7rem;background:rgba(255,255,255,0.13);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);border:1px solid rgba(255,255,255,0.22);border-radius:20px;padding:.95rem 1rem;width:230px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 16px 40px rgba(0,0,0,0.25);animation:testimonialIn .9s var(--ease) both}
.testimonial-card:nth-child(1){animation-delay:1.0s}
.testimonial-card:nth-child(2){animation-delay:1.2s}
.testimonial-card:nth-child(3){animation-delay:1.4s}
.testimonial-av{width:34px;height:34px;border-radius:11px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,0.1)}
.testimonial-meta{color:white;font-size:.78rem;line-height:1.4;min-width:0}
.testimonial-name{font-weight:600;font-size:.82rem}
.testimonial-handle{color:rgba(255,255,255,.6);font-size:.72rem}
.testimonial-text{margin-top:.3rem;color:rgba(255,255,255,.88);font-size:.76rem;line-height:1.45}

.stat-card{flex:1;max-width:200px;background:rgba(255,255,255,0.06);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:1.1rem 1.2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 16px 40px rgba(0,0,0,0.3);animation:testimonialIn .9s var(--ease) both}
.stat-card:nth-child(1){animation-delay:1.0s}
.stat-card:nth-child(2){animation-delay:1.15s}
.stat-card:nth-child(3){animation-delay:1.3s}
.stat-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:.35rem}
.stat-value{font-family:var(--font-h);font-size:1.6rem;font-weight:800;color:white;letter-spacing:-0.02em;line-height:1}
.stat-sub{font-size:.72rem;color:rgba(21,188,116,0.9);margin-top:.35rem;font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS — Premium Liquid Glass
   ═══════════════════════════════════════════════════════════════ */
.toast-container{position:fixed;top:1.5rem;right:1.5rem;z-index:10000;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:420px}
.toast{
  display:flex;align-items:flex-start;gap:.85rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.7);
  padding:1rem 1.15rem;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75), 0 20px 50px rgba(4,60,58,0.16), 0 8px 24px rgba(4,60,58,0.1);
  min-width:320px;max-width:420px;pointer-events:auto;cursor:pointer;
  animation:toastIn .5s var(--spring);
  transform-origin:top right;position:relative;overflow:hidden;
}
.toast.hide{animation:toastOut .3s ease forwards}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:2px 0 0 2px}
.toast.success::before{background:linear-gradient(180deg,#19CC80,var(--green))}
.toast.error::before{background:linear-gradient(180deg,#F87171,#DC2626)}
.toast.warning::before{background:linear-gradient(180deg,#FBBF24,#F59E0B)}
.toast.info::before{background:linear-gradient(180deg,#60A5FA,#3B82F6)}

.toast-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.toast.success .toast-icon{background:linear-gradient(180deg,rgba(212,245,229,0.95),rgba(172,235,204,0.85));color:var(--green2)}
.toast.error .toast-icon{background:linear-gradient(180deg,rgba(254,226,226,0.95),rgba(252,165,165,0.85));color:#B91C1C}
.toast.warning .toast-icon{background:linear-gradient(180deg,rgba(254,243,199,0.95),rgba(253,224,71,0.85));color:#92400E}
.toast.info .toast-icon{background:linear-gradient(180deg,rgba(219,234,254,0.95),rgba(147,197,253,0.85));color:#1D4ED8}

.toast-content{flex:1;min-width:0;padding-top:.08rem}
.toast-title{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--dark);margin-bottom:.15rem;letter-spacing:-0.01em;line-height:1.3}
.toast-body{font-size:.82rem;color:var(--text-muted);line-height:1.45}
.toast-close{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(4,60,58,0.06);color:var(--text-muted);border:none;cursor:pointer;font-size:.75rem;transition:all .2s}
.toast-close:hover{background:rgba(4,60,58,0.12);color:var(--dark)}

.toast-progress{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,var(--green) 0%,rgba(21,188,116,0.3) 100%);border-radius:0 0 0 18px;animation:toastProgress 5s linear forwards}
.toast.error .toast-progress{background:linear-gradient(90deg,#DC2626 0%,rgba(220,38,38,0.3) 100%)}
.toast.warning .toast-progress{background:linear-gradient(90deg,#F59E0B 0%,rgba(245,158,11,0.3) 100%)}
.toast.info .toast-progress{background:linear-gradient(90deg,#3B82F6 0%,rgba(59,130,246,0.3) 100%)}

/* Dark-mode toast variant (for admin portal — add .toast-dark on container or body) */
.toast-dark .toast, body.dark-toast .toast{background:linear-gradient(180deg, rgba(26,31,46,0.92) 0%, rgba(15,17,23,0.88) 100%);border-color:rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 50px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3)}
.toast-dark .toast-title, body.dark-toast .toast-title{color:#F8FAFC}
.toast-dark .toast-body, body.dark-toast .toast-body{color:#94A3B8}
.toast-dark .toast-close, body.dark-toast .toast-close{background:rgba(255,255,255,0.06);color:#94A3B8}
.toast-dark .toast.success .toast-icon, body.dark-toast .toast.success .toast-icon{background:rgba(21,188,116,0.15);color:#19CC80}
.toast-dark .toast.error .toast-icon, body.dark-toast .toast.error .toast-icon{background:rgba(220,38,38,0.15);color:#F87171}
.toast-dark .toast.warning .toast-icon, body.dark-toast .toast.warning .toast-icon{background:rgba(245,158,11,0.15);color:#FBBF24}
.toast-dark .toast.info .toast-icon, body.dark-toast .toast.info .toast-icon{background:rgba(59,130,246,0.15);color:#60A5FA}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeSlideIn{from{opacity:0;filter:blur(6px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes slideRightIn{from{opacity:0;filter:blur(8px);transform:translateX(30px)}to{opacity:1;filter:blur(0);transform:translateX(0)}}
@keyframes testimonialIn{from{opacity:0;filter:blur(6px);transform:translateY(20px) scale(.95)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes toastIn{0%{opacity:0;transform:translateX(20px) scale(.92);filter:blur(8px)}100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes toastOut{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(20px) scale(.92)}}
@keyframes toastProgress{from{width:100%}to{width:0%}}
@keyframes orbFloat{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.1)}100%{transform:translate3d(-3%,4%,0) scale(0.95)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce){
  .auth-title,.auth-subtitle,.tab-row,.auth-tabs,.fg,.auth-divider,.social-row,.auth-footer-text,.auth-hero,.testimonial-card,.stat-card{
    opacity:1 !important;filter:none !important;transform:none !important;animation:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .auth-right{display:block}
}
@media (max-width:1440px){
  .testimonial-card:nth-child(3),.stat-card:nth-child(3){display:none}
}
@media (max-width:1280px){
  .testimonial-card:nth-child(2){display:none}
  .auth-hero-headline{font-size:2.2rem}
}
@media (max-width:768px){
  .auth-title{font-size:2.1rem}
  .form-row{grid-template-columns:1fr}
  .toast-container{top:auto;bottom:1rem;left:1rem;right:1rem;max-width:none}
  .toast{min-width:0;max-width:none;width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   AUTH HERO — animated cycling-gradient background
   Used by: creator + brand login screens
   ═══════════════════════════════════════════════════════════════ */
.auth-hero-animated{background:linear-gradient(135deg,#2d1b69 0%,#11998e 100%)}
.auth-hero-animated-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.auth-hero-animated-bg .grad-layer{position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:0;transform-origin:center center;animation:authHeroGradFade 20s ease-in-out infinite,authHeroGradSpin 14s linear infinite;will-change:opacity,transform}
.auth-hero-animated-bg .grad-layer:nth-child(1){background:radial-gradient(circle at 30% 25%,#2d1b69 0%,transparent 55%),radial-gradient(circle at 70% 75%,#11998e 0%,transparent 55%),#1a1944;animation-delay:0s,0s}
.auth-hero-animated-bg .grad-layer:nth-child(2){background:radial-gradient(circle at 25% 70%,#8e2de2 0%,transparent 55%),radial-gradient(circle at 75% 30%,#4a00e0 0%,transparent 55%),#2a0e5c;animation-delay:4s,-2.8s}
.auth-hero-animated-bg .grad-layer:nth-child(3){background:radial-gradient(circle at 30% 30%,#0f3460 0%,transparent 55%),radial-gradient(circle at 70% 70%,#e94560 0%,transparent 50%),#2d1f3a;animation-delay:8s,-5.6s}
.auth-hero-animated-bg .grad-layer:nth-child(4){background:radial-gradient(circle at 30% 70%,#134e5e 0%,transparent 55%),radial-gradient(circle at 70% 30%,#71b280 0%,transparent 55%),#1a3540;animation-delay:12s,-8.4s}
.auth-hero-animated-bg .grad-layer:nth-child(5){background:radial-gradient(circle at 50% 30%,#2d1b69 0%,transparent 55%),radial-gradient(circle at 50% 70%,#11998e 0%,transparent 55%),#1a1944;animation-delay:16s,-11.2s}
@keyframes authHeroGradFade{
  0%,2%{opacity:0}
  5%,15%{opacity:1}
  20%,100%{opacity:0}
}
@keyframes authHeroGradSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .auth-hero-animated-bg .grad-layer{animation:none;opacity:0;transform:none}
  .auth-hero-animated-bg .grad-layer:nth-child(1){opacity:1}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BEHAVIOR — disable double-tap zoom, mobile page title
   ═══════════════════════════════════════════════════════════════ */
html,body,button,a,input,textarea,select,label,[onclick]{touch-action:manipulation}
.page-title-bar{display:none;padding:1rem 1.1rem .4rem}
.page-title-text{font-family:var(--font-h);font-size:1.4rem;font-weight:800;color:var(--dark);margin:0;line-height:1.1}
@media (max-width:768px){.page-title-bar{display:block}}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD FORM FIELDS — solid, higher contrast against white cards
   (Overrides the liquid-glass .fc defaults when inside a dashboard)
   ═══════════════════════════════════════════════════════════════ */
#dashboard .fc{background:var(--white);border:1.5px solid var(--border);color:var(--text-body);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#dashboard .fc::placeholder{color:#A0A4AC;opacity:1}
#dashboard .fc:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(21,188,116,0.15);background:var(--white)}
#dashboard .fl{color:var(--dark);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   SPARK PIPELINE STEPPER — visual 5-step progress bar for each spark task
   Used by: creator, brand, admin (anywhere spark_posts are displayed)
   ═══════════════════════════════════════════════════════════════ */
.spark-stepper{display:flex;align-items:center;gap:.25rem;padding:.85rem 1rem;background:linear-gradient(135deg,#F9FAFB 0%,#F3F4F6 100%);border-radius:var(--r);margin-bottom:.85rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.spark-stepper::-webkit-scrollbar{display:none}
.spark-step{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.spark-step-dot{width:24px;height:24px;border-radius:50%;background:#E5E7EB;color:#9CA3AF;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;border:2px solid transparent;transition:all .3s}
.spark-step.done .spark-step-dot{background:var(--green);color:white;border-color:rgba(21,188,116,0.3);box-shadow:0 2px 6px rgba(21,188,116,0.3)}
.spark-step.active .spark-step-dot{background:white;color:var(--green);border-color:var(--green);box-shadow:0 0 0 3px rgba(21,188,116,0.2),0 2px 8px rgba(21,188,116,0.15);animation:sparkStepPulse 1.6s ease-in-out infinite}
@keyframes sparkStepPulse{0%,100%{box-shadow:0 0 0 3px rgba(21,188,116,0.2),0 2px 8px rgba(21,188,116,0.15)}50%{box-shadow:0 0 0 6px rgba(21,188,116,0.08),0 2px 8px rgba(21,188,116,0.25)}}
.spark-step-label{font-size:.68rem;font-weight:700;color:var(--text-muted);white-space:nowrap;letter-spacing:.02em}
.spark-step.done .spark-step-label{color:var(--dark)}
.spark-step.active .spark-step-label{color:var(--green)}
.spark-step-line{flex:1;min-width:16px;height:2px;background:#E5E7EB;border-radius:1px;transition:background .3s}
.spark-step-line.done{background:var(--green)}

/* ═══════════════════════════════════════════════════════════════
   ADD-TO-HOME-SCREEN BANNER (iOS only — Android Chrome has native prompt)
   ═══════════════════════════════════════════════════════════════ */
.a2hs-banner{position:fixed;left:1rem;right:1rem;bottom:5.2rem;max-width:430px;margin-left:auto;margin-right:auto;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:.85rem 1rem;box-shadow:0 16px 40px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.06);z-index:150;display:flex;align-items:center;gap:.75rem;animation:a2hsSlideUp .45s var(--ease)}
@keyframes a2hsSlideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.a2hs-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--green) 0%,var(--dark) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:800;color:white;font-size:1.15rem;flex-shrink:0;box-shadow:0 3px 10px rgba(21,188,116,0.35)}
.a2hs-body{flex:1;min-width:0}
.a2hs-title{font-family:var(--font-h);font-size:.88rem;font-weight:700;color:var(--dark);line-height:1.2}
.a2hs-hint{font-size:.72rem;color:var(--text-muted);margin-top:.2rem;line-height:1.45}
.a2hs-hint strong{color:var(--dark)}
.a2hs-arrow{display:inline-block;vertical-align:-2px}
.a2hs-close{background:transparent;border:none;color:var(--gray);cursor:pointer;padding:.35rem;font-size:1.2rem;flex-shrink:0;line-height:1;border-radius:50%;transition:background .15s}
.a2hs-close:hover{background:var(--pearl)}
@media (min-width:768px){.a2hs-banner{display:none}}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX — animated, accessible, native-toggle
   Usage:
     <label class="chkbox">
       <input type="checkbox" class="chkbox-input"/>
       <span class="chkbox-visual"><svg viewBox="0 0 24 24"><path class="chkbox-check" d="M4.5 12.75l6 6 9-13.5" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
       <span class="chkbox-label">Label text</span>
     </label>
   Click anywhere in the label toggles (native browser behavior) — no JS needed.
   ═══════════════════════════════════════════════════════════════ */
.chkbox{display:inline-flex;align-items:flex-start;gap:.6rem;cursor:pointer;user-select:none}
.chkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0}
.chkbox-visual{width:20px;height:20px;border-radius:6px;background:var(--pearl);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;transition:background .2s,border-color .2s,transform .12s,box-shadow .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);margin-top:1px}
.chkbox:hover .chkbox-visual{border-color:var(--green);transform:scale(1.05)}
.chkbox:active .chkbox-visual{transform:scale(0.93)}
.chkbox-input:checked + .chkbox-visual{background:var(--green);border-color:var(--green);box-shadow:0 2px 8px rgba(21,188,116,0.32),inset 0 1px 0 rgba(255,255,255,0.3)}
.chkbox-input:focus-visible + .chkbox-visual{outline:2px solid var(--green);outline-offset:2px}
.chkbox-input:disabled + .chkbox-visual{opacity:.5;cursor:not-allowed}
.chkbox-visual svg{width:13px;height:13px;display:block}
.chkbox-check{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .32s .05s cubic-bezier(0.65,0,0.35,1)}
.chkbox-input:checked + .chkbox-visual .chkbox-check{stroke-dashoffset:0}
.chkbox-label{font-size:.86rem;color:var(--text-body);line-height:1.45;flex:1;min-width:0}
@media (prefers-reduced-motion:reduce){.chkbox-check{transition:none}.chkbox:hover .chkbox-visual,.chkbox:active .chkbox-visual{transform:none}}

/* ═══════════════════════════════════════════════════════════════
   ATTENTION BORDER — slowly rotating gradient outline for alerts
   Usage: add `attn-border` + optional color class (`.attn-blue`, `.attn-red`, `.attn-green`)
   to any card/banner. Works with any border-radius.
   ═══════════════════════════════════════════════════════════════ */
@property --attn-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.attn-border{position:relative;isolation:isolate}
.attn-border::before{
  content:'';
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:inherit;
  background:conic-gradient(from var(--attn-angle,0deg), transparent 55%, var(--attn-color,var(--blue)) 72%, var(--attn-color-bright,#93C5FD) 80%, var(--attn-color,var(--blue)) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:attnBorderSpin 4.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}
.attn-border.attn-blue{--attn-color:#3B82F6;--attn-color-bright:#BFDBFE}
.attn-border.attn-red{--attn-color:#DC2626;--attn-color-bright:#FCA5A5}
.attn-border.attn-green{--attn-color:var(--green);--attn-color-bright:#6EE7B7}
.attn-border.attn-amber{--attn-color:#F59E0B;--attn-color-bright:#FCD34D}
@keyframes attnBorderSpin{to{--attn-angle:360deg}}
@media (prefers-reduced-motion:reduce){.attn-border::before{animation:none;background:var(--attn-color,var(--blue))}}
/* Fallback for browsers that don't support @property (Safari < 16.4) — static glow */
@supports not (background: paint(-)){
  .attn-border::before{animation:none;background:var(--attn-color,var(--blue));opacity:.3}
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR NOTIFICATION BELL — shared by creator + brand desktop topbar
   ═══════════════════════════════════════════════════════════════ */
.topbar-bell{position:relative;background:transparent;border:1px solid var(--border);color:var(--dark);width:38px;height:38px;padding:0;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s;flex-shrink:0}
.topbar-bell:hover{background:var(--pearl);border-color:var(--green);color:var(--green)}
.topbar-bell:active{transform:scale(0.95)}
.topbar-bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:white;font-size:.58rem;font-weight:800;padding:0 .3rem;display:flex;align-items:center;justify-content:center;border:2px solid var(--white);line-height:1;box-shadow:0 0 0 0 rgba(220,38,38,0.7);animation:bellBadgePulse 2.1s ease-in-out infinite}
.topbar-bell-badge:empty{display:none;animation:none}
.mobile-notif-badge{animation:bellBadgePulse 2.1s ease-in-out infinite}
.mobile-notif-badge:empty{animation:none}
@keyframes bellBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.55)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
@media (prefers-reduced-motion:reduce){.topbar-bell-badge,.mobile-notif-badge{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--dark);border-radius:50%;animation:spin .6s linear infinite}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}