/* ==========================================================================
   Q Fitness — standalone member-app preview
   One clickable phone. Gym brand (crimson / navy / gold).
   No packages, prices, or quote chrome.
   Embed: ?embed=1 or iframe — chrome hides itself.
   ========================================================================== */

:root{
  --brand: #b01a13;
  --brand-hi: #e63e35;
  --navy: #0c254a;
  --navy-hi: #1b3f74;
  --gold: #c9922e;
  --silver: #c3c7cb;
  --bg: #0a0d14;
  --bg-deep: #06080d;
  --surface: #141a26;
  --surface-2: #10151f;
  --line: #2a3346;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.72);
  --faint: rgba(255,255,255,0.5);
  --display: "Anton", "Arial Narrow", sans-serif;
  --sub: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Montserrat", system-ui, sans-serif;
  --ok: #8fe0ab;
  --ok-bg: rgba(46,107,71,0.28);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; height:100%; }
body{
  margin:0;
  min-height:100%;
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(176,26,19,0.18), transparent 55%),
    radial-gradient(900px 500px at 80% 110%, rgba(12,37,74,0.85), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button, input, select, textarea{ font: inherit; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.25rem 1rem 1.5rem;
}
.chrome{ width:min(420px, 100%); text-align:center; }
.brand-row{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  margin-bottom:0.45rem;
}
.brand-row img{ width:1.85rem; height:1.85rem; border-radius:5px; }
.eyebrow{
  font-family:var(--sub);
  letter-spacing:0.12em;
  font-size:0.78rem;
  color:var(--gold);
  text-transform:uppercase;
}
.note{
  color:var(--muted);
  font-size:0.78rem;
  margin:0 0 1rem;
  line-height:1.45;
}
.note b{ color:#fff; font-weight:600; }

.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.phone-panel{ display:flex; flex-direction:column; align-items:center; }

.device{
  width:min(340px, 92vw, calc((100dvh - 9.5rem) * 340 / 700));
  aspect-ratio:340/700;
  background:#050608;
  border-radius:2.4rem;
  padding:11px;
  box-shadow:
    0 0 0 1px rgba(201,146,46,0.18),
    0 24px 48px -18px rgba(0,0,0,0.7);
  position:relative;
}
.screen{
  width:100%; height:100%;
  background:var(--bg);
  border-radius:1.7rem;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  font-family:var(--body);
  color:var(--text);
}
.notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:22px; background:#050608; border-radius:0 0 14px 14px; z-index:5;
}
.statusbar{
  height:34px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.1rem; font-size:0.68rem; font-weight:600; color:var(--text); letter-spacing:0.02em;
}
.appbar{
  flex:none; padding:0.15rem 0.85rem 0.65rem; display:flex; align-items:center; justify-content:space-between; gap:0.45rem;
}
.appbar-id{ display:flex; align-items:center; gap:0.45rem; min-width:0; }
.appbar-id img{ width:1.55rem; height:1.55rem; border-radius:5px; flex:none; }
.appbar-id .g{ font-family:var(--sub); letter-spacing:0.03em; font-size:0.68rem; color:var(--faint); line-height:1.1; }
.appbar-id .n{ font-family:var(--sub); letter-spacing:0.03em; font-size:0.9rem; color:#fff; line-height:1.1; }
.appbar-actions{ display:flex; align-items:center; gap:0.35rem; flex:none; }
.icon-btn, .avatar-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface);
  width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-content:center;
  color:var(--text); cursor:pointer; position:relative; padding:0;
}
.avatar-btn{ font-family:var(--sub); font-size:0.75rem; }
.icon-btn svg{ width:14px; height:14px; }
.icon-btn:hover, .avatar-btn:hover{ border-color:var(--gold); }
.dot-badge{
  position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%;
  background:var(--brand); border:1.5px solid var(--bg);
}

.content{
  flex:1 1 auto; overflow-y:auto; padding:0 0.9rem 1.1rem;
  scrollbar-width:none; position:relative;
}
.content::-webkit-scrollbar{ display:none; }

