:root {
  color-scheme: light;
  --bg: #241a2b;
  --paper: #fdf8f2;
  --line: #e6d6f0;
  --ink: #2d2433;
  --muted: #8a7f8f;
  --orange: #c0662a;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 95% 0, #49304266, transparent 42%), var(--bg); }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .55; }
button, input, textarea { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #a579ba; outline-offset: 3px; }
button { border: 0; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.ambient { position: fixed; right: -12px; top: 44%; color: #bea2ca24; font-size: 160px; pointer-events: none; z-index: -1; }
#app { max-width: 760px; margin: auto; padding: max(18px, env(safe-area-inset-top)) 12px calc(110px + env(safe-area-inset-bottom)); }
.boot { color: #fdf8f2; text-align: center; padding: 35vh 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 24px; gap: 16px; }
.brand { font-size: 27px; font-weight: 800; letter-spacing: 2px; color: var(--paper); }
.tagline { font-size: 11px; letter-spacing: 2px; color: #bfaec8; margin-top: 7px; }
.profile { border: 1px solid #75617f; border-radius: 30px; background: #ffffff0b; color: #f7eaf9; padding: 10px 13px; max-width: 50%; display: flex; align-items: center; gap: 7px; font-size: 13px; }
.profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dot { height: 7px; width: 7px; flex-shrink: 0; background: #a9c994; border-radius: 50%; }
.panel { background: linear-gradient(155deg, #fffaf0 0%, var(--paper) 52%, #f6eafa 100%); border: 1.5px solid var(--line); border-radius: 28px; box-shadow: 0 6px 20px #130c191a, inset 0 1px 0 #fff; padding: 22px 18px; margin-bottom: 18px; }
.section-title { font-size: 19px; line-height: 1.4; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.section-title small { font-size: 13px; font-weight: 600; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 50%; background: #fbe3d0; color: var(--orange); font-size: 14px; font-weight: 700; }
.section-toggle { width: 100%; min-height: 44px; background: none; padding: 0; text-align: left; margin: 0; }
.section-toggle .chevron { margin-left: auto; color: #9a8b76; font-size: 14px; transition: transform .15s; }
.section-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.section-content { margin-top: 18px; }
.empty { font-size: 13px; color: var(--muted); line-height: 1.8; padding: 9px 0; }
.empty-icon { display: block; font-size: 25px; margin-bottom: 8px; }
/* 今天橙、明天紫、后天绿：日期方块、卡片底色、每行左边的色条、时间文字都跟着变 */
.day-0 { --day-a: #e7b46a; --day-b: #cf8b4e; --day-ink: #b25a1e; --day-soft: #fcefdf; --day-line: #efd3b3; }
.day-1 { --day-a: #ae99cf; --day-b: #8e78b0; --day-ink: #7556a6; --day-soft: #f1eafb; --day-line: #d9cbef; }
.day-2 { --day-a: #93bf7f; --day-b: #55934f; --day-ink: #3f7d3a; --day-soft: #e9f4e3; --day-line: #c8e0bd; }
.day-card { border: 1.5px solid var(--day-line, var(--line)); border-radius: 21px; padding: 13px 11px; box-shadow: 0 4px 12px #b998cc12; background: linear-gradient(150deg, #fffcf7, var(--day-soft, #f6eafa)); }
.day-card + .day-card { margin-top: 12px; }
.day-header { display: flex; gap: 13px; align-items: center; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px dashed var(--day-line, #d9cbdc); }
.date-tile { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; font-size: 29px; font-weight: 700; box-shadow: inset 0 2px 2px #ffffff66, 0 4px 12px #8b6f8b22; background: linear-gradient(135deg, var(--day-a), var(--day-b)); }
.day-heading { font-size: 15px; font-weight: 700; }
.day-number { color: var(--muted); font-size: 12px; margin-top: 5px; }
.schedule-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); width: 100%; align-items: center; gap: 10px; text-align: left; padding: 10px 10px 10px 9px; border: 1px solid var(--day-line, var(--line)); border-left: 4px solid var(--day-b, var(--line)); border-radius: 16px; background: #fffdfb; }
.schedule-row + .schedule-row { margin-top: 8px; }
.schedule-text { min-width: 0; }
.schedule-top { display: flex; align-items: center; gap: 7px; }
.schedule-time { font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--day-ink, var(--orange)); font-variant-numeric: tabular-nums; }
.schedule-subtitle { flex: 1; color: var(--muted); font-size: 12px; white-space: nowrap; }
.schedule-title { display: -webkit-box; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.role { flex-shrink: 0; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 7px 8px; background: #e4eddb; white-space: nowrap; }
.role.host { background: linear-gradient(135deg, #ffe36a, #f6c323); color: #765510; }
.party-list { display: grid; gap: 10px; }
.party-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; text-align: left; background: #fbf6fb; border: 1.5px solid var(--line); border-radius: 20px; padding: 12px 10px; }
.cover { overflow: hidden; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #e9cfac, #c6afd9); border-radius: 10px; aspect-ratio: 76 / 44; width: 100%; }
.cover::before { content: '🎮'; font-size: 26px; }
.cover img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.party-title { font-size: 13px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.party-meta { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 4px; overflow-wrap: anywhere; }
.when[class*="day-"] { color: var(--day-ink); font-weight: 750; }
.status { color: var(--orange); font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-icon { font-size: 15px; margin-right: 3px; }
.fab { position: fixed; right: max(18px, calc((100vw - 736px) / 2)); bottom: calc(22px + env(safe-area-inset-bottom)); padding: 16px 23px; border: 1px solid #ffe4a9; border-radius: 40px; background: linear-gradient(135deg, #ffe18b, #f5bd55); color: #64421e; font-weight: 800; font-size: 16px; box-shadow: 0 6px 24px #100c1366; z-index: 3; }
.footer-note { color: #a18cab; text-align: center; font-size: 11px; letter-spacing: 2px; padding: 8px; }
.login { max-width: 420px; margin: 10vh auto 0; }
.login-brand { text-align: center; margin-bottom: 30px; }
.login-anchor { display: block; font-size: 52px; margin-bottom: 13px; }
.login .panel { padding: 28px 24px; }
.login h2 { font-size: 22px; margin-bottom: 8px; }
.login-intro { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.field { display: block; margin-bottom: 19px; }
.field-label, legend { display: block; font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.optional { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 5px; }
input, textarea { width: 100%; min-width: 0; border: 1px solid #ddcfe5; background: #fffcff; color: var(--ink); border-radius: 13px; padding: 13px 12px; font-size: 16px; }
input::placeholder, textarea::placeholder { color: #a497aa; font-size: 13px; }
textarea { resize: vertical; min-height: 88px; }
.primary, .secondary, .danger { min-height: 46px; padding: 12px 18px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.primary { background: linear-gradient(135deg, #fbd477, #f2b757); color: #64411e; }
.secondary { background: #f1e8f4; color: #6c527a; border: 1px solid #dfcde7; }
.danger { background: #fbe6df; color: #b24f37; border: 1px solid #efc9bd; }
.full-width { width: 100%; }
.toast { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); width: max-content; background: #fffaf0; color: #57405f; border: 1px solid #ddc8e6; border-radius: 16px; padding: 13px 20px; box-shadow: 0 6px 32px #160d2b40; font-size: 14px; z-index: 100; overflow-wrap: anywhere; }
.toast.error { background: #fff0e9; color: #a34b2c; }
.sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%, 600px); max-width: 100%; max-height: 92vh; max-height: 92dvh; border: 1.5px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--paper); color: var(--ink); padding: 0 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 50px #120c2540; overscroll-behavior: contain; }
.sheet::backdrop { background: #140d20b3; }
body.modal-open { overflow: hidden; }
.sheet-handle { width: 38px; height: 4px; background: #d9c9dd; border-radius: 4px; margin: 10px auto 3px; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 18px; }
.sheet-header h2 { font-size: 21px; }
.close { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #efe5f2; font-size: 24px; color: #8a7494; line-height: 1; }
.hero-cover { aspect-ratio: 460 / 215; border-radius: 19px; margin-bottom: 20px; }
.hero-cover::before { font-size: 64px; }
.detail-title { font-size: 23px; line-height: 1.45; margin-bottom: 16px; overflow-wrap: anywhere; }
.detail-info { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 14px; color: #76637f; line-height: 1.7; margin-bottom: 16px; }
.detail-info .status { font-size: 13px; }
.note { white-space: pre-wrap; overflow-wrap: anywhere; padding: 15px; background: #f4ecf6; border-radius: 14px; font-size: 14px; line-height: 1.7; margin-bottom: 23px; }
.members-heading { font-size: 15px; margin-bottom: 12px; }
.members { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.member { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; font-size: 13px; overflow-wrap: anywhere; }
.member.is-host { background: #fff1c6; border-color: #efdda3; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.actions > button { flex: 1; }
.actions .copy { flex-basis: 100%; }
.detail-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 0 0; }
.confirm-delete { margin-top: 18px; padding: 16px; background: #fff0e9; border: 1px solid #eac8ba; border-radius: 16px; font-size: 14px; line-height: 1.7; }
fieldset { border: 0; padding: 0; margin: 0 0 19px; min-width: 0; }
.stepper { display: flex; gap: 9px; align-items: center; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ddcfe5; background: #fffaff; font-size: 21px; }
.stepper output { min-width: 46px; text-align: center; font-weight: 700; }
.stepper .unlimited { margin-left: 6px; width: auto; padding: 0 16px; font-size: 14px; }
.stepper .unlimited[aria-pressed="true"] { background: #f6dfb4; border-color: #e1b76c; color: #925723; }
.tabs { display: flex; padding: 4px; background: #ede3ef; border-radius: 14px; margin-bottom: 13px; gap: 5px; }
.tabs button { flex: 1; border-radius: 10px; padding: 10px 6px; background: none; font-size: 14px; color: #8a7494; white-space: nowrap; }
.tab-count { margin-left: 4px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.tabs button[aria-selected="true"] { background: #fffcf7; box-shadow: 0 2px 5px #42234710; color: #a7682d; font-weight: 700; }
.date-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.date-fields label { font-size: 12px; color: var(--muted); }
.date-fields input { margin-top: 6px; min-height: 47px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chips button { background: #f1e7f3; padding: 8px 10px; border-radius: 20px; font-size: 12px; color: #81638c; }
.search-field { position: relative; }
.search-results { background: #fffcff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px #462a4b12; max-height: 240px; overflow-y: auto; margin-top: 6px; }
.search-result { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border-bottom: 1px solid #f0e7f3; text-align: left; padding: 10px; font-size: 14px; }
.search-result .cover { width: 65px; flex-shrink: 0; }
.search-result span:last-child { overflow-wrap: anywhere; }
.search-hint { padding: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.game-preview { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 10px; background: #f1e9f4; border-radius: 12px; font-size: 13px; }
.game-preview .cover { width: 90px; flex-shrink: 0; }
.game-preview small { display: block; color: var(--muted); margin-top: 4px; }
.form-error { color: #ad482e; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.sync-notice { color: #f2d5aa; font-size: 12px; line-height: 1.7; padding: 0 8px 15px; }
.sync-notice button { color: inherit; background: none; text-decoration: underline; }
@media (min-width: 540px) {
  #app { padding-left: 24px; padding-right: 24px; }
  .filter-bar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .panel { padding: 25px; margin-bottom: 22px; }
  .party-row { grid-template-columns: 76px minmax(0, 1fr) auto; padding: 14px; gap: 13px; }
  .party-title { font-size: 16px; }
  .party-meta, .status { font-size: 13px; }
  .schedule-title { font-size: 15px; }
  .role { font-size: 12px; }
  .schedule-row { padding: 13px 15px 13px 13px; gap: 14px; }
  .sheet { padding-left: 26px; padding-right: 26px; }
}
@media (max-width: 360px) {
  .panel { padding: 19px 13px; }
  .party-row { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 7px; padding: 10px 8px; }
  .status { font-size: 10px; }
  .status-icon { font-size: 12px; margin-right: 1px; }
  .schedule-row { grid-template-columns: 54px minmax(0, 1fr); gap: 7px; padding: 9px 7px; }
  .schedule-time { font-size: 16px; }
  .role { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* 第一期：Steam、审核、公告和管理，沿用码头卡片和底部弹层。 */
.topbar { flex-wrap: wrap; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
.topbar-actions .profile { max-width: 160px; min-width: 0; }
.manage-button { position: relative; flex-shrink: 0; border: 1px solid #75617f; border-radius: 30px; background: #ffffff0b; color: #f7eaf9; padding: 10px 12px; font-size: 13px; min-height: 40px; }
.pending-badge { position: absolute; right: -5px; top: -8px; min-width: 20px; padding: 2px 5px; border-radius: 20px; background: #c44b4f; color: #fff; font-size: 11px; }
.login { margin-top: 4vh; }
.field-help { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 9px 0 12px; overflow-wrap: anywhere; }
.steam-preview { color: var(--muted); font-size: 13px; line-height: 1.6; }
.steam-preview:not(:empty) { border-radius: 14px; padding: 12px; background: #f2eaf4; margin-top: 10px; }
.preview-question { color: #776080; font-size: 12px; margin-bottom: 8px; }
.steam-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.steam-person > div { min-width: 0; overflow-wrap: anywhere; }
.steam-person strong { font-size: 14px; color: var(--ink); }
.steam-person small, .person-info small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 3px; overflow-wrap: anywhere; }
.avatar { width: 38px; height: 38px; position: relative; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #dac7e5; color: #765487; font-size: 16px; font-weight: 700; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.access-page h2 { line-height: 1.5; }
.access-name { margin: 20px 0 12px; font-weight: 700; overflow-wrap: anywhere; }
.access-message { margin: 18px 0; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-button { background: transparent; color: #82608c; padding: 8px; min-width: 36px; min-height: 36px; font-size: 12px; line-height: 1.6; border-radius: 9px; }
.text-button:hover { background: #eadced88; }
.danger-text { color: #b24f37; }
.members { display: grid; }
.member { display: flex; align-items: center; gap: 9px; min-width: 0; }
.person-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person-info strong { font-size: 13px; line-height: 1.6; }
.friend-copy { flex-shrink: 0; max-width: 100%; overflow-wrap: anywhere; }
.member .friend-copy { font-size: 11px; background: #f0e7f3; display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 10px; line-height: 1.35; }
.friend-code-label { font-size: 10px; color: var(--muted); }
.friend-code { font-size: 13px; font-weight: 800; color: #5e3f69; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.friend-code-copy { font-size: 10px; color: var(--orange); }
.admin-user .friend-copy { display: inline-flex; flex-direction: row; gap: 6px; align-items: baseline; }
/* 首页标签筛选：可横向滑动的胶囊，往下滑时吸顶 */
.filter-bar { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 14px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: #241a2bf5; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1.5px solid #5d4a66; border-radius: 999px; background: #ffffff0d; color: #eadcf0; font-size: 14px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.filter-chip[aria-pressed="true"] { background: var(--paper); border-color: #f2c48d; color: var(--orange); box-shadow: 0 4px 14px #0000004d; }
.filter-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ffffff1a; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.filter-chip[aria-pressed="true"] .filter-count { background: #fbe3d0; color: var(--orange); }
.filter-empty .empty { text-align: center; padding: 18px 0; }
.notice-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.notice-title { background: transparent; padding: 6px 0; margin: 0; min-height: 38px; text-align: left; }
.unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #cb4b55; flex-shrink: 0; }
.notice-item { padding: 14px 0 10px; border-top: 1px dashed #dfcfe6; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
.notice-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 7px; }
.notice-footer small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.notice-tools { display: flex; gap: 3px; }
.check-field { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 14px; }
.check-field input { width: 32px; height: 32px; accent-color: #9d79ae; }
.admin-summary { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.admin-summary strong { color: var(--ink); font-size: 16px; }
.admin-search { margin-bottom: 11px; }
.admin-user { background: #fffbfd; border: 1px solid var(--line); border-radius: 17px; padding: 14px; margin-bottom: 12px; }
.admin-user .steam-person { align-items: flex-start; }
.admin-user .friend-copy { padding-left: 0; text-align: left; }
.user-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.user-actions button { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.admin-label { font-size: 12px; border-radius: 16px; padding: 7px 12px; background: #fff0bb; color: #8d6519; }
.ban-reason { margin-top: 10px; padding: 10px; border-radius: 10px; background: #fff0e9; color: #a35d45; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 400px) {
  .topbar { gap: 14px 8px; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .profile { max-width: 142px; }
  .login .panel { padding: 24px 18px; }
  .login-brand { margin-bottom: 20px; }
  .member { flex-wrap: wrap; }
  .member .friend-copy { margin-left: 47px; }
}

/* 第二期：上车记录、月历和码头周报。 */
.stats-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; text-align: center; }
.stats-numbers > div { padding: 6px 0; min-width: 0; }
.stats-numbers > div + div { border-left: 1px dashed #dfcfe6; }
.stats-numbers span { color: var(--muted); font-size: 12px; }
.stats-numbers p { color: var(--orange); font-size: 12px; margin-top: 6px; }
.stats-numbers strong { font-size: 30px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats-links button { padding: 12px 6px; font-size: 14px; }
.weekly-unread { display: flex; gap: 5px; align-items: center; justify-content: center; font-size: 10px; margin-top: 6px; font-weight: 400; }
.played-button { flex-basis: 100% !important; }
.played-time { flex-basis: 100%; color: var(--orange); }
.period-nav { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; margin: 4px 0 20px; text-align: center; }
.period-nav button { padding: 4px; font-size: 27px; min-height: 42px; }
.period-nav button:disabled { cursor: default; }
.period-nav strong { font-size: 17px; }
.ongoing { display: block; margin-top: 5px; color: var(--orange); font-size: 11px; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-weekday { text-align: center; color: var(--muted); font-size: 12px; padding: 5px 0 9px; }
.calendar-day { position: relative; min-width: 0; min-height: 38px; aspect-ratio: 1; padding: 5px 0; border-radius: 12px; background: #f4edf6; border: 1.5px solid transparent; font-size: 14px; }
.calendar-day.has-rides { background: #fbe3d0; color: #9c4d1f; font-weight: 700; }
.calendar-day.today { border-color: #b88345; }
.calendar-day[aria-pressed="true"] { background: #c0662a; color: #fffaf0; }
.calendar-day small { position: absolute; right: 3px; top: 1px; font-size: 9px; }
.stats-section { margin-top: 25px; }
.stats-section h3 { font-size: 16px; margin-bottom: 13px; }
.ride-entry, .stats-game { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 15px; background: #fbf6fb; min-width: 0; }
.ride-entry + .ride-entry, .stats-game + .stats-game { margin-top: 8px; }
.ride-entry .cover, .stats-game .cover { width: 58px; flex-shrink: 0; }
.ride-entry > div, .stats-game strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ride-entry strong, .stats-game strong { font-size: 13px; line-height: 1.6; }
.ride-entry small { display: block; font-size: 11px; color: #a87328; margin-top: 4px; }
.stats-game > span:last-child { color: var(--orange); font-size: 12px; white-space: nowrap; }
.week-numbers { background: #f7ede5; padding: 12px 5px; border-radius: 18px; }
.crew-list { display: grid; gap: 8px; }
.crew-row { display: flex; gap: 9px; align-items: center; min-width: 0; width: 100%; text-align: left; padding: 12px 9px; border: 1px solid var(--line); border-radius: 16px; background: #fbf6fb; }
.crew-rank { width: 23px; flex-shrink: 0; text-align: center; color: var(--orange); font-size: 18px; }
.checkin-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; overscroll-behavior-x: contain; }
.checkin { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 430px; table-layout: fixed; font-size: 12px; text-align: center; }
.checkin th, .checkin td { height: 47px; padding: 6px 3px; border-bottom: 1px solid #eadfec; background: #fffafb; }
.checkin thead th { background: #efe4f2; font-weight: 600; color: #806489; }
.checkin th:first-child { position: sticky; left: 0; width: 94px; z-index: 1; background: #f5ecf6; border-right: 1px solid var(--line); }
.checkin th small { display: block; font-size: 10px; margin-top: 4px; font-weight: 400; }
.checkin th button { width: 100%; padding: 6px 3px; overflow-wrap: anywhere; text-align: left; }
.checkin tr:last-child td, .checkin tr:last-child th { border-bottom: 0; }
.checkin-count { display: inline-grid; place-items: center; min-width: 25px; height: 25px; border-radius: 50%; background: #fbe3d0; color: #a55220; font-weight: 700; }
.checkin-empty { color: #d3c4d8; }
.week-empty { text-align: center; padding: 30px 0; }
.share-button { margin-top: 25px; }
.week-image p { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 0 12px; }
.week-image img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 360px) {
  .sheet { padding-left: 14px; padding-right: 14px; }
  .calendar { gap: 3px; }
  .calendar-day { min-height: 35px; border-radius: 10px; }
  .stats-numbers strong { font-size: 26px; }
  .crew-row { gap: 7px; }
  .crew-row .avatar { width: 32px; height: 32px; }
  .crew-row .person-info small { font-size: 11px; }
}

/* 第三期：醒目提醒、可选手机通知与身份找回。 */
.reminders { display: grid; gap: 9px; margin-bottom: 20px; }
.reminder { display: flex; align-items: center; min-width: 0; border: 1px solid #edc8a4; border-left: 5px solid #c0662a; border-radius: 16px; background: #fff4e4; box-shadow: 0 4px 16px #100c1322; color: #9b511f; }
.reminder-main { flex: 1; min-width: 0; padding: 14px 9px 14px 13px; text-align: left; background: transparent; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.reminder-close { width: 38px; min-height: 44px; flex-shrink: 0; margin-right: 4px; background: transparent; border-radius: 12px; color: inherit; font-size: 24px; }
.reminder-urgent { color: #ac3039; border-color: #efadb1; border-left-color: #cc3f4b; background: #fff0ed; animation: reminder-breathe 2.8s ease-in-out infinite; }
@keyframes reminder-breathe { 50% { box-shadow: 0 0 0 3px #efadb144, 0 4px 16px #100c1322; } }
.push-profile { margin-top: 22px; padding-top: 20px; border-top: 1px dashed #dfcfe6; }
.push-profile h3 { font-size: 17px; margin-bottom: 12px; }
.push-access { margin-top: 12px; }
.push-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eadfec; font-size: 14px; line-height: 1.6; }
.push-option span { min-width: 0; overflow-wrap: anywhere; }
.push-option input { appearance: none; flex-shrink: 0; width: 48px; height: 30px; padding: 3px; border-radius: 30px; background: #ded2e3; border: 1px solid #ccbad5; cursor: pointer; }
.push-option input::before { content: ''; display: block; width: 22px; height: 22px; border-radius: 50%; background: #fffcf7; box-shadow: 0 1px 4px #42234733; transition: transform .15s; }
.push-option input:checked { background: #c08243; border-color: #b57a3e; }
.push-option input:checked::before { transform: translateX(18px); }
.push-option input:disabled { opacity: .55; cursor: wait; }
.push-success { background: #edf3e4; color: #54743b; border: 1px solid #d4e2c3; border-radius: 14px; padding: 14px; margin-bottom: 12px; font-weight: 700; }
.qr-code { text-align: center; margin: 6px 0 18px; }
.qr-code img { display: block; width: 220px; height: 220px; max-width: 100%; object-fit: contain; background: white; margin: auto; border-radius: 12px; }
.qr-help { font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.qr-help p + p { margin-top: 10px; }
.qr-link { display: block; width: fit-content; margin: 12px auto; text-align: center; }
.qr-status { color: #8a7f8f; background: #f1e8f4; padding: 12px; border-radius: 12px; font-size: 12px; line-height: 1.8; text-align: center; overflow-wrap: anywhere; }
.recover-entry { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .reminder-urgent { animation: none; } }

/* 管理后台每个成员下面的小工具；换设备登录码 */
.user-tools { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #eadff0; }
.login-code-big { margin: 18px 0 10px; text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 4px; color: var(--orange); font-variant-numeric: tabular-nums; }
.login-code-input { text-transform: uppercase; letter-spacing: 2px; }
@media (max-width: 400px) {
  .filter-bar { gap: 6px; }
  .filter-chip { padding: 0 12px; font-size: 13px; }
}