: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-card { border: 1.5px solid var(--line); border-radius: 21px; padding: 13px 11px; box-shadow: 0 4px 12px #b998cc12; background: linear-gradient(150deg, #fffcef77, #f6eafa88); }
.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 #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; }
.day-0 .date-tile { background: linear-gradient(135deg, #e7b46a, #cf8b4e); }
.day-1 .date-tile { background: linear-gradient(135deg, #ae99cf, #8e78b0); }
.day-2 .date-tile { background: linear-gradient(135deg, #93bf7f, #55934f); }
.day-heading { font-size: 15px; font-weight: 700; }
.day-number { color: var(--muted); font-size: 12px; margin-top: 5px; }
.schedule-row { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; padding: 12px 9px; border: 1px solid var(--line); border-radius: 16px; background: #fbf6fb; }
.schedule-row + .schedule-row { margin-top: 8px; }
.schedule-time { font-size: 17px; font-weight: 750; color: var(--orange); font-variant-numeric: tabular-nums; }
.schedule-text { flex: 1; min-width: 0; }
.schedule-title { font-size: 13px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.schedule-subtitle { color: var(--muted); font-size: 12px; margin-top: 4px; }
.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; }
.arrow { color: #b09ab9; font-size: 22px; }
.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; }
.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; backdrop-filter: blur(3px); }
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; background: none; font-size: 14px; color: #8a7494; }
.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; }
  .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: 15px; 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 { gap: 6px; padding: 10px 7px; }
  .schedule-time { font-size: 15px; }
  .role { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }