src/App.jsx import "./styles/zotek-cards.css"; import "./styles/zotek-layout.css"; // if you created the layout CSS too .z-card{position:relative;border-radius:18px;padding:18px 22px 22px;background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.12),transparent 55%),radial-gradient(circle at 100% 0%,rgba(94,234,212,.08),transparent 55%),linear-gradient(to bottom right,#020617,#020617 40%,#000);border:1px solid rgba(148,163,184,.55);box-shadow:0 0 0 1px #0f172ae6,0 18px 40px #0f172af2;overflow:hidden}.z-card:hover{border-color:#38bdf8e6;box-shadow:0 0 0 1px #38bdf880,0 22px 50px #082f49f2}.z-card:before{content:"";position:absolute;inset:0 18%;height:2px;margin-top:0;background:linear-gradient(90deg,transparent,rgba(56,189,248,.9),rgba(94,234,212,.9),transparent);opacity:.6}.z-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.z-card__title-wrap{display:flex;align-items:center;gap:10px}.z-card__accent-pill{width:8px;height:32px;border-radius:999px;background:linear-gradient(180deg,#38bdf800,#38bdf8f2,#38bdf800);box-shadow:0 0 18px #38bdf8cc}.z-card__title{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#e5e7eb}.z-card__subtitle{font-size:.8rem;color:#9ca3af;margin-top:2px}.z-card__actions{display:flex;align-items:center;gap:8px}.z-card__body{display:flex;flex-direction:column;gap:14px}.z-card__body .form-grid{row-gap:10px}.z-card__toggle-btn{border:none;outline:none;cursor:pointer;padding:4px 8px;border-radius:999px;background:#0f172ae6;color:#e5e7eb;font-size:.7rem;display:inline-flex;align-items:center;gap:6px}.z-card__toggle-icon{font-size:.75rem;opacity:.9}.z-card--collapsed .z-card__body{display:none}.z-status-pill{padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.z-status-pill--ok{background:#22c55e29;color:#bbf7d0;border:1px solid rgba(34,197,94,.85);box-shadow:0 0 12px #16a34abf}.z-status-pill--warn{background:#eab3082e;color:#fef9c3;border:1px solid rgba(234,179,8,.9);box-shadow:0 0 12px #ca8a04b3}.z-status-pill--fail{background:#ef44442e;color:#fee2e2;border:1px solid rgba(239,68,68,.9);box-shadow:0 0 12px #b91c1cbf}.z-card input:not([type=checkbox]):not([type=radio]),.z-card select,.z-card textarea{display:block;width:90%;max-width:90%;margin-left:0;margin-right:0;box-sizing:border-box;font-size:13px;padding:8px 11px;border-radius:10px;border:1px solid rgba(148,163,184,.55);background:radial-gradient(circle at 0% 0%,#0f172ad9,#020617);color:#e5e7eb;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .08s ease;box-shadow:0 0 0 1px #0f172ae6,0 10px 22px #0f172af2}.z-card input::placeholder,.z-card textarea::placeholder{color:#6b7280}.z-card input:focus,.z-card select:focus,.z-card textarea:focus{border-color:#38bdf8f2;box-shadow:0 0 0 1px #38bdf8b3,0 0 22px #082f49e6;background:radial-gradient(circle at 0% 0%,#0f172a,#020617);transform:translateY(-1px)}.z-card textarea{min-height:72px;resize:vertical}.z-btn-pass{background:#16a34a;border:1px solid #16a34a;color:#e5e7eb;border-radius:9999px;font-size:11px;padding:2px 10px;cursor:pointer}.z-btn-fail{background:#b91c1c;border:1px solid #b91c1c;color:#e5e7eb;border-radius:9999px;font-size:11px;padding:2px 10px;cursor:pointer}.z-btn-secondary{background:transparent;border:1px solid #4b5563;color:#e5e7eb;border-radius:9999px;font-size:11px;padding:2px 10px;cursor:pointer}.z-table-compact th,.z-table-compact td{padding-top:4px!important;padding-bottom:4px!important}.z-table-compact tbody tr td{border-bottom-width:1px!important}.z-card .form-row,.z-card div[style*="display: flex"],.z-card div[style*="display:flex"]{margin-bottom:14px!important}.z-card .form-grid,.z-card div[style*=grid]{gap:18px!important;margin-bottom:10px}.z-card .form-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px!important}@media(max-width:1100px){.z-card .form-grid-2col{grid-template-columns:1fr!important}}.z-page{display:flex;flex-direction:column;gap:18px;padding:18px 22px 32px}.z-page__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.z-page__title-block{display:flex;flex-direction:column;gap:4px}.z-page__title{font-size:1.3rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e5e7eb}.z-page__subtitle{font-size:.85rem;color:#9ca3af}.z-page__toolbar{display:flex;flex-wrap:wrap;gap:8px}.z-page__content{display:flex;flex-direction:column;gap:18px}.z-page__grid--2col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}@media(max-width:1024px){.z-page__grid--2col{grid-template-columns:minmax(0,1fr)}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{margin:0;padding:0;width:100%;height:100%}body{min-width:320px;min-height:100vh;background:#0f172a;display:block}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}