:root{
  --bg:#0a0e17; --bg-alt:#0d1320; --card:#111827; --border:#1f2937;
  --text:#e5e9f0; --muted:#8b95a7; --accent:#3b82f6; --accent2:#22c55e;
  --up:#22c55e; --down:#ef4444;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; line-height:1.6;}
.container{max-width:1160px; margin:0 auto; padding:0 24px;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}

.btn{display:inline-block; padding:12px 24px; border-radius:8px; font-weight:600; font-size:14px; transition:.2s; cursor:pointer; border:none;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#2563eb;}
.btn-outline{border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent);}
.btn-ghost{color:var(--muted);}

.navbar{position:sticky; top:0; background:rgba(10,14,23,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:50;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{font-weight:800; font-size:20px;}
.logo span{color:var(--accent);}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--muted);}
.nav-links a:hover{color:var(--text);}

.hero{padding:80px 0; position:relative; background:linear-gradient(180deg, rgba(10,14,23,.75), rgba(10,14,23,.95)), url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.eyebrow{display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:rgba(59,130,246,.1); padding:6px 12px; border-radius:20px; margin-bottom:18px;}
.hero h1{font-size:42px; line-height:1.15; margin-bottom:18px;}
.hero p{color:var(--muted); font-size:16px; margin-bottom:28px; max-width:480px;}
.hero-actions{display:flex; gap:14px; margin-bottom:18px;}
.disclaimer{font-size:12px; color:#6b7280; max-width:440px;}

.hero-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px;}
.card-head{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); margin-bottom:10px;}
.pill{font-size:12px; padding:4px 10px; border-radius:20px; font-weight:600;}
.pill-up{background:rgba(34,197,94,.15); color:var(--up);}
.big-number{font-size:34px; font-weight:800; margin-bottom:14px;}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; font-size:12px; color:var(--muted);}
.mini-stats strong{display:block; font-size:14px; color:var(--text); margin-top:4px;}
.up{color:var(--up) !important;}

.section{padding:70px 0;}
.section-alt{background:var(--bg-alt);}
.section-title{text-align:center; font-size:28px; margin-bottom:40px;}
.section-title.left{text-align:left;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

.feature-card, .plan-card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px;}
.icon-circle{width:40px; height:40px; border-radius:10px; background:rgba(59,130,246,.15); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:18px;}
.feature-card h3{margin-bottom:8px; font-size:17px;}
.feature-card p{color:var(--muted); font-size:14px;}

.plan-card{text-align:center;}
.plan-card.featured{border-color:var(--accent); position:relative;}
.plan-card h4{font-size:16px; color:var(--muted); margin-bottom:10px;}
.plan-rate{font-size:26px; font-weight:800; margin-bottom:18px;}
.plan-rate span{font-size:12px; font-weight:400; color:var(--muted);}
.plan-card ul li{color:var(--muted); font-size:13px; padding:6px 0; border-top:1px solid var(--border);}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.about-grid p{color:var(--muted); margin:16px 0 24px;}
.about-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.stat-box{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center;}
.stat-box strong{display:block; font-size:22px; color:var(--accent);}
.stat-box span{font-size:12px; color:var(--muted);}
.about-image{border-radius:14px; overflow:hidden; border:1px solid var(--border); margin-bottom:16px;}
.about-image img{width:100%; height:220px; object-fit:cover; display:block;}
.plans-image{border-radius:14px; overflow:hidden; border:1px solid var(--border); margin-bottom:40px;}
.plans-image img{width:100%; height:260px; object-fit:cover; display:block;}

.footer{border-top:1px solid var(--border); padding:28px 0; margin-top:40px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted);}

/* Login */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:40px; width:100%; max-width:380px;}
.auth-card h2{margin-bottom:6px;}
.auth-card p.sub{color:var(--muted); font-size:13px; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; padding:12px 14px; background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px;}
.field input:focus{outline:none; border-color:var(--accent);}
.auth-card .btn-primary{width:100%; padding:13px;}
.hint-box{margin-top:18px; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.3); border-radius:8px; padding:12px 14px; font-size:12px; color:#93c5fd;}
.error-msg{color:var(--down); font-size:13px; margin-top:10px; display:none;}
.back-link{display:block; text-align:center; margin-top:18px; font-size:13px; color:var(--muted);}

