:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#111827;background:#f5f7fb;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;-webkit-overflow-scrolling:touch}*{box-sizing:border-box}*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea,select{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}@media (max-width: 768px){body{font-size:16px}button,input,select,textarea{min-height:44px;font-size:12px}.container{padding:10px}.panel{margin:0;padding:15px}}@media (max-width: 480px){.container{padding:5px}.panel{margin:5px 0;padding:10px}.heading{font-size:18px;margin-bottom:15px}.btn{font-size:12px}}body{margin:0;padding:0;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;overflow-x:hidden}::-webkit-scrollbar{width:0px;background:transparent}::-webkit-scrollbar-thumb{background:transparent}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-primary: #111827;--text-secondary: #374151;--text-muted: #6b7280;--border-color: #e5e7eb;--border-secondary: #d1d5db;--accent-color: #000000;--accent-hover: #374151;--danger-color: #dc2626;--danger-hover: #b91c1c;--shadow: 0 10px 25px rgba(0, 0, 0, .1);--shadow-hover: 0 6px 20px rgba(0, 0, 0, .15)}.dark{--bg-primary: #1f2937;--bg-secondary: #374151;--bg-tertiary: #4b5563;--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-muted: #9ca3af;--border-color: #4b5563;--border-secondary: #6b7280;--accent-color: #60a5fa;--accent-hover: #3b82f6;--danger-color: #f87171;--danger-hover: #ef4444;--shadow: 0 10px 25px rgba(0, 0, 0, .3);--shadow-hover: 0 6px 20px rgba(0, 0, 0, .4)}#root{max-width:1280px;margin:0 auto;padding:1rem;padding-top:0;text-align:center;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;transition:background-color .3s ease,color .3s ease}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.container{max-width:960px;margin:0 auto;text-align:left;width:100%;box-sizing:border-box;padding:0}.panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:10px;width:100%;box-sizing:border-box;transition:background-color .3s ease,border-color .3s ease}.form{display:flex;flex-direction:column;gap:12px;width:100%}.row{display:flex;gap:12px;align-items:center;width:100%}label{font-size:14px;color:var(--text-secondary);width:100%;margin-bottom:4px}.input{padding:10px 12px;border:1px solid var(--border-secondary);background:var(--bg-primary);color:var(--text-primary);border-radius:8px;outline:none;font-size:14px;width:100%;box-sizing:border-box;transition:border-color .3s ease,background-color .3s ease,color .3s ease;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(96,165,250,.2)}.input-with-copy{position:relative;display:flex;align-items:center;width:100%}.input-with-copy .input{padding-right:40px}.copy-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:var(--text-secondary);border-radius:4px}.copy-btn:hover{color:var(--text-primary)}.copy-btn svg{width:14px;height:14px}.input-group{position:relative;width:100%}.floating-label{padding-top:20px;padding-bottom:8px}.floating-label-text{position:absolute;left:12px;top:0;transform:translateY(-50%);font-size:14px;color:#000;background:var(--bg-primary);padding:0 4px;transition:all .3s ease;pointer-events:none;z-index:1;white-space:nowrap;width:auto}.dark .floating-label-text{color:#fff}.floating-label:focus+.floating-label-text,.floating-label:not(:placeholder-shown)+.floating-label-text{top:0;font-size:12px;color:var(--accent-color);transform:translateY(-50%)}select.floating-label:focus+.floating-label-text,select.floating-label:not([value=""])+.floating-label-text{top:0;font-size:12px;color:var(--accent-color);transform:translateY(-50%)}select.input{width:100%;box-sizing:border-box;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:32px}input[type=file].input{width:100%;box-sizing:border-box;padding:8px}.btn{display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;border:1px solid var(--border-secondary);background:var(--bg-secondary);color:var(--text-primary);font-weight:600;cursor:pointer;box-sizing:border-box;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;min-height:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn:hover{background:var(--bg-tertiary);border-color:var(--border-color)}.btn.primary{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}@media (hover: none) and (pointer: coarse){.btn:hover{background:var(--bg-secondary);border-color:var(--border-secondary)}.btn.primary:hover{background:var(--accent-color);border-color:var(--accent-color)}}.nav{display:flex;gap:12px;align-items:center;margin-bottom:20px;width:100%;padding:16px 0;border-bottom:1px solid var(--border-color);transition:border-color .3s ease}.heading{margin:0;width:100%}.panel-container{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;width:100%;box-sizing:border-box;transition:background-color .3s ease,border-color .3s ease;overflow:hidden;margin-bottom:10px}.panel-content{padding:10px}.tabs{display:flex;gap:0;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0;position:relative}.tab{padding:12px 24px;background:transparent;border:1px solid transparent;border-bottom:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-secondary);transition:all .3s ease;position:relative;border-radius:8px 8px 0 0;margin-right:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none}.tab:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.tab.active:hover{background:var(--bg-primary);color:var(--text-primary);border-color:var(--bg-primary)}.tab.active{background:var(--bg-primary);color:var(--text-primary);border-bottom-color:var(--bg-primary);position:relative;z-index:1;animation:tabActivate .3s ease-out}@keyframes tabActivate{0%{background:var(--bg-secondary);color:var(--text-secondary)}to{background:var(--bg-primary);color:var(--text-primary)}}.tab.active:after{content:"";position:absolute;bottom:-2px;left:-1px;right:-1px;height:2px;background:var(--bg-primary);z-index:2;animation:slideIn .3s ease-out;transition:background-color .3s ease}@keyframes slideIn{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@media (hover: none) and (pointer: coarse){.tab:hover{background:var(--bg-primary)}}.layout{display:grid;gap:20px;width:100%}.floating-start-button{display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000}.floating-btn{padding:12px 24px;font-size:16px;font-weight:600;border-radius:12px;box-shadow:var(--shadow);transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.floating-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.desktop-start-btn{width:100%;padding:12px 24px;font-size:16px;font-weight:600}.user-menu{position:relative;display:inline-block}.user-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:140px}.user-menu-trigger:hover{background:var(--bg-tertiary);border-color:var(--border-secondary)}.user-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--accent-color);color:#fff;border-radius:50%;font-size:14px}.user-name{font-weight:500;color:var(--text-secondary);font-size:14px;flex:1;text-align:left}.user-menu-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow);min-width:200px;z-index:1000;animation:dropdownFadeIn .2s ease;transition:background-color .3s ease,border-color .3s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.user-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:none;border:none;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease;text-align:left;box-sizing:border-box}.user-menu-item:hover{background:var(--bg-secondary)}.user-menu-item:last-child{color:var(--danger-color)}.user-menu-item:last-child:hover{background:var(--danger-color);color:#fff}.user-menu-item:last-child svg{color:inherit}.user-role{font-size:13px;color:var(--text-muted);line-height:1.4}.user-menu-divider,.dropdown-divider{height:1px;background:var(--border-color);margin:0}.logout-button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:none;border:none;color:var(--danger-color);font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease;text-align:left}.logout-button:hover{background:var(--bg-secondary)}.logout-button svg{color:var(--danger-color)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .3s ease;margin-right:12px}.theme-toggle:hover{background:var(--bg-tertiary);border-color:var(--border-color)}.theme-toggle svg{width:20px;height:20px;color:var(--text-secondary);transition:color .3s ease}.theme-toggle:hover svg{color:var(--text-primary)}@media (max-width: 768px){.container{padding-bottom:50px}.floating-start-button{display:block;position:fixed;left:20px;right:20px;transform:none;padding:0}.floating-btn{width:100%;padding:12px 16px;font-size:16px}.desktop-start-btn{display:none}.row .desktop-start-btn{margin-top:0!important}.layout{grid-template-columns:1fr}.user-menu-trigger{min-width:120px}.user-name{font-size:13px}.user-dropdown{right:-8px;min-width:180px}.theme-toggle{width:36px;height:36px;min-width:36px;min-height:36px;margin-right:8px;flex-shrink:0}.theme-toggle svg{width:18px;height:18px}.btn:hover,.user-menu-trigger:hover,.logout-button:hover{background:inherit;border-color:inherit}.tab:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.theme-toggle:hover{background:var(--bg-tertiary);border-color:var(--border-color)}.btn.primary:hover{background:var(--accent-color);border-color:var(--accent-color)}}.spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.loading-text{font-size:16px;color:var(--text-secondary);margin-bottom:10px}.loading-subtext{font-size:14px;color:var(--text-muted);max-width:300px;line-height:1.4}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.error-icon{font-size:48px;color:var(--danger-color);margin-bottom:20px}.error-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:10px}.error-message{font-size:14px;color:var(--text-secondary);margin-bottom:20px;max-width:400px;line-height:1.4}.error-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box}.modal-overlay .panel{max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-hover)}.sessions-list{display:grid;gap:10px}.session-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.session-info{flex:1}.session-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.session-user{font-weight:600;font-size:14px}.session-status{padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}.session-status.active{background-color:var(--accent-color);color:#fff}.session-status.inactive{background-color:var(--text-muted);color:#fff}.session-date{color:var(--text-secondary);font-size:12px}.session-actions{display:flex;gap:8px}.btn-small{padding:6px 12px;font-size:12px;min-height:unset}.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:2000}.toast{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:var(--shadow);padding:10px 12px;border-radius:8px;min-width:220px;max-width:320px;animation:slideUp .2s ease-out;cursor:pointer}.toast.success{border-color:#28a745}.toast.error{border-color:var(--danger-color)}.toast.info{border-color:var(--accent-color)}@keyframes slideUp{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}*{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:8px;border:1px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}.panel,.panel-content,.layout,.user-menu-dropdown{scrollbar-width:thin}