:root{--md-primary: #1a73e8;--md-on-primary: #ffffff;--md-primary-container: #d3e3fd;--md-on-primary-container: #041e49;--md-secondary: #6750a4;--md-secondary-container: #e8def8;--md-surface: #fefbff;--md-surface-variant: #e7e0ec;--md-on-surface: #1c1b1f;--md-on-surface-variant: #49454f;--md-outline: #79747e;--md-outline-variant: #cac4d0;--md-error: #b3261e;--md-error-container: #f9dedc;--md-shadow: rgba(0,0,0,.08);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 22px;--font-size-xxl: 28px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background:#f0f0f0;color:var(--md-on-surface);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh;min-height:100dvh}input,select,button,textarea{font-family:inherit;font-size:inherit}.top-bar{position:sticky;top:0;z-index:100;background:var(--md-primary);color:var(--md-on-primary);padding:var(--space-sm) var(--space-md);padding-top:calc(var(--safe-top) + var(--space-sm));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000026;min-height:56px}.app-title{font-size:var(--font-size-lg);font-weight:600;letter-spacing:.02em}.install-btn{position:absolute;left:var(--space-md);background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);padding:4px 14px;font-size:var(--font-size-xs);font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s}.install-btn:active{background:rgba(255,255,255,.35)}.install-banner{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg,#e8f0fe,#d3e3fd);border-bottom:1px solid #a8c7fa;color:var(--md-on-primary-container);font-size:var(--font-size-sm);cursor:pointer}.install-banner-text{flex:1}.install-banner-close{width:28px;height:28px;border:none;background:rgba(0,0,0,.08);border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--md-on-primary-container);flex-shrink:0}@media (prefers-color-scheme: dark){.install-banner{background:linear-gradient(135deg,#1a3a5c,#0d2b4a);border-bottom-color:#2a5a8a;color:#cce5ff}.install-banner-close{background:rgba(255,255,255,.1);color:#cce5ff}}.tab-nav{display:flex;background:#fff;border-bottom:1px solid var(--md-outline-variant);position:sticky;top:56px;z-index:99;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tab-nav::-webkit-scrollbar{display:none}.tab-item{flex:1 0 auto;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-sm) var(--space-md);border:none;background:transparent;color:var(--md-on-surface-variant);cursor:pointer;position:relative;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent}.tab-item:active{background:rgba(0,0,0,.05)}.tab-item.active{color:var(--md-primary)}.tab-item.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:3px;background:var(--md-primary);border-radius:3px 3px 0 0}.tab-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.tab-label{font-size:var(--font-size-xs);font-weight:500;white-space:nowrap}.main-content{padding:var(--space-md);padding-bottom:calc(var(--safe-bottom) + 80px);max-width:720px;margin:0 auto}.card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md);box-shadow:0 1px 3px var(--md-shadow)}.card-title{font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--space-md);color:var(--md-on-surface)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.card-header .card-title{margin-bottom:0}.method-tabs{display:flex;gap:var(--space-sm)}.method-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-sm);border:2px solid var(--md-outline-variant);border-radius:var(--radius-md);background:#fff;color:var(--md-on-surface-variant);cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.method-tab:active{transform:scale(.97)}.method-tab.active{border-color:var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container)}.method-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.method-label{font-size:var(--font-size-sm);font-weight:500}.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:var(--space-sm);background:#f8f9fa;border:1px solid var(--md-outline-variant);border-radius:var(--radius-sm) var(--radius-sm) 0 0}.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--md-on-surface-variant);cursor:pointer;font-size:var(--font-size-md);transition:background .15s}.tool-btn:active{background:rgba(0,0,0,.1)}.tool-sep{width:1px;height:20px;background:var(--md-outline-variant);margin:0 2px}.font-size-select{height:28px;border:1px solid var(--md-outline-variant);border-radius:var(--radius-sm);padding:0 4px;font-size:var(--font-size-sm);color:var(--md-on-surface);background:#fff}.editor-area{min-height:200px;max-height:400px;overflow-y:auto;padding:var(--space-md);border:1px solid var(--md-outline-variant);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:var(--font-size-md);line-height:1.8;outline:none;-webkit-user-select:text;user-select:text}.editor-area:focus{border-color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary)}.editor-area img{max-width:100%;height:auto}.upload-zone{border:2px dashed var(--md-outline-variant);border-radius:var(--radius-md);padding:var(--space-xl) var(--space-md);text-align:center;color:var(--md-on-surface-variant);cursor:pointer;transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent}.upload-zone:active{border-color:var(--md-primary);background:var(--md-primary-container)}.upload-zone p{margin-top:var(--space-sm);font-size:var(--font-size-md)}.upload-hint{font-size:var(--font-size-xs)!important;color:var(--md-outline)}.file-info-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:#f8f9fa;border-radius:var(--radius-md)}.file-icon{font-size:28px}.file-details{flex:1;display:flex;flex-direction:column;min-width:0}.file-name{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:var(--font-size-xs);color:var(--md-on-surface-variant)}.photo-preview img{width:100%;border-radius:var(--radius-md);margin-top:var(--space-sm);max-height:300px;object-fit:contain;background:#f0f0f0}.option-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) 0;min-height:44px}.option-row+.option-row{border-top:1px solid #f0f0f0}.option-row label{font-size:var(--font-size-sm);font-weight:500;color:var(--md-on-surface)}.select{padding:var(--space-xs) var(--space-sm);border:1px solid var(--md-outline-variant);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--md-on-surface);background:#fff;min-width:120px;height:36px;outline:none}.select:focus{border-color:var(--md-primary)}.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--md-outline-variant);border-radius:var(--radius-sm);overflow:hidden}.stepper-btn{width:36px;height:36px;border:none;background:#f5f5f5;font-size:var(--font-size-lg);font-weight:500;color:var(--md-on-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.stepper-btn:active{background:#e0e0e0}.stepper-value{width:44px;text-align:center;font-size:var(--font-size-md);font-weight:600;color:var(--md-primary)}.chip-group{display:flex;gap:var(--space-sm)}.chip{padding:var(--space-xs) var(--space-md);border:1px solid var(--md-outline-variant);border-radius:var(--radius-full);background:#fff;font-size:var(--font-size-sm);color:var(--md-on-surface);cursor:pointer;transition:all .2s;height:32px}.chip:active{transform:scale(.95)}.chip.active{background:var(--md-primary-container);border-color:var(--md-primary);color:var(--md-on-primary-container);font-weight:500}.switch{position:relative;width:48px;height:28px;cursor:pointer}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--md-outline-variant);border-radius:28px;transition:background .3s}.switch-slider:before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 3px #0003}.switch input:checked+.switch-slider{background:var(--md-primary)}.switch input:checked+.switch-slider:before{transform:translate(20px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s;height:44px;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn-filled{background:var(--md-primary);color:var(--md-on-primary);box-shadow:0 2px 8px #1a73e84d}.btn-filled:active{box-shadow:0 1px 3px #1a73e84d}.btn-outlined{background:transparent;color:var(--md-primary);border:1px solid var(--md-outline)}.btn-text{background:transparent;color:var(--md-primary);border:none;font-size:var(--font-size-sm);font-weight:500;padding:var(--space-xs) var(--space-sm);cursor:pointer;height:auto}.btn-small{font-size:var(--font-size-xs);padding:2px 8px}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:50%;color:var(--md-on-surface-variant);cursor:pointer;font-size:var(--font-size-lg);transition:background .15s}.icon-btn:active{background:rgba(0,0,0,.08)}.empty-state{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--md-on-surface-variant)}.empty-state svg{margin-bottom:var(--space-md);color:var(--md-outline)}.empty-state p{font-size:var(--font-size-md)}.empty-hint{font-size:var(--font-size-xs)!important;color:var(--md-outline);margin-top:var(--space-xs)}.job-list{display:flex;flex-direction:column}.job-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0}.job-item+.job-item{border-top:1px solid #f0f0f0}.job-info{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}.job-icon{font-size:24px;flex-shrink:0}.job-details{display:flex;flex-direction:column;min-width:0}.job-name{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-meta{font-size:var(--font-size-xs);color:var(--md-on-surface-variant)}.job-time{font-size:var(--font-size-xs);color:var(--md-outline)}.job-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.status-badge{font-size:var(--font-size-xs);padding:2px 8px;border-radius:var(--radius-full);font-weight:500}.status-queued{background:#fff3e0;color:#e65100}.status-done{background:#e8f5e9;color:#2e7d32}.status-cancelled{background:#fce4ec;color:#c62828}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:200;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background:#fff;border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:720px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:slideUp .3s ease-out;padding-bottom:var(--safe-bottom)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-bottom:1px solid #f0f0f0}.modal-header h2{font-size:var(--font-size-lg);font-weight:600}.modal-body{flex:1;overflow-y:auto;padding:var(--space-md);-webkit-overflow-scrolling:touch}.preview-html{font-size:var(--font-size-md);line-height:1.8}.preview-html img{max-width:100%;height:auto}.preview-image{text-align:center}.preview-image img{max-width:100%;max-height:50vh;object-fit:contain;border-radius:var(--radius-sm)}.preview-text pre{font-size:var(--font-size-sm);line-height:1.6;white-space:pre-wrap;word-break:break-word;font-family:Courier New,monospace}.modal-footer{padding:var(--space-md);border-top:1px solid #f0f0f0;display:flex;flex-direction:column;gap:var(--space-sm)}.preview-info{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:var(--font-size-xs);color:var(--md-on-surface-variant)}.modal-footer .btn{width:100%}.about-info{display:flex;flex-direction:column}.about-row{display:flex;justify-content:space-between;padding:var(--space-sm) 0;font-size:var(--font-size-sm)}.about-row+.about-row{border-top:1px solid #f0f0f0}.about-row span:first-child{color:var(--md-on-surface-variant)}.about-row span:last-child{font-weight:500}.snackbar{position:fixed;bottom:80px;left:50%;transform:translate(-50%);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;color:#fff;z-index:300;box-shadow:0 4px 12px #00000040;white-space:nowrap}.snackbar.info{background:#333}.snackbar.success{background:#2e7d32}.snackbar.error{background:#c62828}.snackbar-enter-active{animation:snackIn .3s ease-out}.snackbar-leave-active{animation:snackOut .3s ease-in}@keyframes snackIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes snackOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}@media (min-width: 768px){.main-content{padding:var(--space-lg)}.modal-container{border-radius:var(--radius-xl);margin-bottom:var(--space-lg);max-height:85vh}}@media (min-width: 1024px) and (max-width: 1366px){.main-content{padding:var(--space-lg) var(--space-xl)}.card{padding:var(--space-lg);border-radius:var(--radius-xl)}.editor-area{min-height:280px;font-size:var(--font-size-lg)}.method-tab{padding:var(--space-lg) var(--space-md)}}@media (orientation: landscape){.method-tabs{gap:var(--space-md)}.method-tab{padding:var(--space-md)}}@media (prefers-color-scheme: dark){:root{--md-surface: #1c1b1f;--md-surface-variant: #2d2d30;--md-on-surface: #e6e1e5;--md-on-surface-variant: #cac4d0;--md-outline: #938f99;--md-outline-variant: #49454f;--md-primary-container: #004a77;--md-on-primary-container: #cce5ff;--md-shadow: rgba(0,0,0,.3)}body{background:#121212}.card,.tab-nav{background:var(--md-surface)}.editor-toolbar{background:var(--md-surface-variant)}.upload-zone{background:var(--md-surface)}.file-info-card,.stepper-btn{background:var(--md-surface-variant)}.chip{background:var(--md-surface)}.select,.font-size-select{background:var(--md-surface);color:var(--md-on-surface)}.option-row+.option-row{border-color:#333}.job-item+.job-item{border-color:#333}.modal-header,.modal-footer{border-color:#333}.about-row+.about-row{border-color:#333}.photo-preview img{background:var(--md-surface-variant)}}