.tabbar{
  flex:none; display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line); background:rgba(10,13,20,0.92); backdrop-filter:blur(6px);
  padding:0.35rem 0.15rem calc(0.45rem + env(safe-area-inset-bottom,0px));
}
.tabbtn{
  appearance:none; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0.15rem;
  color:var(--faint); font-family:var(--body); font-size:0.55rem; font-weight:600;
  padding:0.15rem 0.05rem;
}
.tabbtn svg{ width:18px; height:18px; }
.tabbtn.is-active{ color:var(--gold); }
.tabbtn.is-active svg{ filter:drop-shadow(0 0 4px rgba(201,146,46,0.5)); }

.screen-head{
  display:flex; align-items:center; gap:0.45rem; margin:0.05rem 0 0.7rem;
}
.back-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface);
  width:1.7rem; height:1.7rem; border-radius:50%; color:#fff; cursor:pointer;
  display:grid; place-content:center; flex:none; padding:0;
}
.back-btn svg{ width:14px; height:14px; }
.screen-head .qf-h1{ margin:0; flex:1; }

.qf-h1{ font-family:var(--display); text-transform:uppercase; letter-spacing:0.2px; font-size:1.42rem; line-height:1; margin:0.15rem 0 0.8rem; }
.qf-h2{ font-family:var(--sub); text-transform:uppercase; letter-spacing:0.4px; font-size:1rem; color:var(--gold); margin:1.05rem 0 0.5rem; }
.qf-h2:first-child{ margin-top:0.15rem; }
.qf-lede{ font-size:0.74rem; color:var(--muted); margin:0 0 0.65rem; line-height:1.5; }
.muted{ font-size:0.68rem; color:var(--faint); }
.nm{ font-family:var(--sub); font-size:0.95rem; letter-spacing:0.2px; color:#fff; }
.mt{ font-size:0.68rem; color:var(--faint); }

.qf-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:0.8rem 0.85rem; margin-bottom:0.6rem;
}
.qf-card--flush{ padding:0; overflow:hidden; }
.qf-card--tap{ cursor:pointer; text-align:left; width:100%; color:inherit; display:block; }
.qf-card--tap:hover{ border-color:rgba(201,146,46,0.45); }
.qf-row{ display:flex; align-items:center; justify-content:space-between; gap:0.55rem; }
.qf-row--top{ align-items:flex-start; }
.grow{ flex:1; min-width:0; }

