:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --ink: #132238;
    --muted: #6c7a90;
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --success: #0f9d73;
    --danger: #dc3545;
    --warning: #d97706;
    --border: #e4e9f1;
    --shadow: 0 14px 35px rgba(32, 51, 86, .08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.layout { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { background: #111827; color: #e5e7eb; padding: 24px 16px; position: sticky; top: 0; height: 100vh; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:18px; padding: 0 10px 24px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; background:linear-gradient(135deg,#6d5dfc,#16c2a3); border-radius:12px; color:#fff; }
.nav { display:grid; gap:7px; }
.nav a { padding:11px 13px; border-radius:10px; color:#aeb7c6; font-weight:600; }
.nav a:hover,.nav a.active { background:#253047; color:#fff; }
.sidebar-footer { position:absolute; left:16px; right:16px; bottom:20px; color:#9ca3af; font-size:12px; }
.main { min-width:0; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(255,255,255,.88); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.page { padding:28px; max-width:1500px; margin:auto; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; }
.page-title { margin:0; font-size:28px; }
.page-subtitle { margin:6px 0 0; color:var(--muted); }
.grid { display:grid; gap:18px; }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:20px; }
.metric-label { color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.metric-value { font-size:25px; font-weight:800; margin-top:8px; }
.metric-note { font-size:12px; color:var(--muted); margin-top:5px; }
.btn { border:0; border-radius:10px; padding:10px 15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-light { background:#eef1f6; color:#27364d; }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-success { background:#d1fae5; color:#047857; }
.btn-sm { padding:7px 10px; font-size:12px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:13px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
td { font-size:14px; }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.badge-buy,.badge-active { color:#047857; background:#d1fae5; }
.badge-sell,.badge-triggered { color:#b91c1c; background:#fee2e2; }
.badge-paused { color:#92400e; background:#fef3c7; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-group { display:grid; gap:7px; }
.form-group.full { grid-column:1/-1; }
label { font-size:13px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #d6dde8; border-radius:10px; padding:11px 12px; font:inherit; background:#fff; color:var(--ink); }
input:focus,select:focus,textarea:focus { outline:3px solid rgba(79,70,229,.12); border-color:var(--primary); }
.help { color:var(--muted); font-size:12px; }
.alert { padding:12px 14px; border-radius:11px; margin-bottom:14px; font-weight:600; }
.alert-success { background:#d1fae5; color:#065f46; }
.alert-danger { background:#fee2e2; color:#991b1b; }
.alert-warning { background:#fef3c7; color:#92400e; }
.alert-info { background:#dbeafe; color:#1e40af; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; }
.login-hero { padding:8vw; background:radial-gradient(circle at top left,#6d5dfc,#111827 65%); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.login-hero h1 { font-size:48px; max-width:650px; line-height:1.05; margin:0 0 20px; }
.login-hero p { color:#d7dcf3; font-size:18px; max-width:620px; }
.login-panel { display:grid; place-items:center; padding:30px; }
.login-card { width:min(440px,100%); }
.pulse { width:9px; height:9px; border-radius:50%; background:#10b981; display:inline-block; box-shadow:0 0 0 5px rgba(16,185,129,.12); }
.price-up { color:#047857; font-weight:800; }
.price-down { color:#b91c1c; font-weight:800; }
.empty { text-align:center; color:var(--muted); padding:35px; }
.inline-form { display:inline; }
.notice { border-left:4px solid var(--primary); background:#eef2ff; padding:13px 15px; border-radius:8px; color:#3730a3; }
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} }
@media (max-width:800px){ .layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.sidebar-footer{display:none}.nav{grid-template-columns:repeat(3,1fr)}.nav a{text-align:center;font-size:12px}.topbar{position:relative}.login-shell{grid-template-columns:1fr}.login-hero{display:none}.form-grid,.grid-2,.grid-4{grid-template-columns:1fr}.page{padding:18px}.page-header{flex-direction:column}.sidebar{padding:14px}.brand{padding-bottom:14px} }