:root {
    --bg: #0f1115;
    --panel: #171a21;
    --border: #262b35;
    --text: #e6e9ef;
    --muted: #8a90a0;
    --accent: #4f8cff;
    --danger: #e5534b;
    --green: #2ea043;
    --amber: #d9a520;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.brand {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
}

.topbar-tenant {
    color: var(--muted);
    font-size: 0.9rem;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 820px) {
    .grid-2col { grid-template-columns: 1fr; }
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

h1 { margin-top: 0; font-size: 1.4rem; }
h2 { margin-top: 0; font-size: 1.1rem; }

.muted { color: var(--muted); font-size: 0.88rem; }

code {
    background: #0000003a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 0.92rem;
}

th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 500; }

.truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
}

.stat-row strong { font-size: 1.05rem; }

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--muted);
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

input[type="text"], textarea {
    background: #0000002e;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.inline-form input[type="text"] {
    flex: 1;
    max-width: 220px;
}

button {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

button:hover { opacity: 0.9; }

.btn-danger { background: var(--danger); }

.tenant-list {
    list-style: none;
    padding: 0;
}

.tenant-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.tenant-list a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-active { background: var(--green); color: white; }

.badge-urgency-1, .badge-urgency-2, .badge-urgency-3 { background: #2a2f3a; color: var(--muted); }
.badge-urgency-4, .badge-urgency-5, .badge-urgency-6 { background: var(--amber); color: #1a1a1a; }
.badge-urgency-7, .badge-urgency-8, .badge-urgency-9, .badge-urgency-10 { background: var(--danger); color: white; }

.badge-action-buy, .badge-action-increase { background: var(--green); color: white; }
.badge-action-sell, .badge-action-reduce { background: var(--danger); color: white; }
.badge-action-hold { background: #2a2f3a; color: var(--muted); }

.suggestion-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.symbol { font-weight: 700; font-size: 1.05rem; }

.sub-table { font-size: 0.85rem; }

.active-instruction {
    background: #4f8cff14;
    border: 1px solid #4f8cff40;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}