.opp-page { display: grid; gap: 1.25rem; }
.opp-hero, .opp-panel, .opp-rail { background: var(--surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.opp-hero { display:grid; grid-template-columns: 1.5fr 1fr; gap:1.25rem; padding:1.5rem; }
.opp-eyebrow, .opp-rail__label, .opp-inspector__label { font: 600 var(--text-xs)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.opp-hero h1 { margin:.2rem 0 .5rem; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; }
.opp-hero__desc { margin:0; color: var(--color-text-muted); max-width: 70ch; }
.opp-hero__lineage { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1rem; }
.opp-lineage-node { padding:.42rem .7rem; border-radius:999px; background: var(--surface-2); border:1px solid var(--color-border); font-size: var(--text-xs); }
.opp-lineage-node--active { color: var(--color-accent); border-color: var(--color-border-gold); box-shadow: var(--shadow-gold); }
.opp-lineage-arrow { color: var(--color-text-dim); }
.opp-hero__right { display:grid; gap:.9rem; align-content:start; }
.opp-kpis { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.75rem; }
.opp-kpi { background: var(--surface-2); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding:.85rem 1rem; }
.opp-kpi__label { display:block; color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; }
.opp-kpi__value { display:block; margin-top:.25rem; font-size: 1.35rem; font-weight: 600; }
.opp-kpi__meta { display:block; margin-top:.2rem; color: var(--color-text-dim); font-size: var(--text-xs); }
.opp-hero__actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.opp-banner { padding: .9rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--surface-2); }
.opp-banner[data-tone="danger"] { border-color: rgba(248,113,113,.45); color:#fecaca; }
.opp-banner[data-tone="success"] { border-color: rgba(74,222,128,.45); color:#bbf7d0; }
.opp-banner[data-tone="info"] { border-color: rgba(96,165,250,.45); color:#bfdbfe; }
.opp-workspace { display:grid; grid-template-columns: 300px minmax(0,1fr) 380px; gap:1rem; align-items:start; }
.opp-rail, .opp-panel { padding: 1rem; }
.opp-rail { display:grid; gap:1rem; position: sticky; top: 1rem; }
.opp-rail__section { display:grid; gap:.65rem; }
.opp-rail__section--guide { border-top: 1px solid var(--color-border); padding-top: .9rem; }
.opp-input, .opp-textarea { width:100%; }
.opp-textarea { min-height: 7rem; resize: vertical; }
.opp-range-label, .opp-hint, .opp-rail__meta, .opp-list-summary, .opp-inspector__status { color: var(--color-text-muted); font-size: var(--text-sm); }
.opp-rail__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.opp-guide { margin: 0; padding-left: 1rem; display:grid; gap:.4rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.opp-view-switch, .opp-segments { display:inline-flex; padding:.25rem; border:1px solid var(--color-border); border-radius:999px; background: var(--surface-2); gap:.25rem; }
.opp-view-switch__btn, .opp-segment { border:0; background: transparent; color: var(--color-text-muted); border-radius:999px; padding:.5rem .85rem; font-weight:600; cursor:pointer; }
.opp-view-switch__btn.is-active, .opp-segment.is-active { background: rgba(212,175,55,.15); color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-border-gold); }
.opp-panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.opp-list, .opp-rule-board { display:grid; gap:.75rem; }
.opp-rule-board[hidden], .opp-list[hidden] { display:none !important; }
.opp-card, .opp-rule-card { border:1px solid var(--color-border); background: var(--surface-2); border-radius: var(--radius-lg); padding: .95rem 1rem; display:grid; gap:.55rem; cursor:pointer; transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
.opp-card:hover, .opp-rule-card:hover { transform: translateY(-1px); border-color: var(--color-border-gold); }
.opp-card.is-active, .opp-rule-card.is-active { border-color: var(--color-border-gold); box-shadow: var(--shadow-gold); }
.opp-card__top, .opp-card__bottom, .opp-rule-card__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.opp-card__symbol, .opp-rule-card__title { font-weight:700; letter-spacing:.02em; }
.opp-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .55rem; border-radius:999px; border:1px solid var(--color-border); background: rgba(255,255,255,.03); font-size: var(--text-xs); color: var(--color-text-muted); }
.opp-score { font-weight:600; color: var(--color-accent); }
.opp-rule-list, .opp-rule-card__stats, .opp-rule-card__symbols, .opp-detail__actions { display:flex; gap:.45rem; flex-wrap:wrap; }
.opp-empty, .opp-empty-detail { border:1px dashed var(--color-border); border-radius: var(--radius-lg); padding:1rem; text-align:center; color: var(--color-text-muted); background: rgba(255,255,255,.015); }
.opp-detail { display:grid; gap:1rem; }
.opp-detail__hero { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.opp-detail__symbol { font-size: 1.35rem; font-weight: 700; }
.opp-detail__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.opp-detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.75rem; }
.opp-stat { border:1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-2); padding:.8rem .9rem; }
.opp-stat__label { display:block; color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; }
.opp-stat__value { display:block; margin-top:.25rem; font-weight:600; }
.opp-trigger { border:1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-2); padding:.85rem .9rem; display:grid; gap:.35rem; }
.opp-trigger__title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-weight:600; }
.opp-trigger__condition { font-family: var(--font-mono); font-size: .82rem; color: var(--color-text-dim); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 1180px) { .opp-workspace { grid-template-columns: 280px minmax(0,1fr); } .opp-panel--inspector { grid-column: 1 / -1; } }
@media (max-width: 860px) { .opp-hero, .opp-workspace { grid-template-columns: 1fr; } .opp-rail { position: static; } .opp-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .opp-kpis, .opp-detail-grid { grid-template-columns: 1fr; } .opp-card__top, .opp-card__bottom, .opp-detail__hero, .opp-rule-card__head { flex-direction: column; align-items:flex-start; } }