/* Minimal Bootstrap-like CSS for navigation and buttons */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f7 100%);
    margin: 0;
    padding: 0 0 60px 0;
    color: #1e2330;
    -webkit-font-smoothing: antialiased;
}
/* Layout Containers */
.page-container {
    width: 90vw;
    max-width: 1600px;
    margin: 0 auto;
}
/* Elevated Card */
.card {
    background:#ffffffcc;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border:1px solid #dfe3eb;
    border-radius:12px;
    padding:16px 18px;
    box-shadow: 0 4px 8px -2px rgba(30,40,60,0.08), 0 2px 4px -1px rgba(30,40,60,0.06);
    transition: box-shadow .25s, transform .25s;
}
.card:hover {
    box-shadow:0 6px 16px -2px rgba(30,40,60,0.12),0 3px 8px -1px rgba(30,40,60,0.08);
}
.card h3, .card h4 { margin-top:0; }

/* Subtle separators */
.divider {
    height:1px; background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.12),rgba(0,0,0,0)); margin:18px 0;
}

/* Summary grid styling */
/* Summary grid styling (dev + prod use same rules) */
#trading-summary-grid, #prod-summary-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:18px;
    margin: 20px 0 8px 0;
}
#trading-summary-grid .summary-cell, #prod-summary-grid .summary-cell {
    background:#fff;
    border:1px solid #e3e8ef;
    border-radius:10px;
    padding:12px 14px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    transition:box-shadow .25s, transform .25s;
}
#trading-summary-grid .summary-cell:hover, #prod-summary-grid .summary-cell:hover { box-shadow:0 4px 10px rgba(0,0,0,0.08); }
#trading-summary-grid h4, #prod-summary-grid h4 { margin:0 0 6px 0; font-size:.95em; letter-spacing:.5px; text-transform:uppercase; color:#445; }
#trading-summary-grid ul, #prod-summary-grid ul { list-style:none; margin:0; padding:0; font-size:.78em; line-height:1.5; }

/* Typography tweaks */
h2,h3 { font-weight:600; letter-spacing:.5px; }
h3 { margin-top:32px; }
small, .muted { color:#68707f; }

/* Navigation */
nav {
    padding: 10px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    border-bottom:1px solid #e2e6ed;
    position:sticky;
    top:0; z-index:50;
    margin-bottom: 1.5em;
}
nav a {
    margin-right: 15px;
    text-decoration: none;
    color: #333;
    font-size: 1em;
    transition: color 0.2s;
    position:relative;
    padding:4px 2px;
}
nav a:hover {
    color: #007bff;
}
nav a:after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#007bff; transition:width .3s; }
nav a:hover:after { width:100%; }
button {
    font-family: inherit;
    font-size: 1em;
    padding: 6px 16px;
    margin: 2px;
    border: 1px solid #007bff;
    background: #fff;
    color: #007bff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
button:hover {
    background: #007bff;
    color: #fff;
}
form {
    display: inline;
}

/* Secondary button variants */
.btn-danger { border-color:#d9534f; color:#d9534f; }
.btn-danger:hover { background:#d9534f; color:#fff; }
.btn-success { border-color:#2d7d2d; color:#2d7d2d; }
.btn-success:hover { background:#2d7d2d; color:#fff; }

/* Utility spacing */
.mt-1 { margin-top:4px; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:16px; }
.mb-1 { margin-bottom:4px; } .mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:16px; }
.flex { display:flex; } .flex-col { flex-direction:column; } .flex-row { flex-direction:row; }
.justify-between { justify-content:space-between; } .items-center { align-items:center; }

/* Threshold side plot fine-tuning */
#thresholds-box { background:#fff; border:1px solid #e3e8ef; border-radius:12px; padding:8px 6px 4px 6px; box-shadow:0 2px 4px rgba(0,0,0,0.05); }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
.summary-cell, .card, #thresholds-box { animation:fadeIn .4s ease; }