/* Demo gym page. Builds on ../assets/app/app.css (member app + owner panel components). */
:root{--dm-bg:#ECEDEF}
html.framed,html.framed body{background:var(--dm-bg)}
body{min-height:100vh;color:var(--ab-ink);font-family:var(--sans)}
.dm-top{position:sticky;top:0;z-index:20;height:46px;display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--ab-ink);color:#E6E8EB;font-size:13.5px}
.dm-top .brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.dm-top .tag{color:#B9BFC8}
.dm-top .sp{flex:1}
.dm-top a.lnk{color:#E6E8EB;text-decoration:none;padding:6px 10px;border-radius:7px}
.dm-top a.lnk:hover,.dm-top a.lnk:focus-visible{background:#262B32;outline:none}
.dm-lang{display:flex;border:1px solid #3A3F47;border-radius:7px;overflow:hidden;font-size:12.5px}
.dm-lang a,.dm-lang span{padding:5px 10px;color:#C9CED5;text-decoration:none}
.dm-lang span{background:#fff;color:var(--ab-ink);font-weight:600}
.dm-wrap{max-width:1280px;margin:0 auto;padding:28px 24px 48px;display:grid;grid-template-columns:414px minmax(0,1fr);gap:36px;align-items:start}
.dm-col h2{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ab-muted);margin:0 0 12px 4px}
.dm-col .dm-note{font-size:12.5px;color:var(--ab-muted);line-height:1.45;margin:14px 6px 0;max-width:414px}
.dm-reset{margin-top:10px;margin-left:4px;font-size:12.5px;color:var(--ab-ink);text-decoration:underline;text-underline-offset:3px}
html.framed .dm-col .device{box-shadow:0 0 0 1.5px #3A3E44 inset,0 24px 50px -20px rgba(20,23,28,.45)}
.m-app button:focus-visible,.dm-owner button:focus-visible{outline:2px solid var(--ab-accent);outline-offset:2px}
.m-body.scroll{overflow-y:auto;scrollbar-width:none}
.m-body.scroll::-webkit-scrollbar{display:none}
.m-flash{display:flex;gap:10px;align-items:flex-start;background:#E9F3EC;color:#14532F;border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.4}
.m-flash.wait{background:#FBF1EC;color:#8E3216}
.m-flash svg{flex:none;margin-top:1px}
.m-over{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;background:#1A1D21}
.m-over .m-sheet{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.m-over.scanning .m-sheet{transform:translateY(110%)}
.m-over .scan-hint{position:absolute;left:0;right:0;bottom:120px;text-align:center;color:#fff;font-size:14px;opacity:.9}
.m-over:not(.scanning) .scan-hint{opacity:0}

/* owner side */
.dm-owner{background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(20,23,28,.12),0 24px 50px -24px rgba(20,23,28,.3);overflow:hidden}
.dm-oh{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--ab-ink);color:#fff}
.dm-oh b{font-size:15px}
.dm-oh .ten{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:14px;border-left:1px solid #3A3F47;font-size:13.5px;color:#D9DCE1}
.dm-oh .sp{flex:1}
.dm-oh .who{font-size:12.5px;color:#B9BFC8;text-align:right;line-height:1.3}
.dm-ob{padding:20px;display:flex;flex-direction:column;gap:16px}
.dm-row2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.dm-wrap>*{min-width:0}
.dm-req td:first-child{white-space:nowrap}
.dm-empty{padding:14px 16px;font-size:13px;color:var(--ab-muted)}
.dm-feed{list-style:none;margin:0;padding:6px 0}
.dm-feed li{display:flex;gap:12px;padding:7px 16px;font-size:13px}
.dm-feed li .mono{color:var(--ab-muted);font-size:12.5px}
.dm-kept{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 4px}
.dm-kept .v{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--ab-accent-text);letter-spacing:-.02em}
.dm-kept .s{font-size:12.5px;color:var(--ab-muted)}
.o-t tr.new td{animation:dm-in .5s ease-out}
@keyframes dm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dm-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.o-t .act-cell{white-space:nowrap}
.o-t .act-cell .o-btn+.o-btn{margin-left:6px}

@media (prefers-reduced-motion:reduce){
  .m-over .m-sheet{transition:none}
  .o-t tr.new td{animation:none}
}
@media (max-width:1080px){
  .dm-wrap{grid-template-columns:minmax(0,1fr);max-width:720px}
  .dm-col.phone{justify-self:center;width:100%;max-width:414px}
}
@media (max-width:560px){
  .dm-top{padding:0 12px;gap:8px;font-size:12.5px}
  .dm-top .tag{display:none}
  .dm-wrap{padding:16px 16px 40px;gap:28px}
  html.framed .dm-col .device{width:100%;height:auto;border-radius:44px;padding:9px}
  html.framed .dm-col .device .screen{width:100%;height:760px;border-radius:36px}
  .dm-row2{grid-template-columns:1fr}
  .dm-oh{flex-wrap:wrap;padding:12px 14px}
  .dm-oh .who{display:none}
  .dm-ob{padding:14px}
  .o-t td,.o-t th{padding-left:10px;padding-right:10px}
  table.o-t.stack thead{display:none}
  table.o-t.stack tr{display:grid;grid-template-columns:1fr auto;padding:8px 6px;border-bottom:1px solid var(--ab-line)}
  table.o-t.stack td{border:0;padding:3px 6px}
  table.o-t.stack td.act-cell{grid-column:1/-1;white-space:normal}
}