body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#fafafa;color:#333;line-height:1.6}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 32px;background:#fff;border-bottom:1px solid #e0e0e0}.logo{display:flex;align-items:baseline;gap:12px}.logo h1{font-size:24px;font-weight:700;color:#1a5f7a;letter-spacing:-.5px}.logo .slogan{font-size:13px;color:#999;font-weight:500;letter-spacing:.5px}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 32px;background:#fafafa;border-bottom:1px solid #e0e0e0}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:12px}.editor-footer,.preview-footer{display:flex;justify-content:center;gap:12px;padding:12px 16px;background:#fff;border-top:1px solid #e0e0e0;border-radius:0 0 12px 12px}.editor-container{flex:1;position:relative;background:#282c34;border-radius:12px 12px 0 0;overflow:hidden}.main{display:flex;flex:1;overflow:hidden;padding:24px;gap:24px}.editor-section{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000000f}.editor-container{flex:1;position:relative;background:#282c34;overflow:hidden}.editor-container textarea::placeholder{color:#5c6370}.preview-section{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000000f}.preview-container{flex:1;display:flex;justify-content:center;align-items:flex-start;background:#fff;border-radius:12px 12px 0 0;overflow:hidden;padding:24px}.theme-selector-wrapper{position:relative}.theme-selector-trigger{display:flex;align-items:center;gap:10px;padding:10px 16px;border:2px solid #e0e0e0;background:#fff;border-radius:8px;font-size:14px;font-weight:600;color:#333;cursor:pointer;transition:all .3s ease;min-width:160px}.theme-selector-trigger:hover{border-color:#1a5f7a;background-color:#f8f9fa}.theme-selector-trigger:focus{outline:none;border-color:#1a5f7a;box-shadow:0 0 0 3px #1a5f7a1a}.theme-color-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px #0003}.theme-name{flex:1;text-align:left}.dropdown-arrow{color:#999;transition:transform .3s ease}.dropdown-arrow.open{transform:rotate(180deg)}.theme-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 16px #0000001f;list-style:none;padding:8px;margin:0;z-index:1000;animation:dropdownFadeIn .2s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.theme-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-size:14px;font-weight:500;color:#333}.theme-option:hover{background-color:#f8f9fa}.theme-option.selected{background-color:#f0f7f9;color:#1a5f7a}.check-icon{margin-left:auto;color:#1a5f7a}.editor-controls{display:flex;gap:12px;margin-top:12px}.control-button{flex:1;padding:12px;border:1px solid #e0e0e0;background:#fff;color:#666;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.editor-footer .control-button-secondary,.preview-footer .download-button,.preview-footer .copy-button{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:120px;justify-content:center}.editor-footer .control-button-secondary{border:2px solid #e0e0e0;background:#fff;color:#666}.editor-footer .control-button-secondary:hover{border-color:#1a5f7a;color:#1a5f7a;background:#f8f9fa}.phone-frame{width:375px;height:100%;max-height:667px;background:#fff;border:8px solid #333;border-radius:32px;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000026}.phone-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:120px;height:24px;background:#333;border-radius:0 0 12px 12px;z-index:10}.preview-content{width:100%;height:100%;overflow-y:auto;padding:36px 20px 20px;background:#fff;-webkit-overflow-scrolling:touch}.preview-content::-webkit-scrollbar{width:4px}.preview-content::-webkit-scrollbar-track{background:transparent}.preview-content::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.preview-content::-webkit-scrollbar-thumb:hover{background:#bbb}.preview-footer .download-button{background:#fff;color:#666;border:2px solid #e0e0e0;display:flex;align-items:center;gap:6px}.preview-footer .download-button:hover{border-color:#1a5f7a;color:#1a5f7a}.preview-footer .copy-button{background:linear-gradient(135deg,#1a5f7a,#2d8fba);color:#fff;border:none;display:flex;align-items:center;gap:6px}.preview-footer .copy-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1a5f7a33}.preview-footer .copy-button.copied{background:linear-gradient(135deg,#4caf50,#66bb6a)}.copy-button .icon,.download-button .icon{font-size:16px}.notification{position:fixed;top:80px;left:50%;transform:translate(-50%) translateY(-20px);background:#1a5f7a;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:0 4px 12px #00000026;opacity:0;animation:slideDown .3s ease forwards;z-index:1000}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 1024px){.main{flex-direction:column}.editor-section,.preview-section{flex:none;height:50%}.phone-frame{width:320px}}@media (max-width: 768px){.header{flex-direction:column;gap:12px;padding:16px}.header-actions{width:100%;flex-wrap:wrap;gap:8px;justify-content:center}.control-button-secondary,.theme-selector{flex:1;min-width:80px}.copy-button,.download-button{flex:1;justify-content:center}.main{padding:16px;gap:16px}.phone-frame{width:100%;max-width:375px}}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#fafafa;color:#333;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}.hljs{display:block;overflow-x:auto;padding:16px;background:#f6f8fa;border-radius:6px;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.hljs-comment,.hljs-quote{color:#6a737d;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-addition{color:#d73a49}.hljs-number,.hljs-string,.hljs-meta .hljs-meta-string,.hljs-literal,.hljs-doctag,.hljs-regexp{color:#005cc5}.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#6f42c1}.hljs-attribute,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-class .hljs-title,.hljs-type{color:#e36209}.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-meta .hljs-keyword,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-link{color:#00979d}.hljs-built_in,.hljs-deletion{color:#b31d28}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}pre.hljs{background:#282c34!important;color:#abb2bf!important}pre.hljs .hljs-keyword{color:#c678dd!important}pre.hljs .hljs-string{color:#98c379!important}pre.hljs .hljs-comment{color:#5c6370!important}pre.hljs .hljs-function .hljs-title{color:#61afef!important}pre.hljs .hljs-number{color:#d19a66!important}