:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: #18202a;
  background: #f5f6f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(180deg, #fbfcfd 0, #f3f5f8 100%); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell { width: min(100%, 520px); min-height: 100vh; margin: 0 auto; padding: env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom)); }
.topbar { height: 76px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; text-align: center; }
.topbar h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.topbar p { margin: 3px 0 0; color: #98a1ac; font-size: 11px; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 14px; background: transparent; color: #33404e; display: grid; place-items: center; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.storage-card { display: flex; gap: 16px; align-items: center; margin: 10px 0 28px; padding: 21px 18px; border: 1px solid rgba(219,224,231,.85); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 14px 40px rgba(35,53,73,.07); }
.storage-icon { flex: 0 0 52px; height: 52px; border-radius: 17px; background: #e8f1ff; color: #3478ee; display: grid; place-items: center; }
.storage-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.storage-copy { flex: 1; min-width: 0; }
.storage-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.storage-title span { color: #3478ee; font-variant-numeric: tabular-nums; }
.progress-track { height: 7px; overflow: hidden; border-radius: 10px; background: #e8ebef; }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #397ff0, #65a2ff); transition: width .22s linear; }
.storage-copy p { margin: 8px 0 0; overflow: hidden; color: #99a1ab; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }

.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.section-heading h2 { margin: 0; font-size: 15px; }
.section-heading button { border: 0; background: transparent; color: #8b95a2; font-size: 12px; }
.file-list { overflow: hidden; border: 1px solid #e5e8ec; border-radius: 20px; background: #fff; }
.file-item { min-height: 72px; display: grid; grid-template-columns: 44px 1fr 30px; gap: 13px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eff1f3; }
.file-item { cursor: pointer; outline: none; transition: background-color .15s ease; }
.file-item:active { background: #f5f7fa; }
.file-item:focus-visible { box-shadow: inset 0 0 0 2px #6ca3f5; }
.file-item:last-child { border-bottom: 0; }
.file-item > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.file-item strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.file-item span { color: #a0a7b0; font-size: 10px; }
.file-item > button { border: 0; background: transparent; color: #a5adb6; letter-spacing: 1px; }
.file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.file-icon.blue { color: #357ae8; background: #e9f1ff; }.file-icon.purple { color: #8e5ee9; background: #f1ebff; }.file-icon.orange { color: #e48a36; background: #fff0df; }.file-icon.green { color: #2e9a68; background: #e4f6ed; }
.stop-button { width: 100%; height: 50px; margin-top: 24px; border: 1px solid #d9dee4; border-radius: 15px; background: #fff; color: #5d6875; font-weight: 650; box-shadow: 0 5px 16px rgba(28,43,58,.04); }
.stop-button:disabled { color: #a7afb8; background: #f4f5f6; }
.footer-note { margin: 12px 0 0; text-align: center; color: #abb2bb; font-size: 10px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; padding: 22px; display: grid; place-items: center; background: rgba(12,18,26,.5); backdrop-filter: blur(7px); }
.modal-card { width: min(100%, 390px); padding: 26px 22px 20px; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.2); animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-card h2 { margin: 0; text-align: center; font-size: 19px; }
.modal-card > p { color: #737d89; font-size: 13px; line-height: 1.7; }
.shield-mark { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 19px; color: #377eef; background: #eaf2ff; }
.shield-mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.primary-button, .secondary-button, .text-button { min-height: 46px; border-radius: 13px; border: 0; font-weight: 650; }
.primary-button { color: #fff; background: #377eef; }
.primary-button:disabled { color: #a5acb5; background: #e8eaed; }
.text-button { width: 100%; margin-top: 5px; color: #89929e; background: transparent; font-weight: 500; }
.password-card > p { margin-bottom: 16px; text-align: center; }
.password-card input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #dce1e7; border-radius: 13px; outline: none; font-size: 16px; letter-spacing: .15em; }
.password-card input:focus { border-color: #397ff0; box-shadow: 0 0 0 3px rgba(57,127,240,.1); }
.error-text { min-height: 20px; margin: 5px 2px 3px; color: #d74d4d; font-size: 11px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secondary-button { color: #5f6975; background: #eef0f3; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 11px 18px; border-radius: 12px; transform: translateX(-50%); color: #fff; background: rgba(20,28,38,.88); font-size: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }

@media (min-width: 600px) {
  .app-shell { padding-left: 28px; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }