:root {
  --portal-accent: #0EA5E9;
  --portal-accent-2: #10B981;
  --portal-accent-dark: #0284C7;
  --portal-sidebar: #0B1220;
  --portal-sidebar-2: #111827;
  --portal-glow: rgba(14, 165, 233, 0.25);
}

body.portal-app {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(16,185,129,.10), transparent 55%),
              #F8FAFC;
  color: #0F172A;
}

.portal-shell { display: flex; min-height: 100vh; }

.portal-sidebar {
  width: 280px;
  background: linear-gradient(180deg, var(--portal-sidebar) 0%, #0F172A 45%, #1E293B 100%);
  color: #E2E8F0;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  border-right: 1px solid rgba(255,255,255,.06);
}

.portal-brand { padding: 1.5rem 1.25rem 1rem; }
.portal-brand-link { display: flex; gap: .85rem; align-items: center; text-decoration: none; color: #fff; }
.portal-brand-mark {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-2));
  display: grid; place-items: center; font-size: 1.2rem;
  box-shadow: 0 10px 30px var(--portal-glow);
}
.portal-brand-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.portal-brand-sub { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }

.portal-org-chip {
  margin: 0 1rem 1rem; padding: .65rem .85rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: #CBD5E1;
}

.portal-nav { padding: 0 .75rem; flex: 1; }
.portal-nav-link {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; margin-bottom: .35rem;
  border-radius: 12px; color: #CBD5E1; text-decoration: none; font-weight: 500; transition: .2s ease;
}
.portal-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.portal-nav-link.active {
  background: linear-gradient(135deg, rgba(14,165,233,.25), rgba(16,185,129,.18));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(14,165,233,.35);
}

.portal-nav-group { margin-bottom: .35rem; }
.portal-nav-group-head {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem;
  border-radius: 12px; color: #E2E8F0; font-weight: 600; font-size: .92rem;
}
.portal-nav-group.open .portal-nav-group-head {
  background: rgba(255,255,255,.04);
  color: #fff;
}
.portal-nav-sub {
  margin: .15rem 0 .5rem 1.35rem; padding-left: .65rem;
  border-left: 1px solid rgba(255,255,255,.12);
}
.portal-nav-sublink {
  display: block; padding: .5rem .65rem; margin-bottom: .15rem; border-radius: 10px;
  color: #94A3B8; text-decoration: none; font-size: .86rem; font-weight: 500; transition: .2s ease;
}
.portal-nav-sublink:hover { background: rgba(255,255,255,.06); color: #fff; }
.portal-nav-sublink.active {
  background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(16,185,129,.14));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(14,165,233,.3);
}

.portal-sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.portal-user { display: flex; gap: .65rem; align-items: center; }
.portal-avatar {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #334155, #1E293B);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.btn-portal-ghost { color: #CBD5E1; border: 1px solid rgba(255,255,255,.12); background: transparent; }
.btn-portal-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }

.portal-main { margin-left: 280px; flex: 1; min-width: 0; }
.portal-header { padding: 1.75rem 2rem .5rem; }
.portal-page-title { margin: 0; font-family: Outfit, sans-serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.portal-page-sub { margin: .35rem 0 0; color: #64748B; }
.portal-content { padding: .5rem 2rem 2rem; }

.portal-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.portal-stat-card {
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border: 1px solid #E2E8F0; border-radius: 18px; padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.portal-stat-card .label { color: #64748B; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.portal-stat-card .value { font-size: 1.8rem; font-weight: 800; margin-top: .25rem; font-family: Outfit, sans-serif; }
.portal-stat-card .meta { color: #64748B; font-size: .82rem; margin-top: .15rem; }

.portal-panel {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15,23,42,.05); overflow: hidden;
}
.portal-panel-header { padding: 1rem 1.25rem; border-bottom: 1px solid #EEF2F7; font-weight: 700; }
.portal-panel-body { padding: 1rem 1.25rem; }

.portal-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.portal-channel-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: 18px; border: 1px solid #E2E8F0; background: #fff; padding: 1.2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.portal-channel-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(14,165,233,.12); border-color: #BAE6FD; }
.portal-channel-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(16,185,129,.12)); color: #0284C7; font-size: 1.3rem;
}

.portal-login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem;
  background: radial-gradient(900px 500px at 20% 0%, rgba(14,165,233,.18), transparent 60%),
              radial-gradient(700px 400px at 100% 100%, rgba(16,185,129,.12), transparent 55%),
              #0B1220;
}
.portal-login-card {
  width: 100%; max-width: 440px; background: rgba(255,255,255,.96);
  border-radius: 22px; padding: 2rem; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.portal-login-card h1 { font-family: Outfit, sans-serif; font-weight: 800; margin-bottom: .25rem; }
.portal-login-card .sub { color: #64748B; margin-bottom: 1.5rem; }

.ledger-amount-credit { color: #059669; font-weight: 700; }
.ledger-amount-debit { color: #DC2626; font-weight: 700; }

@media (max-width: 992px) {
  .portal-sidebar { position: static; width: 100%; }
  .portal-main { margin-left: 0; }
  .portal-shell { flex-direction: column; }
}