/* Minimal, readable styling — no frameworks */ :root{ --bg:#0b0c10; --card:#12141b; --muted:#8b93a7; --text:#e7eaf3; --border:#23283a; --accent:#5eead4; --accent2:#a78bfa; } *{ box-sizing:border-box; } html,html{ /* Put the gradient on so it always reaches the bottom */ background: radial-gradient(1200px 800px at 20% 0%, #0f1730 0%, rgba(11,12,16,0) 60%), linear-gradient(180deg, #0b0c10 0%, #0b0c10 70%, #07080b 100%); background-attachment: fixed; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; min-height: 100vh; display: flex; flex-direction: column; background: transparent; color: var(--text); } header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 18px 10px 18px; border-bottom:1px solid var(--border); } .title h1{ margin:0; font-size:20px; } .sub{ margin:6px 0 0 0; color:var(--muted); font-size:13px; } .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; } .btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--border); background: linear-gradient(180deg, #1a2033, #141a2a); color: var(--text); padding:10px 12px; border-radius:10px; font-size:13px; } .btn input{ display:none; } .btn:hover{ border-color:#34405f; } .btn:focus-visible{ outline: 2px solid rgba(94,234,212,0.6); outline-offset:2px; } .btn.secondary{ background: transparent; } main{ flex: 1 0 auto; padding:14px 18px 30px 18px; } .dropzone{ border:1px dashed #34405f; border-radius:14px; padding:16px; margin: 10px 0 16px 0; background: rgba(18,20,27,0.45); } .dropzone.dragover{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(94,234,212,0.12) inset; } .drop-inner{ text-align:center; padding:14px 0; } .drop-big{ font-weight:650; } .drop-small{ margin-top:6px; color:var(--muted); font-size:13px; } .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } .card{ background: rgba(18,20,27,0.78); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow: 0 10px 24px rgba(0,0,0,0.22); backdrop-filter: blur(6px); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .card:hover{ border-color:#34405f; box-shadow: 0 14px 34px rgba(0,0,0,0.28); transform: translateY(-1px); } .card.wide{ grid-column: 1 / -1; } .card h2{ margin:0 0 10px 0; font-size:16px; } .note{ margin-top:10px; color: var(--muted); font-size:12px; } .kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; } .kpi{ border:1px solid var(--border); border-radius:12px; padding:10px; background: rgba(10,12,16,0.35); } .kpiLabel{ color:var(--muted); font-size:12px; } .kpiValue{ font-size:18px; font-weight:700; margin-top:4px; } .legend{ color:var(--muted); font-size:12px; margin-top:8px; } .tableWrap{ overflow:auto; border-radius:12px; border:1px solid var(--border); } table{ width:100%; border-collapse:collapse; font-size:12px; } thead th{ position:sticky; top:0; background:#0f1220; border-bottom:1px solid var(--border); text-align:left; padding:10px 10px; white-space:nowrap; } tbody td\{ border-bottom:1px solid rgba\(35,40,58,0\.7\); padding:9px 10px; white-space:nowrap; \} tbody tr:nth-child(even){ background: rgba(10,12,16,0.12); } tbody tr:hover{ background: rgba(94,234,212,0.06); cursor:pointer; } .badge{ display:inline-flex; padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:11px; color: var(--muted); } .badge.end{ border-color:#3b3f52; } .badge.timed{ border-color: rgba(167,139,250,0.45); color:#c7b7ff; } .badge.done{ border-color: rgba(94,234,212,0.45); color: var(--accent); } .phaseCharts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .smallTitle{ color: var(--muted); font-size:12px; margin-bottom:6px; } .detailHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; } .detailGrid{ display:grid; grid-template-columns: 280px 1fr; gap:12px; } .detailKPIs{ display:grid; grid-template-columns: 1fr; gap:10px; } .detailCharts canvas{ width:100%; height:auto; border:1px solid var(--border); border-radius:12px; background: rgba(10,12,16,0.25); } .detailBottom{ margin-top:14px; } .detailBottom h3{ margin:0 0 10px 0; font-size:14px; } .missGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; } .miss{ border:1px solid var(--border); border-radius:12px; padding:10px; background: rgba(10,12,16,0.25); } .miss .top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px;} .miss .conf{ color:#ffd37a; font-weight:700; } .miss .mini{ color:var(--muted); font-size:12px; } .miss .prop{ margin-top:6px; font-size:12px; line-height:1.35; color:#d9deee; } .miss code{ color:#c7b7ff; } footer{ padding: 14px 18px 18px 18px; color: var(--muted); font-size:12px; border-top:1px solid var(--border); } code{ background: rgba(167,139,250,0.12); padding: 1px 6px; border-radius: 7px; border:1px solid rgba(167,139,250,0.2); } @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } .detailGrid{ grid-template-columns: 1fr; } .missGrid{ grid-template-columns: 1fr; } } .select{ border:1px solid var(--border); background: rgba(18,20,27,0.55); color: var(--text); padding:10px 12px; border-radius:10px; font-size:13px; } .select:focus-visible{ outline: 2px solid rgba(94,234,212,0.55); outline-offset: 2px; } .topbox{ margin-top: 12px; border-top: 1px solid rgba(35,40,58,0.65); padding-top: 10px; } .topbox h3{ margin: 0 0 8px 0; font-size: 13px; color: rgba(231,234,243,0.82); letter-spacing: 0.2px; } .toplist{ margin: 0; padding-left: 18px; color: rgba(231,234,243,0.75); font-size: 12px; } .toplist li{ margin: 4px 0; } .toplist code{ color: #c7b7ff; }