:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #777;
  --line: #e8e8e8;
  --soft: #f7f7f7;
  --accent: #111;
  --radius: 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #fff; }
body { margin: 0; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
.shell { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 30px; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink); font-weight:750; letter-spacing:-.04em; font-size:20px; }
.brand-mark { width:30px; height:30px; border-radius:10px; background:#111; color:white; display:grid; place-items:center; font-size:16px; letter-spacing:0; }
.live { display:flex; align-items:center; gap:7px; color:#666; font-size:12px; }
.live i, .status-pill i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#20a464; }
.intro { padding: 52px 0 28px; }
.eyebrow { margin:0 0 10px; color:#888; font-size:10px; font-weight:750; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(30px, 6vw, 43px); letter-spacing:-.055em; line-height:1.13; font-weight:760; }
.subhead { margin:13px 0 0; color:#777; line-height:1.7; font-size:14px; }
.upload-card { border:1px dashed #d4d4d4; border-radius:var(--radius); background:#fcfcfc; padding:32px 22px 23px; text-align:center; transition:border-color .15s, background .15s; }
.upload-card.dragover { border-color:#111; background:#f4f4f4; }
.upload-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 14px; border-radius:15px; background:#f0f0f0; }
.upload-icon svg { width:23px; height:23px; fill:none; stroke:#222; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.upload-card h2 { margin:0; font-size:17px; letter-spacing:-.025em; }
.upload-card > p:not(.upload-note) { color:#888; font-size:12px; line-height:1.6; margin:9px 0 19px; }
.button { min-height:43px; padding:0 17px; border:0; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-size:13px; font-weight:650; transition:opacity .15s; -webkit-tap-highlight-color:transparent; }
.button:active { opacity:.82; }
.button:disabled { opacity:.5; cursor:wait; }
.button-dark { color:#fff; background:#151515; }
.button-light { color:#222; background:#f1f1f1; }
.button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.upload-note { margin:19px 0 0; color:#999; font-size:11px; }
.upload-progress { max-width:340px; margin:20px auto 0; text-align:left; }
.progress-track { height:5px; border-radius:8px; background:#e7e7e7; overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; background:#222; transition:width .12s; }
.progress-meta { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:#777; font-size:11px; }
.content-section { margin-top:39px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
.section-heading .eyebrow { margin-bottom:5px; }
.section-heading h2 { margin:0; font-size:19px; letter-spacing:-.035em; }
.status-pill { white-space:nowrap; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; background:#f6f6f6; border-radius:30px; color:#666; font-size:10px; }
.status-pill i { width:6px; height:6px; }
.empty-state { border:1px solid var(--line); border-radius:var(--radius); padding:36px 20px; text-align:center; }
.empty-symbol { width:43px; height:43px; margin:0 auto 13px; border-radius:14px; display:grid; place-items:center; background:#f5f5f5; font-size:23px; color:#555; }
.empty-state h3 { margin:0; font-size:15px; }
.empty-state p { margin:8px 0 0; color:#888; font-size:12px; line-height:1.7; }
.file-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.file-meta { padding:16px; display:flex; align-items:center; gap:12px; min-width:0; }
.file-type { width:41px; height:41px; flex:0 0 41px; display:grid; place-items:center; border-radius:12px; background:#f2f2f2; font-size:10px; font-weight:800; color:#555; }
.file-info { min-width:0; flex:1; }
.file-info h3 { margin:0; overflow-wrap:anywhere; font-size:13px; font-weight:700; }
.file-info p { margin:5px 0 0; font-size:11px; color:#888; }
.latest-tag { padding:5px 8px; border-radius:6px; color:#555; background:#f3f3f3; font-size:10px; }
.image-preview { background:#f7f7f7; padding:12px; display:flex; justify-content:center; }
.image-preview img { display:block; max-width:100%; max-height:65vh; object-fit:contain; border-radius:8px; }
.text-preview { margin:0 12px 12px; border-radius:10px; background:#fafafa; border:1px solid #eee; max-height:460px; overflow:auto; }
.text-preview pre { margin:0; padding:16px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.75; color:#333; }
.file-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:14px 16px 16px; border-top:1px solid #eee; }
.file-actions .button { min-height:40px; }
.save-count { margin-left:auto; color:#777; font-size:11px; white-space:nowrap; }
.mobile-hint { margin:0; padding:0 16px 15px; color:#888; font-size:11px; line-height:1.6; }
.footer { margin-top:auto; padding-top:35px; display:flex; justify-content:space-between; gap:15px; color:#aaa; font-size:10px; line-height:1.6; }
.toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); padding:11px 15px; border-radius:12px; background:#171717; color:#fff; box-shadow:0 8px 28px #0002; font-size:12px; z-index:20; }
.hidden { display:none !important; }
@media (max-width:520px) {
  .shell { width:calc(100% - 28px); padding-top:17px; }
  .intro { padding:40px 0 22px; }
  .upload-card { padding:27px 15px 20px; }
  .content-section { margin-top:31px; }
  .file-meta { padding:13px; gap:10px; }
  .file-actions { padding:12px; gap:8px; }
  .file-actions .button { flex:1 1 auto; }
  .save-count { width:100%; margin:3px 0 0; }
  .footer { padding-top:28px; }
  .image-preview { padding:8px; }
  .image-preview img { max-height:58vh; }
}