:root{--bg:#eef2f6;--elev:#fff;--ink:#15202b;--muted:#5d6b7a;--line:#15202b1a;--teal:#0e7c86;--teal-soft:#0e7c861f;--amber:#c47a12;--danger:#b42318;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--display:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{background:var(--bg);color:var(--ink);font-family:var(--font);margin:0}body{width:390px;min-height:520px}.spool-app{background:radial-gradient(420px 200px at 0% 0%, #0e7c8624, transparent 55%), radial-gradient(360px 180px at 100% 10%, #c47a121a, transparent 50%), var(--bg);min-height:520px;padding:12px 12px 16px}.spool-header{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.spool-header h1{font-family:var(--display);letter-spacing:-.03em;margin:0;font-size:1.35rem;font-weight:800}.spool-header p{color:var(--muted);margin:2px 0 0;font-size:.72rem}.chip{appearance:none;border:1px solid var(--line);background:var(--elev);color:var(--muted);font:inherit;cursor:pointer;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:600}.chip.on{background:var(--teal-soft);color:var(--teal);border-color:#0e7c8647}.toolbar{flex-direction:column;gap:8px;margin-bottom:8px;display:flex}.search{border:1px solid var(--line);background:var(--elev);width:100%;font:inherit;color:var(--ink);border-radius:10px;outline:none;padding:9px 11px;font-size:.88rem}.search:focus{box-shadow:0 0 0 3px var(--teal-soft);border-color:#0e7c8673}.seg{background:#15202b0f;border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:3px;display:grid}.seg button{appearance:none;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:7px 8px;font-size:.78rem;font-weight:600}.seg button.active{background:var(--elev);color:var(--ink);box-shadow:0 1px 2px #15202b14}.actions{gap:6px;margin-bottom:8px;display:flex}.btn{appearance:none;border:1px solid var(--line);background:var(--elev);color:var(--ink);font:inherit;cursor:pointer;border-radius:9px;padding:7px 10px;font-size:.78rem;font-weight:600}.btn:disabled{opacity:.55;cursor:default}.btn.primary{background:var(--teal);color:#fff;border-color:#0000;flex:1}.btn.ghost{color:var(--muted);background:0 0}.banner{border-radius:9px;margin-bottom:8px;padding:8px 10px;font-size:.78rem}.banner.error{color:var(--danger);background:#b423181a}.banner.toast{background:var(--teal-soft);color:var(--teal)}.meta{color:var(--muted);margin-bottom:8px;font-size:.7rem}.list{flex-direction:column;gap:7px;max-height:360px;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.empty{text-align:center;color:var(--muted);background:var(--elev);border:1px dashed var(--line);border-radius:12px;padding:28px 12px;font-size:.84rem}.item{background:var(--elev);border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr auto;gap:4px;display:grid;overflow:hidden}.item.pinned{box-shadow:inset 3px 0 0 var(--amber);border-color:#c47a1259}.item-main{appearance:none;text-align:left;cursor:pointer;color:inherit;font:inherit;background:0 0;border:0;min-width:0;padding:10px 10px 8px}.item-main:hover{background:#0e7c860a}.preview{white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.35;display:block}.item-meta{color:var(--muted);flex-wrap:wrap;gap:8px;margin-top:6px;font-size:.68rem;display:flex}.host{color:var(--teal);font-weight:600}.item-actions{flex-direction:column;gap:2px;padding:6px 6px 6px 0;display:flex}.icon-btn{appearance:none;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;width:28px;height:28px;font-size:.9rem;line-height:1}.icon-btn:hover{color:var(--ink);background:#15202b0f}.icon-btn.active{color:var(--amber)}.icon-btn.danger:hover{color:var(--danger);background:#b4231814}