OTC

/* ✅ SIMPLE MATH: TABLE = HEADER(60px) + 4×ROW(90px) = 420px TOTAL / .table-wrapper { border: var(--border-w-thick) solid var(--accent-green); border-radius: 14px; background: #fff; height: calc(var(--HEAD-HEIGHT) + var(--ROW-HEIGHT) * 4); / 60 + 360 = 420px / overflow: hidden; / NOT SCROLLABLE — JUST HIDE EXTRA */ }

table { width: 100%; border-collapse: collapse; table-layout: fixed; } colgroup col:nth-child(1) { width: 25%; } colgroup col:nth-child(2) { width: 25%; background: var(--col-36); } colgroup col:nth-child(3) { width: 25%; background: var(--col-37); } colgroup col:nth-child(4) { width: 25%; background: var(--col-38); }

th, td { border: var(--border-w) solid var(--accent-green); padding: 4px 2px; text-align: center; vertical-align: middle; } thead th { height: var(--HEAD-HEIGHT); /* ✅ EXACT HEADER HEIGHT */ font-size: 14px; font-weight: 700; color: #fff; } thead th:nth-child(1) { background: var(--accent-green); } thead th:nth-child(2) { background: #4f46e5; } thead th:nth-child(3) { background: #0284c7; } thead th:nth-child(4) { background: #d97706; }

tbody td { height: var(--ROW-HEIGHT); /* ✅ EXACT ROW HEIGHT — 4× */ }

.bundle-name { font-weight: 700; font-size: 12px; line-height: 1.2; display:block; } .tech-type { font-size: 10px; color: #6b7280; font-style: italic; margin-top: 1px; display:block; line-height:1.1; }

/* ✅ PILLS — INSIDE CELL, TOUCH NOTHING / .pill { display: inline-flex; align-items: center; justify-content: center; min-width: var(--PILL-WIDTH); height: var(--PILL-HEIGHT); background: var(--PILL-BG); color: var(--PILL-COLOR); border: 1px solid var(--PILL-BORDER); border-radius: 7px; font-weight: 600; font-size: 10.5px; margin: 3px; / ✅ SPACE FROM EDGES */ padding: 0 4px; font-family: inherit; cursor: pointer; white-space: nowrap; } td:nth-child(3) .pill { color: var(--PILL-COLOR-37); } td:nth-child(4) .pill { color: var(--PILL-COLOR-38); } .empty-cell { color: #9ca3af; font-size: 13px; font-style: italic; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #0f172a; color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 15px; font-weight: 600; opacity: 0; transition: all 0.3s; z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }