.facial-shell { width: min(1080px, 100%); margin: auto; }
.facial-card { width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); backdrop-filter: blur(12px); }
.facial-shell #login-view.login-card {
    display: block;
    width: 100%;
    height: auto;
    max-width: 460px;
    margin: auto;
    text-align: left;
}
.facial-shell #login-view.login-card form { display: block; width: 100%; }
.facial-shell #login-view.login-card h1 { margin-bottom: 8px; }
.facial-shell #login-view.login-card .subtitle { margin-bottom: 28px; }
.facial-shell #login-view.login-card .primary-button { margin-top: 4px; }
.logo { width: auto; height: 32px; margin-bottom: 28px; }
.eyebrow { color: #818cf8; font-size: .78rem; font-weight: 600; letter-spacing: .14em; margin-bottom: 8px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-main); font-weight: 600; }
.primary-button, .secondary-button, .success-button { width: 100%; }
.primary-button { background: var(--primary); color: white; }
.secondary-button { background: rgba(255,255,255,.08); color: var(--text-main); border: 1px solid var(--border); }
.success-button { background: var(--success); color: white; }
.camera-buttons-label { display: block; margin-bottom: 10px; color: var(--text-main); font-size: .85rem; font-weight: 600; }
.camera-buttons { display: grid; gap: 10px; }
.file-upload-group small { display: block; margin-top: 8px; color: var(--text-dim); line-height: 1.4; }
.camera-select-button { width: 100%; background: var(--primary); color: white; }
.camera-select-button.front-camera { order: -1; border: 1px solid rgba(255,255,255,.25); }
.camera-priority { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .7rem; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.card-header .subtitle { margin-bottom: 0; }
.card-header .secondary-button { width: auto; flex: 0 0 auto; }
.registration-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); gap: 32px; align-items: start; }
.fields-panel { padding: 24px; background: rgba(15,23,42,.45); border: 1px solid var(--border); border-radius: 12px; }
.camera-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: 12px; background: #020617; }
.camera-frame video, .camera-frame canvas, .camera-frame img { width: 100%; height: 100%; object-fit: cover; }
.camera-frame video, .camera-frame canvas { transform: scaleX(-1); }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); }
.camera-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 16px; }
.camera-actions > :only-child { grid-column: 1/-1; }
.alert { margin-bottom: 16px; }
button:disabled { cursor: wait; opacity: .65; }
@media (max-width:800px) { body { align-items:flex-start; padding:16px; } .facial-shell { margin:0 auto; } .facial-card { padding:24px; } .registration-grid { grid-template-columns:1fr; } .camera-frame { aspect-ratio:3/4; } }
@media (max-width:480px) { .facial-card { padding:20px; border-radius:12px; } .card-header { flex-direction:column; } .card-header .secondary-button { width:100%; } .fields-panel { padding:18px; } h1 { font-size:1.8rem; } .camera-actions { grid-template-columns:1fr; } }