/* Interactive demo of the Swymetric swimmer app inside the hero phone on
   index.html. Rendered by demo-app.js into #sx-app. Every class starts with
   sx- so nothing here touches the rest of the page. Sizes are chosen for the
   phone's real width (about 290px): body text 12.5px, nothing under 10px. */

.phone-screen.sx-host{padding:0!important;color:inherit}

.sx-app{
  --sx-primary:#00BFFF;--sx-primary-rgb:0,191,255;--sx-surface:rgba(0,191,255,.15);
  --sx-card:rgba(9,32,44,.82);--sx-nav:rgba(6,24,34,.94);--sx-sheet:rgba(6,22,32,.97);
  --sx-border:rgba(94,214,230,.28);--sx-border-light:rgba(94,214,230,.16);
  --sx-text:#F0F6FA;--sx-mid:#C4D7E0;--sx-muted:#8EAEBF;
  --sx-success:#3DD68C;--sx-warning:#E6B422;--sx-error:#FF6B6B;--sx-gold:#F5C542;
  --sx-field:rgba(4,18,26,.55);--sx-ring:#0A2A4A;
  --sx-glow:0 0 14px rgba(0,191,255,.22);
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12.5px;line-height:1.4;color:var(--sx-text);
  background:linear-gradient(180deg,rgba(3,22,34,.76),rgba(2,14,24,.9)),url('section-water.jpg') center/cover,#06202E;
  -webkit-tap-highlight-color:transparent;text-align:left
}
.sx-app[data-theme="light"]{
  --sx-primary:#1A4FCC;--sx-primary-rgb:26,79,204;--sx-surface:rgba(26,79,204,.09);
  --sx-card:#FFFFFF;--sx-nav:#FFFFFF;--sx-sheet:#FFFFFF;
  --sx-border:#D1E8EB;--sx-border-light:#EBF4F6;
  --sx-text:#16202A;--sx-mid:#3D4A5C;--sx-muted:#5B6B72;
  --sx-success:#15803D;--sx-warning:#B45309;--sx-error:#DC2626;--sx-gold:#E0A100;
  --sx-field:#F4F8F9;--sx-ring:#FFFFFF;--sx-glow:0 2px 8px rgba(15,40,60,.08);
  background:#F4F8F9
}
/* :where() keeps these resets at the weight of one class, so every sx-
   component rule below (buttons, inputs) wins over them. */
.sx-app :where(*){box-sizing:border-box}
.sx-app :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;line-height:inherit}
.sx-app :where(input,textarea){font:inherit;color:var(--sx-text)}
.sx-app :where(svg){display:block;flex-shrink:0}

/* Status bar */
.sx-status{display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 16px;font-size:10.5px;font-weight:600;flex-shrink:0;color:var(--sx-text);opacity:.9}
.sx-status-icons{display:flex;gap:5px;align-items:center}

/* Screens */
.sx-stack{position:relative;flex:1;min-height:0;overflow:hidden}
.sx-screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:8px 12px 84px;scrollbar-width:none;overscroll-behavior:contain}
.sx-screen::-webkit-scrollbar{display:none}
.sx-screen.sx-enter{animation:sxIn .32s cubic-bezier(.2,.8,.2,1)}
.sx-screen.sx-enter-back{animation:sxBack .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sxIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes sxBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.sx-enter > *{animation:sxRise .4s ease both}
.sx-enter > *:nth-child(2){animation-delay:.04s}.sx-enter > *:nth-child(3){animation-delay:.08s}
.sx-enter > *:nth-child(4){animation-delay:.12s}.sx-enter > *:nth-child(5){animation-delay:.16s}
.sx-enter > *:nth-child(n+6){animation-delay:.2s}
@keyframes sxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Headers */
.sx-title{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:2px 0 2px}
.sx-sub{font-size:11.5px;color:var(--sx-muted);margin-bottom:10px}
.sx-bar{display:flex;align-items:center;gap:8px;margin:0 -2px 10px}
.sx-bar-title{flex:1;font-size:15.5px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-icon-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--sx-text)}
.sx-icon-btn:active{background:var(--sx-surface)}
.sx-chip-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sx-surface);color:var(--sx-primary);position:relative}
.sx-app[data-theme="swymetric"] .sx-chip-btn{background:var(--sx-nav);border:1px solid var(--sx-primary);box-shadow:0 0 10px rgba(0,191,255,.45)}
.sx-chip-btn.sx-solid{background:var(--sx-primary);color:#fff;border-color:var(--sx-primary)}
.sx-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}

