:root { --brand:#075844; --brand-dark:#043e31; --mint:#dff8ed; --line:#d8e1dd; --paper:#f5f7f6; }
body { color:#17332b; background:var(--paper); font-family:Arial,"Noto Sans TC",sans-serif; }
.page-container { max-width:960px; }
.text-brand { color:var(--brand)!important; }
.brand-icon { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--brand); border-radius:8px; font-family:Georgia,serif; }
.hero-card { color:#fff; overflow:hidden; border-radius:22px; background:linear-gradient(120deg,var(--brand),var(--brand-dark)); box-shadow:0 16px 40px rgba(4,62,49,.14); }
.hero-label { color:#99e6c9; font-size:.75rem; font-weight:800; letter-spacing:.16em; }
.hero-card h1 { font-size:clamp(1.9rem,5vw,2.4rem); }
.hero-copy { max-width:650px; color:#d5e9e1; line-height:1.75; }
.hero-features { color:#bce8d8; }
.hero-icon { width:140px; height:140px; border-radius:50%; display:grid; place-items:center; color:#0a4c3b; background:rgba(255,255,255,.09); font:700 100px/1 Georgia,serif; }
.step-number { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; color:white; background:var(--brand); border-radius:50%; font-weight:700; }
.dropzone { min-height:180px; display:flex; align-items:center; justify-content:center; border:1.5px dashed #9eb4ab; border-radius:16px; background:#fff; cursor:pointer; transition:.18s ease; outline:none; }
.dropzone:hover,.dropzone:focus-visible,.dropzone.dragging { border-color:var(--brand); background:#f2fbf7; box-shadow:0 0 0 4px rgba(7,88,68,.08); }
.upload-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--brand); border:1px solid #b5c4be; border-radius:12px; font-size:1.5rem; font-weight:700; }
#filePreview { width:100%; }
.preview-image { width:112px; height:112px; object-fit:contain; border:1px solid var(--line); border-radius:14px; background-color:#fff; background-image:linear-gradient(45deg,#eef2f0 25%,transparent 25%),linear-gradient(-45deg,#eef2f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f0 75%),linear-gradient(-45deg,transparent 75%,#eef2f0 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.min-w-0 { min-width:0; }
.file-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tool-card,.result-card,.empty-result { border:1px solid var(--line)!important; border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(28,54,45,.05); }
.size-option { position:relative; height:48px; color:#17332b; border:1px solid #c5d0cc; font-weight:700; }
.size-option:hover { border-color:var(--brand); }
.size-option.active { color:var(--brand-dark); border-color:var(--brand); background:var(--mint); }
.size-check { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--brand); font-size:.8rem; }
.convert-button { height:58px; color:#073d30; border:0; background:#63e8b8; font-size:1.05rem; font-weight:800; }
.convert-button:hover:not(:disabled) { color:#073d30; background:#43dca4; }
.convert-button:disabled { color:#8a9993; background:#dce5e1; }
.empty-result { min-height:90px; border-style:dashed!important; box-shadow:none; }
.result-card { min-height:90px; }
.result-icon { width:52px; height:52px; display:grid; place-items:center; color:var(--brand); background:var(--mint); border-radius:12px; font-size:.75rem; font-weight:900; }
.download-button { color:var(--brand); background:#edf4f1; font-weight:700; }
.download-button:hover { color:var(--brand); background:var(--mint); }
.privacy-note { color:var(--brand-dark); background:#eaf7f1; border-radius:14px; }
.privacy-note p { color:#55756a; }
@media (max-width:575.98px) { .preview-image{width:82px;height:82px}.result-card{flex-wrap:wrap}.download-button{width:100%} }