:root { color-scheme: dark; --bg:#080b0f; --panel:#0d1117; --line:#27303c; --muted:#7f8a99; --text:#f3f7fb; --green:#2ce6a3; --amber:#f2b84b; --red:#ff667d; }
* { box-sizing:border-box; } html,body { min-height:100%; margin:0; }
body { background:radial-gradient(circle at 14% -10%,rgba(44,230,163,.12),transparent 30rem),radial-gradient(circle at 100% 0%,rgba(60,128,255,.09),transparent 32rem),var(--bg); color:var(--text); font-family:"Segoe UI",Arial,sans-serif; }
body.auth-login .app-view { display:none !important; }
body.auth-app .login-view { display:none !important; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
.eyebrow { margin:0 0 4px; color:var(--green); font:600 10px/1.2 Consolas,monospace; letter-spacing:.17em; }
h1 { margin:0; font-size:22px; letter-spacing:-.02em; }
.muted { color:var(--muted); font-size:12px; }
.error-text { color:var(--red); }

.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); padding:28px; border:1px solid var(--line); border-radius:18px; background:rgba(13,17,23,.94); box-shadow:0 24px 80px rgba(0,0,0,.35); display:grid; gap:14px; }
.login-copy { margin:0; color:var(--muted); font-size:14px; }
.field { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.field input { min-height:42px; border-radius:10px; border:1px solid var(--line); background:#090d12; color:var(--text); padding:0 12px; }
.login-error { margin:0; color:var(--red); font-size:12px; }
.primary-button,.tool-button,.ghost-button,.card-button,.nav-link { border:1px solid var(--line); cursor:pointer; transition:border-color .16s ease,background .16s ease,color .16s ease; }
.primary-button { min-height:42px; border-radius:10px; background:linear-gradient(180deg,#1f6b52,#14533f); border-color:#2d5b4d; color:#ecfff8; font-weight:700; }
.tool-button,.ghost-button,.card-button { border-radius:10px; background:#121820; color:#dce5ee; padding:8px 12px; }
.ghost-button { width:100%; margin-top:auto; }
.tool-button:hover,.ghost-button:hover,.card-button:hover,.nav-link:hover { border-color:#4b5b6b; background:#19222d; color:#fff; }

.app-view { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
.sidebar { padding:18px 14px; border-right:1px solid var(--line); background:rgba(13,17,23,.92); display:flex; flex-direction:column; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; border:1px solid #3b4a59; border-radius:12px; display:grid; grid-template-columns:repeat(3,5px); align-content:center; justify-content:center; gap:3px; background:linear-gradient(145deg,#17212a,#0a0d11); }
.brand-mark i { width:5px; border-radius:8px; background:var(--green); box-shadow:0 0 12px rgba(44,230,163,.5); }
.brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:22px}.brand-mark i:nth-child(3){height:16px}
.nav { display:grid; gap:8px; }
.nav-link { text-align:left; padding:10px 12px; border-radius:10px; background:transparent; color:#c7d2de; }
.nav-link.active { background:#17212a; border-color:#35586d; color:#fff; }

.main { padding:18px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.summary { min-width:220px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; gap:9px; background:#090d12; font-size:12px; }
.summary-dot,.status-pill i { width:7px; height:7px; border-radius:50%; background:var(--muted); display:inline-block; }
.summary-dot.all-online,.status-pill.online i{background:var(--green);box-shadow:0 0 12px rgba(44,230,163,.8)}
.summary-dot.partial,.status-pill.checking i{background:var(--amber);box-shadow:0 0 12px rgba(242,184,75,.7)}
.summary-dot.all-offline,.status-pill.offline i{background:var(--red)}
.last-check { color:var(--muted); font-family:Consolas,monospace; font-size:10px; }

.bot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.bot-card,.panel { border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.25); overflow:hidden; }
.card-header { padding:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg,#121821,#0d1218); }
.bot-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.bot-number { flex:0 0 34px; height:34px; border-radius:9px; display:grid; place-items:center; border:1px solid #2d5b4d; color:var(--green); background:rgba(44,230,163,.07); font:600 11px Consolas,monospace; }
.bot-identity h2 { margin:0; font-size:14px; }
.bot-identity p { margin:2px 0 0; color:var(--muted); font:500 10px Consolas,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.status-pill { height:28px; padding:0 8px; border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; gap:6px; color:#aab5c2; background:#090d12; font:500 9px Consolas,monospace; }
.card-body { padding:14px; display:grid; gap:14px; }
.meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.meta-grid dt { margin:0; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.meta-grid dd { margin:4px 0 0; font:600 13px Consolas,monospace; }
.card-actions-row { display:flex; flex-wrap:wrap; gap:8px; }
.link-button { display:inline-grid; place-items:center; text-decoration:none; }
.profit-box { padding:12px; border:1px solid #2d5b4d; border-radius:12px; background:rgba(44,230,163,.06); }
.profit-label { margin:0 0 4px; color:var(--green); font:600 10px Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.profit-value { margin:0; font:700 18px Consolas,monospace; }
.profit-unit { margin-left:6px; color:var(--muted); font-size:12px; font-weight:600; }
.profit-sub { margin:6px 0 0; color:var(--muted); font-size:11px; }
.trade-list { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:4px; }
.trade-list li { font:500 11px/1.35 Consolas,monospace; color:#dce5ee; }
.trade-list b { color:var(--green); font-weight:700; }
.live-note { margin:0; padding:10px 12px; border-radius:10px; background:#101820; border:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.45; }
.detail-table { width:100%; border-collapse:collapse; font-size:12px; }
.detail-table th,.detail-table td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.detail-table th { color:var(--muted); font-weight:600; width:38%; }

.stack { display:grid; gap:14px; }
.panel { padding:16px; }
.panel h3 { margin:0 0 8px; }
.panel pre { margin:10px 0 0; padding:12px; border-radius:10px; background:#090d12; border:1px solid var(--line); overflow:auto; font-size:11px; }

.config-panel { display:grid; gap:12px; }
.config-panel select { min-height:40px; border-radius:10px; border:1px solid var(--line); background:#090d12; color:var(--text); padding:0 10px; }
.config-panel textarea { min-height:420px; border-radius:12px; border:1px solid var(--line); background:#090d12; color:#dce5ee; padding:12px; font:500 12px/1.5 Consolas,monospace; resize:vertical; }

@media(max-width:1100px){ .app-view{grid-template-columns:1fr} .sidebar{border-right:0;border-bottom:1px solid var(--line)} .bot-grid{grid-template-columns:1fr} }
@media(max-width:720px){ .page-header{flex-direction:column} .summary{min-width:0;width:100%;justify-content:center} }