/* ═══════════════════════════════════════════
   CSS — Opus RES Design System v3.0
   Premium Equity/Wealth Aesthetik
   ═══════════════════════════════════════════ */
:root {
  /* ── Design System (Single Source of Truth) ── */
  --bg-primary:    #FAFAFA;
  --bg-secondary:  #F9F9FB;
  --color-navy:    #0D1B2A;
  --color-text:    #0D1B2A;
  --color-gold:    #C5A059;
  --border-color:  rgba(13, 27, 42, 0.10);
  --color-cta:     #D35400;
  --border-std:    1px solid var(--border-color);
  --border-gold:   1px solid var(--color-gold);
  --radius:        2px;
  --shadow-card:   0 10px 30px rgba(13, 27, 42, 0.03);
  --shadow-none:   none;
  --header-h:      56px;

  /* ── Compat mappings (existing rules reference these) ── */
  --bg-card:       #FAFAFA;
  --bg-input:      #F9F9FB;
  --bg-tertiary:   #F4F4F7;
  --border:        rgba(13, 27, 42, 0.10);
  --border-focus:  #C5A059;
  --text-primary:  #0D1B2A;
  --text-secondary: #3D4F63;
  --text-muted:    #6B7B8D;
  --text:          #0D1B2A;
  --accent:        #D35400;
  --accent-hover:  #B8440B;
  --green:         #10b981;
  --red:           #ef4444;
  --yellow:        #C5A059;
  --purple:        #6B7B8D;  /* neutral gray — legacy alias */
  --cyan:          #C5A059;  /* gold accent — legacy alias */
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --radius-lg:     4px;
  --shadow:        0 10px 30px rgba(13, 27, 42, 0.03);
  --chart-sm: 200px; --chart-md: 350px; --chart-lg: 500px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Typography — Opus RES ── */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: 0.01em;
}
body, p, span, td, th, label, input, select, button,
.nav-link, .menu-item, .metric, .value {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  color: var(--color-navy);
}

/* ── Auth Checking: hide UI until session is verified ── */
body.auth-checking .app { visibility: hidden; }
body.auth-checking::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-primary);
}

/* ── Utility Classes ── */
/* Display */
.d-flex { display: flex; }
.d-none { display: none; }
.d-grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
/* Gap */
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
/* Margin */
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.m-0 { margin: 0; }
/* Padding */
.p-4 { padding: 4px; } .p-8 { padding: 8px; } .p-12 { padding: 12px; }
.p-16 { padding: 16px; }
/* Font */
.fs-10 { font-size: 10px; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
/* Color */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
/* Width */
.w-full { width: 100%; }
/* Cursor */
.pointer { cursor: pointer; }
/* Overflow */
.overflow-y-auto { overflow-y: auto; }
/* Combo shortcuts */
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ── Error Banner (inline error state) ── */
.error-banner { padding: 12px 16px; border-radius: var(--radius); background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); color: var(--text-primary); font-size: 13px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
.error-banner-icon { color: var(--red); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.error-banner-text { flex: 1; }
.error-banner-text strong { color: var(--red); }
.error-banner-text pre { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 6px; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; }
.error-banner-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; flex-shrink: 0; }
.error-banner-close:hover { color: var(--text-primary); }
.warn-banner { padding: 12px 16px; border-radius: var(--radius); background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.25); color: var(--text-primary); font-size: 13px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
.warn-banner-icon { color: var(--yellow); font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── ML Training UI ── */
.progress-wrap { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); height: 28px; overflow: hidden; position: relative; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: var(--radius); transition: width 0.6s ease; }
.progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); text-shadow: none; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.live-phase { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(211,84,0,0.04); border: 1px solid rgba(211,84,0,0.08); border-radius: var(--radius); margin-top: 10px; font-size: 13px; }
.live-phase .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.5s infinite; flex-shrink: 0; }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; flex-shrink: 0; }
.ampel-green { background: var(--green); box-shadow: none; }
.ampel-yellow { background: var(--yellow); box-shadow: none; }
.ampel-red { background: var(--red); box-shadow: none; }
.ampel-neutral { background: var(--text-muted); }
.metric-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius); font-size: 12px; font-family: var(--font-mono); background: var(--bg-input); border: 1px solid var(--border); white-space: nowrap; }
.cm-grid { display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 2px; max-width: 260px; font-family: var(--font-mono); font-size: 13px; }
.cm-cell { padding: 10px 14px; text-align: center; border-radius: var(--radius); font-weight: 500; }
.cm-header { padding: 6px 10px; text-align: center; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cm-tp { background: rgba(16,185,129,0.15); color: var(--green); }
.cm-tn { background: rgba(211,84,0,0.08); color: var(--accent); }
.cm-fp { background: rgba(239,68,68,0.1); color: var(--red); }
.cm-fn { background: rgba(197,160,89,0.1); color: var(--yellow); }
.metrics-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.metric-summary-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-align: center; }
.metric-summary-card .m-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px; }
.metric-summary-card .m-val { font-size: 20px; font-weight: 500; font-family: var(--font-mono); }
.metric-summary-card .m-rate { font-size: 11px; margin-top: 4px; }
.of-banner { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.of-banner.of-low { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); }
.of-banner.of-moderate { background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.25); }
.of-banner.of-high { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); }
.of-icon { font-size: 24px; }
.of-text { flex: 1; }
.of-text strong { font-size: 14px; }
.of-text p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.of-pct { font-size: 28px; font-weight: 500; font-family: var(--font-mono); }
.acc-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; overflow: hidden; }
.acc-head { padding: 10px 14px; background: var(--bg-input); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.acc-head:hover { background: rgba(211,84,0,0.04); }
.acc-head .acc-arrow { transition: transform 0.2s; font-size: 12px; color: var(--text-muted); }
.acc-head.open .acc-arrow { transform: rotate(90deg); }
.acc-body { display: none; padding: 14px; background: var(--bg-card); border-top: 1px solid var(--border); }
.acc-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tune-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); }
.tune-row label { font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }

/* ── Info Tooltips ── */
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(211,84,0,0.08); color: var(--accent); font-size: 10px; font-weight: 500; font-family: var(--font-body); cursor: help; position: relative; margin-left: 4px; flex-shrink: 0; border: 1px solid rgba(211,84,0,0.15); }
/* info-tip show/hide handled by JS (core.js) for viewport-safe positioning */
.info-tip { display: none; position: fixed; width: 300px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; z-index: 10000; pointer-events: none; }
.info-tip strong { color: var(--text-primary); font-weight: 600; }
.info-tip .tip-good { color: var(--green); }
.info-tip .tip-bad { color: var(--red); }

/* ── Icons: ausblenden ── */
.sv-icon, .nav-icon, .mod-icon, .step-chevron,
i[class*="fa-"], .fa, .fas, .far, .fab, .fal,
[class*="icon-"]:not(.info-icon), svg.icon {
  display: none !important;
}

/* ── Layout ── */
body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.5; min-height: 100vh; }
.app { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--bg-secondary); border-right: var(--border-gold); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
.sidebar-brand { padding: 12px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; }
.sidebar-brand .brand-logo { height: 32px; width: auto; }
.sidebar-brand .brand-text { display: flex; flex-direction: column; }
.sidebar-brand h1 { font-size: 18px; font-weight: 400; color: var(--color-navy); letter-spacing: 0.02em; }
.sidebar-brand .version { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-section { padding: 8px 20px 4px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-top: 8px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 16px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; font-size: 13.5px; border-left: 2px solid transparent; }
.nav-item:hover { background: rgba(197,160,89,0.08); color: var(--color-navy); border-left-color: var(--color-gold); }
.nav-item.active { color: var(--color-cta); background: transparent; border-left: 2px solid var(--color-gold); font-weight: 500; }
.sidebar-footer { padding: 12px 20px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }
.main-content { flex: 1; margin-left: 240px; display: flex; flex-direction: column; max-width: calc(100vw - 240px); overflow-x: hidden; height: 100vh; overflow-y: auto; }
.page-header { padding: 12px 32px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 50; }
.page-header h2 { font-size: 20px; font-weight: 300; line-height: 1.2; }
.page-header p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.page-body { padding: 24px 32px; flex: 1; min-width: 0; overflow-x: clip; }

/* ── Components ── */
.card { background: var(--bg-card); border: var(--border-std); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 500; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.stat-card { background: var(--bg-card); border: var(--border-std); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-card); }
.stat-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 500; font-family: var(--font-mono); letter-spacing: -1px; }
.stat-value.green { color: var(--green); } .stat-value.blue { color: var(--accent); }
.stat-value.purple { color: var(--purple); } .stat-value.cyan { color: var(--cyan); } .stat-value.yellow { color: var(--yellow); }

/* ── Forms ── */
input, select, textarea { background: var(--bg-input); border: var(--border-std); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-body); font-size: 13px; padding: 8px 12px; width: 100%; transition: border-color 0.15s; box-shadow: var(--shadow-none); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); }
textarea { font-family: var(--font-mono); font-size: 12.5px; resize: vertical; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.form-row { margin-bottom: 14px; }
.form-row-inline { display: flex; gap: 12px; margin-bottom: 14px; }
.form-row-inline > div { flex: 1; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-primary { background-color: var(--color-cta); color: var(--bg-primary); border: none; box-shadow: var(--shadow-none); }
.btn-primary:hover { background-color: #B8440B; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary, .btn-outline { background: transparent; color: var(--color-navy); border: var(--border-gold); }
.btn-secondary:hover, .btn-outline:hover { border-color: var(--color-gold); color: var(--color-navy); }
.btn-success { background: var(--green); color: var(--bg-primary); }
.btn-danger { background: var(--red); color: var(--bg-primary); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
td { padding: 9px 14px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; }
tr:hover td { background: rgba(211,84,0,0.03); }
.text-green { color: var(--green); } .text-red { color: var(--red); } .text-muted { color: var(--text-muted); }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 500; }
.badge-green { background: rgba(16,185,129,0.15); color: var(--green); }
.badge-blue { background: rgba(211,84,0,0.08); color: var(--accent); }
.badge-purple { background: rgba(107,123,141,0.15); color: var(--purple); }
.badge-yellow { background: rgba(197,160,89,0.15); color: var(--yellow); }
.badge-success { background: rgba(16,185,129,0.15); color: var(--green); }
.badge-danger { background: rgba(239,68,68,0.15); color: var(--red); }
.badge-primary { background: rgba(211,84,0,0.08); color: var(--accent); }
.badge-muted { background: rgba(148,163,184,0.1); color: var(--text-muted); }
.text-red { color: var(--red); }
.btn-xs { padding: 2px 8px; font-size: 11px; }
.badge-cyan { background: rgba(197,160,89,0.08); color: var(--cyan); }
.gics-mode-active { background: var(--accent) !important; color: var(--bg-primary) !important; border-color: var(--accent) !important; }
.gics-acc-header:hover { background: rgba(13,27,42,0.02); }
.badge-red { background: rgba(239,68,68,0.15); color: var(--red); }

/* ── Toast ── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow); animation: slideIn 0.2s ease; max-width: 400px; }
.toast-success { background: var(--green); color: var(--bg-primary); } .toast-error { background: var(--red); color: var(--bg-primary); } .toast-info { background: var(--accent); color: var(--bg-primary); } .toast-warning { background: var(--yellow); color: var(--color-navy); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }

/* ── Misc ── */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
.spinner-sm { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(13,27,42,0.15); border-top-color: var(--color-navy); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 4px; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-overlay { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-secondary); }
/* ── Loading State (unified) ── */
.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }
.loading-state .spinner { width: 20px; height: 20px; }
.loading-state-sm { padding: 20px; }
/* ── Skeleton Loader ── */
.skeleton { background: linear-gradient(90deg, var(--bg-input) 25%, rgba(211,84,0,0.04) 50%, var(--bg-input) 75%); background-size: 200% 100%; animation: skeletonPulse 1.5s ease-in-out infinite; border-radius: var(--radius); }
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: var(--radius); }
.skeleton-text:last-child { width: 60%; }
.skeleton-card { height: 80px; border-radius: var(--radius-lg); margin-bottom: 12px; }
.skeleton-chart { height: 200px; border-radius: var(--radius); }
@keyframes skeletonPulse { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* ── Modal (unified) ── */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13,27,42,0.3); z-index: 9999; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--bg-primary); border: var(--border-std); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.modal-sm { width: 480px; }
.modal-lg { width: 96%; max-width: 1300px; max-height: 90vh; }
.modal-xl { width: 94%; max-width: 1200px; max-height: 90vh; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.modal-header-title { font-weight: 500; font-size: 16px; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; }
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 20px; }
.modal-body-scroll { overflow-y: auto; max-height: calc(90vh - 120px); }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); }
.modal-hint { font-size: 11px; color: var(--text-muted); padding: 8px; background: var(--bg-input); border-radius: var(--radius); margin-bottom: 14px; }