/* Cards, sections */
.sx-card{background:var(--sx-card);border:1px solid var(--sx-border-light);border-radius:14px;padding:11px 12px;box-shadow:var(--sx-glow)}
.sx-card + .sx-card{margin-top:8px}
.sx-tap{cursor:pointer;transition:transform .12s ease,border-color .2s ease}
.sx-tap:active{transform:scale(.98)}
.sx-tap:hover{border-color:var(--sx-border)}
.sx-section{display:flex;justify-content:space-between;align-items:baseline;margin:14px 2px 7px}
.sx-section h3{font-size:13.5px;font-weight:700;margin:0}
.sx-link{font-size:11.5px;font-weight:600;color:var(--sx-primary)}
.sx-muted{color:var(--sx-muted)}.sx-mid{color:var(--sx-mid)}
.sx-small{font-size:11px}.sx-tiny{font-size:10px}
.sx-row{display:flex;align-items:center;gap:9px}
.sx-grow{flex:1;min-width:0}
.sx-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-strong{font-weight:700}
.sx-time{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:-.02em}
.sx-divider{height:1px;background:var(--sx-border-light);margin:9px 0}
.sx-empty{text-align:center;padding:22px 10px;color:var(--sx-muted);font-size:12px}

/* Buttons */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:11px;font-weight:700;font-size:12.5px;background:var(--sx-primary);color:#fff!important;width:100%;transition:transform .12s ease,filter .2s ease}
.sx-btn:active{transform:scale(.97)}
.sx-btn.sx-outline{background:transparent;border:1.5px solid var(--sx-primary);color:var(--sx-primary)!important}
.sx-btn.sx-small-btn{height:30px;font-size:11.5px;padding:0 11px;width:auto;border-radius:9px}
.sx-btn.sx-done{background:var(--sx-success)}
.sx-btn.sx-danger{background:transparent;border:1.5px solid var(--sx-error);color:var(--sx-error)!important}
.sx-btn[disabled]{opacity:.5;cursor:default}
.sx-seg{display:flex;background:var(--sx-field);border:1px solid var(--sx-border-light);border-radius:11px;padding:3px;gap:3px}
.sx-seg button{flex:1;height:30px;border-radius:8px;font-size:11.5px;font-weight:600;color:var(--sx-muted);text-align:center}
.sx-seg button.sx-on{background:var(--sx-primary);color:#fff}
.sx-seg button.sx-on.sx-no{background:var(--sx-error)}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px}
.sx-chip{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--sx-border);font-size:11.5px;font-weight:600;color:var(--sx-mid);display:inline-flex;align-items:center;gap:5px}
.sx-chip.sx-on{background:var(--sx-primary);border-color:var(--sx-primary);color:#fff}
.sx-pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--sx-surface);color:var(--sx-primary);white-space:nowrap}
.sx-pill.sx-green{background:rgba(61,214,140,.15);color:var(--sx-success)}
.sx-pill.sx-amber{background:rgba(230,180,34,.16);color:var(--sx-warning)}
.sx-pill.sx-red{background:rgba(255,107,107,.15);color:var(--sx-error)}
.sx-pill.sx-gold{background:linear-gradient(135deg,#F7D774,#E0A100);color:#3B2600}

/* Home */
.sx-greet-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1A4FCC,#00BFFF);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;box-shadow:0 0 0 2px var(--sx-ring),0 0 0 3.5px var(--sx-primary)}
.sx-greet-small{font-size:11px;color:var(--sx-muted)}
.sx-greet-name{font-size:17px;font-weight:800;line-height:1.15}
.sx-logo{width:30px;height:30px;border-radius:8px}
.sx-home-panel{border:1px solid var(--sx-primary);border-radius:18px;padding:10px;background:var(--sx-nav);box-shadow:0 0 20px rgba(var(--sx-primary-rgb),.35);margin-top:4px}
.sx-app[data-theme="light"] .sx-home-panel{background:var(--sx-surface)}
.sx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.sx-stat{background:var(--sx-card);border:1px solid var(--sx-border-light);border-radius:12px;padding:9px 4px 8px;text-align:center}
.sx-stat-icon{width:30px;height:30px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;background:var(--sx-surface);color:var(--sx-primary)}
.sx-stat-val{font-size:16px;font-weight:800;line-height:1.1}
.sx-stat-label{font-size:10px;color:var(--sx-muted);margin-top:1px}
.sx-insights{display:flex;width:100%;text-align:left;align-items:center;gap:10px;margin-top:9px;padding:11px;border-radius:14px;border:1.5px solid var(--sx-primary);background:var(--sx-nav);box-shadow:0 0 16px rgba(var(--sx-primary-rgb),.5)}
.sx-app[data-theme="light"] .sx-insights{background:var(--sx-surface)}
.sx-insights-icon{width:38px;height:38px;border-radius:50%;background:var(--sx-primary);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.sx-insights-title{font-size:14px;font-weight:800}
.sx-notice-banner{display:flex;align-items:center;gap:8px;margin-top:9px;padding:9px 11px;border-radius:12px;background:var(--sx-surface);border:1px solid rgba(var(--sx-primary-rgb),.3);color:var(--sx-primary);font-weight:600;font-size:12px}
.sx-dot{width:8px;height:8px;border-radius:50%;background:var(--sx-error);flex-shrink:0}
.sx-ev{display:flex;gap:10px;align-items:center}
.sx-datebox{width:44px;flex-shrink:0;border-radius:10px;background:var(--sx-surface);text-align:center;padding:5px 0;color:var(--sx-primary)}
.sx-datebox b{display:block;font-size:17px;line-height:1.05}
.sx-datebox span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sx-sess{display:flex;gap:10px;align-items:center;border-left:3px solid var(--sx-primary)}
.sx-sess.sx-t-gym{border-left-color:#9E54BD}.sx-sess.sx-t-dry{border-left-color:#F08E32}
.sx-sess-time{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;width:40px;flex-shrink:0}

/* Officials (compact, as on the real home screen) */
.sx-off{margin-top:9px;border:1px solid rgba(230,180,34,.4);border-radius:14px;padding:9px 11px;background:var(--sx-card);box-shadow:0 0 6px rgba(230,180,34,.2)}
.sx-off-card{border:1px solid var(--sx-border-light);border-radius:10px;padding:7px 9px;margin-top:6px;background:var(--sx-field)}

/* Day strip */
.sx-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px}
.sx-day{border-radius:11px;padding:6px 0 5px;text-align:center;border:1px solid var(--sx-border-light);background:var(--sx-card)}
.sx-day span{display:block;font-size:9.5px;color:var(--sx-muted);font-weight:600;text-transform:uppercase}
.sx-day b{display:block;font-size:14px;margin-top:1px}
.sx-day.sx-on{background:var(--sx-primary);border-color:var(--sx-primary)}
.sx-day.sx-on span,.sx-day.sx-on b{color:#fff}
.sx-day i{display:block;width:4px;height:4px;border-radius:50%;background:var(--sx-primary);margin:2px auto 0}
.sx-day.sx-on i{background:#fff}

/* Ticks */
.sx-tick-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--sx-border-light);cursor:pointer}
.sx-tick-row:last-child{border-bottom:0}
.sx-box{width:20px;height:20px;border-radius:6px;border:1.8px solid var(--sx-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s ease;color:#fff}
.sx-box.sx-on{background:var(--sx-success);border-color:var(--sx-success);animation:sxPop .3s ease}
.sx-box.sx-blue.sx-on{background:var(--sx-primary);border-color:var(--sx-primary)}
.sx-evnum{min-width:26px;height:22px;border-radius:7px;background:var(--sx-surface);color:var(--sx-primary);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
@keyframes sxPop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.sx-progress{height:7px;border-radius:999px;background:var(--sx-field);overflow:hidden;border:1px solid var(--sx-border-light)}
.sx-progress > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sx-primary),var(--sx-success));transition:width .45s cubic-bezier(.2,.8,.2,1)}

/* More grid */
.sx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sx-tile{background:var(--sx-card);border:1px solid var(--sx-border-light);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--sx-glow)}
.sx-tile b{font-size:12.5px;line-height:1.2}
.sx-tile > span:not(.sx-tile-icon){font-size:10.5px;color:var(--sx-muted);line-height:1.3}

/* Week summary row (Club Training, Personal Training) */
.sx-week{display:flex;align-items:stretch;padding:10px 6px}
.sx-week-stat{flex:1;text-align:center;display:flex;flex-direction:column;gap:2px}
.sx-week-stat + .sx-week-stat{border-left:1px solid var(--sx-border-light)}
.sx-week-stat b{font-size:17px;font-weight:800;line-height:1.1}
.sx-week-stat span{font-size:10px;color:var(--sx-muted);font-weight:600}

/* Results and chart */
.sx-pb-time{font-size:19px;color:var(--sx-primary)}
.sx-chart{width:100%;height:130px;display:block}
.sx-chart path.sx-line{stroke-dasharray:600;stroke-dashoffset:600;animation:sxDraw 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes sxDraw{to{stroke-dashoffset:0}}

/* Rankings */
.sx-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:6px 0 12px}
.sx-pod{flex:1;max-width:82px;text-align:center}
.sx-pod-av{width:40px;height:40px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;border:2px solid}
.sx-pod-bar{border-radius:10px 10px 4px 4px;background:var(--sx-surface);border:1px solid var(--sx-border-light);padding:6px 0;font-weight:800}
.sx-rank-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;transition:background .3s ease}
.sx-rank-row.sx-me{background:var(--sx-surface);border:1px solid var(--sx-primary)}
.sx-rank-n{width:20px;text-align:center;font-weight:800;color:var(--sx-muted)}
.sx-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}

