@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-0.woff2") format("woff2"); unicode-range: U+0000-4FFF; }
@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-1.woff2") format("woff2"); unicode-range: U+5000-5FFF; }
@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-2.woff2") format("woff2"); unicode-range: U+6000-6FFF; }
@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-3.woff2") format("woff2"); unicode-range: U+7000-7FFF; }
@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-4.woff2") format("woff2"); unicode-range: U+8000-8FFF; }
@font-face { font-family: "Fortune Brush"; font-weight: 400; font-display: swap; src: url("../images/golden-brush-5.woff2") format("woff2"); unicode-range: U+9000-FFFF; }
@font-face { font-family: "Fortune Serif"; font-weight: 400 500; font-display: swap; src: url("../images/golden-serif-regular-0.woff2") format("woff2"); unicode-range: U+0-6FFF; }
@font-face { font-family: "Fortune Serif"; font-weight: 400 500; font-display: swap; src: url("../images/golden-serif-regular-1.woff2") format("woff2"); unicode-range: U+7000-FFFF; }
@font-face { font-family: "Fortune Serif"; font-weight: 600 900; font-display: swap; src: url("../images/golden-serif-bold-0.woff2") format("woff2"); unicode-range: U+0-6FFF; }
@font-face { font-family: "Fortune Serif"; font-weight: 600 900; font-display: swap; src: url("../images/golden-serif-bold-1.woff2") format("woff2"); unicode-range: U+7000-FFFF; }
:root { --accent: #8b5b2b; --paper: #f3ede0; --ink: #201e17; --line: #bca17b; --soft: #e9dcc2; --heading-ink: #fff8e7; --title-ink: #151911; --nav-ink: #ffe0a1; --frame: 1px; --page-width: 720px; }
html { min-width: 320px; background: #e9e6df; color: var(--ink); }
body, button, input, select { font-family: "Fortune Serif", "Songti SC", SimSun, serif; }
body { font-size: 16px; line-height: 1.5; }
a:focus-visible, button:focus-visible { outline-color: var(--accent); }
.app-shell { max-width: var(--page-width); padding: 0 5px calc(82px + env(safe-area-inset-bottom)); background: var(--paper); border-inline: 1px solid var(--line); }
main { min-width: 0; }
.site-header { margin-inline: -5px; background: var(--paper); }
.fortune-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; aspect-ratio: 5.4; background: var(--soft) url("../images/masthead.png") center / 100% 100% no-repeat; text-align: center; color: var(--title-ink); padding: 8px 12px; overflow-wrap: anywhere; }
.fortune-brand { width: 100%; min-width: 0; }
.fortune-brand strong { font: 400 clamp(34px,8.6vw,72px)/1.13 "Fortune Brush", KaiTi, serif; text-shadow: 0 1px 1px var(--paper); }
.fortune-brand small { font-family: "Fortune Brush", KaiTi, serif; font-size: clamp(12px,2.4vw,19px); letter-spacing: .12em; }
.calendar-strip { display: block; margin: 0; padding: 4px 6px; border-block: 1px solid var(--line); color: var(--ink); background: var(--paper); text-align: center; font-size: 14px; }
.shortcut-grid { gap: 0; padding: 0; min-height: 0; margin-top: 4px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }
.shortcut-grid a { display: grid; place-items: center; padding: 7px 2px; min-height: 35px; line-height: 1.4; font-size: 17px; color: var(--ink); background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; white-space: normal; overflow-wrap: anywhere; }
.shortcut-grid a:hover { color: var(--accent); background: var(--soft); }
.shortcut-empty { padding: 20px; color: var(--ink); }
.red-strip { display: grid; place-items: center; min-height: 36px; margin: 5px 0; padding: 4px; border: var(--frame) solid var(--line); border-radius: 0; background: var(--accent); color: var(--heading-ink); font: 400 clamp(15px,3.8vw,28px)/1.3 "Fortune Brush", KaiTi, serif; }
.notice-bar { margin: 5px 0; height: 30px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); background: var(--paper); font-size: 13px; }
.notice-icon { width: 17px; height: 17px; flex-basis: 17px; color: var(--accent); }
.notice-window p { width: max-content; max-width: none; animation: fortune-notice-scroll 45s linear infinite; }
.notice-window:hover p { animation-play-state: paused; }
@keyframes fortune-notice-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .notice-window p { width: auto; white-space: normal; animation: none; }
}
.draw-section { border: var(--frame) solid var(--line); margin: 5px 0; background: var(--paper); }
.draw-tabs { background: var(--soft); }
.draw-tabs button { min-width: 0; min-height: 36px; padding: 5px 3px; font-size: 17px; color: var(--ink); background: var(--paper); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.draw-tabs button:last-child { border-right: 0; }
.draw-tabs button[aria-selected="true"] { color: var(--heading-ink); background: var(--accent); }
.draw-title { padding: 10px 12px 6px; min-height: 40px; align-items: baseline; font-size: 16px; }
.draw-title b { font-weight: 700; }
.draw-title > span { white-space: normal; }
[data-field="countdown"] { color: #b71714; font-family: Georgia, serif; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.draw-numbers { padding: 12px 15px; gap: 9px; }
.ball b { width: min(100%,66px); font-size: min(38cqw,32px); border-radius: 50%; background: radial-gradient(circle at 50% 49%, #fff 0 36%, #e0e8e9 38%, #9aa5aa 40%, transparent 43%), radial-gradient(circle at 33% 18%, #e5f8ff, #3299df 36%, #0365ab 67%, #083c69 85%); box-shadow: inset 0 0 1px 1px #fff8, 0 2px 3px #0002; }
.ball-red b { background: radial-gradient(circle at 50% 49%, #fff 0 36%, #e7dede 38%, #b39898 40%, transparent 43%), radial-gradient(circle at 33% 18%, #fff0f0, #ec4c4f 36%, #c40917 67%, #6d0711 85%); }
.ball-green b { background: radial-gradient(circle at 50% 49%, #fff 0 36%, #e0e7e0 38%, #8caa98 40%, transparent 43%), radial-gradient(circle at 33% 18%, #f0fff3, #55c879 36%, #098642 67%, #075032 85%); }
.ball:not([data-number]):not(.ball-sealed) b { background: var(--paper); box-shadow: none; border-color: var(--line); }
.ball-sealed b { background: var(--soft); border: 1px solid var(--line); color: var(--accent); font-size: min(30cqw,24px); box-shadow: none; }
.ball small { color: var(--ink); font-weight: 400; font-size: 14px; }
.ball:nth-child(7)::before { right: calc(100% + 6px); height: min(100cqw,66px); }
.draw-info { min-height: 36px; padding: 6px 10px; border-top: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 400; gap: 5px; }
.draw-info button { flex-shrink: 0; padding: 3px 13px; border: 1px solid var(--line); border-radius: 2px; color: var(--heading-ink); background: var(--accent); }
.draw-status { padding-inline: 10px; }
.backup-domains { margin: 7px 0; padding: 8px 12px; border: var(--frame) solid var(--line); border-radius: 0; color: var(--ink); background: var(--paper); }
.backup-domains h2 { margin: 0 0 7px; color: var(--accent); font: 400 21px/1.35 "Fortune Brush", KaiTi, serif; }
.backup-rows { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.backup-row { display: flex; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
.backup-row span { display: grid; align-items: center; padding: 4px 6px; color: var(--heading-ink); background: var(--accent); font-size: 12px; flex: 0 0 68px; }
.backup-row a { flex: 1; padding: 5px; min-width: 0; overflow-wrap: anywhere; color: #123f84; }
.backup-rows > .empty-panel { grid-column: 1/-1; }
.access-help { display: block; margin-top: 8px; font-size: 13px; color: #123f84; }
.app-download { display: flex; align-items: center; gap: 20px; padding: 12px 22px; margin: 7px 0; border: var(--frame) solid var(--line); background: var(--soft); color: var(--ink); }
.app-emblem { display: grid; place-items: center; flex: 0 0 85px; height: 85px; border: 1px solid var(--line); border-radius: 14px; background: var(--accent) url("../images/masthead.png") left center / auto 100%; color: var(--title-ink); font: 400 56px/1 "Fortune Brush", KaiTi, serif; }
.app-download-copy { flex: 1; min-width: 0; text-align: center; }
.app-download h2 { font-family: "Fortune Brush", KaiTi, serif; font-weight: 400; font-size: 25px; color: var(--accent); }
.app-download p { margin: 3px 0; font-size: 13px; }
.app-download button { display: inline-flex; align-items: center; gap: 8px; justify-content: center; margin: 4px 0 1px; padding: 6px 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--accent); color: var(--heading-ink); box-shadow: none; font-size: 17px; cursor: not-allowed; }
.app-download button svg { width: 18px; height: 18px; }
.app-download small { display: block; font-size: 11px; color: var(--ink); }
.banner { margin: 6px 0; }
.home-content-item, .image-swiper, .panel, .number-panel { margin-top: 7px; border: var(--frame) solid var(--line); border-radius: 0; background: var(--paper); overflow: hidden; }
.home-content-item h2, .panel-head, .number-panel h2, .image-swiper > h2, .image-swiper .panel-head { float: none; padding: 5px 10px; min-height: 28px; line-height: 1.4; font-size: 18px; font-weight: 700; text-align: center; background: var(--accent); color: var(--heading-ink); border-bottom: 1px solid var(--line); }
.content-html { padding: 2px 8px; background: var(--paper); color: var(--ink); font-family: "Fortune Serif", SimSun, serif; font-size: 19px; line-height: 1.55; }
.content-html table { background: transparent; }
.content-html td, .content-html th { border-color: var(--line); }
.content-html p { padding-block: 2px; }
.prediction-hit, .prediction-result-strong { background: var(--soft); color: #ba130a; font-weight: 700; }
.swiper-tabs { border-bottom: 1px solid var(--line); background: var(--soft); }
.swiper-tabs button { min-width: 0; flex: 1 0 auto; padding: 6px 8px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font-size: 14px; }
.swiper-tabs button[aria-selected="true"] { color: var(--heading-ink); background: var(--accent); }
.swiper-frame { background: var(--paper); }
.swiper-arrow { background: var(--accent); opacity: .85; }
.doc-list, .gallery-directory { gap: 0; }
.doc-item, .gallery-directory > a { min-height: 32px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px; background: var(--paper); color: var(--ink); font-size: 15px; }
.recommendation-list a { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 12px; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.recommendation-list a:last-child { border-bottom: 0; }
.recommendation-list svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--accent); }
.number-attributes-page { margin-top: 7px; }
.number-panel h2 { text-align: left; font-size: 17px; padding: 3px 10px; }
.number-panel h2 small { margin-left: 10px; font-size: 11px; font-weight: 400; }
.zodiac-grid { display: grid; grid-template-columns: 1fr 1fr; }
.attribute-row { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; padding: 4px 8px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 13px; }
.attribute-row > div { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; min-width: 0; }
.attribute-row strong { flex: 0 0 35px; min-width: 0; font-weight: 400; }
.attribute-number { display: inline-block; min-width: 16px; font-variant-numeric: tabular-nums; }
.wave-red { color: #b90000; }.wave-blue { color: #064abe; }.wave-green { color: #087634; }
.home-footnote { color: var(--ink); font-size: 11px; padding: 10px 4px; text-align: center; }
.bottom-nav { left: 50%; transform: translateX(-50%); max-width: var(--page-width); height: calc(64px + env(safe-area-inset-bottom)); border: 1px solid var(--line); color: var(--nav-ink); background: var(--accent); }
.bottom-nav a { color: var(--heading-ink); font-size: 13px; gap: 4px; }
.bottom-nav svg { width: 22px; height: 22px; fill: currentColor; }
.bottom-nav a[aria-current="page"] { color: var(--nav-ink); background: color-mix(in srgb, var(--paper) 12%, transparent); }
.page-heading { border-bottom: 1px solid var(--line); background: var(--accent); color: var(--heading-ink); }
.page-heading::before { display: none; }
.page-back { position: absolute; left: 12px; top: 4px; font-size: 28px; }
.gallery-page > section { margin: 8px 0; }.gallery-page h2 { color: var(--accent); }
.article-page, .document-page { background: var(--paper); }
.empty-panel { color: var(--ink); background: var(--paper); padding: 16px 8px; }
.back-top { right: max(12px,calc((100vw - 720px)/2 + 8px)); color: var(--heading-ink); background: var(--accent); border: 1px solid var(--line); }
.history-filters, .history-card, .logs-page, .history-pagination { border-color: var(--line); }
.history-filters button, .load-more, .history-pagination a { color: var(--accent); border-color: var(--line); }
.about-content { font-size: 15px; padding: 16px; }
.about-content h2 { font-size: 20px; margin-top: 18px; color: var(--accent); }
@media (max-width: 515px) {
  body { font-size: 14px; }.fortune-brand { min-height: 84px; }
  .calendar-strip { font-size: 11px; padding: 3px; }
  .shortcut-grid { padding: 0; gap: 0; }.shortcut-grid a { padding: 6px 1px; font-size: 12px; min-height: 29px; }
  .red-strip { min-height: 28px; }.notice-bar { font-size: 11px; height: 28px; padding-inline: 6px; }
  .draw-tabs button { font-size: 13px; min-height: 32px; }
  .draw-title { font-size: 12px; padding: 8px 5px 4px; min-height: 35px; }
  [data-field="countdown"] { font-size: 15px; }
  .draw-numbers { gap: 4px; padding: 10px 6px; }
  .ball small { font-size: 11px; }.ball:nth-child(7)::before { right: calc(100% + 2px); }
  .draw-info { font-size: 10px; padding: 5px; }.draw-info button { padding-inline: 8px; }
  .backup-domains { padding: 7px 5px; }.backup-domains h2 { font-size: 18px; }
  .backup-row { font-size: 12px; }.backup-row span { flex-basis: 28px; font-size: 10px; padding: 3px; line-height: 1.1; }
  .app-download { gap: 10px; padding: 10px; }.app-emblem { flex-basis: 58px; height: 58px; font-size: 38px; }
  .app-download h2 { font-size: 20px; }.app-download p { font-size: 11px; }.app-download button { font-size: 14px; padding: 4px 12px; }
  .home-content-item h2, .panel-head { font-size: 15px; }.content-html { font-size: 17px; padding-inline: 3px; }
  .doc-item, .gallery-directory > a { font-size: 12px; min-height: 29px; }
  .attribute-row { font-size: 11px; gap: 5px; padding: 3px 5px; }.attribute-row strong { flex-basis: 24px; }
  .attribute-row > div { column-gap: 5px; }.number-panel h2 { font-size: 14px; }
  .recommendation-list a { font-size: 12px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .notice-bar { height: auto; min-height: 30px; padding-block: 5px; }
}

.bottom-nav { background: var(--paper); }.bottom-nav a { color: var(--ink); }.bottom-nav a[aria-current="page"] { color: var(--accent); }.home-content-item h2, .panel-head, .number-panel h2 { color: var(--accent); background: var(--soft); }
/* Approved xuan-paper world: quiet paper grain and geometric seal corners. */
.app-shell { background-image: linear-gradient(#f3ede0d9,#f3ede0d9),url("../images/masthead.png"); background-size: auto,1600px auto; background-position: center; }
.calendar-strip, .shortcut-grid, .shortcut-grid a, .draw-section, .content-html, .doc-item, .gallery-directory > a, .attribute-row, .empty-panel { background-color: #f3ede0d9; }
.calendar-strip { padding-inline: 30px; background-image: url("../images/seal-corner.svg"),url("../images/seal-corner.svg"); background-position: 5px center,calc(100% - 5px) center; background-size: 20px; background-repeat: no-repeat; }
.red-strip { background-color: #9b5831; background-image: linear-gradient(#9b5831d4,#9b5831d4),url("../images/masthead.png"); background-size: cover; padding-inline: 28px; }
.backup-domains, .app-download, .panel, .number-panel, .home-content-item { background-image: linear-gradient(#f3ede0e8,#f3ede0e8),url("../images/masthead.png"); background-position: center; background-size: auto,1400px auto; }
.backup-domains h2, .panel-head, .number-panel h2, .home-content-item h2 { background-color: transparent; background-image: url("../images/seal-corner.svg"),url("../images/seal-corner.svg"); background-position: 3px center,calc(100% - 3px) center; background-size: 21px; background-repeat: no-repeat; padding-inline: 30px; color: #87442d; }
.panel-head { text-align: left; }
.app-download { background-image: linear-gradient(90deg,#f3ede0e8 30%,#f3ede0ed 70%,#f3ede06b),url("../images/masthead.png"); background-size: auto,cover; background-position: center; }
.bottom-nav { background-image: linear-gradient(#f3ede0d4,#f3ede0d4),url("../images/masthead.png"); background-size: auto,1200px auto; background-position: center; }
@media (max-width: 515px) {
  .backup-domains h2, .panel-head, .number-panel h2, .home-content-item h2 { padding-inline: 23px; background-size: 16px; }
  .calendar-strip { background-size: 16px; }
}