@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root{--color-html:#b21010;--color-css:#3b82f6;--color-js:#f59e0b;--nav-height:72px;--footer-height:56px;--max-width:860px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:9999px;--ease-smooth:cubic-bezier(0.2, 0.8, 0.2, 1);--transition-smooth:all 0.5s var(--ease-smooth);--transition-fast:all 0.2s var(--ease-smooth);--active-accent:var(--color-html);--active-glow:rgba(239, 68, 68, 0.4);--active-btn-text:#ffffff}body.light-mode{--bg-body:#f4f4f5;--bg-nav:#ffffff;--bg-surface:#ffffff;--text-primary:#18181b;--text-secondary:#444444;--border-soft:#e4e4e7;--shadow-nav:0 4px 20px -10px rgba(0, 0, 0, 0.08);--shadow-panel:0 10px 40px -10px rgba(0, 0, 0, 0.08);--input-bg:#f8fafc}body.dark-mode{--bg-body:#000000;--bg-nav:#18181b;--bg-surface:#18181b;--text-primary:#fafafa;--text-secondary:#a1a1aa;--border-soft:#27272a;--shadow-nav:0 4px 20px -10px rgba(0, 0, 0, 0.5);--shadow-panel:0 10px 40px -10px rgba(0, 0, 0, 0.6);--input-bg:#09090b}*{box-sizing:border-box;margin:0;padding:0}.nav-btn:hover,body{color:var(--text-primary)}.system-warning-overlay,body{background-color:var(--bg-body);display:flex;flex-direction:column}body{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;height:100vh;height:100dvh;overflow:hidden;transition:background-color var(--transition-smooth),color var(--transition-smooth)}button,input,textarea{font-family:inherit;outline:0;border:0}.system-warning-overlay{position:fixed;top:0;left:0;right:0;bottom:0;color:var(--text-primary);z-index:999999;align-items:center;justify-content:center;text-align:center;padding:24px}.warning-title{margin-bottom:12px;color:var(--color-html);font-size:1.5rem;font-weight:700}.warning-desc{color:var(--text-secondary);line-height:1.6;max-width:400px}#screen-warning,body.dark-mode .icon-moon,body.light-mode .icon-sun{display:none}@media (max-width:319px){body>:not(#screen-warning){display:none!important}#screen-warning{display:flex}}.text-accent-html{color:var(--color-html)}.text-accent-css{color:var(--color-css)}.text-accent-js{color:var(--color-js)}.nav-left,.nav-right,.top-nav{display:flex;align-items:center}.top-nav{height:var(--nav-height);justify-content:space-between;padding:0 24px;background-color:var(--bg-nav);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-nav);z-index:10}.nav-left,.nav-right{width:140px}.nav-right{justify-content:flex-end}.nav-center{flex-grow:1;display:flex;justify-content:center}.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.25rem}.nav-links{display:flex;gap:4px;background-color:var(--bg-body);padding:4px;border-radius:var(--radius-pill);border:1px solid var(--border-soft)}.nav-btn,.theme-toggle{background:0 0;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;transition:var(--transition-fast)}.nav-btn{gap:6px;padding:8px 20px;font-weight:500;font-size:.9rem;border-radius:var(--radius-pill)}.nav-btn:hover{background-color:var(--bg-surface)}.nav-btn.active{background-color:var(--text-primary);color:var(--bg-surface)}.theme-toggle{width:40px;height:40px;border-radius:50%;justify-content:center}.theme-toggle:hover{color:var(--text-primary);background-color:var(--bg-body);transform:rotate(15deg)}.app-content{flex-grow:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:40px 24px}.tool-section{max-width:var(--max-width);margin:0 auto;background-color:var(--bg-surface);border-radius:var(--radius-lg);padding:48px;box-shadow:var(--shadow-panel);border:1px solid var(--border-soft);transition:var(--transition-smooth)}.tool-section.html-active{--active-accent:var(--color-html);--active-glow:rgba(239, 68, 68, 0.4);--active-btn-text:#ffffff}.tool-section.css-active{--active-accent:var(--color-css);--active-glow:rgba(59, 130, 246, 0.4);--active-btn-text:#ffffff}.tool-section.js-active{--active-accent:var(--color-js);--active-glow:rgba(245, 158, 11, 0.4);--active-btn-text:#000000}.tab-content{display:none;opacity:0;filter:blur(4px);transition:var(--transition-fast)}.tab-content.active{display:block;opacity:1;filter:blur(0)}.section-header{margin-bottom:32px}.section-title{font-size:1.5rem;font-weight:700;margin-bottom:8px}.section-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.mode-btn,.mode-switcher{border-radius:var(--radius-pill)}.mode-switcher{display:inline-flex;gap:4px;margin-bottom:24px;background-color:var(--input-bg);padding:4px;border:1px solid var(--border-soft)}.mode-btn{padding:8px 16px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:0 0;transition:var(--transition-fast)}.mode-btn.active{background-color:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-nav)}.mode-panel{display:none}.mode-panel.active{display:block;animation:fadeUp .3s forwards}.workspace-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}.workspace-tabs{display:flex;gap:8px}.btn-copy,.ws-btn{font-weight:600;cursor:pointer;transition:var(--transition-fast)}.ws-btn{padding:8px 16px;font-size:.85rem;background:0 0;color:var(--text-secondary);border-bottom:2px solid transparent}.ws-btn.active{color:var(--active-accent);border-bottom-color:var(--active-accent)}.btn-copy{padding:6px 16px;font-size:.8rem;border-radius:var(--radius-pill);background-color:var(--input-bg);color:var(--text-primary)}.btn-copy:hover{background-color:var(--border-soft)}.btn-copy.hidden,.ws-panel{display:none}.ws-panel{width:100%;height:240px;resize:vertical;background-color:var(--input-bg);color:var(--text-primary);padding:16px;border-radius:var(--radius-md);font-family:ui-monospace,monospace;font-size:.9rem;line-height:1.6;border:1px solid transparent;transition:var(--transition-fast)}.ws-panel.active{display:block}.ws-panel:focus{background-color:var(--bg-surface);border-color:var(--active-accent);box-shadow:0 0 0 4px var(--active-glow)}.file-upload-wrapper{position:relative;border:1px dashed var(--border-soft);border-radius:var(--radius-md);padding:32px 20px;text-align:center;background-color:var(--input-bg);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);overflow:hidden}.file-upload-wrapper:hover{border-color:var(--active-accent);color:var(--active-accent);background-color:var(--bg-surface)}.file-upload-wrapper svg{display:block;margin:0 auto 8px;width:28px;height:28px}.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-item,.file-list{display:flex;flex-direction:column}.file-list{margin-top:16px;gap:8px}.file-item{background-color:var(--input-bg);border-radius:var(--radius-md);padding:16px;border:1px solid var(--border-soft);gap:12px}.file-info{display:flex;justify-content:space-between;align-items:center}.file-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}.file-actions{display:flex;gap:8px}.btn-file-dl{padding:6px 12px;font-size:.75rem;font-weight:600;border-radius:var(--radius-pill);cursor:pointer;background-color:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-soft);transition:var(--transition-fast)}.btn-file-dl:hover:not(:disabled){border-color:var(--active-accent);color:var(--active-accent)}.btn-file-dl:disabled{opacity:.4;cursor:not-allowed}.file-progress-bg{height:4px;background-color:var(--border-soft);border-radius:2px;overflow:hidden;width:100%}.file-progress-bar{height:100%;width:0%;background-color:var(--active-accent);transition:width .3s var(--ease-smooth)}.btn-download-all{margin-top:16px;padding:12px;font-size:.9rem;width:100%;border-radius:var(--radius-md);background-color:var(--input-bg);color:var(--text-primary);font-weight:600;cursor:pointer;border:1px solid var(--border-soft);transition:var(--transition-fast)}.btn-download-all:hover{background-color:var(--bg-surface);border-color:var(--active-accent);color:var(--active-accent)}.btn-download-all.hidden{display:none}.input-group{margin-bottom:24px}.input-label{display:block;margin-bottom:8px;font-weight:600;font-size:.9rem}.pattern-input{width:100%;background-color:var(--input-bg);color:var(--text-primary);padding:16px;border-radius:var(--radius-md);font-family:ui-monospace,monospace;font-size:.9rem;border:1px solid transparent;transition:var(--transition-fast)}.pattern-input:focus{background-color:var(--bg-surface);border-color:var(--active-accent);box-shadow:0 0 0 4px var(--active-glow)}.export-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--border-soft)}.action-btn,.dialog-actions button{cursor:pointer;transition:var(--transition-fast)}.action-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background-color:var(--active-accent);color:var(--active-btn-text);padding:16px;border-radius:var(--radius-md);font-weight:600;font-size:1rem}.action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--active-glow);filter:brightness(1.05)}.action-btn:active{transform:translateY(1px);box-shadow:0 2px 8px var(--active-glow);filter:brightness(.95)}.seo-article{max-width:var(--max-width);margin:48px auto 0;padding:0 24px}.dialog-box h3,.seo-article h1{font-size:1.25rem;font-weight:700;margin-bottom:12px}.seo-article p,.seo-article ul{color:var(--text-secondary);line-height:1.7;font-size:.95rem;margin-bottom:16px}.seo-article ul{padding-left:20px}.author-block strong,.seo-article strong{color:var(--text-primary)}.author-block a,.seo-article a{color:var(--color-css);text-decoration:none;transition:var(--transition-fast)}.author-block a:hover,.seo-article a:hover{color:var(--color-html);text-decoration:underline}.author-block{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-soft);font-size:.9rem;line-height:1.8}.author-block strong{font-weight:600}.author-block,.bottom-nav,.dialog-box p{color:var(--text-secondary)}.bottom-nav{height:var(--footer-height);display:flex;align-items:center;justify-content:center;font-size:.85rem;background-color:var(--bg-nav);border-top:1px solid var(--border-soft);z-index:10}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:99999;pointer-events:none}.dialog-overlay,.toast-msg{display:flex;align-items:center}.toast-msg{background-color:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-soft);box-shadow:var(--shadow-panel);padding:16px 20px;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;gap:10px;animation:slideInRight .3s forwards;pointer-events:auto}.toast-msg.success{border-left:4px solid #10b981}.toast-msg.info{border-left:4px solid var(--color-css)}.toast-msg.fade-out{animation:fadeOutRight .4s forwards}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);backdrop-filter:blur(6px);justify-content:center;z-index:9999;opacity:1;transition:opacity .3s}.dialog-overlay.hidden{opacity:0;pointer-events:none}.dialog-box{background-color:var(--bg-surface);color:var(--text-primary);width:90%;max-width:420px;padding:32px;border-radius:var(--radius-lg);border:1px solid var(--border-soft);box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transform:scale(1);transition:var(--transition-smooth)}.dialog-overlay.hidden .dialog-box{transform:scale(.95)}.dialog-box h3{margin-bottom:8px}.dialog-box p{line-height:1.6;margin-bottom:24px;font-size:.95rem}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{padding:10px 20px;border-radius:var(--radius-pill);font-weight:500;font-size:.9rem}.btn-primary{background-color:var(--text-primary);color:var(--bg-surface)}.btn-primary:hover{opacity:.8}.btn-ghost{background-color:transparent;color:var(--text-primary)}.btn-ghost:hover{background-color:var(--bg-body)}.btn-ghost.hidden{display:none}.global-loader{flex-direction:column;gap:16px;color:#fff}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--active-accent);border-radius:50%;animation:spin 1s linear infinite}.loader-text{font-weight:600;font-size:1rem;letter-spacing:.5px}@media (max-width:600px){.app-content{padding:24px 16px}.tool-section{padding:24px}.nav-left,.nav-right{width:auto}.logo span,.nav-btn span{display:none}.nav-btn{padding:8px}.top-nav{padding:0 16px}}