/* -- Unified Load Popup -- */
.ulp-section-header { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.ulp-item { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.ulp-item:hover { background: var(--bg-secondary); }
.ulp-item.selected { background: rgba(211,84,0,0.08); border-left: 3px solid var(--primary); }
.ulp-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Expand/Collapse */
.ulp-expand-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; margin-right: 8px; border-radius: 3px; display: flex; align-items: center; transition: transform 0.15s ease; flex-shrink: 0; }
.ulp-expand-btn:hover { color: var(--text-primary); background: var(--bg-input); }
.ulp-expand-btn.expanded { transform: rotate(90deg); }
.ulp-detail { background: var(--bg-primary); border-bottom: 1px solid var(--border); padding: 12px 16px 12px 40px; font-size: 12px; }
.ulp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.ulp-detail-grid dt { color: var(--text-muted); font-size: 11px; }
.ulp-detail-grid dd { margin: 0; font-size: 12px; color: var(--text-primary); margin-bottom: 4px; }
.ulp-detail-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.ulp-detail-section:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.ulp-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ulp-kpi { display: flex; flex-direction: column; min-width: 70px; }
.ulp-kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ulp-kpi-value { font-size: 14px; font-weight: 600; font-family: var(--font-mono); }

/* ── Empty State (unified) ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state p { margin-bottom: 4px; }
.empty-state .empty-cta { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }
.formula-input { font-family: var(--font-mono); font-size: 13px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--cyan); }
.formula-input:focus { border-color: var(--cyan); }
.chart-container { min-height: 350px !important; height: 350px; position: relative; }
.chart-sm { height: var(--chart-sm) !important; min-height: var(--chart-sm) !important; }
.chart-md { height: var(--chart-md) !important; min-height: var(--chart-md) !important; }
.chart-lg { height: var(--chart-lg) !important; min-height: var(--chart-lg) !important; }
/* ECharts canvas containers */
canvas { display: block; }
.table-wrap.chart-sm { height: auto; max-height: var(--chart-sm); } .table-wrap.chart-md { height: auto; max-height: var(--chart-md); } .table-wrap.chart-lg { height: auto; max-height: var(--chart-lg); }
.section-title { font-size: 14px; font-weight: 500; margin-bottom: 12px; color: var(--text-secondary); }
.page { display: none; } .page.active { display: block; }

/* ── Custom Indicator Editor v2 ── */
.ci-editor-wrap { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-primary); }
.ci-line-nums { padding: 10px 8px 10px 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--text-muted); background: rgba(13,27,42,0.03); border-right: 1px solid var(--border); text-align: right; user-select: none; min-width: 36px; margin: 0; overflow: hidden; }
.ci-code-editor { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--cyan); width: 100%; resize: vertical; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.ci-code-editor:focus { border-color: var(--cyan); outline: none; }
.ci-editor-wrap .ci-code-editor { border: none; border-radius: 0; flex: 1; min-height: 220px; }
.ci-template-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 4px; cursor: pointer; transition: all 0.15s; }
.ci-template-item:hover { border-color: var(--accent); background: rgba(211,84,0,0.04); }
.ci-var-row { padding: 6px 8px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; }
.ci-var-row:last-child { border-bottom: none; }
.ci-var-output { background: rgba(16,185,129,0.06); border-left: 2px solid var(--green); }
.ci-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 20px; align-items: start; }
@media (max-width: 1400px) { .ci-layout-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 1200px) { .ci-layout-grid { grid-template-columns: minmax(0, 1fr); } }
.ci-var-stats { display: flex; gap: 8px; color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; padding: 3px 10px; background: rgba(211,84,0,0.06); border: 1px solid rgba(211,84,0,0.10); border-radius: var(--radius); font-size: 11.5px; font-family: var(--font-mono); color: var(--accent); cursor: pointer; transition: all 0.15s; }
.tag:hover { background: rgba(211,84,0,0.10); }

