/* ================= Wicky Analysis — shared theme ================= */
:root {
  --navy: #0a1a45; --navy-deep: #050f2e; --emerald: #10b981; --sky: #2563eb;
}
html, body { overflow-x: hidden; }
body {
  background-color: #f6f9ff;
  color: #0f2560;
  background-image:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 15%, rgba(16,185,129,0.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(10,26,69,0.06), transparent);
  min-height: 100vh;
}
.mesh-dots { background-image: radial-gradient(rgba(30,64,175,0.10) 1px, transparent 1px); background-size: 26px 26px; }
.scene { perspective: 1400px; }

.glass {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px -12px rgba(10,26,69,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
.glass-navy {
  background: linear-gradient(150deg, rgba(10,26,69,0.94), rgba(5,15,46,0.94));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
}
.card-3d { transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease; }
.card-3d:hover { box-shadow: 0 30px 60px -20px rgba(10,26,69,0.35), 0 0 0 1px rgba(37,99,235,0.12); }

.grad-border { position: relative; }
.grad-border::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(135deg,#2563eb,#10b981 55%,#60a5fa);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.grad-border:hover::before { opacity:1; }

.btn-primary { background: linear-gradient(135deg,#2563eb,#1e40af); color:#fff; box-shadow: 0 10px 24px -8px rgba(37,99,235,0.55), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .3s ease, box-shadow .3s ease; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -8px rgba(37,99,235,0.65); }
.btn-emerald { background: linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow: 0 10px 24px -8px rgba(16,185,129,0.55), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .3s ease, box-shadow .3s ease; }
.btn-emerald:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -8px rgba(16,185,129,0.65); }
.btn-ghost { background: rgba(255,255,255,0.7); border: 1.5px solid rgba(30,64,175,0.2); color:#0f2560; transition: all .3s ease; }
.btn-ghost:hover { transform: translateY(-3px); border-color: rgba(37,99,235,0.5); box-shadow: 0 14px 30px -12px rgba(30,64,175,0.4); }
button:disabled, .btn-primary:disabled, .btn-emerald:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }

.text-grad { background: linear-gradient(100deg,#2563eb,#10b981); -webkit-background-clip:text; background-clip:text; color:transparent; }

.chip { background: linear-gradient(150deg,#fff,#eef4ff); box-shadow: 0 8px 18px -8px rgba(30,64,175,0.4), inset 0 1px 0 #fff; border: 1px solid rgba(255,255,255,0.9); }
.chip-emerald { background: linear-gradient(150deg,#ecfdf5,#d1fae5); box-shadow: 0 8px 18px -8px rgba(16,185,129,0.5), inset 0 1px 0 #fff; }

.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: linear-gradient(90deg,#2563eb,#10b981); border-radius:2px; transition: width .3s ease; }
.nav-link:hover::after { width:100%; }

.input { background: rgba(255,255,255,0.85); border: 1.5px solid rgba(30,64,175,0.14); transition: all .25s ease; color:#0a1a45; }
.input:focus { outline:none; border-color:#2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.12); background:#fff; }
.input::placeholder { color:#94a3b8; }

.filter-tab { background: rgba(255,255,255,0.7); border: 1px solid rgba(30,64,175,0.14); color:#1e3a8a; transition: all .25s ease; }
.filter-tab:hover { border-color: rgba(37,99,235,0.45); }
.filter-tab.active { background: linear-gradient(135deg,#2563eb,#1e40af); color:#fff; border-color:transparent; box-shadow: 0 8px 18px -8px rgba(37,99,235,0.55); }

.feed-scroll::-webkit-scrollbar { width:7px; }
.feed-scroll::-webkit-scrollbar-thumb { background: rgba(30,64,175,0.25); border-radius:8px; }
.feed-item { transition: transform .25s ease, box-shadow .25s ease; }
.feed-item:hover { transform: translateX(4px); box-shadow: 0 10px 24px -14px rgba(10,26,69,0.4); }
@keyframes popIn { from { opacity:0; transform: translateY(-8px) scale(.98);} to { opacity:1; transform: translateY(0) scale(1);} }
.feed-new { animation: popIn .45s ease; }

.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform: translateY(0); }

/* Toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 100; opacity: 0; pointer-events: none; transition: all .3s ease; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

::selection { background: rgba(37,99,235,0.2); }
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:#eaf0fb; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#2563eb,#10b981); border-radius:8px; border:2px solid #eaf0fb; }

/* Loading spinner */
.spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg);} }

/* ================= PORTAL SHELL ================= */
.portal-layout { display: flex; min-height: 100vh; }

/* Sidebar */
#sidebar {
  width: 264px; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(30,64,175,0.08);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
#sidebar.open { transform: translateX(0); }
@media (min-width: 1024px) { #sidebar { transform: translateX(0); } }
.sidebar-scroll { overflow-y: auto; flex: 1; padding: 0.5rem 0.85rem 1.5rem; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(30,64,175,0.18); border-radius: 8px; }

.side-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: .8rem; font-weight: 600; font-size: .9rem; color: #475569; transition: all .2s ease; }
.side-link i { width: 18px; height: 18px; color: #64748b; transition: color .2s ease; }
.side-link:hover { background: rgba(37,99,235,0.07); color: #1e40af; }
.side-link:hover i { color: #2563eb; }
.side-link.active { background: linear-gradient(135deg,#2563eb,#1e40af); color: #fff; box-shadow: 0 10px 20px -8px rgba(37,99,235,0.55); }
.side-link.active i { color: #fff; }
.side-group { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #94a3b8; padding: 0 .8rem; margin: 1.15rem 0 .45rem; }

.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .portal-main { margin-left: 264px; } }

#topbar { position: sticky; top: 0; z-index: 50; padding: .85rem 1rem; }
.topbar-inner {
  background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 1rem;
  box-shadow: 0 8px 24px -14px rgba(10,26,69,0.25);
  padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.portal-content { padding: 0 1rem 2rem; flex: 1; }

/* Sidebar overlay (mobile) */
#sideOverlay { position: fixed; inset: 0; background: rgba(10,26,69,0.4); backdrop-filter: blur(2px); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#sideOverlay.show { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { #sideOverlay { display: none; } }

/* Action tiles */
.tile { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(10,26,69,0.35); }
.tile-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; }

.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }