:root{
  --bg:#101418;
  --bg-elev:#171c22;
  --card:#1d232b;
  --border:#2a323c;
  --text:#eef1f4;
  --text-dim:#9aa5b1;
  --accent:#ff5a36;
  --accent-dim:#3a2118;
  --green:#3ddc84;
  --radius:14px;
  --nav-h:64px;
  --top-h:56px;
  --bg-translucent-top:rgba(16,20,24,.92);
  --bg-translucent-nav:rgba(16,20,24,.96);
  --overlay:rgba(0,0,0,.6);
  --shadow:rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f6f8;
  --bg-elev:#ffffff;
  --card:#ffffff;
  --border:#e2e5ea;
  --text:#15191e;
  --text-dim:#6b7480;
  --accent:#ff5a36;
  --accent-dim:#ffe4da;
  --green:#1f9d5c;
  --bg-translucent-top:rgba(245,246,248,.92);
  --bg-translucent-nav:rgba(245,246,248,.96);
  --overlay:rgba(20,22,26,.4);
  --shadow:rgba(20,22,26,.12);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background-color .2s ease,color .2s ease;}
body{padding-top:var(--top-h);padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 32px);}
button{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);background:var(--bg-translucent-top);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:50;}
.topbar-inner{max-width:720px;margin:0 auto;height:100%;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;gap:10px;}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.brand{font-weight:800;font-size:18px;letter-spacing:.2px;}
.brand-dot{color:var(--accent);}
.icon-btn{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
  padding:6px 10px;font-size:13px;font-weight:700;cursor:pointer;}
.icon-btn:active{transform:scale(.96);}

.app{max-width:720px;margin:0 auto;padding:14px 16px 24px;min-height:60vh;}

.bottomnav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:var(--bg-translucent-nav);backdrop-filter:blur(10px);border-top:1px solid var(--border);
  display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);}
.nav-btn{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--text-dim);cursor:pointer;font-size:11px;}
.nav-btn.active{color:var(--accent);}
.nav-btn svg{width:22px;height:22px;}

.search-row{display:flex;gap:8px;margin-bottom:12px;}
.search-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:11px 14px;color:var(--text);font-size:15px;}
.search-input::placeholder{color:var(--text-dim);}
.filter-btn{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:0 14px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;position:relative;}
.filter-btn.has-filters{border-color:var(--accent);color:var(--accent);}

.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none;}
.chiprow::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--border);border-radius:999px;
  padding:7px 14px;font-size:13px;color:var(--text-dim);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}

.result-count{color:var(--text-dim);font-size:13px;margin:4px 2px 10px;}

.card-list{display:flex;flex-direction:column;gap:10px;}
.ex-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;cursor:pointer;box-shadow:0 1px 3px var(--shadow);}
.ex-card:active{background:var(--bg-elev);}
.ex-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:10px;background:var(--bg-elev);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:800;font-size:15px;
  text-transform:uppercase;border:1px solid var(--border);overflow:hidden;position:relative;}
.ex-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ex-thumb .thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ex-info{flex:1;min-width:0;}
.ex-name{font-size:15px;font-weight:600;text-transform:capitalize;margin:0 0 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ex-meta{font-size:12.5px;color:var(--text-dim);text-transform:capitalize;}
.ex-fav-btn{flex:0 0 auto;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:6px;}
.ex-fav-btn.active{color:var(--accent);}
.ex-fav-btn svg{fill:none;}
.ex-fav-btn.active svg{fill:currentColor;}

.empty{text-align:center;color:var(--text-dim);padding:50px 16px;font-size:14px;}
.empty-title{color:var(--text);font-weight:700;font-size:16px;margin-bottom:6px;}

.loading{display:flex;align-items:center;justify-content:center;padding:60px 0;color:var(--text-dim);}
.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Detail page */
.detail-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.back-btn{background:var(--card);border:1px solid var(--border);border-radius:10px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.detail-title{font-size:20px;font-weight:800;text-transform:capitalize;flex:1;line-height:1.25;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.tag{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:5px 12px;
  font-size:12.5px;color:var(--text-dim);text-transform:capitalize;}
.tag b{color:var(--text);font-weight:600;}

.hero-gif{width:100%;aspect-ratio:1/1;max-height:340px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.hero-gif img{width:100%;height:100%;object-fit:contain;display:block;}
.hero-gif .hero-fallback{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-dim);font-size:13px;}
.hero-gif .hero-fallback svg{width:34px;height:34px;}
.hero-gif .skeleton{position:absolute;inset:0;background:linear-gradient(90deg,var(--card) 25%,var(--bg-elev) 50%,var(--card) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);margin:18px 0 10px;}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.step{display:flex;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5;}
.step-num{flex:0 0 24px;height:24px;border-radius:50%;background:var(--accent-dim);color:var(--accent);
  font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;}

.action-row{display:flex;gap:10px;margin:20px 0 12px;}
.btn{flex:1;border-radius:12px;padding:13px;font-size:14.5px;font-weight:700;border:1px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;}
.btn:active{transform:scale(.98);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a0d08;}
.btn.danger{color:#ff7a6a;}
.btn svg{width:18px;height:18px;}
.btn .heart-icon{fill:none;stroke:currentColor;stroke-width:1.8;}
.btn.primary .heart-icon{fill:currentColor;}

/* Routines */
.routine-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;cursor:pointer;}
.routine-name{font-weight:700;font-size:16px;margin-bottom:4px;}
.routine-sub{color:var(--text-dim);font-size:12.5px;}
.fab{position:fixed;right:18px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  width:54px;height:54px;border-radius:50%;background:var(--accent);border:none;color:#1a0d08;
  font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(255,90,54,.4);z-index:40;}

.modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:100;display:flex;
  align-items:flex-end;justify-content:center;}
.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:18px 18px 0 0;
  width:100%;max-width:720px;max-height:85vh;overflow-y:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));}
.modal-title{font-size:17px;font-weight:800;margin-bottom:14px;}
.modal label{display:block;font-size:12.5px;color:var(--text-dim);margin:14px 0 6px;font-weight:600;}
.modal input[type=text]{width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:11px 12px;color:var(--text);font-size:15px;}
.filter-section{margin-bottom:6px;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.routine-ex-row{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
.routine-ex-row .ex-name{font-size:14px;}
.remove-x{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px;}

.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.lang-opt{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:11px;text-align:center;cursor:pointer;font-weight:600;font-size:14px;}
.lang-opt.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  transform:translate(-50%,12px);background:var(--bg-elev);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:200;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 16px var(--shadow);}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* Theme toggle switch */
.theme-switch{position:relative;width:50px;height:28px;border-radius:999px;border:1px solid var(--border);
  background:var(--bg-elev);cursor:pointer;flex:0 0 auto;padding:0;}
.theme-switch .track-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;pointer-events:none;}
.theme-switch .track-icons svg{width:13px;height:13px;color:var(--text-dim);}
.theme-switch .thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--accent);transition:transform .2s ease;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px var(--shadow);}
.theme-switch .thumb svg{width:13px;height:13px;color:#1a0d08;stroke-width:2.2;}
.theme-switch[data-on="true"] .thumb{transform:translateX(22px);}

.offline-banner{background:#3a2118;color:#ffb199;font-size:12.5px;text-align:center;padding:7px;
  border-radius:10px;margin-bottom:12px;display:none;}
.offline-banner.show{display:block;}