/* Shared dinner surfaces: quiet teal, readable facts, one next action. */
.dinner-ux-form, .dinner-ux-panel {
  --du-ink:#203f39; --du-muted:#536c64; --du-green:#286d60; --du-line:#d8e5df;
  color:var(--du-ink); font-size:15px; line-height:1.65;
}
.dinner-ux-form [hidden], .dinner-ux-panel [hidden] { display:none !important; }
.dinner-ux-form p, .dinner-ux-panel p, .dinner-ux-panel .my-dinner-hint { color:var(--du-muted); font-size:14px; line-height:1.7; }
.dinner-ux-form label { display:grid; gap:8px; font-size:14px; line-height:1.55; }
.dinner-ux-form label:has(input[type="checkbox"]) { display:flex; align-items:flex-start; gap:10px; }
.dinner-ux-form input[type="checkbox"] { width:20px !important; height:20px !important; min-height:20px; flex:0 0 20px; margin-top:3px; accent-color:var(--du-green); }
.dinner-ux-form input:not([type="checkbox"]), .dinner-ux-form select, .dinner-ux-form textarea { box-sizing:border-box; width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--du-line); border-radius:12px; font:inherit; font-size:15px; color:var(--du-ink); background:#fff; }
.dinner-ux-form small, .dinner-ux-panel small { font-size:13px; color:var(--du-muted); line-height:1.65; }
.dinner-ux-form .signup-chip-group { display:flex; flex-wrap:wrap; gap:9px; margin:8px 0 18px; }
.dinner-ux-form .signup-chip-group > p { flex-basis:100%; margin:0; font-weight:700; color:var(--du-ink); }
.dinner-ux-form .signup-chip-group .pref-chip { min-height:44px; padding:8px 15px; font-size:14px; line-height:1.45; border:1px solid #b8cec3; border-radius:14px; color:#315e50; background:#f5faf7; box-shadow:none; }
.dinner-ux-form .pref-chip.selected, .dinner-ux-form .pref-chip[aria-pressed="true"] { color:#fff; background:var(--du-green); border-color:var(--du-green); }
.dinner-ux-form .pref-chip.selected:before { content:'✓ '; }
.dinner-ux-form .pref-chip.selected:disabled { opacity:1; cursor:default; }
.dinner-ux-form :focus-visible, .dinner-ux-panel :focus-visible, .dinner-ux-exit :focus-visible { outline:3px solid #bc793c; outline-offset:3px; }
.dinner-ux-checkout { position:sticky; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 max(16px, env(safe-area-inset-bottom)); margin-top:18px; background:rgba(255,255,255,.98); border-top:1px solid var(--du-line); }
.dinner-ux-checkout [data-ux-price] { display:grid; gap:2px; }
.dinner-ux-checkout [data-ux-price] > span { font-size:13px; color:var(--du-muted); }
.dinner-ux-checkout strong { font-size:27px; letter-spacing:-.04em; color:var(--du-ink); line-height:1.15; }
.dinner-ux-checkout button[type="submit"], .dinner-ux-primary { min-height:48px; padding:12px 20px; border:0; border-radius:14px; background:#286d60 !important; color:white !important; font-size:15px; font-weight:700; }
.dinner-ux-checkout button[disabled] { opacity:.6; }
.dinner-ux-rules { margin-top:16px; border-top:1px solid var(--du-line); padding-top:14px; }
.dinner-ux-rules summary, .dinner-ux-fold summary { padding:10px 0; cursor:pointer; font-weight:700; font-size:15px; }
.dinner-ux-preview { padding:18px; margin:10px 0; background:#eef5ef; border-left:3px solid #679e83; border-radius:0 14px 14px 0; }
.dinner-ux-preview > span { font-size:13px; font-weight:700; color:var(--du-muted); }
.dinner-ux-preview blockquote { margin:10px 0; padding:0; font-size:19px; font-weight:600; line-height:1.65; color:var(--du-ink); overflow-wrap:anywhere; }
.dinner-ux-stage-note { padding:12px 16px; border-left:3px solid #679e83; background:#f3f8f4; margin-top:14px !important; }
.dinner-ux-fold { border-bottom:1px solid var(--du-line); }
.dinner-ux-fold > section, .dinner-ux-fold > div { margin-top:0; border:0; }
.dinner-ux-panel .dinner-v2-summary h3 { font-size:24px; margin:8px 0 12px; }
.dinner-ux-panel .dinner-v2-info strong, .dinner-ux-panel .detail-row strong { font-size:15px; }
.dinner-ux-panel .dinner-v2-update { font-size:14px !important; color:var(--du-ink) !important; }
.dinner-ux-secondary { min-height:44px; padding:10px 16px; border:1px solid #b8cec3; border-radius:12px; background:transparent; color:#286d60; font:inherit; font-weight:600; }
.dinner-ux-panel button, .dinner-ux-panel summary { min-height:44px; }
.dinner-ux-panel [role="status"] { padding:16px; background:#f4f7f3; border-left:3px solid #679e83; color:#203f39; font-size:15px; }
.dinner-ux-referral-rules { margin:10px 0; padding-left:20px; color:var(--du-muted); font-size:14px; }
.dinner-ux-exit { box-sizing:border-box; width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; border:1px solid #d8e5df; border-radius:24px; background:#fffefa; color:#203f39; box-shadow:0 24px 80px #102a3040; }
.dinner-ux-exit::backdrop { background:#163b3959; }
.dinner-ux-exit h2 { font-size:24px; line-height:1.4; margin:8px 0 12px; }
.dinner-ux-exit p { font-size:14px; line-height:1.7; color:#536c64; }
.dinner-ux-kicker { font-size:13px; font-weight:700; color:#286d60; }
.dinner-ux-refund { margin:20px 0; padding:18px; border-radius:16px; background:#eff5ef; }
.dinner-ux-refund > span { display:block; font-size:14px; }.dinner-ux-refund > strong { font-size:30px; }
.dinner-ux-exit-actions { display:flex; gap:12px; margin-top:24px; }.dinner-ux-exit-actions button { flex:1; min-height:48px; padding:10px; border:1px solid #b8cec3; border-radius:12px; background:#fff; color:#203f39; font:inherit; font-weight:650; }
.dinner-ux-exit-actions .dinner-ux-danger { background:#924b3e; color:#fff; border-color:#924b3e; }
@media(max-width:520px) {
  .dinner-ux-checkout { gap:10px; margin-bottom:0; }
  .dinner-ux-checkout button[type="submit"] { max-width:62%; padding:12px 14px; }
  .dinner-ux-checkout [data-ux-price] small { max-width:155px; font-size:12px; }
  .dinner-ux-form .dinner-v2-payment, .dinner-ux-form .signup-form-section { min-width:0; }
  .dinner-ux-panel .dinner-v2-topic { display:block; }.dinner-ux-panel .dinner-v2-topic button { margin-top:12px; }
}

.dinner-ux-form fieldset label { display:grid; gap:8px; }
.dinner-ux-form fieldset label:has(input[type="checkbox"]) { display:flex; }
.dinner-ux-panel .dinner-ux-arrival .detail-row { margin:0; }
.dinner-ux-panel .dinner-ux-arrival > button { margin-top:14px; width:100%; }
.dinner-ux-panel .dinner-v2-summary { display:block; }
.dinner-ux-panel .dinner-v2-summary .dinner-v2-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:20px; }
.dinner-ux-panel .dinner-v2-support:not([open]) > form { display:none; }
#webTopicPickCards [hidden], #topicPickCards [hidden] { display:none !important; }
@media(max-width:520px) { .dinner-ux-panel .dinner-v2-summary .dinner-v2-grid { grid-template-columns:1fr; gap:10px; } }

/* Topic cards: one calm category color, with the question as the focal point. */
.dinner-ux-topics { --card-paper:#fff3ea; --card-accent:#a85438; gap:16px; }
.dinner-ux-topics :is(.topic-theme-relationship,.web-topic-theme-relationship) { --card-paper:#fff8e3; --card-accent:#756027; }
.dinner-ux-topics :is(.topic-theme-deepsea,.web-topic-theme-deepsea) { --card-paper:#edf4f8; --card-accent:#42677d; }
.dinner-ux-topics :is(.topic-theme-host,.web-topic-theme-host,.topic-theme-closing,.web-topic-theme-closing) { --card-paper:#eef5ef; --card-accent:#386451; }
.dinner-ux-topics :is(.topic-card-front,.web-topic-card-front) { min-height:260px; padding:24px; gap:22px; background:var(--card-paper); border:1px solid #0000000d; border-radius:20px; box-shadow:0 6px 18px #203f3908; }
.dinner-ux-topics :is(.topic-card-front,.web-topic-card-front)::before,
.dinner-ux-topics :is(.topic-card-front,.web-topic-card-front)::after { display:none; }
.dinner-ux-topics :is(.topic-card-copy,.web-topic-card-copy) { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:0; }
.dinner-ux-topics :is(.topic-core-question,.web-topic-core-question) { display:block; min-height:0; margin:0; padding:0; border:0; background:none; box-shadow:none; color:#263c36; font-size:clamp(23px,3vw,29px); font-weight:650; line-height:1.65; text-align:left; letter-spacing:0; overflow-wrap:anywhere; }
.dinner-ux-topics :is(.topic-core-question,.web-topic-core-question)::before,
.dinner-ux-topics :is(.topic-core-question,.web-topic-core-question)::after { display:none; }
.dinner-ux-topics .web-topic-card-copy h3 { font-size:14px; font-weight:500; color:var(--card-accent); margin:0; }
.dinner-ux-topics :is(.topic-pick-card-cat,.web-pick-cat,.topic-card-progress,.web-topic-card-progress) { color:var(--card-accent); background:none; border:0; font-size:13px; line-height:1.5; }
.dinner-ux-topics :is(.topic-card-back,.web-topic-card-back) { min-height:260px; }
.dinner-ux-topic-hint { color:#596961; font-size:14px; line-height:1.6; margin:4px 0 0; }
.dinner-ux-categories { display:flex; flex-wrap:wrap; gap:8px; }
.dinner-ux-categories > span { width:100%; font-size:14px; color:#536c64; }
.dinner-ux-categories button { border:1px solid #d1ded7; border-radius:12px; padding:10px 12px; min-height:44px; color:#39584c; background:#fff; font:inherit; font-size:13px; cursor:pointer; }
.dinner-ux-categories button[aria-pressed="true"] { background:#e5f0e8; border-color:#386451; color:#244a38; box-shadow:inset 0 0 0 1px #386451; }
.dinner-ux-categories button:focus-visible { outline:3px solid #a85438; outline-offset:3px; }
.dinner-ux-history-label { margin:12px 0 0; font-size:13px; color:#596961; text-align:center; }
.dinner-ux-topics :is(.topic-history-btn,.web-topic-history-btn) { width:auto; min-width:90px; min-height:44px; font-size:13px; border-radius:12px; padding:8px 12px; }
.dinner-ux-topics :is(.topic-detail-actions,.web-topic-pick-actions) { display:flex; flex-wrap:wrap; gap:10px; }
.dinner-ux-topics :is(.primary-btn,.btn-primary) { background:#286d60; color:#fff; min-height:48px; border-radius:12px; }
.dinner-ux-topics :is(.secondary-btn,.btn-ghost) { min-height:48px; border-radius:12px; }
.dinner-ux-topics :is(.web-topic-contribute-link,.dinner-v2-text-btn) { font-size:13px; min-height:44px; }
.dinner-ux-columns > .dinner-ux-main, .dinner-ux-columns > .dinner-ux-aside { min-width:0; }
.dinner-ux-columns .dinner-v2-section { box-shadow:none; }
.dinner-ux-extras { border-top:1px solid #d8e5df; padding-top:12px; }
@media(min-width:900px) {
  .dinner-ux-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:24px; align-items:start; }
  .dinner-ux-columns > .dinner-v2-summary, .dinner-ux-columns > .dinner-ux-extras { grid-column:1/-1; }
  .dinner-ux-aside { grid-column:2; grid-row:2; }
  .dinner-ux-main { grid-column:1; grid-row:2; }
}
@media(max-width:899px) {
  .dinner-ux-columns { display:flex; flex-direction:column; gap:16px; }
  .dinner-ux-columns > * { width:100%; box-sizing:border-box; }
  .dinner-ux-columns > .dinner-v2-summary { order:0; }
  .dinner-ux-columns > .dinner-ux-aside { order:1; }
  .dinner-ux-columns > .dinner-ux-main { order:2; }
  .dinner-ux-columns > .dinner-ux-extras { order:3; }
}
@media(max-width:520px) {
  .dinner-ux-topics :is(.topic-card-front,.web-topic-card-front) { padding:20px; min-height:220px; }
  .dinner-ux-categories button { flex:1 1 44%; }
}
@media(prefers-reduced-motion:reduce) {
  .dinner-ux-topics :is(.topic-card-front,.web-topic-card-front,.topic-card-back,.web-topic-card-back) { animation:none; transition:none; }
}

.dinner-ux-topics :is(.topic-single-card,.web-topic-single-card) { width:100%; max-width:none; margin-inline:0; }
.dinner-ux-topics .web-topic-pick-actions { flex-direction:row; justify-content:center; }
.dinner-ux-topics .web-topic-contribute-link { flex-basis:100%; }
@media(max-width:899px) { .dinner-ux-columns[data-stage="in_progress"] > .dinner-ux-main { order:1; } .dinner-ux-columns[data-stage="in_progress"] > .dinner-ux-aside { order:2; } }
/* Reading and history navigation stay still; only the covered card keeps its reveal treatment. */
.dinner-ux-topics :is(.topic-card-front,.web-topic-card-front) { animation:none; }

.dinner-ux-categories { margin-bottom:16px; }

/* Existing role artwork and small paper details keep each card playful. */
.dinner-ux-topics :is(.topic-card-front,.web-topic-card-front) {
  grid-template-rows:auto auto minmax(0,1fr); gap:16px;
  background-color:var(--card-paper);
  background-image:radial-gradient(#34483a09 .7px,transparent .8px);
  background-size:7px 7px;
  border-radius:22px 22px 28px 18px;
  border-bottom:3px solid color-mix(in srgb,var(--card-accent) 22%,var(--card-paper));
}
.dinner-ux-card-art { display:flex; align-items:center; gap:18px; height:70px; pointer-events:none; }
.dinner-ux-role-sticker { display:block; width:72px; height:72px; flex:0 0 72px; transform:rotate(-7deg); padding:3px; background:#fffdf8; border-radius:18px; box-shadow:0 3px 0 #263c3612,0 5px 12px #263c3610; }
.dinner-ux-role-sticker img { display:block; width:100%; height:100%; border-radius:14px; object-fit:cover; }
.dinner-ux-pencil-line { flex:1; border-top:2px dashed var(--card-accent); opacity:.22; transform:rotate(-3deg); }
.dinner-ux-card-doodle { flex:0 0 58px; stroke:var(--card-accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.64; transform:rotate(7deg); }
.dinner-ux-topics .topic-light-hint { color:#596961; font-size:14px; line-height:1.6; margin:4px 0 0; }
@media(max-width:520px) {
  .dinner-ux-card-art { height:58px; gap:14px; }
  .dinner-ux-role-sticker { width:60px; height:60px; flex-basis:60px; border-radius:16px; }
}

.dinner-ux-host-reward { margin:18px 0; padding:16px 18px; border:1px solid #dbc99d; border-radius:16px; background:#fff8e3; color:#53462c; }
.dinner-ux-host-reward strong { font-size:16px; }.dinner-ux-host-reward p { margin:8px 0 0; font-size:14px; line-height:1.75; }

.dinner-ux-topics :is(.topic-core-question,.web-topic-core-question) { white-space:pre-line; max-height:none; overflow:visible; -webkit-line-clamp:unset; }
.dinner-ux-topics :is(.topic-card-front-head,.web-topic-card-front-head) { justify-content:flex-end; }

.dinner-ux-topics :is(.topic-card-copy,.web-topic-card-copy) > .dinner-ux-question-detail {
  margin:0; padding:0; color:#53675f; font-size:16px; font-weight:400;
  line-height:1.8; text-align:left; white-space:pre-line; overflow-wrap:anywhere;
}

/* Journey guidance stays inside the existing arrival and identity sections. */
.dinner-ux-group-help p, .dinner-ux-opening-guide p, .dinner-ux-opening-guide li { font-size:14px; line-height:1.75; color:#53675f; }
.dinner-ux-group-help { margin-top:12px; }
.dinner-ux-help-link { padding:8px 0; min-height:44px; border:0; background:none; color:#286d60; text-decoration:underline; font:inherit; font-size:14px; cursor:pointer; }
.dinner-ux-opening-guide { margin-top:12px; border-top:1px solid #d8e5df; padding-top:8px; }
.dinner-ux-opening-guide summary { cursor:pointer; font-size:14px; font-weight:600; padding:10px 0; }
.dinner-ux-opening-guide ol { padding-left:22px; }.dinner-ux-opening-guide li { padding:4px 0; }.dinner-ux-opening-guide .is-done { color:#286d60; }
.dinner-ux-panel .dinner-ux-opening-status[role="status"] { padding:0; border:0; background:none; margin:12px 0; font-size:14px; }

/* Dinner checkout: keep the summary in the form flow so it never covers inputs. */
.dinner-ux-form .dinner-v2-payment {
  display:grid; gap:12px; padding:20px; margin-top:8px; border:1px solid var(--du-line);
  border-radius:18px; background:#f3f7f3; min-width:0;
}
.dinner-ux-form .dinner-v2-payment > p { display:grid; gap:3px; margin:0; }
.dinner-ux-form .dinner-v2-payment > p strong { color:var(--du-ink); font-size:17px; }
.dinner-ux-form .dinner-v2-payment > p span { color:var(--du-muted); font-size:13px; }
.dinner-ux-form .dinner-v2-payment > button { justify-self:start; margin-top:0; }
.dinner-ux-form .dinner-v2-payment [aria-live] { overflow-wrap:anywhere; }
.dinner-auto-coupon { display:grid; gap:3px; padding:12px 14px; border:1px dashed #b8cec3; border-radius:12px; background:#f8fbf8; color:var(--du-muted); }
.dinner-auto-coupon strong { color:var(--du-ink); font-size:14px; }
.dinner-auto-coupon span, .dinner-auto-coupon small { font-size:13px; color:var(--du-muted); }
.dinner-auto-coupon.is-applied { border-style:solid; border-color:#93c7b7; background:#edf7f1; }
.dinner-auto-coupon.is-applied strong { color:var(--du-green); }
.dinner-ux-form .dinner-ux-checkout {
  position:static; box-sizing:border-box; padding:16px 0 0; margin:4px 0 0;
  border:0; border-top:1px solid var(--du-line); border-radius:0; background:transparent;
  box-shadow:none; gap:20px; flex-wrap:wrap;
}
.dinner-ux-checkout [data-ux-price] { min-width:0; flex:1 1 180px; gap:5px; }
.dinner-ux-checkout [data-ux-price] small { font-weight:400; overflow-wrap:anywhere; }
.dinner-ux-checkout button[type="submit"] { flex:0 1 auto; max-width:100%; line-height:1.5; white-space:normal; }
.dinner-payment-method-step[hidden] { display:none !important; }
.dinner-payment-method-step { display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--du-line); }
.dinner-payment-method-step-head { display:grid; gap:3px; }
.dinner-payment-method-step-head strong { color:var(--du-ink); font-size:15px; }
.dinner-payment-method-step-head span { color:var(--du-muted); font-size:12px; }
.dinner-payment-provider-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dinner-payment-provider-actions button { min-height:44px; padding:9px 12px; border:1px solid #b8cec3; border-radius:12px; background:#fff; color:#286d60; font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.dinner-payment-provider-actions button[data-dinner-payment-provider="alipay"] { color:#3c6fa0; border-color:#b9cee1; }
.dinner-payment-provider-actions button:disabled, .dinner-payment-method-cancel:disabled { opacity:.55; cursor:wait; }
.dinner-payment-method-cancel { width:fit-content; padding:2px 0; border:0; background:transparent; color:var(--du-muted); font:inherit; font-size:12px; cursor:pointer; }
#dinnerMyModal.event-detail-surface > .dinner-my-modal {
  box-sizing:border-box; width:min(840px,calc(100vw - 64px)); max-width:none;
  max-height:calc(100dvh - 64px); padding:28px 32px; border-radius:24px;
}
#dinnerMyModal #dinnerMyBody { scrollbar-gutter:stable; padding-right:8px; scroll-padding-block:20px; }
#dinnerMyModal .dinner-v2-grid { gap:20px; }
@media(max-width:760px) {
  #dinnerMyModal.event-detail-surface > .dinner-my-modal {
    width:calc(100vw - 24px); max-height:calc(100dvh - 24px);
    padding:24px 18px max(18px,env(safe-area-inset-bottom)); border-radius:20px;
  }
  #dinnerMyModal #dinnerMyBody { padding-right:0; scrollbar-gutter:auto; }
}
@media(max-width:520px) {
  .dinner-ux-form .dinner-v2-payment { padding:16px; border-radius:16px; }
  .dinner-ux-form .dinner-ux-checkout { padding:14px 0 0; gap:14px; border-radius:0; }
  .dinner-ux-checkout [data-ux-price] { flex-basis:100%; grid-template-columns:1fr auto; align-items:center; }
  .dinner-ux-checkout [data-ux-price] small { grid-column:1 / -1; max-width:none; }
  .dinner-ux-checkout button[type="submit"] { flex:1 1 100%; width:100%; max-width:100%; min-height:48px; }
}