:root { color-scheme: light; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; color: #152238; background: #eef4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0%, #fff 0, #eef4f8 44%, #e5eef5 100%); }
.shell { width: min(940px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 26px; }
.hero { padding: 22px 8px 26px; }
.eyebrow { color: #3d6d88; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 10px 0 8px; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.04em; }
.intro { margin: 0; color: #5b6b7d; font-size: 1.05rem; }
.card { background: rgba(255,255,255,.93); border: 1px solid #d6e0e8; border-radius: 24px; box-shadow: 0 18px 60px rgba(47,74,94,.12); padding: clamp(22px, 4vw, 40px); }
h2 { margin: 0 0 16px; font-size: 1.2rem; }
h2:not(:first-child) { margin-top: 30px; }
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
label { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; }
select { min-height: 42px; border: 1px solid #aebdca; border-radius: 10px; background: #fff; padding: 0 34px 0 12px; color: #152238; font: inherit; }
.arrow { color: #3d6d88; font-size: 1.35rem; font-weight: 700; }
.note { color: #657789; font-size: .92rem; }
.mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mode-option { align-items: flex-start; border: 1px solid #d7e2e9; border-radius: 13px; padding: 13px; background: #fbfdfe; cursor: pointer; }
.mode-option.selected, .mode-option:has(input:checked) { border-color: #53a7a5; background: #f0fbfa; box-shadow: 0 0 0 2px rgba(83,167,165,.12); }
.mode-option input { margin-top: 4px; accent-color: #1e7187; }
.mode-option span { display: inline-flex; flex-direction: column; gap: 4px; }
.mode-option small { color: #708292; font-size: .8rem; font-weight: 400; line-height: 1.35; }
.drop-zone { margin-top: 28px; min-height: 250px; border: 2px dashed #96adbc; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: #53687a; background: #f8fbfd; transition: .2s ease; cursor: pointer; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragover { border-color: #1e7187; background: #eff9fb; outline: none; transform: translateY(-1px); }
.drop-zone strong { color: #1d3549; font-size: 1.2rem; }
.drop-zone small { margin-top: 8px; color: #788b9b; }
.upload-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #d9eff1; color: #1e7187; font-size: 1.6rem; font-weight: 900; }
.button { border: 0; border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 800; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(.98); }
.primary { color: #fff; background: #1e7187; box-shadow: 0 5px 12px rgba(30,113,135,.2); }
.secondary { color: #24465b; background: #e4edf3; }
.text-button { border: 0; background: transparent; color: #bb4e4e; cursor: pointer; font: inherit; font-weight: 700; }
.file-panel { margin-top: 26px; border-top: 1px solid #e0e8ee; padding-top: 20px; }
.file-panel-head, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.file-list { max-height: 290px; overflow: auto; padding: 0; margin: 14px 0 20px; list-style: none; border: 1px solid #e0e8ee; border-radius: 12px; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #edf1f4; font-size: .93rem; }
.file-list li:last-child { border-bottom: 0; }
.file-list .size { color: #8493a0; white-space: nowrap; }
.progress-wrap { margin-top: 18px; color: #617385; font-size: .9rem; }
.progress-bar { height: 8px; overflow: hidden; border-radius: 20px; background: #e4edf3; margin-bottom: 8px; }
.progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #53a7a5; transition: width .2s ease; }
footer { display: flex; justify-content: space-between; gap: 10px; padding: 20px 8px 0; color: #748595; font-size: .82rem; }
footer a { color: #2d6d82; }
.hidden { display: none !important; }
@media (max-width: 700px) { .mode-options { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .shell { width: min(100% - 20px, 940px); padding-top: 18px; } .card { border-radius: 18px; padding: 20px 16px; } .controls { align-items: flex-start; flex-direction: column; } .arrow { transform: rotate(90deg); margin-left: 8px; } label { width: 100%; justify-content: space-between; } label select { flex: 1; min-width: 0; } .drop-zone { min-height: 220px; } footer { flex-direction: column; } }