/* ── Strategy Wizard Steps ── */
.step { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; transition: all 0.3s; }
.step.locked .step-header { opacity: 0.4; cursor: default; }
.step.locked .step-body { display: none; }
.step.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.step.completed { border-color: var(--green); }
.step.completed .step-body { display: none; }
.step.active .step-body { display: block; }
.step-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-secondary); cursor: pointer; transition: background 0.15s; }
.step-header:hover { background: rgba(211,84,0,0.03); }
.step.locked .step-header:hover { background: var(--bg-secondary); }
.step-number { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; font-family: var(--font-mono); background: var(--border); color: var(--text-muted); flex-shrink: 0; }
.step.active .step-number { background: var(--accent); color: var(--bg-primary); }
.step.completed .step-number { background: var(--green); color: var(--bg-primary); }
.step-title { font-weight: 500; font-size: 14px; }
.step-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.step-badge { margin-left: auto; }
.step-chevron { margin-left: auto; font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
.step.active .step-chevron { transform: rotate(90deg); color: var(--accent); }
.step.completed .step-chevron { color: var(--green); }
.step-body { padding: 20px; background: var(--bg-card); display: none; }

/* ── Mode Toggle (Direction, Ranking) ── */
.mode-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.mode-toggle-btn { flex: 1; padding: 10px 16px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; background: var(--bg-input); color: var(--text-secondary); border: none; }
.mode-toggle-btn.active { background: var(--accent); color: var(--bg-primary); }
.mode-toggle-btn:hover:not(.active) { background: rgba(211,84,0,0.06); }

/* ── Feature / Condition Rows ── */
.feature-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.feature-row input:first-child { width: 140px; flex-shrink: 0; }
.feature-row input.formula-input { flex: 1; }
.feature-row .feat-freq { width: 95px; flex-shrink: 0; font-size: 12px; padding: 4px; }
.feature-row .feat-method { width: 125px; flex-shrink: 0; font-size: 12px; padding: 4px; }
.feature-row .btn { flex-shrink: 0; }

/* ── Feature Builder Catalog & Templates ── */
.fb-tab { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border); font-size: 11px; padding: 3px 10px; border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.fb-tab.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.fb-tab:hover:not(.active) { background: rgba(211,84,0,0.06); }
.fb-tmpl-card { padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; min-width: 130px; flex: 1; max-width: 200px; }
.fb-tmpl-card:hover { border-color: var(--accent); background: rgba(211,84,0,0.04); }
.fb-tmpl-card .tmpl-name { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.fb-tmpl-card .tmpl-meta { font-size: 10px; color: var(--text-muted); }
.fb-cat-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius); cursor: pointer; font-size: 12px; transition: background 0.1s; }
.fb-cat-item:hover { background: rgba(211,84,0,0.05); }
.fb-cat-item .cat-name { font-weight: 500; font-family: var(--font-mono); color: var(--cyan); }
.fb-cat-item .cat-desc { flex: 1; color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-cat-item .cat-badge { flex-shrink: 0; }
.fb-group-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius); font-size: 9px; font-weight: 600; margin-left: 4px; }
.fb-group-badge.g-fundamental { background: rgba(107,123,141,0.15); color: var(--purple); }
.fb-group-badge.g-technical { background: rgba(197,160,89,0.10); color: var(--cyan); }
.fb-group-badge.g-sentiment { background: rgba(197,160,89,0.15); color: var(--yellow); }
.fb-group-badge.g-other { background: rgba(100,116,139,0.15); color: var(--text-muted); }
.fb-group-badge.g-custom { background: rgba(16,185,129,0.15); color: var(--green); }
.fb-cov-bar { height: 4px; border-radius: 2px; background: var(--bg-secondary); margin-top: 4px; overflow: hidden; }
.fb-cov-bar .fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.fb-cov-badge { font-size: 9px; font-weight: 600; min-width: 28px; text-align: center; padding: 1px 4px; border-radius: var(--radius); flex-shrink: 0; }
.fb-cov-badge.cov-ok { background: rgba(16,185,129,0.15); color: var(--green); }
.fb-cov-badge.cov-warn { background: rgba(245,158,11,0.15); color: var(--yellow); }
.fb-cov-badge.cov-bad { background: rgba(239,68,68,0.15); color: var(--red); }

.fl-plus-btn {
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--accent);color:var(--accent);
  font-size:13px;font-weight:700;line-height:1;
  cursor:pointer;margin-left:6px;vertical-align:middle;
  transition:background 0.15s,color 0.15s;
  user-select:none;
}
.fl-plus-btn:hover {
  background:var(--accent);color:var(--bg-primary);
}
#fl-ml-panel select,
#fl-ml-panel input[type="number"],
#fl-ml-panel input[type="date"],
#fl-ml-panel input[type="text"],
#fl-ml-panel .formula-input { height:32px !important;min-height:32px;max-height:32px;box-sizing:border-box;font-size:12px;padding:4px 8px;line-height:1.2;margin:0; }
#fl-ml-panel .btn { height:32px;box-sizing:border-box;font-size:12px;padding:4px 10px; }
#fl-ml-panel input[type="date"]::-webkit-inner-spin-button,
#fl-ml-panel input[type="date"]::-webkit-calendar-picker-indicator { margin:0;padding:0; }

