:root { --bg:#07111f; --panel:#0c192a; --line:#284058; --text:#f4f7fb; --muted:#aab8c9; --cyan:#00b7ff; --blue:#1689ff; --green:#55d85e; --red:#ff5f64; --amber:#ffca3a; --radius:10px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:flex; background:radial-gradient(circle at 60% 0%, #0b1c31 0, var(--bg) 45%); }
.sidebar { position:fixed; inset:0 auto 0 0; width:184px; padding:30px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; background:#06101e; z-index:2; }
.brand { color:var(--text); text-decoration:none; display:flex; gap:10px; align-items:center; font-size:20px; font-weight:700; padding:6px 7px 27px; letter-spacing:-.5px; }.brand-mark { color:var(--cyan); font-size:38px; font-weight:300; line-height:18px; }
.nav-links { display:grid; gap:8px; }.nav-link { color:#c3cede; padding:17px 13px; border:1px solid transparent; border-radius:8px; text-decoration:none; font-size:15px; display:flex; align-items:center; gap:14px; }.nav-link span { font-size:22px; color:#b7c6d9; }.nav-link.active { border-color:var(--cyan); background:#09243c; color:var(--cyan); }.nav-link.active span { color:var(--cyan); }
.safety-card { margin-top:auto; border:1px solid var(--cyan); border-radius:10px; padding:15px; color:#d8e4f1; line-height:1.5; }.safety-card .safety-icon { float:left; border:2px solid var(--cyan); color:var(--cyan); width:31px; height:31px; display:grid; place-items:center; margin:0 10px 5px 0; clip-path:polygon(50% 0,100% 100%,0 100%); font-weight:800; }.safety-card strong,.safety-card > span { color:var(--cyan); display:block; }.safety-card p { margin:15px 0; }.version { color:#788aa2; text-align:center; padding-top:14px; }
.main-content { width:min(100% - 184px, 1120px); margin-left:184px; padding:30px 26px 28px; }.page-header { display:flex; align-items:start; justify-content:space-between; gap:24px; margin-bottom:22px; }.page-header h1 { font-size:38px; letter-spacing:-1.5px; line-height:1; margin:0 0 11px; }.page-header p { margin:0; color:#c2cede; font-size:17px; }.header-safety { border:1px solid var(--cyan); border-radius:10px; padding:11px 20px; color:#f5f9ff; line-height:1.32; }.header-safety strong { display:block; color:var(--cyan); font-size:15px; letter-spacing:.2px; margin-bottom:4px; }
.top-grid,.overview-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:12px; margin-bottom:12px; }.panel { background:rgba(12,25,42,.84); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }.position-panel,.context-panel { min-height:410px; padding:17px 16px; }.panel h2 { margin:0; font-size:17px; letter-spacing:-.45px; }.field-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:11px; } label,legend { color:#c2cede; font-size:13px; } input,select { width:100%; display:block; margin-top:7px; border:1px solid #3d526c; border-radius:7px; background:#101e31; color:var(--text); outline:none; height:49px; padding:0 12px; } input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 2px #00b7ff21; }.currency { position:relative; }.currency::before { content:"$"; position:absolute; z-index:1; left:12px; bottom:8px; color:var(--text); font-size:28px; }.currency input { padding-left:31px; font-size:28px; }.direction-group { padding:0; margin:12px 0; border:0; }.direction-group legend { margin-bottom:7px; }.direction-toggle { display:grid; grid-template-columns:1fr 1fr; border:1px solid #3d526c; border-radius:7px; overflow:hidden; }.direction-toggle input { position:absolute; opacity:0; pointer-events:none; }.direction-toggle label { height:40px; display:flex; justify-content:center; align-items:center; gap:12px; color:#dce6f1; font-size:15px; cursor:pointer; }.direction-toggle label span { font-size:24px; font-weight:300; }.direction-toggle input:checked + label { color:white; background:linear-gradient(90deg,#0c8cff,#0799ed); }.payout-block { margin-top:7px; display:flex; align-items:baseline; gap:5px; }.payout-block span { display:block; flex-basis:100%; color:#c2cede; font-size:13px; }.payout-block strong { color:var(--cyan); font-size:42px; letter-spacing:-2px; line-height:1; }.payout-block b { font-size:16px; font-weight:500; }.risk-block { margin-top:10px; }.risk-block > div:first-child { display:flex; justify-content:space-between; color:#c2cede; font-size:13px; }.risk-block b { font-weight:400; color:#eef5fc; }.risk-block em { color:var(--cyan); font-style:normal; font-weight:700; }.progress { height:9px; border-radius:5px; overflow:hidden; margin:7px 0; background:#22354c; }.progress i { display:block; height:100%; width:0%; background:var(--cyan); border-radius:inherit; transition:width .25s ease; }.scale { display:flex; justify-content:space-between; color:#c2cede; }.primary-button { width:100%; border:0; border-radius:5px; background:linear-gradient(90deg,#099cff,#00b6ee); height:38px; color:white; margin-top:12px; box-shadow:inset 0 1px #8ad9ff44; }.primary-button:hover { filter:brightness(1.1); }.form-note,.context-note,.history-note { color:#8fa0b4; font-size:12px; margin:10px 0 0; }.panel-heading { display:flex; justify-content:space-between; align-items:center; }.info { border:1px solid #9bb1c9; color:#dfeaf6; border-radius:50%; width:21px; height:21px; display:grid; place-items:center; font-weight:bold; cursor:help; }.context-events { margin-top:12px; display:grid; gap:12px; }.context-event { display:grid; grid-template-columns:45px 1fr auto; align-items:start; gap:10px; padding:11px; border:1px solid var(--line); border-radius:7px; }.event-icon { width:40px; height:40px; display:grid; place-items:center; border:2px solid var(--cyan); border-radius:50%; color:var(--cyan); font-size:26px; line-height:1; }.event-icon.amber { border-color:var(--amber); color:var(--amber); }.event-icon.green { border-color:var(--green); color:var(--green); }.event-title { font-weight:700; font-size:16px; }.event-copy { color:#c2cede; margin-top:2px; }.event-age { font-size:12px; color:#c2cede; white-space:nowrap; }
.performance-panel { padding:11px 16px 0; min-height:315px; }.panel-heading select { width:auto; height:31px; margin:0; color:#fff; background:#0d1b2d; padding:0 8px; }.metric-label { color:#c2cede; display:block; margin-top:8px; font-size:13px; }.balance-row { display:flex; align-items:baseline; gap:12px; }.balance-row strong { font-size:27px; letter-spacing:-1px; }.balance-row span { color:var(--green); font-weight:600; }.chart-wrap { height:123px; margin:5px 0 4px; }.chart-wrap svg { width:100%; height:100%; overflow:visible; }.summary-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:0 -16px; border-top:1px solid var(--line); }.summary-stats div { padding:11px 13px; border-right:1px solid var(--line); }.summary-stats div:last-child { border-right:0; }.summary-stats span,.summary-stats small { display:block; color:#c2cede; font-size:12px; }.summary-stats strong { display:block; color:var(--cyan); font-size:21px; letter-spacing:-1px; margin:3px 0; }.summary-stats strong.positive { color:var(--green); }.summary-stats strong.negative { color:var(--red); }.summary-stats strong small { display:inline; color:#d8e3ef; font-size:13px; font-weight:400; letter-spacing:0; }
.history-panel { min-height:315px; }.history-panel .panel-heading { padding:11px 16px; border-bottom:1px solid var(--line); }.quiet-button { background:#0d1b2d; color:#e7eef7; border:1px solid #38506b; border-radius:5px; padding:6px 12px; }.quiet-button:hover { border-color:var(--cyan); color:var(--cyan); }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:490px; } th,td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { color:#c2cede; font-weight:400; font-size:12px; } td { color:#dce5f0; } .dir-buy { color:var(--green); } .dir-sell { color:var(--red); } .trade-gain { color:var(--green); } .trade-loss { color:var(--red); }.outcome { font-weight:700; }.outcome.win { color:var(--green); }.outcome.loss { color:var(--red); }.outcome.pending { color:var(--amber); }.outcome-buttons { display:flex; gap:5px; }.outcome-buttons button { color:#dce5f0; background:#17263a; border:1px solid #3c5168; border-radius:4px; font-size:11px; padding:3px 6px; }.outcome-buttons button:first-child:hover { border-color:var(--green); color:var(--green); }.outcome-buttons button:last-child:hover { border-color:var(--red); color:var(--red); }.history-note { padding:0 16px 12px; }
.fixed-stakes { display:flex; align-items:center; gap:12px; font-size:17px; margin:17px 0; }.fixed-stakes span { width:23px; height:23px; border:2px solid #a8bed7; color:#a8bed7; border-radius:50%; display:grid; place-items:center; font-weight:bold; }.footer-safety { min-height:64px; border:1px solid var(--cyan); border-radius:9px; display:flex; align-items:center; justify-content:space-around; color:#dce8f4; }.footer-safety strong { color:var(--cyan); }.footer-safety span { padding:0 20px; border-left:1px solid #35506a; }.toast { position:fixed; bottom:22px; right:22px; background:#e9f8ff; color:#0d2237; padding:11px 16px; border-radius:7px; box-shadow:0 8px 26px #0009; transform:translateY(90px); opacity:0; transition:.25s ease; z-index:4; }.toast.show { transform:translateY(0); opacity:1; }.mobile-nav { display:none; }
.input-wrap { display:block; width:100%; }.currency input { text-align:left; }
.live-toolbar { display:flex; align-items:end; gap:8px; margin-top:11px; }.live-toolbar label { flex:1; }.live-toolbar select { height:34px; margin-top:4px; padding-inline:9px; font-size:13px; }.live-toolbar .quiet-button { height:34px; white-space:nowrap; }.live-status { color:var(--cyan); margin:9px 0 0; font-size:12px; }
.history-actions { display:flex; gap:7px; }
@media (max-width:900px) { .main-content { padding:24px 18px; }.top-grid,.overview-grid { grid-template-columns:1fr; }.position-panel,.context-panel { min-height:unset; }.footer-safety { flex-wrap:wrap; gap:8px; padding:11px; }.footer-safety span { border:0; padding:0 5px; } }
@media (max-width:680px) { body { padding-bottom:70px; }.app-shell { display:block; }.sidebar { display:none; }.main-content { width:100%; margin:0; padding:18px 14px; }.page-header { margin-bottom:16px; }.page-header h1 { font-size:29px; }.page-header p { font-size:15px; }.header-safety { display:none; }.field-grid { gap:10px; }.context-event { grid-template-columns:35px 1fr auto; padding:9px; }.event-icon { width:31px; height:31px; font-size:21px; }.event-title { font-size:14px; }.event-copy { font-size:12px; }.context-events { gap:7px; }.performance-panel { min-height:0; }.balance-row { flex-wrap:wrap; gap:2px 10px; }.chart-wrap { height:110px; }.summary-stats { grid-template-columns:1fr 1fr; }.summary-stats div:nth-child(2) { border-right:0; }.summary-stats div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.summary-stats strong { font-size:19px; }.fixed-stakes { font-size:15px; }.footer-safety { font-size:12px; }.footer-safety strong:first-child { flex-basis:100%; text-align:center; }.mobile-nav { display:flex; position:fixed; z-index:3; bottom:0; inset-inline:0; height:64px; background:#081421; border-top:1px solid var(--line); justify-content:space-around; }.mobile-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; color:#c2cede; text-decoration:none; font-size:22px; }.mobile-nav a span { font-size:10px; }.mobile-nav a.active { color:var(--cyan); }.toast { bottom:80px; right:14px; left:14px; text-align:center; } }
@media (max-width:410px) { .field-grid { grid-template-columns:1fr; }.footer-safety span { display:none; } .payout-block strong { font-size:36px; } }