/* Dashboard */
.dash-nav{display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--border);}
.dash-user{display:flex; align-items:center; gap:10px; font-size:14px;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.demo-banner{background:rgba(234,179,8,.1); border:1px solid rgba(234,179,8,.35); color:#facc15; padding:12px 18px; border-radius:10px; font-size:13px; margin:24px 0; display:flex; align-items:center; gap:10px;}
.dash-grid{display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-top:24px;}
.panel{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px;}
.panel h3{font-size:15px; margin-bottom:18px; color:var(--muted); font-weight:600;}
.balance-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px;}
.balance-row .big-number{font-size:36px;}
.holdings-table{width:100%; border-collapse:collapse; font-size:13px;}
.holdings-table th{text-align:left; color:var(--muted); font-weight:500; padding:8px 0; border-bottom:1px solid var(--border);}
.holdings-table td{padding:12px 0; border-bottom:1px solid var(--border);}
.side-stats div{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px;}
.side-stats div:last-child{border-bottom:none;}
.side-stats span{color:var(--muted);}
.btn-disabled{background:#374151; color:#9ca3af; cursor:not-allowed; width:100%; padding:13px; border-radius:8px; font-weight:600; border:none; margin-top:14px; font-size:14px;}
.actions-row{display:flex; gap:10px; margin-top:14px;}
.actions-row .btn{flex:1; text-align:center;}

/* Responsive layout */
.hero-grid > *, .about-grid > *, .dash-grid > *{min-width:0;}
canvas{display:block; width:100%; max-width:100%;}
.avatar{flex-shrink:0;}
.side-stats div{gap:16px;}
.side-stats strong{text-align:right;}
@media (max-width:900px){
  .hero-grid,.about-grid,.dash-grid{grid-template-columns:1fr; gap:24px;}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-links{gap:16px;}
  .hero{padding:48px 0;}
}
@media (max-width:600px){
  .container{padding:0 16px;}
  .nav-inner{height:auto; min-height:72px; flex-wrap:wrap; gap:12px; padding-top:14px; padding-bottom:14px;}
  .nav-links{width:100%; flex-wrap:wrap; gap:10px 16px;}
  .nav-links .btn{padding:10px 14px;}
  .hero h1{font-size:32px;}
  .hero-actions{flex-wrap:wrap;}
  .hero-actions .btn{flex:1; text-align:center;}
  .grid-3{grid-template-columns:1fr;}
  .section{padding:40px 0;}
  .section-title{font-size:25px; margin-bottom:24px;}
  .feature-card,.plan-card,.hero-card,.panel{padding:18px;}
  .footer-inner{flex-direction:column; align-items:flex-start; gap:12px;}
  .auth-wrap{padding:16px; min-height:100svh;}
  .auth-card{padding:26px 20px;}
  .field input{font-size:16px;}
  .dash-nav{flex-direction:column; align-items:flex-start; gap:14px;}
  .dash-user{width:100%; gap:8px;}
  .dash-user > span{flex:1; min-width:0; overflow-wrap:anywhere;}
  .dash-user .btn{white-space:nowrap; flex-shrink:0;}
  .dash-grid{gap:16px; margin-top:16px; padding-bottom:24px;}
  .balance-row{flex-wrap:wrap; gap:8px; align-items:flex-start;}
  .balance-row .big-number{font-size:clamp(26px,7.5vw,36px); margin-bottom:0;}
  .balance-row h3{margin-bottom:8px;}
  .holdings-table{table-layout:fixed; font-size:12px;}
  .holdings-table th,.holdings-table td{padding:10px 4px; overflow-wrap:anywhere; vertical-align:top;}
  .holdings-table th:first-child,.holdings-table td:first-child{width:33%; padding-left:0;}
  .holdings-table th:nth-child(2){width:20%;}
  .holdings-table th:nth-child(3){width:29%;}
  .holdings-table th:last-child,.holdings-table td:last-child{text-align:right; padding-right:0;}
  .side-stats div{gap:12px;}
  .side-stats strong{overflow-wrap:anywhere;}
  .actions-row{flex-wrap:wrap;}
  .actions-row .btn{min-width:0; padding:12px;}
  .mini-stats{gap:8px;}
  .mini-stats strong{overflow-wrap:anywhere;}
}

/* Presentation context stays separate from the portfolio panels. */
.presentation-note{margin:24px 0; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:13px;}
.presentation-note strong{color:var(--text); font-weight:600;}
.presentation-note p{margin-top:6px;}
.pill{white-space:nowrap;}

/* Clickable profile and accessible native dialog. */
.profile-button{display:flex; align-items:center; gap:10px; min-width:0; padding:4px 0; background:transparent; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:8px;}
.profile-name{min-width:0; overflow-wrap:anywhere;}
.profile-button:hover .profile-name{color:var(--accent);}
.profile-button:focus-visible,.profile-close:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.profile-dialog{margin:auto; width:calc(100% - 32px); max-width:420px; max-height:calc(100svh - 32px); overflow-y:auto; padding:24px; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.4);}
.profile-dialog::backdrop{background:rgba(0,0,0,.65);}
.profile-dialog-heading{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px;}
.profile-dialog-heading h2{font-size:18px;}
.profile-close{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--bg-alt); cursor:pointer; font-size:24px;}
.profile-details > div{padding:12px 0; border-bottom:1px solid var(--border);}
.profile-details > div:last-child{border-bottom:0;}
.profile-details dt{font-size:12px; color:var(--muted); margin-bottom:4px;}
.profile-details dd{font-size:14px; overflow-wrap:anywhere;}
@media(max-width:600px){.dash-user .profile-button{flex:1;} .profile-dialog{padding:20px;}}

