.mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;align-items:stretch}
.mrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mc{background:rgba(20,22,39,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.05);border-radius:var(--rl);padding:16px;transition:border-color .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden;height:100%;box-sizing:border-box}
.mc:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);border-color:rgba(167,139,250,0.12)}
.mc .particles span{position:absolute;bottom:-6px;width:var(--sz,4px);height:var(--sz,4px);border-radius:50%;background:var(--pc,rgba(167,139,250,0.25));animation:floatUp var(--dur,3s) var(--del,0s) infinite ease-out;opacity:0}
.mc:hover{border-color:rgba(167,139,250,0.15)}
.ml{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;position:relative;z-index:1}
.mv{font-size:18px;font-weight:700;font-variant-numeric:lining-nums;letter-spacing:-0.02em;position:relative;z-index:1}
.ms{font-size:11px;color:var(--tx3);margin-top:4px;position:relative;z-index:1}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.card{background:rgba(20,22,39,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.05);border-radius:var(--rl);padding:18px 20px;margin-bottom:16px;transition:border-color .3s;position:relative;overflow:visible}
.card:hover{border-color:rgba(167,139,250,0.1)}
@keyframes secSlideRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes secSlideLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
.sec-slide-right{animation:secSlideRight .28s cubic-bezier(0,0,0.2,1) both}
.sec-slide-left{animation:secSlideLeft .28s cubic-bezier(0,0,0.2,1) both}
@media(prefers-reduced-motion:reduce){.sec-slide-right,.sec-slide-left{animation:none}}
@keyframes chartGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(167,139,250,0.08))}50%{filter:drop-shadow(0 0 14px rgba(167,139,250,0.15))}}
canvas{animation:chartGlow 4s ease-in-out infinite}
.txr{transition:background .2s,transform .15s}.txr:hover{background:rgba(167,139,250,0.04);transform:translateX(4px)}
table tr{transition:background .2s}
.bts{transition:transform .15s,box-shadow .2s}.bts:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(167,139,250,0.2)}.bts:active{transform:translateY(1px)}
.card:hover{border-color:rgba(167,139,250,0.12)}
.ct{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sh .ct{margin:0}
.bi{margin-bottom:14px}
.bh{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.bn{color:var(--tx);font-weight:500}.bv{color:var(--tx3)}.bov{color:var(--rd)}
.btr{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}
.bfi{height:100%;border-radius:3px}
ul.tl{list-style:none}
.txr{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd);gap:8px}
.txr:last-child{border-bottom:none}
.txdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.txi{flex:1;min-width:0}
.txn{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txm{font-size:11px;color:var(--tx3);margin-top:1px}
.txa{font-size:13px;font-weight:600;font-variant-numeric:lining-nums;white-space:nowrap}
.gp{color:var(--gn)}.gl{color:var(--rd)}
.addb{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:20px;padding:6px 16px;font-size:12px;cursor:pointer;color:var(--tx2);font-weight:500;font-family:inherit;transition:all .2s}
.addb:hover{color:var(--pu);border-color:var(--pu)}
.fb{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.fr{display:grid;gap:10px}
.bts{background:linear-gradient(135deg,rgba(167,139,250,0.15),rgba(96,165,250,0.15));border:1px solid var(--pu);border-radius:20px;padding:8px 20px;font-size:12px;cursor:pointer;color:var(--pu);font-weight:600;font-family:inherit;transition:all .2s}
.bts:hover{background:var(--pu);color:#fff;box-shadow:0 4px 16px rgba(167,139,250,0.25)}
.bts:disabled{opacity:.5;cursor:not-allowed}
.btc{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:20px;padding:8px 18px;font-size:12px;cursor:pointer;color:var(--tx2);font-family:inherit;transition:all .2s}
.btc:hover{color:var(--tx);border-color:rgba(255,255,255,0.15)}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;font-size:9px;color:var(--tx3);padding:6px 8px 10px 0;border-bottom:1px solid var(--bd);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif}
.tbl td{padding:9px 8px 9px 0;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--tx)}
.tbl tr:last-child td{border-bottom:none}
.bdg{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600}
.bgs{background:rgba(74,222,128,0.12);color:var(--gn)}.bbl{background:rgba(96,165,250,0.12);color:var(--bl)}
.bam{background:rgba(251,191,36,0.12);color:var(--am)}.bpr{background:rgba(167,139,250,0.12);color:var(--pu)}.brd{background:rgba(248,113,113,0.12);color:var(--rd)}
.mn{font-variant-numeric:lining-nums}
#htbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:lining-nums}
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.chipg{background:rgba(74,222,128,0.12);color:var(--gn)}.chipr{background:rgba(248,113,113,0.12);color:var(--rd)}
.dbt{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:16px;padding:0 3px;line-height:1;font-family:inherit;transition:color .2s}
.dbt:hover{color:var(--rd)}
.ebt{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:13px;padding:0 3px;line-height:1;font-family:inherit;transition:color .2s}
.ebt:hover{color:var(--pu)}
.pbw{background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;height:5px;margin-top:4px}
.pbf{height:100%}
.cat-group{margin-bottom:16px;border:1px solid rgba(255,255,255,0.05);border-radius:var(--rl);overflow:hidden;background:rgba(20,22,39,0.3)}
.cat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;transition:background .2s}
.cat-header:hover{background:rgba(255,255,255,0.03)}
.cat-header-left{display:flex;align-items:center;gap:10px}
.cat-icon{font-size:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.cat-icon svg{width:14px;height:14px}
.cat-icon-us{background:rgba(96,165,250,0.15);color:var(--bl)}
.cat-icon-crypto{background:rgba(251,191,36,0.15);color:var(--am)}
.cat-icon-idx{background:rgba(74,222,128,0.15);color:var(--gn)}
.cat-icon-other{background:rgba(167,139,250,0.15);color:var(--pu)}
.cat-icon-emas{background:rgba(245,158,11,0.15);color:#f59e0b}
.cat-icon-reksadana{background:rgba(129,140,248,0.15);color:#818cf8}
.cat-icon-obligasi{background:rgba(56,189,248,0.15);color:#38bdf8}
.cat-icon-deposito{background:rgba(52,211,153,0.15);color:#34d399}
.cat-icon-p2p{background:rgba(244,114,182,0.15);color:#f472b6}
.cat-icon-properti{background:rgba(251,146,60,0.15);color:#fb923c}
.cat-name{font-size:13px;font-weight:700;letter-spacing:0.02em}
.cat-count{font-size:10px;color:var(--tx3);background:rgba(255,255,255,0.06);padding:1px 7px;border-radius:10px;font-weight:600}
.cat-header-right{display:flex;align-items:center;gap:14px}
.cat-subtotal{font-size:11px;color:var(--tx2);font-weight:600;font-variant-numeric:lining-nums}
.cat-pl{font-size:11px;font-weight:600;font-variant-numeric:lining-nums}
.cat-chevron{font-size:10px;color:var(--tx3);transition:transform .2s}
.cat-chevron.collapsed{transform:rotate(-90deg)}
.cat-body{overflow:hidden;transition:max-height .3s ease}
.cat-body.collapsed{max-height:0!important}
.drag-handle{cursor:grab;color:var(--tx3);font-size:12px;padding:0 4px;opacity:0;transition:opacity .15s}
tr:hover .drag-handle{opacity:1}
.drag-handle:active{cursor:grabbing}
tr.dragging{opacity:0.4;background:rgba(167,139,250,0.08)}
tr.drag-over{border-top:2px solid var(--pu)!important}
tr.drag-over td{border-top:2px solid var(--pu)!important}
.htbl-cat td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:lining-nums}
.trb{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:6px;padding:3px 10px;font-size:10px;font-weight:600;cursor:pointer;color:var(--tx3);font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:3px}
.trb:hover{border-color:var(--pu);color:var(--pu)}
.trb.on{background:rgba(167,139,250,0.15);border-color:var(--pu);color:var(--pu)}
.wrb{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:6px;padding:3px 9px;font-size:10px;font-weight:600;cursor:pointer;color:var(--tx3);font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:3px}
.wrb:hover{border-color:var(--pu);color:var(--pu)}
.wrb.on{background:rgba(167,139,250,0.15);border-color:var(--pu);color:var(--pu)}
/* Range More dropdown — shared by portfolio + wealth charts */
.rng-more-wrap{position:relative;display:inline-flex}
.rng-more-btn{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:6px;padding:3px 9px;font-size:10px;font-weight:600;cursor:pointer;color:var(--tx3);font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:4px;user-select:none}
.rng-more-btn:hover,.rng-more-btn.open{border-color:var(--pu);color:var(--pu)}
.rng-more-btn.has-active{background:rgba(167,139,250,0.15);border-color:var(--pu);color:var(--pu)}
.rng-more-menu{display:none;position:absolute;top:calc(100% + 5px);right:0;background:var(--card-bg,#13152a);border:1px solid var(--bd);border-radius:8px;padding:4px;z-index:999;min-width:110px;box-shadow:0 8px 24px rgba(0,0,0,0.35)}
.rng-more-menu.open{display:block}
.rng-more-item{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;color:var(--tx3);transition:background .15s,color .15s;white-space:nowrap}
.rng-more-item:hover{background:rgba(167,139,250,0.1);color:var(--pu)}
.rng-more-item.on{background:rgba(167,139,250,0.15);color:var(--pu)}
.rng-more-item svg{flex-shrink:0;opacity:.7}
.rng-more-item.on svg{opacity:1}
.leg{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.li2{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif}
.ld{width:9px;height:9px;border-radius:2px;flex-shrink:0}
/* Vertical legend for portfolio charts */
.p-leg-v{margin-top:14px;display:flex;flex-direction:column}
.p-alloc-card{height:fit-content!important}
.emp{text-align:center;padding:32px;color:var(--tx3);font-size:13px}
.toast{position:fixed;bottom:24px;right:24px;background:rgba(20,22,39,0.95);backdrop-filter:blur(12px);border:1px solid var(--bd);border-radius:12px;padding:12px 18px;font-size:13px;color:var(--tx);z-index:999;transform:translateY(80px);opacity:0;transition:all .3s ease;max-width:300px;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.toast.show{transform:translateY(0);opacity:1}
.toast.tok{border-color:rgba(74,222,128,0.3);color:var(--gn)}
.toast.terr{border-color:rgba(248,113,113,0.3);color:var(--rd)}
.ov{display:none;position:fixed;inset:0;background:rgba(8,10,20,0.7);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:20px}
.ov.open{display:flex}
.ovbox{background:var(--bg2);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 64px rgba(0,0,0,0.4)}
.ovbox h3{font-size:15px;font-weight:700;margin-bottom:18px;letter-spacing:-0.01em}
.catrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.rate-bar{display:flex;align-items:center;gap:8px;background:rgba(20,22,39,0.6);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:10px 14px;font-size:12px;color:var(--tx2);margin-bottom:16px;flex-wrap:wrap}
.ccbar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;margin-top:3px}
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.mrow,.mrow3{grid-template-columns:1fr 1fr}.g2,.g3{grid-template-columns:1fr}.fr{grid-template-columns:1fr 1fr!important}}
/* mrow/mrow3 STAYS 2-col at 440px — overridden by end-of-file media query */
@media(max-width:440px){.fr{grid-template-columns:1fr!important}}


/* =====================================================
   DATA TRANSAKSI — MOBILE CARD VIEW
   ===================================================== */
@media(max-width:640px){
  /* Filters bar */
  /* Data Transaksi filter bar — 2 rows */
  #sec-dt #dtc > div:first-child{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }
  /* Row 1: Bulan (child 1), Tahun (child 2), Kategori (child 3), Export CSV */
  #sec-dt #dtc > div:first-child > :nth-child(1){flex:0 0 82px;min-width:0}
  #sec-dt #dtc > div:first-child > :nth-child(2){flex:0 0 70px;min-width:0}
  #sec-dt #dtc > div:first-child > :nth-child(3){flex:1 1 110px;min-width:0}
  /* Export CSV button — stays row 1, no grow */
  #sec-dt #dtc .addb{flex:0 0 auto;font-size:11px;padding:5px 9px;white-space:nowrap}
  /* Search — full width row 2 */
  #sec-dt #dt-search{width:100%!important;flex:1 1 100%!important;min-width:0}
  /* Count label — full width row 3 */
  #dt-count{width:100%;flex:1 1 100%}

  /* Hide desktop table, show cards */
  #sec-dt .card{padding:0;border:none;background:transparent}
  #sec-dt .card > div{overflow-x:visible!important}
  #sec-dt table.tbl{display:none}

  /* Card list injected by JS via dt-cards */
  #dt-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
  .dt-card{
    background:rgba(20,22,39,0.65);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    padding:12px 14px;
    transition:border-color .2s;
  }
  .dt-card:hover{border-color:rgba(167,139,250,0.15)}
  .dt-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
  .dt-card-desc{font-size:13px;font-weight:600;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dt-card-amount{font-size:14px;font-weight:700;font-variant-numeric:lining-nums;white-space:nowrap;flex-shrink:0}
  .dt-card-meta{display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center}
  .dt-card-date{font-size:11px;color:var(--tx3);font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif}
  .dt-card-cat{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--tx2)}
  .dt-card-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .dt-card-pm{font-size:11px;color:var(--tx3)}
  .dt-card-type{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px}
  .dt-card-actions{display:flex;gap:4px;align-items:center;flex-shrink:0;margin-left:4px}
}
@media(min-width:641px){
  #dt-cards{display:none}
}


/* ============================================================
   MOBILE RESPONSIVE FIXES — Input forms & specific UI fixes
   (Grid/card layout rules are at end of file)
   ============================================================ */

/* Input Transaksi date+currency special layout */
@media(max-width:768px){
  #in-p-tx .in-row3>.fg:nth-child(3),
  #in-p-ht .in-row3>.fg:nth-child(3){grid-column:1/-1!important}
  #tf-dt{width:100%!important;min-width:0!important;display:block!important}
  #sec-tf input,#sec-tf select{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}
@media(max-width:480px){
  .in-row3{grid-template-columns:1fr!important}
  #in-p-tx .in-row3>.fg:nth-child(3),
  #in-p-ht .in-row3>.fg:nth-child(3){grid-column:auto!important}
}

/* Rekening & Saldo Awal: tabel scroll horizontal */
@media(max-width:768px){
  .acc-grid-2,.acc-grid-3{grid-template-columns:1fr!important}
  #sec-a .card{overflow:hidden}
  #sec-a .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:340px!important;width:100%}
  #sec-a .tbl th,#sec-a .tbl td{font-size:10px!important;padding:6px 5px!important;white-space:nowrap}
  #sec-a .ebt,#sec-a .dbt{padding:2px 5px!important;font-size:10px!important}
  #sec-a .card>div:last-child{font-size:11px!important;flex-wrap:wrap;gap:4px}
  #sec-a [style*="justify-content:space-between"]{flex-wrap:wrap;gap:4px}
}

/* Date input global */
input[type='date']{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:768px){
  /* Pastikan date input tidak menembus border */
  input[type='date']{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    -webkit-appearance:none;
    appearance:none;
  }
  /* Form group wrapper tidak overflow (kecuali yang punya dropdown absolute) */
  .fg{
    min-width:0;
    overflow:visible;
  }
  /* Khusus input/select biasa tetap clip teks panjang */
  .fg input, .fg select{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  /* All inputs & selects dalam form: full width, tidak overflow */
  #sec-in .fg input,
  #sec-in .fg select,
  #sec-tf .fg input,
  #sec-tf .fg select{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    min-width:0!important;
  }
  /* in-row3: tanggal + mata uang jadi 2 kolom, kategori full */
  .in-row3{
    grid-template-columns:1fr 1fr!important;
    align-items:end;
  }
  /* Pada layar sangat kecil: semua field jadi 1 kolom */
}
@media(max-width:400px){
  .in-row3{
    grid-template-columns:1fr!important;
  }
  #sec-a .tbl th, #sec-a .tbl td{
    font-size:9px!important;
    padding:5px 4px!important;
  }
}


/* ===== RANGE BUTTONS: DESKTOP vs MOBILE PORTRAIT ===== */
/* Desktop default: hide mobile-only buttons */
.rng-mob-only { display: none !important; }
.rng-desk-only { display: inline-flex; }

/* Mobile portrait (max-width 600px OR orientation portrait + max-width 768px) */
@media (max-width: 600px), (max-width: 768px) and (orientation: portrait) {
  .rng-desk-only { display: none !important; }
  .rng-mob-only  { display: inline-flex !important; }

  /* Compact button sizing on small screens */
  .wrb, .trb {
    padding: 3px 7px;
    font-size: 9.5px;
    gap: 2px;
  }
  .wrb svg, .trb svg { display: none; }

  /* Dropdown menu flush right on mobile */
  .rng-more-menu {
    right: 0;
    left: auto;
    min-width: 90px;
  }
  .rng-more-item {
    padding: 6px 9px;
    font-size: 10.5px;
  }

  /* Range buttons row — allow wrap without overflow */
  #wealth-range-btns,
  #trend-range-btns {
    gap: 3px;
    flex-wrap: wrap;
  }
}

/* ===== CHART ENTRY ANIMATION ===== */
/* Donut: scale from center on page load */
@keyframes donutEntrance {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.chart-donut-wrap {
  animation: donutEntrance 0.55s cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

/* Line chart: slide in from left */
@keyframes lineSlideIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

/* Stagger for multiple donuts in same card */
.chart-donut-wrap:nth-child(2) { animation-delay: 0.08s; }
.chart-donut-wrap:nth-child(3) { animation-delay: 0.16s; }

/* ===== RESET BUTTON TREND CHART ===== */
.trb-reset { gap: 4px; font-weight: 700; letter-spacing: 0.04em; }
.trb-reset:hover {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.5) !important;
  color: var(--rd) !important;
}

/* ── App Loader — wind spinner + aurora ───────────────── */
#app-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.35s ease;
  overflow:hidden;
}
/* Aurora CSS background — speed 2/10 = 24s */
#al-aurora-wrap{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse at 70% 10%,black 15%,transparent 65%);
  mask-image:radial-gradient(ellipse at 70% 10%,black 15%,transparent 65%);
}
#al-aurora{
  position:absolute;inset:-10px;pointer-events:none;will-change:transform;
  --aurora:repeating-linear-gradient(100deg,#a78bfa 10%,#818cf8 15%,#60a5fa 20%,#c4b5fd 25%,#7dd3fc 30%);
  --mask:repeating-linear-gradient(100deg,#000 0%,#000 7%,transparent 10%,transparent 12%,#000 16%);
  background-image:var(--mask),var(--aurora);
  background-size:300%,200%;
  filter:blur(14px);opacity:0.7;
  animation:al-aurora-move 24s linear infinite;
}
#al-aurora::after{
  content:'';position:absolute;inset:0;
  background-image:var(--mask),var(--aurora);
  background-size:200%,100%;
  background-attachment:fixed;
  mix-blend-mode:difference;
  animation:al-aurora-move 18s linear infinite reverse;
}
@keyframes al-aurora-move{
  0%  {background-position:0% 50%,  0% 50%}
  50% {background-position:100% 50%,100% 50%}
  100%{background-position:0% 50%,  0% 50%}
}
/* Light mode aurora */
#app-loader.al-light #al-aurora{
  --aurora:repeating-linear-gradient(100deg,#7C3AED 10%,#6366F1 15%,#3B82F6 20%,#8B5CF6 25%,#06B6D4 30%);
  --mask:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  background-image:var(--mask),var(--aurora);
  opacity:0.6;filter:blur(14px) invert(1);
}
#app-loader.al-light #al-aurora::after{background-image:var(--mask),var(--aurora)}

/* Spinner scene */
#al-scene{
  position:relative;z-index:2;
  width:100px;height:100px;
  opacity:0;animation:al-fadeup .6s cubic-bezier(.22,1,.36,1) .05s forwards;
}
#al-windcv{position:absolute;inset:0;width:100px;height:100px}
#al-rings{position:absolute;inset:0}
.al-ring-outer{position:absolute;inset:0;animation:al-cw 3.8s linear infinite}
.al-ring-inner{position:absolute;inset:12px;animation:al-ccw 2.6s linear infinite}
.al-icon-dot{
  position:absolute;inset:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#app-loader:not(.al-light) .al-icon-dot{background:rgba(167,139,250,0.15)}
#app-loader.al-light .al-icon-dot{background:rgba(124,58,237,0.12)}
#app-loader:not(.al-light) #al-isvg{stroke:#c4b5fd}
#app-loader.al-light #al-isvg{stroke:#7C3AED}
@keyframes al-cw {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes al-ccw{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* Dots — replace text */
#al-dots{
  position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;
  opacity:0;animation:al-fadeup .6s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.al-dot{width:4px;height:4px;border-radius:50%}
.al-dot:nth-child(1){animation:al-dp 1.6s ease-in-out 0s infinite}
.al-dot:nth-child(2){animation:al-dp 1.6s ease-in-out .2s infinite}
.al-dot:nth-child(3){animation:al-dp 1.6s ease-in-out .4s infinite}
.al-dot:nth-child(4){animation:al-dp 1.6s ease-in-out .6s infinite}
.al-dot:nth-child(5){animation:al-dp 1.6s ease-in-out .8s infinite}
@keyframes al-dp{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}

#app-loader:not(.al-light) .al-dot{background:#a78bfa}
#app-loader.al-light .al-dot{background:#7C3AED}

/* Progress bar */
#al-bar-wrap{position:absolute;bottom:0;left:0;right:0;height:1.5px}
#app-loader:not(.al-light) #al-bar-wrap{background:rgba(167,139,250,0.05)}
#app-loader.al-light #al-bar-wrap{background:rgba(124,58,237,0.06)}
#al-bar{height:100%;width:0%;border-radius:2px;transition:width 0.4s cubic-bezier(.4,0,.2,1)}
#app-loader:not(.al-light) #al-bar{background:linear-gradient(90deg,#a78bfa,#60a5fa,#818cf8)}
#app-loader.al-light #al-bar{background:linear-gradient(90deg,#7C3AED,#6366F1)}

#app-loader.al-hide{opacity:0;pointer-events:none}
@keyframes al-fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  #al-aurora,#al-aurora::after,.al-ring-outer,.al-ring-inner{animation:none}
  .al-dot{animation:none;opacity:0.5}
}

@keyframes login-aurora-move{
  0%  {background-position:0% 50%,  0% 50%}
  50% {background-position:100% 50%,100% 50%}
  100%{background-position:0% 50%,  0% 50%}
}
@keyframes login-aurora-move-after{
  0%  {background-position:0% 50%,  0% 50%}
  50% {background-position:100% 50%,100% 50%}
  100%{background-position:0% 50%,  0% 50%}
}