@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
 --bg:#f4f7fb;--surface:rgba(255,255,255,.82);--surface2:#ffffff;--ink:#102139;--muted:#6e7d91;
 --line:rgba(26,54,90,.10);--green:#38e6ad;--green2:#24c68f;--cyan:#57bfff;--violet:#8a72ff;--gold:#f5b94b;
 --nav1:#0d1b2f;--nav2:#18365c;--shadow:0 20px 60px rgba(28,54,90,.10);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;background:
 radial-gradient(circle at 8% 8%,rgba(56,230,173,.14),transparent 26%),
 radial-gradient(circle at 92% 16%,rgba(87,191,255,.15),transparent 30%),
 radial-gradient(circle at 84% 88%,rgba(138,114,255,.10),transparent 27%),
 linear-gradient(145deg,#f8fbff,#f4f6fc 55%,#f8f5ff);min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(31,74,119,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(31,74,119,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.portal-sidebar{position:fixed;left:0;top:0;width:286px;height:100dvh;padding:22px 16px;background:linear-gradient(165deg,var(--nav1),var(--nav2));color:#fff;z-index:100;display:flex;flex-direction:column;box-shadow:18px 0 55px rgba(16,38,68,.18);transition:.28s ease}
.brand{font:700 27px "Space Grotesk";display:flex;align-items:center;gap:10px;padding:7px 9px 22px}.brand-mark{width:35px;height:35px;border-radius:12px;background:linear-gradient(145deg,var(--green),var(--cyan));display:grid;place-items:center;color:#0e2740;font-weight:800;box-shadow:0 10px 25px rgba(56,230,173,.25)}.brand b{color:var(--green)}
.side-close{display:none;margin-left:auto;width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#fff;font-size:25px}
.side-head{display:flex;align-items:flex-start}.side-nav{display:grid;gap:5px}.side-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;color:#c7d5e7;transition:.2s ease;font-size:14px}.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}.side-nav a.active{box-shadow:inset 3px 0 var(--green)}.nav-icon{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.075);display:grid;place-items:center;color:#8cf7d3}
.side-bottom{margin-top:auto}.side-user{padding:13px;border-radius:17px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}.avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,var(--green),var(--cyan));color:#10273e;font-weight:800}.side-user small{display:block;color:#a9bad0;margin-top:2px}.logout-btn{width:100%;margin-top:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:13px;padding:12px;font-weight:700}
.portal-main{margin-left:286px;padding:28px;min-height:100vh;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.topbar-left{display:flex;align-items:center;gap:12px}.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:rgba(255,255,255,.88);border-radius:14px;box-shadow:var(--shadow)}.menu-btn span{display:block;width:19px;height:2px;background:#263b54;margin:4px auto}.page-kicker{color:#7c8ba0;font-size:12px}.page-title{font:700 34px "Space Grotesk";margin:2px 0}.top-actions{display:flex;gap:9px;align-items:center}.top-pill{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.82);font-weight:700;box-shadow:0 12px 32px rgba(32,61,96,.05)}
.content{max-width:1500px}.glass{background:var(--surface);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);border-radius:var(--radius)}.panel{padding:22px}.muted{color:var(--muted);line-height:1.65}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(56,230,173,.11);color:#11835f;font-size:10px;font-weight:800;letter-spacing:.04em}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hero{padding:26px;display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;background:linear-gradient(135deg,rgba(232,255,247,.9),rgba(235,246,255,.92) 56%,rgba(243,239,255,.92));position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-110px;top:-170px;background:linear-gradient(135deg,rgba(56,230,173,.25),rgba(87,191,255,.18));filter:blur(8px)}.hero h2{font:700 36px "Space Grotesk";margin:8px 0}.hero-value{text-align:right;position:relative;z-index:1}.hero-value small{color:var(--muted);display:block}.hero-value strong{font:700 45px "Space Grotesk";display:block;margin:4px 0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:15px}.stat{padding:18px;position:relative;overflow:hidden}.stat-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:white;margin-bottom:14px;box-shadow:0 10px 25px rgba(30,70,110,.14)}.stat small,.stat span{color:var(--muted)}.stat strong{display:block;font:700 27px "Space Grotesk";margin:5px 0}.i-green{background:linear-gradient(145deg,var(--green2),var(--green))}.i-blue{background:linear-gradient(145deg,#4a8ff1,var(--cyan))}.i-purple{background:linear-gradient(145deg,#7657e8,var(--violet))}.i-gold{background:linear-gradient(145deg,#dc9f32,var(--gold))}
.strategy-card{padding:22px;position:relative;overflow:hidden;transition:.25s ease;display:flex;flex-direction:column;min-height:430px}.strategy-card:hover{transform:translateY(-6px) rotateX(1deg);box-shadow:0 30px 70px rgba(25,58,95,.15)}.strategy-card:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-80px;top:-90px;background:currentColor;opacity:.08}.strategy-card.zender{color:#1eb98a}.strategy-card.zello{color:#4a90ed}.strategy-card.maxino{color:#865ef1}.strategy-card h3{font:700 25px "Space Grotesk";color:var(--ink);margin:12px 0}.strategy-symbol{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(236,246,255,.95));border:1px solid var(--line);font:700 29px "Space Grotesk";color:currentColor;box-shadow:inset 0 0 25px currentColor,0 14px 35px rgba(31,63,96,.08)}.metric{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}.metric span{color:var(--muted)}.metric b{font-weight:700}.strategy-actions{margin-top:auto;padding-top:18px;display:grid;gap:9px}.primary-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 15px;background:linear-gradient(135deg,var(--green),var(--cyan));color:#0b2940;font-weight:800;box-shadow:0 14px 30px rgba(46,201,160,.18);transition:.2s}.primary-btn:hover{transform:translateY(-2px);filter:saturate(1.08)}.secondary-btn{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;font-weight:700}
.form-card{padding:22px}label{display:grid;gap:7px;margin:13px 0;font-size:13px;font-weight:700}input,select,textarea{width:100%;padding:13px 14px;border-radius:13px;border:1px solid #dce5ef;background:rgba(249,251,254,.92);color:var(--ink);outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#73c8f7;box-shadow:0 0 0 4px rgba(87,191,255,.10)}textarea{min-height:110px;resize:vertical}.status{display:none;padding:11px 12px;border-radius:12px;margin:12px 0}.status.ok{display:block;background:#ecfff7;color:#11744f;border:1px solid #bcefdc}.status.err{display:block;background:#fff0f2;color:#af2d43;border:1px solid #f1c2cc}
.item{padding:12px;border:1px solid var(--line);border-radius:13px;margin:8px 0;background:rgba(255,255,255,.72)}.copy-btn{border:0;border-radius:11px;padding:9px 12px;background:linear-gradient(135deg,var(--green),var(--cyan));font-weight:800}.copy-btn.copied{background:#17324e;color:#fff}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}.table th{color:var(--muted)}
#portalBackdrop{position:fixed;inset:0;background:rgba(8,23,42,.5);backdrop-filter:blur(4px);z-index:90;opacity:0;pointer-events:none;transition:.25s}#portalBackdrop.on{opacity:1;pointer-events:auto}
.reveal{opacity:0;transform:translateY(18px);transition:.55s ease}.reveal.visible{opacity:1;transform:none}
.ripple{position:relative;overflow:hidden}.ripple:after{content:"";position:absolute;inset:auto;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);opacity:0}.ripple.active:after{animation:ripple .6s ease}@keyframes ripple{0%{transform:scale(0);opacity:.7}100%{transform:scale(30);opacity:0}}
.toast{position:fixed;right:22px;top:22px;z-index:1000;background:#10283f;color:#fff;padding:12px 14px;border-radius:13px;box-shadow:0 16px 40px rgba(15,42,69,.28);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1200px){.stat-grid{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr}.hero-value{text-align:left}}
@media(max-width:900px){.portal-sidebar{transform:translateX(-105%);width:min(315px,88vw)}.portal-sidebar.open{transform:none}.side-close,.menu-btn{display:block}.portal-main{margin-left:0;padding:18px}.grid-2,.grid-3{grid-template-columns:1fr}.page-title{font-size:28px}.strategy-card{min-height:auto}}
@media(max-width:560px){.portal-main{padding:12px}.topbar{align-items:flex-start}.top-pill.hide-mobile{display:none}.page-title{font-size:24px}.hero{padding:20px}.hero h2{font-size:28px}.hero-value strong{font-size:38px}.stat-grid{grid-template-columns:1fr}.panel,.form-card,.strategy-card{padding:17px}.top-actions{gap:6px}}


/* ===== BrextonAI v3.5: Scrollable Sidebar Fix ===== */
.portal-sidebar{
  overflow:hidden;
}

.side-nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  margin-right:-4px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(120,247,211,.38) transparent;
}

.side-nav::-webkit-scrollbar{
  width:6px;
}

.side-nav::-webkit-scrollbar-track{
  background:transparent;
}

.side-nav::-webkit-scrollbar-thumb{
  background:rgba(120,247,211,.30);
  border-radius:999px;
}

.side-nav::-webkit-scrollbar-thumb:hover{
  background:rgba(120,247,211,.50);
}

.side-bottom{
  flex:0 0 auto;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(19,45,76,0),rgba(19,45,76,.96) 22%);
}

.sidebar-scroll-hint{
  display:none;
  position:absolute;
  right:12px;
  bottom:142px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#8cf7d3;
  align-items:center;
  justify-content:center;
  font-size:16px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  pointer-events:none;
}

.portal-sidebar.has-scroll .sidebar-scroll-hint{
  display:flex;
}

@media(max-height:760px){
  .portal-sidebar{
    padding-top:14px;
    padding-bottom:12px;
  }

  .brand{
    padding-bottom:12px;
  }

  .side-nav a{
    padding:9px 11px;
  }

  .nav-icon{
    width:28px;
    height:28px;
  }

  .side-user{
    padding:10px;
  }

  .logout-btn{
    margin-top:8px;
    padding:10px;
  }
}


/* ===== BrextonAI v4.5 live client performance chart ===== */
.performance-panel{overflow:hidden}
.performance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:10px}
.performance-live-value{text-align:right;min-width:160px}
.performance-live-value small{display:block;color:#7d8ca1;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.performance-live-value strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:30px;color:#11263f;margin-top:4px}
.performance-live-value span{display:inline-block;margin-top:3px;padding:4px 8px;border-radius:999px;background:#e4fbf3;color:#12835f;font-size:11px;font-weight:850}
.performance-meta,.performance-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#7a899d;font-size:11px}
.performance-meta{padding:8px 0 13px;border-bottom:1px solid #edf1f6}
.performance-foot{padding-top:10px}
.client-chart-wrap{height:310px;position:relative;margin-top:10px;border-radius:20px;background:linear-gradient(180deg,#f9fcff,#f3f7fb);border:1px solid #edf2f7;overflow:hidden}
.client-performance-chart{width:100%;height:100%;display:block}
.client-chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7d8ca0;z-index:2;padding:30px}
.client-chart-empty b{font-size:14px;color:#53677d}.client-chart-empty small{max-width:440px;line-height:1.55;margin-top:5px}.chart-empty-icon{font-size:44px;color:#6da8df;margin-bottom:5px}
.chart-grid{stroke:#dfe8f0;stroke-width:1;stroke-dasharray:4 5}.chart-line{fill:none;stroke:#20b786;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 6px 7px rgba(32,183,134,.16))}
.chart-point{fill:#fff;stroke:#20b786;stroke-width:3;vector-effect:non-scaling-stroke}.chart-point.current{fill:#20d69a;stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 5px rgba(32,183,134,.45))}
.chart-y-label,.chart-x-label{fill:#8190a3;font:10px Inter,Arial,sans-serif}.chart-current-label{fill:#15314a;font:700 11px Inter,Arial,sans-serif}
@media(max-width:700px){
 .performance-head{flex-direction:column}.performance-live-value{text-align:left;min-width:0}
 .client-chart-wrap{height:275px}.performance-meta{align-items:flex-start;flex-direction:column;gap:4px}
}

/* v4.6 pagination */
.client-pager{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;color:#71849a;font-size:12px}.client-pager button{border:1px solid #dce6ee;background:#fff;color:#17324d;border-radius:11px;padding:8px 12px;font-weight:800;cursor:pointer}.client-pager button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:560px){.client-pager{justify-content:space-between}.client-pager span{width:100%;text-align:center;order:-1}}


/* ===== BrextonAI v4.19 — persistent client sidebar navigation scroll ===== */
.side-nav{
  overflow-y:scroll !important;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:rgba(116,242,210,.78) rgba(255,255,255,.07);
}
.side-nav::-webkit-scrollbar{width:9px !important}
.side-nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.side-nav::-webkit-scrollbar-thumb{background:linear-gradient(#58e5be,#55bfff);border-radius:999px;border:2px solid rgba(19,45,76,.78)}
.sidebar-scroll-hint{
  pointer-events:auto !important;
  cursor:pointer;
  user-select:none;
}