* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.theme-dark {
    background: radial-gradient(circle at top, #020617 0, #000 45%, #020617 100%);
    color: #f9fafb;
}
body.theme-light {
    background: #f3f4f6;
    color: #0f172a;
}
a { color: inherit; text-decoration: none; }

.main-shell {
    max-width: 1320px;
    margin: 0 auto;
}

/* Top bar */
.top-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.92);
    border: 1px solid #1f2937;
    backdrop-filter: blur(18px);
}
.top-bar-left, .top-bar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.logo-text {
    font-weight: 700;
    letter-spacing: .10em;
    font-size: 13px;
    text-transform: uppercase;
    color: #e5e7eb;
}
.badge-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: #020617;
    border: 1px solid #1f2937;
    font-size: 9px;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Buttons & nav tabs */
.btn, .btn-ghost, .btn-secondary, .btn-danger, .btn-success, .nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    cursor: pointer;
    background: #111827;
    color: #e5e7eb;
    white-space: nowrap;
    transition: all 0.2s ease-out;
    transform-origin: center;
}
.btn:hover, .btn-ghost:hover, .btn-secondary:hover, .btn-danger:hover, .btn-success:hover, .nav-tab:hover {
    background: #1f2937;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 22px rgba(15,23,42,0.6);
}
.btn-ghost {
    background: transparent;
    border-color: #374151;
    color: #9ca3af;
}
.btn-ghost:hover { background: #111827; color: #e5e7eb; }
.btn-secondary {
    background: linear-gradient(to right, #0ea5e9, #6366f1);
}
.btn-success {
    background: linear-gradient(to right, #22c55e, #16a34a);
}
.btn-danger {
    background: linear-gradient(to right, #f97316, #ef4444);
}
.active-tab {
    background: linear-gradient(to right, #6366f1, #0ea5e9) !important;
    border-color: #6366f1 !important;
    color: #f9fafb !important;
    box-shadow: 0 12px 28px rgba(56,189,248,0.45);
}

/* Cards */
.app-card {
    background: rgba(15,23,42,0.96);
    border-radius: 18px;
    border: 1px solid #1f2937;
    padding: 12px;
    margin-top: 8px;
}
.card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Inputs */
.input, select, textarea {
    width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #e5e7eb;
    font-size: 13px;
}
textarea {
    border-radius: 14px;
    min-height: 72px;
}

/* Tables */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
thead {
    background: #020617;
}
th, td {
    padding: 6px 8px;
    border-bottom: 1px solid #1f2937;
}
tr:hover td {
    background: rgba(15,23,42,0.85);
}

/* Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.dash-card {
    padding: 8px 10px;
    border-radius: 16px;
    background: radial-gradient(circle at top, #0b1120, #020617);
    border: 1px solid #1f2937;
}
.dash-label { font-size: 11px; color: #9ca3af; }
.dash-value { font-size: 19px; font-weight: 600; }
.dash-sub { font-size: 11px; color: #6b7280; }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

/* Messages */
.msg {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
}
.msg-success { background: rgba(22,163,74,0.15); border: 1px solid #22c55e; }
.msg-error { background: rgba(239,68,68,0.15); border: 1px solid #ef4444; }

/* Track badge */
.track-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
}
.track-ok { background: rgba(22,163,74,0.15); color: #4ade80; }
.track-bad { background: rgba(239,68,68,0.15); color: #fecaca; }
.track-empty { background: rgba(148,163,184,0.15); color: #e5e7eb; }

/* Modal */
.modal-backdrop-app {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}
.modal-content-app {
    background: #020617;
    border-radius: 16px;
    border: 1px solid #1f2937;
    padding: 14px;
    width: 100%;
    max-width: 420px;
}

/* Light theme overrides */
body.theme-light .top-bar {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 8px 24px rgba(148,163,184,0.35);
}
body.theme-light .logo-text {
    color: #111827;
}
body.theme-light .badge-pill {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
}
body.theme-light .app-card,
body.theme-light .dash-card {
    background: #ffffff;
    border-color: #e5e7eb;
}
body.theme-light .msg-success {
    background: #ecfdf3;
    border-color: #22c55e;
    color: #166534;
}
body.theme-light .msg-error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}
body.theme-light .input,
body.theme-light select,
body.theme-light textarea {
    background: #f9fafb;
    color: #111827;
    border-color: #d1d5db;
}
body.theme-light table thead {
    background: #eef2ff;
}
body.theme-light tr:hover td {
    background: #f3f4ff;
}
body.theme-light .btn,
body.theme-light .btn-ghost,
body.theme-light .btn-secondary,
body.theme-light .btn-danger,
body.theme-light .btn-success,
body.theme-light .nav-tab {
    color: #111827;
}
body.theme-light .btn,
body.theme-light .nav-tab {
    background: #e5e7eb;
    border-color: transparent;
}
body.theme-light .btn-ghost {
    background: transparent;
    border-color: #d1d5db;
    color: #374151;
}
body.theme-light .btn-ghost:hover {
    background: #e5e7eb;
    color: #111827;
}
body.theme-light .active-tab {
    color: #f9fafb !important;
}
body.theme-light .avatar {
    background: #e5e7eb;
    border-color: #cbd5f5;
}
body.theme-light .track-empty {
    background: #e5e7eb;
    color: #111827;
}
body.theme-light .track-ok {
    background: rgba(22,163,74,0.15);
    color: #15803d;
}
body.theme-light .track-bad {
    background: rgba(239,68,68,0.15);
    color: #b91c1c;
}
body.theme-light .modal-content-app {
    background: #ffffff;
    border-color: #e5e7eb;
}

@media (max-width: 768px) {
    .top-bar { border-radius: 18px; }
    .btn, .nav-tab { font-size: 11px; padding-inline: 8px; }
}


/* Theme-specific hover tweaks */
body.theme-light .btn:hover,
body.theme-light .btn-secondary:hover,
body.theme-light .btn-danger:hover,
body.theme-light .btn-success:hover,
body.theme-light .nav-tab:hover {
    background: #d1d5db;
    color: #111827;
    box-shadow: 0 8px 18px rgba(148,163,184,0.45);
}

body.theme-dark .btn:hover,
body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-danger:hover,
body.theme-dark .btn-success:hover,
body.theme-dark .nav-tab:hover {
    background: #1f2937;
    color: #f9fafb;
    box-shadow: 0 10px 22px rgba(15,23,42,0.6);
}

body.theme-dark .btn-ghost {
    background: transparent;
    border-color: #374151;
    color: #9ca3af;
}
body.theme-dark .btn-ghost:hover {
    background: #111827;
    color: #e5e7eb;
}

/* Fix profits chart height to avoid huge scroll */
#profitsChart {
    width: 100%;
    max-height: 260px;
}