:root{
  --bg:#0A0D14; --surface:#12161F; --surface2:#1A1F2C; --border:#232937;
  --text:#E8EBF2; --text2:#8B93A8; --text3:#5B6376;
  --indigo:#6C8CFF; --amber:#F5A83C; --violet:#C65DFF; --red:#FF6B6B; --orange:#FF9F5A; --teal:#3ED9B8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}

/* eCoach theme override — pure blue/black */
body.ecoach-active{
  --bg:#000000; --surface:#040a16; --surface2:#081428; --border:#123163;
  --text:#EAF2FF; --text2:#6FA0E8; --text3:#3E6099; --indigo:#2F80FF;
}
body, .sidebar, .card, .metric-card, header.topbar, .nav-item, .search-box,
.icon-btn, .avatar, .sync-box, .badge-tile, .exchange-card, .alert-banner,
table.trades td, table.trades th, .pbar-track, .metric-icon, .brand-mark,
.nav-item svg, .icon-btn svg, .twin-avatar, .search-box input, .form-input,
textarea{
  transition: background-color 3s ease, border-color 3s ease, color 3s ease, box-shadow 3s ease;
}

/* eCoach toggle button — red/black "live" signal */
.btn-ecoach{
  background:#FF3B3B; color:#0a0a0a; display:flex; align-items:center; gap:8px;
  box-shadow:0 0 0 0 rgba(255,59,59,0.6);
}
.btn-ecoach.on{ background:#1A0505; color:#FF6B6B; border:1px solid #FF3B3B; box-shadow:0 0 14px 0 rgba(255,59,59,0.5); }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#0a0a0a; display:inline-block; flex-shrink:0;
}
.btn-ecoach.on .live-dot{
  background:#FF3B3B; animation:livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,59,59,0.55); }
  50%{ box-shadow:0 0 0 6px rgba(255,59,59,0); }
}

/* eCoach sidebar nav item — red/black to match the live signal */
.nav-item[data-id="ecoach"] svg{ color:#FF3B3B; }
.nav-item[data-id="ecoach"]{ color:#B84545; }
.nav-item[data-id="ecoach"].active{
  background:#1A0505; color:#FF6B6B; border-left-color:#FF3B3B;
}
.nav-item[data-id="ecoach"].active svg{ color:#FF3B3B; }

/* full-screen power-on flash */
.ecoach-flash{
  position:fixed; inset:0; z-index:999; opacity:0; pointer-events:none;
  transition:opacity 1.3s ease;
  background:radial-gradient(circle at 85% 8%, rgba(47,128,255,0.55), rgba(0,0,0,0.97) 65%);
}
.app{display:flex; min-height:100vh;}
.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}

/* Sidebar */
.sidebar{width:230px; flex-shrink:0; border-right:1px solid var(--surface2); padding:16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.brand{display:flex; align-items:center; gap:10px; padding:10px 8px; margin-bottom:14px;}
.brand-mark{width:32px; height:32px; border-radius:9px; background:var(--indigo); display:flex; align-items:center; justify-content:center;}
.brand span{font-weight:600; font-size:14px;}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:none; border-left:2px solid transparent; background:transparent; color:var(--text2); font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; width:100%; text-align:left;}
.nav-item svg{color:var(--text3); flex-shrink:0;}
.nav-item.active{background:var(--surface2); color:var(--text); border-left-color:var(--indigo);}
.nav-item.active svg{color:var(--indigo);}
.sync-box{margin-top:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;}
.sync-box .row{display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:12px; color:var(--text2); font-weight:500;}
.sync-box small{color:var(--text3); font-size:11px;}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--teal);}

/* Main */
.main{flex:1; min-width:0;}
header.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-bottom:1px solid var(--surface2); position:sticky; top:0; background:rgba(10,13,20,0.9); backdrop-filter:blur(8px); z-index:5;}
header.topbar h1{font-size:18px; font-weight:600;}
.topbar-right{display:flex; align-items:center; gap:14px;}
.search-box{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 12px;}
.search-box input{background:transparent; border:none; outline:none; color:var(--text); font-size:13px; width:170px; font-family:inherit;}
.icon-btn{width:36px; height:36px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:inherit; font-family:inherit; cursor:pointer;}

