:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%}body{margin:0;min-width:320px;min-height:100vh;width:100%}#root{width:100%;height:100vh;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent;border-radius:10px}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:10px;border:1px solid transparent;background-clip:padding-box;transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:var(--color-primary);background-clip:padding-box}::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;background:transparent!important}::-webkit-scrollbar-button:single-button{display:none!important;width:0!important;height:0!important}::-webkit-scrollbar-button:double-button{display:none!important;width:0!important;height:0!important}::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display:none!important;width:0!important;height:0!important;background:transparent!important}::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment{display:none!important;width:0!important;height:0!important;background:transparent!important}::-webkit-scrollbar-button:hover,::-webkit-scrollbar-button:active{display:none!important;width:0!important;height:0!important;background:transparent!important}*::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}.main-content::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}*{scrollbar-width:thin;scrollbar-color:var(--color-gray-300) transparent}@media(max-width:768px){::-webkit-scrollbar{width:6px;height:6px}}@media(max-width:480px){::-webkit-scrollbar{width:4px;height:4px}}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-hover)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s;outline:none}button:focus{outline:none}button:focus-visible{outline:none;box-shadow:var(--focus-ring)}@media(prefers-color-scheme:light){:root{color:#213547;background-color:var(--color-white)}a:hover{color:var(--color-primary-hover)}button{background-color:#f9f9f9}}.content-container{display:flex;flex-direction:column;height:100vh;width:100%;background:var(--bg-primary)}.content-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);flex-shrink:0}.content-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.content-body{flex:1;position:relative;overflow:hidden;min-height:0;width:100%;height:100%}.content-component{width:100%;height:100%;overflow-y:auto;background:var(--bg-primary)}.content-iframe{width:100%;height:100%;border:none;background:var(--color-white);transition:opacity .3s ease;position:absolute;inset:0;box-sizing:border-box}.iframe-loading{opacity:0}.content-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary);z-index:10}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top:3px solid var(--border-hover);border-radius:50%;animation:spin 1s linear infinite}.content-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:2rem;max-width:500px;color:var(--text-primary)}.error-icon{font-size:3rem;margin-bottom:1rem}.content-error h3{margin:0 0 1rem;color:var(--text-primary)}.content-error p{margin:.5rem 0;color:var(--text-secondary);line-height:1.5}.content-error code{background:var(--bg-secondary);padding:.5rem 1rem;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem;word-break:break-all;display:inline-block;margin:.5rem 0;border:1px solid var(--border-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.content-header{padding:.75rem 1rem}.content-title{font-size:1.1rem}.content-error{padding:1rem;max-width:90%}}.sidebar{position:fixed;top:0;left:0;height:100vh;width:100px;background:var(--bg-secondary);border-right:1px solid var(--border-color);z-index:1000;box-shadow:2px 0 5px var(--shadow);flex-shrink:0;display:flex;flex-direction:column}.sidebar-content{padding:2rem 1rem 1rem;display:flex;flex-direction:column;gap:1.5rem;flex:1;box-sizing:border-box;overflow-y:auto}.sidebar-bottom{padding:1rem;border-top:1px solid var(--border-color);background:var(--bg-secondary);display:flex;flex-direction:column;gap:1rem}.sidebar-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.sidebar-icon-btn{display:flex;align-items:center;justify-content:center;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:15px;cursor:pointer;transition:all .2s ease;color:var(--text-primary);width:60px;height:60px;flex-shrink:0}.sidebar-icon-btn.logout{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.sidebar-feedback-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:68px;padding:.65rem .4rem;background:#007aff;border:none;border-radius:15px;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0}.sidebar-feedback-btn span{font-size:.72rem;font-weight:600;color:#fff;line-height:1}.sidebar-feedback-btn svg{width:22px;height:22px;flex-shrink:0}.sidebar-feedback-btn:hover{background:#0066d6;transform:translateY(-1px);box-shadow:0 4px 10px #007aff59}.sidebar-icon-btn.logout:hover{background:#ef444433;border-color:#ef4444;color:#ef4444;transform:translateY(-1px);box-shadow:0 2px 4px var(--shadow)}.sidebar-icon-btn svg{width:24px;height:24px;flex-shrink:0}.sidebar-icon-btn:hover{background:var(--bg-secondary);border-color:var(--border-hover);color:var(--border-hover);transform:translateY(-1px);box-shadow:0 2px 4px var(--shadow)}.sidebar-icon-btn.active{background:var(--border-hover);border-color:var(--border-hover);color:#fff;box-shadow:0 2px 8px var(--shadow)}.sidebar-icon-btn.active:hover{background:var(--border-hover);color:#fff;transform:translateY(-1px)}.sidebar-title{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-align:center;line-height:1.2;transition:color .2s ease;max-width:100px;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.sidebar-item:hover .sidebar-title{color:var(--border-hover)}.sidebar-item .sidebar-icon-btn.active+.sidebar-title{color:#000;font-weight:600}.sidebar-bottom .sidebar-item:hover .sidebar-title{color:var(--text-primary)}.sidebar-bottom .sidebar-item:has(.logout):hover .sidebar-title{color:#ef4444}@media(max-width:768px){.sidebar{position:fixed;bottom:0;left:0;top:auto;width:100%;height:80px;border-right:none;border-top:1px solid var(--border-color);border-bottom:none;box-shadow:0 -2px 5px var(--shadow);flex-direction:row}.sidebar-content{padding:.5rem 1rem;flex-direction:row;justify-content:start;align-items:center;height:100%;gap:1rem;flex:1;overflow-x:auto}.sidebar-bottom{padding:.5rem;border-top:none;border-left:1px solid var(--border-color);flex-direction:row;gap:.5rem}.sidebar-item{flex-direction:column;gap:.25rem;min-width:60px}.sidebar-icon-btn{width:40px;height:40px;padding:.4rem}.sidebar-icon-btn svg{width:18px;height:18px}.sidebar-title{font-size:.65rem;max-width:60px}}:root{--color-primary: #50BC9D;--color-primary-hover: #8BB4DC;--color-primary-light: #B8D4EA;--color-primary-dark: #7AACDA;--color-success: #22c55e;--color-success-hover: #16a34a;--color-warning: #f59e0b;--color-warning-hover: #d97706;--color-error: #ef4444;--color-error-hover: #dc2626;--color-info: #3b82f6;--color-info-hover: #8BB4DC;--color-white: #ffffff;--color-black: #000000;--color-gray-50: #f8f9fa;--color-gray-100: #f1f3f4;--color-gray-200: #e9ecef;--color-gray-300: #dee2e6;--color-gray-400: #ced4da;--color-gray-500: #adb5bd;--color-gray-600: #6c757d;--color-gray-700: #495057;--color-gray-800: #343a40;--color-gray-900: #212529;--bg-primary: var(--color-white);--bg-secondary: var(--color-gray-50);--bg-tertiary: var(--color-white);--border-color: var(--color-gray-200);--border-hover: var(--color-primary);--text-primary: var(--color-gray-700);--text-secondary: var(--color-gray-600);--shadow: rgba(0, 0, 0, .1);--overlay: rgba(0, 0, 0, .5);--btn-primary-bg: var(--color-primary);--btn-primary-hover: var(--color-primary-hover);--btn-secondary-bg: var(--color-gray-700);--btn-secondary-hover: var(--color-success);--btn-success-bg: var(--color-success);--btn-success-hover: var(--color-success-hover);--btn-error-bg: var(--color-error);--btn-error-hover: var(--color-error-hover);--btn-info-bg: var(--color-info);--btn-info-hover: var(--color-info-hover);--form-border: var(--color-gray-200);--form-border-focus: var(--color-primary);--form-bg: var(--color-white);--form-placeholder: var(--color-gray-600);--status-online: var(--color-success);--status-offline: var(--color-gray-400);--status-busy: var(--color-warning);--status-away: var(--color-info)}:root{--focus-ring: 0 0 0 2px rgba(162, 197, 230, .3)}:root{--shadow-sm: 0 1px 2px 0 var(--shadow);--shadow-md: 0 1px 3px 0 var(--shadow);--shadow-lg: 0 4px 6px -1px var(--shadow);--shadow-xl: 0 10px 15px -3px var(--shadow);--shadow-2xl: 0 25px 50px -12px var(--shadow)}.text-primary{color:var(--text-primary)!important}.text-secondary{color:var(--text-secondary)!important}.text-success{color:var(--color-success)!important}.text-error{color:var(--color-error)!important}.text-warning{color:var(--color-warning)!important}.text-info{color:var(--color-info)!important}.bg-primary{background-color:var(--bg-primary)!important}.bg-secondary{background-color:var(--bg-secondary)!important}.bg-success{background-color:var(--color-success)!important}.bg-error{background-color:var(--color-error)!important}.bg-warning{background-color:var(--color-warning)!important}.bg-info{background-color:var(--color-info)!important}.border-primary{border-color:var(--border-color)!important}.border-hover{border-color:var(--border-hover)!important}.app-container{display:flex;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;height:100%}.theme-toggle-btn{position:fixed;left:16px;bottom:16px;z-index:1000;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .2s,border-color .2s,background .2s;box-shadow:0 2px 8px var(--shadow);color:var(--text-primary);padding:0}.theme-toggle-btn svg{width:20px;height:20px}.theme-toggle-btn:hover{border-color:var(--border-hover);background:var(--bg-secondary)}.theme-toggle-btn:focus{outline:none;box-shadow:0 0 0 3px #646cff33}.main-content{flex:1;height:100vh;background:var(--bg-primary);box-sizing:border-box;overflow-y:auto;overflow-x:hidden;margin-left:100px;transition:margin-left .3s ease}.main-content.no-sidebar{margin-left:0}.main-content::-webkit-scrollbar{width:8px;height:8px;-webkit-appearance:none;appearance:none}.main-content::-webkit-scrollbar-track{background:transparent;border-radius:10px;-webkit-box-shadow:none;box-shadow:none}.main-content::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:10px;border:1px solid transparent;background-clip:padding-box;transition:all .3s ease;-webkit-box-shadow:none;box-shadow:none}.main-content::-webkit-scrollbar-thumb:hover{background:var(--color-primary);background-clip:padding-box}.main-content::-webkit-scrollbar-corner{background:transparent;-webkit-box-shadow:none;box-shadow:none}.main-content::-webkit-scrollbar-button{display:none!important;width:0px!important;height:0px!important;background:transparent!important;-webkit-appearance:none!important;appearance:none!important}.main-content::-webkit-scrollbar-button:single-button{display:none!important;width:0px!important;height:0px!important}.main-content::-webkit-scrollbar-button:double-button{display:none!important;width:0px!important;height:0px!important}.main-content::-webkit-scrollbar-button:start:decrement{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:end:increment{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:vertical:start:decrement{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:vertical:end:increment{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:horizontal:start:decrement{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0px!important;height:0px!important;background:transparent!important}.main-content::-webkit-scrollbar-button:hover,.main-content::-webkit-scrollbar-button:active,.main-content::-webkit-scrollbar-button:focus{display:none!important;width:0px!important;height:0px!important;background:transparent!important;opacity:0!important;visibility:hidden!important}@media(max-width:768px){.app-container{flex-direction:column}.sidebar{order:1}.main-content{margin-left:0;padding-bottom:80px}.main-content::-webkit-scrollbar{width:6px;height:6px}}@media(max-width:480px){.main-content::-webkit-scrollbar{width:4px;height:4px}.main-content{margin-left:0}}#root{width:100%;height:100vh;margin:0;padding:0;text-align:left}.loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100%;gap:28px;background:var(--bg-primary);color:var(--text-primary)}.loading-screen__logo{color:var(--color-primary);opacity:.9}.loading-screen__spinner{width:36px;height:36px;border:3px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:loading-spin .8s linear infinite}.loading-screen__text{font-size:14px;font-weight:500;color:var(--text-secondary);letter-spacing:.02em;margin:0}@keyframes loading-spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em var(--color-primary))}.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}.feedback-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;animation:feedback-fade-in .15s ease;padding:16px}.feedback-modal{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 12px 40px #00000040;width:100%;max-width:440px;padding:24px;animation:feedback-slide-in .2s ease;box-sizing:border-box}.feedback-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.feedback-modal-header h3{margin:0;font-size:18px;font-weight:700;color:var(--text-primary)}.feedback-modal-close{background:none;border:none;font-size:24px;line-height:1;color:var(--text-secondary);cursor:pointer;padding:0;width:32px;height:32px;border-radius:8px;transition:background .2s ease,color .2s ease}.feedback-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.feedback-modal-info{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--text-secondary)}.feedback-modal-textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:120px;padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);font-size:14px;font-family:inherit;line-height:1.5;transition:border-color .2s ease,box-shadow .2s ease}.feedback-modal-textarea:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff26}.feedback-modal-error{margin:10px 0 0;color:#ef4444;font-size:13px}.feedback-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.feedback-cancel-btn{padding:9px 18px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.feedback-cancel-btn:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--border-hover)}.feedback-send-btn{padding:9px 20px;border:none;background:#007aff;color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.feedback-send-btn:hover:not(:disabled){background:#0066d6;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.feedback-send-btn:disabled,.feedback-cancel-btn:disabled{opacity:.55;cursor:not-allowed}.feedback-modal-success{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0 4px;text-align:center}.feedback-success-icon{width:56px;height:56px;border-radius:50%;background:#007aff1f;color:#007aff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}.feedback-modal-success p{margin:0;color:var(--text-primary);font-size:15px;font-weight:500}@keyframes feedback-fade-in{0%{opacity:0}to{opacity:1}}@keyframes feedback-slide-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}