:root{--bg: #0f172a;--surface: #1e293b;--surface-2: #273449;--border: #334155;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-strong: #0ea5e9;--danger: #f87171;--ok: #34d399;--radius: 14px;--nav-h: 64px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.app{max-width:640px;margin:0 auto;min-height:100%;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-top,0px));padding-top:max(14px,env(safe-area-inset-top,0px));background:#0f172ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.topbar h1{font-size:20px;margin:0;font-weight:700}.topbar .back{font-size:22px;padding:2px 6px;margin-left:-6px}.topbar .spacer{flex:1}.content{padding:16px}.filters{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;-webkit-overflow-scrolling:touch}.filters::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:14px;color:var(--muted);white-space:nowrap}.chip.active{background:var(--accent);color:#04263a;border-color:var(--accent);font-weight:600}.search-wrap{padding:0 16px 8px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.card .thumb{width:100%;aspect-ratio:1 / 1;background:#fff;object-fit:contain}.card .body{padding:10px}.card .title{font-size:14px;font-weight:600;line-height:1.25}.card .meta{font-size:12px;color:var(--muted);margin-top:4px;text-transform:capitalize}.detail-gif{width:100%;max-width:320px;aspect-ratio:1 / 1;margin:0 auto;display:block;background:#fff;border-radius:var(--radius);object-fit:contain}.detail-name{font-size:22px;font-weight:700;margin:16px 0 8px}.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.badge{font-size:12px;padding:5px 10px;border-radius:8px;background:var(--surface-2);color:var(--muted);text-transform:capitalize}.section-title{font-size:15px;font-weight:700;margin:18px 0 10px;color:var(--accent)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--border);line-height:1.45}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#04263a;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:12px;background:var(--accent);color:#04263a;font-weight:700;width:100%}.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn.small{width:auto;padding:8px 12px;font-size:14px;border-radius:10px}.btn:disabled{opacity:.5}.list{display:flex;flex-direction:column;gap:12px}.list-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px}.list-item .avatar{width:52px;height:52px;border-radius:10px;background:#fff;object-fit:contain;flex:0 0 auto}.list-item .grow{flex:1;min-width:0}.list-item .name{font-weight:600}.list-item .sub{font-size:13px;color:var(--muted);margin-top:2px}.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.field{flex:1}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.empty{text-align:center;color:var(--muted);padding:48px 16px}.spinner{text-align:center;color:var(--muted);padding:32px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;background:#0f172af5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);z-index:30}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted)}.bottom-nav a.active{color:var(--accent)}.bottom-nav .ico{font-size:20px;line-height:1}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:40;display:flex;align-items:flex-end}.sheet{background:var(--surface);width:100%;max-width:640px;margin:0 auto;border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow-y:auto}.sheet h3{margin:0 0 14px}.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--accent);color:#04263a;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #0284c780;z-index:25}.set-row{display:grid;grid-template-columns:32px 1fr 1fr 44px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.set-row .idx{color:var(--muted);text-align:center;font-weight:600}.set-row .check{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:18px}.set-row .check.done{background:var(--ok);color:#04321f;border-color:var(--ok)}.stats-row{display:flex;gap:10px;margin-bottom:16px}.stat-box{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 8px;text-align:center}.stat-box .value{font-size:20px;font-weight:700}.stat-box .label{font-size:12px;color:var(--muted);margin-top:2px}.chart-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px}.chart-box svg{width:100%;height:120px;display:block}.divider{height:1px;background:var(--border);margin:16px 0}.muted{color:var(--muted)}.small{font-size:13px}.text-danger{color:var(--danger)}.mt{margin-top:12px}.mb{margin-bottom:12px}