/* ───────────────────────────────────────────────────────────────────────── jitot-terminal — self-contained styling (dark default + light theme). No external CSS dependencies; theming is driven by CSS variables on . Design language mirrors the Adjie Brotot tools shared system: global tooltips, currency inputs (prefix/suffix + thousands grouping), tidy tables, chip-tab bars with their own header, and a mobile-first responsive grid. ───────────────────────────────────────────────────────────────────────── */ :root { --accent: #3b82f6; --accent2: #22c55e; --danger: #ef4444; --warn: #f59e0b; --gold: #f59e0b; --radius-sm:7px; --radius-md:10px; --radius-lg:14px; --transition-fast:.15s; --motion-fast:.15s; } body.dark { --bg:#0b1120; --panel:#11182b; --panel2:#161f36; --panel-raised:#1b2540; --card:#0f1728; --text:#e6edf7; --muted:#8aa0bf; --border:#243049; --input-bg:#0c1424; --accent-strong:#93c5fd; --chart-grid:#1e2a44; --chart-text:#8aa0bf; --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 8px 28px rgba(0,0,0,.5); } body.light { --bg:#f4f6fb; --panel:#ffffff; --panel2:#f0f3fa; --panel-raised:#ffffff; --card:#ffffff; --text:#1f2937; --muted:#64748b; --border:#e2e8f0; --input-bg:#ffffff; --accent-strong:#1d4ed8; --chart-grid:#e8edf5; --chart-text:#64748b; --shadow:0 1px 3px rgba(20,30,60,.08); --shadow-lg:0 10px 30px rgba(20,30,60,.16); } * { box-sizing:border-box; } html,body { margin:0; padding:0; } body { font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-text-size-adjust:100%; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } h1,h2,h3 { margin:0; font-weight:700; } .container { max-width:1500px; margin:0 auto; padding:16px; } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:14px; flex-wrap:wrap; } .header h1 { font-size:1.3rem; display:flex; align-items:center; gap:.45em; } .header .logo { width:1.2em; height:1.2em; } .header p { margin:2px 0 0; color:var(--muted); font-size:.82rem; max-width:62ch; } .header-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .mode-badge { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; } .mode-badge.local { background:rgba(34,197,94,.14); color:var(--accent2); border-color:rgba(34,197,94,.4); } .mode-badge.server { background:rgba(59,130,246,.14); color:var(--accent); border-color:rgba(59,130,246,.4); } /* ── Buttons ────────────────────────────────────────────────────────────── */ button { font-family:inherit; cursor:pointer; } .btn { border:1px solid var(--border); background:var(--panel2); color:var(--text); padding:8px 14px; border-radius:9px; font-size:.85rem; font-weight:600; transition:.12s; display:inline-flex; align-items:center; justify-content:center; gap:6px; } .btn:hover { border-color:var(--accent); } .btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); } .btn-primary:hover { filter:brightness(1.08); } .btn-accent2 { background:var(--accent2); color:#06281a; border-color:var(--accent2); } .btn-danger { background:transparent; color:var(--danger); border-color:var(--border); } .btn-danger:hover { border-color:var(--danger); } .btn-sm { padding:5px 10px; font-size:.78rem; } /* split button: bare main action + caret that reveals a destination menu */ .split { position:relative; display:inline-flex; } .split .split-main { border-top-right-radius:0; border-bottom-right-radius:0; } .split .split-caret { border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:rgba(255,255,255,.25); padding-left:7px; padding-right:7px; font-size:.7rem; } .btn.split-caret:not(.btn-primary) { border-left-color:var(--border); } .split-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; white-space:nowrap; display:none; flex-direction:column; gap:2px; padding:4px; z-index:40; background:var(--panel2); border:1px solid var(--border); border-radius:9px; box-shadow:0 10px 26px rgba(0,0,0,.32); } .split.open .split-menu { display:flex; } .split-item { text-align:left; background:transparent; border:none; color:var(--text); padding:7px 10px; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; } .split-item:hover { background:var(--accent); color:#fff; } .btn:disabled, .btn.is-disabled { opacity:.5; cursor:not-allowed; } .btn-primary:disabled { background:var(--muted); border-color:var(--muted); } /* ── Top-level tabs ─────────────────────────────────────────────────────── */ .tabbar { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; } .tabbar .tab { border:1px solid var(--border); background:var(--panel); color:var(--muted); padding:10px 20px; border-radius:11px; font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:8px; } .tabbar .tab.active { background:var(--accent); color:#fff; border-color:var(--accent); } .tabbar .tab svg { width:18px; height:18px; } .tab-panel { display:none; } .tab-panel.active { display:block; } .tabbar .tab .step { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:.72rem; font-weight:800; background:var(--panel2); color:var(--muted); border:1px solid var(--border); } .tabbar .tab.active .step { background:rgba(255,255,255,.22); color:#fff; border-color:transparent; } /* Presets dropdown: sits in the tab bar before "1. Data". */ .preset-dd { display:flex; align-items:center; } .preset-dd select { padding:9px 12px; font-size:.86rem; font-weight:700; width:auto; max-width:230px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:11px; cursor:pointer; } .preset-dd select:disabled { opacity:.55; cursor:default; } /* Global simulation window control, pinned to the right of the tab bar. */ .tab-dates { display:flex; align-items:center; gap:6px; margin-left:auto; background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:5px 10px; } .tab-dates .td-lab { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .tab-dates .td-sep { color:var(--muted); } .tab-dates input[type="date"] { padding:5px 7px; font-size:.82rem; width:auto; } /* ── Cards / layout ─────────────────────────────────────────────────────── */ .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; margin-bottom:14px; } .card h2 { font-size:1.05rem; } .card .sub { color:var(--muted); font-size:.82rem; margin-top:2px; } .grid-2 { display:grid; grid-template-columns:minmax(360px,420px) 1fr; gap:14px; align-items:start; } /* single-column settings stack (capped width so cards don't stretch) */ .settings-col { display:flex; flex-direction:column; gap:14px; max-width:760px; } /* list/selector on the left (narrow), richer editor on the right (wide) */ .grid-side { grid-template-columns:minmax(220px,290px) 1fr; } .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .section-label { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px; display:flex; align-items:center; gap:6px; } .section-label:first-child { margin-top:0; } .rule-wait-toggle { display:flex; align-items:center; gap:7px; margin:0 0 10px; font-size:.82rem; color:var(--text); cursor:pointer; user-select:none; } .rule-wait-toggle input { cursor:pointer; } /* ── Inputs ─────────────────────────────────────────────────────────────── */ label { font-size:.82rem; color:var(--muted); } .field { margin-bottom:12px; } .field > .lab { font-size:.8rem; color:var(--muted); margin-bottom:4px; display:flex; align-items:center; gap:6px; } input[type=text], input[type=number], input[type=date], textarea, select { width:100%; background:var(--input-bg); color:var(--text); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:9px 11px; font-family:inherit; font-size:.9rem; font-variant-numeric:tabular-nums; transition:border-color var(--transition-fast); outline:none; } input:focus, textarea:focus, select:focus { border-color:var(--accent); background:var(--panel); } select { cursor:pointer; } textarea { resize:vertical; } input[type=color] { width:36px; height:36px; padding:2px; border-radius:9px; border:1px solid var(--border); background:var(--input-bg); cursor:pointer; flex-shrink:0; } /* ── Access gate ────────────────────────────────────────────────────────── */ .auth-gate { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); background-image:radial-gradient(circle at 25% 15%, rgba(59,130,246,.16), transparent 42%), radial-gradient(circle at 80% 85%, rgba(34,197,94,.13), transparent 45%); } .auth-gate[hidden] { display:none; } .auth-card { width:min(400px, 100%); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px 26px; display:flex; flex-direction:column; gap:12px; } .auth-logo { display:flex; align-items:center; gap:.5em; } .auth-logo h1 { font-size:1.25rem; } .auth-logo .logo { width:26px; height:26px; } .auth-sub { margin:0 0 4px; color:var(--muted); font-size:.86rem; } .auth-card label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .auth-card input[type=password] { width:100%; background:var(--input-bg); color:var(--text); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; font-family:inherit; font-size:.95rem; outline:none; transition:border-color var(--transition-fast); } .auth-card input[type=password]:focus { border-color:var(--accent); background:var(--panel); } .auth-card .btn { margin-top:6px; padding:11px; font-size:.9rem; } .auth-error { color:var(--danger); font-size:.82rem; font-weight:600; } .auth-error[hidden] { display:none; } .row { display:flex; gap:8px; } .row > * { flex:1; min-width:0; } .inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .lookback-row { display:grid; grid-template-columns:minmax(90px,140px) minmax(130px,180px); gap:8px; align-items:center; } .lookback-row input, .lookback-row select { width:100%; } @media (max-width:420px){ .lookback-row { grid-template-columns:1fr; } } .comp-controls { gap:10px; row-gap:8px; justify-content:flex-end; } .comp-actions { gap:6px; padding-left:10px; border-left:1px solid var(--border); } @media (max-width:560px){ .comp-actions { padding-left:0; border-left:none; } } @media (max-width:600px){ .comp-controls { justify-content:flex-start; } } /* Currency / suffixed inputs: thousands-grouped money fields with an inline prefix (e.g. $) and/or suffix (e.g. %). Pure CSS positioning; the live grouping + parsing is wired in app.js. */ .currency-wrap { position:relative; } .currency-wrap .prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700; font-size:.86rem; pointer-events:none; } .currency-wrap .suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700; font-size:.86rem; pointer-events:none; } .currency-wrap .currency-input { width:100%; } .currency-wrap .prefix ~ .currency-input { padding-left:30px; } .currency-wrap .currency-input.has-suffix { padding-right:40px; } /* radio cards */ .radio-group { display:flex; flex-direction:column; gap:7px; } .radio-opt { display:flex; gap:9px; align-items:flex-start; padding:10px 12px; cursor:pointer; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--input-bg); transition:border-color var(--transition-fast); } .radio-opt:hover { border-color:var(--accent2); } .radio-opt.selected { border-color:var(--accent); background:rgba(59,130,246,.08); } .radio-opt input { margin-top:3px; flex-shrink:0; width:auto; accent-color:var(--accent); } .radio-opt .t { font-size:.84rem; } .radio-opt .t strong { display:block; color:var(--text); } .radio-opt .t span { color:var(--muted); font-size:.78rem; } /* toggle switch */ .toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; } .toggle input { display:none; } .toggle .track { width:38px; height:21px; border-radius:999px; background:var(--border); position:relative; transition:.15s; flex-shrink:0; } .toggle .knob { position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:.15s; } .toggle input:checked + .track { background:var(--accent); } .toggle input:checked + .track .knob { left:19px; } /* segmented control */ .seg { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--input-bg); } .seg button { border:none; background:transparent; color:var(--muted); padding:7px 13px; font-size:.8rem; font-weight:600; } .seg button.active { background:var(--accent); color:#fff; } /* ── Status bars / chips / spinner ──────────────────────────────────────── */ .status { font-size:.8rem; padding:7px 11px; border-radius:8px; margin-top:8px; display:none; } .status.show { display:block; } .status.loading { background:rgba(59,130,246,.1); color:var(--accent); } .status.ok { background:rgba(34,197,94,.12); color:var(--accent2); } .status.error { background:rgba(239,68,68,.12); color:var(--danger); } .status.warn { background:rgba(245,158,11,.14); color:var(--warn); } .spinner { display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; margin-right:6px; vertical-align:-1px; } @keyframes spin { to { transform:rotate(360deg); } } .rate-info { font-size:.78rem; color:var(--muted); margin-top:6px; } .rate-info.low { color:var(--warn); } .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .chip { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:.8rem; font-weight:600; } .chip .x { cursor:pointer; color:var(--muted); font-weight:700; } .chip .x:hover { color:var(--danger); } /* ── Global tooltip (anchored bubble + trigger icon) ────────────────────── */ #globalTooltip { position:fixed; z-index:99999; pointer-events:none; max-width:280px; background:var(--panel-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:9px 12px; font-size:.8rem; line-height:1.5; color:var(--text); box-shadow:var(--shadow-lg); opacity:0; transition:opacity var(--motion-fast); display:none; } #globalTooltip strong { color:var(--accent-strong); font-weight:700; } #globalTooltip.visible { display:block; opacity:1; } #globalTooltip .tt-arrow { position:absolute; bottom:-7px; width:12px; height:7px; overflow:hidden; transform:translateX(-50%); } #globalTooltip .tt-arrow::before { content:''; display:block; width:10px; height:10px; background:var(--panel-raised); border:1px solid var(--border); transform:rotate(45deg) translate(-3px,-3px); } #globalTooltip.flip-below .tt-arrow { bottom:auto; top:-7px; } #globalTooltip.flip-below .tt-arrow::before { transform:rotate(45deg) translate(3px,3px); } .tip-icon, .help { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--input-bg); border:1px solid var(--border); color:var(--muted); font-size:.68rem; font-weight:800; cursor:help; flex-shrink:0; line-height:1; font-style:normal; } .tip-icon:hover, .help:hover { border-color:var(--accent); color:var(--accent); } .tip-icon.warn { background:rgba(245,158,11,.18); color:var(--gold); border-color:rgba(245,158,11,.3); } .tip-dotted { border-bottom:1px dotted var(--border); cursor:help; } /* ── Tables ─────────────────────────────────────────────────────────────── */ .table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-md); max-height:480px; -webkit-overflow-scrolling:touch; } table { width:100%; border-collapse:collapse; font-size:.83rem; min-width:max-content; } th, td { padding:9px 13px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); } th:first-child, td:first-child { text-align:left; } thead th { position:sticky; top:0; background:var(--panel2); color:var(--muted); font-weight:700; z-index:2; border-bottom:none; box-shadow:inset 0 -1px 0 var(--border); } tbody tr:nth-child(even) { background:rgba(127,127,127,.035); } tbody tr:hover { background:var(--panel2); } tbody tr:last-child td { border-bottom:none; } .t-actions { display:flex; gap:4px; justify-content:flex-end; } .tbl-cap { margin-top:8px; } /* ── Chip-tab bar (capital / portfolios / strategies) with its own header ── */ .chip-bar { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--input-bg); padding:11px 12px; margin-bottom:14px; } .chip-bar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } .chip-bar-head .cb-title { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:flex; align-items:center; gap:6px; } .chip-bar-head .cb-actions { display:flex; gap:5px; flex-shrink:0; } .chip-bar-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .chip-tabs { display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; } .chip-tab { display:flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--border); border-radius:9px; background:var(--panel); cursor:pointer; font-size:.83rem; font-weight:600; color:var(--muted); max-width:190px; user-select:none; transition:all var(--transition-fast); } .chip-tab:hover { border-color:var(--accent); color:var(--text); } .chip-tab.active { border-color:var(--accent); background:rgba(59,130,246,.12); color:var(--text); } .chip-tab.bench.active { border-color:var(--gold); background:rgba(245,158,11,.12); } .chip-tab .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip-tab .rename { width:120px; padding:2px 5px; font-size:.82rem; border-radius:5px; } .chip-add { width:32px; height:32px; border-radius:9px; border:1px dashed var(--accent); background:transparent; color:var(--accent); font-size:1.15rem; line-height:1; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; } .chip-add:hover { background:var(--accent); color:#fff; border-style:solid; } .chip-add.bench { border-color:var(--gold); color:var(--gold); width:auto; padding:0 11px; font-size:.78rem; font-weight:700; gap:4px; } .chip-add.bench:hover { background:var(--gold); color:#06281a; } /* ── Asset rows (portfolio assets) ──────────────────────────────────────── */ .asset-row { display:flex; align-items:center; gap:8px; padding:7px 9px; margin-bottom:7px; border:1px solid var(--border); border-radius:9px; background:var(--input-bg); } .asset-row .grip { cursor:grab; color:var(--muted); flex-shrink:0; touch-action:none; } .asset-row input[type=color] { width:28px; height:28px; } .asset-row .anm { flex:1; min-width:0; padding:6px 8px; font-size:.84rem; } .asset-row .badge { font-size:.68rem; padding:2px 7px; border-radius:6px; background:var(--card); border:1px solid var(--border); color:var(--muted); flex-shrink:0; } .asset-row.dragging { opacity:.45; } .asset-row.drag-over { border-color:var(--accent); box-shadow:inset 0 2px 0 var(--accent); } /* weights */ .weights { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px; } .weight-pie { flex:0 0 150px; width:150px; height:150px; display:flex; justify-content:center; } .weight-table { flex:1 1 auto; min-width:200px; } .weight-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); } .weight-row .nm { flex:1; min-width:0; display:flex; align-items:center; gap:7px; font-size:.83rem; overflow:hidden; } .weight-row .nm span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .weight-row .wt-in { display:flex; align-items:center; gap:4px; flex-shrink:0; } .weight-row input { width:66px; text-align:right; } .weight-row.total { font-weight:800; border-bottom:none; padding-top:8px; } .weight-row.total.bad { color:var(--danger); } /* ── Rule-Based Triggers · per-asset trigger editor + preview ────────────── */ .rule-asset-list { display:flex; flex-direction:column; gap:10px; } .rule-asset { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel2); padding:10px 12px; } .rule-asset-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .rule-asset-head .nm { display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700; min-width:0; } .rule-asset-head .nm .dot { width:11px; height:11px; border-radius:3px; flex-shrink:0; } .rule-asset-head .nm span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rule-sum { font-size:.72rem; color:var(--muted); background:var(--input-bg); border:1px solid var(--border); border-radius:999px; padding:2px 9px; white-space:nowrap; flex-shrink:0; } .rule-asset-cfg { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 10px; } .rule-fld { display:flex; flex-direction:column; gap:4px; } .rule-fld .lab { font-size:.72rem; color:var(--muted); } .rule-prev-toggle { margin-top:10px; width:100%; display:flex; align-items:center; gap:7px; justify-content:flex-start; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text); padding:7px 10px; font-size:.78rem; font-weight:600; cursor:pointer; } .rule-prev-toggle:hover:not(:disabled) { border-color:var(--accent); } .rule-prev-toggle:disabled { color:var(--muted); cursor:not-allowed; opacity:.7; } .rule-prev-toggle.open { border-bottom-left-radius:0; border-bottom-right-radius:0; } .rule-prev-toggle .rpt-caret { font-size:.7rem; color:var(--muted); } .rule-prev { border:1px solid var(--border); border-top:none; border-bottom-left-radius:var(--radius-md); border-bottom-right-radius:var(--radius-md); padding:10px; background:var(--card); } .rule-prev-note { font-size:.74rem; color:var(--muted); margin-bottom:6px; } .rule-prev-canvas { position:relative; height:230px; } .rule-prev-canvas.osc { height:128px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); } .rule-prev-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; } .pl-item { display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--muted); } .pl-candle { width:9px; height:13px; border-radius:2px; background:linear-gradient(180deg,#22c55e 0 50%,#ef4444 50% 100%); flex-shrink:0; } .pl-line { width:16px; height:2px; border-radius:2px; flex-shrink:0; } .pl-line.dash { background:none !important; border-top:2px dashed currentColor; height:0; } .pl-mark { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #22c55e; flex-shrink:0; } .cl-swatch { width:16px; height:11px; border-radius:3px; flex-shrink:0; } .cl-swatch.cl-hi { background:rgba(59,130,246,0.30); border:1px solid rgba(59,130,246,0.55); } .cl-swatch.cl-lo { background:rgba(239,68,68,0.30); border:1px solid rgba(239,68,68,0.55); } /* ── Charts / summary ───────────────────────────────────────────────────── */ .canvas-wrap { position:relative; height:340px; } .legend { display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:8px; } .legend-item { display:flex; align-items:center; gap:6px; font-size:.8rem; cursor:pointer; color:var(--text); } .legend-item.hidden { opacity:.4; text-decoration:line-through; } .legend-item .ldot { width:11px; height:11px; border-radius:3px; flex-shrink:0; } .hover-box { margin-top:8px; font-size:.78rem; color:var(--muted); min-height:1.2em; } .summary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; } .tile { border:1px solid var(--border); border-left-width:3px; border-radius:var(--radius-md); padding:14px; background:var(--input-bg); } .tile .lab { font-size:.82rem; color:var(--muted); font-weight:600; } .tile .val { font-size:1.5rem; font-weight:800; margin-top:4px; } .tile .meta { font-size:.74rem; color:var(--muted); margin-top:3px; word-break:break-word; } .warning { display:none; background:rgba(239,68,68,.1); color:var(--danger); border:1px solid rgba(239,68,68,.3); border-radius:9px; padding:10px 13px; font-size:.83rem; margin-bottom:12px; } .warning.show { display:block; } .quick-start { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .qs-btn { border:1px solid var(--border); background:var(--input-bg); color:var(--text); padding:6px 11px; border-radius:8px; font-size:.78rem; font-weight:600; } .qs-btn.active { border-color:var(--accent); background:rgba(59,130,246,.1); color:var(--accent); } footer { color:var(--muted); font-size:.78rem; padding:20px 4px; text-align:center; } /* ── Empty states / pills / advanced summary / code ─────────────────────── */ .empty { text-align:center; color:var(--muted); padding:20px; } .empty-inline { color:var(--muted); font-size:.82rem; padding:8px 0; } .pill { display:inline-block; font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:999px; vertical-align:1px; } .pill.ok { background:rgba(34,197,94,.16); color:var(--accent2); } /* Data-location chips in the Local Store */ .loc { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid var(--border); text-transform:capitalize; } .loc.repo { background:rgba(168,85,247,.14); color:#a855f7; border-color:rgba(168,85,247,.4); } .loc.server { background:rgba(59,130,246,.14); color:var(--accent); border-color:rgba(59,130,246,.4); } .loc.local { background:rgba(34,197,94,.14); color:var(--accent2); border-color:rgba(34,197,94,.4); } /* Repo catalogue rows act as load buttons */ #repoTable tbody tr { cursor:pointer; transition:background var(--transition-fast); } #repoTable tbody tr:hover td { background:rgba(59,130,246,.08); } #repoTable tr.is-loaded td { opacity:.55; } .adv-summary { font-size:.8rem; color:var(--muted); cursor:pointer; font-weight:600; } .adv-summary:hover { color:var(--accent); } code { background:var(--panel2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; font-size:.85em; } /* ── Benchmark toggle ───────────────────────────────────────────────────── */ .bench-toggle { gap:10px; } .bench-toggle .bench-lab { font-size:.86rem; font-weight:600; color:var(--text); } /* ── Mechanism diagram (TRIGGER → ACTION · PARAMETER) ───────────────────── */ .rule-view { display:flex; flex-direction:column; gap:10px; } .rule { display:flex; gap:12px; align-items:stretch; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--input-bg); padding:12px 14px; } .rule-no { display:flex; align-items:center; justify-content:center; min-width:24px; height:24px; align-self:flex-start; border-radius:50%; background:var(--accent); color:#fff; font-size:.76rem; font-weight:800; flex-shrink:0; } .rule-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .rule-flow { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } .rule-cell { display:flex; flex-direction:column; gap:4px; min-width:0; } .rule-k { font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:800; } .rule-v { font-size:.82rem; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--border); white-space:normal; } .rule-v.trig { background:rgba(59,130,246,.12); color:var(--accent); border-color:rgba(59,130,246,.3); } .rule-v.act { background:rgba(34,197,94,.12); color:var(--accent2); border-color:rgba(34,197,94,.3); } .rule-v.par { background:rgba(245,158,11,.12); color:var(--warn); border-color:rgba(245,158,11,.3); } .rule-arrow { color:var(--muted); font-weight:800; align-self:center; padding-bottom:7px; font-size:1rem; } .rule-param { display:flex; flex-direction:column; gap:4px; } /* Summary flowchart (Mermaid) */ .mermaid-view { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--input-bg); padding:14px; overflow-x:auto; min-height:60px; } .mermaid-view svg { max-width:100%; height:auto; display:block; margin:0 auto; overflow:visible; } .mermaid-view .mmd-fallback { display:flex; flex-direction:column; gap:8px; } /* Edge branch labels (Yes / No on decision diamonds): force a readable chip — body-coloured text on a panel-coloured, rounded background regardless of theme. */ .mermaid-view .edgeLabel, .mermaid-view .edgeLabel p, .mermaid-view .edgeLabel span { color:var(--text) !important; fill:var(--text) !important; background:transparent !important; } .mermaid-view .edgeLabel .label, .mermaid-view .edgeLabel foreignObject div { background-color:var(--panel2) !important; color:var(--text) !important; padding:1px 6px; border-radius:6px; } .mermaid-view .edgeLabel rect, .mermaid-view .edgeLabels rect { fill:var(--panel2) !important; opacity:.92; } /* Give the scenario parameters room to breathe below the strategy tree */ #scnParams { margin-top:22px; } /* Scenario editor — each concern in its own bounded section */ .scn-section { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel2); padding:14px 16px; margin-top:14px; } .scn-sec-title { font-size:.92rem; font-weight:800; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:6px; } /* The section already provides the boundary, so the inner flowchart goes frameless */ .scn-section .mermaid-view { border:none; background:transparent; padding:12px; min-height:40px; } /* ── Strategy library ───────────────────────────────────────────────────── */ .lib-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); } .lib-item:last-child { border-bottom:none; } .lib-item .ico { width:26px; height:26px; border-radius:7px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(59,130,246,.12); color:var(--accent); font-weight:800; } .lib-item .meta { font-size:.76rem; color:var(--muted); margin-top:2px; } /* ── Checkbox (shared) ──────────────────────────────────────────────────── */ .mcheck { display:inline-flex; cursor:pointer; flex-shrink:0; } .mcheck input { display:none; } .mcheck span { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border); background:var(--input-bg); position:relative; transition:.12s; display:inline-block; } .mcheck input:checked + span { background:var(--accent); border-color:var(--accent); } .mcheck input:checked + span::after { content:'✓'; color:#fff; font-size:.78rem; font-weight:800; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } /* ── List / selector (left pane of Portfolios & Scenarios) ──────────────── */ .list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .list-head .cb-title { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:flex; align-items:center; gap:6px; } .list-head .cb-actions { display:flex; gap:5px; flex-shrink:0; } .sel-list { display:flex; flex-direction:column; gap:6px; } .sel-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--input-bg); cursor:pointer; transition:.12s; } .sel-item:hover { border-color:var(--accent); } .sel-item.active { border-color:var(--accent); background:rgba(59,130,246,.1); } .sel-item .nm { flex:1; min-width:0; font-size:.88rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sel-item .sel-meta { font-size:.72rem; color:var(--muted); flex-shrink:0; } .sel-item .rename { width:100%; padding:3px 6px; font-size:.85rem; border-radius:5px; } .sdot { width:11px; height:11px; border-radius:3px; flex-shrink:0; } /* ── Strategy directory tree ────────────────────────────────────────────── */ .strat-tree { display:flex; flex-direction:column; gap:3px; border:1px solid var(--border); border-radius:var(--radius-md); padding:8px; background:var(--input-bg); } .tree-folder { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:5px 6px; padding-left:calc(6px + var(--d) * 16px); display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; border-radius:7px; transition:.12s; } .tree-folder:hover { background:rgba(59,130,246,.06); color:var(--text); } .tree-folder .tf-ico { font-size:.7rem; opacity:.7; width:.8rem; display:inline-block; } .tree-children { display:flex; flex-direction:column; gap:3px; } .tree-leaf { display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600; color:var(--text); padding:7px 9px; padding-left:calc(9px + var(--d) * 16px); border-radius:7px; cursor:pointer; transition:.12s; } .tree-leaf:hover { background:rgba(59,130,246,.08); } .tree-leaf .tl-mark { width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; transition:.12s; } .tree-leaf.active { background:rgba(59,130,246,.12); } .tree-leaf.active .tl-mark { border-color:var(--accent); background:radial-gradient(circle at center, var(--accent) 0 4px, transparent 5px); } /* ── Simulate run list ──────────────────────────────────────────────────── */ .run-list { display:flex; flex-direction:column; gap:7px; } .run-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--input-bg); transition:.12s; } .run-item.on { border-color:var(--accent); background:rgba(59,130,246,.07); } .run-item .run-nm { font-size:.88rem; font-weight:600; color:var(--text); } .run-item .run-meta { margin-left:auto; font-size:.74rem; color:var(--muted); text-align:right; } .combo-name { display:flex; align-items:center; gap:7px; } .combo-name .dot { width:11px; height:11px; border-radius:3px; flex-shrink:0; } #metricsTable td strong { color:var(--text); } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:1100px) { .grid-2, .grid-side { grid-template-columns:1fr; } .data-grid { grid-template-columns:1fr !important; } .col-resizer { display:none; } } @media (max-width:900px) { .container { padding:12px; } .header { padding:12px 14px; } .header h1 { font-size:1.15rem; } .canvas-wrap { height:300px; } .weight-pie { flex-basis:120px; width:120px; height:120px; } } @media (max-width:600px) { body { font-size:13.5px; } .container { padding:10px; } .header { gap:10px; } .header p { display:none; } .header-right { width:100%; } .header-right .btn { flex:1; } /* Stage tabs scroll horizontally instead of wrapping into a tall stack */ .tabbar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:5px; padding-bottom:2px; } .tabbar::-webkit-scrollbar { height:0; } .tabbar .tab { padding:9px 13px; font-size:.84rem; white-space:nowrap; flex-shrink:0; } /* The window control scrolls inline with the tabs on small screens. */ .preset-dd { flex-shrink:0; } .preset-dd select { max-width:150px; font-size:.8rem; } .tab-dates { flex-shrink:0; padding:5px 8px; } .tab-dates input[type="date"] { font-size:.78rem; } .card { padding:14px; border-radius:12px; } .section-title { gap:8px; } .row { flex-direction:column; } .canvas-wrap { height:260px; } .summary-grid { grid-template-columns:1fr; } .tile .val { font-size:1.3rem; } .radio-opt { padding:9px 10px; } .rule { padding:10px 11px; gap:9px; } .rule-flow { gap:7px; } .rule-arrow { padding-bottom:0; } .chip-tab { max-width:none; flex:1 1 auto; justify-content:center; } .table-wrap { font-size:.78rem; max-height:60vh; } th, td { padding:7px 9px; } .scn-item { flex-wrap:wrap; } .scn-item .scn-nm { flex-basis:100%; order:-1; } footer { font-size:.74rem; } } /* ════════════ Data tab: download pane + directory tree + chart modal ════════════ */ .chk-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; } .chk { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text); cursor:pointer; } .chk input { width:auto; accent-color:var(--accent); } /* provider / storage badges */ .loc { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:999px; border:1px solid var(--border); background:var(--panel2); color:var(--muted); text-transform:lowercase; letter-spacing:.02em; white-space:nowrap; } .loc.yf { color:var(--accent2); border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.12); } .loc.stooq { color:var(--accent); border-color:rgba(59,130,246,.4); background:rgba(59,130,246,.12); } .loc.tv { color:#a855f7; border-color:rgba(168,85,247,.4); background:rgba(168,85,247,.12); } .loc.tf { color:#f59e0b; border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.12); text-transform:none; } .loc.ccy { color:#06b6d4; border-color:rgba(6,182,212,.4); background:rgba(6,182,212,.12); text-transform:none; } .loc.preset { color:#ec4899; border-color:rgba(236,72,153,.4); background:rgba(236,72,153,.12); text-transform:none; } .loc.other { color:var(--muted); } .loc.storage { color:var(--muted); } .ind-dd { font-size:.78rem; padding:3px 6px; max-width:240px; } /* upload queue */ .up-queue { display:flex; flex-direction:column; gap:8px; margin-top:6px; } .up-row { border:1px solid var(--border); border-radius:var(--radius-md); padding:8px 10px; background:var(--input-bg); } .up-row.err { border-color:rgba(239,68,68,.5); } .up-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .up-head strong { flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; } .up-head .sub { margin-left:auto; white-space:nowrap; font-size:.72rem; } .up-fields { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:flex-end; } .up-f { display:flex; flex-direction:column; gap:2px; font-size:.7rem; color:var(--muted); } .up-f span { font-weight:600; } .up-f input, .up-f select, .up-fields > select { font-size:.8rem; padding:3px 6px; } .up-inds { margin-top:8px; } .up-inds > summary { cursor:pointer; font-size:.76rem; color:var(--muted); user-select:none; } .up-ind-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:6px; max-height:180px; overflow:auto; padding:4px; border:1px solid var(--border); border-radius:8px; } .up-ind { display:flex; align-items:center; gap:5px; font-size:.74rem; } .up-ind input[type="text"] { flex:1; min-width:0; font-size:.74rem; padding:2px 5px; } .dir-legend { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; font-size:.74rem; } /* No inner scrollbar — pagination caps how many rows show, so the list grows with the card instead of scrolling. */ .dir-tree { border:1px solid var(--border); border-radius:var(--radius-md); padding:6px; background:var(--input-bg); } .dir-node { border-bottom:1px solid var(--border); } .dir-node:last-child { border-bottom:0; } /* Three tracks (name · date · actions) with equal side tracks so the date sits dead-centre regardless of how many action buttons a row has. */ .dir-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; padding:8px 6px; } .dir-name { display:flex; align-items:center; gap:7px; min-width:0; } .dir-name strong { white-space:nowrap; } .dir-meta { justify-self:center; text-align:center; white-space:nowrap; font-size:.74rem; } .t-acts { display:flex; gap:3px; flex-shrink:0; justify-self:end; } .icon-btn { background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:.95rem; line-height:1; padding:4px 6px; color:var(--text); } .icon-btn:hover { border-color:var(--accent); background:var(--panel2); } .icon-btn.danger:hover { border-color:var(--danger); } .dir-children { padding:0 6px 6px 22px; } .dir-child { display:flex; align-items:center; gap:8px; padding:4px 6px; border-left:2px solid var(--border); margin-left:4px; } .dir-child .dir-name { font-size:.8rem; color:var(--muted); } .dir-child .dir-name::before { content:"└ "; color:var(--border); } /* chart modal */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; } .modal-overlay[hidden] { display:none; } .modal-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); width:min(860px,96vw); padding:16px 18px; } .modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .modal-head h2 { margin:0; font-size:1.05rem; } .modal-body { height:380px; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-md); } .modal-body canvas { display:block; } .modal-head { gap:10px; } .modal-tools { display:flex; align-items:center; gap:8px; margin-left:auto; } .modal-tools .seg button { padding:5px 10px; font-size:.78rem; } .modal-tools #chartField { width:auto; padding:5px 8px; font-size:.8rem; } .modal-tools[hidden] { display:none; } /* ── Data tab: resizable panes ──────────────────────────────────────────── */ .data-grid { grid-template-columns:var(--data-left,minmax(220px,290px)) 8px 1fr; } .col-resizer { align-self:stretch; min-height:120px; cursor:col-resize; border-radius:5px; background:linear-gradient(var(--border),var(--border)) center/2px 60% no-repeat; position:relative; } .col-resizer:hover, .col-resizer.dragging { background:linear-gradient(var(--accent),var(--accent)) center/3px 90% no-repeat; } body.col-resizing { cursor:col-resize; user-select:none; } /* ── Collapsible Download / Upload sections ─────────────────────────────── */ .collapse-toggle { background:transparent; border:0; cursor:pointer; color:var(--muted); font-size:.9rem; line-height:1; padding:2px 4px; transition:transform var(--transition-fast); } .collapse-toggle:hover { color:var(--text); } .collapse-head.collapsed .collapse-toggle { transform:rotate(-90deg); } #dlBody, #upBody { overflow:hidden; } #dlBody.collapsed, #upBody.collapsed { display:none; } /* ── Upload drop zone ───────────────────────────────────────────────────── */ .drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--border); border-radius:var(--radius-md); background:var(--input-bg); padding:18px 14px; text-align:center; cursor:pointer; color:var(--muted); transition:border-color var(--transition-fast), background var(--transition-fast); } .drop-zone:hover, .drop-zone:focus-visible { border-color:var(--accent); background:var(--panel); outline:none; } .drop-zone.drag-over { border-color:var(--accent); background:rgba(59,130,246,.1); color:var(--text); } .drop-zone .dz-icon { font-size:1.4rem; } .drop-zone .dz-text { font-size:.82rem; } .drop-zone .dz-text strong { color:var(--accent); } /* ── Directory pagination ───────────────────────────────────────────────── */ .pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; font-size:.78rem; color:var(--muted); } .pager[hidden] { display:none; } .pager button { background:var(--input-bg); border:1px solid var(--border); border-radius:7px; cursor:pointer; color:var(--text); padding:3px 9px; font-size:.8rem; } .pager button:hover:not(:disabled) { border-color:var(--accent); } .pager button:disabled { opacity:.4; cursor:default; } .pager .pg-size { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .pager .pg-size select { background:var(--input-bg); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:3px 6px; font-size:.78rem; cursor:pointer; }