.birthday-page { --bd-text: #292524; --bd-muted: #78716c; --bd-card: #fff; --bd-border: #e7e5e4; background: #fffcf8; color: var(--bd-text); }
.dark .birthday-page { --bd-text: #fafaf9; --bd-muted: #a8a29e; --bd-card: #201d1c; --bd-border: #403934; background: #121110; }
.birthday-main { max-width: 1180px; padding: 46px 24px 60px; margin: auto; }
.birthday-intro { text-align: center; margin-bottom: 32px; }
.birthday-eyebrow { color: #ea580c; font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.birthday-intro h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 850; letter-spacing: -.045em; margin: 8px 0 9px; }
.birthday-intro > p:last-child, .birthday-section-heading p { color: var(--bd-muted); font-size: 14px; line-height: 1.65; }
.birthday-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; align-items: stretch; gap: 24px; }
.birthday-stage { position: relative; overflow: hidden; min-width: 0; min-height: 624px; padding: 32px; container-type: inline-size; text-align: center; border: 1px solid #fed7aa; border-radius: 28px; background: radial-gradient(ellipse at 50% 55%, #fff 12%, #fff8ee 68%, #ffedd5); display: flex; align-items: center; flex-direction: column; box-shadow: 0 12px 50px #c2410c09; }
.dark .birthday-stage { background: radial-gradient(ellipse at 50% 55%, #35231b, #251c17 65%, #332218); border-color: #734323; }
.birthday-stage > :not(.birthday-confetti) { z-index: 1; position: relative; }
.birthday-stage { scroll-margin-top: 80px; }
.birthday-clock { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.birthday-clock > span { color: var(--bd-muted); font-size: 14px; line-height: 1.5; }
.birthday-clock time { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 44px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; }
.birthday-clock small { color: #15803d; font-size: 14px; min-height: 21px; line-height: 1.5; }
.birthday-clock small[data-offline] { color: #b45309; }
.birthday-stage-content { flex: 1 0 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; }
.birthday-emblem { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 26px; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 30px #f9731615; font-size: 44px; transform: rotate(-5deg); margin-bottom: 24px; }
.dark .birthday-emblem { background: #493024; }
.birthday-phase { color: #c2410c; font-size: 14px; line-height: 1.5; font-weight: 700; margin-bottom: 12px; }
.dark .birthday-phase { color: #fb923c; }
#birthdayTitle { min-width: 0; font-size: clamp(28px, 6cqw, 52px); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; max-width: 100%; }
.birthday-title-row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
.birthday-edit-title { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: var(--bd-muted); font-size: 22px; line-height: 1; }
.birthday-edit-title:hover { color: #ea580c; background: #f9731610; }
.birthday-target { font-size: 14px; line-height: 1.7; color: var(--bd-muted); margin: 16px 0 32px; max-width: 100%; overflow-wrap: anywhere; }
.birthday-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 12px; }
.birthday-digit { background: #ffffffa8; border: 1px solid #fed7aa; border-radius: 18px; padding: 22px 6px 18px; min-width: 0; }
.dark .birthday-digit { background: #2119149c; border-color: #5c3722; }
.birthday-digit strong { display: block; font: 700 clamp(32px, 10cqw, 88px)/1.1 ui-monospace, monospace; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: #ea580c; }
.birthday-digits[data-day-digits="3"] .birthday-digit strong { font-size: clamp(26px, 8cqw, 72px); }
.birthday-digits[data-day-digits="4"] .birthday-digit strong { font-size: clamp(22px, 6.5cqw, 58px); }
.birthday-digits[data-day-digits="5"] .birthday-digit strong { font-size: clamp(17px, 5cqw, 46px); }
.birthday-digit span { display: block; color: var(--bd-muted); font-size: 13px; font-weight: 500; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; }
.birthday-stage.is-final { border-color: #fb923c; box-shadow: 0 0 0 4px #ffedd5; }
.birthday-stage.is-celebrating { background: radial-gradient(ellipse at center, #fff7ed, #ffe4d5); }
.dark .birthday-stage.is-celebrating { background: radial-gradient(ellipse at center, #492c20, #241913); }
.birthday-wish { font-size: 20px; line-height: 1.7; color: #c2410c; margin: 12px 0 0; }
.dark .birthday-wish { color: #fdba74; }
.birthday-stage-actions { flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 20px; border-top: 1px solid #f9731620; }
.birthday-stage-actions .birthday-button { min-height: 44px; padding: 12px 22px; font-size: 14px; }
.birthday-button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; border-radius: 11px; padding: 11px 16px; font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background .15s, transform .15s; border: 1px solid transparent; }
.birthday-button:hover { transform: translateY(-1px); }
.birthday-button:disabled { cursor: wait; opacity: .55; transform: none; }
.birthday-button-primary { background: #f97316; color: #fff; box-shadow: 0 4px 12px #f9731620; }
.birthday-button-primary:hover { background: #ea580c; }
.birthday-button-light { background: var(--bd-card); border-color: var(--bd-border); color: var(--bd-text); }
.birthday-wide { width: 100%; }
.birthday-sidebar { display: grid; gap: 16px; min-width: 0; }
.birthday-card { padding: 23px; border-radius: 20px; border: 1px solid var(--bd-border); background: var(--bd-card); box-shadow: 0 4px 20px #29252404; }
.birthday-card h2 { font-size: 16px; font-weight: 750; margin-bottom: 18px; }
.birthday-card label:not(.birthday-check) { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 7px; }
.birthday-card input:not([type=checkbox]), .birthday-card select, .birthday-link-wrap input { appearance: auto; width: 100%; min-width: 0; max-width: 100%; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--bd-border); background: var(--bd-card); color: var(--bd-text); font-size: 13px; height: 43px; }
.birthday-card input[type=date], .birthday-card input[type=time] { padding-left: 7px; padding-right: 5px; }
.dark .birthday-card input { color-scheme: dark; }
.birthday-card input::placeholder { color: #a8a29e; }
.birthday-date-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 9px; }
.birthday-text-button { color: #ea580c; font-size: 12px; font-weight: 650; padding: 9px 0; cursor: pointer; }
.birthday-help { color: var(--bd-muted); font-size: 11px; line-height: 1.75; margin: 3px 0 14px; }
.birthday-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bd-muted); line-height: 1.55; cursor: pointer; }
.birthday-check input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #f97316; }
.birthday-options .birthday-check { margin: 12px 0; }
.birthday-options h2 { margin-bottom: 4px; }
.birthday-options .birthday-help { margin-bottom: 0; }
.birthday-audio-credit { margin-top: 12px; font-size: 10px; line-height: 1.6; color: var(--bd-muted); }
.birthday-audio-credit a { text-decoration: underline; text-underline-offset: 2px; }
.birthday-sound-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.birthday-status { font-size: 12px; line-height: 1.6; color: #c2410c; overflow-wrap: anywhere; }
.birthday-status:not(:empty) { margin-top: 12px; }
.dark .birthday-status { color: #fdba74; }
.birthday-board, .birthday-history { margin-top: 48px; }
.birthday-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.birthday-section-heading h2, .birthday-how h2 { font-size: 23px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0; }
.birthday-section-heading .birthday-eyebrow { color: #ea580c; font-size: 10px; }
.birthday-board-decoration { font-size: 46px; transform: rotate(8deg); }
.birthday-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.birthday-public-notice { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #f97316; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 12px; line-height: 1.7; }
.dark .birthday-public-notice { background: #f9731615; color: #fdba74; }
.birthday-cloud-hint { margin-top: 12px; color: var(--bd-muted); font-size: 12px; line-height: 1.6; }
.birthday-board-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cloud-row-gap, 10px) var(--cloud-column-gap, 24px); padding: 20px 0; }
.birthday-board-cloud:empty { display: none; }
.birthday-event { --tag-color: #9a3412; --tag-size: 20px; --tag-weight: 600; display: inline-flex; align-items: center; max-width: 100%; min-width: 0; gap: 5px; }
.birthday-event[data-tone="1"] { --tag-color: #c2410c; }
.birthday-event[data-tone="2"] { --tag-color: #a21caf; }
.birthday-event[data-tone="3"] { --tag-color: #0f766e; }
.birthday-event[data-tone="4"] { --tag-color: #b45309; }
.dark .birthday-event { --tag-color: #fdba74; }
.dark .birthday-event[data-tone="1"] { --tag-color: #fb923c; }
.dark .birthday-event[data-tone="2"] { --tag-color: #e879f9; }
.dark .birthday-event[data-tone="3"] { --tag-color: #5eead4; }
.dark .birthday-event[data-tone="4"] { --tag-color: #fcd34d; }
.birthday-event.is-past { --tag-color: var(--bd-muted); }
.birthday-board-cloud .birthday-event-open { color: var(--tag-color); font-size: var(--tag-size); font-weight: var(--tag-weight); line-height: 1.45; letter-spacing: -.025em; padding: 5px 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; text-decoration: none; }
.birthday-event-count { flex-shrink: 0; color: var(--tag-color); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.birthday-event-open:hover, .birthday-event-open:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.birthday-event-open:focus-visible { outline: 2px solid #fdba74; outline-offset: 4px; border-radius: 3px; }
.birthday-event-hide { flex: 0 0 auto; align-self: center; color: var(--bd-muted); font-size: 20px; line-height: 1; padding: 6px; min-width: 32px; min-height: 32px; }
.birthday-event-hide:hover, .birthday-event-hide:focus-visible { color: #dc2626; }
.birthday-board-status { color: var(--bd-muted); text-align: center; padding: 16px; font-size: 13px; }
#birthdayMore { margin: 12px auto; display: flex; }
.birthday-group-dialog { width: min(600px, calc(100vw - 28px)); max-height: 80vh; margin: auto; padding: 24px; border: 1px solid var(--bd-border); border-radius: 20px; color: var(--bd-text); background: var(--bd-card); box-shadow: 0 24px 80px #0003; overflow-y: auto; }
.birthday-group-dialog::backdrop { background: #0006; }
.birthday-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.birthday-group-heading h2 { font-size: 22px; font-weight: 750; overflow-wrap: anywhere; min-width: 0; }
.birthday-group-close { flex-shrink: 0; font-size: 28px; width: 44px; height: 44px; }
.birthday-group-entry { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--bd-border); }
.birthday-group-open { display: grid; gap: 6px; flex: 1; min-width: 0; padding: 16px 0; text-align: left; }
.birthday-group-open strong { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.birthday-group-open small { font-size: 12px; color: var(--bd-muted); }
.birthday-group-open:hover strong { color: #ea580c; text-decoration: underline; }
#birthdayGroupMore { margin-top: 16px; }
.birthday-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.birthday-history-item { display: flex; flex-direction: column; text-align: left; gap: 5px; min-width: 0; padding: 15px 18px; border: 1px solid var(--bd-border); border-radius: 13px; background: var(--bd-card); }
.birthday-history-item strong { font-size: 13px; overflow-wrap: anywhere; }
.birthday-history-item small { font-size: 11px; color: var(--bd-muted); }
.birthday-how { border-top: 1px solid var(--bd-border); margin-top: 42px; padding-top: 26px; }
.birthday-how h2 { font-size: 18px; }
.birthday-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.birthday-how li { display: flex; align-items: start; gap: 9px; font-size: 12px; line-height: 1.7; color: var(--bd-muted); }
.birthday-how li span { width: 22px; height: 22px; border-radius: 50%; background: #ffedd5; color: #c2410c; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; }
.birthday-how > p { font-size: 11px; line-height: 1.8; color: var(--bd-muted); }
.birthday-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.birthday-confetti i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px; animation: birthday-fall 3.8s ease-in forwards; }
@keyframes birthday-fall { from { transform: translateY(-20px) rotate(0deg); opacity: 1; } to { transform: translateY(1000px) rotate(540deg); opacity: .1; } }
.birthday-link-wrap { width: 100%; font-size: 11px; margin-top: 15px; }
.birthday-link-wrap input { margin-top: 8px; }
.birthday-stage:fullscreen { border-radius: 0; min-height: 100vh; padding: 40px max(24px, calc((100vw - 880px) / 2)); }
.birthday-stage:fullscreen #birthdayTitle { font-size: clamp(30px, 5vw, 72px); }
.birthday-stage:fullscreen .birthday-digits { max-width: 800px; }
.birthday-page [hidden] { display: none !important; }
.birthday-page button:focus-visible, .birthday-page input:focus-visible, .birthday-page select:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.birthday-page #siteFabGroup, .birthday-page #visitorCounter { position: static; display: flex; justify-content: center; margin: 18px auto; }
@media (max-width: 1040px) { .birthday-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; } .birthday-stage { padding: 24px 18px; } .birthday-card { padding: 19px; } }
@media (max-width: 820px) { .birthday-main { padding: 30px 18px 40px; } .birthday-layout { grid-template-columns: 1fr; } .birthday-stage { min-height: 550px; } .birthday-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 580px) { .birthday-main { padding: 28px 14px 34px; } .birthday-intro { margin-bottom: 23px; } .birthday-intro > p:last-child { font-size: 12px; } .birthday-stage { padding: 22px 14px; min-height: 500px; border-radius: 21px; } .birthday-stage-content { padding: 28px 0; } .birthday-clock time { font-size: 34px; } .birthday-emblem { width: 66px; height: 66px; font-size: 36px; margin-bottom: 20px; border-radius: 22px; } .birthday-digits { gap: 6px; } .birthday-digit { padding: 16px 3px 12px; border-radius: 12px; } .birthday-digit span { font-size: 11px; margin-top: 8px; } .birthday-target { font-size: 12px; margin: 12px 0 24px; } .birthday-stage-actions { gap: 8px; padding-top: 16px; } .birthday-stage-actions .birthday-button { padding: 10px 16px; font-size: 13px; } .birthday-sidebar { grid-template-columns: 1fr; } .birthday-card { padding: 22px; } .birthday-history-grid { grid-template-columns: 1fr; } .birthday-board { margin-top: 35px; } .birthday-board-cloud { gap: 5px 18px; } .birthday-event-open { font-size: calc(var(--tag-size) * .9); } .birthday-board-toolbar { align-items: start; flex-direction: column; } .birthday-how ol { grid-template-columns: 1fr; gap: 14px; } .birthday-board-decoration { font-size: 36px; } .birthday-section-heading h2 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .birthday-confetti i { animation: none; display: none; } .birthday-button { transition: none; } .birthday-button:hover { transform: none; } }