:root { --ink:#172033; --muted:#687386; --line:#dfe4ec; --soft:#f5f7fa; --accent:#246bfe; --danger:#c9362b; --radius:12px; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:flex; flex-direction:column; }
a { color:var(--accent); }
.site-header { height:68px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.nav,.main,.footer-inner { width:min(720px,calc(100% - 32px)); margin:auto; }
.nav { display:flex; align-items:center; gap:24px; }
.brand { color:var(--ink); font-size:18px; font-weight:700; text-decoration:none; margin-right:auto; }
.nav-link { color:var(--muted); text-decoration:none; font-size:14px; }
.nav-link:hover { color:var(--ink); }
.main { flex:1; padding:68px 0 80px; }
h1 { font-size:clamp(30px,7vw,46px); letter-spacing:-.04em; margin:0 0 14px; }
.lead { color:var(--muted); font-size:17px; line-height:1.7; margin:0 0 38px; max-width:600px; }
.actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.action { padding:28px 18px 28px 0; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }
.action + .action { padding-left:28px; border-left:1px solid var(--line); }
.action strong { display:block; font-size:20px; margin-bottom:8px; }
.action span { color:var(--muted); line-height:1.55; font-size:14px; }
.field { margin-bottom:22px; }
label { display:block; font-weight:700; font-size:14px; margin-bottom:9px; }
textarea,input { width:100%; border:1px solid #cdd4df; border-radius:var(--radius); color:var(--ink); background:#fff; font:inherit; outline:none; }
textarea { min-height:210px; padding:16px; resize:vertical; line-height:1.6; }
input { height:50px; padding:0 15px; }
textarea:focus,input:focus,.dropzone:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(36,107,254,.14); }
.dropzone { border:1px dashed #aeb8c6; border-radius:var(--radius); padding:26px; text-align:center; background:var(--soft); transition:.15s ease; }
.dropzone.is-over { border-color:var(--accent); background:#eef4ff; }
.dropzone p { margin:0 0 7px; font-weight:700; }
.dropzone small,.help { color:var(--muted); line-height:1.6; }
.file-trigger { color:var(--accent); cursor:pointer; text-decoration:underline; }
#file-input { position:absolute; opacity:0; width:1px; height:1px; }
.file-list { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.file-item { display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; text-align:left; }
.file-thumb { width:44px; height:44px; padding:0; border:0; border-radius:8px; overflow:hidden; background:#e8edf4; display:grid; place-items:center; color:var(--muted); font-size:11px; }
button.file-thumb { cursor:zoom-in; }
.file-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.file-size { color:var(--muted); font-size:12px; margin-top:3px; }
.remove { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:8px; font-size:18px; }
.button { min-height:50px; padding:0 22px; border:0; border-radius:var(--radius); background:var(--accent); color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
.button:hover { background:#155be2; }
.button:active { transform:translateY(1px); }
.button:disabled { opacity:.55; cursor:wait; }
.error { color:var(--danger); font-size:14px; min-height:22px; margin:10px 0; }
.result { margin-top:32px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); text-align:center; }
.result[hidden] { display:none; }
.code { font:700 38px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; margin:8px 0 20px; }
.qr { width:180px; height:180px; }
.share-line { display:flex; gap:8px; margin-top:18px; }
.share-line input { min-width:0; }
.share-line .button { flex:none; }
.content-block { margin:18px 0 0; }
.content-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 12px; }
.content-label { color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.content-text { white-space:pre-wrap; word-break:break-word; line-height:1.75; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.button--ghost { background:transparent; color:var(--accent); border:1px solid rgba(36,107,254,.28); }
.button--ghost:hover { background:rgba(36,107,254,.08); }
.download-list { display:grid; gap:12px; margin-top:24px; }
.download { border:1px solid var(--line); border-radius:var(--radius); padding:12px; display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; color:var(--ink); text-decoration:none; }
.download img { width:72px; height:60px; object-fit:cover; border-radius:8px; background:var(--soft); }
.download-preview { border:0; padding:0; background:transparent; cursor:zoom-in; align-self:stretch; }
.download-preview img { display:block; }
.download-actions { display:flex; gap:8px; justify-self:end; flex-wrap:wrap; }
.download-action { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.download-icon { width:72px; height:60px; display:grid; place-items:center; background:var(--soft); border-radius:8px; color:var(--muted); font-size:12px; }
.image-modal[hidden] { display:none; }
.image-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; }
.image-modal__backdrop { position:absolute; inset:0; border:0; background:rgba(10,14,20,.82); cursor:zoom-out; }
.image-modal__panel { position:relative; z-index:1; width:min(92vw,1100px); max-height:88vh; display:grid; gap:12px; padding:14px; border-radius:18px; background:#fff; box-shadow:0 24px 90px rgba(0,0,0,.38); }
.image-modal__image { width:100%; max-width:100%; max-height:76vh; object-fit:contain; display:block; border-radius:12px; background:#111; }
.image-modal__caption { color:var(--muted); font-size:14px; line-height:1.4; word-break:break-word; }
.image-modal__close { position:absolute; top:10px; right:10px; width:38px; height:38px; border:0; border-radius:999px; background:rgba(23,32,51,.88); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:12px; padding:22px 0; text-align:center; }
.site-footer a { color:inherit; }
@media (max-width:600px) { .main{padding-top:44px}.actions{grid-template-columns:1fr}.action + .action{padding-left:0;border-left:0}.nav{gap:14px}.share-line{flex-direction:column}.content-toolbar{flex-direction:column;align-items:flex-start}.download{grid-template-columns:56px 1fr}.download-actions{grid-column:1/-1;justify-self:stretch}.download .button{flex:1}.download img,.download-icon{width:56px;height:50px}.image-modal__panel{width:min(96vw,1100px);padding:10px}.image-modal__image{max-height:70vh} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }