#screen-auth,#screen-landing{min-height:100vh;background:radial-gradient(1000px 500px at 20% -10%,rgba(13,148,136,.16),transparent),radial-gradient(900px 500px at 80% 100%,rgba(99,102,241,.14),transparent),#0f172a;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;position:relative;overflow:hidden;}
.landing-hero{max-width:720px;margin-bottom:40px;position:relative;z-index:2;animation:fadeIn .8s ease-out;}
.hero-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-display);font-size:2.6rem;font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-.02em;}
.hero-logo i{color:#10b981;}
.hero-tagline{font-family:var(--ff-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;margin-bottom:14px;}
.hero-desc{font-size:1.05rem;color:#cbd5e1;max-width:580px;margin:0 auto;}
.auth-card{width:100%;max-width:420px;background:rgba(30,41,59,.75);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:32px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.4);position:relative;z-index:2;animation:slideUp .6s ease-out;}
.auth-card h3{font-family:var(--ff-display);font-size:1.3rem;margin:0 0 6px;}
.auth-card p{color:#94a3b8;font-size:.88rem;margin:0 0 20px;}
.otp-boxes{display:flex;gap:10px;margin:16px 0;}
.otp-boxes input{width:48px;height:56px;text-align:center;font-size:1.4rem;font-weight:700;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;}
.otp-hint{font-family:var(--ff-mono);font-size:.75rem;color:#64748b;margin-top:4px;}
.consent-row{display:flex;gap:10px;align-items:flex-start;background:rgba(0,0,0,.25);border-radius:12px;padding:14px;margin:14px 0;font-size:.82rem;color:#cbd5e1;}
.consent-row input{margin-top:3px;}
.step-dots{display:flex;gap:6px;margin-bottom:18px;}
.step-dots span{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.15);}
.step-dots span.done{background:var(--brand-primary);}
.dark-input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;font-size:.92rem;margin-bottom:2px;}
.dark-input::placeholder{color:#64748b;}
.auth-link-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.8rem;}
.auth-link-row a{color:#5eead4;cursor:pointer;font-weight:600;}
.auth-link-row a:hover{text-decoration:underline;}
.field-err{color:#fca5a5;font-size:.76rem;margin:-10px 0 12px;}
.conflict-box{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:12px;padding:16px;margin:14px 0;font-size:.85rem;color:#fde68a;}
.conflict-box strong{color:#fbbf24;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,12,.6);backdrop-filter:blur(3px);z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{width:100%;max-width:480px;max-height:86vh;overflow-y:auto;background:var(--bg-surface);color:var(--text-main);border-radius:20px;padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:slideUp .3s ease-out;}
.modal-box h3{margin:0 0 4px;font-family:var(--ff-display);font-size:1.25rem;}
.modal-box p.modal-sub{color:var(--text-muted);font-size:.85rem;margin:0 0 18px;}
.modal-close-x{position:sticky;top:0;float:right;width:32px;height:32px;border-radius:9px;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;}
.member-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-color);border-radius:14px;margin-bottom:10px;}
.member-row.active{border-color:var(--brand-primary);background:rgba(13,148,136,.06);}
.member-avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0;}
.member-name{font-weight:700;font-size:.88rem;}
.member-rel{font-size:.74rem;color:var(--text-muted);}
.member-actions{margin-left:auto;display:flex;gap:6px;}

.badge-grid{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;max-width:1200px;width:100%;position:relative;z-index:2;animation:slideUp .8s ease-out;}
.badge-card{width:270px;background:rgba(30,41,59,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px 22px;text-align:left;transition:all .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.3);}
.badge-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--badge-accent,#10b981);}
.badge-card:hover{transform:translateY(-8px) scale(1.02);border-color:rgba(255,255,255,.3);box-shadow:0 30px 60px rgba(0,0,0,.4);}
.badge-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.badge-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--badge-accent);}
.badge-id{font-family:var(--ff-mono);font-size:.68rem;color:#64748b;background:rgba(0,0,0,.2);padding:4px 8px;border-radius:6px;font-weight:600;}
.badge-title{font-family:var(--ff-display);font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:10px;}
.badge-body{font-size:.85rem;color:#94a3b8;line-height:1.6;margin-bottom:22px;flex-grow:1;}
.badge-footer{display:flex;align-items:center;justify-content:space-between;font-family:var(--ff-mono);font-size:.8rem;font-weight:600;color:var(--badge-accent);}
.badge-card[data-role-type="patient"]{--badge-accent:#0d9488;}
.badge-card[data-role-type="responder"]{--badge-accent:#ef4444;}
.badge-card[data-role-type="police"]{--badge-accent:#6366f1;}
.badge-card[data-role-type="hospital"]{--badge-accent:#3b82f6;}

/* ============ APP SHELL ============ */