/* ══════════════════════════════════════════════════════════════════
   Study Pay GO — Design System
   CSS custom properties, animations, shared components.
   Everything else uses Tailwind utility classes.
   ══════════════════════════════════════════════════════════════════ */

/* ══ Light Theme (default) ══ */
:root {
  --bg: #F0F4FA; --bg-2: #E8EEF8; --surface: #FFFFFF; --card: #FFFFFF; --card-2: #F8FAFC;
  --nav-bg: rgba(255,255,255,0.92); --nav-bdr: #E2E8F0;
  --text: #0F172A; --text-2: #475569; --text-3: #94A3B8; --text-inv: #FFFFFF;
  --border: #E2E8F0; --border-2: #CBD5E1; --border-3: #94A3B8;
  --blue: #2563EB; --blue-dark: #1D4ED8; --blue-light: #3B82F6;
  --blue-bg: #EFF6FF; --blue-bdr: #BFDBFE;
  --blue-grad: linear-gradient(135deg,#1D4ED8 0%,#2563EB 50%,#3B82F6 100%);
  --blue-grad-h: linear-gradient(135deg,#1E40AF 0%,#1D4ED8 100%);
  --red: #DC2626; --red-light: #EF4444; --red-bg: #FEF2F2; --red-bdr: #FECACA;
  --red-grad: linear-gradient(135deg,#DC2626,#EF4444);
  --green: #16A34A; --green-bg: #F0FDF4; --green-bdr: #BBF7D0;
  --green-grad: linear-gradient(135deg,#15803D,#16A34A);
  --amber: #D97706; --amber-bg: #FFFBEB; --amber-bdr: #FDE68A;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow: 0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.06);
  --shadow-lg: 0 16px 48px rgba(15,23,42,.12),0 8px 16px rgba(15,23,42,.06);
  --shadow-xl: 0 24px 64px rgba(15,23,42,.14),0 12px 24px rgba(15,23,42,.08);
  --shadow-blue: 0 4px 16px rgba(37,99,235,.25),0 2px 6px rgba(37,99,235,.15);
  --shadow-red: 0 4px 16px rgba(220,38,38,.20);
  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px;
  --t: 150ms cubic-bezier(0.4,0,0.2,1);
  --t-spring: 300ms cubic-bezier(0.34,1.56,0.64,1);
  --header-bg: linear-gradient(135deg,#1D4ED8 0%,#2563EB 50%,#3B82F6 100%);
}

/* ══ Dark Theme ══ */
[data-theme="dark"] {
  --bg:#0A0F1E; --bg-2:#111827; --surface:#111827; --card:#141d2e; --card-2:#192334;
  --nav-bg:rgba(10,15,30,.95); --nav-bdr:rgba(255,255,255,.08);
  --text:#F1F5F9; --text-2:#94A3B8; --text-3:#4B6280;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12); --border-3:rgba(255,255,255,.20);
  --blue:#3B82F6; --blue-dark:#2563EB; --blue-light:#60A5FA;
  --blue-bg:rgba(59,130,246,.12); --blue-bdr:rgba(59,130,246,.25);
  --red:#EF4444; --red-light:#F87171; --red-bg:rgba(239,68,68,.12); --red-bdr:rgba(239,68,68,.25);
  --green:#22C55E; --green-bg:rgba(34,197,94,.12); --green-bdr:rgba(34,197,94,.25);
  --amber:#F59E0B; --amber-bg:rgba(245,158,11,.12); --amber-bdr:rgba(245,158,11,.25);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --shadow:0 4px 12px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5); --shadow-xl:0 24px 64px rgba(0,0,0,.55);
  --shadow-blue:0 4px 16px rgba(59,130,246,.3);
  --header-bg: linear-gradient(160deg,#070d1a 0%,#0e1d38 60%,#172a52 100%);
}

/* ══ Base ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;transition:background var(--t),color var(--t);}
::selection{background:rgba(37,99,235,.15);color:var(--text);}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;}

/* ══ Animations ══ */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes scaleIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:scale(1);}}
@keyframes slideRight{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
@keyframes shimmer{from{background-position:-200% 0;}to{background-position:200% 0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes mail-bounce{0%,100%{transform:rotate(-5deg) translateY(0);}50%{transform:rotate(5deg) translateY(-8px);}}
.animate-in{animation:fadeIn 350ms ease both;}
.animate-scale{animation:scaleIn 300ms ease both;}
.stagger>*{animation:fadeIn 350ms ease both;}
.stagger>*:nth-child(1){animation-delay:0ms}.stagger>*:nth-child(2){animation-delay:50ms}
.stagger>*:nth-child(3){animation-delay:100ms}.stagger>*:nth-child(4){animation-delay:150ms}
.stagger>*:nth-child(5){animation-delay:200ms}.stagger>*:nth-child(6){animation-delay:250ms}
.mail-anim{animation:mail-bounce 2.4s ease-in-out infinite;display:inline-block;}

/* ══ Cards ══ */
.spg-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--t),border-color var(--t);}
.spg-card:hover{box-shadow:var(--shadow);border-color:var(--border-2);}

/* ══ Buttons ══ */
.spg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;border:none;outline:none;text-decoration:none;white-space:nowrap;transition:all var(--t);font-family:inherit;letter-spacing:.01em;user-select:none;}
.spg-btn:active{transform:scale(.97);}
.spg-btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.spg-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.spg-btn-primary{background:var(--blue-grad);color:white;box-shadow:var(--shadow-blue);}
.spg-btn-primary:hover{background:var(--blue-grad-h);box-shadow:0 6px 20px rgba(37,99,235,.35);transform:translateY(-1px);}
.spg-btn-red{background:var(--red-grad);color:white;box-shadow:var(--shadow-red);}
.spg-btn-red:hover{transform:translateY(-1px);}
.spg-btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue-bdr);}
.spg-btn-outline:hover{background:var(--blue-bg);border-color:var(--blue);}
.spg-btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);}
.spg-btn-ghost:hover{background:var(--bg-2);color:var(--text);border-color:var(--border-2);}
.spg-btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bdr);}
.spg-btn-danger:hover{background:#FEE2E2;}
.spg-btn-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bdr);}
.spg-btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-sm);}
.spg-btn-lg{padding:12px 24px;font-size:14px;border-radius:var(--radius-md);}
.spg-btn-xl{padding:15px 32px;font-size:15px;font-weight:700;border-radius:var(--radius-lg);}
.spg-btn-block{width:100%;}
.spg-btn-loading{color:transparent!important;pointer-events:none;position:relative;}
.spg-btn-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .6s linear infinite;top:50%;left:50%;margin:-8px 0 0 -8px;}

