body{margin:0;font-family:Arial,sans-serif;background:#f8fafc;color:#0f172a}header{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;padding:16px}main{max-width:1100px;margin:0 auto;padding:20px 16px}.hero{background:#e2e8f0;border-radius:12px;padding:18px;margin-bottom:16px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 6px rgba(15,23,42,.08)}table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}td,th{border-bottom:1px solid #e2e8f0;text-align:left;padding:10px}.factory-row{cursor:pointer}.factory-row:hover{background:#eff6ff}.status-valid{color:#166534;font-weight:700}.status-expiring_soon{color:#92400e;font-weight:700}.status-expired{color:#b91c1c;font-weight:700}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);z-index:1000;padding:20px;overflow:auto}.modal-backdrop.open{display:block}.modal-card{position:relative;max-width:980px;margin:24px auto;background:#fff;border-radius:14px;padding:20px;box-shadow:0 20px 60px rgba(15,23,42,.25)}.modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:999px;background:#e2e8f0;cursor:pointer;font-size:24px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.detail-table{margin:10px 0 22px;font-size:14px}.empty-detail{color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px}footer{padding:16px;text-align:center;color:#475569}