:root{--canvas:#f2e4c9;--bg:#fbf3df;--surface:#fff;--ink:#2a1d14;--divider:#3c1e0f14;--accent:#f08fa7;--accent-ink:#fff;--accent-soft:#f08fa72e;--accent2:#3dbe7c;--danger:#e0574f;--app-max:480px;--nav-h:64px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:Rubik,system-ui,-apple-system,sans-serif;line-height:1.4}@media (width>=481px){body{background:var(--canvas)}.app{box-shadow:0 0 0 1px var(--divider), 0 0 48px #3c1e0f1a}}.app{max-width:var(--app-max);background:var(--bg);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}.hdr{z-index:10;padding:14px 20px 12px;padding-top:calc(14px + env(safe-area-inset-top,0px));background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(180%)blur(20px);border-bottom:.5px solid color-mix(in srgb, var(--divider) 40%, transparent);position:sticky;top:0}.brand{opacity:.5;font-size:13px;font-weight:500}.title{letter-spacing:-.01em;align-items:center;gap:8px;font-size:28px;font-weight:700;display:flex}.badge{background:var(--accent);color:var(--accent-ink);border-radius:12px;justify-content:center;align-items:center;min-width:24px;height:24px;padding:0 8px;font-size:14px;font-weight:600;display:inline-flex}.content{padding:16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom,0px));flex:1}.empty{text-align:center;color:var(--ink);opacity:.4;padding:40px 0;font-size:14px}.banner{border-radius:12px;margin-bottom:12px;padding:12px 14px;font-size:14px}.banner.err{background:color-mix(in srgb, var(--danger) 14%, var(--surface));color:var(--danger)}.card{background:var(--surface);box-shadow:inset 0 0 0 1px var(--divider);border-radius:16px;margin-bottom:10px;padding:14px}.card.row{align-items:center;display:flex}.card.create{align-items:center;gap:8px;display:flex}.head{align-items:center;gap:12px;margin-bottom:12px;display:flex}.avatar{background:var(--accent-soft);width:40px;height:40px;color:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:17px;font-weight:600;display:flex}.avatar.off{background:color-mix(in srgb, var(--ink) 8%, transparent);color:color-mix(in srgb, var(--ink) 45%, transparent)}.meta{flex:1;min-width:0}.name{align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.sub{opacity:.5;margin-top:1px;font-size:13px}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.dot.on{background:var(--accent2)}.dot.off{background:var(--danger)}.field{width:100%;height:44px;box-shadow:inset 0 0 0 1px var(--divider);background:var(--bg);color:var(--ink);font:inherit;border:none;border-radius:12px;padding:0 14px;font-size:15px}.card.create .field{flex:1}.actions{gap:8px;margin-top:10px;display:flex}.btn{height:44px;font:inherit;cursor:pointer;border:none;border-radius:12px;flex:1;font-size:15px;font-weight:600;transition:opacity .12s}.btn:active{opacity:.7}.btn:disabled{opacity:.4}.btn.primary{background:var(--accent);color:var(--accent-ink)}.card.create .btn{flex:none;padding:0 20px}.btn.ghost{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--divider)}.btn.ghost.danger{color:var(--danger)}.nav{max-width:var(--app-max);height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb, var(--bg) 82%, transparent);-webkit-backdrop-filter:saturate(180%)blur(20px);border-top:.5px solid color-mix(in srgb, var(--divider) 50%, transparent);z-index:50;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0}.tab{color:var(--ink);opacity:.4;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-family:inherit;transition:opacity .15s,color .15s;display:flex;position:relative}.tab svg{width:22px;height:22px}.tab span{font-size:11px;font-weight:600}.tab.active{opacity:1;color:var(--accent)}.pip{background:var(--accent);border-radius:50%;width:8px;height:8px;margin-left:16px;position:absolute;top:8px}