.cond-container { margin-bottom: 8px; }
.cond-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; padding: 8px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.cond-row:hover { border-color: var(--border-focus); }
.cond-row .cond-indicator-wrap { flex: 1; position: relative; min-width: 0; }
.cond-row .cond-indicator { width: 100%; font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan); background: var(--bg-input); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.cond-row .cond-indicator:focus { border-color: var(--cyan); }
.cond-row .cond-operator { width: 50px; flex-shrink: 0; text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; padding: 6px 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); }
.cond-row .cond-value { width: 72px; flex-shrink: 0; font-family: var(--font-mono); font-size: 12.5px; padding: 6px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); text-align: right; }
.cond-row .cond-delete { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 0; }
.cond-row .cond-delete:hover { background: rgba(239,68,68,0.15); color: var(--red); }
.cond-row .cond-lag { width: 44px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; padding: 6px 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--yellow); }
.cond-row .cond-lag::placeholder { color: var(--text-muted); }

/* ── Indicator Dropdown ── */
.ind-dropdown { position: fixed; z-index: 9000; background: var(--bg-card); border: 1px solid var(--border-focus); border-radius: var(--radius); max-height: 300px; overflow-y: auto; box-shadow: var(--shadow-card); display: none; min-width: 340px; }
.ind-dropdown.open { display: block; }
.ind-dropdown-cat { padding: 6px 10px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.ind-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--border-color); }
.ind-dropdown-item:hover, .ind-dropdown-item.highlight { background: rgba(211,84,0,0.06); }
.ind-dropdown-item .ind-dd-name { font-family: var(--font-mono); font-weight: 600; color: var(--cyan); min-width: 80px; font-size: 11.5px; }
.ind-dropdown-item .ind-dd-ex { font-family: var(--font-mono); color: var(--text-secondary); font-size: 11px; min-width: 100px; }
.ind-dropdown-item .ind-dd-desc { color: var(--text-muted); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-dropdown::-webkit-scrollbar { width: 5px; }
.ind-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Edit button ── */
.cond-row .cond-edit-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0; transition: all 0.15s; }
.cond-row .cond-edit-btn:hover { color: var(--cyan); }
.cond-row .cond-edit-btn.active { color: var(--cyan); }

/* ── Toggle Switch ── */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 20px; transition: 0.2s; }
.toggle-slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 2px; bottom: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: rgba(168,85,247,0.2); border-color: var(--purple); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); background: var(--purple); }
.cond-row.freetext-mode .cond-indicator-wrap { flex: 1 1 100%; }
.cond-row.freetext-mode .cond-indicator { color: var(--green); font-size: 12px; }
.cond-row.freetext-mode .cond-operator,
.cond-row.freetext-mode .cond-value { display: none; }

/* ── Result Summary ── */
.result-summary { display: flex; gap: 16px; padding: 16px; background: rgba(211,84,0,0.04); border: 1px solid rgba(211,84,0,0.08); border-radius: var(--radius); margin-bottom: 16px; }
.result-summary .item { text-align: center; }
.result-summary .item .val { font-size: 24px; font-weight: 500; font-family: var(--font-mono); }
.result-summary .item .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Strategy Exit Config Grid ── */
.exit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.exit-grid label { font-size: 11px; }
.exit-grid input { font-size: 12px; padding: 6px 10px; }

