:root{--color-primary:#2563eb;--color-primary-dark:#1d4ed8;--color-primary-light:#dbeafe;--color-text:#1e293b;--color-text-light:#64748b;--color-bg:#f8fafc;--color-card:#fff;--color-border:#e2e8f0;--color-success:#16a34a;--color-danger:#dc2626;--color-warning:#f59e0b;--radius:12px;--shadow-sm:0 1px 2px #0000000d;--shadow:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000d;--max-width:1200px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans SC,sans-serif;line-height:1.6}.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}.site-header{background:var(--color-card);border-bottom:1px solid var(--color-border);z-index:100;box-shadow:var(--shadow-sm);position:sticky;top:0}.site-header .container{justify-content:space-between;align-items:center;height:56px;display:flex}.site-logo{color:var(--color-primary);font-size:18px;font-weight:700;text-decoration:none}.site-logo span{color:var(--color-text)}.header-nav{gap:24px;display:none}.header-nav a{color:var(--color-text-light);font-size:14px;text-decoration:none;transition:color .2s}.header-nav a:hover{color:var(--color-primary)}@media (width>=768px){.header-nav{display:flex}.site-header .container{height:64px}.site-logo{font-size:20px}}.hero{text-align:center;padding:40px 16px 20px}.hero h1{margin-bottom:8px;font-size:24px;font-weight:700}.hero p{color:var(--color-text-light);max-width:600px;margin:0 auto;font-size:14px}@media (width>=768px){.hero{padding:60px 16px 30px}.hero h1{font-size:32px}.hero p{font-size:16px}}.tool-section{padding:20px 0}.tool-section h2{margin-bottom:16px;font-size:18px;font-weight:600}.tool-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.tool-card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);text-align:center;color:var(--color-text);flex-direction:column;align-items:center;gap:8px;padding:16px 12px;text-decoration:none;transition:all .2s;display:flex}.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow);transform:translateY(-2px)}.tool-card .tool-icon{background:var(--color-primary-light);border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.tool-card .tool-name{font-size:13px;font-weight:500}@media (width>=768px){.tool-grid{grid-template-columns:repeat(4,1fr);gap:16px}.tool-card{padding:20px 16px}.tool-card .tool-icon{width:48px;height:48px;font-size:24px}.tool-card .tool-name{font-size:14px}.tool-section h2{font-size:20px}}@media (width>=1024px){.tool-grid{grid-template-columns:repeat(5,1fr)}}.tool-page{padding:20px 0 40px}.tool-header{text-align:center;margin-bottom:24px}.tool-header h1{margin-bottom:8px;font-size:22px;font-weight:700}.tool-header p{color:var(--color-text-light);font-size:14px}@media (width>=768px){.tool-header h1{font-size:28px}.tool-header p{font-size:15px}}.upload-zone{border:2px dashed var(--color-border);border-radius:var(--radius);text-align:center;background:var(--color-card);cursor:pointer;padding:40px 20px;transition:all .2s}.upload-zone:hover,.upload-zone.dragover{border-color:var(--color-primary);background:var(--color-primary-light)}.upload-zone .upload-icon{margin-bottom:12px;font-size:40px}.upload-zone p{color:var(--color-text-light);font-size:14px}.upload-zone .upload-btn{background:var(--color-primary);color:#fff;border-radius:8px;margin-top:12px;padding:8px 24px;font-size:14px;font-weight:500;display:inline-block}.controls{background:var(--color-card);border-radius:var(--radius);margin-top:16px;padding:16px}.control-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.control-row label{min-width:80px;font-size:14px;font-weight:500}.control-row input[type=range]{flex:1;min-width:100px}.control-row select,.control-row input[type=number],.control-row input[type=text]{border:1px solid var(--color-border);border-radius:8px;padding:6px 12px;font-size:14px}.control-row input[type=color]{border:1px solid var(--color-border);border-radius:8px;width:40px;height:32px}.control-value{color:var(--color-text-light);min-width:40px;font-size:14px}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:10px 24px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-outline{border:1px solid var(--color-border);color:var(--color-text);background:0 0}.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-success{background:var(--color-success);color:#fff}.result-area{margin-top:16px}.result-item{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:12px;padding:16px;display:flex}.result-item img{object-fit:cover;border-radius:8px;max-width:120px;max-height:120px}.result-info{flex:1;min-width:150px}.result-info .filename{word-break:break-all;font-size:14px;font-weight:500}.result-info .filesize{color:var(--color-text-light);margin-top:4px;font-size:12px}.result-info .ratio{color:var(--color-success);margin-top:2px;font-size:12px}.faq-section{margin-top:40px}.faq-section h2{margin-bottom:16px;font-size:18px;font-weight:600}.faq-list{flex-direction:column;gap:8px;display:flex}.faq-item{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.faq-item summary{cursor:pointer;justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;font-weight:500;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--color-text-light);font-size:18px}.faq-item[open] summary:after{content:"-"}.faq-item .faq-answer{color:var(--color-text-light);padding:0 16px 14px;font-size:13px;line-height:1.7}.site-footer{background:var(--color-card);border-top:1px solid var(--color-border);text-align:center;margin-top:40px;padding:24px 0}.site-footer p{color:var(--color-text-light);font-size:13px}.site-footer a{color:var(--color-primary);text-decoration:none}.breadcrumb{align-items:center;gap:8px;margin-bottom:16px;font-size:13px;display:flex}.breadcrumb a{color:var(--color-text-light);text-decoration:none}.breadcrumb a:hover{color:var(--color-primary)}.breadcrumb span{color:var(--color-text-light)}@media (width>=768px){.faq-section h2{font-size:20px}.faq-item summary{padding:16px 20px;font-size:15px}.faq-item .faq-answer{padding:0 20px 16px;font-size:14px}}.toast{background:var(--color-text);color:#fff;z-index:9999;border-radius:8px;padding:10px 20px;font-size:14px;animation:.3s fadeIn;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}