* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1117; color: #e6e6e6; padding: 20px; }
.login-screen { position: fixed; inset: 0; background: #0f1117; display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-box { background: #171a23; border: 1px solid #232838; border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 12px; width: 300px; text-align: center; }
.login-box h2 { color: #fff; }
.login-box p { color: #8b93a7; font-size: 14px; }
.login-box input { background: #0f1117; color: #fff; border: 1px solid #2a3040; border-radius: 5px; padding: 10px; font-size: 15px; }
.login-box button { padding: 10px; font-size: 15px; }
.error-box { background: #7f1d1d; color: #ffcdd2; padding: 8px 10px; border-radius: 5px; font-size: 13px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
h1 { font-size: 22px; color: #fff; }
.status-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.badge.green { background: #1b5e20; color: #b9f6ca; }
.badge.red { background: #7f1d1d; color: #ffcdd2; }
.badge.yellow { background: #7a5c00; color: #ffe082; }
button { background: #1e88e5; color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
button:hover { background: #1976d2; }
#btn-stop { background: #e53935; } #btn-stop:hover { background: #d32f2f; }
#btn-kill { background: #6a1b9a; } #btn-kill:hover { background: #4a148c; }
main { display: flex; flex-direction: column; gap: 16px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.card { background: #171a23; border: 1px solid #232838; border-radius: 10px; padding: 16px; }
.card h3 { font-size: 13px; color: #8b93a7; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.big { font-size: 30px; font-weight: 700; color: #fff; }
.big.small { font-size: 20px; }
.big.green { color: #4caf50; } .big.red { color: #ef5350; }
.sub { font-size: 13px; color: #8b93a7; margin-top: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
.settings { display: flex; flex-direction: column; gap: 10px; }
.settings label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 10px; }
.settings input, .settings select { background: #0f1117; color: #fff; border: 1px solid #2a3040; border-radius: 5px; padding: 6px 8px; width: 160px; font-size: 14px; }
.list { font-size: 13px; line-height: 1.7; }
.list.scroll { max-height: 300px; overflow-y: auto; }
.list .pos { border-bottom: 1px solid #232838; padding: 6px 0; }
.pos .sym { color: #fff; font-weight: 600; }
.pos .green { color: #4caf50; } .pos .red { color: #ef5350; }
.month-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #1a1f2c; }
.month-row .green { color: #4caf50; } .month-row .red { color: #ef5350; }
.trade-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #1a1f2c; font-size: 12px; }
.trade-row .sym { color: #8b93a7; } .trade-row .green { color: #4caf50; } .trade-row .red { color: #ef5350; }
.error-box { color: #ef5350; font-size: 13px; margin-top: 8px; }