*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--primary: #7C5CBF;--primary-light: #A78BFA;--primary-xlight: #EDE8F5;--primary-dark: #5A3FA0;--bg: #F8F7FF;--card: #ffffff;--border: #E8E3F3;--border-light: #D4C8F0;--input-bg: #F4F3F8;--text: #1A1A2E;--text-secondary: #6B7280;--text-muted: #A89DC4;--text-purple: #4B4069;--success: #10B981;--danger: #E24B4A;--danger-light: #FACACA;--font: "Nunito", sans-serif;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 24px;--radius-full: 999px;--shadow-card: 0 4px 32px rgba(124, 92, 191, .1);--shadow-btn: 0 6px 20px rgba(124, 92, 191, .35);--nav-height: 64px;--topbar-height: 60px}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;background:var(--bg);box-shadow:0 0 60px #0000001f}button{font-family:var(--font);cursor:pointer;border:none;background:none}input,textarea,select{font-family:var(--font)}a{text-decoration:none;color:inherit}.page{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}.btn-primary{width:100%;padding:15px;background:var(--primary);color:#fff;border-radius:var(--radius-md);font-size:15px;font-weight:800;letter-spacing:.2px;transition:opacity .2s,transform .15s}.btn-primary:hover{opacity:.92;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);opacity:1}.btn-primary:disabled{opacity:.5;transform:none;cursor:not-allowed}.btn-ghost{width:100%;padding:13px;background:transparent;color:var(--text-muted);font-size:14px;font-weight:700}.btn-ghost:hover{color:var(--primary)}.input{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:15px;color:var(--text);background:var(--input-bg);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #7c5cbf1f;background:#fff}.input::placeholder{color:var(--text-muted)}.tag{padding:7px 14px;border:1.5px solid var(--border-light);border-radius:var(--radius-full);font-size:13px;font-weight:700;color:var(--primary);background:var(--input-bg);cursor:pointer;transition:all .18s;white-space:nowrap}.tag.selected{border-color:var(--primary);background:var(--primary-xlight);color:var(--primary-dark)}.bottom-nav{display:flex;background:var(--card);border-top:1px solid var(--border);height:var(--nav-height);flex-shrink:0}.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;color:var(--border-light);transition:color .15s;padding-bottom:env(safe-area-inset-bottom,0)}.nav-btn i{font-size:22px;color:var(--border-light)}.nav-btn.active,.nav-btn.active i{color:var(--primary)}.spinner{width:32px;height:32px;border:3px solid var(--primary-xlight);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}.loader-center{flex:1;display:flex;align-items:center;justify-content:center}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.section-label{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.online-dot{width:12px;height:12px;background:var(--success);border-radius:50%;border:2px solid #fff}.toggle{width:44px;height:24px;background:var(--primary);border-radius:var(--radius-full);position:relative;cursor:pointer;border:none;transition:background .2s;flex-shrink:0}.toggle.off{background:var(--border-light)}.toggle:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;right:3px;transition:right .2s,left .2s;box-shadow:0 1px 4px #00000026}.toggle.off:after{right:auto;left:3px}.icon-btn{background:var(--input-bg);border:1.5px solid var(--border-light);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0}.icon-btn i{color:var(--primary);font-size:20px}.icon-btn:hover{background:var(--primary-xlight)}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 32px;gap:12px}.empty-state .empty-icon{font-size:56px}.empty-state h3{font-size:18px;font-weight:800;color:var(--text)}.empty-state p{font-size:14px;color:var(--text-muted);font-weight:500}