.qf-badge{
  font-family:var(--body); font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:0.16rem 0.45rem; border-radius:99px; white-space:nowrap;
}
.qf-badge--brand{ background:rgba(176,26,19,0.22); color:#ff8b83; border:1px solid rgba(176,26,19,0.5); }
.qf-badge--gold{ background:rgba(201,146,46,0.18); color:var(--gold); border:1px solid rgba(201,146,46,0.45); }
.qf-badge--ok{ background:var(--ok-bg); color:var(--ok); border:1px solid rgba(46,107,71,0.6); }
.qf-badge--lock{ background:var(--surface-2); color:var(--faint); border:1px solid var(--line); }

.qf-btn{
  appearance:none; border:1px solid var(--brand); background:var(--brand); color:#fff;
  font-family:var(--body); font-weight:700; font-size:0.76rem; letter-spacing:0.02em;
  padding:0.52rem 0.85rem; border-radius:8px; cursor:pointer; text-align:center;
}
.qf-btn:hover{ background:var(--brand-hi); border-color:var(--brand-hi); }
.qf-btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.qf-btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.qf-btn--gold{ background:transparent; border-color:var(--gold); color:var(--gold); }
.qf-btn--block{ display:block; width:100%; }
.qf-btn--sm{ padding:0.36rem 0.55rem; font-size:0.66rem; border-radius:6px; }
.qf-btn.is-done{ background:transparent; border-color:rgba(46,107,71,0.6); color:var(--ok); }
.qf-btn.is-wait{ background:transparent; border-color:rgba(201,146,46,0.55); color:var(--gold); }

.qf-chip{
  display:inline-flex; align-items:center; font-family:var(--body); font-size:0.66rem; font-weight:600;
  color:var(--muted); border:1px solid var(--line); background:var(--surface-2);
  padding:0.3rem 0.6rem; border-radius:99px; cursor:pointer; margin:0 0.28rem 0.28rem 0;
}
.qf-chip.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.chips{ margin-bottom:0.55rem; }
.chips--scroll{
  display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  margin:0 -0.9rem 0.55rem; padding:0 0.9rem 0.1rem;
}
.chips--scroll::-webkit-scrollbar{ display:none; }
.chips--scroll .qf-chip{ flex:none; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0.45rem; margin-bottom:0.55rem; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.35rem; }

.qf-stat{ text-align:center; }
.qf-stat .v{ font-family:var(--display); font-size:1.28rem; color:#fff; line-height:1; }
.qf-stat .l{ font-size:0.58rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--faint); margin-top:0.22rem; }

.qf-bar-row{ display:grid; grid-template-columns:2.6rem 1fr 2.4rem; gap:0.45rem; align-items:center; margin-bottom:0.38rem; }
.qf-bar-row span:first-child, .qf-bar-row span:last-child{ font-size:0.6rem; color:var(--faint); }
.qf-bar-track{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.qf-bar-fill{ height:100%; background:linear-gradient(90deg, var(--brand), var(--gold)); border-radius:99px; }

.qf-ring{ width:58px; height:58px; border-radius:50%; display:grid; place-content:center; position:relative; margin:0 auto; }
.qf-ring span{ font-family:var(--display); font-size:0.95rem; color:#fff; }

.qf-list{ list-style:none; margin:0; padding:0; }
.qf-list li{ padding:0.5rem 0; border-bottom:1px solid var(--line); font-size:0.78rem; color:var(--muted); }
.qf-list li:last-child{ border-bottom:none; }

.qf-hero{
  border:1px solid rgba(201,146,46,0.45); border-radius:12px;
  background:linear-gradient(140deg, rgba(176,26,19,0.22), transparent 55%), var(--surface-2);
  padding:0.8rem 0.85rem; margin-bottom:0.6rem;
}
.qf-hero .k{
  display:flex; align-items:center; gap:0.4rem;
  font-family:var(--body); font-size:0.6rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);
}
.qf-hero .k::before{ content:""; width:0.38rem; height:0.38rem; border-radius:50%; background:currentColor; }
.qf-hero .t{
  font-family:var(--display); font-size:1.28rem; line-height:1.02;
  text-transform:uppercase; color:#fff; margin:0.35rem 0 0.28rem;
}
.qf-hero .d{ font-size:0.7rem; color:var(--muted); line-height:1.45; }
.qf-hero .qf-btn{ margin-top:0.55rem; }

.classitem{
  display:grid; grid-template-columns:3.2rem 1fr auto; gap:0.6rem; align-items:center;
  padding:0.6rem 0; border-bottom:1px solid var(--line);
}
.classitem:last-child{ border-bottom:none; }
.classitem .time{ font-family:var(--body); font-weight:700; font-size:0.7rem; color:var(--gold); line-height:1.25; }
.rowitem{
  display:grid; grid-template-columns:1fr auto; gap:0.55rem; align-items:center;
  padding:0.58rem 0.85rem; border-bottom:1px solid var(--line); width:100%;
  background:none; border-left:none; border-right:none; border-top:none; color:inherit; text-align:left; cursor:pointer;
}
.rowitem:last-child{ border-bottom:none; }
.rowitem:hover{ background:rgba(255,255,255,0.03); }

.chat{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.7rem; }
.bubble{ max-width:84%; padding:0.5rem 0.7rem; border-radius:12px; font-size:0.76rem; line-height:1.45; }
.bubble--user{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:3px; }
.bubble--ai, .bubble--them{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); border-bottom-left-radius:3px; }
.chat-input{ display:flex; gap:0.45rem; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:0.35rem 0.35rem 0.35rem 0.85rem; }
.chat-input input{ flex:1; background:transparent; border:none; color:#fff; font-size:0.76rem; outline:none; min-width:0; }
.chat-input input::placeholder{ color:var(--faint); }
.chat-send{ width:1.75rem; height:1.75rem; border-radius:50%; background:var(--brand); border:none; color:#fff; display:grid; place-content:center; cursor:pointer; flex:none; padding:0; }

.qf-field{ margin-bottom:0.55rem; }
.qf-field label{ display:block; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--faint); margin-bottom:0.28rem; }
.qf-field select, .qf-field input, .qf-field textarea{
  width:100%; appearance:none; background:var(--surface-2); border:1px solid var(--line); color:#fff;
  padding:0.48rem 0.65rem; border-radius:8px; font-size:0.76rem;
}
.qf-field textarea{ min-height:4.2rem; resize:vertical; }
.search{
  width:100%; appearance:none; background:var(--surface-2); border:1px solid var(--line); color:#fff;
  padding:0.5rem 0.75rem 0.5rem 2rem; border-radius:99px; font-size:0.76rem; margin-bottom:0.55rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'><circle cx='7' cy='7' r='5'/><path d='M11 11l3 3'/></svg>");
  background-repeat:no-repeat; background-position:0.65rem 50%;
}
.slider{ width:100%; margin:0.3rem 0 0; accent-color: var(--gold); }

.doorwrap{ display:flex; flex-direction:column; align-items:center; padding:1.1rem 0 0.5rem; }
.doorbtn{
  width:140px; height:140px; border-radius:50%; border:2px solid var(--gold);
  background:radial-gradient(circle at 30% 25%, rgba(201,146,46,0.28), rgba(10,13,20,0.4));
  display:grid; place-content:center; cursor:pointer; color:#fff; position:relative;
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.doorbtn:active{ transform:scale(0.96); }
.doorbtn.is-open{
  border-color:var(--ok);
  box-shadow:0 0 28px -6px rgba(143,224,171,0.55);
  background:radial-gradient(circle at 30% 25%, rgba(46,107,71,0.4), rgba(10,13,20,0.4));
}
.doorbtn svg{ width:40px; height:40px; }
.doorbtn .lbl{ position:absolute; bottom:-1.8rem; left:50%; transform:translateX(-50%); font-family:var(--sub); letter-spacing:0.5px; font-size:0.78rem; color:var(--gold); white-space:nowrap; }
.doorbtn.is-open .lbl{ color:var(--ok); }
.door-status{ margin-top:2.4rem; font-size:0.72rem; color:var(--muted); text-align:center; }

.sheet-backdrop{
  position:absolute; inset:0; background:rgba(4,5,8,0.55); opacity:0; pointer-events:none;
  transition:opacity 0.18s ease; z-index:10;
}
.sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }
.sheet{
  position:absolute; right:0; top:0; bottom:0; width:82%; max-width:280px;
  background:var(--bg-deep); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform 0.2s ease; z-index:11;
  display:flex; flex-direction:column; padding:1rem 0.85rem;
}
.sheet.is-open{ transform:translateX(0); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.85rem; }
.sheet-close{ background:none; border:none; color:var(--faint); font-size:1.1rem; cursor:pointer; padding:0.2rem 0.4rem; }
.sheet-profile{ display:flex; align-items:center; gap:0.55rem; margin-bottom:0.9rem; padding-bottom:0.85rem; border-bottom:1px solid var(--line); }
.sheet-profile .av{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--brand); display:grid; place-content:center; font-family:var(--sub); font-size:1.05rem; }
.sheet-profile .nm{ font-family:var(--sub); font-size:0.95rem; letter-spacing:0.3px; }
.sheet-profile .mm{ font-size:0.66rem; color:var(--faint); }
.sheet-list{ list-style:none; margin:0; padding:0; overflow:auto; }
.sheet-list li button{
  width:100%; text-align:left; background:none; border:none; color:var(--muted);
  font-size:0.76rem; padding:0.55rem 0.1rem; border-bottom:1px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
}
.sheet-list li button:hover{ color:#fff; }
.sheet-foot{ margin-top:auto; font-size:0.6rem; color:var(--faint); padding-top:0.75rem; border-top:1px solid var(--line); }

.trainer-member{ display:flex; align-items:center; gap:0.55rem; padding:0.55rem 0; border-bottom:1px solid var(--line); }
.trainer-member:last-child{ border-bottom:none; }
.av{
  width:2.1rem; height:2.1rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-content:center; font-family:var(--sub); font-size:0.82rem; flex:none;
}
.av--brand{ background:var(--brand); border-color:var(--brand); }

.toast{
  position:absolute; left:50%; bottom:5.1rem; transform:translateX(-50%) translateY(10px);
  background:var(--surface); border:1px solid var(--gold); color:#fff;
  font-size:0.7rem; padding:0.5rem 0.85rem; border-radius:99px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; z-index:15;
  max-width:90%; overflow:hidden; text-overflow:ellipsis;
}
.toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }

.more-row{
  display:flex; align-items:center; gap:0.65rem; width:100%;
  padding:0.7rem 0.85rem; border-bottom:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-top:none; color:inherit; text-align:left; cursor:pointer;
}
.more-row:last-child{ border-bottom:none; }
.more-ico{
  width:1.85rem; height:1.85rem; border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-content:center; color:var(--gold); flex:none;
}
.more-ico svg{ width:14px; height:14px; }
.more-row .chev{ color:var(--faint); }

.week-strip{ display:flex; gap:0.3rem; margin-bottom:0.7rem; }
.day-cell{
  flex:1; appearance:none; border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
  border-radius:8px; padding:0.35rem 0; cursor:pointer; text-align:center;
}
.day-cell .d{ display:block; font-size:0.55rem; text-transform:uppercase; letter-spacing:0.04em; }
.day-cell .n{ display:block; font-family:var(--display); font-size:0.95rem; color:#fff; line-height:1.1; }
.day-cell.is-active{ border-color:var(--gold); background:rgba(201,146,46,0.12); }
.day-cell.has-event .n{ color:var(--gold); }

.video-ph{
  height:8.2rem; border-radius:10px; border:1px dashed var(--line);
  background:
    linear-gradient(160deg, rgba(176,26,19,0.18), transparent 50%),
    var(--surface-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem;
  color:var(--muted); font-size:0.7rem; margin-bottom:0.7rem; cursor:pointer;
}
.video-ph .play{
  width:2.4rem; height:2.4rem; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold);
  display:grid; place-content:center;
}
.video-ph .play svg{ width:14px; height:14px; margin-left:2px; }

.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.45rem; }
.photo-grid--3{ grid-template-columns:1fr 1fr 1fr; }
.photo-slot{
  height:6.4rem; border-radius:10px; border:1px dashed var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem;
  font-size:0.64rem; color:var(--faint); cursor:pointer;
}
.photo-slot.is-filled{
  border-style:solid; background:linear-gradient(160deg, rgba(12,37,74,0.9), rgba(176,26,19,0.35));
  color:#fff; border-color:rgba(201,146,46,0.4);
}
.photo-date{ display:block; font-size:0.52rem; color:var(--gold); letter-spacing:0.04em; margin-top:0.15rem; }

.badge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.45rem; }
.ach{
  appearance:none; border:1px solid var(--line); background:var(--surface-2); color:inherit;
  border-radius:10px; padding:0.7rem 0.3rem 0.55rem; text-align:center; cursor:pointer;
}
.ach .ico{ font-size:1.15rem; display:block; margin-bottom:0.25rem; }
.ach .lb{ font-size:0.58rem; color:var(--muted); line-height:1.25; }
.ach.is-locked{ opacity:0.42; }
.ach.is-on{ border-color:rgba(201,146,46,0.55); background:rgba(201,146,46,0.1); }

