@import url(https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap);:root{--ocean-deep:#0a1628;--ocean-night:#0d1e30;--ocean-depth:#1e3a5f;--ocean-mid:#2a4a6f;--bio-cyan:#00d4ff;--bio-cyan-light:#66e5ff;--bio-cyan-dark:#00a3cc;--bio-cyan-glow:#00d4ff80;--bio-seafoam:#00ffc8;--bio-seafoam-light:#66ffd9;--bio-seafoam-glow:#00ffc866;--bio-purple:#7b68ee;--bio-purple-light:#9f8fff;--bio-purple-glow:#7b68ee66;--bio-coral:#ff6b9d;--bio-coral-light:#ff9fbd;--bio-coral-glow:#ff6b9d66;--bio-sunset:#ffb347;--bio-sunset-light:#ffcc80;--bio-sunset-glow:#ffb34766;--primary:var(--bio-cyan);--primary-light:var(--bio-cyan-light);--primary-dark:var(--bio-cyan-dark);--primary-glow:var(--bio-cyan-glow);--secondary:var(--bio-seafoam);--secondary-light:var(--bio-seafoam-light);--secondary-glow:var(--bio-seafoam-glow);--accent:var(--bio-purple);--accent-light:var(--bio-purple-light);--accent-glow:var(--bio-purple-glow);--bg-primary:#0a1628;--bg-secondary:#0d1e30;--bg-tertiary:#1e3a5f;--bg-elevated:#2a4a6f;--bg-card:#ffffff08;--bg-card-hover:#ffffff0f;--bg-card-active:#00d4ff1a;--bg-glass:#ffffff0d;--bg-glass-strong:#ffffff14;--bg-glass-hover:#ffffff1a;--bg-overlay:#0a1628e6;--bg-modal:#0d1e30fa;--bg-sidebar:#0a1628f2;--text-primary:#e0f7ff;--text-secondary:#a8c8d8;--text-tertiary:#6b8a9a;--text-muted:#4a6a7a;--text-inverse:#0a1628;--success:#00ffc8;--success-light:#66ffd9;--success-glow:#00ffc866;--success-bg:#00ffc81a;--warning:#ffb347;--warning-light:#ffcc80;--warning-glow:#ffb34766;--warning-bg:#ffb3471a;--error:#ff6b9d;--error-light:#ff9fbd;--error-glow:#ff6b9d66;--error-bg:#ff6b9d1a;--info:#00d4ff;--info-light:#66e5ff;--info-glow:#00d4ff66;--info-bg:#00d4ff1a;--border-subtle:#00d4ff1a;--border-default:#00d4ff33;--border-strong:#00d4ff4d;--border-focus:var(--primary);--border-glow:var(--primary-glow);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--font-thai:"Prompt","Sarabun",sans-serif;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00d4ff1a;--shadow-xl:0 12px 40px #00d4ff33;--shadow-glow:0 0 20px var(--primary-glow);--shadow-glow-lg:0 0 40px var(--primary-glow);--shadow-card:0 8px 32px #00d4ff1a,inset 0 0 20px #00d4ff0d;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:300ms cubic-bezier(0.4,0,0.2,1);--transition-slow:500ms cubic-bezier(0.4,0,0.2,1);--transition-bounce:400ms cubic-bezier(0.34,1.56,0.64,1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-drawer:400;--z-modal:500;--z-popover:600;--z-tooltip:700;--z-toast:800;--z-loading:9999;--sidebar-width:260px;--sidebar-width-collapsed:72px;--navbar-height:70px;--navbar-height-mobile:60px;--bottom-nav-height:64px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;scroll-behavior:smooth}body{background:linear-gradient(180deg,#0a1628,#0d1e30 30%,#1e3a5f 70%,#0a1628);background:linear-gradient(180deg,var(--bg-primary) 0,var(--bg-secondary) 30%,var(--bg-tertiary) 70%,var(--bg-primary) 100%);background-attachment:fixed;color:#e0f7ff;color:var(--text-primary);font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);font-size:1rem;font-size:var(--text-base);line-height:1.6;min-height:100vh;overflow-x:hidden}.loading-screen{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .5s ease,visibility .5s ease;z-index:9999;z-index:var(--z-loading)}.loading-screen.hidden{opacity:0;pointer-events:none;visibility:hidden}.loading-waves{bottom:0;height:200px;left:0;overflow:hidden;position:absolute;width:100%}.loading-wave{animation:wave 20s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300D4FF' fill-opacity='.1' d='m0 192 48 5.3c48 5.7 144 15.7 240 32 96 15.7 192 37.7 288 21.4 96-15.7 192-69.7 288-69.4 96-.3 192 53.7 288 53.4 96 .3 192-53.7 240-80l48-26.7v192H0Z'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;bottom:0;height:100%;position:absolute;width:200%}.loading-wave:nth-child(2){animation-delay:-5s;animation-duration:15s;opacity:.5}.loading-wave:nth-child(3){animation-delay:-2s;animation-duration:12s;opacity:.3}@keyframes wave{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.loading-content{z-index:1}.loading-logo{animation:logoPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(0,212,255,.5));filter:drop-shadow(0 0 20px var(--bio-cyan-glow))}@keyframes logoPulse{0%,to{filter:drop-shadow(0 0 20px rgba(0,212,255,.4));transform:scale(1)}50%{filter:drop-shadow(0 0 35px rgba(0,212,255,.8));transform:scale(1.05)}}.loading-bubbles{gap:10px}.loading-bubbles span{animation:bubble 1.5s ease-in-out infinite;background:#00d4ff99;height:15px;width:15px}@keyframes bubble{0%,to{opacity:.6;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-20px) scale(1.2)}}.loading-text{text-shadow:0 0 10px #00d4ff80;text-shadow:0 0 10px var(--bio-cyan-glow)}.loading-bar{background:#ffffff1a;height:6px;margin:0 auto;overflow:hidden;width:280px}.loading-bar,.loading-progress{border-radius:9999px;border-radius:var(--radius-full)}.loading-progress{background:linear-gradient(90deg,#00d4ff,#00ffc8);background:linear-gradient(90deg,var(--bio-cyan),var(--bio-seafoam));box-shadow:0 0 10px #00d4ff80;box-shadow:0 0 10px var(--bio-cyan-glow);height:100%;transition:width .3s ease}.app-container{display:flex;min-height:100vh;position:relative}.ocean-bg{inset:0;pointer-events:none;position:fixed;z-index:-1}.caustics{animation:caustics 8s ease-in-out infinite;background:repeating-linear-gradient(45deg,#0000,#0000 10px,#00d4ff08 0,#00d4ff08 20px);inset:0;opacity:.03;position:absolute}@keyframes caustics{0%,to{transform:translateX(0) translateY(0)}50%{transform:translateX(20px) translateY(10px)}}.particles{inset:0;overflow:hidden;position:absolute}.particle{animation:float-up 15s linear infinite;background:radial-gradient(circle,#00d4ff 0,#0000 70%);background:radial-gradient(circle,var(--bio-cyan) 0,#0000 70%);border-radius:50%;height:8px;opacity:.3;position:absolute;width:8px}@keyframes float-up{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.3}90%{opacity:.3}to{opacity:0;transform:translateY(-100px) scale(1)}}.waves-container{bottom:0;height:150px;left:0;pointer-events:none;position:fixed;width:100%;z-index:0}.wave-bg{animation:wave 25s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300D4FF' fill-opacity='.05' d='m0 192 48 5.3c48 5.7 144 15.7 240 32 96 15.7 192 37.7 288 21.4 96-15.7 192-69.7 288-69.4 96-.3 192 53.7 288 53.4 96 .3 192-53.7 240-80l48-26.7v192H0Z'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;bottom:0;height:100%;position:absolute;width:200%}.sidebar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0a1628f2;background:var(--bg-sidebar);border-right:1px solid #00d4ff1a;border-right:1px solid var(--border-subtle);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;top:0;transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);transition:width var(--transition-base),transform var(--transition-base);width:260px;width:var(--sidebar-width);z-index:300;z-index:var(--z-fixed)}.sidebar.collapsed{width:72px;width:var(--sidebar-width-collapsed)}.sidebar-header{border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);justify-content:space-between;min-height:70px;min-height:var(--navbar-height);padding:1rem;padding:var(--space-4) var(--space-4)}.sidebar-header,.sidebar-logo{align-items:center;display:flex}.sidebar-logo{gap:.75rem;gap:var(--space-3);overflow:hidden}.logo-icon-wrapper{align-items:center;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.logo-image{filter:drop-shadow(0 0 8px rgba(0,212,255,.5));filter:drop-shadow(0 0 8px var(--bio-cyan-glow));height:100%;object-fit:contain;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base);width:100%}.logo-image:hover{filter:drop-shadow(0 0 15px rgba(0,212,255,.5));filter:drop-shadow(0 0 15px var(--bio-cyan-glow));transform:scale(1.05)}.logo-text{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap}.logo-text h1{color:#e0f7ff;color:var(--text-primary);font-size:1rem;font-size:var(--text-base);font-weight:600;line-height:1.2}.logo-text .version{color:#00d4ff;color:var(--bio-cyan);font-size:.75rem;font-size:var(--text-xs);opacity:.8}.sidebar.collapsed .logo-text{display:none}.sidebar-toggle{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:32px}.sidebar-toggle:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff;border-color:var(--bio-cyan);color:#00d4ff;color:var(--bio-cyan)}.sidebar.collapsed .sidebar-toggle{margin:0 auto}.sidebar-status{flex-direction:column;padding:.75rem;padding:var(--space-3)}.sidebar-status,.status-pill{display:flex;gap:.5rem;gap:var(--space-2)}.status-pill{align-items:center;animation:pulse-glow 2s ease-in-out infinite;border-radius:9999px;border-radius:var(--radius-full);font-size:.875rem;font-size:var(--text-sm);font-weight:500;padding:.5rem .75rem;padding:var(--space-2) var(--space-3)}.status-pill.posting{background:#00ffc81a;background:var(--success-bg);border:1px solid #00ffc84d;color:#00ffc8;color:var(--success)}.status-pill.guard{background:#00d4ff1a;background:var(--info-bg);border:1px solid #00d4ff4d;color:#00d4ff;color:var(--info)}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #0000}50%{box-shadow:0 0 20px currentColor}}.sidebar.collapsed .status-pill span{display:none}.sidebar-nav{flex:1 1;overflow-y:auto;padding:1rem .5rem;padding:var(--space-4) var(--space-2)}.nav-list{display:flex;flex-direction:column;gap:.25rem;gap:var(--space-1);list-style:none}.nav-item{align-items:center;background:#0000;border:1px solid #0000;border-radius:16px;border-radius:var(--radius-lg);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;gap:.75rem;gap:var(--space-3);overflow:hidden;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.nav-item:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff1a;border-color:var(--border-subtle);color:#e0f7ff;color:var(--text-primary)}.nav-item.active{background:#00d4ff1a;background:var(--bg-card-active);border-color:#00d4ff4d;box-shadow:0 0 20px #00d4ff1a;color:#00d4ff;color:var(--bio-cyan)}.nav-item.running{animation:nav-pulse 2s ease-in-out infinite}@keyframes nav-pulse{0%,to{box-shadow:0 0 0 #0000}50%{box-shadow:0 0 15px #00d4ff80;box-shadow:0 0 15px var(--bio-cyan-glow)}}.nav-icon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.nav-label{flex:1 1;font-size:.875rem;font-size:var(--text-sm);font-weight:500;white-space:nowrap}.nav-badge{background:#ff6b9d;background:var(--bio-coral);border-radius:9999px;border-radius:var(--radius-full);color:#fff;font-weight:600;min-width:20px;text-align:center}.nav-badge,.nav-shortcut{font-size:10px;padding:2px 6px}.nav-shortcut{background:#ffffff0d;background:var(--bg-glass);border-radius:8px;border-radius:var(--radius-sm);color:#4a6a7a;color:var(--text-muted);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast)}.nav-item:hover .nav-shortcut{opacity:1}.nav-indicator{background:#00d4ff;background:var(--bio-cyan);border-radius:0 9999px 9999px 0;border-radius:0 var(--radius-full) var(--radius-full) 0;box-shadow:0 0 10px #00d4ff80;box-shadow:0 0 10px var(--bio-cyan-glow);height:24px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:3px}.sidebar.collapsed .nav-badge,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-shortcut{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:.75rem;padding:var(--space-3)}.sidebar-actions{border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);flex-direction:column;padding:.75rem;padding:var(--space-3)}.action-btn,.sidebar-actions{display:flex;gap:.5rem;gap:var(--space-2)}.action-btn{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;font-size:.875rem;font-size:var(--text-sm);padding:.5rem .75rem;padding:var(--space-2) var(--space-3);position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.action-btn:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff;border-color:var(--bio-cyan);color:#e0f7ff;color:var(--text-primary)}.action-btn kbd{background:#ffffff0d;background:var(--bg-glass);border-radius:4px;color:#4a6a7a;color:var(--text-muted);font-size:9px;margin-left:auto;padding:2px 4px}.action-badge{align-items:center;background:#ff6b9d;background:var(--bio-coral);border-radius:50%;color:#fff;display:flex;font-size:10px;font-weight:600;height:18px;justify-content:center;position:absolute;right:-4px;top:-4px;width:18px}.sidebar.collapsed .action-btn kbd,.sidebar.collapsed .action-btn span{display:none}.sidebar.collapsed .action-btn{justify-content:center}.sidebar-footer{border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);padding:.75rem;padding:var(--space-3)}.theme-toggle{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.theme-toggle:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#ffb347;border-color:var(--bio-sunset);color:#ffb347;color:var(--bio-sunset)}.sidebar.collapsed .theme-toggle span{display:none}.sidebar.collapsed .theme-toggle{justify-content:center}.main-content{flex:1 1;margin-left:260px;margin-left:var(--sidebar-width);min-height:100vh;padding:1.5rem;padding:var(--space-6);position:relative;transition:margin-left .3s cubic-bezier(.4,0,.2,1);transition:margin-left var(--transition-base);z-index:1}.sidebar.collapsed~.main-content{margin-left:72px;margin-left:var(--sidebar-width-collapsed)}.page-header{flex-wrap:wrap;gap:1rem;gap:var(--space-4);justify-content:space-between;margin-bottom:1.5rem;margin-bottom:var(--space-6)}.page-header,.page-title{align-items:center;display:flex}.page-title{color:#e0f7ff;color:var(--text-primary);font-size:1.5rem;font-size:var(--text-2xl);font-weight:700;gap:.75rem;gap:var(--space-3)}.page-title-icon{color:#00d4ff;color:var(--bio-cyan);filter:drop-shadow(0 0 10px rgba(0,212,255,.5));filter:drop-shadow(0 0 10px var(--bio-cyan-glow))}.page-description{color:#a8c8d8;color:var(--text-secondary);font-size:.875rem;font-size:var(--text-sm);margin-top:.25rem;margin-top:var(--space-1)}.card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);box-shadow:0 8px 32px #00d4ff1a,inset 0 0 20px #00d4ff0d;box-shadow:var(--shadow-card);overflow:hidden;padding:1.5rem;padding:var(--space-6);position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.card:before{background:linear-gradient(90deg,#0000,#00d4ff,#0000);background:linear-gradient(90deg,#0000,var(--bio-cyan),#0000);content:"";height:1px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-base)}.card:hover{border-color:#00d4ff66;box-shadow:0 12px 40px #00d4ff33,inset 0 0 30px #00d4ff1a;box-shadow:var(--shadow-xl),inset 0 0 30px #00d4ff1a;transform:translateY(-5px)}.card:hover:before{opacity:1}.card-header{border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--space-4);padding-bottom:1rem;padding-bottom:var(--space-4)}.card-header,.card-title{align-items:center;display:flex}.card-title{color:#e0f7ff;color:var(--text-primary);font-size:1.125rem;font-size:var(--text-lg);font-weight:600;gap:.5rem;gap:var(--space-2)}.card-icon{color:#00d4ff;color:var(--bio-cyan)}.card-content{color:#a8c8d8;color:var(--text-secondary)}.card-footer{align-items:center;border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);display:flex;gap:.75rem;gap:var(--space-3);justify-content:flex-end;margin-top:1rem;margin-top:var(--space-4);padding-top:1rem;padding-top:var(--space-4)}.card.glass{background:#ffffff08}.card.success{border-color:#00ffc84d}.card.success:before{background:linear-gradient(90deg,#0000,#00ffc8,#0000);background:linear-gradient(90deg,#0000,var(--bio-seafoam),#0000)}.card.warning{border-color:#ffb3474d}.card.warning:before{background:linear-gradient(90deg,#0000,#ffb347,#0000);background:linear-gradient(90deg,#0000,var(--bio-sunset),#0000)}.card.error{border-color:#ff6b9d4d}.card.error:before{background:linear-gradient(90deg,#0000,#ff6b9d,#0000);background:linear-gradient(90deg,#0000,var(--bio-coral),#0000)}.btn{align-items:center;border:none;border-radius:16px;border-radius:var(--radius-lg);cursor:pointer;display:inline-flex;font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);font-size:.875rem;font-size:var(--text-sm);font-weight:600;gap:.5rem;gap:var(--space-2);justify-content:center;overflow:hidden;padding:.75rem 1.5rem;padding:var(--space-3) var(--space-6);position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.btn:before{background:radial-gradient(circle,#ffffff4d 0,#0000 70%);inset:0;opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast)}.btn:hover:before{opacity:1}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,#00d4ff,#7b68ee);background:linear-gradient(135deg,var(--bio-cyan) 0,var(--bio-purple) 100%);box-shadow:0 4px 15px #00d4ff80;box-shadow:0 4px 15px var(--bio-cyan-glow);color:#fff}.btn-primary:hover{box-shadow:0 6px 25px #00d4ff80;box-shadow:0 6px 25px var(--bio-cyan-glow);transform:scale(1.02)}.btn-secondary{background:linear-gradient(135deg,#00ffc8,#00d4ff);background:linear-gradient(135deg,var(--bio-seafoam) 0,var(--bio-cyan) 100%);box-shadow:0 4px 15px #00ffc866;box-shadow:0 4px 15px var(--bio-seafoam-glow);color:#0a1628;color:var(--text-inverse)}.btn-secondary:hover{box-shadow:0 6px 25px #00ffc866;box-shadow:0 6px 25px var(--bio-seafoam-glow);transform:scale(1.02)}.btn-outline{background:#0000;border:2px solid #00d4ff;border:2px solid var(--bio-cyan);color:#00d4ff;color:var(--bio-cyan)}.btn-outline:hover{background:#00d4ff1a;box-shadow:0 0 20px #00d4ff80;box-shadow:0 0 20px var(--bio-cyan-glow)}.btn-ghost{background:#0000;border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);color:#a8c8d8;color:var(--text-secondary)}.btn-ghost:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff;border-color:var(--bio-cyan);color:#e0f7ff;color:var(--text-primary)}.btn-danger{background:linear-gradient(135deg,#ff6b9d,#f46);background:linear-gradient(135deg,var(--bio-coral) 0,#f46 100%);box-shadow:0 4px 15px #ff6b9d66;box-shadow:0 4px 15px var(--bio-coral-glow);color:#fff}.btn-danger:hover{box-shadow:0 6px 25px #ff6b9d66;box-shadow:0 6px 25px var(--bio-coral-glow);transform:scale(1.02)}.btn-success{background:linear-gradient(135deg,#00ffc8,#0c9);background:linear-gradient(135deg,var(--bio-seafoam) 0,#0c9 100%);box-shadow:0 4px 15px #00ffc866;box-shadow:0 4px 15px var(--bio-seafoam-glow);color:#0a1628;color:var(--text-inverse)}.btn-sm{padding:.5rem 1rem;padding:var(--space-2) var(--space-4)}.btn-lg{font-size:1rem;font-size:var(--text-base);padding:1rem 2rem;padding:var(--space-4) var(--space-8)}.btn-icon{height:44px;width:44px}.btn-icon.btn-sm{height:36px;width:36px}.btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.input{background:#0000004d;border:none;border-bottom:2px solid #00d4ff4d;border-radius:12px 12px 0 0;border-radius:var(--radius-md) var(--radius-md) 0 0;color:#e0f7ff;color:var(--text-primary);font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);font-size:1rem;font-size:var(--text-base);padding:1rem;padding:var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.input:focus{background:#00d4ff0d;border-bottom-color:#00d4ff;border-bottom-color:var(--bio-cyan);box-shadow:0 4px 20px #00d4ff1a;outline:none}.input::placeholder{color:#4a6a7a;color:var(--text-muted)}.input-bordered{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:12px;border-radius:var(--radius-md)}.input-bordered:focus{border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 0 3px #00d4ff1a}textarea.input{border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:12px;border-radius:var(--radius-md);min-height:120px;resize:vertical}.input-group{display:flex;flex-direction:column;gap:.5rem;gap:var(--space-2);margin-bottom:1rem;margin-bottom:var(--space-4)}.input-label{color:#a8c8d8;color:var(--text-secondary);font-size:.875rem;font-size:var(--text-sm);font-weight:500}.input-helper{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.select{-webkit-appearance:none;appearance:none;background:#ffffff0d;background:var(--bg-glass);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300D4FF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:12px;border-radius:var(--radius-md);color:#e0f7ff;color:var(--text-primary);cursor:pointer;font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);font-size:.875rem;font-size:var(--text-sm);padding:.75rem 1rem;padding:var(--space-3) var(--space-4);padding-right:2.5rem;padding-right:var(--space-10);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.select:focus{border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 0 3px #00d4ff1a;outline:none}.checkbox,.radio{-webkit-appearance:none;appearance:none;background:#ffffff0d;background:var(--bg-glass);border:2px solid #00d4ff33;border:2px solid var(--border-default);cursor:pointer;height:20px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:20px}.checkbox{border-radius:8px;border-radius:var(--radius-sm)}.radio{border-radius:50%}.checkbox:checked,.radio:checked{background:#00d4ff;background:var(--bio-cyan);border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 10px #00d4ff80;box-shadow:0 0 10px var(--bio-cyan-glow)}.checkbox:checked:after{align-items:center;color:#0a1628;color:var(--text-inverse);content:"✓";display:flex;font-size:14px;font-weight:700;justify-content:center}.radio:checked:after{background:#0a1628;background:var(--text-inverse);border-radius:50%;content:"";display:block;height:8px;margin:4px;width:8px}.toggle{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:9999px;border-radius:var(--radius-full);cursor:pointer;height:26px;position:relative;width:48px}.toggle,.toggle:after{transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.toggle:after{background:#a8c8d8;background:var(--text-secondary);border-radius:50%;content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.toggle.active{background:#00d4ff;background:var(--bio-cyan);border-color:#00d4ff;border-color:var(--bio-cyan)}.toggle.active:after{background:#fff;box-shadow:0 0 10px #ffffff80;transform:translateX(22px)}.toast-container{bottom:1.5rem;bottom:var(--space-6);flex-direction:column;max-width:400px;position:fixed;right:1.5rem;right:var(--space-6);z-index:800;z-index:var(--z-toast)}.toast,.toast-container{display:flex;gap:.75rem;gap:var(--space-3)}.toast{align-items:flex-start;animation:toast-enter .3s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0d1e30fa;background:var(--bg-modal);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:16px;border-radius:var(--radius-lg);box-shadow:0 8px 32px #00d4ff1a;box-shadow:var(--shadow-lg);overflow:hidden;padding:1rem;padding:var(--space-4);position:relative}@keyframes toast-enter{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.toast.toast-exit{animation:toast-exit .3s ease forwards}@keyframes toast-exit{to{opacity:0;transform:translateX(100%)}}.toast-icon{flex-shrink:0}.toast-content{flex:1 1;min-width:0}.toast-message{color:#e0f7ff;color:var(--text-primary);font-size:.875rem;font-size:var(--text-sm)}.toast-close{background:none;border:none;border-radius:8px;border-radius:var(--radius-sm);color:#4a6a7a;color:var(--text-muted);cursor:pointer;padding:.25rem;padding:var(--space-1);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.toast-close:hover{color:#e0f7ff;color:var(--text-primary)}.toast-close:hover,.toast-progress{background:#ffffff0d;background:var(--bg-glass)}.toast-progress{bottom:0;height:3px;left:0;position:absolute;right:0}.toast-progress-bar{animation:toast-progress 4s linear forwards;height:100%}@keyframes toast-progress{0%{width:100%}to{width:0}}.toast-success .toast-icon{color:#00ffc8;color:var(--success)}.toast-success .toast-progress-bar{background:#00ffc8;background:var(--success)}.toast-success{border-left:3px solid #00ffc8;border-left:3px solid var(--success)}.toast-error .toast-icon{color:#ff6b9d;color:var(--error)}.toast-error .toast-progress-bar{background:#ff6b9d;background:var(--error)}.toast-error{border-left:3px solid #ff6b9d;border-left:3px solid var(--error)}.toast-warning .toast-icon{color:#ffb347;color:var(--warning)}.toast-warning .toast-progress-bar{background:#ffb347;background:var(--warning)}.toast-warning{border-left:3px solid #ffb347;border-left:3px solid var(--warning)}.toast-info .toast-icon{color:#00d4ff;color:var(--info)}.toast-info .toast-progress-bar{background:#00d4ff;background:var(--info)}.toast-info{border-left:3px solid #00d4ff;border-left:3px solid var(--info)}.modal-overlay{align-items:center;animation:fade-in .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#0a1628e6;background:var(--bg-overlay);display:flex;inset:0;justify-content:center;padding:1.5rem;padding:var(--space-6);position:fixed;z-index:500;z-index:var(--z-modal)}.modal{animation:modal-enter .3s ease;background:#0d1e30fa;background:var(--bg-modal);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:24px;border-radius:var(--radius-2xl);box-shadow:0 25px 50px #00000080;max-height:90vh;max-width:500px;overflow:hidden;width:100%}@keyframes modal-enter{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);justify-content:space-between;padding:1.25rem 1.5rem;padding:var(--space-5) var(--space-6)}.modal-header,.modal-title{align-items:center;display:flex}.modal-title{color:#e0f7ff;color:var(--text-primary);font-size:1.25rem;font-size:var(--text-xl);font-weight:600;gap:.75rem;gap:var(--space-3)}.modal-close{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:36px}.modal-close:hover{background:#ff6b9d1a;background:var(--error-bg);border-color:#ff6b9d;border-color:var(--error);color:#ff6b9d;color:var(--error)}.modal-body{max-height:60vh;overflow-y:auto;padding:1.5rem;padding:var(--space-6)}.modal-footer{align-items:center;background:#ffffff0d;background:var(--bg-glass);border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);display:flex;gap:.75rem;gap:var(--space-3);justify-content:flex-end;padding:1rem 1.5rem;padding:var(--space-4) var(--space-6)}.table-container{background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);overflow-x:auto}.table{border-collapse:collapse;width:100%}.table td,.table th{border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);padding:1rem;padding:var(--space-4);text-align:left}.table th{background:#ffffff0d;background:var(--bg-glass);color:#a8c8d8;color:var(--text-secondary);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.table td,.table th{font-size:.875rem;font-size:var(--text-sm)}.table td{color:#e0f7ff;color:var(--text-primary)}.table tr:hover td{background:#ffffff1a;background:var(--bg-glass-hover)}.table tr:last-child td{border-bottom:none}.badge{align-items:center;border-radius:9999px;border-radius:var(--radius-full);display:inline-flex;font-size:.75rem;font-size:var(--text-xs);font-weight:600;gap:.25rem;gap:var(--space-1);letter-spacing:.02em;padding:.25rem .75rem;padding:var(--space-1) var(--space-3);text-transform:uppercase}.badge-primary{background:#00d4ff1a;background:var(--info-bg);border:1px solid #00d4ff4d;color:#00d4ff;color:var(--info)}.badge-success{background:#00ffc81a;background:var(--success-bg);border:1px solid #00ffc84d;color:#00ffc8;color:var(--success)}.badge-warning{background:#ffb3471a;background:var(--warning-bg);border:1px solid #ffb3474d;color:#ffb347;color:var(--warning)}.badge-error{background:#ff6b9d1a;background:var(--error-bg);border:1px solid #ff6b9d4d;color:#ff6b9d;color:var(--error)}.badge-pulse{animation:badge-pulse 2s ease-in-out infinite}@keyframes badge-pulse{0%,to{box-shadow:0 0 0 #0000}50%{box-shadow:0 0 10px currentColor}}.progress-bar{background:#ffffff0d;background:var(--bg-glass);height:8px;overflow:hidden;width:100%}.progress-bar,.progress-fill{border-radius:9999px;border-radius:var(--radius-full)}.progress-fill{background:linear-gradient(90deg,#00d4ff,#00ffc8);background:linear-gradient(90deg,var(--bio-cyan),var(--bio-seafoam));box-shadow:0 0 10px #00d4ff80;box-shadow:0 0 10px var(--bio-cyan-glow);height:100%;transition:width .3s ease}.step,.steps{gap:.5rem;gap:var(--space-2)}.step,.step-indicator,.steps{align-items:center;display:flex}.step-indicator{background:#ffffff0d;background:var(--bg-glass);border:2px solid #00d4ff33;border:2px solid var(--border-default);border-radius:50%;color:#4a6a7a;color:var(--text-muted);font-size:.875rem;font-size:var(--text-sm);font-weight:600;height:32px;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base);width:32px}.step.active .step-indicator{background:#00d4ff;background:var(--bio-cyan);border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 20px #00d4ff80;box-shadow:0 0 20px var(--bio-cyan-glow);color:#fff}.step.completed .step-indicator{background:#00ffc8;background:var(--success);border-color:#00ffc8;border-color:var(--success);color:#fff}.step-line{background:#00d4ff33;background:var(--border-default);flex:1 1;height:2px;transition:background .3s cubic-bezier(.4,0,.2,1);transition:background var(--transition-base)}.step.active+.step-line,.step.completed+.step-line{background:#00d4ff;background:var(--bio-cyan)}.screenshot-container{aspect-ratio:16/9;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);cursor:pointer;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base);width:100%}.screenshot-container:hover{border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 20px #00d4ff80;box-shadow:0 0 20px var(--bio-cyan-glow)}.screenshot-container.compact{aspect-ratio:4/3}.screenshot{height:100%;object-fit:cover;transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast);width:100%}.screenshot.double-buffer{left:0;position:absolute;top:0}.screenshot-overlay{align-items:center;background:linear-gradient(#0000,#000c);bottom:0;color:#e0f7ff;color:var(--text-primary);display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2);left:0;opacity:0;padding:.75rem;padding:var(--space-3);position:absolute;right:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast)}.screenshot-container:hover .screenshot-overlay{opacity:1}.no-screenshot{align-items:center;color:#4a6a7a;color:var(--text-muted);display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.no-screenshot .placeholder-icon{font-size:48px;margin-bottom:.5rem;margin-bottom:var(--space-2)}.fullscreen-overlay{align-items:center;background:#000000f2;display:flex;inset:0;justify-content:center;padding:1.5rem;padding:var(--space-6);position:fixed;z-index:500;z-index:var(--z-modal)}.fullscreen-modal{background:#0d1e30fa;background:var(--bg-modal);border-radius:24px;border-radius:var(--radius-2xl);display:flex;flex-direction:column;max-height:90vh;max-width:1200px;overflow:hidden;width:100%}.fullscreen-header{align-items:center;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;padding:1rem 1.5rem;padding:var(--space-4) var(--space-6)}.fullscreen-header h2{color:#e0f7ff;color:var(--text-primary);font-size:1.125rem;font-size:var(--text-lg)}.fullscreen-header-right{align-items:center;display:flex;gap:1rem;gap:var(--space-4)}.fps-indicator{color:#00d4ff;color:var(--bio-cyan);font-size:.875rem;font-size:var(--text-sm)}.fps-indicator,.live-indicator{align-items:center;display:flex;gap:.25rem;gap:var(--space-1)}.live-indicator{background:#ff6b9d1a;background:var(--error-bg);border-radius:9999px;border-radius:var(--radius-full);color:#ff6b9d;color:var(--error);font-size:.75rem;font-size:var(--text-xs);font-weight:600;padding:.25rem .5rem;padding:var(--space-1) var(--space-2);text-transform:uppercase}.live-indicator.pulsing{animation:live-pulse 1.5s ease-in-out infinite}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.6}}.fullscreen-close{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:36px}.fullscreen-close:hover{background:#ff6b9d1a;background:var(--error-bg);color:#ff6b9d;color:var(--error)}.fullscreen-content{flex:1 1;min-height:400px;position:relative}.fullscreen-image{height:100%;object-fit:contain;width:100%}.fullscreen-no-image{color:#4a6a7a;color:var(--text-muted);flex-direction:column;inset:0;position:absolute}.fullscreen-footer,.fullscreen-no-image{align-items:center;display:flex;justify-content:center}.fullscreen-footer{border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);padding:.75rem 1.5rem;padding:var(--space-3) var(--space-6)}.fullscreen-hint{align-items:center;color:#4a6a7a;color:var(--text-muted);display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2)}.stats-grid{grid-gap:1rem;grid-gap:var(--space-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1.5rem;margin-bottom:var(--space-6)}.stat-card,.stats-grid{gap:1rem;gap:var(--space-4)}.stat-card{align-items:flex-start;background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);display:flex;overflow:hidden;padding:1.25rem;padding:var(--space-5);position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.stat-card:hover{box-shadow:0 8px 32px #00d4ff1a;box-shadow:var(--shadow-lg);transform:translateY(-3px)}.stat-card-icon{align-items:center;border-radius:16px;border-radius:var(--radius-lg);display:flex;font-size:24px;height:48px;justify-content:center;width:48px}.stat-card-content{flex:1 1}.stat-card-value{color:#e0f7ff;color:var(--text-primary);font-size:1.5rem;font-size:var(--text-2xl);font-weight:700;margin-bottom:.25rem;margin-bottom:var(--space-1)}.stat-card-label{color:#a8c8d8;color:var(--text-secondary);font-size:.875rem;font-size:var(--text-sm)}.stat-card-trend{align-items:center;display:flex;font-size:.75rem;font-size:var(--text-xs);font-weight:600;gap:.25rem;gap:var(--space-1);margin-top:.5rem;margin-top:var(--space-2)}.stat-card-trend.up{color:#00ffc8;color:var(--success)}.stat-card-trend.down{color:#ff6b9d;color:var(--error)}.stat-card-bg-glow{background:radial-gradient(circle,currentColor 0,#0000 70%);height:100%;opacity:.1;pointer-events:none;position:absolute;right:-50%;top:-50%;width:100%}.stat-primary .stat-card-icon{background:#00d4ff1a;background:var(--info-bg)}.stat-primary .stat-card-bg-glow,.stat-primary .stat-card-icon{color:#00d4ff;color:var(--info)}.stat-success .stat-card-icon{background:#00ffc81a;background:var(--success-bg)}.stat-success .stat-card-bg-glow,.stat-success .stat-card-icon{color:#00ffc8;color:var(--success)}.stat-warning .stat-card-icon{background:#ffb3471a;background:var(--warning-bg)}.stat-warning .stat-card-bg-glow,.stat-warning .stat-card-icon{color:#ffb347;color:var(--warning)}.stat-error .stat-card-icon{background:#ff6b9d1a;background:var(--error-bg)}.stat-error .stat-card-bg-glow,.stat-error .stat-card-icon{color:#ff6b9d;color:var(--error)}.groups-list{display:flex;flex-direction:column;gap:.75rem;gap:var(--space-3)}.group-item{align-items:center;background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);display:flex;gap:1rem;gap:var(--space-4);padding:1rem;padding:var(--space-4);transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.group-item:hover{background:#ffffff0f;background:var(--bg-card-hover);border-color:#00d4ff;border-color:var(--bio-cyan)}.group-info{flex:1 1;min-width:0}.group-name{color:#e0f7ff;color:var(--text-primary);font-weight:600;margin-bottom:.25rem;margin-bottom:var(--space-1)}.group-name,.group-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-url{color:#4a6a7a;color:var(--text-muted);font-size:.875rem;font-size:var(--text-sm)}.group-status{gap:.75rem;gap:var(--space-3)}.group-cooldown,.group-status{align-items:center;display:flex}.group-cooldown{font-size:.875rem;font-size:var(--text-sm);gap:.25rem;gap:var(--space-1)}.group-cooldown.ready{color:#00ffc8;color:var(--success)}.group-cooldown.cooling{color:#ffb347;color:var(--warning)}.group-actions,.history-list{display:flex;gap:.5rem;gap:var(--space-2)}.history-list{flex-direction:column}.history-item{align-items:center;background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);display:flex;gap:.75rem;gap:var(--space-3);padding:.75rem;padding:var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.history-item:hover{background:#ffffff0f;background:var(--bg-card-hover)}.history-icon{align-items:center;border-radius:12px;border-radius:var(--radius-md);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.history-content{flex:1 1;min-width:0}.history-group{color:#e0f7ff;color:var(--text-primary);font-size:.875rem;font-size:var(--text-sm);font-weight:500}.history-time{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.guard-controls{gap:.75rem;gap:var(--space-3)}.guard-controls,.guard-status-card{display:flex;margin-bottom:1rem;margin-bottom:var(--space-4)}.guard-status-card{align-items:center;background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);gap:1rem;gap:var(--space-4);padding:1rem;padding:var(--space-4)}.guard-status-indicator{background:#4a6a7a;background:var(--text-muted);border-radius:50%;height:12px;width:12px}.guard-status-indicator.active{animation:status-pulse 2s ease-in-out infinite;background:#00ffc8;background:var(--success);box-shadow:0 0 10px #00ffc866;box-shadow:0 0 10px var(--success-glow)}@keyframes status-pulse{0%,to{box-shadow:0 0 10px #00ffc866;box-shadow:0 0 10px var(--success-glow)}50%{box-shadow:0 0 20px #00ffc866;box-shadow:0 0 20px var(--success-glow)}}.anomaly-list{display:flex;flex-direction:column;gap:.75rem;gap:var(--space-3)}.anomaly-item{background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border-left:3px solid #ffb347;border:1px solid var(--border-subtle);border-left:3px solid var(--warning);border-radius:16px;border-radius:var(--radius-lg);padding:1rem;padding:var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.anomaly-item:hover{background:#ffffff0f;background:var(--bg-card-hover)}.anomaly-item.resolved{border-left-color:#00ffc8;border-left-color:var(--success);opacity:.6}.anomaly-header{justify-content:space-between;margin-bottom:.5rem;margin-bottom:var(--space-2)}.anomaly-header,.anomaly-type{align-items:center;display:flex}.anomaly-type{color:#ffb347;color:var(--warning);font-weight:600;gap:.5rem;gap:var(--space-2)}.anomaly-time{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.anomaly-description{color:#a8c8d8;color:var(--text-secondary);font-size:.875rem;font-size:var(--text-sm);margin-bottom:.75rem;margin-bottom:var(--space-3)}.anomaly-actions{display:flex;gap:.5rem;gap:var(--space-2)}.logs-container{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);max-height:400px;overflow-y:auto;padding:1rem;padding:var(--space-4)}.log-item{align-items:flex-start;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;font-family:JetBrains Mono,Fira Code,monospace;font-family:var(--font-mono);font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2);padding:.5rem 0;padding:var(--space-2) 0}.log-item:last-child{border-bottom:none}.log-time{color:#4a6a7a;color:var(--text-muted);flex-shrink:0}.log-message{color:#e0f7ff;color:var(--text-primary);flex:1 1;word-break:break-word}.log-item.info .log-message{color:#00d4ff;color:var(--info)}.log-item.success .log-message{color:#00ffc8;color:var(--success)}.log-item.warning .log-message{color:#ffb347;color:var(--warning)}.log-item.error .log-message{color:#ff6b9d;color:var(--error)}.image-gallery{grid-gap:.75rem;grid-gap:var(--space-3);display:grid;gap:.75rem;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.gallery-item{aspect-ratio:1;border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.gallery-item:hover{border-color:#00d4ff;border-color:var(--bio-cyan);transform:scale(1.02)}.gallery-item img{height:100%;object-fit:cover;width:100%}.gallery-item-overlay{align-items:center;background:#0009;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast)}.gallery-item:hover .gallery-item-overlay{opacity:1}.upload-area{border:2px dashed #00d4ff33;border:2px dashed var(--border-default);border-radius:20px;border-radius:var(--radius-xl);cursor:pointer;padding:2.5rem;padding:var(--space-10);text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.upload-area.dragging,.upload-area:hover{background:#00d4ff1a;background:var(--bg-card-active);border-color:#00d4ff;border-color:var(--bio-cyan)}.upload-area.dragging{box-shadow:0 0 30px #00d4ff80;box-shadow:0 0 30px var(--bio-cyan-glow)}.upload-icon{color:#4a6a7a;color:var(--text-muted);font-size:48px;margin-bottom:1rem;margin-bottom:var(--space-4)}.upload-text{color:#a8c8d8;color:var(--text-secondary);margin-bottom:.5rem;margin-bottom:var(--space-2)}.upload-hint{color:#4a6a7a;color:var(--text-muted);font-size:.875rem;font-size:var(--text-sm)}.settings-section{margin-bottom:2rem;margin-bottom:var(--space-8)}.settings-section-title{align-items:center;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);color:#e0f7ff;color:var(--text-primary);display:flex;font-size:1.125rem;font-size:var(--text-lg);font-weight:600;gap:.5rem;gap:var(--space-2);margin-bottom:1rem;margin-bottom:var(--space-4);padding-bottom:.5rem;padding-bottom:var(--space-2)}.settings-grid{grid-gap:1rem;grid-gap:var(--space-4);display:grid;gap:1rem;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.setting-item{background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);padding:1rem;padding:var(--space-4)}.setting-label{align-items:center;color:#e0f7ff;color:var(--text-primary);display:flex;font-weight:500;gap:.5rem;gap:var(--space-2);margin-bottom:.5rem;margin-bottom:var(--space-2)}.setting-description{font-size:.875rem;font-size:var(--text-sm);margin-bottom:.75rem;margin-bottom:var(--space-3)}.empty-state,.setting-description{color:#4a6a7a;color:var(--text-muted)}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:3rem;padding:var(--space-12);text-align:center}.empty-state-icon{font-size:64px;margin-bottom:1rem;margin-bottom:var(--space-4);opacity:.5}.empty-state-title{color:#a8c8d8;color:var(--text-secondary);font-size:1.25rem;font-size:var(--text-xl);font-weight:600;margin-bottom:.5rem;margin-bottom:var(--space-2)}.empty-state-description{font-size:.875rem;font-size:var(--text-sm);max-width:400px}.ripple-button{overflow:hidden;position:relative}.ripple{animation:ripple-effect .6s ease-out;background:#fff6;position:absolute}@keyframes ripple-effect{to{opacity:0;transform:scale(4)}}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#ffffff0d;background:var(--bg-glass)}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{border-radius:9999px;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:#00d4ff33;background:var(--border-default);-webkit-transition:background .15s cubic-bezier(.4,0,.2,1);transition:background .15s cubic-bezier(.4,0,.2,1);-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:#00d4ff;background:var(--bio-cyan)}*{scrollbar-color:#00d4ff33 #ffffff0d;scrollbar-color:var(--border-default) var(--bg-glass);scrollbar-width:thin}@media (max-width:1024px){:root{--sidebar-width:72px}.sidebar{width:260px;width:var(--sidebar-width)}.sidebar .action-btn kbd,.sidebar .action-btn span,.sidebar .logo-text,.sidebar .nav-badge,.sidebar .nav-label,.sidebar .nav-shortcut,.sidebar .status-pill span,.sidebar .theme-toggle span{display:none}.sidebar .nav-item{justify-content:center}.main-content{margin-left:260px;margin-left:var(--sidebar-width);padding:1rem;padding:var(--space-4)}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){:root{--navbar-height:var(--navbar-height-mobile)}.sidebar{transform:translateX(-100%);width:260px;width:var(--sidebar-width);z-index:400;z-index:var(--z-drawer)}.sidebar.open{transform:translateX(0);width:280px}.sidebar.open .action-btn span,.sidebar.open .logo-text,.sidebar.open .nav-badge,.sidebar.open .nav-label,.sidebar.open .status-pill span,.sidebar.open .theme-toggle span{display:block}.sidebar.open .nav-item{justify-content:flex-start}.main-content{margin-left:0;padding:1rem;padding:var(--space-4);padding-bottom:calc(64px + 1rem);padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}.mobile-nav{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0a1628f2;background:var(--bg-sidebar);border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);bottom:0;height:64px;height:var(--bottom-nav-height);justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom,0);position:fixed;right:0;z-index:300;z-index:var(--z-fixed)}.mobile-nav,.mobile-nav-item{align-items:center;display:flex}.mobile-nav-item{background:none;border:none;color:#4a6a7a;color:var(--text-muted);cursor:pointer;flex-direction:column;gap:.25rem;gap:var(--space-1);min-width:60px;padding:.5rem;padding:var(--space-2);transition:color .15s cubic-bezier(.4,0,.2,1);transition:color var(--transition-fast)}.mobile-nav-item.active{color:#00d4ff;color:var(--bio-cyan)}.mobile-nav-item span{font-size:10px;font-weight:500}.mobile-header{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0a1628f2;background:var(--bg-sidebar);border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;height:60px;height:var(--navbar-height-mobile);justify-content:space-between;left:0;padding:0 1rem;padding:0 var(--space-4);position:fixed;right:0;top:0;z-index:300;z-index:var(--z-fixed)}.mobile-header .logo-image{height:32px;width:32px}.hamburger{cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:.5rem;padding:var(--space-2)}.hamburger span{background:#e0f7ff;background:var(--text-primary);border-radius:9999px;border-radius:var(--radius-full);height:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base);width:24px}.hamburger.active span:first-child{transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.main-content{padding-top:calc(60px + 1rem);padding-top:calc(var(--navbar-height-mobile) + var(--space-4))}.card{border-radius:16px;border-radius:var(--radius-lg);padding:1rem;padding:var(--space-4)}.stats-grid{gap:.75rem;gap:var(--space-3);grid-template-columns:1fr}.stat-card{padding:1rem;padding:var(--space-4)}.btn{min-height:48px;padding:.75rem 1rem;padding:var(--space-3) var(--space-4)}.toast-container{bottom:calc(64px + 1rem);bottom:calc(var(--bottom-nav-height) + var(--space-4));left:1rem;left:var(--space-4);max-width:none;right:1rem;right:var(--space-4)}.modal{border-radius:20px;border-radius:var(--radius-xl);margin:1rem;margin:var(--space-4);max-height:calc(100vh - 2rem);max-height:calc(100vh - var(--space-8))}.loading-logo{width:80px}.loading-bar{max-width:280px;width:80%}.caustics,.particles,.wave-bg:nth-child(2),.wave-bg:nth-child(3){display:none}}@media (max-width:480px){.page-title{font-size:1.25rem;font-size:var(--text-xl)}.modal-body{padding:1rem;padding:var(--space-4)}.settings-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:#e0f7ff;color:var(--text-primary)}.text-secondary{color:#a8c8d8;color:var(--text-secondary)}.text-muted{color:#4a6a7a;color:var(--text-muted)}.text-success{color:#00ffc8;color:var(--success)}.text-warning{color:#ffb347;color:var(--warning)}.text-error{color:#ff6b9d;color:var(--error)}.text-info{color:#00d4ff;color:var(--bio-cyan)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem;gap:var(--space-1)}.gap-2{gap:.5rem;gap:var(--space-2)}.gap-3{gap:.75rem;gap:var(--space-3)}.gap-4{gap:1rem;gap:var(--space-4)}.w-full{width:100%}.h-full{height:100%}.rounded{border-radius:12px;border-radius:var(--radius-md)}.rounded-lg{border-radius:16px;border-radius:var(--radius-lg)}.rounded-xl{border-radius:20px;border-radius:var(--radius-xl)}.rounded-full{border-radius:9999px;border-radius:var(--radius-full)}.shadow{box-shadow:0 4px 12px #0006;box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:0 8px 32px #00d4ff1a;box-shadow:var(--shadow-lg)}.shadow-glow{box-shadow:0 0 20px #00d4ff80;box-shadow:var(--shadow-glow)}.mt-2{margin-top:.5rem;margin-top:var(--space-2)}.mt-4{margin-top:1rem;margin-top:var(--space-4)}.mb-2{margin-bottom:.5rem;margin-bottom:var(--space-2)}.mb-4{margin-bottom:1rem;margin-bottom:var(--space-4)}.p-2{padding:.5rem;padding:var(--space-2)}.p-4{padding:1rem;padding:var(--space-4)}.p-6{padding:1.5rem;padding:var(--space-6)}.hidden{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.float{animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-5px) rotate(.5deg)}50%{transform:translateY(-10px) rotate(0deg)}75%{transform:translateY(-5px) rotate(-.5deg)}}.glow-pulse{animation:glow-pulse 3s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #00d4ff80;box-shadow:0 0 20px var(--bio-cyan-glow);filter:brightness(1)}50%{box-shadow:0 0 40px #00d4ff80;box-shadow:0 0 40px var(--bio-cyan-glow);filter:brightness(1.1)}}.stagger-item{animation:rise-up .6s cubic-bezier(.4,0,.2,1) forwards;opacity:0}@keyframes rise-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.stagger-item:first-child{animation-delay:.1s}.stagger-item:nth-child(2){animation-delay:.2s}.stagger-item:nth-child(3){animation-delay:.3s}.stagger-item:nth-child(4){animation-delay:.4s}.stagger-item:nth-child(5){animation-delay:.5s}.vnc-container{aspect-ratio:16/9;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);overflow:hidden;position:relative;width:100%}.vnc-container.compact{aspect-ratio:4/3}.vnc-iframe{border:none;height:100%;width:100%}.vnc-overlay{align-items:center;background:#000000b3;border-radius:9999px;border-radius:var(--radius-full);color:#ff6b9d;color:var(--bio-coral);display:flex;font-size:.75rem;font-size:var(--text-xs);font-weight:600;gap:.25rem;gap:var(--space-1);padding:.25rem .5rem;padding:var(--space-1) var(--space-2);position:absolute;right:.75rem;right:var(--space-3);text-transform:uppercase;top:.75rem;top:var(--space-3)}.skeleton{background:#ffffff0d;background:var(--bg-glass);border-radius:12px;border-radius:var(--radius-md);overflow:hidden;position:relative}.skeleton-shimmer{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#00d4ff1a 50%,#0000);inset:0;position:absolute}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.skeleton-text{height:16px;margin-bottom:.5rem;margin-bottom:var(--space-2)}.skeleton-avatar{border-radius:50%}.skeleton-card{height:200px}.skeleton-stat{padding:1rem;padding:var(--space-4)}.skeleton-stat-value{height:32px;margin-bottom:.5rem;margin-bottom:var(--space-2);width:60%}.skeleton-stat-label{height:16px;width:40%}.command-palette-overlay{align-items:flex-start;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a1628e6;background:var(--bg-overlay);display:flex;inset:0;justify-content:center;padding-top:15vh;position:fixed;z-index:500;z-index:var(--z-modal)}.command-palette{background:#0d1e30fa;background:var(--bg-modal);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);box-shadow:0 25px 50px #00000080;max-width:560px;overflow:hidden;width:100%}.command-palette-header{align-items:center;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;gap:.75rem;gap:var(--space-3);padding:1rem;padding:var(--space-4)}.command-palette-input{background:#0000;border:none;color:#e0f7ff;color:var(--text-primary);flex:1 1;font-size:1rem;font-size:var(--text-base);outline:none}.command-palette-input::placeholder,.command-palette-kbd{color:#4a6a7a;color:var(--text-muted)}.command-palette-kbd{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:8px;border-radius:var(--radius-sm);font-size:.75rem;font-size:var(--text-xs);padding:.25rem .5rem;padding:var(--space-1) var(--space-2)}.command-palette-body{max-height:400px;overflow-y:auto}.command-palette-empty{color:#4a6a7a;color:var(--text-muted);padding:2rem;padding:var(--space-8);text-align:center}.command-palette-list{padding:.5rem;padding:var(--space-2)}.command-palette-item{align-items:center;border-radius:12px;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:.75rem;gap:var(--space-3);padding:.75rem;padding:var(--space-3);transition:background .15s cubic-bezier(.4,0,.2,1);transition:background var(--transition-fast)}.command-palette-item.selected,.command-palette-item:hover{background:#ffffff1a;background:var(--bg-glass-hover)}.command-palette-item-icon{color:#4a6a7a;color:var(--text-muted);flex-shrink:0}.command-palette-item-content{flex:1 1;min-width:0}.command-palette-item-name{color:#e0f7ff;color:var(--text-primary);font-weight:500}.command-palette-item-desc{color:#4a6a7a;color:var(--text-muted);display:block;font-size:.875rem;font-size:var(--text-sm)}.command-palette-item-shortcut{background:#ffffff0d;background:var(--bg-glass);border-radius:8px;border-radius:var(--radius-sm);padding:.25rem .5rem;padding:var(--space-1) var(--space-2)}.command-palette-footer,.command-palette-item-shortcut{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.command-palette-footer{align-items:center;border-top:1px solid #00d4ff1a;border-top:1px solid var(--border-subtle);display:flex;gap:1rem;gap:var(--space-4);justify-content:center;padding:.75rem;padding:var(--space-3)}.command-palette-footer kbd{background:#ffffff0d;background:var(--bg-glass);border-radius:4px;margin-right:.25rem;margin-right:var(--space-1);padding:2px 6px}.notification-center-overlay{background:#0000;inset:0;position:fixed;z-index:600;z-index:var(--z-popover)}.notification-center{background:#0d1e30fa;background:var(--bg-modal);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);box-shadow:0 12px 40px #00d4ff33;box-shadow:var(--shadow-xl);max-height:500px;overflow:hidden;position:absolute;right:1.5rem;right:var(--space-6);top:80px;width:380px}.notification-center-header{align-items:center;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;padding:1rem;padding:var(--space-4)}.notification-center-header h3{align-items:center;color:#e0f7ff;color:var(--text-primary);display:flex;font-size:1rem;font-size:var(--text-base);gap:.5rem;gap:var(--space-2)}.notification-badge{background:#ff6b9d;background:var(--bio-coral);border-radius:9999px;border-radius:var(--radius-full);color:#fff;font-size:10px;margin-left:.5rem;margin-left:var(--space-2);padding:2px 6px}.notification-center-actions{align-items:center;display:flex;gap:.5rem;gap:var(--space-2)}.notification-clear-btn,.notification-close-btn{align-items:center;background:none;border:none;border-radius:8px;border-radius:var(--radius-sm);color:#4a6a7a;color:var(--text-muted);cursor:pointer;display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.25rem;gap:var(--space-1);padding:.25rem;padding:var(--space-1);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.notification-clear-btn:hover{color:#ff6b9d;color:var(--error)}.notification-close-btn:hover{background:#ffffff0d;background:var(--bg-glass);color:#e0f7ff;color:var(--text-primary)}.notification-center-body{max-height:400px;overflow-y:auto}.notification-center-empty{color:#4a6a7a;color:var(--text-muted);padding:2rem;padding:var(--space-8);text-align:center}.notification-center-empty p{color:#a8c8d8;color:var(--text-secondary);font-weight:500;margin:.5rem 0;margin:var(--space-2) 0}.notification-list{padding:.5rem;padding:var(--space-2)}.notification-item{align-items:flex-start;border-radius:12px;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:.75rem;gap:var(--space-3);padding:.75rem;padding:var(--space-3);position:relative;transition:background .15s cubic-bezier(.4,0,.2,1);transition:background var(--transition-fast)}.notification-item:hover{background:#ffffff1a;background:var(--bg-glass-hover)}.notification-item.unread{background:#ffffff0d;background:var(--bg-glass)}.notification-item-icon{flex-shrink:0}.notification-item-content{flex:1 1;min-width:0}.notification-item-message{color:#e0f7ff;color:var(--text-primary);font-size:.875rem;font-size:var(--text-sm);margin-bottom:.25rem;margin-bottom:var(--space-1)}.notification-item-time{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.notification-unread-dot{background:#00d4ff;background:var(--bio-cyan);border-radius:50%;height:8px;position:absolute;right:.75rem;right:var(--space-3);top:.75rem;top:var(--space-3);width:8px}.dashboard-section{width:100%}.stats-row{grid-gap:1rem;grid-gap:var(--space-4);display:grid;gap:1rem;gap:var(--space-4);grid-template-columns:repeat(4,1fr);margin-bottom:1.5rem;margin-bottom:var(--space-6)}@media (max-width:1200px){.stats-row{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.stats-row{grid-template-columns:1fr}}.animated-stat-card{align-items:flex-start;animation:card-enter .5s ease forwards;animation-delay:var(--delay);background:#ffffff08;background:var(--bg-card);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:20px;border-radius:var(--radius-xl);display:flex;gap:1rem;gap:var(--space-4);opacity:0;overflow:hidden;padding:1.25rem;padding:var(--space-5);position:relative;transform:translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}@keyframes card-enter{to{opacity:1;transform:translateY(0)}}.animated-stat-card:hover{border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 8px 32px #00d4ff1a;box-shadow:var(--shadow-lg);transform:translateY(-5px)}.dashboard-grid{grid-gap:1.5rem;grid-gap:var(--space-6);display:grid;gap:1.5rem;gap:var(--space-6);grid-template-columns:1fr 400px}@media (max-width:1200px){.dashboard-grid{grid-template-columns:1fr}}.dashboard-col-left,.dashboard-col-right{display:flex;flex-direction:column;gap:1rem;gap:var(--space-4)}.live-header{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);justify-content:space-between;padding:.75rem;padding:var(--space-3)}.live-header,.live-header h3{align-items:center;display:flex}.live-header h3{color:#e0f7ff;color:var(--text-primary);font-size:1rem;font-size:var(--text-base);font-weight:600;gap:.5rem;gap:var(--space-2)}.view-toggle{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.view-toggle.active,.view-toggle:hover{background:#00d4ff;background:var(--bio-cyan);border-color:#00d4ff;border-color:var(--bio-cyan);color:#0a1628;color:var(--text-inverse)}.monitors-grid{grid-gap:1rem;grid-gap:var(--space-4);display:grid;gap:1rem;gap:var(--space-4);grid-template-columns:1fr}.monitor-card{padding:1rem;padding:var(--space-4)}.monitor-card .card-body{padding:0}.monitor-card .screenshot-container{aspect-ratio:16/10;max-height:180px}.live-badge{align-items:center;background:#ff6b9d1a;background:var(--error-bg);border:1px solid #ff6b9d4d;border-radius:9999px;border-radius:var(--radius-full);color:#ff6b9d;color:var(--error);display:inline-flex;font-size:10px;font-weight:700;gap:.25rem;gap:var(--space-1);letter-spacing:.05em;padding:.25rem .5rem;padding:var(--space-1) var(--space-2);text-transform:uppercase}.live-badge.guard{background:#00d4ff1a;background:var(--info-bg);border-color:#00d4ff4d;color:#00d4ff;color:var(--info)}.live-badge.pulsing{animation:live-badge-pulse 1.5s ease-in-out infinite}@keyframes live-badge-pulse{0%,to{box-shadow:0 0 10px #ff6b9d66;box-shadow:0 0 10px var(--error-glow);opacity:1}50%{box-shadow:0 0 20px #ff6b9d66;box-shadow:0 0 20px var(--error-glow);opacity:.7}}.vnc-card .card-body{padding:.75rem;padding:var(--space-3)}.vnc-actions{display:flex;justify-content:center;margin-top:.75rem;margin-top:var(--space-3)}.quick-stats-card .card-body{padding:.75rem;padding:var(--space-3)}.quick-stats-grid{grid-gap:.75rem;grid-gap:var(--space-3);display:grid;gap:.75rem;gap:var(--space-3);grid-template-columns:1fr 1fr}.quick-stat{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);padding:.75rem;padding:var(--space-3);text-align:center}.quick-stat .value{display:block;font-size:1.5rem;font-size:var(--text-2xl);font-weight:700;margin-bottom:.25rem;margin-bottom:var(--space-1)}.quick-stat .label{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.quick-stat.success .value{color:#00ffc8;color:var(--success)}.quick-stat.error .value{color:#ff6b9d;color:var(--error)}.timeline-card .card-body{max-height:300px;overflow-y:auto;padding:.75rem;padding:var(--space-3)}.activity-timeline{display:flex;flex-direction:column}.timeline-empty{color:#4a6a7a;color:var(--text-muted);padding:1.5rem;padding:var(--space-6);text-align:center}.timeline-empty p{margin-top:.5rem;margin-top:var(--space-2)}.timeline-list{display:flex;flex-direction:column}.timeline-item{animation:fade-in .3s ease forwards;animation-delay:calc(var(--index)*.05s);display:flex;gap:.75rem;gap:var(--space-3);opacity:0;padding:.5rem 0;padding:var(--space-2) 0}@keyframes fade-in{to{opacity:1}}.timeline-marker{flex-direction:column}.timeline-dot,.timeline-marker{align-items:center;display:flex}.timeline-dot{border-radius:50%;flex-shrink:0;height:28px;justify-content:center;width:28px}.timeline-item.success .timeline-dot{background:#00ffc81a;background:var(--success-bg);color:#00ffc8;color:var(--success)}.timeline-item.error .timeline-dot{background:#ff6b9d1a;background:var(--error-bg);color:#ff6b9d;color:var(--error)}.timeline-item.warning .timeline-dot{background:#ffb3471a;background:var(--warning-bg);color:#ffb347;color:var(--warning)}.timeline-item.info .timeline-dot{background:#00d4ff1a;background:var(--info-bg);color:#00d4ff;color:var(--info)}.timeline-line{background:#00d4ff1a;background:var(--border-subtle);flex:1 1;margin-top:.25rem;margin-top:var(--space-1);min-height:20px;width:2px}.timeline-content{flex:1 1;min-width:0}.timeline-message{color:#e0f7ff;color:var(--text-primary);font-size:.875rem;font-size:var(--text-sm);margin-bottom:.25rem;margin-bottom:var(--space-1)}.timeline-time{color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs)}.post-card .card-body{display:flex;flex-direction:column;gap:1rem;gap:var(--space-4)}.char-badge{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:9999px;border-radius:var(--radius-full);color:#4a6a7a;color:var(--text-muted);font-size:.75rem;font-size:var(--text-xs);padding:.25rem .5rem;padding:var(--space-1) var(--space-2)}.post-textarea{background:#0000004d;border:none;border-bottom:2px solid #00d4ff4d;border-radius:12px 12px 0 0;border-radius:var(--radius-md) var(--radius-md) 0 0;color:#e0f7ff;color:var(--text-primary);font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);font-size:1rem;font-size:var(--text-base);line-height:1.6;min-height:120px;padding:1rem;padding:var(--space-4);resize:vertical;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.post-textarea:focus{background:#00d4ff0d;border-bottom-color:#00d4ff;border-bottom-color:var(--bio-cyan);box-shadow:0 4px 20px #00d4ff1a;outline:none}.post-textarea::placeholder{color:#4a6a7a;color:var(--text-muted)}.image-section{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:16px;border-radius:var(--radius-lg);overflow:hidden}.image-header{align-items:center;border-bottom:1px solid #00d4ff1a;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;padding:.75rem;padding:var(--space-3)}.image-title{align-items:center;color:#a8c8d8;color:var(--text-secondary);font-size:.875rem;font-size:var(--text-sm);font-weight:500}.image-actions,.image-title{display:flex;gap:.5rem;gap:var(--space-2)}.btn-icon{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:36px}.btn-icon:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff;border-color:var(--bio-cyan);color:#00d4ff;color:var(--bio-cyan)}.btn-icon.danger:hover{background:#ff6b9d1a;background:var(--error-bg);border-color:#ff6b9d;border-color:var(--error);color:#ff6b9d;color:var(--error)}.upload-dropzone{cursor:pointer;padding:2rem;padding:var(--space-8);text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base)}.upload-dropzone:hover{background:#ffffff1a;background:var(--bg-glass-hover)}.upload-dropzone p{color:#a8c8d8;color:var(--text-secondary);margin-top:.5rem;margin-top:var(--space-2)}.upload-dropzone .hint{color:#4a6a7a;color:var(--text-muted);font-size:.875rem;font-size:var(--text-sm)}.uploading-overlay{animation:pulse 1.5s ease-in-out infinite;padding:2rem;padding:var(--space-8);text-align:center}.uploading-overlay p{color:#00d4ff;color:var(--bio-cyan);font-weight:500;margin-top:.75rem;margin-top:var(--space-3)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.image-grid{grid-gap:.5rem;grid-gap:var(--space-2);display:grid;gap:.5rem;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(80px,1fr));padding:.75rem;padding:var(--space-3)}.image-item{aspect-ratio:1;border:1px solid #00d4ff1a;border:1px solid var(--border-subtle);border-radius:12px;border-radius:var(--radius-md);overflow:hidden;position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.image-item:hover{border-color:#00d4ff;border-color:var(--bio-cyan);transform:scale(1.02)}.image-item img{height:100%;object-fit:cover;width:100%}.image-delete{align-items:center;background:#000000b3;border:none;border-radius:50%;color:#ff6b9d;color:var(--error);cursor:pointer;display:flex;height:20px;justify-content:center;opacity:0;position:absolute;right:.25rem;right:var(--space-1);top:.25rem;top:var(--space-1);transition:opacity .15s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-fast);width:20px}.image-item:hover .image-delete{opacity:1}.image-add-more{align-items:center;aspect-ratio:1;background:#ffffff0d;background:var(--bg-glass);border:2px dashed #00d4ff33;border:2px dashed var(--border-default);border-radius:12px;border-radius:var(--radius-md);color:#4a6a7a;color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;font-size:.75rem;font-size:var(--text-xs);gap:.25rem;gap:var(--space-1);justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.image-add-more:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:#00d4ff;border-color:var(--bio-cyan);color:#00d4ff;color:var(--bio-cyan)}.action-buttons{display:flex;gap:.75rem;gap:var(--space-3)}.action-buttons .btn{flex:1 1}.btn.glow{box-shadow:0 0 20px #00d4ff80;box-shadow:0 0 20px var(--bio-cyan-glow)}.btn.pulse{animation:btn-pulse 1.5s ease-in-out infinite}@keyframes btn-pulse{0%,to{box-shadow:0 4px 15px #ff6b9d66;box-shadow:0 4px 15px var(--error-glow)}50%{box-shadow:0 4px 30px #ff6b9d66;box-shadow:0 4px 30px var(--error-glow)}}.step-card .card-body{padding:1rem;padding:var(--space-4)}.group-badge{background:#7b68ee;background:var(--bio-purple);border-radius:9999px;border-radius:var(--radius-full);color:#fff;font-size:.75rem;font-size:var(--text-xs);max-width:150px;overflow:hidden;padding:.25rem .5rem;padding:var(--space-1) var(--space-2);text-overflow:ellipsis;white-space:nowrap}.step-progress{overflow-x:auto;padding:.5rem 0;padding:var(--space-2) 0}.step-item,.step-progress{align-items:center;display:flex;gap:.25rem;gap:var(--space-1)}.step-item{flex-shrink:0}.step-icon{align-items:center;background:#ffffff0d;background:var(--bg-glass);border:2px solid #00d4ff33;border:2px solid var(--border-default);border-radius:50%;color:#4a6a7a;color:var(--text-muted);display:flex;height:32px;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);transition:all var(--transition-base);width:32px}.step-item.completed .step-icon{background:#00ffc8;background:var(--success);border-color:#00ffc8;border-color:var(--success);color:#fff}.step-item.active .step-icon{animation:step-pulse 1s ease-in-out infinite;background:#00d4ff;background:var(--bio-cyan);border-color:#00d4ff;border-color:var(--bio-cyan);color:#fff}@keyframes step-pulse{0%,to{box-shadow:0 0 10px #00d4ff80;box-shadow:0 0 10px var(--bio-cyan-glow)}50%{box-shadow:0 0 25px #00d4ff80;box-shadow:0 0 25px var(--bio-cyan-glow)}}.step-name{color:#4a6a7a;color:var(--text-muted);display:none;font-size:10px;max-width:60px;text-align:center}@media (min-width:1024px){.step-name{display:block}}.step-connector{background:#00d4ff33;background:var(--border-default);flex-shrink:0;height:2px;width:20px}.step-item.active+.step-item .step-connector,.step-item.completed+.step-item .step-connector{background:#00d4ff;background:var(--bio-cyan)}.step-description{align-items:center;background:#ffffff0d;background:var(--bg-glass);border-radius:12px;border-radius:var(--radius-md);color:#a8c8d8;color:var(--text-secondary);display:flex;font-size:.875rem;font-size:var(--text-sm);gap:.5rem;gap:var(--space-2);margin-top:.75rem;margin-top:var(--space-3)}.logs-card .card-body,.step-description{padding:.75rem;padding:var(--space-3)}.card-actions{gap:.5rem;gap:var(--space-2)}.btn-icon-sm,.card-actions{align-items:center;display:flex}.btn-icon-sm{background:#0000;border:none;border-radius:8px;border-radius:var(--radius-sm);color:#4a6a7a;color:var(--text-muted);cursor:pointer;height:28px;justify-content:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:28px}.btn-icon-sm:hover{background:#ffffff0d;background:var(--bg-glass);color:#00d4ff;color:var(--bio-cyan)}.logs-empty{color:#4a6a7a;color:var(--text-muted);padding:1.5rem;padding:var(--space-6);text-align:center}.logs-empty p{margin-top:.5rem;margin-top:var(--space-2)}.countdown-bar{background:#ffffff0d;background:var(--bg-glass);height:4px;margin-top:.25rem;margin-top:var(--space-1);overflow:hidden;width:100%}.countdown-bar,.countdown-fill{border-radius:9999px;border-radius:var(--radius-full)}.countdown-fill{background:linear-gradient(90deg,#00d4ff,#00ffc8);background:linear-gradient(90deg,var(--bio-cyan),var(--bio-seafoam));height:100%;transition:width 1s linear}.card-badges{gap:.5rem;gap:var(--space-2)}.badge.success{background:#00ffc81a;background:var(--success-bg);border:1px solid #00ffc84d;color:#00ffc8;color:var(--success)}.badge.danger,.badge.error{background:#ff6b9d1a;background:var(--error-bg);border:1px solid #ff6b9d4d;color:#ff6b9d;color:var(--error)}.card-body{padding:1rem;padding:var(--space-4)}.history-info{flex:1 1;min-width:0}.history-info h4{color:#e0f7ff;color:var(--text-primary);font-size:.875rem;font-size:var(--text-sm);font-weight:500;margin-bottom:.25rem;margin-bottom:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-error{background:#ff6b9d1a;background:var(--error-bg);border-radius:8px;border-radius:var(--radius-sm);color:#ff6b9d;color:var(--error);font-size:.75rem;font-size:var(--text-xs);margin-top:.25rem;margin-top:var(--space-1);padding:.5rem;padding:var(--space-2)}.loading-bg{background:linear-gradient(180deg,#0a1628,#1e3a5f);background:linear-gradient(180deg,var(--bg-primary) 0,var(--bg-tertiary) 100%);inset:0;position:absolute}.loading-blur-overlay{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);background:#0a1628cc;inset:0;position:absolute}.loading-content{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:40px;position:relative;text-align:center;z-index:10}.loading-logo{animation:logoFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(0,212,255,.5));filter:drop-shadow(0 0 30px var(--bio-cyan-glow));height:auto;margin-bottom:30px;width:120px}@keyframes logoFloat{0%,to{filter:drop-shadow(0 0 20px rgba(0,212,255,.4));transform:translateY(0) scale(1)}50%{filter:drop-shadow(0 0 40px rgba(0,212,255,.8));transform:translateY(-15px) scale(1.05)}}.loading-bubbles{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.loading-bubbles span{animation:bubbleFloat 1.8s ease-in-out infinite;background:linear-gradient(135deg,#00d4ff,#00ffc8);background:linear-gradient(135deg,var(--bio-cyan) 0,var(--bio-seafoam) 100%);border-radius:50%;box-shadow:0 0 15px #00d4ff80;box-shadow:0 0 15px var(--bio-cyan-glow);height:16px;width:16px}.loading-bubbles span:first-child{animation-delay:0s}.loading-bubbles span:nth-child(2){animation-delay:.2s}.loading-bubbles span:nth-child(3){animation-delay:.4s}@keyframes bubbleFloat{0%,to{opacity:.6;transform:translateY(0) scale(1)}50%{box-shadow:0 0 25px #00d4ff80;box-shadow:0 0 25px var(--bio-cyan-glow);opacity:1;transform:translateY(-25px) scale(1.3)}}.loading-text{animation:textGlow 2s ease-in-out infinite;color:#e0f7ff;color:var(--text-primary);font-size:1.125rem;font-size:var(--text-lg);margin-bottom:20px;text-shadow:0 0 15px #00d4ff80;text-shadow:0 0 15px var(--bio-cyan-glow)}@keyframes textGlow{0%,to{text-shadow:0 0 10px #00d4ff80;text-shadow:0 0 10px var(--bio-cyan-glow)}50%{text-shadow:0 0 25px #00d4ff80,0 0 40px #00d4ff80;text-shadow:0 0 25px var(--bio-cyan-glow),0 0 40px var(--bio-cyan-glow)}}.bubbles-container{inset:0;overflow:hidden;pointer-events:none;position:fixed;z-index:-1}.bubble{background:radial-gradient(circle,#00d4ff33 0,#0000 70%);opacity:.4}.bubble:first-child{animation-delay:0s;animation-duration:15s;height:40px;left:10%;width:40px}.bubble:nth-child(2){animation-delay:2s;animation-duration:12s;height:25px;left:20%;width:25px}.bubble:nth-child(3){animation-delay:1s;animation-duration:18s;height:50px;left:35%;width:50px}.bubble:nth-child(4){animation-delay:3s;animation-duration:14s;height:30px;left:50%;width:30px}.bubble:nth-child(5){animation-delay:.5s;animation-duration:16s;height:45px;left:65%;width:45px}.bubble:nth-child(6){animation-delay:2.5s;animation-duration:11s;height:20px;left:75%;width:20px}.bubble:nth-child(7){animation-delay:1.5s;animation-duration:13s;height:35px;left:85%;width:35px}.bubble:nth-child(8){animation-delay:4s;animation-duration:20s;height:60px;left:5%;width:60px}.bubble:nth-child(9){animation-delay:3.5s;animation-duration:10s;height:22px;left:45%;width:22px}.bubble:nth-child(10){animation-delay:0s;animation-duration:17s;height:55px;left:90%;width:55px}.add-group-form,.groups-section{flex-direction:column}.add-group-form,.form-row,.groups-section{display:flex;gap:1rem;gap:var(--space-4)}.form-row>*{flex:1 1}@media (max-width:768px){.form-row{flex-direction:column}}.history-section{display:flex;flex-direction:column;gap:1rem;gap:var(--space-4)}.history-item .history-icon{align-items:center;border-radius:12px;border-radius:var(--radius-md);display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.history-item.success .history-icon{background:#00ffc81a;background:var(--success-bg);box-shadow:0 0 15px #00ffc866;box-shadow:0 0 15px var(--success-glow);color:#00ffc8;color:var(--success)}.history-item.error .history-icon{background:#ff6b9d1a;background:var(--error-bg);box-shadow:0 0 15px #ff6b9d66;box-shadow:0 0 15px var(--error-glow);color:#ff6b9d;color:var(--error)}.history-item.success:before{background:#00ffc8;background:var(--success)}.history-item.error:before,.history-item.success:before{border-radius:9999px 0 0 9999px;border-radius:var(--radius-full) 0 0 var(--radius-full);bottom:0;content:"";left:0;position:absolute;top:0;width:3px}.history-item.error:before{background:#ff6b9d;background:var(--error)}.history-item{padding-left:1rem;padding-left:var(--space-4);position:relative}.guard-section{display:flex;flex-direction:column;gap:1rem;gap:var(--space-4)}.settings-section .card{margin-bottom:1rem;margin-bottom:var(--space-4)}.setting-item input,.setting-item select{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);border-radius:12px;border-radius:var(--radius-md);color:#e0f7ff;color:var(--text-primary);font-family:Prompt,Sarabun,sans-serif;font-family:var(--font-thai);margin-top:.5rem;margin-top:var(--space-2);padding:.75rem;padding:var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.setting-item input:focus,.setting-item select:focus{border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 0 3px #00d4ff1a;outline:none}.setting-item label{color:#e0f7ff;color:var(--text-primary);font-weight:500;gap:.5rem;gap:var(--space-2)}.setting-item .hint{color:#4a6a7a;color:var(--text-muted);display:block;font-size:.75rem;font-size:var(--text-xs);margin-top:.25rem;margin-top:var(--space-1)}.mobile-nav-label{font-size:10px;font-weight:500}.fade-in{animation:fadeIn .3s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .4s ease forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.btn.primary{background:linear-gradient(135deg,#00d4ff,#7b68ee);background:linear-gradient(135deg,var(--bio-cyan) 0,var(--bio-purple) 100%);box-shadow:0 4px 15px #00d4ff80;box-shadow:0 4px 15px var(--bio-cyan-glow);color:#fff}.btn.primary:hover{box-shadow:0 6px 25px #00d4ff80;box-shadow:0 6px 25px var(--bio-cyan-glow);transform:scale(1.02)}.btn.secondary{background:#ffffff0d;background:var(--bg-glass);border:1px solid #00d4ff33;border:1px solid var(--border-default);color:#e0f7ff;color:var(--text-primary)}.btn.secondary:hover{background:#ffffff1a;background:var(--bg-glass-hover);border-color:var(--bio-cyan)}.btn.danger{background:linear-gradient(135deg,#ff6b9d,#f46);background:linear-gradient(135deg,var(--bio-coral) 0,#f46 100%);border:none;box-shadow:0 4px 15px #ff6b9d66;box-shadow:0 4px 15px var(--bio-coral-glow);color:#fff}.btn.danger:hover{box-shadow:0 6px 25px #ff6b9d66;box-shadow:0 6px 25px var(--bio-coral-glow);transform:scale(1.02)}.btn-sm{font-size:.75rem;font-size:var(--text-xs);padding:.5rem .75rem;padding:var(--space-2) var(--space-3)}.btn-sm.primary{align-items:center;background:linear-gradient(135deg,#00d4ff,#7b68ee);background:linear-gradient(135deg,var(--bio-cyan) 0,var(--bio-purple) 100%);border-radius:12px;border-radius:var(--radius-md);color:#fff;display:inline-flex;gap:.25rem;gap:var(--space-1);text-decoration:none}.page-header-status{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.status-divider,.status-separator{color:#00d4ff66;font-weight:300}.page-title-row{align-items:baseline;display:flex;gap:16px}.status-text{flex-direction:row;gap:8px}.status-text,.top-bar-right{align-items:center;display:flex}.top-bar-right{flex-direction:row!important;gap:16px}.status-info{align-items:center;display:flex;flex-direction:row;gap:12px}.status-info .status-dot{border-radius:50%;flex-shrink:0;height:10px;width:10px}.status-info .status-text{margin-left:8px;padding-left:4px}.progress-info{gap:8px}.progress-info,.safety-info{align-items:center;display:flex;flex-direction:row}.safety-info{gap:6px}.card-badges{gap:8px}.card-badges,.group-meta{align-items:center;display:flex;flex-direction:row}.group-meta{flex-wrap:wrap;gap:12px}.group-meta .meta-item{align-items:center;display:flex;gap:4px}.group-toggle{background:#ffffff1a;border:1px solid #00d4ff33;border-radius:13px;cursor:pointer;flex-shrink:0;height:26px;position:relative;transition:all .3s ease;width:50px}.group-toggle.active{background:linear-gradient(135deg,#00d4ff,#00ffc8);box-shadow:0 0 15px #00d4ff66}.group-toggle:after{background:#fff;border-radius:50%;box-shadow:0 2px 5px #0003;content:"";height:20px;left:3px;position:absolute;top:3px;transition:all .3s ease;width:20px}.group-toggle.active:after{left:calc(100% - 23px)}.group-item.active{display:flex!important;filter:none!important;opacity:1!important;visibility:visible!important}.group-item.active .group-info h4{color:#e0f7ff!important;text-decoration:none!important}.group-item.inactive{filter:grayscale(.3);opacity:.6}.group-item.inactive .group-info h4{color:#e0f7ff80;text-decoration:line-through}.btn-toggle{align-items:center!important;background:#0000!important;border:none!important;border-radius:8px!important;cursor:pointer!important;display:flex!important;justify-content:center!important;min-height:30px!important;min-width:40px!important;padding:4px!important;transition:all .3s ease!important}.btn-toggle:hover{background:#00d4ff1a!important}.btn-toggle.active{background:#00ffc81a!important}.btn-toggle img,.btn-toggle svg{height:28px!important;width:28px!important}.setting-item{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.setting-item label{align-items:center;display:flex;flex-wrap:nowrap;gap:12px;line-height:1.7;position:relative}.setting-item label input[type=checkbox]{flex-shrink:0;height:18px;margin:0;width:18px}.setting-item label .checkbox-custom{flex-shrink:0;height:20px;margin-right:8px;position:relative;width:20px}.setting-item label span{word-wrap:break-word;flex:1 1;white-space:normal}.setting-desc{color:#e0f7ffb3;line-height:1.8;margin-bottom:16px;padding-left:0}.checkbox-label{align-items:flex-start;display:flex;gap:12px}.checkbox-label span{flex:1 1;line-height:1.7;padding-top:2px}.info-box{background:#00d4ff0d;border:1px solid #00d4ff1a;border-radius:12px;border-radius:var(--radius-md);margin-top:16px;padding:16px}.info-box ol{line-height:2;margin-top:12px;padding-left:24px}.info-box li{margin-bottom:8px;position:relative}.info-header{align-items:center;display:flex;gap:8px}.hint{clear:both;display:block;margin-top:8px}.hint,.settings-section label,.settings-section p,.settings-section span{line-height:1.7}.settings-section h1,.settings-section h2,.settings-section h3,.settings-section h4{line-height:1.4;margin-bottom:16px}.important-text,.neon-text,.page-title,.text-highlight{color:#00d4ff;text-shadow:0 0 5px #00d4ff80,0 0 10px #00d4ff4d,0 0 20px #00d4ff33}.quick-stat .value,.stat-value{color:#00d4ff;text-shadow:0 0 5px #00d4ff,0 0 10px #00d4ff80,0 0 20px #00d4ff4d}@keyframes neonPulse{0%,to{text-shadow:0 0 5px #00d4ff80,0 0 10px #00d4ff4d,0 0 20px #00d4ff33}50%{text-shadow:0 0 10px #00d4ffcc,0 0 20px #00d4ff80,0 0 30px #00d4ff4d,0 0 40px #00d4ff33}}.neon-glow-intense{animation:neonPulse 2s ease-in-out infinite}.neon-underline{color:#00d4ff;position:relative}.neon-underline:after{background:#00d4ff;bottom:-2px;box-shadow:0 0 10px #00d4ff,0 0 20px #00d4ff;content:"";height:2px;left:0;position:absolute;width:100%}code{background:#00ffc81a;border-radius:4px;color:#00ffc8;font-family:Consolas,monospace;padding:2px 8px;text-shadow:0 0 5px #00ffc84d}.nav-item.active .nav-label{color:#00d4ff;text-shadow:0 0 10px #00d4ff80}.meta-item.ready,.status-badge.running{color:#00ffc8;text-shadow:0 0 10px #00ffc880}.btn:hover{background:linear-gradient(135deg,#00d4ff66,#7b68ee66);border-color:#00d4ff99;box-shadow:0 10px 30px #00d4ff4d,0 0 20px #00d4ff33,inset 0 0 20px #00d4ff1a;transform:translateY(-3px)}.btn.primary{animation:gradientShift 3s ease infinite;background:linear-gradient(135deg,#00d4ff,#00ffc8 50%,#7b68ee);background-size:200% 200%;border:none;box-shadow:0 5px 20px #00d4ff66;color:#0a1628;font-weight:700}@keyframes gradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.btn.primary:hover{box-shadow:0 15px 40px #00d4ff80,0 0 30px #00d4ff4d;transform:translateY(-3px) scale(1.02)}.btn.secondary:hover{background:#00d4ff1a;border-color:#00d4ff;box-shadow:0 0 20px #00d4ff4d}.btn.success{background:linear-gradient(135deg,#00ffc833,#00d4ff33);border:1px solid #00ffc84d;color:#00ffc8}.btn.success:hover{background:#00ffc84d;border-color:#00ffc8;box-shadow:0 0 20px #00ffc84d}.btn:before{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease;width:0}.btn:active:before{height:300px;opacity:0;width:300px}.light-orb{animation:floatOrb 20s ease-in-out infinite;border-radius:50%;filter:blur(40px);opacity:.15;pointer-events:none;position:fixed;z-index:-1}.light-orb-1{animation-delay:0s;background:radial-gradient(circle,#00d4ff 0,#0000 70%);height:300px;left:10%;top:10%;width:300px}.light-orb-2{animation-delay:-7s;background:radial-gradient(circle,#7b68ee 0,#0000 70%);height:400px;right:5%;top:50%;width:400px}.light-orb-3{animation-delay:-14s;background:radial-gradient(circle,#00ffc8 0,#0000 70%);bottom:20%;height:250px;left:30%;width:250px}@keyframes floatOrb{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.1)}50%{transform:translate(-20px,20px) scale(.9)}75%{transform:translate(20px,10px) scale(1.05)}}.card.glass{overflow:hidden;position:relative}.card.glass:before{background:linear-gradient(90deg,#0000,#00d4ff1a,#0000);content:"";height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transition:left .5s ease;width:100%;z-index:1}.card.glass:hover:before{left:100%}.card.glass:after{animation:surfaceShimmer 8s linear infinite;background:linear-gradient(90deg,#0000,#00d4ff80,#00ffc880,#00d4ff80,#0000);background-size:1000px 1px;content:"";height:1px;left:0;position:absolute;right:0;top:0;z-index:2}@keyframes surfaceShimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.ripple{animation:rippleEffect .6s ease-out forwards;background:#00d4ff66;border-radius:50%;pointer-events:none;position:fixed;transform:scale(0);z-index:9999}@keyframes rippleEffect{to{opacity:0;transform:scale(4)}}@keyframes gentleWave{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-3px) rotate(.3deg)}50%{transform:translateY(-5px) rotate(0deg)}75%{transform:translateY(-3px) rotate(-.3deg)}}.group-item{animation:gentleWave 8s ease-in-out infinite}.group-item:first-child{animation-delay:0s}.group-item:nth-child(2){animation-delay:.5s}.group-item:nth-child(3){animation-delay:1s}.group-item:nth-child(4){animation-delay:1.5s}.group-item:nth-child(5){animation-delay:2s}.group-item:nth-child(6){animation-delay:2.5s}.group-item:nth-child(7){animation-delay:3s}.group-item:nth-child(8){animation-delay:3.5s}@keyframes flowIn{0%{filter:blur(10px);opacity:0;transform:translateY(20px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}.card-title h3,.page-title{animation:flowIn .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes riseFromWater{0%{filter:blur(5px);opacity:0;transform:translateY(50px) scale(.95)}to{filter:blur(0);opacity:1;transform:translateY(0) scale(1)}}.dashboard-section>*,.groups-section>*,.guard-section>*,.history-section>*,.settings-section>*{animation:riseFromWater .6s cubic-bezier(.4,0,.2,1) backwards}.dashboard-section>:first-child,.groups-section>:first-child,.guard-section>:first-child,.history-section>:first-child,.settings-section>:first-child{animation-delay:.1s}.dashboard-section>:nth-child(2),.groups-section>:nth-child(2),.guard-section>:nth-child(2),.history-section>:nth-child(2),.settings-section>:nth-child(2){animation-delay:.2s}.dashboard-section>:nth-child(3),.groups-section>:nth-child(3),.guard-section>:nth-child(3),.history-section>:nth-child(3),.settings-section>:nth-child(3){animation-delay:.3s}.dashboard-section>:nth-child(4),.groups-section>:nth-child(4),.guard-section>:nth-child(4),.history-section>:nth-child(4),.settings-section>:nth-child(4){animation-delay:.4s}@keyframes iconFloat{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(5deg)}}.card-title svg,.nav-icon svg{animation:iconFloat 4s ease-in-out infinite}@keyframes borderGlow{0%,to{box-shadow:0 0 5px #00d4ff4d,inset 0 0 5px #00d4ff1a}50%{box-shadow:0 0 20px #00d4ff80,inset 0 0 10px #00d4ff33}}.group-item:hover,input:focus,textarea:focus{animation:borderGlow 2s ease-in-out infinite}.ocean-waves{bottom:0;height:100px;left:0;overflow:hidden;pointer-events:none;position:fixed;width:100%;z-index:0}.wave{background-repeat:repeat-x;bottom:0;height:100%;position:absolute;transform-origin:center bottom;width:200%}.wave-1{animation:waveAnimation 15s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300D4FF' fill-opacity='.1' d='m0 192 48 5.3c48 5.7 144 15.7 240 32 96 15.7 192 37.7 288 21.4 96-15.7 192-69.7 288-69.4 96-.3 192 53.7 288 53.4 96 .3 192-53.7 240-80l48-26.7v192H0Z'/%3E%3C/svg%3E")}.wave-2{animation:waveAnimation 12s linear infinite reverse;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300FFC8' fill-opacity='.05' d='m0 64 48 16c48 16 144 48 240 48s192-32 288-37.3C672 85 768 107 864 144s192 91 288 90.7c96 .3 192-53.7 240-80l48-26.7v192H0Z'/%3E%3C/svg%3E");opacity:.7}.wave-3{animation:waveAnimation 18s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%237B68EE' fill-opacity='.05' d='m0 256 48-26.7C96 203 192 149 288 154.7c96 5.3 192 69.3 288 64C672 213 768 139 864 128s192 43 288 69.3c96 26.7 192 26.7 240 26.7h48v96H0Z'/%3E%3C/svg%3E");opacity:.5}@keyframes waveAnimation{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.bubble{animation:bubbleRise linear infinite;background:radial-gradient(circle,#00d4ff4d 0,#0000 70%);bottom:-100px;pointer-events:none}.bubble,.bubble:before{border-radius:50%;position:absolute}.bubble:before{background:radial-gradient(circle,#fff6 0,#0000 70%);content:"";height:30%;left:20%;top:20%;width:30%}@keyframes bubbleRise{0%{opacity:.6;transform:translateY(0) translateX(0) scale(1)}25%{opacity:.8;transform:translateY(-25vh) translateX(15px) scale(1.1)}50%{opacity:.6;transform:translateY(-50vh) translateX(-10px) scale(.9)}75%{opacity:.4;transform:translateY(-75vh) translateX(20px) scale(1.05)}to{opacity:0;transform:translateY(-110vh) translateX(0) scale(1)}}.bubble.cyan{background:radial-gradient(circle,#00d4ff40 0,#0000 70%)}.bubble.seafoam{background:radial-gradient(circle,#00ffc833 0,#0000 70%)}.bubble.purple{background:radial-gradient(circle,#7b68ee33 0,#0000 70%)}.setting-section,.settings-section{display:flex!important;flex-direction:column!important;gap:20px!important;margin-bottom:30px!important;position:relative!important;z-index:1!important}.checkbox-container,.checkbox-row,.setting-checkbox{align-items:center!important;display:flex!important;flex-wrap:nowrap!important;gap:12px!important;margin-bottom:16px!important}.checkbox-container input[type=checkbox],.checkbox-row input[type=checkbox],.setting-checkbox input[type=checkbox]{flex-shrink:0!important;height:20px!important;margin:0!important;width:20px!important}.checkbox-container label,.checkbox-row label,.setting-checkbox label{display:inline-block!important;margin:0!important;position:relative!important;white-space:nowrap!important}.section-title,.setting-title,.settings-title{clear:both!important;color:#00d4ff!important;display:block!important;font-size:1.1rem!important;font-weight:600!important;margin-bottom:12px!important;margin-top:20px!important;width:100%!important}.help-list,.instruction-list,.settings-instructions{display:flex!important;flex-direction:column!important;gap:12px!important;list-style:none!important;margin-top:16px!important;padding-left:0!important}.help-list li,.instruction-list li,.settings-instructions li{align-items:flex-start!important;display:flex!important;gap:10px!important;line-height:1.8!important;padding:8px 0!important;position:relative!important}.instruction-list li:before,.settings-instructions li:before{align-items:center!important;background:#00d4ff33!important;border-radius:50%!important;color:#00d4ff!important;content:attr(data-step)!important;display:flex!important;flex-shrink:0!important;font-size:.85rem!important;height:24px!important;justify-content:center!important;min-width:24px!important}.code-highlight,.path-highlight,code{background:#00d4ff1a!important;border:1px solid #00d4ff4d!important;border-radius:6px!important;color:#00ffc8!important;display:inline-block!important;font-family:monospace!important;margin:0 4px!important;padding:4px 10px!important;white-space:nowrap!important}.setting-section *,.settings-content *,.settings-page *{box-sizing:border-box!important}.settings-page div:not(.bubbles-container):not(.bubble):not(.light-orb):not(.ocean-waves):not(.wave),.settings-page label,.settings-page p,.settings-page span{position:relative!important;z-index:1!important}.setting-input,.settings-input{background:#ffffff0d!important;border:1px solid #00d4ff33!important;border-radius:10px!important;color:#e0f7ff!important;margin-top:8px!important;padding:12px 16px!important;width:100%!important}.help-text,.setting-description,.settings-description{color:#e0f7ff99!important;display:block!important;font-size:.9rem!important;line-height:1.6!important;margin-top:8px!important}.group-page,.groups-page{display:flex!important;flex-direction:column!important;gap:24px!important;min-height:100vh!important;padding:24px!important}.page-header{align-items:center!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:#0a1628f2!important;display:flex!important;justify-content:space-between!important;margin-bottom:24px!important;padding:16px 0!important;position:-webkit-sticky!important;position:sticky!important;top:0!important;z-index:100!important}.group-list,.group-list-container,.groups-list{display:flex!important;flex-direction:column!important;gap:16px!important;max-height:none!important;overflow-y:visible!important;padding-bottom:20px!important}.group-card,.group-item{align-items:center!important;background:#ffffff08!important;border:1px solid #00d4ff26!important;border-radius:16px!important;display:flex!important;justify-content:space-between!important;min-height:80px!important;padding:16px 20px!important;transition:all .3s ease!important}.group-card:hover,.group-item:hover{background:#00d4ff0d!important;border-color:#00d4ff4d!important;box-shadow:0 8px 25px #00d4ff26!important;transform:translateY(-2px)!important}.group-info{display:flex!important;flex:1 1!important;flex-direction:column!important;gap:6px!important;min-width:0!important}.group-name{color:#e0f7ff!important;font-size:1rem!important;font-weight:600!important}.group-name,.group-url{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.group-url{color:#e0f7ff80!important;font-size:.85rem!important;max-width:300px!important;word-break:break-all!important}.group-stats{align-items:center!important;display:flex!important;gap:16px!important;margin-top:4px!important}.group-actions{align-items:center!important;flex-shrink:0!important;gap:12px!important}.group-actions,.group-actions .btn-icon,.group-actions .btn-toggle,.group-actions button{display:flex!important;opacity:1!important;visibility:visible!important}.status-badge,.status-display{align-items:center!important;display:inline-flex!important;gap:8px!important;white-space:nowrap!important}.status-dot,.status-icon{border-radius:50%!important;flex-shrink:0!important;height:10px!important;margin-right:6px!important;width:10px!important}.status-dot.ready,.status-icon.ready,.status-icon.success{background:#00ffc8!important;box-shadow:0 0 10px #00ffc880!important}.status-dot.error,.status-icon.error,.status-icon.fail{background:#ff6b9d!important;box-shadow:0 0 10px #ff6b9d80!important}.status-text{white-space:nowrap!important}.header-status,.page-title-status{align-items:center!important;display:flex!important;flex-wrap:wrap!important;gap:16px!important}.page-title{color:#00d4ff!important;font-size:1.5rem!important;font-weight:700!important;margin:0!important;text-shadow:0 0 10px #00d4ff4d!important}.page-status,.status-pill{align-items:center!important;background:#00ffc81a!important;border:1px solid #00ffc84d!important;border-radius:20px!important;display:flex!important;gap:8px!important;padding:6px 14px!important}.page-status .status-dot,.status-pill .status-dot{background:#00ffc8!important;border-radius:50%!important;box-shadow:0 0 8px #00ffc8!important;flex-shrink:0!important;height:8px!important;margin-right:0!important;width:8px!important}.page-status .status-label,.status-pill .status-label{color:#00ffc8!important;font-size:.9rem!important;margin-left:4px!important}.toggle-switch{cursor:pointer!important;display:inline-block!important;flex-shrink:0!important;height:26px!important;position:relative!important;width:50px!important}.toggle-switch input{height:0!important;opacity:0!important;position:absolute!important;width:0!important}.toggle-slider{background:#ffffff1a!important;border:1px solid #fff3!important;border-radius:26px!important;inset:0!important}.toggle-slider,.toggle-slider:before{position:absolute!important;transition:all .3s ease!important}.toggle-slider:before{background:#fff!important;border-radius:50%!important;box-shadow:0 2px 5px #0003!important;content:""!important;height:18px!important;left:3px!important;top:3px!important;width:18px!important}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#00d4ff,#00ffc8)!important;border-color:#00d4ff80!important;box-shadow:0 0 15px #00d4ff4d!important}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(24px)!important}.group-card.active,.group-item.active{background:#00ffc808!important;border-color:#00ffc833!important;display:flex!important;filter:none!important;opacity:1!important;visibility:visible!important}.group-card.active .group-name,.group-item.active .group-name{color:#e0f7ff!important;text-decoration:none!important}.group-card.disabled,.group-card.inactive,.group-item.disabled,.group-item.inactive{filter:grayscale(.3)!important;opacity:.6!important}.group-card.disabled .group-name,.group-card.inactive .group-name,.group-item.disabled .group-name,.group-item.inactive .group-name{color:#e0f7ff80!important;text-decoration:line-through!important}.toggle-switch:hover .toggle-slider{border-color:#00d4ff80!important;box-shadow:0 0 10px #00d4ff33!important}.mobile-bottom-nav,.mobile-header{display:none}.mobile-only{display:none!important}@media (max-width:768px){.sidebar{display:none!important}.mobile-header{backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;background:#0a1628f2!important;border-bottom:1px solid #00d4ff26!important;height:60px!important;justify-content:space-between!important;left:0!important;padding:0 16px!important;position:fixed!important;right:0!important;top:0!important;z-index:1000!important}.mobile-header,.mobile-header .header-left{align-items:center!important;display:flex!important}.mobile-header .header-left{gap:10px!important}.mobile-header .logo{height:35px!important;width:auto!important}.mobile-header .app-title{color:#e0f7ff!important;font-size:1rem!important;font-weight:600!important}.mobile-header .header-actions{gap:12px!important}.mobile-bottom-nav,.mobile-header .header-actions{align-items:center!important;display:flex!important}.mobile-bottom-nav{backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;background:#0a1628fa!important;border-top:1px solid #00d4ff26!important;bottom:0!important;height:70px!important;justify-content:space-around!important;left:0!important;padding:8px 0 calc(8px + env(safe-area-inset-bottom))!important;position:fixed!important;right:0!important;z-index:1000!important}.mobile-nav-item{align-items:center!important;background:#0000!important;border:none!important;border-radius:12px!important;color:#e0f7ff99!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;gap:4px!important;justify-content:center!important;min-width:60px!important;overflow:hidden!important;padding:8px 16px!important;position:relative!important;text-decoration:none!important;transition:all .3s ease!important}.mobile-nav-item:active{transform:scale(.95)!important}.mobile-nav-item.active{background:#00d4ff1a!important;color:#00d4ff!important}.mobile-nav-item .nav-icon{align-items:center!important;display:flex!important;font-size:24px!important;height:28px!important;justify-content:center!important;width:28px!important}.mobile-nav-item.active .nav-icon{filter:drop-shadow(0 0 8px rgba(0,212,255,.6))!important}.mobile-nav-item .nav-label{font-size:10px!important;font-weight:500!important;white-space:nowrap!important}.mobile-nav-item.active:after{background:#00d4ff!important;border-radius:0 0 3px 3px!important;box-shadow:0 0 10px #00d4ff!important;content:""!important;height:3px!important;left:50%!important;position:absolute!important;top:0!important;transform:translateX(-50%)!important;width:20px!important}.nav-ripple{animation:navRipple .5s ease-out!important;background:#00d4ff4d!important;border-radius:50%!important;height:100%!important;position:absolute!important;transform:scale(0)!important;width:100%!important}@keyframes navRipple{to{opacity:0!important;transform:scale(2.5)!important}}.notification-btn{background:#0000!important;border:none!important;cursor:pointer!important;font-size:20px!important;padding:8px!important;position:relative!important}.notification-badge{align-items:center!important;background:#ff6b9d!important;border-radius:50%!important;box-shadow:0 0 10px #ff6b9d80!important;color:#fff!important;display:flex!important;font-size:10px!important;font-weight:600!important;height:18px!important;justify-content:center!important;position:absolute!important;right:0!important;top:0!important;width:18px!important}.mobile-header{transition:transform .3s ease!important}.main-content{padding:70px 16px 90px!important}.app-shell,.app-shell.sidebar-collapsed,.main-content{margin-left:0!important}.page-header{align-items:flex-start!important;background:#0000!important;flex-direction:column!important;gap:12px!important;position:relative!important}.page-title{font-size:1.3rem!important}.card{border-radius:14px!important;padding:16px!important}.group-card,.group-item{align-items:flex-start!important;flex-direction:column!important;gap:12px!important;padding:14px!important}.group-info{width:100%!important}.group-url{max-width:100%!important}.group-actions{border-top:1px solid #00d4ff1a!important;justify-content:flex-end!important;padding-top:8px!important}.btn-full-mobile,.btn-primary,.group-actions{width:100%!important}.stats-grid{gap:12px!important;grid-template-columns:repeat(2,1fr)!important}.mobile-only{display:flex!important}.desktop-only{display:none!important}.setting-section,.settings-page{padding:12px!important}.checkbox-row,.setting-checkbox{flex-wrap:wrap!important}.checkbox-row label,.setting-checkbox label{flex:1 1!important;white-space:normal!important}.code-highlight,code{white-space:normal!important;word-break:break-all!important}.bubbles-container{opacity:.5!important}.light-orb-2,.light-orb-3,.wave-2,.wave-3{display:none!important}.toggle-switch{height:24px!important;width:44px!important}.toggle-slider:before{height:16px!important;width:16px!important}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)!important}.history-item{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}.stat-card{padding:14px!important}.stat-value{font-size:1.5rem!important}input[type=email],input[type=number],input[type=password],input[type=text],select,textarea{font-size:16px!important}.modal-content{margin:10px!important;max-height:85vh!important;max-width:95%!important;overflow-y:auto!important;width:95%!important}.top-bar{flex-wrap:wrap!important;gap:8px!important;padding:12px!important}.top-bar-left,.top-bar-right{justify-content:space-between!important;width:100%!important}}@media (min-width:769px) and (max-width:1024px){.sidebar{width:200px!important}.sidebar.collapsed{width:70px!important}.main-content{margin-left:200px!important}.app-shell.sidebar-collapsed .main-content{margin-left:70px!important}.stats-grid{grid-template-columns:repeat(2,1fr)!important}.group-url{max-width:200px!important}}@media (min-width:769px){.mobile-bottom-nav,.mobile-header,.mobile-only{display:none!important}}.permission-screen{align-items:center;animation:fadeIn .4s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#001428fa,#00283cfa 50%,#001e32fa);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.permission-bg{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.permission-orb{animation:permissionOrbFloat 8s ease-in-out infinite;border-radius:50%;filter:blur(100px);opacity:.3;position:absolute}.permission-orb-1{animation-delay:0s;background:linear-gradient(135deg,var(--ocean-cyan),var(--ocean-teal));height:400px;left:-100px;top:-100px;width:400px}.permission-orb-2{animation-delay:-4s;background:linear-gradient(135deg,var(--ocean-teal),#0a1628);background:linear-gradient(135deg,var(--ocean-teal),var(--ocean-deep));bottom:-50px;height:300px;right:-50px;width:300px}@keyframes permissionOrbFloat{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,30px) scale(1.1)}}.permission-content{animation:scaleIn .5s cubic-bezier(.175,.885,.32,1.275);background:#001e3c99;border:1px solid #00d4ff33;border-radius:24px;box-shadow:0 25px 80px #00000080,0 0 60px #00d4ff1a,inset 0 1px 0 #ffffff0d;max-width:450px;padding:3rem;position:relative;text-align:center;z-index:1}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.permission-icon{animation:bellRing 2s ease-in-out infinite;margin-bottom:1.5rem}@keyframes bellRing{0%,to{transform:rotate(0deg)}10%,30%{transform:rotate(-8deg)}20%,40%{transform:rotate(8deg)}50%{transform:rotate(0deg)}}.permission-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--ocean-text),var(--ocean-cyan));-webkit-background-clip:text;background-clip:text;color:var(--ocean-text);font-size:2rem;font-weight:700;margin:0 0 1rem;text-shadow:0 0 30px #00d4ff66}.permission-desc{color:var(--ocean-text-secondary);font-size:1rem;line-height:1.7;margin-bottom:2rem}.permission-btn{align-items:center;animation:pulseGlow 2s ease-in-out infinite;background:linear-gradient(135deg,var(--ocean-cyan),var(--ocean-teal));border:none;border-radius:50px;box-shadow:0 8px 30px #00d4ff66,0 0 20px #00d4ff33;color:var(--ocean-bg-primary);cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;gap:10px;padding:1rem 2.5rem;transition:all .3s ease}.permission-btn:hover{box-shadow:0 12px 40px #00d4ff99,0 0 40px #00d4ff66;transform:translateY(-3px) scale(1.02)}.permission-btn:active{transform:translateY(-1px)}@keyframes pulseGlow{0%,to{box-shadow:0 8px 30px #00d4ff66,0 0 20px #00d4ff33}50%{box-shadow:0 8px 40px #00d4ff99,0 0 30px #00d4ff66}}.permission-denied{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:12px;color:#ff6b6b;padding:1rem 1.5rem}.permission-denied,.permission-skip{align-items:center;display:flex;font-size:.9rem;gap:8px;justify-content:center;margin-top:1.5rem}.permission-skip{background:#0000;border:1px solid #fff3;border-radius:30px;color:var(--ocean-text-secondary);cursor:pointer;margin-left:auto;margin-right:auto;padding:.8rem 1.5rem;transition:all .3s ease;width:auto}.permission-skip:hover{background:#ffffff0d;border-color:#ffffff4d;color:var(--ocean-text)}.notification-status-box{background:#001e3c66;border:1px solid #00d4ff1a;border-radius:12px;margin-bottom:1rem;padding:1rem}.notification-status-indicator{align-items:center;display:flex;gap:12px}.notification-status-indicator .status-dot{border-radius:50%;flex-shrink:0;height:12px;width:12px}.notification-status-indicator .status-dot.success{background:var(--ocean-success);box-shadow:0 0 15px #00ffc880}.notification-status-indicator .status-dot.error{background:var(--ocean-error);box-shadow:0 0 15px #ff6b6b80}.notification-status-indicator .status-dot.warning{background:var(--ocean-warning);box-shadow:0 0 15px #ffc85780}.notification-status-indicator .status-label{color:var(--ocean-text);font-size:1rem;font-weight:500}.notification-enable-btn{font-size:1rem;justify-content:center;margin-top:1rem;padding:1rem!important;width:100%}.info-box.warning{background:#ffc8571a;border-color:#ffc8574d}.info-box.warning .info-header{color:var(--ocean-warning)}.info-box.warning li,.info-box.warning p{color:var(--ocean-text-secondary)}.info-box.success{background:#00ffc81a;border-color:#00ffc84d}.info-box.success .info-header{color:var(--ocean-success)}.info-box.success p{color:var(--ocean-text-secondary)}.scanner-modal .modal-content{max-width:700px!important;width:90%!important}.scanner-idle{padding:40px 20px;text-align:center}.scanner-idle .scanner-icon{animation:pulse 2s ease-in-out infinite;color:#00d4ff;color:var(--bio-cyan);font-size:64px;margin-bottom:20px}.scanner-idle h3{color:#e0f7ff;color:var(--text-primary);font-size:1.5rem;margin-bottom:12px}.scanner-idle p{color:#a8c8d8;color:var(--text-secondary);font-size:.95rem;margin-bottom:24px}.scanner-idle .btn-scan{align-items:center;background:linear-gradient(135deg,#00d4ff,#00ffc8);border:none;border-radius:12px;box-shadow:0 5px 20px #00d4ff66;color:#0a1628;cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;gap:10px;padding:14px 32px;transition:all .3s ease}.scanner-idle .btn-scan:hover{box-shadow:0 10px 30px #00d4ff80;transform:translateY(-3px)}.scanner-progress{padding:40px 20px;text-align:center}.scanner-progress .spinner{animation:spin 1s linear infinite;border:4px solid #00d4ff33;border-radius:50%;border-top:4px solid var(--bio-cyan);height:60px;margin:0 auto 24px;width:60px}@keyframes spin{to{transform:rotate(1turn)}}.scanner-progress h3{color:#e0f7ff;color:var(--text-primary);font-size:1.3rem;margin-bottom:8px}.scanner-progress .progress-text{color:#00d4ff;color:var(--bio-cyan);font-size:.95rem;margin-bottom:4px}.scanner-progress .progress-count{color:#4a6a7a;color:var(--text-muted);font-size:.9rem;margin-bottom:20px}.scanner-progress .btn-stop{background:#ff6b9d33;border:1px solid #ff6b9d66;border-radius:8px;color:#ff6b9d;cursor:pointer;padding:10px 24px;transition:all .3s ease}.scanner-progress .btn-stop:hover{background:#ff6b9d4d}.scanner-status-header{margin-bottom:16px;text-align:center}.scanner-status-header .status-badge{border-radius:20px;display:inline-block;font-size:.85rem;font-weight:600;letter-spacing:.5px;padding:6px 16px;text-transform:uppercase}.status-badge.checking_login,.status-badge.initializing{background:#6464ff33;border:1px solid #6464ff66;color:#8b8bff}.status-badge.login_required{animation:pulse-warning 1.5s infinite;background:#ffc10733;border:1px solid #ffc10766;color:#ffc107}.status-badge.loading,.status-badge.navigating{background:#00d4ff33;border:1px solid #00d4ff66;color:#00d4ff;color:var(--bio-cyan)}.status-badge.checking,.status-badge.extracting{background:#0f83;border:1px solid #0f86;color:var(--bio-green)}.status-badge.complete{background:#00ff884d;border:1px solid #00ff8880;color:var(--bio-green)}.status-badge.error{background:#ff6b9d33;border:1px solid #ff6b9d66;color:#ff6b9d}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.6}}.scanner-screenshot-container{align-items:center;background:#0006;border:1px solid #00d4ff4d;border-radius:8px;display:flex;justify-content:center;margin-bottom:16px;min-height:200px;overflow:hidden}.scanner-screenshot{display:block;height:auto;max-height:350px;object-fit:contain;width:100%}.screenshot-placeholder{color:#4a6a7a;color:var(--text-muted);padding:40px;text-align:center}.screenshot-placeholder p{font-size:.9rem;margin-top:16px}.scanner-live-stats{background:#0000004d;border:1px solid #ffffff1a;border-radius:12px;display:flex;gap:24px;justify-content:center;margin-bottom:20px;padding:16px}.live-stat{align-items:center;background:#ffffff0d;border-radius:8px;display:flex;flex-direction:column;gap:4px;padding:12px 24px}.live-stat.added{background:#22c55e26;border:1px solid #22c55e4d}.live-stat.skipped{background:#fbbf2426;border:1px solid #fbbf244d}.live-stat .stat-icon{font-size:1.5rem}.live-stat .stat-value{color:#e0f7ff;color:var(--text-primary);font-size:2rem;font-weight:700}.live-stat.added .stat-value{color:#22c55e}.live-stat.skipped .stat-value{color:#fbbf24}.live-stat .stat-label{color:#4a6a7a;color:var(--text-muted);font-size:.85rem}.scanner-vnc-container{background:#8b5cf61a;border:1px solid #8b5cf64d;border-radius:12px;margin-bottom:20px;padding:16px;text-align:center}.vnc-link{align-items:center;display:inline-flex;font-size:1rem;gap:8px;padding:12px 24px;text-decoration:none}.vnc-hint-text{color:#4a6a7a;color:var(--text-muted);font-size:.85rem;margin-top:10px}.scanner-status-text{margin-bottom:16px;text-align:center}.scanner-status-text .status-message{color:#e0f7ff;color:var(--text-primary);font-size:1.1rem;font-weight:500;margin-bottom:4px}.scanner-status-text .status-detail{color:#00d4ff;color:var(--bio-cyan);font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scanner-progress-bar-wrapper{margin-bottom:16px}.scanner-progress-bar-wrapper .progress-bar-container{background:#0000004d;border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}.scanner-progress-bar-wrapper .progress-bar-fill{background:linear-gradient(90deg,#00d4ff,var(--bio-green));background:linear-gradient(90deg,var(--bio-cyan),var(--bio-green));border-radius:4px;height:100%;transition:width .3s ease}.scanner-progress-bar-wrapper .progress-count{color:#4a6a7a;color:var(--text-muted);font-size:.85rem;text-align:center}.vnc-hint{color:#4a6a7a;color:var(--text-muted);font-size:.8rem;margin-bottom:16px;text-align:center}.scanner-results{padding:20px}.scanner-stats{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:20px}.scanner-stat{background:#00d4ff0d;border:1px solid #00d4ff1a;border-radius:10px;padding:12px;text-align:center}.scanner-stat .stat-value{color:#00d4ff;color:var(--bio-cyan);font-size:1.5rem;font-weight:700}.scanner-stat .stat-label{color:#4a6a7a;color:var(--text-muted);font-size:.8rem;margin-top:4px}.scanner-stat.normal .stat-value{color:#00ffc8}.scanner-stat.marketplace .stat-value{color:#ffb347}.scanner-groups-list{border:1px solid #00d4ff1a;border-radius:12px;margin-bottom:20px;max-height:350px;overflow-y:auto}.scanner-group-item{align-items:center;border-bottom:1px solid #00d4ff14;display:flex;gap:12px;padding:14px 16px;transition:background .2s ease}.scanner-group-item:last-child{border-bottom:none}.scanner-group-item:hover{background:#00d4ff08}.scanner-group-item .group-icon{flex-shrink:0;font-size:20px}.scanner-group-item .group-info{flex:1 1;min-width:0}.scanner-group-item .group-name{color:#e0f7ff;color:var(--text-primary);font-size:.95rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scanner-group-item .group-type{font-size:.8rem;margin-top:3px}.scanner-group-item .group-type.normal{color:#00ffc8}.scanner-group-item .group-type.marketplace{color:#ffb347}.scanner-group-item .group-type.mixed{color:#00d4ff}.scanner-group-item .group-type.unknown{color:#4a6a7a;color:var(--text-muted)}.scanner-group-item .group-toggle{flex-shrink:0}.scanner-footer{align-items:center;border-top:1px solid #00d4ff1a;display:flex;gap:16px;justify-content:space-between;padding-top:16px}.scanner-footer .selected-count{color:#a8c8d8;color:var(--text-secondary);font-size:.95rem}.scanner-footer .selected-count strong{color:#00d4ff;color:var(--bio-cyan)}.scanner-footer .btn-add-selected{align-items:center;background:linear-gradient(135deg,#00d4ff,#00ffc8);border:none;border-radius:10px;box-shadow:0 5px 20px #00d4ff66;color:#0a1628;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:8px;padding:12px 28px;transition:all .3s ease}.scanner-footer .btn-add-selected:hover{box-shadow:0 8px 25px #00d4ff80;transform:translateY(-2px)}.scanner-footer .btn-add-selected:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.card-header .scan-btn{align-items:center;background:#00d4ff1a;border:1px solid #00d4ff4d;border-radius:8px;color:#00d4ff;color:var(--bio-cyan);cursor:pointer;display:inline-flex;font-size:.9rem;gap:6px;padding:8px 16px;transition:all .3s ease}.card-header .scan-btn:hover{background:#00d4ff33;border-color:#00d4ff;border-color:var(--bio-cyan);box-shadow:0 0 15px #00d4ff4d}@media (max-width:768px){.scanner-modal .modal-content{max-width:95%!important;width:95%!important}.scanner-stats{gap:8px;grid-template-columns:repeat(2,1fr)}.scanner-stat{padding:10px}.scanner-stat .stat-value{font-size:1.2rem}.scanner-groups-list{max-height:280px}.scanner-footer{flex-direction:column;gap:12px}.scanner-footer .btn-add-selected{justify-content:center;width:100%}}
/*# sourceMappingURL=main.00c5ae62.css.map*/