/* Social */
.sx-post{background:var(--sx-card);border:1px solid var(--sx-border-light);border-radius:16px;overflow:hidden;box-shadow:var(--sx-glow);margin-bottom:10px}
.sx-post-head{display:flex;align-items:center;gap:8px;padding:9px 11px}
.sx-post-photo{height:150px;display:flex;align-items:flex-end;padding:10px;color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.sx-post-body{padding:9px 11px 10px}
.sx-like{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12px;color:var(--sx-mid)}
.sx-like.sx-on{color:var(--sx-error)}
.sx-like.sx-on svg{animation:sxHeart .45s ease}
@keyframes sxHeart{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.sx-comment{font-size:11.5px;padding:3px 0;color:var(--sx-mid)}
.sx-comment b{color:var(--sx-text)}
.sx-photo-pick{width:44px;height:44px;border-radius:10px;border:2px solid transparent}
.sx-photo-pick.sx-on{border-color:var(--sx-primary);box-shadow:0 0 0 2px var(--sx-ring),0 0 10px rgba(var(--sx-primary-rgb),.6)}

/* Chat (My Swim Insights) */
.sx-chat{display:flex;flex-direction:column;gap:9px;padding-bottom:58px}
.sx-bubble-q{align-self:flex-end;max-width:85%;background:var(--sx-primary);color:#fff;padding:8px 11px;border-radius:14px 14px 4px 14px;font-weight:600;font-size:12px;animation:sxRise .3s ease}
.sx-answer{animation:sxRise .35s ease}
.sx-answer h4{margin:0 0 4px;font-size:13.5px}
.sx-topics{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sx-topic{border-radius:12px;padding:10px;color:#fff;font-weight:700;font-size:12px;display:flex;flex-direction:column;gap:6px;min-height:64px;justify-content:space-between;animation:sxTwinkle 4s ease-in-out infinite}
.sx-topic:nth-child(2){animation-delay:1s}.sx-topic:nth-child(3){animation-delay:2s}.sx-topic:nth-child(4){animation-delay:3s}
@keyframes sxTwinkle{0%,85%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}92%{box-shadow:0 0 16px rgba(255,255,255,.45)}}
.sx-qchip{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--sx-border-light);background:var(--sx-field);font-size:12px;font-weight:600;margin-top:5px}
.sx-chat-input{position:absolute;left:10px;right:10px;bottom:64px;display:flex;gap:6px;z-index:4}
.sx-chat-input input{flex:1;min-width:0;height:38px;border-radius:12px;border:1px solid var(--sx-border);background:var(--sx-nav);padding:0 11px;font-size:12.5px;outline:none}
.sx-chat-input input:focus{border-color:var(--sx-primary)}
.sx-send{width:38px;height:38px;border-radius:12px;background:var(--sx-primary);color:#fff;display:flex;align-items:center;justify-content:center}
.sx-thinking{display:inline-flex;align-items:center;gap:7px;color:var(--sx-muted);font-size:12px;font-style:italic;animation:sxRise .3s ease}
.sx-thinking i{width:6px;height:6px;border-radius:50%;background:var(--sx-primary);animation:sxBounce 1s infinite ease-in-out}
.sx-thinking i:nth-child(2){animation-delay:.15s}.sx-thinking i:nth-child(3){animation-delay:.3s}
@keyframes sxBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.sx-bar-goal{height:8px;border-radius:999px;background:var(--sx-field);overflow:hidden;margin-top:4px}
.sx-bar-goal i{display:block;height:100%;background:linear-gradient(90deg,var(--sx-warning),var(--sx-success));border-radius:999px;transition:width .6s ease}

/* Profile */
.sx-set-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--sx-border-light)}
.sx-set-row:last-child{border-bottom:0}
.sx-switch{width:38px;height:22px;border-radius:999px;background:var(--sx-field);border:1px solid var(--sx-border);position:relative;transition:background .2s ease;flex-shrink:0}
.sx-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
.sx-switch.sx-on{background:var(--sx-primary);border-color:var(--sx-primary)}
.sx-switch.sx-on::after{transform:translateX(16px)}

/* Tab bar */
.sx-tabbar{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;background:var(--sx-nav);border-top:1px solid var(--sx-border-light);z-index:5;padding-bottom:4px;backdrop-filter:blur(8px)}
.sx-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--sx-muted);font-size:10px;font-weight:600;position:relative;text-align:center}
.sx-tab.sx-on{color:var(--sx-primary)}
.sx-tab.sx-on svg{filter:drop-shadow(0 0 5px rgba(var(--sx-primary-rgb),.6))}
.sx-badge{position:absolute;top:5px;left:calc(50% + 4px);min-width:16px;height:16px;border-radius:8px;background:var(--sx-error);color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;animation:sxPop .3s ease}

