body,html{background:#fff;color:#1250b4;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{background:#f1f5f9;border-radius:4px;color:#1e40af;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em;padding:2px 6px}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#1e40af;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#1e3a8a}:root{--color-bg:#fff;--color-border-light:#cbd5e1;--color-text:#1e293b;--color-text-muted:#64748b;--color-text-dark:#475569;--color-accent:#1e3a8a;--color-accent-hover:#1e40af;--color-accent-light:#3b82f6;--color-error:#dc2626;--gradient-primary:linear-gradient(135deg,#1e3a8a,#3b82f6);--gradient-secondary:linear-gradient(135deg,#1e40af,#60a5fa);--gradient-tertiary:linear-gradient(135deg,#0284c7,#3b82f6);--radius-xl:12px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.login-container{background:#f8fafc;background:var(--color-bg-secondary);min-height:100vh;overflow:hidden;padding:20px;position:relative}.loading-overlay,.login-container{align-items:center;display:flex;justify-content:center}.loading-overlay{animation:fadeIn .4s ease forwards;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#fffffffa;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}.loading-content{align-items:center;animation:slideDownCenter .6s cubic-bezier(.34,1.56,.64,1) forwards;display:flex;flex-direction:column;gap:24px}.loading-logo-wrapper{align-items:center;display:flex;height:120px;justify-content:center;position:relative;width:120px}.loading-logo{animation:logoFloat 3s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(30,58,138,.15));height:80px;position:relative;width:80px;z-index:2}.loading-text{animation:textPulse 2s ease-in-out infinite;color:#1e293b;color:var(--color-text);font-size:16px;font-weight:600;text-align:center}@keyframes slideDownCenter{0%{opacity:0;transform:translateY(-100px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes textPulse{0%,to{opacity:1}50%{opacity:.6}}.loading-spinner-new{z-index:1}.loading-spinner-new,.spinner-ring-outer{height:100%;left:0;position:absolute;top:0;width:100%}.spinner-ring-outer{animation:spinClockwise 1.5s linear infinite;border-color:#1e3a8a #3b82f6 #0000 #0000;border-radius:50%;border-style:solid;border-width:3px}.spinner-ring-inner{animation:spinCounterClockwise 2s linear infinite;border-color:#0000 #0000 #1e40af #3b82f6;border-radius:50%;border-style:solid;border-width:2px;height:calc(100% - 16px);left:8px;opacity:.6;position:absolute;top:8px;width:calc(100% - 16px)}.spinner-dot{animation:orbitPath 1.5s linear infinite;background:#1e3a8a;border-radius:50%;box-shadow:0 0 12px #1e3a8a;height:8px;left:50%;margin:-4px 0 0 -4px;position:absolute;top:50%;width:8px}@keyframes spinClockwise{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinCounterClockwise{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}@keyframes orbitPath{0%{transform:translateY(-56px) rotate(0deg)}to{transform:translateY(-56px) rotate(1turn)}}.bg-gradient{animation:gradientShift 15s ease infinite;background:radial-gradient(circle at 20% 50%,#1e3a8a14 0,#0000 50%),radial-gradient(circle at 80% 50%,#3b82f60f 0,#0000 50%);height:100%;position:absolute;width:100%}@keyframes gradientShift{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.bg-shapes{height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%}.shape{animation:float 20s ease-in-out infinite;border-radius:50%;filter:blur(80px);opacity:.15;position:absolute}.shape-1{animation-delay:0s;background:linear-gradient(135deg,#1e3a8a,#3b82f6);background:var(--gradient-primary);height:400px;left:-200px;top:-200px;width:400px}.shape-2{animation-delay:5s;background:linear-gradient(135deg,#1e40af,#60a5fa);background:var(--gradient-secondary);bottom:-150px;height:350px;right:-150px;width:350px}.shape-3{animation-delay:10s;background:linear-gradient(135deg,#0284c7,#3b82f6);background:var(--gradient-tertiary);height:300px;left:50%;top:50%;transform:translate(-50%,-50%);width:300px}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.login-box{animation:slideUp .6s cubic-bezier(.16,1,.3,1);background:#fff;background:var(--color-bg);border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:12px;border-radius:var(--radius-xl);box-shadow:0 8px 16px #1e3a8a1f;box-shadow:var(--shadow-xl);max-width:480px;padding:32px 40px 28px;position:relative;width:100%;z-index:10}.login-header{animation:fadeIn .6s ease both;margin-bottom:20px;text-align:center}.logo-container{animation:glow 3s ease-in-out infinite;color:#1e3a8a;color:var(--color-accent);display:inline-flex;margin-bottom:10px}.logo-container svg{height:48px;width:48px}.logo-img{filter:drop-shadow(0 2px 8px rgba(30,58,138,.2));height:64px;object-fit:contain;width:64px}@keyframes glow{0%,to{filter:drop-shadow(0 0 8px rgba(30,58,138,.3))}50%{filter:drop-shadow(0 0 16px rgba(59,130,246,.5))}}.login-title{color:#1e3a8a;color:var(--color-accent);font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px}.login-subtitle{color:#64748b;color:var(--color-text-muted);font-size:13px;font-weight:500}.mode-tabs{animation:fadeIn .6s ease both;background:#f1f5f9;background:var(--color-bg-tertiary);border-radius:8px;border-radius:var(--radius-md);display:flex;gap:8px;margin-bottom:16px;padding:4px;position:relative}.mode-tab{background:#0000;border:none;border-radius:4px;border-radius:calc(var(--radius-md) - 4px);color:#64748b;color:var(--color-text-muted);cursor:pointer;flex:1 1;font-size:14px;font-weight:600;padding:10px 20px;position:relative;transition:all .2s ease;transition:all var(--transition-fast);z-index:2}.mode-tab.active{color:#fff;color:var(--color-bg)}.mode-tab:hover:not(.active):not(:disabled){color:#1e293b;color:var(--color-text)}.mode-tab:disabled{cursor:not-allowed;opacity:.5}.tab-indicator{background:#1e3a8a;background:var(--color-accent);border-radius:4px;border-radius:calc(var(--radius-md) - 4px);bottom:4px;box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);position:absolute;top:4px;transition:transform .25s cubic-bezier(.4,0,.2,1);width:calc(50% - 6px);will-change:transform;z-index:1}.tab-indicator.left{transform:translateX(4px)}.tab-indicator.right{transform:translateX(calc(100% + 8px))}.error-message{align-items:center;animation:slideDown .3s ease,shake .3s ease;border-radius:8px;border-radius:var(--radius-md);display:flex;font-size:13px;gap:10px;margin-bottom:14px;padding:12px 14px}.error-message:not(.success){background:#dc26261a;border:1px solid #dc26264d;color:#dc2626}.error-message.success{background:#0596691a;border:1px solid #0596694d;color:#059669}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.login-form{animation:fadeIn .6s ease both}.form-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.input-group{animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) both;position:relative}.input-group:first-child{animation-delay:.05s}.input-group:nth-child(2){animation-delay:.1s}.input-group:nth-child(3){animation-delay:.15s}.input-group:nth-child(4){animation-delay:.2s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.input-icon{align-items:center;color:#64748b;color:var(--color-text-muted);display:flex;left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:color .2s ease;transition:color var(--transition-fast);z-index:2}.input-field{background:#fff;background:var(--color-bg);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);color:#1e293b;color:var(--color-text);font-family:inherit;font-size:14px;outline:none;padding:12px 40px;transition:all .2s ease;transition:all var(--transition-fast);width:100%}.input-field::placeholder{color:#64748b;color:var(--color-text-muted)}.input-field:focus{border-color:#1e3a8a;border-color:var(--color-accent);box-shadow:0 0 0 3px #1e3a8a1a}.input-field:focus+.input-icon,.input-group:focus-within .input-icon{color:#1e3a8a;color:var(--color-accent)}.input-field:disabled{background:#f1f5f9;background:var(--color-bg-tertiary);cursor:not-allowed;opacity:.6}.input-group.error .input-field{background:#dc262605;border-color:#dc2626;border-color:var(--color-error)}.field-error,.input-group.error .input-icon{color:#dc2626;color:var(--color-error)}.field-error{animation:slideDown .3s ease;font-size:12px;margin-top:6px;padding-left:4px}.password-toggle{align-items:center;background:#0000;border:none;color:#64748b;color:var(--color-text-muted);cursor:pointer;display:flex;padding:6px;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color .2s ease;transition:color var(--transition-fast)}.password-toggle:hover:not(:disabled){color:#1e3a8a;color:var(--color-accent)}.password-toggle:disabled{cursor:not-allowed;opacity:.4}.terms-checkbox{align-items:flex-start;animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) .25s both;display:flex;gap:10px;padding:8px 0}.terms-checkbox input[type=checkbox]{cursor:pointer;opacity:0;position:absolute}.checkbox-custom{align-items:center;background:#fff;background:var(--color-bg);border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:4px;cursor:pointer;display:flex;height:18px;justify-content:center;margin-top:1px;min-width:18px;transition:all .2s ease;transition:all var(--transition-fast);width:18px}.terms-checkbox input[type=checkbox]:checked+label .checkbox-custom{background:#1e3a8a;background:var(--color-accent);border-color:#1e3a8a;border-color:var(--color-accent)}.terms-checkbox input[type=checkbox]:checked+label .checkbox-custom svg{animation:checkPop .3s cubic-bezier(.68,-.55,.265,1.55);color:#fff;color:var(--color-bg)}@keyframes checkPop{0%{transform:scale(0) rotate(0deg)}50%{transform:scale(1.2) rotate(180deg)}to{transform:scale(1) rotate(1turn)}}.terms-checkbox input[type=checkbox]:disabled+label{cursor:not-allowed;opacity:.5}.terms-checkbox label{align-items:flex-start;color:#64748b;color:var(--color-text-muted);cursor:pointer;display:flex;font-size:13px;gap:8px;line-height:1.5}.terms-link{color:#1e3a8a;color:var(--color-accent);cursor:pointer;font-weight:600;transition:opacity .2s ease;transition:opacity var(--transition-fast)}.terms-link:hover{opacity:.8;text-decoration:underline}.submit-btn{align-items:center;animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) .2s both;background:#1e3a8a;background:var(--color-accent);border:none;border-radius:8px;border-radius:var(--radius-md);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);color:#fff;color:var(--color-bg);cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:10px;justify-content:center;min-height:46px;overflow:hidden;padding:13px;position:relative;transition:all .2s ease;transition:all var(--transition-fast);width:100%;will-change:transform}.submit-btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.submit-btn:hover:not(:disabled):before{left:100%}.submit-btn:hover:not(:disabled){background:#1e40af;background:var(--color-accent-hover);box-shadow:0 4px 8px #1e3a8a1a;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{cursor:not-allowed;opacity:.7}.login-footer{animation:fadeIn .6s ease both;border-top:1px solid #e2e8f0;border-top:1px solid var(--color-border);margin-top:16px;padding-top:16px;text-align:center}.footer-text{align-items:center;color:#64748b;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:13px;gap:8px;justify-content:center}.footer-link{background:#0000;border:none;color:#1e3a8a;color:var(--color-accent);cursor:pointer;font-size:13px;font-weight:600;padding:0;position:relative;transition:opacity .2s ease;transition:opacity var(--transition-fast)}.footer-link:after{background:#1e3a8a;background:var(--color-accent);bottom:-2px;content:"";height:1px;left:0;position:absolute;transform:scaleX(0);transition:transform .2s ease;transition:transform var(--transition-fast);width:100%}.footer-link:hover:not(:disabled){opacity:.8}.footer-link:hover:not(:disabled):after{transform:scaleX(1)}.footer-link:disabled{cursor:not-allowed;opacity:.5}.security-badge{align-items:center;animation:fadeIn .6s ease both;background:#f1f5f9;background:var(--color-bg-tertiary);border-radius:8px;border-radius:var(--radius-md);color:#64748b;color:var(--color-text-muted);display:flex;font-size:11px;font-weight:500;gap:8px;justify-content:center;margin-top:14px;padding:6px 14px}.security-badge svg{color:#1e3a8a;color:var(--color-accent);height:14px;width:14px}@media (max-width:768px){.login-box{max-width:440px;padding:40px 32px}.login-title{font-size:28px}.shape{filter:blur(60px)}.loading-logo-wrapper{height:100px;width:100px}.loading-logo{height:70px;width:70px}.spinner-dot{animation:orbitPath 1.5s linear infinite}@keyframes orbitPath{0%{transform:translateY(-46px) rotate(0deg)}to{transform:translateY(-46px) rotate(1turn)}}}@media (max-width:480px){.login-container{padding:12px}.login-box{border-radius:10px;border-radius:var(--radius-lg);padding:24px 20px 20px}.login-title{font-size:22px}.login-subtitle{font-size:12px}.logo-container svg{height:40px;width:40px}.logo-img{height:56px;width:56px}.mode-tab{font-size:13px;padding:8px 14px}.input-field{font-size:16px;padding:10px 40px}.submit-btn{font-size:14px;min-height:42px;padding:12px}.footer-text{font-size:12px}.form-fields{gap:10px}.shape{filter:blur(40px);opacity:.1}.shape-1{height:300px;width:300px}.shape-2{height:250px;width:250px}.shape-3{height:200px;width:200px}.loading-logo-wrapper{height:90px;width:90px}.loading-logo{height:60px;width:60px}.loading-text{font-size:14px}@keyframes orbitPath{0%{transform:translateY(-41px) rotate(0deg)}to{transform:translateY(-41px) rotate(1turn)}}}@media (max-width:360px){.login-box{padding:20px 16px 16px}.login-title{font-size:20px}.login-subtitle{font-size:11px}.logo-container{margin-bottom:8px}.logo-container svg{height:36px;width:36px}.logo-img{height:48px;width:48px}.mode-tab{font-size:12px;padding:7px 10px}.input-field{font-size:14px;padding:9px 38px}.terms-checkbox label{font-size:12px}.submit-btn{font-size:13px;min-height:40px;padding:11px}.footer-link,.footer-text{font-size:11px}.security-badge{font-size:10px;margin-top:12px;padding:5px 12px}.security-badge svg{height:12px;width:12px}.loading-logo-wrapper{height:80px;width:80px}.loading-logo{height:50px;width:50px}.loading-text{font-size:13px}@keyframes orbitPath{0%{transform:translateY(-36px) rotate(0deg)}to{transform:translateY(-36px) rotate(1turn)}}}.footer-link:focus-visible,.mode-tab:focus-visible,.submit-btn:focus-visible{outline:2px solid #1e3a8a;outline:2px solid var(--color-accent);outline-offset:2px}.input-field:focus-visible{border-color:#1e3a8a;border-color:var(--color-accent);box-shadow:0 0 0 3px #1e3a8a1a;outline:none}.password-toggle:focus-visible{border-radius:6px;border-radius:var(--radius-sm);outline:2px solid #1e3a8a;outline:2px solid var(--color-accent);outline-offset:2px}@media print{.login-container{background:#fff}.bg-gradient,.bg-shapes,.loading-overlay,.security-badge{display:none}.login-box{border:1px solid #e2e8f0;border:1px solid var(--color-border);box-shadow:none}}.admin-container{background:#f8fafc;background:var(--color-bg-secondary);color:#1e293b;color:var(--color-text-primary);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;overflow:hidden;width:100%}.admin-sidebar{background:#fff;background:var(--color-bg-primary);border-right:1px solid #e2e8f0;border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100vh;left:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;transition:width .3s ease;transition:width var(--transition-normal);width:280px;width:var(--sidebar-width);z-index:100}.admin-sidebar.collapsed{width:80px;width:var(--sidebar-collapsed-width)}.sidebar-header{min-height:72px}.logo{font-size:18px;overflow:hidden;white-space:nowrap}.collapsed .logo span{display:none}.collapse-btn{flex-shrink:0}.user-avatar{height:40px;width:40px}.avatar-placeholder{font-size:16px}.user-details{overflow:hidden}.user-name{font-size:14px}.user-role{font-size:11px}.collapsed .user-details{display:none}.menu-item{border-radius:8px;border-radius:var(--radius-md);color:#475569;color:var(--color-text-secondary);font-size:14px}.menu-item.active{background:#1e3a8a;background:var(--color-navy-primary)}.collapsed .menu-item span{display:none}.logout-item .menu-item:hover{background:#fef2f2;color:#dc2626;color:var(--color-danger)}.sidebar-footer{color:#94a3b8;color:var(--color-text-muted);font-size:11px;text-align:center}.admin-main{display:flex;flex:1 1;flex-direction:column;height:100vh;margin-left:280px;margin-left:var(--sidebar-width);overflow:hidden;transition:margin-left .3s ease;transition:margin-left var(--transition-normal)}.admin-main.main-collapsed{margin-left:80px;margin-left:var(--sidebar-collapsed-width)}.admin-header{align-items:center;background:#fff;background:var(--color-bg-primary);border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--color-border);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-shrink:0;justify-content:space-between;padding:24px 32px;padding:var(--spacing-xl) var(--spacing-2xl)}.admin-header h1{color:#1e3a8a;color:var(--color-navy-primary);font-size:22px;font-weight:700;margin:0}.header-right{align-items:center;display:flex;gap:16px;gap:var(--spacing-lg)}.header-user-info{border-color:#3b82f6;border-color:var(--color-navy-light)}.admin-content,.header-user-info{background:#f8fafc;background:var(--color-bg-secondary)}.admin-content{flex:1 1;overflow-y:auto;padding:32px;padding:var(--spacing-2xl)}.ws-dashboard{display:flex;flex-direction:column;gap:24px;gap:var(--spacing-xl);margin:0 auto;max-width:1400px}.ws-tabs{background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:10px;border-radius:var(--radius-lg);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);padding:12px;padding:var(--spacing-md)}.ws-tab,.ws-tabs{display:flex;gap:8px;gap:var(--spacing-sm)}.ws-tab{align-items:center;background:#0000;border:none;border-radius:8px;border-radius:var(--radius-md);color:#475569;color:var(--color-text-secondary);cursor:pointer;flex:1 1;font-size:14px;font-weight:600;justify-content:center;padding:12px 24px;padding:var(--spacing-md) var(--spacing-xl);position:relative;transition:all .2s ease;transition:all var(--transition-fast)}.ws-tab:hover{background:#f1f5f9;background:var(--color-bg-tertiary);color:#1e3a8a;color:var(--color-navy-primary)}.ws-tab.active{background:#1e3a8a;background:var(--color-navy-primary);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);color:#fff}.ws-tab svg{flex-shrink:0}.tab-badge{background:#dc2626;background:var(--color-danger);border-radius:10px;color:#fff;font-size:10px;font-weight:700;min-width:18px;padding:2px 6px;position:absolute;right:4px;text-align:center;top:4px}.ws-tab.active .tab-badge{background:#fff;color:#1e3a8a;color:var(--color-navy-primary)}.ws-tab-content{animation:fadeIn .3s ease;display:flex;flex-direction:column;gap:24px;gap:var(--spacing-xl)}.ws-card{background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:10px;border-radius:var(--radius-lg);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);overflow:hidden}.ws-card-header{align-items:center;background:#f8fafc;background:var(--color-bg-secondary);border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--color-border);color:#1e3a8a;color:var(--color-navy-primary);display:flex;font-size:15px;font-weight:700;gap:12px;gap:var(--spacing-md);padding:16px 24px;padding:var(--spacing-lg) var(--spacing-xl)}.ws-card-header svg{color:#3b82f6;color:var(--color-navy-light);flex-shrink:0}.ws-card-body{padding:24px;padding:var(--spacing-xl)}.ws-form-group{display:flex;flex-direction:column;gap:12px;gap:var(--spacing-md)}.ws-label{font-weight:600}.ws-input,.ws-label{color:#1e293b;color:var(--color-text-primary);font-size:14px}.ws-input{background:#f8fafc;background:var(--color-bg-secondary);border:1.5px solid #e2e8f0;border:1.5px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);font-family:Courier New,monospace;outline:none;padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg);transition:all .2s ease;transition:all var(--transition-fast);width:100%}.ws-input:focus{background:#fff;background:var(--color-bg-primary);border-color:#3b82f6;border-color:var(--color-navy-light);box-shadow:0 0 0 3px #3b82f61a}.ws-input::placeholder{color:#94a3b8;color:var(--color-text-muted)}.ws-shortcut-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px;gap:var(--spacing-sm)}.ws-shortcut-label{color:#94a3b8;color:var(--color-text-muted);font-size:12px}.ws-shortcut-btn{background:#f1f5f9;background:var(--color-bg-tertiary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-sm);color:#475569;color:var(--color-text-secondary);cursor:pointer;font-family:Courier New,monospace;font-size:12px;padding:4px 10px;transition:all .2s ease;transition:all var(--transition-fast)}.ws-shortcut-btn:hover{background:#1e3a8a;background:var(--color-navy-primary);border-color:#1e3a8a;border-color:var(--color-navy-primary);color:#fff}.ws-info-box{background:#f8fafc;background:var(--color-bg-secondary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:12px;gap:var(--spacing-md);padding:16px;padding:var(--spacing-lg)}.ws-info-item{align-items:center;display:flex;justify-content:space-between;padding:8px 0;padding:var(--spacing-sm) 0}.ws-info-item strong{color:#475569;color:var(--color-text-secondary);font-size:13px;font-weight:600}.ws-info-item code{background:#1e3a8a14;border-radius:6px;border-radius:var(--radius-sm);color:#1e3a8a;color:var(--color-navy-primary);font-family:Courier New,monospace;font-size:13px;font-weight:600;padding:4px 10px}.ws-status-section{display:flex;justify-content:center;margin-bottom:16px;margin-bottom:var(--spacing-lg);padding:24px 0;padding:var(--spacing-xl) 0}.ws-status-badge{align-items:center;border:2px solid;border-radius:50px;display:flex;font-size:15px;font-weight:700;gap:12px;gap:var(--spacing-md);padding:12px 32px;padding:var(--spacing-md) var(--spacing-2xl);transition:all .2s ease;transition:all var(--transition-fast)}.ws-status-badge.status-running{background:#f0fdf4;border-color:#86efac;color:#166534}.ws-status-badge.status-stopped{background:#fef2f2;border-color:#fecaca;color:#991b1b}.status-dot{animation:pulse 2s infinite;border-radius:50%;height:12px;width:12px}.status-running .status-dot{background:#22c55e;box-shadow:0 0 0 0 #22c55eb3}.status-stopped .status-dot{background:#ef4444;box-shadow:0 0 0 0 #ef4444b3}.ws-actions{display:flex;gap:12px;gap:var(--spacing-md);padding:16px 0;padding:var(--spacing-lg) 0}.ws-btn{align-items:center;border:none;border-radius:8px;border-radius:var(--radius-md);cursor:pointer;display:flex;flex:1 1;font-size:14px;font-weight:600;gap:8px;gap:var(--spacing-sm);justify-content:center;padding:12px 24px;padding:var(--spacing-md) var(--spacing-xl);transition:all .2s ease;transition:all var(--transition-fast)}.ws-btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.ws-btn:not(:disabled):hover{box-shadow:0 4px 8px #1e3a8a1a;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.ws-btn:not(:disabled):active{transform:translateY(0)}.ws-btn-start{background:#1e3a8a;background:var(--color-navy-primary);color:#fff}.ws-btn-start:not(:disabled):hover{background:#1e40af;background:var(--color-navy-secondary)}.ws-btn-stop{background:#fef2f2;border:1.5px solid #fecaca;color:#dc2626;color:var(--color-danger)}.ws-btn-stop:not(:disabled):hover{background:#dc2626;background:var(--color-danger);border-color:#dc2626;border-color:var(--color-danger);color:#fff}.ws-btn-warning{background:#fffbeb;border:1.5px solid #fde68a;color:#d97706;color:var(--color-warning)}.ws-btn-warning:not(:disabled):hover{background:#d97706;background:var(--color-warning);border-color:#d97706;border-color:var(--color-warning);color:#fff}.ws-btn-secondary{background:#f1f5f9;background:var(--color-bg-tertiary);border:1.5px solid #e2e8f0;border:1.5px solid var(--color-border);color:#475569;color:var(--color-text-secondary)}.ws-btn-secondary:not(:disabled):hover{background:#3b82f6;background:var(--color-navy-light);border-color:#3b82f6;border-color:var(--color-navy-light);color:#fff}.spinner{animation:spin .6s linear infinite;border:2px solid #ffffff4d;border-top-color:initial;height:14px;width:14px}.ws-note-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;border-radius:var(--radius-md);padding:16px;padding:var(--spacing-lg)}.ws-note-title{align-items:center;color:#1e3a8a;color:var(--color-navy-primary);display:flex;font-size:13px;font-weight:700;gap:8px;gap:var(--spacing-sm);margin-bottom:12px;margin-bottom:var(--spacing-md)}.ws-note-list{display:flex;flex-direction:column;gap:6px;list-style:none;padding:0}.ws-note-list li{color:#475569;color:var(--color-text-secondary);font-size:12px;line-height:1.6;padding-left:16px;padding-left:var(--spacing-lg);position:relative}.ws-note-list li:before{color:#3b82f6;color:var(--color-navy-light);content:"•";font-weight:700;left:8px;left:var(--spacing-sm);position:absolute}.ws-note-list code{background:#1e3a8a14;border-radius:4px;color:#1e3a8a;color:var(--color-navy-primary);font-family:Courier New,monospace;font-size:11px;font-weight:600;padding:2px 6px}.ws-clear-btn{background:#f1f5f9;background:var(--color-bg-tertiary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-sm);color:#475569;color:var(--color-text-secondary);cursor:pointer;font-size:12px;margin-left:auto;padding:4px 12px;transition:all .2s ease;transition:all var(--transition-fast)}.ws-clear-btn:hover{background:#dc2626;background:var(--color-danger);border-color:#dc2626;border-color:var(--color-danger);color:#fff}.ws-clear-btn:disabled{cursor:not-allowed;opacity:.5}.ws-terminal{background:#0f172a;border-radius:6px;border-radius:var(--radius-sm);display:flex;flex-direction:column;font-family:Courier New,monospace;font-size:13px;gap:2px;line-height:1.7;max-height:500px;min-height:300px;overflow-y:auto;padding:24px;padding:var(--spacing-xl)}.ws-terminal::-webkit-scrollbar{width:8px}.ws-terminal::-webkit-scrollbar-track{background:#0f172a}.ws-terminal::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}.ws-terminal::-webkit-scrollbar-thumb:hover{background:#475569}.ws-terminal-empty{color:#64748b;font-style:italic;margin:auto;padding:32px;padding:var(--spacing-2xl);text-align:center}.ws-terminal-server{max-height:400px}.ws-log{align-items:flex-start;border-radius:4px;display:flex;gap:12px;gap:var(--spacing-md);padding:4px 0;transition:background .2s ease;transition:background var(--transition-fast)}.ws-log:hover{background:#ffffff08}.log-time{color:#64748b;flex-shrink:0;font-size:12px}.log-msg{color:#cbd5e1;word-break:break-word}.log-success .log-msg{color:#4ade80}.log-error .log-msg{color:#f87171}.log-warning .log-msg{color:#fbbf24}.log-info .log-msg{color:#93c5fd}@media (max-width:1024px){.ws-tabs{flex-direction:column}.ws-tab{width:100%}}@media (max-width:768px){.admin-sidebar{width:80px;width:var(--sidebar-collapsed-width)}.admin-sidebar .logo span,.admin-sidebar .menu-item span,.admin-sidebar .user-details{display:none}.admin-main{margin-left:80px;margin-left:var(--sidebar-collapsed-width)}.admin-content{padding:16px;padding:var(--spacing-lg)}.ws-actions{flex-direction:column}.ws-btn{flex:initial;width:100%}.header-user-info .user-details,.ws-tab span{display:none}.ws-info-item{align-items:flex-start;flex-direction:column;gap:8px;gap:var(--spacing-sm)}}@media (max-width:480px){.admin-header{padding:16px;padding:var(--spacing-lg)}.admin-header h1{font-size:18px}.ws-card-body{padding:16px;padding:var(--spacing-lg)}}.admin-sidebar::-webkit-scrollbar,.sidebar-menu::-webkit-scrollbar{width:4px}.admin-sidebar::-webkit-scrollbar-track,.sidebar-menu::-webkit-scrollbar-track{background:#f8fafc;background:var(--color-bg-secondary)}.admin-sidebar::-webkit-scrollbar-thumb,.sidebar-menu::-webkit-scrollbar-thumb{background:#cbd5e1;background:var(--color-border-hover);border-radius:3px}.admin-content::-webkit-scrollbar{width:6px}.admin-content::-webkit-scrollbar-track{background:#f8fafc;background:var(--color-bg-secondary)}.admin-content::-webkit-scrollbar-thumb{background:#94a3b8;background:var(--color-border-dark);border-radius:3px}.sk-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xl);height:100%;max-width:1400px;width:100%}.sk-header{flex-wrap:wrap;gap:var(--spacing-lg);justify-content:space-between}.sk-header,.sk-header-left{align-items:center;display:flex}.sk-header-left{gap:var(--spacing-md)}.sk-header-icon{align-items:center;background:var(--color-navy-primary);border-radius:var(--radius-lg);color:#fff;display:flex;flex-shrink:0;height:46px;justify-content:center;width:46px}.sk-title{color:var(--color-navy-primary);font-size:20px;font-weight:700;margin:0 0 2px}.sk-subtitle{color:var(--color-text-tertiary);font-size:13px;margin:0}.sk-header-actions{align-items:center;display:flex;gap:var(--spacing-md)}.sk-btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;padding:10px 18px;transition:all var(--transition-fast);white-space:nowrap}.sk-btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.sk-btn-sm{font-size:13px;padding:8px 14px}.sk-btn-primary{background:var(--color-navy-primary);color:#fff}.sk-btn-primary:not(:disabled):hover{background:var(--color-navy-secondary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.sk-btn-ghost{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary)}.sk-btn-ghost:not(:disabled):hover{background:var(--color-bg-hover);border-color:var(--color-border-hover);color:var(--color-navy-primary)}.sk-btn-danger{background:var(--color-danger);color:#fff}.sk-btn-danger:not(:disabled):hover{background:#b91c1c}.sk-body{grid-gap:var(--spacing-xl);display:grid;flex:1 1;gap:var(--spacing-xl);grid-template-columns:320px 1fr;height:calc(100vh - 240px);min-height:0}.sk-sidebar{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}.sk-sidebar-hd{align-items:center;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);display:flex;flex-shrink:0;font-size:13px;font-weight:700;justify-content:space-between;letter-spacing:.5px;padding:var(--spacing-lg) var(--spacing-xl);text-transform:uppercase}.sk-count-badge{background:var(--color-navy-primary);border-radius:10px;color:#fff;font-size:11px;font-weight:700;min-width:22px;padding:2px 8px;text-align:center}.sk-pack-list{flex:1 1;overflow-y:auto;padding:var(--spacing-sm)}.sk-pack-list::-webkit-scrollbar{width:4px}.sk-pack-list::-webkit-scrollbar-track{background:#0000}.sk-pack-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:2px}.sk-pack-item{align-items:center;border:1.5px solid #0000;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-sm);justify-content:space-between;margin-bottom:2px;padding:10px var(--spacing-md);position:relative;transition:all var(--transition-fast)}.sk-pack-item:hover{background:var(--color-bg-secondary);border-color:var(--color-border)}.sk-pack-item.active{background:#eff6ff;border-color:var(--color-navy-light)}.sk-pack-item.inactive{opacity:.6}.sk-active-bar{background:var(--color-navy-primary);border-radius:2px;bottom:6px;left:0;position:absolute;top:6px;width:3px}.sk-pack-left{flex:1 1;gap:var(--spacing-md);min-width:0}.sk-pack-icon,.sk-pack-left{align-items:center;display:flex}.sk-pack-icon{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-primary);flex-shrink:0;font-size:14px;font-weight:700;height:36px;justify-content:center;width:36px}.sk-pack-item.active .sk-pack-icon{background:#dbeafe;border-color:var(--color-navy-light)}.sk-pack-info{display:flex;flex-direction:column;gap:2px;min-width:0}.sk-pack-name{color:var(--color-text-primary);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-pack-item.active .sk-pack-name{color:var(--color-navy-primary)}.sk-pack-meta{align-items:center;color:var(--color-text-muted);display:flex;font-size:11px;gap:6px}.sk-class-tag{background:#eff6ff;border-radius:4px;color:var(--color-navy-secondary);font-size:10px;font-weight:600;padding:1px 6px}.sk-pack-actions{display:flex;flex-shrink:0;gap:4px;opacity:0;transition:opacity var(--transition-fast)}.sk-pack-item.active .sk-pack-actions,.sk-pack-item:hover .sk-pack-actions{opacity:1}.sk-icon-btn{align-items:center;background:#0000;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;height:26px;justify-content:center;transition:all var(--transition-fast);width:26px}.sk-icon-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.sk-icon-edit:hover{background:#eff6ff;border-color:#93c5fd;color:var(--color-navy-secondary)}.sk-icon-delete:hover{background:#fef2f2;border-color:#fca5a5;color:var(--color-danger)}.sk-empty-packs{align-items:center;color:var(--color-text-muted);display:flex;flex-direction:column;font-size:13px;gap:var(--spacing-md);padding:48px var(--spacing-xl)}.sk-center-loading{align-items:center;display:flex;flex:1 1;justify-content:center;padding:48px}.sk-content{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}.sk-content-hd{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);flex-shrink:0;gap:var(--spacing-lg);justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl)}.sk-breadcrumb,.sk-content-hd{align-items:center;display:flex}.sk-breadcrumb{color:var(--color-text-secondary);font-size:14px;gap:8px}.sk-breadcrumb svg:first-child,.sk-breadcrumb-current{color:var(--color-navy-primary)}.sk-breadcrumb-current{font-weight:700}.sk-no-select{color:var(--color-text-muted);flex:1 1;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-3xl);text-align:center}.sk-no-select,.sk-no-select-icon{align-items:center;display:flex;justify-content:center}.sk-no-select-icon{background:var(--color-bg-tertiary);border-radius:50%;height:72px;margin-bottom:var(--spacing-md);opacity:.5;width:72px}.sk-no-select-icon svg{height:32px;width:32px}.sk-no-select h3{color:var(--color-text-secondary);font-size:16px;font-weight:700;margin:0}.sk-no-select p{font-size:13px;margin:0}.sk-empty-stickers{align-items:center;color:var(--color-text-muted);display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-lg);justify-content:center;padding:var(--spacing-3xl)}.sk-empty-stickers svg{height:40px;opacity:.3;width:40px}.sk-empty-stickers p{font-size:14px;margin:0}.sk-grid{grid-gap:var(--spacing-md);align-content:start;display:grid;flex:1 1;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));overflow-y:auto;padding:var(--spacing-xl)}.sk-grid::-webkit-scrollbar{width:6px}.sk-grid::-webkit-scrollbar-track{background:#0000}.sk-grid::-webkit-scrollbar-thumb{background:var(--color-border-dark);border-radius:3px}.sk-card{background:var(--color-bg-primary);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);cursor:default;display:flex;flex-direction:column;overflow:hidden;transition:all var(--transition-fast)}.sk-card:hover{border-color:var(--color-navy-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.sk-card-inactive{filter:grayscale(40%);opacity:.55}.sk-card-img-wrap{aspect-ratio:1/1;background:var(--color-bg-secondary);overflow:hidden;position:relative;width:100%}.sk-card-img{height:100%;object-fit:contain;object-position:center;padding:8px;transition:transform .2s ease;width:100%}.sk-card:hover .sk-card-img{transform:scale(1.08)}.sk-card-no-img{align-items:center;color:var(--color-text-muted);display:flex;height:100%;justify-content:center;opacity:.4;width:100%}.sk-card-inactive-badge{background:#0000008c;border-radius:4px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 7px;position:absolute;right:6px;top:6px}.sk-card-body{align-items:center;background:var(--color-bg-secondary);border-top:1px solid var(--color-border);display:flex;gap:4px;justify-content:space-between;padding:7px 8px 8px}.sk-card-name{color:var(--color-text-secondary);flex:1 1;font-size:11px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-card-btns{display:flex;flex-shrink:0;gap:3px;opacity:0;transition:opacity var(--transition-fast)}.sk-card:hover .sk-card-btns{opacity:1}.sk-card-add{align-items:center;aspect-ratio:1/1;background:var(--color-bg-secondary);border:2px dashed var(--color-border-hover);color:var(--color-text-muted);cursor:pointer;display:flex;flex-direction:column;font-size:12px;font-weight:600;gap:var(--spacing-sm);justify-content:center;transition:all var(--transition-fast)}.sk-card-add:hover{background:#eff6ff;border-color:var(--color-navy-light);color:var(--color-navy-primary);transform:translateY(-2px)}.sk-overlay{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f172a99;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1000}.sk-modal{animation:sk-modal-in .2s ease;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:460px;overflow:hidden;width:100%}.sk-modal-sm{max-width:400px}@keyframes sk-modal-in{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.sk-modal-hd{align-items:center;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl)}.sk-modal-hd h3{color:var(--color-navy-primary);font-size:16px;font-weight:700;margin:0}.sk-modal-close{align-items:center;background:#0000;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;height:30px;justify-content:center;transition:all var(--transition-fast);width:30px}.sk-modal-close:hover{background:#fef2f2;border-color:#fca5a5;color:var(--color-danger)}.sk-modal-bd{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-xl)}.sk-modal-ft{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-sm);padding-top:var(--spacing-md)}.sk-field{display:flex;flex-direction:column;gap:6px}.sk-field label{color:var(--color-text-primary);font-size:13px;font-weight:600}.sk-req{color:var(--color-danger)}.sk-field input,.sk-field select{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:14px;outline:none;padding:10px 14px;transition:all var(--transition-fast);width:100%}.sk-field input:focus,.sk-field select:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #3b82f61f}.sk-field input::placeholder{color:var(--color-text-muted)}.sk-field-row{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:1fr 1fr}.sk-dropzone{align-items:center;aspect-ratio:1/1;background:var(--color-bg-secondary);border:2px dashed var(--color-border-hover);border-radius:var(--radius-lg);cursor:pointer;display:flex;justify-content:center;max-height:220px;overflow:hidden;position:relative;transition:all var(--transition-fast);width:100%}.sk-dropzone:hover{background:#eff6ff;border-color:var(--color-navy-light)}.sk-dropzone.has-preview{border-color:var(--color-border);border-style:solid}.sk-dropzone.has-preview:hover .sk-preview-overlay{opacity:1}.sk-drop-hint{align-items:center;color:var(--color-text-muted);display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-xl);text-align:center}.sk-drop-hint svg{opacity:.5}.sk-drop-hint p{color:var(--color-text-secondary);font-size:13px;margin:0}.sk-drop-hint small{font-size:11px}.sk-preview-img{background:var(--color-bg-secondary);height:100%;object-fit:contain;padding:12px;width:100%}.sk-preview-overlay{align-items:center;background:#0f172a8c;color:#fff;display:flex;flex-direction:column;font-size:13px;font-weight:600;gap:8px;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity var(--transition-fast)}.sk-confirm{animation:sk-modal-in .2s ease;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:380px;padding:var(--spacing-2xl);text-align:center;width:100%}.sk-confirm p{color:var(--color-text-primary);font-size:15px;line-height:1.6;margin:0 0 var(--spacing-xl)}.sk-confirm-btns{display:flex;gap:var(--spacing-md);justify-content:center}.sk-toast{animation:sk-toast-in .25s ease;border-radius:var(--radius-md);bottom:28px;box-shadow:var(--shadow-xl);font-size:14px;font-weight:600;max-width:320px;padding:12px 20px;position:fixed;right:28px;z-index:2000}.sk-toast-success{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--color-success)}.sk-toast-error{background:#fef2f2;border:1px solid #fecaca;color:var(--color-danger)}@keyframes sk-toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sk-spin{animation:sk-spin .6s linear infinite;border:2px solid #ffffff59;border-radius:50%;border-top-color:#fff;display:inline-block;flex-shrink:0;height:14px;width:14px}.sk-spin-navy{border:3px solid var(--color-border);border-top-color:var(--color-navy-primary);height:28px;width:28px}@keyframes sk-spin{to{transform:rotate(1turn)}}@media (max-width:900px){.sk-body{grid-template-columns:1fr;height:auto}.sk-sidebar{max-height:300px}.sk-content{min-height:400px}}@media (max-width:600px){.sk-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));padding:var(--spacing-md)}.sk-header{align-items:flex-start;flex-direction:column}.sk-toast{bottom:16px;left:16px;max-width:none;right:16px}}.um-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:1200px;position:relative;width:100%}.um-stats{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(4,1fr)}.um-stat-card{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;gap:var(--spacing-lg);padding:var(--spacing-xl);transition:all var(--transition-fast)}.um-stat-card:hover{border-color:var(--color-navy-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}.um-stat-icon{align-items:center;border-radius:var(--radius-md);display:flex;flex-shrink:0;height:52px;justify-content:center;width:52px}.um-icon-blue{background:#eff6ff;color:var(--color-navy-secondary)}.um-icon-green{background:#f0fdf4;color:var(--color-success)}.um-icon-orange{background:#fff7ed;color:var(--color-warning)}.um-icon-red{background:#fef2f2;color:var(--color-danger)}.um-stat-body{display:flex;flex-direction:column;gap:4px;min-width:0}.um-stat-label{color:var(--color-text-tertiary);font-size:12px;font-weight:500;white-space:nowrap}.um-stat-value{color:var(--color-text-primary);font-size:26px;font-weight:700;line-height:1}.um-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-lg);justify-content:space-between}.um-toolbar-left{display:flex;flex:1 1;flex-wrap:wrap;gap:var(--spacing-md)}.um-toolbar-right{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-md)}.um-search{flex:1 1;max-width:380px;min-width:240px;position:relative}.um-search svg{color:var(--color-text-muted);left:14px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.um-search input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:14px;outline:none;padding:10px 14px 10px 42px;transition:all var(--transition-fast);width:100%}.um-search input:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #3b82f61f}.um-search input::placeholder{color:var(--color-text-muted)}.um-filter-select{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;font-size:14px;min-width:170px;outline:none;padding:10px 14px;transition:all var(--transition-fast)}.um-filter-select:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #3b82f61f}.um-filter-select option{background:var(--color-bg-primary);color:var(--color-text-primary)}.um-btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:var(--spacing-sm);padding:10px 20px;transition:all var(--transition-fast);white-space:nowrap}.um-btn:disabled{cursor:not-allowed;opacity:.55;transform:none!important}.um-btn-primary{background:var(--color-navy-primary);color:#fff}.um-btn-primary:not(:disabled):hover{background:var(--color-navy-secondary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.um-btn-ghost{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary)}.um-btn-ghost:not(:disabled):hover{background:var(--color-bg-hover);border-color:var(--color-border-hover);color:var(--color-navy-primary)}.um-btn-danger{background:var(--color-danger);color:#fff}.um-btn-danger:not(:disabled):hover{background:#b91c1c}.um-btn-sm{font-size:13px;padding:8px 14px}.um-table-wrap{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.um-table{border-collapse:collapse;width:100%}.um-table thead{background:var(--color-bg-secondary);border-bottom:2px solid var(--color-border)}.um-table th{color:var(--color-text-tertiary);font-size:12px;font-weight:700;letter-spacing:.6px;padding:13px 18px;text-align:left;text-transform:uppercase;white-space:nowrap}.um-table td{border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:14px;padding:14px 18px;vertical-align:middle}.um-table tbody tr:last-child td{border-bottom:none}.um-table tbody tr{transition:background var(--transition-fast)}.um-table tbody tr:hover{background:var(--color-bg-secondary)}.um-td-num{color:var(--color-text-muted);font-size:13px;font-weight:500;text-align:center}.um-td-phone{color:var(--color-text-secondary);font-family:Courier New,monospace;font-size:14px;letter-spacing:.4px}.um-user-cell{gap:var(--spacing-md)}.um-avatar,.um-user-cell{align-items:center;display:flex}.um-avatar{background:var(--color-navy-primary);border:2px solid var(--color-border);border-radius:50%;flex-shrink:0;height:34px;justify-content:center;overflow:hidden;width:34px}.um-avatar img{height:100%;object-fit:cover;width:100%}.um-avatar span{color:#fff;font-size:13px;font-weight:700}.um-user-name{color:var(--color-text-primary);font-weight:600}.um-badge{align-items:center;border-radius:20px;display:inline-flex;font-size:12px;font-weight:600;padding:4px 12px;white-space:nowrap}.um-badge.status-active{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--color-success)}.um-badge.status-banned{background:#fff7ed;border:1px solid #fed7aa;color:var(--color-warning)}.um-badge.status-deleted{background:#fef2f2;border:1px solid #fecaca;color:var(--color-danger)}.um-actions{gap:6px}.um-action-btn,.um-actions{align-items:center;display:flex}.um-action-btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;height:30px;justify-content:center;transition:all var(--transition-fast);width:30px}.um-action-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.um-action-edit:hover{background:#eff6ff;border-color:var(--color-navy-light);color:var(--color-navy-secondary)}.um-action-ban:hover{background:#fff7ed;border-color:#fdba74;color:var(--color-warning)}.um-action-unban:hover{background:#f0fdf4;border-color:#86efac;color:var(--color-success)}.um-action-delete:hover{background:#fef2f2;border-color:#fca5a5;color:var(--color-danger)}.um-empty{color:var(--color-text-muted);padding:56px 24px!important;text-align:center}.um-empty div{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md)}.um-empty svg{height:40px;opacity:.3;width:40px}.um-empty p,.um-loading{color:var(--color-text-tertiary);font-size:14px}.um-loading{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-lg);padding:56px 24px}.um-spinner{animation:um-spin .7s linear infinite;border:3px solid var(--color-border);border-radius:50%;border-top-color:var(--color-navy-primary);height:32px;width:32px}.um-spinner-sm{animation:um-spin .6s linear infinite;border:2px solid #fff6;border-radius:50%;border-top-color:#fff;height:14px;width:14px}@keyframes um-spin{to{transform:rotate(1turn)}}.um-footer-info{color:var(--color-text-muted);font-size:12px;padding:0 4px;text-align:right}.um-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a8c;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1000}.um-modal{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:480px;overflow:hidden;width:100%}.um-modal-header{align-items:center;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-lg)}.um-modal-header h2{color:var(--color-navy-primary);font-size:17px;font-weight:700;margin:0}.um-modal-close{align-items:center;background:#0000;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all var(--transition-fast);width:32px}.um-modal-close:hover{background:#fef2f2;border-color:#fca5a5;color:var(--color-danger)}.um-modal-body{gap:var(--spacing-lg);padding:var(--spacing-xl)}.um-field,.um-modal-body{display:flex;flex-direction:column}.um-field{gap:6px}.um-field label{color:var(--color-text-primary);font-size:13px;font-weight:600}.um-field input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:14px;outline:none;padding:10px 14px;transition:all var(--transition-fast);width:100%}.um-field input:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #3b82f61f}.um-field input:disabled{background:var(--color-bg-tertiary);cursor:not-allowed}.um-field input::placeholder,.um-field input:disabled{color:var(--color-text-muted)}.um-input-error{border-color:var(--color-danger)!important}.um-input-error:focus{box-shadow:0 0 0 3px #dc26261f!important}.um-field-error{font-size:12px;font-weight:500}.um-field-error,.um-required{color:var(--color-danger)}.um-optional{color:var(--color-text-muted);font-size:12px;font-weight:400}.um-modal-footer{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-sm);padding-top:var(--spacing-lg)}.um-confirm{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:400px;padding:var(--spacing-2xl);text-align:center;width:100%}.um-confirm p{color:var(--color-text-primary);font-size:15px;line-height:1.6;margin-bottom:var(--spacing-xl)}.um-confirm-actions{display:flex;gap:var(--spacing-md);justify-content:center}.um-toast{animation:um-slide-in .25s ease;border-radius:var(--radius-md);bottom:28px;box-shadow:var(--shadow-xl);font-size:14px;font-weight:600;max-width:320px;padding:12px 20px;position:fixed;right:28px;z-index:2000}.um-toast-success{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--color-success)}.um-toast-error{background:#fef2f2;border:1px solid #fecaca;color:var(--color-danger)}@keyframes um-slide-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.um-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.um-stats{grid-template-columns:1fr 1fr}.um-toolbar{align-items:stretch}.um-toolbar,.um-toolbar-left{flex-direction:column}.um-search{max-width:none}.um-toolbar-right{justify-content:flex-end}.um-table-wrap{overflow-x:auto}.um-table{min-width:560px}.um-toast{bottom:16px;left:16px;max-width:none;right:16px}}:root{--color-bg-primary:#fff;--color-bg-secondary:#f8fafc;--color-bg-tertiary:#f1f5f9;--color-bg-hover:#e2e8f0;--color-navy-primary:#1e3a8a;--color-navy-secondary:#1e40af;--color-navy-light:#3b82f6;--color-navy-dark:#1e293b;--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-border-dark:#94a3b8;--color-text-primary:#1e293b;--color-text-secondary:#475569;--color-text-tertiary:#64748b;--color-text-muted:#94a3b8;--color-accent:#1e40af;--color-success:#059669;--color-warning:#d97706;--color-danger:#dc2626;--color-info:#0284c7;--sidebar-width:280px;--sidebar-collapsed-width:80px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--spacing-3xl:48px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 4px #1e3a8a14;--shadow-lg:0 4px 8px #1e3a8a1a;--shadow-xl:0 8px 16px #1e3a8a1f}*{box-sizing:border-box;margin:0;padding:0}body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#root,body,html{height:100%;overflow:hidden}.user-container{color:#1e293b;color:var(--color-text-primary);display:flex;height:100vh;overflow:hidden;position:relative;width:100%}.mobile-menu-toggle,.user-container{background:#fff;background:var(--color-bg-primary)}.mobile-menu-toggle{align-items:center;border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);color:#1e3a8a;color:var(--color-navy-primary);cursor:pointer;display:none;height:48px;justify-content:center;left:16px;left:var(--spacing-lg);position:fixed;top:16px;top:var(--spacing-lg);transition:all .2s ease;transition:all var(--transition-fast);width:48px;z-index:1000}.mobile-menu-toggle:hover{background:#f1f5f9;background:var(--color-bg-tertiary);border-color:#1e3a8a;border-color:var(--color-navy-primary);transform:scale(1.05)}.mobile-menu-toggle:active{transform:scale(.95)}.mobile-overlay{animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#94a3b880;bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:99}.user-sidebar{background:#fff;border-right:1px solid #e2e8f0;border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100vh;left:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;transition:all .3s ease;transition:all var(--transition-normal);width:280px;width:var(--sidebar-width);z-index:100}.user-sidebar.collapsed{width:80px;width:var(--sidebar-collapsed-width)}.sidebar-header{background:#f8fafc;border-bottom:2px solid #1e3a8a;padding:24px}.logo{font-size:20px;font-weight:700;gap:12px;gap:var(--spacing-md)}.logo,.logo svg{color:#1e3a8a;color:var(--color-navy-primary);transition:all .3s ease;transition:all var(--transition-normal)}.logo svg{flex-shrink:0}.collapsed .logo span{opacity:0;overflow:hidden;width:0}.collapse-btn{align-items:center;background:#0000;border:none;border-radius:6px;border-radius:var(--radius-sm);color:#475569;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:16px;height:32px;justify-content:center;padding:8px;padding:var(--spacing-sm);transition:all .2s ease;transition:all var(--transition-fast);width:32px}.collapse-btn:hover{background:#f1f5f9;background:var(--color-bg-tertiary);color:#1e3a8a;color:var(--color-navy-primary)}.sidebar-user-info{background:#f8fafc;background:var(--color-bg-secondary);border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--color-border);flex-shrink:0;padding:16px;padding:var(--spacing-lg)}.user-info{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);display:flex;gap:12px;gap:var(--spacing-md);padding:12px;padding:var(--spacing-md);transition:all .2s ease;transition:all var(--transition-fast)}.user-info:hover{background:#f1f5f9;background:var(--color-bg-tertiary);border-color:#3b82f6;border-color:var(--color-navy-light);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm)}.user-avatar{align-items:center;background:#3b82f6;background:var(--color-navy-light);border:2px solid #1e3a8a;border:2px solid var(--color-navy-primary);display:flex;justify-content:center}.avatar-placeholder{color:#fff;font-size:20px}.user-details{display:flex;flex:1 1;flex-direction:column;gap:2px;min-width:0}.user-name{color:#1e293b;color:var(--color-text-primary);font-size:15px;font-weight:600}.user-name,.user-role{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-role{color:#64748b;color:var(--color-text-tertiary);font-size:12px}.collapsed .user-details{opacity:0;overflow:hidden;width:0}.collapsed .user-info{justify-content:center;padding:8px;padding:var(--spacing-sm)}.collapsed .user-avatar{height:40px;width:40px}.sidebar-menu{flex:1 1;overflow-x:hidden;overflow-y:auto;padding:16px;padding:var(--spacing-lg)}.menu-item{align-items:center;background:#0000;border:none;border-radius:6px;border-radius:var(--radius-sm);color:#1e293b;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:12px;gap:var(--spacing-md);margin-bottom:4px;margin-bottom:var(--spacing-xs);padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg);position:relative;text-align:left;transition:all .2s ease;transition:all var(--transition-fast);white-space:nowrap;width:100%}.menu-item:hover{background:#f1f5f9;background:var(--color-bg-tertiary);color:#1e3a8a;color:var(--color-navy-primary);transform:translateX(4px)}.menu-item:active{transform:translateX(2px) scale(.98)}.menu-item.active{background:#1e40af;background:var(--color-navy-secondary);background:#fff;border-left:3px solid #1e3a8a;border-left:3px solid var(--color-navy-primary);color:#fff;color:#1e3a8a;color:var(--color-navy-primary);font-weight:600}.menu-item.active:hover{transform:translateX(0)}.menu-item svg{flex-shrink:0;transition:all .2s ease;transition:all var(--transition-fast)}.menu-label{flex:1 1;overflow:hidden;text-overflow:ellipsis;transition:all .3s ease;transition:all var(--transition-normal)}.collapsed .menu-label{opacity:0;width:0}.menu-badge{background:#dc2626;background:var(--color-danger);border-radius:50%;color:#1e3a8a;color:var(--color-navy-primary);flex-shrink:0;height:8px;transition:all .3s ease;transition:all var(--transition-normal);width:8px}.menu-badge-pulse{animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{box-shadow:0 0 0 0 #dc2626b3}50%{box-shadow:0 0 0 6px #dc262600}}.collapsed .menu-item{justify-content:center;padding:12px;padding:var(--spacing-md)}.collapsed .menu-badge{position:absolute;right:8px;top:8px}.logout-item{margin-top:8px;margin-top:var(--spacing-sm);padding-top:12px;padding-top:var(--spacing-md)}.logout-item,.sidebar-footer{border-top:1px solid #e2e8f0;border-top:1px solid var(--color-border)}.sidebar-footer{background:#f8fafc;background:var(--color-bg-secondary);flex-shrink:0;padding:16px;padding:var(--spacing-lg)}.user-label{color:#64748b;color:var(--color-text-tertiary);font-size:11px;overflow:hidden;padding:8px;padding:var(--spacing-sm);text-align:center;text-overflow:ellipsis;white-space:nowrap}.user-main{background:#fff;background:var(--color-bg-primary);display:flex;flex:1 1;flex-direction:column;height:100vh;margin-left:280px;margin-left:var(--sidebar-width);overflow:hidden;transition:all .3s ease;transition:all var(--transition-normal);width:calc(100% - 280px);width:calc(100% - var(--sidebar-width))}.user-sidebar.collapsed+.user-main{margin-left:80px;margin-left:var(--sidebar-collapsed-width);width:calc(100% - 80px);width:calc(100% - var(--sidebar-collapsed-width))}.user-content{background:#f8fafc;background:var(--color-bg-secondary);flex:1 1;height:100%;overflow:hidden;padding:32px;padding:var(--spacing-2xl)}.home-content-new{align-items:center;background:#fff;background:var(--color-bg-primary);display:flex;height:100%;justify-content:center;overflow:hidden;padding:12px}.welcome-banner{align-items:center;display:flex;flex-direction:column;gap:20px;max-width:850px;text-align:center;width:100%}.banner-title{color:#1e3a8a;color:var(--color-navy-primary);font-size:clamp(24px,3.5vw,36px);font-weight:800;line-height:1.2;margin:0}.banner-subtitle{color:#475569;color:var(--color-text-secondary);font-size:clamp(14px,2vw,17px);font-weight:500;line-height:1.5;margin:0;max-width:650px}.image-carousel{max-width:700px;position:relative;width:100%}.carousel-container{border-radius:10px;border-radius:var(--radius-lg);overflow:hidden;padding-top:40%;position:relative;width:100%}.carousel-image{height:100%;left:0;object-fit:cover;object-position:center;opacity:0;position:absolute;top:0;transition:opacity .8s ease-in-out;width:100%}.carousel-image.active{opacity:1}.carousel-indicators{display:flex;gap:12px;justify-content:center;margin-top:20px}.indicator{background:#94a3b8;background:var(--color-border-dark);border:none;border-radius:50%;cursor:pointer;height:10px;padding:0;transition:all .2s ease;transition:all var(--transition-fast);width:10px}.indicator:hover{background:#3b82f6;background:var(--color-navy-light);transform:scale(1.2)}.indicator.active{background:#1e3a8a;background:var(--color-navy-primary);border-radius:6px;border-radius:var(--radius-sm);width:32px}.footer-branding{border-top:2px solid #e2e8f0;border-top:2px solid var(--color-border);margin-top:20px;padding-top:20px;width:100%}.footer-branding p{color:#1e3a8a;color:var(--color-navy-primary);font-size:clamp(13px,2vw,16px);font-weight:600;letter-spacing:.5px;margin:0}.stats-grid{grid-gap:24px;grid-gap:var(--spacing-xl);display:grid;gap:24px;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:32px;margin-bottom:var(--spacing-2xl)}.stat-card{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);display:flex;gap:16px;gap:var(--spacing-lg);padding:24px;padding:var(--spacing-xl);transition:all .2s ease;transition:all var(--transition-fast)}.stat-card:hover{border-color:#3b82f6;border-color:var(--color-navy-light);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{align-items:center;border-radius:8px;border-radius:var(--radius-md);display:flex;flex-shrink:0;height:56px;justify-content:center;width:56px}.stat-icon.blue{background:#1e40af1a;color:#1e3a8a;color:var(--color-navy-primary)}.stat-icon.green{background:#0596691a;color:#059669;color:var(--color-success)}.stat-icon.orange{background:#d977061a;color:#d97706;color:var(--color-warning)}.stat-icon.purple{background:#9333ea1a;color:#9333ea}.stat-info h3{color:#475569;color:var(--color-text-secondary);font-size:14px;font-weight:600;letter-spacing:.5px;margin:0 0 4px;margin:0 0 var(--spacing-xs) 0;text-transform:uppercase}.stat-number{color:#1e3a8a;color:var(--color-navy-primary);font-size:32px;font-weight:800;line-height:1;margin-bottom:4px;margin-bottom:var(--spacing-xs)}.stat-detail{color:#64748b;color:var(--color-text-tertiary);font-size:13px;margin:0}.features-grid{grid-gap:24px;grid-gap:var(--spacing-xl);display:grid;gap:24px;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.feature-card{background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);padding:32px;padding:var(--spacing-2xl);text-align:center;transition:all .2s ease;transition:all var(--transition-fast)}.feature-card:hover{border-color:#3b82f6;border-color:var(--color-navy-light);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);transform:translateY(-4px)}.feature-card svg{margin-bottom:16px;margin-bottom:var(--spacing-lg)}.feature-card h4,.feature-card svg{color:#1e3a8a;color:var(--color-navy-primary)}.feature-card h4{font-size:18px;font-weight:700;margin:0 0 12px;margin:0 0 var(--spacing-md) 0}.feature-card p{color:#475569;color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin:0}.btn-primary{align-items:center;background:#1e3a8a;background:var(--color-navy-primary);border:none;border-radius:6px;border-radius:var(--radius-sm);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);color:#fff;color:var(--color-bg-primary);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;gap:var(--spacing-sm);padding:12px 24px;padding:var(--spacing-md) var(--spacing-xl);transition:all .2s ease;transition:all var(--transition-fast)}.btn-primary:hover{background:#1e40af;background:var(--color-navy-secondary);box-shadow:0 2px 4px #1e3a8a14;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #1e3a8a;border:1px solid var(--color-navy-primary);border-radius:6px;border-radius:var(--radius-sm);color:#1e3a8a;color:var(--color-navy-primary);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;gap:var(--spacing-sm);padding:12px 24px;padding:var(--spacing-md) var(--spacing-xl);transition:all .2s ease;transition:all var(--transition-fast)}.btn-secondary:hover{background:#f1f5f9;background:var(--color-bg-tertiary);border-color:#1e40af;border-color:var(--color-navy-secondary)}.btn-secondary:active{transform:scale(.98)}.placeholder{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;min-height:400px;padding:48px;padding:var(--spacing-3xl);text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e2e8f0;border-top-color:#1e3a8a;border:4px solid var(--color-border);border-radius:50%;border-top-color:var(--color-navy-primary);height:48px;margin-bottom:24px;margin-bottom:var(--spacing-xl);width:48px}.placeholder h3{color:#1e3a8a;color:var(--color-navy-primary);font-size:20px;font-weight:700;margin:0 0 12px;margin:0 0 var(--spacing-md) 0}.placeholder p{color:#475569;color:var(--color-text-secondary);font-size:14px;margin:0}@media (max-width:768px){:root{--sidebar-width:260px}.mobile-menu-toggle{display:flex}.user-sidebar{box-shadow:none;transform:translateX(-100%)}.user-sidebar.mobile-open{box-shadow:0 8px 16px #1e3a8a1f;box-shadow:var(--shadow-xl);transform:translateX(0)}.mobile-overlay{display:block}.user-main,.user-sidebar.collapsed+.user-main{margin-left:0;width:100%}.user-content{padding:16px;padding:var(--spacing-lg)}.home-content-new{padding:8px}.welcome-banner{gap:16px}.carousel-container{padding-top:55%}.stats-grid{grid-template-columns:1fr}.stat-card,.stats-grid{gap:16px;gap:var(--spacing-lg)}.stat-card{flex-direction:row}.features-grid{gap:16px;gap:var(--spacing-lg);grid-template-columns:1fr}.feature-card{padding:24px;padding:var(--spacing-xl)}}@media (max-width:480px){.mobile-menu-toggle{height:40px;left:12px;left:var(--spacing-md);top:12px;top:var(--spacing-md);width:40px}.user-content{padding:12px;padding:var(--spacing-md)}.home-content-new{padding:6px}.welcome-banner{gap:12px}.carousel-indicators{gap:8px;margin-top:12px}.indicator{height:8px;width:8px}.indicator.active{width:24px}.stat-card{gap:12px;gap:var(--spacing-md);padding:12px;padding:var(--spacing-md)}.stat-icon{height:48px;width:48px}.feature-card{padding:16px;padding:var(--spacing-lg)}}a:focus-visible,button:focus-visible{outline:2px solid #1e3a8a;outline:2px solid var(--color-navy-primary);outline-offset:2px}@media print{.mobile-menu-toggle,.mobile-overlay,.user-sidebar{display:none!important}.user-main{margin-left:0;width:100%}}.logo{align-items:center;display:flex;gap:8px}.logo-img{height:30px;margin-right:0;width:30px}.logo-text{font-size:18px;font-weight:600;white-space:nowrap}.user-sidebar.collapsed .sidebar-header{gap:4px;justify-content:center;padding:12px;padding:var(--spacing-md)}.friends-management{background:var(--color-bg-primary);display:flex;flex-direction:column;height:100vh;overflow:hidden}.message-container{left:50%;max-width:500px;position:fixed;top:20px;transform:translateX(-50%);width:calc(100% - 40px);z-index:1000}.error-message,.success-message{align-items:center;animation:slideIn var(--transition-normal);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;font-size:14px;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg)}.error-message{background:#dc26261a;border:1px solid var(--color-danger);color:#fca5a5}.success-message{background:#0596691a;border:1px solid var(--color-success);color:#6ee7b7}.friends-layout{display:flex;flex:1 1;overflow:hidden}.friends-sidebar{background:var(--color-bg-primary);border-right:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;width:280px}.sidebar-header{border-bottom:1px solid var(--color-border);padding:var(--spacing-xl) var(--spacing-lg)}.sidebar-header h2{color:var(--color-text-primary)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-md)}.nav-item{align-items:center;background:#0000;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);position:relative;text-align:left;transition:all var(--transition-fast);width:100%}.nav-item:hover:not(.active){background:var(--color-bg-secondary);color:var(--color-text-primary)}.nav-item.active{background:var(--color-navy-primary);color:var(--color-bg-primary)}.nav-item svg{flex-shrink:0;height:20px;width:20px}.nav-item span{flex:1 1}.nav-badge{background:var(--color-danger);border-radius:10px;color:var(--color-bg-primary);font-size:11px;font-weight:700;min-width:20px;padding:2px 8px;text-align:center}.nav-item.active .nav-badge{background:var(--color-bg-primary);color:var(--color-danger)}.friends-content{background:var(--color-bg-secondary);flex:1 1;overflow-x:hidden;overflow-y:auto}.friends-list,.requests-list,.search-tab{margin:0 auto;max-width:900px;padding:var(--spacing-xl)}.search-bar{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.search-input-wrapper{align-items:center;background:var(--color-bg-secondary);border-radius:var(--radius-md);display:flex;flex:1 1;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.search-input-wrapper svg{color:var(--color-text-tertiary);flex-shrink:0}.search-input-inline{background:#0000;border:none;color:var(--color-text-primary);flex:1 1;font-size:14px;outline:none}.search-input-inline::placeholder{color:var(--color-text-tertiary)}.sort-filter{align-items:center;background:var(--color-bg-secondary);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);white-space:nowrap}.sort-filter:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.friends-count,.requests-count{margin-bottom:var(--spacing-lg)}.friends-count h3,.requests-count h3{color:var(--color-text-primary);font-size:16px;font-weight:600;margin:0}.friends-rows{display:flex;flex-direction:column;gap:var(--spacing-xs)}.friend-row{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;gap:var(--spacing-md);padding:var(--spacing-md);position:relative;transition:all var(--transition-fast);z-index:1}.friend-row:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);z-index:10}.dropdown-menu{align-items:center;display:flex;position:relative}.dropdown-trigger{align-items:center;background:#0000;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;padding:0;transition:all var(--transition-fast);width:36px}.dropdown-trigger:hover:not(:disabled){background:var(--color-bg-tertiary);border-color:var(--color-border-hover);color:var(--color-text-primary)}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-content{animation:dropdownFadeIn .15s ease-out;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:180px;overflow:hidden;position:absolute;right:0;top:calc(100% + 4px);z-index:1000}.dropdown-item{align-items:center;background:#0000;border:none;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:var(--spacing-sm);padding:var(--spacing-md);text-align:left;transition:all var(--transition-fast);width:100%}.dropdown-item:hover:not(:disabled){background:var(--color-bg-secondary)}.dropdown-item.danger:hover:not(:disabled){background:#dc26261a;color:var(--color-danger)}.dropdown-item:disabled{cursor:not-allowed;opacity:.5}.dropdown-item svg{flex-shrink:0;height:18px;width:18px}.requests-grid{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:1fr}.request-card,.user-card{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);transition:all var(--transition-fast)}.request-card:hover,.user-card:hover{border-color:var(--color-navy-light);box-shadow:var(--shadow-sm)}.user-avatar{background:var(--color-bg-tertiary);border-radius:50%;flex-shrink:0;height:48px;overflow:hidden;width:48px}.user-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{font-size:18px;font-weight:600}.friend-info,.request-info{flex:1 1;min-width:0}.friend-info h3,.request-info h3{color:var(--color-text-primary);font-size:15px;font-weight:600;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-phone{color:var(--color-text-secondary);font-size:13px;margin:0}.user-org{align-items:center;display:flex;gap:4px}.request-time,.user-org{color:var(--color-text-tertiary);font-size:12px;margin:4px 0 0}.request-actions,.user-actions{display:flex;flex-shrink:0;gap:var(--spacing-sm)}.request-actions button,.user-actions button{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:var(--spacing-xs);justify-content:center;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);white-space:nowrap}.search-form{margin-bottom:var(--spacing-2xl)}.search-input-group{display:flex;gap:var(--spacing-md)}.search-input{background:var(--color-bg-primary);font-size:15px;padding:var(--spacing-lg)}.search-input:focus{box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:var(--color-text-tertiary)}.search-btn{align-items:center;background:var(--color-navy-primary);border:none;border-radius:var(--radius-md);color:var(--color-bg-primary);cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-lg) var(--spacing-xl);transition:all var(--transition-fast);white-space:nowrap}.search-btn:hover:not(:disabled){background:var(--color-navy-secondary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.search-btn:active:not(:disabled){transform:translateY(0)}.search-btn:disabled{cursor:not-allowed;opacity:.5}.search-result-card{animation:fadeIn .4s ease-out}.status-badge{align-items:center;border-radius:var(--radius-sm);display:inline-flex;font-size:12px;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.status-badge.pending{background:#d977061a;border:1px solid var(--color-warning);color:var(--color-warning)}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px}.empty-state svg{color:var(--color-border-hover);height:64px;margin-bottom:var(--spacing-xl);width:64px}.empty-state h3{color:var(--color-text-primary);font-size:18px;font-weight:600;margin:0 0 var(--spacing-md) 0}.empty-state p{color:var(--color-text-tertiary);font-size:14px;margin:0;max-width:300px}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (max-width:767px){.friends-layout{flex-direction:column}.friends-sidebar{border-bottom:1px solid var(--color-border);border-right:none;width:100%}.sidebar-header{padding:var(--spacing-lg)}.sidebar-header h2{font-size:18px}.sidebar-nav{-webkit-overflow-scrolling:touch;flex-direction:row;overflow-x:auto;padding:var(--spacing-sm) var(--spacing-lg);scrollbar-width:none}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{flex-shrink:0;justify-content:center;min-width:140px}.nav-item span{flex:none}.friends-content{flex:1 1}.friends-list,.requests-list,.search-tab{padding:var(--spacing-lg)}.search-bar{align-items:stretch;flex-direction:column}.search-input-wrapper{width:100%}.sort-filter{justify-content:center;width:100%}.search-input-group{flex-direction:column}.search-btn{width:100%}.friend-row{flex-wrap:wrap}.friend-info{flex:1 1;min-width:0}.friend-info h3{white-space:normal}.request-card,.user-card{flex-direction:column;text-align:center}.request-info h3{white-space:normal}.request-actions,.user-actions{flex-direction:column;width:100%}.request-actions button,.user-actions button{width:100%}.dropdown-content{left:0;right:auto}}@media (min-width:768px) and (max-width:1023px){.friends-sidebar{width:240px}.friends-list,.requests-list,.search-tab{padding:var(--spacing-lg)}}@media (min-width:1024px){.requests-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}.user-avatar{height:56px;width:56px}.avatar-placeholder{font-size:22px}}@media (hover:none) and (pointer:coarse){.nav-item,.search-btn,.search-input{min-height:48px}.dropdown-trigger{height:44px;width:44px}.friend-row:hover,.nav-item:hover:not(.active),.request-card:hover{transform:none}.nav-item:active{transform:scale(.98)}}@supports (padding:max(0px)){.friends-sidebar{padding-left:max(0px,env(safe-area-inset-left))}.friends-content{padding-bottom:max(0px,env(safe-area-inset-bottom));padding-right:max(0px,env(safe-area-inset-right))}}.friends-content::-webkit-scrollbar{width:8px}.friends-content::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.friends-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.friends-content::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}:root{--chat-bg-primary:#f4f6f8;--chat-bg-secondary:#e5e7eb;--chat-bg-tertiary:#f9fafb;--message-bg-received:#fff;--message-bg-sent:#1e40af;--message-text-received:#1e293b;--message-text-sent:#fff;--color-online:#059669;--color-typing:#3b82f6;--color-offline:#94a3b8}.chat-container{animation:fadeIn .3s ease-out;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;width:100%}.chat-container,.chat-sidebar{display:flex;height:100%;overflow:hidden}.chat-sidebar{background:#fff;border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;transition:all var(--transition-normal);width:360px}.sidebar-title{align-items:center;display:flex;gap:var(--spacing-md)}.sidebar-title h2{color:var(--color-navy-primary);font-size:20px;font-weight:700;letter-spacing:-.5px;margin:0}.connection-status{border-radius:50%;height:8px;width:8px}.connection-status.connected{background:#059669;background:var(--color-online);box-shadow:0 0 8px #05966980}.connection-status.disconnected{background:var(--color-danger)}.dialog-count{align-items:center;background:var(--color-navy-primary);border-radius:12px;box-shadow:var(--shadow-sm);color:#fff;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:24px;justify-content:center;min-width:24px;padding:0 var(--spacing-sm)}.dialogs-list{background:#f9fafb;background:var(--chat-bg-tertiary);flex:1 1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-sm)}.dialogs-list::-webkit-scrollbar{width:6px}.dialogs-list::-webkit-scrollbar-track{background:#0000}.dialogs-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.dialogs-list::-webkit-scrollbar-thumb:hover{background:var(--color-navy-light)}.empty-dialogs{align-items:center;color:var(--color-text-tertiary);display:flex;flex-direction:column;justify-content:center;min-height:200px;padding:var(--spacing-2xl) var(--spacing-xl);text-align:center}.empty-dialogs svg{color:var(--color-text-muted);margin-bottom:var(--spacing-lg);opacity:.3}.empty-dialogs p{font-size:14px;margin:0}.dialog-item{align-items:center;background:var(--color-bg-primary);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-md);position:relative;transition:all var(--transition-fast)}.dialog-item:hover{background:var(--color-bg-hover)}.dialog-item.active{background:var(--color-navy-secondary);border-left:3px solid var(--color-navy-primary);padding-left:calc(var(--spacing-md) - 3px)}.dialog-item.active .last-message,.dialog-item.active strong{color:#fff}.dialog-item.active .message-timestamp{color:#fffc}.dialog-avatar-wrapper{flex-shrink:0;position:relative}.dialog-avatar{align-items:center;background:var(--color-navy-light);border-radius:50%;box-shadow:var(--shadow-sm);color:#fff;display:flex;font-size:20px;font-weight:600;height:52px;justify-content:center;overflow:hidden;width:52px}.avatar-initial,.dialog-avatar img{height:100%;object-fit:cover;width:100%}.avatar-initial{align-items:center;background:var(--color-navy-light);color:#fff;display:flex;font-size:20px;font-weight:600;justify-content:center}.online-indicator{background:#059669;background:var(--color-online);border:2px solid #fff;border-radius:50%;bottom:2px;box-shadow:0 0 8px #05966980;height:12px;position:absolute;right:2px;width:12px}.dialog-content{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs);min-width:0}.dialog-top{align-items:center;display:flex;gap:var(--spacing-sm);justify-content:space-between}.dialog-top strong{color:var(--color-navy-primary);flex:1 1;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-timestamp{color:var(--color-text-tertiary);flex-shrink:0;font-size:11px}.last-message-wrapper{align-items:center;display:flex;gap:var(--spacing-xs)}.last-message{color:var(--color-text-secondary);flex:1 1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-area{background:#f4f6f8;background:var(--chat-bg-primary)}.chat-header{background:#fff}.chat-partner{align-items:center;display:flex;gap:var(--spacing-md)}.chat-avatar-wrapper{position:relative}.chat-avatar{align-items:center;background:var(--color-navy-light);border:2px solid var(--color-navy-primary);border-radius:50%;color:#fff;display:flex;font-size:18px;font-weight:600;height:44px;justify-content:center;overflow:hidden;width:44px}.chat-avatar img{height:100%;object-fit:cover;width:100%}.back-button{align-items:center;background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;margin-right:var(--spacing-sm);transition:all var(--transition-fast);width:36px}.back-button:hover{background:var(--color-navy-secondary);border-color:var(--color-navy-secondary);color:#fff}.back-button:active{transform:scale(.95)}.partner-details{display:flex;flex-direction:column;gap:2px}.partner-details h3{color:var(--color-navy-primary);font-size:16px;font-weight:700;margin:0}.partner-status{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:13px;gap:var(--spacing-xs)}.partner-status .status-dot{background:#94a3b8;background:var(--color-offline);border-radius:50%;height:8px;width:8px}.partner-status .status-dot.online{background:#059669;background:var(--color-online);box-shadow:0 0 8px #05966980}.encryption-badge{align-items:center;background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-primary);display:flex;font-size:12px;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md)}.encryption-badge svg{color:var(--color-navy-secondary)}.typing-indicator{background:#f9fafb;background:var(--chat-bg-tertiary);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) var(--spacing-xl)}.typing-dot{animation:typing-bounce 1.4s infinite;background:#3b82f6;background:var(--color-typing);border-radius:50%;height:6px;width:6px}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.chat-messages{background:#f4f6f8;background:var(--chat-bg-primary);display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-md);min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-xl)}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:#0000}.chat-messages::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--color-navy-light)}.empty-messages,.loading-messages{align-items:center;color:var(--color-text-tertiary);display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-md);justify-content:center}.empty-messages svg{color:var(--color-text-muted);opacity:.3}.spinner{height:40px;width:40px}.message-group{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.message-group.sent{align-items:flex-end}.message-group.received{align-items:flex-start}.messages-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs);max-width:70%}.message-bubble{word-wrap:break-word;animation:message-appear .3s ease;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-md) var(--spacing-lg);position:relative}.message-bubble.highlighted{animation:highlight-pulse 2s ease-in-out}@keyframes message-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-bubble.received{background:#fff;background:var(--message-bg-received);border:1px solid var(--color-bg-secondary);border-bottom-left-radius:var(--radius-sm);color:#1e293b;color:var(--message-text-received)}.message-bubble.sent{background:#1e40af;background:var(--message-bg-sent);border-bottom-right-radius:var(--radius-sm);color:#fff;color:var(--message-text-sent)}.message-bubble p,.message-text{font-size:14px;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}.error-text{color:var(--color-danger)!important;font-style:italic}.message-bubble.received .attachment{background:var(--color-bg-primary);border:1px solid var(--color-border)}.file-name{flex:1 1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-meta{align-items:center;display:flex;font-size:11px;gap:var(--spacing-xs);margin-top:var(--spacing-xs);opacity:.8}.message-status{font-size:11px;font-style:italic}.chat-input{background:#fff;border-top:1px solid var(--color-border);flex-shrink:0;min-height:80px;padding:var(--spacing-lg) var(--spacing-xl)}.file-preview{background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);padding:var(--spacing-md)}.preview-header{align-items:center;display:flex;font-size:12px;font-weight:600;justify-content:space-between;margin-bottom:var(--spacing-sm)}.clear-preview{background:#0000;border:none;border-radius:var(--radius-sm);color:var(--color-navy-secondary);cursor:pointer;font-size:12px;font-weight:600;padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-fast)}.clear-preview:hover{background:#e5e7eb;background:var(--chat-bg-secondary)}.preview-files{flex-wrap:wrap}.preview-files,.preview-item{display:flex;gap:var(--spacing-sm)}.preview-item{align-items:center;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:200px;padding:var(--spacing-sm) var(--spacing-md);position:relative}.preview-icon{flex-shrink:0;font-size:20px}.preview-name{color:var(--color-text-secondary);flex:1 1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-preview{align-items:center;background:var(--color-navy-secondary);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:20px;justify-content:center;transition:all var(--transition-fast);width:20px}.remove-preview:hover{background:var(--color-navy-primary);transform:scale(1.1)}.input-wrapper{gap:var(--spacing-sm)}.btn-attach,.input-wrapper{align-items:center;display:flex}.btn-attach{background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-secondary);cursor:pointer;flex-shrink:0;height:36px;justify-content:center;transition:all var(--transition-fast);width:36px}.btn-attach:hover{background:var(--color-navy-secondary);border-color:var(--color-navy-secondary);color:#fff}.btn-attach:active{transform:scale(.95)}.input-container{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.input-main{align-items:center;background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-sm);padding:var(--spacing-xs);transition:all var(--transition-fast)}.input-main:focus-within{background:#fff;border-color:var(--color-navy-secondary);box-shadow:0 0 0 3px #1e40af1a}.message-input{background:#0000;border:none;font-size:14px;line-height:1.5;min-height:36px;padding:var(--spacing-sm) var(--spacing-md)}.input-toolbar{background:#f9fafb;background:var(--chat-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:var(--spacing-xs);padding:var(--spacing-xs)}.input-toolbar,.toolbar-btn{align-items:center;display:flex}.toolbar-btn{background:#0000;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;height:32px;justify-content:center;transition:all var(--transition-fast);width:32px}.toolbar-btn:hover{background:#e5e7eb;background:var(--chat-bg-secondary);color:var(--color-navy-secondary)}.toolbar-btn:active{transform:scale(.9)}.btn-send,.send-btn{align-items:center;background:var(--color-navy-secondary);border:none;border-radius:50%;box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;transition:all var(--transition-fast);width:36px}.btn-send:hover:not(:disabled),.send-btn:hover:not(:disabled){background:var(--color-navy-primary);box-shadow:var(--shadow-md);transform:scale(1.1)}.btn-send:active:not(:disabled),.send-btn:active:not(:disabled){transform:scale(1)}.btn-send:disabled,.send-btn:disabled{background:var(--color-border);cursor:not-allowed;opacity:.5}.btn-send svg,.send-btn svg{transition:transform var(--transition-fast)}.btn-send:hover:not(:disabled) svg,.send-btn:hover:not(:disabled) svg{transform:rotate(-45deg)}.no-chat{align-items:center;background:#f4f6f8;background:var(--chat-bg-primary);color:var(--color-text-tertiary);display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-lg);justify-content:center;padding:var(--spacing-3xl)}.no-chat-icon{color:var(--color-text-muted);font-size:64px;opacity:.3}.no-chat h3{color:var(--color-navy-primary);font-size:20px;font-weight:600;margin:0}.no-chat p{color:var(--color-text-secondary);font-size:14px;margin:0;max-width:400px;text-align:center}.info-panel-content{min-height:0}.info-value{align-items:center;display:flex;gap:var(--spacing-xs)}.loading-state,.no-files{color:var(--color-text-tertiary);font-size:14px;padding:var(--spacing-3xl) var(--spacing-lg);text-align:center}@media (max-width:1024px){.chat-sidebar{width:320px}:root{--info-panel-width:320px}}@media (max-width:768px){.chat-container{border-radius:0;height:100vh}.chat-sidebar{height:100vh;left:0;position:fixed;top:0;width:100%;z-index:100}.chat-sidebar.has-active-dialog{display:none}.back-button{display:flex!important}.info-panel.visible{bottom:0;box-shadow:var(--shadow-xl);max-width:360px;position:fixed;right:0;top:0;width:100%;z-index:100}.messages-wrapper{max-width:85%}.input-toolbar{display:none}}@media (max-width:480px){.dialog-avatar{font-size:16px;height:44px;width:44px}.chat-avatar{font-size:16px;height:40px;width:40px}.chat-header,.chat-input,.chat-messages{padding:var(--spacing-md)}}:root{--msg-sent-bg:linear-gradient(135deg,#1e40af,#1e3a8a);--msg-received-bg:#f1f5f9;--info-panel-width:360px;--scroll-btn-bg:#1e40af;--scroll-btn-hover:#1e3a8a;--scroll-btn-shadow:#1e40af4d}.group-chat-module{animation:fadeIn .3s ease-out;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100%;overflow:hidden;width:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.group-chat-module *{box-sizing:border-box}.groups-sidebar{background:var(--color-bg-primary);border-right:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden;width:380px}.sidebar-header{align-items:center;background:var(--color-bg-secondary);border-bottom:2px solid var(--color-navy-primary);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-xl)}.sidebar-header h2{color:var(--color-navy-primary);font-size:20px;font-weight:700;letter-spacing:-.5px;margin:0}.create-btn{background:var(--color-navy-secondary);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-fast)}.create-btn:hover:not(:disabled){background:var(--color-navy-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.create-btn:active:not(:disabled){transform:translateY(0)}.create-btn:disabled{cursor:not-allowed;opacity:.5}.groups-list{background:var(--color-bg-tertiary);flex:1 1;overflow-y:auto;padding:var(--spacing-sm)}.groups-list::-webkit-scrollbar{width:6px}.groups-list::-webkit-scrollbar-track{background:#0000}.groups-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.groups-list::-webkit-scrollbar-thumb:hover{background:var(--color-navy-light)}.group-item{align-items:center;background:var(--color-bg-primary);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-md);position:relative;transition:all var(--transition-fast)}.group-item:hover{background:var(--color-bg-hover);transform:translateX(2px)}.group-item.active{background:var(--color-navy-secondary);border-left:3px solid var(--color-navy-primary);padding-left:calc(var(--spacing-md) - 3px)}.group-item.active .group-last-message,.group-item.active .group-name{color:#fff}.group-avatar{align-items:center;background:var(--color-navy-light);border-radius:50%;box-shadow:var(--shadow-sm);color:#fff;display:flex;flex-shrink:0;font-size:20px;font-weight:600;height:52px;justify-content:center;overflow:hidden;width:52px}.group-avatar img{height:100%;object-fit:cover;width:100%}.group-info{flex:1 1;min-width:0;overflow:hidden}.group-name{color:var(--color-text-primary);font-size:16px;font-weight:600;margin-bottom:var(--spacing-xs)}.group-last-message,.group-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-last-message{color:var(--color-text-secondary);font-size:14px}.unread-badge{align-items:center;background:var(--color-navy-primary);border-radius:12px;box-shadow:var(--shadow-sm);color:#fff;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:24px;justify-content:center;min-width:24px;padding:0 var(--spacing-sm)}.empty-groups{color:var(--color-text-tertiary);padding:var(--spacing-3xl) var(--spacing-xl);text-align:center}.empty-groups p{font-size:15px;margin:var(--spacing-md) 0}.chat-area{background:var(--color-bg-secondary);display:flex;flex:1 1;flex-direction:column;height:100%;min-width:0;overflow:hidden;position:relative}.chat-header{align-items:center;background:var(--color-bg-primary);border-bottom:2px solid var(--color-navy-primary);box-shadow:var(--shadow-sm);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);z-index:10}.chat-header .group-info{align-items:center;display:flex;gap:var(--spacing-md)}.chat-header .group-avatar{font-size:18px;height:44px;width:44px}.chat-header .group-name{color:var(--color-navy-primary);font-size:18px;font-weight:700;margin-bottom:2px}.group-members-count{color:var(--color-text-secondary);font-size:13px}.info-toggle-btn{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;transition:all var(--transition-fast);width:44px}.info-toggle-btn:hover{background:var(--color-bg-hover);color:var(--color-navy-primary);transform:scale(1.05)}.info-toggle-btn.active{background:var(--color-navy-secondary);border-color:var(--color-navy-primary);color:#fff}.action-btn{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;height:40px;justify-content:center;padding:0;transition:all var(--transition-fast);width:40px}.action-btn:hover{background:var(--color-bg-hover);color:var(--color-navy-primary);transform:scale(1.05)}.action-btn:active{transform:scale(.95)}.action-btn.danger{color:var(--color-danger)}.action-btn.danger:hover{background:#dc26261a;border-color:var(--color-danger)}.no-group-selected{align-items:center;color:var(--color-text-tertiary);display:flex;flex-direction:column;height:100%;justify-content:center;padding:var(--spacing-3xl);text-align:center}.no-group-selected svg{color:var(--color-text-muted);margin-bottom:var(--spacing-xl);opacity:.3}.no-group-selected h3{color:var(--color-navy-primary);font-size:24px;font-weight:600;margin-bottom:var(--spacing-md)}.no-group-selected p{color:var(--color-text-secondary);font-size:15px;margin:0}.messages-container{background:#f4f6f8;display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-sm);min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-xl);position:relative;scroll-behavior:smooth}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:#0000}.messages-container::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:4px;-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}.messages-container::-webkit-scrollbar-thumb:hover{background:var(--color-navy-light)}.empty-messages,.loading-state{align-items:center;color:var(--color-text-tertiary);display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}.empty-messages p{font-size:15px;margin:var(--spacing-sm) 0}.scroll-to-bottom-btn{align-items:center;animation:slideInUp .3s ease-out;background:#1e40af;background:var(--scroll-btn-bg);border:none;border-radius:50%;bottom:80px;box-shadow:0 4px 12px #1e40af4d;box-shadow:0 4px 12px var(--scroll-btn-shadow);color:#fff;cursor:pointer;display:flex;height:44px;justify-content:center;position:absolute;right:20px;transition:all .3s cubic-bezier(.4,0,.2,1);width:44px;z-index:20}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.scroll-to-bottom-btn:hover{background:#1e3a8a;background:var(--scroll-btn-hover);box-shadow:0 6px 16px #1e40af4d;box-shadow:0 6px 16px var(--scroll-btn-shadow);transform:translateY(-2px)}.scroll-to-bottom-btn:active{box-shadow:0 2px 8px #1e40af4d;box-shadow:0 2px 8px var(--scroll-btn-shadow);transform:translateY(0)}.scroll-to-bottom-btn svg{transition:transform var(--transition-fast)}.scroll-to-bottom-btn:hover svg{transform:translateY(2px)}.message-wrapper{animation:messageSlideIn .2s ease-out;display:flex;flex-direction:column;margin-bottom:var(--spacing-md)}.message-wrapper.highlighted{animation:highlight-pulse 2s ease-in-out}@keyframes highlight-pulse{0%,to{background:#0000}15%{background:#1e40af26;border-radius:var(--radius-lg);margin:calc(var(--spacing-sm)*-1);padding:var(--spacing-sm)}85%{background:#1e40af26;border-radius:var(--radius-lg);margin:calc(var(--spacing-sm)*-1);padding:var(--spacing-sm)}}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-wrapper.sent{align-items:flex-end}.message-wrapper.received{align-items:flex-start}.message-sender{color:var(--color-text-tertiary);font-size:13px;font-weight:500;margin-bottom:var(--spacing-xs);padding:0 var(--spacing-md)}.message{display:flex;flex-direction:column;gap:var(--spacing-xs);max-width:70%;position:relative}.message-wrapper.sent .message{align-items:flex-end}.message-wrapper.received .message{align-items:flex-start}.message-content{word-wrap:break-word;background:#f1f5f9;background:var(--msg-received-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow-wrap:break-word;padding:var(--spacing-md) var(--spacing-lg);position:relative;transition:all var(--transition-fast)}.message-wrapper.sent .message-content{background:linear-gradient(135deg,#1e40af,#1e3a8a);background:var(--msg-sent-bg);border:none;border-bottom-right-radius:var(--spacing-xs);color:#fff}.message-wrapper.received .message-content{border-bottom-left-radius:var(--spacing-xs)}.message-reply{background:#1e40af1a;border-left:3px solid var(--color-navy-primary);border-radius:var(--radius-sm);font-size:13px;margin-bottom:var(--spacing-sm);opacity:.9;padding:var(--spacing-sm)}.message-text{font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.message-wrapper.sent .message-text{color:#fff}.message-wrapper.received .message-text{color:var(--color-text-primary)}.message-time{align-items:center;display:flex;font-size:11px;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.message-wrapper.sent .message-time{color:#fffc}.message-wrapper.received .message-time{color:var(--color-text-tertiary)}.message-status{font-size:14px}.message-actions{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;gap:var(--spacing-xs);opacity:0;padding:var(--spacing-xs);position:absolute;top:0;transition:opacity var(--transition-fast)}.message-wrapper.sent .message-actions{right:0;transform:translateY(-100%)}.message-wrapper.received .message-actions{left:0;transform:translateY(-100%)}.message:hover .message-actions{opacity:1}.message-action-btn{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all var(--transition-fast);width:28px}.message-action-btn:hover{background:var(--color-bg-tertiary);color:var(--color-navy-primary)}.message-attachments{margin-top:var(--spacing-sm)}.attachment{align-items:center;background:#ffffff1a;border-radius:var(--radius-sm);cursor:pointer;display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}.message-wrapper.received .attachment{background:var(--color-bg-primary);border:1px solid var(--color-border)}.attachment:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.file-size{font-size:12px;margin-left:auto;opacity:.8}.download-icon{flex-shrink:0}.message-reactions{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.reaction{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;display:inline-flex;font-size:14px;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.reaction:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);transform:scale(1.1)}.reaction-picker{display:none;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.emoji-btn,.message:hover .reaction-picker{display:flex}.emoji-btn{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;font-size:16px;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.emoji-btn:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);transform:scale(1.15)}.typing-indicator{align-items:center;animation:pulse 1.5s infinite;color:var(--color-text-secondary);display:flex;font-size:14px;gap:var(--spacing-sm);padding:var(--spacing-md)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.reply-preview{align-items:center;background:var(--color-bg-tertiary);border-top:1px solid var(--color-border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.reply-content{color:var(--color-text-secondary);font-size:14px}.reply-preview button{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:20px;height:28px;justify-content:center;transition:all var(--transition-fast);width:28px}.reply-preview button:hover{background:var(--color-bg-hover);color:var(--color-navy-primary)}.selected-files-preview{background:var(--color-bg-tertiary);border-top:1px solid var(--color-border);display:flex;flex-shrink:0;gap:var(--spacing-sm);overflow-x:auto;padding:var(--spacing-md) var(--spacing-lg)}.selected-file{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);display:flex;font-size:13px;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);white-space:nowrap}.selected-file button{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:16px;height:20px;justify-content:center;transition:all var(--transition-fast);width:20px}.selected-file button:hover{background:var(--color-danger);color:#fff}.message-input-container{align-items:center;background:var(--color-bg-primary);border-top:1px solid var(--color-border);display:flex;flex-shrink:0;gap:var(--spacing-md);min-height:76px;padding:var(--spacing-lg) var(--spacing-xl)}.attach-btn,.send-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;padding:0;transition:all var(--transition-fast);width:44px}.attach-btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary)}.attach-btn:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);color:var(--color-navy-primary);transform:scale(1.05)}.message-input{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);flex:1 1;font-family:inherit;font-size:15px;max-height:120px;min-height:44px;outline:none;padding:var(--spacing-md) var(--spacing-lg);resize:none;transition:all var(--transition-fast)}.message-input:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #1e40af1a}.message-input::placeholder{color:var(--color-text-muted)}.send-btn{background:var(--color-navy-secondary);box-shadow:var(--shadow-sm);color:#fff}.send-btn:hover:not(:disabled){background:var(--color-navy-primary);box-shadow:var(--shadow-md);transform:scale(1.05)}.send-btn:active:not(:disabled){transform:scale(.95)}.send-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.4}.ws-status{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:20px;bottom:calc(var(--spacing-xl) + 60px);box-shadow:var(--shadow-md);color:var(--color-text-secondary);font-size:13px;left:50%;padding:var(--spacing-sm) var(--spacing-lg);position:absolute;transform:translateX(-50%);z-index:5}.ws-status.offline{border-color:var(--color-danger);color:var(--color-danger)}.info-panel{background:var(--color-bg-primary);border-left:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden;transition:width .3s ease;width:0}.info-panel.visible{width:360px;width:var(--info-panel-width)}.info-panel-header{align-items:center;background:var(--color-bg-secondary);border-bottom:2px solid var(--color-navy-primary);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl)}.info-panel-header h3{color:var(--color-navy-primary);font-size:18px;font-weight:700;margin:0}.close-info-panel{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.close-info-panel:hover{background:var(--color-bg-hover);color:var(--color-navy-primary)}.info-panel-tabs{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);display:flex;flex-shrink:0;overflow-x:auto}.info-panel-tabs::-webkit-scrollbar{height:4px}.info-panel-tabs::-webkit-scrollbar-track{background:#0000}.info-panel-tabs::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:2px}.tab-btn{background:#0000;border:none;border-bottom:2px solid #0000;color:var(--color-text-secondary);cursor:pointer;flex:1 1;font-size:13px;font-weight:500;min-width:60px;padding:var(--spacing-md) var(--spacing-sm);transition:all var(--transition-fast);white-space:nowrap}.tab-btn:hover{background:var(--color-bg-hover)}.tab-btn.active,.tab-btn:hover{color:var(--color-navy-primary)}.tab-btn.active{border-bottom-color:var(--color-navy-primary);font-weight:600}.info-panel-content{flex:1 1;overflow-y:auto;padding:var(--spacing-lg)}.info-panel-content::-webkit-scrollbar{width:6px}.info-panel-content::-webkit-scrollbar-track{background:#0000}.info-panel-content::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.info-tab{display:flex;flex-direction:column;gap:var(--spacing-lg)}.group-info-header{padding:var(--spacing-lg) 0;text-align:center}.group-avatar-large{align-items:center;background:var(--color-navy-light);border-radius:50%;box-shadow:var(--shadow-md);color:#fff;display:flex;font-size:32px;font-weight:600;height:80px;justify-content:center;margin:0 auto var(--spacing-md);overflow:hidden;width:80px}.group-avatar-large img{height:100%;object-fit:cover;width:100%}.group-info-header h2{color:var(--color-navy-primary);font-size:20px;font-weight:700;margin:0 0 var(--spacing-sm) 0}.group-description{color:var(--color-text-secondary);font-size:14px;margin:0}.info-section{background:var(--color-bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-md)}.info-row{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-sm) 0}.info-row:last-child{border-bottom:none}.info-label{color:var(--color-text-secondary);font-size:14px;font-weight:500}.info-value{color:var(--color-text-primary);font-size:14px;font-weight:600}.role-badge{background:var(--color-navy-light);border-radius:var(--radius-sm);color:#fff;font-size:12px;padding:var(--spacing-xs) var(--spacing-md);text-transform:capitalize}.members-tab{display:flex;flex-direction:column;gap:var(--spacing-md)}.members-search{display:flex;gap:var(--spacing-sm)}.search-input{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);flex:1 1;font-size:14px;outline:none;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}.search-input:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #1e40af1a}.search-input::placeholder{color:var(--color-text-muted)}.add-members-btn{background:var(--color-navy-secondary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);width:100%}.add-members-btn:hover{background:var(--color-navy-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.members-list-panel{display:flex;flex-direction:column;gap:var(--spacing-sm)}.member-card-panel{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:var(--spacing-md);transition:all var(--transition-fast)}.member-card-panel:hover{background:var(--color-bg-hover);transform:translateX(2px)}.member-info{flex:1 1;gap:var(--spacing-md)}.member-avatar,.member-info{align-items:center;display:flex}.member-avatar{background:var(--color-navy-light);border-radius:50%;color:#fff;flex-shrink:0;font-size:16px;font-weight:600;height:40px;justify-content:center;overflow:hidden;width:40px}.member-avatar img{height:100%;object-fit:cover;width:100%}.member-details{flex:1 1;min-width:0}.member-name{color:var(--color-text-primary);font-size:14px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-role-small{color:var(--color-text-tertiary);font-size:12px;text-transform:capitalize}.member-actions-panel{align-items:center;display:flex;gap:var(--spacing-sm)}.role-select-small{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;font-size:12px;outline:none;padding:var(--spacing-xs) var(--spacing-sm)}.btn-remove-small{align-items:center;background:#0000;border:1px solid var(--color-border);border-radius:50%;color:var(--color-danger);cursor:pointer;display:flex;font-size:16px;height:24px;justify-content:center;padding:0;transition:all var(--transition-fast);width:24px}.btn-remove-small:hover{background:var(--color-danger);border-color:var(--color-danger);color:#fff}.search-tab{display:flex;flex-direction:column;gap:var(--spacing-md)}.search-messages,.search-results{display:flex;gap:var(--spacing-sm)}.search-results{flex-direction:column}.search-results-header{border-bottom:1px solid var(--color-border);color:var(--color-navy-primary);font-size:14px;font-weight:600;padding:var(--spacing-sm) 0}.search-result-item{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;padding:var(--spacing-md);transition:all var(--transition-fast)}.search-result-item:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);box-shadow:var(--shadow-sm);transform:translateX(4px)}.search-result-sender{color:var(--color-navy-primary);font-size:12px;font-weight:600;margin-bottom:var(--spacing-xs)}.search-result-text{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;color:var(--color-text-primary);display:-webkit-box;font-size:14px;margin-bottom:var(--spacing-xs);overflow:hidden}.search-result-time{color:var(--color-text-tertiary);font-size:12px}.no-search-results,.search-placeholder{color:var(--color-text-tertiary);font-size:14px;padding:var(--spacing-3xl) var(--spacing-lg);text-align:center}.files-tab{gap:var(--spacing-md)}.files-list,.files-tab{display:flex;flex-direction:column}.files-list{gap:var(--spacing-sm)}.file-item-panel{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);transition:all var(--transition-fast)}.file-item-panel:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);box-shadow:var(--shadow-sm);transform:translateX(4px)}.file-icon-panel{align-items:center;background:var(--color-navy-light);border-radius:var(--radius-sm);color:#fff;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.file-details{flex:1 1;min-width:0}.file-name-panel{color:var(--color-text-primary);font-size:14px;font-weight:600;margin-bottom:var(--spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{color:var(--color-text-tertiary);display:flex;font-size:12px;gap:var(--spacing-md)}.file-size-small{font-weight:500}.file-sender{font-style:italic}.download-icon-panel{color:var(--color-navy-primary);flex-shrink:0}.no-files{color:var(--color-text-tertiary);font-size:14px;padding:var(--spacing-3xl) var(--spacing-lg);text-align:center}.settings-tab{display:flex;flex-direction:column;gap:var(--spacing-md)}.settings-list-panel{display:flex;flex-direction:column;gap:var(--spacing-sm)}.setting-item-panel{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:var(--spacing-md);padding:var(--spacing-md);text-align:left;transition:all var(--transition-fast);width:100%}.setting-item-panel:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);transform:translateX(4px)}.setting-item-panel.danger{color:var(--color-danger)}.setting-item-panel.danger:hover{background:#dc26261a;border-color:var(--color-danger)}.modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e293bb3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:slideUp .3s ease-out;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:85vh;max-width:600px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;background:var(--color-bg-secondary);border-bottom:2px solid var(--color-navy-primary);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-xl)}.modal-header h3{color:var(--color-navy-primary);font-size:20px;font-weight:700;margin:0}.close-modal{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.close-modal:hover{background:var(--color-bg-hover);color:var(--color-navy-primary)}.modal-body{flex:1 1;overflow-y:auto;padding:var(--spacing-xl)}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:#0000}.modal-body::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.form-group{margin-bottom:var(--spacing-xl)}.form-group label{color:var(--color-text-primary);display:block;font-size:14px;font-weight:600;margin-bottom:var(--spacing-sm)}.form-group input[type=text],.form-group textarea{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:inherit;font-size:15px;outline:none;padding:var(--spacing-md) var(--spacing-lg);transition:all var(--transition-fast);width:100%}.form-group input[type=text]:focus,.form-group textarea:focus{border-color:var(--color-navy-light);box-shadow:0 0 0 3px #1e40af1a}.form-group input[type=text]::placeholder,.form-group textarea::placeholder{color:var(--color-text-muted)}.form-group textarea{min-height:80px;resize:vertical}.members-list{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:300px;overflow-y:auto;padding:var(--spacing-md)}.members-list::-webkit-scrollbar{width:6px}.members-list::-webkit-scrollbar-track{background:#0000}.members-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.member-item{align-items:center;border-radius:var(--radius-sm);display:flex;gap:var(--spacing-md);padding:var(--spacing-sm);transition:background var(--transition-fast)}.member-item:hover{background:var(--color-bg-hover)}.member-item input[type=checkbox]{accent-color:var(--color-navy-primary);cursor:pointer;height:18px;width:18px}.member-item label{color:var(--color-text-primary);cursor:pointer;flex:1 1;font-size:14px;margin:0}.no-friends{color:var(--color-text-secondary);font-size:14px;margin:0;padding:var(--spacing-xl);text-align:center}.forward-groups-list{display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:400px;overflow-y:auto}.forward-groups-list::-webkit-scrollbar{width:6px}.forward-groups-list::-webkit-scrollbar-track{background:#0000}.forward-groups-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.forward-group-item{align-items:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);transition:all var(--transition-fast)}.forward-group-item:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light);transform:translateX(4px)}.forward-group-item .group-avatar{font-size:16px;height:40px;width:40px}.forward-group-item .group-name{color:var(--color-text-primary);font-size:15px;font-weight:500;margin:0}.modal-actions{background:var(--color-bg-secondary);border-top:1px solid var(--color-border);display:flex;flex-shrink:0;gap:var(--spacing-md);justify-content:flex-end;padding:var(--spacing-lg) var(--spacing-xl)}.cancel-btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-fast)}.cancel-btn:hover{background:var(--color-bg-hover);border-color:var(--color-navy-light)}.error-toast{align-items:center;animation:slideInRight .3s ease-out;background:var(--color-danger);border-radius:var(--radius-md);bottom:var(--spacing-xl);box-shadow:var(--shadow-xl);color:#fff;display:flex;gap:var(--spacing-md);max-width:400px;padding:var(--spacing-md) var(--spacing-lg);position:fixed;right:var(--spacing-xl);z-index:2000}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.error-toast button{align-items:center;background:#0000;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:24px;justify-content:center;padding:0;transition:all var(--transition-fast);width:24px}.error-toast button:hover{background:#fff3}@media (max-width:1024px){.groups-sidebar{width:320px}:root{--info-panel-width:320px}.scroll-to-bottom-btn{bottom:70px;height:40px;right:16px;width:40px}}@media (max-width:768px){.group-chat-module{border-radius:0;height:100vh}.groups-sidebar{display:none}.info-panel.visible{bottom:0;box-shadow:var(--shadow-xl);max-width:360px;position:fixed;right:0;top:0;width:100%;z-index:100}.message{max-width:85%}.modal-content{max-height:95vh;width:95%}.scroll-to-bottom-btn{bottom:70px;height:36px;right:15px;width:36px}.messages-container{padding:var(--spacing-md)}}@media (max-width:480px){.chat-header,.message-input-container{padding:var(--spacing-md)}.scroll-to-bottom-btn{bottom:60px;height:32px;right:12px;width:32px}.scroll-to-bottom-btn svg{height:16px;width:16px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scroll-to-bottom-btn{animation:none}}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--color-navy-primary);outline-offset:2px}.settings-container{background:var(--color-bg-primary);color:var(--color-text-primary);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100%;overflow:hidden;padding:var(--spacing-2xl)}.settings-header{flex-shrink:0;margin-bottom:var(--spacing-2xl)}.settings-header h1{color:var(--color-navy-primary);font-size:32px;font-weight:700;margin:0 0 var(--spacing-sm) 0}.settings-header p{color:var(--color-text-secondary);font-size:16px;margin:0}.settings-loading{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-lg);justify-content:center;min-height:400px}.spinner{animation:spin 1s linear infinite;border:4px solid var(--color-border);border-radius:50%;border-top-color:var(--color-navy-primary);height:48px;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.settings-tabs{border-bottom:2px solid var(--color-border);display:flex;flex-shrink:0;gap:var(--spacing-sm);margin-bottom:var(--spacing-2xl);overflow-x:auto;overflow-y:hidden;padding-bottom:0}.settings-tabs button{align-items:center;background:#0000;border:none;border-bottom:3px solid #0000;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-fast);white-space:nowrap}.settings-tabs button:hover{background:var(--color-bg-tertiary);color:var(--color-navy-primary)}.settings-tabs button.active{border-bottom-color:var(--color-navy-primary);color:var(--color-navy-primary);font-weight:600}.settings-tabs button svg{flex-shrink:0}.settings-content{flex:1 1;max-width:800px;min-height:0;overflow-x:hidden;overflow-y:auto;padding-right:var(--spacing-md)}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:var(--color-bg-secondary);border-radius:4px}.settings-content::-webkit-scrollbar-thumb{background:var(--color-navy-light);border-radius:4px}.settings-content::-webkit-scrollbar-thumb:hover{background:var(--color-navy-primary)}.settings-section{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-xl);padding:var(--spacing-2xl)}.settings-section:last-child{margin-bottom:var(--spacing-2xl)}.settings-section h2{color:var(--color-navy-primary);font-size:24px;font-weight:700;margin:0 0 var(--spacing-xl) 0}.settings-section h3{color:var(--color-navy-primary);font-size:18px;font-weight:600;margin:0}.setting-item{margin-bottom:var(--spacing-xl)}.setting-item:last-child{margin-bottom:0}.setting-item label{color:var(--color-text-primary);display:block;font-size:14px;font-weight:600;margin-bottom:var(--spacing-sm)}.setting-item input[type=password],.setting-item input[type=tel],.setting-item input[type=text]{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:15px;padding:var(--spacing-md) var(--spacing-lg);transition:all var(--transition-fast);width:100%}.setting-item input:focus{border-color:var(--color-navy-primary);box-shadow:0 0 0 3px #1e3a8a1a;outline:none}.setting-item input:disabled{background:var(--color-bg-secondary);color:var(--color-text-muted);cursor:not-allowed}.input-group{align-items:center;display:flex;gap:var(--spacing-md)}.input-group input{flex:1 1}.input-actions{display:flex;gap:var(--spacing-sm)}.help-text{color:var(--color-text-muted);font-size:13px;margin-top:var(--spacing-xs)}.info-text{color:var(--color-text-secondary);font-size:13px;white-space:nowrap}.avatar-section{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;gap:var(--spacing-xl);padding:var(--spacing-lg)}.avatar-preview{background:var(--color-bg-primary);border:3px solid var(--color-border);border-radius:50%;flex-shrink:0;height:120px;overflow:hidden;position:relative;width:120px}.avatar-preview img{background:var(--color-bg-tertiary);display:block;height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:var(--color-navy-primary);color:var(--color-bg-primary);display:flex;font-size:48px;font-weight:700;height:100%;justify-content:center;text-transform:uppercase;width:100%}.avatar-actions{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-md)}.btn-success{align-items:center;background:var(--color-success);border:none;border-radius:var(--radius-md);color:var(--color-bg-primary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:var(--spacing-sm);padding:10px 20px;transition:all var(--transition-fast);white-space:nowrap}.btn-success:hover:not(:disabled){background:#047857;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-danger{align-items:center;background:var(--color-danger);border:none;border-radius:var(--radius-md);color:var(--color-bg-primary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:var(--spacing-sm);padding:10px 20px;transition:all var(--transition-fast);white-space:nowrap}.btn-danger:hover:not(:disabled){background:#b91c1c;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-danger-outline{align-items:center;background:#0000;border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:var(--spacing-sm);padding:10px 20px;transition:all var(--transition-fast);white-space:nowrap}.btn-danger-outline:hover:not(:disabled){background:var(--color-danger);color:var(--color-bg-primary)}button:disabled{cursor:not-allowed;opacity:.5}.button-group{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-lg)}.devices-list{flex-direction:column}.device-card,.devices-list{display:flex;gap:var(--spacing-lg)}.device-card{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;transition:all var(--transition-fast)}.device-card:hover{border-color:var(--color-navy-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.device-icon{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-primary);display:flex;flex-shrink:0;font-size:32px;height:56px;justify-content:center;width:56px}.device-info{flex:1 1}.device-info h4{color:var(--color-navy-primary);font-size:16px;font-weight:600;margin:0 0 var(--spacing-xs) 0}.device-last-seen,.device-platform{color:var(--color-text-secondary);font-size:13px;margin:2px 0}.activity-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:600;margin-top:var(--spacing-sm);padding:4px 12px}.activity-badge.green{background:#0596691a;color:var(--color-success)}.activity-badge.blue{background:#1e40af1a;color:var(--color-navy-secondary)}.activity-badge.orange{background:#d977061a;color:var(--color-warning)}.activity-badge.gray{background:#94a3b81a;color:var(--color-text-muted)}.activity-badge.red{background:#dc26261a;color:var(--color-danger)}.sessions-list{flex-direction:column}.session-card,.sessions-list{display:flex;gap:var(--spacing-lg)}.session-card{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;transition:all var(--transition-fast)}.session-card:hover{border-color:var(--color-navy-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.session-icon{align-items:center;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-navy-primary);display:flex;flex-shrink:0;font-size:32px;height:56px;justify-content:center;width:56px}.session-info{flex:1 1}.session-info h4{color:var(--color-navy-primary);font-size:16px;font-weight:600;margin:0 0 var(--spacing-xs) 0}.session-ip,.session-time{color:var(--color-text-secondary);font-size:13px;margin:2px 0}.history-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-md)}.history-item{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.history-item .phone{color:var(--color-navy-primary);font-weight:600}.history-item .date{color:var(--color-text-secondary);font-size:13px}.empty-state{padding:var(--spacing-3xl)}.empty-state,.empty-text{color:var(--color-text-muted);text-align:center}.empty-text{padding:var(--spacing-xl)}.notification{align-items:center;animation:slideIn .3s ease-out;border-radius:var(--radius-md);bottom:var(--spacing-xl);box-shadow:var(--shadow-xl);display:flex;gap:var(--spacing-md);max-width:500px;min-width:300px;padding:var(--spacing-lg) 20px;position:fixed;right:var(--spacing-xl);z-index:1000}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.notification.success{background:var(--color-success);color:var(--color-bg-primary)}.notification.error{background:var(--color-danger);color:var(--color-bg-primary)}.notification button{align-items:center;background:#0000;border:none;color:inherit;cursor:pointer;display:flex;font-size:24px;height:24px;justify-content:center;margin-left:auto;opacity:.8;padding:0;width:24px}.notification button:hover{opacity:1}@media (max-width:768px){.settings-container{padding:var(--spacing-lg)}.settings-header h1{font-size:24px}.settings-tabs{gap:var(--spacing-xs)}.settings-tabs button{font-size:14px;padding:10px var(--spacing-lg)}.settings-section{padding:20px}.avatar-section,.device-card,.session-card{flex-direction:column;text-align:center}.device-info,.session-info{text-align:center}.history-item{align-items:flex-start;flex-direction:column;gap:var(--spacing-sm)}.notification{bottom:var(--spacing-lg);left:var(--spacing-lg);min-width:auto;right:var(--spacing-lg)}.input-group{align-items:stretch;flex-direction:column}.input-actions{width:100%}.input-actions button{flex:1 1}}@media (max-width:480px){.settings-tabs button span{display:none}.settings-tabs button{padding:10px}.button-group{flex-direction:column}.button-group button{width:100%}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus-visible,input:focus-visible{outline:2px solid var(--color-navy-primary);outline-offset:2px}
/*# sourceMappingURL=main.418eff2f.css.map*/