.profile-menu-wrap{position:relative;}
.profile-menu{position:absolute; top:calc(100% + 10px); right:0; width:220px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,0.4); z-index:20; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease;}
.profile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.profile-menu-header{padding:10px 12px 12px; border-bottom:1px solid var(--border); margin-bottom:6px;}
.profile-menu-name{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3);}
.profile-menu-identity{font-size:13px; color:var(--text); font-weight:500; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-menu-item{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:9px; border:none; background:transparent; color:var(--text2); font-size:13px; font-family:inherit; cursor:pointer; text-align:left;}
.profile-menu-item:hover{background:var(--surface); color:var(--text);}
.profile-menu-item svg{flex-shrink:0; color:var(--text3);}
.profile-menu-item-danger{color:#FF6B6B;}
.profile-menu-item-danger svg{color:#FF6B6B;}
.profile-menu-divider{height:1px; background:var(--border); margin:6px 4px;}

.auth-screen{display:none; min-height:100vh; align-items:center; justify-content:center; padding:24px;}
body:not(.authed) .auth-screen{display:flex;}
body:not(.authed) .app{display:none;}
.auth-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px;}
.auth-note{margin-top:18px; font-size:11px; color:var(--text3); text-align:center; line-height:1.5;}
.content{padding:32px; display:flex; flex-direction:column; gap:24px;}
.page{display:none;}
.page.active{display:flex; flex-direction:column; gap:24px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px;}
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
.grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}

.section-title{font-size:14px; font-weight:600; color:var(--text);}
.section-sub{font-size:12px; color:var(--text3); margin-top:4px;}

.alert-banner{background:#1A1420; border:1px solid #C65DFF44; border-radius:16px; padding:16px; display:flex; align-items:center; gap:12px;}
.alert-icon{width:36px; height:36px; border-radius:10px; background:#C65DFF22; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.alert-title{font-size:14px; font-weight:500;}
.alert-sub{font-size:12px; color:var(--text2); margin-top:2px;}
.btn{border:none; border-radius:10px; font-size:13px; font-weight:500; padding:8px 16px; cursor:pointer; font-family:inherit;}
.btn-primary{background:var(--indigo); color:var(--bg);}
.btn-violet{background:var(--violet); color:var(--bg);}
.btn-teal{background:var(--teal); color:var(--bg);}
.btn-ghost{background:var(--surface2); color:var(--text); border:1px solid var(--border);}

.metric-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px;}
.metric-top{display:flex; align-items:center; justify-content:space-between;}
.metric-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); font-weight:500;}
.metric-icon{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.metric-bottom{display:flex; align-items:flex-end; justify-content:space-between;}
.metric-value{font-size:24px; font-weight:600;}
.metric-delta{font-size:12px; font-weight:500; display:flex; align-items:center; gap:2px;}

table.trades{width:100%; border-collapse:collapse; font-size:13px;}
table.trades th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); font-weight:500; padding-bottom:10px; border-bottom:1px solid var(--border);}
table.trades td{padding:10px 0; border-bottom:1px solid var(--surface2); color:#C7CCDA;}

.badge{display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-size:11px; font-weight:500; padding:5px 10px;}
.pattern-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.pattern-legend .item{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text3);}
.swatch{width:8px; height:8px; border-radius:50%; display:inline-block;}

.pbar-track{height:6px; border-radius:99px; background:#1D2330; overflow:hidden; margin:10px 0;}
.pbar-fill{height:100%; border-radius:99px;}

textarea, input.form-input{width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; resize:none;}

.badge-tile{border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px;}
.journal-entry-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px;}
.journal-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin-bottom:4px;}

.exchange-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px;}
.exchange-top{display:flex; align-items:center; justify-content:space-between;}
.exchange-name{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500;}
.exchange-mark{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--bg);}

.twin-hero{display:flex; align-items:center; gap:28px; background:linear-gradient(135deg, var(--surface), #151A28);}
.twin-avatar{width:100px; height:100px; border-radius:50%; background:#6C8CFF14; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;}
.twin-avatar .pulse-ring{position:absolute; width:80px; height:80px; border-radius:50%; background:#6C8CFF22; animation:ping 2s cubic-bezier(0,0,0.2,1) infinite;}
@keyframes ping{0%{transform:scale(0.9); opacity:1;} 75%,100%{transform:scale(1.4); opacity:0;}}

::placeholder{color:var(--text3);}
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .sidebar{display:none;} }