/* Floating My Swim Insights button */
.sx-fab{position:absolute;right:12px;bottom:68px;width:40px;height:40px;border-radius:50%;z-index:6;display:flex;align-items:center;justify-content:center;color:#3B2600;
  background:radial-gradient(circle at 32% 28%,#FFF3C4 0,#F7D774 30%,#E0A100 70%,#B07800 100%);
  box-shadow:0 0 0 2px rgba(255,236,170,.65),0 6px 14px rgba(0,0,0,.35),0 0 18px rgba(245,197,66,.7);animation:sxFab 2.6s ease-in-out infinite}
.sx-fab{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.sx-fab:active{transform:scale(.92)}
.sx-fab.sx-dragging{cursor:grabbing;transform:scale(1.1);animation-play-state:paused;transition:none}
@keyframes sxFab{0%,100%{box-shadow:0 0 0 2px rgba(255,236,170,.65),0 6px 14px rgba(0,0,0,.35),0 0 14px rgba(245,197,66,.55)}50%{box-shadow:0 0 0 2px rgba(255,236,170,.85),0 6px 14px rgba(0,0,0,.35),0 0 26px rgba(245,197,66,.95)}}

/* Bottom sheet */
.sx-sheet-back{position:absolute;inset:0;background:rgba(0,8,14,.55);z-index:20;opacity:0;transition:opacity .25s ease}
.sx-sheet-back.sx-open{opacity:1}
.sx-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:var(--sx-sheet);border-top:1px solid var(--sx-border);border-radius:20px 20px 0 0;padding:8px 14px 16px;z-index:21;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);scrollbar-width:none}
.sx-sheet::-webkit-scrollbar{display:none}
.sx-sheet.sx-open{transform:none}
.sx-grab{width:36px;height:4px;border-radius:2px;background:var(--sx-border);margin:0 auto 8px}
.sx-sheet h3{font-size:15px;margin:0 0 10px;text-align:center}
.sx-label{display:block;font-size:11px;font-weight:700;color:var(--sx-muted);margin:10px 0 5px;text-transform:uppercase;letter-spacing:.03em}
.sx-field{width:100%;height:38px;border-radius:11px;border:1px solid var(--sx-border);background:var(--sx-field);padding:0 11px;font-size:12.5px;outline:none}
textarea.sx-field{height:74px;padding:9px 11px;resize:none;line-height:1.4}
.sx-field:focus{border-color:var(--sx-primary);box-shadow:0 0 0 3px rgba(var(--sx-primary-rgb),.18)}
.sx-err{color:var(--sx-error);font-size:11px;margin-top:5px;min-height:14px}
@media (pointer:coarse){.sx-field,.sx-chat-input input{font-size:16px}}

