.container{max-width:1200px;margin:0 auto;padding:16px}
h1{font-size:1.3rem;font-weight:800;color:#0f172a;margin-bottom:4px}
.subtitle{font-size:.82rem;color:#64748b;margin-bottom:16px}

/* Cards */
.card{background:white;border-radius:10px;padding:16px 20px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.card h2{font-size:.92rem;font-weight:700;color:#0f172a;margin-bottom:10px;border-bottom:2px solid #e2e8f0;padding-bottom:6px}

/* Condition builder */
.cond-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.cond-row select,.cond-row input{padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:.8rem;background:white}
.cond-row select{min-width:110px}
.cond-row input[type="number"]{width:80px}
.cond-unit{font-size:.7rem;color:#94a3b8;min-width:60px}
.cond-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1rem;padding:2px 6px}
.cond-remove:hover{color:#b91c1c}

.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn{padding:6px 14px;border:none;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:600;transition:background .15s}
.btn-primary{background:#2563eb;color:white}
.btn-primary:hover{background:#1d4ed8}
.btn-secondary{background:#e2e8f0;color:#475569}
.btn-secondary:hover{background:#cbd5e1}
.btn-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.btn-danger:hover{background:#fee2e2}

/* Logic tag */
.cond-logic-tag{display:inline-block;font-size:.72rem;font-weight:700;border-radius:10px;padding:2px 10px;margin:4px 0 4px 50px;cursor:pointer;user-select:none;transition:all .15s}
.cond-logic-tag.and{color:#2563eb;background:#dbeafe;border:1px solid #93c5fd}
.cond-logic-tag.or{color:#db2777;background:#fce7f3;border:1px solid #f9a8d4}
.logic-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

/* Hold period */
.hold-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.hold-row label{font-size:.82rem;font-weight:600;color:#334155}
.hold-row select{padding:5px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:.82rem}

/* Presets */
.preset-section{margin-bottom:12px}
.preset-section h3{font-size:.78rem;color:#64748b;font-weight:600;margin-bottom:6px}
.preset-grid{display:flex;flex-wrap:wrap;gap:4px}
.preset-btn{padding:4px 10px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;color:#475569;font-size:.72rem;cursor:pointer;transition:all .15s;font-weight:500}
.preset-btn:hover{background:#dbeafe;border-color:#93c5fd;color:#2563eb}

/* Status */
.status-bar{padding:10px 16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;margin-bottom:14px;font-size:.82rem;color:#1e40af;display:none}
.status-bar.error{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.status-bar.success{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}

/* Summary */
.bt-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.summary-item{text-align:center;padding:10px}
.summary-item .val{font-size:1.3rem;font-weight:800;color:#0f172a}
.summary-item .val.pos{color:#16a34a}
.summary-item .val.neg{color:#dc2626}
.summary-item .label{font-size:.7rem;color:#94a3b8;font-weight:600;margin-top:2px}

/* Chart */
.chart-box{margin-bottom:14px;display:none}
.chart-title{font-size:.82rem;font-weight:700;color:#334155;margin-bottom:8px}
.chart-legend{display:flex;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:4px;font-size:.72rem;color:#64748b}
.legend-dot{width:10px;height:10px;border-radius:2px}

/* Table */
.result-table{width:100%;border-collapse:collapse;font-size:.78rem}
.result-table th{background:#f8fafc;padding:8px 6px;text-align:left;font-weight:700;color:#64748b;border-bottom:2px solid #e2e8f0;white-space:nowrap;font-size:.72rem}
.result-table td{padding:7px 6px;border-bottom:1px solid #f1f5f9}
.result-table tr:hover{background:#f8fafc}
.ret-pos{color:#16a34a;font-weight:600}
.ret-neg{color:#dc2626;font-weight:600}
.ret-neutral{color:#94a3b8}

/* Loading */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;z-index:300;display:none}
.loading-overlay .spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
  .container{padding:10px}
  .cond-row{gap:4px}
  .cond-row select{min-width:90px;font-size:.72rem}
  .cond-row input[type="number"]{width:65px}
  .bt-summary-grid{grid-template-columns:repeat(2,1fr)}
}