:root{--bg: #12121a;--surface: #1b1b26;--surface-hi: #23232f;--line: #2e2e3d;--text: #e8e8f0;--text-dim: #9a9aae;--accent: #d98b6a;--danger: #d9605e;--gap: 10px;--radius: 10px;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Noto Sans SC,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}a{color:var(--accent)}button{font:inherit;color:inherit;background:var(--surface-hi);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer}button:hover:not(:disabled){background:var(--line)}button:disabled{opacity:.5;cursor:default}button.danger{color:var(--danger);border-color:transparent;background:transparent}button.danger:hover:not(:disabled){background:#d9605e1f}input,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}textarea{resize:vertical;min-height:72px}.app{max-width:1400px;margin:0 auto;padding:0 var(--gap) calc(var(--gap) + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 0;background:linear-gradient(var(--bg) 70%,transparent)}.topbar h1{font-size:17px;letter-spacing:.08em;text-transform:uppercase;margin:0;color:var(--text-dim)}.spacer{flex:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap);grid-auto-rows:6px}@media(min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.card{display:block;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit}.card img{display:block;width:100%;height:100%;object-fit:cover}.card .text-body{padding:12px;font-size:13px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow:hidden}.card .meta{position:absolute;left:8px;bottom:8px;display:flex;gap:6px}.badge{font-size:11px;padding:2px 7px;border-radius:99px;background:#000000a6;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-dim);font-size:12px;background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 8px,var(--surface-hi) 8px,var(--surface-hi) 16px)}.detail{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding-bottom:40px}.detail img,.detail video{width:100%;border-radius:var(--radius);display:block;background:var(--surface)}.detail .fragment-text{white-space:pre-wrap;line-height:1.7;font-size:15px}.muted{color:var(--text-dim);font-size:13px}.button-link{display:inline-block;text-decoration:none;background:var(--surface-hi);border:1px solid var(--line);border-radius:8px;padding:8px 14px;color:var(--text)}.button-link:hover{background:var(--line)}.dropzone{border:1px dashed transparent;border-radius:var(--radius);padding:4px;transition:border-color .15s,background .15s}.dropzone.dragging{border-color:var(--accent);background:#d98b6a0f}.staged{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.staged-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}.staged-item img,.staged-item video{width:100%;height:100%;object-fit:cover;display:block}.staged-remove{position:absolute;top:4px;right:4px;padding:0;width:22px;height:22px;line-height:1;border-radius:99px;background:#000000b3;border:none;color:#fff}.staged-size{position:absolute;left:4px;bottom:4px;font-size:10px;padding:1px 5px;border-radius:99px;background:#000000b3;color:#fff}.bookmarklet{max-width:720px;margin:32px auto 0;padding:18px;border-top:1px solid var(--line)}.bookmarklet h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 8px}.bookmarklet-chip{display:inline-block;padding:8px 16px;border-radius:8px;background:var(--accent);color:#17110d;font-weight:600;text-decoration:none;cursor:grab}.bookmarklet-code{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:11px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.center{display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:340px;margin:18vh auto 0;padding:0 var(--gap)}.row{display:flex;gap:10px;align-items:center}.error{color:var(--danger);font-size:13px}
