/* Prop Firm Trader Portal */
:root {--bg:#06080c;--panel:#0e1218;--panel2:#141a23;--line:#1a222d;--grad:linear-gradient(135deg,#0ea5e9,#6366f1 55%,#8b5cf6);--text:#dbe2ea;--sub:#7d8592;--pos:#10b981;--neg:#ef4444;--warn:#f59e0b;--font:'Urbanist',system-ui,sans-serif;}
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;font-family:var(--font);background:linear-gradient(120deg,#06080c,#0e1218);color:var(--text);min-height:100vh}
.sidebar{width:250px;background:#070b10;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:1.4rem 1rem;gap:1.6rem;position:sticky;top:0;height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}
.sidebar .close-btn{display:inline-flex;align-self:flex-end;background:#0e141c;border:1px solid var(--line);color:#dbe2ea;border-radius:10px;padding:.3rem .5rem;font-size:.9rem;line-height:1;margin:-.4rem -.2rem .6rem auto}
.logo{font-weight:700;font-size:1.2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.sidebar nav{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem}
.sidebar nav a{text-decoration:none;color:var(--sub);padding:.65rem .85rem;border-radius:12px;font-weight:600}
.sidebar nav a.active,.sidebar nav a:hover{background:#0e141c;color:#fff}
.trader{margin-top:auto;display:flex;align-items:center;gap:.7rem;background:#0e141c;padding:.7rem .8rem;border-radius:14px;font-size:.7rem}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#18212c,#1f2a38);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2rem;border-bottom:1px solid var(--line);background:#070b10;position:sticky;top:0;z-index:5}
.top h1{font-size:1.2rem;font-weight:700}
.hamburger{background:#0e141c;border:1px solid var(--line);color:#dbe2ea;border-radius:10px;padding:.4rem .6rem;font-size:1rem;line-height:1;position:relative;z-index:60;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px}
.hamburger:hover{background:#141a23}
.filters{display:flex;gap:.9rem;align-items:center}
select{background:#0e141c;border:1px solid var(--line);padding:.55rem .8rem;border-radius:10px;font-size:.65rem;font-weight:600;color:#dbe2ea}
button{font-family:inherit;cursor:pointer;border:none}
button.primary{background:var(--grad);color:#fff;padding:.55rem 1.1rem;border-radius:14px;font-weight:600;font-size:.7rem;box-shadow:0 14px 34px -18px #6366f199}
/* Link-styled buttons use same visuals when given .primary */
a.primary{background:var(--grad);color:#fff!important;padding:.55rem 1.1rem;border-radius:14px;font-weight:600;font-size:.7rem;box-shadow:0 14px 34px -18px #6366f199;display:inline-flex;align-items:center;gap:.5rem}
.primary:hover{filter:brightness(1.04)}
.mini.primary{padding:.35rem .7rem;border-radius:10px;font-size:.65rem;box-shadow:0 10px 22px -14px #6366f188}
/* Global form controls for inside pages */
body.inside{ color-scheme: dark; }
body.inside input[type="text"],
body.inside input[type="email"],
body.inside input[type="password"],
body.inside input[type="number"],
body.inside input[type="search"],
body.inside input[type="tel"],
body.inside select,
body.inside textarea{
	background:#0e141c;
	border:1px solid var(--line);
	color:var(--text);
	padding:.6rem .75rem;
	border-radius:12px;
	font-size:.75rem;
	font-weight:600;
	-webkit-appearance:none;
	appearance:none;
}
body.inside input::placeholder,
body.inside textarea::placeholder{ color:#8b9aab; opacity:.85; }
body.inside input:focus,
body.inside select:focus,
body.inside textarea:focus{ outline:none; border-color:#285274; box-shadow:0 0 0 3px rgba(56,189,248,.12); }
body.inside input[disabled],
body.inside select[disabled],
body.inside textarea[disabled]{ opacity:.7; cursor:not-allowed; }
/* Remove number spinners for cleaner look */
body.inside input[type=number]::-webkit-outer-spin-button,
body.inside input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
body.inside input[type=number]{ appearance: textfield; -moz-appearance: textfield; }
/* Autofill background fix for WebKit */
body.inside input:-webkit-autofill,
body.inside input:-webkit-autofill:hover,
body.inside input:-webkit-autofill:focus{
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0px 1000px #0e141c inset;
	transition: background-color 9999s ease-in-out 0s;
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;padding:1.5rem 2rem}
.card{background:var(--panel);border:1px solid var(--line);padding:.9rem .9rem .8rem;border-radius:18px;display:flex;flex-direction:column;gap:.2rem;position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),transparent 65%)}
.card h3{font-size:.95rem;font-weight:600}
.card p{font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:var(--sub);font-weight:600}
.card.profit h3{color:var(--pos)}
.card.dd h3,.card.dmax h3{color:var(--neg)}
.card.equity h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grids{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem;padding:0 2rem 3rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;position:relative;overflow:hidden}
.panel h2{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--sub);text-transform:uppercase}
.chart{background:#0b1016;border:1px solid #14202b;border-radius:16px;flex:1;position:relative;display:flex;align-items:flex-end;justify-content:stretch;padding:.6rem .7rem;gap:.5rem;overflow:hidden}
.chart.line{align-items:stretch;justify-content:flex-start;padding:0;gap:0}
.spark{position:absolute;inset:0;width:100%;height:100%}
.spark polyline{fill:none;stroke:url(#grad);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke:#38bdf8}
.point{position:absolute;width:8px;height:8px;background:#38bdf8;border:2px solid #0e1218;border-radius:50%;box-shadow:0 0 0 2px #38bdf822}
.legend{display:flex;gap:.6rem;font-size:.55rem}
.pill{background:#141c25;padding:.35rem .6rem;border-radius:14px;font-weight:600;letter-spacing:.5px}
.pill.funded{background:#18212c}
.bars{align-items:flex-end}
.bar{flex:1;background:linear-gradient(180deg,#1d2733,#141c25);border-radius:8px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:40px}
.bar span{font-size:.5rem;margin-bottom:4px;font-weight:600;color:#7d8592}
.bar.warn{background:linear-gradient(180deg,#273026,#1a221c)}
.bar.crit{background:linear-gradient(180deg,#3a1f23,#211215)}
.data{width:100%;border-collapse:collapse;font-size:.62rem}
.data th{text-align:left;font-weight:600;padding:.55rem .4rem;color:var(--sub);background:#0e141c;font-size:.55rem;letter-spacing:.5px}
.data td{padding:.5rem .4rem;border-top:1px solid var(--line);font-size:.58rem}
.data.compact td{padding:.45rem .4rem}
.pos{color:var(--pos);font-weight:600}
.neg{color:var(--neg);font-weight:600}
.metrics{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem;font-size:.6rem}
.metrics li{background:#0b1016;border:1px solid #14202b;padding:.6rem .65rem;border-radius:14px;display:flex;flex-direction:column;gap:.25rem}
.metrics span{font-size:.55rem;letter-spacing:.5px;color:var(--sub);font-weight:600;text-transform:uppercase}
.metrics strong{font-size:.75rem;font-weight:600}
.progress{height:10px;background:#0b1016;border:1px solid #14202b;border-radius:30px;overflow:hidden;margin:.6rem 0 1rem}
.progress div{height:100%;background:var(--grad);width:0;border-radius:inherit;animation:grow 1.4s cubic-bezier(.65,.05,.36,1) forwards}
@keyframes grow{to{width:62%}}
.payout-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.6rem}
.payout-list li{display:flex;align-items:center;gap:.8rem;background:#0b1016;border:1px solid #14202b;padding:.6rem .7rem;border-radius:14px}
.payout-list li em{font-style:normal;margin-left:auto;color:var(--sub);font-size:.5rem}
.recent tbody tr:nth-child(even){background:#0b1016}
@media (max-width:960px){
	.grids{grid-template-columns:1fr}
	.panel{grid-column:span 1}
	.sidebar{position:fixed;left:-260px;transition:.3s ease;z-index:50}
	.sidebar.open{left:0}
	/* already visible on desktop; keep visible on mobile */
	.top{padding:1rem}
	body.menu-open{overflow:hidden}
}

/* Mobile-first helpers */
@media (max-width:720px){
	.page-section{grid-template-columns:1fr!important}
	.filters{flex-wrap:wrap}
	.data{display:block;overflow:auto;white-space:nowrap}
	.metrics{grid-template-columns:repeat(2,1fr)}
	.stats{grid-template-columns:repeat(2,1fr)}
	.hamburger{min-width:34px;height:34px}
}

/* Payout method mix cards */
.split-chart .mix{background:#0b1016;border:1px solid #14202b;padding:.65rem .6rem;border-radius:14px;display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;position:relative;overflow:hidden}
.split-chart .mix:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,var(--c),transparent 70%);opacity:.15}
.split-chart .mix strong{font-size:.8rem;font-weight:600;color:var(--c)}
.split-chart .mix span{font-size:.55rem;font-weight:600;letter-spacing:.5px;color:#9aa5b1;text-transform:uppercase}
@media (max-width:720px){
	.split-chart{grid-template-columns:repeat(2,1fr)!important}
}