/* crypto.css — Crypto Analyzer additions on top of styles.css (copied from
   options-analyzer-web). Same tokens, same dark look. */

.sprite { display: none; }
.mock-banner { position: sticky; top: 0; z-index: 50; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #000; background: #ffcc00; padding: 4px 8px; }
.muted { color: var(--text3); font-weight: 500; font-size: 11px; }
.mono { font-family: var(--mono); }

.src.eng { background: rgba(48, 176, 199, 0.15); color: #30b0c7; }
.sr-eng-go { color: #30b0c7; }

/* Long / Short strip */
.pl-cell.pl-best { border-color: #333; }
.reason-box { margin: 0 0 12px; }

/* Cards in the detail view */
.card-like { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.card-like-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.card-like .kv { font-size: 12px; }
.comp-foot { font-size: 10px; color: var(--text3); margin-top: 6px; line-height: 1.4; overflow-wrap: anywhere; }

.eng-rule { font-size: 13px; color: var(--text); line-height: 1.45; }
.eng-rule.up { color: #34c759; }
.eng-rule.down { color: #ff3b30; }
.eng-live { font-size: 12px; color: var(--text2); margin-top: 8px; padding-top: 8px; border-top: 1px solid #1a1a1a; overflow-wrap: anywhere; }

/* Score breakdown per side */
details.components.card-like { padding: 8px 12px; margin-top: 0; border-top: 1px solid #1a1a1a; }
details.components summary { color: var(--text); font-weight: 600; }
.comp-row2 { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 3px; padding: 7px 0; }
.comp-row2 .comp-name { text-transform: none; }
.comp-bar { grid-column: 1 / -1; height: 3px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
.comp-fill { height: 100%; background: #48484a; }
.comp-fill.g-best { background: #34c759; }
.comp-fill.g-better { background: #30b0c7; }
.comp-fill.g-good { background: #ffcc00; }
.comp-detail { grid-column: 1 / -1; font-size: 11px; color: var(--text3); line-height: 1.4; overflow-wrap: anywhere; }

/* Multi-day trend */
.spark { display: block; width: 100%; height: 34px; margin: 2px 0 6px; }
.spark polyline { stroke: var(--text2); }
.spark.up polyline { stroke: #34c759; }
.spark.down polyline { stroke: #ff3b30; }
.hz-list { display: grid; gap: 5px; margin-top: 8px; }
.hz { display: grid; grid-template-columns: 30px 1fr 44px; align-items: center; gap: 8px; font-size: 11px; }
.hz-k { color: var(--text3); font-family: var(--mono); }
.hz-bar { height: 4px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
.hz-fill { height: 100%; background: #48484a; }
.hz-fill.up { background: #34c759; }
.hz-fill.down { background: #ff3b30; }
.hz-v { text-align: right; font-family: var(--mono); color: var(--text2); }
.hz-v.up { color: #34c759; }
.hz-v.down { color: #ff3b30; }

/* Engine / record tabs */
.journal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin-bottom: 12px; }
.scan-empty.compact { padding: 14px 8px; }
.dec-list { display: grid; gap: 4px; margin-bottom: 10px; }
.dec-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 12px; padding: 7px 10px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; }
.dec-row[data-open] { cursor: pointer; }
.dec-row[data-open]:active { background: #111; }
.dec-t { color: var(--text3); }
.dec-r { color: var(--text2); overflow-wrap: anywhere; line-height: 1.4; }
.dec-entered .dec-r { color: #34c759; }
.dec-exit .dec-r { color: var(--text); }
.pnl-inline.positive { color: #69f0ae; }
.pnl-inline.negative { color: #ff8a80; }
.pos-card .kv-list { margin-top: 6px; }

/* No horizontal scroll on narrow phones */
.app { overflow-x: hidden; }
.summary .meta { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.journal-stats .j-val { font-size: 15px; white-space: nowrap; }
.journal-stats .j-label { font-size: 9px; }