/* Shu 旧版小程序的增量外壳。只使用 shu-miniapp-* 与 #music* 命名空间。 */
.menu-group-label{
  padding:22px 18px 7px;
  color:var(--text-faint);
  font:500 10px/1.2 var(--font-en),var(--font-cn);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.shu-miniapp-panel{
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
  transition:transform .32s var(--ease-soft),opacity .22s ease;
}
.shu-miniapp-panel[hidden]{ display:none !important; }
.shu-miniapp-panel.open{ transform:none;opacity:1;pointer-events:auto; }
.shu-miniapp-top{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  min-height:calc(58px + env(safe-area-inset-top));
  padding:calc(7px + env(safe-area-inset-top)) max(8px,var(--side-pad)) 7px;
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);
}
.shu-miniapp-top h2{ margin:0;text-align:center;font:500 20px/1.25 var(--font-cn); }
.shu-miniapp-back{
  width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--text);
  font:300 31px/1 var(--font-cn);cursor:pointer;
}
.shu-miniapp-scroll{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px max(14px,var(--side-pad)) calc(36px + env(safe-area-inset-bottom));
}
.shu-miniapp-shell{ width:min(100%,680px);margin:0 auto;display:grid;gap:14px; }
.shu-miniapp-card{
  padding:16px;
  border:1px solid var(--card-line);
  border-radius:20px;
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(14px);
}
.shu-miniapp-card h3{ margin:0 0 5px;font-size:16px;font-weight:600; }
.shu-miniapp-card > p,.miniapp-state{ margin:0;color:var(--text-faint);font-size:12px;line-height:1.65; }
.miniapp-together{text-align:center}
.miniapp-together > span{ display:block;color:var(--text-soft);font-size:12px; }
.miniapp-together > b{ display:block;margin:4px 0;font:600 38px/1.2 var(--font-en),var(--font-cn); }
.miniapp-list{ display:grid;gap:9px; }
.miniapp-list-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:10px;
  padding:13px 14px;border:1px solid var(--hairline);border-radius:16px;background:color-mix(in srgb,var(--card-bg) 82%,transparent);
}
.miniapp-list-card span{ min-width:0; }
.miniapp-list-card b,.miniapp-list-card small{ display:block;overflow:hidden;text-overflow:ellipsis; }
.miniapp-list-card b{ font-size:14px;white-space:nowrap; }
.miniapp-list-card small{ margin-top:4px;color:var(--text-faint);font-size:11px;white-space:normal; }
.miniapp-list-card strong{ color:var(--text-soft);font-size:12px;white-space:nowrap; }
.miniapp-list-card button{ width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--text-faint);font-size:20px; }
.miniapp-empty{ margin:0;padding:20px;text-align:center;color:var(--text-faint);font-size:13px; }
.miniapp-empty.error{ color:#a05f52; }
.miniapp-fields{ display:grid;gap:11px;margin-top:13px; }
.miniapp-fields label,.miniapp-toggle-row{ display:grid;gap:6px;color:var(--text-soft);font-size:12px; }
.miniapp-fields input[type="text"],.miniapp-fields input[type="date"],.miniapp-time-row input[type="time"]{
  width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--hairline);border-radius:13px;
  background:color-mix(in srgb,var(--card-bg) 76%,transparent);color:var(--text);font:inherit;font-size:14px;
}
.miniapp-date-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px; }
.miniapp-check{ display:flex!important;grid-auto-flow:column!important;align-items:center;gap:7px!important;white-space:nowrap; }
.miniapp-check input{ width:20px;height:20px; }
.miniapp-primary{
  justify-self:start;min-height:40px;padding:0 22px;border:0;border-radius:999px;background:var(--text);color:var(--bg);
  font:500 14px/1 var(--font-cn);cursor:pointer;
}
.miniapp-primary:disabled,.miniapp-secondary:disabled{ opacity:.55;cursor:wait; }
.miniapp-time-list{ display:grid;gap:10px;margin-top:13px; }
.miniapp-time-row{ display:grid;grid-template-columns:minmax(88px,1fr) minmax(130px,180px);align-items:center;gap:12px;font-size:14px; }
.miniapp-time-row input[type="checkbox"]{ justify-self:end;width:22px;height:22px; }
.miniapp-time-row small{ display:block;margin-top:3px;color:var(--text-faint);font-size:10.5px; }
.miniapp-proactive{ display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px; }
.miniapp-proactive button,.miniapp-secondary{
  min-height:42px;padding:7px 6px;border:1px solid var(--hairline);border-radius:13px;background:transparent;color:var(--text);font:inherit;font-size:12px;
}
.miniapp-proactive button[aria-pressed="true"]{ border-color:var(--accent);background:var(--accent);color:white; }
.miniapp-test-row{ display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px; }
.miniapp-room-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.miniapp-room-stats article{ padding:12px 5px;text-align:center;border:1px solid var(--hairline);border-radius:15px;background:var(--card-bg); }
.miniapp-room-stats small,.miniapp-room-stats b{ display:block; }
.miniapp-room-stats small{ color:var(--text-faint);font-size:10px; }
.miniapp-room-stats b{ margin-top:4px;font-size:13px; }
.miniapp-room-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px; }
.miniapp-room-grid button{ min-width:0;min-height:82px;padding:9px 3px;border:1px solid var(--hairline);border-radius:15px;background:transparent;color:var(--text); }
.miniapp-room-grid button[data-unlocked="0"]{ opacity:.42; }
.miniapp-room-grid span,.miniapp-room-grid small{ display:block; }
.miniapp-room-grid span{ font-size:28px;line-height:1.2; }
.miniapp-room-grid small{ margin-top:5px;color:var(--text-soft);font-size:10px;line-height:1.35; }
@media (max-width:375px){
  .shu-miniapp-scroll{ padding-left:12px;padding-right:12px; }
  .miniapp-room-stats{ gap:5px; }
  .miniapp-room-grid{ grid-template-columns:repeat(3,1fr); }
  .miniapp-proactive{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){ .shu-miniapp-panel{ transition-duration:.01ms; } }

/* Native reminder controls, including small phone widths. */
.miniapp-fields input,.miniapp-fields textarea,.miniapp-fields select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--hairline);border-radius:13px;background:var(--card-bg);color:var(--text);font:inherit;}