Spaces:
Sleeping
Sleeping
| /* ===================================================== | |
| Cricket AI Predictor — Main Stylesheet | |
| ===================================================== */ | |
| @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap'); | |
| /* ── Variables ─────────────────────────────────────── */ | |
| :root { | |
| --bg: #080c18; | |
| --bg2: #0d1220; | |
| --bg3: #111827; | |
| --card: rgba(255,255,255,0.04); | |
| --card2: rgba(255,255,255,0.07); | |
| --border: rgba(255,255,255,0.08); | |
| --border2: rgba(255,255,255,0.14); | |
| --red: #c0392b; | |
| --red2: #e74c3c; | |
| --red-dim: rgba(192,57,43,0.12); | |
| --gold: #f59e0b; | |
| --green: #10b981; | |
| --blue: #3b82f6; | |
| --t1: #f1f5f9; | |
| --t2: #94a3b8; | |
| --t3: #475569; | |
| --t4: #334155; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| } | |
| /* ── Reset & Base ──────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: var(--bg); | |
| color: var(--t1); | |
| min-height: 100vh; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| } | |
| h1, h2, h3, .oswald { font-family: 'Oswald', sans-serif; letter-spacing: 0.02em; } | |
| /* ── Scrollbar ─────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 5px; height: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } | |
| /* ── Navbar ────────────────────────────────────────── */ | |
| .navbar { | |
| position: sticky; top: 0; z-index: 100; | |
| background: rgba(8,12,24,0.94); | |
| backdrop-filter: blur(18px); | |
| border-bottom: 1px solid var(--border); | |
| height: 60px; | |
| } | |
| .nav-inner { | |
| max-width: 1200px; margin: 0 auto; padding: 0 24px; | |
| height: 100%; display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .nav-brand { | |
| display: flex; align-items: center; gap: 10px; | |
| font-family: 'Oswald', sans-serif; font-size: 18px; | |
| font-weight: 600; letter-spacing: 0.04em; color: var(--t1); | |
| text-decoration: none; | |
| } | |
| .cricket-ball { | |
| width: 26px; height: 26px; | |
| background: var(--red); border-radius: 50%; | |
| position: relative; flex-shrink: 0; | |
| } | |
| .cricket-ball::after { | |
| content: ''; position: absolute; | |
| width: 24px; height: 1.5px; | |
| background: rgba(255,255,255,0.3); | |
| top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-18deg); | |
| } | |
| .cricket-ball::before { | |
| content: ''; position: absolute; | |
| width: 1.5px; height: 20px; | |
| background: rgba(255,255,255,0.2); | |
| top: 50%; left: 50%; transform: translate(-50%,-50%); | |
| border-radius: 1px; | |
| } | |
| .nav-links { display: flex; gap: 4px; } | |
| .nav-link { | |
| font-family: 'Oswald', sans-serif; font-size: 13px; | |
| letter-spacing: 0.06em; text-transform: uppercase; | |
| padding: 7px 16px; border-radius: var(--radius-sm); | |
| color: var(--t3); text-decoration: none; | |
| transition: all 0.15s; border: 1px solid transparent; | |
| } | |
| .nav-link:hover { color: var(--t2); } | |
| .nav-link.active { | |
| color: var(--t1); | |
| background: var(--red-dim); | |
| border-color: rgba(192,57,43,0.35); | |
| } | |
| /* ── Page header ───────────────────────────────────── */ | |
| .page-header { | |
| background: linear-gradient(180deg, rgba(192,57,43,0.06) 0%, transparent 100%); | |
| border-bottom: 1px solid var(--border); | |
| padding: 36px 24px 32px; | |
| } | |
| .page-header-inner { max-width: 800px; margin: 0 auto; } | |
| .badge { | |
| display: inline-block; | |
| background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.25); | |
| border-radius: 99px; padding: 5px 14px; | |
| font-size: 12px; color: #f87171; font-weight: 500; | |
| letter-spacing: 0.04em; margin-bottom: 14px; | |
| } | |
| .page-header h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-bottom: 10px; } | |
| .accent { color: var(--red2); } | |
| .page-header p { font-size: 15px; color: var(--t2); max-width: 540px; } | |
| /* ── Form elements ─────────────────────────────────── */ | |
| .form-group { margin-bottom: 14px; } | |
| .form-group.compact { margin-bottom: 0; } | |
| label, .form-group label { | |
| display: block; font-size: 11px; font-weight: 600; | |
| color: var(--t3); text-transform: uppercase; | |
| letter-spacing: 0.1em; margin-bottom: 5px; | |
| } | |
| input, select { | |
| width: 100%; background: rgba(255,255,255,0.05); | |
| border: 1px solid var(--border2); border-radius: var(--radius-sm); | |
| padding: 9px 11px; font-size: 14px; color: var(--t1); | |
| font-family: 'DM Sans', sans-serif; transition: border-color 0.15s; | |
| appearance: auto; -webkit-appearance: auto; | |
| } | |
| input:focus, select:focus { | |
| outline: none; border-color: rgba(192,57,43,0.5); | |
| background: rgba(255,255,255,0.07); | |
| } | |
| select option { background: #1a2035; color: var(--t1); } | |
| .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } | |
| .form-group.full { margin-bottom: 14px; } | |
| .section-divider { | |
| font-size: 10px; font-weight: 600; letter-spacing: 0.12em; | |
| text-transform: uppercase; color: var(--t4); | |
| margin: 4px 0 12px; padding-top: 14px; | |
| border-top: 1px solid var(--border); | |
| } | |
| /* ── Predict layout ────────────────────────────────── */ | |
| .predict-layout { | |
| display: grid; grid-template-columns: 360px 1fr; | |
| gap: 20px; padding: 20px 24px; max-width: 1200px; margin: 0 auto; | |
| } | |
| @media (max-width: 860px) { .predict-layout { grid-template-columns: 1fr; } } | |
| /* ── Form panel ────────────────────────────────────── */ | |
| .form-panel { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 20px; height: fit-content; | |
| } | |
| .panel-header { margin-bottom: 18px; } | |
| .panel-header h2 { font-size: 16px; margin-bottom: 12px; } | |
| .form-section { margin-bottom: 4px; } | |
| /* ── Innings toggle ────────────────────────────────── */ | |
| .innings-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } | |
| .inn-btn { | |
| padding: 8px; border-radius: var(--radius-sm); | |
| font-family: 'Oswald', sans-serif; font-size: 13px; | |
| letter-spacing: 0.05em; text-transform: uppercase; | |
| cursor: pointer; border: 1px solid var(--border2); | |
| background: transparent; color: var(--t3); transition: all 0.15s; | |
| } | |
| .inn-btn.active { background: var(--red-dim); border-color: rgba(192,57,43,0.45); color: var(--t1); } | |
| /* ── Predict button ────────────────────────────────── */ | |
| .predict-btn { | |
| width: 100%; padding: 12px; margin-top: 16px; | |
| background: var(--red); color: #fff; border: none; | |
| border-radius: var(--radius-sm); | |
| font-family: 'Oswald', sans-serif; font-size: 15px; | |
| font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; | |
| cursor: pointer; transition: all 0.15s; | |
| display: flex; align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .predict-btn:hover:not(:disabled) { background: #a93226; transform: translateY(-1px); } | |
| .predict-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } | |
| /* ── Results panel ─────────────────────────────────── */ | |
| .results-panel { display: flex; flex-direction: column; gap: 14px; } | |
| /* ── Empty state ───────────────────────────────────── */ | |
| .empty-state { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 48px 24px; text-align: center; | |
| } | |
| .pitch-icon { | |
| width: 80px; height: 120px; | |
| background: linear-gradient(180deg, #7a5c1e, #5a4016); | |
| border-radius: 40px; margin: 0 auto 20px; | |
| display: flex; flex-direction: column; | |
| align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .crease { width: 50px; height: 2px; background: rgba(255,255,255,0.4); border-radius: 1px; } | |
| .empty-state h3 { font-size: 16px; margin-bottom: 8px; color: var(--t2); } | |
| .empty-state p { font-size: 13px; color: var(--t3); line-height: 1.6; max-width: 320px; margin: 0 auto; } | |
| /* ── Result cards ──────────────────────────────────── */ | |
| .result-card { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 18px; | |
| animation: fadeUp 0.25s ease; | |
| } | |
| @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } | |
| .card-title { | |
| font-size: 10px; font-weight: 600; letter-spacing: 0.12em; | |
| text-transform: uppercase; color: var(--t4); margin-bottom: 14px; | |
| } | |
| .res-match-info { | |
| display: flex; justify-content: space-between; align-items: center; | |
| margin-bottom: 4px; | |
| } | |
| .res-match-info span:first-child { font-size: 14px; font-weight: 500; color: var(--t1); } | |
| .res-venue { font-size: 12px; color: var(--t3); margin-bottom: 14px; } | |
| .phase-badge { | |
| font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; | |
| background: rgba(245,158,11,0.12); color: #fbbf24; | |
| border: 1px solid rgba(245,158,11,0.2); letter-spacing: 0.04em; | |
| } | |
| /* ── Stat row ──────────────────────────────────────── */ | |
| .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } | |
| .stat-box { | |
| background: rgba(255,255,255,0.04); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); padding: 10px; text-align: center; | |
| } | |
| .stat-val { | |
| font-family: 'Oswald', sans-serif; font-size: 22px; | |
| font-weight: 600; color: var(--t1); line-height: 1.1; | |
| } | |
| .stat-val.accent { color: var(--red2); } | |
| .stat-val.gold { color: var(--gold); } | |
| .stat-val.green { color: var(--green); } | |
| .stat-lbl { font-size: 10px; color: var(--t3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; } | |
| /* ── Probability bars ──────────────────────────────── */ | |
| .prob-item { margin-bottom: 14px; } | |
| .prob-item:last-child { margin-bottom: 0; } | |
| .prob-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } | |
| .prob-label { font-size: 13px; color: var(--t1); } | |
| .prob-pct { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; color: var(--t1); } | |
| .prob-track { height: 9px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; } | |
| .prob-fill { height: 100%; border-radius: 5px; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); } | |
| .prob-fill.red { background: #ef4444; } | |
| .prob-fill.green { background: var(--green); } | |
| /* ── Gauge ─────────────────────────────────────────── */ | |
| .gauge-container { | |
| position: relative; width: 170px; height: 90px; | |
| margin: 8px auto 0; overflow: hidden; | |
| } | |
| .gauge-track { | |
| position: absolute; bottom: 0; left: 0; | |
| width: 170px; height: 170px; border-radius: 50%; | |
| border: 20px solid rgba(255,255,255,0.05); | |
| clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); | |
| } | |
| .gauge-fill { | |
| position: absolute; bottom: 0; left: 0; | |
| width: 170px; height: 170px; border-radius: 50%; | |
| border: 20px solid var(--red); | |
| clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); | |
| transform-origin: 50% 50%; transform: rotate(-90deg); | |
| transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .gauge-center { | |
| position: absolute; bottom: 2px; left: 50%; | |
| transform: translateX(-50%); | |
| font-family: 'Oswald', sans-serif; font-size: 26px; | |
| font-weight: 700; color: var(--t1); white-space: nowrap; | |
| } | |
| .gauge-verdict { text-align: center; font-size: 13px; color: var(--t2); margin-top: 10px; } | |
| /* ── Chart wrapper ─────────────────────────────────── */ | |
| .chart-wrap { position: relative; width: 100%; } | |
| /* ── Error box ─────────────────────────────────────── */ | |
| .error-box { | |
| background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25); | |
| border-radius: var(--radius-sm); padding: 14px 16px; | |
| font-size: 14px; color: #f87171; | |
| } | |
| /* ── Spinner ───────────────────────────────────────── */ | |
| .spinner { | |
| width: 16px; height: 16px; display: inline-block; | |
| border: 2px solid rgba(255,255,255,0.15); | |
| border-top-color: #fff; border-radius: 50%; | |
| animation: spin 0.65s linear infinite; vertical-align: middle; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ── SIMULATE PAGE ─────────────────────────────────── */ | |
| .sim-layout { | |
| max-width: 1000px; margin: 0 auto; | |
| padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; | |
| } | |
| .sim-controls-bar { | |
| display: flex; align-items: flex-end; justify-content: space-between; | |
| gap: 16px; flex-wrap: wrap; | |
| } | |
| .sim-team-selects { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; } | |
| .sim-team-selects .form-group.compact { min-width: 160px; flex: 1; } | |
| .sim-action-btns { display: flex; gap: 8px; align-items: flex-end; } | |
| .sim-btn { | |
| padding: 9px 18px; border-radius: var(--radius-sm); | |
| font-family: 'Oswald', sans-serif; font-size: 13px; | |
| letter-spacing: 0.05em; text-transform: uppercase; | |
| cursor: pointer; border: 1px solid var(--border2); | |
| background: var(--card2); color: var(--t2); transition: all 0.15s; | |
| } | |
| .sim-btn:hover { color: var(--t1); border-color: var(--border2); } | |
| .sim-btn.primary { background: var(--red); color: #fff; border-color: var(--red); } | |
| .sim-btn.primary:hover { background: #a93226; } | |
| /* ── Scoreboard ────────────────────────────────────── */ | |
| .scoreboard { | |
| background: linear-gradient(135deg, rgba(192,57,43,0.08), rgba(0,0,0,0.3)); | |
| border: 1px solid rgba(192,57,43,0.2); border-radius: var(--radius); padding: 20px; | |
| } | |
| .score-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } | |
| .score-big { font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; } | |
| .score-sub { font-size: 13px; color: var(--t2); margin-top: 4px; } | |
| .score-stats { display: flex; gap: 20px; } | |
| .score-stat { text-align: center; } | |
| .ss-val { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--t1); } | |
| .ss-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } | |
| /* ── Ball chips ────────────────────────────────────── */ | |
| .over-balls { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .ball-chip { | |
| width: 34px; height: 34px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .bc-0 { background: rgba(255,255,255,0.05); color: var(--t3); } | |
| .bc-x { background: rgba(59,130,246,0.12); color: #60a5fa; } | |
| .bc-4 { background: rgba(16,185,129,0.15); color: #34d399; } | |
| .bc-6 { background: rgba(245,158,11,0.15); color: #fbbf24; } | |
| .bc-W { background: rgba(192,57,43,0.2); color: #f87171; } | |
| /* ── Commentary ────────────────────────────────────── */ | |
| .commentary-box { | |
| background: rgba(255,255,255,0.03); | |
| border-left: 3px solid var(--red); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| padding: 12px 16px; font-size: 14px; color: var(--t1); | |
| min-height: 48px; line-height: 1.5; | |
| } | |
| /* ── Live prediction panel ─────────────────────────── */ | |
| .live-pred-panel { | |
| background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15); | |
| border-radius: var(--radius); padding: 16px; | |
| } | |
| .lp-title { | |
| font-size: 10px; font-weight: 600; letter-spacing: 0.1em; | |
| text-transform: uppercase; color: #34d399; margin-bottom: 12px; | |
| } | |
| .lp-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; } | |
| .lp-stat { text-align: center; } | |
| .lp-val { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; } | |
| .lp-val.red { color: #ef4444; } | |
| .lp-val.green { color: var(--green); } | |
| .lp-val.gold { color: var(--gold); } | |
| .lp-val.blue { color: var(--blue); } | |
| .lp-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } | |
| .lp-dist-wrap { position: relative; width: 100%; height: 80px; } | |
| /* ── Sim bottom ────────────────────────────────────── */ | |
| .sim-bottom { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; } | |
| @media (max-width: 720px) { .sim-bottom { grid-template-columns: 1fr; } } | |
| .sim-card { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 18px; | |
| } | |
| .sim-card-title { | |
| font-size: 10px; font-weight: 600; letter-spacing: 0.1em; | |
| text-transform: uppercase; color: var(--t4); margin-bottom: 12px; | |
| } | |
| .event-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } | |
| .log-item { font-size: 13px; color: var(--t2); padding: 5px 8px; border-radius: 4px; border-bottom: 1px solid rgba(255,255,255,0.04); } | |
| .log-item:last-child { color: var(--t1); background: rgba(255,255,255,0.03); border-bottom: none; } | |
| .log-empty { font-size: 13px; color: var(--t4); padding: 8px; } | |
| /* ── MODEL INFO PAGE ───────────────────────────────── */ | |
| .model-layout { | |
| max-width: 1100px; margin: 0 auto; | |
| padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; | |
| } | |
| .model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; } | |
| .model-card { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 18px; | |
| } | |
| .model-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } | |
| .model-icon { | |
| width: 36px; height: 36px; border-radius: var(--radius-sm); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 16px; flex-shrink: 0; | |
| } | |
| .dot-icon { background: rgba(239,68,68,0.12); color: #f87171; } | |
| .bnd-icon { background: rgba(16,185,129,0.12); color: #34d399; } | |
| .run-icon { background: rgba(59,130,246,0.12); color: #60a5fa; } | |
| .win-icon { background: rgba(245,158,11,0.12); color: #fbbf24; } | |
| .model-name { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 500; } | |
| .model-sub { font-size: 11px; color: var(--t3); margin-top: 2px; } | |
| .model-desc { font-size: 13px; color: var(--t3); line-height: 1.55; margin-bottom: 14px; } | |
| .metrics-table { } | |
| .metric-row { | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; | |
| } | |
| .metric-row:last-child { border-bottom: none; } | |
| .pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; } | |
| .pill.green { background: rgba(16,185,129,0.15); color: #34d399; } | |
| .pill.blue { background: rgba(59,130,246,0.12); color: #60a5fa; } | |
| /* ── Info card ─────────────────────────────────────── */ | |
| .info-card { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 20px; | |
| } | |
| .info-card h3 { font-size: 16px; margin-bottom: 16px; } | |
| .feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } | |
| @media (max-width: 640px) { .feature-cols { grid-template-columns: 1fr; } } | |
| .feature-col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; } | |
| .feature-grid { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .feat-tag { | |
| background: rgba(255,255,255,0.05); border: 1px solid var(--border); | |
| border-radius: 4px; padding: 3px 8px; font-size: 12px; | |
| font-family: 'Courier New', monospace; color: var(--t2); | |
| } | |
| .phase-enc-table { display: flex; flex-direction: column; gap: 6px; } | |
| .phase-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t2); } | |
| .phase-code { | |
| background: rgba(245,158,11,0.12); color: #fbbf24; | |
| padding: 2px 8px; border-radius: 4px; font-family: monospace; | |
| font-size: 12px; min-width: 24px; text-align: center; | |
| } | |
| /* ── API Code block ────────────────────────────────── */ | |
| .api-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; } | |
| .code-block { | |
| background: rgba(0,0,0,0.45); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); padding: 16px; | |
| font-family: 'Courier New', monospace; font-size: 12px; | |
| line-height: 1.8; overflow-x: auto; color: var(--t1); | |
| } | |
| .ck { color: #f87171; } | |
| .cv { color: #34d399; } | |
| .cn { color: #60a5fa; } | |
| .cc { color: var(--t4); } | |
| /* ── Encoding tables ───────────────────────────────── */ | |
| .enc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } | |
| @media (max-width: 640px) { .enc-cols { grid-template-columns: 1fr; } } | |
| .enc-table { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } | |
| .enc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: var(--t2); } | |
| .enc-row:last-child { border-bottom: none; } | |
| .enc-idx { | |
| background: rgba(192,57,43,0.12); color: #f87171; | |
| min-width: 28px; text-align: center; | |
| padding: 2px 6px; border-radius: 4px; | |
| font-family: monospace; font-size: 12px; | |
| } | |
| /* ── Utility ───────────────────────────────────────── */ | |
| .mt-1 { margin-top: 8px; } | |
| .mt-2 { margin-top: 16px; } | |