* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #111;
    color: #eee;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 12px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 { font-size: 1.2rem; font-weight: 500; }

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.muted { color: #888; font-size: 0.85rem; }

.market-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.market-open {
    background: #16a34a22;
    color: #22c55e;
    border: 1px solid #22c55e44;
}

.market-closed {
    background: #ef444422;
    color: #ef4444;
    border: 1px solid #ef444444;
}

/* Tab Bar */
.tab-bar {
    display: flex;
    gap: 0;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 0 20px;
}

.tab-bar .tab {
    background: none;
    border: none;
    color: #888;
    padding: 10px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.tab-bar .tab:hover { color: #ccc; }

.tab-bar .tab.active {
    color: #eee;
    border-bottom-color: #6366f1;
}

/* Sub Tab Bar */
.sub-tab-bar {
    display: flex;
    gap: 0;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
    padding: 0 20px;
}

.sub-tab-bar .sub-tab {
    background: none;
    border: none;
    color: #666;
    padding: 8px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.sub-tab-bar .sub-tab:hover { color: #aaa; }

.sub-tab-bar .sub-tab.active {
    color: #ccc;
    border-bottom-color: #6366f1;
}

/* Banner */
.banner {
    padding: 10px 20px;
    background: #6366f122;
    border-bottom: 1px solid #6366f144;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #a5b4fc;
}

/* Controls & Filters */
.controls {
    padding: 12px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-bar {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input, .select-input {
    background: #222;
    border: 1px solid #333;
    color: #eee;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    font-family: inherit;
}

.search-input { flex: 1; max-width: 300px; }
.select-input { min-width: 120px; }

.search-input:focus, .select-input:focus { border-color: #6366f1; }

input[type="date"] { cursor: pointer; }

/* Buttons */
.btn {
    background: #333;
    color: #eee;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s;
}

.btn:hover { background: #444; }

.btn-primary { background: #6366f1; }
.btn-primary:hover { background: #5558e6; }

.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

.btn-danger { background: transparent; color: #666; }
.btn-danger:hover { color: #ef4444; }

.btn-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.4rem;
    cursor: pointer;
}

.btn-close:hover { color: #eee; }

.btn-buy {
    background: #6366f1;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
}

.btn-buy:hover { background: #5558e6; }

.btn-sell {
    background: #ef4444;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
}

.btn-sell:hover { background: #dc2626; }

.btn-danger-outline {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef444444;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-danger-outline:hover { background: #ef444422; }

/* Section Layout */
.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 20px;
}

.section-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
}

.section-full {
    margin: 0 20px 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 12px;
}

.section-header .section-title { margin-bottom: 0; }

/* Tables */
.table-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.table-wrapper-inner {
    overflow-x: auto;
}

.data-table, .stock-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th, .stock-table thead th {
    position: sticky;
    top: 0;
    background: #111;
    padding: 10px 12px;
    font-weight: 500;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333;
    text-align: left;
    user-select: none;
}

.section-card .data-table thead th { background: #1a1a1a; }

.data-table th.right, .data-table td.right,
.stock-table th.right, .stock-table td.right { text-align: right; }

.data-table th.center, .data-table td.center,
.stock-table th.center, .stock-table td.center { text-align: center; }

.stock-table th.sortable { cursor: pointer; }
.stock-table th.sortable:hover { color: #ccc; }

.sort-arrow { font-size: 0.7rem; }

.data-table tbody tr, .stock-table tbody tr {
    border-bottom: 1px solid #1e1e1e;
    transition: background 0.15s;
}

.data-table tbody tr:hover, .stock-table tbody tr:hover { background: #1a1a1a; }
.section-card .data-table tbody tr:hover { background: #222; }

.data-table td, .stock-table td {
    padding: 10px 12px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.symbol-cell { font-weight: 600; color: #fff; }

.price-up { color: #22c55e; }
.price-down { color: #ef4444; }
.price-neutral { color: #888; }

.stock-error { color: #ef4444; font-style: italic; font-size: 0.85rem; }

.desc-cell {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-cell {
    font-size: 0.8rem;
    color: #aaa;
    white-space: nowrap;
}

/* Excluded transactions */
.excluded-row td { opacity: 0.35; }
.excluded-row td:last-child { opacity: 1; }

.btn-exclude {
    background: none;
    border: 1px solid #444;
    color: #666;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-exclude:hover { border-color: #f59e0b; color: #f59e0b; }

/* Subscription upcoming cards */
.upcoming-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.upcoming-card {
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 160px;
    flex-shrink: 0;
}

.upcoming-card.overdue { border-color: #ef4444; }
.upcoming-card.due-soon { border-color: #f59e0b; }

.upcoming-name { font-weight: 500; font-size: 0.85rem; margin-bottom: 4px; }
.upcoming-amount { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.upcoming-due { font-size: 0.75rem; color: #888; margin-top: 4px; }
.upcoming-due.overdue { color: #ef4444; }
.upcoming-due.due-soon { color: #f59e0b; }

.sub-inactive { opacity: 0.4; }

.sub-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}

.sub-badge.auto {
    background: #22c55e22;
    color: #22c55e;
    border: 1px solid #22c55e44;
}

.sub-badge.manual {
    background: #f59e0b22;
    color: #f59e0b;
    border: 1px solid #f59e0b44;
}

.sub-badge.paid {
    background: #22c55e22;
    color: #22c55e;
    border: 1px solid #22c55e44;
}

.btn-paid {
    background: #22c55e;
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.btn-paid:hover { background: #16a34a; }

.btn-exclude.active {
    background: #f59e0b22;
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Category Badge */
.category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.category-badge:hover { opacity: 0.8; }

.category-badge-empty {
    color: #666;
    border: 1px dashed #444;
    background: transparent;
    cursor: pointer;
}

.category-badge-empty:hover { border-color: #6366f1; color: #aaa; }

/* Category List (in modal) */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.category-option {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.category-option:hover { background: #333; }

.category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Category manager items */
.cat-manager-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #222;
    font-size: 0.85rem;
}

.cat-manager-item:last-child { border-bottom: none; }

.cat-manager-item .cat-name { flex: 1; }

.rule-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid #222;
    font-size: 0.8rem;
}

.rule-item:last-child { border-bottom: none; }

.rule-keyword {
    font-family: monospace;
    background: #252525;
    padding: 2px 6px;
    border-radius: 3px;
    color: #ccc;
}

.rule-item .cat-name { flex: 1; color: #888; }

/* Monthly Summary Bars */
.monthly-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.monthly-row {
    display: grid;
    grid-template-columns: 70px 1fr 90px;
    gap: 10px;
    align-items: center;
    font-size: 0.8rem;
}

.monthly-label { color: #888; }

.monthly-bar-wrapper {
    height: 20px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.monthly-bar-expense {
    background: #ef4444;
    height: 100%;
    transition: width 0.3s;
}

.monthly-bar-income {
    background: #22c55e;
    height: 100%;
    transition: width 0.3s;
}

.monthly-net {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Category Breakdown */
.cat-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #222;
    font-size: 0.85rem;
}

.cat-breakdown-row:last-child { border-bottom: none; }

.cat-breakdown-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-breakdown-amount {
    font-variant-numeric: tabular-nums;
    color: #ef4444;
}

/* Account Summary */
.account-summary {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    overflow-x: auto;
}

.stat-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 14px 18px;
    flex: 1;
    min-width: 140px;
}

.stat-card-wide { flex: none; min-width: 250px; }

.stat-label {
    display: block;
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
}

.pagination button {
    background: #333;
    border: none;
    color: #eee;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.pagination button:hover { background: #444; }
.pagination button.active { background: #6366f1; }
.pagination button:disabled { opacity: 0.3; cursor: default; }

.pagination .page-info { color: #888; font-size: 0.85rem; }

/* Flash animation */
@keyframes flash-green {
    0% { background: #22c55e22; }
    100% { background: transparent; }
}

@keyframes flash-red {
    0% { background: #ef444422; }
    100% { background: transparent; }
}

.flash-up { animation: flash-green 1s ease-out; }
.flash-down { animation: flash-red 1s ease-out; }

/* States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.empty-state p:first-child { font-size: 1.1rem; color: #aaa; }

.empty-state-small {
    text-align: center;
    padding: 30px 16px;
    color: #666;
    font-size: 0.85rem;
}

.loading {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.hidden { display: none !important; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-wide { max-width: 560px; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #333;
}

.modal-header h3 { font-size: 1rem; font-weight: 500; }

.modal-body { padding: 18px; }

.form-group { margin-bottom: 14px; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #aaa;
}

.form-group input, .form-group select {
    width: 100%;
    background: #222;
    border: 1px solid #333;
    color: #eee;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    font-family: inherit;
}

.form-group input:focus, .form-group select:focus { border-color: #6366f1; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Trade Modal */
.trade-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #222;
    border-radius: 6px;
    margin-bottom: 14px;
}

.trade-price-value {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trade-estimate {
    font-size: 0.85rem;
    color: #888;
    padding: 4px 0 8px;
    min-height: 24px;
}

.side-buy { color: #22c55e; font-weight: 600; }
.side-sell { color: #ef4444; font-weight: 600; }

.portfolio-footer {
    padding: 20px;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .controls, .filter-bar { flex-wrap: wrap; }
    .search-input { max-width: 100%; }
    .account-summary { flex-wrap: wrap; }
    .stat-card { min-width: 45%; }
    .section-grid { grid-template-columns: 1fr; }
    .desc-cell { max-width: 180px; }
}