/* ==========================================================================
   Fortuneland palette — loaded LAST on every page.
   Light mode : vibrant navy → pink → amber → cyan (fortuneland.darluxedu.net)
   Dark  mode : deep pink → dark navy gradient with white text
   Also carries the final mobile-responsive pass.
   ========================================================================== */

:root{
  --fl-navy:#2563eb;
  --fl-violet:#3b82f6;
  --fl-indigo:#1d4ed8;
  --fl-pink:#0d9488;
  --fl-rose:#f0c04a;
  --fl-amber:#f5b301;
  --fl-cyan:#06b6d4;
  --fl-ink:#0f172a;
  --fl-muted:#4b5563;
  --fl-grad:linear-gradient(135deg,var(--fl-navy),var(--fl-pink) 55%,var(--fl-amber));
  --fl-grad-4:linear-gradient(135deg,#2563eb,#0d9488,#f5b301,#06b6d4);
}

/* ---------------------------------------------------------------- LIGHT -- */
html[data-theme="light"]{
  --bg:#f7f5fb;
  --text:var(--fl-ink);
  --muted:var(--fl-muted);
  --primary:var(--fl-navy);
  --primary-2:var(--fl-pink);
  --navy:var(--fl-navy); --navy-2:var(--fl-pink); --navy-3:var(--fl-indigo);
  --gold:var(--fl-amber); --gold-2:var(--fl-indigo); --gold-soft:#fde68a;
  --card-bg:rgba(255,255,255,.80);
  --card-bd:rgba(212,175,55,.14);
  --shadow:0 18px 45px -18px rgba(212,175,55,.35);
}
html[data-theme="light"] body{
  color:var(--fl-ink);
  background:#f7f5fb !important;
  background-image:
    radial-gradient(circle at 8% 12%,rgba(59,130,246,.30),transparent 34%),
    radial-gradient(circle at 92% 16%,rgba(245,179,1,.26),transparent 30%),
    radial-gradient(circle at 78% 88%,rgba(6,182,212,.22),transparent 32%),
    radial-gradient(circle at 22% 92%,rgba(245,179,1,.22),transparent 32%),
    linear-gradient(135deg,#fff7ed,#f5f3ff 45%,#ecfeff) !important;
  background-attachment:fixed !important;
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .header{
  background:var(--fl-grad) !important;
  color:#fff !important;
  border-bottom:0 !important;
  box-shadow:0 12px 34px -14px rgba(212,175,55,.55) !important;
}
html[data-theme="light"] .topbar *,
html[data-theme="light"] .header *:not(input):not(select):not(textarea){color:#fff !important}
html[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.90) !important;
  border-right:1px solid rgba(212,175,55,.14) !important;
}
html[data-theme="light"] .sidebar h4{color:var(--fl-indigo) !important}
html[data-theme="light"] .sidebar a{color:#1f2937 !important}
html[data-theme="light"] .sidebar a:hover,
html[data-theme="light"] .sidebar a.active{
  color:#fff !important;background:var(--fl-grad) !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .stat-card{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(212,175,55,.14) !important;
  box-shadow:0 18px 45px -22px rgba(212,175,55,.40) !important;
}
html[data-theme="light"] a{color:var(--fl-indigo)}
html[data-theme="light"] a:hover{color:var(--fl-pink)}
html[data-theme="light"] .btn,
html[data-theme="light"] button.btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] input[type="submit"]{
  background:var(--fl-grad) !important;
  color:#fff !important;border:0 !important;
  box-shadow:0 14px 30px -12px rgba(212,175,55,.55) !important;
}
html[data-theme="light"] .btn:hover{filter:brightness(1.06)}
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .btn-secondary{
  background:rgba(212,175,55,.10) !important;color:var(--fl-indigo) !important;
}
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .role-badge{
  background:rgba(212,175,55,.10);color:var(--fl-indigo);border:1px solid rgba(212,175,55,.18)
}
html[data-theme="light"] .stat-card .v{color:var(--fl-indigo) !important}
html[data-theme="light"] table thead th{
  background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(245,179,1,.12)) !important;
  color:var(--fl-ink) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus{
  border-color:var(--fl-navy) !important;
  box-shadow:0 0 0 4px rgba(212,175,55,.15) !important;
}
html[data-theme="light"] .vibrant-hero,
html[data-theme="light"] .bday-bar{
  background:var(--fl-grad-4) !important;color:#fff !important;
}
html[data-theme="light"] .vibrant-hero *,
html[data-theme="light"] .bday-bar .track,
html[data-theme="light"] .bday-bar .item{color:#fff !important}
html[data-theme="light"] .bday-bar .item{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.35)}

/* ----------------------------------------------------------------- DARK -- */
html[data-theme="dark"]{
  --bg:#2a0b33;
  --text:#ffffff;
  --muted:#ffffff;
  --primary:#0d9488; --primary-2:#d4af37;
  --navy:#3d2c05; --navy-2:#5c4204; --navy-3:#1d4ed8;
  --gold:#ffffff; --gold-2:#ffffff; --gold-soft:#fbe7bb;
  --card-bg:rgba(255,255,255,.08);
  --card-bd:rgba(255,255,255,.18);
  --shadow:0 20px 50px -20px rgba(0,0,0,.65);
}
html[data-theme="dark"] body{
  color:#fff !important;
  background:#2a0b33 !important;
  background-image:linear-gradient(135deg,#e0a915 0%,#b8860b 22%,#a8801f 55%,#3d2c05 85%,#1c1405 100%) !important;
  background-attachment:fixed !important;
  background-size:cover !important;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .header{
  background:linear-gradient(135deg,rgba(255,30,121,.55),rgba(59,7,100,.75)) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 34px -18px rgba(0,0,0,.8) !important;
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,rgba(255,30,121,.28),rgba(59,7,100,.55)) !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:blur(14px);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .portal-card,
html[data-theme="dark"] .reg-wrap .glass{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.7) !important;
}
html[data-theme="dark"] .vibrant-hero,
html[data-theme="dark"] .bday-bar{
  background:linear-gradient(135deg,#e0a915,#a8801f 60%,#3d2c05) !important;
}
html[data-theme="dark"] .bday-bar .item{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
html[data-theme="dark"] table thead th{
  background:rgba(255,255,255,.10) !important;color:#fff !important;
}
html[data-theme="dark"] table td,html[data-theme="dark"] table th{border-color:rgba(255,255,255,.14) !important}
html[data-theme="dark"] .btn,
html[data-theme="dark"] button.btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .login-btn,
html[data-theme="dark"] input[type="submit"]{
  background:linear-gradient(135deg,#e0a915,#0ea5e9) !important;
  color:#fff !important;border:0 !important;
}
html[data-theme="dark"] .pill,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .role-badge{
  background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important
}
/* white text everywhere in dark mode */
html[data-theme="dark"] body,
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,
html[data-theme="dark"] p,html[data-theme="dark"] span,html[data-theme="dark"] li,
html[data-theme="dark"] div,html[data-theme="dark"] small,html[data-theme="dark"] b,
html[data-theme="dark"] strong,html[data-theme="dark"] label,html[data-theme="dark"] td,
html[data-theme="dark"] th,html[data-theme="dark"] summary,html[data-theme="dark"] legend,
html[data-theme="dark"] a,
html[data-theme="dark"] .hero-title,html[data-theme="dark"] .hero-title span,
html[data-theme="dark"] .gradText,
html[data-theme="dark"] .portal-title small,
html[data-theme="dark"] .sidebar a,html[data-theme="dark"] .sidebar h4,
html[data-theme="dark"] .stat-card .v{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html[data-theme="dark"] .hero-title span,
html[data-theme="dark"] .gradText{background:none !important}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .sidebar a:hover{
  color:#fbe7bb !important;-webkit-text-fill-color:#fbe7bb !important;
}
html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .sidebar a.active{background:rgba(255,255,255,.12) !important}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:rgba(255,255,255,.10) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.25) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:rgba(255,255,255,.65) !important}
html[data-theme="dark"] option{color:#3d2c05}
html[data-theme="dark"] .register-link{background:rgba(255,255,255,.10) !important}
html[data-theme="dark"] .hero-badge{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.25) !important}
html[data-theme="dark"] body::before{display:none !important}
html[data-theme="dark"] .edu-bubble{
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(245,179,1,.35) 60%,rgba(123,31,162,.25)) !important;
  border-color:rgba(255,255,255,.4) !important;
}

/* ------------------------------------------------- MOBILE RESPONSIVENESS -- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe,table,pre{max-width:100%}

@media (max-width:900px){
  main.site{grid-template-columns:1fr !important;gap:24px !important}
  .app{grid-template-columns:1fr !important}
}
@media (max-width:768px){
  .content{padding:14px !important}
  .quick-grid{grid-template-columns:1fr 1fr !important}
  .portal-card{padding:22px !important;border-radius:24px !important}
  h1.hero-title{font-size:clamp(30px,10vw,44px) !important;letter-spacing:-1.5px !important}
  .card,.glass-card,.chart-card{padding:14px !important;border-radius:16px !important}
  .table-wrap,.card{overflow-x:auto}
  input,select,textarea{font-size:16px}
  .theme-btn{width:38px;height:38px}
}
@media (max-width:600px){
  header.site{padding:14px 0 !important;flex-wrap:wrap;gap:10px}
  .quick-grid{grid-template-columns:1fr !important}
  .brand strong{font-size:14px}
  .brand small{font-size:10px;letter-spacing:2px}
  .logo-box{width:44px;height:44px;border-radius:14px}
  .logo-box img{width:36px;height:36px}
  .hero p{font-size:15px}
  footer.site{font-size:12px}
}
@media (max-width:420px){
  .portal-card{padding:18px !important}
  .login-btn{padding:14px 16px !important;font-size:14px !important}
}

/* ---- Login page specifics in dark mode ---- */
html[data-theme="dark"] .portal-wrap{
  background:linear-gradient(135deg,#e0a915,#0ea5e9,#3d2c05) !important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8) !important;
}
html[data-theme="dark"] .portal-card{
  background:linear-gradient(160deg,rgba(59,7,100,.92),rgba(123,31,162,.88)) !important;
  backdrop-filter:blur(16px);
}
html[data-theme="dark"] .portal-card::before{background:rgba(255,30,121,.22) !important}
html[data-theme="dark"] .portal-card::after{background:rgba(147,51,234,.25) !important}
html[data-theme="dark"] .glass-card{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.20) !important}
html[data-theme="dark"] .shape.one{background:#e0a915}
html[data-theme="dark"] .shape.two{background:#0ea5e9}
html[data-theme="dark"] .shape.three{background:#3d2c05}
html[data-theme="dark"] .theme-btn{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.25) !important}
html[data-theme="dark"] .alert{background:rgba(239,68,68,.25) !important;color:#fff !important}