/* ══ Inputs ══ */
.spg-input{width:100%;padding:10px 14px;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color var(--t),box-shadow var(--t);}
.spg-input::placeholder{color:var(--text-3);}
.spg-input:hover{border-color:var(--border-3);}
.spg-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bdr);}
.spg-input.is-error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bdr);}
.spg-input.is-valid{border-color:var(--green);box-shadow:0 0 0 3px var(--green-bdr);}
.spg-input-wrap{position:relative;}
.spg-input-wrap .spg-input{padding-left:40px;}
.spg-input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;pointer-events:none;transition:color var(--t);}
.spg-input-wrap:focus-within .spg-input-icon{color:var(--blue);}
.spg-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;letter-spacing:.02em;}
.spg-select{appearance:none;width:100%;padding:10px 36px 10px 14px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2394A3B8' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 13px center;border:1.5px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;outline:none;cursor:pointer;transition:border-color var(--t),box-shadow var(--t);}
.spg-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bdr);}

/* ══ Badges ══ */
.spg-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.spg-badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bdr);}
.spg-badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bdr);}
.spg-badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bdr);}
.spg-badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bdr);}
.spg-badge-muted{background:var(--bg-2);color:var(--text-3);border:1px solid var(--border);}
.spg-badge-admin{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bdr);font-size:9px;text-transform:uppercase;letter-spacing:.08em;}

/* ══ Alerts ══ */
.spg-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius);font-size:13px;line-height:1.5;}
.spg-alert-icon{font-size:15px;margin-top:1px;flex-shrink:0;}
.spg-alert-error{background:var(--red-bg);border:1px solid var(--red-bdr);color:var(--red);}
.spg-alert-success{background:var(--green-bg);border:1px solid var(--green-bdr);color:var(--green);}
.spg-alert-warning{background:var(--amber-bg);border:1px solid var(--amber-bdr);color:var(--amber);}
.spg-alert-info{background:var(--blue-bg);border:1px solid var(--blue-bdr);color:var(--blue);}

/* ══ Auth card ══ */
.spg-auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:36px 32px;transition:background var(--t),border-color var(--t);}

/* ══ Progress bars ══ */
.spg-progress{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;border:1px solid var(--border);}
.spg-progress-blue{height:100%;border-radius:99px;background:var(--blue-grad);transition:width 600ms ease;}
.spg-progress-green{height:100%;border-radius:99px;background:var(--green-grad);transition:width 600ms ease;}

/* ══ Divider with label ══ */
.spg-divider-label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-3);}
.spg-divider-label::before,.spg-divider-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* ══ OTP digit inputs ══ */
.otp-digit{width:48px;height:56px;text-align:center;font-size:22px;font-weight:800;background:var(--surface);border:2px solid var(--border-2);border-radius:var(--radius);color:var(--text);outline:none;transition:all var(--t);}
.otp-digit:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bdr);}
.otp-digit.filled{border-color:var(--blue);color:var(--blue);}

