*{box-sizing:border-box}html,body,#root{height:100%}body{color:#1c1420;background:#1a1025;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.phone-backdrop{background:radial-gradient(circle at 20% 20%,#2b1942,#120a1c 70%);justify-content:center;align-items:center;min-height:100vh;padding:24px 12px;display:flex}.app-shell{background:#fff4e6;border-radius:32px;flex-direction:column;width:100%;max-width:430px;min-height:90vh;display:flex;overflow:hidden;box-shadow:0 30px 60px #00000080,0 0 0 8px #0f0816}.app-header{background:linear-gradient(120deg,#e11d48,#f5a623);align-items:center;gap:10px;padding:20px 20px 14px;display:flex}.brand-mark{color:#e11d48;background:#fff4e6;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;font-weight:800;display:flex}.brand-name{color:#fff;letter-spacing:.3px;font-size:18px;font-weight:800}.app-main{flex:1;padding:20px 20px 10px;overflow-y:auto}.page{flex-direction:column;gap:16px;display:flex}.hero-card{padding:4px 2px 6px}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;color:#e11d48;margin:0 0 6px;font-size:12px;font-weight:800}.hero-card h1{color:#1c1420;margin:0 0 8px;font-size:24px}.hero-card .sub{color:#5a4a52;margin:0;font-size:14px;line-height:1.5}.card{background:#fff;border-radius:20px;padding:18px;box-shadow:0 6px 16px #1e0a1e14}.form-card{flex-direction:column;align-items:center;gap:10px;display:flex}.avatar-upload{cursor:pointer;background:linear-gradient(135deg,#2563eb,#e11d48);border:4px solid #f5a623;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;margin-bottom:6px;display:flex;position:relative;overflow:hidden}.avatar-upload img{object-fit:cover;width:100%;height:100%}.avatar-fallback{color:#fff;font-size:34px;font-weight:800}.avatar-edit{color:#fff;text-align:center;background:#0000008c;padding:4px 0;font-size:10px;position:absolute;bottom:0;left:0;right:0}.field-label{color:#1c1420;align-self:flex-start;margin-top:4px;font-size:13px;font-weight:700}.text-input{background:#fff4e6;border:2px solid #f0ddc8;border-radius:14px;outline:none;width:100%;padding:12px 14px;font-size:15px}.text-input:focus{border-color:#2563eb}.btn{cursor:pointer;letter-spacing:.3px;border:none;border-radius:16px;width:100%;margin-top:8px;padding:14px;font-size:15px;font-weight:800}.btn-primary{color:#fff;background:linear-gradient(120deg,#e11d48,#f5a623);box-shadow:0 8px 18px #e11d4859}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.demo-note{color:#8a7a82;text-align:center;padding:0 6px;font-size:11.5px}.identity-row{align-items:center;gap:12px;padding:2px 2px 0;display:flex}.mini-avatar{color:#fff;background:linear-gradient(135deg,#2563eb,#e11d48);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-weight:800;display:flex;overflow:hidden}.mini-avatar img{object-fit:cover;width:100%;height:100%}.mini-label{color:#8a7a82;margin:0;font-size:11px}.mini-name{color:#1c1420;margin:0;font-size:15px;font-weight:800}.status-card{color:#fff;background-size:200% 200%;border-radius:24px;padding:24px 20px;transition:background .3s,box-shadow .3s,opacity .2s}.status-visible{background-image:linear-gradient(135deg,#e11d48,#f5a623 55%,#2563eb);animation:4s infinite glowshift;box-shadow:0 16px 32px #e11d4873,0 0 0 3px #f5a62359}.status-invisible{background-image:linear-gradient(135deg,#2563eb,#121a3d 75%);box-shadow:0 16px 32px #2563eb73,0 0 0 3px #2563eb40}.status-card.status-loading{opacity:.6}@keyframes glowshift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.status-top{align-items:center;gap:10px;display:flex}.live-dot{background:#f5a623;border-radius:50%;width:12px;height:12px}.live-dot.pulsing{animation:1.4s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #f5a62399}70%{box-shadow:0 0 0 10px #f5a62300}to{box-shadow:0 0 #f5a62300}}.status-word{letter-spacing:1px;font-size:20px;font-weight:900}.status-desc{opacity:.95;margin:10px 0 18px;font-size:14px;line-height:1.5}.toggle-switch{cursor:pointer;color:#fff;background:#ffffff26;border:none;border-radius:18px;align-items:center;gap:12px;width:100%;padding:10px;display:flex}.toggle-track{background:#0000004d;border-radius:20px;flex-shrink:0;align-items:center;width:56px;height:30px;padding:3px;display:flex}.toggle-thumb{background:#fff4e6;border-radius:50%;width:24px;height:24px;transition:transform .25s,background .25s;box-shadow:0 2px 6px #00000059}.toggle-switch.on .toggle-thumb{background:#f5a623;transform:translate(26px);box-shadow:0 2px 10px #f5a62399}.toggle-switch:disabled{opacity:.55;cursor:not-allowed}.toggle-text{font-size:14px;font-weight:800}.sync-row{min-height:22px;margin-top:12px;display:flex}.sync-badge{letter-spacing:.2px;border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:800;display:inline-block}.sync-saving{color:#fff;background:#ffffff38}.sync-synced{color:#fff;background:#ffffff47}.sync-error{color:#ffd3d3;background:#00000059;align-items:center;gap:8px;display:inline-flex}.retry-link{color:#fff4e6;cursor:pointer;background:0 0;border:none;margin:0;padding:0;font-size:11.5px;font-weight:900;text-decoration:underline}.info-card h2{color:#2563eb;margin:0 0 6px;font-size:16px}.info-card p{color:#4a3f47;margin:0;font-size:14px;line-height:1.5}.protect-card{background:#ffefd6;border:2px solid #f5a623}.protect-card h3{color:#1c1420;margin:0 0 8px;font-size:15px}.protect-card ul{color:#4a3f47;margin:0;padding-left:18px;font-size:13px;line-height:1.6}.bottom-nav{background:#fff;border-top:1px solid #f0ddc8;display:flex}.nav-item{color:#8a7a82;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 0 14px;font-size:12px;font-weight:700;text-decoration:none;display:flex}.nav-icon{font-size:18px}.nav-item.active{color:#e11d48}.nav-item.disabled{opacity:.4}@media (width<=360px){.phone-backdrop{padding:0}.app-shell{min-height:100vh;box-shadow:none;border-radius:0}.app-main{padding:16px 14px 10px}.app-header{padding:16px 16px 12px}.hero-card h1{font-size:21px}.status-card{padding:20px 16px}}@media (width>=431px){.phone-backdrop{align-items:flex-start;padding-top:48px}}