/* ── AP4: Indicator Dropdown Filter Tabs ── */
.ind-filter-tabs { display: flex; gap: 0; padding: 4px 6px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.ind-filter-tab { padding: 3px 8px; font-size: 10px; font-weight: 500; border-radius: var(--radius); cursor: pointer; color: var(--text-muted); transition: all 0.12s; white-space: nowrap; }
.ind-filter-tab:hover { color: var(--text-primary); background: rgba(211,84,0,0.05); }
.ind-filter-tab.active { color: var(--bg-primary); background: var(--accent); }
.ind-type-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── AP4: Quick-Insert Chips ── */
.quick-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.quick-chip { display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 500; border-radius: var(--radius); cursor: pointer; transition: all 0.12s; border: 1px solid var(--border); user-select: none; }
.quick-chip:hover { transform: translateY(-1px); }
.quick-chip-funda { background: rgba(107,123,141,0.08); color: var(--purple); border-color: rgba(107,123,141,0.25); }
.quick-chip-funda:hover { background: rgba(107,123,141,0.18); border-color: var(--purple); }
.quick-chip-tech { background: rgba(197,160,89,0.08); color: var(--cyan); border-color: rgba(197,160,89,0.20); }
.quick-chip-tech:hover { background: rgba(197,160,89,0.15); border-color: var(--cyan); }

/* ── AP4: Strategy Template Gallery ── */
.strat-tpl-toggle { font-size: 12px; color: var(--text-muted); cursor: pointer; padding: 6px 0; margin-bottom: 8px; user-select: none; }
.strat-tpl-toggle:hover { color: var(--accent); }
.strat-tpl-gallery { margin-bottom: 16px; }
.strat-tpl-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.strat-tpl-card:hover { border-color: var(--accent); background: rgba(211,84,0,0.04); transform: translateY(-1px); }
.strat-tpl-icon { font-size: 22px; flex-shrink: 0; width: 36px; text-align: center; }
.strat-tpl-info { min-width: 0; }
.strat-tpl-name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-tpl-desc { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-tpl-meta { font-size: 10px; color: var(--text-muted); opacity: 0.7; margin-top: 2px; }
.strat-tpl-cat-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.strat-tpl-cat-label:first-child { margin-top: 0; }
.strat-tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; }

/* ── Optimizer ── */
.opt-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.opt-param-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; opacity: 0.5; transition: all 0.2s; }
.opt-param-row.active { opacity: 1; border-color: var(--accent); background: rgba(211,84,0,0.03); }
.opt-param-row.opt-lag-row { border-left: 3px solid var(--yellow); margin-left: 16px; }
.opt-param-row.opt-lag-row.active { border-color: var(--yellow); background: rgba(234,179,8,0.04); }
.opt-param-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; min-width: 200px; flex-shrink: 0; }
.opt-param-check input { width: auto; }
.opt-param-key { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.opt-param-sub { font-size: 11px; color: var(--cyan); font-family: var(--font-mono); margin-left: 4px; }
.opt-param-inputs { display: flex; gap: 8px; flex: 1; }
.opt-param-inputs > div { flex: 1; }
.opt-param-inputs label { font-size: 10px; margin-bottom: 2px; }
.opt-param-inputs input { font-size: 12px; padding: 5px 8px; }
.opt-stability-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.opt-stability-name { font-weight: 600; min-width: 180px; font-family: var(--font-mono); font-size: 12px; }
.opt-stability-stats { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.opt-stability-sparkline { display: flex; align-items: flex-end; gap: 2px; margin-left: auto; }
.spark-bar { width: 6px; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 4px; }
/* ── Erweiterte Module ── */
.modules-toggle { cursor:pointer; user-select:none; font-size:12px; color:var(--accent); margin-top:20px; padding:8px 0; border-top:1px solid var(--border); }
.modules-toggle:hover { color:var(--cyan); }
.module-section { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.module-section.collapsed .module-body { display:none; }
.module-section.collapsed .module-head .mod-arrow { transform:rotate(-90deg); }
.module-head { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:12px; font-weight:600; }
.module-head:hover { background:rgba(13,27,42,0.02); }
.module-head .mod-arrow { transition:transform 0.15s; font-size:10px; color:var(--text-muted); }
.module-head .mod-icon { font-size:14px; }
.module-head .mod-label { flex:1; }
.module-head .mod-badge { font-size:10px; padding:1px 6px; border-radius:var(--radius); background:var(--accent); color:var(--bg-primary); font-weight:500; }
.module-body { padding:10px 12px; font-size:11px; }
.module-body label { font-size:11px; color:var(--text-muted); display:block; margin-bottom:2px; }
.module-body input[type="number"], .module-body input[type="text"], .module-body select {
  font-size:11px; padding:4px 8px; background:var(--bg-input); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius); }
.module-body .mod-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:6px; }
.module-body .mod-row > div { flex:1; min-width:100px; }
.module-body .mod-check-row { display:flex; align-items:center; gap:8px; margin:8px 0; }
.module-body .mod-check-row input[type="checkbox"] { margin:0; flex-shrink:0; width:16px; height:16px; }
.module-body .mod-check-row label { display:inline !important; margin:0 !important; color:var(--text-primary); font-weight:500; cursor:pointer; }
/* Toggle Switch */
.switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--border); border-radius:20px; transition:0.2s; }
.switch .slider:before { content:""; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:var(--bg-primary); border-radius:50%; transition:0.2s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider:before { transform:translateX(16px); }
.module-body .mod-sub { margin-left:20px; padding:6px 0; }
.module-body .mod-add-btn { font-size:10px; padding:2px 8px; cursor:pointer; color:var(--accent); background:none; border:1px solid var(--accent); border-radius:var(--radius); }
.module-body .mod-add-btn:hover { background:var(--accent); color:var(--bg-primary); }
.sv-uni-badge { display:inline-block; font-size:10px; font-weight:500; padding:2px 8px; border:1px solid; border-radius:var(--radius); font-family:var(--font-mono); letter-spacing:0.3px; }
/* ═══ Stock Viewer ═══ */
#sv-search-box { position: relative; display: inline-block; width: 320px; max-width: 50vw; flex-shrink: 1; min-width: 150px; }
#sv-search { width: 100%; padding: 10px 16px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); font-size: 15px; font-family: var(--font-mono); outline: none; transition: border-color 0.2s; }
#sv-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(211,84,0,0.08); }
#sv-search::placeholder { color: var(--text-muted); }
#sv-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); max-height: 300px; overflow-y: auto; display: none; z-index: 200; box-shadow: var(--shadow-card); }
.sv-result-item { padding: 8px 16px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; border-bottom: 1px solid var(--border-color); }
.sv-result-item:hover { background: var(--accent); color: var(--bg-primary); }
.sv-no-result { padding: 12px 16px; color: var(--text-muted); font-size: 12px; }
#sv-loading { display: none; justify-content: center; align-items: center; padding: 80px; }
#sv-loading .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#sv-content { display: none; }
.sv-section { margin-bottom: 28px; }
.sv-section-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.sv-section-title .sv-icon { font-size: 18px; }
.sv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1200px) { .sv-grid-2 { grid-template-columns: 1fr; } }
.sv-chart-box { background: var(--bg-tertiary); border-radius: var(--radius); padding: 4px; border: 1px solid var(--border); min-width: 0; overflow-x: hidden; overflow-y: visible; max-width: 100%; }
.sv-chart-box canvas { max-width: 100%; }
.sv-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sv-section .sv-table { display: block; overflow-x: auto; }
.sv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-table th { text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.sv-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); }
.sv-table tr:hover td { background: rgba(211,84,0,0.03); }
.sv-holder-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cyan); }
.sv-table-footer { padding: 8px 10px; font-size: 11px; color: var(--text-muted); }
.sv-card { background: var(--bg-tertiary); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); margin-bottom: 12px; }
.sv-card-title { font-size: 13px; font-weight: 500; color: var(--cyan); margin-bottom: 10px; }
.sv-rating-badge { display: inline-block; padding: 6px 18px; border-radius: var(--radius); font-weight: 500; font-size: 16px; margin-bottom: 12px; }
.sv-rating-s, .sv-rating-a { background: rgba(16,185,129,0.08); color: var(--green); border: 1px solid rgba(16,185,129,0.2); }
.sv-rating-b { background: rgba(197,160,89,0.08); color: var(--yellow); border: 1px solid rgba(197,160,89,0.2); }
.sv-rating-c, .sv-rating-d, .sv-rating-f { background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.sv-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sv-score-item { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.sv-score-label { color: var(--text-muted); }
.sv-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sv-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border-color); }
.sv-kv-label { color: var(--text-muted); }
.sv-kv-val { color: var(--text-primary); font-weight: 500; font-family: var(--font-mono); }
.sv-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sv-metric-card { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.sv-metric-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sv-metric-value { font-size: 18px; font-weight: 500; color: var(--text-primary); font-family: var(--font-mono); }
.sv-years-select { padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); font-size: 13px; width: auto; flex-shrink: 0; }
/* ═══ Data Catalog ═══ */
.dc-summary { display: flex; gap: 16px; margin-bottom: 28px; }
.dc-summary-item { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.dc-summary-icon { font-size: 24px; margin-bottom: 4px; }
.dc-summary-val { font-size: 26px; font-weight: 500; color: var(--text-primary); font-family: var(--font-mono); }
.dc-summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.dc-cluster { margin-bottom: 24px; }
.dc-cluster-header { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dc-cluster-icon { font-size: 20px; }
.dc-cluster-name { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.dc-cluster-rows { margin-left: auto; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.dc-datasets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dc-dataset-card { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: border-color 0.2s; }
.dc-dataset-card:hover { border-color: var(--accent); }
.dc-ds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dc-ds-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.dc-ds-dsl { font-size: 11px; color: var(--cyan); font-family: var(--font-mono); background: rgba(197,160,89,0.08); padding: 2px 8px; border-radius: var(--radius); }
.dc-ds-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.dc-ds-stat { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.dc-ds-label { color: var(--text-muted); }
.dc-ds-val { color: var(--text-primary); font-family: var(--font-mono); font-weight: 500; }
.dc-ds-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dc-chip { font-size: 10px; padding: 2px 8px; background: rgba(211,84,0,0.05); color: var(--accent); border-radius: var(--radius); font-family: var(--font-mono); }
.dc-chip-derived { background: rgba(13,27,42,0.05); color: var(--text-secondary); }
.dc-ds-pit { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.dc-derived-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.dc-fresh-good { color: var(--green); }
.dc-fresh-warn { color: var(--yellow); }
.dc-fresh-stale { color: var(--red); }

/* ── DSL Help Sidebar ── */
/* ── FAB (Floating Action Button) ── */
.fab-container { position: fixed; bottom: 20px; right: 24px; z-index: 150; display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
.fab-main { width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--bg-secondary); box-shadow: 0 4px 16px rgba(13,27,42,0.12); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; padding: 0; }
.fab-main img { width: 34px; height: 34px; }
.fab-main:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(13,27,42,0.18); }
.fab-main.open { box-shadow: 0 0 0 3px var(--color-gold), 0 4px 16px rgba(13,27,42,0.12); }
.fab-main.open:hover { box-shadow: 0 0 0 3px var(--color-gold), 0 6px 20px rgba(13,27,42,0.18); }
.fab-sub { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; opacity: 0; transform: scale(0.3) translateY(20px); pointer-events: none; transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); position: relative; }
.fab-container.open .fab-sub { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.fab-container.open .fab-sub:nth-child(1) { transition-delay: 0.06s; }
.fab-container.open .fab-sub:nth-child(2) { transition-delay: 0.02s; }
.fab-sub-dsl { background: var(--accent); color: var(--bg-primary); box-shadow: 0 3px 12px rgba(211,84,0,0.25); font-family: var(--font-mono); font-size: 14px; }
.fab-sub-dsl:hover { background: var(--accent-hover); transform: scale(1.1); }
.fab-sub-docs { background: var(--color-navy); color: #fff; box-shadow: 0 3px 12px rgba(13,27,42,0.2); }
.fab-sub-docs:hover { background: #162a3f; transform: scale(1.1); }
.fab-tooltip { position: absolute; right: 52px; white-space: nowrap; background: var(--color-navy); color: #fff; padding: 4px 10px; border-radius: var(--radius); font-size: 11px; font-weight: 400; font-family: var(--font-body); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.fab-sub:hover .fab-tooltip { opacity: 1; }
.dsl-help { position: fixed; top: 0; right: -420px; width: 420px; height: 100vh; background: var(--bg-secondary); border-left: 1px solid var(--border); z-index: 500; transition: right 0.25s ease; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(13,27,42,0.05); }
.dsl-help.open { right: 0; }
.dsl-help.docked { z-index: 50; box-shadow: none; }
.main-content.dsl-docked { margin-right: 420px; max-width: calc(100vw - 240px - 420px); transition: margin-right 0.25s ease, max-width 0.25s ease; }
.dsl-help-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dsl-help-header h3 { font-size: 15px; font-weight: 300; margin: 0; }
.dsl-help-header-actions { display: flex; align-items: center; gap: 6px; }
.dsl-dock-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s; }
.dsl-dock-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.dsl-dock-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(211,84,0,0.06); }
.dsl-help-search { margin: 0 14px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 13px; font-family: var(--font-mono); margin-top: 10px; }
.dsl-help-search:focus { outline: none; border-color: var(--cyan); }
.dsl-help-tabs { display: flex; gap: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.dsl-help-tab { padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: var(--radius); cursor: pointer; color: var(--text-muted); transition: all 0.12s; }
.dsl-help-tab:hover { color: var(--text-primary); }
.dsl-help-tab.active { background: var(--accent); color: var(--bg-primary); }
.dsl-help-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.dsl-help-count { padding: 4px 14px; font-size: 11px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.dsl-cat { margin-bottom: 14px; }
.dsl-cat-title { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.dsl-item { padding: 5px 8px; border-radius: var(--radius); cursor: pointer; font-size: 12px; transition: background 0.1s; display: flex; align-items: center; gap: 8px; }
.dsl-item:hover { background: rgba(211,84,0,0.05); }
.dsl-item-name { font-family: var(--font-mono); font-weight: 600; color: var(--cyan); min-width: 100px; flex-shrink: 0; }
.dsl-item-desc { color: var(--text-muted); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsl-item-cat { font-size: 9px; color: var(--text-muted); background: var(--bg-input); padding: 1px 6px; border-radius: var(--radius); flex-shrink: 0; }
.dsl-detail { padding: 14px; }
.dsl-detail-title { font-size: 16px; font-weight: 500; font-family: var(--font-mono); color: var(--cyan); margin-bottom: 8px; }
.dsl-detail-section { margin-bottom: 12px; }
.dsl-detail-section h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; }
.dsl-detail-section code { display: block; padding: 6px 10px; background: var(--bg-primary); border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px; color: var(--green); margin-bottom: 4px; }
.dsl-detail-section p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.dsl-back { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; margin-bottom: 10px; }
.dsl-back:hover { text-decoration: underline; }
@media (max-width: 768px) { .dsl-help { width: 100vw; right: -100vw; } .fab-container { bottom: 70px; right: 16px; } .main-content.dsl-docked { margin-right: 0; max-width: 100vw; } }

/* ── Sortable Tables ── */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
th.sortable:hover { color: var(--text-primary); }
th.sortable::after { content: '\21C5'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.3; }
th.sortable.sort-asc::after { content: '\25B2'; opacity: 0.8; color: var(--accent); }
th.sortable.sort-desc::after { content: '\25BC'; opacity: 0.8; color: var(--accent); }

/* ── Notification Center ── */
.notif-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 16px; cursor: pointer; transition: all 0.15s; }
.notif-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.notif-badge { display: none; position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: var(--bg-primary); font-size: 9px; font-weight: 500; align-items: center; justify-content: center; font-family: var(--font-mono); }
.notif-panel { display: none; position: absolute; bottom: 48px; left: 12px; width: 320px; background: var(--bg-card); border: var(--border-std); border-radius: var(--radius); box-shadow: var(--shadow-card); z-index: 300; overflow: hidden; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.notif-clear { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; }
.notif-clear:hover { color: var(--accent); }
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.notif-item:hover { background: rgba(211,84,0,0.03); }
.notif-msg { flex: 1; color: var(--text-secondary); word-break: break-word; }
.notif-time { flex-shrink: 0; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 1200px) {
  .notif-panel { left: 4px; width: 300px; }
}

/* ── Sidebar Toggle Button ── */
.sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 200; width: 36px; height: 36px; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 18px; cursor: pointer; align-items: center; justify-content: center; line-height: 1; }
.sidebar-toggle:hover { color: var(--text-primary); border-color: var(--accent); }

/* ── Responsive: Collapsed Sidebar ── */
@media (max-width: 1200px) {
  .sidebar { width: 60px; transition: width 0.2s; }
  .sidebar-brand { padding: 8px 0; justify-content: center; height: var(--header-h); }
  .sidebar-brand .brand-text { display: none; }
  .sidebar-brand .brand-logo { height: 28px; }
  .nav-section { padding: 6px 8px 2px; font-size: 0; overflow: hidden; height: 4px; }
  .nav-item { padding: 10px 0; justify-content: center; font-size: 0; border-left: none; }
  .nav-item .nav-icon { font-size: 18px; width: auto; margin: 0; }
  .nav-item.active { border-left: 2px solid var(--color-gold); }
  .sidebar-footer { padding: 8px; text-align: center; font-size: 0; }
  .sidebar-footer .status-dot { margin: 0; }
  .main-content { margin-left: 60px; max-width: calc(100vw - 60px); }
  .main-content.dsl-docked { max-width: calc(100vw - 60px - 420px); }
  /* Tooltip on hover for icon-only nav */
  .nav-item { position: relative; }
  .nav-item::after { content: attr(data-page); position: absolute; left: 64px; top: 50%; transform: translateY(-50%); background: var(--bg-card); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--radius); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 200; }
  .nav-item:hover::after { opacity: 1; }
}

@media (max-width: 768px) {
  .sidebar { width: 240px; transform: translateX(-100%); transition: transform 0.25s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .main-content { margin-left: 0; max-width: 100vw; }
  .sidebar-brand .brand-text { display: flex; }
  .sidebar-brand .brand-logo { height: 32px; }
  .nav-section { font-size: 10px; height: auto; padding: 8px 20px 4px; }
  .nav-item { font-size: 13.5px; padding: 9px 20px; justify-content: flex-start; }
  .nav-item .nav-icon { font-size: 16px; width: 20px; }
  .nav-item::after { display: none; }
  .sidebar-footer { font-size: 11px; text-align: left; padding: 12px 20px; }
  /* Overlay when sidebar open */
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(13,27,42,0.2); z-index: 99; }
  .sidebar.open ~ .sidebar-backdrop { display: block; }
  .page-header { padding: 0 16px; padding-left: 56px; height: var(--header-h); }
  .page-body { padding: 16px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}