:root{color-scheme:light;--bg: #fafaf7;--panel: #ffffff;--panel-2: #f4f3ee;--border: #e6e3da;--text: #15151a;--muted: #6f6e74;--accent: #15151a;--accent-ink: #ffffff;--danger: #c0322b;--ok: #0f7a4a;--drop: #15151a;font-family:ui-sans-serif,system-ui,-apple-system,SF Pro Text,Inter,sans-serif;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;background:var(--bg);color:var(--text)}body{font-size:14px;line-height:1.5}button{cursor:pointer;font:inherit;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 14px;transition:background .12s ease,border-color .12s ease}button:hover{background:var(--panel-2);border-color:#d4d1c6}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}button.primary:hover{background:#000}button.ghost{background:transparent;border-color:transparent}button.ghost:hover{background:var(--panel-2)}button.danger{color:var(--danger);border-color:#c0322b40}input,textarea{font:inherit;width:100%;background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;outline:none}input:focus,textarea:focus{border-color:#b9b4a4}textarea{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:13px;resize:vertical;min-height:240px;white-space:pre}.app{max-width:960px;margin:0 auto;padding:32px 20px 80px}.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand-name{font-weight:700;letter-spacing:-.01em;font-size:18px}.brand-tag{color:var(--muted);font-size:12px}.brand-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:var(--muted);transition:background .12s ease,color .12s ease}.brand-link:hover{background:var(--panel-2);color:var(--text)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px}.panel h2{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:0 0 auto}.row.spread{justify-content:space-between}.muted{color:var(--muted)}.tag{display:inline-block;padding:2px 8px;font-size:11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted)}.tag.ok{color:var(--ok);border-color:#0f7a4a40;background:#0f7a4a0f}.dropzone{position:relative;border:1.5px dashed var(--border);border-radius:12px;background:var(--panel-2);transition:border-color .12s ease,background .12s ease}.dropzone.dragging{border-color:var(--drop);background:#15151a0a}.dropzone-empty{padding:56px 20px;text-align:center}.dropzone-empty h3{margin:0 0 6px;font-size:16px;font-weight:600}.dropzone-empty p{margin:0 0 16px;color:var(--muted)}.dropzone-list{padding:12px}.file{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;background:var(--panel)}.file:last-child{margin-bottom:0}.file-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--border)}.file-head input{background:transparent;border:none;padding:4px 6px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px}.file-head input:focus{background:var(--panel-2)}.file textarea{border:none;border-radius:0;background:var(--panel)}.share-box{display:flex;gap:8px;align-items:stretch}.share-box input{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px}.banner{background:#15151a0a;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:16px}.banner.error{background:#c0322b0f;border-color:#c0322b40;color:var(--danger)}.banner.warn{background:#b482140f;border-color:#b4821440;color:#8a5a10}.viewer-file pre{margin:0;padding:14px 16px;background:var(--panel-2);border-radius:8px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;white-space:pre;overflow-x:auto;max-height:480px}.tabs{display:flex;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}.tab{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 12px;font-size:13px;color:var(--muted);cursor:pointer}.tab:hover{background:var(--panel-2);color:var(--text)}.tab.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.tab.active:hover{background:#000}.preview-panel{padding:12px}.preview-frame{width:100%;height:min(78vh,820px);border:1px solid var(--border);border-radius:8px;background:#fff;display:block}.preview-note{font-size:11px;color:var(--muted);margin-top:8px;padding:0 4px;line-height:1.5}.modal-backdrop{position:fixed;inset:0;background:#14141873;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade-in .14s ease-out}.modal{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 24px 60px #0f0f142e,0 4px 14px #0f0f1414;animation:pop-in .18s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.locked-skeleton{filter:blur(2px);opacity:.55;pointer-events:none;user-select:none}.skeleton-title{width:220px;height:18px;background:var(--panel-2);border-radius:6px;margin-bottom:8px}.skeleton-line{width:140px;height:12px;background:var(--panel-2);border-radius:6px}.skeleton-block{width:100%;height:220px;background:var(--panel-2);border-radius:8px}footer{margin-top:32px;font-size:12px;color:var(--muted);text-align:center}footer a{color:var(--muted)}@media(max-width:640px){body{font-size:13px}.app{padding:20px 14px 60px}.panel{padding:16px;border-radius:12px}.brand{margin-bottom:20px}.brand-name{font-size:17px}.brand-tag{font-size:11px}.dropzone-empty{padding:36px 16px}.dropzone-empty h3{font-size:15px}.dropzone-list{padding:8px}.file textarea{min-height:180px}.share-box{flex-direction:column}.share-box input{font-size:11px}.row{gap:8px}button{padding:9px 12px}.viewer-file pre{font-size:12px;max-height:360px}}