:root{--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--white: #ffffff;--bg-app: #faf9f6;--bg-preview: #fdfbf7;--green-500: #22c55e;--red-50: #fef2f2;--red-200: #fecaca;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Noto Sans SC,sans-serif;background-color:var(--slate-50);color:var(--slate-600);overflow:hidden}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.app-container{display:flex;height:100vh;background-color:var(--bg-app);overflow:hidden}.sidebar{width:64px;background-color:var(--white);border-right:1px solid var(--slate-100);display:flex;flex-direction:column;align-items:center;padding:24px 12px;flex-shrink:0;box-shadow:var(--shadow-sm);z-index:20;overflow-y:auto}@media(min-width:768px){.sidebar{width:256px;align-items:flex-start;padding:24px 16px}}.main-view{flex:1;display:flex;flex-direction:column;height:100%}@media(min-width:768px){.main-view{flex-direction:row}}.logo-container{margin-bottom:40px;display:flex;align-items:center;gap:8px;flex-shrink:0}.logo-box{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--white);shadow:var(--shadow-lg);transition:background-color .5s}.logo-text{display:none;font-weight:600;color:var(--slate-600);font-size:1.125rem;letter-spacing:-.025em;white-space:nowrap}@media(min-width:768px){.logo-text{display:block}}.nav-menu{flex:1;width:100%;padding-bottom:40px}.nav-section{margin-bottom:32px}.nav-title{display:none;font-size:.75rem;font-weight:500;color:var(--slate-300);text-transform:uppercase;letter-spacing:.1em;padding:0 8px;margin-bottom:16px;white-space:nowrap}@media(min-width:768px){.nav-title{display:block}}.theme-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:0 4px}@media(min-width:768px){.theme-grid{grid-template-columns:1fr 1fr;gap:12px 8px}}.theme-button{position:relative;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:12px;border:none;background:transparent;cursor:pointer;transition:all .2s;width:100%;overflow:hidden}.theme-button.active{background-color:#f5f5f0;box-shadow:inset 0 0 0 1px #e5e5d0}.theme-button:hover:not(.active){background-color:#fcfcfc}.theme-swatch{width:20px;height:20px;border-radius:9999px;border:1px solid var(--white);box-shadow:var(--shadow-sm);flex-shrink:0}.theme-name{display:none;font-size:.75rem;color:var(--slate-400);margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}.theme-button.active .theme-name{color:var(--slate-700);font-weight:500}@media(min-width:768px){.theme-button{justify-content:flex-start}.theme-name{display:block}}@media(min-width:1024px){.theme-name{font-size:.875rem}}.template-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:0 4px 16px}@media(min-width:768px){.template-grid{grid-template-columns:1fr 1fr}}.template-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;border-radius:12px;background-color:#fdfdfd;border:1px solid var(--slate-50);color:var(--slate-400);cursor:pointer;transition:all .2s;width:100%}.template-button:hover{background-color:var(--white);box-shadow:var(--shadow-md);border-color:var(--slate-100);color:var(--slate-600)}.template-icon{margin-bottom:4px;opacity:.6}.template-name{display:none;font-size:10px;text-align:center;line-height:1.25;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.template-name{display:block}}.ai-tool-group{padding:0 4px;display:flex;flex-direction:column;gap:8px}.ai-button{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--slate-50);background-color:#fdfdfd;color:var(--slate-400);font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.ai-button:hover{background-color:var(--white);color:var(--slate-600)}.ai-button.active{background-color:var(--slate-700);color:var(--white)}@media(min-width:768px){.ai-button{justify-content:flex-start}}.editor-section{flex:1;height:50%;display:flex;flex-direction:column;background-color:var(--white);border-right:1px solid var(--slate-50)}@media(min-width:768px){.editor-section{height:100%}}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--slate-50);background-color:#fffc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:sticky;top:0;z-index:10}.pane-title-group{display:flex;align-items:center;gap:12px}.pane-title{font-weight:500;color:var(--slate-500);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.action-icon-btn{padding:8px;border-radius:8px;border:none;background:transparent;color:var(--slate-400);cursor:pointer;transition:background-color .2s}.action-icon-btn:hover{background-color:var(--bg-app)}.action-icon-btn.delete:hover{background-color:var(--red-50);color:var(--red-200)}.editor-textarea{flex:1;width:100%;padding:32px;color:var(--slate-600);border:none;outline:none;resize:none;font-size:16px;line-height:1.625;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;overflow-y:auto}.editor-textarea::placeholder{color:var(--slate-200)}.preview-section{flex:1;height:50%;display:flex;flex-direction:column;background-color:#fdfbf7}@media(min-width:768px){.preview-section{height:100%}}.copy-btn-primary{display:flex;align-items:center;gap:8px;padding:8px 24px;border-radius:9999px;font-weight:700;font-size:.875rem;border:none;cursor:pointer;box-shadow:var(--shadow-md);transition:all .2s;white-space:nowrap}.copy-btn-primary:active{transform:scale(.95)}.copy-btn-primary.default{background-color:var(--slate-800);color:var(--white)}.copy-btn-primary.default:hover{background-color:var(--slate-900);box-shadow:var(--shadow-lg)}.copy-btn-primary.success{background-color:var(--green-500);color:var(--white);animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.preview-content-area{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}.phone-frame{position:relative;width:100%;max-width:375px;max-height:80vh;min-height:500px;height:720px;background-color:var(--white);border-radius:2.5rem;box-shadow:var(--shadow-2xl);border:6px solid #f0ede5;overflow:hidden;display:flex;flex-direction:column}@media(max-width:767px){.phone-frame{height:70vh;max-height:600px}}.phone-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:112px;height:20px;background-color:#f0ede5;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;z-index:20;display:flex;align-items:center;justify-content:center}.notch-speaker{width:32px;height:4px;background-color:#e0ddd5;border-radius:9999px}.phone-home-indicator{height:20px;width:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.home-bar{width:80px;height:4px;background-color:var(--slate-50);border-radius:9999px}.preview-footer{padding:16px;background-color:var(--white);border-top:1px solid var(--slate-50);display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 -4px 10px #00000005}.copy-btn-large{display:flex;align-items:center;gap:16px;padding:10px 60px;border-radius:9999px;font-weight:700;font-size:1.125rem;border:none;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-lg);white-space:nowrap}.copy-btn-large.default{background-color:var(--slate-900);color:var(--white)}.copy-btn-large.default:hover{background-color:var(--slate-800);transform:translateY(-4px)}.copy-btn-large.success{background-color:var(--green-500);color:var(--white)}.footer-hint{display:flex;flex-direction:column;align-items:center;gap:4px}.hint-text{font-size:10px;color:var(--slate-300);text-transform:uppercase;letter-spacing:.2em;font-weight:500}.hint-link{display:flex;align-items:center;font-size:10px;color:var(--slate-400);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--slate-200);transition:color .2s}.hint-link:hover{color:var(--slate-600)}.chat-drawer{position:fixed;bottom:24px;right:24px;width:320px;height:500px;background-color:var(--white);border-radius:1rem;box-shadow:var(--shadow-2xl);border:1px solid var(--slate-50);display:flex;flex-direction:column;z-index:50;overflow:hidden}@media(min-width:768px){.chat-drawer{width:384px}}.chat-header{padding:16px;background-color:var(--slate-800);color:var(--white);display:flex;align-items:center;justify-content:space-between}.chat-title-group{display:flex;align-items:center;gap:8px}.chat-title{font-weight:500;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase}.chat-close-btn{background:transparent;border:none;color:var(--white);cursor:pointer;padding:4px;border-radius:4px}.chat-close-btn:hover{background-color:var(--slate-700)}.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px;background-color:#fcfbf9}.chat-empty-state{text-align:center;padding:48px 0}.chat-empty-icon{width:40px;height:40px;background-color:var(--slate-50);color:var(--slate-300);border-radius:9999px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.chat-empty-text{font-size:12px;color:var(--slate-400);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.message-wrapper{display:flex}.message-wrapper.user{justify-content:flex-end}.message-wrapper.ai{justify-content:flex-start}.message-bubble{max-width:85%;padding:16px;border-radius:1rem;font-size:.875rem;line-height:1.625}.message-wrapper.user .message-bubble{background-color:var(--slate-800);color:var(--white);border-top-right-radius:0;box-shadow:var(--shadow-md)}.message-wrapper.ai .message-bubble{background-color:var(--white);color:var(--slate-600);border:1px solid var(--slate-50);border-top-left-radius:0;box-shadow:var(--shadow-sm)}.ai-typing{background-color:var(--white);color:var(--slate-400);border:1px solid var(--slate-50);padding:16px;border-radius:1rem;border-top-left-radius:0;font-style:italic;font-size:.75rem;animation:chatPulse 2s infinite}@keyframes chatPulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.chat-footer{padding:16px;border-top:1px solid var(--slate-50);background-color:var(--white)}.chat-input-container{position:relative;display:flex;align-items:center}.chat-input{width:100%;background-color:#faf9f6;border:none;border-radius:9999px;padding:10px 40px 10px 20px;font-size:.75rem;outline:none;transition:box-shadow .2s}.chat-input:focus{box-shadow:inset 0 0 0 1px var(--slate-200)}.chat-send-btn{position:absolute;right:12px;background:transparent;border:none;color:var(--slate-400);cursor:pointer}.chat-send-btn:disabled{color:var(--slate-200);cursor:not-allowed}.chat-send-btn:hover:not(:disabled){color:var(--slate-600)}.wechat-container{position:relative;width:100%;height:100%;background-color:#fdfdfd;border-radius:.5rem;box-shadow:inset 0 2px 4px #0000000d;overflow-y:auto}#wechat-preview-container blockquote{border-left:4px solid #07c160;padding-left:1rem;margin:1rem 0;color:#666;background:#f9f9f9;padding:10px 15px}#wechat-preview-container code{background:#f1f1f1;padding:2px 4px;border-radius:4px;font-family:monospace}#wechat-preview-container img{max-width:100%;border-radius:8px;margin:10px 0}