body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg-primary:#667eea;--bg-secondary:#764ba2;--text-primary:#333;--text-secondary:#666;--bg-card:#fffffff2;--bg-header:#ffffff1a;--border-color:#eee;--shadow:0 8px 25px #00000026;--accent-color:#4caf50}[data-theme=dark]{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--bg-card:#1e1e32f2;--bg-header:#0000004d;--border-color:#333;--shadow:0 8px 25px #0006;--accent-color:#66bb6a}.App{color:#333;color:var(--text-primary);min-height:100vh;position:relative;text-align:center;transition:all .3s ease}.App,.App.dark-mode{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%)}.offline-banner{animation:slideDown .5s ease;background:linear-gradient(45deg,#ff9800,#f57c00);color:#fff;font-weight:700;left:0;padding:10px;position:fixed;right:0;text-align:center;top:0;z-index:1000}.kill-switch-overlay{align-items:center;animation:fadeIn .5s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f44336f2;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.kill-switch-message{background:#fff;border-radius:15px;box-shadow:0 10px 30px #0000004d;color:#f44336;font-size:18px;font-weight:700;margin:20px;max-width:400px;padding:30px;text-align:center}[data-theme=dark] .kill-switch-message{background:#fffffff2;background:var(--bg-card);color:#ff6b6b}.App-header{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,#667eea33,#764ba233);border-bottom:1px solid #ffffff1a;box-shadow:0 4px 30px #0000001a;color:#fff;margin-bottom:0;padding:25px 40px;position:-webkit-sticky;position:sticky;top:0;transition:all .3s ease;z-index:100}.App-header:hover{box-shadow:0 6px 40px #00000026}.header-content{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-bottom:20px;margin-left:auto;margin-right:auto;max-width:1400px}.header-logo-section{align-items:center;display:flex;gap:15px}.header-logo{animation:logo-float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));height:50px;transition:transform .3s ease;width:50px}.header-logo:hover{animation-play-state:paused;transform:scale(1.1) rotate(5deg)}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.App-header h1{-webkit-text-fill-color:#0000;animation:headerGlow 3s ease-in-out infinite;background:linear-gradient(135deg,#fff,#e3f2fd);background-clip:text;-webkit-background-clip:text;font-size:2.8rem;font-weight:700;letter-spacing:1px;margin:0;position:relative;text-shadow:none}@keyframes headerGlow{0%,to{filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}50%{filter:drop-shadow(0 0 16px rgba(255,255,255,.5))}}.header-controls{flex-wrap:wrap;gap:25px}.upgrade-btn{background:linear-gradient(135deg,gold,orange);border:none;border-radius:25px;box-shadow:0 4px 15px #ffd70066;color:#333;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:.5px;overflow:hidden;padding:12px 24px;position:relative;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.upgrade-btn:before{background:#ffffff80;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.upgrade-btn:hover:before{height:200px;width:200px}.upgrade-btn:hover{box-shadow:0 8px 25px #ffd70099;transform:translateY(-2px) scale(1.05)}.upgrade-btn:active{transform:translateY(0) scale(.98)}.theme-toggle{align-items:center;background:linear-gradient(135deg,#ffffff26,#ffffff0d);border:1px solid #fff3;border-radius:12px;box-shadow:0 4px 15px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:20px;justify-content:center;min-height:48px;min-width:48px;overflow:hidden;padding:12px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.theme-toggle:before{background:#fff3;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.theme-toggle:hover:before{height:100px;width:100px}.theme-toggle:hover{background:linear-gradient(135deg,#ffffff40,#ffffff26);box-shadow:0 8px 25px #00000026;transform:translateY(-2px) scale(1.05)}.theme-toggle:active{transform:translateY(0) scale(.98)}.user-info{align-items:center;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid #ffffff26;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;font-size:16px;font-weight:500;gap:18px;padding:10px 20px}.user-info span{text-shadow:0 1px 2px #0000001a}.logout-btn{background:linear-gradient(135deg,#f44336cc,#d32f2fcc);border:1px solid #ffffff4d;border-radius:10px;box-shadow:0 4px 15px #f443364d;color:#fff;cursor:pointer;font-size:14px;font-weight:600;min-height:44px;overflow:hidden;padding:10px 20px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.logout-btn:before{background:#fff3;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.logout-btn:hover:before{height:200px;width:200px}.logout-btn:hover{background:linear-gradient(135deg,#f44336,#d32f2f);box-shadow:0 8px 25px #f4433666;transform:translateY(-2px) scale(1.05)}.logout-btn:active{transform:translateY(0) scale(.98)}.tab-navigation{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;background:var(--bg-header);display:flex;justify-content:center;margin-bottom:30px;overflow-x:auto;padding:0 20px;scrollbar-width:none}.tab-navigation::-webkit-scrollbar{display:none}.tab{align-items:center;background:none;border:none;border-bottom:3px solid #0000;color:#ffffffb3;cursor:pointer;display:flex;font-size:16px;font-weight:500;min-height:44px;min-width:-webkit-fit-content;min-width:fit-content;padding:15px 20px;transition:all .3s ease;white-space:nowrap}.tab.active,.tab:hover{background:#ffffff1a;color:#fff}.tab.active{border-bottom-color:#4caf50;border-bottom-color:var(--accent-color)}.App-main{padding:0 20px 40px}.vpn-container{align-items:center;display:flex;flex-direction:column;gap:30px;margin:0 auto;max-width:1200px}.server-section{max-width:800px;width:100%}.control-section{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;background:var(--bg-card);border:1px solid #eee;border:1px solid var(--border-color);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px;min-width:280px;padding:25px;position:-webkit-sticky;position:sticky;top:120px}.connecting-text{animation:blink 1.5s infinite;color:#666;color:var(--text-secondary);font-size:16px}.kill-switch-text{background:#f443361a;border:1px solid #f443364d;border-radius:8px;color:#f44336;font-size:14px;font-weight:700;padding:8px 12px}.selected-server-info{align-items:center;background:rgba(#4CAF50,.1);background:rgba(var(--accent-color),.1);border:2px solid rgba(#4caf50,.3);border:2px solid rgba(var(--accent-color),.3);border-radius:12px;box-sizing:border-box;display:flex;gap:15px;padding:15px;width:100%}.selected-server-info.multi-hop{align-items:stretch;flex-direction:column;gap:10px}.connection-type{color:#666;color:var(--text-secondary);font-size:12px;font-weight:700;text-align:center;text-transform:uppercase}.hop-chain{flex-wrap:wrap;gap:8px;justify-content:center}.hop-item{font-size:12px;gap:5px}.hop-arrow{color:#666;color:var(--text-secondary)}.server-details{align-items:flex-start;gap:5px}.server-purpose{color:#666;color:var(--text-secondary);font-size:12px;text-transform:capitalize}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.5}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.logout-btn,.tab,.theme-toggle{-webkit-tap-highlight-color:rgba(0,0,0,.1);touch-action:manipulation}html{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}@supports (-webkit-touch-callout:none){.App{min-height:-webkit-fill-available}.tab-navigation{-webkit-overflow-scrolling:touch}}@media (max-width:1024px){.vpn-container{align-items:stretch;flex-direction:column}.control-section{margin-bottom:20px;order:-1;position:static}}@media (max-width:768px) and (min-width:481px){.App-header{padding:20px 25px}.tab-navigation{padding:0 15px}.analytics-tabs{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width:768px){.App-header{padding:15px 20px;position:relative}.header-content{flex-direction:column;gap:15px;text-align:center}.header-logo-section{flex-direction:column;gap:10px}.header-logo{height:45px;width:45px}.App-header h1{font-size:2rem}.header-controls{justify-content:center;width:100%}.user-info{flex-direction:column;gap:10px;text-align:center}.tab-navigation{justify-content:flex-start;margin-bottom:20px;padding:0 10px;position:-webkit-sticky;position:sticky;top:0;z-index:99}.tab{flex-shrink:0;font-size:14px;min-width:auto;padding:12px 16px}.App-main{padding:0 15px 40px}.control-section{min-width:auto;order:1;padding:20px;position:static;width:100%}.selected-server-info{flex-direction:column;gap:10px;text-align:center}.hop-chain{justify-content:center}.analytics-tabs{flex-direction:column;padding:10px}.analytics-tab{font-size:15px;padding:15px;text-align:center;width:100%}}@media (max-width:480px){.App{font-size:14px}.App-header{padding:12px 15px}.header-logo{height:38px;width:38px}.App-header h1{font-size:1.5rem;margin-bottom:5px}.header-controls{flex-direction:row;gap:10px;justify-content:space-between;width:100%}.theme-toggle{min-height:40px;min-width:40px;padding:8px}.logout-btn{font-size:12px;min-height:40px;padding:8px 12px}.user-info{flex-direction:row;font-size:12px;gap:8px}.tab{font-size:13px;min-height:44px;padding:10px 12px}.App-main{padding:0 10px 40px}.control-section{border-radius:12px;padding:15px}.kill-switch-message{font-size:16px;margin:15px;padding:20px}.server-flag{font-size:20px}.server-name{font-size:14px}.server-purpose{font-size:11px}}@media (max-width:430px) and (min-width:415px){.tab-navigation{padding:0 8px}.tab{font-size:12px;padding:10px 14px}}@media (max-width:414px){.App-header h1{font-size:1.3rem}.header-controls{gap:8px}.user-info{font-size:11px}.tab{font-size:12px;padding:8px 10px}.analytics-tab{font-size:13px;padding:12px}}@media (max-width:375px){.App-header h1{font-size:1.2rem}.tab{font-size:11px}.analytics-tabs,.tab{padding:8px}.analytics-tab{font-size:12px;padding:10px}}@media (max-height:500px) and (orientation:landscape){.App-header{padding:10px 20px}.App-header h1{font-size:1.5rem}.header-content{flex-direction:row;justify-content:space-between;margin-bottom:10px}.tab-navigation{padding:5px 10px}.tab{font-size:12px;padding:8px 12px}.control-section{padding:15px}}@media (max-width:768px){[data-theme=dark] .tab-navigation{background:#0006}[data-theme=dark] .analytics-tabs{background:#1e1e32f2}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){.tab{border:2px solid}.tab.active{background:#333;background:var(--text-primary);color:#667eea;color:var(--bg-primary)}}@supports (padding:max(0px)){.App-header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(15px,env(safe-area-inset-top))}.App-main{padding-bottom:max(40px,env(safe-area-inset-bottom));padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}}.connect-button{border:none;border-radius:25px;box-shadow:0 4px 15px #0003;cursor:pointer;font-size:18px;font-weight:700;min-height:50px;min-width:150px;padding:15px 30px;transition:all .3s ease}.connect-button.disconnected{background:linear-gradient(45deg,#4caf50,#45a049);background:linear-gradient(45deg,var(--accent-color,#4caf50),#45a049);color:#fff}.connect-button.disconnected:hover{background:linear-gradient(45deg,#45a049,#4caf50);background:linear-gradient(45deg,#45a049,var(--accent-color,#4caf50));box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.connect-button.connected{background:linear-gradient(45deg,#f44336,#da190b);color:#fff}.connect-button.connected:hover{background:linear-gradient(45deg,#da190b,#f44336);box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.connect-button:disabled{cursor:not-allowed;opacity:.6;transform:none!important}@media (max-width:768px){.connect-button{font-size:16px;min-width:140px;padding:12px 25px}}@media (max-width:480px){.connect-button{min-width:auto;width:100%}}.server-list{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:800px;padding:25px}.server-list-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.server-list h3{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0}.server-controls{flex-direction:column;flex-wrap:wrap;gap:15px}.control-row{display:flex;flex-wrap:wrap;gap:10px}.filter-select,.purpose-select,.sort-select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;min-width:120px;padding:8px 12px;transition:border-color .3s ease}.filter-select:focus,.purpose-select:focus,.sort-select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.optimal-toggle{align-items:center;color:#333;color:var(--text-primary,#333);cursor:pointer;display:flex;font-size:14px;gap:8px}.optimal-toggle input{margin:0}.quick-connect{margin-bottom:20px}.optimal-connect-btn{align-items:center;background:linear-gradient(45deg,#4caf50,#45a049);background:linear-gradient(45deg,var(--accent-color,#4caf50),#45a049);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:16px;font-weight:700;gap:8px;padding:15px 20px;transition:all .3s ease;width:100%}.optimal-connect-btn:hover{background:linear-gradient(45deg,#45a049,#4caf50);background:linear-gradient(45deg,#45a049,var(--accent-color,#4caf50));box-shadow:0 8px 20px #0000004d;transform:translateY(-2px)}.optimal-info{font-size:12px;opacity:.9}.server-stats{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf501a;border:1px solid rgba(var(--accent-color,76,175,80),.1);border-radius:10px;justify-content:space-around;margin-bottom:20px;padding:15px}.server-grid{max-height:500px;overflow-y:auto}.server-item{background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:12px;cursor:pointer;padding:20px;position:relative;transition:all .3s ease}.server-item:hover:not(.disabled){background:#2196f30d;background:rgba(var(--accent-color,33,150,243),.05);border-color:#2196f3;border-color:var(--accent-color,#2196f3);box-shadow:0 8px 25px #2196f333;transform:translateY(-3px)}.server-item.selected{background:#4caf5014;background:rgba(var(--accent-color,76,175,80),.08);border-color:#4caf50;border-color:var(--accent-color,#4caf50);box-shadow:0 8px 25px #4caf504d}.server-item.disabled{cursor:not-allowed;opacity:.5}.server-item.optimal{background:linear-gradient(135deg,#4caf500d,#4caf501a);border-color:#4caf50}.server-header{flex-wrap:wrap;margin-bottom:15px}.server-title{align-items:center;display:flex;flex:1 1;gap:12px}.server-flag{font-size:24px}.purpose-badge{align-items:center;border-radius:12px;color:#fff;display:flex;font-size:11px;font-weight:500;gap:4px;padding:4px 8px;text-transform:capitalize}.purpose-badge span{font-size:10px}.server-load{align-items:center;display:flex;gap:8px}.load-bar{background:#eee;background:var(--border-color,#eee);width:50px}.load-fill{transition:width .3s ease}.load-text{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:700;min-width:35px}.server-details{align-items:center;flex-wrap:wrap;gap:10px;justify-content:space-between}.server-location{color:#666;color:var(--text-secondary,#666);font-size:14px}.server-stats{align-items:center;display:flex;gap:10px}.server-ping{background:#4caf501a;border-radius:12px;color:#4caf50;font-size:13px;font-weight:700;padding:4px 8px}.feature-indicators{display:flex;gap:5px}.feature-icon{font-size:14px;opacity:.8}.optimal-indicator{background:linear-gradient(45deg,#4caf50,#45a049);border-radius:12px;box-shadow:0 2px 8px #4caf504d;color:#fff;font-size:10px;font-weight:700;padding:4px 8px;position:absolute;right:10px;top:10px}.no-servers{color:#666;color:var(--text-secondary,#666);padding:40px;text-align:center}.clear-filters-btn{background:#2196f3;background:var(--accent-color,#2196f3);border:none;border-radius:8px;color:#fff;cursor:pointer;margin-top:15px;padding:10px 20px;transition:all .3s ease}.clear-filters-btn:hover{background:#1976d2;transform:translateY(-1px)}@media (max-width:768px){.server-list{padding:20px}.server-list-header{align-items:stretch;flex-direction:column}.control-row{flex-wrap:wrap;justify-content:center}.filter-select,.purpose-select,.sort-select{flex:1 1;min-width:100px}.server-header{gap:10px}.server-header,.server-title{align-items:flex-start;flex-direction:column}.server-title{gap:8px}.server-details{align-items:flex-start;flex-direction:column}.optimal-connect-btn{padding:12px 16px}}@media (max-width:480px){.server-stats{flex-direction:column;gap:10px}.stat-item{text-align:center}.control-row{flex-direction:column}.filter-select,.purpose-select,.sort-select{min-width:auto}}.status-indicator{border-radius:10px;gap:15px;justify-content:center;margin:20px 0;padding:20px;transition:all .3s ease}.status-indicator.connected{background:linear-gradient(135deg,#e8f5e8,#c8e6c9);border:2px solid #4caf50}.status-indicator.disconnected{background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #f44336}.status-dot{height:20px;width:20px}.status-indicator.connected .status-dot{background:#4caf50;box-shadow:0 0 10px #4caf5080}.status-indicator.disconnected .status-dot{background:#f44336;box-shadow:0 0 10px #f4433680}.status-info{text-align:center}.status-text{font-size:18px;font-weight:700;margin-bottom:5px}.status-indicator.connected .status-text{color:#2e7d32}.status-indicator.disconnected .status-text{color:#c62828}.connection-time{color:#555;font-family:monospace;font-size:14px}.login-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--bg-primary,#667eea) 0,var(--bg-secondary,#764ba2) 100%);display:flex;justify-content:center;min-height:100vh;padding:20px;transition:all .3s ease}.login-container.dark-mode{background:linear-gradient(135deg,#1a1a2e,#16213e)}.login-form{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;background:var(--bg-card,#fffffff2);border:1px solid #fff3;border:1px solid var(--border-color,#fff3);border-radius:20px;box-shadow:0 20px 40px #0000004d;box-shadow:var(--shadow,0 20px 40px #0000004d);max-width:400px;padding:40px;text-align:center;width:100%}.login-header h1{color:#333;color:var(--text-primary,#333);font-size:2rem;margin:0 0 10px}.login-header p{color:#666;color:var(--text-secondary,#666);font-size:1.1rem;margin:0 0 30px}.form-group{text-align:left}.form-group input{border-radius:10px;box-sizing:border-box;font-size:16px;min-height:50px;padding:15px;transition:border-color .3s ease}.form-group input::placeholder{color:#999;color:var(--text-secondary,#999)}.form-group input.error{border-color:#f44336}.error-text{color:#f44336;display:block;font-size:14px;margin-top:5px}.login-btn{background:linear-gradient(45deg,#4caf50,#45a049);background:linear-gradient(45deg,var(--accent-color,#4caf50),#45a049);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;margin-bottom:20px;min-height:50px;padding:15px;transition:all .3s ease;width:100%}.login-btn:hover:not(:disabled){background:linear-gradient(45deg,#45a049,#4caf50);background:linear-gradient(45deg,#45a049,var(--accent-color,#4caf50));box-shadow:0 8px 20px #0000004d;transform:translateY(-2px)}.login-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.demo-section{border-top:1px solid #eee;border-top:1px solid var(--border-color,#eee);margin:20px 0;padding:20px 0}.demo-section p{color:#666;color:var(--text-secondary,#666);font-size:14px;margin:0 0 10px}.demo-btn{background:linear-gradient(45deg,#2196f3,#1976d2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;min-height:40px;padding:10px 20px;transition:all .3s ease}.demo-btn:hover{background:linear-gradient(45deg,#1976d2,#2196f3);transform:translateY(-1px)}.login-footer{border-top:1px solid #eee;border-top:1px solid var(--border-color,#eee);margin-top:20px;padding-top:20px}.login-footer p{align-items:center;color:#666;color:var(--text-secondary,#666);display:flex;font-size:14px;gap:5px;justify-content:center;margin:0}.login-footer a{color:#2196f3;color:var(--accent-color,#2196f3);text-decoration:none}.login-footer a:hover{text-decoration:underline}.signup-link{background:none;border:none;color:#667eea;cursor:pointer;font-size:14px;font-weight:700;padding:0;transition:all .3s ease}.signup-link:hover{color:#764ba2;text-decoration:underline}@media (max-width:768px){.login-container{padding:15px}.login-form{max-width:350px;padding:30px 25px}.login-header h1{font-size:1.8rem}.form-group input,.login-btn{font-size:16px;padding:12px}}@media (max-width:480px){.login-form{margin:10px;padding:25px 20px}.login-header h1{font-size:1.6rem}.form-group input,.login-btn{padding:12px}}.signup-form-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;padding:40px 20px}.signup-form{animation:slideUp .5s cubic-bezier(.4,0,.2,1);background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:600px;padding:40px;width:100%}.signup-header{margin-bottom:30px;text-align:center}.signup-header h2{color:#333;font-size:28px;font-weight:700;margin:0 0 10px}.signup-header p{color:#666;font-size:15px;margin:0}.signup-progress{justify-content:space-between;margin-bottom:40px}.progress-step,.signup-progress{align-items:center;display:flex;position:relative}.progress-step{flex:1 1;flex-direction:column;gap:8px;z-index:2}.step-circle{align-items:center;background:#e0e0e0;border-radius:50%;color:#999;display:flex;font-size:16px;font-weight:700;height:45px;justify-content:center;transition:all .3s ease;width:45px}.progress-step.active .step-circle{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea66;color:#fff;transform:scale(1.1)}.progress-step.completed .step-circle{background:#4caf50;color:#fff}.step-label{font-weight:600}.progress-step.active .step-label{color:#667eea;font-weight:700}.progress-line{background:#e0e0e0;flex:1 1;height:3px;margin:0 10px;position:relative;top:-20px;z-index:1}.signup-step{animation:fadeIn .4s ease;margin-bottom:30px}.form-group input[type=email],.form-group input[type=password],.form-group input[type=text],.form-group select{border:2px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:15px;padding:12px 15px;transition:all .3s ease;width:100%}.form-group input:focus,.form-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group input.error,.form-group select.error{border-color:#f44336}.error-message{color:#f44336;font-size:13px;font-weight:500}.error-message,.field-hint{display:block;margin-top:5px}.field-hint{color:#999;font-size:12px}.password-input-wrapper{position:relative}.password-input-wrapper input{padding-right:45px}.toggle-password{background:none;border:none;cursor:pointer;font-size:20px;opacity:.6;padding:5px;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:opacity .3s ease}.toggle-password:hover{opacity:1}.password-strength{align-items:center;display:flex;gap:10px;margin-top:10px}.strength-bar{background:#e0e0e0;border-radius:3px;flex:1 1;height:6px;overflow:hidden}.strength-fill{border-radius:3px;height:100%;transition:all .3s ease}.strength-label{font-size:12px;font-weight:700;min-width:60px;text-align:right}.password-requirements{grid-gap:8px;background:#f5f5f5;border-radius:8px;display:grid;font-size:13px;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:12px;padding:12px}.password-requirements div{color:#999;transition:color .3s ease}.password-requirements div.req-met{color:#4caf50;font-weight:600}.checkbox-group{margin-bottom:15px}.checkbox-label{align-items:flex-start;color:#666;font-size:14px;font-weight:400;gap:10px}.checkbox-label input[type=checkbox]{flex-shrink:0;height:20px;margin-top:2px;width:20px}.checkbox-label .link{color:#667eea;font-weight:600;text-decoration:none}.checkbox-label .link:hover{text-decoration:underline}.plan-selection{grid-gap:15px;display:grid;gap:15px;margin-bottom:20px}.plan-option{border:3px solid #e0e0e0;border-radius:12px;cursor:pointer;display:flex;gap:15px;padding:20px;position:relative;transition:all .3s ease}.plan-option:hover{border-color:#667eea;box-shadow:0 4px 15px #667eea33;transform:translateY(-2px)}.plan-option.selected{background:linear-gradient(135deg,#667eea0d,#764ba20d);border-color:#667eea;box-shadow:0 4px 20px #667eea4d}.plan-option input[type=radio]{cursor:pointer;flex-shrink:0;height:24px;margin-top:5px;width:24px}.plan-details{flex:1 1}.plan-details h3{color:#333;font-size:20px;margin:0 0 10px}.plan-price{color:#667eea;font-size:28px;font-weight:700;margin-bottom:15px}.plan-price span{color:#999;font-size:16px;font-weight:400}.plan-features{list-style:none;margin:0;padding:0}.plan-features li{color:#666;font-size:14px;padding:6px 0}.plan-badge{background:#4caf50;font-size:11px;padding:5px 15px;right:20px}.plan-badge.best{background:linear-gradient(135deg,#667eea,#764ba2)}.plan-note{color:#999;font-size:13px;margin-top:15px;text-align:center}.verification-step{padding:20px 0;text-align:center}.verification-icon{animation:bounce 1s infinite;font-size:60px;margin-bottom:20px}.verification-step h3{color:#333;font-size:24px;margin:0 0 10px}.verification-step p{color:#666;font-size:15px;margin-bottom:30px}.verification-code-input{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.code-digit{border:2px solid #e0e0e0;border-radius:8px;font-size:24px;font-weight:700;height:60px;text-align:center;transition:all .3s ease;width:50px}.code-digit:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.resend-code-btn{background:none;border:none;color:#667eea;cursor:pointer;font-size:14px;font-weight:600;padding:10px;transition:all .3s ease}.resend-code-btn:hover{text-decoration:underline}.resend-code-btn:disabled{cursor:not-allowed;opacity:.5}.signup-actions{display:flex;gap:15px;margin-bottom:30px}.btn-primary,.btn-secondary{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-size:16px;font-weight:700;letter-spacing:.5px;padding:14px 24px;text-transform:uppercase;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea66;color:#fff}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #667eea80;transform:translateY(-2px)}.btn-primary:disabled{cursor:not-allowed;opacity:.6}.btn-secondary{background:#fff;border:2px solid #667eea;color:#667eea}.btn-secondary:hover:not(:disabled){background:#f5f5f5}.divider{align-items:center;color:#999;display:flex;font-size:13px;font-weight:600;gap:15px;margin:30px 0 20px}.divider:after,.divider:before{background:#e0e0e0;content:"";flex:1 1;height:1px}.social-signup{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-bottom:25px}.social-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:12px;transition:all .3s ease}.social-btn:hover{border-color:#667eea;box-shadow:0 2px 8px #0000001a}.social-icon{font-size:18px;font-weight:700}.social-btn.google .social-icon{color:#4285f4}.social-btn.apple .social-icon{color:#000}.social-btn.microsoft .social-icon{color:#00a4ef}.signup-footer{color:#666;font-size:14px;text-align:center}.link-btn{background:none;border:none;color:#667eea;cursor:pointer;font-weight:700;margin-left:5px;padding:5px;transition:all .3s ease}.link-btn:hover{text-decoration:underline}[data-theme=dark] .signup-form{background:#1a1a2e;color:#e0e0e0}[data-theme=dark] .form-group label,[data-theme=dark] .plan-details h3,[data-theme=dark] .signup-header h2{color:#e0e0e0}[data-theme=dark] .form-group input,[data-theme=dark] .form-group select{background:#16213e;border-color:#333;color:#e0e0e0}[data-theme=dark] .password-requirements{background:#16213e}[data-theme=dark] .plan-option{background:#16213e;border-color:#333}[data-theme=dark] .plan-option.selected{background:linear-gradient(135deg,#667eea1a,#764ba21a)}@media (max-width:768px){.signup-form{padding:30px 25px}.signup-progress{margin-bottom:30px}.step-circle{font-size:14px;height:40px;width:40px}.step-label{font-size:10px}.progress-line{margin:0 5px}.form-row{gap:0}.form-row,.password-requirements,.social-signup{grid-template-columns:1fr}.verification-code-input{gap:8px}.code-digit{font-size:20px;height:55px;width:45px}}@media (max-width:480px){.signup-form-container{padding:20px 10px}.signup-form{padding:25px 20px}.signup-header h2{font-size:24px}.step-circle{font-size:12px;height:35px;width:35px}.step-label{display:none}.code-digit{font-size:18px;height:50px;width:40px}.signup-actions{flex-direction:column-reverse}.btn-primary,.btn-secondary{width:100%}}.splash-screen{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;height:100%;justify-content:center;left:0;opacity:1;overflow:hidden;position:fixed;top:0;transition:opacity .5s ease-out;width:100%;z-index:9999}.splash-screen.dark{background:linear-gradient(135deg,#2c3e50,#34495e)}.splash-screen.fade-out{opacity:0}.splash-content{animation:fadeInUp .8s ease-out;color:#fff;position:relative;text-align:center;z-index:2}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.splash-logo{margin-bottom:60px}.logo-container{flex-direction:column;gap:20px}.logo-container,.logo-icon{align-items:center;display:flex}.logo-icon{height:120px;justify-content:center;margin-bottom:10px;position:relative;width:120px}.shield-icon{animation:pulse 2s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,255,255,.3));font-size:80px;position:relative;z-index:2}.nebula-glow{animation:glow 3s ease-in-out infinite;background:radial-gradient(circle,#fff3 0,#0000 70%);border-radius:50%;height:150px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:150px}@keyframes glow{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)}}.logo-text{text-align:center}.app-name{-webkit-text-fill-color:#0000;animation:shimmer 3s ease-in-out infinite;background:linear-gradient(45deg,#fff,#e3f2fd);background-clip:text;-webkit-background-clip:text;font-size:3rem;letter-spacing:2px;margin:0;text-shadow:0 4px 8px #0000004d}@keyframes shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.app-tagline{color:#ffffffe6;font-size:1.2rem;font-weight:300;letter-spacing:1px;margin:10px 0 0;opacity:.9}.loading-section{margin-bottom:40px;width:300px}.progress-container{margin-bottom:20px;position:relative}.progress-bar{border-radius:10px;box-shadow:inset 0 2px 4px #0003}.progress-fill{animation:progressGlow 2s ease-in-out infinite;background:linear-gradient(90deg,#4fc3f7,#29b6f6,#03a9f4);border-radius:10px;position:relative;transition:width .3s ease-out}@keyframes progressGlow{0%,to{box-shadow:0 0 10px #4fc3f780}50%{box-shadow:0 0 20px #4fc3f7cc}}.progress-text{color:#fffc;font-size:.9rem;position:absolute;right:0;top:-30px}.loading-text{animation:fadeInOut 2s ease-in-out infinite;color:#fffc;font-size:1rem;margin-bottom:15px;min-height:24px}@keyframes fadeInOut{0%,to{opacity:.8}50%{opacity:1}}.loading-dots{display:flex;gap:8px;justify-content:center}.dot{animation:dotBounce 1.4s ease-in-out infinite;background:#fff9;border-radius:50%;height:8px;width:8px}.dot:first-child{animation-delay:-.32s}.dot:nth-child(2){animation-delay:-.16s}.dot:nth-child(3){animation-delay:0s}@keyframes dotBounce{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.company-branding{margin-top:40px;opacity:.7}.company-name{color:#fffc;font-size:.9rem;font-weight:500;margin:0 0 5px}.version{color:#fff9;font-size:.8rem;font-weight:300;margin:0}.background-animation{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.floating-particle{animation:float 6s ease-in-out infinite;background:#ffffff1a;border-radius:50%;opacity:.6;position:absolute}.particle-1{animation-delay:0s;animation-duration:8s;height:20px;left:10%;top:20%;width:20px}.particle-2{animation-delay:2s;animation-duration:6s;height:15px;right:15%;top:60%;width:15px}.particle-3{animation-delay:4s;animation-duration:10s;bottom:30%;height:25px;left:20%;width:25px}.particle-4{animation-delay:1s;animation-duration:7s;height:12px;right:30%;top:40%;width:12px}.particle-5{animation-delay:3s;animation-duration:9s;bottom:20%;height:18px;right:10%;width:18px}@keyframes float{0%,to{opacity:.6;transform:translateY(0) rotate(0deg)}25%{opacity:.8;transform:translateY(-20px) rotate(90deg)}50%{opacity:.4;transform:translateY(-10px) rotate(180deg)}75%{opacity:.7;transform:translateY(-30px) rotate(270deg)}}@media (max-width:768px){.app-name{font-size:2.5rem}.app-tagline{font-size:1rem}.loading-section{width:250px}.logo-icon{height:100px;width:100px}.shield-icon{font-size:60px}}@media (max-width:480px){.app-name{font-size:2rem}.loading-section{width:200px}.logo-icon{height:80px;width:80px}.shield-icon{font-size:50px}}.splash-screen.dark .app-name{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#fff,#b0bec5);background-clip:text;-webkit-background-clip:text}.splash-screen.dark .progress-bar{background:#ffffff1a}.splash-screen.dark .progress-fill{background:linear-gradient(90deg,#42a5f5,#1e88e5,#1565c0)}.splash-screen.dark .floating-particle{background:#ffffff0d}.install-prompt{animation:slideUp .5s ease-out;bottom:20px;left:50%;max-width:600px;position:fixed;transform:translateX(-50%);width:calc(100% - 40px);z-index:10000}.install-prompt-content{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,#667eeafa,#764ba2fa);border:2px solid #fff3;border-radius:16px;box-shadow:0 10px 40px #0000004d;color:#fff;display:flex;gap:15px;padding:20px}.install-prompt-icon{flex-shrink:0}.install-prompt-icon svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.install-prompt-text{flex:1 1;min-width:0}.install-prompt-text h3{color:#fff;font-size:18px;font-weight:700;margin:0 0 5px}.install-prompt-text p{color:#ffffffe6;font-size:14px;line-height:1.4;margin:0}.install-prompt-actions{display:flex;flex-shrink:0;gap:10px}.install-btn-primary{background:#fff;border:none;border-radius:10px;box-shadow:0 4px 12px #0003;color:#667eea;cursor:pointer;font-size:14px;font-weight:600;padding:12px 24px;transition:all .3s ease;white-space:nowrap}.install-btn-primary:hover{background:#f0f0f0;box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.install-btn-primary:active{transform:translateY(0)}.install-btn-secondary{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:16px;height:44px;justify-content:center;padding:12px;transition:all .3s ease;width:44px}.install-btn-secondary:hover{background:#ffffff4d;transform:scale(1.1)}@media (max-width:768px){.install-prompt{bottom:15px;width:calc(100% - 30px)}.install-prompt-content{flex-wrap:wrap;gap:12px;padding:15px}.install-prompt-text h3{font-size:16px}.install-prompt-text p{font-size:13px}.install-prompt-actions{justify-content:space-between;width:100%}.install-btn-primary{flex:1 1;font-size:13px;padding:10px 16px}}@media (max-width:480px){.install-prompt{bottom:10px;width:calc(100% - 20px)}.install-prompt-content{gap:10px;padding:12px}.install-prompt-icon svg{height:35px;width:35px}.install-prompt-text h3{font-size:15px}.install-prompt-text p{font-size:12px}.install-btn-primary{font-size:12px;padding:8px 12px}.install-btn-secondary{font-size:14px;height:40px;width:40px}}[data-theme=dark] .install-prompt-content{background:linear-gradient(135deg,#1a2838fa,#243447fa);border-color:#ffffff1a}@media (display-mode:standalone){.install-prompt{display:none}}.subscription-modal-overlay{align-items:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10001}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.subscription-modal{animation:slideUp .4s cubic-bezier(.4,0,.2,1);background:#fff;background:var(--bg-card,#fff);border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:1200px;overflow-y:auto;position:relative;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.modal-close{background:#0000001a;border:none;border-radius:50%;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:24px;height:40px;position:absolute;right:20px;top:20px;transition:all .3s ease;width:40px;z-index:10}.modal-close:hover{background:#0003;transform:rotate(90deg)}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px 20px 0 0;color:#fff;padding:40px 40px 30px;text-align:center}.modal-header h2{font-size:2.5rem;font-weight:700;margin:0 0 10px}.modal-header p{font-size:1.1rem;margin:0 0 30px;opacity:.95}.billing-toggle{background:#fff3;border-radius:12px;display:inline-flex;gap:4px;padding:4px}.billing-toggle button{background:#0000;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;position:relative;transition:all .3s ease}.billing-toggle button.active{background:#fff;box-shadow:0 2px 8px #00000026;color:#667eea}.save-badge{background:#4caf50;border-radius:8px;color:#fff;display:inline-block;font-size:11px;font-weight:700;margin-left:6px;padding:2px 8px}.plans-container{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 auto;max-width:1400px;padding:40px}.plan-card{background:#fff;background:var(--bg-card,#fff);border:3px solid #0000;border-radius:16px;box-shadow:0 4px 12px #00000014;cursor:pointer;padding:30px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.plan-card:hover{box-shadow:0 12px 30px #00000026;transform:translateY(-5px)}.plan-card.selected{box-shadow:0 12px 40px #667eea4d;transform:translateY(-8px) scale(1.02)}.plan-badge{box-shadow:0 4px 12px #0003;letter-spacing:.5px;right:30px}.current-plan-badge,.plan-badge{border-radius:20px;color:#fff;font-size:12px;font-weight:700;padding:6px 16px;position:absolute;top:-12px}.current-plan-badge{background:#ff9800;left:30px}.plan-header{border-bottom:2px solid #eee;border-bottom:2px solid var(--border-color,#eee);margin-bottom:30px;padding-bottom:25px;text-align:center}.plan-header h3{font-size:1.8rem;font-weight:700;margin:0 0 15px}.plan-header h3,.plan-price{color:#333;color:var(--text-primary,#333)}.plan-price{align-items:baseline;display:flex;gap:5px;justify-content:center}.plan-price .currency{font-size:1.5rem;font-weight:600}.plan-price .amount{font-size:3rem;font-weight:700;line-height:1}.plan-price .period{color:#666;color:var(--text-secondary,#666);font-size:1rem}.annual-price{color:#4caf50;font-size:13px;font-weight:600;margin-top:8px}.plan-features{margin-bottom:25px}.feature{font-size:14px;gap:12px;padding:10px 0}.feature,.feature-icon{align-items:center;display:flex}.feature-icon{border-radius:50%;flex-shrink:0;font-weight:700;height:24px;justify-content:center;width:24px}.feature.included .feature-icon{background:#4caf5026;color:#4caf50}.feature.excluded .feature-icon{background:#9e9e9e26;color:#9e9e9e}.feature.excluded .feature-text{color:#999;color:var(--text-secondary,#999);text-decoration:line-through}.subscribe-btn{border:none;border-radius:12px;box-shadow:0 4px 12px #00000026;color:#fff;cursor:pointer;font-size:16px;font-weight:700;letter-spacing:.5px;padding:16px;text-transform:uppercase;transition:all .3s ease;width:100%}.subscribe-btn:hover:not(:disabled){box-shadow:0 8px 20px #00000040;transform:translateY(-2px)}.subscribe-btn:active:not(:disabled){transform:translateY(0)}.subscribe-btn:disabled{cursor:not-allowed;opacity:.6}.subscribe-btn.free-plan{background:#e0e0e0;color:#666}.modal-footer{background:#fafafa;background:var(--bg-card,#fafafa);border-radius:0 0 20px 20px;padding:30px 40px 40px;text-align:center}.trust-badges{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-bottom:20px}.trust-item{font-size:14px;font-weight:500;gap:8px}.payment-methods,.trust-item{align-items:center;color:#666;color:var(--text-secondary,#666);display:flex}.payment-methods{flex-wrap:wrap;font-size:13px;gap:15px;justify-content:center}.payment-icons{font-size:14px;font-weight:600}.success-animation{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:80px 40px;text-align:center}.success-checkmark{animation:scaleIn .5s ease-out;margin-bottom:30px}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.check-icon{align-items:center;animation:pulse 1.5s ease-in-out infinite;background:linear-gradient(135deg,#4caf50,#66bb6a);border-radius:50%;box-shadow:0 10px 30px #4caf5066;color:#fff;display:flex;font-size:60px;height:100px;justify-content:center;width:100px}.success-animation h2{color:#333;color:var(--text-primary,#333);font-size:2rem;margin:0 0 10px}.success-animation p{color:#666;color:var(--text-secondary,#666);font-size:1.1rem;margin:0}@media (max-width:1024px){.plans-container{gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:30px 20px}}@media (max-width:768px){.subscription-modal{border-radius:15px;max-height:95vh}.modal-header{padding:30px 20px 25px}.modal-header h2{font-size:1.8rem}.modal-header p{font-size:1rem}.plans-container{grid-template-columns:1fr;padding:25px 15px}.plan-card{padding:25px 20px}.billing-toggle button{font-size:13px;padding:8px 16px}.trust-badges{gap:15px}.trust-item{font-size:12px}.modal-footer{padding:25px 20px 30px}}@media (max-width:480px){.modal-header h2{font-size:1.5rem}.plan-price .amount{font-size:2.5rem}.modal-close{font-size:20px;height:36px;width:36px}.payment-methods,.trust-badges{flex-direction:column;gap:10px}}[data-theme=dark] .plan-card{box-shadow:0 4px 12px #0000004d}[data-theme=dark] .plan-card:hover{box-shadow:0 12px 30px #0006}[data-theme=dark] .modal-close{background:#ffffff1a;color:#fff}[data-theme=dark] .modal-close:hover{background:#fff3}.promo-banner-container{animation:slideInRight .6s cubic-bezier(.4,0,.2,1);bottom:20px;position:fixed;right:20px;z-index:9999}@keyframes slideInRight{0%{opacity:0;transform:translateX(500px)}to{opacity:1;transform:translateX(0)}}.promo-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #fff3;border-radius:20px;box-shadow:0 20px 60px #667eea80;color:#fff;max-width:calc(100vw - 40px);padding:30px;position:relative;width:420px}.promo-close{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;position:absolute;right:15px;top:15px;transition:all .3s ease;width:32px;z-index:10}.promo-close:hover{background:#ffffff4d;transform:rotate(90deg)}.promo-content{display:flex;flex-direction:column;gap:20px}.promo-header{text-align:center}.promo-badge{animation:pulse 2s infinite;background:#ffd700e6;border-radius:20px;color:#333;display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:15px;padding:6px 16px}.promo-header h2{font-size:24px;font-weight:700;margin:0 0 10px;text-shadow:0 2px 4px #0003}.promo-header p{font-size:14px;line-height:1.5;margin:0;opacity:.95}.promo-countdown{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:12px;padding:15px}.countdown-label{font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:10px;opacity:.9;text-align:center;text-transform:uppercase}.countdown-timer{align-items:center;display:flex;gap:8px;justify-content:center}.countdown-item{align-items:center;display:flex;flex-direction:column;gap:4px}.countdown-value{font-size:28px;font-weight:700;line-height:1;text-shadow:0 2px 4px #0003}.countdown-unit{font-size:10px;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.countdown-separator{font-size:24px;font-weight:700;margin:0 4px;opacity:.6}.promo-features{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.promo-feature{align-items:center;background:#ffffff1a;border-radius:8px;display:flex;font-size:13px;font-weight:600;gap:8px;padding:10px 12px;transition:all .3s ease}.promo-feature:hover{background:#fff3;transform:translateY(-2px)}.feature-icon{font-size:18px}.promo-pricing{background:#ffffff26;border-radius:12px;padding:15px;text-align:center}.price-comparison{align-items:center;display:flex;gap:15px;justify-content:center;margin-bottom:8px}.old-price{font-size:16px;opacity:.7;text-decoration:line-through}.new-price{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.discount-badge{background:#4caf50;border-radius:12px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px}.price{font-size:28px;font-weight:700;line-height:1}.price-per-month{font-size:13px;font-weight:600;opacity:.9}.promo-upgrade-btn{align-items:center;background:linear-gradient(135deg,gold,orange);border:none;border-radius:12px;box-shadow:0 8px 20px #ffd70066;color:#333;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:10px;justify-content:center;letter-spacing:.5px;padding:16px;text-transform:uppercase;transition:all .3s ease;width:100%}.promo-upgrade-btn:hover{box-shadow:0 12px 30px #ffd70099;transform:translateY(-2px)}.promo-upgrade-btn:active{transform:translateY(0)}.btn-icon{font-size:20px}.promo-guarantee{display:flex;flex-wrap:wrap;font-size:11px;gap:15px;justify-content:space-around;opacity:.9}.promo-guarantee span{align-items:center;display:flex;gap:4px;white-space:nowrap}@media (max-width:768px){.promo-banner-container{bottom:10px;left:10px;right:10px}.promo-banner{padding:25px 20px;width:100%}.promo-header h2{font-size:20px}.countdown-value{font-size:24px}.promo-features{grid-template-columns:1fr}.price{font-size:24px}}@media (max-width:480px){.promo-banner{padding:20px 15px}.promo-header h2{font-size:18px}.countdown-timer{gap:4px}.countdown-value{font-size:20px}.countdown-separator{font-size:20px;margin:0 2px}.promo-upgrade-btn{font-size:14px;padding:14px}.promo-guarantee{align-items:center;flex-direction:column;gap:8px}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.promo-banner-container:hover .promo-banner{animation:bounce .8s}.traffic-monitor{background:#fff;border-radius:15px;box-shadow:0 8px 25px #00000026;margin:0 auto;max-width:600px;padding:25px}.traffic-monitor h3{color:#333;font-size:1.4rem;margin:0 0 25px;text-align:center}.no-connection p{font-size:16px;margin-top:15px}.traffic-stats{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:30px}.traffic-card{align-items:center;background:#f8f9fa;border-left:4px solid #ddd;border-radius:12px;display:flex;gap:15px;padding:20px;transition:transform .3s ease}.traffic-card:hover{transform:translateY(-2px)}.traffic-card.download{border-left-color:#4caf50}.traffic-card.upload{border-left-color:#2196f3}.traffic-icon{font-size:24px}.traffic-info{flex:1 1}.traffic-label{color:#666;font-size:14px;margin-bottom:5px}.traffic-speed{color:#333;font-size:20px;font-weight:700;margin-bottom:3px}.traffic-total{color:#888;font-size:12px}.traffic-graph{background:#f8f9fa;border-radius:12px;margin-bottom:20px;padding:20px}.graph-header h4{color:#333;margin:0 0 20px;text-align:center}.speed-bars{display:flex;flex-direction:column;gap:15px}.speed-bar{align-items:center;display:flex;gap:15px}.bar-label{font-size:14px;font-weight:500;min-width:80px}.bar-container{background:#e0e0e0;border-radius:6px;height:12px;overflow:hidden}.bar-fill{border-radius:6px;height:100%;transition:width .5s ease}.download-bar{background:linear-gradient(90deg,#4caf50,#45a049)}.upload-bar{background:linear-gradient(90deg,#2196f3,#1976d2)}.bar-value{color:#333;font-size:12px;font-weight:700;min-width:80px;text-align:right}.traffic-summary{background:#f0f8ff;border:1px solid #e3f2fd;border-radius:10px;display:flex;justify-content:space-between;padding:15px}.summary-item{display:flex;flex-direction:column;text-align:center}.summary-label{color:#666;font-size:12px;margin-bottom:5px}.summary-value{color:#333;font-size:16px;font-weight:700}@media (max-width:600px){.traffic-stats{grid-template-columns:1fr}.speed-bar{align-items:stretch;flex-direction:column;gap:8px}.bar-label,.bar-value{min-width:auto;text-align:center}.traffic-summary{flex-direction:column;gap:15px}}.settings-panel{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:600px;padding:25px}.settings-panel h3{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0 0 25px;text-align:center}.settings-section{border-bottom:1px solid #eee;border-bottom:1px solid var(--border-color,#eee);padding-bottom:20px}.settings-section:last-of-type{border-bottom:none}.settings-section h4{color:#555;color:var(--text-primary,#555);font-size:1.1rem}.setting-item{border-bottom:1px solid #f5f5f580;border-bottom:1px solid rgba(var(--border-color,245,245,245),.5);gap:20px;padding:15px 0}.setting-item:last-child{border-bottom:none}.setting-info label{color:#333;color:var(--text-primary,#333);display:block;font-weight:500;margin-bottom:5px}.setting-description{font-size:14px}.toggle-switch{display:inline-block;height:24px}.slider{background-color:#ccc;background-color:var(--border-color,#ccc);border-radius:24px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;width:18px}input:checked+.slider{background-color:#4caf50;background-color:var(--accent-color,#4caf50)}input:checked+.slider:before{transform:translateX(26px)}.setting-select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;min-width:120px;padding:8px 12px;transition:border-color .3s ease}.setting-select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.action-btn{margin:0 5px}.action-btn.secondary{background:var(--bg-card,#f5f5f5);border:1px solid var(--border-color,#ddd);color:var(--text-primary,#333)}.action-btn.secondary:hover{background:var(--border-color,#e0e0e0)}.settings-footer{border-top:1px solid #eee;border-top:1px solid var(--border-color,#eee);color:#666;color:var(--text-secondary,#666);margin-top:30px;padding-top:20px;text-align:center}.settings-footer p{font-size:14px;margin:5px 0}@media (max-width:600px){.setting-item{align-items:stretch;flex-direction:column;gap:15px}.setting-select,.toggle-switch{align-self:center}.action-btn{margin:5px 0;width:100%}}.connection-log{background:#fff;border-radius:15px;box-shadow:0 8px 25px #00000026;margin:0 auto;max-width:800px;padding:25px}.log-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.log-header h3{color:#333;font-size:1.4rem;margin:0}.log-controls{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.search-input{border:2px solid #ddd;border-radius:8px;font-size:14px;min-width:200px;padding:8px 12px;transition:border-color .3s ease}.search-input:focus{border-color:#2196f3;outline:none}.filter-select{background:#fff;border:2px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.filter-select:focus{border-color:#2196f3;outline:none}.action-btn{border-radius:6px;font-size:14px;padding:8px 16px}.action-btn.secondary{background:#f5f5f5;border:1px solid #ddd;color:#333}.action-btn.secondary:hover{background:#e0e0e0;transform:translateY(-1px)}.action-btn.danger{background:#f44336;color:#fff}.action-btn.danger:hover{background:#d32f2f;transform:translateY(-1px)}.log-container{background:#f8f9fa;border-radius:10px;margin-bottom:15px;max-height:500px;overflow-y:auto;padding:15px}.no-logs{color:#666;padding:40px;text-align:center}.no-logs p{font-size:16px;font-weight:500;margin:0 0 10px}.no-logs span{font-size:14px}.log-entry{border-left:4px solid #ddd;padding:15px;transition:transform .2s ease}.log-entry:hover{transform:translateX(5px)}.log-entry.success{border-left-color:#4caf50}.log-entry.error{border-left-color:#f44336}.log-entry.warning{border-left-color:#ff9800}.log-entry.info{border-left-color:#2196f3}.log-timestamp{color:#888;font-family:monospace;font-size:12px;margin-bottom:8px}.log-content{align-items:center;display:flex;gap:10px}.log-icon{font-size:16px}.log-message{color:#333;flex:1 1;font-size:14px;line-height:1.4}.log-footer{align-items:center;border-top:1px solid #eee;display:flex;justify-content:space-between;padding-top:15px}.log-count{color:#666;font-size:14px}@media (max-width:768px){.log-header{align-items:stretch;flex-direction:column}.log-controls{flex-wrap:wrap;justify-content:center}.search-input{flex:1 1;min-width:150px}.action-btn{flex:1 1;min-width:80px}}.speed-test{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:600px;padding:25px}.speed-test-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.speed-test h3{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0}.server-info{background:#4caf501a;border-radius:8px;font-size:14px;padding:8px 12px}.no-connection,.server-info{color:#666;color:var(--text-secondary,#666)}.no-connection{padding:40px;text-align:center}.speed-gauge-container{align-items:center;display:flex;flex-direction:column;gap:30px;margin-bottom:30px}.speed-gauge{height:250px;position:relative;width:250px}.gauge-circle{background:#f0f0f0;overflow:hidden;position:relative}.gauge-circle,.gauge-progress{border-radius:50%;height:100%;width:100%}.gauge-progress{transition:background .3s ease}.gauge-inner{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:50%;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;height:180px;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:180px}.gauge-value{color:#333;color:var(--text-primary,#333);font-size:2.5rem;margin-bottom:5px}.gauge-unit{color:#666;color:var(--text-secondary,#666);font-size:1rem;margin-bottom:10px}.gauge-phase{color:#4caf50;font-size:.9rem;font-weight:500}.speed-test-btn{background:linear-gradient(45deg,#4caf50,#45a049);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;min-height:50px;min-width:200px;padding:15px 40px;transition:all .3s ease}.speed-test-btn:hover:not(:disabled){background:linear-gradient(45deg,#45a049,#4caf50);box-shadow:0 8px 20px #0000004d;transform:translateY(-2px)}.speed-test-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.speed-test-btn.running{animation:pulse 2s infinite;background:linear-gradient(45deg,#ff9800,#f57c00)}.speed-results{margin-top:30px}.result-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:30px}.result-item{align-items:center;background:#4caf500d;border:1px solid #4caf5033;border-radius:12px;display:flex;flex-direction:column;gap:10px;padding:20px;transition:transform .3s ease}.result-item:hover{transform:translateY(-3px)}.result-info{text-align:center}.result-label{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500;margin-bottom:5px;text-transform:uppercase}.result-value{color:#333;color:var(--text-primary,#333);font-size:18px;font-weight:700;margin-bottom:3px}.result-rating{font-size:11px;font-weight:500;text-transform:uppercase}.speed-history{border-top:1px solid #eee;border-top:1px solid var(--border-color,#eee);margin-top:30px;padding-top:20px}.speed-history h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px;text-align:left}.history-list{display:flex;flex-direction:column;gap:10px;max-height:200px;overflow-y:auto}.history-item{align-items:center;background:#4caf5008;border:1px solid #4caf501a;border-radius:8px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:12px}.history-time{color:#666;color:var(--text-secondary,#666);font-family:monospace;font-size:12px}.history-server{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:500}.history-speeds{color:#666;color:var(--text-secondary,#666);display:flex;font-size:12px;gap:15px}@media (max-width:768px){.speed-test{padding:20px}.speed-gauge{height:200px;width:200px}.gauge-inner{height:140px;width:140px}.result-grid{grid-template-columns:repeat(2,1fr)}}.split-tunneling{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:900px;padding:25px}.split-tunnel-intro{padding:40px 20px;text-align:center}.split-tunnel-intro h3{color:#333;color:var(--text-primary,#333);font-size:1.8rem;margin:0 0 20px}.benefits{margin-bottom:30px}.benefits h4{color:#333;color:var(--text-primary,#333);margin-bottom:15px}.benefits ul{color:#666;color:var(--text-secondary,#666);line-height:1.6;padding-left:20px}.benefits li{margin-bottom:8px}.split-tunnel-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.split-tunnel-header h3{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0}.tunnel-stats{display:flex;flex-wrap:wrap;gap:20px}.tunnel-mode-selector{margin-bottom:30px}.tunnel-mode-selector h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.mode-options{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr;margin-bottom:15px}.mode-option{align-items:center;background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:12px;cursor:pointer;display:flex;gap:15px;padding:20px;transition:all .3s ease}.mode-option:hover{background:#2196f30d;background:rgba(var(--accent-color,33,150,243),.05);border-color:#2196f3;border-color:var(--accent-color,#2196f3)}.mode-option.active{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.mode-option input{margin:0}.mode-info{flex:1 1}.mode-title{color:#333;color:var(--text-primary,#333);font-weight:700;margin-bottom:5px}.mode-description{color:#666;color:var(--text-secondary,#666);font-size:14px}.mode-explanation{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2);border-radius:8px;padding:15px}.mode-explanation p{color:#666;color:var(--text-secondary,#666);font-size:14px;margin:0}.configured-apps{margin-bottom:30px}.configured-apps h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.app-list{display:flex;flex-direction:column;gap:10px}.configured-app{align-items:center;background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2);border-radius:10px;display:flex;justify-content:space-between;padding:15px}.configured-app .app-info{align-items:center;display:flex;flex:1 1;gap:12px}.configured-app .app-icon{font-size:20px}.configured-app .app-details{align-items:flex-start;display:flex;flex-direction:column}.configured-app .app-name{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700}.configured-app .app-category{color:#666;color:var(--text-secondary,#666);font-size:12px}.app-status{align-items:center;display:flex;gap:10px}.status-badge.exclude{background:#ff98001a;border:1px solid #ff98004d;color:#f57c00}.status-badge.include{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border:1px solid #4caf504d;border:1px solid rgba(var(--accent-color,76,175,80),.3);color:#4caf50;color:var(--accent-color,#4caf50)}.remove-app{align-items:center;background:#f44336;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:12px;height:24px;justify-content:center;transition:all .3s ease;width:24px}.remove-app:hover{background:#d32f2f;transform:scale(1.1)}.security-warning{align-items:center;background:#f443360d;border:1px solid #f443364d;border-radius:10px;display:flex;gap:12px;margin-bottom:20px;padding:15px}.warning-icon{color:#f44336;font-size:20px}.warning-text{color:#d32f2f;font-size:14px;font-weight:500}.app-selector{margin-bottom:30px}.selector-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:20px}.selector-header h4{margin:0}.category-filter,.selector-header h4{color:#333;color:var(--text-primary,#333)}.category-filter{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.category-filter:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.app-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.app-card{background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:10px;cursor:pointer;padding:15px;transition:all .3s ease}.app-card:hover{background:#2196f30d;background:rgba(var(--accent-color,33,150,243),.05);border-color:#2196f3;border-color:var(--accent-color,#2196f3);transform:translateY(-2px)}.app-card.selected{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.app-card .app-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.app-card .app-icon{font-size:20px}.app-card .app-name{color:#333;color:var(--text-primary,#333);flex:1 1;font-size:14px;font-weight:700;margin-left:8px}.app-card .selected-indicator{color:#4caf50;color:var(--accent-color,#4caf50);font-weight:700}.app-meta{text-align:left}.app-card .app-category{color:#4caf50;color:var(--accent-color,#4caf50);font-size:11px;font-weight:500;margin-bottom:5px;text-transform:uppercase}.app-card .app-description{color:#666;color:var(--text-secondary,#666);font-size:12px}.custom-app-section{margin-bottom:30px}.custom-app-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.custom-app-input{display:flex;gap:10px}.custom-app-input input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);flex:1 1;font-size:14px;padding:12px;transition:border-color .3s ease}.custom-app-input input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.add-custom-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .3s ease}.add-custom-btn:hover:not(:disabled){background:#45a049;transform:translateY(-1px)}.add-custom-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.split-tunnel-info{margin-top:20px}.info-card{background:#2196f30d;border:1px solid #2196f34d}.info-card h5{color:#1976d2}@media (max-width:768px){.split-tunneling{padding:20px}.split-tunnel-header{align-items:stretch;flex-direction:column;text-align:center}.tunnel-stats{justify-content:center}.app-grid,.mode-options{grid-template-columns:1fr}.custom-app-input,.selector-header{flex-direction:column}.selector-header{align-items:stretch}}@media (max-width:480px){.configured-app{align-items:stretch;flex-direction:column;gap:15px}.app-status{justify-content:space-between}}.multi-hop{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:900px;padding:25px}.multi-hop-intro{padding:40px 20px;text-align:center}.multi-hop-intro h3{color:#333;color:var(--text-primary,#333);font-size:1.8rem;margin:0 0 20px}.benefits,.getting-started{margin-bottom:30px}.benefits h4,.getting-started h4{align-items:center;color:#333;color:var(--text-primary,#333);display:flex;gap:8px;margin-bottom:15px}.benefits ul,.getting-started ol{color:#666;color:var(--text-secondary,#666);line-height:1.6;padding-left:20px}.benefits li,.getting-started li{margin-bottom:8px}.multi-hop-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.multi-hop-header h3{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0}.security-indicator{align-items:center;background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2);border-radius:8px;display:flex;gap:8px;padding:8px 12px}.security-label{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500;text-transform:uppercase}.security-level{font-size:14px;font-weight:700}.multi-hop-stats{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:30px}.stat-card{border:1px solid #4caf501a;border:1px solid rgba(var(--accent-color,76,175,80),.1);flex-direction:column;gap:10px}.stat-info{text-align:center}.stat-label{margin-bottom:5px}.hop-chain-container{margin-bottom:30px}.hop-chain-container h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px;text-align:left}.empty-chain{background:#eeeeee4d;background:rgba(var(--border-color,238,238,238),.3);border:2px dashed #eee;border:2px dashed var(--border-color,#eee);border-radius:10px;color:#666;color:var(--text-secondary,#666);padding:40px;text-align:center}.hop-chain{align-items:center;background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2);border-radius:12px;display:flex;flex-wrap:nowrap;gap:15px;overflow-x:auto;padding:20px}.destination,.your-device{align-items:center;display:flex;flex-direction:column;gap:8px;min-width:80px;text-align:center}.destination-icon,.device-icon{font-size:24px}.destination span,.your-device span{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500}.hop-arrow{color:#4caf50;color:var(--accent-color,#4caf50);font-size:18px;font-weight:700}.hop-server{align-items:center;background:#fff;background:var(--bg-card,#fff);border:2px solid #4caf504d;border:2px solid rgba(var(--accent-color,76,175,80),.3);border-radius:10px;display:flex;flex-direction:column;gap:8px;min-width:120px;padding:15px;position:relative;transition:transform .3s ease}.hop-server:hover{transform:translateY(-2px)}.hop-info{align-items:center;display:flex;flex-direction:column;gap:5px}.hop-flag{font-size:20px}.hop-details{text-align:center}.hop-name{color:#333;color:var(--text-primary,#333);font-weight:700}.hop-location,.hop-ping{color:#666;color:var(--text-secondary,#666);font-size:11px}.remove-hop{align-items:center;background:#f44336;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:10px;height:20px;justify-content:center;position:absolute;right:-8px;top:-8px;transition:all .3s ease;width:20px}.remove-hop:hover{background:#d32f2f;transform:scale(1.1)}.available-servers{margin-bottom:30px}.available-servers h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px;text-align:left}.server-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.server-card{background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:10px;cursor:pointer;padding:15px;transition:all .3s ease}.server-card:hover:not(.disabled){background:#2196f30d;background:rgba(var(--accent-color,33,150,243),.05);border-color:#2196f3;border-color:var(--accent-color,#2196f3);transform:translateY(-2px)}.server-card.selected{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.server-card.disabled{cursor:not-allowed;opacity:.5}.server-header{justify-content:space-between}.server-card .server-flag{font-size:20px}.server-card .server-name{color:#333;color:var(--text-primary,#333);flex:1 1;font-size:14px;font-weight:700;margin-left:8px}.selected-indicator{color:#4caf50;color:var(--accent-color,#4caf50);font-weight:700}.server-details{text-align:left}.server-card .server-location{color:#666;color:var(--text-secondary,#666);font-size:12px;margin-bottom:5px}.server-metrics{display:flex;gap:10px}.server-card .server-load,.server-card .server-ping{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);font-size:11px;font-weight:500;padding:2px 6px}.multi-hop-info{margin-top:20px}.info-card{background:#ff98000d;border:1px solid #ff98004d;padding:20px}.info-card.warning{background:#ff98000d;border-color:#ff98004d}.info-card h5{color:#f57c00;margin:0 0 15px}.info-card ul{color:#666;color:var(--text-secondary,#666);line-height:1.5;margin:0;padding-left:20px}.info-card li{font-size:14px;margin-bottom:8px}@media (max-width:768px){.multi-hop{padding:20px}.multi-hop-header{align-items:stretch;flex-direction:column;text-align:center}.hop-chain{flex-direction:column;gap:10px}.hop-arrow{transform:rotate(90deg)}.server-grid{grid-template-columns:1fr}.multi-hop-stats{grid-template-columns:repeat(3,1fr)}}@media (max-width:480px){.multi-hop-stats{grid-template-columns:1fr}.hop-server{min-width:100px}}.kill-switch{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:900px;padding:25px}.kill-switch-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.kill-switch-header h3{align-items:center;color:#333;color:var(--text-primary,#333);display:flex;font-size:1.4rem;gap:10px;margin:0}.shield-icon{color:#4caf50;color:var(--accent-color,#4caf50);font-size:1.6rem}.status-overview{align-items:center;display:flex;flex-wrap:wrap;gap:15px}.status-indicator{gap:8px}.status-dot{animation:pulse 2s infinite}.status-dot.active{background:#4caf50;background:var(--accent-color,#4caf50);box-shadow:0 0 10px #4caf5080;box-shadow:0 0 10px rgba(var(--accent-color,76,175,80),.5)}.status-dot.inactive{animation:none;background:#f44336}.status-dot.warning{background:#ff9800}.status-text{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:500}.protection-level{border-radius:20px;font-size:12px;font-weight:700;padding:8px 12px;text-transform:uppercase}.protection-level.maximum{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border:1px solid #4caf504d;border:1px solid rgba(var(--accent-color,76,175,80),.3);color:#4caf50;color:var(--accent-color,#4caf50)}.protection-level.standard{background:#ff98001a;border:1px solid #ff98004d;color:#f57c00}.protection-level.disabled{background:#f443361a;border:1px solid #f443364d;color:#f44336}.kill-switch-intro{padding:40px 20px;text-align:center}.kill-switch-intro h3{color:#333;color:var(--text-primary,#333);font-size:1.8rem;margin:0 0 20px}.intro-content{margin:0 auto;max-width:600px;text-align:left}.intro-content>p{color:#666;color:var(--text-secondary,#666);font-size:16px;text-align:center}.intro-content>p,.security-features{margin-bottom:30px}.security-features h4{color:#333;color:var(--text-primary,#333);margin-bottom:15px}.security-features ul{color:#666;color:var(--text-secondary,#666);line-height:1.6;padding-left:20px}.security-features li{margin-bottom:8px}.enable-section{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2);border-radius:10px;padding:20px;text-align:center}.protection-stats{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.stat-card{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05);border:1px solid #4caf5033;border:1px solid rgba(var(--accent-color,76,175,80),.2)}.stat-icon{color:#4caf50;color:var(--accent-color,#4caf50);margin-bottom:10px}.settings-section{margin-bottom:30px}.settings-section h4{align-items:center;color:#333;color:var(--text-primary,#333);display:flex;gap:10px;margin:0 0 20px}.setting-group{margin-bottom:25px}.setting-item{background:#fafafa;background:var(--bg-card,#fafafa);border-radius:12px;margin-bottom:15px;padding:20px}.setting-info{margin-right:20px}.setting-title{margin-bottom:5px}.setting-description{line-height:1.4}.setting-control{align-items:center;display:flex;gap:10px}.toggle-switch{background:#ccc;border-radius:13px;transition:background .3s ease}.toggle-switch.active{background:#4caf50;background:var(--accent-color,#4caf50)}.toggle-switch:before{background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;content:"";height:22px;left:2px;position:absolute;top:2px;transition:transform .3s ease;width:22px}.toggle-switch.active:before{transform:translateX(24px)}.timeout-input{background:#fff;background:var(--bg-card,#fff);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:6px;color:#333;color:var(--text-primary,#333);font-size:12px;padding:6px 8px;text-align:center;width:80px}.timeout-input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.protocol-dropdown{background:#fff;background:var(--bg-card,#fff);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:6px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:12px;padding:6px 8px}.protocol-dropdown:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.leak-protection{margin-bottom:30px}.leak-tests{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.leak-test{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;padding:15px}.test-header{align-items:center;justify-content:space-between;margin-bottom:10px}.test-name{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:700}.test-status{border-radius:12px;font-size:10px;font-weight:700;padding:3px 8px;text-transform:uppercase}.test-status.secure{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);color:#4caf50;color:var(--accent-color,#4caf50)}.test-status.vulnerable{background:#f443361a;color:#f44336}.test-status.testing{background:#ff98001a;color:#f57c00}.test-description{color:#666;color:var(--text-secondary,#666);font-size:11px}.threat-monitor{margin-bottom:30px}.threat-log{border-radius:10px;max-height:200px;overflow-y:auto}.threat-item{border-bottom:1px solid #eee;border-bottom:1px solid var(--border-color,#eee);padding:12px 15px}.threat-item:last-child{border-bottom:none}.threat-info{align-items:center;display:flex;flex:1 1;gap:10px}.threat-type{border-radius:8px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.threat-type.blocked{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);color:#4caf50;color:var(--accent-color,#4caf50)}.threat-type.warning{background:#ff98001a;color:#f57c00}.threat-message{color:#333;color:var(--text-primary,#333);font-size:12px}.threat-time{color:#666;color:var(--text-secondary,#666);font-size:11px}.advanced-controls{margin-top:20px}.control-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.control-button{background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:10px;cursor:pointer;padding:15px;text-align:center;transition:all .3s ease}.control-button:hover{background:#2196f30d;background:rgba(var(--accent-color,33,150,243),.05);border-color:#2196f3;border-color:var(--accent-color,#2196f3)}.control-button.active{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.control-icon{color:#4caf50;color:var(--accent-color,#4caf50);font-size:20px;margin-bottom:8px}.control-title{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:700;margin-bottom:5px}.control-description{color:#666;color:var(--text-secondary,#666);font-size:11px}.emergency-section{background:#f443360d;border:2px solid #f4433633;border-radius:12px;margin-top:30px;padding:20px}.emergency-section h4{align-items:center;color:#d32f2f;display:flex;gap:10px;margin:0 0 15px}.emergency-controls{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.emergency-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:14px;font-weight:700;gap:8px;padding:15px 25px;transition:all .3s ease}.emergency-btn.lockdown{background:#f44336;color:#fff}.emergency-btn.lockdown:hover{background:#d32f2f;transform:translateY(-2px)}.emergency-btn.restore{background:#4caf50;background:var(--accent-color,#4caf50);color:#fff}.emergency-btn.restore:hover{background:#45a049;transform:translateY(-2px)}@media (max-width:768px){.kill-switch{padding:20px}.kill-switch-header{align-items:stretch;flex-direction:column;text-align:center}.status-overview{justify-content:center}.protection-stats{grid-template-columns:1fr}.setting-item{align-items:stretch;flex-direction:column;gap:15px}.setting-control{justify-content:space-between}.control-grid,.leak-tests{grid-template-columns:1fr}.emergency-controls{align-items:stretch;flex-direction:column}}@media (max-width:480px){.kill-switch-header h3{font-size:1.2rem}.threat-item{align-items:stretch;flex-direction:column;gap:10px}.threat-info{justify-content:space-between}}.traffic-analytics{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.analytics-header{flex-wrap:wrap;gap:15px}.analytics-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem}.analytics-controls{flex-wrap:wrap;gap:10px}.data-type-selector,.time-range-selector{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.data-type-selector:focus,.time-range-selector:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.realtime-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:25px}.stat-card.realtime{animation:pulse-glow 2s infinite;background:linear-gradient(135deg,#4caf501a,#4caf500d);background:linear-gradient(135deg,rgba(var(--accent-color,76,175,80),.1),rgba(var(--accent-color,76,175,80),.05));border:2px solid #4caf504d;border:2px solid rgba(var(--accent-color,76,175,80),.3)}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #4caf5033;box-shadow:0 0 10px rgba(var(--accent-color,76,175,80),.2)}50%{box-shadow:0 0 20px #4caf5066;box-shadow:0 0 20px rgba(var(--accent-color,76,175,80),.4)}}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.stat-card{transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{box-shadow:0 4px 12px #0000001a}.chart-container{background:#fafafa;background:var(--bg-card,#fafafa);border-radius:12px;margin-bottom:30px;padding:25px}.chart-header{flex-wrap:wrap;gap:15px;margin-bottom:25px}.chart-header h4{color:#333;color:var(--text-primary,#333);font-size:1.1rem;margin:0}.legend-color{border-radius:4px}.legend-item.download .legend-color{background:linear-gradient(135deg,#4caf50,#45a049)}.legend-item.upload .legend-color{background:linear-gradient(135deg,#2196f3,#1976d2)}.chart-canvas{gap:15px;height:300px;position:relative}.y-axis{color:#666;color:var(--text-secondary,#666);display:flex;flex-direction:column;font-size:11px;justify-content:space-between;min-width:60px;padding-right:10px;text-align:right}.chart-bars{border-bottom:2px solid #ddd;border-bottom:2px solid var(--border-color,#ddd);border-left:2px solid #ddd;border-left:2px solid var(--border-color,#ddd);flex:1 1;gap:8px;padding:10px 0 30px 10px;position:relative}.bar-container{align-items:center;display:flex;flex:1 1;flex-direction:column;height:100%;position:relative}.bar{border-radius:4px 4px 0 0;bottom:0;cursor:pointer;max-width:40px;position:absolute;transition:all .3s ease;width:100%}.bar:hover{opacity:.8}.download-bar{background:linear-gradient(180deg,#4caf50,#45a049);z-index:1}.upload-bar{background:linear-gradient(180deg,#2196f3,#1976d2);position:absolute;z-index:2}.bar-label{bottom:-25px;color:#666;color:var(--text-secondary,#666);font-size:10px;position:absolute;transform:rotate(-45deg);transform-origin:top left;white-space:nowrap}.data-breakdown{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.data-breakdown h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.breakdown-bars{display:flex;flex-direction:column;gap:20px}.breakdown-item{flex-direction:column;gap:8px}.breakdown-label{color:#666;color:var(--text-secondary,#666);display:flex;justify-content:space-between}.label-text{font-weight:500}.label-value{color:#333;color:var(--text-primary,#333);font-weight:700}.breakdown-bar{background:#eee;background:var(--border-color,#eee);border-radius:10px;height:20px;overflow:hidden}.breakdown-fill{border-radius:10px;height:100%;transition:width .5s ease}.download-fill{background:linear-gradient(90deg,#4caf50,#45a049)}.upload-fill{background:linear-gradient(90deg,#2196f3,#1976d2)}.insights-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.insight-card{align-items:center;background:linear-gradient(135deg,#2196f30d,#2196f31a);border:1px solid #2196f333;display:flex;gap:15px;padding:20px}.insight-icon{font-size:24px;opacity:.9}.insight-content{flex:1 1}.insight-title{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500;margin-bottom:5px;text-transform:uppercase}.insight-value{color:#333;color:var(--text-primary,#333);font-size:16px;font-weight:700}@media (max-width:768px){.traffic-analytics{padding:20px}.analytics-header{align-items:stretch;text-align:center}.analytics-controls,.analytics-header{flex-direction:column}.data-type-selector,.time-range-selector{width:100%}.realtime-stats,.stats-grid{grid-template-columns:1fr}.chart-canvas{height:250px}.bar-label{font-size:9px}.insights-grid{grid-template-columns:1fr}}@media (max-width:480px){.chart-bars{gap:4px}.bar{max-width:20px}.analytics-header h3{font-size:1.3rem}.stat-value{font-size:16px}}.connection-history{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1400px;padding:25px}.history-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.history-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0}.export-buttons{display:flex;gap:10px}.export-btn{align-items:center;display:flex;font-size:13px;font-weight:500;gap:6px;padding:10px 16px;transition:all .3s ease}.export-btn.csv{background:#4caf50;background:var(--accent-color,#4caf50);color:#fff}.export-btn.json{background:#2196f3;color:#fff}.export-btn:hover{box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.stats-overview{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:30px}.stat-item{align-items:center;gap:12px}.stat-info{flex:1 1}.stat-value{margin-bottom:3px}.controls-section{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px}.search-box{align-items:center;background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;display:flex;flex:1 1;gap:10px;min-width:250px;padding:10px 15px;transition:border-color .3s ease}.search-box:focus-within{border-color:#2196f3;border-color:var(--accent-color,#2196f3)}.search-icon{color:#666;color:var(--text-secondary,#666);font-size:16px}.search-box input{background:#0000;border:none;color:#333;color:var(--text-primary,#333);flex:1 1;font-size:14px;outline:none}.filter-controls{display:flex;flex-wrap:wrap;gap:10px}.filter-select,.sort-select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;padding:10px 15px;transition:border-color .3s ease}.filter-select:focus,.sort-select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.results-info{color:#666;color:var(--text-secondary,#666);font-size:13px;font-weight:500;margin-bottom:15px}.connections-table{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;overflow:hidden}.table-header{grid-gap:10px;background:#4caf50;background:var(--accent-color,#4caf50);color:#fff;display:grid;font-size:13px;gap:10px;grid-template-columns:100px 1fr 100px 150px 100px 100px 100px 80px;padding:15px}.table-body{max-height:600px;overflow-y:auto}.table-row{grid-gap:10px;align-items:center;border-bottom:1px solid #eee;border-bottom:1px solid var(--border-color,#eee);display:grid;gap:10px;grid-template-columns:100px 1fr 100px 150px 100px 100px 100px 80px;padding:15px;transition:background .3s ease}.table-row:hover{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05)}.table-row.active{background:#2196f30d}.col{color:#333;color:var(--text-primary,#333);font-size:13px}.status-badge{align-items:center;display:inline-flex;font-weight:700;gap:5px}.status-badge.completed{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border:1px solid #4caf504d;border:1px solid rgba(var(--accent-color,76,175,80),.3);color:#4caf50;color:var(--accent-color,#4caf50)}.status-badge.active{animation:pulse-border 2s infinite;background:#2196f31a;border:1px solid #2196f34d;color:#2196f3}.status-badge.failed{background:#f443361a;border:1px solid #f443364d;color:#f44336}.status-badge.disconnected{background:#ff98001a;border:1px solid #ff98004d;color:#f57c00}@keyframes pulse-border{0%,to{border-color:#2196f34d}50%{border-color:#2196f3cc}}.server-info{align-items:center;gap:8px}.server-flag{font-size:16px}.protocol-badge{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);font-size:11px;font-weight:600;padding:3px 8px}.details-btn{align-items:center;background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:11px;font-weight:500;gap:4px;padding:6px 10px;transition:all .3s ease}.details-btn:hover{background:#45a049;transform:scale(1.05)}.modal-content{max-height:80vh;max-width:700px;overflow-y:auto}.modal-header h4{font-size:1.3rem}.detail-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.detail-item{flex-direction:column}.detail-item.full-width{grid-column:1/-1}.detail-label{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500;text-transform:uppercase}.detail-value.status-completed{color:#4caf50;color:var(--accent-color,#4caf50)}.detail-value.status-active{color:#2196f3}.detail-value.status-failed{color:#f44336}.detail-value.error{color:#f44336;font-family:monospace}@media (max-width:1024px){.table-header,.table-row{font-size:12px;gap:8px;grid-template-columns:90px 1fr 90px 130px 90px 90px 90px 70px}}@media (max-width:768px){.connection-history{padding:20px}.history-header{align-items:stretch;flex-direction:column;text-align:center}.export-buttons{justify-content:center}.stats-overview{grid-template-columns:repeat(2,1fr)}.controls-section{flex-direction:column}.search-box{min-width:0;min-width:auto}.filter-controls{flex-direction:column}.filter-select,.sort-select{width:100%}.table-header{display:none}.table-row{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding:15px}.col{align-items:center;display:flex;justify-content:space-between}.col:before{color:#666;color:var(--text-secondary,#666);content:attr(data-label);font-size:11px;font-weight:700;text-transform:uppercase}.detail-grid{grid-template-columns:1fr}}@media (max-width:480px){.stats-overview{grid-template-columns:1fr}.history-header h3{font-size:1.3rem}.export-buttons{flex-direction:column}.export-btn{justify-content:center;width:100%}}.data-usage-tracker{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.tracker-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.tracker-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0}.tracker-controls{display:flex;flex-wrap:wrap;gap:10px}.sort-selector,.time-range-selector{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.sort-selector:focus,.time-range-selector:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.usage-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.stat-card.primary{background:linear-gradient(135deg,#4caf501a,#4caf500d);background:linear-gradient(135deg,rgba(var(--accent-color,76,175,80),.1),rgba(var(--accent-color,76,175,80),.05));border:2px solid #4caf504d;border:2px solid rgba(var(--accent-color,76,175,80),.3)}.category-breakdown{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.category-breakdown h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.category-chart{gap:15px}.category-bar,.category-chart{display:flex;flex-direction:column}.category-bar{gap:8px}.category-info{display:flex;font-size:13px;justify-content:space-between}.category-name{color:#333;color:var(--text-primary,#333);font-weight:500}.category-usage{color:#666;color:var(--text-secondary,#666);font-weight:700}.category-progress{background:#eee;background:var(--border-color,#eee);border-radius:10px;height:20px;overflow:hidden}.category-fill{border-radius:10px;height:100%;transition:width .5s ease}.apps-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.apps-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.app-usage-card{background:#fafafa;background:var(--bg-card,#fafafa);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:12px;padding:20px;transition:all .3s ease}.app-usage-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.app-usage-card.warning{background:#ff98000d;border-color:#ff9800}.app-usage-card.exceeded{background:#f443360d;border-color:#f44336}.app-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:15px}.app-info{align-items:center;display:flex;gap:12px}.app-icon-large{font-size:32px}.app-details{display:flex;flex-direction:column;gap:3px}.app-name{color:#333;color:var(--text-primary,#333);font-size:15px;font-weight:700}.app-category{color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:500;text-transform:uppercase}.limit-btn{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border:2px solid #4caf50;border:2px solid var(--accent-color,#4caf50);border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);cursor:pointer;font-size:14px;height:32px;transition:all .3s ease;width:32px}.limit-btn:hover{background:#4caf50;background:var(--accent-color,#4caf50);color:#fff;transform:scale(1.1)}.usage-details{gap:10px;margin-bottom:15px}.usage-row{display:flex;font-size:13px;justify-content:space-between}.limit-bar{background:#eee;background:var(--border-color,#eee);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}.limit-fill{height:100%;transition:width .5s ease}.limit-fill.safe{background:linear-gradient(90deg,#4caf50,#45a049)}.limit-fill.warning{background:linear-gradient(90deg,#ff9800,#f57c00)}.limit-fill.exceeded{background:linear-gradient(90deg,#f44336,#d32f2f)}.limit-info{align-items:center;display:flex;justify-content:space-between}.limit-text{color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:500}.app-usage-card.warning .limit-text{color:#f57c00}.app-usage-card.exceeded .limit-text{color:#f44336;font-weight:700}.remove-limit-btn{background:#f443361a;border:none;border-radius:50%;color:#f44336;cursor:pointer;font-size:12px;height:20px;transition:all .3s ease;width:20px}.remove-limit-btn:hover{background:#f44336;color:#fff;transform:scale(1.1)}.modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#fff;background:var(--bg-card,#fff);border-radius:15px;box-shadow:0 10px 40px #0000004d;max-width:500px;width:100%}.modal-header{align-items:center;border-bottom:1px solid #eee;border-bottom:1px solid var(--border-color,#eee);display:flex;justify-content:space-between;padding:20px}.modal-header h4{color:#333;color:var(--text-primary,#333);font-size:1.2rem;margin:0}.close-btn{background:#f443361a;border:none;border-radius:50%;color:#f44336;cursor:pointer;font-size:18px;height:30px;transition:all .3s ease;width:30px}.close-btn:hover{background:#f44336;color:#fff;transform:rotate(90deg)}.modal-body{padding:20px}.modal-description{color:#666;color:var(--text-secondary,#666);font-size:14px;line-height:1.5;margin-bottom:20px}.limit-options{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));margin-bottom:20px}.limit-option{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;font-weight:500;padding:12px;transition:all .3s ease}.limit-option:hover{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-color:#4caf50;border-color:var(--accent-color,#4caf50);color:#4caf50;color:var(--accent-color,#4caf50);transform:translateY(-2px)}.custom-limit{display:flex;gap:10px}.custom-limit-input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);flex:1 1;font-size:14px;padding:10px}.custom-limit-input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.set-custom-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px;transition:all .3s ease;white-space:nowrap}.set-custom-btn:hover{background:#45a049;transform:translateY(-2px)}@media (max-width:768px){.data-usage-tracker{padding:20px}.tracker-header{align-items:stretch;text-align:center}.tracker-controls,.tracker-header{flex-direction:column}.sort-selector,.time-range-selector{width:100%}.usage-stats{grid-template-columns:repeat(2,1fr)}.apps-grid{grid-template-columns:1fr}.limit-options{grid-template-columns:repeat(2,1fr)}.custom-limit{flex-direction:column}.set-custom-btn{width:100%}}@media (max-width:480px){.usage-stats{grid-template-columns:1fr}.tracker-header h3{font-size:1.3rem}.limit-options{grid-template-columns:1fr}}.performance-metrics{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.metrics-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.metrics-header h3{font-size:1.6rem;margin:0}.metrics-header h3,.time-window-selector{color:#333;color:var(--text-primary,#333)}.time-window-selector{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.time-window-selector:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.not-connected-message{padding:60px 20px;text-align:center}.message-icon{font-size:64px;margin-bottom:20px;opacity:.5}.not-connected-message h4{color:#333;color:var(--text-primary,#333);font-size:1.4rem;margin:0 0 10px}.not-connected-message p{color:#666;color:var(--text-secondary,#666);font-size:14px}.server-info-banner{align-items:center;background:linear-gradient(135deg,#4caf501a,#4caf500d);background:linear-gradient(135deg,rgba(var(--accent-color,76,175,80),.1),rgba(var(--accent-color,76,175,80),.05));border:1px solid #4caf504d;border:1px solid rgba(var(--accent-color,76,175,80),.3);border-radius:12px;display:flex;gap:15px;margin-bottom:25px;padding:15px 20px}.server-icon{font-size:24px}.server-details{gap:3px}.server-label{color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:500;text-transform:uppercase}.server-name{color:#333;color:var(--text-primary,#333);font-size:16px;font-weight:700}.realtime-metrics{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:30px}.metric-card{background:#fafafa;background:var(--bg-card,#fafafa);transition:transform .3s ease}.metric-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.metric-content{flex:1 1}.metric-value{margin-bottom:3px}.metric-label{font-weight:500}.quality-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:25px;padding:20px}.quality-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.quality-indicator{display:flex;flex-direction:column;gap:10px}.quality-label{align-items:center;color:#333;color:var(--text-primary,#333);display:flex;font-size:15px;font-weight:700;justify-content:space-between}.quality-score{color:#4caf50;color:var(--accent-color,#4caf50);font-size:18px}.quality-bar{background:#eee;background:var(--border-color,#eee);border-radius:15px;height:30px;overflow:hidden}.quality-fill{border-radius:15px;height:100%;transition:width .5s ease}.stats-grid{grid-gap:15px;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:30px}.stat-item{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);padding:15px}.stat-label{font-size:11px}.charts-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:30px}.metric-chart{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.chart-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.chart-header h5{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:600;margin:0}.chart-range{background:#4caf501a;background:rgba(var(--accent-color,76,175,80),.1);border-radius:8px;color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:500;padding:3px 8px;text-transform:uppercase}.chart-canvas{display:flex;gap:10px;height:200px}.y-axis-labels{color:#666;color:var(--text-secondary,#666);display:flex;flex-direction:column;font-size:10px;justify-content:space-between;min-width:40px;padding-right:8px;text-align:right}.chart-area{border-bottom:2px solid #ddd;border-bottom:2px solid var(--border-color,#ddd);border-left:2px solid #ddd;border-left:2px solid var(--border-color,#ddd);flex:1 1;position:relative}.chart-area svg{height:100%;left:0;position:absolute;top:0;width:100%}.performance-tips{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.performance-tips h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.tips-grid{display:flex;flex-direction:column;gap:12px}.tip-card{align-items:center;border:1px solid}.tip-card.success{background:#4caf500d;border-color:#4caf504d}.tip-card.warning{background:#ff98000d;border-color:#ff98004d}.tip-card.error{background:#f443360d;border-color:#f443364d}.tip-icon{font-size:20px}.tip-card p{color:#333;color:var(--text-primary,#333)}@media (max-width:768px){.performance-metrics{padding:20px}.metrics-header{align-items:stretch;flex-direction:column;text-align:center}.time-window-selector{width:100%}.realtime-metrics,.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}.chart-canvas{height:180px}}@media (max-width:480px){.realtime-metrics,.stats-grid{grid-template-columns:1fr}.metrics-header h3{font-size:1.3rem}.metric-value{font-size:16px}}.geographic-map{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1400px;padding:25px}.map-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.map-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0}.map-controls{align-items:center;display:flex;flex-wrap:wrap;gap:15px}.show-path-toggle{align-items:center;color:#666;color:var(--text-secondary,#666);cursor:pointer;display:flex;font-size:13px;gap:8px;-webkit-user-select:none;user-select:none}.show-path-toggle input{cursor:pointer}.continent-filter{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:14px;padding:8px 12px;transition:border-color .3s ease}.continent-filter:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.global-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.stat-icon{opacity:.9}.map-container{background:linear-gradient(180deg,#d4ebf7,#e8f4f8);border:2px solid #b3d9f2;border-radius:12px;box-shadow:inset 0 2px 8px #0000000d,0 4px 12px #0000001a;margin-bottom:30px;overflow:hidden;padding:20px;position:relative}.world-map{background:#0000;border-radius:8px;display:block;height:600px;width:100%}.ocean-bg{animation:ocean-wave 20s ease-in-out infinite}@keyframes ocean-wave{0%,to{fill:#d4ebf7}50%{fill:#c8e5f5}}.continent{cursor:default;transition:all .4s ease}.continent:hover{filter:brightness(1.1) url(#continent-glow);opacity:.9;transform:scale(1.01);transform-origin:center}.server-marker{cursor:pointer;filter:drop-shadow(0 0 2px rgba(0,0,0,.3));transition:all .3s ease}.server-marker:hover{filter:drop-shadow(0 0 4px rgba(0,0,0,.5)) brightness(1.3);transform:scale(1.8)}.server-marker.connected{animation:pulse-marker 2s infinite,glow-ring 2s infinite;filter:drop-shadow(0 0 6px currentColor)}@keyframes pulse-marker{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.3)}}@keyframes glow-ring{0%,to{filter:drop-shadow(0 0 6px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) brightness(1.2)}}.server-glow{animation:glow-pulse 2s infinite;filter:blur(.5)}@keyframes glow-pulse{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.35;transform:scale(1.1)}}.connection-path{animation:dash 4s linear infinite;filter:drop-shadow(0 0 2px rgba(33,150,243,.5))}@keyframes dash{to{stroke-dashoffset:-20}}.pulse-dot{animation:pulse-dot-anim 2s ease-out infinite}@keyframes pulse-dot-anim{0%{r:.8;opacity:1}70%{r:3;opacity:.3}to{r:4;opacity:0}}.map-tooltip{background:#fff;background:var(--bg-card,#fff);border:2px solid #4caf50;border:2px solid var(--accent-color,#4caf50);border-radius:10px;box-shadow:0 4px 12px #0003;min-width:180px;padding:12px;pointer-events:none;position:absolute;transform:translate(-50%,-120%);z-index:10}.tooltip-header{align-items:center;border-bottom:1px solid #eee;border-bottom:1px solid var(--border-color,#eee);display:flex;justify-content:space-between;margin-bottom:10px;padding-bottom:8px}.tooltip-name{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:700}.tooltip-status{border-radius:8px;font-size:10px;font-weight:500;padding:2px 6px}.tooltip-status.available{background:#4caf501a;color:#4caf50}.tooltip-status.busy{background:#ff98001a;color:#f57c00}.tooltip-details{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.tooltip-row{display:flex;font-size:12px;justify-content:space-between}.tooltip-row span:first-child{color:#666;color:var(--text-secondary,#666)}.tooltip-row span:last-child{color:#333;color:var(--text-primary,#333);font-weight:700}.connect-tooltip-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:6px;pointer-events:all;transition:all .3s ease;width:100%}.connect-tooltip-btn:hover{background:#45a049;transform:scale(1.05)}.map-legend{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.map-legend h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.legend-items{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.legend-item{color:#666;color:var(--text-secondary,#666);font-size:13px;gap:10px}.legend-marker{border-radius:50%;flex-shrink:0;height:16px;width:16px}.legend-marker.large{height:20px;width:20px}.legend-marker.medium{height:16px;width:16px}.legend-marker.small{height:12px;width:12px}.continent-stats{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.continent-stats h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.continent-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.continent-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;padding:15px;transition:all .3s ease}.continent-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.continent-name{border-bottom:2px solid #4caf50;border-bottom:2px solid var(--accent-color,#4caf50);color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700;margin-bottom:12px;padding-bottom:8px}.continent-details{display:flex;flex-direction:column;gap:8px}.detail-row{font-size:12px}.detail-value{color:#333;color:var(--text-primary,#333);font-weight:700}@media (max-width:768px){.geographic-map{padding:20px}.map-header{text-align:center}.map-controls,.map-header{align-items:stretch;flex-direction:column}.continent-filter{width:100%}.global-stats{grid-template-columns:repeat(2,1fr)}.world-map{height:450px}.continent-grid,.legend-items{grid-template-columns:1fr}.map-tooltip{font-size:11px;transform:translate(-50%,-110%)}}@media (max-width:480px){.global-stats{grid-template-columns:1fr}.map-header h3{font-size:1.3rem}.world-map{height:350px}.stat-value{font-size:16px}}[data-theme=dark] .map-container{background:linear-gradient(180deg,#1a2838,#243447);border-color:#2d3e52}[data-theme=dark] .ocean-bg{animation:ocean-wave-dark 20s ease-in-out infinite}@keyframes ocean-wave-dark{0%,to{fill:#1a2838}50%{fill:#1f2f42}}[data-theme=dark] .continent{opacity:.85}.threat-detection{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.threat-header{flex-wrap:wrap;gap:15px;margin-bottom:30px}.threat-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0}.clear-btn,.scan-btn{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px;transition:all .3s ease}.scan-btn{background:#4caf50;background:var(--accent-color,#4caf50)}.scan-btn:hover:not(:disabled){background:#45a049}.scan-btn.scanning{animation:pulse-scan 1.5s infinite}@keyframes pulse-scan{0%,to{box-shadow:0 0 0 0 #4caf50b3}50%{box-shadow:0 0 0 10px #4caf5000}}.clear-btn{background:#f44336;color:#fff}.clear-btn:hover:not(:disabled){background:#d32f2f;transform:translateY(-2px)}.clear-btn:disabled,.scan-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.protection-banner{align-items:center;border:2px solid;border-radius:12px;display:flex;gap:20px;margin-bottom:30px;padding:20px}.protection-banner.active{background:#4caf500d;border-color:#4caf504d}.protection-banner.disabled{background:#ff98000d;border-color:#ff98004d}.banner-content h4{font-size:1.2rem}.threat-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.stat-card{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);gap:15px;padding:20px;transition:transform .3s ease}.stat-card:hover{transform:translateY(-2px)}.stat-icon{align-items:center;border-radius:12px;display:flex;height:50px;justify-content:center;width:50px}.stat-content{flex:1 1}.stat-value{color:#333;color:var(--text-primary,#333)}.stat-label{color:#666;color:var(--text-secondary,#666)}.protection-settings{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.protection-settings h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.threat-log{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.threat-log h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.no-threats{padding:60px 20px;text-align:center}.no-threats-icon{font-size:64px;margin-bottom:20px}.no-threats h5{color:#333;color:var(--text-primary,#333);font-size:1.3rem;margin:0 0 10px}.no-threats p{color:#666;color:var(--text-secondary,#666);font-size:14px}.threat-list{display:flex;flex-direction:column;gap:10px;max-height:500px;overflow-y:auto}.threat-item{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;gap:15px;padding:15px;transition:all .3s ease}.threat-item:hover{box-shadow:0 4px 8px #0000001a;transform:translateX(5px)}.threat-item.blocked{border-left:4px solid #4caf50;border-left:4px solid var(--accent-color,#4caf50)}.threat-item.allowed{border-left:4px solid #ff9800}.threat-icon-wrapper{align-items:center;display:flex;justify-content:center;position:relative}.threat-type-icon{font-size:28px}.threat-status{background:#fff;border-radius:50%;bottom:-5px;font-size:14px;position:absolute;right:-5px}.threat-details{flex:1 1;flex-direction:column;gap:5px}.threat-main{align-items:center;display:flex;gap:10px;justify-content:space-between}.threat-domain{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700}.threat-severity{background:#ffffff80;border-radius:8px;font-size:10px;font-weight:700;padding:3px 8px}.threat-meta{color:#666;color:var(--text-secondary,#666);display:flex;font-size:12px;gap:15px}.threat-type{font-weight:500}.threat-action{align-items:center;display:flex}.action-badge{border-radius:12px;font-size:11px;font-weight:700;padding:4px 10px;text-transform:uppercase}.action-badge.blocked{background:#4caf501a;border:1px solid #4caf504d;color:#4caf50;color:var(--accent-color,#4caf50)}.action-badge.allowed{background:#ff98001a;border:1px solid #ff98004d;color:#f57c00}.security-tips{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.security-tips h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.tips-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.tip-card{align-items:flex-start;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;gap:12px;padding:15px}.tip-content{flex:1 1}.tip-title{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700;margin-bottom:5px}.tip-content p{color:#666;color:var(--text-secondary,#666);font-size:12px;line-height:1.5;margin:0}@media (max-width:768px){.threat-detection{padding:20px}.threat-header{align-items:stretch;text-align:center}.header-actions,.threat-header{flex-direction:column}.threat-stats{grid-template-columns:repeat(2,1fr)}.settings-grid,.tips-grid{grid-template-columns:1fr}.threat-item,.threat-main{align-items:flex-start;flex-direction:column}.threat-meta{flex-direction:column;gap:5px}}@media (max-width:480px){.threat-stats{grid-template-columns:1fr}.threat-header h3{font-size:1.3rem}.stat-value{font-size:20px}}.dns-protection{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.dns-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.dns-banner{align-items:center;border:2px solid;border-radius:12px;display:flex;gap:20px;margin-bottom:30px;padding:20px}.dns-banner.protected{background:#4caf500d;border-color:#4caf504d}.dns-banner.warning{background:#ff98000d;border-color:#ff98004d}.dns-list{display:flex;flex-direction:column;gap:5px}.dns-server{background:#0000000d;border-radius:6px;font-family:monospace;font-size:12px;padding:4px 8px}.dns-provider-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.dns-provider-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.provider-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:20px}.provider-card{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:10px;cursor:pointer;padding:15px;transition:all .3s ease}.provider-card:hover{transform:translateY(-2px)}.provider-card.selected,.provider-card:hover{border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.provider-card.selected{background:#4caf500d;background:rgba(var(--accent-color,76,175,80),.05)}.provider-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.provider-name{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700}.secure-badge{background:#4caf501a;border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);font-size:10px;padding:3px 6px}.provider-dns{display:flex;flex-direction:column;gap:5px}.dns-item{background:#0000000d;border-radius:6px;color:#666;color:var(--text-secondary,#666);font-family:monospace;font-size:12px;padding:6px}.custom-dns-inputs{display:flex;flex-direction:column;gap:10px}.custom-dns-inputs input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);font-family:monospace;font-size:14px;padding:12px}.custom-dns-inputs input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.dns-advanced{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.dns-advanced h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.settings-list{display:flex;flex-direction:column;gap:15px}.setting-item{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee)}.setting-info{align-items:center;display:flex;flex:1 1;gap:12px}.setting-icon{font-size:24px}.setting-details{flex:1 1}.setting-title{color:#333;color:var(--text-primary,#333);font-weight:700;margin-bottom:3px}.setting-description{color:#666;color:var(--text-secondary,#666);font-size:12px}.toggle-switch{height:26px;width:50px}.toggle-slider{border-radius:13px}.toggle-slider:before{height:20px;width:20px}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(24px)}.dns-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.dns-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}@media (max-width:768px){.dns-protection{padding:20px}.info-cards,.provider-grid{grid-template-columns:1fr}.test-container{align-items:stretch;flex-direction:column}}.ipv6-protection{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.ipv6-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.status-banner.protected{background:#4caf500d;border-color:#4caf504d}.status-banner.warning{background:#ff98000d;border-color:#ff98004d}.leak-test-section,.protection-toggle-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.leak-test-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.test-container{align-items:center;display:flex;gap:15px;margin-bottom:20px}.test-btn{background:#4caf50;background:var(--accent-color,#4caf50);border-radius:8px;color:#fff;font-size:14px;font-weight:500;padding:12px 24px}.test-btn:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.test-btn:disabled{cursor:not-allowed;opacity:.5}.test-btn.testing{animation:pulse-test 1.5s infinite}@keyframes pulse-test{0%,to{box-shadow:0 0 0 0 #4caf50b3}50%{box-shadow:0 0 0 10px #4caf5000}}.test-time{color:#666;color:var(--text-secondary,#666);font-size:12px}.test-results{border:2px solid;border-radius:10px;padding:20px}.test-results.secure{background:#4caf500d;border-color:#4caf504d}.test-results.leak{background:#f443360d;border-color:#f443364d}.result-header{align-items:center;display:flex;gap:12px;margin-bottom:15px}.result-icon{font-size:24px}.result-header h5{color:#333;color:var(--text-primary,#333);margin:0}.result-details{display:flex;flex-direction:column;gap:10px}.detail-row{display:flex;font-size:13px;justify-content:space-between}.detail-row span:first-child{color:#666;color:var(--text-secondary,#666);font-weight:500}.detail-row .detected{color:#ff9800;font-weight:700}.detail-row .none{color:#666;color:var(--text-secondary,#666)}.detail-row .secure{color:#4caf50;color:var(--accent-color,#4caf50);font-weight:700}.detail-row .insecure{color:#f44336;font-weight:700}.leaked-address{background:#f443361a;border-radius:6px;color:#f44336;font-family:monospace;font-size:11px;padding:4px 8px}.leak-warning{background:#ff98001a;border-radius:8px;color:#f57c00;font-size:13px;font-weight:500;margin-top:15px;padding:12px}.traffic-handling-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.traffic-handling-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px}.handling-options{display:flex;flex-direction:column;gap:15px}.handling-option{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:12px;cursor:pointer;padding:18px;transition:all .3s ease}.handling-option.selected,.handling-option:hover{border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.handling-option.selected{background:#4caf500d}.handling-option input[type=radio]{display:none}.option-content{display:flex;flex-direction:column;gap:10px}.option-header{align-items:center;display:flex;gap:10px}.option-title{color:#333;color:var(--text-primary,#333);font-size:15px;font-weight:700}.recommended-badge{border-radius:10px;font-size:10px;font-weight:600;margin-left:auto;padding:4px 8px}.option-description{color:#666;color:var(--text-secondary,#666);font-size:13px;line-height:1.5;margin:0}.option-features{display:flex;flex-wrap:wrap;gap:10px}.feature{background:#0000000d;border-radius:8px;color:#666;color:var(--text-secondary,#666);font-size:11px;padding:4px 8px}.ipv6-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.ipv6-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}@media (max-width:768px){.ipv6-protection{padding:20px}.toggle-container{align-items:stretch;flex-direction:column;gap:15px}.info-cards{grid-template-columns:1fr}}.firewall-manager{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.firewall-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.firewall-status{border:2px solid;border-radius:12px;margin-bottom:30px;padding:20px}.firewall-status.active{background:#4caf500d;border-color:#4caf504d}.firewall-status.inactive{background:#ff98000d;border-color:#ff98004d}.status-content{justify-content:space-between}.status-content,.status-info{align-items:center;display:flex}.status-info{gap:15px}.status-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 5px}.status-info p{color:#666;color:var(--text-secondary,#666);font-size:13px;margin:0}.templates-section h4{margin:0 0 10px}.templates-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.template-card{border-radius:10px;padding:15px}.template-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.template-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.template-name{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:700}.template-badge{background:#2196f31a;border-radius:8px;color:#2196f3;font-size:10px;padding:3px 6px}.template-description{color:#666;color:var(--text-secondary,#666);font-size:12px;line-height:1.4;margin:0 0 12px}.apply-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:8px;transition:all .3s ease;width:100%}.apply-btn:hover:not(:disabled){background:#45a049}.apply-btn:disabled{cursor:not-allowed;opacity:.4}.add-rule-btn{background:#2196f3;background:var(--accent-color,#2196f3);border-radius:6px;font-size:13px;padding:8px 16px}.add-rule-btn:hover:not(:disabled){background:#1976d2}.add-rule-btn:disabled{cursor:not-allowed;opacity:.4}.add-rule-form{border-radius:10px;padding:20px}.form-row{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr;margin-bottom:15px}.no-rules{color:#666;color:var(--text-secondary,#666);padding:40px 20px;text-align:center}.no-rules-icon{display:block;font-size:48px;margin-bottom:10px}.rule-item{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);overflow:hidden;transition:all .3s ease}.rule-item.disabled{opacity:.5}.rule-main{padding:15px}.rule-name-row{gap:10px;margin-bottom:10px}.rule-action{font-size:20px}.rule-name{color:#333;color:var(--text-primary,#333);font-size:14px;font-weight:700}.disabled-badge{margin-left:auto}.rule-details{display:flex;flex-wrap:wrap;gap:15px}.rule-actions{align-items:center;display:flex;gap:12px}.delete-btn:hover:not(:disabled){opacity:1;transform:scale(1.1)}.delete-btn:disabled{cursor:not-allowed;opacity:.3}.firewall-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.firewall-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.info-item{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;gap:12px;padding:15px}.info-icon{font-size:24px}.info-item h5{font-size:13px;margin:0 0 5px}.info-item p{font-size:11px;line-height:1.4}@media (max-width:768px){.firewall-manager{padding:20px}.form-row,.info-grid,.templates-grid{grid-template-columns:1fr}}.obfuscation-settings{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.obfuscation-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.obfuscation-toggle-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.toggle-container{align-items:center;display:flex;justify-content:space-between}.toggle-info{align-items:center;gap:15px}.toggle-icon{font-size:32px}.toggle-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 5px}.toggle-info p{color:#666;color:var(--text-secondary,#666);font-size:13px;margin:0}.protocols-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.protocols-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px}.protocols-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.protocol-card{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);cursor:pointer;padding:18px}.protocol-card:hover{transform:translateY(-2px)}.protocol-card.selected,.protocol-card:hover{border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.protocol-card.selected{background:#4caf500d}.protocol-card input[type=radio]{display:none}.protocol-header{gap:12px;margin-bottom:12px}.protocol-icon{font-size:28px}.protocol-name{color:#333;color:var(--text-primary,#333)}.protocol-description{color:#666;color:var(--text-secondary,#666);font-size:12px;line-height:1.5;margin:0 0 15px}.protocol-specs{display:flex;flex-direction:column;gap:8px}.spec-item{display:flex;font-size:11px;justify-content:space-between}.spec-label{color:#666;color:var(--text-secondary,#666)}.spec-value{color:#333;color:var(--text-primary,#333);font-weight:600}.spec-value.very-high{color:#4caf50}.spec-value.high{color:#8bc34a}.spec-value.medium{color:#ff9800}.port-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.port-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px}.port-options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.port-option{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:10px;cursor:pointer;flex:1 1;min-width:100px;padding:12px;text-align:center;transition:all .3s ease}.port-option.selected,.port-option:hover{border-color:#4caf50;border-color:var(--accent-color,#4caf50)}.port-option.selected{background:#4caf500d}.port-option input[type=radio]{display:none}.port-info{display:flex;flex-direction:column;gap:5px}.port-number{color:#333;color:var(--text-primary,#333);font-size:18px;font-weight:700}.port-name{color:#666;color:var(--text-secondary,#666);font-size:11px}.recommended-badge{background:#4caf501a;border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);font-size:9px;margin-top:4px;padding:3px 6px}.custom-port{align-items:center;display:flex;gap:12px}.custom-port label{font-size:13px;font-weight:500}.custom-port input,.custom-port label{color:#333;color:var(--text-primary,#333)}.custom-port input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;font-size:14px;padding:10px;width:150px}.custom-port input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.advanced-options{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.advanced-options h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.option-item{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;justify-content:space-between;margin-bottom:12px;padding:15px}.option-item:last-child{margin-bottom:0}.option-info{align-items:center;display:flex;flex:1 1;gap:12px}.option-info h5{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 3px}.option-info p{color:#666;color:var(--text-secondary,#666);font-size:12px;margin:0}.mimic-select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:13px;padding:8px 12px}.mimic-select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.obfuscation-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.obfuscation-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.info-cards{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.info-card h5{font-size:14px;margin:0 0 10px}.info-card p{font-size:12px}@media (max-width:768px){.obfuscation-settings{padding:20px}.protocols-grid{grid-template-columns:1fr}.port-options{flex-direction:column}.info-cards{grid-template-columns:1fr}.option-item{align-items:stretch;flex-direction:column;gap:12px}}.two-factor-auth{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:900px;padding:25px}.twofa-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.status-banner.enabled{background:#4caf500d;border-color:#4caf504d}.status-banner.disabled{background:#ff98000d;border-color:#ff98004d}.setup-container{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:30px}.setup-steps{justify-content:center;margin-bottom:40px}.setup-steps,.step{align-items:center;display:flex}.step{flex-direction:column;gap:10px;opacity:.4;transition:all .3s ease}.step.active,.step.completed{opacity:1}.step-number{align-items:center;background:#ddd;border-radius:50%;color:#fff;display:flex;font-weight:700;height:40px;justify-content:center;transition:all .3s ease;width:40px}.step.active .step-number{background:#2196f3;background:var(--accent-color,#2196f3)}.step.completed .step-number{background:#4caf50;background:var(--accent-color,#4caf50)}.step-label{color:#666;color:var(--text-secondary,#666);font-size:12px;font-weight:500;white-space:nowrap}.step-line{background:#ddd;height:2px;margin:0 15px 26px;width:80px}.step-content{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:30px}.step-content h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px;text-align:center}.step-description{color:#666;color:var(--text-secondary,#666);font-size:14px;margin-bottom:30px;text-align:center}.qr-code-container{align-items:center;display:flex;flex-direction:column;gap:30px}.qr-code-placeholder{background:#fff;border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:12px;height:200px;padding:15px;width:200px}.qr-code{height:100%;width:100%}.manual-entry{max-width:400px;width:100%}.manual-label{color:#666;color:var(--text-secondary,#666);font-size:13px;margin-bottom:10px;text-align:center}.secret-key-box{align-items:center;background:#0000000d;border-radius:8px;display:flex;gap:10px;padding:15px}.secret-key{color:#333;color:var(--text-primary,#333);flex:1 1;font-family:monospace;font-size:14px;font-weight:600;letter-spacing:2px}.copy-btn{background:#2196f3;background:var(--accent-color,#2196f3);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;padding:8px 12px;transition:all .3s ease;white-space:nowrap}.copy-btn:hover{background:#1976d2}.code-input-container{display:flex;gap:12px;justify-content:center;margin-bottom:30px}.code-input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:10px;color:#333;color:var(--text-primary,#333);font-size:24px;font-weight:700;height:60px;text-align:center;width:50px}.code-input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.button-group{display:flex;gap:15px;justify-content:center}.next-btn,.verify-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 32px;transition:all .3s ease}.next-btn:hover,.verify-btn:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.verify-btn:disabled{cursor:not-allowed;opacity:.5}.back-btn{background:#0000;border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#666;color:var(--text-secondary,#666);cursor:pointer;font-size:14px;font-weight:500;padding:12px 32px;transition:all .3s ease}.back-btn:hover{background:#0000000d}.backup-codes-container{display:flex;flex-direction:column;gap:20px}.backup-codes-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.backup-code{background:#0000000d;color:#333;color:var(--text-primary,#333);font-family:monospace;font-weight:600;letter-spacing:1px;padding:12px}.backup-code,.backup-warning{border-radius:8px;font-size:13px;text-align:center}.backup-warning{background:#ff98001a;color:#f57c00;font-weight:500;padding:15px}.download-btn{align-self:center;background:#2196f3;background:var(--accent-color,#2196f3);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .3s ease}.download-btn:hover{background:#1976d2;transform:translateY(-2px)}.success-message{background:#4caf501a;border-radius:8px;color:#4caf50;color:var(--accent-color,#4caf50);font-size:14px;font-weight:500;padding:15px;text-align:center}.benefits-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:25px}.benefits-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 25px;text-align:center}.benefits-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.benefit-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px;text-align:center;transition:all .3s ease}.benefit-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-5px)}.benefit-icon{display:block;font-size:40px;margin-bottom:12px}.benefit-card h5{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 10px}.benefit-card p{color:#666;color:var(--text-secondary,#666);font-size:12px;line-height:1.5;margin:0}.twofa-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:25px}.twofa-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.info-content{display:flex;flex-direction:column;gap:20px}.info-item h5{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 8px}.info-item p{color:#666;color:var(--text-secondary,#666);font-size:13px;line-height:1.6;margin:0}@media (max-width:768px){.setup-container,.step-content,.two-factor-auth{padding:20px}.setup-steps{flex-direction:column;gap:15px}.step-line{height:40px;margin:0;width:2px}.code-input-container{gap:8px}.code-input{font-size:20px;height:50px;width:40px}.backup-codes-grid,.benefits-grid{grid-template-columns:1fr}}.automation-rules{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.automation-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.templates-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.templates-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.templates-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.template-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px;text-align:center;transition:all .3s ease}.template-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-3px)}.template-icon{display:block;font-size:40px;margin-bottom:12px}.template-card h5{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 8px}.template-card p{color:#666;color:var(--text-secondary,#666);font-size:12px;line-height:1.4;margin:0 0 15px}.apply-template-btn{background:#2196f3;background:var(--accent-color,#2196f3);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:8px;transition:all .3s ease;width:100%}.apply-template-btn:hover{background:#1976d2}.rules-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.rules-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.rules-header h4{color:#333;color:var(--text-primary,#333);margin:0}.add-rule-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:all .3s ease}.add-rule-btn:hover{background:#45a049}.add-rule-form{background:#fff;background:var(--bg-card,#fff);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:12px;margin-bottom:20px;padding:25px}.add-rule-form h5{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:13px;margin-bottom:8px}.form-group input{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:8px;color:#333;color:var(--text-primary,#333);font-size:14px;padding:12px;width:100%}.form-group input:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.form-section{background:#00000005;border-radius:10px;margin:25px 0;padding:20px}.form-section h6{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 15px}.trigger-types{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.trigger-option{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);border-radius:8px;cursor:pointer;padding:12px;transition:all .3s ease}.trigger-option.selected,.trigger-option:hover{border-color:#2196f3;border-color:var(--accent-color,#2196f3)}.trigger-option.selected{background:#2196f30d}.trigger-option input[type=radio]{display:none}.trigger-content{display:flex;flex-direction:column;gap:3px}.trigger-label{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:600}.trigger-desc{color:#666;color:var(--text-secondary,#666);font-size:11px}.trigger-config{display:flex;flex-direction:column;gap:12px}.trigger-config input,.trigger-config select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:6px;color:#333;color:var(--text-primary,#333);font-size:13px;padding:10px}.trigger-config input:focus,.trigger-config select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.day-selector{align-items:center;gap:8px}.day-selector>label:first-child{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:500}.action-config{display:flex;gap:12px}.action-config select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:6px;color:#333;color:var(--text-primary,#333);flex:1 1;font-size:13px;padding:10px}.action-config select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.save-rule-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:8px;color:#fff;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:12px;transition:all .3s ease}.save-rule-btn:hover{background:#45a049}.cancel-btn{border-radius:8px;padding:12px}.rules-list{display:flex;flex-direction:column;gap:12px}.rule-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;transition:all .3s ease}.rule-card.disabled{opacity:.5}.rule-main{align-items:center;display:flex;gap:15px;justify-content:space-between;padding:18px}.rule-info{flex:1 1}.rule-name-row{align-items:center;display:flex;gap:12px;margin-bottom:12px}.rule-name-row h5{color:#333;color:var(--text-primary,#333);font-size:15px;margin:0}.disabled-badge{background:#0000001a;border-radius:8px;color:#666;color:var(--text-secondary,#666);font-size:10px;padding:3px 8px}.rule-flow{align-items:center;display:flex;flex-wrap:wrap;gap:15px}.rule-action,.rule-trigger{display:flex;flex-direction:column;gap:3px}.flow-label{color:#666;color:var(--text-secondary,#666);font-size:10px;font-weight:600;text-transform:uppercase}.flow-value{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:500}.flow-arrow{color:#2196f3;color:var(--accent-color,#2196f3);font-size:18px}.rule-controls{align-items:center;display:flex;gap:10px}.test-btn{background:#0000;border:none;cursor:pointer;font-size:18px;opacity:.6;transition:all .3s ease}.test-btn:hover{opacity:1;transform:scale(1.1)}.log-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.log-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.log-list{display:flex;flex-direction:column;gap:8px}.log-entry{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:8px;display:flex;gap:12px;padding:12px}.log-status{font-size:18px}.log-details{display:flex;flex:1 1;flex-direction:column;gap:3px}.log-rule{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:600}.log-action,.log-time{color:#666;color:var(--text-secondary,#666);font-size:11px}.log-time{font-family:monospace}@media (max-width:768px){.automation-rules{padding:20px}.templates-grid{grid-template-columns:1fr}.rule-main{align-items:stretch;flex-direction:column}.rule-controls{justify-content:flex-end}.action-config,.form-actions{flex-direction:column}}.bandwidth-scheduler{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.scheduler-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.status-banner.inactive{background:#9e9e9e0d;border-color:#9e9e9e4d}.toggle-switch.small{height:24px;width:44px}.toggle-switch.small .toggle-slider:before{height:18px;width:18px}.toggle-switch.small input:checked+.toggle-slider:before{transform:translateX(20px)}.usage-overview{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.usage-overview h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.usage-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.usage-card{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;gap:12px;padding:15px}.usage-icon{font-size:28px}.usage-details{display:flex;flex:1 1;flex-direction:column;gap:5px}.usage-label{color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:600;text-transform:uppercase}.usage-value{color:#333;color:var(--text-primary,#333);font-size:18px;font-weight:700}.usage-bar{background:#0000001a;border-radius:3px;height:6px;overflow:hidden}.usage-fill{border-radius:3px;height:100%;transition:width .5s ease}.usage-fill.download{background:linear-gradient(90deg,#4caf50,#8bc34a)}.usage-fill.upload{background:linear-gradient(90deg,#2196f3,#03a9f4)}.profiles-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.profiles-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px}.section-description{color:#666;color:var(--text-secondary,#666);font-size:13px;margin:0 0 20px}.profiles-grid{grid-gap:12px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.profile-card{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);cursor:pointer;padding:15px;text-align:center}.profile-card.active,.profile-card:hover{border-color:#2196f3;border-color:var(--accent-color,#2196f3)}.profile-card.active{background:#2196f30d}.profile-card input[type=radio]{display:none}.profile-icon{font-size:32px;margin-bottom:8px}.profile-info h5{color:#333;color:var(--text-primary,#333);font-size:13px;margin:0 0 5px}.profile-desc{line-height:1.3;margin:0 0 10px}.profile-desc,.profile-limits{color:#666;color:var(--text-secondary,#666);font-size:11px}.profile-limits{display:flex;gap:8px;justify-content:center}.schedules-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.section-header h4{color:#333;color:var(--text-primary,#333)}.add-schedule-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .3s ease}.add-schedule-btn:hover{background:#45a049}.add-schedule-form{background:#fff;background:var(--bg-card,#fff);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:10px;margin-bottom:20px;padding:20px}.add-schedule-form h5{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.form-grid{margin-bottom:15px}.form-group label{color:#333;color:var(--text-primary,#333);font-size:12px;font-weight:500}.form-group input,.form-group select{background:#fff;background:var(--bg-card,#fff);border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:6px;color:#333;color:var(--text-primary,#333);font-size:13px;padding:10px}.form-group input:focus,.form-group select:focus{border-color:#2196f3;border-color:var(--accent-color,#2196f3);outline:none}.day-selector{display:flex;flex-wrap:wrap;gap:10px}.day-checkbox{align-items:center;color:#666;color:var(--text-secondary,#666);display:flex;font-size:12px;gap:5px}.day-checkbox,.day-checkbox input{cursor:pointer}.form-actions{gap:12px;margin-top:20px}.save-btn{background:#4caf50;background:var(--accent-color,#4caf50);border:none;border-radius:6px;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:10px;transition:all .3s ease}.save-btn:hover{background:#45a049}.cancel-btn{background:#0000;border:2px solid #ddd;border:2px solid var(--border-color,#ddd);border-radius:6px;color:#666;color:var(--text-secondary,#666);cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:10px;transition:all .3s ease}.cancel-btn:hover{background:#0000000d}.schedules-list{display:flex;flex-direction:column;gap:12px}.schedule-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px}.schedule-card.disabled{opacity:.5}.schedule-main{align-items:center;display:flex;gap:15px;padding:15px}.schedule-icon{font-size:32px}.schedule-info{flex:1 1}.schedule-info h5{color:#333;color:var(--text-primary,#333);font-size:14px;margin:0 0 8px}.schedule-details{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:8px}.detail-item{color:#666;color:var(--text-secondary,#666);font-size:11px}.detail-item strong{color:#333;color:var(--text-primary,#333)}.schedule-limits{color:#666;color:var(--text-secondary,#666);display:flex;font-size:11px;gap:10px}.schedule-controls{align-items:center;display:flex;gap:10px}.delete-btn{border:none;cursor:pointer;font-size:18px;opacity:.6;transition:all .3s ease}.delete-btn:hover{opacity:1;transform:scale(1.1)}.app-limits-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.app-limits-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 10px}.app-limits-list{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:20px}.app-limit-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px}.app-limit-card.disabled{opacity:.5}.app-main{align-items:center;display:flex;gap:12px;padding:15px}.app-icon{font-size:28px}.app-info{flex:1 1}.app-info h5{color:#333;color:var(--text-primary,#333);font-size:13px;margin:0 0 8px}.app-limits{display:flex;gap:8px}.limit-badge{border-radius:8px;font-size:10px;font-weight:600;padding:4px 8px}.limit-badge.download{background:#4caf501a;color:#4caf50}.limit-badge.upload{background:#2196f31a;color:#2196f3}.scheduler-info{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.scheduler-info h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.info-grid{grid-gap:15px;gap:15px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.info-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;padding:15px;text-align:center}.info-icon{display:block;margin-bottom:10px}.info-card h5{color:#333;color:var(--text-primary,#333);font-size:13px;margin:0 0 8px}.info-card p{color:#666;color:var(--text-secondary,#666);font-size:11px}@media (max-width:768px){.bandwidth-scheduler{padding:20px}.usage-grid{grid-template-columns:1fr 1fr}.profiles-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.form-grid{grid-template-columns:1fr}.schedule-main{align-items:flex-start;flex-direction:column}.schedule-controls{align-self:flex-end}.app-limits-list,.info-grid{grid-template-columns:1fr}}.network-monitor{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:15px;box-shadow:0 8px 25px #00000026;box-shadow:var(--shadow,0 8px 25px #00000026);margin:0 auto;max-width:1200px;padding:25px}.monitor-header h3{color:#333;color:var(--text-primary,#333);font-size:1.6rem;margin:0 0 30px}.status-banner{border:2px solid;justify-content:space-between;margin-bottom:30px}.status-banner.active{background:#4caf500d;border-color:#4caf504d}.status-banner.paused{background:#9e9e9e0d;border-color:#9e9e9e4d}.banner-icon{font-size:48px}.banner-content h4{color:#333;color:var(--text-primary,#333);margin:0 0 8px}.banner-content p{color:#666;color:var(--text-secondary,#666)}.toggle-switch{height:30px;width:56px}.toggle-switch input{display:none}.toggle-slider{background:#ccc;border-radius:15px;transition:all .3s ease}.toggle-slider:before{bottom:3px;left:3px;transition:all .3s ease}.toggle-switch input:checked+.toggle-slider{background:#4caf50;background:var(--accent-color,#4caf50)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(26px)}.health-score-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.health-score-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.health-display{gap:30px}.health-circle,.health-display{align-items:center;display:flex}.health-circle{flex-direction:column;gap:10px}.health-circle svg{height:120px;width:120px}.health-label{font-size:16px}.health-metrics{grid-gap:15px;display:grid;flex:1 1;gap:15px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.metric-item{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;gap:10px;padding:12px}.metric-icon{font-size:24px}.metric-details{display:flex;flex-direction:column;gap:3px}.metric-label{color:#666;color:var(--text-secondary,#666)}.metric-value{color:#333;color:var(--text-primary,#333);font-size:16px}.isp-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.isp-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.isp-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.isp-card{align-items:center;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;gap:12px;padding:12px}.isp-icon{font-size:24px}.isp-details{display:flex;flex-direction:column;gap:3px}.isp-label{color:#666;color:var(--text-secondary,#666);font-size:10px;font-weight:600;text-transform:uppercase}.isp-value{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:600}.alerts-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.alerts-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.alerts-list{display:flex;flex-direction:column;gap:10px}.alert-card{align-items:center;background:#fff;background:var(--bg-card,#fff);border-left:4px solid;border-radius:10px;display:flex;gap:12px;padding:12px}.alert-card.high{background:#f443360d;border-left-color:#f44336}.alert-card.medium{background:#ff98000d;border-left-color:#ff9800}.alert-card.low{background:#2196f30d;border-left-color:#2196f3}.alert-icon{font-size:20px}.alert-content{display:flex;flex:1 1;flex-direction:column;gap:3px}.alert-message{color:#333;color:var(--text-primary,#333);font-size:13px;font-weight:500}.alert-time{font-size:11px}.alert-time,.dismiss-btn{color:#666;color:var(--text-secondary,#666)}.dismiss-btn{background:#0000;border:none;cursor:pointer;font-size:16px;opacity:.6;transition:all .3s ease}.dismiss-btn:hover{opacity:1}.metrics-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.metrics-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 20px}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.metric-card{background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;gap:15px}.metric-big-icon{font-size:36px}.metric-info{display:flex;flex-direction:column;gap:5px}.metric-big-value{color:#333;color:var(--text-primary,#333);font-size:20px;font-weight:700}.metric-big-label{color:#666;color:var(--text-secondary,#666);font-size:11px;font-weight:600;text-transform:uppercase}.history-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;margin-bottom:30px;padding:20px}.history-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.chart-legend{display:flex;font-size:12px;gap:20px;margin-bottom:15px}.legend-item{font-weight:600}.legend-item.latency{color:#ff9800}.legend-item.bandwidth{color:#4caf50}.chart-container{align-items:flex-end;background:#fff;background:var(--bg-card,#fff);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:10px;display:flex;gap:10px;height:200px;padding:20px}.chart-bar-group{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:8px}.chart-bars{align-items:flex-end;display:flex;gap:4px;height:150px}.chart-bar{border-radius:4px 4px 0 0;transition:all .3s ease;width:12px}.chart-bar.latency{background:linear-gradient(180deg,#ff9800,#ffb74d)}.chart-bar.bandwidth{background:linear-gradient(180deg,#4caf50,#8bc34a)}.chart-label{color:#666;color:var(--text-secondary,#666);font-size:10px}.actions-section{background:#fafafa;background:var(--bg-card,#fafafa);border:1px solid #eee;border:1px solid var(--border-color,#eee);border-radius:12px;padding:20px}.actions-section h4{color:#333;color:var(--text-primary,#333);margin:0 0 15px}.actions-grid{grid-gap:12px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.action-btn{background:#fff;background:var(--bg-card,#fff);border:2px solid #eee;border:2px solid var(--border-color,#eee);color:#333;color:var(--text-primary,#333);font-weight:500;padding:12px}.action-btn:hover{background:#2196f30d;border-color:#2196f3;border-color:var(--accent-color,#2196f3)}@media (max-width:768px){.network-monitor{padding:20px}.health-display{flex-direction:column}.health-metrics{grid-template-columns:1fr 1fr}.isp-grid{grid-template-columns:1fr}.metrics-grid{grid-template-columns:1fr 1fr}.chart-container{height:150px}.chart-bars{height:100px}.actions-grid{grid-template-columns:1fr}}.vpn-chaining{margin:0 auto;max-width:1400px;padding:20px}.chaining-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin-bottom:20px}.status-banner{align-items:center;background:var(--bg-card);border:2px solid #0000;border-radius:12px;display:flex;gap:20px;margin-bottom:20px;padding:20px;transition:all .3s ease}.status-banner.active{background:linear-gradient(135deg,#10b9811a,#10b9810d);border-color:#10b981;border-color:var(--success-color,#10b981)}.status-banner.inactive{border-color:#2d3748;border-color:var(--border-color,#2d3748)}.banner-icon{font-size:40px;line-height:1}.banner-content{flex:1 1}.banner-content h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 5px}.banner-content p{color:var(--text-secondary);font-size:14px;margin:0}.toggle-switch{cursor:pointer}.toggle-switch input:disabled+.toggle-slider{cursor:not-allowed;opacity:.5}.warning-banner{align-items:center;background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:8px;color:#fbbf24;display:flex;font-size:14px;gap:8px;margin-bottom:20px;padding:12px 16px}.presets-section{margin-bottom:30px}.presets-section h4{color:var(--text-primary);font-size:18px;font-weight:600;margin-bottom:15px}.presets-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.preset-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:16px;transition:all .3s ease}.preset-card:hover{border-color:var(--accent-color);box-shadow:0 4px 12px #0000004d;transform:translateY(-2px)}.preset-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.preset-name{color:var(--text-primary);font-size:16px;font-weight:600}.preset-hops{background:var(--accent-color);border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 10px}.preset-description{color:var(--text-secondary);font-size:13px;margin:8px 0}.preset-servers{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.preset-server{background:#6366f11a;border-radius:6px;color:var(--accent-color);font-size:12px;font-weight:500;padding:4px 10px}.apply-preset-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px;transition:all .3s ease;width:100%}.apply-preset-btn:hover{background:var(--accent-hover);transform:scale(1.02)}.chain-section{margin-bottom:30px}.section-header{flex-wrap:wrap;gap:10px}.chain-info{display:flex;flex-wrap:wrap;gap:20px}.info-item{color:var(--text-secondary);font-size:14px}.info-item strong{color:var(--text-primary);font-weight:600}.chain-flow{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:15px;overflow-x:auto;padding:30px 20px}.chain-end,.chain-start{align-items:center;background:#6366f11a;border-radius:12px;display:flex;flex-direction:column;gap:8px;min-width:100px;padding:15px}.chain-icon{font-size:32px}.chain-label{color:var(--text-primary);font-size:13px;font-weight:600;text-align:center}.chain-arrow{color:var(--accent-color);font-size:24px;font-weight:700}.chain-arrow,.chain-server{flex-shrink:0}.server-card{background:var(--bg-secondary);border:2px solid var(--accent-color);border-radius:12px;min-width:180px;padding:12px}.server-header{align-items:center;display:flex;gap:10px;margin-bottom:10px}.server-info{display:flex;flex:1 1;flex-direction:column;gap:2px}.server-latency{color:var(--text-secondary);font-size:12px}.server-position{background:var(--accent-color);border-radius:6px;color:#fff;font-size:11px;font-weight:700;padding:4px 8px}.server-controls{display:flex;gap:6px;justify-content:center}.move-btn,.remove-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:14px;font-weight:600;padding:6px 10px;transition:all .2s ease}.move-btn:hover:not(:disabled){background:var(--accent-color);border-color:var(--accent-color);color:#fff}.remove-btn{border-color:#ef44444d;color:#ef4444}.remove-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}.move-btn:disabled{cursor:not-allowed;opacity:.3}.routing-section{margin-bottom:30px}.routing-section h4{color:var(--text-primary);font-size:18px;font-weight:600;margin-bottom:15px}.routing-options{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.routing-option{background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;display:block;padding:16px;transition:all .3s ease}.routing-option:hover{border-color:var(--accent-color);transform:translateY(-2px)}.routing-option.selected{background:linear-gradient(135deg,#6366f11a,#6366f10d);border-color:var(--accent-color)}.routing-option input[type=radio]{display:none}.routing-content{align-items:flex-start;display:flex;gap:12px}.routing-icon{font-size:28px;line-height:1}.routing-content h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 4px}.routing-content p{color:var(--text-secondary);font-size:13px;margin:0}.available-section{margin-bottom:30px}.available-section h4{color:var(--text-primary);font-size:18px;font-weight:600;margin-bottom:15px}.servers-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.available-server{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;display:flex;gap:12px;padding:14px;transition:all .3s ease}.available-server:hover{border-color:var(--accent-color);box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.server-flag-large{font-size:32px}.server-name-large{color:var(--text-primary);font-size:14px;font-weight:600}.server-latency-small{color:var(--text-secondary);font-size:12px}.add-server-btn{align-items:center;background:var(--accent-color);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;font-weight:300;height:32px;justify-content:center;transition:all .3s ease;width:32px}.add-server-btn:hover{background:var(--accent-hover);transform:scale(1.1)}.chaining-info{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;margin-top:40px;padding:20px}.chaining-info h4{color:var(--text-primary);font-size:18px;font-weight:600;margin-bottom:20px}.info-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.info-card{display:flex;flex-direction:column;gap:8px}.info-icon{font-size:32px;margin-bottom:4px}.info-card h5{color:var(--text-primary);font-size:15px;font-weight:600;margin:0}.info-card p{color:var(--text-secondary);font-size:13px;line-height:1.5;margin:0}@media (max-width:768px){.vpn-chaining{padding:15px}.chain-flow{align-items:stretch;flex-direction:column}.chain-arrow{align-self:center;transform:rotate(90deg)}.server-card{min-width:0;min-width:auto}.info-grid,.presets-grid,.routing-options,.servers-grid{grid-template-columns:1fr}.section-header{align-items:flex-start;flex-direction:column}.chain-info{flex-direction:column;gap:10px}}.privacy-audit{margin:0 auto;max-width:1400px;padding:20px}.audit-header{flex-wrap:wrap;gap:15px;margin-bottom:25px}.audit-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.scan-btn{align-items:center;background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:12px 24px;transition:all .3s ease}.scan-btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 12px #6366f14d;transform:translateY(-2px)}.scan-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.score-section{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:30px}.score-card{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;display:flex;flex-direction:column;gap:20px;padding:30px}.score-visual svg{filter:drop-shadow(0 0 10px rgba(99,102,241,.3))}.score-info{text-align:center;width:100%}.score-info h4{font-size:24px;font-weight:700;margin:0 0 8px}.last-scan{color:var(--text-secondary);font-size:13px;margin:0 0 15px}.scan-progress{display:flex;flex-direction:column;gap:8px;width:100%}.progress-bar{background:var(--border-color);width:100%}.progress-fill{background:linear-gradient(90deg,var(--accent-color),#10b981);transition:width .3s ease}.progress-text{color:var(--text-primary);font-weight:600;text-align:center}.threat-overview{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:30px}.threat-overview h5{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.threat-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.threat-item{align-items:center;background:var(--bg-secondary);border-radius:8px;display:flex;justify-content:space-between;padding:12px}.threat-label{color:var(--text-primary);font-size:14px;font-weight:500}.threat-badge{border-radius:12px;font-size:12px;font-weight:600;padding:4px 12px;text-transform:uppercase}.threat-badge.threat-low{background:#10b98133;color:#10b981}.threat-badge.threat-medium{background:#f59e0b33;color:#f59e0b}.threat-badge.threat-high{background:#ef444433;color:#ef4444}.tests-section{margin-bottom:30px}.tests-section h4{color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:15px}.tests-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.test-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px;transition:all .3s ease}.test-card:hover{box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.test-header{align-items:flex-start;display:flex;gap:12px;margin-bottom:12px}.test-icon{font-size:28px;line-height:1}.test-info{display:flex;flex:1 1;flex-direction:column;gap:6px}.test-info h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.risk-badge{font-size:12px;font-weight:600;text-transform:uppercase}.test-detail{color:var(--text-secondary);font-size:13px;line-height:1.5;margin:0}.fingerprint-section{margin-bottom:30px}.fingerprint-section h4{color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:15px}.fingerprint-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.fingerprint-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px;transition:all .3s ease}.fingerprint-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.fp-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.fp-header h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0;text-transform:capitalize}.fp-score{font-size:18px;font-weight:700}.fp-bar{background:var(--border-color);height:8px;margin-bottom:12px;overflow:hidden;width:100%}.fp-bar,.fp-fill{border-radius:4px}.fp-fill{height:100%;transition:width .5s ease}.fp-uniqueness{color:var(--text-secondary);font-size:13px;margin:0 0 8px}.fp-uniqueness strong{color:var(--text-primary);font-weight:600}.fp-details{color:var(--text-secondary);font-size:12px;line-height:1.5;margin:0}.recommendations-section{margin-bottom:30px}.recommendations-section h4{color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:15px}.recommendations-list{display:flex;flex-direction:column;gap:12px}.recommendation-card{align-items:center;background:var(--bg-card);border:2px solid #0000;display:flex;gap:16px;transition:all .3s ease}.recommendation-card:hover{transform:translateX(4px)}.recommendation-card.priority-high{border-color:#ef44444d}.recommendation-card.priority-medium{border-color:#f59e0b4d}.recommendation-card.priority-low{border-color:#10b9814d}.recommendation-card.completed{background:var(--bg-secondary);opacity:.6}.rec-icon{flex-shrink:0;font-size:32px;line-height:1}.rec-content{flex:1 1}.rec-content h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 6px}.rec-content p{margin:0}.rec-action-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:10px 20px;transition:all .3s ease;white-space:nowrap}.rec-action-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.recommendation-card.completed .rec-action-btn{background:#10b981;background:var(--success-color,#10b981)}.tips-section{margin-top:40px}.tips-section h4{color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:20px}.tips-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.tip-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;gap:10px;padding:20px;transition:all .3s ease}.tip-card:hover{border-color:var(--accent-color);box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.tip-icon{font-size:32px;line-height:1}.tip-card h5{color:var(--text-primary);font-size:15px;font-weight:600;margin:0}.tip-card p{color:var(--text-secondary);font-size:13px;line-height:1.5;margin:0}@media (max-width:1024px){.score-section,.threat-grid{grid-template-columns:1fr}}@media (max-width:768px){.privacy-audit{padding:15px}.audit-header{align-items:stretch;flex-direction:column}.scan-btn{justify-content:center;width:100%}.score-visual svg{height:160px;width:160px}.fingerprint-grid,.tests-grid,.tips-grid{grid-template-columns:1fr}.recommendation-card{flex-direction:column;text-align:center}.rec-action-btn{width:100%}}.live-dashboard{margin:0 auto;max-width:1600px;padding:20px}.dashboard-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.header-left h2{color:var(--text-primary);font-size:28px;font-weight:700;margin:0 0 5px}.current-time{color:var(--text-secondary);font-size:14px;margin:0}.header-controls{align-items:center;display:flex;gap:15px}.layout-selector{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;display:flex;gap:8px;padding:6px}.layout-btn{align-items:center;background:#0000;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:20px;height:40px;justify-content:center;transition:all .3s ease;width:40px}.layout-btn.active,.layout-btn:hover{background:var(--accent-color);color:#fff}.widget-controls{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px;padding:15px}.controls-label{color:var(--text-primary);font-size:14px;font-weight:600}.widget-toggle{align-items:center;cursor:pointer;display:flex;gap:6px}.toggle-label,.widget-toggle input[type=checkbox]{cursor:pointer}.toggle-label{color:var(--text-secondary);font-size:13px;-webkit-user-select:none;user-select:none}.dashboard-grid{grid-gap:20px;display:grid;gap:20px;margin-bottom:20px}.dashboard-grid.layout-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.dashboard-grid.layout-compact{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.dashboard-grid.layout-focused .widget-status{grid-column:1/-1}.widget{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:20px;transition:all .3s ease}.widget:hover{box-shadow:0 8px 20px #00000026;transform:translateY(-2px)}.widget-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.widget-header h3{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.status-badge{border-radius:20px;padding:6px 12px}.status-badge.connected{background:#10b98133}.status-badge.disconnected{background:#ef444433;color:#ef4444}.widget-content{color:var(--text-primary)}.widget-status{min-height:220px}.status-main{gap:20px;margin-bottom:20px}.status-icon,.status-main{align-items:center;display:flex}.status-icon{border-radius:50%;flex-shrink:0;font-size:40px;font-weight:700;height:80px;justify-content:center;width:80px}.connected-icon{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.disconnected-icon{background:var(--border-color);color:var(--text-secondary);font-size:50px}.status-details h4{color:var(--text-primary);font-size:20px;font-weight:600;margin:0 0 5px}.status-details p{color:var(--text-secondary);font-size:14px;margin:0}.hop-chain-mini{color:var(--text-secondary);font-size:13px;margin-top:5px}.status-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.stat-item{background:var(--bg-secondary);border-radius:10px;display:flex;flex-direction:column;gap:5px;padding:12px}.stat-label{font-weight:500}.stat-value{font-size:18px}.status-disconnected{align-items:center;display:flex;flex-direction:column;gap:15px;padding:20px;text-align:center}.status-disconnected p{color:var(--text-secondary);margin:0}.quick-connect-btn{background:var(--accent-color);border:none;border-radius:25px;color:#fff;cursor:pointer;font-weight:600;padding:12px 30px;transition:all .3s ease}.quick-connect-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.widget-quickconnect .widget-content{display:flex;flex-direction:column;gap:10px}.quick-option{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;display:flex;gap:12px;padding:14px;text-align:left;transition:all .3s ease;width:100%}.quick-option:hover{border-color:var(--accent-color);transform:translateX(5px)}.option-icon{flex-shrink:0}.option-details{flex:1 1;gap:3px}.option-title{color:var(--text-primary)}.option-subtitle{color:var(--text-secondary);font-size:12px}.data-circle{display:flex;justify-content:center;margin-bottom:15px}.data-breakdown{display:flex;flex-direction:column;gap:10px}.breakdown-item{align-items:center;background:var(--bg-secondary);border-radius:8px;display:flex;gap:10px;padding:10px}.breakdown-icon{font-size:20px}.breakdown-label{color:var(--text-secondary);flex:1 1;font-size:13px}.breakdown-value{color:var(--text-primary);font-size:14px;font-weight:600}.speed-gauges{display:flex;gap:20px;justify-content:space-around}.speed-gauge{align-items:center;background:var(--bg-secondary);border-radius:12px;display:flex;flex:1 1;flex-direction:column;gap:5px;padding:15px}.gauge-value{color:var(--text-primary);font-size:28px;font-weight:700}.gauge-unit{color:var(--text-secondary);font-size:12px;font-weight:500}.gauge-label{color:var(--text-primary);font-size:13px;margin-top:5px}.widget-health .widget-content{align-items:center;display:flex;flex-direction:column;gap:15px}.health-score{display:flex;justify-content:center}.health-status{text-align:center}.health-label{font-size:18px;font-weight:700}.health-description{color:var(--text-secondary);font-size:13px;margin:5px 0 0}.recent-list{display:flex;flex-direction:column;gap:8px}.recent-item{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;display:flex;gap:12px;padding:12px;text-align:left;transition:all .3s ease;width:100%}.recent-item:hover{border-color:var(--accent-color);transform:translateX(5px)}.recent-flag{font-size:24px}.recent-details{display:flex;flex:1 1;flex-direction:column;gap:3px}.recent-name{color:var(--text-primary);font-size:14px;font-weight:600}.recent-time{font-size:12px}.recent-arrow,.recent-time{color:var(--text-secondary)}.recent-arrow{font-size:18px}.stats-bar{grid-gap:15px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:20px}.stat-card{background:var(--bg-secondary);border-radius:10px}.stat-icon{font-size:28px}.stat-info{gap:4px}.stat-card .stat-label{color:var(--text-secondary);font-size:12px}.stat-card .stat-value{color:var(--text-primary);font-size:18px;font-weight:700}@media (max-width:1200px){.dashboard-grid.layout-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (max-width:768px){.live-dashboard{padding:15px}.dashboard-header{align-items:flex-start;flex-direction:column}.dashboard-grid.layout-compact,.dashboard-grid.layout-focused,.dashboard-grid.layout-grid{grid-template-columns:1fr}.widget-controls{align-items:flex-start;flex-direction:column}.status-main{text-align:center}.speed-gauges,.status-main{flex-direction:column}.stats-bar{grid-template-columns:1fr}}.customization-center{margin:0 auto;max-width:1200px;padding:20px}.customization-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.customization-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.reset-btn,.save-btn{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s ease}.save-btn{background:var(--accent-color);color:#fff}.save-btn:hover{box-shadow:0 4px 12px #6366f14d;transform:translateY(-2px)}.reset-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary)}.reset-btn:hover{background:var(--bg-secondary)}.customization-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.customization-section h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.themes-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.theme-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:15px;transition:all .3s ease}.theme-card:hover{border-color:var(--accent-color);transform:translateY(-3px)}.theme-card.active{background:linear-gradient(135deg,#6366f11a,#6366f10d);border-color:var(--accent-color)}.theme-preview{border-radius:8px;height:80px;overflow:hidden;position:relative}.preview-color{height:70%;width:100%}.preview-accent{height:30%;width:100%}.theme-name{color:var(--text-primary);font-size:14px}.active-badge,.theme-name{font-weight:600;text-align:center}.active-badge{background:var(--accent-color);border-radius:12px;color:#fff;font-size:11px;padding:4px 10px}.color-pickers{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.color-picker-item{display:flex;flex-direction:column;gap:10px}.color-picker-item label{color:var(--text-primary);font-size:14px;font-weight:600}.picker-wrapper{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;gap:12px;padding:10px}.picker-wrapper input[type=color]{border:none;border-radius:8px;cursor:pointer;height:50px;width:50px}.color-value{color:var(--text-primary);font-family:monospace;font-size:14px;font-weight:600}.option-buttons{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.option-btn{align-items:center;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;font-weight:600;gap:10px;padding:20px;transition:all .3s ease}.option-btn:hover{border-color:var(--accent-color);transform:translateY(-2px)}.option-btn.active{background:linear-gradient(135deg,#6366f11a,#6366f10d);border-color:var(--accent-color)}.option-icon{font-size:24px}.option-details{display:flex;flex-direction:column;gap:4px;text-align:center}.option-title{font-size:14px;font-weight:600}.option-desc{color:var(--text-secondary);font-size:12px;font-weight:400}.toggle-options{display:flex;flex-direction:column;gap:15px}.toggle-option{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;padding:15px;transition:all .3s ease}.toggle-option:hover{border-color:var(--accent-color)}.toggle-content{align-items:center;display:flex;flex:1 1;gap:12px}.toggle-icon{font-size:24px}.toggle-info{display:flex;flex-direction:column;gap:4px}.toggle-title{color:var(--text-primary);font-size:14px;font-weight:600}.toggle-desc{color:var(--text-secondary);font-size:12px}.toggle-switch{flex-shrink:0;height:32px;position:relative;width:60px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background:var(--border-color);border-radius:32px;transition:.3s}.toggle-slider:before{bottom:4px;height:24px;left:4px;transition:.3s;width:24px}.toggle-switch input:checked+.toggle-slider{background:var(--accent-color)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(28px)}.preview-panel{background:var(--bg-secondary)}.preview-card,.preview-panel{border:1px solid var(--border-color);border-radius:12px;padding:20px}.preview-card{background:var(--bg-card)}.preview-card h5{color:var(--text-primary);font-size:18px;margin:0 0 10px}.preview-card p{color:var(--text-secondary);line-height:1.6;margin:0 0 15px}.preview-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .3s ease}.preview-btn:hover{transform:scale(1.05)}@media (max-width:768px){.customization-center{padding:15px}.themes-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.color-pickers,.option-buttons{grid-template-columns:1fr}.toggle-option{flex-direction:column;gap:15px}}.quick-actions{margin:0 auto;max-width:1200px;padding:20px}.actions-header{margin-bottom:30px}.actions-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0 0 8px}.actions-subtitle{color:var(--text-secondary);font-size:14px;margin:0}.all-actions-section,.favorites-section,.shortcuts-info{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.all-actions-section h4,.favorites-section h4,.shortcuts-info h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.actions-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.action-tile{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;gap:12px;padding:20px;text-align:left;transition:all .3s ease}.action-tile:hover{border-color:var(--accent-color);box-shadow:0 8px 20px #0003;transform:translateY(-4px)}.action-tile.favorite{border-color:#ffc10780}.tile-header{align-items:flex-start;display:flex;justify-content:space-between}.tile-icon{font-size:36px}.unfavorite-btn{background:none;border:none;color:#ffc107;cursor:pointer;font-size:20px;padding:0;transition:transform .2s ease}.unfavorite-btn:hover{transform:scale(1.2)}.tile-content{display:flex;flex-direction:column;gap:6px}.tile-name{color:var(--text-primary);font-size:16px;font-weight:700}.tile-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}.tile-shortcut{color:var(--accent-color);font-family:monospace;font-size:11px;font-weight:600;margin-top:4px}.actions-list{gap:10px}.action-row{gap:10px}.action-button,.action-row{align-items:center;display:flex}.action-button{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);cursor:pointer;flex:1 1;gap:15px;padding:15px;text-align:left;transition:all .3s ease}.action-button:hover{border-color:var(--accent-color);transform:translateX(5px)}.action-icon{flex-shrink:0;font-size:28px}.action-details{display:flex;flex:1 1;flex-direction:column;gap:4px}.action-name{font-size:15px;font-weight:600}.action-desc{color:var(--text-secondary);font-size:12px}.action-shortcut{background:#6366f11a;border-radius:6px;color:var(--accent-color);flex-shrink:0;font-family:monospace;font-size:12px;font-weight:600;padding:4px 8px}.favorite-toggle{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-size:20px;height:40px;transition:all .3s ease;width:40px}.favorite-toggle:hover{border-color:#ffc107;color:#ffc107;transform:scale(1.1)}.favorite-toggle.active{background:#ffc1071a;border-color:#ffc107;color:#ffc107}.shortcuts-desc{color:var(--text-secondary);line-height:1.6;margin:0 0 20px}.shortcuts-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.shortcut-tip{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;display:flex;gap:12px;padding:15px}.tip-icon{flex-shrink:0;font-size:24px}.shortcut-tip span:last-child{color:var(--text-primary);font-size:14px}@media (max-width:768px){.quick-actions{padding:15px}.actions-grid{grid-template-columns:1fr}.action-button{align-items:flex-start;flex-direction:column;gap:10px}.action-shortcut{align-self:flex-start}.shortcuts-grid{grid-template-columns:1fr}}.notification-center{margin:0 auto;max-width:1000px;padding:20px}.notification-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:20px}.header-left{align-items:center;display:flex;gap:12px}.notification-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.unread-badge{background:#ef4444;border-radius:20px;color:#fff;font-size:12px;font-weight:600;padding:4px 12px}.header-actions{flex-wrap:wrap}.header-btn{padding:8px 16px}.header-btn.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.settings-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;margin-bottom:20px;padding:20px}.settings-panel h4{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 15px}.settings-grid{grid-gap:12px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.setting-item{gap:8px;padding:10px}.setting-item span{color:var(--text-primary);font-size:14px}.filter-tabs{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:10px}.filter-tab{background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .3s ease}.filter-tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.filter-tab.active{background:var(--accent-color);color:#fff}.notifications-list{display:flex;flex-direction:column;gap:12px}.notification-card{background:var(--bg-card);border:1px solid var(--border-color);border-left:4px solid;border-radius:12px;display:flex;gap:15px;padding:16px;transition:all .3s ease}.notification-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateX(5px)}.notification-card.unread{background:#6366f10d;border-color:var(--accent-color)}.notification-card.read{opacity:.7}.notif-icon{flex-shrink:0;font-size:32px}.notif-content{display:flex;flex:1 1;flex-direction:column;gap:8px}.notif-header{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.notif-header h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.notif-time{font-size:12px;white-space:nowrap}.notif-message,.notif-time{color:var(--text-secondary)}.notif-message{font-size:14px;line-height:1.5;margin:0}.notif-actions{display:flex;gap:10px;margin-top:4px}.notif-action-btn{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.notif-action-btn:hover{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.notif-action-btn.delete{border-color:#ef44444d;color:#ef4444}.notif-action-btn.delete:hover{background:#ef4444;border-color:#ef4444;color:#fff}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.empty-icon{font-size:64px;margin-bottom:20px;opacity:.5}.empty-state h4{color:var(--text-primary);font-size:20px;margin:0 0 8px}.empty-state p{color:var(--text-secondary);font-size:14px;margin:0}@media (max-width:768px){.notification-center{padding:15px}.notification-header{align-items:flex-start;flex-direction:column}.header-actions{justify-content:space-between;width:100%}.filter-tabs{justify-content:center}.settings-grid{grid-template-columns:1fr}.notif-header,.notification-card{flex-direction:column}.notif-header{align-items:flex-start}}.session-manager{margin:0 auto;max-width:1400px;padding:20px}.manager-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:30px}.manager-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.header-actions{display:flex;gap:10px}.header-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:600;padding:10px 20px;transition:all .3s ease}.header-btn:hover{background:var(--bg-secondary);border-color:var(--accent-color)}.header-btn.create{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.header-btn.create:hover{opacity:.9;transform:translateY(-2px)}.auto-switch-section,.create-profile-form,.quick-profiles-section,.saved-profiles-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.auto-switch-section h4,.create-profile-form h4,.quick-profiles-section h4,.saved-profiles-section h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.quick-profiles-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.quick-profile-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:15px;text-align:left;transition:all .3s ease}.quick-profile-card:hover{border-color:var(--accent-color);transform:translateY(-3px)}.quick-profile-name{font-size:14px;font-weight:600}.quick-profile-desc{color:var(--text-secondary);font-size:12px}.form-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group.full-width{grid-column:1/-1}.form-group label{color:var(--text-primary);font-size:14px;font-weight:600}.form-input,.form-select{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:14px;padding:10px}.form-input:focus,.form-select:focus{border-color:var(--accent-color);outline:none}.checkbox-label{align-items:center;cursor:pointer;display:flex;font-weight:400!important;gap:8px}.checkbox-label input[type=checkbox]{cursor:pointer}.form-actions{display:flex;gap:10px}.cancel-btn,.create-btn{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .3s ease}.create-btn{background:var(--accent-color);color:#fff}.create-btn:hover{box-shadow:0 4px 12px #6366f14d;transform:translateY(-2px)}.cancel-btn{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.cancel-btn:hover{background:var(--border-color)}.profiles-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.profile-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:15px;padding:20px;transition:all .3s ease}.profile-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.profile-icon-large{flex-shrink:0;font-size:48px}.profile-info{display:flex;flex:1 1;flex-direction:column;gap:8px}.profile-info h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.profile-desc{color:var(--text-secondary);font-size:13px;line-height:1.4;margin:0}.profile-details{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.detail-item{color:var(--text-primary);font-size:13px;gap:5px}.detail-icon{font-size:14px}.detail-badge{background:#6366f11a;border-radius:6px;color:var(--accent-color);font-size:11px;font-weight:600;padding:4px 8px}.profile-apps{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.apps-label{color:var(--text-secondary);font-size:12px;font-weight:600}.app-tag{background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:11px;padding:3px 8px}.profile-last-used{color:var(--text-secondary);font-size:12px;margin:4px 0 0}.profile-actions{display:flex;flex-direction:column;flex-shrink:0;gap:8px}.delete-btn,.load-btn{border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .3s ease}.load-btn{background:var(--accent-color);color:#fff}.load-btn:hover{transform:scale(1.05)}.delete-btn{background:#0000;border:1px solid #ef44444d;color:#ef4444}.delete-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}.section-desc{color:var(--text-secondary);line-height:1.6;margin:0 0 20px}.rules-preview{display:flex;flex-direction:column;gap:12px}.rule-item{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;display:flex;gap:12px;padding:15px}.rule-icon{flex-shrink:0;font-size:24px}.rule-item span:last-child{color:var(--text-primary);font-size:14px}@media (max-width:768px){.session-manager{padding:15px}.manager-header{align-items:flex-start;flex-direction:column}.header-actions{justify-content:space-between;width:100%}.profiles-grid,.quick-profiles-grid{grid-template-columns:1fr}.profile-card{flex-direction:column}.profile-actions{flex-direction:row}.form-grid{grid-template-columns:1fr}}.network-topology{margin:0 auto;max-width:1600px;padding:20px}.topology-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.topology-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.topology-controls{align-items:center;display:flex;flex-wrap:wrap;gap:20px}.view-selector{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:8px;padding:6px}.view-btn{background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:600;padding:10px 16px;transition:all .3s ease}.view-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.view-btn.active{background:var(--accent-color);color:#fff}.action-buttons{display:flex;gap:10px}.action-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:10px 20px;transition:all .3s ease}.action-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}.topology-content{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.network-view{align-items:flex-start;display:flex;gap:20px}.network-canvas{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;flex:1 1;overflow:hidden;padding:20px}.network-canvas svg{height:auto;max-height:400px;width:100%}.node-details{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px;position:relative;width:300px}.node-details h4{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 15px}.details-grid{grid-gap:12px;gap:12px;margin-bottom:15px}.detail-item{align-items:center;background:var(--bg-card);border-radius:8px;display:flex;justify-content:space-between;padding:10px}.detail-label{color:var(--text-secondary);font-size:13px;font-weight:600}.detail-value{color:var(--text-primary);font-size:14px;font-weight:600}.status-badge{border-radius:12px;font-size:11px;font-weight:600;padding:4px 12px;text-transform:uppercase}.status-badge.online{background:#10b98133;color:#10b981}.status-badge.offline{background:#ef444433;color:#ef4444}.close-details{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:16px;padding:5px;position:absolute;right:15px;top:15px}.close-details:hover{color:var(--text-primary)}.routes-view{display:flex;flex-direction:column;gap:20px}.routes-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.latency-heatmap,.route-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px}.latency-heatmap h4,.route-card h4{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 15px}.route-hops{display:flex;flex-direction:column;gap:12px}.hop-item{background:var(--bg-card);border-radius:8px;gap:15px;padding:12px}.hop-item,.hop-number{align-items:center;display:flex}.hop-number{background:var(--accent-color);border-radius:50%;color:#fff;flex-shrink:0;font-size:14px;font-weight:700;height:30px;justify-content:center;width:30px}.hop-details{display:flex;flex:1 1;flex-direction:column;gap:4px}.hop-name{color:var(--text-primary);font-size:14px;font-weight:600}.hop-latency{color:var(--text-secondary);font-size:12px}.heatmap-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.heatmap-cell{align-items:center;border-radius:8px;display:flex;flex-direction:column;gap:6px;padding:12px 8px;text-align:center;transition:all .3s ease}.heatmap-cell.low{background:#10b98133;border:1px solid #10b9814d}.heatmap-cell.medium{background:#f59e0b33;border:1px solid #f59e0b4d}.heatmap-cell.high{background:#ef444433;border:1px solid #ef44444d}.heatmap-cell:hover{transform:scale(1.05)}.cell-flag{font-size:24px}.cell-name{color:var(--text-primary);font-size:11px;font-weight:600}.cell-latency{color:var(--text-secondary);font-size:12px;font-weight:700}.traffic-view{display:flex;flex-direction:column;gap:20px}.traffic-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:2fr 1fr}.network-stats,.traffic-flow{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px}.network-stats h4,.traffic-flow h4{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 15px}.flow-list{display:flex;flex-direction:column;gap:12px}.flow-item{background:var(--bg-card);border-radius:10px;justify-content:space-between;padding:15px}.flow-item,.flow-path{align-items:center;display:flex}.flow-path{gap:10px}.flow-from,.flow-to{color:var(--text-primary);font-size:13px;font-weight:600}.flow-arrow{color:var(--accent-color);font-weight:700}.flow-metrics{align-items:center;display:flex;gap:15px}.flow-protocol{background:#6366f11a;border-radius:6px;color:var(--accent-color);font-size:11px;font-weight:600;padding:4px 10px}.flow-volume{align-items:center;display:flex;gap:10px}.volume-bar{background:var(--border-color);border-radius:4px;height:8px;overflow:hidden;width:80px}.volume-fill{background:linear-gradient(90deg,var(--accent-color),#10b981);height:100%;transition:width .5s ease}.volume-text{color:var(--text-primary);font-size:12px;font-weight:600;min-width:35px}.stats-grid{grid-gap:10px;display:grid;gap:10px}.stat-card{align-items:center;background:var(--bg-card);border-radius:8px;display:flex;gap:12px;transition:all .3s ease}.stat-card:hover{transform:translateX(5px)}.stat-card.critical{border-left:4px solid #ef4444}.stat-icon{flex-shrink:0;font-size:24px}.stat-info{display:flex;flex-direction:column;gap:2px}.stat-value{color:var(--text-primary)}.stat-label{color:var(--text-secondary);font-weight:600}.topology-legend{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px}.topology-legend h5{color:var(--text-primary);font-size:14px;font-weight:600;margin:0 0 15px}.legend-items{display:flex;flex-wrap:wrap;gap:20px}.legend-item{gap:8px}.legend-color{border:2px solid var(--border-color);border-radius:50%;height:16px;width:16px}.legend-item span{color:var(--text-primary);font-size:12px;font-weight:600}@media (max-width:1200px){.routes-grid,.traffic-grid{grid-template-columns:1fr}}@media (max-width:768px){.network-topology{padding:15px}.topology-header{align-items:flex-start;flex-direction:column}.topology-controls{justify-content:space-between;width:100%}.network-view{flex-direction:column}.node-details{width:100%}.heatmap-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.legend-items{justify-content:center}}.compliance-center{margin:0 auto;max-width:1400px;padding:20px}.compliance-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:25px}.compliance-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.generate-report-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .3s ease}.generate-report-btn:hover{box-shadow:0 4px 12px #6366f14d;transform:translateY(-2px)}.framework-selector{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:30px}.framework-card{align-items:center;background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;gap:15px;padding:20px;text-align:left;transition:all .3s ease}.framework-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.framework-card.active{background:linear-gradient(135deg,#6366f11a,#6366f10d);border-color:var(--accent-color)}.framework-icon{flex-shrink:0;font-size:48px}.framework-info{flex:1 1}.framework-info h4{font-size:18px;font-weight:600;margin:0 0 5px}.framework-info p{color:var(--text-secondary);font-size:13px;line-height:1.4;margin:0 0 10px}.compliance-score{align-items:baseline;display:flex;gap:8px}.score-value{color:var(--accent-color);font-size:24px;font-weight:700}.score-label{color:var(--text-secondary);font-size:12px}.requirements-badge{background:var(--accent-color);border-radius:20px;color:#fff;flex-shrink:0;font-size:14px;font-weight:600;padding:8px 12px}.compliance-details{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.details-grid{grid-gap:30px;display:grid;gap:30px;grid-template-columns:2fr 1fr}.metrics-panel h4,.requirements-panel h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.requirements-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}.requirement-item{align-items:flex-start;background:var(--bg-secondary);border-left:4px solid;border-radius:10px;display:flex;gap:12px;padding:15px}.requirement-item.compliant{border-left-color:#10b981}.requirement-item.non-compliant{border-left-color:#ef4444}.requirement-status{flex-shrink:0;font-size:20px}.requirement-content{display:flex;flex-direction:column;gap:4px}.requirement-title{color:var(--text-primary);font-size:14px;font-weight:600}.requirement-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}.metrics-grid{grid-gap:12px;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:25px}.metric-card{align-items:center;display:flex;gap:12px;padding:15px}.metric-icon{flex-shrink:0;font-size:28px}.metric-content{display:flex;flex-direction:column;gap:2px}.metric-value{font-size:20px}.score-circle{display:flex;justify-content:center;margin-top:20px}.audit-trail{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.audit-trail h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.audit-list{display:flex;flex-direction:column;gap:12px}.audit-entry{background:var(--bg-secondary);border-radius:10px;display:flex;gap:15px;padding:15px}.audit-time{color:var(--text-secondary);flex-shrink:0;font-family:monospace;font-size:12px;min-width:150px}.audit-content{display:flex;flex:1 1;flex-direction:column;gap:6px}.audit-header{align-items:center;display:flex;justify-content:space-between}.audit-event{color:var(--text-primary);font-size:14px;font-weight:600}.audit-severity{font-size:12px;font-weight:600;text-transform:uppercase}.audit-details{color:var(--text-secondary);display:flex;font-size:12px;gap:20px}.audit-description{color:var(--text-secondary);font-size:13px;line-height:1.4}@media (max-width:1024px){.details-grid,.metrics-grid{grid-template-columns:1fr}}@media (max-width:768px){.compliance-center{padding:15px}.framework-selector{grid-template-columns:1fr}.framework-card{text-align:center}.audit-details,.audit-entry,.framework-card{flex-direction:column}.audit-details{gap:5px}}.api-integration-hub{margin:0 auto;max-width:1400px;padding:20px}.hub-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:25px}.hub-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.hub-stats{display:flex;gap:20px}.stat{color:var(--text-secondary);font-size:14px;font-weight:600}.hub-tabs{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:8px;margin-bottom:25px;padding:8px}.hub-tab{background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;font-weight:600;padding:12px 20px;transition:all .3s ease}.hub-tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.hub-tab.active{background:var(--accent-color);color:#fff}.integrations-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.integration-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;padding:20px;transition:all .3s ease}.integration-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.integration-card.connected{background:linear-gradient(135deg,#10b9811a,#10b9810d);border-color:#10b981}.integration-header{align-items:center;display:flex;gap:15px;margin-bottom:12px}.integration-icon{flex-shrink:0;font-size:32px}.integration-info{flex:1 1}.integration-info h4{color:var(--text-primary);font-size:16px;font-weight:600;margin:0 0 4px}.integration-category{background:#6366f11a;border-radius:6px;color:var(--accent-color);font-size:11px;font-weight:600;padding:4px 10px}.toggle-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;padding:8px 16px;transition:all .3s ease}.toggle-btn.connected{background:#ef4444;color:#fff}.toggle-btn.disconnected{background:var(--accent-color);color:#fff}.toggle-btn:hover{transform:scale(1.05)}.integration-description{color:var(--text-secondary);font-size:13px;line-height:1.4;margin:0 0 12px}.integration-status{align-items:center;color:#10b981;display:flex;font-size:12px;font-weight:600;gap:8px}.status-indicator{color:#10b981}.api-keys-section,.webhooks-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.section-header h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0}.add-webhook-btn,.generate-key-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .3s ease}.add-webhook-btn:hover,.generate-key-btn:hover{transform:translateY(-2px)}.webhooks-list{display:flex;flex-direction:column;gap:15px}.webhook-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:20px}.webhook-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.webhook-header h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.webhook-status{border-radius:12px;font-size:12px;font-weight:600;padding:4px 12px;text-transform:uppercase}.webhook-status.active{background:#10b98133;color:#10b981}.webhook-status.inactive{background:#ef444433;color:#ef4444}.webhook-url{background:var(--bg-card);border-radius:6px;font-family:monospace;margin-bottom:10px;padding:8px 12px}.webhook-events,.webhook-url{color:var(--text-secondary);font-size:13px}.webhook-events{align-items:center;display:flex;gap:8px;margin-bottom:15px}.event-tag{background:#6366f11a;border-radius:6px;color:var(--accent-color);font-size:11px;font-weight:600;padding:4px 8px}.webhook-actions{display:flex;gap:10px}.delete-webhook,.edit-webhook,.test-webhook{background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.test-webhook:hover{border-color:var(--accent-color);color:var(--accent-color)}.edit-webhook:hover{border-color:#f59e0b;color:#f59e0b}.delete-webhook:hover{border-color:#ef4444;color:#ef4444}.keys-table{grid-gap:15px 20px;align-items:center;display:grid;gap:15px 20px;grid-template-columns:1fr 100px 120px 120px 80px 200px}.table-header{color:var(--text-primary);display:contents;font-size:14px;font-weight:600}.table-header>span{border-bottom:2px solid var(--border-color);padding-bottom:15px}.table-row{display:contents}.table-row>span{border-bottom:1px solid var(--border-color);font-size:13px;padding:12px 0}.key-name{color:var(--text-primary);font-weight:600}.key-created,.key-service,.key-used{color:var(--text-secondary)}.key-status{font-size:11px;font-weight:600;text-transform:uppercase}.key-status.active{color:#10b981}.key-status.inactive{color:#ef4444}.key-actions{display:flex;gap:8px}.copy-key,.revoke-key,.rotate-key{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:11px;font-weight:600;padding:4px 10px;transition:all .3s ease}.copy-key:hover{border-color:var(--accent-color);color:var(--accent-color)}.rotate-key:hover{border-color:#f59e0b;color:#f59e0b}.revoke-key:hover{border-color:#ef4444;color:#ef4444}@media (max-width:768px){.api-integration-hub{padding:15px}.integrations-grid,.keys-table{grid-template-columns:1fr}.table-header{display:none}.table-row{background:var(--bg-secondary);border-radius:8px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:15px}.table-row>span{border:none;padding:0}}.advanced-analytics{margin:0 auto;max-width:1400px;padding:20px}.analytics-header{margin-bottom:25px}.analytics-header h3{color:var(--text-primary);font-weight:600}.analytics-controls{align-items:center;display:flex;gap:15px}.time-selector{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);padding:8px 16px}.export-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px}.report-selector{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:25px}.report-type{background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:15px;transition:all .3s ease}.report-type.active,.report-type:hover{border-color:var(--accent-color)}.report-type.active{background:linear-gradient(135deg,#6366f11a,#6366f10d)}.type-name{color:var(--text-primary);font-size:14px;font-weight:600}.type-desc{color:var(--text-secondary);font-size:12px}.kpi-dashboard{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.kpi-card{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);display:flex;gap:15px;padding:20px}.kpi-icon{font-size:32px}.kpi-content{display:flex;flex-direction:column;gap:4px}.kpi-value{color:var(--text-primary)}.kpi-label{color:var(--text-secondary);font-size:12px}.custom-metrics,.scheduled-reports{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:20px;padding:25px}.custom-metrics h4,.scheduled-reports h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.metric-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:20px}.metric-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.metric-name{color:var(--text-primary);font-size:14px;font-weight:600}.trend-indicator{font-size:12px;font-weight:600}.trend-indicator.up{color:#10b981}.trend-indicator.down{color:#ef4444}.report-item{background:var(--bg-secondary);border-radius:10px;padding:15px}.report-name{color:var(--text-primary);font-weight:600}.report-schedule{color:var(--text-secondary);font-size:13px}.report-status{border-radius:12px;font-size:11px;font-weight:600;padding:4px 12px;text-transform:uppercase}.report-status.active{background:#10b98133;color:#10b981}.report-status.paused{background:#ef444433;color:#ef4444}@media (max-width:768px){.advanced-analytics{padding:15px}.kpi-dashboard,.metrics-grid{grid-template-columns:1fr}}.security-operations{margin:0 auto;max-width:1400px;padding:20px}.sec-ops-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:25px}.sec-ops-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.threat-level{background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:8px;color:#f59e0b;font-weight:600;gap:10px}.threat-indicator{font-size:20px}.sec-ops-nav{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:8px;margin-bottom:25px;padding:8px}.nav-btn{background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;font-weight:600;padding:12px 20px;transition:all .3s ease}.nav-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.nav-btn.active{background:var(--accent-color);color:#fff}.soc-dashboard{display:flex;flex-direction:column;gap:25px}.security-metrics,.threat-feeds{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.security-metrics h4,.threat-feeds h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.feeds-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feed-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:20px}.feed-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.feed-name{color:var(--text-primary);font-weight:600}.feed-status.active{color:#10b981}.feed-stats{display:flex;flex-direction:column;gap:4px}.threat-count{color:var(--text-primary);font-size:18px;font-weight:700}.last-update{color:var(--text-secondary);font-size:12px}.metrics-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.sec-metric{align-items:center;background:var(--bg-secondary);border-radius:10px;display:flex;gap:15px;padding:20px}.metric-icon{font-size:32px}.metric-data{display:flex;flex-direction:column;gap:4px}.metric-value{font-size:24px}.incidents-view,.vulnerabilities-view{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.incidents-header,.vuln-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.incidents-header h4,.vuln-header h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0}.create-incident,.scan-vulnerabilities{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px}.incidents-list,.vulnerabilities-list{display:flex;flex-direction:column;gap:12px}.incident-card,.vuln-card{align-items:center;background:var(--bg-secondary);border-radius:10px;display:flex;justify-content:space-between;padding:15px}.incident-info,.vuln-info{align-items:center;display:flex;gap:15px}.incident-type,.vuln-cve{color:var(--text-primary);font-weight:600}.severity-badge,.vuln-severity{border-radius:6px;font-size:11px;font-weight:600;padding:4px 10px;text-transform:uppercase}.severity-badge.high,.vuln-severity.high{background:#ef444433;color:#ef4444}.severity-badge.medium,.vuln-severity.medium{background:#f59e0b33;color:#f59e0b}.severity-badge.low,.vuln-severity.low{background:#3b82f633;color:#3b82f6}.severity-badge.critical,.vuln-severity.critical{background:#ef44444d;color:#dc2626}.status-badge,.vuln-status-badge{border-radius:12px;font-size:11px;font-weight:600;padding:4px 12px;text-transform:capitalize}.status-badge.investigating,.vuln-status-badge.investigating{background:#f59e0b33;color:#f59e0b}.status-badge.resolved,.vuln-status-badge.patched{background:#10b98133;color:#10b981}.status-badge.monitoring{background:#3b82f633;color:#3b82f6}.vuln-status-badge.patch_available{background:#6366f133;color:var(--accent-color)}.vuln-component{color:var(--text-secondary);font-size:13px}@media (max-width:768px){.security-operations{padding:15px}.feeds-grid,.metrics-grid{grid-template-columns:1fr}.incident-card,.vuln-card{align-items:flex-start;flex-direction:column;gap:10px}}.ai-network-optimizer{margin:0 auto;max-width:1600px;padding:20px}.optimizer-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.optimizer-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0}.ai-controls{align-items:center;display:flex;gap:15px}.ai-mode-selector{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-weight:600;padding:10px 16px}.optimize-btn{background:linear-gradient(135deg,var(--accent-color),#8b5cf6);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .3s ease}.optimize-btn:hover{box-shadow:0 8px 20px #6366f166;transform:translateY(-2px)}.ai-dashboard{grid-gap:25px;display:grid;gap:25px;grid-template-columns:1fr 1fr;margin-bottom:30px}.performance-score{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;display:flex;gap:25px;padding:25px}.score-visualization{flex-shrink:0}.score-details{gap:15px}.score-details,.score-metric{display:flex;flex-direction:column}.score-metric{gap:4px}.metric-label{color:var(--text-secondary);font-weight:600}.metric-value{color:var(--text-primary)}.ml-models{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.ml-models h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.models-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.model-card{background:var(--bg-secondary);border:1px solid var(--border-color)}.model-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.model-name{color:var(--text-primary);font-weight:600}.model-status{font-weight:600;gap:5px}.model-metrics{flex-direction:column;gap:8px}.accuracy-bar{background:var(--border-color);border-radius:10px;height:20px;overflow:hidden;position:relative}.accuracy-label{color:var(--text-primary);font-size:11px;font-weight:600;left:8px;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.accuracy-fill{background:linear-gradient(90deg,var(--accent-color),#10b981);height:100%;transition:width .5s ease}.last-trained{color:var(--text-secondary);font-size:11px}.retrain-btn{background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px;transition:all .3s ease;width:100%}.retrain-btn:hover{background:var(--accent-hover)}.ai-recommendations{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:25px;padding:25px}.ai-recommendations h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.recommendations-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.recommendation-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px}.rec-header{align-items:center;display:flex;gap:10px;margin-bottom:15px}.rec-icon{font-size:24px}.rec-header h5{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.rec-content p{color:var(--text-secondary);font-size:13px;line-height:1.5;margin:0 0 15px}.server-recommendation{align-items:center;background:var(--bg-card);border-radius:8px;display:flex;gap:12px;margin-bottom:10px;padding:12px}.server-flag{font-size:28px}.server-details{display:flex;flex:1 1;flex-direction:column;gap:4px}.server-name{color:var(--text-primary);font-size:14px;font-weight:600}.ai-score{color:var(--accent-color);font-size:12px;font-weight:600}.apply-rec-btn{background:var(--accent-color);border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;padding:8px 16px;transition:all .3s ease}.apply-rec-btn:hover{transform:scale(1.05)}.rec-toggle{align-items:center;display:flex;gap:10px}.rec-toggle,.rec-toggle input[type=checkbox]{cursor:pointer}.rec-toggle span{color:var(--text-primary);font-size:14px;font-weight:600}.predictive-analytics{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin-bottom:25px;padding:25px}.predictive-analytics h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.prediction-card{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);display:flex;gap:15px;padding:20px}.prediction-icon{flex-shrink:0;font-size:32px}.prediction-content{display:flex;flex-direction:column;gap:4px}.prediction-value{color:var(--text-primary);font-size:24px;font-weight:700}.prediction-label{color:var(--text-secondary);font-size:12px;font-weight:600}.confidence{color:var(--accent-color);font-weight:600}.adaptive-settings{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:25px}.adaptive-settings h4{color:var(--text-primary);font-size:18px;font-weight:600;margin:0 0 20px}.settings-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.setting-item{background:var(--bg-secondary);border-radius:10px;cursor:pointer;gap:15px;padding:15px;transition:all .3s ease}.setting-item:hover{background:#6366f11a}.setting-item input[type=checkbox]{cursor:pointer;transform:scale(1.2)}.setting-content{display:flex;flex-direction:column;gap:4px}.setting-title{color:var(--text-primary);font-size:14px;font-weight:600}.setting-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}@media (max-width:1200px){.ai-dashboard{grid-template-columns:1fr}}@media (max-width:768px){.ai-network-optimizer{padding:15px}.optimizer-header{align-items:flex-start;flex-direction:column}.performance-score{flex-direction:column;text-align:center}.predictions-grid,.recommendations-grid,.settings-grid{grid-template-columns:1fr}.prediction-card{flex-direction:column;text-align:center}}.predictive-security{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.security-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.security-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.threat-indicator{align-items:center;border-radius:20px;display:flex;font-size:14px;font-weight:700;gap:8px;padding:8px 16px}.threat-indicator.low{background:#10b9814d;border:2px solid #10b981}.threat-indicator.medium{background:#f59e0b4d;border:2px solid #f59e0b}.threat-indicator.high{background:#ef44444d;border:2px solid #ef4444}.security-dashboard{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:30px}.risk-assessment{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;grid-row:span 2;padding:20px}.risk-assessment h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.risk-meter{display:flex;justify-content:center;margin:20px 0}.risk-details{margin-top:20px}.risk-factors{display:flex;flex-direction:column;gap:10px}.factor{background:#ffffff1a;border-radius:8px;font-size:14px;padding:8px 12px}.ai-detections{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.ai-detections h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 15px}.detections-list{display:flex;flex-direction:column;gap:12px}.detection-item{background:#ffffff0d;border-left:4px solid;border-radius:10px;padding:15px}.detection-item.high{border-left-color:#ef4444}.detection-item.medium{border-left-color:#f59e0b}.detection-item.low{border-left-color:#10b981}.detection-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.detection-type{font-size:14px;font-weight:700}.detection-confidence{background:#fff3;border-radius:12px;font-size:12px;padding:4px 8px}.detection-details{align-items:center;display:flex;font-size:12px;justify-content:space-between;opacity:.8}.detection-action{border-radius:8px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.detection-action.blocked{background:#ef44444d;color:#fecaca}.detection-action.monitored{background:#f59e0b4d;color:#fed7aa}.detection-action.flagged{background:#3b82f64d;color:#bfdbfe}.behavior-analysis{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.behavior-analysis h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 15px}.behavior-metrics{display:flex;flex-direction:column;gap:15px}.behavior-score{background:#ffffff1a;border-radius:10px;padding:15px;text-align:center}.behavior-value{color:#10b981;display:block;font-size:28px;font-weight:700}.behavior-label{font-size:14px;opacity:.8}.behavior-stats{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr}.stat-item{background:#ffffff0d;border-radius:8px;padding:10px;text-align:center}.stat-value{font-size:20px}.deviation-alert{background:#f59e0b33;border:1px solid #f59e0b;border-radius:8px;font-size:14px;padding:10px;text-align:center}.ml-models-security{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.ml-models-security h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.models-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.model-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:15px}.model-info{display:flex;flex-direction:column;margin-bottom:10px}.model-name{font-size:14px;font-weight:700}.model-type{font-size:12px;opacity:.7}.model-metrics{align-items:center;display:flex;justify-content:space-between}.model-accuracy{color:#10b981;font-size:18px;font-weight:700}.model-status{align-items:center;display:flex;font-size:12px;gap:4px}.model-status.active{color:#10b981}.model-status.training{color:#f59e0b}@media (max-width:768px){.behavior-stats,.models-grid,.security-dashboard{grid-template-columns:1fr}}.intelligent-assistant{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;flex-direction:column;min-height:100vh;padding:20px}.assistant-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}.assistant-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.assistant-status{align-items:center;display:flex;font-size:14px;gap:8px}.status-indicator{animation:pulse 2s infinite;border-radius:50%;height:8px;width:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.assistant-layout{grid-gap:20px;display:grid;flex:1 1;gap:20px;grid-template-columns:2fr 1fr}.chat-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;display:flex;flex-direction:column;height:70vh;padding:20px}.chat-messages{gap:15px;margin-bottom:20px}.message{align-items:flex-start;display:flex}.message.user{justify-content:flex-end}.message.assistant{justify-content:flex-start}.message-content{border-radius:18px;max-width:70%;padding:12px 16px;position:relative}.message.user .message-content{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom-right-radius:4px;color:#fff}.message.assistant .message-content{background:#ffffffe6;border-bottom-left-radius:4px;color:#1f2937}.message-text{display:block;line-height:1.4;margin-bottom:5px}.message-time{font-size:11px;opacity:.7}.message-input{background:#ffffffe6;border-radius:25px;color:#1f2937;padding:12px 16px}.message-input::placeholder{color:#6b7280}.send-btn,.voice-btn{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .3s ease;width:40px}.send-btn:hover,.voice-btn:hover{background:#ffffff4d;transform:scale(1.05)}.voice-btn.listening{animation:pulse 1s infinite;background:#ef4444}.assistant-sidebar{display:flex;flex-direction:column;gap:20px}.ai-suggestions,.quick-actions{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.ai-suggestions h4,.quick-actions h4{align-items:center;display:flex;font-size:16px;gap:8px;margin:0 0 15px}.actions-list{display:flex;flex-direction:column;gap:8px}.quick-action-btn{background:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;font-size:13px;padding:10px 12px;text-align:left;transition:all .3s ease}.quick-action-btn:hover{background:#fff3;transform:translateX(5px)}.suggestions-list{display:flex;flex-direction:column;gap:12px}.suggestion-item{align-items:flex-start;background:#ffffff0d;border-left:3px solid #10b981;border-radius:8px;display:flex;gap:10px;padding:12px}.suggestion-icon{font-size:16px;margin-top:2px}.suggestion-text{font-size:13px;line-height:1.4;opacity:.9}@media (max-width:768px){.assistant-layout{gap:15px;grid-template-columns:1fr}.chat-section{height:50vh}.message-content{max-width:85%}.quick-action-btn{font-size:12px;padding:8px 10px}}.smart-analytics{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.analytics-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.analytics-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.ai-status{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;display:flex;font-size:14px;gap:8px;padding:8px 16px}.ai-indicator{animation:pulse 2s infinite}.analytics-dashboard{display:flex;flex-direction:column;gap:30px}.insights-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.insights-section h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.insights-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.insight-card{background:#ffffff0d;border-left:4px solid;border-radius:12px;padding:16px;transition:all .3s ease}.insight-card:hover{background:#ffffff1a;transform:translateY(-2px)}.insight-card.high{border-left-color:#ef4444}.insight-card.medium{border-left-color:#f59e0b}.insight-card.low{border-left-color:#10b981}.insight-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.insight-type{font-size:18px}.insight-title{flex:1 1;font-size:14px;font-weight:700;margin:0 12px}.insight-confidence{background:#fff3;border-radius:12px;font-size:12px;font-weight:700;padding:4px 8px}.insight-description{font-size:13px;line-height:1.4;margin:12px 0;opacity:.9}.apply-insight-btn{background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease}.apply-insight-btn:hover{box-shadow:0 4px 8px #0003;transform:translateY(-1px)}.predictions-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.predictions-section h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.predictions-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.prediction-card{background:#ffffff0d;border-radius:12px;padding:16px;text-align:center}.prediction-card h5{font-size:14px;margin:0 0 12px;opacity:.8}.prediction-value{align-items:center;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.value{color:#60a5fa;font-size:24px;font-weight:700}.trend{background:#ffffff1a;border-radius:12px;font-size:12px;padding:4px 8px}.trend.up{color:#10b981}.trend.stable{color:#f59e0b}.confidence{font-size:11px;opacity:.7}.optimal-times .time-slots{display:flex;flex-direction:column;gap:8px}.time-slot{background:#ffffff1a;border-radius:8px;font-size:12px;font-weight:700;padding:6px 12px}.kpi-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.kpi-section h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.kpi-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.kpi-card{background:#ffffff0d;border-radius:12px;padding:16px;text-align:center}.kpi-name{font-size:12px;margin-bottom:8px;opacity:.8}.kpi-value{color:#60a5fa;font-size:24px;font-weight:700;margin-bottom:12px}.kpi-progress{background:#fff3;border-radius:3px;height:6px;margin-bottom:8px;overflow:hidden;width:100%}.progress-bar{border-radius:3px;height:100%;transition:width .5s ease}.kpi-status{font-size:11px;font-weight:700}.kpi-status.exceeding{color:#10b981}.kpi-status.meeting{color:#f59e0b}.reports-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.reports-section h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.reports-list{display:flex;flex-direction:column;gap:12px}.report-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;justify-content:space-between;padding:12px 16px}.report-info{display:flex;flex-direction:column}.report-name{font-size:14px;font-weight:700}.report-schedule{font-size:12px;opacity:.7}.report-controls{align-items:center;display:flex;gap:15px}.last-sent{font-size:11px;opacity:.6}.report-toggle{height:20px;position:relative;width:40px}.report-toggle input{display:none}@media (max-width:768px){.insights-list,.predictions-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.report-item{align-items:flex-start;flex-direction:column;gap:10px}.report-controls{justify-content:space-between;width:100%}}.adaptive-learning{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.learning-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.learning-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.learning-indicator{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;display:flex;font-size:14px;gap:8px;padding:8px 16px}.learning-pulse{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.learning-dashboard{display:flex;flex-direction:column;gap:30px}.learning-overview{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr}.overview-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.overview-card h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.performance-metrics{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.metric{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:15px;text-align:center}.metric-value{display:block;font-size:28px;margin-bottom:5px}.metric-label{font-size:12px;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.user-preferences{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.user-preferences h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.preferences-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.preference-item{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.preference-item:hover{background:#ffffff14;transform:translateY(-2px)}.preference-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.preference-category{color:#60a5fa;font-size:14px;font-weight:700}.preference-confidence{text-align:right}.confidence-value{color:#10b981;font-size:16px;font-weight:700}.confidence-label{display:block;font-size:10px;opacity:.7}.preference-learned{font-size:13px;line-height:1.4;margin-bottom:10px;opacity:.9}.preference-stats{font-size:11px;opacity:.6}.actions-count{background:#ffffff1a;border-radius:8px;padding:4px 8px}.adaptive-actions{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.adaptive-actions h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.actions-timeline{display:flex;flex-direction:column;gap:12px}.action-item{align-items:flex-start;background:#ffffff0d;border-left:4px solid;border-radius:10px;display:flex;gap:12px;padding:12px}.action-item.positive{border-left-color:#10b981}.action-item.neutral{border-left-color:#60a5fa}.action-item.negative{border-left-color:#ef4444}.action-indicator{font-size:16px;margin-top:2px}.action-content{flex:1 1}.action-description{font-size:14px;font-weight:700;margin-bottom:4px}.action-reason{font-size:12px;font-style:italic;margin-bottom:4px;opacity:.8}.action-time{font-size:11px;opacity:.6}.learning-modules{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.learning-modules h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.modules-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.module-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.module-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.module-name{font-size:14px;font-weight:700}.module-status{align-items:center;background:#ffffff1a;border-radius:12px;display:flex;font-size:12px;gap:4px;padding:4px 8px}.module-status.active{color:#10b981}.module-status.learning{color:#f59e0b}.module-status.training{color:#60a5fa}.module-progress{align-items:center;display:flex;gap:10px;margin-bottom:8px}.progress-bar{background:#fff3;border-radius:4px;flex:1 1;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#10b981,#60a5fa);border-radius:4px;height:100%;transition:width .5s ease}.progress-text{color:#60a5fa;font-size:12px;font-weight:700}.module-accuracy{font-size:11px;opacity:.7}.learning-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.learning-controls h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.controls-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.control-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;justify-content:space-between;padding:12px 16px}.control-item label{font-size:14px;font-weight:500}.control-item input[type=checkbox]{accent-color:#10b981;height:18px;width:18px}@media (max-width:768px){.performance-metrics{gap:15px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.controls-grid,.modules-grid,.preferences-list{grid-template-columns:1fr}.action-item{flex-direction:column;gap:8px}.action-indicator{align-self:flex-start}}.collaborative-vpn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.collab-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.collab-header h3{font-size:24px;margin:0}.active-session,.collab-header h3,.session-status{align-items:center;display:flex;gap:10px}.active-session{background:#10b98133;border:1px solid #10b981;border-radius:20px;font-size:14px;padding:8px 16px}.leave-session-btn{background:#ef4444;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:12px;padding:4px 12px;transition:all .3s ease}.leave-session-btn:hover{background:#dc2626}.no-session{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;font-size:14px;padding:8px 16px}.collab-dashboard{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.team-overview{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.team-overview h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.team-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:20px}.stat-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:15px;text-align:center}.team-members h5{font-size:16px;margin:20px 0 15px}.members-list{display:flex;flex-direction:column;gap:12px}.member-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;display:flex;gap:12px;padding:12px;transition:all .3s ease}.member-avatar,.member-item:hover{background:#ffffff1a}.member-avatar{align-items:center;border-radius:50%;display:flex;font-size:24px;height:40px;justify-content:center;width:40px}.member-info{display:flex;flex:1 1;flex-direction:column}.member-name{font-size:14px;font-weight:700}.member-role{font-size:12px;opacity:.7}.member-status{align-items:center;display:flex;gap:8px}.status-indicator{font-size:12px}.member-details{align-items:flex-end;display:flex;flex-direction:column}.member-location{font-size:11px;opacity:.8}.member-last-seen{font-size:10px;opacity:.6}.shared-sessions{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.shared-sessions h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.sessions-list{display:flex;flex-direction:column;gap:15px}.session-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.session-card:hover{background:#ffffff14}.session-card.active{background:#10b9811a;border-color:#10b981}.session-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.session-name{font-size:14px;font-weight:700}.session-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px}.session-status.active{color:#10b981}.session-status.inactive{color:#6b7280}.session-details{align-items:flex-end;display:flex;justify-content:space-between}.session-info{display:flex;flex-direction:column;gap:4px}.session-created,.session-members,.session-owner,.session-server{font-size:12px;opacity:.8}.session-btn{border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease}.session-btn.join{background:#10b981;color:#fff}.session-btn.join:hover{background:#059669}.session-btn.joined{background:#10b9814d;color:#10b981;cursor:not-allowed}.team-chat{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;grid-column:span 2;padding:20px}.team-chat h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 15px}.chat-container{display:flex;flex-direction:column;height:300px}.chat-messages{display:flex;flex:1 1;flex-direction:column;gap:10px;margin-bottom:15px;overflow-y:auto}.chat-message{background:#ffffff0d;border-left:3px solid;border-radius:8px;padding:10px 12px}.chat-message.system{border-left-color:#60a5fa}.chat-message.question{border-left-color:#f59e0b}.chat-message.response{border-left-color:#10b981}.chat-message.message{border-left-color:#8b5cf6}.message-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px}.message-user{font-size:12px;font-weight:700}.message-time{font-size:10px;opacity:.6}.message-content{font-size:13px;line-height:1.4}.chat-input{align-items:center;display:flex;gap:10px}.message-input{background:#ffffff1a;border:none;border-radius:20px;color:#fff;flex:1 1;font-size:14px;outline:none;padding:10px 12px}.message-input::placeholder{color:#fff9}.send-message-btn{align-items:center;background:#10b981;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .3s ease;width:36px}.send-message-btn:hover{background:#059669;transform:scale(1.05)}.collaboration-tools{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;grid-column:span 2;padding:20px}.collaboration-tools h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.tools-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.tool-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;text-align:center;transition:all .3s ease}.tool-card:hover{background:#ffffff1a;transform:translateY(-2px)}.tool-card h5{font-size:14px;margin:0 0 10px}.tool-card p{font-size:12px;line-height:1.4;margin:0 0 15px;opacity:.8}.tool-btn{background:linear-gradient(135deg,#60a5fa,#3b82f6);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease}.tool-btn:hover{box-shadow:0 4px 8px #0003;transform:translateY(-1px)}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#ffffff80}@media (max-width:1024px){.collab-dashboard{grid-template-columns:1fr}.collaboration-tools,.team-chat{grid-column:span 1}.tools-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}@media (max-width:768px){.collab-header{align-items:flex-start;flex-direction:column;gap:15px}.team-stats{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.session-details{align-items:flex-start;flex-direction:column;gap:10px}.chat-container{height:250px}}.mobile-device-manager{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.device-summary{align-items:center;display:flex;gap:15px}.connected-count{background:#10b98133;border:1px solid #10b981;border-radius:15px;font-weight:700}.connected-count,.total-count{font-size:14px;padding:6px 12px}.total-count{border:1px solid #fff3}.device-overview,.total-count{background:#ffffff1a;border-radius:15px}.device-overview{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #fff3;padding:20px}.device-overview h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.analytics-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.analytics-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:15px;text-align:center}.analytics-value{color:#60a5fa;display:block;font-size:24px;font-weight:700;margin-bottom:5px}.analytics-label{font-size:12px;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.connected-devices{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.connected-devices h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.devices-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.device-card{transition:all .3s ease}.device-card:hover{background:#ffffff14;transform:translateY(-2px)}.device-card.connected{background:#10b9811a;border-color:#10b981}.device-card.standby{background:#f59e0b1a;border-color:#f59e0b}.device-card.offline{background:#6b72801a;border-color:#6b7280}.device-info{gap:12px;margin-bottom:15px}.device-icon,.device-info{align-items:center;display:flex}.device-icon{background:#ffffff1a;border-radius:12px;font-size:28px;height:48px;justify-content:center;width:48px}.device-details{flex:1 1}.device-name{font-size:16px;font-weight:700;margin-bottom:4px}.device-type{font-size:14px;margin-bottom:4px;opacity:.8}.device-location{font-size:12px;opacity:.7}.device-metrics{display:flex;flex-direction:column;gap:12px;margin-bottom:15px}.battery-indicator{align-items:center;display:flex;gap:8px}.battery-icon{font-size:16px}.battery-level{font-size:14px;font-weight:700}.battery-bar{background:#fff3;border-radius:4px;flex:1 1;height:8px;overflow:hidden}.battery-fill{border-radius:4px;height:100%;transition:width .5s ease}.device-status{display:flex;flex-direction:column;gap:4px}.status-badge{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px;width:-webkit-fit-content;width:fit-content}.status-badge.connected{color:#10b981}.status-badge.standby{color:#f59e0b}.status-badge.offline{color:#6b7280}.last-sync{font-size:11px;opacity:.7}.security-level{align-items:center;display:flex;font-size:12px;gap:6px}.security-level.high{color:#10b981}.security-level.medium{color:#f59e0b}.security-level.low{color:#ef4444}.security-icon{font-size:14px}.device-actions{display:flex;flex-wrap:wrap;gap:8px}.device-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;padding:6px 12px;transition:all .3s ease}.device-btn.disconnect{background:#ef4444;color:#fff}.device-btn.disconnect:hover{background:#dc2626}.device-btn.wake{background:#10b981;color:#fff}.device-btn.wake:hover{background:#059669}.device-btn.sync{background:#60a5fa;color:#fff}.device-btn.sync:hover{background:#3b82f6}.mobile-settings{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.mobile-settings h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.settings-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.setting-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;justify-content:space-between;padding:12px 16px}.setting-label{font-size:14px;font-weight:500}.setting-toggle{height:20px;position:relative;width:40px}.setting-toggle input{display:none}.security-features{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.security-features h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.security-list{display:flex;flex-direction:column;gap:12px}.security-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;justify-content:space-between;padding:12px 16px}.security-info{display:flex;flex:1 1;flex-direction:column;margin-right:15px}.security-name{font-size:14px;font-weight:700;margin-bottom:4px}.security-description{font-size:12px;line-height:1.4;opacity:.8}.security-toggle{height:20px;position:relative;width:40px}.cross-platform-sync{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.cross-platform-sync h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.sync-status{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.sync-category{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:15px}.sync-category h5{font-size:14px;margin:0 0 10px;text-transform:capitalize}.sync-progress{display:flex;flex-direction:column;gap:8px}.sync-bar{background:#fff3;border-radius:4px;height:8px;overflow:hidden;width:100%}.sync-fill{background:linear-gradient(90deg,#10b981,#60a5fa);border-radius:4px;height:100%;transition:width .5s ease}.sync-text{font-size:12px;opacity:.8}@media (max-width:1024px){.devices-list{grid-template-columns:1fr}.analytics-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width:768px){.mobile-header{align-items:flex-start;flex-direction:column;gap:15px}.device-summary{flex-direction:column;gap:10px;width:100%}.settings-grid,.sync-status{grid-template-columns:1fr}.device-actions{justify-content:space-between}.device-btn{flex:1 1;text-align:center}}.blockchain-integration{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.blockchain-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.blockchain-header h3{font-size:24px;margin:0}.blockchain-header h3,.wallet-connected,.wallet-status{align-items:center;display:flex;gap:10px}.wallet-connected{background:#10b98133;border:1px solid #10b981;border-radius:20px;padding:8px 16px}.wallet-address{font-family:Courier New,monospace;font-size:14px;font-weight:700}.disconnect-btn{background:#ef4444;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:12px;padding:4px 12px;transition:all .3s ease}.disconnect-btn:hover{background:#dc2626}.connect-wallet-btn{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:8px 16px;transition:all .3s ease}.connect-wallet-btn:hover{box-shadow:0 4px 8px #0003;transform:translateY(-1px)}.blockchain-dashboard{display:flex;flex-direction:column;gap:30px}.crypto-portfolio{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.crypto-portfolio h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.balance-cards{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.balance-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;text-align:center;transition:all .3s ease}.balance-card:hover{background:#ffffff1a;transform:translateY(-2px)}.token-symbol{color:#f59e0b;font-size:14px;margin-bottom:8px}.token-balance,.token-symbol{display:block;font-weight:700}.token-balance{color:#60a5fa;font-size:20px;margin-bottom:6px}.token-change{font-size:12px;opacity:.8}.nft-access-control{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.nft-access-control h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.nft-collection{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.nft-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.nft-card:hover{background:#ffffff1a;transform:translateY(-2px)}.nft-card.owned{background:#10b9811a;border-color:#10b981}.nft-card.not-owned{border-color:#6b7280;opacity:.7}.nft-image{font-size:48px;margin-bottom:15px}.nft-image,.nft-info{text-align:center}.nft-info h5{font-size:16px;font-weight:700;margin:0 0 8px}.nft-tier{border-radius:8px;display:inline-block;font-size:12px;font-weight:700;margin-bottom:12px;padding:4px 8px}.nft-tier.platinum{background:#8b5cf6;color:#fff}.nft-tier.gold{background:#f59e0b;color:#fff}.nft-tier.silver{background:#6b7280;color:#fff}.nft-tier.bronze{background:#92400e;color:#fff}.nft-benefits{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}.benefit-tag{background:#ffffff1a;border-radius:6px;font-size:11px;padding:4px 8px;text-align:left}.nft-btn{border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease;width:100%}.nft-btn.active{background:#10b9814d;color:#10b981;cursor:not-allowed}.nft-btn.purchase{background:#8b5cf6;color:#fff}.nft-btn.purchase:hover{background:#7c3aed}.decentralized-nodes{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.decentralized-nodes h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.nodes-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.node-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.node-card:hover{background:#ffffff1a}.node-card.active{border-color:#10b981}.node-card.maintenance{border-color:#f59e0b;opacity:.8}.node-status{background:#ffffff1a;border-radius:8px;padding:4px 8px}.node-metrics{grid-template-columns:1fr 1fr}.node-metric{display:flex;flex-direction:column}.metric-value{font-size:14px}.stake-btn{background:#f59e0b;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease;width:100%}.stake-btn:hover:not(:disabled){background:#d97706}.stake-btn:disabled{cursor:not-allowed;opacity:.5}.dao-governance{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.dao-governance h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.proposals-list{display:flex;flex-direction:column;gap:15px}.proposal-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.proposal-card.passed{background:#10b9811a;border-color:#10b981}.proposal-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.proposal-header h5{flex:1 1;font-size:14px;margin:0 15px 0 0}.proposal-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px;white-space:nowrap}.proposal-details{display:flex;font-size:12px;justify-content:space-between;margin-bottom:15px;opacity:.8}.voting-actions{display:flex;gap:10px}.vote-btn{border:none;border-radius:6px;cursor:pointer;flex:1 1;font-size:12px;font-weight:700;padding:6px 12px;transition:all .3s ease}.vote-btn.for{background:#10b981;color:#fff}.vote-btn.for:hover{background:#059669}.vote-btn.against{background:#ef4444;color:#fff}.vote-btn.against:hover{background:#dc2626}.voted-status{background:#10b98133;border-radius:6px;color:#10b981;font-size:12px;padding:8px 12px;text-align:center}.smart-contracts{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.smart-contracts h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.contracts-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.contract-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.contract-card:hover{background:#ffffff1a}.contract-card.active{border-color:#10b981}.contract-card.upgrading{border-color:#f59e0b}.contract-info{margin-bottom:12px}.contract-info h5{font-size:14px;font-weight:700;margin:0 0 6px}.contract-address{font-family:Courier New,monospace;font-size:11px;opacity:.7}.contract-metrics{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.contract-gas,.contract-transactions{font-size:11px;opacity:.8}.contract-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px;text-align:center}.contract-status.active{color:#10b981}.contract-status.upgrading{color:#f59e0b}.wallet-not-connected{align-items:center;display:flex;justify-content:center;min-height:400px}.connect-prompt{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;max-width:500px;padding:40px;text-align:center}.connect-prompt h4{font-size:24px;margin:0 0 20px}.connect-prompt p{font-size:16px;line-height:1.6;margin:0 0 20px;opacity:.9}.connect-prompt ul{margin:20px 0;padding-left:20px;text-align:left}.connect-prompt li{font-size:14px;margin-bottom:8px;opacity:.8}.connect-main-btn{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;margin-top:20px;padding:12px 24px;transition:all .3s ease}.connect-main-btn:hover{box-shadow:0 6px 12px #0000004d;transform:translateY(-2px)}@media (max-width:1024px){.balance-cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.nft-collection{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.nodes-list{grid-template-columns:1fr}}@media (max-width:768px){.blockchain-header{align-items:flex-start;flex-direction:column;gap:15px}.balance-cards{grid-template-columns:repeat(2,1fr)}.contracts-list,.nft-collection{grid-template-columns:1fr}.proposal-header,.voting-actions{flex-direction:column}.proposal-header{align-items:flex-start;gap:10px}}.quantum-security{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.quantum-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.quantum-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.quantum-status{gap:15px}.quantum-status,.threat-level{align-items:center;display:flex}.threat-level{border-radius:20px;font-size:14px;font-weight:700;gap:8px;padding:8px 16px}.threat-level.low{background:#10b9814d;border:2px solid #10b981}.threat-level.moderate{background:#f59e0b4d;border:2px solid #f59e0b}.threat-level.high{background:#ef44444d;border:2px solid #ef4444}.quantum-score{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;font-size:14px;font-weight:700;padding:8px 16px}.quantum-dashboard{display:flex;flex-direction:column;gap:30px}.post-quantum-overview{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.post-quantum-overview h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.pqc-status{gap:20px;justify-content:space-between}.pqc-status,.status-indicator{align-items:center;display:flex}.status-indicator{font-size:16px;font-weight:700;gap:10px}.status-icon{font-size:20px}.resistance-meter{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:8px}.meter-container{background:#fff3;border-radius:6px;height:12px;overflow:hidden;width:200px}.meter-fill{border-radius:6px;height:100%;transition:width .5s ease}.meter-label{font-size:12px;opacity:.8}.encryption-algorithms{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.encryption-algorithms h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.algorithms-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.algorithm-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.algorithm-card:hover{background:#ffffff1a}.algorithm-card.quantum{border-left:4px solid #10b981}.algorithm-card.classical{border-left:4px solid #ef4444}.algorithm-card.active{background:#10b9811a}.algorithm-card.deprecated,.algorithm-card.legacy{opacity:.6}.algorithm-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.algorithm-name{font-size:14px;font-weight:700}.algorithm-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px}.algorithm-status.active{color:#10b981}.algorithm-status.standby{color:#f59e0b}.algorithm-status.testing{color:#60a5fa}.algorithm-status.deprecated{color:#ef4444}.algorithm-status.legacy{color:#6b7280}.algorithm-details{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.algorithm-strength,.algorithm-type{font-size:12px;opacity:.8}.quantum-ready{font-size:12px;font-weight:700}.quantum-ready.ready{color:#10b981}.quantum-ready.not-ready{color:#ef4444}.algorithm-actions{display:flex;gap:8px}.algo-btn{border:none;border-radius:6px;cursor:pointer;flex:1 1;font-size:11px;font-weight:700;padding:6px 12px;transition:all .3s ease}.algo-btn.activate{background:#10b981;color:#fff}.algo-btn.activate:hover{background:#059669}.algo-btn.standby{background:#f59e0b;color:#fff}.algo-btn.standby:hover{background:#d97706}.algo-btn.migrate{background:#60a5fa;color:#fff}.algo-btn.migrate:hover{background:#3b82f6}.quantum-key-distribution{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.quantum-key-distribution h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.qkd-controls{margin-bottom:20px}.qkd-toggle{border:none;border-radius:12px;cursor:pointer;font-size:14px;font-weight:700;padding:10px 20px;transition:all .3s ease}.qkd-toggle.active{background:#10b981;color:#fff}.qkd-toggle.inactive{background:#fff3;color:#fff}.qkd-toggle:hover{transform:translateY(-1px)}.qkd-metrics{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.qkd-metric{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:12px;text-align:center}.metric-label{font-size:11px;margin-bottom:6px}.metric-value{font-size:18px}.threat-assessment{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.threat-assessment h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.threats-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.threat-card{background:#ffffff0d;border:1px solid #ffffff1a;border-left:4px solid;border-radius:12px;padding:16px}.threat-card.high{border-left-color:#ef4444}.threat-card.medium{border-left-color:#f59e0b}.threat-card.low{border-left-color:#10b981}.threat-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.threat-category{font-size:14px;font-weight:700}.threat-probability{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px}.threat-description{font-size:13px;line-height:1.4;margin-bottom:10px;opacity:.9}.threat-details{display:flex;font-size:12px;justify-content:space-between;opacity:.8}.threat-mitigation,.threat-timeframe{flex:1 1}.quantum-protocols{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.quantum-protocols h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.protocols-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.protocol-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.protocol-card:hover{background:#ffffff1a}.protocol-card.active{border-color:#10b981}.protocol-card.testing{border-color:#60a5fa}.protocol-card.development{border-color:#f59e0b}.protocol-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.protocol-name{font-size:14px;font-weight:700}.protocol-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px}.protocol-description{font-size:13px;line-height:1.4;margin-bottom:10px;opacity:.9}.protocol-details{display:flex;font-size:12px;justify-content:space-between;opacity:.8}.protocol-implementation,.protocol-security{flex:1 1}.migration-progress{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.migration-progress h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.migration-categories{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.migration-category{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.migration-category h5{font-size:16px;margin:0 0 15px;text-transform:capitalize}.migration-stats{display:flex;flex-direction:column;gap:10px}.migration-bar{background:#fff3;border-radius:6px;display:flex;height:12px;overflow:hidden;width:100%}.migrated{background:#10b981;height:100%}.in-progress{background:#f59e0b;height:100%}.migration-legend{display:flex;font-size:11px;justify-content:space-between}.legend-item{align-items:center;display:flex;gap:4px}.legend-item.migrated{color:#10b981}.legend-item.in-progress{color:#f59e0b}.legend-item.pending{color:#6b7280}@media (max-width:1024px){.algorithms-list,.protocols-list,.threats-list{grid-template-columns:1fr}.qkd-metrics{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width:768px){.quantum-header{align-items:flex-start;flex-direction:column;gap:15px}.quantum-status{flex-direction:column;gap:10px;width:100%}.pqc-status{flex-direction:column;gap:15px}.meter-container,.resistance-meter{width:100%}.migration-categories{grid-template-columns:1fr}.migration-legend{flex-direction:column;gap:5px}}.edge-computing{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.edge-header{border-bottom:2px solid #fff3;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.edge-header,.edge-header h3{align-items:center;display:flex}.edge-header h3{font-size:24px;gap:10px;margin:0}.edge-status{align-items:center;display:flex;gap:15px}.edge-metric{background:#ffffff1a;border:1px solid #fff3;border-radius:15px;font-size:14px;font-weight:700;padding:6px 12px}.edge-dashboard{display:flex;flex-direction:column;gap:30px}.cdn-overview{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.cdn-overview h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.cdn-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.cdn-stat{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:15px;text-align:center}.stat-value{display:block;font-size:24px;margin-bottom:5px}.stat-label{font-size:12px;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.edge-nodes{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.edge-nodes h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.nodes-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:20px}.edge-node-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.edge-node-card:hover{background:#ffffff1a;transform:translateY(-2px)}.edge-node-card.optimal{border-color:#10b981}.edge-node-card.high-load{border-color:#f59e0b}.edge-node-card.congested{border-color:#ef4444}.node-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.node-location{font-size:14px;font-weight:700}.node-status{align-items:center;display:flex;font-size:12px;font-weight:700;gap:4px}.node-metrics{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-bottom:15px}.node-metric{background:#ffffff0d;border-radius:8px;padding:8px;text-align:center}.metric-label{display:block;font-size:10px;margin-bottom:4px;opacity:.7}.metric-value{color:#60a5fa;font-size:12px;font-weight:700}.node-stats{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:10px}.node-stat{align-items:center;display:flex;font-size:12px;gap:6px}.stat-icon{font-size:14px}.stat-value{color:#60a5fa;font-weight:700}.stat-label{opacity:.7}.load-bar{background:#fff3;border-radius:3px;height:6px;overflow:hidden;width:100%}.load-fill{border-radius:3px;height:100%;transition:width .5s ease}.deployment-controls{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.deployment-controls h5{font-size:14px;margin:0 0 15px}.deployment-buttons{display:flex;flex-wrap:wrap;gap:10px}.deploy-btn{background:#10b981;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;padding:8px 16px;transition:all .3s ease}.deploy-btn:hover{background:#059669;transform:translateY(-1px)}.content-optimization{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.content-optimization h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.optimization-list{grid-gap:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.optimization-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.optimization-card:hover{background:#ffffff1a}.optimization-card.active{border-color:#10b981}.optimization-card.testing{border-color:#60a5fa}.optimization-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.content-type{font-size:14px}.optimization-status{background:#ffffff1a;border-radius:8px;font-size:12px;padding:4px 8px}.optimization-method{font-size:13px;line-height:1.4;margin-bottom:10px;opacity:.9}.optimization-results{display:flex;font-size:12px;justify-content:space-between}.savings{color:#10b981;font-weight:700}.latency{color:#60a5fa;font-weight:700}.load-balancing{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.load-balancing h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.balancing-overview{display:flex;flex-direction:column;gap:20px}.algorithm-info{background:#ffffff0d;border-radius:8px;font-size:16px;font-weight:700;padding:12px;text-align:center}.algorithm-name{color:#60a5fa}.strategies-list{display:flex;flex-direction:column;gap:12px}.strategy-item{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:12px}.strategy-info{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.strategy-name{font-size:14px;font-weight:700}.strategy-weight{font-size:12px;opacity:.8}.strategy-metrics{align-items:center;display:flex;gap:10px}.efficiency{color:#10b981;font-size:12px;font-weight:700}.efficiency-bar{background:#fff3;border-radius:3px;flex:1 1;height:6px;overflow:hidden}.efficiency-fill{background:#10b981;border-radius:3px;height:100%;transition:width .5s ease}.edge-ai{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.edge-ai h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.ai-services{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.ai-service-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;transition:all .3s ease}.ai-service-card:hover{background:#ffffff1a;transform:translateY(-2px)}.service-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.service-name{font-size:14px;font-weight:700}.service-accuracy{color:#10b981;font-size:12px;font-weight:700}.service-metrics{display:flex;flex-direction:column;gap:6px}.service-processed{color:#60a5fa;font-size:12px}.service-benefit{font-size:12px;font-style:italic;opacity:.8}.edge-analytics{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.edge-analytics h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.analytics-sections{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.content-analysis,.region-performance{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.content-analysis h5,.region-performance h5{font-size:16px;margin:0 0 15px}.content-chart{display:flex;flex-direction:column;gap:10px}.content-item{grid-gap:10px;align-items:center;background:#ffffff0d;border-radius:6px;display:grid;gap:10px;grid-template-columns:1fr 100px 40px 80px;padding:8px}.content-type{font-size:12px;font-weight:700}.content-bar{background:#fff3;border-radius:4px;height:8px;overflow:hidden}.content-fill{background:linear-gradient(90deg,#60a5fa,#10b981);border-radius:4px;height:100%}.content-percentage{font-size:11px;font-weight:700;text-align:right}.content-traffic{font-size:10px;opacity:.8}.regions-list{display:flex;flex-direction:column;gap:10px}.region-item{background:#ffffff0d;border-radius:8px;padding:12px}.region-name{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.region-metrics{display:flex;font-size:10px;justify-content:space-between}.region-latency,.region-satisfaction,.region-throughput{color:#60a5fa;font-weight:700}@media (max-width:1200px){.analytics-sections{grid-template-columns:1fr}}@media (max-width:1024px){.nodes-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.optimization-list{grid-template-columns:1fr}.ai-services{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.cdn-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width:768px){.edge-header{align-items:flex-start;flex-direction:column;gap:15px}.edge-status{flex-direction:column;gap:10px;width:100%}.edge-metric{text-align:center}.nodes-grid{grid-template-columns:1fr}.node-metrics{grid-template-columns:repeat(2,1fr)}.content-item{gap:5px;grid-template-columns:1fr;text-align:center}.region-metrics{gap:4px}.deployment-buttons,.region-metrics{flex-direction:column}.deploy-btn{width:100%}}.mobile-optimizations{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-height:100vh;padding:20px}.mobile-header{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.mobile-header h3{align-items:center;display:flex;font-size:24px;gap:10px;margin:0}.pwa-badge{background:#10b98133;border:1px solid #10b981;border-radius:15px;font-size:12px;font-weight:700;padding:6px 12px}.mobile-dashboard{display:flex;flex-direction:column;gap:30px}.device-detection{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.device-detection h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.device-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.device-card{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;display:flex;gap:12px;padding:16px}.device-icon{font-size:24px;min-width:32px}.device-details{display:flex;flex-direction:column;gap:4px}.device-type,.notch-support,.screen-size{font-size:14px;font-weight:700}.device-platform,.orientation,.safe-area{font-size:12px;opacity:.8}.touch-optimizations{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.touch-optimizations h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.optimization-list{display:flex;flex-direction:column;gap:15px}.optimization-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;display:flex;justify-content:space-between;padding:15px}.optimization-info{display:flex;flex-direction:column;gap:4px}.optimization-name{font-size:14px;font-weight:700}.optimization-desc{font-size:12px;opacity:.8}.optimization-toggle{height:20px;position:relative;width:40px}.optimization-toggle input{display:none}.toggle-slider{background:#fff3;border-radius:20px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.toggle-slider:before{background:#fff;border-radius:50%;bottom:2px;content:"";height:16px;left:2px;position:absolute;transition:.4s;width:16px}input:checked+.toggle-slider{background:#10b981}input:checked+.toggle-slider:before{transform:translateX(20px)}.mobile-features{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.mobile-features h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.features-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feature-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:16px;text-align:center}.feature-card h5{font-size:16px;margin:0 0 10px}.feature-card p{font-size:12px;line-height:1.4;margin:0 0 15px;opacity:.8}.feature-btn{background:#10b981;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;min-height:44px;min-width:44px;padding:8px 16px;transition:all .3s ease}.feature-btn:hover{background:#059669;transform:translateY(-1px)}.haptic-btn:active{transform:scale(.95)}.feature-status{color:#10b981;font-size:14px;font-weight:700}.performance-indicator{align-items:center;display:flex;flex-direction:column;gap:5px}.perf-score{color:#10b981;font-size:24px;font-weight:700}.perf-label{font-size:12px;opacity:.8}.offline-status{align-items:center;display:flex;font-size:14px;gap:8px;justify-content:center}.status-dot{border-radius:50%;height:12px;width:12px}.status-dot.online{background:#10b981;box-shadow:0 0 8px #10b98199}.status-dot.offline{background:#ef4444;box-shadow:0 0 8px #ef444499}.accessibility-features{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.accessibility-features h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.accessibility-list{display:flex;flex-direction:column;gap:12px}.accessibility-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;display:flex;gap:12px;padding:12px}.accessibility-icon{font-size:20px;min-width:24px}.accessibility-details{display:flex;flex:1 1;flex-direction:column;gap:4px}.accessibility-name{font-size:14px;font-weight:700}.accessibility-desc{font-size:12px;opacity:.8}.accessibility-status{color:#10b981;font-size:16px}.responsive-design{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:20px}.responsive-design h4{align-items:center;display:flex;font-size:18px;gap:8px;margin:0 0 20px}.breakpoints-list{display:flex;flex-direction:column;gap:10px}.breakpoint-item{grid-gap:15px;align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:grid;gap:15px;grid-template-columns:1fr auto auto;padding:12px 15px}.breakpoint-device{font-size:14px;font-weight:700}.breakpoint-size{background:#ffffff1a;border-radius:4px;font-family:monospace;font-size:12px;padding:4px 8px}.breakpoint-status{color:#10b981;font-size:12px;font-weight:700}@media (max-width:768px){.mobile-optimizations{padding:15px}.device-grid,.features-grid{grid-template-columns:1fr}.optimization-item{flex-direction:column;gap:10px;text-align:center}.breakpoint-item{gap:8px;grid-template-columns:1fr;text-align:center}}@media (max-width:480px){.mobile-header{align-items:flex-start;flex-direction:column;gap:10px}.mobile-header h3{font-size:20px}.device-card{flex-direction:column;gap:8px;text-align:center}.feature-card{padding:12px}.accessibility-item{flex-direction:column;gap:8px;text-align:center}}
/*# sourceMappingURL=main.a94431f8.css.map*/