body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--surface-body);color:#1c1834;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background-color .3s ease,color .3s ease}:root{--accent-primary:#8b70ff;--accent-secondary:#6d52e5;--accent-hover:#7f62ff;--accent-soft:#8b70ff1f;--accent-soft-strong:#8b70ff33;--accent-border:#8b70ff52;--accent-glow:#d6caff;--accent-grad-start:#8b70ff;--accent-grad-stop:#b7a0ff;--surface-body:#f8f9fa;--surface-card:#fff;--surface-page:#fff;--surface-home-hero:#f9f9f9;--surface-header:#fffffff5;--surface-popover:#fff;--surface-input:#fff;--surface-muted:#f5f3ff;--surface-button:#fff;--surface-hover:#0f172a0a;--text-primary:#1c1834;--text-muted:#5e5980;--border-subtle:#0f172a14;--border-strong:#0f172a1f;--ide-editor-bg:#fff;--ide-editor-gutter:#f3f4fa;--ide-editor-line-number:#6c678f}body.dark-mode{--accent-primary:#5c46e0;--accent-secondary:#4a34c9;--accent-hover:#6a52f6;--accent-soft:#5c46e042;--accent-soft-strong:#5c46e05c;--accent-border:#5c46e07a;--accent-glow:#2f25a8;--accent-grad-start:#4a34c9;--accent-grad-stop:#6a52f6;--surface-body:#060609;--surface-card:#101018;--surface-page:#0f1119;--surface-home-hero:#08080e;--surface-header:#08080ceb;--surface-popover:#161621;--surface-input:#13131d;--surface-muted:#191924;--surface-button:#171722;--surface-hover:#7c68dc47;--text-primary:#f4f3ff;--text-muted:#9b97c9;--border-subtle:#7c68dc42;--border-strong:#7c68dc6b;--ide-editor-bg:#151028;--ide-editor-gutter:#0d0a19;--ide-editor-line-number:#9d98df;background-color:var(--surface-body);color:#1c1834;color:var(--text-primary)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.custom-header{align-items:center;background-color:var(--surface-header);box-shadow:0 2px 4px #0000000d;color:var(--text-primary);display:flex;height:64px;justify-content:space-between;padding:0 24px;position:fixed;top:0;width:100%;z-index:1000}.site-logo{background-color:initial!important;filter:none;height:64px;object-fit:contain;padding:2px 0;transition:filter .3s ease}.site-logo-link{align-items:center;display:flex}.site-name{color:var(--text-primary);font-size:20px;font-weight:600;text-decoration:none}.header-right{height:100%;justify-self:end}.header-nav{align-items:center;display:flex;gap:20px;height:100%;left:50%;position:absolute;transform:translateX(-50%)}.header-nav a{color:var(--text-muted);font-size:14px;padding-bottom:2px;text-decoration:none;transition:color .2s ease,border-bottom .2s ease}.header-nav a:hover{color:var(--accent-primary);cursor:pointer}.header-nav .active{border-bottom:2px solid var(--accent-primary);color:var(--accent-primary);font-weight:600}.btn{border-radius:6px;cursor:pointer;display:inline-block;text-decoration:none;transition:all .2s ease}.btn,.btn-outline{font-size:16px;font-weight:700;padding:12px 18px}.btn-outline{background-color:initial;border:1px solid var(--accent-hover);color:var(--accent-hover);margin-right:10px}.btn-outline:hover{background-color:var(--accent-soft)}.btn-filled{background-color:var(--accent-secondary);border:1px solid var(--accent-secondary);color:#fff}.btn-filled:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}.user-menu-container{position:relative}.user-nickname{cursor:pointer;max-width:200px;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease,-webkit-text-decoration .2s ease;transition:color .2s ease,text-decoration .2s ease;transition:color .2s ease,text-decoration .2s ease,-webkit-text-decoration .2s ease;white-space:nowrap}.user-nickname:hover{color:var(--accent-hover);text-decoration:underline}.user-icon{color:var(--accent-hover);margin-right:8px;vertical-align:middle}.dark-mode .user-icon{color:#f0f0f0}.theme-toggle-btn{align-items:center;background:none;border:none;border-radius:6px;color:var(--accent-primary);cursor:pointer;display:flex;font-size:18px;padding:6px 8px;transition:background-color .3s,color .3s}.theme-toggle-btn:hover{background-color:var(--accent-soft)}.dark-mode .custom-header{background-color:var(--surface-header);box-shadow:0 2px 6px #2f25a82e;color:var(--text-primary)}.dark-mode .site-name{color:var(--text-primary)}.dark-mode .site-logo{filter:brightness(1.6) saturate(1.15)}.dark-mode .header-nav a{color:var(--text-muted)}.dark-mode .header-nav a:hover{color:var(--accent-primary)}.dark-mode .header-nav .active{border-bottom:2px solid var(--accent-secondary);color:var(--accent-primary)}.dark-mode .btn-outline{border-color:var(--text-muted);color:var(--text-muted)}.dark-mode .btn-outline:hover{background-color:var(--surface-hover)}.dark-mode .theme-toggle-btn{color:var(--accent-primary)}.user-dropdown{align-items:stretch;background-color:var(--surface-popover);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 12px 24px #1814381f;color:var(--text-primary);display:flex;flex-direction:column;gap:12px;margin-top:8px;min-width:220px;padding:16px;position:absolute;right:0;top:100%;z-index:100}.user-dropdown button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.dark-mode .user-dropdown{background-color:var(--surface-popover);border-color:var(--border-subtle)}.dark-mode .user-dropdown button{color:var(--text-primary)}.user-dropdown__header{align-items:center;border-bottom:1px solid var(--border-subtle);display:flex;gap:12px;padding-bottom:12px}.user-dropdown__avatar{color:var(--accent-primary)}.user-dropdown__meta{display:flex;flex-direction:column;gap:4px;min-width:0}.user-dropdown__name{color:var(--text-primary);font-size:15px;font-weight:700}.user-dropdown__handle{color:var(--text-muted);font-size:12px}.user-dropdown__actions{display:flex;flex-direction:column;gap:8px}.user-dropdown__action{align-items:center;background-color:#8b70ff14;border-radius:10px;color:var(--text-primary);display:inline-flex;gap:10px;justify-content:flex-start;padding:10px 12px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;width:100%}.user-dropdown__action:hover{background-color:#8b70ff29;box-shadow:0 12px 20px -18px #8b70ff99;transform:translateY(-1px)}.user-dropdown__action--logout{background-color:#ef44441a;color:#e53935}.user-dropdown__action--logout:hover{background-color:#ef44442e;box-shadow:0 12px 20px -18px #ef444480}.user-dropdown__icon{align-items:center;color:var(--accent-primary);display:flex;font-size:16px;justify-content:center}.user-dropdown__action--logout .user-dropdown__icon{color:#e53935}.dark-mode .user-dropdown__handle{color:var(--text-muted)}.dark-mode .user-dropdown__action{background-color:#8b70ff24}.dark-mode .user-dropdown__action:hover{background-color:#8b70ff3d}.dark-mode .user-dropdown__action--logout{background-color:#ef444433;color:#f87171}.dark-mode .user-dropdown__action--logout .user-dropdown__icon{color:#f87171}.notification-container{align-items:center;display:flex;margin-right:12px;position:relative}.notification-btn{background:none;border:none;color:var(--accent-primary);cursor:pointer;padding:0;position:relative}.notification-badge{align-items:center;background-color:#ff4d4f;border-radius:50%;color:#fff;display:flex;font-size:10px;font-weight:700;height:18px;justify-content:center;pointer-events:none;position:absolute;right:-5px;top:-5px;width:18px}.notification-dropdown{background-color:var(--surface-popover);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 16px 32px #18143829;color:var(--text-primary);display:flex;flex-direction:column;gap:14px;margin-top:8px;min-width:320px;padding:16px;position:absolute;right:0;top:100%;transition:transform .2s ease,opacity .2s ease;z-index:100}.notification-dropdown__header{align-items:center;display:flex;gap:12px;justify-content:space-between}.notification-dropdown__title{font-size:15px;font-weight:700}.notification-dropdown__badge{align-items:center;background:#8b70ff26;border-radius:999px;color:var(--accent-primary);display:inline-flex;font-size:12px;font-weight:600;gap:4px;padding:4px 10px}.notification-dropdown__list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-gutter:stable}.notification-item{align-items:flex-start;background-color:initial;border:1px solid #0000;border-radius:10px;color:var(--text-primary);display:flex;gap:12px;padding:12px 14px;transition:background-color .2s ease,border-color .2s ease;width:100%}.notification-item:hover{background-color:var(--surface-hover);border-color:var(--border-subtle)}.notification-item.unread{background-color:#8b70ff1f;border-color:#8b70ff73}.notification-item.read{color:var(--text-muted)}.notification-message{background:none;border:none;color:inherit;cursor:pointer;display:flex;flex:1 1;flex-direction:column;font:inherit;gap:6px;padding:0;text-align:left}.notification-text{font-size:14px;font-weight:600;line-height:1.4}.notification-item.read .notification-text{color:var(--text-muted);font-weight:500}.notification-meta{align-items:center;color:var(--text-muted);display:inline-flex;font-size:12px;gap:6px}.notification-meta__dot{font-size:10px;line-height:1}.notification-meta time{color:inherit}.notification-read-btn{align-self:flex-start;background:none;border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:background-color .2s,color .2s,border-color .2s}.notification-read-btn:hover{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.notification-read-btn:disabled,.notification-read-btn:disabled:hover{background-color:var(--surface-hover);border-color:var(--border-subtle);color:var(--text-muted);cursor:not-allowed}.no-notifications{border:1px dashed var(--border-subtle);border-radius:12px;color:var(--text-muted);padding:28px 18px;text-align:center}.notification-footer{border-top:1px solid var(--border-subtle);padding:12px}.notification-view-all{align-items:center;background:linear-gradient(135deg,var(--accent-secondary),var(--accent-primary));border:none;border-radius:8px;box-shadow:0 12px 24px -16px #8b70ffb3;color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:10px;justify-content:center;padding:10px 16px;transition:transform .18s ease,box-shadow .18s ease;width:100%}.notification-view-all:hover{box-shadow:0 18px 30px -18px #8b70ffcc;transform:translateY(-1px)}.notification-item.unread{background-color:var(--accent-soft)}.dark-mode .notification-btn,.dark-mode .user-nickname{color:var(--accent-primary)}.dark-mode .user-nickname:hover{color:#fff;text-decoration:underline}.dark-mode .notification-view-all{box-shadow:0 18px 32px -18px #18143899}.footer{background-color:#fff;border-top:1px solid #eaeaea;color:#333;font-family:Segoe UI,sans-serif;padding:40px 60px 20px}.footer-content{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}.footer-section{min-width:160px}.footer-logo{align-items:center;display:flex;gap:8px;margin-bottom:12px}.footer-logo img{height:32px;width:32px}.site-name{font-size:18px;font-weight:700}.footer-section h4{font-size:15px;font-weight:700;margin-bottom:10px}.footer-section ul{list-style:none;margin:0;padding:0}.footer-section li{margin-bottom:8px}.footer-section a{color:#555;font-size:14px;text-decoration:none}.footer-section a:hover{color:#6a0dad}.social-icons{color:#333;display:flex;font-size:18px;gap:12px;margin-top:10px}.social-icons svg:hover{color:#6a0dad}.footer-bottom{color:#666;font-size:13px;margin-top:40px;text-align:center}.dark-mode .footer{background-color:#1c1c1c;border-top:1px solid #333;color:#e0e0e0}.dark-mode .site-name{color:#f5f5f5}.dark-mode .footer-section h4{color:#ddd}.dark-mode .footer-section a{color:#aaa}.dark-mode .footer-section a:hover{color:#b88eff}.dark-mode .social-icons{color:#ccc}.dark-mode .social-icons svg:hover{color:#b88eff}.dark-mode .footer-bottom{color:#888}.intro-section{align-items:center;background-color:var(--surface-home-hero);box-sizing:border-box;color:var(--text-primary);display:flex;flex-wrap:wrap;height:100vh;justify-content:space-between;padding:2rem 4rem}.intro-left{flex:1 1;min-width:320px}.intro-left h1{color:var(--text-primary);font-size:36px;font-weight:700;line-height:1.4;margin-bottom:20px}.intro-left p{color:var(--text-muted);font-size:16px;line-height:1.6;margin-bottom:30px}.intro-buttons{display:flex;gap:12px}.intro-buttons .btn{border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:background-color .2s ease}.intro-buttons .primary{background-color:var(--accent-secondary);border:none;color:#fff}.intro-buttons .primary:hover{background-color:var(--accent-hover)}.intro-buttons .secondary{background-color:var(--surface-card);border:1px solid var(--accent-primary);color:var(--accent-primary)}.intro-buttons .secondary:hover{background-color:var(--surface-hover)}.intro-right{display:flex;flex:1 1;justify-content:center;min-width:320px}.intro-right img{border-radius:12px;box-shadow:0 18px 36px #1814381a;max-height:70%;max-width:100%}.dark-mode .intro-section{background-color:var(--surface-home-hero)}.dark-mode .intro-left h1{color:var(--text-primary)}.dark-mode .intro-left p{color:var(--text-muted)}.dark-mode .primary{background-color:var(--accent-secondary);color:#fff}.dark-mode .primary:hover{background-color:var(--accent-hover)}.dark-mode .secondary{background-color:var(--surface-button);border:1px solid var(--accent-primary);color:var(--accent-primary)}.dark-mode .secondary:hover{background-color:var(--surface-hover)}.dark-mode .intro-right img{box-shadow:0 20px 40px #2f25a829}.features-section{align-items:center;background-color:var(--surface-page);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;height:100vh;justify-content:center;padding:3rem;text-align:center}.features-title{font-size:36px;font-weight:700;margin-bottom:16px}.features-subtitle{color:var(--text-muted);font-size:20px;margin-bottom:48px}.features-cards{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;max-width:1200px}.feature-card{background-color:var(--surface-card);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 12px 28px #18143814;padding:32px;text-align:left;transition:transform .2s ease,box-shadow .2s ease;width:320px}.feature-card:hover{box-shadow:0 16px 32px #18143824;transform:scale(1.05)}.feature-icon{align-items:center;background-color:var(--accent-soft);border-radius:999px;color:var(--accent-primary);display:flex;font-size:28px;height:48px;justify-content:center;margin-bottom:16px;width:48px}.feature-name{font-size:18px;font-weight:700;margin-bottom:10px}.feature-desc{color:var(--text-muted);font-size:16px;line-height:1.8}.dark-mode .features-section{background-color:var(--surface-page);color:var(--text-primary)}.dark-mode .features-subtitle{color:var(--text-muted)}.dark-mode .feature-card{background-color:var(--surface-card);border-color:var(--border-subtle);box-shadow:0 20px 40px #18143829}.dark-mode .feature-card:hover{box-shadow:0 24px 48px #18143833}.dark-mode .feature-desc{color:var(--text-muted)}.demo-section{align-items:center;background-color:var(--surface-home-hero);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:3rem;text-align:center}.demo-title{font-size:36px;font-weight:700;margin-bottom:16px}.demo-subtitle{color:var(--text-muted);font-size:20px;margin-bottom:48px}.demo-content{flex-wrap:nowrap;gap:32px;max-width:1400px;width:100%}.demo-box,.demo-content{display:flex;justify-content:center}.demo-box{align-items:center;background-color:var(--surface-card);border:1px solid var(--border-subtle);border-radius:16px;flex-shrink:0;height:400px;padding:24px;text-align:center;width:480px}.placeholder-box strong{color:var(--text-muted);font-size:18px}.dark-mode .demo-section{background-color:var(--surface-home-hero);color:var(--text-primary)}.dark-mode .demo-subtitle{color:var(--text-muted)}.dark-mode .demo-box{background-color:var(--surface-card);border:1px solid var(--border-subtle)}.dark-mode .placeholder-box strong{color:var(--text-muted)}.start-footer-integration-wrapper{background:linear-gradient(135deg,var(--accent-secondary),var(--accent-grad-stop));color:#fff;display:flex;flex-direction:column;min-height:calc(100vh - 1px)}.start-content-container{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;margin:0 auto;max-width:1200px;padding:3rem;text-align:center;width:100%}.start-title{font-size:40px;font-weight:700;margin-bottom:20px}.start-description{font-size:20px;line-height:1.8;margin:0 auto 32px;max-width:720px}.start-button{align-self:center;background-color:var(--surface-card);border:none;border-radius:10px;color:var(--accent-primary);cursor:pointer;font-size:18px;font-weight:600;padding:16px 32px;text-decoration:none;transition:background-color .2s ease}.start-button:hover{background-color:var(--surface-hover)}.dark-mode .start-footer-integration-wrapper{background:linear-gradient(135deg,var(--accent-secondary),var(--accent-grad-stop));color:#f5f5f5}.dark-mode .start-button{background-color:var(--surface-button);color:var(--accent-primary)}.dark-mode .start-button:hover{background-color:var(--surface-hover)}.indicator{display:flex;flex-direction:column;gap:16px;position:fixed;right:40px;top:50%;transform:translateY(-50%);z-index:1000}.dot{background:#ccc;border-radius:50%;cursor:pointer;height:14px;position:relative;transition:background .3s;width:14px}.dot.active{background:#8e24aa}.tooltip{background:#000000b3;border-radius:6px;color:#fff;font-size:12px;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;right:150%;top:50%;transform:translateY(-50%);transition:opacity .2s;white-space:nowrap}.dot:hover .tooltip{opacity:1}.fullpage-container{height:auto;overflow:visible}.page-section{height:100vh;width:100%}.page-section.last-section{height:auto;min-height:100vh}.modal-overlay{align-items:center;background-color:#00000080;display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}.modal-content{background-color:var(--surface-popover);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 24px 46px -32px #18143847;color:var(--text-primary);max-width:380px;padding:2.5rem;position:relative;transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;width:100%}.modal-close{background:none;border:none;color:var(--accent-secondary);cursor:pointer;font-size:1.5rem;position:absolute;right:1.25rem;top:1rem;transition:color .2s ease}.modal-close:hover{color:var(--accent-hover)}.login-title{color:var(--accent-secondary);font-size:1.75rem;font-weight:700;margin-bottom:1rem;text-align:center}.login-form{align-items:center;display:flex;flex-direction:column;gap:1rem}.login-form input{background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:6px;box-sizing:border-box;color:var(--text-primary);display:block;font-size:.9rem;max-width:420px;padding:.75rem 1rem;width:100%}.login-form input:focus{background:#8b70ff14;border-color:var(--accent-secondary);box-shadow:0 0 0 4px var(--accent-soft);outline:none}.login-form button{background:var(--accent-secondary);border:1px solid var(--accent-secondary);border-radius:6px;box-shadow:0 12px 24px -18px #18143852;color:#fff;cursor:pointer;font-size:.9rem;padding:.85rem;transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease;width:300px}.login-form button:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 18px 32px -20px #8b70ff7a}.auth-links{color:var(--text-muted);display:flex;font-size:.75rem;gap:1rem;justify-content:center;margin-bottom:1.5rem;margin-top:1.2rem}.auth-links .signup-action,.auth-links a,.auth-links button{color:var(--accent-secondary);cursor:pointer;text-decoration:none}.auth-links .signup-action:hover,.auth-links a:hover,.auth-links button:hover{text-decoration:underline}.auth-links button{background:none;border:none;font:inherit;padding:0}.auth-links .separator{color:var(--border-subtle)}.divider{font-size:.9rem;margin:1rem 0}.divider:after,.divider:before{background:var(--border-subtle);margin:0 .2rem}.social-button{align-items:center;background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:6px;cursor:pointer;display:flex;flex:1 1;font-size:.95rem;font-weight:500;gap:.5rem;justify-content:center;padding:.65rem;transition:background-color .2s}.social-button img{display:inline-block;height:24px;object-fit:contain;vertical-align:middle;width:24px}.social-button:hover{background-color:var(--surface-hover)}.social-button.github,.social-button.google{background-color:var(--surface-input)}.dark-mode .modal-content{background-color:var(--surface-popover);border:1px solid var(--border-subtle);box-shadow:0 24px 46px -32px #2f25a852;color:var(--text-primary)}.dark-mode .modal-close{color:var(--text-muted)}.dark-mode .login-title{color:var(--text-primary)}.dark-mode .login-form input{background-color:var(--surface-input);border:1px solid var(--border-subtle);color:var(--text-primary)}.dark-mode .login-form input::placeholder{color:var(--text-muted)}.dark-mode .login-form button{background:var(--accent-secondary);border-color:var(--accent-secondary);color:#fff}.dark-mode .login-form button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.dark-mode .auth-links .signup-action,.dark-mode .auth-links a,.dark-mode .auth-links button{color:var(--accent-primary)}.dark-mode .auth-links .separator{color:var(--border-subtle)}.login-logo{display:block;height:auto;margin:0 auto .5rem;transition:filter .3s ease;width:150px}.login-password-wrapper{margin:0 auto;max-width:420px;position:relative;width:100%!important}.login-password-wrapper input{box-sizing:border-box;font-size:.9rem;height:42px;padding:.75rem 2.5rem .75rem 1rem;width:100%}.login-toggle-password-btn{align-items:center;color:var(--text-muted);cursor:pointer;display:flex;font-size:1.1rem;height:24px;justify-content:center;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px}.signup-container{align-items:center;background-color:var(--surface-body);color:var(--text-primary);display:flex;flex-direction:column;margin-top:-2rem;min-height:103vh;padding:6rem 1rem 2rem}.signup-title{color:var(--accent-secondary);font-size:1.4rem;font-weight:700;margin-bottom:.2rem;text-align:center}.signup-subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:1.7rem;margin-top:.2rem;text-align:center}.signup-form{display:flex;flex-direction:column;gap:.4rem;max-width:300px;width:100%}.signup-form label{display:block;font-size:.85rem;font-weight:500}.signup-form input[type=email],.signup-form input[type=password],.signup-form input[type=text]{background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:5px;box-sizing:border-box;color:var(--text-primary);font-size:1rem;height:42px;padding:.9rem;width:100%}.signup-form input[type=email]:focus,.signup-form input[type=password]:focus,.signup-form input[type=text]:focus{background:#8b70ff14;border-color:var(--accent-secondary);box-shadow:0 0 0 4px var(--accent-soft);outline:none}.confirm-password,.email-guide,.password-rules{color:var(--text-muted);font-size:.8rem;line-height:1.6;list-style:none;margin-bottom:.5rem;padding-left:0}.email-guide{color:var(--text-muted);font-size:.8rem;line-height:1.4;margin-top:0}.valid{color:green}.invalid{color:red}.signup-benefit{align-items:flex-start;color:var(--text-muted);display:flex;font-size:.4rem;gap:.5rem;justify-content:center;line-height:1.4}.signup-benefit input[type=checkbox]{flex-shrink:0}.benefits-label{color:var(--text-muted);font-size:.6rem!important}.signup-check label{color:var(--text-muted);flex:1 1;font-size:.7rem;line-height:1.4}.signup-benefit input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:3px;cursor:pointer;height:16px;position:relative;width:16px}.signup-benefit input[type=checkbox]:checked{background-color:var(--accent-secondary)!important;border-color:var(--accent-secondary)!important}.signup-benefit input[type=checkbox]:after{border:solid #fff;border-width:0 2px 2px 0;content:"";display:none;height:8px;left:5px;position:absolute;top:2px;transform:rotate(45deg);width:4px}.signup-benefit input[type=checkbox]:checked:after{display:block}.signup-button{background:var(--accent-secondary);border:1px solid var(--accent-secondary);border-radius:6px;box-shadow:0 16px 28px -24px #8b70ff99;color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;margin-top:1.3rem;padding:.75rem;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.signup-button:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 20px 34px -24px #8b70ffb8}.divider{align-items:center;color:var(--text-muted);display:flex;font-size:.8rem;margin:1.6rem 0 1.2rem;max-width:325px;text-align:center;width:100%}.divider:after,.divider:before{background-color:var(--border-subtle);content:"";flex:1 1;height:1px;margin:0 .1rem}.social-buttons{display:flex;gap:.6rem;justify-content:center;max-width:325px;width:100%}.social-buttons button{background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:5px;cursor:pointer;flex:1 1;font-size:.9rem;padding:.65rem;transition:background-color .2s ease}.social-buttons button:hover{background-color:var(--surface-hover)}.dark-mode .signup-container{background-color:var(--surface-body);color:var(--text-primary)}.dark-mode .signup-form input{background-color:var(--surface-input);border:1px solid var(--border-subtle);color:var(--text-primary)}.dark-mode .signup-button{background:var(--accent-secondary);border-color:var(--accent-secondary)}.dark-mode .signup-button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.dark-mode .divider{color:var(--text-muted)}.dark-mode .divider:after,.dark-mode .divider:before{background:var(--border-subtle)}.dark-mode .social-buttons button{background-color:var(--surface-button);border:1px solid var(--border-subtle);color:var(--text-primary)}.dark-mode .signup-check label{color:var(--text-muted);font-size:.75rem}.password-guide{font-size:.9rem}.password-guide.neutral{color:var(--text-muted)}.password-guide.valid{color:green}.password-guide.invalid{color:red}.password-input-wrapper{position:relative}.toggle-password-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.logo-wrapper{display:flex;justify-content:center;margin-bottom:1rem}.signup-logo{height:auto;max-width:120px;transition:filter .3s ease}.dark-mode .login-logo,.dark-mode .signup-logo{filter:brightness(1.6) saturate(1.15)}.broadcast-container{align-items:center;background-color:var(--surface-page);color:var(--text-primary);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:20px;text-align:center}.broadcast-header{margin-bottom:30px}.broadcast-icon{color:var(--accent-primary);font-size:48px}.broadcast-header h2{font-size:28px;font-weight:700;margin-bottom:10px}.broadcast-header p{color:var(--text-muted);font-size:16px;line-height:1.5}.broadcast-card{background-color:var(--surface-card);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 20px 46px #1814381f;margin:0 auto;max-width:550px;padding:40px 30px}.broadcast-card h3{font-size:18px;font-weight:700;margin-bottom:10px;text-align:left}.broadcast-card p{color:var(--text-muted);font-size:14px;margin-bottom:10px;text-align:left}.input-group{display:flex;gap:8px}.input-group input{background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-primary);flex:1 1;font-size:14px;padding:10px 14px}.input-group button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:700;gap:6px;padding:10px 16px;transition:background-color .2s ease}.input-group button:hover{background-color:var(--accent-hover)}.error-text{color:#d32f2f;font-size:13px;margin-top:6px}.start-btn{background-color:var(--accent-secondary);border:none;border-radius:8px;color:#fff;display:flex;font-size:15px;font-weight:700;gap:6px;justify-content:center;padding:10px 16px;text-decoration:none;transition:background-color .2s ease;width:100%}.start-btn:hover{background-color:var(--accent-hover)}.hr-with-text{align-items:center;color:var(--text-muted);display:flex;font-size:14px;margin:24px 0;text-align:center}.hr-with-text:after,.hr-with-text:before{border-top:1px solid var(--border-subtle);content:"";flex:1 1;margin:0 12px}.start-input-group{display:flex;flex-direction:column;margin-bottom:20px}.start-input-group label{color:var(--text-primary);display:block;font-size:14px;font-weight:700;margin-bottom:6px;text-align:left}.start-input-group input{background-color:var(--surface-input);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-primary);flex:1 1;font-size:14px;padding:10px 14px}.required{color:#e63946;margin-left:4px}.help-text{color:var(--text-muted);font-size:12px;margin-top:6px;text-align:left}.dark-mode .broadcast-container{background-color:var(--surface-page);color:var(--text-primary)}.dark-mode .broadcast-icon{color:var(--accent-primary)}.dark-mode .broadcast-header p{color:var(--text-muted)}.dark-mode .broadcast-card{background-color:var(--surface-card);border-color:var(--border-subtle);box-shadow:0 24px 48px #1814382e}.dark-mode .broadcast-card p{color:var(--text-muted)}.dark-mode .input-group input,.dark-mode .start-input-group input{background-color:var(--surface-input);border:1px solid var(--border-subtle);color:var(--text-primary)}.dark-mode .input-group button{background-color:var(--accent-secondary);color:#fff}.dark-mode .input-group button:hover{background-color:var(--accent-hover)}.dark-mode .start-btn{background-color:var(--accent-secondary);color:#fff}.dark-mode .start-btn:hover{background-color:var(--accent-hover)}.dark-mode .hr-with-text{color:var(--text-muted)}.dark-mode .hr-with-text:after,.dark-mode .hr-with-text:before{border-top:1px solid var(--border-subtle)}.dark-mode .start-input-group label{color:var(--text-primary)}.dark-mode .help-text{color:var(--text-muted)}.dark-mode .required{color:#ff6b6b}.community-wrapper{--community-bg:#fff;--community-surface:#fff;--community-border:#0f172a0f;--community-text:#161829;--community-muted:#555a6c;--community-soft:#7b5dff29;--community-accent:#7b5dff;--community-radius:18px;background:var(--community-bg);color:var(--community-text);font-family:Noto Sans KR,sans-serif;min-height:100vh;padding:72px 0 84px}.community-page{grid-gap:28px;align-items:flex-start;display:grid;gap:28px;grid-template-areas:"left main right";grid-template-columns:220px minmax(0,1fr) 320px;margin:0 auto;width:min(1180px,100% - 48px)}.sidebar-left{color:var(--community-muted);display:flex;flex-direction:column;gap:16px;grid-area:left;letter-spacing:.1em;position:sticky;top:96px}.sidebar-left h3{color:var(--community-text);font-size:16px;font-weight:700;margin:0;text-align:center}.sidebar-left ul{background:var(--community-surface);border:1px solid var(--community-border);border-radius:var(--community-radius);box-shadow:0 18px 30px -28px #0f172a3d;display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:18px}.sidebar-left li{color:var(--community-muted);cursor:pointer;font-size:14px;font-weight:500;transition:color .18s ease}.sidebar-left li.active,.sidebar-left li:hover{color:var(--community-accent);font-weight:600}.sidebar-left li.is-disabled{color:#555a6c52;cursor:default;font-weight:500;pointer-events:none}.sidebar-left li.is-disabled:hover{color:#555a6c52}.popular-posts,.popular-tags,.top-writers{background:var(--community-surface);border:1px solid var(--community-border);border-radius:var(--community-radius);box-shadow:0 18px 30px -28px #0f172a3d;padding:20px 22px}.popular-posts h4,.popular-tags h4,.top-writers h4{color:var(--community-text);font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}.top-writers ol{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}.top-writers-empty{color:var(--community-muted);font-size:13px;margin:0}.top-writers li{list-style:none}.top-writer-item{align-items:center;background:#8b70ff14;border:1px solid #0000;border-radius:12px;color:var(--community-muted);cursor:pointer;display:flex;font-size:13px;font-weight:600;gap:10px;justify-content:space-between;padding:10px 14px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.top-writer-item:hover{background:#8b70ff2e;border-color:#8b70ff52;color:var(--community-text);transform:translateY(-1px)}.top-writer-item:focus-visible{outline:2px solid #8b70ff8c;outline-offset:3px}.top-writer-item.is-active{background:var(--community-accent);border-color:var(--community-accent);color:#fff;transform:translateY(-1px)}.top-writer-item .writer-name{align-items:center;display:flex;gap:6px}.top-writer-item .writer-count{color:inherit}.community-main{display:flex;flex-direction:column;gap:24px;grid-area:main}.tabs{border-bottom:1px solid var(--community-border);display:flex;gap:18px;padding-bottom:12px}.tabs button{background:none;border:none;border-bottom:2px solid #0000;color:var(--community-muted);cursor:pointer;font-size:16px;font-weight:600;padding:8px 0;transition:color .18s ease,border-color .18s ease}.tabs button.active-tab{border-color:var(--community-accent);color:var(--community-text)}.tabs button.tab-disabled{cursor:not-allowed;opacity:.6}.tabs button.tab-disabled,.tabs button.tab-disabled:hover{border-color:#0000;color:#555a6c4d}.search-bar{background:var(--community-surface);border:1px solid var(--community-border);border-radius:var(--community-radius);box-shadow:0 22px 34px -30px #0f172a59;flex-direction:column;padding:20px 22px}.search-bar,.search-options,.search-row{display:flex;gap:12px}.search-options{flex-wrap:wrap}.search-option{display:flex;flex-direction:column;gap:6px;min-width:140px}.search-option label{color:var(--community-muted);font-size:12px;font-weight:600}.search-option select{background:var(--community-bg);border:1px solid var(--community-border);border-radius:10px;color:var(--community-text);font-size:13px;padding:10px 12px;transition:border-color .18s ease,background-color .18s ease}.search-option select:focus{background:var(--community-surface);border-color:#8b70ff8c;outline:none}.search-row input{background:var(--community-bg);border:1px solid var(--community-border);border-radius:12px;color:var(--community-text);flex:1 1;font-size:14px;min-width:0;padding:12px 14px;transition:border-color .18s ease,background-color .18s ease}.search-row input:focus{background:var(--community-surface);border-color:#8b70ff8c;outline:none}.search-row button{border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;padding:12px 16px;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.search-btn{background:var(--community-accent);border:none;box-shadow:0 14px 26px -20px #8b70ff73;color:#fff}.search-btn:hover{box-shadow:0 22px 36px -24px #8b70ffb3;transform:translateY(-1px)}.filter-area{align-items:center;display:flex;gap:16px;justify-content:space-between}.filter-bar{display:flex;flex-wrap:wrap;font-size:15px;font-weight:500;gap:12px}.filter-bar,.filter-chip{color:var(--community-muted)}.filter-chip{align-items:center;background:var(--community-surface);border:1px solid #0000;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;padding:8px 14px;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.filter-chip:hover{border-color:#8b70ff59;color:var(--community-text)}.filter-chip.active{background:#8b70ff29;border-color:#8b70ff85;color:var(--community-accent);font-weight:600;transform:translateY(-1px)}.write-btn{background:var(--community-accent);border:none;border-radius:12px;box-shadow:0 14px 26px -20px #8b70ff73;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:transform .18s ease,box-shadow .18s ease}.write-btn:hover{box-shadow:0 22px 36px -24px #8b70ffb8;transform:translateY(-1px)}.post-card,.post-list{display:flex;flex-direction:column;gap:18px}.post-card{background:var(--community-surface);border:1px solid var(--community-border);border-radius:var(--community-radius);box-shadow:0 22px 38px -32px #0f172a42;cursor:pointer;padding:24px 26px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.post-card:hover{border-color:#8b70ff80;box-shadow:0 32px 46px -30px #8b70ff57;transform:translateY(-3px)}.post-card:focus-visible{outline:2px solid var(--community-accent);outline-offset:3px}.post-meta{display:flex;flex-direction:column;gap:6px}.title-row{align-items:center;display:flex;gap:10px}.badge{background:var(--community-soft);color:var(--community-accent);font-weight:600}.badge-solved{background:#22c55e1f;color:#16a34a}.post-title{color:var(--community-text);font-size:20px}.post-summary{color:var(--community-muted);font-size:15px;line-height:1.6;margin:0}.post-tags{display:flex;flex-wrap:wrap;gap:8px}.post-tags .tag{align-items:center;background:var(--community-soft);border-radius:999px;color:var(--community-accent);display:inline-flex;font-size:13px;font-weight:600;padding:6px 10px}.post-footer{color:var(--community-muted);flex-wrap:wrap;font-size:13px;justify-content:space-between}.post-footer,.post-footer-left,.post-footer-right{align-items:center;display:flex;gap:12px}.pagination-wrapper{align-items:center;border-top:1px solid var(--community-border);display:flex;font-size:14px;gap:24px;justify-content:center;padding-top:32px}.page-numbers{align-items:center;display:inline-flex;gap:8px}.page-button{background:var(--community-surface);border:1px solid var(--community-border);border-radius:10px;color:var(--community-muted);cursor:pointer;min-width:36px;padding:8px 12px;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.page-button:disabled{cursor:not-allowed;opacity:.55}.page-button:hover{border-color:#8b70ff73;color:var(--community-text)}.page-button.active{background:var(--community-accent);border-color:var(--community-accent);color:#fff;font-weight:600}.next-page{background:none;border:none;color:var(--community-accent);cursor:pointer;font-weight:600}.sidebar-right{align-self:start;border-radius:12px;display:flex;flex-direction:column;gap:20px;grid-area:right;position:sticky;top:96px}.popular-tags .tag-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}.popular-tags .tag-list li{list-style:none}.popular-tags .tag-item-button{align-items:center;background:#8b70ff14;border:1px solid #0000;border-radius:12px;color:var(--community-muted);cursor:pointer;display:flex;font-size:13px;font-weight:600;gap:12px;justify-content:space-between;padding:10px 14px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.popular-tags .tag-item-button:hover:not(:disabled){background:#8b70ff2e;border-color:#8b70ff52;color:var(--community-text);transform:translateY(-1px)}.popular-tags .tag-item-button .tag-name{color:var(--community-text)}.popular-tags .tag-item-button .tag-count{color:var(--community-accent)}.popular-tags .tag-item-button.is-active{background:var(--community-accent);border-color:var(--community-accent);color:#fff;transform:translateY(-1px)}.popular-tags .tag-item-button.is-active .tag-count,.popular-tags .tag-item-button.is-active .tag-name{color:#fff}.popular-tags .tag-item-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.popular-tags .tag-item-button:focus-visible{outline:2px solid #8b70ff8c;outline-offset:3px}.popular-tags-empty{color:var(--community-muted);font-size:13px;margin:0}.popular-posts ul{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.popular-posts-empty{color:var(--community-muted);font-size:13px;margin:0}.popular-posts li{display:flex;flex-direction:column;font-size:13px;gap:4px}.popular-posts li button{align-items:flex-start;background:none;border:none;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:0;text-align:left;width:100%}.popular-posts li button:hover .post-title{color:var(--community-accent)}.popular-posts .post-title{color:var(--community-text);font-size:14px;font-weight:600;margin:0}.popular-posts .post-author,.popular-posts .post-likes{color:var(--community-muted);font-size:12px}.error{color:#c2435b;font-weight:600}.dark-mode .community-wrapper{--community-bg:#0f1119;--community-surface:#181c2b;--community-border:#ffffff14;--community-text:#f2f4ff;--community-muted:#c7cdf4;--community-soft:#5a42d652;--community-accent:#5a42d6}.dark-mode .popular-posts,.dark-mode .popular-tags,.dark-mode .post-card,.dark-mode .search-bar,.dark-mode .sidebar-left ul,.dark-mode .sidebar-right>div,.dark-mode .top-writers{box-shadow:none}.dark-mode .badge-solved{background:#22c55e33}@media (max-width:1200px){.community-page{gap:24px;grid-template-areas:"left main" "right right";grid-template-columns:200px minmax(0,1fr)}.sidebar-right{position:static}}@media (max-width:960px){.community-page{gap:32px;grid-template-areas:"main" "left" "right";grid-template-columns:minmax(0,1fr)}.sidebar-left,.sidebar-right{position:static}.filter-area{align-items:flex-start;flex-direction:column}.pagination-wrapper{align-items:center;flex-direction:column;gap:16px}}@media (max-width:720px){.community-wrapper{padding:56px 0 64px}.community-page{padding:0 18px;width:100%}.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.search-row button{width:100%}.filter-area{gap:12px;width:100%}.post-card{padding:20px 22px}}.placeholder-animation{background:#fff;background:var(--card,#fff);border:1px solid #e2e8f0;border:1px solid var(--border,#e2e8f0);border-radius:12px;box-shadow:0 2px 8px #0000000d;display:flex;flex-direction:column;height:100%;min-height:500px;overflow:hidden;width:100%}.placeholder-header{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border,#e2e8f0);padding:24px 32px 20px}.placeholder-header h3{align-items:center;color:#1e293b;color:var(--text,#1e293b);display:flex;font-size:20px;font-weight:600;gap:12px;margin:0 0 8px}.placeholder-header p{color:#64748b;color:var(--text-light,#64748b);font-size:14px;line-height:1.5;margin:0}.placeholder-content{align-items:flex-start;display:flex;flex:1 1;justify-content:center;overflow-y:auto;padding:32px 24px}.placeholder-box{background:linear-gradient(135deg,#fafbfc,#f8fafc);border:2px dashed #e2e8f0;border:2px dashed var(--border,#e2e8f0);border-radius:16px;max-width:600px;padding:32px;text-align:center;width:100%}.placeholder-icon{animation:float 4s ease-in-out infinite;display:block;font-size:64px;margin-bottom:20px}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.05)}}.placeholder-box h4{color:#1e293b;color:var(--text,#1e293b);font-size:24px;font-weight:700;letter-spacing:-.5px;margin:0 0 16px}.placeholder-box>p{color:#64748b;color:var(--text-light,#64748b);font-size:16px;line-height:1.6;margin:0 0 32px}.placeholder-stats{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:32px 0;text-align:left}.stat-item{background:#fff;background:var(--card,#fff);border:1px solid #e2e8f0;border:1px solid var(--border,#e2e8f0);border-radius:12px;box-shadow:0 1px 3px #0000000d;padding:16px;transition:all .2s ease}.stat-item:hover{border-color:#8b5cf6;border-color:var(--primary,#8b5cf6);box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.stat-label{color:#64748b;color:var(--text-light,#64748b);display:block;font-size:12px;font-weight:500;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.stat-value{color:#8b5cf6;color:var(--primary,#8b5cf6);display:block;font-size:16px;line-height:1.2}.coming-soon{background:linear-gradient(135deg,#fef7ff,#faf5ff);border-left:4px solid #8b5cf6;border-left:4px solid var(--primary,#8b5cf6);border-radius:12px;box-shadow:0 2px 8px #8b5cf61a;margin:32px 0;padding:24px;text-align:left}.coming-soon p{align-items:center;color:#1e293b;color:var(--text,#1e293b);display:flex;font-size:14px;font-weight:600;gap:8px;margin:0 0 16px}.coming-soon ul{list-style-type:none;margin:0;padding-left:20px}.coming-soon li{color:#64748b;color:var(--text-light,#64748b);font-size:13px;line-height:1.5;margin-bottom:8px;padding-left:24px;position:relative}.coming-soon li:before{content:"✨";font-size:12px;left:0;position:absolute;top:0}.development-progress{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #0ea5e9;border-radius:12px;margin:32px 0;padding:24px;text-align:left}.development-progress h5{align-items:center;color:#1e293b;color:var(--text,#1e293b);display:flex;font-size:14px;font-weight:600;gap:8px;margin:0 0 16px}.progress-bar{background:#e2e8f0;border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;width:100%}.progress-fill{animation:progress-pulse 2s ease-in-out infinite;background:linear-gradient(90deg,#0ea5e9,#06b6d4);border-radius:4px;height:100%;transition:width .5s ease}@keyframes progress-pulse{0%,to{opacity:1}50%{opacity:.8}}.progress-text{align-items:center;color:#64748b;color:var(--text-light,#64748b);display:flex;font-size:12px;justify-content:space-between;margin-bottom:16px}.progress-steps{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.step{border-radius:8px;font-size:11px;font-weight:500;padding:8px 12px;text-align:center;transition:all .2s ease}.step.completed{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}.step.current{animation:pulse 2s ease-in-out infinite;background:#fef3c7;border:1px solid #fde68a;color:#92400e}.step.pending{background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.data-preview{background:#fff;background:var(--card,#fff);border:1px solid #e2e8f0;border:1px solid var(--border,#e2e8f0);border-radius:12px;box-shadow:0 2px 8px #0000000d;margin:32px 0;overflow:hidden;text-align:left}.data-preview details{padding:20px}.data-preview summary{align-items:center;border-radius:6px;color:#1e293b;color:var(--text,#1e293b);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;margin-bottom:12px;padding:4px 0;transition:all .2s ease}.data-preview summary:hover{color:#8b5cf6;color:var(--primary,#8b5cf6)}.data-preview summary::marker{content:""}.data-preview summary:before{content:"▶";font-size:12px;transition:transform .2s ease}.data-preview details[open] summary:before{transform:rotate(90deg)}.json-preview{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;color:var(--text-light,#64748b);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;font-size:12px;line-height:1.5;margin:12px 0 0;max-height:300px;overflow-y:auto;padding:16px;white-space:pre-wrap}.help-section{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-left:4px solid #f59e0b;border-radius:12px;margin:32px 0 0;padding:20px;text-align:left}.help-section p{color:#64748b;color:var(--text-light,#64748b);font-size:13px;line-height:1.5;margin:0 0 8px}.help-section p:first-child{color:#1e293b;color:var(--text,#1e293b);font-weight:600}@media (max-width:768px){.placeholder-header{padding:20px 24px 16px}.placeholder-header h3{font-size:18px}.placeholder-content{padding:24px 16px}.placeholder-box{padding:24px}.placeholder-icon{font-size:48px;margin-bottom:16px}.placeholder-box h4{font-size:20px}.placeholder-stats{gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:24px 0}.stat-item{padding:12px}.progress-steps{gap:8px;grid-template-columns:1fr 1fr}}@media (max-width:480px){.placeholder-box{padding:20px 16px}.placeholder-stats{gap:8px}.placeholder-stats,.progress-steps{grid-template-columns:1fr}.coming-soon,.development-progress,.help-section{margin:20px 0;padding:16px}}:root{--primary:var(--accent-secondary);--primary-hover:var(--accent-hover);--success:#43a047;--warning:#fb8c00;--danger-color:#e53935;--bg:#f8f9fa;--element:#fff;--element-light:#f3f4f6;--border:#e5e7eb;--border-light:#f3f4f6;--text:#111827;--text-light:#6b7280;--text-medium:#4b5563;--shadow:0 2px 8px #0000001a;--radius:6px;--transition:all 0.2s ease;--header-height:64px;--footer-height:60px}body.dark-mode{--primary:var(--accent-secondary);--primary-hover:var(--accent-hover);--success:#4caf50;--warning:#ff9800;--danger-color:#ff5252;--bg:#060609;--element:#101018;--element-light:#181828;--border:#7c68dc52;--border-light:#7c68dc33;--text:#f4f3ff;--text-light:#a9a6d6;--text-medium:#c5c2e8;background-color:#f8f9fa;background-color:var(--bg)}*,:after,:before{transition:all .2s ease;transition:var(--transition)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif;margin:0;min-height:100vh;overflow-x:hidden;padding:0}.ide-container,body{background-color:#f8f9fa;background-color:var(--bg);color:#111827;color:var(--text)}.ide-container{box-sizing:border-box;display:flex;height:100vh;overflow:hidden;padding-top:64px;width:100%}.main-content{background-color:#f8f9fa;background-color:var(--bg);display:flex;flex:1 1;flex-direction:column;height:100%;min-width:0;overflow-x:hidden;padding-top:0;position:relative;transition:none}.sidebar.collapsed+.main-content{margin-left:0}.content-layout{display:flex;flex-grow:1;max-width:100%;overflow:hidden;position:relative}.editor-tabs{align-items:flex-end;background:#fff;background:var(--element);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);display:flex;gap:4px;min-height:40px;overflow-x:auto;padding:0 12px;scrollbar-width:thin}.editor-tabs::-webkit-scrollbar{height:6px}.editor-tabs::-webkit-scrollbar-thumb{background-color:#94a3b866;border-radius:4px}.editor-tab{align-items:center;background:#0000;border:1px solid #0000;border-radius:6px 6px 0 0;color:#4b5563;color:var(--text-medium);cursor:pointer;display:flex;font-size:12px;font-weight:500;gap:6px;padding:8px 14px;position:relative;transition:background-color .2s ease,color .2s ease}.editor-tab:hover{background:#f3f4f6;background:var(--element-light);color:#111827;color:var(--text)}.editor-tab.active{background:#fff;background:var(--element);border-color:#e5e7eb;border-color:var(--border);border-bottom-color:#fff;border-bottom-color:var(--element);box-shadow:0 -2px 6px #0f172a0f;color:#111827;color:var(--text);font-weight:600}.tab-title{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-dirty-indicator{color:#fb8c00;color:var(--warning);font-size:11px;line-height:1}.tab-close{align-items:center;background:#0000;border-radius:4px;color:inherit;cursor:pointer;display:flex;font-size:14px;height:18px;justify-content:center;line-height:1;margin-left:4px;opacity:0;pointer-events:none;transition:opacity .2s ease,background-color .2s ease,color .2s ease;-webkit-user-select:none;user-select:none;width:18px}.editor-tab.active .tab-close,.editor-tab:not(.active):hover .tab-close{opacity:1;pointer-events:auto}.tab-close:hover{background:#94a3b840;color:#111827;color:var(--text)}.no-open-file-message{align-items:center;background:#94a3b814;border:1px dashed #e5e7eb;border:1px dashed var(--border);border-radius:8px;color:#4b5563;color:var(--text-medium);display:flex;font-size:13px;height:100%;justify-content:center;padding:0 16px;text-align:center;width:100%}.sidebar{background-color:#fff!important;background-color:var(--element)!important;border:none!important;box-shadow:none!important;color:#111827!important;color:var(--text)!important;display:flex!important;flex-direction:column!important;flex-shrink:0!important;height:100%!important;max-height:100%!important;padding:0!important;position:relative!important;transition:width .3s ease,transform .3s ease!important;width:280px!important;z-index:10!important}body:not(.dark-mode) .sidebar{background-color:#fff!important;border-right:1px solid #dfe3f5!important;box-shadow:6px 0 18px #1820480f!important}body:not(.dark-mode) .modern-sidebar,body:not(.dark-mode) .modern-sidebar-content,body:not(.dark-mode) .modern-sidebar-header{background-color:#f8f9ff!important}body:not(.dark-mode) .content-layout,body:not(.dark-mode) .main-content{background-color:#eaedf8}body:not(.dark-mode) .editor-section,body:not(.dark-mode) .monaco-editor-wrapper{background-color:#e2e6f4}body:not(.dark-mode) .right-panel{background-color:#f6f7fc}.sidebar.collapsed{margin-left:-1px;overflow:hidden;transform:translateX(-100%);width:0!important}.modern-sidebar{border-right:none;display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.modern-sidebar,.modern-sidebar-header{background-color:#fff;background-color:var(--element)}.modern-sidebar-header{border-bottom:1px solid #f3f4f6;border-bottom:1px solid var(--border-light);flex-shrink:0;padding:12px 16px}.modern-sidebar-content{background-color:#fff;background-color:var(--element);flex-grow:1;overflow-y:auto;padding:8px 12px}.sidebar-title-container{align-items:center;display:flex;height:28px;justify-content:space-between;min-height:28px}.sidebar-title{align-items:center;color:var(--text)!important;display:flex;font-size:13px!important;font-weight:600!important;height:20px;line-height:1.4!important;margin:0}.new-file-button{align-items:center;background:none;border:none;border-radius:6px;border-radius:var(--radius);color:#6b7280;color:var(--text-light);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;transition:all .2s ease;transition:var(--transition);width:28px}.new-file-button:hover{background-color:#f3f4f6;background-color:var(--element-light);color:#111827;color:var(--text)}body.dark-mode .new-file-button:hover{background-color:#ffffff0d}.icon-plus{font-size:16px;font-weight:600}.sidebar-section{margin-bottom:4px}.section-header{align-items:center!important;background:none!important;border:none!important;border-radius:6px!important;border-radius:var(--radius)!important;color:#111827!important;color:var(--text)!important;cursor:pointer!important;display:flex!important;font-size:12px!important;font-weight:500!important;gap:6px!important;height:30px!important;line-height:1.3!important;min-height:30px!important;padding:6px 10px!important;text-align:left!important;transition:all .2s ease!important;transition:var(--transition)!important;width:100%!important}.section-header:hover{background-color:#f3f4f6!important;background-color:var(--element-light)!important}body.dark-mode .section-header:hover{background-color:#ffffff0d!important}.section-title{align-items:center!important;display:flex!important;flex:1 1!important;font-size:12px!important;font-weight:500!important;height:18px!important;line-height:1.3!important;margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.chevron-icon{font-size:10px!important;margin-right:2px!important;transition:all .2s ease!important;transition:var(--transition)!important}.chevron-icon,.section-icon{align-items:center!important;color:#6b7280!important;color:var(--text-light)!important;display:flex!important;flex-shrink:0!important;height:14px!important;justify-content:center!important;width:14px!important}.section-icon{stroke-width:2px!important;margin-right:6px!important}.section-icon svg{stroke:currentColor!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important;height:14px!important;width:14px!important}body.dark-mode .section-icon{color:#6b7280!important;color:var(--text-light)!important}.section-content{margin-bottom:4px!important;margin-left:24px!important;margin-top:2px!important;padding-left:2px!important}.file-item{align-items:center!important;border-radius:6px!important;border-radius:var(--radius)!important;color:#6b7280!important;color:var(--text-light)!important;cursor:pointer!important;display:flex!important;font-size:12px!important;gap:6px!important;height:26px!important;margin-bottom:1px!important;min-height:26px!important;padding:4px 32px 4px 6px!important;position:relative!important;transition:all .2s ease!important;transition:var(--transition)!important}.file-item:hover{background-color:#f3f4f6!important;background-color:var(--element-light)!important;color:#111827!important;color:var(--text)!important}body.dark-mode .file-item:hover{background-color:#ffffff0d!important}.file-item.active{background-color:#dbeafe!important;color:#1d4ed8!important;font-weight:500!important}.file-item.active:hover{background-color:#bfdbfe!important}body.dark-mode .file-item.active{background-color:#1d4ed826!important;color:#60a5fa!important}body.dark-mode .file-item.active:hover{background-color:#1d4ed840!important}.file-name{flex:1 1!important;font-size:12px!important;height:18px!important;line-height:1.3!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.file-icon,.file-name{align-items:center!important;display:flex!important}.file-icon{border-radius:2px!important;color:#fff!important;flex-shrink:0!important;font-size:7px!important;font-weight:700!important;height:14px!important;justify-content:center!important;line-height:1!important;margin-right:1px!important;text-align:center!important;width:14px!important}.file-icon.python-icon{background-color:#3b82f6}.file-icon.c-icon{background-color:#6b7280}.file-icon.cpp-icon{background-color:#f34b7d}.file-icon.java-icon{background-color:#b07219}.file-icon.js-icon{background-color:#f1e05a;color:#333}.file-icon.json-icon{background-color:#eab308}.file-icon.default-icon{background-color:#6b7280;background-color:var(--text-light);font-size:8px}.delete-file-button{transition:opacity .2s,color .2s}body.dark-mode .delete-file-button:hover{background-color:#ff52521a}.file-item.example-file{opacity:.9}.file-item.example-file:hover{opacity:1}.file-item.json-file{border-left:2px solid #eab308;padding-left:6px}body.dark-mode .file-item.json-file{border-left-color:#eab30899}.sidebar-stats{color:#6b7280;color:var(--text-light);flex-direction:column;gap:2px}.sidebar-stats,.stat-row{display:flex;font-size:10px!important}.stat-row{align-items:center;height:16px;justify-content:space-between;min-height:16px}.active-file-name{color:#2563eb;font-size:10px!important;font-weight:500!important;line-height:1.3;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-section{color:#111827;color:var(--text);display:flex;flex-direction:column;font-size:13px;height:100%;padding:0}.auth-header{background-color:#f3f4f6;background-color:var(--element-light);border-bottom:1px solid #f3f4f6;border-bottom:1px solid var(--border-light);gap:8px;height:48px;min-height:48px;padding:12px 16px}.auth-header,.auth-icon{align-items:center;display:flex}.auth-icon{flex-shrink:0;font-size:16px;height:16px;justify-content:center;width:16px}.auth-title{color:#111827;color:var(--text);font-size:14px!important;font-weight:600!important;line-height:1.4}.auth-content,.auth-title{align-items:center;display:flex}.auth-content{flex:1 1;flex-direction:column;padding:24px 20px;text-align:center}.auth-message{color:#6b7280;color:var(--text-light);font-size:13px!important;line-height:1.5;margin-bottom:20px}.auth-buttons{display:flex;flex-direction:column;gap:12px;width:100%}.auth-button{align-items:center;border:none;border-radius:6px;border-radius:var(--radius);box-shadow:0 1px 3px #0000001a;cursor:pointer;display:flex;font-size:13px!important;font-weight:600!important;gap:8px;justify-content:center;padding:12px 16px;text-decoration:none;transition:all .2s ease;transition:var(--transition)}.auth-button.login-button{background-color:var(--accent-secondary);background-color:var(--primary);color:#fff}.auth-button.login-button:hover{background-color:var(--accent-hover);background-color:var(--primary-hover);box-shadow:0 3px 6px #00000026;transform:translateY(-1px)}.auth-button.signup-button{background-color:#7e57c21a;border:1px solid #7e57c233;color:var(--accent-secondary);color:var(--primary)}.auth-button.signup-button:hover{background-color:#7e57c233;transform:translateY(-1px)}body.dark-mode .auth-button.signup-button{background-color:#7e57c226;border-color:#7e57c24d}body.dark-mode .auth-button.signup-button:hover{background-color:#7e57c240}.modern-sidebar-content::-webkit-scrollbar{width:6px}.modern-sidebar-content::-webkit-scrollbar-track{background:#fff;background:var(--element)}.modern-sidebar-content::-webkit-scrollbar-thumb{background:#e5e7eb;background:var(--border);border-radius:3px}.modern-sidebar-content::-webkit-scrollbar-thumb:hover{background:#6b7280;background:var(--text-light)}body.dark-mode .modern-sidebar-content::-webkit-scrollbar-track{background:#fff;background:var(--element)}body.dark-mode .modern-sidebar-content::-webkit-scrollbar-thumb{background:#e5e7eb;background:var(--border)}body.dark-mode .modern-sidebar-content::-webkit-scrollbar-thumb:hover{background:#6b7280;background:var(--text-light)}.main-header{align-items:center;background-color:#fff;background-color:var(--element);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);box-shadow:0 1px 3px #0000000d;display:flex;height:64px;height:var(--header-height);justify-content:space-between;padding:12px 20px;z-index:50}.header-left{align-items:center;gap:12px}.header-right{gap:12px}.sidebar-toggle-button{align-items:center;background:none;border:none;border-radius:12px;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;margin-right:12px;padding:10px;position:relative;transition:all .3s ease;width:44px}.sidebar-toggle-button:hover{background-color:#6a47b81a;transform:scale(1.05)}body.dark-mode .sidebar-toggle-button:hover{background-color:#7e57c226}.sidebar-toggle-button:hover .hamburger-icon span{background-color:var(--accent-secondary);background-color:var(--primary);transform:scaleX(1.1)}.hamburger-icon{align-items:center;display:flex;flex-direction:column;height:18px;justify-content:space-between;width:22px}.hamburger-icon span{background-color:#111827;background-color:var(--text);border-radius:2px;box-shadow:0 .5px 1px #0000001a;display:block;flex-shrink:0;height:2px;transform-origin:center;transition:all .1s cubic-bezier(.25,.8,.25,1);width:100%}.language-selector{display:inline-block;margin-left:10px;position:relative;top:9px}.language-button{align-items:center;background-color:var(--accent-secondary);background-color:var(--primary);border:none;border-radius:20px;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;display:flex;font-size:13px;font-weight:600;gap:8px;letter-spacing:.5px;padding:6px 14px;transition:all .2s ease;transition:var(--transition)}.language-button:hover{background-color:var(--accent-hover);background-color:var(--primary-hover);box-shadow:0 3px 6px #00000040;transform:translateY(-1px)}.dropdown-arrow{font-size:10px;margin-left:6px}.language-dropdown{background-color:#fff;background-color:var(--element);border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);box-shadow:0 4px 12px #00000026;left:0;margin-top:5px;min-width:180px;overflow:hidden;padding:8px 0;position:absolute;top:calc(100% + 6px);z-index:200}.language-item{align-items:center;color:#111827;color:var(--text);cursor:pointer;display:flex;font-size:14px;padding:10px 16px;position:relative;transition:all .2s ease;transition:var(--transition)}.language-item:not(:last-child){border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border)}.language-item:hover{background-color:#f3f4f6;background-color:var(--element-light)}body.dark-mode .language-item:hover{background-color:#ffffff0d}.file-type-indicator{margin-left:12px}.file-type-indicator .file-type-badge{align-items:center!important;border:1px solid!important;border-radius:16px!important;box-shadow:0 2px 6px #0000001a!important;display:inline-flex!important;font-size:13px!important;font-weight:600!important;gap:6px!important;letter-spacing:.3px!important;min-height:32px!important;padding:6px 12px!important;position:relative;text-transform:none!important;top:10px;transition:all .2s ease!important;white-space:nowrap!important}.file-type-indicator .file-type-badge:hover{box-shadow:0 4px 10px #00000026!important;transform:translateY(-1px)!important}.file-type-indicator .file-type-badge.code-type{background:linear-gradient(135deg,#3b82f61f,#3b82f62e)!important;border-color:#3b82f64d!important;color:#1d4ed8!important}.file-type-indicator .file-type-badge.json-type{background:linear-gradient(135deg,#eab3081f,#eab3082e)!important;border-color:#eab3084d!important;color:#a16207!important}body.dark-mode .file-type-indicator .file-type-badge.code-type{background:linear-gradient(135deg,#3b82f62e,#3b82f640)!important;border-color:#3b82f666!important;color:#60a5fa!important}body.dark-mode .file-type-indicator .file-type-badge.json-type{background:linear-gradient(135deg,#eab3082e,#eab30840)!important;border-color:#eab30866!important;color:#fbbf24!important}.filename-input{background-color:#fff;background-color:var(--element);border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);color:#111827;color:var(--text);font-size:14px;outline:none;padding:8px 12px;transition:all .2s ease;transition:var(--transition);width:200px}.filename-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #7e57c233}.save-button{border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);color:#111827;color:var(--text);cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease;transition:var(--transition)}.save-button,.save-button:hover{background-color:#f3f4f6;background-color:var(--element-light)}.save-button:hover{transform:translateY(-1px)}body.dark-mode .save-button:hover{background-color:#ffffff0d}.save-indicator{align-items:center;color:#43a047;color:var(--success);display:flex;height:24px;justify-content:center;width:24px}.login-status-container{align-items:center;display:flex;margin-right:10px}.login-status{font-size:13px;font-weight:500;letter-spacing:.3px}.login-status.logged-in{color:#43a047;color:var(--success)}.login-status.guest{color:#fb8c00;color:var(--warning)}.editor-section{background-color:#f8f9fa;background-color:var(--bg);flex:1 1;min-width:0}.editor-section,.monaco-editor-wrapper{height:100%;overflow:hidden;position:relative}.monaco-editor-wrapper{width:100%}.ide-container .monaco-editor,.ide-container .monaco-editor .margin-view-overlays,.ide-container .monaco-editor .monaco-editor-background,.ide-container .monaco-editor .overflow-guard,.ide-container .monaco-editor .view-lines,.ide-container .monaco-editor .view-overlays{background-color:var(--ide-editor-bg)!important}.ide-container .monaco-editor .glyph-margin,.ide-container .monaco-editor .margin{background-color:var(--ide-editor-gutter)!important;border-right:1px solid var(--border-subtle)}.ide-container .monaco-editor .scroll-decoration{background:linear-gradient(180deg,#0000001f,#0000);box-shadow:none}.ide-container .monaco-editor .line-numbers,.ide-container .monaco-editor .margin .current-line{color:var(--ide-editor-line-number)!important}.ide-container .monaco-editor .line-numbers.active-line-number{color:var(--accent-primary)!important}.right-panel{background-color:#f8f9fa;background-color:var(--bg);border-left:1px solid #e5e7eb;border-left:1px solid var(--border);box-shadow:-2px 0 10px #0000001a;display:flex;flex-direction:column;flex-shrink:0;max-width:400px;min-width:400px;overflow:hidden;width:400px}body.dark-mode .right-panel{box-shadow:-2px 0 10px #0003}.action-buttons{background-color:#fff;background-color:var(--element);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);display:flex;gap:8px;padding:12px}.run-code-button,.visualization-button{align-items:center;border:none;border-radius:6px;border-radius:var(--radius);box-shadow:0 2px 5px #0003;color:#fff;cursor:pointer;display:flex;flex:1 1;font-size:12px;font-weight:600;gap:6px;justify-content:center;padding:8px 12px;transition:all .2s ease;transition:var(--transition)}.run-code-button{background-color:var(--accent-secondary);background-color:var(--primary)}.run-code-button:hover{background-color:var(--accent-hover);background-color:var(--primary-hover);box-shadow:0 3px 6px #00000040;transform:translateY(-1px)}.run-code-button:disabled{background-color:#9ca3af;cursor:not-allowed;opacity:.6}.run-code-button:disabled:hover{background-color:#9ca3af;box-shadow:0 2px 5px #0003;transform:none}.visualization-button{background-color:#666}body.dark-mode .visualization-button{background-color:#444}.visualization-button.active,.visualization-button:hover{background-color:#777;box-shadow:0 3px 6px #00000040;transform:translateY(-1px)}body.dark-mode .visualization-button.active,body.dark-mode .visualization-button:hover{background-color:#555}.visualization-button.json-mode{background-color:#3b82f6}.visualization-button.json-mode:hover{background-color:#2563eb}.button-icon{font-size:14px}.input-section,.output-section{display:flex;flex:1 1;flex-direction:column;min-height:0;padding:0}.input-section{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);flex:0.4 1}.output-section{flex:0.6 1}.input-section .section-header,.output-section .section-header{align-items:center;background-color:#fff;background-color:var(--element);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);color:#111827;color:var(--text);display:flex;font-size:14px;font-weight:600;gap:8px;height:auto;padding:12px 16px}.input-section .section-header:before,.output-section .section-header:before{background-color:var(--accent-secondary);background-color:var(--primary);border-radius:2px;content:"";display:block;height:16px;width:4px}.program-input{background-color:#f8f9fa;background-color:var(--bg);border:none;color:#111827;color:var(--text);flex:1 1;font-family:Fira Code,Consolas,monospace;font-size:14px;line-height:1.5;outline:none;padding:16px;resize:none}.program-input:focus{box-shadow:inset 0 0 0 1px #7e57c24d}.program-input:disabled{background-color:#f3f4f6;background-color:var(--element-light);color:#6b7280;color:var(--text-light);cursor:not-allowed;opacity:.7}.program-output{background-color:#f8f9fa;background-color:var(--bg);border-radius:0 0 4px 4px;color:#111827;color:var(--text);flex:1 1;font-family:Fira Code,Consolas,monospace;font-size:14px;height:100%;line-height:1.5;overflow:auto;padding:16px;white-space:pre-wrap}.program-output.json-info{background-color:#3b82f60d;border-left:4px solid #3b82f6;font-style:italic}body.dark-mode .program-output.json-info{background-color:#3b82f61a}#toast-container{bottom:20px;position:fixed;right:20px;z-index:9999}.toast{background-color:#fff;background-color:var(--element);border-radius:6px;border-radius:var(--radius);box-shadow:0 2px 8px #0000001a;color:#111827;color:var(--text);font-size:14px;margin-top:8px;opacity:0;padding:12px 16px;transform:translateY(20px);transition:opacity .3s,transform .3s}.toast.show{opacity:1;transform:translateY(0)}.toast-success{border-left:4px solid #43a047;border-left:4px solid var(--success)}.toast-error{border-left:4px solid #f44336}.toast-warning{border-left:4px solid #fb8c00;border-left:4px solid var(--warning)}.toast-info{background-color:#3b82f61a;border-left:4px solid #3b82f6}.toast-json{background-color:#f59e0b1a;border-left:4px solid #f59e0b}.lang-python .language-button,.language-button.lang-python{background-color:#3572a5}.lang-python .language-button:hover,.language-button.lang-python:hover{background-color:#2d5a85}.lang-java .language-button,.language-button.lang-java{background-color:#b07219}.lang-java .language-button:hover,.language-button.lang-java:hover{background-color:#8f5c14}.lang-cpp .language-button,.language-button.lang-cpp{background-color:#f34b7d}.lang-cpp .language-button:hover,.language-button.lang-cpp:hover{background-color:#d93a6a}.lang-c .language-button,.language-button.lang-c{background-color:#555}.lang-c .language-button:hover,.language-button.lang-c:hover{background-color:#444}.lang-javascript .language-button,.language-button.lang-javascript{background-color:#f1e05a;color:#333}.lang-javascript .language-button:hover,.language-button.lang-javascript:hover{background-color:#e6d147;color:#333}.guest-controls{align-items:center;display:flex}.guest-mode-text{color:#6b7280;color:var(--text-light);font-size:13px;font-style:italic}.context-menu{background-color:#fff;background-color:var(--element);border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);box-shadow:0 4px 12px #00000026;min-width:150px;padding:4px 0;position:absolute;z-index:1000}.context-menu-item{align-items:center;background:none;border:none;color:#111827;color:var(--text);cursor:pointer;display:flex;font-size:14px;gap:8px;padding:8px 12px;text-align:left;width:100%}.context-menu-item:hover{background-color:#f3f4f6;background-color:var(--element-light)}body.dark-mode .context-menu-item:hover{background-color:#ffffff0d}.context-menu-separator{background-color:#e5e7eb;background-color:var(--border);height:1px;margin:4px 0}.empty-state{color:#6b7280;color:var(--text-light);font-size:14px;padding:20px;text-align:center}.empty-state-icon{font-size:24px;margin-bottom:8px;opacity:.5}@media (max-width:992px){.content-layout{flex-direction:column}.right-panel{border-left:none;border-top:1px solid #e5e7eb;border-top:1px solid var(--border);height:40%;max-width:100%;width:100%}.editor-section{height:60%}.sidebar{width:260px}.main-content{max-width:calc(100vw - 260px)}.sidebar.collapsed+.main-content{max-width:100vw}}@media (max-width:768px){.header-right{gap:8px}.filename-input{width:150px}.sidebar{width:240px}.main-content{max-width:calc(100vw - 240px)}.sidebar.collapsed+.main-content{max-width:100vw}.sidebar-title{font-size:12px!important}.section-header{height:32px;min-height:32px;padding:6px 10px}.section-header,.section-title{font-size:11px!important}.section-content{margin-left:24px}.file-item{height:28px;min-height:28px;padding:4px 6px}.file-icon{font-size:8px;height:14px;width:14px}.modern-sidebar-footer{padding:10px 12px}.active-file-name,.sidebar-stats,.stat-row{font-size:10px!important}}@media (max-width:576px){.main-header{align-items:flex-start;flex-direction:column;height:auto;padding:12px}.header-right{flex-wrap:wrap;margin-top:8px;width:100%}.filename-input{width:100%}.sidebar{width:220px}.main-content{max-width:calc(100vw - 220px)}.sidebar.collapsed+.main-content{max-width:100vw}.modern-sidebar-header{padding:12px}.sidebar-title{font-size:11px!important}.new-file-button{height:28px;width:28px}.section-header{height:28px;min-height:28px;padding:4px 8px}.section-header,.section-title{font-size:10px!important}.section-content{margin-left:20px}.file-item{height:24px;min-height:24px;padding:2px 4px}.file-icon{font-size:7px;height:12px;width:12px}.modern-sidebar-footer{padding:8px 10px}.active-file-name,.sidebar-stats,.stat-row{font-size:9px!important}.auth-content{padding:16px 12px}.auth-button,.auth-message,.auth-title{font-size:12px!important}}.modern-sidebar-footer{border-top:none;flex-shrink:0;padding:10px 12px}.modern-sidebar-footer,body.dark-mode .modern-sidebar-footer{background-color:#fff;background-color:var(--element)}body.dark-mode .sidebar-stats{color:#6b7280;color:var(--text-light)}body.dark-mode .active-file-name{color:#60a5fa}.sidebar-title{color:#111827!important}body.dark-mode .sidebar-title{color:#e0e0e0!important}.file-item{padding-right:32px!important}.file-badge{display:none!important;margin:0!important;visibility:hidden!important;width:0!important}.delete-file-button{align-items:center;background:none;border:none;border-radius:4px;color:#6b7280;color:var(--text-light);cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;line-height:1;opacity:0;padding:4px;position:absolute;right:4px;top:50%;transform:translateY(-50%);transition:opacity .2s,color .2s,background-color .2s;width:24px;z-index:10}.file-item:hover .delete-file-button{opacity:.7}.delete-file-button:hover{background-color:#e539351a;color:#e53935;color:var(--danger-color);opacity:1}body.dark-mode .delete-file-button:hover{background-color:#ff525226}.delete-file-button i[data-feather=trash-2]{stroke-width:2px;height:14px;width:14px}.mypage-wrapper{background:var(--surface-page);display:flex;flex-direction:column;min-height:100vh}.mypage{--mypage-bg:var(--surface-page);--mypage-surface:var(--surface-card);--mypage-elevated:#ffffffeb;--mypage-border:#0f172a0f;--mypage-text-primary:#161829;--mypage-text-secondary:#62677a;--mypage-text-tertiary:#a0a6b9;--mypage-text:#161829;--mypage-muted:#62677a;--mypage-accent:var(--accent-secondary);--mypage-soft:#8b70ff1f;--mypage-shadow:0 22px 40px -32px #0f172a2e;align-items:flex-start;background:var(--mypage-bg);color:var(--mypage-text-primary);flex:1 1;flex-wrap:wrap;gap:48px;justify-content:center;padding:104px 32px 128px}.mypage,.mypage-content{box-sizing:border-box;display:flex}.mypage-content{flex:1 1 720px;flex-direction:column;gap:36px;margin:0;max-width:1024px;min-width:0;padding:0;width:100%}body.body-scroll .mypage,body.body-scroll .mypage-content,body.body-scroll .mypage-wrapper{height:auto;min-height:auto;overflow:visible}.mypage-header,.mypage-page-header{align-items:flex-start;display:flex;gap:24px;justify-content:space-between}.mypage-page-header h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}.mypage-page-header p{color:var(--mypage-text-secondary);font-size:15px;line-height:1.6;margin:0}.page-heading{max-width:640px}.page-title{font-size:32px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}.page-subtitle{color:var(--mypage-text-secondary);font-size:15px;line-height:1.6;margin:0}.header-actions{align-items:center;display:flex;gap:12px}.ghost-button,.primary-button{align-items:center;border-radius:12px;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 18px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.ghost-button{background:var(--mypage-surface);border:1px solid var(--mypage-border);color:var(--mypage-muted)}.ghost-button:hover{border-color:#8b70ff80;color:var(--mypage-text);transform:translateY(-1px)}.primary-button{background:var(--mypage-accent);border:none;box-shadow:0 20px 32px -22px #8b70ffa3;color:#fff}.primary-button:hover{box-shadow:0 24px 40px -24px #8b70ffb8;transform:translateY(-1px)}.section-card{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:22px;box-shadow:var(--mypage-shadow)}.profile-card{grid-gap:32px;align-items:flex-start;display:grid;gap:32px;grid-template-columns:160px minmax(0,1fr) 240px;padding:36px 40px}.profile-avatar{align-items:center;background:linear-gradient(135deg,#8b70ff2e,#8b70ff0f);border-radius:24px;color:var(--mypage-accent);display:flex;font-size:32px;font-weight:700;height:160px;justify-content:center;width:160px}.profile-meta{display:flex;flex-direction:column;gap:16px}.profile-title{align-items:baseline;display:flex;gap:10px}.profile-title h2{font-size:26px;font-weight:700;margin:0}.profile-handle{color:var(--mypage-muted);font-size:15px;font-weight:600}.profile-bio{color:var(--mypage-text-secondary);font-size:15px;line-height:1.7;margin:0}.profile-tags{display:flex;flex-wrap:wrap;gap:8px}.profile-tags span{background:var(--mypage-soft);border-radius:999px;color:var(--mypage-accent);font-size:13px;font-weight:600;padding:6px 12px}.profile-highlight{background:linear-gradient(135deg,#8b70ff1a,#8b70ff05);border-radius:18px;color:var(--mypage-text-secondary);display:flex;flex-direction:column;gap:12px;padding:24px}.profile-highlight h3{color:var(--mypage-text);font-size:18px;font-weight:700;margin:0}.profile-highlight ul{display:flex;flex-direction:column;gap:8px;line-height:1.5;margin:0;padding-left:18px}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.stat-card{align-items:center;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:20px;box-shadow:var(--mypage-shadow);display:flex;gap:16px;padding:26px 24px;transition:transform .18s ease,box-shadow .18s ease}.stat-card:hover{box-shadow:0 28px 44px -30px #0f172a73;transform:translateY(-3px)}.stat-icon{background:var(--mypage-soft);border-radius:16px;color:var(--mypage-accent);display:grid;font-size:20px;height:52px;place-items:center;width:52px}.stat-body{display:flex;flex-direction:column;gap:6px}.stat-label{color:var(--mypage-text-secondary);font-size:13px;font-weight:600}.stat-value{font-size:26px;font-weight:700}.stat-trend{align-items:center;color:var(--mypage-text-secondary);display:inline-flex;font-size:13px;font-weight:600;gap:6px}.stat-trend.up{color:#16a34a}.stat-trend.down{color:#dc2626}.section-two-column{grid-gap:24px;align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,2fr) minmax(0,1.1fr)}.activity-feed,.recent-projects{display:flex;flex-direction:column;gap:24px;padding:30px 32px}.section-header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.section-header h3{color:var(--mypage-text);font-size:20px;font-weight:700;margin:0}.section-header p{color:var(--mypage-text-secondary);font-size:14px;line-height:1.5;margin:4px 0 0}.quiet-link{color:var(--mypage-accent);font-size:14px;font-weight:600;padding:6px 0;text-decoration:none}.project-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.project-card{background:var(--mypage-surface);border:1px solid #0f172a0d;border-radius:18px;display:flex;flex-direction:column;gap:14px;padding:20px;transition:border-color .18s ease,transform .18s ease}.project-card:hover{border-color:#8b70ff66;transform:translateY(-3px)}.project-thumbnail{align-items:center;aspect-ratio:16/10;background:var(--mypage-soft);border-radius:14px;display:flex;justify-content:center;overflow:hidden}.project-thumbnail img{height:100%;object-fit:cover;width:100%}.project-thumbnail-fallback{color:var(--mypage-accent);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-meta{display:flex;flex-direction:column;gap:8px}.project-stack{color:var(--mypage-accent);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.project-meta h4{color:var(--mypage-text);font-size:16px;font-weight:700;margin:0}.project-meta p{color:var(--mypage-text-secondary);font-size:14px;line-height:1.6;margin:0}.activity-list{gap:16px;list-style:none;margin:0;padding:0}.activity-list,.activity-list li{display:flex;flex-direction:column}.activity-list li{border-bottom:1px solid var(--mypage-border);gap:6px;padding-bottom:12px}.activity-list li:last-child{border-bottom:none;padding-bottom:0}.activity-title{color:var(--mypage-text);font-size:14px;font-weight:600}.activity-time{color:var(--mypage-muted);font-size:12px}.dark-mode .mypage{--mypage-bg:var(--surface-page);--mypage-surface:#181c2b;--mypage-elevated:#1f2030eb;--mypage-border:#7c68dc52;--mypage-text-primary:#f4f3ff;--mypage-text-secondary:#b3b0de;--mypage-text-tertiary:#8f8bbb;--mypage-text:#f4f3ff;--mypage-muted:#9b97c9;--mypage-accent:var(--accent-primary);--mypage-soft:#6c5ce738;--mypage-shadow:0 28px 46px -36px #0404089e}.dark-mode .section-card,.dark-mode .stat-card{box-shadow:var(--mypage-shadow)}.dark-mode .project-card{background:var(--mypage-surface);border-color:var(--mypage-border)}@media (max-width:1024px){.profile-card{grid-template-columns:160px minmax(0,1fr)}.profile-highlight{grid-column:span 2}.section-two-column{grid-template-columns:minmax(0,1fr)}}@media (max-width:960px){.mypage{align-items:stretch;flex-direction:column;gap:36px;padding:96px 24px 120px}.mypage-content{max-width:100%}}@media (max-width:840px){.mypage-header{align-items:flex-start;flex-direction:column}.header-actions{width:100%}.header-actions a{flex:1 1;justify-content:center}.profile-card{gap:24px;grid-template-columns:minmax(0,1fr)}.profile-avatar{height:120px;width:120px}}@media (max-width:720px){.mypage-wrapper{background:#f8f9ff}.mypage{flex-direction:column;gap:32px;padding:88px 18px 110px}.mypage-content{gap:32px;margin:0;padding:0;width:100%}.activity-feed,.recent-projects{padding:24px}}@media (max-width:540px){.header-actions{align-items:stretch;flex-direction:column}.ghost-button,.primary-button{justify-content:center;width:100%}.project-grid,.stats-grid{grid-template-columns:1fr}}.mypage-sidebar{align-self:flex-start;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--mypage-elevated);border-right:1px solid var(--mypage-border);box-shadow:var(--mypage-shadow);display:flex;flex-direction:column;gap:32px;max-height:calc(100vh - 120px);padding:38px 28px 46px;position:sticky;top:96px;width:288px}.mypage-sidebar__profile{align-items:center;display:flex;gap:18px}.mypage-sidebar__avatar{background:linear-gradient(135deg,#6c5ce7f2,#3478f6d9);border-radius:50%;box-shadow:0 14px 30px -18px #6c5ce7bf;color:#fff;display:grid;font-size:20px;font-weight:700;height:60px;place-items:center;width:60px}.mypage-sidebar__meta{display:flex;flex-direction:column;gap:6px}.mypage-sidebar__name{color:var(--mypage-text-primary);font-size:18px;font-weight:700}.mypage-sidebar__handle{color:var(--mypage-text-tertiary);font-size:13px}.mypage-sidebar__edit{align-items:center;background:#0000;color:var(--mypage-accent);display:inline-flex;font-size:13px;font-weight:600;gap:6px;text-decoration:none}.mypage-sidebar__edit:hover{text-decoration:underline}.mypage-sidebar__nav ul{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.mypage-sidebar__link{align-items:center;border-radius:14px;color:var(--mypage-text-secondary);display:flex;font-size:15px;font-weight:600;gap:12px;padding:12px 16px;text-decoration:none;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}.mypage-sidebar__link:hover{background:#6c5ce71f;color:var(--mypage-text-primary);transform:translateX(4px)}.mypage-sidebar__link.is-active{background:linear-gradient(135deg,#6c5ce738,#3478f62e);box-shadow:0 14px 28px -20px #0f172a8c;color:var(--mypage-text-primary)}.mypage-sidebar__icon{background:#6c5ce71f;border-radius:10px;color:var(--mypage-accent);display:grid;font-size:14px;height:32px;place-items:center;width:32px}.mypage-sidebar__link.is-active .mypage-sidebar__icon{background:#6c5ce733}.mypage-sidebar__cta{background:linear-gradient(150deg,#6c5ce729,#3478f61a);border:1px solid #94a3b82e;border-radius:20px;color:var(--mypage-text-secondary);display:flex;flex-direction:column;font-size:14px;gap:14px;line-height:1.5;margin-top:auto;padding:22px 20px}.mypage-sidebar__cta-button{align-items:center;background:#ffffffb8;border:1px solid #6c5ce72e;border-radius:12px;color:var(--mypage-accent);display:inline-flex;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:10px 14px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.mypage-sidebar__cta-button:hover{box-shadow:0 14px 22px -18px #6c5ce780;transform:translateY(-2px)}@media (max-width:1240px){.mypage-sidebar{padding:32px 24px;width:260px}}@media (max-width:992px){.mypage-sidebar{flex-direction:column;gap:24px;max-height:none;position:static;width:100%}.mypage-sidebar__nav ul{flex-direction:row;flex-wrap:wrap}.mypage-sidebar__link{flex-basis:calc(50% - 8px);flex-grow:1;flex-shrink:1}}.dark-mode .mypage-sidebar__avatar{background:linear-gradient(135deg,#a78bfae6,#60a5fac7);box-shadow:0 14px 28px -16px #a78bfab3}.dark-mode .mypage-sidebar__link:hover{background:#a78bfa24}.dark-mode .mypage-sidebar__link.is-active{background:linear-gradient(135deg,#a78bfa3d,#60a5fa2e);box-shadow:0 16px 28px -22px #0d1117d9}.dark-mode .mypage-sidebar__icon{background:#a78bfa29;color:#e2e8f0d9}.dark-mode .mypage-sidebar__cta-button{background:#1f212dd1;color:#e2e8f0e0}.settings-page .mypage-page-header{margin-bottom:0}.settings-header-actions{align-items:center;display:flex;gap:12px}.settings-header-actions .compact{font-size:13px;padding:9px 14px}.settings-header-actions .ghost-button{color:var(--mypage-text-secondary)}.settings-header-actions .ghost-button svg{height:16px;width:16px}.settings-panel{display:flex;flex-direction:column;gap:32px;padding:36px 40px}.settings-tabs{display:flex;flex-wrap:wrap;gap:12px}.settings-tab{align-items:center;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:14px;color:var(--mypage-text-secondary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 18px;transition:border-color .18s ease,color .18s ease,transform .18s ease}.settings-tab svg{height:14px;width:14px}.settings-tab:hover{border-color:#7c5cff73;color:var(--mypage-text);transform:translateY(-1px)}.settings-tab.is-active{background:#7c5cff1f;border-color:#7c5cff66;color:var(--mypage-accent)}.settings-content{grid-gap:36px;align-items:flex-start;display:grid;gap:36px;grid-template-columns:280px minmax(0,1fr)}.settings-profile-card{align-items:center;background:linear-gradient(160deg,#7c5cff1a,#7c5cff05);border:1px dashed #7c5cff47;border-radius:18px;display:flex;flex-direction:column;gap:16px;padding:28px;text-align:center}.profile-avatar-large{align-items:center;background:#7c5cff1f;border-radius:32px;color:var(--mypage-accent);display:flex;font-size:42px;font-weight:700;height:144px;justify-content:center;width:144px}.settings-profile-card .secondary-button{justify-content:center;width:100%}.settings-profile-card .secondary-button.ghost{border-style:dashed}.upload-note{color:var(--mypage-text-tertiary);font-size:13px;margin:8px 0 0}.settings-tip{background:#0f172a0a;border-radius:12px;color:var(--mypage-text-secondary);display:flex;flex-direction:column;gap:6px;padding:12px 16px}.settings-tip strong{color:var(--mypage-text-primary)}.settings-form{grid-gap:20px 24px;display:grid;gap:20px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}.settings-form .form-group{display:flex;flex-direction:column;gap:8px}.settings-form .form-group.half{grid-column:span 1}.settings-form .form-group:nth-of-type(3),.settings-form .form-group:nth-of-type(4),.settings-form .form-group:nth-of-type(5){grid-column:1/-1}.settings-form label{color:var(--mypage-text-secondary);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.settings-form input,.settings-form textarea{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:14px;color:var(--mypage-text);font-size:15px;padding:14px 16px;transition:border-color .18s ease,box-shadow .18s ease;width:100%}.settings-form input:focus,.settings-form textarea:focus{border-color:#7c5cff7a;box-shadow:0 0 0 4px #7c5cff24;outline:none}.settings-form textarea{min-height:120px;resize:vertical}.small-text{color:var(--mypage-text-tertiary);font-size:12px;margin:-6px 0 0}.tech-stack{background:#8b70ff0f;border:1px dashed #8b70ff47;border-radius:16px;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}.tech-tag{align-items:center;background:#8b70ff1f;border:1px solid #8b70ff42;border-radius:999px;color:var(--mypage-accent);display:inline-flex;font-size:13px;font-weight:600;gap:6px;padding:6px 12px}.remove-tag{background:#0000;background:linear-gradient(160deg,#8b70ff1f,#8b70ff0a);border:1px dashed #8b70ff47;border-radius:999px;color:inherit;cursor:pointer;line-height:1}.remove-tag:hover{border-color:#8b70ff7a}.tech-input-row{display:flex;gap:12px}.tech-input-row input{flex:1 1}.tech-input-row .secondary-button{background:#8b70ff1f;padding:10px 18px}.social-links{display:flex;flex-wrap:wrap;gap:12px}.social-links input{background:#8b70ff14;border:1px solid #8b70ff47;border-radius:14px;color:var(--mypage-text);flex:1 1 240px;padding:14px 16px;transition:border-color .18s ease,box-shadow .18s ease}.social-links input:focus{border-color:#8b70ff8a;box-shadow:0 0 0 4px #8b70ff24;outline:none}.settings-preferences{background:linear-gradient(160deg,#8b70ff1f,#8b70ff08);border:1px solid #8b70ff47;border-radius:22px;display:flex;flex-direction:column;gap:18px;padding:32px 40px}.settings-preferences h2{color:var(--mypage-accent);font-size:20px;font-weight:700;margin:0}.settings-preferences>p{color:var(--mypage-text-secondary);font-size:14px;margin:0}.preferences-list{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:16px 0 0}.preference-item{align-items:center;border-bottom:1px solid #0f172a0f;display:flex;gap:24px;justify-content:space-between;padding:16px 0}.preference-item strong{color:var(--mypage-text-primary);display:block;font-size:15px;margin-bottom:4px}.preference-item span{color:var(--mypage-text-secondary);font-size:13px}.preferences-list li:last-child{border-bottom:none;padding-bottom:0}.switch{align-items:center;display:inline-flex;height:26px;position:relative;width:48px}.switch input{display:none}.slider{background:#0f172a1f;border-radius:999px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.2s ease}.slider:before{background-color:#fff;border-radius:50%;bottom:3px;box-shadow:0 6px 14px #0f172a2e;content:"";height:20px;left:4px;width:20px}.switch input:checked+.slider{background:#7c5cff80}.switch input:checked+.slider:before{transform:translateX(20px)}@media (max-width:1024px){.settings-content{grid-template-columns:1fr}.settings-profile-card{flex-direction:row;justify-content:space-between;text-align:left}.settings-profile-card .secondary-button,.settings-profile-card .secondary-button.ghost{width:auto}}@media (max-width:768px){.settings-panel,.settings-preferences{padding:28px}.settings-tabs{gap:8px}.settings-tab{border-radius:12px;padding:8px 14px}.settings-form{grid-template-columns:1fr}.settings-header-actions{flex-wrap:wrap;justify-content:flex-start}}.dark-mode .settings-tab{background:var(--mypage-surface);border-color:var(--mypage-border);color:var(--mypage-text-secondary)}.dark-mode .settings-tab.is-active{background:#7c5cff3d;border-color:#7c5cff8a;color:var(--mypage-text)}.dark-mode .settings-profile-card{background:var(--mypage-surface);border-color:var(--mypage-border)}.dark-mode .settings-tip{background:#94a3b829;color:var(--mypage-text-secondary)}.dark-mode .settings-form input,.dark-mode .settings-form textarea{background:var(--surface-input);border-color:var(--mypage-border);color:var(--mypage-text)}.dark-mode .settings-form input:focus,.dark-mode .settings-form textarea:focus{border-color:#7c5cffcc;box-shadow:0 0 0 4px #7c5cff38}.dark-mode .tech-tag{background:#7c5cff47;border-color:var(--mypage-border);color:var(--mypage-text)}.dark-mode .tech-stack{background:#7c5cff29;border-color:var(--mypage-border)}.dark-mode .settings-preferences{background:var(--mypage-surface);border-color:var(--mypage-border)}.dark-mode .preference-item{border-bottom-color:var(--mypage-border)}.dark-mode .social-links input{background:var(--surface-input);border-color:var(--mypage-border);color:var(--mypage-text)}.dark-mode .social-links input:focus{box-shadow:0 0 0 4px #7c5cff42}.dark-mode .slider{background:#94a3b847}.dark-mode .switch input:checked+.slider{background:#7c5cff8c}@keyframes sharedFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.shared-page{gap:28px}.shared-controls,.shared-page{display:flex;flex-direction:column}.shared-controls{gap:20px;padding:26px 32px}.shared-tabs{display:inline-flex;flex-wrap:wrap;gap:10px}.shared-tab{background:var(--mypage-bg);border:1px solid var(--mypage-border);border-radius:999px;color:var(--mypage-text-secondary);cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:background .16s ease,color .16s ease,transform .16s ease}.shared-tab:hover{transform:translateY(-1px)}.shared-tab.is-active{background:var(--mypage-accent);border-color:#0000;color:#fff}.shared-stats{display:flex;flex-wrap:wrap;gap:18px}.shared-stat{align-items:center;background:#7c5cff14;border-radius:16px;color:var(--mypage-text-secondary);display:inline-flex;gap:12px;padding:14px 18px}.shared-stat strong{color:var(--mypage-text-primary);display:block;font-size:18px}.shared-stat span{color:var(--mypage-text-tertiary);font-size:12px}.shared-stat__icon{background:#7c5cff2e;border-radius:12px;color:var(--mypage-accent);display:grid;height:40px;place-items:center;width:40px}.shared-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.shared-card{animation:sharedFadeIn .3s ease both;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:20px;box-shadow:0 22px 40px -34px #0f172a3d;display:flex;flex-direction:column;gap:14px;padding:26px}.shared-card h3{color:var(--mypage-text-primary);font-size:18px;font-weight:700;margin:0}.shared-card p{color:var(--mypage-text-secondary);font-size:14px;line-height:1.6;margin:0}.shared-card__header{align-items:center;display:flex;gap:12px;justify-content:space-between}.shared-language,.shared-role{border-radius:999px;font-size:12px;font-weight:700;padding:6px 12px;text-transform:uppercase}.role-edit{background:#22c55e24;color:#15803d}.role-view{background:#94a3b82e;color:#475569}.role-comment{background:#3b82f629;color:#1d4ed8}.shared-card__meta{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.shared-card__meta dt{color:var(--mypage-text-tertiary);font-size:12px}.shared-card__meta dd{color:var(--mypage-text-secondary);font-size:14px;font-weight:600;margin:2px 0 0}.shared-card__footer{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:auto}.shared-collab{color:var(--mypage-text-tertiary);font-size:13px}.shared-actions{display:flex;gap:10px}.shared-actions .secondary-button{flex:1 1}@media (max-width:720px){.shared-card__meta{grid-template-columns:1fr}.shared-card__footer{align-items:stretch;flex-direction:column}.shared-actions,.shared-actions .secondary-button{width:100%}}.dark-mode .shared-controls,.dark-mode .shared-tab{background:var(--mypage-surface)}.dark-mode .shared-tab{border-color:var(--mypage-border);color:var(--mypage-text-secondary)}.dark-mode .shared-tab.is-active{background:var(--mypage-accent);color:#fff}.dark-mode .shared-stat{background:#7c5cff3d;color:var(--mypage-text-secondary)}.dark-mode .shared-card{background:var(--mypage-surface);border-color:var(--mypage-border);box-shadow:var(--mypage-shadow)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.mypage-projects{display:flex;flex-direction:column;gap:28px}.projects-header-actions{align-items:center;display:flex;gap:12px}.ghost-button.compact{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:12px;color:var(--mypage-text-secondary);padding:10px 16px;transition:transform .16s ease,box-shadow .16s ease}.ghost-button.compact:hover{box-shadow:0 16px 28px -24px #0f172a33;color:var(--mypage-text-primary);transform:translateY(-1px)}.new-project-btn{align-items:center;border-radius:14px;display:inline-flex;font-size:14px;gap:8px;padding:12px 18px}.project-collection{display:flex;flex-direction:column;gap:24px}.project-collection__toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.project-search{align-items:center;background:var(--mypage-bg);border:1px solid var(--mypage-border);border-radius:16px;display:inline-flex;flex:1 1 280px;gap:10px;padding:12px 18px}.project-search svg{color:var(--mypage-text-tertiary)}.project-search input{background:#0000;border:none;color:var(--mypage-text-primary);font-size:15px;outline:none;width:100%}.project-search input::placeholder{color:var(--mypage-text-tertiary)}.project-toolbar-actions{display:inline-flex;flex-wrap:wrap;gap:10px}.toolbar-chip{align-items:center;background:#7c5cff14;border:1px solid #0000;border-radius:999px;color:var(--mypage-text-secondary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;padding:10px 16px;transition:background .16s ease,color .16s ease,transform .16s ease}.toolbar-chip svg{font-size:13px}.toolbar-chip:hover{background:#7c5cff1f;transform:translateY(-1px)}.toolbar-chip.is-active{background:var(--mypage-accent);color:#fff}.project-collection__grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.project-collection__card{animation:fadeInUp .32s ease both;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:20px;box-shadow:0 20px 40px -34px #0f172a40;display:flex;flex-direction:column;gap:14px;padding:24px}.project-collection__card h3{color:var(--mypage-text-primary);font-size:18px;font-weight:700;margin:0}.project-collection__card p{color:var(--mypage-text-secondary);font-size:14px;line-height:1.6;margin:0}.project-collection__card-header{align-items:center;display:flex;gap:12px;justify-content:space-between}.project-collection__stack{align-items:center;border-radius:999px;display:inline-flex;font-size:12px;font-weight:700;padding:6px 12px;text-transform:uppercase}.lang-yellow{background:#fff7d6;color:#b45309}.lang-green{background:#dff7ed;color:#0f7a53}.lang-indigo{background:#e3e8ff;color:#3730a3}.lang-purple{background:#efe4ff;color:#6b21a8}.lang-default{background:#7c5cff1f;color:var(--mypage-accent)}.project-status{border-radius:999px;font-size:12px;font-weight:700;padding:6px 12px}.status-active{background:#22c55e29;color:#15803d}.status-review{background:#eab3082e;color:#b45309}.status-live{background:#3b82f62e;color:#1d4ed8}.status-draft{background:#94a3b82e;color:#475569}.project-collection__meta{color:var(--mypage-text-tertiary);display:flex;flex-wrap:wrap;font-size:13px;gap:10px 14px}.project-favorite{align-items:center;color:#f59e0b;display:inline-flex;gap:6px}.project-progress{background:#94a3b824;border-radius:999px;height:8px;overflow:hidden;position:relative}.project-progress__bar{background:linear-gradient(135deg,var(--accent-grad-start),var(--accent-grad-stop));inset:0;position:absolute}.project-progress__label{color:var(--mypage-text-tertiary);font-size:12px;margin-top:8px}.project-card-footer{display:flex;gap:10px;margin-top:auto}.secondary-button{background:var(--mypage-bg);border:1px solid var(--mypage-border);border-radius:12px;color:var(--mypage-text-secondary);cursor:pointer;flex:1 1;font-size:14px;font-weight:600;padding:10px 14px;transition:transform .16s ease,box-shadow .16s ease}.secondary-button:hover{box-shadow:0 14px 24px -20px #0f172a2e;color:var(--mypage-text-primary);transform:translateY(-1px)}.secondary-button.ghost{background:#0000}@media (max-width:1024px){.project-collection__card{padding:22px}}@media (max-width:720px){.projects-header-actions{justify-content:stretch;width:100%}.projects-header-actions .ghost-button,.projects-header-actions .primary-button{flex:1 1 auto;justify-content:center}.project-toolbar-actions{justify-content:flex-start;width:100%}.project-card-footer{flex-direction:column}}.dark-mode .ghost-button.compact{background:var(--mypage-surface);border-color:var(--mypage-border);color:var(--mypage-text-secondary)}.dark-mode .project-search{background:var(--surface-input);border-color:var(--mypage-border)}.dark-mode .toolbar-chip{background:#6c5ce738;color:var(--mypage-text)}.dark-mode .project-collection__card{background:var(--mypage-surface);border-color:var(--mypage-border);box-shadow:var(--mypage-shadow)}.dark-mode .project-progress{background:#94a3b83d}.dark-mode .secondary-button{background:var(--surface-input);border-color:var(--mypage-border);color:var(--mypage-text-secondary)}.mycommunity-page{display:flex;flex-direction:column;gap:28px}.mycommunity-header{align-items:flex-start;display:flex;gap:24px;justify-content:space-between}.mycommunity-header h1{font-size:28px;font-weight:700;margin:0 0 6px}.mycommunity-header p{color:var(--mypage-text-secondary);font-size:15px;line-height:1.6;margin:0}.mycommunity-header__link{align-items:center;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:12px;color:var(--mypage-accent);display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:12px 18px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.mycommunity-header__link:hover{box-shadow:0 16px 24px -22px #6c5ce773;transform:translateY(-2px)}.mycommunity-controls{display:flex;flex-direction:column;gap:20px;padding:26px 32px}.mycommunity-search{align-items:center;display:flex;flex-wrap:wrap;gap:14px}.mycommunity-search__input{align-items:center;background:var(--surface-input);border:1px solid var(--mypage-border);border-radius:14px;display:inline-flex;flex:1 1 240px;gap:10px;padding:12px 16px}.mycommunity-search__input svg{color:var(--mypage-text-tertiary)}.mycommunity-search__input input{background:#0000;border:none;color:var(--mypage-text-primary);font-size:15px;outline:none;width:100%}.mycommunity-search__input input::placeholder{color:var(--mypage-text-tertiary)}.mycommunity-search__actions{display:inline-flex;gap:10px}.reset-button,.search-button{border:none;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 16px;transition:transform .18s ease,box-shadow .18s ease}.search-button{background:var(--mypage-accent);box-shadow:0 12px 22px -18px #6c5ce7cc;color:#fff}.search-button:hover{box-shadow:0 16px 26px -18px #6c5ce7d9;transform:translateY(-1px)}.reset-button{background:#94a3b829;color:var(--mypage-text-secondary)}.reset-button:hover{transform:translateY(-1px)}.mycommunity-tabs{display:flex;flex-wrap:wrap;gap:12px}.mycommunity-tab{align-items:center;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:14px;color:var(--mypage-text-secondary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:10px;padding:10px 16px;transition:background .18s ease,color .18s ease,transform .18s ease}.mycommunity-tab .tab-icon{align-items:center;display:inline-flex;height:28px;justify-content:center;width:28px}.mycommunity-tab .tab-count,.mycommunity-tab .tab-icon{background:#6c5ce71f;border-radius:10px;color:var(--mypage-accent);font-size:13px}.mycommunity-tab .tab-count{min-width:32px;padding:2px 8px;text-align:center}.mycommunity-tab.is-active{background:linear-gradient(135deg,#6c5ce733,#3b82f62e);border-color:#6c5ce747;color:var(--mypage-text-primary);transform:translateY(-1px)}.mycommunity-list{display:flex;flex-direction:column;gap:20px}.mycommunity-state{align-items:center;background:#94a3b814;border:1px dashed var(--mypage-border);border-radius:18px;color:var(--mypage-text-secondary);display:flex;font-weight:600;gap:12px;justify-content:center;padding:36px;text-align:center}.mycommunity-state.error{background:#fee2e266;border-color:#dc26263d;color:#dc2626}.mycommunity-cards{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.mycommunity-card{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:20px;box-shadow:var(--mypage-shadow);display:flex;flex-direction:column;gap:16px;min-height:220px;padding:26px}.card-header{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.card-header-left{flex-wrap:wrap;gap:10px}.badge,.card-header-left{align-items:center;display:inline-flex}.badge{background:#94a3b829;border-radius:999px;color:var(--mypage-text-secondary);font-size:12px;font-weight:700;gap:6px;letter-spacing:.02em;padding:4px 10px}.badge--solved{background:#10b98129;color:#0f766e}.badge--ghost{background:#6c5ce724;color:var(--mypage-accent)}.card-date{color:var(--mypage-text-tertiary);font-size:13px}.card-link{color:var(--mypage-accent);font-size:13px;font-weight:600;text-decoration:none}.card-link:hover{text-decoration:underline}.card-title{color:var(--mypage-text-primary);font-size:20px;font-weight:700;margin:0}.card-title a{color:inherit;text-decoration:none}.card-title a:hover{text-decoration:underline}.card-summary{color:var(--mypage-text-secondary);flex:1 1;font-size:14px;line-height:1.7;margin:0}.card-tags{display:flex;flex-wrap:wrap;gap:8px}.card-tags .tag{background:#3b82f61f;border-radius:999px;color:#2563eb;font-size:12px;font-weight:600;padding:4px 10px}.card-footer{color:var(--mypage-text-secondary);display:flex;font-size:13px;font-weight:600;gap:18px}.card-footer span{align-items:center;display:inline-flex;gap:6px}.spin{animation:spin .9s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:992px){.mycommunity-header{align-items:stretch;flex-direction:column}.mycommunity-header__link{align-self:flex-start}}@media (max-width:720px){.mycommunity-card,.mycommunity-controls{padding:20px}}.dark-mode .mycommunity-header__link{background:var(--mypage-elevated);border-color:var(--mypage-border);color:var(--mypage-text)}.dark-mode .mycommunity-controls{background:var(--mypage-surface)}.dark-mode .mycommunity-search__input{background:var(--surface-input);border-color:var(--mypage-border)}.dark-mode .search-button{box-shadow:0 14px 24px -20px #a78bfabf}.dark-mode .reset-button{background:#94a3b83d;color:var(--mypage-text)}.dark-mode .mycommunity-tab{background:var(--mypage-surface);border-color:var(--mypage-border)}.dark-mode .mycommunity-tab .tab-count,.dark-mode .mycommunity-tab .tab-icon{background:#a78bfa38;color:var(--mypage-text)}.dark-mode .mycommunity-tab.is-active{background:linear-gradient(135deg,#a78bfa3d,#60a5fa2e);border-color:#a78bfa3d;color:var(--mypage-text)}.dark-mode .mycommunity-state{background:#1f202cb8;border-color:var(--mypage-border);color:var(--mypage-text)}.dark-mode .mycommunity-card{background:var(--mypage-surface);border-color:var(--mypage-border);box-shadow:var(--mypage-shadow)}.dark-mode .badge{background:#94a3b842;color:var(--mypage-text-secondary)}.dark-mode .badge--ghost{background:#a78bfa24;color:var(--mypage-accent)}.dark-mode .card-summary{color:var(--mypage-text-secondary)}.dark-mode .card-tags .tag{background:#3b82f62e;color:#93c5fd}.dark-mode .card-footer{color:var(--mypage-text-secondary)}.notifications-page{gap:28px}.notifications-actions{align-items:center;display:flex;gap:12px}.notifications-panel{display:flex;flex-direction:column;gap:18px;padding:32px}.notifications-summary{font-size:13px;margin:8px 0 0}.notifications-feedback,.notifications-summary{color:var(--mypage-text-secondary);font-weight:600}.notifications-feedback{align-items:center;background:var(--mypage-soft);border-radius:12px;display:inline-flex;font-size:14px;gap:8px;padding:10px 14px}.notifications-feedback.is-error{background:#f43f5e1f;color:#b91c1c}.notifications-feedback.is-loading{color:var(--mypage-text-secondary)}.notifications-empty{align-items:center;border:2px dashed var(--mypage-border);border-radius:20px;color:var(--mypage-text-secondary);display:flex;flex-direction:column;gap:16px;justify-content:center;min-height:220px;text-align:center;width:100%}.notifications-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.notifications-list__item{align-items:center;background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:18px;display:flex;gap:12px;justify-content:space-between;padding:18px 22px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.notifications-list__item:hover{border-color:#8b70ff73;box-shadow:0 16px 28px -22px #0f172a4d;transform:translateY(-2px)}.notifications-list__item.is-unread{background:linear-gradient(135deg,#8b70ff1f,#8b70ff0a);border-color:#8b70ff80}.notifications-list__main{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex:1 1;gap:16px;padding:0;text-align:left}.notifications-list__main:hover .notifications-list__message{color:var(--mypage-accent)}.notifications-list__icon{background:var(--mypage-soft);border-radius:14px;color:var(--mypage-accent);display:grid;flex-shrink:0;font-size:18px;height:42px;place-items:center;width:42px}.notifications-list__body{color:var(--mypage-text-primary);display:flex;flex-direction:column;gap:6px}.notifications-list__message{font-size:15px;font-weight:600;line-height:1.5}.notifications-list__time{align-items:center;color:var(--mypage-text-secondary);display:inline-flex;font-size:13px;gap:8px}.notifications-list__time-dot{color:inherit;font-size:10px;line-height:1}.notifications-list__controls{align-items:center;display:flex}.notifications-list__mark-read{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:12px;color:var(--mypage-muted);cursor:pointer;font-size:13px;font-weight:600;padding:8px 14px;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.notifications-list__mark-read:hover:not(:disabled){background:var(--mypage-accent);border-color:#0000;color:#fff}.notifications-list__mark-read:disabled{cursor:not-allowed;opacity:.55}.notifications-pagination{display:flex;justify-content:center;margin-top:24px}.notifications-pagination__pages{align-items:center;display:inline-flex;flex-wrap:wrap;gap:8px}.notifications-pagination__button{background:var(--mypage-surface);border:1px solid var(--mypage-border);border-radius:12px;color:var(--mypage-muted);cursor:pointer;font-size:13px;font-weight:600;min-width:44px;padding:8px 14px;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.notifications-pagination__button:hover:not(:disabled){border-color:#8b70ff73;color:var(--mypage-text);transform:translateY(-1px)}.notifications-pagination__button.is-active{background:var(--mypage-accent);border-color:var(--mypage-accent);box-shadow:0 12px 20px -18px #8b70ffb3;color:#fff}.notifications-pagination__button:disabled{cursor:not-allowed;opacity:.55;transform:none}@media (max-width:960px){.notifications-actions{flex-wrap:wrap;justify-content:flex-end}.notifications-list__item{align-items:flex-start;flex-direction:column}.notifications-list__controls{justify-content:flex-end;width:100%}.notifications-pagination{margin-top:20px}}.community-write-shell{--write-bg:#fff;--write-surface:#fff;--write-border:#0f172a0f;--write-text:#161829;--write-muted:#545a6c;--write-soft:#8b70ff1f;--write-accent:var(--accent-secondary);background:var(--write-bg);color:var(--write-text);font-family:Noto Sans KR,sans-serif;min-height:100vh;padding:72px 0 96px}.community-write-layout{grid-gap:28px;align-items:flex-start;display:grid;gap:28px;grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr);margin:0 auto;width:min(1120px,100% - 48px)}.write-main-card{background:var(--write-surface);border:1px solid var(--write-border);border-radius:22px;box-shadow:0 24px 46px -36px #0f172a42;padding:40px 44px}.write-header{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}.write-header-pill{align-items:center;background:var(--write-soft);border-radius:999px;color:var(--write-accent);display:inline-flex;font-size:12px;font-weight:600;justify-content:center;letter-spacing:.1em;padding:6px 16px;text-transform:uppercase;width:fit-content}.write-header-text h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0}.write-header-text p{color:var(--write-muted);font-size:15px;margin:0}.top-nav{background:#8b70ff0f;border:1px solid #8b70ff29;border-radius:16px;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;padding:10px}.top-nav-button{background:#0000;border:none;border-radius:999px;color:var(--write-muted);cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:background-color .18s ease,color .18s ease,transform .18s ease}.top-nav-button:hover{background:#8b70ff1f;color:var(--write-text);transform:translateY(-1px)}.top-nav-button.active{background:var(--write-accent);box-shadow:0 18px 34px -24px #8b70ff94;color:#fff}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.field label{color:var(--write-muted);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.tag-input,.title-input{background:var(--write-bg);border:1px solid var(--write-border);border-radius:14px;color:var(--write-text);font-size:15px;padding:14px 16px;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;width:100%}.tag-input::placeholder,.title-input::placeholder{color:#171a2a6b;font-weight:500}.tag-input:focus,.title-input:focus{background:var(--write-surface);border-color:#8b70ff66;box-shadow:0 18px 40px -30px #8b70ff80;outline:none}.tag-selector{display:flex;flex-wrap:wrap;gap:10px}.tag-option{-webkit-appearance:none;appearance:none;background:#8b70ff14;border:1px solid #8b70ff38;border-radius:999px;color:var(--write-muted);cursor:pointer;font-size:13px;font-weight:600;padding:10px 16px;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}.tag-option:hover:not(:disabled){background:#8b70ff29;border-color:#8b70ff57;box-shadow:0 14px 24px -20px #8b70ff66;color:var(--write-text);transform:translateY(-1px)}.tag-option.is-active{background:var(--write-accent);border-color:var(--write-accent);box-shadow:0 16px 32px -24px #8b70ff99;color:#fff}.tag-option:disabled{box-shadow:none;cursor:not-allowed;opacity:.55}.field-helper{color:var(--write-muted);font-size:12px;margin:0}.tag-helper-count{margin-left:8px}.tag-helper-count,.tag-limit-notice{color:var(--write-accent);font-weight:600}.tag-limit-notice{align-items:center;display:inline-flex;font-size:12px;gap:6px;margin:4px 0 0}.editor-field{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}.editor-header{align-items:baseline}.editor-title{color:var(--write-muted);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.editor-subtitle{color:#8b70ffb3;font-size:12px;font-weight:600}.editor-surface{background:linear-gradient(180deg,#8b70ff0f,#0000);border:1px solid #8b70ff33;border-radius:20px;display:flex;flex-direction:column;gap:16px;padding:18px}.markdown-toolbar{display:flex;flex-wrap:wrap;gap:10px}.markdown-toolbar button{align-items:center;background:var(--write-surface);border:1px solid #8b70ff38;border-radius:12px;color:var(--write-accent);cursor:pointer;display:inline-flex;font-size:16px;height:40px;justify-content:center;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;width:40px}.markdown-toolbar button:hover{background:#8b70ff24;border-color:#8b70ff73;box-shadow:0 18px 26px -24px #8b70ff8c;color:var(--write-text);transform:translateY(-1px)}.content-textarea{background:var(--write-surface);border:1px solid #8b70ff47;border-radius:18px;box-shadow:inset 0 1px 2px #0f172a0d;color:var(--write-text);font-size:15.5px;line-height:1.7;min-height:520px;padding:18px 20px;resize:vertical;transition:border-color .18s ease,box-shadow .18s ease;width:100%}.content-textarea:focus{border-color:#8b70ff8c;box-shadow:0 22px 36px -30px #8b70ff73;outline:none}.placeholder-style{color:#171a2a73}.write-actions{display:flex;gap:14px;justify-content:flex-end}.cancel-btn,.submit-btn{border:none;border-radius:14px;cursor:pointer;font-size:14px;font-weight:600;padding:12px 20px;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease}.cancel-btn{background:var(--write-bg);border:1px solid var(--write-border);color:var(--write-muted)}.cancel-btn:hover{background:var(--write-surface);box-shadow:0 18px 34px -30px #8b70ff4d;color:var(--write-text);transform:translateY(-1px)}.submit-btn{background:var(--write-accent);box-shadow:0 20px 36px -26px #8b70ff9e;color:#fff}.submit-btn:hover{box-shadow:0 24px 44px -28px #8b70ffb3;transform:translateY(-2px)}.submit-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.7;transform:none}.write-side-panel{display:flex;flex-direction:column;gap:20px}.side-card{background:var(--write-surface);border:1px solid var(--write-border);border-radius:20px;box-shadow:0 28px 48px -36px #0f172a66;padding:24px 26px}.side-card h3{color:var(--write-text);font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}.side-card ul{display:flex;flex-direction:column;gap:10px;margin:0;padding-left:18px}.side-card p,.side-card ul{color:var(--write-muted);font-size:14px;line-height:1.6}.side-card p{margin:0 0 14px}.tag-chip-group{display:flex;flex-wrap:wrap;gap:8px}.tag-chip{-webkit-appearance:none;appearance:none;background:var(--write-soft);border:1px solid #0000;color:var(--write-accent);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}.tag-chip:hover:not(:disabled){background:#8b70ff29;border-color:#8b70ff52;color:var(--write-text);transform:translateY(-1px)}.tag-chip.is-active{background:var(--write-accent);border-color:var(--write-accent);box-shadow:0 16px 32px -26px #8b70ff99;color:#fff}.tag-chip:disabled{box-shadow:none;cursor:not-allowed;opacity:.55}.tag-chip:focus-visible,.tag-option:focus-visible{outline:2px solid #8b70ff8c;outline-offset:2px}.side-reminder{background:linear-gradient(180deg,#8b70ff1a,#8b70ff0a);border:1px solid #8b70ff2e}@media (max-width:1100px){.community-write-layout{grid-template-columns:1fr}.write-side-panel{flex-direction:row;flex-wrap:wrap}.side-card{flex:1 1 280px}}@media (max-width:720px){.community-write-shell{padding:84px 0 64px}.write-main-card{padding:32px 24px}.top-nav{padding:8px}.content-textarea{min-height:420px}.write-actions{align-items:stretch;flex-direction:column-reverse}.cancel-btn,.submit-btn{width:100%}}.dark-mode .community-write-shell{--write-bg:#0f1324;--write-surface:#181d33;--write-border:#8b70ff42;--write-text:#f6f6ff;--write-muted:#c4c6de;--write-soft:#8b70ff47;--write-accent:var(--accent-primary)}.dark-mode .placeholder-style{color:#f6f6ff80}.dark-mode .tag-input::placeholder,.dark-mode .title-input::placeholder{color:#f6f6ff61}.dark-mode .submit-btn:hover{box-shadow:0 24px 42px -30px #b88effb3}.dark-mode .markdown-toolbar button:hover{color:var(--write-text)}.post-detail-shell{--detail-bg:#fff;--detail-surface:#fff;--detail-border:#0f172a0f;--detail-text:#161829;--detail-muted:#53596c;--detail-accent:var(--accent-secondary);--detail-soft:#8b70ff24;background:var(--detail-bg);color:var(--detail-text);font-family:Noto Sans KR,sans-serif;min-height:100vh;padding:72px 0 84px}.post-detail-container{grid-gap:32px;align-items:flex-start;display:grid;gap:32px;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);margin:0 auto;width:min(1120px,100% - 48px)}.post-detail-left{min-width:0}.post-surface{background:var(--detail-surface);border:1px solid var(--detail-border);border-radius:20px;box-shadow:0 22px 42px -34px #0f172a42;padding:36px 40px}.post-header{border-bottom:1px solid var(--detail-border);display:flex;flex-direction:column;gap:18px;margin-bottom:28px;padding-bottom:24px}.post-header-top{align-items:center;display:flex;gap:16px;justify-content:space-between}.post-breadcrumb{color:var(--detail-muted);font-size:13px;font-weight:600;letter-spacing:-.01em}.post-header-actions{display:flex;gap:8px}.ghost-icon-btn{align-items:center;background:var(--detail-surface);border:1px solid var(--detail-border);border-radius:12px;color:var(--detail-muted);cursor:pointer;display:inline-flex;font-size:13px;font-weight:600;gap:6px;padding:8px 14px;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.ghost-icon-btn:hover{border-color:#8b70ff80;color:var(--detail-text)}.ghost-icon-btn.danger{background:#c2435b1a;border-color:#c2435b33;color:#c2435b}.ghost-icon-btn:disabled{cursor:not-allowed;opacity:.6}.post-title{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0}.post-meta-row{display:flex;flex-wrap:wrap;gap:8px}.meta-chip{align-items:center;background:var(--detail-soft);border-radius:999px;color:var(--detail-muted);display:inline-flex;font-size:13px;font-weight:600;gap:6px;padding:6px 12px}.meta-chip strong,.post-body{color:var(--detail-text)}.post-body{font-size:15.5px;line-height:1.75;word-break:break-word}.post-body p{margin:16px 0}.post-body pre{background:#8b70ff1f;border:1px solid #8b70ff38;border-radius:14px;font-size:13px;line-height:1.6;margin:22px 0;overflow-x:auto;padding:18px}.post-body ol,.post-body ul{line-height:1.8;margin:16px 0;padding-left:20px}.post-surface .error{color:#c2435b;font-weight:600}.post-reaction-bar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.reaction-like{align-items:center;background:var(--detail-soft);border:1px solid #0000;border-radius:999px;color:var(--detail-accent);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 18px;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}.reaction-like:hover{border-color:#8b70ff73;transform:translateY(-1px)}.reaction-like.active{background:#8b70ff47;border-color:#8b70ff59;color:var(--detail-text)}.reaction-like:disabled{cursor:not-allowed;opacity:.6}.reaction-stat{background:#8b70ff3d;border-radius:999px;color:var(--detail-muted);font-size:13px;font-weight:600;padding:8px 12px}.post-tag-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.tag-chip{align-items:center;background:var(--detail-soft);border-radius:999px;color:var(--detail-accent);display:inline-flex;font-size:13px;font-weight:600;padding:6px 12px}.comment-card{background:var(--detail-surface);border:1px solid var(--detail-border);border-radius:20px;box-shadow:0 22px 44px -32px #0f172a61;margin-top:40px;padding:32px 34px}.comment-card-header{align-items:center;border-bottom:1px solid var(--detail-border);display:flex;gap:16px;justify-content:space-between;margin-bottom:24px;padding-bottom:18px}.comment-card-header h3{color:var(--detail-text);font-size:18px;font-weight:700;margin:0}.comment-count-badge{align-items:center;background:var(--detail-soft);border-radius:999px;color:var(--detail-accent);display:inline-flex;font-size:12px;font-weight:600;justify-content:center;min-width:34px;padding:4px 10px}.comment-editor{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.comment-hint{color:var(--detail-muted);font-size:11.5px;margin-top:-6px}.comment-editor textarea{background:var(--detail-bg);border:1px solid var(--detail-border);border-radius:14px;color:var(--detail-text);font-size:14px;line-height:1.65;min-height:120px;padding:14px 16px;resize:vertical;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;width:100%}.comment-editor textarea:focus{background:var(--detail-surface);border-color:#8b70ff8c;box-shadow:0 0 0 3px #8b70ff38;outline:none}.comment-editor-actions{display:flex;gap:10px;justify-content:flex-end}.btn-primary,.btn-secondary{border:none;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.btn-secondary{background:var(--detail-surface);border:1px solid var(--detail-border);color:var(--detail-muted)}.btn-secondary:hover{border-color:#8b70ff80;color:var(--detail-text);transform:translateY(-1px)}.btn-primary{background:var(--detail-accent);box-shadow:0 20px 30px -22px #8b70ff9e;color:#fff}.btn-primary:hover{box-shadow:0 24px 36px -22px #8b70ffb8;transform:translateY(-1px)}.btn-primary:disabled{cursor:not-allowed;opacity:.6}.comment-list{display:flex;flex-direction:column;gap:24px;list-style:none;margin:32px 0 0;padding:0}.comment-item{border-bottom:1px solid var(--detail-border);padding-bottom:24px}.comment-item:last-child{border-bottom:none;padding-bottom:0}.comment-meta{align-items:center;color:var(--detail-muted);display:flex;flex-wrap:wrap;font-size:13px;gap:10px}.comment-writer{color:var(--detail-text);font-weight:700}.comment-content{color:var(--detail-text);font-size:15px;line-height:1.7;margin-top:8px;white-space:pre-wrap}.comment-action-row{align-items:center;display:flex;gap:14px;margin-top:14px}.comment-delete-btn,.reply-delete-btn,.reply-toggle-btn{background:none;border:none;color:var(--detail-accent);cursor:pointer;font-size:13px;padding:0}.comment-delete-btn,.reply-delete-btn{color:#c2435b}.comment-delete-btn:disabled,.reply-delete-btn:disabled{cursor:not-allowed;opacity:.5}.reply-form{border-left:2px solid var(--detail-border);display:flex;flex-direction:column;gap:12px;margin:18px 0 0 16px;padding-left:16px}.reply-form input{background:var(--detail-bg);border:1px solid var(--detail-border);border-radius:12px;color:var(--detail-text);font-size:13px;padding:10px 14px;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;width:100%}.reply-form input:focus{background:var(--detail-surface);border-color:#8b70ff80;box-shadow:0 0 0 3px #8b70ff33;outline:none}.reply-form-buttons{display:flex;gap:10px;justify-content:flex-end}.reply-cancel-btn,.reply-submit-btn{border:none;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px}.reply-submit-btn{background:var(--detail-accent);box-shadow:0 16px 24px -20px #8b70ff99;color:#fff}.reply-submit-btn:disabled{cursor:not-allowed;opacity:.6}.reply-cancel-btn{background:var(--detail-surface);border:1px solid var(--detail-border);color:var(--detail-muted)}.reply-list{border-left:2px solid var(--detail-border);display:flex;flex-direction:column;gap:12px;list-style:none;margin:18px 0 0 16px;padding-left:16px}.reply-item{background:var(--detail-bg);border-radius:14px;color:var(--detail-text);font-size:13px;line-height:1.6;padding:12px 14px}.reply-meta{color:var(--detail-muted);font-size:12px;margin-bottom:6px}.empty-comment{align-items:center;color:var(--detail-muted);display:flex;flex-direction:column;gap:4px;margin-top:28px;text-align:center}.empty-icon{font-size:28px;margin-bottom:4px}.comment-title{color:var(--detail-text);font-size:16px;font-weight:700}.comment-sub{color:var(--detail-muted);font-size:13px}.post-detail-right{align-self:start;display:flex;flex-direction:column;gap:20px;grid-area:auto;position:sticky;top:96px}.support-card{background:var(--detail-surface);border:1px solid var(--detail-border);border-radius:18px;box-shadow:0 24px 46px -32px #0f172a61;padding:24px 26px}.author-box{gap:14px}.author-box,.profile-image{align-items:center;display:flex}.profile-image{background:var(--detail-soft);border-radius:16px;color:var(--detail-accent);font-size:18px;font-weight:700;height:56px;justify-content:center;letter-spacing:.02em;width:56px}.author-info{display:flex;flex-direction:column;gap:6px}.author-name{color:var(--detail-text);font-size:15px;font-weight:700}.author-activity,.author-stats-list{color:var(--detail-muted);font-size:13px}.author-stats-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.author-stats-list li{align-items:center;display:flex;gap:12px;justify-content:space-between}.author-stats-list li strong{color:var(--detail-text);font-weight:700}.author-recent{align-items:flex-start;flex-direction:column;gap:6px;justify-content:flex-start}.author-recent button{background:none;border:none;color:var(--detail-accent);cursor:pointer;font-size:13px;font-weight:600;padding:0;text-align:left}.author-recent button:hover{text-decoration:underline}.author-recent time{color:var(--detail-muted);font-size:12px}.related-qna-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.related-qna-header h4{color:var(--detail-text);font-size:15px;font-weight:700;margin:0}.view-all-btn{background:var(--detail-bg);border:1px solid var(--detail-border);border-radius:999px;color:var(--detail-accent);cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px}.related-qna ul{gap:12px;list-style:none;margin:0;padding:0}.related-item,.related-qna ul{display:flex;flex-direction:column}.related-item{background:var(--detail-bg);border:1px solid var(--detail-border);border-radius:14px;cursor:pointer;font:inherit;gap:6px;padding:12px 14px;text-align:left;transition:border-color .18s ease,transform .18s ease;width:100%}.related-item:focus-visible,.related-item:hover{border-color:#8b70ff73;outline:none;transform:translateY(-2px)}.related-title{color:var(--detail-text);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.related-meta{color:var(--detail-muted);display:flex;font-size:12px;justify-content:space-between}.related-meta .reactions{display:flex;gap:8px}.related-empty{background:var(--detail-bg);border:1px dashed var(--detail-border);border-radius:12px;color:var(--detail-muted);font-size:13px;padding:10px 12px;text-align:center}@media (max-width:1080px){.post-detail-container{width:min(1060px,100% - 36px)}.post-surface{padding:32px}}@media (max-width:940px){.post-detail-container{gap:28px;grid-template-columns:minmax(0,1fr)}.post-detail-right{position:static;width:100%}}@media (max-width:640px){.post-detail-shell{padding:56px 0 64px}.post-detail-container{padding:0 18px;width:100%}.post-surface{padding:26px 22px}.post-header-top{align-items:flex-start;flex-direction:column}.comment-card{padding:26px 22px}}@media (max-width:480px){.post-title{font-size:26px}.btn-primary,.btn-secondary,.reaction-like,.reaction-stat{justify-content:center;width:100%}}.dark-mode .post-detail-shell{--detail-bg:#0f1119;--detail-surface:#181c2b;--detail-border:#ffffff14;--detail-text:#f2f4ff;--detail-muted:#c9cff7;--detail-accent:var(--accent-primary);--detail-soft:#937bff52}.dark-mode .comment-card,.dark-mode .post-surface,.dark-mode .support-card{box-shadow:none}.dark-mode .comment-editor textarea,.dark-mode .reply-form input{background:#181c2bcc}.dark-mode .related-item,.dark-mode .reply-item{background:#181c2bd9}.broadcast-wrapper{background-color:var(--surface-page);color:var(--text-primary);display:flex;flex-direction:column;height:100vh;padding-top:70px}.main-section{display:flex;flex:1 1;overflow:hidden}.main-section.with-chat{grid-template-columns:280px 1fr 340px}.editor-area{background:var(--surface-card);border-left:1px solid var(--border-subtle);display:flex;flex:1 1;min-height:0;min-width:0;padding:0;position:relative}.empty-state{align-items:center;display:flex;flex-direction:column;gap:8px;inset:0;justify-content:center;position:absolute;-webkit-user-select:none;user-select:none}.plus-button{background:var(--accent-secondary);border:none;border-radius:50%;box-shadow:0 6px 16px #937bff40;color:#fff;cursor:pointer;font-size:50px;height:100px;transition:transform .15s ease,filter .15s ease,background .2s ease;width:100px}.plus-button:hover{background:var(--accent-hover);filter:brightness(1.05);transform:scale(1.06)}.empty-help{color:var(--text-muted);font-size:15px;letter-spacing:.2px;margin:0;opacity:.9}.dark-mode .empty-help{font-size:14px}.broadcast-wrapper:fullscreen{background:#000;padding-top:0}:-webkit-full-screen .broadcast-wrapper{background:#000;padding-top:0}.broadcast-wrapper:fullscreen .main-section{height:100vh}.broadcast-wrapper:fullscreen .editor-area{padding:0}.broadcast-wrapper:fullscreen .code-editor{padding:0}.preview-strip.nochrome{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:color-mix(in srgb,var(--surface-popover) 92%,#0000);border:1px solid var(--border-subtle);border-radius:14px;bottom:14px;box-shadow:0 10px 26px #0f172a29;height:140px;left:50%;max-width:88%;overflow:hidden;pointer-events:auto;position:absolute;transform:translateX(-50%);width:min(1100px,88%);z-index:4}.dark-mode .preview-strip.nochrome{box-shadow:0 10px 28px #04040c73}.preview-strip-scroller{align-items:center;display:flex;gap:10px;height:100%;overflow-x:auto;overflow-y:hidden;padding:10px 12px;scroll-snap-type:x proximity;width:100%}.preview-strip-scroller::-webkit-scrollbar{height:8px}.preview-strip-scroller::-webkit-scrollbar-thumb{background:#0000002e;border-radius:999px}.dark-mode .preview-strip-scroller::-webkit-scrollbar-thumb{background:#ffffff2e}.preview-strip-scroller>*{scroll-snap-align:center}.editor-area .code-editor{padding-bottom:170px}.preview-toggle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--surface-popover) 96%,#0000);border:1px solid var(--border-subtle);border-radius:999px;bottom:8px;box-shadow:0 8px 18px #0f172a29;cursor:pointer;font-size:12px;left:50%;line-height:1;padding:6px 12px;position:absolute;transform:translateX(-50%);z-index:1001}.preview-toggle.open{bottom:160px}.dark-mode .preview-toggle{box-shadow:0 10px 22px #04040c61}.broadcast-wrapper:fullscreen .preview-toggle.open{bottom:150px}.broadcast-wrapper:fullscreen .preview-strip.nochrome{bottom:8px}.broadcast-controls-bar{align-items:center;background:#0000;bottom:20px;box-shadow:none;display:flex;justify-content:flex-end;left:auto;padding:0;position:fixed;right:20px;transform:none;z-index:1000}.left-controls,.right-controls{align-items:center;display:flex;flex-grow:0;gap:8px}.left-controls{justify-content:flex-end}.control-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:16px;font-weight:600;padding:8px 16px;transition:background-color .2s,opacity .2s;white-space:nowrap}.control-btn:disabled{cursor:not-allowed;opacity:.5}.control-btn .icon{font-size:20px;margin-right:8px}.control-btn .icon-wrapper{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.share-screen,.share-toggle-btn{background-color:var(--accent-secondary);color:#fff;justify-content:center;min-width:120px;width:136px}.share-screen:not(:disabled):hover,.share-toggle-btn:not(:disabled):hover{background-color:var(--accent-hover)}.share-screen.active,.share-toggle-btn.active{background:linear-gradient(135deg,#ff5c7a,#ff2f5c);box-shadow:0 8px 18px #ff2f5c4d}.share-screen.active:not(:disabled):hover,.share-toggle-btn.active:not(:disabled):hover{filter:brightness(1.07)}.share-screen .check-icon,.share-toggle-btn .check-icon{font-size:16px;margin-right:8px}.dark-mode .broadcast-controls-bar{background:#0000}.broadcast-wrapper:fullscreen .broadcast-controls-bar{bottom:10px;right:10px}.broadcastlive-header{align-items:center;background-color:var(--surface-header);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);display:flex;justify-content:space-between;margin-bottom:0;padding:16px 24px}.header-left{align-items:baseline;display:flex;gap:8px}.broadcast-title{margin:0}.broadcast-title,.title-input{color:var(--text-primary);font-size:20px;font-weight:700}.title-input{background:var(--surface-input);border:1px solid var(--border-subtle);border-radius:6px;outline:none;padding:2px 6px}.title-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.edit-title-btn{background:#0000;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;margin-left:6px;transition:color .2s ease}.edit-title-btn:hover{color:var(--accent-primary)}.header-right{align-items:center;display:flex;gap:10px}.invite-badge{align-items:center;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:999px;cursor:default;display:inline-flex;gap:8px;margin-left:10px;padding:4px 8px}.invite-label{color:var(--text-muted);font-size:12px}.invite-code{color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}.icon-btn{align-items:center;background:#0000;border:none;cursor:pointer;display:inline-flex;justify-content:center;opacity:.85;padding:2px}.icon-btn:hover{opacity:1}.focus-button{background-color:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:14px;padding:6px 12px;transition:background-color .15s ease,border-color .15s ease,filter .15s ease}.focus-button:hover{background-color:var(--accent-soft)}.focus-button.active{background-color:var(--accent-secondary);border-color:var(--accent-secondary);color:#fff}.exit-button{background-color:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:8px;color:#ff5f5f;cursor:pointer;font-size:14px;padding:6px 12px;transition:background-color .2s ease}.exit-button:hover{background-color:var(--accent-soft)}.codecast-sidebar{background-color:var(--surface-muted);border-right:1px solid var(--border-subtle);color:var(--text-primary);display:flex;flex-direction:column;gap:12px;padding:16px 14px;width:200px}.sidebar-headline{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.codecast-sidebar-title{align-items:center;color:var(--text-primary);display:flex;font-size:16px;font-weight:600;gap:4px;margin-bottom:14px}.codecast-sidebar-title .count{color:var(--text-muted);font-size:14px;font-weight:400}.chat-open-btn{align-items:center;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;padding:6px 8px;transition:background-color .15s ease,border-color .15s ease}.chat-open-btn:hover{background-color:var(--accent-soft);border-color:var(--accent-border)}.participant-list{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}.participant-item{align-items:center;background-color:color-mix(in srgb,var(--surface-card) 92%,#0000);border:1px solid #0000;border-radius:10px;color:var(--text-primary);cursor:pointer;display:flex;font-size:14px;gap:10px;margin:0;padding:8px 10px;position:relative;transition:background-color .18s ease,border-color .18s ease}.participant-item:hover{background-color:var(--accent-soft);border-color:var(--accent-border)}.avatar{align-items:center;border-radius:50%;color:var(--text-primary);display:flex;height:28px;justify-content:center;object-fit:cover;width:28px}.avatar,.avatar.placeholder{background:var(--surface-muted)}.default-user-icon{color:var(--text-primary);font-size:14px}.participant-item .name,.participant-main{flex:1 1;min-width:0}.participant-main{display:flex;flex-direction:column;gap:2px}.participant-main .name{font-weight:500;text-overflow:ellipsis;white-space:nowrap}.participant-main .self-badge{align-items:center;background:var(--accent-soft);border-radius:999px;color:var(--accent-secondary);display:inline-flex;font-size:10px;font-weight:600;justify-content:center;margin-left:6px;padding:1px 6px}.participant-main .stage{color:var(--text-muted);font-size:11px}.participant-main .stage.editing{color:var(--accent-primary);font-weight:600}.participant-main .stage.disconnected{color:#eb5757;font-weight:600}.participant-main .stage.watching{color:#3f51b5}.permission-chip{display:flex;flex-shrink:0;justify-content:center;min-width:78px}.role-badge{align-items:center;background:var(--surface-muted);border:1px solid #0000;border-radius:999px;color:var(--text-muted);display:inline-flex;font-size:11px;font-weight:600;justify-content:center;letter-spacing:-.02em;min-width:64px;padding:3px 10px}.role-badge.owner{background:#facc1524;border-color:#facc1540;color:#fbbf24}.role-badge.edit{background:#38bdf824;border-color:#38bdf840;color:#38bdf8}.role-badge.view{background:#94a3b81f;border-color:#94a3b833;color:#94a3b8}.participant-item.active-user{background-color:var(--accent-soft-strong);border-left:3px solid var(--accent-secondary);font-weight:600}.more-btn{background:#0000;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;padding:4px;transition:background-color .12s ease,color .12s ease}.more-btn:hover{background-color:var(--accent-soft);color:var(--accent-primary)}.more-menu{background:var(--surface-popover);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:0 10px 24px #0f172a1f;min-width:160px;padding:8px;position:absolute;right:6px;top:36px;z-index:10}.menu-group{display:flex;flex-direction:column;gap:4px}.menu-label{color:var(--text-muted);font-size:12px;padding:4px 6px 6px}.menu-item{align-items:center;background:#0000;border:none;border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;gap:8px;padding:8px 10px;text-align:left;width:100%}.menu-item:hover{background:var(--accent-soft)}.menu-item:disabled{cursor:default;opacity:.55}.menu-item.danger{color:#eb5757}.menu-divider{background:var(--border-subtle);height:1px;margin:6px 0}.check{color:var(--accent-secondary);font-size:12px}.dark-mode .codecast-sidebar{background-color:color-mix(in srgb,var(--surface-muted) 82%,#0000);box-shadow:12px 0 32px #04040c47}.dark-mode .participant-item{background-color:color-mix(in srgb,var(--surface-card) 74%,#0806148c)}.dark-mode .default-user-icon{color:var(--text-primary)}.dark-mode .more-menu{box-shadow:0 12px 28px #04040c52}.code-editor{background-color:var(--surface-card);color:var(--text-primary);display:flex;flex:1 1;flex-direction:column;font-family:Courier New,monospace;font-size:15px;min-height:0;min-width:0;padding:16px}.editor-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.current-user-badge{background-color:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:12px;color:var(--text-primary);font-size:14px;font-weight:600;gap:6px;padding:6px 12px}.current-user-badge,.toolbar-right{align-items:center;display:inline-flex}.toolbar-right{gap:8px}.run-button{align-items:center;background-color:var(--accent-secondary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:6px;padding:6px 12px;transition:background-color .2s ease}.run-button:hover{background-color:var(--accent-hover)}.viz-button{align-items:center;background-color:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;font-size:14px;gap:6px;padding:6px 12px;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.viz-button:hover{background-color:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-primary)}.toolbar-right .select-file-btn{align-items:center;background-color:var(--accent-soft);border:1px solid var(--accent-border);border-radius:6px;color:var(--accent-secondary);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;padding:6px 12px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.toolbar-right .select-file-btn:hover{background-color:var(--accent-soft-strong);border-color:var(--accent-secondary);box-shadow:0 0 0 1px #8b70ff2e;color:var(--accent-primary)}body.dark-mode .toolbar-right .select-file-btn{background-color:color-mix(in srgb,var(--accent-soft) 75%,#0000);border-color:#7c68dc6b;color:var(--text-primary)}body.dark-mode .toolbar-right .select-file-btn:hover{box-shadow:0 0 0 1px #7c68dc5c;color:var(--accent-glow)}.code-editor .monaco-editor,.code-editor .monaco-editor .overflow-guard,.code-editor>div{flex:1 1;min-height:0}body.dark-mode .code-editor .monaco-editor,body.dark-mode .code-editor .monaco-editor .lines-content,body.dark-mode .code-editor .monaco-editor .margin-view-overlays,body.dark-mode .code-editor .monaco-editor .monaco-editor-background,body.dark-mode .code-editor .monaco-editor .overflow-guard,body.dark-mode .code-editor .monaco-editor .view-lines,body.dark-mode .code-editor .monaco-editor .view-overlays{background-color:var(--ide-editor-bg)!important}body.dark-mode .code-editor .monaco-editor .glyph-margin,body.dark-mode .code-editor .monaco-editor .margin{background-color:var(--ide-editor-gutter)!important;border-right:1px solid var(--border-subtle)}body.dark-mode .code-editor .monaco-editor .scroll-decoration{background:linear-gradient(180deg,#0000001f,#0000);box-shadow:none}body.dark-mode .code-editor .monaco-editor .line-numbers,body.dark-mode .code-editor .monaco-editor .margin .current-line{color:var(--ide-editor-line-number)!important}body.dark-mode .code-editor .monaco-editor .line-numbers.active-line-number{color:var(--accent-primary)!important}.fpm-backdrop{background:#00000073;display:grid;inset:0;place-items:center;position:fixed;z-index:2000}.fpm-modal{background:#fff;border:1px solid #e6e6ef;border-radius:14px;box-shadow:0 10px 30px #00000026;color:#222;max-width:calc(100% - 32px);padding:18px 18px 14px;width:520px}.fpm-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.fpm-modal h3{color:#222;font-size:16px;font-weight:700;margin:0}.fpm-refresh{background:#f7f7fb;border:1px solid #e0e0ea;border-radius:8px;color:#333;cursor:pointer;font-size:13px;padding:6px 12px}.fpm-refresh:disabled{cursor:default;opacity:.6}.fpm-refresh:not(:disabled):hover{filter:brightness(1.03)}.fpm-error{background:#fff1f0;border:1px solid #ffdad6;border-radius:8px;color:#b3261e;font-size:13px;margin-bottom:10px;padding:8px 10px}.fpm-list{list-style:none;margin:0;max-height:320px;overflow:auto;padding:0}.fpm-item{align-items:center;background:#f7f7fb;border:1px solid #0000;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;padding:10px 8px}.fpm-item+.fpm-item{margin-top:8px}.fpm-item:hover{background:var(--accent-soft);border-color:var(--accent-border)}.fpm-item.disabled{cursor:default;opacity:.7}.fpm-item.disabled:hover{background:#f7f7fb;border-color:#0000}.fpm-item.new-file{background:#8b70ff1a;border:1px dashed var(--accent-border)}.fpm-item.new-file:hover{background:#8b70ff29;border-color:var(--accent-border)}.fpm-name{color:#333;font-weight:600}.fpm-lang{color:#666;font-size:12px}.fpm-close{background:#f7f7fb;border:1px solid #e0e0ea;border-radius:10px;color:#333;cursor:pointer;margin-top:12px;padding:10px 0;width:100%}.fpm-close:hover{filter:brightness(1.03)}.fpm-newfile{background:#f8f8ff;border:1px solid #ece9ff;border-radius:12px;margin-top:8px;padding:12px}.fpm-row{display:flex;gap:8px}.fpm-input,.fpm-select{background:#fff;border:1px solid #ccc;border-radius:8px;color:#222;font-size:14px;padding:10px 12px}.fpm-input{flex:1 1}.fpm-select{width:180px}.fpm-hint{color:#666;font-size:13px;margin-top:8px}.fpm-preview{color:var(--accent-secondary)}.fpm-actions{display:flex;gap:8px;justify-content:space-between;margin-top:12px}.fpm-primary,.fpm-secondary{border:none;border-radius:10px;cursor:pointer;font-size:14px;padding:10px 14px}.fpm-primary{background:var(--accent-secondary);color:#fff}.fpm-primary:disabled{cursor:default;opacity:.6}.fpm-primary:hover:not(:disabled){background:var(--accent-hover)}.fpm-secondary{background:#f2f2f7;border:1px solid #e4e4ea;color:#333}.fpm-secondary:hover{background:#e9e9ef}.dark-mode .fpm-modal{background:#151520;border:1px solid #ffffff14;box-shadow:0 10px 30px #00000059;color:#eee}.dark-mode .fpm-modal h3{color:#fff}.dark-mode .fpm-refresh{background:#2a2a38;border-color:#ffffff14;color:#eee}.dark-mode .fpm-refresh:not(:disabled):hover{filter:brightness(1.07)}.dark-mode .fpm-error{background:#ff595e26;border:1px solid #ff595e4d;color:#ff9b9b}.dark-mode .fpm-item{background:#1a1a26}.dark-mode .fpm-item:hover{background:#1f1f2c;border-color:var(--accent-border)}.dark-mode .fpm-item.disabled{background:#1a1a26;border-color:#0000}.dark-mode .fpm-item.new-file{background:#8b70ff2e;border-color:var(--accent-border)}.dark-mode .fpm-item.new-file:hover{background:#8b70ff3d;border-color:var(--accent-border)}.dark-mode .fpm-name{color:#eee}.dark-mode .fpm-lang{color:#bdbdbd}.dark-mode .fpm-close{background:#2a2a38;border:none;color:#ddd}.dark-mode .fpm-close:hover{filter:brightness(1.05)}.dark-mode .fpm-newfile{background:#1a1a26;border-color:#ffffff14}.dark-mode .fpm-input,.dark-mode .fpm-select{background:#232333;border-color:#2f2f40;color:#eee}.dark-mode .fpm-hint{color:#c8c1d9}.dark-mode .fpm-preview{color:var(--accent-primary)}.dark-mode .fpm-secondary{background:#2b2b34;border:1px solid #3a3a48;color:#eaeaf2}.dark-mode .fpm-secondary:hover{background:#34343f}.dark-mode .fpm-primary{background:var(--accent-secondary)}.preview-bar{background:#fafafb;border-top:1px solid #e6e6ea;padding:10px 12px}.preview-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin}.preview-card{background:#fff;border:1px solid #e6e6ef;border-radius:10px;cursor:pointer;flex:0 0 280px;padding:10px;text-align:left;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.preview-card:hover{border-color:var(--accent-border);box-shadow:0 6px 14px #00000014;transform:translateY(-1px)}.preview-card.active{border-color:var(--accent-secondary);box-shadow:0 0 0 2px var(--accent-border) inset}.preview-header{align-items:center;display:flex;gap:8px;margin-bottom:8px}.r-icon{font-size:14px}.r-icon.host{color:#ffbf00}.r-icon.edit{color:#00a152}.r-icon.view{color:#9aa0a6}.p-name{color:#222;font-size:14px;font-weight:700}.snippet{color:#555;font-size:12px;line-height:1.4;margin:0;max-height:80px}.preview-card .snippet,.snippet{overflow:hidden;white-space:pre-wrap}.preview-card .snippet{min-height:48px}.dark-mode .preview-bar{background:#141419;border-top:1px solid #333}.dark-mode .preview-card{background:#1a1a26;border:1px solid #ffffff14}.dark-mode .preview-card:hover{border-color:var(--accent-border);box-shadow:0 8px 20px #00000040}.dark-mode .preview-card.active{border-color:var(--accent-secondary);box-shadow:0 0 0 2px var(--accent-border) inset}.dark-mode .p-name{color:#eee}.dark-mode .snippet{color:#c8c1d9}.dark-mode .r-icon.host{color:gold}.dark-mode .r-icon.edit{color:#00c853}.dark-mode .r-icon.view{color:#888}.chat-panel.docked{background:var(--surface-card);border-left:1px solid var(--border-subtle);color:var(--text-primary);display:flex;flex-direction:column;position:sticky}.chat-header{align-items:center;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;padding:14px 16px}.chat-header h3{color:var(--text-primary);font-size:16px;margin:0}.chat-close{background:#0000;border:none;color:var(--text-muted);cursor:pointer;font-size:16px}.chat-list{color:var(--text-primary);flex:1 1;overflow:auto;padding:12px 14px}.chat-item+.chat-item{margin-top:10px}.chat-user{color:var(--text-primary);font-size:13px;font-weight:700}.chat-text{color:var(--text-muted);font-size:14px}.chat-input{background:var(--surface-card);border-top:1px solid var(--border-subtle);display:flex;gap:8px;padding:10px 12px}.chat-input input{background:var(--surface-input);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-primary);flex:1 1;font-size:14px;padding:10px 12px}.chat-input input::placeholder{color:var(--text-muted)}.chat-input .send-btn{background:var(--accent-secondary);border:none;border-radius:8px;color:#fff;cursor:pointer;padding:0 14px;transition:background-color .2s ease}.chat-input .send-btn:hover{background:var(--accent-hover)}.dark-mode .chat-panel.docked{box-shadow:-12px 0 32px #04040c73}.dark-mode .chat-close,.dark-mode .chat-text{color:var(--text-muted)}
/*# sourceMappingURL=main.13f42cc2.css.map*/