@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--bg-deep:#070b12;--bg:#0c121c;--bg-elevated:#121a27;--bg-panel:#121a27eb;--border:#94b2d224;--border-strong:#5ad2c659;--text:#e8eef7;--text-muted:#93a4bb;--accent:#2fd4c2;--accent-soft:#2fd4c224;--accent-hover:#4ae0cf;--danger:#ff6b7a;--success:#3dd68c;--shadow:0 24px 60px #00000073;--radius:14px;--font-display:"Outfit", sans-serif;--font-body:"IBM Plex Sans", sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(1200px 600px at 12% -10%, #2fd4c229, transparent 55%), radial-gradient(900px 500px at 90% 0%, #3878ff1f, transparent 50%), linear-gradient(180deg, #0a1019 0%, var(--bg-deep) 45%, #05080e 100%);background-attachment:fixed;margin:0}button,input{font:inherit}button{cursor:pointer}a{color:var(--accent)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10;background:#070b12b8;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.75rem;display:flex;position:sticky;top:0}.brand{color:inherit;align-items:center;gap:.85rem;text-decoration:none;display:flex}.brand img{width:auto;height:36px;display:block}.brand-meta{flex-direction:column;gap:.1rem;display:flex}.brand-meta span:first-child{font-family:var(--font-display);letter-spacing:.02em;font-size:.95rem;font-weight:600}.brand-meta span:last-child{color:var(--text-muted);font-size:.75rem}.badge{border:1px solid var(--border);background:var(--accent-soft);color:var(--accent);border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .7rem;font-size:.75rem;font-weight:500;display:inline-flex}.page{width:min(920px,100% - 2rem);margin:0 auto;padding:2.5rem 0 4rem;animation:.42s both rise}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero{margin-bottom:1.75rem}.hero h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .55rem;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:650;line-height:1.15}.hero p{max-width:52ch;color:var(--text-muted);margin:0;line-height:1.55}.steps{gap:.75rem;margin-bottom:1.5rem;display:flex}.step-pill{border:1px solid var(--border);color:var(--text-muted);background:#ffffff05;border-radius:12px;flex:1;padding:.85rem 1rem;font-size:.85rem;transition:border-color .18s,background .18s,color .18s}.step-pill strong{font-family:var(--font-display);color:inherit;margin-bottom:.15rem;font-weight:600;display:block}.step-pill.active{border-color:var(--border-strong);background:var(--accent-soft);color:var(--text)}.step-pill.done{color:var(--success);border-color:#3dd68c59}.panel{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:var(--bg-panel);box-shadow:var(--shadow);padding:1.5rem}.panel h2{font-family:var(--font-display);margin:0 0 .35rem;font-size:1.15rem;font-weight:600}.panel .hint{color:var(--text-muted);margin:0 0 1.35rem;font-size:.9rem;line-height:1.5}.form-grid{gap:1rem;display:grid}.field label{color:var(--text-muted);margin-bottom:.4rem;font-size:.82rem;font-weight:500;display:block}.field input{border:1px solid var(--border);background:var(--bg-deep);width:100%;color:var(--text);border-radius:10px;outline:none;padding:.8rem .95rem;transition:border-color .16s,box-shadow .16s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2fd4c226}.field input::placeholder{color:#617288}.actions{flex-wrap:wrap;gap:.75rem;margin-top:1.35rem;display:flex}.btn{border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:.45rem;padding:.8rem 1.2rem;font-size:.92rem;font-weight:600;transition:transform .14s,background .14s,border-color .14s,opacity .14s;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn-primary{color:#041016;background:linear-gradient(135deg,#2fd4c2,#1fb3d4)}.btn-primary:not(:disabled):hover{background:linear-gradient(135deg, var(--accent-hover), #2bc0e0)}.btn-ghost{border-color:var(--border);color:var(--text);background:0 0}.btn-ghost:not(:disabled):hover{border-color:var(--border-strong);background:#ffffff08}.alert{border:1px solid var(--border);border-radius:10px;margin-bottom:1rem;padding:.85rem 1rem;font-size:.9rem;line-height:1.45}.alert-error{color:#ffb4bc;background:#ff6b7a1a;border-color:#ff6b7a66}.alert-success{color:#9aefc2;background:#3dd68c1a;border-color:#3dd68c66}.alert-warn{color:#ffd48a;background:#ffc4571a;border-color:#ffc45759}.users-list{flex-direction:column;gap:.75rem;display:flex}.user-row{border:1px solid var(--border);background:#070b128c;border-radius:12px;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);align-items:center;gap:1rem;padding:1rem;transition:border-color .16s,background .16s;display:grid}.user-row:hover{background:#2fd4c20a;border-color:#2fd4c247}.user-info{min-width:0}.user-name{font-family:var(--font-display);margin:0;font-size:.98rem;font-weight:600}.user-email{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin:.2rem 0 0;font-size:.82rem;overflow:hidden}.user-ramal input{border:1px solid var(--border);background:var(--bg-deep);width:100%;color:var(--text);border-radius:10px;outline:none;padding:.7rem .85rem}.user-ramal input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2fd4c21f}.user-ramal label{color:var(--text-muted);margin-bottom:.35rem;font-size:.75rem;display:block}.empty-state,.loading-state{text-align:center;color:var(--text-muted);padding:2rem 1rem}.spinner{border:2px solid #fff3;border-top-color:var(--accent);border-radius:50%;width:1.1rem;height:1.1rem;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.webphone-shell{background:var(--bg-deep);place-items:center;min-height:100vh;padding:1.5rem;display:grid}.webphone-card{text-align:center;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);width:min(420px,100%);padding:1.5rem}.webphone-card img{height:32px;margin-bottom:1rem}.webphone-card p{color:var(--text-muted);margin:0;line-height:1.5}@media (width<=720px){.topbar{padding:1rem}.brand-meta{display:none}.steps{flex-direction:column}.user-row{grid-template-columns:1fr}.page{padding-top:1.5rem}}