/* Check-in scanner */
.sx-scan{position:absolute;inset:0;z-index:30;background:rgba(0,6,12,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;animation:sxFade .2s ease}
@keyframes sxFade{from{opacity:0}to{opacity:1}}
.sx-scan-frame{width:150px;height:150px;border-radius:18px;position:relative;border:2px solid rgba(255,255,255,.18);overflow:hidden;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px)}
.sx-scan-frame::before{content:'';position:absolute;left:0;right:0;height:3px;background:#00BFFF;box-shadow:0 0 14px #00BFFF;animation:sxScan 1.1s ease-in-out infinite alternate}
@keyframes sxScan{from{top:6%}to{top:92%}}
.sx-scan-ok{width:84px;height:84px;border-radius:50%;background:#3DD68C;display:flex;align-items:center;justify-content:center;animation:sxPop .45s ease;box-shadow:0 0 30px rgba(61,214,140,.7)}

/* Toast and confetti */
.sx-toast{position:absolute;left:12px;right:12px;top:26px;z-index:40;background:var(--sx-sheet);border:1px solid var(--sx-primary);border-radius:12px;padding:9px 12px;font-weight:700;font-size:12px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(0,0,0,.35),0 0 14px rgba(var(--sx-primary-rgb),.4);animation:sxToast 2.4s ease forwards;pointer-events:none}
@keyframes sxToast{0%{opacity:0;transform:translateY(-12px)}10%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.sx-confetti{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;z-index:41;pointer-events:none;animation:sxFall 1.5s cubic-bezier(.25,.6,.4,1) forwards}
@keyframes sxFall{to{transform:translate(var(--dx),620px) rotate(var(--rot));opacity:.2}}

@media (prefers-reduced-motion:reduce){
  .sx-screen.sx-enter,.sx-screen.sx-enter-back,.sx-enter > *,.sx-topic,.sx-fab,.sx-chart path.sx-line,.sx-box.sx-on,.sx-like.sx-on svg,.sx-toast,.sx-confetti{animation:none!important}
  .sx-chart path.sx-line{stroke-dashoffset:0}
  .sx-toast{opacity:1}
  .sx-sheet,.sx-sheet-back{transition:none}
}

/* ── Swymetric look ──────────────────────────────────────────────────────
   The app's own underwater pool background (assets/images/themes/
   swymetric-theme-bg.webp, the portrait one the phone app uses), frosted-glass
   cards, app-style gradient icons and glowing accents. Only the Swymetric
   theme; the light theme keeps the plain look above. */
.sx-app[data-theme="swymetric"]{
  --sx-card:linear-gradient(160deg,rgba(20,62,108,.5) 0%,rgba(4,22,46,.86) 100%);
  --sx-nav:rgba(4,22,42,.93);--sx-sheet:rgba(5,25,48,.97);
  --sx-border:rgba(120,220,255,.34);--sx-border-light:rgba(120,220,255,.2);
  --sx-mid:#D2E6F1;--sx-muted:#A3C3D6;--sx-field:rgba(2,16,34,.6);
  --sx-glow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -8px rgba(0,8,22,.55);
  /* A light tint over the photo, a little deeper at the top and bottom where
     the status bar, headings and tab bar sit, so text stays easy to read. */
  background:
    linear-gradient(180deg,rgba(2,14,34,.45) 0%,rgba(2,14,34,.2) 35%,rgba(2,14,34,.3) 70%,rgba(2,14,34,.55) 100%),
    #041C3C url("img/swymetric-theme-bg.webp") center top/cover no-repeat
}
.sx-app .sx-status,.sx-app .sx-stack{position:relative;z-index:1}

/* Frosted glass */
.sx-app[data-theme="swymetric"] :is(.sx-card,.sx-stat,.sx-tile,.sx-post,.sx-day,.sx-off){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sx-app[data-theme="swymetric"] .sx-home-panel{background:linear-gradient(165deg,rgba(12,58,106,.62) 0%,rgba(4,24,48,.86) 100%);border-color:rgba(0,200,255,.75);box-shadow:0 0 24px rgba(0,191,255,.38),inset 0 1px 0 rgba(255,255,255,.08)}
.sx-app[data-theme="swymetric"] .sx-datebox{background:linear-gradient(160deg,rgba(0,200,255,.32),rgba(40,90,230,.28));border:1px solid rgba(120,220,255,.32);color:#7FE0FF}
.sx-app[data-theme="swymetric"] .sx-off{background:linear-gradient(160deg,rgba(90,64,8,.38),rgba(6,30,58,.82));border-color:rgba(245,197,66,.45);box-shadow:0 0 14px rgba(245,197,66,.18)}
.sx-app[data-theme="swymetric"] .sx-day.sx-on{background:linear-gradient(160deg,#28D3FF,#1A6BFF);border-color:transparent;box-shadow:0 0 14px rgba(0,191,255,.55)}
.sx-app[data-theme="swymetric"] .sx-btn:not(.sx-outline):not(.sx-danger):not(.sx-done){background:linear-gradient(135deg,#2BD5FF 0%,#1A7BFF 100%);box-shadow:0 6px 16px -6px rgba(0,170,255,.8)}
.sx-app[data-theme="swymetric"] .sx-seg button.sx-on:not(.sx-no),.sx-app[data-theme="swymetric"] .sx-chip.sx-on{background:linear-gradient(135deg,#2BD5FF,#1A7BFF);box-shadow:0 4px 12px -4px rgba(0,170,255,.8)}

/* My Swim Insights banner: a sheen that sweeps across now and then. */
.sx-app[data-theme="swymetric"] .sx-insights{background:linear-gradient(110deg,rgba(6,32,62,.94) 38%,rgba(70,220,255,.32) 50%,rgba(6,32,62,.94) 62%);background-size:280% 100%;animation:sxSheen 5.5s ease-in-out infinite}
@keyframes sxSheen{0%{background-position:130% 0}55%,100%{background-position:-70% 0}}
.sx-insights-icon{background:linear-gradient(145deg,#4FE0FF,#1A6BFF);box-shadow:0 0 14px rgba(0,191,255,.6)}

/* App-style icons: gradient squircle, gloss on top, coloured glow below. */
.sx-tile-icon{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:13px;position:relative;overflow:hidden;color:#fff;box-shadow:0 7px 16px -6px var(--ig,rgba(0,0,0,.45)),inset 0 -2px 0 rgba(0,0,0,.16)}
.sx-tile-icon::after{content:'';position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));border-radius:12px 12px 50% 50%/12px 12px 10px 10px;pointer-events:none}
.sx-tile-icon svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.sx-tile{position:relative;overflow:hidden;gap:9px;padding:13px 11px}
.sx-app[data-theme="swymetric"] .sx-tile{background:var(--sx-card);background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#00BFFF) 26%,transparent) 0%,rgba(6,30,58,.84) 70%);border-color:color-mix(in srgb,var(--tc,#00BFFF) 42%,transparent)}
.sx-tile b{font-size:13px}
.sx-topic{position:relative;overflow:hidden;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.sx-topic::after{content:'';position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}

/* Stat icons, each in its own colour. */
.sx-stat-icon.sx-ic-gold{background:linear-gradient(145deg,#FFE58A,#E0A100);color:#4A2F00;box-shadow:0 0 12px rgba(245,197,66,.55)}
.sx-stat-icon.sx-ic-purple{background:linear-gradient(145deg,#D2A8FF,#7C3AED);color:#fff;box-shadow:0 0 12px rgba(160,100,255,.55)}
.sx-stat-icon.sx-ic-cyan{background:linear-gradient(145deg,#6BE6FF,#1A7BFF);color:#fff;box-shadow:0 0 12px rgba(0,191,255,.55)}

/* Tab bar: a glowing pill behind the active tab. */
.sx-tab > svg,.sx-tab > span:not(.sx-badge){position:relative;z-index:1}
.sx-tab > .sx-badge{position:absolute;z-index:2}
.sx-tab.sx-on::before{content:'';position:absolute;top:5px;left:50%;width:46px;height:28px;margin-left:-23px;border-radius:14px;background:rgba(var(--sx-primary-rgb),.18);box-shadow:0 0 14px rgba(var(--sx-primary-rgb),.4)}
.sx-app[data-theme="light"] .sx-tab.sx-on::before{box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .sx-insights,.sx-demo-launch-label{animation:none!important}
}

/* ── Phones: a preview on the page, full screen when opened ─────────────
   On a phone the interactive demo would take over the page and get in the
   way of scrolling. So there it shows as a smaller preview that scrolls with
   the page; tapping it opens it full screen like a real app, with an
   Exit bar to get back to the page (demo-app.js moves the phone into the
   overlay and back, so nothing done in the demo is lost). */
.sx-demo-launch{display:none}
@media (max-width:700px){
  /* animation:none also stops the scroll-in reveal, whose starting state is
     invisible, so the preview is made visible here directly. */
  .phone-demo-wrap .phone-scene{height:auto;animation:none!important;opacity:1!important;transform:none!important;position:relative}
  .phone-demo-wrap .phone-back{display:none}
  /* Its "tap around" doesn't apply to the preview, and it would repeat the label on the preview. */
  .phone-demo-wrap .phone-demo-badge{display:none}
  .phone-demo-wrap .phone{width:292px!important;transform:scale(.78);transform-origin:top center;margin-bottom:-133px;pointer-events:none;animation:none}
  /* The whole preview (the phone at 78%: 292x606 -> 228x473) is the button.
     A tap opens it; a swipe over it still scrolls the page. */
  .sx-demo-launch{display:flex;align-items:flex-end;justify-content:center;position:absolute;top:0;left:50%;width:228px;height:473px;margin-left:-114px;z-index:5;
    padding:0 0 72px;border:0;border-radius:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    background:linear-gradient(to top,rgba(2,14,34,.88) 0%,rgba(2,14,34,.55) 30%,rgba(2,14,34,0) 55%)}
  /* A soft cyan glow that pulses, and a band of light that sweeps across. */
  .sx-demo-launch-label{display:flex;align-items:center;gap:7px;padding:11px 17px;border-radius:999px;white-space:nowrap;
    background:linear-gradient(110deg,rgba(255,255,255,.12) 35%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.12) 65%) 0 0/260% 100%,rgba(0,150,255,.22);
    border:1px solid rgba(150,232,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#fff;font:700 13.5px/1 'Inter',system-ui,sans-serif;text-shadow:0 1px 4px rgba(0,30,60,.5);
    animation:sxLaunchSheen 3s ease-in-out infinite,sxLaunchGlow 2.4s ease-in-out infinite}
  .sx-demo-launch-label svg{flex-shrink:0}
  .sx-demo-launch:active .sx-demo-launch-label{background-color:rgba(0,150,255,.4)}
}
@keyframes sxLaunchSheen{0%{background-position:120% 0,0 0}60%,100%{background-position:-20% 0,0 0}}
@keyframes sxLaunchGlow{0%,100%{box-shadow:0 0 10px rgba(0,191,255,.45),0 8px 20px -6px rgba(0,0,0,.6)}50%{box-shadow:0 0 26px 3px rgba(0,191,255,.85),0 8px 20px -6px rgba(0,0,0,.6)}}

.sx-demo-overlay{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:#020E22;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);animation:sxOverlayIn .25s ease}
@keyframes sxOverlayIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.sx-demo-exit{display:flex;align-items:center;justify-content:space-between;gap:10px;height:46px;padding:0 14px;flex-shrink:0;background:#02122A;border-bottom:1px solid rgba(120,220,255,.2);color:#F0F6FA;font:600 13px/1 'Inter',system-ui,sans-serif}
.sx-demo-exit button{display:flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(120,220,255,.4);background:rgba(0,191,255,.14);color:#7FE0FF;font:700 13px/1 'Inter',system-ui,sans-serif;cursor:pointer}
/* The phone frame goes away: the demo fills the screen like a real app. */
.sx-demo-overlay .phone{width:100%!important;flex:1;min-height:0;aspect-ratio:auto!important;height:auto;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;transform:none!important;margin:0!important;pointer-events:auto}
.sx-demo-overlay .phone-notch{display:none}
html.sx-demo-locked,html.sx-demo-locked body{overflow:hidden!important;overscroll-behavior:none}