/* ===========================================================================
   World Alumni Network — Premium visual layer (loaded last, overrides base)
   A controlled, layered, dark-luxury system shared by the whole portal.
   Keeps the same CSS variable names so business.css / matrimony.css adapt.
   =========================================================================== */

:root {
  --bg-0:#060a14;
  --bg-1:#0a1222;
  --bg-2:#0e1a30;
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --gold:#f0b93e;
  --gold-2:#ffd98c;
  --gold-deep:#c98a1a;
  --emerald:#2ad8a6;
  --emerald-deep:#0ea97c;
  --ruby:#ff5c78;
  --royal:#9b7bff;
  --text:#f4f7ff;
  --muted:#9db1d6;
  --muted-2:#7187ad;
  --danger:#ff7b7b;
  --ok:#3fe8ae;
  --r:20px;
  --r-sm:13px;
  --shadow:0 24px 60px -18px rgba(0,4,16,.75),0 6px 18px -8px rgba(0,0,0,.4);
  --glow-gold:0 0 0 1px rgba(240,185,62,.4),0 14px 44px rgba(240,185,62,.16);
  --grad-gold:linear-gradient(118deg,#ffe6ae 0%,#f4c148 42%,#d99a1f 100%);
  --grad-royal:linear-gradient(135deg,#241540 0%,#4a2d78 48%,#8a5cf0 100%);
  --grad-mesh:
    radial-gradient(1100px 720px at 88% -8%,rgba(122,80,255,.24),transparent 58%),
    radial-gradient(900px 640px at -8% 112%,rgba(42,216,166,.14),transparent 54%),
    radial-gradient(700px 420px at 50% 118%,rgba(240,185,62,.10),transparent 60%),
    linear-gradient(158deg,#060a14 0%,#0a1426 52%,#081722 100%);
}

/* Aurora wash behind everything (below the floating particle canvas). */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 480px at 12% 8%,rgba(138,92,240,.10),transparent 62%),
    radial-gradient(760px 520px at 96% 30%,rgba(42,216,166,.07),transparent 60%);
  mix-blend-mode:screen;
}
#bgCanvas{opacity:.5}

#app{max-width:1180px;padding-top:20px}

/* ================= TYPOGRAPHIC & GLOBAL ================= */
::selection{background:rgba(240,185,62,.35)}
a{color:var(--gold-2)}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(240,185,62,.55);background-clip:padding-box;border:2px solid transparent}

