*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#fff;--bg-secondary:#f7fafc;--bg-hover:#edf2f7;--border-color:#e2e8f0;--text-primary:#1a202c;--text-secondary:#718096;--text-muted:#a0aec0;--accent-primary:#3182ce;--accent-hover:#2c5282;--shadow:0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.5}body{background-color:var(--bg-secondary);min-height:100vh;color:var(--text-primary);margin:0}#app,.app-container{flex-direction:column;width:100%;height:100vh;display:flex}.app-header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow);z-index:10;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.app-header h1{color:var(--text-primary);font-size:1.5rem;font-weight:600}.header-info{color:var(--text-secondary);align-items:center;gap:1rem;font-size:.875rem;display:flex}.sync-btn{background-color:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:.375rem;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.875rem;font-weight:500;transition:background-color .2s;display:flex}.sync-btn:hover:not(.syncing){background-color:var(--accent-hover)}.sync-btn.syncing{opacity:.7;cursor:not-allowed}.sync-icon{transition:transform .3s;display:block}.sync-icon.spinning{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast{background-color:var(--bg-primary);color:var(--text-primary);z-index:1000;opacity:0;border-left:4px solid;border-radius:.5rem;padding:.875rem 1.25rem;font-size:.875rem;font-weight:500;transition:opacity .3s,transform .3s;position:fixed;top:1rem;right:1rem;transform:translateY(-1rem);box-shadow:0 4px 12px #00000026}.toast.show{opacity:1;transform:translateY(0)}.toast-success{border-left-color:#48bb78}.toast-error{border-left-color:#e53e3e}.main-content{flex:1;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-primary);border-right:1px solid var(--border-color);flex-direction:column;width:320px;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border-color);padding:1rem 1.5rem}.sidebar-header h2{color:var(--text-primary);font-size:1rem;font-weight:600}.file-list{flex:1;padding:.5rem;overflow-y:auto}.module{margin-bottom:1rem}.module-name{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:.5rem .75rem;font-size:.875rem;font-weight:600}.file-items{flex-direction:column;gap:.25rem;display:flex}.file-item{cursor:pointer;border:1px solid #0000;border-radius:.5rem;padding:.75rem;transition:background-color .15s}.file-item:hover{background-color:var(--bg-hover)}.file-item.active{background-color:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.file-item.active .file-name{color:#fff}.file-item.active .file-meta{color:#fffc}.file-info{flex-direction:column;gap:.25rem;display:flex}.file-name{color:var(--text-primary);word-break:break-word;font-size:.875rem;font-weight:500}.file-meta{color:var(--text-muted);font-size:.75rem}.viewer{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.viewer-header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:1rem 1.5rem}.current-file-info{flex-direction:column;gap:.25rem;display:flex}.current-file-name{color:var(--text-primary);font-size:1.125rem;font-weight:600}.current-file-module{color:var(--text-secondary);font-size:.875rem}.viewer-container{flex:1;position:relative;overflow:hidden}.empty-viewer{height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:1rem;display:flex}.viewer-container.has-content .empty-viewer{display:none}#html-viewer{background-color:#fff;border:none;width:100%;height:100%;display:none}.viewer-container.has-content #html-viewer{display:block}.loading{background-color:var(--bg-primary);box-shadow:var(--shadow);color:var(--text-secondary);opacity:0;pointer-events:none;z-index:100;border-radius:.5rem;padding:1rem 1.5rem;font-size:.875rem;transition:opacity .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading.show{opacity:1}.empty-state,.error-state{text-align:center;color:var(--text-muted);padding:2rem}.error-state{color:#e53e3e}.mobile-close-btn,.mobile-menu-btn,.mobile-overlay{display:none}@media (max-width:768px){.app-header{flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem}.app-header h1{font-size:1.25rem}.header-info{gap:.5rem;font-size:.75rem}.sync-btn{gap:.375rem;padding:.375rem .625rem;font-size:.75rem}.sync-icon{width:14px;height:14px}.sync-text{display:none}.toast{padding:.75rem 1rem;font-size:.8125rem;top:.5rem;left:.5rem;right:.5rem}.main-content{position:relative}.sidebar{z-index:20;width:100%;max-width:320px;height:100%;transition:transform .3s ease-in-out;position:absolute;top:0;left:0;transform:translate(-100%);box-shadow:2px 0 8px #0000001a}.sidebar.mobile-open{transform:translate(0)}.sidebar-header{justify-content:space-between;align-items:center;padding:1rem;display:flex}.mobile-close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;font-size:1.5rem;line-height:1;display:flex!important}.mobile-close-btn:hover{color:var(--text-primary)}.mobile-menu-btn{z-index:15;background-color:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.5rem;transition:background-color .2s;position:fixed;bottom:1rem;left:1rem;box-shadow:0 4px 12px #00000026;display:flex!important}.mobile-menu-btn:hover{background-color:var(--accent-hover)}.mobile-menu-btn:active{transform:scale(.95)}.mobile-overlay{z-index:15;background-color:#00000080;display:none;position:fixed;inset:0}.mobile-overlay.show{display:block!important}.viewer{width:100%}.viewer-header{padding:.75rem 1rem}.current-file-name{font-size:1rem}.current-file-module{font-size:.75rem}.file-item{padding:.625rem}.file-name{font-size:.8125rem}.file-meta{font-size:.6875rem}.module-name{padding:.375rem .625rem;font-size:.8125rem}}@media (min-width:769px) and (max-width:1024px){.sidebar{width:280px}.app-header{padding:1rem 1.25rem}.sidebar-header,.viewer-header{padding:.875rem 1.25rem}}@media (prefers-color-scheme:dark){:root{--bg-primary:#1a202c;--bg-secondary:#171923;--bg-hover:#2d3748;--border-color:#2d3748;--text-primary:#f7fafc;--text-secondary:#a0aec0;--text-muted:#718096;--accent-primary:#4299e1;--accent-hover:#3182ce;--shadow:0 1px 3px 0 #0000004d, 0 1px 2px 0 #0003}#html-viewer{background-color:#fff}}