.water{ display:flex; gap:0.28rem; justify-content:space-between; }
.glass{
  width:1.55rem; height:2.1rem; border-radius:0 0 6px 6px; border:1.5px solid var(--line);
  background:transparent; cursor:pointer; padding:0; position:relative; overflow:hidden;
}
.glass.is-full{ border-color:#6ec8ff; background:linear-gradient(#6ec8ff, #2a7fb8); }

.cal-event{
  display:grid; grid-template-columns:3rem 1fr; gap:0.5rem; padding:0.45rem 0;
  border-bottom:1px solid var(--line); font-size:0.74rem;
}
.cal-event:last-child{ border-bottom:none; }

.spark{
  display:flex; align-items:flex-end; gap:3px; height:3.2rem; margin:0.45rem 0 0.15rem;
}
.spark--lg{ height:5.2rem; }
.spark i{
  flex:1; display:block; background:linear-gradient(180deg, var(--gold), var(--brand));
  border-radius:2px 2px 0 0; min-height:4px;
}

.toggle{
  appearance:none; width:2.4rem; height:1.3rem; border-radius:99px; border:none;
  background:var(--line); position:relative; cursor:pointer; flex:none; padding:0;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:1rem; height:1rem;
  border-radius:50%; background:#fff; transition:transform 0.15s ease;
}
.toggle.is-on{ background:var(--brand); }
.toggle.is-on::after{ transform:translateX(1.05rem); }

.overlay{
  position:absolute; inset:0; background:rgba(4,5,8,0.72); z-index:16;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
}
.overlay-card{
  background:var(--surface); border:1px solid var(--gold); border-radius:14px;
  padding:1.1rem 1rem; text-align:center; width:100%;
}
.overlay-card .big{ font-family:var(--display); font-size:1.6rem; text-transform:uppercase; margin:0.2rem 0 0.4rem; }

.dot-row{ display:flex; gap:0.28rem; }
.dot-row span{
  width:0.7rem; height:0.7rem; border-radius:2px; background:var(--surface-2); border:1px solid var(--line);
}
.dot-row span.on{ background:var(--gold); border-color:var(--gold); }

.unread{ width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none; }

.stepper{ display:flex; align-items:center; gap:0.55rem; }
.stepper button{
  width:1.7rem; height:1.7rem; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-2); color:#fff; cursor:pointer;
}
.stepper .val{ font-family:var(--display); font-size:1.2rem; min-width:3.2rem; text-align:center; }

