@charset "UTF-8";
:root {
  color-scheme:light;
  --green:#285943;
  --ink:#202622;
  --muted:#59655d;
  --line:#dce4dd;
  --soft:#f5f7f4;
  --gold:#b89a5e;
  --serif:"Songti TC","Noto Serif TC","PMingLiU",serif;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  font-family:var(--sans);
  color:var(--ink);
  background:#fff;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:15px;
  line-height:1.7
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:disabled {
  cursor:wait;
  opacity:.65
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #b89a5e;
  outline-offset:4px
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.4
}
button svg,svg.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.site-header {
  border-bottom:1px solid var(--line);
  background:white
}
.header-inner {
  max-width:1264px;
  margin:auto;
  height:88px;
  padding:0 36px;
  display:flex;
  align-items:center;
  gap:36px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--green);
  line-height:1.35
}
.brand-logo {
  display:block;
  height:44px;
  width:auto;
  flex:none
}
/* 負責人 2026-10-31：頁首標語全站不顯示 */
.brand-tagline {
  display:none;
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--muted);
  white-space:nowrap
}
.nav-text {
  background:none;
  border:0;
  padding:0
}
.button {
  border:1px solid var(--green);
  background:var(--green);
  color:white;
  border-radius:7px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  font-weight:500;
  line-height:1.5;
  min-height:48px
}
.button:hover {
  background:#1e4734
}
.button-small {
  padding:9px 20px;
  min-height:40px;
  font-size:14px
}
.button-outline {
  background:transparent;
  color:var(--green)
}
.button-outline:hover {
  background:#edf2ed
}
.button-quiet {
  background:transparent;
  border-color:var(--line);
  color:var(--ink)
}
.button-quiet:hover {
  background:var(--soft)
}
.prototype-banner {
  text-align:center;
  background:var(--soft);
  font-size:11px;
  letter-spacing:.05em;
  padding:7px 15px;
  color:#5a6c5f
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:99;
  background:white;
  padding:12px
}
.skip-link:focus {
  top:12px
}
.container {
  max-width:1192px;
  margin:0 auto
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  min-height:325px;
  padding:42px 0 38px;
  gap:35px
}
.hero h1 {
  font-family:var(--serif);
  font-size:43px;
  font-weight:500;
  letter-spacing:.07em;
  line-height:1.5
}
.hero p {
  color:var(--muted);
  margin-top:17px;
  line-height:1.95;
  font-size:14px;
  max-width:430px
}
.hero .subline {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--green);
  font-size:12px;
  margin-top:18px
}
.subline svg {
  width:16px;
  height:16px
}
.hero-art {
  height:250px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate
}
.hero-art:before {
  content:"";
  position:absolute;
  background:#f0f3eb;
  width:90%;
  height:210px;
  border-radius:50%;
  z-index:-1
}
.hero-mini {
  width:148px;
  height:209px;
  box-shadow:0 5px 16px #24392816;
  border:5px solid white;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-size:cover;
  font-family:var(--serif)
}
.hero-mini .mini-title {
  font-size:21px;
  line-height:1.6;
  letter-spacing:.08em
}
.hero-mini small {
  display:block;
  font-family:var(--sans);
  font-size:7px;
  margin-top:14px
}
.hero-mini.warm {
  background-image:url('/assets/warm.svg');
  transform:rotate(-12deg) translate(-126px,-2px);
  color:#7b583e
}
.hero-mini.elegant {
  background-image:url('/assets/botanical.svg');
  z-index:2;
  transform:translateY(-5px);
  width:160px;
  height:223px;
  color:#3d5945
}
.hero-mini.modern {
  background-image:url('/assets/modern.svg');
  transform:rotate(12deg) translate(126px,0);
  color:#edf1d7
}
.hero-mini.modern .mini-title {
  font-family:var(--sans);
  font-weight:600
}
.art-note {
  position:absolute;
  right:6px;
  bottom:7px;
  font-size:11px;
  color:#7f8c77;
  display:flex;
  align-items:center;
  gap:9px
}
.art-note:before {
  content:"";
  width:25px;
  height:1px;
  background:#bac5b4
}
.workspace {
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 12px 45px #304d3707;
  scroll-margin-top:20px
}
.workspace-heading {
  padding:24px 30px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.workspace-heading h2 {
  font-size:20px;
  font-weight:600;
  letter-spacing:.04em
}
.workspace-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:4px
}
.save-state {
  display:flex;
  gap:6px;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap
}
.save-state .dot {
  width:5px;
  height:5px;
  background:#769278;
  border-radius:50%
}
.save-state.failed {
  color:#a04c38
}
.save-state.failed .dot {
  background:#a04c38
}
.category-tabs {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin:0 30px;
  border-bottom:1px solid var(--line);
  gap:7px
}
.category-tab {
  background:white;
  border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 4px;
  color:var(--muted);
  font-size:13px
}
.category-tab.active {
  border-bottom-color:var(--green);
  color:var(--green);
  font-weight:600
}
.category-tab:hover {
  background:var(--soft)
}
.category-tab svg {
  width:18px;
  height:18px
}
.editor-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr
}
.editor-panel {
  padding:28px 30px 30px
}
.form-section+.form-section {
  border-top:1px solid #e8ede7;
  margin-top:26px;
  padding-top:23px
}
.form-section h3 {
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:17px
}
.step-number {
  width:22px;
  height:22px;
  border:1px solid #cad7cd;
  border-radius:50%;
  font-size:11px;
  color:var(--green);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-family:var(--sans);
  font-weight:400
}
.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.field {
  min-width:0;
  display:block
}
.field.full {
  grid-column:1/-1
}
.field-label {
  display:block;
  font-size:12px;
  margin-bottom:6px
}
.required {
  color:#8a978d;
  font-size:10px;
  margin-left:3px
}
input:not([type=radio]):not([type=file]),textarea,select {
  border:1px solid #dce3db;
  border-radius:6px;
  background:#fff;
  padding:10px 12px;
  width:100%;
  color:var(--ink);
  font-size:13px;
  line-height:1.5;
  min-width:0;
  min-height:42px
}
input::placeholder,textarea::placeholder {
  color:#9ba39c
}
textarea {
  resize:vertical;
  min-height:80px
}
input[aria-invalid=true] {
  border-color:#b66149
}
.field-error {
  display:block;
  color:#a34431;
  font-size:11px;
  margin-top:4px
}
.optional {
  font-size:10px;
  color:#8e978e;
  margin-left:5px;
  font-weight:400
}
.style-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.style-option {
  position:relative;
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px;
  text-align:left
}
.style-option.active {
  border:1.5px solid var(--green);
  padding:5.5px;
  box-shadow:0 0 0 2px #2859430a
}
.style-sample {
  height:84px;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:.12em;
  color:#46604d
}
.style-sample.warm {
  background-image:url('/assets/warm.svg');
  color:#8d6747
}
.style-sample.elegant {
  background-image:url('/assets/botanical.svg')
}
.style-sample.modern {
  background-image:url('/assets/modern.svg');
  color:#f3ebca;
  font-family:var(--sans)
}
.style-option strong {
  display:block;
  font-size:11px;
  margin:7px 3px 0;
  font-weight:500
}
.style-check {
  position:absolute;
  right:10px;
  top:10px;
  border-radius:50%;
  width:16px;
  height:16px;
  background:var(--green);
  color:white;
  font-size:11px;
  line-height:16px;
  text-align:center
}
.upload-area {
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px dashed #cbd7cb;
  border-radius:6px;
  padding:16px;
  background:#fbfcfa;
  position:relative;
  cursor:pointer
}
.upload-area:hover {
  background:var(--soft)
}
.upload-area input {
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  cursor:pointer
}
.upload-area:focus-within {
  outline:3px solid var(--gold);
  outline-offset:3px
}
.upload-icon {
  display:flex;
  justify-content:center;
  align-items:center;
  width:38px;
  height:38px;
  background:#edf1e9;
  border-radius:50%;
  color:#6c826d
}
.upload-copy strong {
  display:block;
  font-size:12px;
  font-weight:500
}
.upload-copy small {
  font-size:10px;
  color:var(--muted)
}
.photo-controls {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:11px;
  margin-top:10px;
  color:var(--muted)
}
.photo-thumb {
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:4px
}
.text-button {
  border:0;
  background:none;
  padding:0;
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:inherit
}
.generate-button {
  width:100%;
  margin-top:24px;
  min-height:49px
}
.generate-note {
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin-top:8px
}
.preview-panel {
  background:#f0f3ed;
  border-left:1px solid var(--line);
  padding:21px 30px 25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow:hidden
}
.preview-top {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#74816e;
  margin-bottom:23px
}
.preview-top span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}
.preview-top svg {
  width:15px;
  height:15px
}
.preview-zoom {
  padding:2px 8px;
  border-radius:4px;
  background:#fff9;
  color:#7e8979;
  font-size:10px
}
.preview-card-shell {
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 0 24px
}
.invitation-card {
  position:relative;
  width:328px;
  min-height:450px;
  aspect-ratio:auto;
  background:#f5f4ea url('/assets/botanical.svg') center/100% 100%;
  color:#3c5844;
  box-shadow:0 10px 28px #30432d1f;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:52px 40px 39px;
  overflow:hidden;
  flex-shrink:0
}
.invitation-card:before {
  content:"";
  position:absolute;
  inset:19px;
  border:1px solid #9eae8e70;
  pointer-events:none
}
.invitation-card.warm {
  background-image:url('/assets/warm.svg');
  color:#815a3c
}
.invitation-card.warm:before {
  border-color:#c6a47160;
  border-radius:130px 130px 0 0
}
.invitation-card.modern {
  background-image:url('/assets/modern.svg');
  color:#f2eed8
}
.invitation-card.modern:before {
  border-color:#e6e8be60;
  inset:24px
}
.card-kicker {
  font-family:var(--serif);
  letter-spacing:.4em;
  font-size:10px;
  margin-left:.4em;
  opacity:.8;
  margin-bottom:29px
}
.card-ornament {
  display:flex;
  align-items:center;
  gap:12px;
  color:#a3956d;
  font-size:14px;
  margin-bottom:17px
}
.card-ornament:before,.card-ornament:after {
  content:"";
  display:block;
  width:25px;
  height:1px;
  background:currentColor;
  opacity:.5
}
.card-title {
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  line-height:1.75;
  letter-spacing:.14em;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
  white-space:pre-line
}
.modern .card-title {
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.6
}
.card-host {
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.12em;
  margin-top:15px;
  max-width:100%;
  overflow-wrap:anywhere
}
.card-photo {
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:60px 60px 2px 2px;
  margin-bottom:20px;
  border:4px solid #ffffff9c
}
.warm .card-photo {
  border-radius:50%
}
.modern .card-photo {
  border-radius:0
}
.card-rule {
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.35;
  margin:23px 0 16px
}
.card-date {
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.12em
}
.card-time {
  font-size:9px;
  letter-spacing:.13em;
  margin-top:5px
}
.card-location {
  font-size:11px;
  margin-top:14px;
  max-width:100%;
  overflow-wrap:anywhere
}
.card-foot {
  font-family:var(--serif);
  font-size:9px;
  margin-top:27px;
  letter-spacing:.15em;
  opacity:.75
}
.card-watermark {
  position:absolute;
  bottom:10px;
  font-family:var(--sans);
  font-size:8px;
  color:inherit;
  opacity:.45;
  letter-spacing:.12em
}
.preview-caption {
  text-align:center;
  font-size:11px;
  color:#78836f;
  line-height:1.9;
  margin-top:0
}
.preview-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
  width:100%
}
.preview-actions .button {
  font-size:11px;
  min-height:37px;
  padding:9px 15px
}
.preview-info {
  margin-top:24px;
  border-top:1px solid #d8e0d2;
  padding-top:17px;
  color:#6a7864;
  font-size:10px;
  display:flex;
  gap:7px;
  line-height:1.8;
  max-width:360px
}
.preview-info svg {
  width:15px;
  height:15px;
  margin-top:2px
}
.mobile-editor-tabs {
  display:none
}
.how-section {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  padding:45px 30px;
  border-bottom:1px solid var(--line)
}
.how-item {
  display:flex;
  gap:14px
}
.how-item>svg {
  width:25px;
  height:25px;
  color:#6a8569;
  margin-top:3px
}
.how-item h3 {
  font-size:13px;
  font-weight:500;
  margin-bottom:6px
}
.how-item p {
  font-size:11px;
  color:var(--muted);
  line-height:1.9
}
.series-section {
  padding:65px 0 55px;
  scroll-margin-top:30px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:26px
}
.section-heading h2 {
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.06em;
  font-size:27px
}
.section-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.series-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.series-tile {
  border:0;
  padding:0;
  background:white;
  text-align:left;
  display:block
}
.series-art {
  height:235px;
  background:#f0f3ed;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative
}
.series-art.warm {
  background:#f5eee5
}
.series-art.modern {
  background:#e7ede9
}
.series-art .hero-mini {
  position:relative;
  transform:rotate(-7deg);
  width:130px;
  height:182px;
  box-shadow:8px 8px 0 #fff6
}
.series-art.warm .hero-mini {
  transform:rotate(6deg)
}
.series-art.modern .hero-mini {
  transform:rotate(-5deg)
}
.series-tile:hover .hero-mini {
  transform:rotate(0deg)
}
.series-detail {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 0
}
.series-detail h3 {
  font-size:14px;
  font-weight:500
}
.series-detail p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}
.series-detail>span {
  border:1px solid var(--line);
  width:29px;
  height:29px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green)
}
.faq-section {
  padding:18px 0 70px;
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:70px
}
.faq-section h2 {
  font-family:var(--serif);
  font-size:25px;
  font-weight:500;
  letter-spacing:.04em
}
.faq-section details {
  border-bottom:1px solid var(--line);
  padding:17px 0;
  font-size:13px
}
.faq-section details:first-child {
  border-top:1px solid var(--line)
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:15px
}
summary:after {
  content:"+";
  color:var(--muted)
}
details[open] summary:after {
  content:"−"
}
details p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  padding-top:12px
}
.site-footer {
  background:var(--soft);
  border-top:1px solid var(--line);
  padding:32px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:45px;
  font-size:12px;
  color:var(--muted)
}
.site-footer .brand {
  font-size:15px
}
.site-footer .brand-logo {
  height:30px
}
.site-footer small {
  font-size:10px
}
.site-footer small a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px
}
/* Real mode has no top banner (empty element). */
.prototype-banner:empty {
  display:none
}
/* Mode-dependent chrome (src/site-copy.js): hidden until app.js has read the mode, so the wrong wording never flashes. */
html:not([data-mode]) .prototype-banner,html:not([data-mode]) .site-footer small {
  visibility:hidden
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  background:#203e2e;
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  max-width:calc(100% - 32px);
  width:max-content;
  font-size:13px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
dialog {
  border:1px solid var(--line);
  border-radius:14px;
  max-width:450px;
  width:calc(100% - 36px);
  padding:36px;
  color:var(--ink);
  box-shadow:0 18px 90px #15291c30
}
dialog::backdrop {
  background:#17251c66;
  backdrop-filter:blur(3px)
}
.modal-close {
  position:absolute;
  right:13px;
  top:10px;
  border:0;
  background:none;
  font-size:25px;
  color:var(--muted);
  width:32px;
  height:32px
}
.modal-symbol {
  color:var(--green);
  font-size:38px
}
.modal-title {
  font-family:var(--serif);
  font-weight:500;
  font-size:24px;
  margin-top:8px
}
.modal-copy {
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  margin-top:13px;
  margin-bottom:23px
}
.modal-wide {
  width:100%;
  margin-top:9px
}
.modal-footnote {
  font-size:10px;
  color:var(--muted);
  margin-top:15px;
  text-align:center
}
.modal-list {
  font-size:13px;
  padding:18px 20px;
  background:var(--soft);
  border-radius:6px;
  list-style:none;
  margin:18px 0
}
.modal-list li+li {
  margin-top:9px
}
.modal-list li:before {
  content:"✓";
  color:var(--green);
  margin-right:10px
}
.modal-status {
  font-size:12px;
  color:var(--green);
  background:var(--soft);
  padding:12px;
  margin-bottom:16px
}
.screen {
  max-width:1040px;
  margin:0 auto;
  min-height:65vh;
  padding:50px 0 70px
}
.screen-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
  gap:20px
}
.screen-title h1 {
  font-family:var(--serif);
  font-size:32px;
  font-weight:500;
  letter-spacing:.05em
}
.screen-title p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.empty-state {
  border:1px dashed var(--line);
  padding:70px 25px;
  text-align:center;
  border-radius:10px;
  background:#fafbf9
}
.empty-state .empty-icon {
  display:inline-block;
  width:48px;
  height:48px;
  opacity:.85
}
.empty-state h2 {
  font-size:19px;
  font-weight:500;
  margin:15px 0 9px
}
.empty-state p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:22px
}
.event-row {
  border:1px solid var(--line);
  border-radius:10px;
  display:grid;
  grid-template-columns:150px 1fr;
  overflow:hidden
}
.event-cover {
  min-height:220px;
  background:#edf1e9;
  display:flex;
  align-items:center;
  justify-content:center
}
/* 我的活動 v2 (docs/specs/my-events-v2.md): AI cover 2:3, 「未選定」 corner badge, light placeholder. */
.event-list {
  display:grid;
  gap:16px
}
.event-cover-art {
  position:relative;
  cursor:zoom-in;
  padding:0
}
.event-cover-art .inv-figure,
.event-cover-art .event-thumb {
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  border-radius:0;
  box-shadow:none
}
.event-cover-art .event-thumb {
  display:block;
  object-fit:cover
}
.event-buttons .button:disabled {
  opacity:.45;
  cursor:not-allowed
}
.event-cover-art:focus-visible {
  outline:3px solid var(--green);
  outline-offset:-3px
}
.event-cover-badge {
  position:absolute;
  top:8px;
  right:8px;
  font-size:10px;
  color:var(--muted);
  background:#ffffffd9;
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:20px
}
.event-cover-empty {
  background:var(--soft)
}
.event-cover-icon {
  width:46px;
  height:46px;
  color:#9aa89f;
  display:flex
}
.event-cover-icon svg {
  width:100%;
  height:100%
}
.status-pill.is-muted {
  color:var(--muted);
  background:#eef0ee
}
.event-content .event-replies {
  margin-top:8px;
  font-weight:600;
  color:var(--ink)
}
.event-hint {
  margin-top:8px
}
.events-login {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  margin-bottom:16px
}
.events-login p {
  font-weight:600
}
.event-content {
  padding:27px
}
.status-pill {
  display:inline-block;
  color:var(--green);
  background:var(--soft);
  font-size:10px;
  padding:3px 10px;
  border-radius:20px
}
.event-content h2 {
  font-size:20px;
  margin:10px 0 7px;
  overflow-wrap:anywhere
}
.event-content p {
  font-size:12px;
  color:var(--muted)
}
.event-buttons {
  display:flex;
  gap:10px;
  margin-top:21px;
  flex-wrap:wrap
}
.privacy-note {
  font-size:11px;
  color:var(--muted);
  margin-top:22px;
  line-height:1.9
}
.guest-screen {
  max-width:700px;
  margin:0 auto;
  padding:35px 20px 70px
}
.back-link {
  font-size:12px;
  color:var(--green);
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-bottom:24px
}
.guest-layout {
  background:#f7f8f3;
  padding:35px 30px;
  border-radius:12px
}
.guest-card>.invitation-card {
  margin:auto;
  width:100%;
  max-width:420px;
  min-height:570px;
  padding:65px 54px 50px
}
.guest-layout .card-title {
  font-size:36px
}
.guest-layout .card-host {
  font-size:14px
}
.guest-layout .card-date {
  font-size:19px
}
.guest-layout .card-location {
  font-size:13px
}
.guest-body {
  padding:45px 25px 0;
  text-align:center
}
.guest-body h2 {
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  margin-bottom:18px
}
.guest-intro {
  font-family:var(--serif);
  font-size:16px;
  line-height:2.2;
  white-space:pre-line;
  overflow-wrap:anywhere;
  color:#56664f
}
.event-info {
  padding:30px 0;
  display:grid;
  gap:18px;
  text-align:left;
  margin:20px auto 0;
  max-width:360px;
  border-bottom:1px solid var(--line)
}
.info-row {
  display:flex;
  gap:14px;
  align-items:flex-start
}
.info-row svg {
  color:#78916d;
  margin-top:3px
}
.info-row strong {
  font-size:13px;
  font-weight:500;
  overflow-wrap:anywhere;
  display:block
}
.info-row p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  overflow-wrap:anywhere
}
.info-row a {
  font-size:11px;
  color:var(--green);
  text-decoration:underline
}
.calendar-button {
  font-size:11px;
  margin-top:7px
}
.rsvp-area {
  padding:37px 0 0;
  max-width:420px;
  margin:auto;
  text-align:left
}
.rsvp-area h2 {
  text-align:center
}
.rsvp-area>p {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-top:-9px;
  margin-bottom:23px
}
.rsvp-form {
  display:grid;
  gap:18px
}
.rsvp-attendance {
  border:0;
  padding:0;
  margin:0
}
.radio-row {
  display:flex;
  gap:12px;
  margin-top:7px
}
.radio-choice {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1;
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  padding:11px 4px;
  font-size:12px;
  cursor:pointer
}
.radio-choice:has(input:checked) {
  border-color:var(--green);
  background:#edf2e9
}
.radio-choice input {
  accent-color:var(--green)
}
.rsvp-success {
  text-align:center;
  padding:35px 15px;
  background:#eef3e9;
  border:1px solid var(--line);
  border-radius:8px
}
.success-mark {
  color:var(--green);
  font-size:30px
}
.rsvp-success h3 {
  font-family:var(--serif);
  font-size:23px;
  margin:8px 0 12px
}
.rsvp-success p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9
}
.rsvp-success a {
  font-size:12px;
  color:var(--green);
  text-decoration:underline;
  display:block;
  margin:15px 0 10px
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:30px
}
.stat {
  padding:22px;
  border:1px solid var(--line);
  border-radius:7px
}
.stat span {
  font-size:11px;
  color:var(--muted)
}
.stat strong {
  display:block;
  font-family:var(--serif);
  font-size:34px;
  font-weight:500;
  color:var(--green);
  line-height:1.4;
  margin-top:5px
}
.stat small {
  font-size:10px;
  color:var(--muted)
}
.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:8px
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  text-align:left;
  min-width:550px
}
th {
  font-weight:500;
  background:var(--soft);
  color:#697461;
  font-size:11px
}
th,td {
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  max-width:300px;
  overflow-wrap:anywhere
}
tr:last-child td {
  border-bottom:0
}
.notice {
  background:var(--soft);
  padding:13px 17px;
  border-radius:6px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:25px
}
.generation-progress {
  height:3px;
  background:#d5dfd2;
  position:absolute;
  inset:0 0 auto;
  overflow:hidden
}
.generation-progress:after {
  content:"";
  display:block;
  width:35%;
  height:100%;
  background:var(--green);
  animation:progress 1.3s infinite linear
}
.preview-panel.generating .invitation-card {
  opacity:.45
}
.generation-overlay {
  position:absolute;
  top:230px;
  padding:17px 22px;
  background:#fffef8;
  box-shadow:0 8px 25px #203c1c12;
  border-radius:8px;
  z-index:3;
  text-align:center;
  font-size:13px;
  color:var(--green)
}
.generation-overlay small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.error-box {
  background:#fff3ed;
  border:1px solid #e4c5b6;
  border-radius:6px;
  padding:13px;
  color:#974e37;
  font-size:12px;
  margin-top:15px
}
.error-box button {
  margin-top:7px
}
.stored-note {
  font-size:10px;
  color:var(--muted);
  margin-top:7px
}
.demo-tools {
  margin-top:12px;
  font-size:10px;
  color:#7f8b79;
  text-align:center
}
.demo-tools summary {
  display:block;
  text-decoration:underline;
  text-underline-offset:3px
}
.demo-tools summary:after {
  display:none
}
.demo-tools button {
  margin-top:10px;
  font-size:10px;
  color:#6b7865
}
.hidden,[hidden] {
  display:none!important
}
@keyframes progress {
  from {
    transform:translateX(-100%)
  }
  to {
    transform:translateX(400%)
  }
}
@media(min-width:1000px) {
  .preview-panel>.preview-sticky {
    position:sticky;
    top:28px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center
  }
}
@media(max-width:1250px) {
  .container {
    margin:0 35px
  }
  .screen {
    margin:0 35px
  }
  .hero h1 {
    font-size:39px
  }
  .hero-mini.warm {
    transform:rotate(-12deg) translate(-112px,-2px)
  }
  .hero-mini.modern {
    transform:rotate(12deg) translate(112px,0)
  }
}
@media(max-width:950px) {
  .header-inner {
    height:76px;
    padding:0 25px;
    gap:23px
  }
  .hero {
    min-height:300px;
    gap:20px
  }
  .hero h1 {
    font-size:33px
  }
  .hero p {
    font-size:12px
  }
  .hero-art {
    transform:scale(.84);
    transform-origin:center right
  }
  .hero-mini.warm {
    transform:rotate(-12deg) translate(-126px,-2px)
  }
  .hero-mini.modern {
    transform:rotate(12deg) translate(126px,0)
  }
  .container {
    margin:0 25px
  }
  .workspace-heading {
    padding:22px
  }
  .category-tabs {
    margin:0 22px;
    gap:0
  }
  .category-tab {
    font-size:11px;
    gap:5px
  }
  .category-tab svg {
    width:15px
  }
  .editor-panel {
    padding:25px 22px
  }
  .preview-panel {
    padding:21px 18px
  }
  .invitation-card {
    width:280px;
    min-height:395px;
    padding:45px 32px 35px
  }
  .card-title {
    font-size:26px
  }
  .card-kicker {
    margin-bottom:22px
  }
  .style-sample {
    height:70px;
    font-size:15px
  }
  .how-section {
    gap:25px;
    padding:35px 5px
  }
  .faq-section {
    gap:30px
  }
  .site-footer {
    gap:25px
  }
  .preview-actions {
    gap:8px
  }
  .preview-actions .button {
    padding:9px 11px
  }
}
@media(max-width:720px) {
  body {
    font-size:14px
  }
  .header-inner {
    height:70px;
    padding:0 20px;
    gap:15px
  }
  .brand {
    font-size:17px;
    gap:8px
  }
  .brand-logo {
    height:34px
  }
  .brand-tagline {
    display:none
  }
  .header-inner>.button,.header-actions>.button {
    font-size:12px;
    padding:7px 13px;
    min-height:34px
  }
  .prototype-banner {
    font-size:9px;
    padding:6px 10px;
    letter-spacing:0
  }
  .prototype-banner span {
    font-size:9px
  }
  .container {
    margin:0 18px
  }
  .hero {
    display:block;
    padding:34px 5px 20px;
    min-height:0;
    text-align:center
  }
  .hero h1 {
    font-size:31px;
    letter-spacing:.06em;
    line-height:1.5
  }
  .hero p {
    font-size:12px;
    max-width:310px;
    margin:13px auto 0;
    line-height:1.9
  }
  .hero .subline {
    justify-content:center;
    font-size:10px;
    margin-top:12px
  }
  .hero-art {
    height:210px;
    transform:scale(.83);
    transform-origin:center;
    margin:-3px -10px -10px
  }
  .hero-art:before {
    width:340px;
    height:180px
  }
  .hero-mini.warm {
    transform:rotate(-12deg) translate(-112px,-2px)
  }
  .hero-mini.modern {
    transform:rotate(12deg) translate(112px,0)
  }
  .hero-mini {
    width:132px;
    height:186px
  }
  .hero-mini.elegant {
    width:145px;
    height:204px
  }
  .art-note {
    font-size:10px;
    bottom:-3px;
    right:15px
  }
  .workspace {
    border-radius:10px
  }
  .workspace-heading {
    padding:20px 18px 15px;
    align-items:flex-start;
    gap:6px
  }
  .workspace-heading h2 {
    font-size:18px
  }
  .workspace-heading p {
    font-size:10px;
    max-width:180px;
    margin-top:6px
  }
  .save-state {
    font-size:9px;
    margin-top:5px;
    max-width:100px;
    white-space:normal;
    text-align:right;
    line-height:1.6
  }
  .category-tabs {
    margin:0 14px;
    grid-template-columns:repeat(3,1fr);
    border-bottom:0;
    gap:6px
  }
  .category-tab {
    border:1px solid #e3e8e0;
    border-radius:5px;
    margin:0;
    font-size:11px;
    padding:10px 3px;
    gap:6px
  }
  .category-tab.active {
    border:1px solid var(--green);
    background:#edf2e9
  }
  .category-tab svg {
    width:16px;
    height:16px
  }
  .mobile-editor-tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    margin:19px 18px 0;
    gap:20px
  }
  .mobile-editor-tabs button {
    font-size:12px;
    border:0;
    background:none;
    padding:8px 6px 11px;
    border-bottom:2px solid transparent;
    color:var(--muted);
    flex:1
  }
  .mobile-editor-tabs button.active {
    color:var(--green);
    border-bottom-color:var(--green);
    font-weight:500
  }
  .editor-grid {
    display:block
  }
  .editor-panel {
    padding:23px 18px
  }
  .preview-panel {
    border-left:0;
    display:none;
    padding:20px 18px 27px
  }
  .editor-grid.show-preview .editor-panel {
    display:none
  }
  .editor-grid.show-preview .preview-panel {
    display:flex
  }
  .field-grid {
    gap:14px 12px
  }
  .field-label {
    font-size:12px
  }
  input:not([type=radio]):not([type=file]),textarea,select {
    font-size:16px;
    padding:10px;
    min-height:45px
  }
  .field input[type=date],.field input[type=time] {
    font-size:14px;
    appearance:none;
    min-height:45px
  }
  .form-section h3 {
    font-size:13px
  }
  .style-sample {
    height:77px
  }
  .style-option strong {
    font-size:10px
  }
  .upload-copy small {
    font-size:9px
  }
  .generate-note {
    font-size:9px
  }
  .preview-top {
    margin-bottom:20px
  }
  .invitation-card {
    width:min(100%,320px);
    min-height:435px;
    padding:50px 34px 35px
  }
  .card-title {
    font-size:29px
  }
  .card-kicker {
    margin-bottom:26px
  }
  .how-section {
    grid-template-columns:1fr;
    gap:22px;
    padding:29px 12px
  }
  .how-item {
    gap:16px
  }
  .how-item h3 {
    font-size:12px;
    margin-bottom:3px
  }
  .how-item p {
    font-size:11px
  }
  .how-item>svg {
    width:22px;
    height:22px
  }
  .series-section {
    padding:38px 0 30px
  }
  .section-heading h2 {
    font-size:23px
  }
  .section-heading p {
    font-size:11px
  }
  .series-grid {
    gap:12px;
    grid-template-columns:repeat(3,1fr)
  }
  .series-art {
    height:150px
  }
  .series-art .hero-mini {
    width:80px;
    height:114px;
    border-width:3px;
    box-shadow:4px 4px 0 #fff6
  }
  .series-art .hero-mini .mini-title {
    font-size:13px
  }
  .series-art .hero-mini small {
    font-size:5px;
    margin-top:7px
  }
  .series-detail {
    padding:12px 0
  }
  .series-detail h3 {
    font-size:11px
  }
  .series-detail p {
    font-size:9px;
    line-height:1.5;
    margin-top:5px
  }
  .series-detail>span {
    display:none
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:18px;
    padding:15px 0 40px
  }
  .faq-section h2 {
    font-size:23px
  }
  .faq-section details {
    font-size:12px
  }
  .site-footer {
    padding:28px 20px;
    flex-direction:column;
    gap:11px
  }
  .site-footer p {
    font-size:11px
  }
  .site-footer small {
    font-size:9px
  }
  .screen {
    margin:0 20px;
    padding:32px 0 45px
  }
  .screen-title h1 {
    font-size:26px
  }
  .screen-title {
    align-items:flex-start
  }
  .screen-title>.button {
    font-size:11px;
    padding:9px 12px;
    min-height:36px
  }
  .event-row {
    grid-template-columns:95px 1fr
  }
  .event-cover {
    min-height:0
  }
  .event-cover-empty {
    min-height:143px
  }
  .event-cover-icon {
    width:32px;
    height:32px
  }
  .event-cover-badge {
    top:5px;
    right:5px;
    font-size:9px;
    padding:1px 6px
  }
  .event-content {
    padding:18px 15px
  }
  .event-content h2 {
    font-size:17px
  }
  .event-content p {
    font-size:11px
  }
  .event-buttons {
    gap:8px
  }
  .event-buttons .button {
    font-size:10px;
    padding:8px 10px;
    min-height:34px
  }
  .guest-screen {
    padding:24px 14px 45px
  }
  .guest-layout {
    padding:19px 14px
  }
  .guest-card>.invitation-card {
    min-height:440px;
    padding:52px 32px 38px
  }
  .guest-layout .card-title {
    font-size:29px
  }
  .guest-layout .card-date {
    font-size:17px
  }
  .guest-layout .card-host {
    font-size:12px
  }
  .guest-layout .card-location {
    font-size:12px
  }
  .guest-body {
    padding:35px 5px 0
  }
  .guest-body h2 {
    font-size:23px
  }
  .guest-intro {
    font-size:15px
  }
  .rsvp-area {
    padding-top:30px
  }
  .stats-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .stat {
    padding:17px
  }
  .stat strong {
    font-size:29px
  }
  .table-wrap {
    margin-top:10px
  }
  dialog {
    padding:28px
  }
  .modal-title {
    font-size:23px
  }
  .modal-copy {
    font-size:12px
  }
  .preview-info {
    font-size:10px
  }
  .empty-state {
    padding:45px 16px
  }
  .empty-state h2 {
    font-size:17px
  }
  .empty-state p {
    font-size:12px
  }
}
@media(max-width:360px) {
  .header-inner {
    padding:0 14px;
    gap:10px
  }
  .brand {
    font-size:15px
  }
  .hero h1 {
    font-size:28px
  }
  .hero-art {
    transform:scale(.75)
  }
  .container {
    margin:0 12px
  }
  .style-options {
    gap:6px
  }
  .style-option strong {
    font-size:9px
  }
  .prototype-banner span {
    display:none
  }
  .category-tab {
    font-size:10px;
    gap:3px
  }
  .series-art .hero-mini {
    width:65px;
    height:95px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media print {
  .site-header,.prototype-banner,.site-footer,.back-link,.rsvp-area,.preview-actions,.toast {
    display:none!important
  }
  .guest-layout {
    background:white
  }
  .guest-card>.invitation-card {
    box-shadow:none;
    break-inside:avoid
  }
}


/* Homepage v2 follows docs/art/home-v2/SPEC.md. */
:root { --cream:#fffbf2; --terracotta:#725033; --burgundy:#762f3d; --pale-gold:#f0dfb4; --muted:#53635a; }
[hidden] { display:none!important; }
.eyebrow { display:block; color:var(--green); font-size:13px; font-weight:700; letter-spacing:.07em; margin-bottom:12px; }
.home-hero { grid-template-columns:1fr 1.15fr; min-height:660px; padding:48px 0; gap:48px; }
.home-hero h1 { font-family:var(--sans); font-size:clamp(32px,3.4vw,48px); font-weight:700; line-height:1.32; letter-spacing:-.04em; }
.home-hero .hero-copy>.eyebrow { font-size:18px; }
.home-hero .hero-lead { font-size:16px; max-width:440px; margin-top:24px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.home-hero .hero-disclaimer { font-size:12px; margin-top:12px; }
.hero-boundary { font-size:12px!important; max-width:440px; }
.hero-product { display:grid; grid-template-columns:minmax(0,300px) minmax(130px,1fr); align-items:center; gap:16px; padding:24px; background:#f3eee4; border-radius:20px; }
.hero-product>.eyebrow,.hero-product>.asset-note { grid-column:1/-1; margin:0; }
.hero-product>.eyebrow { font-size:12px; color:var(--terracotta); }
.case-card { position:relative; width:100%; max-width:400px; margin:auto; background:var(--cream); color:var(--terracotta); box-shadow:0 12px 28px #3a3f3215; border:1px solid #ffffffaa; overflow-wrap:anywhere; text-align:center; padding:24px; }
.case-badge { position:absolute; top:8px; left:8px; background:white; color:var(--green); font-size:10px; padding:2px 8px; border-radius:6px; }
.case-letter { margin:0 0 16px; }
.case-kicker { font-size:9px; letter-spacing:.12em; margin-bottom:10px; }
.case-letter h3 { font-family:var(--serif); font-size:26px; font-weight:500; line-height:1.4; letter-spacing:.05em; }
.case-baby .case-letter h3 { font-family:var(--sans); font-weight:700; font-size:30px; }
.case-photo-frame { position:relative; width:100%; height:240px; background:#efe8db; }
.case-photo { display:block; width:100%; height:100%; object-fit:cover; }
.case-baby .case-photo-frame { width:86%; height:208px; margin:auto; border-radius:150px 150px 4px 4px; overflow:hidden; }
.case-baby .case-photo { object-position:50% 48%; }
.case-opening { font-size:12px; margin:14px 0; }
.case-meta { font-size:11px; }
.case-meta>p:first-child { font-size:11px; margin-bottom:10px; }
.case-date { font-size:13px; font-weight:600; letter-spacing:.06em; padding-top:10px; border-top:1px solid #70533330; }
.case-date span { display:block; font-size:12px; font-weight:400; margin:4px 0; }
.case-wedding { background:#fffefa; color:#3f5144; padding:0 0 24px; }
.case-wedding .case-photo-frame { height:248px; }
.case-wedding .case-photo { object-position:50% 18%; }
.case-wedding .case-letter { padding:20px 12px 0; margin-bottom:12px; }
.case-wedding .case-letter h3 { font-size:26px; }
.case-wedding .case-opening,.case-wedding .case-meta { padding-inline:20px; }
.case-longevity { background:#fffaf1; color:var(--burgundy); }
.case-longevity .case-letter h3 { font-size:30px; font-weight:700; }
.case-longevity .case-photo-frame { height:145px; }
.case-longevity .case-photo { object-position:50% 40%; }
.case-longevity .case-kicker { font-size:11px; }
.hero-response { background:white; border:1px solid var(--line); border-radius:12px; padding:16px 12px; }
.hero-response span { display:flex; align-items:center; gap:8px; color:var(--green); font-size:12px; }
.hero-response strong { display:block; font-size:15px; margin-top:10px; }
.hero-response small { font-size:11px; color:var(--muted); display:block; margin-top:8px; }
.asset-note { text-align:center; font-size:11px; color:var(--muted); margin-top:12px; }
.value-strip { display:flex; justify-content:space-around; gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 10px; color:var(--green); }
.value-strip span { display:flex; align-items:center; gap:10px; font-size:14px; }
.cases-section { padding:88px 0; scroll-margin-top:24px; }
.cases-section .section-heading h2,.journey-section .section-heading h2 { font:700 32px/1.4 var(--sans); letter-spacing:-.025em; }
.cases-section .section-heading p,.journey-section .section-heading p { font-size:14px; max-width:720px; }
.home-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px; }
.home-case { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.home-case-art { padding:28px 24px; background:#f3ebdd; min-height:540px; display:flex; align-items:center; }
.home-case:nth-child(2) .home-case-art { background:#e9eee6; }
.home-case:nth-child(3) .home-case-art { background:#f1e8e4; }
.home-case-copy { padding:20px; display:flex; flex-direction:column; flex:1; }
.home-case-copy .eyebrow { font-size:13px; }
.home-case-copy h3 { font-size:18px; line-height:1.6; }
.home-case-copy>p { font-size:14px; color:var(--muted); margin:12px 0 20px; }
.case-excerpt { border-top:1px solid var(--line); padding:16px 0; margin-bottom:12px; color:var(--muted); font-size:12px; }
.case-excerpt strong { font-size:14px; color:var(--ink); }
.case-excerpt p { margin:8px 0; }
.home-case-copy>.button { margin-top:auto; font-size:14px; padding:12px 10px; }
.home-case-copy>.text-button { text-align:center; }
.cases-section>.stored-note { margin-top:20px; }
.journey-section { padding:64px 32px; margin:0 -32px 80px; background:var(--soft); border-radius:16px; }
.journey-section .section-heading { align-items:center; gap:24px; }
.journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:32px 0; }
.journey-grid>article { min-width:0; }
.journey-grid>article>p { font-size:13px; color:var(--muted); margin-top:14px; }
.journey-invite,.journey-sample { min-height:330px; background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.journey-invite { display:grid; grid-template-columns:42% 1fr; background:var(--cream); }
.journey-invite img { width:100%; height:100%; object-fit:cover; }
.journey-invite>div { padding:32px 12px; color:var(--terracotta); }
.journey-invite h3 { font:700 24px/1.6 var(--serif); }
.journey-invite p { font-size:12px; margin:20px 0; }
.journey-invite small { font-size:11px; }
.journey-sample { padding:24px; }
.journey-sample h3 { font-size:17px; }
.journey-sample>p { font-size:12px; color:var(--muted); margin:12px 0; }
.journey-sample dl { font-size:13px; }
.journey-sample dt { color:var(--muted); font-size:11px; margin-top:14px; }
.journey-sample dd { margin:4px 0; }
.journey-total { display:block; font-size:56px; color:var(--green); margin:24px 0 12px; }
.journey-total small { font-size:13px; }
.demo-screen { max-width:1120px; padding:32px 24px 64px; margin:auto; min-height:70vh; }
.demo-toolbar { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.demo-toolbar .back-link { margin:0; }
.reset-scope { display:block; font-size:11px; color:var(--muted); text-align:center; margin-top:4px; }
.demo-screen .notice { margin-bottom:20px; }
.demo-case-nav { display:flex; gap:12px; margin-bottom:12px; }
.demo-case-nav small { display:block; font-size:11px; font-weight:400; }
.demo-case-nav .active { background:var(--green); color:white; border-color:var(--green); }
.demo-screen h1 { font:700 30px/1.4 var(--sans); margin:28px 0 24px; }
.demo-screen h1:focus { outline:none; }
.demo-steps { display:flex; gap:12px; margin-bottom:32px; }
.demo-steps a { display:flex; align-items:center; gap:9px; padding:12px 18px; border-bottom:2px solid var(--line); color:var(--muted); }
.demo-steps a[aria-current] { color:var(--green); border-color:var(--green); font-weight:700; }
.demo-steps span { width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:var(--soft); font-size:12px; }
.demo-content { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.demo-card-wrap { padding:32px; background:var(--soft); border-radius:16px; }
.demo-card-wrap .case-card { max-width:400px; }
.demo-event { padding:16px 0; min-width:0; }
.demo-event h2 { font-size:27px; font-family:var(--serif); }
.demo-intro { white-space:pre-line; margin-top:20px; line-height:2; }
.demo-guest-note { font-size:14px; color:var(--muted); margin-bottom:24px; }
.demo-event .rsvp-area { border-top:1px solid var(--line); text-align:left; padding-top:28px; }
.demo-event .rsvp-area h2 { font-size:24px; }
.demo-event .rsvp-area>p { font-size:14px; margin:10px 0; }
.demo-event>.text-button { display:block; margin-top:16px; }
.demo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.demo-context { margin-bottom:24px; color:var(--muted); }
.demo-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.demo-response { padding:20px; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.demo-response>div { display:flex; justify-content:space-between; gap:16px; }
.demo-response span { color:var(--green); font-size:12px; }
.demo-response p { color:var(--muted); font-size:14px; margin-top:8px; }
.attendee-fields { border:0; margin:0; padding:0; min-width:0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.button { border-radius:10px; }
.button-small,.back-link,.text-button,.nav-text { min-height:44px; }
.back-link,.text-button { align-content:center; }
input,textarea { border-color:#829486; }
input[aria-invalid=true],textarea[aria-invalid=true] { border-color:#a4372e; }
button,a { transition:background-color .18s,color .18s; }
button:active,.button:active { filter:brightness(.9); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline-color:var(--green); }
.case-photo-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; font-size:13px; padding:12px; }
.mobile-demo-dock { display:none; }
@media(max-width:1100px) {
  .home-hero { grid-template-columns:1fr 1fr; gap:24px; }
  .hero-product { grid-template-columns:1fr; }
  .hero-product>.case-card { max-width:280px; }
  .hero-response { margin-top:0; }
  .hero-response strong,.hero-response small { display:inline; margin:0 0 0 8px; }
  .home-case-grid { gap:16px; }
  .home-case-art { padding:24px 16px; }
  .case-letter h3 { font-size:24px; }
  .journey-section { margin-inline:0; padding-inline:24px; }
  .journey-grid { gap:16px; }
  .journey-sample { padding:20px; }
  .demo-content { gap:32px; }
}
@media(max-width:900px) {
  .home-case-grid { grid-template-columns:1fr; }
  .home-case-art { min-height:0; padding:32px; }
  .home-case-art .case-card { max-width:300px; }
  .journey-grid { grid-template-columns:1fr; }
  .journey-invite,.journey-sample { min-height:280px; }
}
@media(max-width:720px) {
  .home-hero { display:flex; flex-direction:column; padding:24px 0 32px; gap:0; text-align:left; }
  .home-hero .hero-copy { display:contents; }
  .home-hero .hero-copy>.eyebrow { order:1; width:100%; font-size:16px; }
  .home-hero h1 { order:2; width:100%; font-size:32px; line-height:1.38; }
  .home-hero .hero-lead { order:3; width:100%; font-size:14px; line-height:1.8; margin:16px 0; }
  .hero-actions { order:4; width:100%; display:grid; margin-top:0; gap:10px; }
  .hero-actions .button { width:100%; font-size:16px; min-height:52px; }
  .hero-product { order:5; width:100%; max-width:400px; padding:16px 20px; margin:20px 0 16px; border-radius:16px; gap:12px; }
  .hero-product>.case-card { max-width:266px; padding:16px 20px; }
  .hero-product .case-kicker { display:none; }
  .hero-product .case-letter h3 { font-size:26px; }
  .hero-product .case-letter h3 br { display:none; }
  .hero-product .case-baby .case-photo-frame { height:198px; }
  .hero-product .case-meta>p:first-child { display:none; }
  .hero-product>.asset-note { font-size:10px; }
  .home-hero .hero-disclaimer { order:6; width:100%; font-size:12px; margin-top:0; }
  .hero-boundary { order:7; width:100%; }
  .hero-response { width:100%; padding:12px; }
  .hero-response strong { font-size:13px; }
  .hero-response small { display:block; font-size:11px; margin-top:4px; }
  .value-strip { flex-direction:column; gap:16px; padding:20px 0; }
  .value-strip span { font-size:14px; }
  .cases-section { padding:56px 0; }
  .cases-section .section-heading h2,.journey-section .section-heading h2 { font-size:25px; }
  .home-case-grid { gap:24px; }
  .home-case-art { padding:28px; }
  .case-card { padding:24px 20px; }
  .case-letter h3 { font-size:26px; }
  .case-longevity .case-letter h3 { font-size:30px; }
  .journey-section { margin:0 0 56px; padding:32px 20px; }
  .journey-section .section-heading { display:block; }
  .journey-section .section-heading>.button { margin-top:24px; width:100%; }
  .journey-grid { gap:28px; }
  .journey-invite,.journey-sample { min-height:310px; }
  .category-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .category-tab { min-height:44px; font-size:13px; }
  .demo-screen { padding:24px 18px 48px; }
  .demo-toolbar { flex-wrap:wrap; gap:8px; }
  .demo-toolbar .button { font-size:12px; }
  .demo-screen h1 { font-size:24px; }
  .demo-case-nav { gap:8px; }
  .demo-case-nav a { flex:1; min-width:0; padding:10px 4px; font-size:14px; flex-direction:column; gap:0; }
  .demo-steps { gap:8px; }
  .demo-steps a { padding:10px 2px; gap:5px; font-size:13px; flex:1; justify-content:center; }
  .demo-steps span { width:20px; height:20px; font-size:11px; flex-shrink:0; }
  .demo-content { grid-template-columns:1fr; gap:24px; }
  .demo-card-wrap { padding:20px; }
  .demo-event { padding:0; }
  .demo-actions { flex-direction:column; }
  .demo-roster { grid-template-columns:1fr; }
  .demo-event .field-label { font-size:14px; }
  .demo-event input,.demo-event textarea { font-size:16px; }
  .demo-event .radio-choice { font-size:14px; min-height:48px; }
  .demo-screen .stat { padding:16px 12px; }
  .demo-screen .notice { font-size:12px; }
  .button-small { min-height:44px; }
  .mobile-demo-dock { display:block; position:fixed; bottom:0; left:0; right:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fffffff5; z-index:10; }
  .mobile-demo-dock .button { width:100%; min-height:52px; }
  .site-footer { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .home-hero h1 { font-size:29px; }
  .demo-screen { padding-inline:12px; }
  .demo-steps a { font-size:12px; }
  .home-case-art { padding:20px; }
  .hero-product { padding-inline:12px; }
}

.in-demo .header-create { display:none; }
@media(max-width:720px) {
  .header-create { margin-left:auto; font-size:13px; padding:10px 12px; }
  .header-inner { min-height:64px; height:auto; padding-block:12px; flex-wrap:wrap; }
  .brand { overflow-wrap:anywhere; min-width:0; }
}

.case-photo-loading { position:absolute; inset:0; display:grid; place-items:center; padding:12px; background:#efe8db; font-size:12px; color:var(--muted); }

/* maker-v3: event semantics and responsive editor */
.event-picker {padding:40px 0 24px;scroll-margin-top:100px}
.event-picker h2 {margin:8px 0 24px}
.subevent-tabs {display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.subevent-tabs .active {background:#285943;color:white}
.workspace {scroll-margin-top:96px}
.auto-title {background:#edf3ee;padding:16px;border-radius:8px;color:#285943;overflow-wrap:anywhere}
.field select {width:100%;min-height:46px;padding:10px 12px;border:1px solid #829486;border-radius:8px;background:white;color:#202622;font:inherit}
.maker-card {width:100%;max-width:360px;min-height:540px;height:auto;padding:28px 24px;overflow:visible;display:flex;flex-direction:column;align-items:center;background:#fffbf2;color:#725033;overflow-wrap:anywhere;box-shadow:0 12px 28px #3a3f3215}
.maker-card:before,.maker-card:after {pointer-events:none}
.maker-card > * {max-width:100%;flex-shrink:0}
.maker-card .maker-opening {font-size:14px;margin:4px 0 16px;letter-spacing:1px;line-height:1.8}
.maker-title {font-size:30px;line-height:1.5;margin:6px 0 20px;font-weight:700;white-space:pre-wrap}
.maker-photo {width:100%;height:240px;object-fit:contain;background:#ffffff60;margin:0 0 20px}
.event-A .maker-photo {width:80%;border-radius:150px 150px 4px 4px}
.layout-P2 {background:#fffefa;color:#3f5144;font-family:'Songti TC','PMingLiU',serif}
.layout-P2 .maker-photo {height:270px}
.wedding-names {display:flex;flex-direction:column;gap:4px;margin:4px 0}
.wedding-names span {font-size:30px}
.wedding-names small {font-size:16px;font-weight:400}
.maker-card .maker-subtitle {font-size:22px;margin:8px 0 20px}
.layout-P3 {background:#fffaf1;color:#762f3d;font-family:'Songti TC','PMingLiU',serif}
.layout-P3 .maker-title {font-size:28px;margin-bottom:6px}
.maker-card .maker-age {font-size:38px;font-weight:700;line-height:1.45;margin:0 0 20px}
.layout-P3 .maker-photo,.layout-P4 .maker-photo {height:190px}
.maker-ornament {font-size:48px;margin:10px 0 20px;font-weight:400;color:#b89a5e}
.maker-card .maker-body {font-size:15px;line-height:1.9;margin:0 0 18px;white-space:pre-wrap}
.maker-details {border-top:1px solid #b89a5e66;border-bottom:1px solid #b89a5e66;padding:16px 0;width:100%}
.maker-details p {font-size:15px;line-height:1.8;margin:3px 0}
.maker-place {font-weight:700}
.maker-schedule {padding:0;list-style:none;width:100%;font-size:14px;margin:20px 0 0;text-align:left}
.maker-schedule li {display:flex;gap:12px;margin:6px 0;align-items:baseline}
.maker-schedule time {flex:0 0 auto}
.maker-card .maker-signature {font-size:15px;margin:24px 0 16px}
.maker-card .card-watermark {position:static;display:block;margin-top:8px;font-size:12px;letter-spacing:0}
.pending-label {display:block;font:13px/1.7 sans-serif;padding:6px 12px;background:#edf3ee;color:#285943;margin-bottom:16px}
.maker-card.warm {background:#fff5e9}
.maker-card.modern {background:#f4f8f4;color:#285943;font-family:inherit}
.guest-screen .maker-card .maker-details p,.guest-screen .maker-card .maker-body,.guest-screen .maker-card .maker-signature,.guest-screen .maker-card .maker-schedule {font-size:16px}
.editor-panel,.preview-panel,.field-grid > *,.guest-body {min-width:0}
.maker-card .card-watermark {white-space:normal}
@media (max-width:719px){
 .event-picker {padding-top:28px}
 .maker-card {padding:24px 20px}
 .category-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .category-tab {white-space:normal;min-width:0;justify-content:center}
 .subevent-tabs .button {min-height:48px;padding:10px 14px}
 .mobile-editor-tabs [aria-selected=true] {border-bottom:2px solid #285943;background:#edf3ee;color:#285943}
 .maker-card .maker-age {font-size:34px}
}

/* L4.1: homepage reference layout; event model and other routes stay independent. */
body:has(.reference-home) .header-inner {height:68px;max-width:1200px;padding-inline:24px}
body:has(.reference-home) .brand {font-size:18px}
body:has(.reference-home) .brand-tagline,body:has(.reference-home) .prototype-banner {display:none}
.reference-home.container {width:calc(100% - 48px);max-width:1152px;padding:0;margin:0 auto}
.reference-home .home-hero {display:block;position:relative;height:auto;min-height:0;padding:64px 0 56px;text-align:center;margin:0;background:none}
.reference-home .home-hero .hero-copy {display:block;max-width:none;margin:auto}
.reference-home .home-hero h1 {font-size:64px;line-height:80px;letter-spacing:-1.4px;font-weight:700;margin:0}
.reference-home .home-hero .hero-lead {text-wrap:balance;font-size:24px;line-height:34px;font-weight:500;font-style:normal;max-width:760px;margin:20px auto 0;color:#285943}
.reference-home .compact-values {display:flex;justify-content:center;gap:28px;margin-top:16px;color:#285943;font-size:15px;line-height:24px;font-weight:600}
.reference-home .compact-values span {display:flex;align-items:center;gap:6px}
.reference-home .compact-values svg {width:16px;height:16px}
.reference-home .hero-boundary {font-size:13px;line-height:22px;color:#53635a;margin:12px 0 0;max-width:none}
.reference-home .layout-version {font-size:11px;font-weight:400;white-space:nowrap;margin-left:8px}
.reference-home .hero-actions {position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:20px;margin:0;line-height:18px}
.reference-home .hero-actions a {font-size:12px;line-height:18px;text-decoration:underline;text-underline-offset:3px;color:#285943}
.reference-home .event-picker {padding:8px 0 24px;margin:0;scroll-margin-top:20px;text-align:center}
.reference-home .category-tabs {display:flex;flex-wrap:wrap;justify-content:center;gap:8px;border:0;padding:0;margin:0;overflow:visible;background:transparent}
.reference-home .category-tab {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:40px;height:auto;padding:7px 16px;flex:0 0 auto;border:1px solid #dce4dd;border-radius:8px;background:#fff;font-size:14px;line-height:24px;color:#53635a}
.reference-home .category-tab.active {border-color:#285943;background:#edf3ee;color:#285943}
.reference-home .category-tab svg {width:16px;height:16px}
.reference-home .subevent-tabs {display:flex;justify-content:center;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.reference-home .subevent-tabs .button {min-height:44px;border:1px solid #dce4dd;border-radius:8px;padding:5px 20px;font-size:14px;line-height:24px;background:#fff;box-shadow:none;color:#53635a}
.reference-home .subevent-tabs .active {border-color:#285943;background:#285943;color:#fff}
.reference-home .workspace {border:0;background:none;border-radius:0;overflow:visible;margin:0;scroll-margin-top:20px}
.reference-home .workspace-heading {padding:0 0 20px;align-items:start;gap:12px;border:0}
.reference-home .workspace-heading h2 {font-size:23px;line-height:32px;letter-spacing:0}
.reference-home .workspace-heading p {font-size:14px;line-height:22px;margin:4px 0 0}
.reference-home .save-state {font-size:12px;line-height:20px;white-space:normal;text-align:right;max-width:160px;padding-top:6px}
.reference-home .mobile-edit-hint {display:none}
.reference-home .editor-demo-link {display:inline-block;font-size:12px;margin-left:8px}
.reference-home .editor-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.reference-home .editor-panel {padding:24px;border:1px solid #dce4dd;border-radius:12px;background:white}
.reference-home .preview-panel {padding:24px;border:1px solid #dce4dd;border-radius:12px;background:#f5f7f4;overflow:visible;align-self:stretch}
.reference-home .preview-sticky {position:sticky;top:20px;width:100%}
.reference-home .preview-top {font-size:20px;line-height:32px;font-weight:600;margin-bottom:20px;color:#202622}
.reference-home .preview-zoom {font-size:12px;line-height:20px;font-weight:400;color:#53635a}
.reference-home .field-grid {gap:16px}
.reference-home .field-label {font-size:14px;line-height:22px;margin-bottom:6px;font-weight:600}
.reference-home input:not([type=radio]):not([type=file]),.reference-home select,.reference-home textarea {font-size:15px;line-height:22px;min-height:44px;border-color:#829486;border-radius:8px}
.reference-home .field-error:empty {display:none}
.reference-home .field-error {font-size:13px;line-height:20px;margin-top:6px}
.reference-home .full {grid-column:1/-1}
.reference-home .label-note {font-size:12px;line-height:20px;color:#53635a;margin:-4px 0 0}
.reference-home .compact-photo-section {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;margin:20px 0}
.reference-home .compact-upload {padding:12px;min-height:64px;border:1px dashed #829486;border-radius:8px;gap:10px;align-items:center;justify-content:start;margin:0}
.reference-home .compact-upload .upload-icon {width:24px;height:24px;margin:0;background:none}
.reference-home .compact-upload .upload-copy strong {font-size:14px;font-weight:400}
.reference-home .compact-upload .upload-copy small {font-size:11px}
.reference-home .compact-photo-section:not(:has(.photo-thumb)) .compact-upload {grid-column:1/-1}
.reference-home #photo-controls .photo-controls {margin:0;padding:8px;min-height:64px;gap:8px;border:1px solid #dce4dd;border-radius:8px}
.reference-home .photo-controls .photo-thumb {width:40px;height:40px;object-fit:contain}
.reference-home .photo-controls>span {display:none}
.reference-home .photo-controls .text-button {font-size:13px}
.reference-home #photo-hint,.reference-home #photo-error {grid-column:1/-1;font-size:12px;line-height:20px;margin-top:8px}
.reference-home .compact-style-section {margin:0 0 20px}
.reference-home .compact-style-section h3 {font-size:14px;line-height:22px;margin:0 0 8px}
.reference-home .style-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.reference-home .style-option {padding:8px 6px;min-height:44px;border-radius:8px}
.reference-home .style-option strong {font-size:13px;line-height:22px;font-weight:400}
.reference-home .style-check {position:static;font-size:12px;display:inline;margin-left:4px;background:none;color:#285943}
.reference-home .optional-fields {border-top:1px solid #dce4dd;border-bottom:1px solid #dce4dd;padding:12px 0;margin:0 0 20px;min-width:0}
.reference-home .optional-fields summary {font-size:14px;line-height:24px;color:#285943;cursor:pointer;font-weight:600;min-height:24px;overflow-wrap:anywhere}
.reference-home .optional-fields[open]>.field-grid {padding-top:16px}
.reference-home .generate-button {margin-top:0;border-radius:8px;min-height:48px}
.reference-home .generate-note {font-size:13px;line-height:20px}
.reference-home .preview-caption,.reference-home .preview-info {font-size:12px;line-height:20px}
.reference-home .cases-section {margin-top:64px;padding-top:0}
.reference-home .section-heading h2 {font-size:28px}
.reference-home .home-case-grid {gap:24px}
@media(max-width:1099px) and (min-width:720px){.reference-home .home-hero {padding:48px 0}.reference-home .home-hero h1 {font-size:44px;line-height:60px;letter-spacing:-1px}.reference-home .home-hero .hero-lead {font-size:20px;line-height:30px}.reference-home .category-tab {padding-inline:12px}.reference-home .editor-panel,.reference-home .preview-panel {padding:20px}}
@media(max-width:719px){
 body:has(.reference-home) .header-inner {height:60px;padding-inline:16px;gap:12px}
 .reference-home.container {width:calc(100% - 32px);max-width:560px}
 .reference-home .home-hero {display:block;height:auto;padding:40px 0;text-align:center}
 .reference-home .home-hero .hero-copy {display:block}
 .reference-home .home-hero h1 {font-size:30px;line-height:42px;margin:0;letter-spacing:-.6px}
 .reference-home .home-hero .hero-lead {font-size:17px;line-height:28px;margin:18px 0 0}
 .reference-home .compact-values {gap:12px;flex-wrap:wrap;font-size:13px;line-height:22px;margin-top:14px}
 .reference-home .hero-boundary {font-size:12px;line-height:21px;margin:12px 0 0}
 .reference-home .hero-actions {position:static;flex-wrap:wrap;gap:8px 16px;margin-top:12px;width:auto}
 .reference-home .event-picker {padding:0 0 24px}
 .reference-home .category-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .reference-home .category-tab {padding:9px 10px;min-height:48px;font-size:13px;line-height:22px;width:100%}
 .reference-home .subevent-tabs {gap:8px;margin-top:12px}
 .reference-home .subevent-tabs .button {min-height:44px;flex:1 1 auto;padding:8px 12px}
 .reference-home .workspace-heading {padding-bottom:20px;flex-direction:column;gap:8px}
 .reference-home .save-state {text-align:left;max-width:none;padding:0}
 .reference-home .desktop-edit-hint {display:none}
 .reference-home .mobile-edit-hint {display:inline}
 .reference-home .editor-demo-link {margin:0 0 0 8px}
 .reference-home .editor-grid {display:block}
 .reference-home .editor-panel,.reference-home .preview-panel {padding:20px 16px}
 .reference-home .preview-sticky {position:static}
 .reference-home .mobile-editor-tabs {margin:0 0 12px}
 .reference-home input:not([type=radio]):not([type=file]),.reference-home select,.reference-home textarea {font-size:16px}
 .reference-home .field-grid {gap:16px 12px}
 .reference-home .compact-upload {padding:10px;gap:6px}
 .reference-home .upload-icon {display:none}
 .reference-home .compact-upload .upload-copy strong {font-size:13px}
 .reference-home .compact-upload .upload-copy small {font-size:10px}
 .reference-home .photo-controls .photo-thumb {width:32px;height:32px}
 .reference-home .cases-section {margin-top:40px}
 .reference-home .section-heading h2 {font-size:24px}
 .reference-home .preview-panel .maker-card {max-width:360px;min-width:0}
}
.reference-home .style-option {display:flex;align-items:center;justify-content:center;gap:4px}
.reference-home .style-option strong {margin:0}
@media(max-width:719px){.reference-home .optional-fields summary {min-height:44px;display:flex;align-items:center}}

/* C1: category colors remain presentation-only, independent from draft data. */
.reference-home [data-theme="birthday"] {--theme:#138548;--tint:#eff8f1;--solid:#138548;--theme-text:#138548}
.reference-home [data-theme="baby"] {--theme:#d33682;--tint:#fff0f6;--solid:#d33682;--theme-text:#c62b77}
.reference-home [data-theme="wedding"] {--theme:#c13f60;--tint:#fff1f4;--solid:#c13f60;--theme-text:#c13f60}
.reference-home [data-theme="gathering"] {--theme:#c36318;--tint:#fff5e9;--solid:#b75a12;--theme-text:#ae5410}
.reference-home [data-theme="business"] {--theme:#3265cc;--tint:#eff5ff;--solid:#3265cc;--theme-text:#3265cc}
/* holiday: art docs/art/holiday-2026-11/THEMES.md §二 (teal; --theme-text 6.0:1 on white, 5.4:1 on tint). */
.reference-home [data-theme="holiday"] {--theme:#0f7c84;--tint:#e8f6f6;--solid:#0f7c84;--theme-text:#0c6e75}
.reference-home [data-theme="custom"] {--theme:#8550c8;--tint:#f6f0ff;--solid:#8550c8;--theme-text:#8550c8}
.reference-home .category-tab {gap:8px;min-height:44px;padding:10px 16px;color:#343d37;line-height:22px;transition:background-color 140ms,border-color 140ms}
.reference-home .category-tab svg {width:20px;height:20px;flex-shrink:0;color:var(--theme)}
.reference-home .category-tab.active {border-color:var(--theme);background:var(--tint);color:var(--theme-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--theme)}
.reference-home .subevent-tabs .button {transition:background-color 140ms,border-color 140ms}
.reference-home .subevent-tabs .active {background:var(--solid);border-color:var(--solid);color:#fff}
.reference-home .category-tab:enabled:hover,.reference-home .subevent-tabs .button:enabled:hover {border-color:var(--theme);background:var(--tint);color:var(--theme-text)}
.reference-home .subevent-tabs .active:enabled:hover {background:var(--solid);color:#fff}
.reference-home .category-tab:focus-visible,.reference-home .subevent-tabs .button:focus-visible {outline:3px solid #202622;outline-offset:3px}
.reference-home .category-tab:disabled,.reference-home .subevent-tabs .button:disabled {background:#f5f7f4;border-color:#dce4dd;color:#707a74;opacity:1;box-shadow:none;cursor:not-allowed}
.reference-home .category-tab:disabled svg {color:#707a74}
@media(max-width:719px) {.reference-home .category-tab {min-height:48px;padding:10px;font-size:14px;white-space:normal}}
@media(prefers-reduced-motion:reduce) {.reference-home .category-tab,.reference-home .subevent-tabs .button {transition:none}}

/* Independent value sections: one message and one large product view per section. */
.reference-home .value-sections {margin:0 0 80px;scroll-margin-top:24px}
.reference-home .value-section {display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:64px;align-items:center;padding-block:64px}
.reference-home .value-copy,.reference-home .value-visual {min-width:0}
.reference-home .value-copy h2 {max-width:440px;font:700 36px/50px var(--sans);letter-spacing:-.025em;color:#202622}
.reference-home .value-copy>p {font-size:17px;line-height:30px;color:#53635a;margin-top:20px}
.reference-home .value-copy>.button {margin-top:28px;min-height:48px}
.reference-home .value-visual {padding:32px;border-radius:16px;background:#f1f5f2}
.reference-home .value-section-reverse {grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
.reference-home .value-section-reverse>.value-copy {grid-column:2;grid-row:1}
.reference-home .value-section-reverse>.value-visual {grid-column:1;grid-row:1;background:#f5f7f4}
.reference-home .value-reply-sample,.reference-home .value-summary-sample {padding:32px;background:white;border:1px solid #dce4dd;border-radius:12px}
.reference-home .value-sample-label {display:inline-block;font-size:13px;line-height:22px;font-weight:600;color:#285943;background:#eff5ef;padding:4px 10px;border-radius:6px;margin-bottom:20px}
.reference-home .value-visual h3 {font-size:24px;line-height:34px;font-weight:600}
.reference-home .value-sample-intro {font-size:15px;line-height:26px;color:#53635a;margin-top:12px}
.reference-home .value-reply-sample dt {font-size:16px;line-height:26px;margin-top:24px;font-weight:600}
.reference-home .value-reply-sample dd {font-size:16px;line-height:26px;border:1px solid #829486;border-radius:8px;min-height:48px;padding:10px 12px;margin:8px 0 0;overflow-wrap:anywhere}
.reference-home .value-reply-sample .value-guest-count {display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0}
.reference-home .value-guest-count span {padding:10px 12px;border:1px solid #829486;border-radius:8px}
.reference-home .value-total {display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:28px 0;color:#285943}
.reference-home .value-total strong {font-size:64px;line-height:1.1}
.reference-home .value-total>span {font-size:16px;font-weight:600}
.reference-home .value-stats {display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;padding-top:24px;border-top:1px solid #dce4dd}
.reference-home .value-stats dt {font-size:15px;line-height:24px;color:#53635a}
.reference-home .value-stats dd {font-size:24px;line-height:34px;font-weight:600;margin:4px 0 0}
.reference-home .value-stats dd small {font-size:14px;font-weight:400}
.reference-home .value-sample-foot {font-size:13px;line-height:22px;color:#53635a;margin-top:24px}
.reference-home .value-boundary {font-size:13px;line-height:22px;color:#53635a;margin-top:8px}
@media(min-width:720px) and (max-width:1023px) {
 .reference-home .value-section {gap:32px}
 .reference-home .value-copy h2 {font-size:30px;line-height:42px}
 .reference-home .value-visual {padding:24px}
 .reference-home .value-reply-sample,.reference-home .value-summary-sample {padding:24px}
}
@media(max-width:719px) {
 .reference-home .value-sections {margin-bottom:56px}
 .reference-home .value-section {grid-template-columns:minmax(0,1fr);gap:24px;padding-block:40px}
 .reference-home .value-section-reverse>.value-copy,.reference-home .value-section-reverse>.value-visual {grid-column:auto;grid-row:auto}
 .reference-home .value-copy h2 {font-size:28px;line-height:40px}
 .reference-home .value-copy>p {font-size:16px;line-height:28px}
 .reference-home .value-copy>.button {min-height:44px}
 .reference-home .value-visual {padding:20px}
 .reference-home .value-reply-sample,.reference-home .value-summary-sample {padding:20px}
 .reference-home .value-visual h3 {font-size:21px;line-height:30px}
 .reference-home .value-guest-count span {padding:10px 8px}
}

/* Full homepage: immutable promotional samples stay separate from the maker. */
.reference-home .expanded-split {display:grid;grid-template-columns:minmax(0,496fr) minmax(0,560fr);gap:64px;align-items:center;padding-block:72px;scroll-margin-top:24px}
.reference-home .expanded-copy,.reference-home .expanded-collage,.reference-home .expanded-occasions,.reference-home .expanded-photo-compare {min-width:0}
.reference-home .expanded-copy h2,.reference-home .expanded-heading h2,.reference-home .expanded-faq>h2,.reference-home .expanded-closing h2 {font:700 36px/50px var(--sans);letter-spacing:-.025em;color:#202622}
.reference-home .expanded-copy h2 {max-width:440px}
.reference-home .expanded-copy>p,.reference-home .expanded-heading>p {font-size:17px;line-height:30px;color:#53635a;margin-top:20px}
.reference-home .expanded-copy>.button {margin-top:28px;min-height:48px}
.reference-home .expanded-uses {margin:28px 0 0}
.reference-home .expanded-uses>div+div {margin-top:20px}
.reference-home .expanded-uses dt {font-size:18px;line-height:28px;font-weight:600;color:#202622}
.reference-home .expanded-uses dd {font-size:16px;line-height:28px;color:#53635a;margin:6px 0 0}
.reference-home .expanded-case-links {margin-top:28px;padding-top:24px;border-top:1px solid #dce4dd}
.reference-home .expanded-case-links h3 {font-size:16px;line-height:26px;font-weight:600}
.reference-home .expanded-case-links>div {display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:12px}
.reference-home .expanded-case-links a {font-size:15px;line-height:26px;color:#285943;text-decoration:underline;text-underline-offset:4px;padding-block:6px}
.reference-home .expanded-case-links>p,.reference-home .expanded-boundary {font-size:13px;line-height:22px;color:#53635a;margin-top:16px}
.reference-home .expanded-collage {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 20px;align-items:center;padding:28px;background:#f3ebdd;border-radius:20px}
.reference-home .expanded-work {min-width:0}
.reference-home .expanded-work-baby {grid-column:1;grid-row:1/3;transform:rotate(-2deg)}
.reference-home .expanded-work-wedding {grid-column:2;grid-row:1;transform:rotate(2deg)}
.reference-home .expanded-work-longevity {grid-column:2;grid-row:2;transform:rotate(-1deg)}
.reference-home .expanded-collage .case-card {width:100%;max-width:none;padding:16px 14px;box-shadow:0 8px 24px #302c211a}
.reference-home .expanded-collage .case-kicker,.reference-home .expanded-collage .case-opening,.reference-home .expanded-collage .case-meta>p {display:none}
.reference-home .expanded-collage .case-letter {padding:10px 0 0;margin-bottom:14px}
.reference-home .expanded-collage .case-letter h3 {font-size:21px;line-height:30px}
.reference-home .expanded-collage .case-photo-frame {height:150px;width:100%;border-radius:0;background:transparent}
.reference-home .expanded-collage .case-baby .case-photo-frame {height:230px;border-radius:110px 110px 0 0}
.reference-home .expanded-collage .case-longevity .case-photo-frame {height:110px}
.reference-home .expanded-collage .case-photo {object-fit:contain;object-position:center}
.reference-home .expanded-collage .case-date {font-size:11px;margin-top:14px}
.reference-home .expanded-collage .case-date span {font-size:10px;margin:3px 0 0}
.reference-home .expanded-reverse {grid-template-columns:minmax(0,560fr) minmax(0,496fr)}
.reference-home .expanded-reverse>.expanded-copy {grid-column:2;grid-row:1}
.reference-home .expanded-reverse>.expanded-occasions {grid-column:1;grid-row:1}
.reference-home .expanded-occasions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;padding:24px;background:#f5f7f4;border-radius:16px}
.reference-home .showcase-paper {width:100%;max-width:320px;min-height:390px;margin:auto;padding:36px 24px 28px}
.reference-home .showcase-paper .card-kicker {font-size:10px;margin-bottom:22px}
.reference-home .showcase-paper .card-title {font-size:25px;line-height:1.6;letter-spacing:.08em}
.reference-home .showcase-paper .showcase-note {font-size:13px;line-height:24px;margin-top:18px;max-width:100%;overflow-wrap:anywhere}
.reference-home .showcase-paper .card-host {font-size:12px;line-height:22px;margin-top:18px}
.reference-home .showcase-paper .card-date,.reference-home .showcase-paper .card-time,.reference-home .showcase-paper .card-location {font-size:12px;line-height:22px;letter-spacing:.02em;max-width:100%;overflow-wrap:anywhere}
.reference-home .showcase-paper .card-rule {margin:20px 0 14px}
.reference-home .expanded-occasions>.showcase-paper {min-height:330px;padding:32px 20px 24px}
.reference-home .expanded-occasions>.showcase-paper:first-child {grid-row:1/3}
.reference-home .expanded-occasions .card-title {font-size:21px;line-height:30px}
.reference-home .expanded-occasions .card-kicker {margin-bottom:14px}
.reference-home .expanded-occasions .card-ornament {display:none}
.reference-home .expanded-occasions .showcase-note {font-size:12px;line-height:22px;margin-top:12px}
.reference-home .expanded-section {padding-block:72px;scroll-margin-top:24px}
.reference-home .expanded-heading {max-width:760px;margin-bottom:40px}
.reference-home .expanded-heading h2 {max-width:700px}
.reference-home .expanded-benefits>.button {margin-top:32px;min-height:48px}
.reference-home .expanded-photo-compare {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px;background:#f3ebdd;border-radius:16px;align-items:center}
.reference-home .expanded-photo-compare figure {margin:0;min-width:0}
.reference-home .expanded-photo-compare figure>img {display:block;width:100%;height:auto;object-fit:contain;border-radius:8px}
.reference-home .expanded-photo-compare figcaption {font-size:14px;line-height:22px;color:#53635a;text-align:center;margin-top:12px}
.reference-home .expanded-photo-compare>.asset-note {grid-column:1/-1;margin:0;font-size:12px}
.reference-home .expanded-benefit-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px 40px}
.reference-home .expanded-benefit-grid article {display:flex;gap:16px;padding-top:24px;border-top:1px solid #dce4dd;min-width:0}
.reference-home .expanded-benefit-grid article>.icon {width:28px;height:28px;flex:none;color:#285943;margin-top:2px}
.reference-home .expanded-benefit-grid h3 {font-size:20px;line-height:30px}
.reference-home .expanded-benefit-grid p {font-size:16px;line-height:28px;color:#53635a;margin-top:12px}
.reference-home .expanded-faq>h2 {text-align:center;margin-bottom:40px}
.reference-home .expanded-faq>div {max-width:840px;margin:auto}
.reference-home .expanded-faq details {border-bottom:1px solid #dce4dd}
.reference-home .expanded-faq summary {font-size:18px;line-height:28px;min-height:56px;padding:18px 36px 18px 0;cursor:pointer;position:relative;list-style:none}
.reference-home .expanded-faq summary::-webkit-details-marker {display:none}
.reference-home .expanded-faq summary:after {content:'+';position:absolute;right:4px;top:18px;color:#285943}
.reference-home .expanded-faq details[open]>summary:after {content:'−'}
.reference-home .expanded-faq details>p {font-size:16px;line-height:28px;color:#53635a;padding:0 32px 20px 0}
.reference-home .expanded-closing {padding:48px;margin:40px 0 72px;background:#eff5ef;border-radius:16px;text-align:center}
.reference-home .expanded-closing h2 {max-width:760px;margin:auto}
.reference-home .expanded-closing>p {font-size:17px;line-height:30px;color:#53635a;margin-top:20px}
.reference-home .expanded-closing>div {display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
.reference-home .expanded-closing .button {min-height:48px}
.reference-home .expanded-closing .text-button {display:inline-flex;gap:8px;align-items:center;font-size:15px}
.reference-home .expanded-closing>.expanded-boundary {font-size:13px;line-height:22px;margin-top:20px}
@media(min-width:720px) and (max-width:1023px) {
 .reference-home .expanded-split {gap:32px;padding-block:64px}
 .reference-home .expanded-copy h2,.reference-home .expanded-heading h2,.reference-home .expanded-faq>h2,.reference-home .expanded-closing h2 {font-size:30px;line-height:42px}
 .reference-home .expanded-collage {padding:20px;gap:20px 12px}
 .reference-home .expanded-collage .case-letter h3 {font-size:18px;line-height:26px}
 .reference-home .expanded-occasions {gap:16px;padding:16px}
 .reference-home .expanded-occasions .card-title {font-size:18px;line-height:28px}
 .reference-home .expanded-occasions>.showcase-paper {padding:28px 16px;min-height:340px}
 .reference-home .showcase-paper {padding:32px 20px;min-height:400px}
 .reference-home .showcase-paper .card-title {font-size:22px}
 .reference-home .expanded-photo-compare {padding:20px;gap:12px}
}
@media(max-width:719px) {
 .reference-home .expanded-split {display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:44px}
 .reference-home .expanded-reverse>.expanded-copy,.reference-home .expanded-reverse>.expanded-occasions {grid-column:auto;grid-row:auto}
 .reference-home .expanded-copy h2,.reference-home .expanded-heading h2,.reference-home .expanded-faq>h2,.reference-home .expanded-closing h2 {font-size:28px;line-height:40px}
 .reference-home .expanded-copy>p,.reference-home .expanded-heading>p {font-size:16px;line-height:28px}
 .reference-home .expanded-copy>.button {min-height:44px}
 .reference-home .expanded-collage {grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}
 .reference-home .expanded-work-baby,.reference-home .expanded-work-wedding,.reference-home .expanded-work-longevity {grid-column:auto;grid-row:auto;transform:none;width:100%;max-width:280px;margin:auto}
 .reference-home .expanded-collage .case-letter h3 {font-size:24px;line-height:34px}
 .reference-home .expanded-collage .case-photo-frame {height:180px}
 .reference-home .expanded-collage .case-baby .case-photo-frame {height:270px}
 .reference-home .expanded-collage .case-longevity .case-photo-frame {height:150px}
 .reference-home .expanded-occasions {grid-template-columns:minmax(0,1fr);padding:24px}
 .reference-home .expanded-occasions>.showcase-paper:first-child {grid-row:auto}
 .reference-home .expanded-occasions>.showcase-paper {min-height:350px;max-width:280px;padding:32px 28px}
 .reference-home .expanded-occasions .card-title {font-size:25px;line-height:36px}
 .reference-home .expanded-section {padding-block:44px}
 .reference-home .expanded-heading {margin-bottom:28px}
 .reference-home .expanded-photo-compare {grid-template-columns:minmax(0,1fr);padding:24px;gap:24px}
 .reference-home .expanded-photo-compare figure {width:100%;max-width:280px;margin:auto}
 .reference-home .expanded-benefit-grid {grid-template-columns:minmax(0,1fr);gap:28px}
 .reference-home .expanded-faq>h2 {text-align:left;margin-bottom:28px}
 .reference-home .expanded-faq summary {font-size:18px;line-height:28px}
 .reference-home .expanded-closing {padding:32px 20px;margin:24px 0 56px;text-align:left}
 .reference-home .expanded-closing>p {font-size:16px;line-height:28px}
 .reference-home .expanded-closing>div {align-items:flex-start;justify-content:flex-start;gap:20px;flex-direction:column}
 .reference-home .expanded-closing .button {min-height:44px}
}


/* Place product views before details in the DOM so phones reach the examples early. */
.reference-home .expanded-split {grid-template-areas:"intro visual" "details visual";row-gap:28px;align-items:start}
.reference-home .expanded-intro {grid-area:intro}
.reference-home .expanded-details {grid-area:details;min-width:0}
.reference-home .expanded-split>.expanded-collage,.reference-home .expanded-split>.expanded-photo-compare,.reference-home .expanded-split>.expanded-occasions {grid-area:visual;align-self:center}
.reference-home .expanded-details>.expanded-uses {margin-top:0}
.reference-home .expanded-details>.button {margin-top:28px;min-height:48px}
.reference-home .expanded-reverse {grid-template-areas:"visual intro" "visual details"}
@media(max-width:719px) {
 .reference-home .expanded-split,.reference-home .expanded-reverse {grid-template-areas:"intro" "visual" "details";gap:28px}
 .reference-home .expanded-details>.button {min-height:44px}
}
@media(min-width:360px) and (max-width:719px) {
 .reference-home .expanded-collage {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px;padding:16px}
 .reference-home .expanded-work-baby {grid-column:1;grid-row:1/3}
 .reference-home .expanded-work-wedding {grid-column:2;grid-row:1}
 .reference-home .expanded-work-longevity {grid-column:2;grid-row:2}
 .reference-home .expanded-collage .case-card {padding:12px 10px}
 .reference-home .expanded-collage .case-letter h3 {font-size:18px;line-height:26px}
 .reference-home .expanded-collage .case-photo-frame {height:120px}
 .reference-home .expanded-collage .case-baby .case-photo-frame {height:200px}
 .reference-home .expanded-collage .case-longevity .case-photo-frame {height:100px}
 .reference-home .expanded-collage .case-date {font-size:10px;letter-spacing:0}
 .reference-home .expanded-occasions {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px;padding:16px}
 .reference-home .expanded-occasions>.showcase-paper {min-height:300px;padding:28px 16px}
 .reference-home .expanded-occasions>.showcase-paper:first-child {grid-column:1;grid-row:1/3}
 .reference-home .expanded-occasions .card-title {font-size:19px;line-height:28px}
 .reference-home .expanded-occasions .showcase-note {font-size:12px;line-height:22px}
}

.reference-home .showcase-paper.modern {background-color:#234e3c}

.reference-home .home-hero .hero-features {font-size:18px;line-height:28px;font-weight:400;color:#53635a;margin:12px auto 0}
@media(max-width:719px){.reference-home .home-hero .hero-features {font-size:16px;line-height:26px}}

/* login-v1 (docs/specs/login-v1.md §3, §5): login dialog, Google button, 6-digit code, header avatar menu */
dialog.auth-modal { max-width:420px; padding:32px 32px 26px; }
.auth-box .modal-title { margin:0 0 4px; font-size:23px; line-height:1.4; padding-right:24px; }
.auth-box .modal-copy { margin:6px 0 22px; }
.auth-google { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #747775; border-radius:24px; background:#fff; color:#1f1f1f; font-family:Roboto,Arial,var(--sans); font-size:15px; font-weight:500; cursor:pointer; padding:0 16px; }
.auth-google:hover { background:#f8faff; border-color:#5f6368; }
.auth-google:focus-visible,.auth-send:focus-visible,.auth-link:focus-visible,.auth-code-cell:focus-visible,.account-menu-item:focus-visible { outline:3px solid #8fb7a0; outline-offset:2px; }
.auth-google-g { flex:none; }
.auth-note { margin:8px 0 0; min-height:0; font-size:13px; color:#8a4b12; }
.auth-note:empty { display:none; }
.auth-or { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:13px; }
.auth-or::before,.auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); padding:0; }
.auth-email-row { display:flex; gap:8px; }
.auth-email-row input { flex:1; min-width:0; min-height:48px; border:1px solid #b9c5bc; border-radius:8px; padding:0 12px; font-size:16px; background:#fff; color:var(--ink); }
.auth-email-row input:focus { outline:3px solid #8fb7a0; outline-offset:0; border-color:var(--green); }
.auth-send { flex:none; min-height:48px; padding:0 16px; border-radius:8px; white-space:nowrap; }
.auth-send:disabled { opacity:.6; cursor:default; }
.auth-error { min-height:20px; margin:6px 0 0; font-size:13px; color:#b3261e; }
.auth-terms { margin:14px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.auth-terms a { color:var(--green); }
.auth-sent { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.auth-sent strong { color:var(--ink); word-break:break-all; }
.auth-link { border:0; background:none; padding:6px 0; min-height:36px; color:var(--green); text-decoration:underline; text-underline-offset:3px; font-size:13px; cursor:pointer; }
.auth-link:disabled { color:#8c968f; text-decoration:none; cursor:default; }
.auth-debug { margin:-8px 0 16px; padding:10px 12px; border:1px dashed #c58a2d; border-radius:8px; background:#fff8ec; font-size:13px; color:#6b4a12; }
.auth-debug span { display:inline-block; margin-right:8px; padding:1px 8px; border-radius:999px; background:#c58a2d; color:#fff; font-size:12px; }
.auth-debug strong { font-size:16px; letter-spacing:.12em; }
.auth-code { border:0; margin:0; padding:0; min-width:0; }
.auth-code-cells { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.auth-code-cell { width:100%; min-width:0; height:54px; border:1px solid #b9c5bc; border-radius:8px; text-align:center; font-size:22px; font-variant-numeric:tabular-nums; background:#fff; color:var(--ink); padding:0; }
.auth-code-cell:focus { border-color:var(--green); outline:3px solid #8fb7a0; outline-offset:0; }
.auth-code-cell[aria-invalid="true"] { border-color:#b3261e; }
.auth-resend { display:block; margin:4px auto 0; }
.header-inner { position:relative; }
.account-menu { position:absolute; right:36px; top:calc(100% - 6px); z-index:60; min-width:220px; max-width:calc(100vw - 24px); padding:8px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 40px #15291c26; }
.account-menu-email { margin:0; padding:8px 12px; font-size:13px; color:var(--muted); word-break:break-all; border-bottom:1px solid var(--line); }
.account-menu-item { display:block; width:100%; margin-top:6px; min-height:44px; padding:0 12px; border:0; border-radius:6px; background:none; text-align:left; font-size:15px; color:var(--ink); cursor:pointer; }
.account-menu-item:hover { background:var(--soft); }
.legal-screen h1 { font-family:var(--serif); font-weight:500; }
/* #terms / #privacy body (docs/design/legal-pages.md): readable long-form text; tables become cards on phones. */
.legal-body { max-width:760px; margin:0 auto; color:var(--ink); font-size:16px; line-height:1.85; }
.legal-body h1 { font-size:34px; line-height:1.3; margin:18px 0 6px; }
.legal-body h1 + p { color:var(--muted); font-size:14px; margin:0 0 22px; }
.legal-body h2 { font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.4; margin:38px 0 10px; padding-top:18px; border-top:1px solid var(--line); }
.legal-body p { margin:0 0 14px; }
.legal-body ol, .legal-body ul { margin:0 0 16px; padding-left:1.6em; }
.legal-body li { margin:0 0 8px; padding-left:2px; }
.legal-body strong { font-weight:700; }
.md-table { margin:6px 0 18px; }
.md-table:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.md-table table { min-width:0; font-size:15px; line-height:1.65; }
.md-table th { font-size:14px; color:var(--ink); font-weight:600; }
.md-table th, .md-table td { padding:12px 16px; vertical-align:top; max-width:none; }
.md-table td:first-child { font-weight:600; white-space:nowrap; }
@media(max-width:600px) {
  .legal-screen { padding-bottom:56px; }
  .legal-body { font-size:15.5px; line-height:1.8; }
  .legal-body h1 { font-size:28px; }
  .legal-body h2 { font-size:19px; margin-top:30px; }
  .md-table { border:0; border-radius:0; overflow:visible; }
  .md-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .md-table table, .md-table tbody, .md-table tr, .md-table td { display:block; width:auto; }
  .md-table tr { border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px; background:#fff; }
  .md-table td, .md-table td:first-child { padding:4px 0; border:0; white-space:normal; font-weight:400; }
  .md-table td:first-child { font-weight:600; font-size:16px; padding-bottom:6px; }
  .md-table td:not(:first-child)::before { content:attr(data-label); display:block; font-size:12.5px; color:var(--muted); }
}
@media(max-width:720px) {
  #account-button { display:inline-flex; align-items:center; margin-left:auto; }
  #account-button + .header-create, #account-button + .account-menu + .header-create { margin-left:0; }
  #account-button.button-small { padding:8px 14px; font-size:13px; min-height:44px; }
  .account-menu { right:12px; }
  dialog.auth-modal { padding:28px 18px 20px; width:calc(100% - 24px); }
  .auth-code-cells { gap:6px; }
}
@media(max-width:360px) {
  .auth-email-row { flex-direction:column; }
}
#account-button[hidden] { display:none !important; }

/* Guest pages: adopted AI image on top (docs/design/guest-ai-image.md) */
.guest-art { display:block; width:100%; max-width:480px; margin:0 auto; cursor:zoom-in; border-radius:12px; }
.guest-art:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.guest-art .inv-figure { width:100%; }
.guest-art-loading { aspect-ratio:2/3; display:flex; align-items:center; justify-content:center; background:#eef1ea; color:var(--muted,#5b6660); font-size:15px; cursor:default; }
.guest-art-note { max-width:420px; margin:14px auto 0; text-align:center; font-size:14px; color:#7a4d10; background:#fff6e6; border:1px solid #f0d9ad; border-radius:10px; padding:10px 14px; }
.guest-art-empty { max-width:420px; margin:0 auto; text-align:center; padding:56px 24px; background:#fff; border:1px dashed #c9d2c6; border-radius:12px; }
.guest-art-empty h2 { font-family:var(--serif); font-size:22px; font-weight:500; margin-bottom:10px; }
.guest-art-empty p { font-size:15px; color:#5b6660; }
.guest-body .event-info strong { overflow-wrap:anywhere; }
/* Free version: one line under the guest image. */
.guest-free-note { margin:8px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
.guest-free-note a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.guest-made-with { margin:22px 14px 0; text-align:center; font-size:13px; color:var(--muted); }
.guest-made-with a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.guest-made-with a:hover, .guest-made-with a:focus-visible { color:var(--green); }
dialog.zoom-modal { max-width:min(560px, calc(100% - 24px)); width:auto; padding:48px 14px 14px; max-height:96vh; overflow:auto; background:#fff; }
dialog.zoom-modal .inv-figure { width:min(530px, calc(100vw - 52px), calc((96vh - 70px) * 2 / 3)); }
@media(max-width:600px) {
  .guest-screen.has-art { padding:0 0 45px; }
  .guest-screen.has-art > .back-link, .guest-screen.has-art > .notice { margin-left:14px; margin-right:14px; }
  .guest-screen.has-art > .back-link { margin-top:18px; }
  .guest-layout.has-art { padding:0 0 19px; border-radius:0; }
  .guest-layout.has-art .guest-art { max-width:none; border-radius:0; }
  .guest-layout.has-art .inv-figure { border-radius:0; box-shadow:none; }
  .guest-layout.has-art .guest-body { padding:28px 14px 0; }
}

/* 邀請資訊（示範頁與賓客頁共用）: date/place list and 活動流程 (docs/design/schedule-v1.md §8). Demo-only tweaks stay under .demo-event. */
.event-details { margin:24px 0 32px; }
.event-details>div { display:grid; grid-template-columns:85px 1fr; gap:16px; border-top:1px solid var(--line); padding:16px 0; }
.event-details dt { color:var(--muted); font-size:13px; }
.event-details dd { margin:0; font-size:16px; }
.event-details small { color:var(--muted); font-size:12px; }
.event-schedule { list-style:none; padding:0; margin:16px 0 24px; }
.event-schedule li { display:grid; grid-template-columns:5.5em minmax(0,1fr); gap:16px; padding:8px 0; font-size:16px; line-height:1.6; }
.event-schedule-time { color:var(--green); overflow-wrap:anywhere; }
.event-schedule-title { overflow-wrap:anywhere; }
/* Guest page right column = the demo's look: labelled rows (.event-details), bold 活動流程 heading, 16px rows. */
.guest-body .event-details.event-info { display:block; padding:0; gap:0; text-align:left; max-width:420px; margin:24px auto 8px; border-bottom:1px solid var(--line); }
.guest-body .event-details dd { overflow-wrap:anywhere; }
.guest-body .event-schedule-heading { font-size:18px; font-weight:700; text-align:left; max-width:420px; margin:28px auto 4px; }
.guest-body .event-schedule { text-align:left; max-width:420px; margin:8px auto 0; padding-bottom:22px; border-bottom:1px solid var(--line); }
/* Guest page desktop (≥1100, the site's one desktop width): image left (≤480), title / date / 活動流程 / reply right. Only with an AI image. */
@media(min-width:1100px) {
  .guest-screen.has-art { max-width:1080px; }
  .guest-layout.has-art { display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:64px; align-items:start; }
  .guest-layout.has-art { background:none; padding:0; border-radius:0; }
  .guest-layout.has-art .guest-card { padding:32px; background:var(--soft); border-radius:16px; }
  .guest-layout.has-art .guest-body { text-align:left; padding:16px 0 0; }
  .guest-layout.has-art .guest-body > h2 { font-size:27px; margin-bottom:0; }
  .guest-layout.has-art .event-info, .guest-layout.has-art .event-schedule-heading, .guest-layout.has-art .event-schedule { max-width:none; margin-left:0; margin-right:0; }
  .guest-layout.has-art .event-schedule { border-bottom:0; padding-bottom:8px; }
  .guest-layout.has-art .rsvp-area { max-width:none; margin:16px 0 0; border-top:1px solid var(--line); text-align:left; padding-top:28px; }
  .guest-layout.has-art .rsvp-area h2 { font-size:24px; text-align:left; }
  .guest-layout.has-art .rsvp-area>p { font-size:14px; text-align:left; margin:10px 0 20px; }
}

/* Server RSVP (docs/design/rsvp-server.md): host preview note, guest receipt line, roster share buttons. */
.rsvp-preview-note { margin-top:18px; padding:14px 16px; background:#fff6e6; border:1px solid #f0d9ad; border-radius:10px; text-align:center; }
.rsvp-preview-note p { font-size:14px; color:#7a4d10; margin-bottom:10px; }
.rsvp-success .reply-received { font-size:15px; color:var(--green); font-weight:600; }
.rsvp-success [data-action="edit-reply"] { margin:12px auto 0; }
.roster-share { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }

/* Header nav + actions (docs/art/header-nav-2026-10-30/FIX-SPEC.md, docs/design/header-nav-2026-10-30.md) */
.header-actions { display:flex; align-items:center; gap:12px; }
.in-demo .header-actions { display:none; }
@media(min-width:721px) {
  .header-actions>.button { min-height:44px; padding:0 20px; font-size:14px; font-weight:600; line-height:1; border-width:1.5px; border-radius:10px; }
}
@media(max-width:720px) {
  .header-actions { margin-left:auto; gap:12px; }
}

/* Credits v1 (docs/specs/credits-v1.md §3): header 「點數 N」, buy dialog (3 packs in a row, stacked on phones), history table */
.credits-buy:focus-visible { outline:3px solid #8fb7a0; outline-offset:2px; }
dialog.credits-modal { max-width:760px; padding:32px 28px 24px; }
.credits-packs { list-style:none; margin:20px 0 8px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.credits-pack { position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 16px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:center; }
.credits-pack.is-recommended { border:1.5px solid var(--green); }
/* Pack label (「最受歡迎・省 20%」): sits on the card's top edge, takes no height; the list leaves room above it. */
.credits-pack-tag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); padding:3px 10px; border-radius:999px; background:var(--green); color:#fff; font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; }
.credits-pack:not(.is-recommended) .credits-pack-tag { background:#fff; color:var(--green); border:1px solid var(--green); }
.credits-pack p { margin:0; }
.credits-pack-amount { font-size:15px; color:var(--muted); }
.credits-pack-amount strong { font-size:28px; color:var(--ink); font-variant-numeric:tabular-nums; margin-right:2px; }
.credits-pack-bonus { display:block; margin-top:4px; font-size:13px; color:var(--green); font-weight:600; }
.credits-pack-price { font-size:20px; font-weight:700; color:var(--ink); }
.credits-pack-note { font-size:13px; color:var(--muted); }
.credits-pack .credits-buy { margin-top:auto; min-height:44px; width:100%; justify-content:center; }
.credits-buy[disabled] { background:#c9d3cc; border-color:#c9d3cc; color:#3c4740; cursor:not-allowed; }
/* Going to Stripe: the pressed button keeps its colour and box, shows a spinner; nothing in the dialog moves. */
.credits-pack .credits-buy { white-space:nowrap; }
.credits-buy.is-busy { cursor:progress; gap:8px; }
.credits-spinner { width:16px; height:16px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:credits-spin .8s linear infinite; }
@keyframes credits-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .credits-spinner { animation-duration:2.4s; } }
.credits-fine.is-error { color:#b3261e; }
.credits-note { margin:4px 0 0; font-size:14px; color:#7a4b12; }
.credits-fine { margin:6px 0 0; font-size:13px; color:var(--muted); text-align:center; }
.credits-history-wrap { max-height:min(56vh,480px); overflow:auto; margin:14px 0 16px; border:1px solid var(--line); border-radius:10px; }
.credits-history { width:100%; min-width:0; border-collapse:collapse; font-size:14px; }
.credits-history th,.credits-history td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.credits-history th { position:sticky; top:0; background:var(--soft); font-weight:600; color:var(--muted); }
.credits-history td:nth-child(3),.credits-history td:nth-child(4),.credits-history th:nth-child(3),.credits-history th:nth-child(4) { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.credits-history td:first-child { white-space:nowrap; color:var(--muted); }
.credits-history small { display:block; color:var(--muted); }
.credits-history .is-plus { color:var(--green); font-weight:600; }
.credits-history .is-minus { color:#8a3b2b; }
@media(max-width:720px) {
  dialog.credits-modal { padding:28px 16px 18px; width:calc(100% - 24px); }
  .credits-packs { grid-template-columns:1fr; gap:18px; }
  .credits-pack-tag { left:auto; right:14px; transform:translateY(-50%); }
  .credits-pack { flex-direction:row; flex-wrap:wrap; align-items:center; text-align:left; gap:4px 12px; padding:14px; }
  .credits-pack-amount { flex:1 1 auto; }
  .credits-pack-price { font-size:18px; }
  .credits-pack-note { flex-basis:100%; }
  .credits-pack .credits-buy { flex-basis:100%; }
  .credits-history td,.credits-history th { padding:8px 6px; font-size:13px; }
  .credits-history td:first-child { white-space:normal; }
  .credits-history td:first-child span { display:block; }
}
/* ---------- 收費方式彈窗（docs/art/pricing-modal-2026-11-05）：只作用於含 .pricing-sheet 的 dialog ---------- */
html:has(dialog[open] .pricing-sheet) { overflow:hidden; }
dialog:has(.pricing-sheet) { box-sizing:border-box; width:calc(100vw - 32px); max-width:620px; max-height:calc(100dvh - 32px); padding:0; overflow:auto; border-radius:20px; background:#fff; box-shadow:0 24px 80px #20262226; }
dialog:has(.pricing-sheet)::backdrop { background:rgb(32 38 34 / 36%); }
dialog:has(.pricing-sheet) .modal-close { top:14px; right:14px; width:44px; height:44px; border-radius:50%; font-size:26px; line-height:1; display:grid; place-items:center; padding:0; cursor:pointer; }
dialog:has(.pricing-sheet) .modal-close:hover { background:#F5F7F4; }
.pricing-sheet { padding:32px; color:#202622; }
.pricing-eyebrow { margin:0 52px 8px 0; color:#285943; font-size:13px; line-height:20px; font-weight:700; letter-spacing:1.3px; }
.pricing-sheet .pricing-title { margin:0 44px 0 0; font-weight:700; font-size:28px; line-height:1.4; font-family:inherit; letter-spacing:.3px; color:#202622; }
.pricing-summary { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; margin-top:28px; align-items:center; }
.pricing-sheet h3 { margin:0; font-family:inherit; font-size:14px; line-height:24px; font-weight:700; }
.pricing-rate { padding:24px; border-radius:12px; background:#F5F7F4; }
.pricing-rate h3 { color:#53635A; }
.pricing-number { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:8px 0 0; color:#285943; }
.pricing-number strong { font:600 64px/1.05 Arial,sans-serif; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.pricing-number span { font-size:15px; line-height:24px; font-weight:700; white-space:nowrap; }
.pricing-exchange { margin:8px 0 0; font-size:13px; line-height:22px; color:#53635A; }
.pricing-entry { margin:16px 0 0; padding-top:12px; border-top:1px solid #DCE4DD; font-size:13px; line-height:22px; color:#53635A; }
.pricing-included h3 { color:#285943; }
.pricing-included ul { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:14px; }
.pricing-included li { display:flex; align-items:center; gap:10px; font-size:15px; line-height:24px; }
.pricing-included svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:#285943; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pricing-compare { margin-top:28px; }
.pricing-compare h3 { color:#285943; }
.pricing-compare table { width:100%; min-width:0; table-layout:fixed; margin-top:12px; border-collapse:collapse; font-size:14px; line-height:22px; }
.pricing-compare th, .pricing-compare td { padding:10px 12px; text-align:left; border-bottom:1px solid #DCE4DD; vertical-align:middle; background:none; white-space:normal; overflow-wrap:anywhere; }
.pricing-compare thead th { font-size:13px; color:#53635A; font-weight:700; border-bottom-color:#C9D6CC; }
.pricing-compare thead th.is-paid { color:#285943; }
.pricing-compare tbody th { font-weight:600; color:#53635A; }
.pricing-compare thead th:first-child { width:28%; }
.pricing-compare td.is-paid { background:#F5F7F4; color:#202622; font-weight:600; }
.pricing-compare svg { width:18px; height:18px; display:block; fill:none; stroke:#285943; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.pricing-compare .pricing-notice { margin-top:12px; }
.pricing-assurances { margin:24px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 20px; color:#53635A; font-size:14px; line-height:24px; }
.pricing-assurances li::before { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:#285943; margin:0 8px 3px 0; }
.pricing-notice { margin:8px 0 0; font-size:13px; line-height:22px; color:#53635A; }
.pricing-footer { display:flex; flex-direction:row-reverse; gap:12px; margin-top:24px; padding-top:24px; border-top:1px solid #DCE4DD; }
.pricing-footer .button { min-height:50px; margin:0; justify-content:center; font-size:16px; }
.pricing-buy { flex:1; }
.pricing-try { flex:0 0 132px; }
.pricing-sheet :is(button,a):focus-visible { outline:2px solid #285943; outline-offset:3px; }
@media(max-width:599px) {
  dialog:has(.pricing-sheet) { border-radius:16px; }
  .pricing-sheet { padding:24px; }
  .pricing-sheet .pricing-title { font-size:23px; text-wrap:balance; }
  .pricing-summary { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:24px; }
  .pricing-rate { padding:20px; display:flex; flex-wrap:wrap; column-gap:12px; align-items:baseline; }
  .pricing-rate h3,.pricing-entry { width:100%; }
  .pricing-number { flex:1 1 auto; }
  .pricing-number strong { font-size:56px; }
  .pricing-included ul { gap:10px; margin-top:12px; }
  .pricing-compare { margin-top:24px; }
  .pricing-compare th, .pricing-compare td { padding:9px 8px; font-size:13px; }
  .pricing-compare thead th:first-child { width:30%; }
  .pricing-assurances { margin-top:20px; font-size:13px; gap:4px 16px; }
  .pricing-footer { flex-direction:column; gap:8px; margin-top:20px; padding-top:20px; }
  .pricing-try { flex:auto; }
}
@media(max-width:359px) {
  .pricing-sheet { padding:24px 20px 20px; }
  .pricing-sheet .pricing-title { font-size:22px; }
  .pricing-notice { text-wrap:balance; }
  .pricing-rate { display:block; }
}
/* ---------- 管理後台 v1 (docs/design/admin-and-metrics-v1.md §6) ---------- */
.admin-screen { max-width:1200px; padding-top:36px; }
.admin-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:24px; }
.admin-head h1 { margin:0; font-size:26px; line-height:1.3; overflow-wrap:anywhere; }
.admin-kicker { margin:0; color:var(--muted); font-size:13px; letter-spacing:.08em; }
.admin-nav { display:flex; gap:6px; }
.admin-nav a { padding:8px 16px; border-radius:8px; color:var(--muted); font-weight:500; }
.admin-nav a[aria-current="page"] { background:var(--soft); color:var(--green); }
.admin-search label,.admin-fields label { display:block; font-size:13px; color:var(--muted); }
.admin-search-row { display:flex; gap:10px; margin-top:6px; max-width:620px; }
.admin-search-row input,.admin-fields input,.admin-custom input { flex:1; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.admin-error { color:#8a3b2b; font-size:14px; min-height:1.4em; margin:8px 0; }
.admin-error:empty { min-height:0; margin:0; }
.admin-empty { color:var(--muted); font-size:14px; }
.admin-count { color:var(--muted); font-size:13px; margin:12px 0 8px; }
.admin-table table { min-width:0; font-size:14px; }
.admin-table th { font-size:12px; white-space:nowrap; }
.admin-table th,.admin-table td { padding:10px 14px; }
.admin-table small { display:block; color:var(--muted); font-size:12px; }
.admin-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.admin-table .is-plus { color:var(--green); font-weight:600; }
.admin-table .is-minus { color:#8a3b2b; }
.admin-link { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.admin-badge { display:inline-block; padding:1px 10px; border-radius:999px; background:#e6f0e9; color:var(--green); font-size:12px; font-weight:600; }
.admin-badge.is-off { background:#f6e3de; color:#8a3b2b; }
.admin-back { display:inline-block; color:var(--muted); margin-bottom:12px; }
.admin-summary dl { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:0 0 20px; }
.admin-summary dl>div { background:#fff; padding:12px 14px; }
.admin-summary dt { font-size:12px; color:var(--muted); }
.admin-summary dd { margin:2px 0 0; font-weight:500; }
.admin-summary dd small { display:block; color:var(--muted); font-size:12px; font-weight:400; }
.admin-big { font-size:22px; color:var(--green); }
.admin-tools { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.admin-tool { border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.admin-tool h2 { margin:0; font-size:16px; }
.admin-fields { display:flex; gap:12px; }
.admin-fields label { flex:1; }
.admin-fields input { width:100%; margin-top:4px; }
.admin-tool .button { align-self:flex-start; }
.button-danger { background:#8a3b2b; border-color:#8a3b2b; }
.admin-confirm { border:2px solid var(--gold); background:#fffaf0; border-radius:10px; padding:14px 18px; margin:8px 0 16px; }
.admin-confirm h3 { margin:0 0 4px; font-size:17px; }
.admin-confirm p { margin:0 0 12px; color:var(--muted); font-size:14px; }
.admin-actions { display:flex; gap:10px; }
.admin-h2 { font-size:17px; margin:28px 0 10px; }
.admin-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; color:var(--muted); font-size:13px; }
.admin-audit { list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:10px; }
.admin-audit li { padding:10px 14px; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:10px; flex-wrap:wrap; }
.admin-audit li:last-child { border-bottom:0; }
.admin-audit time { color:var(--muted); }
.admin-audit-by { margin-left:auto; color:var(--muted); font-size:12px; }
.admin-range { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admin-custom { display:flex; align-items:center; gap:8px; margin-left:8px; font-size:13px; color:var(--muted); }
.admin-custom label { display:flex; align-items:center; gap:8px; }
.admin-custom input { min-height:40px; }
.admin-range-note { color:var(--muted); font-size:13px; margin:10px 0 4px; }
.admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0 8px; }
.admin-stat { border:1px solid var(--line); border-radius:10px; padding:12px 16px; background:#fff; }
.admin-stat dt { font-size:13px; color:var(--muted); }
.admin-stat dd { margin:2px 0; font-size:26px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.admin-stat dd small { font-size:13px; font-weight:400; color:var(--muted); }
.admin-stat>small { display:block; font-size:12px; color:var(--muted); line-height:1.5; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.admin-funnel { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.admin-funnel li { display:grid; grid-template-columns:44px 1fr 48px 52px; align-items:center; gap:10px; font-size:14px; }
.admin-funnel-bar { background:var(--soft); border-radius:6px; height:22px; overflow:hidden; }
.admin-funnel-bar span { display:block; height:100%; background:var(--green); border-radius:6px; }
.admin-funnel strong { text-align:right; font-variant-numeric:tabular-nums; }
.admin-funnel small { color:var(--muted); }
.admin-note { color:var(--muted); font-size:12px; margin-top:8px; }
.admin-trends { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.admin-trend { margin:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.admin-trend figcaption { font-size:13px; color:var(--muted); margin-bottom:6px; }
.admin-bars { display:flex; align-items:flex-end; gap:2px; height:90px; }
.admin-bar { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.admin-bar span { display:block; width:100%; min-height:1px; background:var(--green); border-radius:2px 2px 0 0; }
.admin-bar em { font-style:normal; font-size:11px; line-height:16px; color:var(--muted); }
.admin-bar-axis { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
@media(max-width:720px) {
  .admin-screen { margin:0 16px; }
  .admin-head { flex-direction:column; align-items:flex-start; }
  .admin-summary dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-tools,.admin-grid,.admin-trends { grid-template-columns:1fr; }
  .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-fields { flex-direction:column; }
}
/* Real-path landing pages (docs/design/landing-pages.md; generated by tools/build-landing.mjs). No JS needed to read them. */
.landing-main { max-width:1040px; margin:0 auto; padding:24px 36px 72px; color:var(--ink); }
.landing-crumbs { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:28px; }
.landing-crumbs a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.landing-hero { max-width:760px; }
.landing-hero h1 { font-family:var(--serif); font-weight:600; font-size:38px; line-height:1.3; letter-spacing:.02em; margin:0 0 16px; color:var(--ink); }
.landing-lead { font-size:17px; line-height:1.85; color:var(--muted); margin:0 0 28px; }
.landing-cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.landing-cta small { color:var(--muted); font-size:13px; }
.landing-main h2 { font-family:var(--serif); font-weight:600; font-size:24px; line-height:1.4; margin:0 0 16px; color:var(--ink); }
.landing-samples { margin:56px 0 8px; }
.landing-sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.landing-sample { margin:0; }
.landing-sample img { display:block; width:100%; height:auto; aspect-ratio:2/3; border-radius:10px; background:var(--soft); box-shadow:0 10px 28px #20262214; }
.landing-sample figcaption { margin-top:10px; font-size:15px; font-weight:600; color:var(--ink); }
.landing-sample figcaption small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
.landing-body { max-width:760px; font-size:16px; line-height:1.85; }
.landing-body h2 { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); scroll-margin-top:var(--anchor-offset); }
.landing-body h3 { font-size:18px; margin:28px 0 8px; }
.landing-body p { margin:0 0 14px; }
.landing-body ol,.landing-body ul { margin:0 0 16px; padding-left:1.4em; }
.landing-body li { margin:6px 0; }
.landing-body a,.landing-faq a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.landing-faq { max-width:760px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); }
.landing-faq details { border-bottom:1px solid var(--line); padding:16px 0; font-size:16px; }
.landing-faq summary { font-weight:600; }
.landing-faq details p { font-size:15px; line-height:1.85; }
.landing-closing { margin-top:56px; padding:40px 32px; border-radius:12px; background:var(--soft); text-align:center; }
.landing-closing h2 { margin-bottom:22px; }
/* Section anchors (ready-to-launch §7.2): room above the heading (header is not sticky; if it becomes sticky set this to
   header height + 16px) and a short highlight so the reader sees where the link landed. */
:root { --anchor-offset:24px; }
.landing-body h2:target { animation:anchor-flash 1.6s ease-out; border-radius:6px; }
@keyframes anchor-flash { 0%,30% { background:#e3efe6; box-shadow:0 0 0 8px #e3efe6; } 100% { background:transparent; box-shadow:0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .landing-body h2:target { animation:none; border-left:4px solid var(--green); padding-left:10px; } }
/* End of a "## … {event=…}" section (event-links §2): its own 開始製作 button, plus 完整介紹 once it has a page. */
.landing-body .landing-section-cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:6px 0 18px; }
.landing-body .landing-section-cta .button { color:#fff; text-decoration:none; }
/* Category overview cards (docs/design/url-v2-holiday-2026-10-31.md §三.2); id = sub-event anchor from the header. */
.overview-cards { margin:56px 0 8px; }
.overview-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }
.overview-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; scroll-margin-top:var(--anchor-offset); }
.overview-card:target { border-color:var(--green); box-shadow:0 0 0 3px #28594326; }
/* Whole invitation on a soft stand, never cropped (docs/art/overview-card-2026-11/SPEC.md). Cards without a page no longer exist. */
.overview-card img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; object-position:center; padding:18px 0; box-sizing:border-box; background:var(--soft); }
.overview-card-text { display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
.overview-card h3 { font-size:18px; margin:0 0 6px; }
.overview-card h3 small { font-size:13px; font-weight:400; color:var(--muted); margin-left:4px; }
.overview-card p { font-size:15px; line-height:1.7; margin:0 0 14px; color:var(--ink); }
.overview-card-links { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.overview-card-links .text-button { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.nav-menu-all a { font-weight:600; border-bottom:1px solid var(--line); margin-bottom:4px; }
@media(max-width:720px) {
  .landing-main { padding:16px 16px 56px; }
  .landing-hero h1 { font-size:28px; }
  .landing-lead { font-size:16px; }
  .landing-cta .button { width:100%; }
  .landing-sample-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin:0 -16px; padding:0 16px 8px; }
  .landing-sample { flex:0 0 78%; scroll-snap-align:center; }
  .landing-closing { padding:32px 18px; }
  .landing-closing .button { width:100%; }
}

/* 我的活動「生成紀錄」 (docs/design/adopt-share-flow.md) */
dialog.history-modal { max-width:min(640px, calc(100% - 24px)); width:100%; }
.history-grid { list-style:none; margin:12px 0 16px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px; max-height:60vh; overflow:auto; }
.history-item { display:flex; flex-direction:column; align-items:center; gap:8px; }
.history-item img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; border:2px solid transparent; background:#f0f3f0; }
.history-item.is-current img { border-color:#285943; }
.history-note { font-size:12.5px; color:#5a6a61; text-align:center; }

/* Header occasion nav (docs/design/header-occasion-nav-2026-10-31.md): the only .site-nav rules — do not add overrides elsewhere.
   ≥1180: one row of category disclosures (生日▾ …) + 使用案例/收費方式/我的活動. <1180: hamburger panel, groups become accordions. */
.site-nav { margin-left:auto; font-size:14px; }
.site-nav ul { list-style:none; margin:0; padding:0; }
.nav-list { display:flex; align-items:center; gap:4px; }
.nav-item { position:relative; }
.nav-list a,.nav-list .nav-text { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 10px; border:0; border-radius:8px; background:none; font:inherit; color:inherit; line-height:1; white-space:nowrap; cursor:pointer; }
.nav-list a:hover,.nav-list .nav-text:hover,.nav-group-toggle[aria-expanded=true] { color:var(--green); background:var(--soft); }
.nav-chevron { flex:none; opacity:.65; transition:transform .18s; }
.nav-group-toggle[aria-expanded=true] .nav-chevron { transform:rotate(180deg); }
.nav-sep { margin-left:8px; padding-left:8px; border-left:1px solid var(--line); }
.nav-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:70; min-width:168px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 40px #15291c26; }
.nav-menu::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; } /* hover bridge over the gap */
.nav-menu a { display:flex; width:100%; padding:0 12px; font-size:15px; }
.nav-group-toggle[aria-expanded=true] + .nav-menu { display:block; }
html:not(.js-nav) .nav-group:focus-within .nav-menu { display:block; }
/* Two-column menu when a group has more than 5 items (holidays), docs/art/holiday-nav-2026-11/SPEC.md §四. */
.nav-menu-cols { width:340px; grid-template-columns:1fr 1fr; grid-template-rows:auto repeat(var(--rows), auto); grid-auto-flow:column; column-gap:4px; }
.nav-group-toggle[aria-expanded=true] + .nav-menu-cols { display:grid; }
html:not(.js-nav) .nav-group:focus-within .nav-menu-cols { display:grid; }
.nav-menu-cols .nav-menu-all { grid-column:1 / -1; grid-row:1; }
#nav-menu-holiday.nav-menu-cols { left:auto; right:0; }
@media(hover:hover) { html:not(.js-nav) .nav-group:hover .nav-menu { display:block; } }
/* After the .nav-menu rule (same specificity): the two-column menu stays a grid when opened by hover without JS. */
@media(hover:hover) { html:not(.js-nav) .nav-group:hover .nav-menu-cols { display:grid; } }
.nav-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; }
.nav-toggle[aria-expanded=true] { color:var(--green); border-color:var(--green); }
.in-demo .nav-group,.in-demo .nav-single,.in-demo .nav-toggle,.in-demo .site-nav [data-action=pricing] { display:none; }
.in-demo .nav-sep { margin-left:0; padding-left:0; border-left:0; }
@media(max-width:1179px) {
  .site-nav { order:3; margin-left:0; }
  .header-actions { margin-left:auto; }
  .nav-toggle { display:inline-flex; }
  .nav-list { display:none; position:absolute; top:100%; left:0; right:0; z-index:70; flex-direction:column; align-items:stretch; gap:0; max-height:calc(100vh - 80px); overflow:auto; padding:8px 16px 16px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 16px 32px #15291c1f; }
  .nav-toggle[aria-expanded=true] + .nav-list,html:not(.js-nav) .site-nav:focus-within .nav-list { display:flex; }
  .nav-item { border-bottom:1px solid var(--line); }
  .nav-item:last-child { border-bottom:0; }
  .nav-list a,.nav-list .nav-text { width:100%; min-height:48px; padding:0 8px; font-size:16px; justify-content:space-between; }
  .nav-sep { margin-left:0; padding-left:0; border-left:0; }
  .nav-menu { position:static; min-width:0; padding:0 0 8px 12px; border:0; border-radius:0; box-shadow:none; }
  .nav-menu::before { display:none; }
  .nav-menu a { font-size:15px; min-height:44px; color:var(--muted); }
  .nav-menu-cols { width:auto; column-gap:12px; }
  #nav-menu-holiday.nav-menu-cols { right:auto; }
  .in-demo .site-nav { display:none; }
}
.header-create { white-space:nowrap; }
.header-actions { flex:none; }
.account-menu-item.has-detail { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.account-menu-detail { font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }

/* Header account entry v1 (docs/specs/header-account-entry-v1.md): signed-in entry is the same outline button as 「登入」, with text + chevron. */
.account-menu-button { gap:6px; white-space:nowrap; }
.account-menu-button .account-chevron { width:10px; height:10px; flex:none; stroke-width:1.5; transition:transform .15s; }
.account-menu-button[aria-expanded="true"] .account-chevron { transform:rotate(180deg); }
.account-label-mobile { display:none; }
@media(max-width:720px) {
  #account-button.account-menu-button { padding:0 14px; font-size:13px; font-weight:600; border-width:1.5px; }
  .header-actions>.header-create { min-height:44px; } /* phone: match the 44px account/login button (art V01) */
  .account-label-desktop { display:none; }
  .account-label-mobile { display:inline; }
}
@media(max-width:380px) {
  body:has(#account-button.account-menu-button) .header-inner { gap:8px; padding-inline:12px; }
  body:has(#account-button.account-menu-button) .header-actions { gap:8px; }
  #account-button.account-menu-button { padding:0 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .account-menu-button .account-chevron { transition:none; }
}

/* S3 賓客連結第一畫面 (docs/design/seo-launch.md「決定：賓客連結第一畫面」): boot-route.js 只在 #invite/ 時給 <html>
   加上 route-guest。佔位區就在靜態首頁 hero 前面；藏 hero 一定要用緊接在後面的兄弟選擇器，不能對 .reference-home
   用 html.route-guest 當前綴，因為 class 會保留到整頁結束，會把真正的首頁也藏掉。 */
.guest-boot { display:none; }
html.route-guest .guest-boot { display:block; }
html.route-guest .guest-boot + .reference-home { display:none; }

/* /guides/ 文章專欄 (docs/design/guides-pages.md §5). 沿用 landing 的頁框與正文樣式，只補列表、相關連結與 CTA。 */
.footer-guides { display:inline-block; margin-top:6px; font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.guides-index,.guides-related,.guides-cta { max-width:760px; }
.guides-index h2 { margin-top:8px; }
.guides-list { display:grid; gap:14px; }
.guides-card { border:1px solid #d3dad5; border-radius:12px; padding:20px 22px; background:#fff; }
.guides-card h2 { margin:0 0 8px; font-size:20px; line-height:1.5; }
.guides-card h2 a { color:var(--green); text-decoration:none; }
.guides-card h2 a:hover,.guides-card h2 a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.guides-card p { margin:0; color:var(--muted); line-height:1.75; }
.guides-related h2 { margin:40px 0 12px; padding-top:20px; border-top:1px solid var(--line); }
.guides-related ul { margin:0; padding-left:1.4em; line-height:1.9; }
.guides-related a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.guides-cta { margin-top:8px; padding-bottom:8px; }
@media (max-width:600px) {
  .guides-card { padding:16px; }
  .guides-card h2 { font-size:18px; }
}

/* 活動流程編輯器 v2 (docs/specs/schedule-editor-v2.md §2): #schedule/<documentId> */
.schedule-screen{max-width:760px}
.schedule-intro{margin:8px 0 20px;color:var(--muted);font-size:14px;line-height:1.6}
.schedule-form{display:flex;flex-direction:column;align-items:stretch}
.schedule-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.schedule-row{display:flex;flex-direction:column;gap:4px}
.schedule-line{display:grid;grid-template-columns:7.5em minmax(0,1fr) 40px;gap:8px;align-items:center}
.schedule-line input{width:100%;min-height:42px;padding:8px 12px;border:1px solid #d3dad5;border-radius:8px;background:#fff;color:var(--ink);font-size:15px}
.schedule-line input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #2859431f}
.schedule-remove{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.schedule-remove:hover{background:#eef2ef;color:var(--ink)}
.schedule-note{font-size:12.5px;line-height:18px;color:var(--muted)}
.schedule-add{align-self:flex-start;margin-top:12px}
.schedule-error{margin:14px 0 0;color:#b3261e;font-size:14px;line-height:1.5}
.schedule-actions{display:flex;gap:12px;margin-top:24px}
.schedule-actions .button{min-width:140px}
@media(max-width:420px){
 .schedule-line{grid-template-columns:6.5em minmax(0,1fr) 40px;gap:6px}
 .schedule-line input{font-size:14px;padding:8px 9px}
 .schedule-actions .button{flex:1;min-width:0}
}

/* Login dialog polish */
dialog.auth-modal { max-width:400px; padding:32px 32px 26px; border:0; border-radius:20px; box-shadow:0 24px 80px #15291c40; }
.auth-box { text-align:center; }
.auth-badge { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:#eaf2ec; color:var(--green); }
.auth-box .modal-title { padding-right:0; font-size:22px; }
.auth-box .modal-copy { margin:6px 0 24px; line-height:1.6; }
.auth-box .modal-title + .auth-google { margin-top:20px; }
.auth-google { min-height:50px; border-radius:12px; border-color:#cfd6d1; box-shadow:0 1px 2px #0000000d; }
.auth-google:hover { background:#f7f9f7; border-color:#aeb8b1; }
.auth-or { margin:20px 0; }
.auth-email { text-align:left; }
.auth-email-row { flex-direction:column; gap:10px; }
.auth-email-row input { min-height:50px; border-radius:12px; border-color:#cfd6d1; background:#f8faf8; padding:0 14px; }
.auth-email-row input:focus { background:#fff; }
.auth-send { width:100%; min-height:50px; border-radius:12px; font-size:15px; }
.auth-error { min-height:0; }
.auth-error:empty { display:none; }
.auth-terms { margin-top:18px; }
.auth-sent { justify-content:center; }
@media(max-width:720px) { dialog.auth-modal { padding:28px 18px 20px; } }