/* ══ Custom checkbox ══ */
.spg-checkbox{appearance:none;width:17px;height:17px;border-radius:var(--radius-xs);border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;position:relative;flex-shrink:0;transition:all var(--t);}
.spg-checkbox:checked{background:var(--blue);border-color:var(--blue);}
.spg-checkbox:checked::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid white;border-left:none;border-top:none;transform:rotate(45deg);}

/* ══ KPI cards ══ */
.spg-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:all var(--t);}
.spg-kpi:hover{box-shadow:var(--shadow-md);border-color:var(--border-2);transform:translateY(-1px);}
.spg-kpi-val{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);}
.spg-kpi-label{font-size:12px;font-weight:500;color:var(--text-2);margin-top:4px;}

/* ══ Data tables ══ */
.spg-table{width:100%;border-collapse:separate;border-spacing:0;}
.spg-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;background:var(--card-2);}
.spg-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
.spg-table tr:last-child td{border-bottom:none;}
.spg-table tbody tr{transition:background var(--t);}
.spg-table tbody tr:hover{background:var(--bg-2);}

/* ══ Theme toggle button ══ */
.spg-theme-toggle{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--border-2);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--t);}
.spg-theme-toggle:hover{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bdr);}

/* ══ Top navigation bar ══ */
.spg-nav{background:var(--nav-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--nav-bdr);position:sticky;top:0;z-index:50;transition:background var(--t),border-color var(--t);}
.spg-nav-accent{height:3px;background:var(--blue-grad);}

/* ══ File upload zone ══ */
.spg-upload{border:1.5px dashed var(--border-2);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;cursor:pointer;transition:all var(--t);}
.spg-upload:hover{border-color:var(--blue);background:var(--blue-bg);}

/* ══ Skeleton loader ══ */
.spg-skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,var(--border) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm);}

/* ══ Toast notification system ══ */
#spg-toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.spg-toast{display:flex;align-items:flex-start;gap:10px;pointer-events:all;padding:13px 16px;border-radius:var(--radius-lg);max-width:340px;min-width:260px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lg);animation:slideRight 280ms ease both;transition:opacity 250ms ease,transform 250ms ease;}
.spg-toast.out{opacity:0;transform:translateX(16px);}
.spg-toast-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
.spg-toast-success .spg-toast-icon{background:var(--green-bg);color:var(--green);}
.spg-toast-error .spg-toast-icon{background:var(--red-bg);color:var(--red);}
.spg-toast-info .spg-toast-icon{background:var(--blue-bg);color:var(--blue);}
.spg-toast-warn .spg-toast-icon{background:var(--amber-bg);color:var(--amber);}
.spg-toast-body{flex:1;min-width:0;}
.spg-toast-title{font-size:13px;font-weight:700;color:var(--text);}
.spg-toast-msg{font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.4;}

/* ══ Timeline dots (dossier-status.php) ══ */
.tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;transition:all var(--t);}
.tl-dot.done{background:var(--green);color:white;box-shadow:0 0 0 3px var(--green-bg);}
.tl-dot.active{background:var(--blue-bg);color:var(--blue);border:2px solid var(--blue);box-shadow:0 0 0 3px var(--blue-bdr);}
.tl-dot.error{background:var(--red-bg);color:var(--red);border:2px solid var(--red);box-shadow:0 0 0 3px var(--red-bdr);}
.tl-dot.idle{background:var(--bg-2);color:var(--text-3);border:1.5px solid var(--border-2);}
.tl-line{flex:1;width:2px;min-height:20px;background:var(--border-2);margin:3px auto;border-radius:2px;}
.tl-line.done{background:var(--green);}

/* ══ Password strength bar (register.php) ══ */
#pass-strength-bar{height:4px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:6px;}
#pass-strength-fill{height:100%;width:0;border-radius:99px;transition:width 300ms ease,background 300ms ease;}
#pass-strength-label{font-size:11px;font-weight:600;margin-top:4px;transition:color 300ms ease;}

/* ══ Utilities ══ */
.spg-mono{font-family:'SF Mono','Fira Code','Courier New',monospace;}
.safe-bottom{padding-bottom:max(20px,env(safe-area-inset-bottom));}
.safe-nav{padding-bottom:calc(70px + env(safe-area-inset-bottom));}

/* ══ Responsive overrides ══ */
@media(max-width:640px){
  .spg-auth-card{padding:24px 18px;border-radius:var(--radius-lg);}
  .otp-digit{width:42px;height:50px;font-size:20px;}
}
@media(max-width:380px){
  .otp-digit{width:36px;height:44px;font-size:18px;}
}