.habit-row{
  display:grid; grid-template-columns:1.7rem 1fr auto; gap:0.55rem; align-items:center;
  padding:0.62rem 0.85rem; border-bottom:1px solid var(--line); width:100%;
  background:none; border-left:none; border-right:none; border-top:none; color:inherit; text-align:left; cursor:pointer;
}
.habit-row:last-child{ border-bottom:none; }
.habit-check{
  width:1.35rem; height:1.35rem; border-radius:6px; border:1.5px solid var(--line);
  background:var(--surface-2); display:grid; place-content:center; color:#fff; font-size:0.72rem;
}
.habit-row.is-on .habit-check{ background:var(--brand); border-color:var(--brand); }
.habit-check svg, .voice-btn svg{ width:16px; height:16px; }
.week-dots{ display:flex; gap:0.28rem; }
.week-dots i{
  width:0.62rem; height:0.62rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:block;
}
.week-dots i.on{ background:var(--ok); border-color:var(--ok); }
.week-dots i.miss{ background:transparent; }

.player-top{ display:flex; align-items:center; justify-content:space-between; gap:0.4rem; margin-bottom:0.55rem; }
.group-tag{
  font-size:0.58rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,146,46,0.45); border-radius:4px; padding:0.08rem 0.32rem;
}
.set-card{ padding:0.75rem 0.8rem; }
.set-num{ font-family:var(--sub); font-size:0.78rem; color:var(--gold); letter-spacing:0.04em; }
.set-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; margin:0.55rem 0 0.7rem; }
.set-grid .qf-field{ margin:0; }
.rest-panel{ text-align:center; padding:1.1rem 0.5rem 0.4rem; }
.rest-panel .qf-ring{ width:88px; height:88px; margin-bottom:0.45rem; }
.rest-panel .qf-ring span{ font-size:1.15rem; }

