:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem;gap:2rem}.app-header{text-align:center}.app-header h1{margin:0 0 .25rem;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.app-header p{margin:0;color:#ffffff80;font-size:.9rem}.layout{display:flex;gap:2.5rem;align-items:flex-start;flex-wrap:wrap;justify-content:center;width:100%;max-width:72rem}.form-panel{flex:1;min-width:300px;max-width:380px;display:flex;flex-direction:column;gap:1rem}.form-panel h2{margin:0;font-size:1.1rem;font-weight:600;color:#ffffffd9}.field{display:flex;flex-direction:column;gap:.35rem}.field label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:#ffffff73}.field input,.field select{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;padding:.6rem .75rem;color:#fafafa;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s}.field input:focus,.field select:focus{border-color:#6366f199}.field select{cursor:pointer}.photo-upload{display:flex;align-items:center;gap:.75rem}.photo-upload .preview-thumb{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12)}.photo-upload .placeholder-thumb{width:48px;height:48px;border-radius:50%;background:#ffffff0f;border:2px dashed rgba(255,255,255,.15);display:grid;place-items:center;font-size:1.1rem;color:#ffffff4d}.photo-upload label.btn{cursor:pointer}.photo-upload input[type=file]{display:none}.btn{background:#6366f126;border:1px solid rgba(99,102,241,.3);color:#a5b4fc;border-radius:.5rem;padding:.55rem 1rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .15s;text-align:center}.btn:hover{background:#6366f140}.btn-primary{background:#6366f1;border-color:#6366f1;color:#fff;margin-top:.5rem}.btn-primary:hover{background:#4f46e5}.actions{display:flex;gap:.75rem}.actions .btn{flex:1}.preview-panel{display:flex;flex-direction:column;align-items:center;gap:1rem}.preview-panel h2{margin:0;font-size:1.1rem;font-weight:600;color:#ffffffd9}.id-card{width:340px;min-height:210px;border-radius:1rem;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080}.id-card .card-header{padding:1rem 1.25rem .75rem;display:flex;align-items:center;gap:.75rem}.id-card .company-logo{width:42px;height:42px;border-radius:.5rem;display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex-shrink:0}.id-card .company-info{flex:1;min-width:0}.id-card .company-name{font-size:.95rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.id-card .card-title{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;opacity:.6}.id-card .card-body{padding:.75rem 1.25rem 1rem;display:flex;gap:1rem;align-items:center;flex:1}.id-card .photo{width:72px;height:72px;border-radius:.5rem;object-fit:cover;border:2px solid rgba(255,255,255,.15);flex-shrink:0}.id-card .photo-placeholder{width:72px;height:72px;border-radius:.5rem;background:#ffffff14;border:2px dashed rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.6rem;color:#fff3;flex-shrink:0}.id-card .person-details{flex:1;min-width:0}.id-card .person-name{font-size:1.05rem;font-weight:700;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.id-card .person-role{font-size:.78rem;opacity:.7;margin-bottom:.5rem}.id-card .meta-row{display:flex;gap:1rem;font-size:.68rem;opacity:.55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.id-card .card-footer{padding:.5rem 1.25rem;display:flex;justify-content:space-between;align-items:center;font-size:.6rem;opacity:.4;letter-spacing:.05em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.08)}.id-card .barcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.12em;opacity:.35}.theme-corporate .card-header{background:#1e293b}.theme-corporate .card-body,.theme-corporate .card-footer{background:#0f172a}.theme-corporate .company-logo{background:#3b82f6;color:#fff}.theme-modern .card-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.theme-modern .card-body,.theme-modern .card-footer{background:#1e1b4b}.theme-modern .company-logo{background:#fff3;color:#fff}.theme-green .card-header{background:#064e3b}.theme-green .card-body,.theme-green .card-footer{background:#022c22}.theme-green .company-logo{background:#10b981;color:#fff}.theme-red .card-header{background:#7f1d1d}.theme-red .card-body,.theme-red .card-footer{background:#450a0a}.theme-red .company-logo{background:#ef4444;color:#fff}.theme-gold .card-header{background:#78350f}.theme-gold .card-body,.theme-gold .card-footer{background:#451a03}.theme-gold .company-logo{background:#f59e0b;color:#fff}.badge-label{position:absolute;top:.6rem;right:.75rem;font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;padding:.15rem .45rem;border-radius:.2rem;font-weight:600}.badge-employee{background:#6366f14d;color:#a5b4fc}.badge-contractor{background:#f59e0b4d;color:#fcd34d}.badge-intern{background:#10b9814d;color:#6ee7b7}.badge-manager{background:#ef44444d;color:#fca5a5}@media(max-width:720px){.layout{flex-direction:column;align-items:center}.form-panel{max-width:100%}}