:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}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;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}#root{width:100%;margin:0;padding:0;text-align:left;overflow-x:hidden}.app-container{height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000001a;width:100%}.app-title{margin:0;font-size:1.8rem;font-weight:600}.login-section{display:flex;align-items:center;gap:1rem}.app-content{flex:1;padding:0;background-color:#f8f9fa;width:100%;display:flex;flex-direction:column;overflow:hidden}.editor-container{background:#fff;border:2px solid #e1e5e9;border-radius:8px;box-shadow:0 4px 6px #0000000d;overflow:hidden;width:100%;flex:1;display:flex;flex-direction:column}.editor-header{background:#f8f9fa;border-bottom:1px solid #e1e5e9;padding:.75rem 1rem;font-size:.9rem;color:#6c757d;font-weight:500}.editor-content{flex:1;padding:0;display:flex;flex-direction:column}.codemirror-container{height:100%;min-height:500px;width:100%;border-radius:8px;overflow:hidden;position:relative}.cm-editor{border-radius:0;font-family:Fira Code,Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:14px;line-height:1.5;height:100%;background:#fff;color:#24292f;border:none}.cm-editor.cm-focused{outline:none;border:none;box-shadow:none}.cm-content{padding:0;min-height:500px;font-family:inherit}.cm-line{padding:0 16px;min-height:1.5em}.cm-lineNumbers{font-family:inherit;background:#f6f8fa;color:#656d76;border-right:1px solid #d1d9e0;padding:0 8px;min-width:40px;-webkit-user-select:none;user-select:none}.cm-lineNumbers .cm-lineNumber{color:#656d76;font-size:13px}.cm-activeLineGutter{background:#f0f6ff;color:#24292f}.cm-activeLine{background:#54aeff14}.cm-selectionBackground{background:#0969da20!important}.cm-cursor,.cm-dropCursor{border-left:2px solid #24292f}.cm-editor .tok-comment{color:#6a737d;font-style:italic}.cm-editor .tok-keyword{color:#d73a49;font-weight:700}.cm-editor .tok-string{color:#032f62}.cm-editor .tok-number{color:#005cc5}.cm-editor .tok-variable{color:#24292f}.cm-editor .tok-function{color:#6f42c1}.cm-editor .tok-operator{color:#d73a49}.cm-editor .tok-punctuation{color:#24292f}.cm-editor .tok-bracket{color:#005cc5}.cm-scroller::-webkit-scrollbar{width:14px;height:14px}.cm-scroller::-webkit-scrollbar-track{background:#fff}.cm-scroller::-webkit-scrollbar-thumb{background:#d1d9e0;border-radius:7px;border:3px solid #ffffff}.cm-scroller::-webkit-scrollbar-thumb:hover{background:#8c959f}.cm-scroller::-webkit-scrollbar-corner{background:#fff}.cm-gutters{background:#f6f8fa;border-right:1px solid #d1d9e0}.cm-gutter{background:inherit}.cm-searchMatch{background:#ffeb3b80;border:1px solid rgba(255,193,7,.8)}.cm-searchMatch.cm-searchMatch-selected{background:#ffeb3bcc}.cm-tooltip.cm-tooltip-autocomplete{background:#fff;border:1px solid #d1d9e0;border-radius:4px;box-shadow:0 8px 24px #8c959f33}.cm-tooltip.cm-tooltip-autocomplete>ul{font-family:inherit;max-height:200px}.cm-tooltip.cm-tooltip-autocomplete>ul>li{color:#24292f;padding:6px 12px}.cm-tooltip.cm-tooltip-autocomplete>ul>li[aria-selected]{background:#0969da;color:#fff}.cm-matchingBracket{background:#0969da1a;border:1px solid rgba(9,105,218,.2)}.cm-foldMarker{background:#f6f8fa;border:1px solid #d1d9e0;color:#656d76;border-radius:2px;padding:0 4px;margin:0 2px;font-size:12px}.cm-lintRange-error{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3e%3cpath d='m0 3 l3 -3 l3 3' stroke='%23da3633' fill='none' stroke-width='.7'/%3e%3c/svg%3e");background-repeat:repeat-x;background-position:bottom}.cm-ySelectionInfo{position:absolute;top:-1.4em;left:-1px;font-size:12px;font-weight:600;line-height:normal;padding:.1rem .3rem;border-radius:3px 3px 3px 0;color:#fff;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1000}.cm-ySelection{background-color:#0969da26;border-left:2px solid #0969da;border-right:2px solid #0969da;margin-left:-1px;margin-right:-1px;pointer-events:none}.user-info{background:#e3f2fd;border:1px solid #bbdefb;border-radius:4px;padding:.5rem 1rem;margin-bottom:1rem;font-size:.9rem;color:#1976d2}.user-info span{font-weight:600}.status{background:#f3e5f5;border:1px solid #e1bee7;border-radius:4px;padding:.5rem 1rem;margin-top:1rem;font-size:.9rem;color:#7b1fa2;text-align:center}.login-section button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-section button:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-1px)}.login-section p{margin:0;font-size:.9rem;opacity:.9}.user-controls{display:flex;align-items:center}.user-logged-in{display:flex;align-items:center;gap:1rem}.user-logged-in span{font-size:.9rem;opacity:.9}.logout-btn{background:#ffffff26;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease}.logout-btn:hover{background:#ffffff40;border-color:#ffffff4d}.login-buttons{display:flex;align-items:center;gap:.5rem}.login-buttons span{font-size:.9rem;opacity:.9;margin-right:.5rem}.login-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-1px)}@media (max-width: 768px){.app-header{flex-direction:column;gap:1rem;text-align:center}.app-title{font-size:1.5rem}.app-content{padding:1rem}}.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}.text-input{width:100%;padding:.5rem;border:1px solid #e1e5e9;border-radius:4px;font-size:1rem}.editor-tabs-container{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px #0000000d}.tab-bar{display:flex;background:#e9ecef;border-bottom:2px solid #d1d9e0;overflow-x:auto;overflow-y:hidden;min-height:38px;position:relative;padding:4px 4px 0}.tab-bar::-webkit-scrollbar{height:2px}.tab-bar::-webkit-scrollbar-thumb{background:#d1d9e0;border-radius:1px}.tab{display:flex;align-items:center;padding:8px 16px;background:#fff;border:1px solid #d1d9e0;border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;min-width:120px;max-width:200px;position:relative;color:#495057;font-size:13px;transition:all .15s ease;margin-right:2px;box-shadow:0 2px 4px #00000014}.tab:hover{background:#f8f9fa;color:#212529;transform:translateY(-1px);box-shadow:0 4px 8px #0000001f}.tab.active{background:#fff;color:#212529;border-color:#fd7e14;border-bottom:2px solid #ffffff;transform:translateY(0);box-shadow:0 4px 12px #fd7e1433;z-index:10;font-weight:500}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:#fd7e14;border-radius:2px 2px 0 0}.tab-icon{margin-right:8px;font-size:14px;opacity:.9}.tab.active .tab-icon{opacity:1}.tab-filename{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Segoe UI,Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-weight:inherit}.tab-close{background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;margin-left:8px;border-radius:3px;font-size:16px;line-height:1;opacity:.6;transition:all .15s ease;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.tab-close:hover{background:linear-gradient(135deg,#667eea,#764ba2);opacity:1;color:#fff;transform:scale(1.1);box-shadow:0 2px 4px #667eea4d}.tab:not(.active) .tab-close{opacity:0}.tab:not(.active):hover .tab-close{opacity:.7}.tab.active .tab-close:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 6px #667eea66}.editor-content{flex:1;background:#fff;overflow:hidden;display:flex;flex-direction:column}.editor-tabs-container .codemirror-container{height:100%;min-height:auto;border-radius:0;flex:1}.loading-spinner-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#fff,#f8f9fa);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.loading-content{text-align:center;animation:slideUp .5s ease-out}.loading-spinner{position:relative;width:60px;height:60px;margin:0 auto 24px}.spinner-ring{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:spin 2s linear infinite}.spinner-ring:nth-child(1){border-top-color:#667eea;animation-duration:2s;animation-delay:0s}.spinner-ring:nth-child(2){border-right-color:#764ba2;animation-duration:2.5s;animation-delay:.2s;transform:scale(.8)}.spinner-ring:nth-child(3){border-bottom-color:#fd7e14;animation-duration:3s;animation-delay:.4s;transform:scale(.6)}.loading-text{font-size:16px;font-weight:600;color:#495057;margin-bottom:8px;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;animation:textPulse 2s ease-in-out infinite}.loading-subtitle{font-size:14px;color:#6c757d;font-weight:500;opacity:.8;animation:fadeInUp .8s ease-out .3s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes textPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:.8;transform:translateY(0)}}.codemirror-loading-overlay.fade-out{animation:fadeOut .3s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}