@layer base, components, responsive;
@layer base {
  :root { color-scheme: dark; --bg:#101014; --surface:#19191f; --surface-2:#202027; --line:#2b2b34; --text:#f3f2f8; --muted:#96959f; --accent:#ab8cff; --purple:#9061ee; --green:#97d7b5; font-family:Inter,"Segoe UI",system-ui,sans-serif; font-size:16px; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
  button,input,select,textarea { font:inherit; }
  button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button { color:inherit; }
  a { color:inherit; text-decoration:none; }
  button:disabled { opacity:.4; cursor:not-allowed; }
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid #c4acff; outline-offset:4px; }
  h1,h2,h3,p { margin:0; }
  h1 { font-size:2.15rem; letter-spacing:-1.1px; font-weight:650; line-height:1.2; }
  h2 { font-size:1.05rem; font-weight:600; letter-spacing:-.2px; }
  h3 { font-size:1rem; font-weight:600; }
  small { font-size:.8rem; }
  button { border:0; background:none; }
  input,select,textarea { color:var(--text); background:#131318; border:1px solid #36353f; border-radius:9px; padding:11px 12px; min-width:0; max-width:100%; }
  input::placeholder,textarea::placeholder { color:#72717d; }
  textarea { resize:vertical; }
  label { font-size:.875rem; }
  .icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .muted { color:var(--muted); }
  .eyebrow { font-size:.75rem; font-weight:650; letter-spacing:1.5px; color:#8d8a98; }
  .skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:var(--purple); padding:12px; border-radius:8px; }
  .skip-link:focus { top:16px; }
}
@layer components {
  .sidebar { position:fixed; inset:0 auto 0 0; width:224px; background:#141418; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:36px 18px 20px; z-index:30; }
  .brand { display:flex; align-items:center; gap:10px; padding:0 15px; }
  .brand-mark { width:34px; height:34px; background:linear-gradient(140deg,#b895ff,#8950e2); border-radius:10px; display:grid; place-items:center; color:white; }
  .brand-mark .icon { width:25px; height:25px; stroke-width:2.3; }
  .brand-word { font-size:1.5rem; font-weight:800; letter-spacing:3px; }
  .sidebar>.brand { margin-bottom:48px; }
  .nav-label { padding:0 16px; margin-bottom:12px; color:#64626e; letter-spacing:1.4px; font-size:.75rem; font-weight:600; }
  .navigation { display:flex; flex-direction:column; gap:7px; }
  .nav-link { display:flex; align-items:center; gap:13px; height:49px; padding:0 15px; border-radius:9px; color:#a3a0ae; font-size:.9rem; transition:background .2s,color .2s,transform .2s; position:relative; }
  .nav-link:hover { background:#222127; color:#eee; transform:translateX(3px); }
  .nav-link:active { transform:scale(.97); }
  .nav-link.active { color:#c1a8ff; background:#2a203b; font-weight:600; }
  .nav-link.active:after { content:""; width:5px; height:5px; background:#bda0ff; border-radius:50%; margin-left:auto; }
  .nav-link .live-indicator { width:6px; height:6px; background:var(--green); border-radius:50%; }
  .sidebar-bottom { margin-top:auto; }
  .local-card { background:#1b1b21; padding:15px; border:1px solid #28272f; border-radius:11px; margin:25px 0; }
  .local-card .icon { color:var(--accent); width:17px; height:17px; }
  .local-card strong { font-size:.8rem; font-weight:500; }
  .local-card p { font-size:.75rem; line-height:1.6; color:#83808e; margin-top:8px; }
  .user-button { display:flex; align-items:center; width:100%; gap:10px; text-align:left; padding:0 8px; }
  .avatar { background:#322642; color:#c5a8f5; border:1px solid #4a365f; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:600; flex:none; }
  .user-button strong { display:block; font-weight:500; font-size:.85rem; }
  .user-button small { display:block; color:#777380; font-size:.75rem; margin-top:3px; }
  .user-button>.icon { width:15px; margin-left:auto; color:#777380; }
  .workspace { margin-left:224px; }
  .topbar { height:76px; border-bottom:1px solid #25242c; display:flex; align-items:center; justify-content:space-between; padding:0 38px; gap:20px; }
  .breadcrumb { display:flex; align-items:center; gap:13px; font-size:.8rem; color:#716e7d; }
  .breadcrumb .icon { width:13px; height:13px; }
  .breadcrumb span:last-child { color:#c4c0ce; }
  .topbar-right { display:flex; align-items:center; gap:22px; }
  .save-status { display:flex; align-items:center; gap:7px; font-size:.75rem; color:#a29caa; }
  .save-status .icon { width:15px; height:15px; color:#a899bd; }
  .save-status.error { color:#f2a49c; }
  main { max-width:1540px; padding:32px 38px 34px; margin:auto; }
  .page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
  .page-heading p { margin-top:9px; font-size:.875rem; color:var(--muted); line-height:1.6; }
  .actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 16px; min-height:42px; border-radius:9px; font-size:.85rem; font-weight:550; border:1px solid #37353f; background:#1b1a21; transition:background .2s,transform .2s,box-shadow .2s,border-color .2s; }
  .button:hover:not(:disabled) { background:#2a2732; transform:translateY(-2px); box-shadow:0 7px 20px #0003; border-color:#594b69; }
  .button:active:not(:disabled) { transform:translateY(1px) scale(.98); box-shadow:none; }
  .button.primary { border-color:#a378fa; background:linear-gradient(110deg,#a477f3,#8d5be4); color:white; box-shadow:0 3px 12px #7f45d21c; }
  .button.primary:hover:not(:disabled) { background:#a178f0; box-shadow:0 8px 22px #8c5de155; }
  .button.ghost { background:transparent; border-color:transparent; color:var(--muted); }
  .button.ghost:hover { background:#24222b; color:var(--text); }
  .button.danger { color:#f4b0a8; border-color:#72413e; background:#422a2a; }
  .button.small { min-height:34px; padding:7px 11px; font-size:.8rem; }
  .button .icon { width:16px; height:16px; }
  .icon-button { width:36px; height:36px; display:inline-grid; place-items:center; border-radius:8px; color:var(--muted); transition:background .2s,color .2s,transform .2s; }
  .icon-button:hover:not(:disabled) { background:#2b2735; color:var(--text); transform:scale(1.08); }
  .icon-button:active:not(:disabled) { transform:scale(.94); }
  .stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:26px; }
  .stat-card { border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:17px 19px; position:relative; }
  .stat-label { color:#a8a4b2; font-size:.8rem; display:flex; align-items:center; gap:9px; }
  .stat-label .icon { width:16px; height:16px; color:#aaa0bd; }
  .stat-value { margin-top:10px; display:flex; align-items:baseline; gap:6px; font-size:1.8rem; font-weight:650; letter-spacing:-.7px; line-height:1.2; font-variant-numeric:tabular-nums; }
  .stat-value small { color:#777380; font-size:.85rem; font-weight:400; letter-spacing:0; }
  .stat-foot { color:#777380; font-size:.75rem; margin-top:6px; }
  .tabbar { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:22px; }
  .tab { position:relative; display:flex; align-items:center; gap:7px; padding:0 0 14px; font-size:.85rem; color:#8c8799; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s,border-color .2s,transform .2s; }
  .tab:hover { color:#d5c0fb; transform:translateY(-2px); }
  .tab .icon { width:16px; height:16px; }
  .tab.active { color:#bda3f7; border-color:#ac86fa; }
  .progress-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; align-items:stretch; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:14px; }
  .anatomy-card { overflow:hidden; display:flex; flex-direction:column; }
  .card-heading { padding:21px 23px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .card-heading p { margin-top:6px; color:#85808e; font-size:.75rem; line-height:1.6; }
  .subtle-badge { border:1px solid #34313c; border-radius:6px; color:#9b94a7; padding:4px 7px; font-size:.75rem; white-space:nowrap; }
  .bodies { padding:12px 26px 8px; display:flex; gap:10px; align-items:center; justify-content:space-evenly; position:relative; min-height:423px; flex:1; background:radial-gradient(ellipse at 50% 48%,#30253b45,transparent 65%); }
  .body-view { margin:0; width:46%; max-width:245px; text-align:center; }
  .body-view svg { width:100%; height:405px; overflow:visible; }
  .body-view figcaption { color:#8d8799; font-size:.75rem; letter-spacing:2px; margin-top:4px; }
  .body-divider { position:absolute; top:18%; bottom:18%; left:50%; width:1px; background:linear-gradient(transparent,#39313f,transparent); }
  .muscle-shape { stroke:#17151d; stroke-width:2; stroke-linejoin:round; transition:fill .2s,filter .2s,stroke .2s; }
  .muscle-interactive { cursor:pointer; outline:none; }
  .muscle-interactive:hover .muscle-shape,.muscle-interactive:focus-visible .muscle-shape { filter:brightness(1.35); stroke:#bba1f0; stroke-width:4; }
  .muscle-interactive.selected .muscle-shape { stroke:#c3a5ff; stroke-width:4.5; filter:drop-shadow(0 0 3px #a16dfb40); }
  .rank-legend { border-top:1px solid #29262f; display:flex; justify-content:center; flex-wrap:wrap; gap:20px; padding:15px; }
  .scale-note { color:#81798d; text-align:center; font-size:.7rem; line-height:1.5; padding:0 12px 14px; }
  .legend-item { font-size:.75rem; color:#9e96ad; display:flex; align-items:center; gap:6px; }
  .rank-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rank); flex:none; }
  .detail-card { padding:22px; display:flex; flex-direction:column; }
  .detail-overline { display:flex; justify-content:space-between; align-items:center; }
  .detail-overline .icon { color:#a085c6; width:17px; height:17px; }
  .muscle-title { margin:15px 0 6px; font-size:1.75rem; font-weight:600; letter-spacing:-.5px; }
  .muscle-category { color:#8d859a; font-size:.8rem; }
  .rank-badge { display:inline-flex; align-items:center; gap:6px; border-radius:6px; padding:5px 9px; color:var(--rank); background:color-mix(in srgb,var(--rank) 10%,transparent); border:1px solid color-mix(in srgb,var(--rank) 25%,transparent); font-size:.75rem; }
  .rank-badge .icon { width:13px; height:13px; }
  .rank-control { padding:18px 0; margin-top:1px; border-bottom:1px solid var(--line); }
  .rank-control label { display:block; color:#a89db7; font-size:.75rem; margin-bottom:8px; }
  .rank-control strong { color:#cbb2ee; font-size:.8rem; font-weight:600; }
  .rank-control p { color:#e1d7ec; font-size:.8rem; line-height:1.6; margin-top:8px; }
  .rank-control small { font-size:.75rem; color:#77707f; display:block; line-height:1.6; margin-top:8px; }
  .detail-stats { padding:16px 0 12px; display:grid; gap:13px; }
  .detail-stat { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .detail-stat span { font-size:.8rem; color:#96909f; }
  .detail-stat strong { font-size:.85rem; font-weight:500; font-variant-numeric:tabular-nums; }
  .mini-chart-heading { display:flex; justify-content:space-between; color:#a29aa9; font-size:.75rem; margin-top:10px; }
  .bar-chart { height:83px; display:flex; align-items:flex-end; gap:8px; margin-top:15px; border-bottom:1px solid #36303f; }
  .chart-column { flex:1; background:linear-gradient(#aa83f2,#684991); border-radius:4px 4px 0 0; min-height:3px; position:relative; }
  .chart-column.empty { background:#2b2535; }
  .chart-column:hover { filter:brightness(1.25); }
  .chart-dates { display:flex; justify-content:space-between; color:#6f677a; font-size:.75rem; margin-top:7px; }
  .chart-caption { color:#7c738a; font-size:.75rem; margin-top:9px; line-height:1.6; }
  .muscle-exercises-link { color:#b79aea; display:flex; align-items:center; justify-content:center; gap:7px; font-size:.75rem; border-top:1px solid var(--line); padding:13px 0 0; margin-top:16px; }
  .muscle-exercises-link .icon { width:14px; height:14px; }
  .muscle-library { margin-top:18px; padding:21px 23px; }
  .section-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; }
  .section-row span { font-size:.75rem; color:#7c7488; }
  .muscle-chips { display:flex; gap:8px; flex-wrap:wrap; }
  .muscle-chip { display:flex; align-items:center; gap:7px; font-size:.75rem; padding:7px 11px; border:1px solid #35303e; border-radius:7px; color:#a69cae; transition:background .2s,color .2s,transform .2s,border-color .2s; }
  .muscle-chip:hover { background:#27212f; color:#e9e0f7; transform:translateY(-2px); }
  .muscle-chip:active { transform:scale(.97); }
  .muscle-chip.active { border-color:#7958a7; color:#d0b4ff; background:#2a2038; }
  .page-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#65606f; font-size:.75rem; padding:22px 2px 0; }
  .page-footer .icon { width:12px; height:12px; vertical-align:-2px; margin-right:3px; }
  .demo-banner,.storage-banner { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid #4d3868; background:#241c32; padding:11px 16px; border-radius:10px; margin-bottom:23px; font-size:.8rem; color:#c4aadf; }
  .storage-banner { border-color:#835b46; background:#332921; color:#e0b798; }
  .demo-banner button { text-decoration:underline; white-space:nowrap; font-size:.8rem; }
  .empty-state { padding:38px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px; }
  .empty-state>.icon { width:32px; height:32px; color:#a281ca; margin-bottom:4px; }
  .empty-state p { color:var(--muted); max-width:380px; font-size:.875rem; line-height:1.7; }
  .routine-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .routine-card { padding:23px; display:flex; flex-direction:column; min-width:0; transition:border-color .25s,transform .25s,box-shadow .25s; }
  .routine-card:hover { border-color:#604778; transform:translateY(-3px); box-shadow:0 12px 24px #0002; }
  .routine-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .routine-symbol { width:47px; height:47px; border-radius:13px; display:grid; place-items:center; background:#30233e; color:#c2a3ed; }
  .routine-symbol .icon { width:25px; height:25px; }
  .routine-card h2 { font-size:1.3rem; }
  .routine-card>p { margin:8px 0 20px; color:var(--muted); font-size:.8rem; line-height:1.6; min-height:26px; }
  .routine-exercises { list-style:none; padding:18px 0; margin:0 0 18px; border-top:1px solid var(--line); flex:1; display:flex; flex-direction:column; gap:16px; }
  .routine-exercises li { display:flex; gap:9px; font-size:.8rem; color:#c8c2d1; }
  .routine-exercises .icon { width:16px; height:16px; color:#83748f; }
  .routine-buttons { display:flex; gap:8px; }
  .routine-buttons .primary { flex:1; }
  .search-row { display:flex; gap:12px; margin-bottom:22px; }
  .search-wrap { position:relative; flex:1; }
  .search-wrap>.icon { position:absolute; left:14px; top:13px; width:18px; color:#86788d; }
  .search-wrap input { padding-left:43px; width:100%; background:var(--surface); }
  .search-row select { width:210px; background:var(--surface); font-size:.875rem; }
  .exercise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
  .exercise-card { padding:20px; text-align:left; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; display:flex; flex-direction:column; align-items:flex-start; }
  .exercise-card:hover { background:#211c29; border-color:#705487; transform:translateY(-3px); box-shadow:0 10px 22px #0003; }
  .exercise-card:active { transform:scale(.98); }
  .exercise-card-top { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:20px; }
  .exercise-card-top>.icon { color:#aa8ace; width:23px; height:23px; }
  .exercise-card h2 { font-size:.95rem; line-height:1.5; }
  .exercise-card p { color:#898192; font-size:.75rem; margin-top:8px; line-height:1.6; }
  .exercise-score { color:#bfa4ec; margin-top:14px; }
  .equipment-tag { border:1px solid #3a3243; padding:4px 7px; border-radius:5px; font-size:.75rem; color:#a69ab4; }
  .form-stack { display:grid; gap:17px; }
  .field { display:flex; flex-direction:column; gap:8px; }
  .field label { color:#c1b8ca; }
  .form-hint { color:#8b8097; font-size:.75rem; line-height:1.6; }
  .two-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .profile-panel { padding:28px; }
  .profile-heading { display:flex; align-items:center; gap:15px; margin-bottom:28px; }
  .profile-heading .avatar { width:60px; height:60px; font-size:1.2rem; }
  .profile-heading p { margin-top:5px; font-size:.85rem; color:var(--muted); }
  .profile-panel h2 { margin-bottom:8px; }
  .profile-panel>p { color:var(--muted); line-height:1.8; font-size:.875rem; }
  .profile-facts { display:grid; gap:20px; margin-top:25px; }
  .profile-facts>div { display:flex; gap:12px; align-items:flex-start; font-size:.875rem; }
  .profile-facts .icon { color:#a78bc9; }
  .profile-facts small { display:block; color:var(--muted); margin-top:5px; line-height:1.6; }
  .session-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; margin-bottom:20px; border-color:#4a355d; background:#211b2a; }
  .session-summary p { color:#ad9cba; font-size:.8rem; margin-top:7px; }
  .timer { font-variant-numeric:tabular-nums; font-size:1.4rem; color:#c9acf8; }
  .session-exercise { padding:23px; margin-bottom:16px; }
  .session-exercise-heading { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
  .exercise-number { display:grid; place-items:center; width:32px; height:32px; background:#2d223b; border:1px solid #49335f; border-radius:8px; color:#c1a0ed; font-size:.85rem; }
  .session-exercise-heading p { font-size:.75rem; margin-top:4px; color:var(--muted); }
  .set-grid { display:grid; grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) 65px 45px 35px; align-items:center; gap:12px; margin:9px 0; }
  .set-grid.header { font-size:.75rem; color:#8d7f9c; text-align:center; margin-bottom:12px; }
  .set-grid>span { text-align:center; font-size:.85rem; color:#a094af; }
  .set-grid input[type=number] { width:100%; text-align:center; padding:9px; font-size:.9rem; }
  .set-grid input[type=checkbox] { width:23px; height:23px; justify-self:center; accent-color:#a984e9; cursor:pointer; }
  .set-grid.completed input[type=number] { border-color:#426150; background:#1b2921; }
  .session-actions { position:sticky; bottom:16px; display:flex; justify-content:space-between; gap:12px; border:1px solid #43344e; border-radius:12px; padding:13px 18px; background:#211b2cf5; backdrop-filter:blur(12px); z-index:5; }
  .history-list { display:grid; gap:12px; }
  .history-row { padding:20px 24px; display:flex; align-items:center; gap:20px; }
  .history-date { width:49px; text-align:center; padding:8px 0; border-radius:9px; background:#27202f; }
  .history-date strong { display:block; font-size:1.2rem; font-weight:500; }
  .history-date small { color:#9d87ad; font-size:.75rem; }
  .history-info { flex:1; }
  .history-info p { color:var(--muted); font-size:.8rem; margin-top:6px; }
  .history-volume { font-size:.9rem; color:#c3afd4; white-space:nowrap; }
  .large-chart { padding:25px; margin-bottom:18px; }
  .large-chart .bar-chart { height:200px; gap:22px; padding:0 15px; margin-top:35px; }
  .large-chart .chart-column:before { content:attr(data-value); position:absolute; top:-23px; width:100%; text-align:center; color:#afa0c0; font-size:.75rem; }
  .rank-table { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; padding:10px 24px; }
  .rank-table button { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding:15px 0; font-size:.85rem; text-align:left; }
  .rank-table button>span:last-child { display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .rank-table button:hover { color:#d9c3ff; }
  #toast { position:fixed; bottom:24px; left:calc(50% + 112px); transform:translate(-50%,15px); padding:13px 20px; border-radius:10px; background:#332744; border:1px solid #71518c; box-shadow:0 8px 30px #0005; color:#eee5fa; font-size:.85rem; max-width:calc(100vw - 35px); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:110; }
  #toast.visible { opacity:1; transform:translate(-50%,0); }
  dialog { width:min(550px,calc(100vw - 28px)); padding:0; color:var(--text); background:#1c1922; border:1px solid #493851; border-radius:17px; box-shadow:0 20px 100px #0009; max-height:85dvh; }
  dialog[open] { animation:dialog-in .22s cubic-bezier(.2,.8,.2,1) both; }
  dialog::backdrop { background:#07050dba; backdrop-filter:blur(5px); }
  .modal-header { display:flex; justify-content:space-between; align-items:center; padding:21px 24px; border-bottom:1px solid var(--line); }
  .modal-header h2 { font-size:1.2rem; }
  .modal-body { padding:24px; }
  .modal-footer { display:flex; justify-content:flex-end; gap:9px; padding:17px 24px; border-top:1px solid var(--line); }
  .modal-body>p { color:#b3a7bf; font-size:.9rem; line-height:1.75; }
  .exercise-checklist { max-height:240px; overflow:auto; border:1px solid #38303f; border-radius:9px; }
  .exercise-option { display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid #302a36; }
  .exercise-option label { flex:1; display:flex; align-items:center; gap:11px; cursor:pointer; min-width:0; }
  .exercise-option input[type=number] { width:70px; padding:8px; font-size:.8rem; }
  .exercise-option:last-child { border-bottom:0; }
  .exercise-option input[type=checkbox] { width:17px; height:17px; accent-color:#a977ef; flex:none; }
  .exercise-option small { display:block; color:#8f7e9c; margin-top:3px; font-size:.75rem; }
  .exercise-option:hover { background:#2a2232; }
  .form-error { color:#f0a59b; font-size:.8rem; line-height:1.6; }
  .history-detail { list-style:none; padding:0; display:grid; gap:16px; }
  .history-detail li { border-bottom:1px solid #332b3b; padding-bottom:15px; }
  .history-detail p { margin-top:7px; color:#ac9bb9; font-size:.8rem; line-height:1.8; }
  .auth-box { margin-top:20px; padding:16px; border:1px solid #383040; border-radius:11px; background:#1e1b25; }
  .auth-box>p { font-size:.85rem; color:#c9bdd3; margin-bottom:8px; }
  .auth-box>small { display:block; color:#9f94ad; line-height:1.5; margin-bottom:14px; }
  .auth-providers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .auth-provider { justify-content:center; min-height:42px; white-space:normal; text-align:center; }
  .auth-provider-note { display:block; color:#9f94ad; line-height:1.5; margin-top:10px; font-size:.78rem; }
  .auth-divider { display:flex; align-items:center; gap:10px; color:#9f94ad; font-size:.76rem; margin:22px 0 17px; }
  .auth-divider:before,.auth-divider:after { content:''; height:1px; flex:1; background:#41364b; }
  .auth-note { margin-top:20px; padding:15px; border:1px solid #554363; border-radius:10px; background:#292033; font-size:.8rem!important; }
  main>:not(.page-footer) { animation:page-in .28s ease-out both; }
  @keyframes page-in { from {opacity:0; transform:translateY(7px)} to {opacity:1; transform:translateY(0)} }
  @keyframes dialog-in { from {opacity:0; transform:translateY(12px) scale(.98)} to {opacity:1; transform:translateY(0) scale(1)} }
}

@layer responsive {
  @media(min-width:1550px) { .bodies { min-height:460px; } .body-view svg { height:400px; } main { padding-top:38px; } .stat-card { padding:20px 23px; } }
  @media(max-width:1200px) { .sidebar { width:192px; padding-left:13px; padding-right:13px; } .workspace { margin-left:192px; } main { padding:27px 24px; } .topbar { padding:0 24px; } .progress-grid { grid-template-columns:minmax(0,1fr) 280px; gap:14px; } .detail-card { padding:19px; } .card-heading { padding:19px 18px 0; } .subtle-badge { display:none; } .page-heading { align-items:flex-start; } .page-heading .actions { justify-content:flex-end; } .routine-grid,.exercise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #toast { left:calc(50% + 96px); } }
  @media(max-width:960px) { .sidebar { width:78px; padding:27px 12px 20px; } .brand { padding:0; justify-content:center; } .brand-word,.brand-note,.nav-label,.nav-link span,.sidebar-bottom,.nav-link.active:after { display:none; } .navigation { margin-top:43px; } .nav-link { justify-content:center; padding:0; } .nav-link .icon { width:22px; height:22px; } .workspace { margin-left:78px; } .progress-grid { grid-template-columns:minmax(0,1fr) 270px; } .stat-card { padding:15px; } .stat-label { font-size:.75rem; gap:6px; } .page-heading .actions .button { font-size:.75rem; padding:10px 12px; } #toast { left:calc(50% + 39px); } }
  @media(max-width:760px) { .sidebar { inset:auto 0 0; height:74px; width:100%; padding:5px 6px max(6px,env(safe-area-inset-bottom)); border:0; border-top:1px solid #38303e; background:#17131ef5; backdrop-filter:blur(15px); } .brand { display:none; } .navigation { margin:0; flex-direction:row; gap:0; height:100%; } .nav-link { flex:1; height:100%; flex-direction:column; gap:5px; border-radius:8px; } .nav-link:hover { transform:none; } .nav-link span { display:block; font-size:.75rem; } .nav-link.active { background:#2b203b; } .workspace { margin:0; } .topbar { height:58px; padding:0 19px; } .topbar-right { gap:12px; } .topbar .avatar { width:29px; height:29px; font-size:.75rem; } .breadcrumb { font-size:.75rem; gap:9px; } .save-status { font-size:.75rem; } main { padding:25px 18px 100px; } h1 { font-size:1.9rem; } .page-heading { flex-wrap:wrap; gap:17px; margin-bottom:20px; } .page-heading p { font-size:.8rem; margin-top:7px; } .page-heading .actions { justify-content:flex-start; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:22px; } .stat-card { padding:15px 17px; } .stat-label { font-size:.75rem; } .stat-value { font-size:1.75rem; } .stat-foot { font-size:.75rem; } .tabbar { gap:24px; } .tab { font-size:.8rem; gap:6px; } .progress-grid { grid-template-columns:1fr; } .bodies { min-height:405px; padding:12px 15px; } .body-view svg { height:290px; } .body-view { max-width:195px; } .card-heading { padding:18px 19px 0; } .rank-legend { gap:15px; padding:14px 10px; } .detail-card { padding:23px; scroll-margin-top:15px; } .muscle-title { font-size:1.5rem; } .muscle-library { padding:20px; } .section-row { align-items:flex-start; } .section-row span { display:none; } .muscle-chip { padding:8px 10px; } .page-footer { font-size:.75rem; } #toast { left:50%; bottom:88px; width:max-content; } .routine-grid,.exercise-grid { grid-template-columns:1fr; } .search-row { flex-direction:column; } .search-row select { width:100%; } .routine-card { padding:23px; } .two-columns { grid-template-columns:1fr; } .session-summary { padding:17px; } .session-exercise { padding:18px 15px; } .set-grid { gap:5px; grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 45px 28px 27px; } .set-grid.header { font-size:.68rem; } .set-grid input[type=number] { padding:8px 3px; } .set-grid .icon-button { width:27px; } .set-grid .icon { width:16px; } .session-actions { bottom:85px; padding:10px; gap:7px; } .session-actions .button { font-size:.75rem; padding:9px 12px; } .history-row { padding:16px; gap:12px; flex-wrap:wrap; } .history-volume { font-size:.75rem; } .rank-table { grid-template-columns:1fr; } .large-chart { padding:20px; } .large-chart .bar-chart { gap:12px; padding:0; } .demo-banner { font-size:.75rem; align-items:flex-start; } .profile-panel { padding:23px; } }
  @media(max-width:760px) { .stat-foot { display:none; } .stat-card { padding:12px 14px; } .stat-value { margin-top:7px; font-size:1.5rem; } .bodies { min-height:315px; } .body-view svg { height:280px; } }
  @media (min-width:761px) and (max-width:1100px) { .progress-grid { grid-template-columns:1fr; } .bodies { min-height:430px; } .body-view { max-width:245px; } }
  @media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
}


@layer responsive {
  .bodies { min-height:600px; padding:16px 12px 12px; }
  .body-side-switch { display:none; }
  .body-view { width:48%; max-width:none; }
  .body-view svg { display:block; height:560px; width:100%; overflow:hidden; }
  .login-screen { min-height:100dvh; display:grid; place-items:center; padding:28px 18px; background:radial-gradient(ellipse at 50% 20%,#40285b55,transparent 65%); }
  .login-card { width:min(100%,480px); padding:32px; }
  .login-card>.brand { padding:0; margin-bottom:30px; }
  .login-card h1 { font-size:1.8rem; margin-bottom:12px; }
  .login-card>p { color:var(--muted); line-height:1.6; }
  .login-card>.button { margin-top:15px; width:100%; }
  .exercise-option[hidden] { display:none; }
  @media(max-width:760px) {
    .body-side-switch { display:flex; justify-content:center; gap:8px; margin:18px 0 0; }
    .bodies { min-height:560px; padding:10px 4px; }
    .body-view { width:100%; max-width:300px; }
    .body-view svg { height:520px; }
    .bodies[data-body-side=front] .body-view[data-side=back],.bodies[data-body-side=back] .body-view[data-side=front] { display:none; }
    .body-divider { display:none; }
    .login-card { padding:24px; }
    .login-card .brand { display:flex; }
    .login-card .brand-word { display:block; }
  }
}