/* Homepage motion: transform-only effects preserve layout and readable content. */
@keyframes home-enter{from{opacity:.45; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}
@keyframes home-picture{0%,100%{transform:scale(1.01) translateX(-.3%);}50%{transform:scale(1.045) translateX(.3%);}}
.home-page .motion-enter{animation:home-enter .7s ease-out both;}
.home-page .about-image img,.home-page .plans-image img{animation:home-picture 14s ease-in-out infinite;}
.home-page.motion-paused .motion-enter{animation:none;}
.home-page.motion-paused .about-image img,.home-page.motion-paused .plans-image img{animation-play-state:paused;}
.home-page .footer-inner{gap:16px; flex-wrap:wrap;}
@media(prefers-reduced-motion:reduce){
  .home-page .motion-enter,.home-page .about-image img,.home-page .plans-image img{animation:none;}
}

.withdrawal-preview{width:100%; margin-top:14px; background:var(--bg-alt);}
.bank-preview-note{font-size:13px; color:var(--muted); margin-bottom:20px;}
#bankPreviewForm .btn-disabled{margin-top:0;}
@media(max-width:600px){#bankPreviewForm input{font-size:16px;}}

/* Dashboard navigation follows the existing dark palette. */
.dashboard-brand{display:flex; align-items:center; gap:12px;}
.dashboard-menu{position:relative;}
.menu-toggle{width:42px; height:42px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-size:23px; cursor:pointer;}
.dashboard-menu-panel{position:absolute; top:calc(100% + 8px); left:0; z-index:60; width:210px; padding:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.35);}
.dashboard-menu-panel button{display:block; width:100%; padding:12px; border:0; border-radius:6px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.dashboard-menu-panel button:hover{background:var(--bg-alt); color:var(--accent);}
.menu-toggle:focus-visible,.dashboard-menu-panel button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.field select{width:100%; padding:12px 14px; background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit;}
.analysis-heading{font-size:15px; margin:20px 0 12px;}
.allocation-item{margin-bottom:12px;}
.allocation-item > div{display:flex; justify-content:space-between; gap:16px; font-size:13px;}
.allocation-item meter{display:block; width:100%; height:12px; accent-color:var(--accent);}