*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f1117;--card:#1a1d27;--border:#2a2d3a;--text:#e1e4ed;--muted:#8b8fa3;--accent:#4f8cff;--green:#22c55e;--red:#ef4444;--yellow:#eab308}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:20px}
header{text-align:center;margin-bottom:30px}
header h1{font-size:1.8rem;color:var(--accent)}
.subtitle{color:var(--muted);font-size:0.9rem;margin-top:4px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;margin-bottom:20px}
.card h2{font-size:1.1rem;margin-bottom:16px;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:8px}
.subsection{margin-bottom:16px}
.subsection h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.filter-desc{font-size:0.78rem;color:var(--muted);margin-bottom:8px;font-style:italic}
.grid-1{display:grid;grid-template-columns:1fr;gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column}
.field label{font-size:0.78rem;color:var(--muted);margin-bottom:4px}
.field input,.field select{background:#111320;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-size:0.9rem}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.85rem}
.toggle-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent)}
.upload-area{border:2px dashed var(--border);border-radius:8px;padding:30px;text-align:center;cursor:pointer;transition:border-color 0.2s}
.upload-area:hover{border-color:var(--accent)}
.upload-area input[type="file"]{display:none}
.upload-area p{color:var(--muted)}
.file-info{color:var(--green);font-size:0.85rem;margin-top:8px;display:block}
.btn-run{display:block;width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:10px;transition:background 0.2s}
.btn-run:hover{background:#3d7ae8}
.btn-run:disabled{background:#555;cursor:not-allowed}
.hidden{display:none!important}
.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:30px auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
#loading{text-align:center;padding:40px}
#loading p{color:var(--muted)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric{background:#111320;border-radius:8px;padding:14px;text-align:center}
.metric-label{display:block;font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.metric-value{display:block;font-size:1.3rem;font-weight:700;margin-top:4px}
.metric.green .metric-value{color:var(--green)}
.metric.red .metric-value{color:var(--red)}
.detail-box{background:#111320;border-radius:8px;padding:16px}
.detail-box h3{font-size:0.85rem;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.detail-table{width:100%;border-collapse:collapse}
.detail-table td{padding:5px 0;font-size:0.85rem}
.detail-table td:first-child{color:var(--muted)}
.detail-table td:last-child{text-align:right;font-weight:600}
.streak-row.win td:last-child{color:var(--green);font-weight:700}
.streak-row.loss td:last-child{color:var(--red);font-weight:700}
.streak-row td{border-top:1px solid var(--border);padding-top:8px!important;margin-top:4px}
.table-wrap{overflow-x:auto}
#tradesTable,.portfolio-table{width:100%;border-collapse:collapse;font-size:0.8rem}
#tradesTable th,.portfolio-table th{background:#111320;padding:8px 10px;text-align:left;color:var(--muted);font-weight:600;text-transform:uppercase;font-size:0.7rem;letter-spacing:0.5px;position:sticky;top:0}
#tradesTable td,.portfolio-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
#tradesTable tr:hover,.portfolio-table tr:hover{background:rgba(79,140,255,0.05)}
.profit-pos{color:var(--green)}
.profit-neg{color:var(--red)}
.side-long{color:var(--green)}
.side-short{color:var(--red)}
.error-card{border-color:var(--red)}
.error-card h2{color:var(--red)}
.error-card p{color:var(--text)}
.btn-download{float:right;background:#22c55e;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:0.8rem;font-weight:600;cursor:pointer;transition:background 0.2s}
.btn-download:hover{background:#16a34a}
canvas{width:100%!important}
.result-filename{font-size:0.85rem;color:var(--muted);font-weight:400}

/* Monthly P&L table */
.monthly-table-wrap{max-height:400px;overflow-y:auto;margin-top:16px}
.monthly-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.monthly-table th{background:#111320;padding:8px 12px;text-align:left;color:var(--muted);font-weight:600;text-transform:uppercase;font-size:0.7rem;letter-spacing:0.5px;position:sticky;top:0}
.monthly-table td{padding:6px 12px;border-bottom:1px solid var(--border)}
.monthly-table td:last-child{text-align:right;font-weight:600}

/* Portfolio Add section */
.portfolio-add-card{text-align:center;border:1px dashed var(--accent);background:rgba(79,140,255,0.03)}
.portfolio-add-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:8px}
.btn-portfolio{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-portfolio:hover{background:#3d7ae8;transform:translateY(-1px)}
.added-msg{color:var(--green);font-weight:700;font-size:1rem;animation:fadeIn 0.3s}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* Portfolio summary grid */
.portfolio-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}

/* Portfolio table */
.portfolio-total-row{border-top:2px solid var(--accent)!important}
.portfolio-total-row td{padding-top:10px!important;border-top:2px solid var(--accent)}
.btn-remove{background:var(--red);color:#fff;border:none;border-radius:4px;padding:3px 10px;font-size:0.75rem;cursor:pointer;font-weight:600}
.btn-remove:hover{background:#dc2626}

@media(max-width:768px){
    .grid-3,.grid-4{grid-template-columns:1fr 1fr}
    .metrics-grid,.portfolio-summary-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .metrics-grid,.portfolio-summary-grid{grid-template-columns:1fr 1fr}
}