/* ================= BUTTONS ================= */
.btn{border-radius:15px;font-weight:650;letter-spacing:.15px}
.btn-gold{box-shadow:0 12px 30px -8px rgba(240,185,62,.4)}
.btn-emerald{background:linear-gradient(118deg,#35e6b1,#10b585)}
.btn-royal{background:linear-gradient(118deg,#8a5cf0,#5b33c9)}
.btn-outline{background:rgba(255,255,255,.035);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(240,185,62,.1)}

/* ================= FIELDS ================= */
.input,.input-wrap input,select,.input-wrap textarea,textarea.input{
  background:rgba(255,255,255,.05);border-radius:14px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--royal);background:rgba(155,123,255,.07);
  box-shadow:0 0 0 4px rgba(155,123,255,.14);
}

/* ================= SURFACES ================= */
.glass{
  background:linear-gradient(168deg,rgba(255,255,255,.065),rgba(255,255,255,.02) 55%);
  border-color:rgba(255,255,255,.1);
  box-shadow:var(--shadow);
}
.panel{padding:24px}
.section-head{margin-bottom:18px}
.section-head .ic{box-shadow:0 8px 22px -8px rgba(240,185,62,.5)}
.section-head h2{letter-spacing:.2px}

/* ================= LANDING ================= */
.landing-hero{padding:52px 10px 8px}
.brand-mark{
  width:92px;height:92px;border-radius:28px;
  background:linear-gradient(140deg,#2b1a54 0%,#5b33c9 52%,#9b6bff 100%);
  box-shadow:0 26px 60px -14px rgba(120,70,255,.55),inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.22);
}
.landing-hero h1{
  background:linear-gradient(110deg,#ffffff 8%,#ffe9b8 40%,#f4c148 66%,#ffffff 96%);
  filter:drop-shadow(0 4px 22px rgba(240,185,62,.18));
}
.landing-hero .tagline{color:var(--muted);font-size:1.02rem;max-width:640px}
.hero-chips{gap:10px;margin-top:22px}
.chip{
  padding:8px 16px;border-radius:999px;font-size:.78rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  box-shadow:0 6px 16px -10px rgba(0,0,0,.5);
}
.chip i{color:var(--gold)}
.chip.stat b{font-size:.98rem;font-weight:800;color:var(--gold-2);margin-right:1px}
.chip.stat{border-color:rgba(240,185,62,.35);background:rgba(240,185,62,.08)}
.chip.stat i{color:var(--gold-2)}
.chips2{margin-top:12px;opacity:.92}
.chips2 .chip i{color:var(--royal)}

/* ================= AUTH ================= */
.auth-shell{max-width:540px;margin:34px auto 0}
.role-switch{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.role-switch button{border-radius:12px}
.role-switch button.active{background:var(--grad-gold);color:#3a2400;box-shadow:0 10px 26px -8px rgba(240,185,62,.5)}
.auth-card{
  padding:28px;border-radius:24px;
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-card::before{top:-90px;right:-90px;width:260px;height:260px;background:radial-gradient(circle,rgba(240,185,62,.16),transparent 70%)}
.auth-tabs{background:rgba(0,0,0,.3);border-radius:15px}
.auth-tabs button.active{background:linear-gradient(120deg,rgba(240,185,62,.3),rgba(240,185,62,.12));color:var(--gold-2)}
.reg-step-title{color:var(--gold-2)}

/* searchable dropdown */
.sd-list{background:#101b30;border-color:rgba(155,123,255,.5);border-radius:16px}
.sd-item:hover,.sd-item.active{background:rgba(155,123,255,.16)}
.sd-item .sd-meta{color:var(--muted)}

/* ================= FEATURE STRIP ================= */
.feature-strip{margin-top:44px;gap:16px}
.feature-card{
  padding:22px;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 60%);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.feature-card::after{
  content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(155,123,255,.16),transparent 70%);pointer-events:none;
}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(240,185,62,.5);box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.feature-card h3{font-size:1.02rem}
.feature-card p{color:var(--muted)}
.landing-footer{margin-top:52px}

/* ================= APP SHELL / TOPBAR ================= */
.topbar{
  top:12px;padding:10px 16px;border-radius:20px;
  background:rgba(13,22,44,.72);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}
.topbar .brand .logo{box-shadow:0 10px 22px -8px rgba(122,80,255,.55)}
.topbar .brand b{font-weight:700}
.topbar .brand small{letter-spacing:.5px}
.pill-btn{
  padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
}
.pill-btn:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(240,185,62,.1)}
.pill-btn.gold{background:linear-gradient(120deg,rgba(240,185,62,.28),rgba(240,185,62,.1));border-color:rgba(240,185,62,.5)}
.pill-btn.gold i{color:var(--gold-2)}

.batch-banner{
  padding:13px 18px;border-radius:16px;
  background:linear-gradient(120deg,rgba(42,216,166,.16),rgba(42,216,166,.03));
  border:1px solid rgba(42,216,166,.32);
  box-shadow:0 12px 30px -18px rgba(42,216,166,.5);
}

/* ================= TABS ================= */
.tabs-bar{
  top:78px;gap:10px;padding:6px 2px 14px;
  background:linear-gradient(180deg,var(--bg-1) 62%,transparent);
}
.tab-btn{
  padding:11px 18px;border-radius:999px;font-size:.84rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.tab-btn:hover{color:var(--text);border-color:rgba(240,185,62,.6);transform:translateY(-1px)}
.tab-btn.active{color:#2a1800;background:var(--grad-gold);box-shadow:0 12px 26px -8px rgba(240,185,62,.5)}

/* ================= CARDS / LISTS ================= */
.profile-card{padding:22px;box-shadow:0 14px 34px -20px rgba(0,0,0,.6)}
.profile-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px -20px rgba(0,0,0,.75),0 0 0 1px rgba(240,185,62,.25)}
.avatar{box-shadow:0 10px 24px -10px rgba(122,80,255,.5)}
.tag{background:rgba(255,255,255,.06)}
.empty-state{background:rgba(255,255,255,.02)}

/* ================= RUBY / GEM PANEL ================= */
.ruby-shell{padding:28px;border-radius:24px;
  background:radial-gradient(640px 300px at 50% -10%,rgba(255,92,120,.2),transparent 62%),linear-gradient(168deg,#1a1226,#10101f 60%);
}
.ruby-balance{font-size:2.3rem;text-shadow:0 6px 24px rgba(255,92,120,.3)}

/* ================= CHAT ================= */
.chat-card{border-radius:22px}
.chat-header{background:rgba(255,255,255,.04);border-color:var(--line)}
.chat-messages{background:rgba(3,8,18,.28)}
.msg-bubble.them{background:rgba(255,255,255,.09);border-color:var(--line-2)}
.chat-input-row{background:rgba(255,255,255,.03);border-color:var(--line)}
.chat-input-row input{background:rgba(255,255,255,.07)}
.dm-side .convo:hover{background:rgba(255,255,255,.05)}
.dm-side .convo.active{background:linear-gradient(120deg,rgba(240,185,62,.16),rgba(240,185,62,.04))}

/* ================= MOMENTS ================= */
.moment-card{background:rgba(255,255,255,.05);border-radius:20px}
.moment-card img{background:#0a1424}
.moment-body p{color:#eef4ff}

/* ================= MODALS ================= */
.modal{background:rgba(3,7,18,.6);backdrop-filter:blur(14px)}
.modal-box{
  border-radius:24px;background:linear-gradient(172deg,#131c33,#0d1526 60%);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid var(--line);
}
.modal-close{background:rgba(255,255,255,.07)}
.modal-box h3{font-size:1.45rem}

/* ================= BOT / MITRA / TOASTS ================= */
.bot-bubble{box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.toast{background:rgba(16,26,50,.96);border:1px solid var(--line-2);border-radius:16px}
.mitra-window{background:linear-gradient(172deg,#161f3a,#0e1730 60%)}
.mitra-msgs{background:rgba(3,8,18,.4)}

/* ================= MAP ================= */
#alumniMap,.wm-canvas{background:#0a1424}
.map-shell{box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.map-stat{background:rgba(255,255,255,.05)}
.map-stat b{background:linear-gradient(120deg,#fff,#ffd98c)}
.wm-toggle{background:rgba(255,255,255,.06)}

/* ================= SHARE / INSTALL / POSTCARDS ================= */
.share-btn{background:rgba(255,255,255,.05);color:#eaf1fb;border-color:var(--line-2)}
.share-btn:hover{background:rgba(255,255,255,.12)}
.install-step{border-color:var(--line-2)}
.install-step .is-no{background:linear-gradient(135deg,#f4c148,#c9891a)}
.pc-person,.pc-type,.pc-tab,.pc-card{background:rgba(255,255,255,.05);color:#e7eefb}
.pc-meta b{color:#eaf1fb}
.pc-tab.active{background:rgba(240,185,62,.16);border-color:rgba(240,185,62,.55);color:var(--gold-2)}

/* ================= MAP legend reused in postcards panel ================= */
.wm-legend{background:rgba(255,255,255,.04)}

/* ================= RESPONSIVE ================= */
@media(max-width:640px){
  #app{padding:12px 12px 96px}
  .landing-hero{padding:30px 6px 4px}
  .panel{padding:18px}
  .topbar{top:8px;padding:9px 12px}
  .tabs-bar{top:70px}
  .modal-box{padding:20px;border-radius:20px}
  .hero-chips .chip{font-size:.72rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}