*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--blue-50: #E6F1FB;--blue-100: #B5D4F4;--blue-200: #85B7EB;--blue-400: #378ADD;--blue-600: #185FA5;--blue-800: #0C447C;--blue-900: #042C53;--text-primary: #111827;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--border: #e5e7eb;--surface: #f9fafb;--white: #ffffff;--green: #1D9E75;--amber: #BA7517;--gray: #888780;--red: #dc2626;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px}html,body,#root{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;background:var(--blue-900);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden}.app-shell{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;background:var(--white);position:relative}.page{display:flex;flex-direction:column;height:100%}.page-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0}.top-bar h1{font-size:18px;font-weight:600;color:var(--text-primary)}.bottom-nav{display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:var(--white);border-top:1px solid var(--border);z-index:100;padding-bottom:env(safe-area-inset-bottom)}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px 8px;cursor:pointer;border:none;background:none;color:var(--text-tertiary);font-size:10px;gap:3px;text-decoration:none;transition:color .15s}.nav-item.active{color:var(--blue-600)}.nav-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-dot{width:4px;height:4px;border-radius:50%;background:var(--blue-600)}.hero-header{background:var(--blue-900);padding:48px 24px 36px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.app-icon{width:72px;height:72px;background:var(--blue-800);border-radius:20px;border:1.5px solid var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:32px}.app-name{font-size:26px;font-weight:700;color:var(--blue-50)}.app-tagline{font-size:13px;color:var(--blue-200)}.card{background:var(--white);border-radius:var(--radius-xl) var(--radius-xl) 0 0;flex:1;padding:28px 20px 32px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.btn-primary{background:var(--blue-600);border:none;border-radius:var(--radius-md);color:#fff;font-size:16px;font-weight:600;padding:16px;cursor:pointer;width:100%;transition:background .15s}.btn-primary:active{background:var(--blue-800)}.btn-primary:disabled{background:var(--blue-200);cursor:not-allowed}.btn-secondary{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius-md);color:var(--blue-600);font-size:14px;font-weight:500;padding:10px 16px;cursor:pointer}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.avatar-sm{width:36px;height:36px;font-size:13px}.avatar-md{width:44px;height:44px;font-size:15px}.avatar-lg{width:60px;height:60px;font-size:20px}.av-blue{background:var(--blue-50);color:var(--blue-800)}.av-purple{background:#eeedfe;color:#534ab7}.av-teal{background:#e1f5ee;color:#0f6e56}.av-coral{background:#faece7;color:#993c1d}.av-pink{background:#fbeaf0;color:#993556}.status-wrap{position:relative}.status-dot{width:10px;height:10px;border-radius:50%;position:absolute;bottom:1px;right:1px;border:2px solid var(--white)}.dot-online{background:var(--green)}.dot-busy{background:var(--amber)}.dot-offline{background:var(--gray)}.badge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500}.badge-online{background:#e1f5ee;color:#0f6e56}.badge-busy{background:#faeeda;color:#854f0b}.badge-offline{background:#f1efe8;color:#5f5e5a}.section-label{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px 6px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}.stat-card{background:var(--surface);border-radius:var(--radius-md);padding:14px}.stat-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px}.stat-val{font-size:24px;font-weight:700;color:var(--text-primary)}.stat-sub{font-size:11px;color:var(--text-tertiary);margin-top:2px}.list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.list-item:last-child{border-bottom:none}.error-msg{background:#fef2f2;border:1px solid #fecaca;color:var(--red);font-size:13px;border-radius:var(--radius-sm);padding:10px 14px;text-align:center}.spinner-wrap{display:flex;align-items:center;justify-content:center;padding:40px}.spinner{width:32px;height:32px;border:3px solid var(--blue-100);border-top-color:var(--blue-600);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#042c53e0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:999}.loading-overlay .spinner{border-color:#fff3;border-top-color:#fff;width:40px;height:40px}.loading-overlay p{font-size:14px;color:var(--blue-100)}.home-hero{background:var(--blue-900);padding:20px 20px 24px}.home-hero .greeting{font-size:12px;color:var(--blue-200);margin-bottom:2px}.home-hero .name{font-size:22px;font-weight:700;color:var(--blue-50);margin-bottom:14px}.credit-row{display:flex;align-items:center;justify-content:space-between;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px}.credit-label{font-size:11px;color:var(--blue-200);margin-bottom:2px}.credit-val{font-size:24px;font-weight:700;color:var(--blue-50)}.topup-btn{background:var(--blue-600);border:none;border-radius:var(--radius-sm);color:#fff;font-size:13px;font-weight:500;padding:8px 14px;cursor:pointer}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.qa-item{background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-decoration:none}.qa-item svg{width:22px;height:22px;stroke:var(--blue-200);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.qa-item span{font-size:11px;color:var(--blue-200);text-align:center}.online-pill{position:absolute;top:16px;right:16px;background:#1d9e7533;border:1px solid var(--green);border-radius:20px;padding:4px 10px;font-size:11px;color:#5dcaa5;display:flex;align-items:center;gap:5px}.online-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}.readers-scroll{display:flex;gap:12px;padding:4px 16px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.readers-scroll::-webkit-scrollbar{display:none}.reader-chip{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;cursor:pointer}.reader-chip .rc-name{font-size:11px;color:var(--text-primary);max-width:58px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-chip .rc-type{font-size:10px;color:var(--text-tertiary)}.reader-card{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.reader-card .info{flex:1}.reader-card .r-name{font-size:14px;font-weight:600;color:var(--text-primary)}.reader-card .r-spec{font-size:12px;color:var(--text-secondary);margin-top:2px}.call-btn{width:36px;height:36px;border-radius:50%;background:var(--blue-50);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue-600)}.call-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.msg-list{display:flex;flex-direction:column;padding:12px 16px;gap:6px}.bubble-out{background:var(--blue-600);color:#fff;padding:10px 14px;border-radius:18px 18px 4px;font-size:14px;max-width:75%;align-self:flex-end}.bubble-in{background:var(--surface);padding:10px 14px;border-radius:18px 18px 18px 4px;font-size:14px;max-width:75%;align-self:flex-start;color:var(--text-primary)}.msg-time{font-size:11px;color:var(--text-tertiary)}.msg-time.right{align-self:flex-end}.msg-input-row{display:flex;gap:8px;padding:10px 16px 12px;border-top:1px solid var(--border);background:var(--white);flex-shrink:0}.msg-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:10px 16px;font-size:14px;color:var(--text-primary);outline:none}.send-btn{width:38px;height:38px;border-radius:50%;background:var(--blue-600);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:center}.send-btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.promo-card{margin:0 16px 14px;background:var(--blue-50);border-radius:var(--radius-md);border:1px solid var(--blue-100);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer}.promo-icon{width:42px;height:42px;border-radius:50%;background:var(--blue-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}.promo-title{font-size:13px;font-weight:600;color:var(--blue-900)}.promo-sub{font-size:11px;color:var(--blue-600);margin-top:2px}.pref-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}.pref-left{display:flex;align-items:center;gap:12px}.pref-icon{width:32px;height:32px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:16px}.pref-label{font-size:14px;color:var(--text-primary)}.pref-sub{font-size:11px;color:var(--text-secondary);margin-top:1px}.toggle{width:38px;height:22px;border-radius:22px;background:var(--blue-600);position:relative;cursor:pointer;border:none;flex-shrink:0}.toggle:after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:right .15s}.toggle.off{background:var(--border)}.toggle.off:after{right:auto;left:3px}.pin-row{display:flex;gap:10px;justify-content:center}.pin-box{width:46px;height:56px;border:2px solid var(--blue-100);border-radius:var(--radius-md);background:var(--blue-50);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--blue-900);transition:border-color .1s}.pin-box.active{border-color:var(--blue-400);background:#fff;box-shadow:0 0 0 3px #378add26}.pin-box.filled{border-color:var(--blue-600);background:var(--blue-100)}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.nk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 8px 10px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.nk:active{background:var(--blue-50)}.nk .n{font-size:22px;font-weight:500;color:var(--text-primary);line-height:1}.nk .l{font-size:9px;color:var(--text-tertiary);letter-spacing:.12em;margin-top:3px}.nk.empty{background:transparent;border-color:transparent;cursor:default}.nk.del{display:flex;align-items:center;justify-content:center;background:transparent;border-color:transparent;font-size:22px;color:var(--blue-400)}