:root{--bg: #0d0d0f;--bg2: #141418;--bg3: #1c1c22;--border: rgba(255,255,255,.08);--accent: #7c6cfc;--accent2: #a78bfa;--text: #f0f0f5;--text2: #9090a8;--success: #34d399;--error: #f87171;--r: 16px}@media (prefers-color-scheme: light){:root{--bg: #ffffff;--bg2: #f5f5f8;--bg3: #ececf2;--border: rgba(0,0,0,.1);--accent: #6d5cf5;--accent2: #5b46e0;--text: #14141a;--text2: #5c5c6b;--success: #10a97a;--error: #dc4b4b}.navbar{background:#ffffffeb}}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:-apple-system,Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;max-width:640px;margin:0 auto}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,textarea{font-family:inherit;outline:none}.page{min-height:100vh;min-height:100dvh;padding:16px 16px calc(96px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto}@media (hover: hover) and (pointer: fine){.btn:hover{opacity:.9}.navbar-item:hover{color:var(--text)}}.btn:active{transform:scale(.985)}a{color:inherit;text-decoration:none}a:visited{color:inherit}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;border-radius:12px;font-size:15px;font-weight:600;transition:opacity .2s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:var(--bg3);color:var(--text)}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.navbar{position:fixed;bottom:0;left:0;right:0;background:#0d0d0fe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:100}.navbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:none;color:var(--text2);font-size:11px;transition:color .2s}.navbar-item.active{color:var(--accent2)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}@keyframes spin{to{transform:rotate(360deg)}}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:13px;font-weight:600}.badge-accent{background:#7c6cfc26;color:var(--accent2)}.badge-success{background:#34d39926;color:var(--success)}
