:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f7;--bg-tertiary: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #4a4a4a;--text-tertiary: #8a8a8a;--border-color: #d1d1d1;--border-light: #e5e5e5;--accent: #0066cc;--accent-hover: #0052a3;--accent-light: #e6f0ff;--success: #34c759;--warning: #ff9500;--error: #ff3b30;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-normal: .25s ease}:root[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--bg-tertiary: #3a3a3a;--text-primary: #f5f5f7;--text-secondary: #c7c7c7;--text-tertiary: #8a8a8a;--border-color: #4a4a4a;--border-light: #3a3a3a;--accent: #4d94ff;--accent-hover: #66a3ff;--accent-light: #1a3a5c;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast)}.theme-toggle:hover{background:var(--border-color);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.theme-toggle .icon{width:20px;height:20px}.header-bar{width:100%;height:60px;margin-bottom:12px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);transition:border-color var(--transition-normal),background-color var(--transition-normal)}.header-content{max-width:1080px;margin:0 auto;padding:0 16px;height:100%;display:flex;justify-content:space-between;align-items:center}.header-title{font-size:20px;font-weight:600;color:var(--text-primary);margin:0;transition:color var(--transition-normal)}@media screen and (max-width: 600px){.header-content{padding:0 12px}.header-title{font-size:18px}}.page-container{padding:0 16px;margin:0 auto;width:1080px;min-height:100vh;background:var(--bg-primary);transition:background-color var(--transition-normal)}.header-bar{width:100%;height:48px;margin-bottom:12px;line-height:48px;text-align:center;font-size:20px;border-bottom:1px solid var(--border-color);color:var(--text-primary);transition:border-color var(--transition-normal),color var(--transition-normal)}.container{border:2px dashed var(--border-color);padding:20px;background:var(--bg-secondary);transition:border-color var(--transition-normal),background-color var(--transition-normal)}@media screen and (min-width: 1080px){.page-container{width:1080px}.container{padding:20px;min-width:800px;min-height:450px}}@media screen and (max-width: 600px){.page-container{width:100%;padding:12px}.container{padding:4px;width:100%}}.dropzone{position:relative;overflow:hidden}.dropzone.dragover{background-color:var(--bg-tertiary)}.canvas_box{width:100%;height:100%;border:1px solid var(--border-light)}.txt{width:300px;height:22px;font-size:14px}.hide{display:none}.status-bar{display:flex;align-items:center;flex-wrap:wrap;height:34px;margin-bottom:12px;gap:12px}.range-bar{font-size:14px;margin-right:20px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.range{height:20px;vertical-align:bottom;cursor:pointer}.view-rate{width:50px;height:20px;display:inline-block;border:none;background:none;vertical-align:bottom;color:var(--text-primary)}.def_size{height:20px;font-size:14px;margin-right:20px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;padding:0 8px;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.def_size:hover{background:var(--border-color)}.export-btn,.rotate-btn{height:28px;outline:none;border:none;background:var(--accent);color:#fff;padding:0 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color var(--transition-fast),transform var(--transition-fast)}.export-btn:hover,.rotate-btn:hover{background:var(--accent-hover);transform:scale(1.02)}.export-btn:active,.rotate-btn:active{transform:scale(.98)}.rotate-btn{margin-right:20px}.upload-box{padding:8px 0}.file-upload{background-color:var(--accent);color:#fff;padding:5px 10px;border-radius:5px;font-size:.8rem;height:auto;display:inline-block;cursor:pointer;transition:background-color var(--transition-fast)}.file-upload:hover{background-color:var(--accent-hover)}.footer-bar{width:100%;padding:20px 0;text-align:center;font-size:14px;color:var(--text-tertiary);margin-top:24px;border-top:1px solid var(--border-light);transition:border-color var(--transition-normal),color var(--transition-normal)}.footer-bar a{color:var(--text-tertiary);text-decoration:none;transition:color var(--transition-fast)}.footer-bar a:hover{color:var(--accent);text-decoration:underline}.page-container>div:last-of-type{color:var(--text-secondary);margin:16px 0;padding:12px;background:var(--bg-secondary);border-radius:8px;font-size:14px;line-height:1.6}