:root{--bg:#f4f7fb;--panel:#fff;--text:#132238;--muted:#708197;--line:#dfe7f1;--side:#071a31;--side2:#0a2b50;--primary:#176dff;--green:#16a765;--danger:#e24657}
:root[data-theme="dark"]{--bg:#07111f;--panel:#0d1b2a;--text:#edf5ff;--muted:#8fa5ba;--line:#20364d;--side:#061629;--side2:#0a2a50}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.danger{background:var(--danger);color:#fff;border:0}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 5px 16px rgba(20,45,75,.05)}.small{font-size:12px;color:var(--muted)}input,select,textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted)}.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--side),var(--side2));color:#d9e7f6;padding:20px;position:sticky;top:0;height:100vh}.sidebar img{width:180px;max-width:100%}.navmenu{display:grid;gap:6px;margin-top:24px}.navmenu a{padding:10px;border-radius:9px;display:flex;justify-content:space-between;gap:8px}.navmenu a:hover,.navmenu a.active{background:#176dff;color:#fff}.badge{background:#ef4444;color:#fff;border-radius:99px;min-width:20px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}.content{padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat b{font-size:25px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.notice{padding:12px;border-radius:10px;background:#e9f7ef;color:#177848}.error{padding:12px;border-radius:10px;background:#fdecef;color:#a32639}.modalback{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;z-index:99}.modal{width:min(480px,92vw);background:var(--panel);padding:22px;border-radius:16px}.modalback.show{display:flex}@media(max-width:900px){.admin-layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.navmenu{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.grid,.navmenu{grid-template-columns:1fr}.content{padding:14px}.tablewrap{overflow:auto}}

.brandlock{display:flex;align-items:center;gap:10px;min-height:74px}.brandlock img{width:52px!important;height:52px;object-fit:cover;object-position:50% 30%;border-radius:12px}.brandlock span{font-weight:800;font-size:18px;white-space:nowrap}.modal{position:relative}.modalclose{position:absolute;right:14px;top:10px;border:0;background:transparent;color:var(--text);font-size:30px;line-height:1;cursor:pointer}.status-pending{color:#b7791f}.status-active{color:#14804a}.actionrow{display:flex;gap:8px;flex-wrap:wrap}.mutedbox{padding:10px;background:var(--bg);border-radius:10px}

/* Phase 18 dashboard visual refinement */
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px}.kpi .v{font-size:22px;font-weight:800;margin-top:5px}.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.brandlock img{object-fit:contain;background:#07111f}@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.kpi-grid,.dashboard-grid{grid-template-columns:1fr}}


/* Phase 25 consolidated UX */
.success-modal-icon{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:#e8f8ef;color:#16a765;font-size:38px;font-weight:900}
.avatar-sm{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#e9eef5}
.avatar-lg{width:82px;height:82px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#e9eef5}
.announcement-wrap{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:16px;display:none}
.announcement-wrap.show{display:block}.announcement-track{display:inline-block;white-space:nowrap;padding:10px 0;font-weight:700;min-width:100%;animation:yfx-marquee 28s linear infinite}
@keyframes yfx-marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.notice-unread{border-left:4px solid var(--primary)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric-card{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:13px;padding:15px}.metric-card b{font-size:22px;color:var(--text)}
@media(max-width:800px){.metric-grid{grid-template-columns:1fr}}

/* Build 27 — polished live dashboards */
.performance-card{overflow:hidden}
.chart-shell{position:relative;height:300px;border:1px solid var(--line);border-radius:14px;background:
linear-gradient(180deg,color-mix(in srgb,var(--primary) 6%, transparent),transparent 75%);padding:8px 8px 2px}
.chart-shell svg{width:100%;height:100%;display:block}
.chart-grid-line{stroke:var(--line);stroke-width:1;opacity:.7}
.chart-axis-text{fill:var(--muted);font-size:11px;font-family:Inter,Segoe UI,Arial,sans-serif}
.chart-area{fill:url(#equityFill)}
.chart-line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{fill:var(--panel);stroke:var(--primary);stroke-width:2}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.chart-tabs{display:flex;gap:6px;flex-wrap:wrap}.chart-tabs button{padding:6px 9px;font-size:12px}
.dashboard-trading-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);gap:14px;margin-top:14px}
.recent-trades-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);gap:14px;margin-top:14px}
.trade-scroll{overflow:auto;max-height:330px}
.pnl-positive{color:var(--green);font-weight:700}.pnl-negative{color:var(--danger);font-weight:700}
.success-overlay{position:fixed;inset:0;background:#0008;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
.success-overlay.show{display:flex}.success-card{position:relative;width:min(440px,94vw);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center;box-shadow:0 25px 70px #0005}
.success-close{position:absolute;right:13px;top:8px;border:0;background:transparent;color:var(--text);font-size:30px;cursor:pointer}
.profile-photo-btn{background:linear-gradient(135deg,#176dff,#16a765)!important;border:0!important;color:#fff!important;font-weight:750;box-shadow:0 8px 18px rgba(23,109,255,.20)}
.profile-photo-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.manage-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:330px;overflow:auto;padding:8px 2px}
.manage-modal-grid label{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px}
.manage-modal-grid input{width:auto}
@media(max-width:950px){.dashboard-trading-grid,.recent-trades-grid{grid-template-columns:1fr}.chart-shell{height:260px}}
@media(max-width:600px){.chart-shell{height:230px}.manage-modal-grid{grid-template-columns:1fr}}

/* Build 29 — prioritize live positions over chart */
.dashboard-trading-grid{grid-template-columns:minmax(420px,1.05fr) minmax(560px,1.35fr)}
.dashboard-trading-grid>.card{min-width:0}
.dashboard-trading-grid .trade-scroll{max-height:380px;overflow-y:auto;overflow-x:visible}
.dashboard-trading-grid table{table-layout:auto}
.dashboard-trading-grid th,.dashboard-trading-grid td{white-space:nowrap;padding:10px 9px}
@media(max-width:1250px){.dashboard-trading-grid{grid-template-columns:minmax(380px,.95fr) minmax(500px,1.3fr)}}
@media(max-width:1050px){.dashboard-trading-grid{grid-template-columns:1fr}.dashboard-trading-grid .trade-scroll{overflow-x:auto}}