:root{--bg: #0f1020;--surface: #1a1b2e;--surface-2: #24263f;--text: #f3f3fb;--text-dim: #a9abc9;--accent: #7c6bff;--danger: #f87171;--radius: 18px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--bar-h: 56px}@media (prefers-color-scheme: light){:root{--bg: #f4f4fb;--surface: #ffffff;--surface-2: #ececf6;--text: #1a1b2e;--text-dim: #5b5d7a}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}input,textarea{font:inherit}a{color:inherit;text-decoration:none}.app{min-height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:6px;height:calc(var(--bar-h) + var(--safe-top));padding:var(--safe-top) 8px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}.appbar h1{font-size:18px;font-weight:700;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconbtn{border:none;background:transparent;width:40px;height:40px;border-radius:12px;font-size:20px;display:grid;place-items:center;flex:none;transition:background .15s,transform .1s}.iconbtn:active{background:var(--surface-2);transform:scale(.92)}.content{flex:1;padding:16px 16px calc(96px + var(--safe-bottom));animation:fade .18s ease}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.circle-btn{border:none;border-radius:var(--radius);padding:20px 16px;min-height:116px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;color:#fff;position:relative;overflow:hidden;transition:transform .12s}.circle-btn:active{transform:scale(.96)}.circle-btn .emoji{font-size:34px;line-height:1}.circle-btn .label{font-size:17px;font-weight:700}.circle-btn .count{font-size:13px;opacity:.85;font-weight:500}.circle-btn.add{background:var(--surface);color:var(--text-dim);border:2px dashed color-mix(in srgb,var(--text) 18%,transparent);align-items:center;justify-content:center;gap:6px}.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:0 14px;height:46px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--text) 8%,transparent)}.searchbox input{flex:1;border:none;background:transparent;color:var(--text);outline:none;font-size:16px}.appbar .header-search{margin:0;flex:1;min-width:0;height:40px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:22px 2px 8px;font-weight:700}.list{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:12px;background:var(--surface);border:none;width:100%;text-align:left;padding:10px 12px;border-radius:14px;transition:transform .1s,background .15s}.row:active{transform:scale(.985);background:var(--surface-2)}.row .meta{flex:1;min-width:0}.row .name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .sub{font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .chev{color:var(--text-dim);font-size:20px;flex:none}.rel-item{display:flex;align-items:center;gap:6px}.rel-item .row{flex:1;min-width:0}.rel-item .sub{text-transform:capitalize}.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff}.avatar.lg{width:120px;height:120px;font-size:44px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:transform .1s,background .15s}.chip:active{transform:scale(.94)}.filter-chips{margin-top:2px}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.chip .n{opacity:.7;font-weight:500}.fab{position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(20px + var(--safe-bottom));height:56px;border-radius:28px;background:var(--accent);color:#fff;border:none;padding:0 22px 0 18px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .12s;z-index:20}.fab:active{transform:scale(.94)}.fab .plus{font-size:24px;line-height:1}.detail-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:12px 0 8px}.detail-head .big-name{font-size:30px;font-weight:800;line-height:1.1}.fact{display:flex;justify-content:space-between;gap:12px;padding:14px;background:var(--surface);border-radius:14px}.fact .k{color:var(--text-dim);font-weight:600}.fact .v{font-weight:700;text-align:right}.note{background:var(--surface);border-radius:14px;padding:14px;line-height:1.5;white-space:pre-wrap}.field{margin-bottom:16px}.field>label{display:block;font-size:13px;font-weight:700;color:var(--text-dim);margin-bottom:6px}.field input[type=text],.field textarea{width:100%;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:12px;padding:12px 14px;color:var(--text);outline:none;font-size:16px}.field input:focus,.field textarea:focus{border-color:var(--accent)}.field textarea{min-height:84px;resize:vertical}.hook-row{display:flex;gap:8px;margin-bottom:8px}.hook-row input{flex:1;min-width:0}.hook-row .label-in{flex:0 0 38%}.btn{border:none;border-radius:12px;padding:14px 18px;font-size:16px;font-weight:700;background:var(--surface-2);color:var(--text);transition:transform .1s,opacity .15s;width:100%}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:#fff}.btn.danger{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}.btn.ghost{background:transparent;border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}.btn:disabled{opacity:.45}.btn-add-hook{background:transparent;border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);color:var(--text-dim);font-weight:600}.toggle-grid{display:flex;flex-wrap:wrap;gap:8px}.toggle{border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}.toggle.on{background:var(--accent);border-color:var(--accent);color:#fff}.swatch-row,.emoji-row{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent}.swatch.on{border-color:var(--text);transform:scale(1.08)}.emoji-pick{width:40px;height:40px;border-radius:12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:var(--surface);font-size:20px;display:grid;place-items:center}.emoji-pick.on{border-color:var(--accent);background:var(--surface-2)}.empty{text-align:center;color:var(--text-dim);padding:48px 24px;line-height:1.5}.empty .big{font-size:44px;margin-bottom:12px}.hint{font-size:13px;color:var(--text-dim);margin:6px 2px 0;line-height:1.45}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.stat{background:var(--surface);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}.stat-n{font-size:28px;font-weight:800;line-height:1}.stat-label{font-size:13px;color:var(--text-dim);font-weight:500}.splash{height:100%;display:grid;place-items:center;background:var(--bg)}.splash-logo{font-size:56px;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}.stack{display:flex;flex-direction:column;gap:10px}
