:root {
  --void: #080b12;
  --night: #0d111b;
  --panel: #121722;
  --panel-2: #161c28;
  --line: rgba(207, 181, 119, .16);
  --line-soft: rgba(255, 255, 255, .07);
  --gold: #cbb57b;
  --gold-bright: #ead7a4;
  --text: #ececf0;
  --muted: #8f96a5;
  --red: #b84e55;
  --blue: #5079a8;
  --green: #4c8a72;
}

/* PHP 一体版扩展：沿用原前端视觉，仅补充锁定、付费与公告组件 */
.card-lock{position:absolute;left:18px;top:16px;color:var(--gold);font-size:11px;opacity:.9}.empty-state{padding:54px 24px;text-align:center;color:var(--muted);border:1px solid var(--line);background:var(--panel)}.unlock-card,.payment-card{max-width:760px;margin:0 auto 28px;padding:48px 34px;text-align:center;border:1px solid rgba(201,167,93,.28);background:linear-gradient(145deg,rgba(18,24,35,.98),rgba(9,13,21,.98));box-shadow:0 24px 80px rgba(0,0,0,.28)}.unlock-symbol{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border:1px solid var(--gold);color:var(--gold);transform:rotate(-4deg);font-size:20px}.unlock-card h2,.payment-card h1{margin:10px 0 12px;font-size:30px}.unlock-card>p,.payment-card>p{color:var(--muted);line-height:1.8}.unlock-form{display:flex;gap:10px;max-width:430px;margin:18px auto}.unlock-form input{flex:1;min-width:0;border:1px solid var(--line);background:#080c14;color:var(--text);padding:14px 16px}.gold-action,.unlock-form button{border:0;background:var(--gold);color:#14100a;padding:14px 20px;font-weight:700;cursor:pointer}.gold-action{display:inline-block;margin:8px}.unlock-error{max-width:430px;margin:14px auto;padding:11px;color:#ffb5aa;background:rgba(135,48,48,.2);border:1px solid rgba(224,94,76,.22)}.payment-price{font-size:46px;color:var(--gold);margin:24px}.voucher-box{display:grid;gap:8px;max-width:430px;margin:20px auto;padding:22px;border:1px dashed var(--gold)}.voucher-box small{color:var(--muted)}.voucher-box strong{font-size:28px;color:var(--gold);letter-spacing:.16em}.announcement-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,5,9,.86);backdrop-filter:blur(8px)}.announcement-card{position:relative;width:min(520px,100%);padding:48px 36px;text-align:center;border:1px solid rgba(201,167,93,.45);background:linear-gradient(145deg,#151b26,#090d15);box-shadow:0 30px 100px #000}.announcement-mark{display:grid;place-items:center;width:55px;height:55px;margin:auto;border:1px solid var(--gold);color:var(--gold);font-size:22px;transform:rotate(-4deg)}.announcement-card h2{font-size:28px;margin:14px}.announcement-content{color:#b7bfca;line-height:1.9;margin:20px 0}.announcement-close{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--muted);font-size:26px;cursor:pointer}.back-payment{display:block;margin:32px 0;color:var(--muted)}
@media(max-width:720px){.unlock-card,.payment-card{padding:32px 18px}.unlock-form{flex-direction:column}.announcement-card{padding:40px 20px}.card-lock{left:14px;top:13px}}
.unlock-success{max-width:430px;margin:14px auto;padding:11px;color:#9fe1bd;background:rgba(40,120,82,.18);border:1px solid rgba(83,184,132,.25)}.restore-box{max-width:470px;margin:20px auto 0;padding-top:15px;border-top:1px solid var(--line);color:var(--muted)}.restore-box summary{cursor:pointer;color:var(--gold-bright)}.restore-box small{font-size:.72rem}.empty-tag{color:transparent!important;opacity:.45}.recovery-code{margin:18px auto;padding:14px;border:1px dashed var(--gold);color:var(--gold-bright);font-size:1.7rem;font-weight:700;letter-spacing:.16em}.payment-note,.payment-instructions{color:var(--muted);line-height:1.8}.payment-wait h2{margin:18px 0 8px}.payment-wait small{display:block;margin-top:18px;color:var(--muted)}.loading-ring{display:block;width:42px;height:42px;margin:15px auto;border:2px solid rgba(203,181,123,.2);border-top-color:var(--gold);border-radius:50%;animation:xj-spin 1s linear infinite}@keyframes xj-spin{to{transform:rotate(360deg)}}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--void); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.5; }
body::before { content:""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 5%, rgba(88,92,130,.10), transparent 27%), radial-gradient(circle at 85% 32%, rgba(176,145,79,.05), transparent 24%); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header { position: sticky; top: 0; z-index: 30; color: white; background: rgba(8,11,18,.9); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(16px); }
.header-inner { max-width: 1160px; height: 68px; margin: auto; padding: 0 20px; display: flex; align-items: center; gap: 44px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 1.08rem; font-weight: 650; letter-spacing: .04em; white-space: nowrap; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(203,181,123,.5); transform: rotate(45deg); font-family: serif; font-size: 1.05rem; }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-mark { line-height: 35px; text-align: center; }
.brand em { color: #6f7684; font-size: .6rem; font-style: normal; font-weight: 500; letter-spacing: .17em; }
.desktop-nav { display: flex; align-self: stretch; }
.desktop-nav a { position: relative; display: flex; align-items: center; padding: 0 20px; color: #7f8694; text-decoration: none; font-size: .88rem; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--gold-bright); }
.desktop-nav a.active::after { content:""; position: absolute; bottom: 0; left: 50%; width: 22px; height: 1px; background: var(--gold); transform: translateX(-50%); }
.desktop-nav { margin-left: auto; }
main { position: relative; max-width: 1160px; min-height: calc(100vh - 160px); margin: auto; padding: 26px 20px; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 0; line-height: 1.25; font-weight: 560; }
h1 { font-size: 1.62rem; letter-spacing: .08em; }
h2 { font-size: 1.16rem; letter-spacing: .04em; }
.home-main { padding-top: 32px; }
.home-intro { position: relative; min-height: 180px; margin-bottom: 16px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; background: var(--night); border: 1px solid var(--line); }
.home-intro::before, .home-intro::after { content:""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(203,181,123,.08); transform: rotate(45deg); }
.home-intro::before { top: -113px; left: 46%; }.home-intro::after { right: -105px; bottom: -118px; }
.intro-copy { position: relative; z-index: 1; padding-left: 29px; border-left: 1px solid rgba(203,181,123,.38); }
.mystic-symbol { position: absolute; left: -7px; top: -6px; color: var(--gold); font-size: .68rem; }
.intro-copy h1 { margin-top: 9px; font-family: Georgia, "Songti SC", serif; font-size: 2rem; font-weight: 400; }
.intro-copy > p:last-child { margin: 12px 0 0; color: #7f8694; font-size: .82rem; letter-spacing: .04em; }
.draw-shortcut { position: relative; z-index: 1; min-width: 230px; padding: 13px 15px; display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; color: var(--text); text-decoration: none; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
.draw-shortcut:hover { border-color: var(--line); background: rgba(203,181,123,.025); }
.draw-shortcut span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(203,181,123,.3); border-radius: 50%; font-size: .78rem; }
.draw-shortcut strong { font-size: .78rem; font-weight: 520; }.draw-shortcut i { color: var(--gold); font-style: normal; }
.material-section { padding: 27px; background: var(--night); border: 1px solid var(--line-soft); }
.material-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; }
.material-heading > span { color: #686f7c; font-size: .7rem; letter-spacing: .08em; }
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.material-card { position: relative; min-height: 160px; padding: 23px; display: grid; grid-template-columns: 45px 1fr 14px; align-items: center; gap: 16px; color: var(--text); overflow: hidden; text-align: left; text-decoration: none; background: var(--panel); border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .2s ease; }
.material-card::after { content:""; position: absolute; right: -38px; bottom: -38px; width: 74px; height: 74px; border: 1px solid rgba(203,181,123,.07); transform: rotate(45deg); }
.material-card:hover { background: var(--panel-2); }
.material-card.highlight { background: rgba(203,181,123,.09); box-shadow: inset 0 0 0 1px rgba(203,181,123,.3); }
.streak-badge { position: absolute; top: 12px; right: 13px; padding: 3px 7px; color: #c9b67f; background: rgba(203,181,123,.07); border: 1px solid rgba(203,181,123,.16); font-size: .62rem; letter-spacing: .03em; }
.material-seal { width: 45px; height: 45px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(203,181,123,.3); border-radius: 50%; font-family: "Songti SC", Georgia, serif; font-size: 1.1rem; }
.material-body strong, .material-body small, .material-body em { display: block; }
.material-body strong { color: #eeeef0; font-family: "Songti SC", Georgia, serif; font-size: 1rem; font-weight: 500; letter-spacing: .04em; }
.material-body small { margin-top: 5px; color: #707784; font-size: .7rem; }
.material-body em { margin-top: 14px; color: #968660; font-size: .64rem; font-style: normal; }
.card-arrow { color: #545b68; font-size: .9rem; font-style: normal; }
.card-one .material-seal { border-color: rgba(186,104,108,.38); color: #d8a1a4; }.card-two .material-seal { border-color: rgba(203,181,123,.38); }.card-three .material-seal { border-color: rgba(93,146,120,.42); color: #91c0a8; }.card-four .material-seal { border-color: rgba(86,125,167,.45); color: #92b4d8; }.card-five .material-seal { border-color: rgba(128,103,166,.45); color: #b0a0ce; }.card-six .material-seal { border-color: rgba(181,121,77,.45); color: #d0a076; }
.notice { min-height: 42px; margin-bottom: 14px; padding: 9px 14px; display: flex; align-items: center; gap: 12px; color: #78808e; background: var(--night); border: 1px solid var(--line-soft); font-size: .78rem; }
.notice span { padding: 2px 7px; color: var(--gold); border: 1px solid var(--line); font-size: .65rem; }
.notice p { margin: 0; }
.draw-page-grid { display: grid; gap: 14px; }
.card { background: var(--night); border: 1px solid var(--line-soft); overflow: hidden; }
.latest-card { padding: 26px 28px 22px; }
.card-head, .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.draw-time { text-align: right; }.draw-time span { display: block; color: #666e7b; font-size: .7rem; }.draw-time strong { color: #b9bdc5; font-size: .84rem; }
.number-row { padding: 28px 0 22px; display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2vw, 19px); }
.ball-wrap { display: grid; justify-items: center; gap: 7px; }.ball-wrap small { color: #6f7683; font-size: .72rem; }
.ball { width: 50px; height: 50px; display: grid; place-items: center; color: white; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; font-size: 1rem; font-weight: 600; box-shadow: inset 0 -7px 10px rgba(0,0,0,.2); }
.red { background: var(--red); }.blue { background: var(--blue); }.green { background: var(--green); }
.special .ball { outline: 1px solid var(--gold); outline-offset: 4px; }.special small { color: var(--gold); }.plus { align-self: center; margin-top: 2px; color: #59606d; font-size: 1.4rem; }
.draw-summary { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 16px; color: #757d8a; background: #0b0f17; border: 1px solid var(--line-soft); font-size: .75rem; }
.draw-summary span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }.draw-summary strong { color: #c7cad0; }.dot { width: 6px; height: 6px; border-radius: 50%; }.red-dot { background: var(--red); }.blue-dot { background: var(--blue); }.green-dot { background: var(--green); }.divider { width: 1px; height: 15px; background: var(--line-soft); }
.section-head { padding: 21px 24px 15px; }.segmented { padding: 3px; display: flex; background: #0b0f17; border: 1px solid var(--line-soft); }
.segmented button { padding: 6px 10px; color: #666e7a; background: transparent; border: 0; font-size: .7rem; cursor: pointer; }.segmented button.selected { color: var(--gold-bright); background: rgba(203,181,123,.07); }
.draw-list { border-top: 1px solid var(--line-soft); }.draw-row { min-height: 78px; padding: 14px 24px; display: grid; grid-template-columns: 105px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }.draw-row.hidden { display: none; }
.issue strong, .issue span { display: block; }.issue strong { color: #c8cbd1; font-size: .82rem; }.issue span { margin-top: 4px; color: #5e6673; font-size: .68rem; }
.mini-balls { display: flex; align-items: center; gap: 7px; }.mini-balls b { width: 29px; height: 29px; display: grid; place-items: center; color: white; border-radius: 50%; font-size: .65rem; font-weight: 600; }.mini-balls i { color: #555c69; font-style: normal; }.mini-balls .special-mini { outline: 1px solid var(--gold); outline-offset: 2px; }
.row-meta { text-align: right; }.row-meta span { display: block; color: #656d79; font-size: .68rem; }.row-meta strong { color: var(--gold); font-size: .78rem; }
.more-btn { width: 100%; padding: 13px; color: #8a826f; background: #0b0f17; border: 0; cursor: pointer; font-size: .75rem; }
.detail-main { max-width: 980px; padding-top: 23px; }
.back-link { display: inline-flex; align-items: center; margin-bottom: 14px; color: #7d8490; text-decoration: none; font-size: .78rem; }
.back-link:hover { color: var(--gold-bright); }
.detail-hero { position: relative; min-height: 138px; padding: 25px 28px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 20px; overflow: hidden; background: var(--night); border: 1px solid var(--line); }
.detail-hero::after { content:""; position: absolute; right: 18%; top: -105px; width: 180px; height: 180px; border: 1px solid rgba(203,181,123,.06); transform: rotate(45deg); }
.detail-seal { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(203,181,123,.42); border-radius: 50%; font-family: "Songti SC", Georgia, serif; font-size: 1.45rem; }
.detail-title { position: relative; z-index: 1; }.detail-title h1 { font-family: "Songti SC", Georgia, serif; font-size: 1.65rem; font-weight: 480; }.detail-title > p:last-child { margin: 7px 0 0; color: #727986; font-size: .76rem; }
.issue-badge { position: relative; z-index: 1; min-width: 144px; padding-left: 20px; border-left: 1px solid var(--line-soft); text-align: right; }.issue-badge span, .issue-badge small { display: block; color: #666d7a; font-size: .66rem; }.issue-badge strong { display: block; margin: 3px 0; color: var(--gold-bright); font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.issue-switch { margin: 12px 0; padding: 4px; display: flex; gap: 4px; background: var(--night); border: 1px solid var(--line-soft); }
.issue-switch button { flex: 1; height: 38px; color: #6e7581; background: transparent; border: 0; cursor: pointer; font-size: .74rem; }.issue-switch button:hover { color: #b8b3a8; }.issue-switch button.active { color: var(--gold-bright); background: rgba(203,181,123,.08); box-shadow: inset 0 0 0 1px rgba(203,181,123,.13); }
.oracle-card { background: var(--night); border: 1px solid var(--line-soft); }
.oracle-head { padding: 20px 24px 15px; display: flex; align-items: flex-end; justify-content: space-between; }.oracle-head > span { color: #756b53; font-size: .68rem; }
.reading-list { border-top: 1px solid var(--line-soft); }
.reading-row { min-height: 136px; padding: 22px 24px; display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto; align-items: center; gap: 15px 20px; border-bottom: 1px solid var(--line-soft); }.reading-row:last-child { border-bottom: 0; }.reading-row.feature-row { background: linear-gradient(90deg, rgba(203,181,123,.045), transparent 38%); }
.reading-label { grid-row: 1 / 3; display: flex; align-items: center; gap: 11px; }.reading-label span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(203,181,123,.25); border-radius: 50%; font-family: serif; font-size: .7rem; }.reading-label strong { color: #aaa59a; font-family: "Songti SC", Georgia, serif; font-size: .95rem; font-weight: 500; }
.zodiac-list, .number-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zodiac-tag { min-width: 38px; height: 38px; padding: 0 11px; display: grid; place-items: center; color: #d7d8dc; background: #171d28; border: 1px solid rgba(255,255,255,.08); font-family: "Songti SC", Georgia, serif; font-size: .95rem; }.zodiac-tag.primary { color: var(--gold-bright); border-color: rgba(203,181,123,.32); }
.number-list { padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.07); }.number-tag { min-width: 34px; height: 28px; padding: 0 8px; display: grid; place-items: center; color: #999fac; background: #0b0f17; border: 1px solid var(--line-soft); font-family: Georgia, serif; font-size: .73rem; }
.special-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.special-card { position: relative; min-height: 145px; margin: 0; padding: 22px 24px; overflow: hidden; background: var(--night); border: 1px solid var(--line-soft); }.special-card::after { content:""; position: absolute; right: -28px; bottom: -42px; width: 94px; height: 94px; border: 1px solid rgba(203,181,123,.07); border-radius: 50%; }.special-card > p { margin: 0; color: #747b87; font-size: .72rem; }.special-card > div { margin: 17px 0 8px; display: flex; align-items: center; gap: 13px; }.special-symbol { width: 31px; height: 31px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(203,181,123,.26); border-radius: 50%; font-size: .66rem; }.special-card strong { color: var(--gold-bright); font-family: "Songti SC", Georgia, serif; font-size: 1.55rem; font-weight: 480; }.special-card small { color: #555d69; font-size: .66rem; }
.archive-note { margin-top: 12px; padding: 13px 17px; display: flex; align-items: center; gap: 10px; color: #555d69; background: rgba(18,23,34,.55); border: 1px solid var(--line-soft); font-size: .68rem; }.archive-note span { color: #796f57; }.archive-note p { margin: 0; }
.mobile-nav { display: none; }.mobile-nav button { color: inherit; background: transparent; border: 0; }
.search-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-start; justify-content: center; padding-top: 18vh; }.search-modal.open { display: flex; }.backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.search-panel { position: relative; width: min(440px, calc(100% - 32px)); padding: 23px; color: var(--text); background: #10151f; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.42); }.search-title { display: flex; align-items: center; justify-content: space-between; }.search-title button { width: 34px; height: 34px; color: #757c88; background: transparent; border: 1px solid var(--line-soft); cursor: pointer; font-size: 1.15rem; }.search-panel label { display: block; margin: 20px 0 7px; color: #767d89; font-size: .75rem; }.search-field { display: flex; gap: 8px; }.search-field input { min-width: 0; flex: 1; height: 44px; padding: 0 12px; color: var(--text); background: #090d14; border: 1px solid var(--line-soft); outline: none; }.search-field input:focus { border-color: rgba(203,181,123,.4); }.search-field button { padding: 0 20px; color: #17130c; background: var(--gold); border: 0; cursor: pointer; }.search-panel > p { margin: 10px 0 0; color: #5f6672; font-size: .7rem; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 60; padding: 10px 17px; color: var(--gold-bright); background: #171c25; border: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: .2s ease; font-size: .78rem; box-shadow: 0 12px 34px rgba(0,0,0,.35); }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .material-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  body { padding-bottom: 70px; }
  .header-inner { height: 56px; padding: 0 14px; }.brand { font-size: .96rem; }.brand-mark { width: 30px; height: 30px; line-height: 30px; font-size: .9rem; }.brand em { display: none; }
  main { padding: 12px 10px; }.home-main { padding-top: 12px; }
  .home-intro { min-height: 126px; margin-bottom: 9px; padding: 23px 19px; }.intro-copy { padding-left: 17px; }.intro-copy h1 { font-size: 1.55rem; }.intro-copy > p:last-child { font-size: .7rem; }
  .draw-shortcut { min-width: 42px; width: 42px; padding: 0; grid-template-columns: 1fr; border: 0; }.draw-shortcut span { width: 42px; height: 42px; }.draw-shortcut strong, .draw-shortcut i { display: none; }
  .material-section { padding: 16px 9px 9px; }.material-heading { margin: 0 5px 13px; }.material-grid { grid-template-columns: repeat(2, 1fr); }
  .material-card { min-height: 150px; padding: 27px 11px 13px; grid-template-columns: 38px 1fr; gap: 9px; }.streak-badge { top: 8px; right: 8px; padding: 2px 6px; font-size: .56rem; }.material-seal { width: 38px; height: 38px; font-size: .95rem; }.material-body strong { font-size: .88rem; }.material-body small { font-size: .62rem; }.material-body em { margin-top: 10px; font-size: .59rem; }.card-arrow { display: none; }
  .latest-card { padding: 19px 13px 14px; }.number-row { padding: 23px 0 18px; gap: clamp(4px,2vw,9px); }.ball { width: clamp(34px,10vw,42px); height: clamp(34px,10vw,42px); font-size: .82rem; }.ball-wrap small { font-size: .64rem; }.plus { margin: 0 -2px; font-size: 1.1rem; }.draw-summary { justify-content: flex-start; gap: 10px; overflow-x: auto; scrollbar-width: none; }.draw-summary::-webkit-scrollbar { display: none; }.draw-summary .divider { display: none; }
  .section-head { padding: 17px 13px 12px; }.segmented button { padding: 5px 7px; font-size: .64rem; }.draw-row { min-height: 103px; padding: 12px 13px; grid-template-columns: 1fr auto; gap: 9px; }.mini-balls { grid-column: 1 / -1; grid-row: 2; gap: clamp(5px,2vw,8px); }.mini-balls b { width: clamp(27px,8.3vw,31px); height: clamp(27px,8.3vw,31px); }
  .detail-main { padding-top: 11px; }.back-link { margin: 2px 4px 10px; }.detail-hero { min-height: 118px; padding: 18px 15px; grid-template-columns: 46px 1fr; gap: 13px; }.detail-seal { width: 46px; height: 46px; font-size: 1.15rem; }.detail-title h1 { font-size: 1.25rem; }.issue-badge { grid-column: 1 / -1; padding: 11px 0 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); border-left: 0; text-align: left; }.issue-badge span { display: none; }.issue-badge strong { margin: 0; font-size: .84rem; }
  .issue-switch { margin: 9px 0; }.oracle-head { padding: 17px 14px 12px; }.reading-row { min-height: 0; padding: 17px 14px; grid-template-columns: 1fr; grid-template-rows: auto; gap: 13px; }.reading-label { grid-row: auto; }.zodiac-tag { height: 35px; min-width: 35px; padding-inline: 9px; }.number-list { padding-top: 10px; gap: 6px; }.number-tag { min-width: 31px; height: 27px; padding-inline: 6px; }.special-grid { gap: 9px; }.special-card { min-height: 138px; padding: 18px 15px; }.archive-note { line-height: 1.7; }
  .mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 35; height: calc(62px + env(safe-area-inset-bottom)); padding: 6px 5% env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(2,1fr); background: rgba(9,12,19,.97); border-top: 1px solid var(--line-soft); backdrop-filter: blur(14px); }
  .mobile-nav a, .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #626976; text-decoration: none; font-size: .62rem; cursor: pointer; }.mobile-nav a span, .mobile-nav button span { font-size: 1.05rem; line-height: 1.1; }.mobile-nav a.active { color: var(--gold-bright); }
  .toast { bottom: 82px; white-space: nowrap; }
}
@media (max-width: 370px) { .material-card { padding-inline: 8px; gap: 7px; }.ball { width: 32px; height: 32px; font-size: .72rem; } }
.gold-action { text-decoration: none; }