:root{--color-primary: #e4572e;--color-primary-dark: #c43d1a;--color-primary-light: #fae3da;--color-primary-bg: #fdf4ee;--color-success: #178a50;--color-success-bg: #e9f2e4;--color-success-border: #cfe3c6;--color-error: #d94b30;--color-error-light: #e4572e;--color-error-bg: #fceae4;--color-warning: #b07818;--color-warning-bg: #f8eed7;--color-text: #201a15;--color-text-secondary: #5c554b;--color-text-muted: #8d857a;--color-bg: #faf7f0;--color-bg-alt: #f1ebdf;--color-bg-white: #fffdf8;--color-border: #d9d2c3;--color-border-light: #e7e0d1;--color-border-lighter: #efe9db;--gradient-primary: linear-gradient(135deg, #e4572e 0%, #c43d1a 100%);--gradient-page-bg: linear-gradient(#f6f1e7, #f6f1e7);--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.25rem;--space-2xl: 1.5rem;--space-3xl: 2rem;--page-padding: 20px;--container-max-width: 1200px;--container-wide-max-width: 1400px;--container-padding: 2rem;--container-padding-mobile: 1.5rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--shadow-sm: 0 2px 4px rgba(32, 26, 21, .05);--shadow-md: 0 4px 12px rgba(32, 26, 21, .08);--shadow-lg: 0 10px 32px rgba(32, 26, 21, .12);--shadow-xl: 0 20px 60px rgba(32, 26, 21, .16);--shadow-primary: 0 4px 14px rgba(228, 87, 46, .32);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--font-display: "Fraunces", "Georgia", "Songti SC", "Noto Serif SC", serif;--font-mono-ui: "IBM Plex Mono", "SF Mono", "Menlo", monospace;--font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.75rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .2s ease;--transition-base: .3s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-family:var(--font-family);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page-wrapper{min-height:100vh;background-color:#f6f1e7;background-image:radial-gradient(rgba(32,26,21,.1) .9px,transparent .9px);background-size:26px 26px;padding:var(--page-padding);position:relative}.page-wrapper:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.page-container{max-width:var(--container-max-width);margin:0 auto;background:var(--color-bg-white);border:1px solid var(--color-border-light);border-radius:var(--radius-xl);padding:var(--container-padding);box-shadow:var(--shadow-lg);position:relative;z-index:2}.page-container.wide{max-width:var(--container-wide-max-width)}.page-wrapper.full-height{height:100vh;overflow:hidden}.page-container.full-height{height:100%;display:flex;flex-direction:column;overflow:hidden}.page-title{margin:0 0 var(--space-2xl);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;color:var(--color-text)}.upload-section{margin-bottom:var(--space-3xl)}.upload-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;border:3px dashed var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);background:var(--color-bg);text-align:center}.upload-icon{font-size:48px;margin-bottom:var(--space-md)}.upload-button>span:nth-child(2){font-size:var(--text-lg);color:var(--color-text);font-weight:var(--font-weight-medium);margin-bottom:var(--space-sm)}.upload-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.upload-button.colored{border-color:var(--color-primary);background:var(--color-primary-bg);color:var(--color-primary)}.upload-button.colored:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 8px 25px #e4572e4d}.upload-button.colored .upload-icon{font-size:3rem;margin-bottom:var(--space-lg)}.upload-button.colored .upload-hint{margin-top:var(--space-sm);opacity:.7}.error-message{padding:var(--space-lg);background:var(--color-error-bg);border:1px solid rgba(217,75,48,.3);border-radius:var(--radius-md);color:var(--color-error);margin-bottom:var(--page-padding);text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;gap:var(--space-sm)}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-primary)}.btn-secondary{background:var(--color-bg-alt);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:var(--color-border-lighter)}.btn-danger{background:var(--color-error-light);color:#fff}.btn-danger:hover:not(:disabled){background:#ee5a5a}.btn-sm{padding:8px 16px;font-size:var(--text-sm)}.btn-lg{padding:16px 32px;font-size:var(--text-lg)}.btn-block{width:100%}.action-buttons{display:flex;gap:var(--space-md);flex-shrink:0;padding-top:var(--space-lg);border-top:1px solid var(--color-border-light)}.control-group{margin-bottom:var(--space-lg)}.control-label{display:block;margin-bottom:6px;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);font-size:var(--text-sm)}.control-input{width:100%;padding:10px 12px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:inherit;transition:border-color var(--transition-base)}.control-range{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:3px;outline:none;cursor:pointer}.control-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast);box-shadow:0 2px 4px #00000026}.control-select{width:100%;padding:10px 12px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--color-bg-white);cursor:pointer;font-family:inherit;transition:border-color var(--transition-base)}.control-select:focus{outline:none;border-color:var(--color-primary)}.color-picker-wrapper{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.control-color{width:44px;height:32px;border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:2px}.color-value{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-secondary)}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.section-title{margin:0 0 var(--space-lg);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);color:var(--color-text)}.settings-card{background:var(--color-primary-bg);padding:var(--space-2xl);border-radius:var(--radius-lg)}.settings-section{background:var(--color-bg);padding:var(--space-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border-light)}.progress-container{background:var(--color-bg-alt);padding:var(--page-padding);border-radius:var(--radius-lg);margin-bottom:var(--page-padding)}.progress-bar{height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin-bottom:var(--space-md)}.progress-text{text-align:center;color:var(--color-text-secondary);font-size:var(--text-sm);margin:0}.info-section{margin-top:var(--space-3xl);padding:var(--space-2xl);background:var(--color-primary-bg);border-radius:var(--radius-lg)}.info-title{color:var(--color-text);font-size:var(--text-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-lg)}.info-list{list-style:none;padding:0;margin:0 0 var(--page-padding)}.info-list li{padding:10px 0 10px 24px;position:relative;color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.6}.backend-status{padding:var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm)}.backend-status.success{background:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success)}.result-summary{background:var(--color-bg);padding:var(--page-padding);border-radius:var(--radius-lg);margin-bottom:var(--page-padding)}.summary-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border-light)}.summary-label{font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.summary-value{font-weight:var(--font-weight-semibold);color:var(--color-text)}.info-badge{display:flex;align-items:center;gap:var(--space-sm);padding:8px 16px;background:var(--color-primary-light);border-radius:var(--radius-md);font-size:var(--text-sm)}.info-badge .info-label{color:var(--color-text-secondary)}.info-badge .info-value{font-weight:var(--font-weight-semibold);color:var(--color-text)}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}.preset-btn{padding:8px 16px;border:2px solid var(--color-border);background:var(--color-bg-white);border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-medium);font-size:var(--text-sm);transition:all var(--transition-base)}.preset-btn:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #e4572e40}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--page-padding)}.tool-card{background:var(--color-bg-white);border:1px solid var(--color-border-light);border-radius:14px;padding:var(--space-2xl);text-decoration:none;color:inherit;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.tool-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #201a151f;border-color:var(--color-primary)}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base)}.tool-card:hover:before{opacity:1}.tool-icon{width:70px;height:70px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-lg)}.tool-icon .icon{font-size:2.2rem}.tool-icon .icon-svg{display:flex;align-items:center;justify-content:center}.tool-icon .icon-svg svg{width:30px;height:30px;display:block}.tool-name{font-family:var(--font-display);font-size:1.35rem;font-weight:var(--font-weight-semibold);letter-spacing:-.01em;color:var(--color-text);margin-bottom:var(--space-sm)}.tool-description{color:var(--color-text-secondary);line-height:1.5;font-size:.9rem}.tool-arrow{position:absolute;right:var(--page-padding);bottom:var(--page-padding);font-size:1.3rem;color:var(--color-primary);font-weight:700;opacity:0;transition:all var(--transition-base);transform:translate(-10px)}.tool-card:hover .tool-arrow{opacity:1;transform:translate(0)}@media (max-width: 768px){.page-wrapper{padding:10px}.page-container{padding:var(--container-padding-mobile);border-radius:var(--radius-lg)}.page-title{font-size:var(--text-xl)}.upload-button{padding:40px 24px}.tools-grid{grid-template-columns:1fr}.tool-card{padding:var(--page-padding)}.action-buttons{flex-direction:column}.action-buttons .btn{width:100%}}.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;transition:opacity .2s ease}.logo:hover{opacity:.85}.logo-mark{display:block;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(32,26,21,.18))}.logo-compact{gap:6px}.logo-compact .logo-mark{height:54px;width:auto;margin:-13px 0}.logo-text{font-weight:700;color:var(--color-text);letter-spacing:-.02em;line-height:1}.logo-text-sm{font-size:16px}.logo-text-lg{font-size:28px;color:var(--color-primary)}.logo-full{flex-direction:column;gap:12px}.logo-full .logo-mark{filter:drop-shadow(0 4px 12px rgba(32,26,21,.22))}.home{--paper: #f6f1e7;--paper-card: #fffdf8;--ink: #201a15;--ink-70: rgba(32, 26, 21, .7);--ink-55: rgba(32, 26, 21, .55);--ink-40: rgba(32, 26, 21, .4);--ink-16: rgba(32, 26, 21, .16);--ink-12: rgba(32, 26, 21, .12);--vermillion: #e4572e;--vermillion-deep: #c43d1a;--font-display: "Fraunces", "Georgia", "Songti SC", "Noto Serif SC", serif;--font-mono-ui: "IBM Plex Mono", "SF Mono", "Menlo", monospace;min-height:100vh;padding:28px 24px 44px;background-color:var(--paper);background-image:radial-gradient(var(--ink-12) .9px,transparent .9px);background-size:26px 26px;color:var(--ink);position:relative}.home:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.home-container{max-width:1120px;margin:0 auto;position:relative;z-index:2}.reveal{animation:ht-rise .7s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d, 0ms)}@keyframes ht-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.reveal{animation:none}.ht-badge-ring{animation:none!important}}.ht-sr-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ht-topbar{display:flex;align-items:center;gap:12px;padding-right:190px}.ht-topbar .logo-compact .logo-mark{height:34px;width:auto;margin:0;filter:none}.ht-wordmark{font-family:var(--font-display);font-size:19px;font-weight:640;letter-spacing:-.01em;white-space:nowrap}.ht-topbar-meta{margin-left:auto;font-family:var(--font-mono-ui);font-size:10px;letter-spacing:.22em;color:var(--ink-40);white-space:nowrap}.ht-hero{position:relative;padding:72px 0 58px}.ht-hero:before,.ht-hero:after{content:"";position:absolute;width:18px;height:18px;border:0 solid var(--ink-40)}.ht-hero:before{top:34px;left:-4px;border-top-width:1.5px;border-left-width:1.5px}.ht-hero:after{bottom:10px;right:-4px;border-bottom-width:1.5px;border-right-width:1.5px}.ht-kicker{display:flex;align-items:center;gap:12px;font-family:var(--font-mono-ui);font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--vermillion-deep)}.ht-kicker:before{content:"";width:30px;height:1.5px;background:var(--vermillion)}.ht-headline{margin-top:20px;max-width:680px;font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.3rem);font-weight:560;line-height:1.14;letter-spacing:-.012em}.ht-note{margin-top:20px;max-width:560px;font-size:13.5px;line-height:1.7;color:var(--ink-55)}.ht-badge{position:absolute;top:44px;right:0;width:128px;height:128px;border-radius:50%;background:var(--paper-card);border:1px solid var(--ink-16);box-shadow:0 6px 24px #201a1514;display:flex;align-items:center;justify-content:center}.ht-badge-ring{position:absolute;top:0;right:0;bottom:0;left:0;animation:ht-spin 26s linear infinite}.ht-badge-ring text{font-family:var(--font-mono-ui);font-size:9.5px;font-weight:600;letter-spacing:.2em;fill:var(--vermillion-deep)}.ht-badge-lock{width:24px;height:24px;color:var(--ink)}@keyframes ht-spin{to{transform:rotate(360deg)}}.ht-index-head{display:flex;align-items:center;gap:16px;margin:44px 0 20px}.ht-index-label{font-family:var(--font-mono-ui);font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--ink-70)}.ht-index-line{flex:1;height:1px;background:var(--ink-16)}.ht-index-count{font-family:var(--font-mono-ui);font-size:11px;letter-spacing:.18em;color:var(--ink-40)}.ht-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.ht-card{position:relative;background:var(--paper-card);border:1px solid var(--ink-16);border-radius:14px;padding:26px 26px 20px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.ht-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent, var(--vermillion));opacity:.045;transform:scaleY(0);transform-origin:top;transition:transform .3s ease;pointer-events:none}.ht-card:hover{transform:translateY(-4px);border-color:var(--accent, var(--vermillion));box-shadow:0 16px 36px #201a151a}.ht-card:hover:before{transform:scaleY(1)}.ht-card-link{display:block;text-decoration:none;color:inherit}.ht-card-num{position:absolute;top:24px;right:24px;font-family:var(--font-mono-ui);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-40);transition:color .25s ease}.ht-card:hover .ht-card-num{color:var(--accent, var(--vermillion))}.ht-card-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--ink-16);border-radius:11px;color:var(--ink);background:transparent;transition:background .25s ease,color .25s ease,border-color .25s ease}.ht-card-icon svg{width:22px;height:22px}.ht-card:hover .ht-card-icon{background:var(--accent, var(--vermillion));border-color:var(--accent, var(--vermillion));color:var(--paper-card)}.ht-card-name{margin-top:18px;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}.ht-card-desc{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--ink-55);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ht-card-cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-mono-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--accent, var(--vermillion))}.ht-card-cta svg{width:13px;height:13px;transition:transform .25s ease}.ht-card:hover .ht-card-cta svg{transform:translate(4px)}.ht-subtools{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:15px;border-top:1px dashed var(--ink-16)}.ht-chip{padding:5px 11px;border:1px solid var(--ink-16);border-radius:999px;font-family:var(--font-mono-ui);font-size:11px;color:var(--ink-70);text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}.ht-chip:hover{background:var(--accent, var(--vermillion));border-color:var(--accent, var(--vermillion));color:var(--paper-card);transform:translateY(-1px)}.ht-card-soon{background:transparent;border:1.5px dashed var(--ink-16)}.ht-card-soon:hover{transform:none;border-color:var(--ink-16);box-shadow:none}.ht-card-soon:hover:before{transform:scaleY(0)}.ht-card-soon .ht-card-icon,.ht-card-soon .ht-card-name,.ht-card-soon .ht-card-desc,.ht-card-soon .ht-card-num{opacity:.75}.ht-footer{display:flex;align-items:center;gap:12px;margin-top:56px;padding-top:20px;border-top:1px solid var(--ink-16);font-family:var(--font-mono-ui);font-size:10.5px;letter-spacing:.18em;color:var(--ink-55)}.ht-footer-sep{color:var(--vermillion)}@media (max-width: 960px){.ht-grid{grid-template-columns:1fr}.ht-badge{width:108px;height:108px;top:36px}.ht-badge-lock{width:20px;height:20px}}@media (max-width: 640px){.home{padding:20px 16px 32px}.ht-topbar{padding-right:0}.ht-topbar-meta{display:none}.ht-hero{padding:44px 0}.ht-hero:before,.ht-hero:after{display:none}.ht-headline{max-width:calc(100% - 96px)}.ht-badge{width:92px;height:92px;top:30px}.ht-badge-ring text{font-size:8.5px}.ht-card{padding:22px 20px 18px}.ht-card-name{font-size:21px}.ht-footer{flex-direction:column;align-items:flex-start;gap:6px;margin-top:44px}}.tool-nav{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--color-border-light);flex-wrap:wrap}.tool-nav-separator{width:1px;height:24px;background:var(--color-border);flex-shrink:0}.tool-nav-category{font-weight:700;font-size:15px;color:var(--color-primary);text-decoration:none;padding:4px 10px;border-radius:6px;transition:all .2s;flex-shrink:0}.tool-nav-category:hover{background:var(--color-primary-light)}.tool-nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}.tool-nav-link{padding:5px 12px;border-radius:6px;font-size:13px;color:var(--color-text-secondary);text-decoration:none;transition:all .2s;white-space:nowrap}.tool-nav-link:hover{background:var(--color-primary-light);color:var(--color-primary)}.tool-nav-link.active{background:var(--color-primary);color:var(--color-bg-white)}@media (max-width: 768px){.tool-nav{gap:8px;padding-bottom:10px;margin-bottom:12px}.tool-nav-separator{display:none}.tool-nav-links{width:100%;margin-left:0;order:10;gap:4px}.tool-nav-link{font-size:12px;padding:4px 8px}}.left-panel{display:flex;flex-direction:column}.right-panel{display:flex;flex-direction:column;position:sticky;top:1rem;align-self:start}.image-list{background:var(--color-primary-bg);border-radius:12px;padding:1.5rem;min-height:500px;max-height:70vh;display:flex;flex-direction:column;border:3px dashed transparent;transition:all .3s ease;position:relative}.image-list:hover{border-color:var(--color-primary)}.empty-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;cursor:pointer;transition:all .3s ease;color:var(--color-primary);min-height:400px;flex:1;border-radius:8px;background:#fff}.image-items{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.75rem;scrollbar-width:none;-ms-overflow-style:none}.image-items::-webkit-scrollbar{display:none}.image-item{display:flex;align-items:center;gap:1rem;background:#fff;padding:.75rem;border-radius:8px;box-shadow:0 2px 4px #0000000d;transition:all .3s ease}.image-item:hover{box-shadow:0 4px 8px #0000001a;transform:translate(4px)}.thumbnail{width:60px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0}.image-info{flex:1;min-width:0}.image-name{font-weight:600;color:#333;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-sizes{display:flex;align-items:center;gap:.5rem;font-size:.875rem;flex-wrap:wrap}.settings-card{background:var(--color-primary-bg);padding:1.5rem;border-radius:12px;max-height:calc(100vh - 18rem);min-height:0;display:flex;flex-direction:column}.settings-card-title{color:#333;margin-bottom:1.5rem;font-size:1.25rem;flex-shrink:0}.settings-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent;padding-right:4px}.settings-body::-webkit-scrollbar{width:6px}.settings-body::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:3px}.settings-body::-webkit-scrollbar-track{background:transparent}.settings-card h3{color:#333;margin-bottom:1.5rem;font-size:1.25rem;flex-shrink:0}.control-group{margin-bottom:1.5rem}.control-label{display:block;margin-bottom:.75rem;color:#333;font-weight:600}.compression-slider{width:100%;height:8px;border-radius:4px;background:#ddd;outline:none;-webkit-appearance:none;cursor:pointer}.compression-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 2px 6px #0003;transition:all .2s ease}.compression-slider::-webkit-slider-thumb:hover{transform:scale(1.1);background:#5568d3}.compression-slider:disabled{opacity:.5;cursor:not-allowed}.slider-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.875rem;color:#666}.preset-buttons{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.btn-preset{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-preset:hover:not(:disabled){background:var(--color-primary);color:#fff;transform:translateY(-2px)}.btn-preset.active{background:var(--color-primary);color:#fff}.btn-preset:disabled{opacity:.5;cursor:not-allowed}.btn-compress{margin-top:1rem;font-size:1.1rem;padding:1.25rem 2rem;flex-shrink:0;display:flex;width:100%}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}.right-panel{order:-1}.settings-card{position:static}}@media (max-width: 768px){.stats-row{gap:.75rem}.stat-box{flex:1;min-width:auto;padding:.75rem 1rem}.stat-value{font-size:1.25rem}.btn-download{width:100%;margin-top:1rem}.image-item{flex-wrap:wrap}.image-info{width:calc(100% - 80px)}.btn-remove{position:absolute;top:.5rem;right:.5rem}}.main-content{display:grid;grid-template-columns:1.5fr 300px;gap:24px;height:calc(100vh - 190px);min-height:500px;overflow:hidden}.image-preview-area{display:flex;flex-direction:column;gap:12px;overflow:hidden}.image-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f5f5f5;border-radius:8px;flex-shrink:0;gap:12px;flex-wrap:wrap}.header-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}.header-title-row h3{margin:0;font-size:16px;color:#333;white-space:nowrap}.header-info{display:flex;align-items:center;gap:10px;font-size:13px;color:#888}.info-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:500;color:#555}.info-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);flex-shrink:0}.info-separator{color:#ddd;font-size:14px}.header-actions{display:flex;align-items:center;gap:12px}.zoom-controls{display:flex;align-items:center;gap:4px;background:#fff;border-radius:6px;padding:2px;border:1px solid #e0e0e0}.zoom-btn{width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:16px;font-weight:600;color:#555;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1}.btn-reupload{padding:8px 16px;background:#ff6b6b;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;white-space:nowrap}.btn-reupload:hover{background:#ee5a5a}.image-container{flex:1;display:flex;align-items:center;justify-content:center;background:#f0f0f0;border-radius:12px;overflow:hidden;position:relative;cursor:default;border:2px dashed transparent;transition:border-color .2s,background .2s}.image-container.drag-over{border-color:var(--color-primary);background:var(--color-primary-light)}.image-container.panning{cursor:grab}.image-container.panning:active{cursor:grabbing}.image-wrapper{position:relative;display:inline-block;line-height:0;-webkit-user-select:none;user-select:none;transition:transform .05s ease-out;flex-shrink:0}.image-wrapper .preview-image{display:block;width:100%;height:100%;border-radius:4px}.watermark-overlay{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;font-weight:700;font-family:Arial,sans-serif;pointer-events:auto;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:box-shadow .15s}.watermark-overlay:hover{box-shadow:0 0 0 2px #e4572e80}.watermark-overlay.dragging{cursor:grabbing;box-shadow:0 0 0 2px var(--color-primary)}.drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#e4572e26;border:2px dashed var(--color-primary);border-radius:12px;pointer-events:none;z-index:10}.drop-overlay span{background:var(--color-primary);color:#fff;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.settings-area{display:flex;flex-direction:column;overflow:hidden;height:100%}.settings-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px;display:flex;flex-direction:column;gap:14px}.settings-scroll::-webkit-scrollbar{width:4px}.settings-scroll::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.settings-scroll::-webkit-scrollbar-track{background:transparent}.settings-section{background:#fafafa;padding:16px;border-radius:12px}.section-title{margin:0 0 12px;font-size:15px;color:#333;font-weight:600}.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preset-tag{padding:6px 8px;border:1px solid #d0d5f0;background:var(--color-primary-light);color:var(--color-primary);border-radius:6px;cursor:pointer;font-weight:500;font-size:12px;transition:all .2s;text-align:center;line-height:1.3}.preset-tag:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.control-group{margin-bottom:14px}.control-group:last-child{margin-bottom:0}.control-input{width:100%;padding:8px 10px;border:2px solid #ddd;border-radius:6px;font-size:13px;transition:all .3s;box-sizing:border-box}.control-range{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ddd;border-radius:3px;outline:none}.control-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:all .3s}.control-select{width:100%;padding:8px 10px;border:2px solid #ddd;border-radius:6px;font-size:13px;background:#fff;cursor:pointer;box-sizing:border-box}.color-picker-wrapper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.control-color{width:44px;height:32px;border:2px solid #ddd;border-radius:6px;cursor:pointer;padding:2px}.color-value{font-family:monospace;font-size:12px;color:#666}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#666;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.action-buttons{display:flex;gap:12px;flex-shrink:0;padding-top:10px}.btn{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}@media (max-width: 900px){.main-content{grid-template-columns:1fr;height:auto;overflow:visible}.image-preview-area{order:1;min-height:350px}.image-container{min-height:250px}.settings-area{order:2;height:auto;max-height:none}.settings-scroll{max-height:500px}.header-title-row{flex-direction:column;align-items:flex-start;gap:4px}.header-actions{width:100%;justify-content:space-between}}.split-layout{display:flex;gap:20px;flex:1;min-height:0;overflow:hidden}.preview-panel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.control-panel{width:400px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}.upload-area{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.upload-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:60px 40px;border:3px dashed #ddd;border-radius:16px;cursor:pointer;transition:all .3s;background:#fafafa}.upload-button:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.upload-button.drag-over{border-color:var(--color-primary);background:var(--color-primary-light);border-style:solid}.upload-icon{font-size:48px;margin-bottom:12px}.upload-button span:nth-child(2){font-size:18px;color:#333;font-weight:500;margin-bottom:8px}.upload-hint{font-size:14px;color:#999}.image-display{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}.image-display h4{margin:0 0 8px;font-size:14px;color:#333;flex-shrink:0}.scale-preview-panel{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}.preview-image-card{background:#fafafa;padding:12px;border-radius:12px;border:1px solid #eee;flex:1;min-height:0;display:flex;flex-direction:column}.preview-image-card h4{margin:0 0 8px;font-size:13px;color:#333;flex-shrink:0}.preview-image-wrapper{flex:1;min-height:0;position:relative}.preview-image-wrapper .preview-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px #0000001a}.preview-image-card .image-info{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid #eee;font-size:12px;color:#666;flex:none}.crop-preview-panel{flex:1;display:flex;flex-direction:row;gap:16px;min-height:0}.crop-source-section{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.crop-source-section>h4{flex-shrink:0;margin:0;font-size:14px;color:#333}.crop-result-section{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}.crop-result-section>h4{flex-shrink:0;margin:0;font-size:14px;color:#333}.crop-result-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafafa;border:1px dashed #ddd;border-radius:12px;color:#999;font-size:13px;gap:4px}.crop-result-section .preview-image-wrapper{flex:1;min-height:0;position:relative;background:#fafafa;border:1px solid #eee;border-radius:8px}.crop-result-section .image-info{flex-shrink:0;font-size:11px;padding-top:6px;margin-top:0}.crop-canvas-container{background:#fafafa;padding:12px;border-radius:12px;border:1px solid #eee;overflow:hidden;flex:1;min-height:0}.crop-image-wrapper{width:100%;height:100%;position:relative;transform-origin:center center;transition:transform .15s ease}.crop-image-wrapper .crop-source-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.crop-overlay{position:absolute;border:2px dashed var(--color-primary);background:#e4572e1a;cursor:move}.crop-overlay:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid rgba(255,255,255,.8)}.crop-coords-info{display:flex;gap:12px;padding:8px 10px;background:var(--color-primary-light);border-radius:8px;font-size:11px;color:#555;font-weight:500;flex-shrink:0}.zoom-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.zoom-btn{width:26px;height:26px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:15px;font-weight:600;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}.zoom-btn:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.zoom-reset{width:auto;padding:0 8px;font-size:11px;margin-left:4px}.zoom-value{font-size:12px;color:#555;min-width:38px;text-align:center}.resize-handle{position:absolute;width:12px;height:12px;background:var(--color-primary);border:2px solid white;border-radius:50%;cursor:pointer;z-index:10}.resize-handle:hover{transform:scale(1.2)}.resize-handle.nw{top:-6px;left:-6px;cursor:nw-resize}.resize-handle.ne{top:-6px;right:-6px;cursor:ne-resize}.resize-handle.sw{bottom:-6px;left:-6px;cursor:sw-resize}.resize-handle.se{bottom:-6px;right:-6px;cursor:se-resize}.cropped-result-card{margin-top:4px;flex-shrink:0}.control-scroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:14px}.crop-modes{background:#fafafa;padding:16px;border-radius:12px;border:1px solid #eee}.section-title{margin:0 0 12px;font-size:16px;color:#333}.mode-buttons{display:flex;flex-direction:column;gap:8px}.mode-btn{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #ddd;border-radius:10px;background:#fff;cursor:pointer;transition:all .3s;text-align:left}.mode-btn:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #e4572e33}.mode-btn.active{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:0 0 0 2px var(--color-primary)}.mode-icon{font-size:24px;flex-shrink:0}.mode-info{display:flex;flex-direction:column;gap:2px}.mode-label{font-size:14px;font-weight:600;color:#333}.mode-desc{font-size:11px;color:#666}.scale-section,.crop-section{background:#fafafa;padding:16px;border-radius:12px;border:1px solid #eee}.control-group{display:flex;flex-direction:column;margin-bottom:12px}.control-group:last-of-type{margin-bottom:0}.control-label{display:block;margin-bottom:6px;font-weight:500;color:#555;font-size:13px}.control-input{padding:10px;border:2px solid #ddd;border-radius:8px;font-size:14px;transition:all .3s}.aspect-ratio-toggle{margin-bottom:14px;padding:10px 14px;background:#fff;border-radius:8px;border:1px solid #e0e0e0}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-input{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.checkbox-text{font-size:13px;color:#333;font-weight:500}.crop-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.crop-input{padding:6px 2px;border:2px solid #ddd;border-radius:6px;font-size:12px;text-align:center;box-sizing:border-box;min-width:0;width:100%}.crop-input:focus{outline:none;border-color:var(--color-primary)}.crop-btn{width:100%;padding:12px;font-size:15px;margin-top:4px}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.action-buttons{display:flex;gap:12px;flex-shrink:0;padding-top:16px;border-top:1px solid #eee}.action-buttons .btn{flex:1}@media (max-width: 900px){.split-layout{flex-direction:column;flex:none;min-height:auto;overflow:visible}.preview-panel{flex:none;min-height:300px;max-height:55vh}.control-panel{width:100%;max-height:none;overflow:visible}.upload-button{padding:40px 24px;min-height:200px}.scale-preview-panel,.preview-image-card{flex:none}.preview-image{flex:none;max-height:400px}.crop-preview-panel{flex:none;flex-direction:column}.crop-source-section{flex:none;min-height:300px}.crop-result-section{width:100%;flex-shrink:0;min-height:150px}.crop-result-placeholder{min-height:100px}}.sig-layout{display:flex;gap:24px;min-height:500px}.sig-preview{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.sig-preview-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f5f5f5;border-radius:8px;flex-shrink:0;flex-wrap:wrap}.sig-preview-header h3{margin:0;font-size:14px;color:#333}.sig-file-info{flex:1;font-size:12px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sig-image-container{flex:1;position:relative;background:#f0f0f0;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:350px;cursor:default;border:2px solid transparent;transition:border-color .2s}.sig-image-container.panning{cursor:grab}.sig-image-container.panning:active{cursor:grabbing}.sig-image-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;transition:transform .05s ease-out}.sig-image{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;border-radius:8px;-webkit-user-select:none;user-select:none}.zoom-controls{display:flex;align-items:center;gap:4px;background:#fff;border-radius:6px;padding:2px;border:1px solid #e0e0e0;flex-shrink:0}.zoom-btn{width:26px;height:26px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:15px;font-weight:600;color:#555;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;padding:0}.zoom-btn:hover{background:#f0f0f0;color:#333}.zoom-value{font-size:12px;font-weight:600;color:#666;min-width:36px;text-align:center;-webkit-user-select:none;user-select:none}.zoom-reset{font-size:11px;width:auto;padding:0 6px;color:var(--color-primary);font-weight:700}.sig-overlay{cursor:grab;z-index:10;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));transition:box-shadow .15s}.sig-overlay:hover{box-shadow:0 0 0 2px #e4572e80;border-radius:2px}.sig-overlay.dragging{cursor:grabbing;box-shadow:0 0 0 2px var(--color-primary);border-radius:2px}.sig-overlay-img{display:block;width:100%;height:auto;pointer-events:none}.sig-overlay.resizing{box-shadow:0 0 0 2px var(--color-primary);border-radius:2px}.sig-resize-handle{position:absolute;width:12px;height:12px;background:var(--color-primary);border:2px solid white;border-radius:50%;z-index:11;cursor:pointer}.sig-resize-handle:hover{transform:scale(1.2)}.sig-resize-handle.nw{top:-6px;left:-6px;cursor:nw-resize}.sig-resize-handle.ne{top:-6px;right:-6px;cursor:ne-resize}.sig-resize-handle.sw{bottom:-6px;left:-6px;cursor:sw-resize}.sig-resize-handle.se{bottom:-6px;right:-6px;cursor:se-resize}.sig-settings .settings-section>.btn-block{margin-top:12px}.sig-settings{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.sig-canvas-wrapper{border:2px solid #ddd;border-radius:8px;overflow:hidden;background:#fff}.sig-canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}.color-swatch-btn{width:32px;height:32px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s;padding:0}.color-swatch-btn:hover{transform:scale(1.15);box-shadow:0 2px 8px #0003}.color-swatch-btn.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}@media (max-width: 900px){.sig-layout{flex-direction:column;min-height:auto}.sig-image-container{min-height:250px}.sig-settings{width:100%}}.image-convert{display:grid;grid-template-columns:1fr 360px;gap:24px;flex:1;min-height:0;overflow:hidden}.convert-left{display:flex;flex-direction:column;min-height:0;overflow:hidden}.convert-left .upload-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;flex-shrink:0}.convert-left .image-count{font-size:13px;color:#6b7280}.upload-dropzone{border:2px dashed #d0d5dd;border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .2s ease;background:#fafafa;flex-shrink:0;margin-bottom:12px}.upload-dropzone:hover{border-color:var(--color-primary);background:#f0f4ff}.upload-dropzone.drag-over{border-color:var(--color-primary);background:#eef2ff;border-style:solid}.upload-dropzone.has-images{padding:12px}.upload-dropzone .file-input{display:none}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.dropzone-icon{font-size:32px}.has-images .dropzone-icon{font-size:20px}.dropzone-text{font-size:14px;color:#374151;font-weight:500}.has-images .dropzone-text{font-size:13px}.dropzone-hint{font-size:12px;color:#9ca3af}.image-list{flex:1;min-height:0;overflow-y:auto;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.list-header{display:grid;grid-template-columns:48px 1fr 72px 80px 72px 40px;gap:8px;align-items:center;padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:10px 10px 0 0;font-size:12px;color:#6b7280;font-weight:600;position:sticky;top:0;z-index:1}.list-header-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-item{display:grid;grid-template-columns:48px 1fr 72px 80px 72px 40px;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid #f3f4f6;font-size:13px;color:#374151;transition:background .15s}.image-item:hover{background:#f9fafb}.image-item:last-child{border-bottom:none}.item-preview{width:40px;height:40px;border-radius:6px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.item-preview img{width:100%;height:100%;object-fit:cover}.item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.item-format,.item-dimensions,.item-size{font-size:12px;color:#6b7280;white-space:nowrap}.item-action{display:flex;justify-content:center}.item-remove-btn{width:24px;height:24px;border:none;background:transparent;color:#9ca3af;cursor:pointer;border-radius:4px;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}.item-remove-btn:hover{background:#fee2e2;color:#dc2626}.clear-btn{margin-top:12px;padding:8px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:13px;cursor:pointer;transition:all .15s;flex-shrink:0;align-self:flex-start}.clear-btn:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.convert-right{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;padding-right:4px}.empty-hint{display:flex;align-items:center;gap:10px;padding:20px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;color:#6b7280;font-size:14px}.empty-hint .empty-icon{font-size:24px}.setting-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:10px}.setting-label strong{color:var(--color-primary)}.format-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.format-options:has(.format-btn:nth-child(4)){grid-template-columns:repeat(2,1fr)}.quality-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e5e7eb;border-radius:3px;outline:none;cursor:pointer}.quality-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#9ca3af}.converted-section{display:flex;flex-direction:column;gap:10px;flex-shrink:0}.converted-header{display:flex;align-items:center;justify-content:space-between}.converted-total{font-size:13px;color:#6b7280}.converted-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}.converted-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px}.converted-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:#1f2937}.converted-item-info{display:flex;align-items:center;gap:6px;flex-shrink:0}.converted-item-size{font-size:12px;color:#6b7280}.size-change{font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px}.size-change.smaller{color:#059669;background:#ecfdf5}.size-change.larger{color:#dc2626;background:#fef2f2}.download-one-btn{padding:4px 12px;border:1px solid var(--color-primary);border-radius:6px;background:#fff;color:var(--color-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;flex-shrink:0}.download-one-btn:hover{background:var(--color-primary);color:#fff}.download-all-btn{width:100%;padding:12px 20px;border:none;border-radius:8px;background:#10b981;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0}.download-all-btn:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.backend-status p{margin:0 0 4px;font-size:12px;color:#059669}@media (max-width: 900px){.image-convert{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:16px}.convert-left{max-height:50vh}.convert-right{max-height:none}.format-options{grid-template-columns:repeat(3,1fr)}}@media (max-width: 600px){.image-item{grid-template-columns:36px 1fr 60px 40px}.item-format,.item-dimensions{display:none}.list-header{grid-template-columns:36px 1fr 60px 40px}.list-header-item:nth-child(3),.list-header-item:nth-child(4){display:none}}.total-stats{background:var(--gradient-primary);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;color:#fff}.stats-row{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.stat-box{text-align:center;padding:.5rem 1rem;background:#fff3;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:120px}.stat-box.highlight{background:#ffffff4d;font-weight:700}.stat-label{display:block;font-size:.75rem;margin-bottom:.125rem;opacity:.9}.stat-value{display:block;font-size:1.25rem;font-weight:700}.stat-arrow{font-size:1.5rem;opacity:.8}.btn-download{background:#fff;color:var(--color-primary);padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.btn-download:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.main-content{display:grid;grid-template-columns:1fr 350px;gap:2rem;min-height:600px}.left-panel,.right-panel{display:flex;flex-direction:column}.pdf-list{background:var(--color-primary-bg);border-radius:12px;padding:1.5rem;min-height:500px;max-height:70vh;display:flex;flex-direction:column;border:3px dashed transparent;transition:all .3s ease;position:relative}.pdf-list:hover{border-color:var(--color-primary)}.empty-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;cursor:pointer;transition:all .3s ease;color:var(--color-primary);min-height:400px;border-radius:8px;background:#fff}.empty-upload-area:hover{background:var(--color-primary);color:#fff;transform:scale(1.02)}.empty-upload-area .upload-icon{font-size:4rem;margin-bottom:1.5rem}.empty-upload-area .upload-text{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.empty-upload-area .upload-hint{font-size:.875rem;opacity:.7}.list-header{flex-shrink:0;display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding:.75rem;background:#fff;border-radius:8px;flex-wrap:wrap}.list-header h3{color:#333;font-size:1rem;margin:0;white-space:nowrap}.header-actions{display:flex;gap:.5rem}.btn-add{background:var(--color-primary);color:#fff;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .3s ease;border:none;font-weight:600;white-space:nowrap}.btn-add:hover{background:#5568d3;transform:translateY(-1px)}.btn-clear{background:#ff6b6b;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .3s ease;white-space:nowrap}.btn-clear:hover{background:#ee5a5a;transform:translateY(-1px)}.drag-hint{color:var(--color-primary);font-size:.75rem;font-weight:500;white-space:nowrap;opacity:.8}.pdf-items{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.75rem;scrollbar-width:none;-ms-overflow-style:none}.pdf-items::-webkit-scrollbar{display:none}.pdf-item{display:flex;align-items:center;gap:1rem;background:#fff;padding:.75rem;border-radius:8px;box-shadow:0 2px 4px #0000000d;transition:all .3s ease}.pdf-item:hover{box-shadow:0 4px 8px #0000001a;transform:translate(4px)}.pdf-icon{font-size:2.5rem;flex-shrink:0}.pdf-info{flex:1;min-width:0}.pdf-name{font-weight:600;color:#333;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdf-sizes{display:flex;align-items:center;gap:.5rem;font-size:.875rem;flex-wrap:wrap}.size-original{color:#666}.size-arrow{color:#999}.size-compressed{color:#10b981;font-weight:600}.size-saved{color:var(--color-primary);font-weight:600;background:#f0f4ff;padding:.125rem .5rem;border-radius:4px;font-size:.75rem}.status-compressing{color:#f59e0b;font-weight:600}.status-error{color:#ef4444;font-weight:600}.pdf-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.btn-download-single{background:var(--color-primary);color:#fff;border:none;padding:.375rem .75rem;border-radius:4px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-download-single:hover{background:#5568d3;transform:translateY(-1px)}.btn-remove{background:transparent;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:.5rem;transition:all .3s ease;flex-shrink:0}.btn-remove:hover:not(:disabled){color:#ff6b6b;transform:scale(1.1)}.btn-remove:disabled{opacity:.5;cursor:not-allowed}.settings-card{background:var(--color-primary-bg);padding:1.5rem;border-radius:12px}.settings-card h3{color:#333;margin-bottom:1.5rem;font-size:1.25rem}.compression-levels{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.compression-level{background:#fff;border:2px solid var(--color-primary);border-radius:8px;padding:1rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:flex-start;text-align:left}.compression-level:hover:not(:disabled){background:var(--color-primary);color:#fff;transform:translateY(-2px)}.compression-level.active{background:var(--gradient-primary);color:#fff;border-color:var(--color-primary)}.compression-level:disabled{opacity:.5;cursor:not-allowed}.level-icon{font-size:1.5rem;margin-bottom:.5rem}.level-label{font-size:1rem;font-weight:600;margin-bottom:.25rem}.level-description{font-size:.85rem;opacity:.8;margin-bottom:.25rem}.level-quality{font-size:.75rem;opacity:.6}.btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.btn-compress{margin-top:1rem;font-size:1.1rem;padding:1.25rem 2rem}.info-section{margin-top:1.5rem;padding:1.5rem;background:#fff;border-radius:12px}.info-title{color:#333;font-size:1.25rem;font-weight:700;margin-bottom:1rem}.info-list{list-style:none;color:#555;line-height:1.8}.info-list li{padding:.5rem 0 .5rem 1.5rem;position:relative}.info-list li:before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700;margin-right:.5rem}.backend-status{margin-top:1.5rem;padding:1rem;background:#e7f3ff;border-radius:8px;border-left:4px solid var(--color-primary)}.backend-status p{color:#333;margin-bottom:.5rem;font-weight:600}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}.right-panel{order:-1}}@media (max-width: 768px){.stats-row{gap:.75rem}.stat-box{flex:1;min-width:auto;padding:.75rem 1rem}.stat-value{font-size:1.25rem}.btn-download{width:100%;margin-top:1rem}.pdf-item{flex-wrap:wrap}.pdf-info{width:calc(100% - 80px)}}.watermark-section{background:#fafafa;padding:30px;border-radius:12px;margin-bottom:20px}.section-title{margin:0 0 24px;font-size:20px;color:#333}.preset-section{margin-bottom:24px}.preset-buttons{display:flex;gap:10px;flex-wrap:wrap}.preset-btn{padding:8px 16px;border:2px solid #ddd;background:#fff;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s}.preset-btn:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #e4572e4d}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}.control-input{padding:12px;border:2px solid #ddd;border-radius:8px;font-size:16px;transition:all .3s}.control-input:focus{outline:none;border-color:var(--color-primary)}.control-select{padding:12px;border:2px solid #ddd;border-radius:8px;font-size:16px;background:#fff;cursor:pointer}.control-color{width:60px;height:40px;border:2px solid #ddd;border-radius:8px;cursor:pointer;padding:2px}.color-picker-wrapper{display:flex;align-items:center;gap:12px}.color-value{font-family:monospace;font-size:14px;color:#666}.preview-box{background:#fff;padding:30px;border-radius:8px;margin-bottom:24px;text-align:center}.watermark-preview{display:inline-block;padding:20px;font-weight:700;-webkit-user-select:none;user-select:none}.watermark-btn{width:100%;padding:16px;font-size:18px}.watermark-info{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.btn{flex:1;padding:14px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s}.signature-workspace{margin-bottom:20px}.workspace-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.signature-panel,.page-panel{background:#fafafa;padding:30px;border-radius:12px}.panel-title{margin:0 0 20px;font-size:20px;color:#333}.signature-canvas-wrapper{border:2px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;margin-bottom:20px}.signature-canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}.signature-controls{display:flex;flex-direction:column;gap:16px}.control-group{display:flex;flex-direction:column}.control-label{display:block;margin-bottom:8px;font-weight:500;color:#555;font-size:14px}.color-picker-grid{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.color-swatch{width:32px;height:32px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .3s}.color-swatch:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}.color-swatch.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.color-input{width:32px;height:32px;border:2px solid #ddd;border-radius:8px;cursor:pointer;padding:0}.control-range{width:100%;height:8px;-webkit-appearance:none;background:#ddd;border-radius:4px;outline:none}.control-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:all .3s}.control-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.signature-actions{display:flex;gap:8px}.page-selector{margin-bottom:20px}.control-select{padding:12px;border:2px solid #ddd;border-radius:8px;font-size:16px;background:#fff;cursor:pointer;width:100%}.page-preview{margin-bottom:20px}.preview-container{position:relative;display:inline-block;width:100%;border:2px solid #ddd;border-radius:8px;overflow:hidden;background:#fff}.preview-image{width:100%;display:block;-webkit-user-select:none;user-select:none}.draggable-signature{position:absolute;width:150px;height:75px;transform:translate(-50%,50%);z-index:10;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.signature-preview-image{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:4px;pointer-events:none}.signature-border{position:absolute;top:0;left:0;right:0;bottom:0;border:2px dashed var(--color-primary);border-radius:4px;pointer-events:none}.draggable-signature:hover .signature-border{border-color:var(--color-primary-dark);border-width:3px}.draggable-signature:active .signature-border{border-color:#f093fb;border-style:solid}.preview-hint{font-size:13px;color:#999;text-align:center;margin:8px 0 0}.signature-btn{width:100%;padding:16px;font-size:18px}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-secondary{background:#f5f5f5;color:#333}.btn-sm{padding:8px 16px;font-size:14px}.preview-section{margin-bottom:20px}.progress-container{background:#f5f5f5;padding:20px;border-radius:12px}.progress-bar{height:8px;background:#ddd;border-radius:4px;overflow:hidden;margin-bottom:12px}.progress-fill{height:100%;background:var(--gradient-primary);transition:width .3s}.progress-text{text-align:center;color:#666;font-size:14px;margin:0}.result-summary{background:#f9f9f9;padding:20px;border-radius:12px;margin-bottom:20px}.summary-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee}.summary-item:last-child{border-bottom:none}.summary-label{font-weight:500;color:#666}.summary-value{font-weight:600;color:#333}.signature-info{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.info-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--color-primary-light);border-radius:8px;font-size:14px}.info-label{color:#666}.info-value{font-weight:600;color:#333}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid #ddd}.info-section{background:#f9f9f9;padding:24px;border-radius:12px}.info-title{margin:0 0 16px;color:#333}.info-list li{padding:10px 0 10px 24px;position:relative;color:#666}.info-list li:before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}.backend-status{padding:16px;border-radius:8px;font-size:14px}.backend-status.success{background:#e8f5e9;border:1px solid #c8e6c9;color:#2e7d32}.backend-status p{margin:6px 0}.pdf-to-word{max-width:720px;margin:0 auto}.pdf-to-word .upload-section{margin-bottom:24px}.pdf-to-word .upload-section .file-input{display:none}.pdf-to-word .upload-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;border:2px dashed #d0d5dd;border-radius:12px;cursor:pointer;transition:all .2s ease;background:#fafafa;text-align:center}.pdf-to-word .upload-button:hover{border-color:var(--color-primary-dark);background:#f5f0ff}.pdf-to-word .upload-button.colored{border-color:var(--color-primary-dark);background:linear-gradient(135deg,#f5f0ff,#faf5ff)}.pdf-to-word .upload-button.colored:hover{border-color:#5a3a8a;background:linear-gradient(135deg,#ede0ff,#f0e5ff)}.pdf-to-word .upload-icon{font-size:48px;margin-bottom:16px}.pdf-to-word .upload-hint{font-size:13px;color:#9ca3af;margin-top:8px}.file-info-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f0f4ff;border-radius:8px;margin-bottom:20px}.file-info-bar .file-name{font-weight:600;color:#1f2937;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:16px}.file-info-bar .file-size{color:var(--color-primary);font-weight:600;font-size:14px;white-space:nowrap}.mode-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.mode-btn{display:flex;align-items:center;gap:16px;padding:16px 20px;border:2px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:all .2s ease;text-align:left}.mode-btn:hover{border-color:var(--color-primary-dark);background:#faf8ff}.mode-btn.active{border-color:var(--color-primary-dark);background:linear-gradient(135deg,#f5f0ff,#faf5ff);box-shadow:0 0 0 3px #764ba21a}.mode-btn .mode-icon{font-size:28px;flex-shrink:0}.mode-btn .mode-info{display:flex;flex-direction:column;gap:4px}.mode-btn .mode-label{font-weight:600;color:#1f2937;font-size:15px}.mode-btn .mode-desc{font-size:13px;color:#6b7280;line-height:1.4}.convert-btn{width:100%;padding:14px 24px;font-size:16px;font-weight:600}.progress-section{margin-bottom:24px}.progress-container{padding:32px 24px;background:#fff;border-radius:12px;border:1px solid #e5e7eb;text-align:center}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:12px}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:4px;transition:width .3s ease}.progress-text{color:#6b7280;font-size:14px;margin:0}.success-header{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#059669;margin-bottom:20px}.success-header .success-icon{font-size:24px}.result-section,.result-section .file-info{margin-bottom:24px}.result-section .info-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px}.result-section .info-label{font-size:15px;font-weight:600;color:#1f2937;margin:0 0 12px}.result-section .info-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6}.result-section .info-item:last-child{border-bottom:none}.result-section .info-key{color:#6b7280;font-size:14px}.result-section .info-value{color:#1f2937;font-weight:500;font-size:14px}.action-buttons{display:flex;gap:12px}.action-buttons .btn{flex:1;padding:12px 24px;font-size:15px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #764ba24d}.btn-secondary{background:#f3f4f6;color:#374151}.btn-secondary:hover{background:#e5e7eb}.info-section{margin-top:32px}.info-title{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 12px}.info-list{list-style:none;padding:0;margin:0 0 20px}.info-list li{padding:8px 0;color:#4b5563;font-size:14px;line-height:1.6;border-bottom:1px solid #f3f4f6}.info-list li:before{content:"• ";color:var(--color-primary-dark);font-weight:700}.backend-status{padding:16px;border-radius:8px;margin-top:12px}.backend-status p{margin:0 0 6px;font-size:13px;color:#059669}.backend-status p:last-child{margin-bottom:0}.error-message{padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;margin-bottom:16px}.section-title{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 16px}.conversion-section{margin-bottom:24px}.to-pdf{display:grid;grid-template-columns:1fr 360px;gap:24px;flex:1;min-height:0;overflow:hidden}.topdf-left{display:flex;flex-direction:column;min-height:0;overflow:hidden}.mode-tabs{display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:16px;flex-shrink:0}.mode-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;font-size:14px;color:#6b7280;transition:all .15s}.mode-tab:hover{color:#374151;background:#f9fafb}.mode-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.mode-tab-icon{font-size:16px}.mode-tab-label{white-space:nowrap}.input-area{flex:1;min-height:0;display:flex;flex-direction:column}.text-area{position:relative}.text-input{flex:1;min-height:0;padding:16px;border:1px solid #e5e7eb;border-radius:10px;font-size:14px;font-family:SF Mono,Menlo,Monaco,Consolas,monospace;line-height:1.8;color:#1f2937;background:#fafafa;resize:none;outline:none;transition:border-color .15s}.text-input:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px #e4572e1a}.char-count{position:absolute;bottom:8px;right:12px;font-size:12px;color:#9ca3af;background:#ffffffe6;padding:2px 8px;border-radius:4px}.word-area{gap:12px}.file-upload-zone{border:2px dashed #d0d5dd;border-radius:10px;padding:32px 24px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa}.file-upload-zone:hover{border-color:var(--color-primary);background:#f0f4ff}.file-upload-zone .file-input{display:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.upload-icon{font-size:36px}.upload-placeholder span:nth-child(2){font-size:14px;color:#374151;font-weight:500}.upload-hint{font-size:12px;color:#9ca3af}.file-info{display:flex;align-items:center;gap:12px;padding:8px}.file-icon{font-size:32px}.file-details{flex:1;text-align:left}.file-name{display:block;font-size:14px;font-weight:500;color:#1f2937}.file-size{font-size:12px;color:#6b7280}.file-remove{width:28px;height:28px;border:none;background:transparent;color:#9ca3af;cursor:pointer;border-radius:6px;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}.file-remove:hover{background:#fee2e2;color:#dc2626}.word-preview{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.preview-label{padding:8px 12px;background:#f9fafb;font-size:12px;color:#6b7280;font-weight:600;border-bottom:1px solid #e5e7eb}.preview-text{padding:12px;font-size:13px;line-height:1.7;color:#374151;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.image-area{gap:12px}.image-upload-zone{border:2px dashed #d0d5dd;border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa;flex-shrink:0}.image-upload-zone:hover{border-color:var(--color-primary);background:#f0f4ff}.image-upload-zone .file-input{display:none}.image-upload-zone .upload-icon{font-size:32px}.image-upload-zone span:nth-child(2){display:block;font-size:14px;color:#374151;font-weight:500;margin-top:4px}.image-list{flex:1;min-height:0;overflow-y:auto;border:1px solid #e5e7eb;border-radius:10px}.image-list-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:13px;font-weight:600;color:#374151;position:sticky;top:0;z-index:1;border-radius:10px 10px 0 0}.clear-images-btn{padding:4px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#6b7280;font-size:12px;cursor:pointer;transition:all .15s}.clear-images-btn:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.image-list-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f3f4f6;font-size:13px}.image-list-item:last-child{border-bottom:none}.image-index{width:20px;text-align:center;font-size:12px;color:#9ca3af;font-weight:600;flex-shrink:0}.image-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:#f3f4f6;flex-shrink:0}.image-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#374151}.image-size{font-size:12px;color:#9ca3af;flex-shrink:0}.image-remove-btn{width:24px;height:24px;border:none;background:transparent;color:#9ca3af;cursor:pointer;border-radius:4px;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}.image-remove-btn:hover{background:#fee2e2;color:#dc2626}.topdf-right{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;padding-right:4px}.panel-title{font-size:16px;font-weight:600;color:#1f2937;margin:0;flex-shrink:0}.settings-group{flex-shrink:0}.setting-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.setting-input{width:100%;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;color:#1f2937;outline:none;transition:border-color .15s;box-sizing:border-box}.setting-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #e4572e1a}.font-size-control{display:flex;align-items:center;gap:12px}.quality-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e5e7eb;border-radius:3px;outline:none;cursor:pointer}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #00000026}.font-size-value{font-size:14px;font-weight:600;color:var(--color-primary);min-width:36px;text-align:right}.format-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.format-btn{padding:10px 8px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:all .15s;text-align:center}.format-btn:hover{border-color:var(--color-primary);background:#f0f4ff}.format-btn.active{border-color:var(--color-primary);background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4f46e5;font-weight:600}.orientation-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.orientation-btn{padding:10px 8px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;font-size:13px;cursor:pointer;transition:all .15s;text-align:center}.orientation-btn:hover{border-color:var(--color-primary);background:#f0f4ff}.orientation-btn.active{border-color:var(--color-primary);background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4f46e5;font-weight:600}.convert-btn{width:100%;padding:14px 24px;border:none;border-radius:10px;background:var(--gradient-primary);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;flex-shrink:0}.convert-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #e4572e66}.convert-btn:disabled{opacity:.5;cursor:not-allowed}.progress-bar-wrap{flex-shrink:0}.progress-bar{width:100%;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:3px;transition:width .3s ease}.result-section{display:flex;flex-direction:column;gap:10px;padding:16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;flex-shrink:0}.result-header{display:flex;align-items:center;gap:8px}.success-badge{font-size:14px;font-weight:600;color:#059669}.result-info{display:flex;gap:16px;font-size:13px;color:#6b7280}.download-btn{width:100%;padding:12px 20px;border:none;border-radius:8px;background:#10b981;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}.download-btn:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.error-message{padding:10px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:13px;flex-shrink:0}.info-section{margin-top:8px;flex-shrink:0}.info-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 10px}.info-list{list-style:none;padding:0;margin:0 0 14px}.info-list li{padding:6px 0;color:#4b5563;font-size:13px;line-height:1.6;border-bottom:1px solid #f3f4f6}.info-list li:last-child{border-bottom:none}.info-list li:before{content:"• ";color:var(--color-primary);font-weight:700}.info-list strong{color:#1f2937}.backend-status{padding:12px 14px;border-radius:8px}.backend-status.success{background:#ecfdf5;border:1px solid #a7f3d0}.backend-status p{margin:0;font-size:12px;color:#059669}@media (max-width: 900px){.to-pdf{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:16px}.topdf-left{max-height:50vh}.topdf-right{max-height:none}}@media (max-width: 600px){.mode-tab-label{font-size:12px}}.text-format-inner{display:flex;flex-direction:column;flex:1;min-height:0}.format-description{text-align:center;margin-bottom:2rem;padding:1rem;background:var(--color-primary-light);border-radius:8px}.format-description p{color:#666;font-size:.95rem;margin-bottom:1rem}.mode-switcher{display:flex;justify-content:center;gap:.75rem;margin-top:1rem}.mode-btn{padding:.5rem 1.25rem;background:#fff;color:#666;border:2px solid #e0e0e0;border-radius:20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease}.mode-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.mode-btn.active{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:0 4px 12px #e4572e4d}.editor-wrapper{display:flex;flex-direction:column;flex:1;gap:1.5rem;margin-bottom:2rem;min-height:0}.editor-panel{display:flex;flex-direction:column;background:var(--color-primary-bg);border-radius:12px;overflow:hidden;flex:1;position:relative}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fff;border-bottom:2px solid var(--color-primary)}.header-left{display:flex;align-items:center;gap:.75rem}.editor-title{color:#333;font-size:1rem;font-weight:600;margin:0}.tips-btn{background:transparent;border:none;font-size:1.1rem;cursor:pointer;padding:.25rem;border-radius:50%;transition:all .3s ease}.tips-btn:hover{background:#f0f0f0;transform:scale(1.1)}.panel-actions{display:flex;gap:.5rem;align-items:center}.mode-switcher-mini{display:flex;gap:.25rem;margin-right:.5rem}.mode-btn-mini{padding:.4rem .6rem;background:#f0f0f0;border:2px solid transparent;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .3s ease}.mode-btn-mini.active{background:var(--color-primary);border-color:#5568d3}.mode-btn-mini:hover{transform:translateY(-1px)}.action-btn{padding:.4rem .6rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:2rem;display:flex;align-items:center;justify-content:center}.action-btn:hover{background:#5568d3;transform:translateY(-1px)}.action-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.copy-btn{background:#4ecdc4}.copy-btn:hover:not(:disabled){background:#3dbdb5}.text-input{flex:1;padding:1.25rem;border:none;background:transparent;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;resize:none;color:#333}.text-input:focus{outline:none}.text-input::placeholder{color:#999;line-height:1.8}.visual-preview{flex:1;padding:1.25rem;background:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.95rem;line-height:1.8;color:#333;overflow-y:auto}.visual-preview .placeholder{color:#999;font-style:italic;text-align:center;padding:2rem}.md-h1{font-size:2rem;font-weight:700;color:#1a1a1a;margin:1.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid var(--color-primary)}.md-h2{font-size:1.5rem;font-weight:600;color:#2a2a2a;margin:1.25rem 0 .75rem;padding-bottom:.3rem;border-bottom:2px solid #e0e0e0}.md-h3{font-size:1.25rem;font-weight:600;color:#3a3a3a;margin:1rem 0 .5rem}.md-strike{text-decoration:line-through;color:#888}.md-code-block{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:8px;margin:1rem 0;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.5}.md-code-block code{color:#f8f8f2}.md-inline-code{background:#f0f0f0;color:#e83e8c;padding:.2rem .4rem;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85em}.md-list-item{display:list-item;list-style-type:disc;margin-left:1.5rem;margin-bottom:.5rem;color:#333}.md-link{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:all .3s ease}.md-link:hover{color:#5568d3;border-bottom-color:#5568d3}.html-tag{background:#fff3cd;color:#856404;padding:.1rem .3rem;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em;border:1px solid #ffc107}.text-output{flex:1;padding:1.25rem;overflow-y:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:#333;background:transparent}.text-output .placeholder{color:#999;font-style:italic}.json-block{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:8px;margin:.5rem 0;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.5}.json-block code{color:#f8f8f2}.md-h1{font-size:1.75rem;font-weight:700;color:#1a1a1a;margin:1rem 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-primary)}.md-h2{font-size:1.5rem;font-weight:600;color:#2a2a2a;margin:.875rem 0 .625rem}.md-h3{font-size:1.25rem;font-weight:600;color:#3a3a3a;margin:.75rem 0 .5rem}.md-bold{font-weight:700;color:#1a1a1a}.md-italic{font-style:italic;color:#555}.md-del{text-decoration:line-through;color:#999}.md-code{background:#f4f4f4;color:#e83e8c;padding:.2rem .4rem;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85em}.md-li{display:list-item;margin-left:1.5rem;margin-bottom:.25rem;list-style-type:disc}.md-link{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed var(--color-primary);transition:all .3s ease}.md-link:hover{color:#5568d3;border-bottom-style:solid}.format-tips{background:var(--color-primary-bg);padding:1.5rem;border-radius:12px;border-left:4px solid var(--color-primary);flex-shrink:0;max-height:200px;overflow-y:auto}.format-tips h4{color:#333;font-size:1rem;margin-bottom:1rem}.format-tips ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem}.format-tips li{color:#555;font-size:.9rem;padding-left:1rem;position:relative}.format-tips li:before{content:"•";position:absolute;left:0;color:var(--color-primary);font-weight:700}.format-tips strong{color:#333}@media (max-width: 1024px){.editor-wrapper{grid-template-columns:1fr;min-height:auto}.editor-panel{min-height:300px}}@media (max-width: 768px){.text-format-container{padding:1.5rem}.nav-header{flex-direction:column;align-items:flex-start;gap:.75rem}.page-title{font-size:1.5rem}.panel-header{flex-direction:column;gap:.75rem;align-items:flex-start}.panel-actions{width:100%;justify-content:flex-end}.text-input,.text-output{font-size:.85rem;padding:1rem}.format-tips ul{grid-template-columns:1fr}}.text-output::-webkit-scrollbar{width:8px}.text-output::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.text-output::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:4px}.text-output::-webkit-scrollbar-thumb:hover{background:#5568d3}.text-input::-webkit-scrollbar{width:8px}.text-input::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.text-input::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:4px}.text-input::-webkit-scrollbar-thumb:hover{background:#5568d3}.block-container{margin:.5rem 0}.visual-block{background:#fff;border-radius:6px;margin-bottom:.5rem;box-shadow:0 1px 4px #00000014;overflow:hidden;border:1px solid #e0e0e0;border-left:3px solid var(--color-primary)}.block-title{padding:.4rem .75rem;background:var(--color-primary-light);font-weight:600;color:#333;font-size:.85rem;border-bottom:1px solid #e0e0e0}.block-body{padding:.5rem .75rem}.param-row{margin-bottom:.3rem;font-size:.85rem;line-height:1.4}.param-row:last-child{margin-bottom:0}.param-key{color:#666;font-weight:600;margin-right:.5rem}.param-value{color:#333}.string-value{color:#e83e8c;background:#f4f4f4;padding:.1rem .3rem;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem}.keyword-value{color:#005cc5;font-weight:600}.number-value{color:#22863a;font-weight:600}.json-value{background:#2d2d2d;color:#f8f8f2;padding:.4rem;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.4;overflow-x:auto;margin-top:.2rem}.bracket-content{background:var(--color-primary-bg);padding:.4rem;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:#555;margin:.3rem 0}.paren-block{background:#f0f0f0;padding:.1rem .3rem;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem}.json-block{background:#2d2d2d;color:#f8f8f2;padding:.5rem;border-radius:4px;margin:.3rem 0;overflow-x:auto}.json-block code{color:#f8f8f2;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.4}@media (max-width: 768px){.visual-block{margin-bottom:.4rem}.block-body{padding:.4rem .6rem}.param-row{font-size:.8rem}}.test-btn{background:#4ecdc4!important}.test-btn:hover{background:#3dbdb5!important}.test-results{margin:2rem 0;padding:1.5rem;background:var(--color-primary-bg);border-radius:12px;border:2px solid var(--color-primary)}.test-results h4{margin-bottom:1rem;color:#333;font-size:1.1rem}.test-item{margin-bottom:1rem;padding:1rem;background:#fff;border-radius:8px;border:2px solid #e0e0e0}.test-item.passed{border-color:#4ecdc4;background:#f0fff4}.test-item.failed{border-color:#ff6b6b;background:#fff0f0}.test-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.test-name{font-weight:600;color:#333;font-size:.95rem}.test-status{font-weight:600;font-size:.9rem}.test-item.passed .test-status{color:#4ecdc4}.test-item.failed .test-status{color:#ff6b6b}.test-details{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0}.test-section{margin-bottom:.75rem}.test-section:last-child{margin-bottom:0}.test-section strong{display:block;margin-bottom:.25rem;color:#666;font-size:.85rem}.test-section pre{background:#2d2d2d;color:#f8f8f2;padding:.75rem;border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.4;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.formatted-text{background:transparent;color:#333;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;margin:0;padding:0;white-space:pre-wrap;word-wrap:break-word}.text-output{width:100%;height:100%;min-height:500px;border:none;background:#f8f9fa;color:#333;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;padding:1rem;resize:vertical;outline:none;white-space:pre-wrap;word-wrap:break-word}.text-output:focus{background:#fff}.fullscreen-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.fullscreen-panel{background:#fff;border-radius:12px;width:100%;max-width:1400px;height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #0000004d}.fullscreen-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e9ecef;background:#f8f9fa;border-radius:12px 12px 0 0}.fullscreen-header h3{margin:0;color:#333;font-size:1.2rem}.fullscreen-actions{display:flex;gap:.5rem}.fullscreen-textarea{flex:1;width:100%;border:none;padding:2rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1rem;line-height:1.6;resize:none;outline:none;white-space:pre-wrap;word-wrap:break-word;background:#fff;color:#333}.fullscreen-textarea:focus{background:#fff}.single-panel{width:100%;flex:1;display:flex;flex-direction:column}.single-textarea{flex:1;min-height:0;resize:none}.auto-format-switch{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:1rem}.auto-format-switch input{display:none}.switch-slider{position:relative;width:48px;height:24px;background:#ccc;border-radius:24px;transition:all .3s ease}.switch-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.auto-format-switch input:checked+.switch-slider{background:#4ecdc4}.auto-format-switch input:checked+.switch-slider:before{transform:translate(24px)}.switch-label{font-size:.9rem;color:#333;font-weight:500}.format-btn{background:var(--color-primary)!important;color:#fff!important}.format-btn:hover:not(:disabled){background:#5568d3!important}.format-btn:disabled{opacity:.5;cursor:not-allowed}.tips-dropdown{position:absolute;top:100%;left:1rem;right:1rem;z-index:100;margin-top:.5rem}.tips-content{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 4px 12px #00000026;border:1px solid #e0e0e0}.tips-content h4{color:#333;font-size:.95rem;margin-bottom:.75rem}.tips-content ul{list-style:none;padding:0;margin:0}.tips-content li{color:#555;font-size:.85rem;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.tips-content li:last-child{border-bottom:none}.tips-content strong{color:#333}.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;padding:1rem;background:var(--color-primary-bg);border-radius:8px}.btn{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--gradient-primary);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #e4572e66}.btn-secondary{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-secondary:hover:not(:disabled){background:var(--color-primary);color:#fff}.btn-danger{background:#fff;color:#ff6b6b;border:2px solid #ff6b6b}.btn-danger:hover:not(:disabled){background:#ff6b6b;color:#fff}.file-input{display:none}.md-editor-container{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;min-height:600px}.md-panel{background:var(--color-primary-bg);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e0e0e0}.panel-header h3{margin:0;font-size:1rem;color:#333}.char-count{font-size:.8rem;color:#999;font-weight:500}.md-textarea{flex:1;padding:1.5rem;border:none;outline:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;resize:none;background:transparent;color:#333;-moz-tab-size:2;tab-size:2}.md-textarea::placeholder{color:#999}.md-preview{flex:1;padding:1.5rem;overflow-y:auto;background:#fff;color:#333;line-height:1.7}.md-preview h1{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#333;border-bottom:2px solid var(--color-primary);padding-bottom:.5rem}.md-preview h2{font-size:1.5rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem;color:#444;border-bottom:1px solid #e0e0e0;padding-bottom:.25rem}.md-preview h3{font-size:1.25rem;font-weight:600;margin-top:1.25rem;margin-bottom:.5rem;color:#555}.md-preview h4,.md-preview h5,.md-preview h6{font-size:1rem;font-weight:600;margin-top:1rem;margin-bottom:.5rem;color:#666}.md-preview p{margin-bottom:1rem}.md-preview strong{font-weight:700;color:#333}.md-preview em{font-style:italic;color:#555}.md-preview ul,.md-preview ol{padding-left:1.5rem;margin-bottom:1rem}.md-preview li{margin-bottom:.5rem}.md-preview li ul,.md-preview li ol{margin-top:.5rem;margin-bottom:0}.md-preview a{color:var(--color-primary);text-decoration:none;font-weight:500}.md-preview a:hover{text-decoration:underline}.md-preview code{background:#f0f4ff;padding:.2rem .4rem;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--color-primary)}.md-preview pre{background:#2d2d2d;padding:1rem;border-radius:8px;overflow-x:auto;margin-bottom:1rem}.md-preview pre code{background:transparent;padding:0;color:#ccc;font-size:.85rem;line-height:1.5}.md-preview blockquote{border-left:4px solid var(--color-primary);padding-left:1rem;margin:1rem 0;color:#666;font-style:italic;background:var(--color-primary-bg);padding:1rem;border-radius:0 8px 8px 0}.md-preview hr{border:none;border-top:2px dashed #e0e0e0;margin:2rem 0}.md-preview table{width:100%;border-collapse:collapse;margin-bottom:1rem}.md-preview th,.md-preview td{border:1px solid #e0e0e0;padding:.75rem;text-align:left}.md-preview th{background:var(--color-primary-bg);font-weight:600}.md-preview tr:nth-child(2n){background:#fafafa}.md-preview img{max-width:100%;border-radius:8px}@media (max-width: 1024px){.md-editor-container{grid-template-columns:1fr}.md-panel{min-height:400px}}@media (max-width: 768px){.toolbar{gap:.5rem}.btn{flex:1;justify-content:center;min-width:80px}.panel-header{padding:.75rem 1rem}.md-textarea,.md-preview{padding:1rem}}.language-switcher{position:fixed;top:12px;right:16px;z-index:1000;font-family:inherit}.lang-trigger{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(28,25,21,.18);border-radius:999px;background:#fffdf8f0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#201a15;font-size:12.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;box-shadow:0 2px 10px #1c191524;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}.lang-trigger:hover{border-color:#e4572e8c;box-shadow:0 4px 16px #e4572e38;transform:translateY(-1px)}.language-switcher.is-open .lang-trigger{border-color:#e4572e;box-shadow:0 4px 16px #e4572e47}.lang-globe{color:#e4572e;flex-shrink:0}.lang-current{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lang-chevron{color:#201a158c;transition:transform .2s ease;flex-shrink:0}.lang-chevron.flipped{transform:rotate(180deg)}.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:188px;margin:0;padding:6px;list-style:none;background:#fffdf8;border:1px solid rgba(28,25,21,.14);border-radius:14px;box-shadow:0 12px 40px #1c19152e;animation:lang-menu-in .18s ease both}@keyframes lang-menu-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.lang-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;border-radius:9px;background:transparent;color:#201a15;font-size:13px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s ease}.lang-option:hover{background:#e4572e17}.lang-option.active{background:#e4572e24;color:#c43d1a;font-weight:700}.lang-option-code{display:inline-flex;align-items:center;justify-content:center;width:26px;height:20px;border-radius:6px;background:#1c191512;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#201a15b8;flex-shrink:0}.lang-option.active .lang-option-code{background:#e4572e;color:#fff}.lang-option-native{flex:1}.lang-check{color:#e4572e;flex-shrink:0}@media (max-width: 768px){.language-switcher{top:8px;right:10px}.lang-trigger{padding:6px 11px;font-size:11.5px}.lang-current{max-width:72px}}