.compare{
  position:relative; height:9.2rem; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); margin-bottom:0.65rem; user-select:none;
}
.compare-a, .compare-b{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  padding:0.45rem; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.compare-a{
  background:
    linear-gradient(160deg, rgba(12,37,74,0.95), rgba(176,26,19,0.28));
  color:var(--faint);
}
.compare-b{
  background:
    linear-gradient(160deg, rgba(176,26,19,0.55), rgba(12,37,74,0.92));
  color:#fff; width:50%; overflow:hidden; border-right:2px solid var(--gold);
}
.compare input[type=range]{
  position:absolute; left:0; right:0; bottom:0.35rem; width:88%; margin:0 6%;
  accent-color:var(--gold); z-index:2;
}

.waveform{
  display:flex; align-items:center; gap:3px; height:2.1rem; padding:0.15rem 0.2rem;
}
.waveform i{
  width:3px; background:var(--gold); border-radius:2px; display:block; min-height:6px;
}
.waveform.is-play i{ animation: qf-wave 0.7s ease-in-out infinite alternate; }
@keyframes qf-wave{ from{ transform:scaleY(0.45); } to{ transform:scaleY(1); } }
.voice-btn{
  display:flex; align-items:center; gap:0.55rem; width:100%;
  background:var(--surface-2); border:1px solid var(--line); color:#fff;
  border-radius:12px; padding:0.45rem 0.65rem; cursor:pointer; text-align:left;
}

.month-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:0.28rem;
}
.month-cell{
  aspect-ratio:1; border-radius:7px; border:1px solid var(--line); background:var(--surface-2);
  font-size:0.58rem; color:var(--faint); display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.month-cell .d{ font-family:var(--display); font-size:0.78rem; color:#fff; line-height:1; }
.month-cell.is-work{ background:rgba(46,107,71,0.35); border-color:rgba(46,107,71,0.7); }
.month-cell.is-habit{ box-shadow:inset 0 -3px 0 var(--gold); }
.month-cell.is-none{ opacity:0.45; }
.month-cell.is-pick{ border-color:var(--gold); }

.cam-overlay{
  position:absolute; inset:0; background:#050608; z-index:18;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:1.1rem 1rem 1.4rem;
}
.viewfinder{
  position:absolute; inset:18% 12% 28%; border:1.5px solid rgba(201,146,46,0.85);
  border-radius:12px; box-shadow:0 0 0 999px rgba(0,0,0,0.35);
}
.viewfinder::before, .viewfinder::after{
  content:""; position:absolute; width:18px; height:18px; border-color:var(--gold); border-style:solid;
}
.shutter{
  width:3.4rem; height:3.4rem; border-radius:50%; border:3px solid #fff; background:var(--brand);
  cursor:pointer; z-index:1;
}

.post{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:0.75rem 0.8rem; margin-bottom:0.55rem; text-align:left; width:100%; color:inherit;
}
.post .who{ font-family:var(--sub); font-size:0.88rem; }
.react-row{ display:flex; gap:0.4rem; margin-top:0.5rem; }
.react-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
  border-radius:99px; font-size:0.66rem; font-weight:600; padding:0.28rem 0.55rem; cursor:pointer;
}
.react-btn.is-on{ border-color:rgba(201,146,46,0.55); color:var(--gold); background:rgba(201,146,46,0.12); }

.slot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.slot{
  appearance:none; border:1px solid var(--line); background:var(--surface-2); color:#fff;
  border-radius:8px; padding:0.55rem 0.4rem; cursor:pointer; font-size:0.74rem;
}
.slot.is-on{ border-color:var(--gold); background:rgba(201,146,46,0.12); color:var(--gold); }
.slot.is-busy{ opacity:0.35; cursor:not-allowed; }

.vid-tile{
  display:block; width:100%; text-align:left; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:0.5rem; cursor:pointer; padding:0;
}
.vid-tile .ph{
  height:6.4rem; background:linear-gradient(160deg, rgba(176,26,19,0.28), rgba(12,37,74,0.9));
  display:grid; place-content:center; color:var(--gold);
}
.vid-tile .ph svg{ width:28px; height:28px; }
.vid-tile .meta{ padding:0.55rem 0.75rem 0.7rem; }

.form-clip{
  height:7.2rem; border-radius:10px; border:1px dashed var(--line);
  background:linear-gradient(160deg, rgba(12,37,74,0.9), rgba(176,26,19,0.3));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem;
  color:var(--muted); font-size:0.7rem; margin-bottom:0.55rem;
}

.tag{
  font-size:0.56rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:0.14rem 0.4rem; border-radius:99px; border:1px solid var(--line);
}
.tag--ok{ background:var(--ok-bg); color:var(--ok); border-color:rgba(46,107,71,0.6); }
.tag--nudge{ background:rgba(201,146,46,0.16); color:var(--gold); border-color:rgba(201,146,46,0.45); }

.screen.is-player .tabbar{ display:none; }
.screen.is-player .content{ padding-bottom:1.4rem; }

.watch-card{ margin-top:0.15rem; }
.watch-face{
  width:9.4rem; height:11.4rem; margin:0 auto; padding:1.05rem 0.85rem 0.85rem;
  border-radius:1.85rem; background:#0b0d12;
  border:3px solid #2a3140; box-shadow:inset 0 0 0 1px #111, 0 10px 24px -12px rgba(0,0,0,0.7);
  color:#fff;
}
.watch-k{ font-size:0.52rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
.watch-t{ font-family:var(--display); font-size:1.05rem; margin:0.28rem 0 0.45rem; text-transform:uppercase; }
.watch-row{ font-size:0.62rem; color:var(--muted); padding:0.12rem 0; }
.watch-next{ color:#fff; border-top:1px solid var(--line); margin-top:0.35rem; padding-top:0.4rem; }

.call-stage{
  min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.55rem; padding:0.4rem 0.2rem 0.2rem; position:relative;
  background:radial-gradient(120% 80% at 50% 20%, rgba(12,37,74,0.85), #05070c 70%);
}
.call-peer{ text-align:center; }
.call-self{
  position:absolute; top:0.35rem; right:0.15rem;
  width:4.4rem; height:5.6rem; border-radius:10px;
  background:linear-gradient(160deg, rgba(176,26,19,0.45), rgba(12,37,74,0.9));
  border:1px solid rgba(201,146,46,0.4);
  font-size:0.58rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:0.35rem; color:#fff;
}
.call-time{ font-family:var(--display); font-size:1.7rem; color:var(--gold); letter-spacing:0.04em; }
.call-bar{ display:flex; gap:0.4rem; width:100%; margin-top:0.7rem; }
.call-btn{
  flex:1; appearance:none; border:1px solid var(--line); background:var(--surface-2); color:#fff;
  border-radius:99px; padding:0.62rem 0.2rem; font-size:0.68rem; font-weight:700; cursor:pointer;
}
.call-btn.is-off{ opacity:0.55; border-style:dashed; }
.call-btn--hang{ background:var(--brand); border-color:var(--brand); }

.qf-btn, .qf-chip, .tabbtn, .avatar-btn, .icon-btn, .doorbtn, .day-cell, .more-row, .rowitem, .glass, .ach, .photo-slot, .habit-row, .slot, .react-btn, .vid-tile, .voice-btn{
  transition:transform 0.1s ease;
}
.qf-btn:active, .qf-chip:active, .more-row:active, .rowitem:active{ transform:scale(0.98); }
.tabbtn:active, .avatar-btn:active, .icon-btn:active{ transform:scale(0.9); }

.foot{
  margin-top:1.1rem;
  font-size:0.68rem;
  color:var(--faint);
  display:flex; align-items:center; justify-content:center; gap:0.45rem;
}
.foot img{ width:1.1rem; height:1.1rem; border-radius:3px; }
.foot a{ color:var(--faint); text-decoration:none; }
.foot a:hover{ color:var(--gold); }

html.is-embed, html.is-embed body{
  background:transparent;
  min-height:0;
  height:100%;
}
html.is-embed body{ background:transparent; }
html.is-embed .page{ min-height:100%; padding:0.6rem; }
html.is-embed .chrome{ display:none; }
html.is-embed .device{
  width:min(340px, 96vw, calc(100dvh * 340 / 700));
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.55);
}

@media (max-width:420px){
  .page{ padding:0.85rem 0.6rem 1rem; }
  .note{ font-size:0.72rem; }
}