:root { --red:#e60000; --green:#008c22; --blue:#0757c9; --gold:#f4bf00; --purple:#741cc0; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f1e9; color:#111; font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif; }
.lottery-page { width:min(100%, 956px); margin:0 auto; background:#fff; overflow:hidden; }
.banner,.footer-banner { display:block; width:100%; height:auto; }
.panel,.result-panel { margin:3px 4px; border:2px solid var(--gold); border-radius:12px; overflow:hidden; background:#fff; }
.result-panel { border-color:#e20f1a; }
.result-heading { min-height:36px; display:flex; align-items:center; gap:14px; padding:2px 12px; font-size:25px; white-space:nowrap; }.title-period { display:flex; align-items:baseline; gap:10px; }.current-period { font-weight:900; }
.result-heading strong { font-size:29px; }.result-heading b { color:#e40000; font-size:29px; }.countdown { color:#004c7b; background:#91dff6; border:1px solid #20a5d1; border-radius:10px; padding:0 19px; font-size:25px; font-weight:700; }.result-heading .history-button { margin-left:auto; background:transparent; color:#df0000; font-size:24px; padding:1px 4px; }.result-heading button { border:0; background:#f39219; color:white; padding:7px 9px; font-size:18px; font-weight:bold; border-radius:4px; cursor:pointer; }
.balls { display:flex; align-items:stretch; gap:7px; padding:0 10px; }.ball { flex:1; min-width:0; height:72px; color:#fff; text-align:center; border-radius:6px; font-weight:800; box-shadow:inset 0 -3px rgba(0,0,0,.16); }.ball .num { display:block; font-size:32px; line-height:43px; }.ball .zodiac { display:block; margin:0 5px; background:#fff; color:#1f1f1f; font-size:21px; line-height:25px; border-radius:3px; }.red { background:#ee0808; }.green { background:#0ba032; }.blue { background:#1065d8; }.plus { flex:0 0 26px; align-self:center; font-size:47px; font-weight:900; }.draw-time { color:#111; text-align:center; margin:2px; font-size:22px; font-weight:bold; }.draw-time .next-period { margin-left:0; }.draw-time .next-number { color:#e40000; font-size:inherit; }.draw-time .draw-date { margin-left:22px; }.draw-refresh { margin-left:12px; border:0; border-radius:5px; padding:3px 10px; background:#f39219; color:#fff; font-size:16px; font-weight:900; cursor:pointer; }
h2,.section-title { margin:0; text-align:center; color:#fff; font-weight:900; letter-spacing:2px; }.panel h2 { background:linear-gradient(#11b848,#008a26); font-size:25px; line-height:27px; }.purple { background:linear-gradient(90deg,#f1b7ef,#fcdaff,#f0b7f2); color:#151515; font-size:23px; line-height:30px; }.leisure-panel .section-title { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; text-align:left; }.leisure-heading-main { grid-column:1; grid-row:1; padding-left:10px; white-space:nowrap; }.leisure-secret { grid-column:1 / 3; grid-row:2; margin-left:0; padding-left:10px; white-space:normal; }.image-link { float:right; margin:2px 8px; border:0; border-radius:4px; background:#ffd200; color:#552000; font-size:18px; font-weight:bold; cursor:pointer; }.leisure-panel .section-title .image-link { grid-column:2; grid-row:1; float:none; margin:2px 8px; white-space:nowrap; }
.leisure-panel,.leisure-lines { font-weight:800; }.leisure-lines { padding:1px 22px; font-size:20px; background:#f9eafa; }.leisure-lines p { margin:1px 0; }.leisure-lines strong { color:#098b2b; }.leisure-zodiac { margin-left:18px; }.text-red { color:#e50000; }.text-green { color:#078c24; }.text-blue { color:#0951c3; }.notice { margin:0; padding:4px 18px; color:#ffe900; background:#f21a09; font-size:18px; font-weight:bold; line-height:21px; }
.independent-panel h2 { position:relative; padding:0 62px; }.section-expand { position:absolute; top:50%; right:6px; transform:translateY(-50%); border:1px solid #fff; border-radius:4px; padding:1px 9px; background:#f39800; color:#fff; font-size:15px; font-weight:900; cursor:pointer; }.independent-rows { padding:1px 4px; }.independent-row { display:grid; grid-template-columns:16% 24% 25% 18% 17%; border-bottom:1px solid #bbb; min-height:27px; text-align:center; align-items:center; font-size:20px; font-weight:bold; }.independent-row:last-child { border-bottom:0; }.period-label { color:#222; }.independent-num { color:#e50000; }.arrows { color:#e60000; }.outcome { color:#111; }.result-value { font-weight:900; }.consecutive { color:#e00000; }
.color-panel h2 { position:relative; padding:0 62px; color:#ffec00; background:linear-gradient(90deg,#ff1000,#ed0000); }.color-columns { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:4px 15px; }.color-columns .color-entry { min-width:0; padding:4px 8px; border-bottom:1px solid #e0ae00; }.color-columns .color-entry:nth-child(even) { border-left:1px solid #e0ae00; }.color-entry + .color-entry { margin-top:4px; padding-top:4px; border-top:1px solid #e0ae00; }.color-columns .color-entry + .color-entry { margin-top:0; border-top:0; }.color-head { font-size:22px; line-height:25px; color:#111; text-align:center; font-weight:900; }.color-line { font-size:21px; font-weight:bold; line-height:21px; text-align:center; }.color-line span { letter-spacing:1px; }.color-line.red-text { color:#f30000; }.color-line.green-text { color:#079321; }.color-line.blue-text { color:#0951c3; }
.domestic-panel h2,.kill-panel h2,.zodiac-panel h2 { position:relative; padding:0 62px; }.domestic-rows { display:grid; grid-template-columns:1fr 1fr; padding:3px 7px; }.domestic-column { min-width:0; }.domestic-row { display:flex; justify-content:space-between; gap:5px; border:1px solid #aaa; padding:2px 7px; font-size:18px; font-weight:bold; white-space:nowrap; }.domestic-result { color:#111; }.kill-panel h2 { background:linear-gradient(90deg,#ff1000,#e60000); color:#fff000; }.kill-note { margin:0; color:#e10000; text-align:center; font-size:19px; font-weight:bold; }.kill-rows { display:grid; grid-template-columns:repeat(2,1fr); column-gap:36px; padding:2px 12px; }.kill-row { display:flex; justify-content:space-between; gap:6px; color:#008d22; font-size:20px; font-weight:bold; }.kill-row .kill-head { color:#e60000; }.kill-result { color:#111; white-space:nowrap; }
.zodiac-panel h2 { background:linear-gradient(90deg,#8718c3,#4d05ac); }.zodiac-grid { display:grid; grid-template-columns:repeat(4,1fr); }.zodiac-item { text-align:center; border-right:1px solid #743bc2; border-bottom:1px solid #743bc2; padding:1px; font-size:19px; font-weight:bold; }.zodiac-item:nth-child(4n) { border-right:0; }.zodiac-item b { color:#222; margin-right:3px; }.zodiac-item span { color:#102ea7; }
.featured-panel h2 { background:linear-gradient(#ffc323,#f29000); color:#a40000; font-size:22px; }.featured-row { border-bottom:1px solid #f1ba43; color:#092ea3; padding:1px 12px; font-size:21px; font-weight:bold; cursor:pointer; }.featured-row:hover { background:#fff5c9; }.featured-row .label { color:#e20000; margin-right:18px; }.featured-images { display:none; padding:0; background:#fff7dc; }.featured-images.open { display:block; }.featured-image-item { width:100%; padding-top:6px; border-bottom:1px solid #e8b63c; text-align:center; }.featured-save-trigger { margin:0 auto 6px; border:0; border-radius:5px; padding:5px 18px; background:#ef8500; color:#fff; font-size:17px; font-weight:900; cursor:pointer; }.featured-images img { display:block; width:100%; max-width:none; height:auto; margin:0; }.featured-collapse-wrap { padding:8px; text-align:center; }.featured-collapse { border:0; border-radius:5px; padding:6px 28px; background:#777; color:#fff; font-size:17px; font-weight:900; cursor:pointer; }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.78); }.modal[hidden] { display:none; }.modal img { max-width:min(95vw,900px); max-height:90vh; object-fit:contain; background:#fff; }.modal-close { position:fixed; top:12px; right:20px; border:0; border-radius:50%; width:40px; height:40px; background:#fff; color:#222; font-size:32px; line-height:34px; cursor:pointer; }.history-content { width:min(94vw,880px); max-height:88vh; overflow:auto; padding:15px; border:3px solid #e80000; border-radius:10px; background:#fff8ea; }.history-title { margin:0 0 8px; color:#d90000; text-align:center; font-size:25px; }.history-row { padding:8px 4px; border-top:1px solid #e6b333; }.history-row:first-of-type { border-top:0; }.history-period { display:block; margin-bottom:5px; color:#242424; font-size:19px; font-weight:800; }.history-balls { display:flex; align-items:center; gap:4px; }.history-ball { min-width:58px; padding:3px 5px; border-radius:4px; color:#fff; text-align:center; font-weight:bold; }.history-ball .history-number { display:block; font-size:21px; }.history-ball .history-zodiac { display:block; background:#fff; color:#111; font-size:15px; border-radius:2px; }.history-plus { font-size:27px; font-weight:bold; }
.save-image-dialog { width:min(95vw,900px); max-height:94vh; overflow:auto; padding:10px; border-radius:10px; background:#fff; }.save-image-dialog img { display:block; width:100%; max-width:100%; max-height:76vh; margin:0 auto; }.save-image-actions { display:flex; justify-content:center; gap:18px; padding-top:10px; }.save-image-actions button { min-width:120px; border:0; border-radius:6px; padding:9px 16px; color:#fff; font-size:17px; font-weight:900; cursor:pointer; }.save-close-button { background:#777; }.save-download-button { background:#ed8100; }.save-download-button:disabled { opacity:.6; cursor:wait; }
.modal-page-locked { position:fixed; width:100%; overflow:hidden; }.independent-dialog { position:relative; width:min(96vw,920px); max-height:92vh; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:10px; border:3px solid #00a530; border-radius:12px; background:#fff; }.independent-dialog h2 { margin:0; padding:4px 42px; border-radius:6px; background:linear-gradient(#11b848,#008a26); color:#fff; text-align:center; font-size:27px; }.independent-modal-row { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:18px; row-gap:5px; min-height:60px; align-items:center; padding:7px 12px; border-bottom:1px solid #bbb; text-align:center; font-size:22px; font-weight:bold; white-space:nowrap; }.independent-modal-row:last-child { border-bottom:0; }.independent-modal-row .modal-period { grid-column:1; grid-row:1; color:#222; text-align:left; }.independent-modal-row .modal-name { grid-column:2; grid-row:1; color:#222; text-align:center; }.independent-modal-row .modal-outcome { grid-column:3; grid-row:1; color:#111; text-align:right; }.independent-modal-row .independent-num { grid-column:1; grid-row:2; text-align:left; }.independent-modal-row .arrows { grid-column:2; grid-row:2; text-align:center; }.independent-modal-row .consecutive { grid-column:3; grid-row:2; text-align:right; }.section-modal-x { position:absolute; z-index:1; top:13px; right:16px; width:31px; height:31px; border:0; border-radius:50%; background:#fff; color:#008a26; font-size:25px; font-weight:900; line-height:28px; cursor:pointer; }.section-modal-close { display:block; min-width:130px; margin:10px auto 0; border:0; border-radius:6px; padding:8px 20px; background:#777; color:#fff; font-size:18px; font-weight:900; cursor:pointer; }
.color-dialog { border-color:#ef1800; }.color-dialog h2 { background:linear-gradient(90deg,#ff1000,#ed0000); color:#ffec00; }.color-dialog .section-modal-x { color:#e60000; }.color-modal-rows { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }.color-modal-rows .color-entry { padding:7px 4px; border-bottom:1px solid #e0ae00; }.color-modal-rows .color-entry + .color-entry { margin:0; }.color-modal-rows .color-head { font-size:23px; line-height:27px; }.color-modal-rows .color-line { font-size:22px; line-height:24px; }
.domestic-modal-rows,.kill-modal-rows { padding:5px 2px; }.domestic-modal-rows .domestic-row,.kill-modal-rows .kill-row { min-height:38px; align-items:center; font-size:21px; }.domestic-dialog { border-color:#00a530; }.kill-dialog { border-color:#ed1800; }.kill-dialog h2 { background:linear-gradient(90deg,#ff1000,#e60000); color:#fff000; }.kill-dialog .section-modal-x { color:#e60000; }.zodiac-dialog { border-color:#741cc0; }.zodiac-dialog h2 { background:linear-gradient(90deg,#8718c3,#4d05ac); }.zodiac-dialog .section-modal-x { color:#741cc0; }.zodiac-modal-rows { display:grid; grid-template-columns:repeat(3,1fr); }.zodiac-modal-rows .zodiac-item { padding:7px 4px; font-size:21px; }
@media (max-width:600px) { .panel,.result-panel { margin:2px 1px; border-radius:7px; border-width:1px; }.result-heading { gap:5px; padding:1px 5px; min-height:28px; font-size:15px; }.result-heading strong { font-size:20px; }.result-heading b { font-size:19px; }.countdown { padding:0 5px; font-size:15px; }.result-heading .history-button { font-size:17px; }.result-heading button { font-size:12px; padding:4px; }.balls { gap:3px; padding:0 3px; }.ball { height:53px; border-radius:3px; }.ball .num { font-size:23px; line-height:31px; }.ball .zodiac { font-size:15px; line-height:18px; margin:0 2px; }.plus { flex-basis:14px; font-size:29px; }.refresh-btn { flex-basis:19px; font-size:13px; line-height:17px; }.draw-time { font-size:15px; }.draw-time .draw-date { margin-left:6px; } .panel h2 { font-size:18px; line-height:22px; }.purple { font-size:15px; line-height:21px; letter-spacing:0; }.image-link { font-size:12px; margin:2px; }.leisure-lines { padding:1px 6px; font-size:15px; }.leisure-zodiac { display:block; margin-left:0; }.notice { padding:3px 6px; font-size:13px; line-height:15px; }.independent-row { grid-template-columns:13% 22% 20% 21% 24%; min-height:21px; font-size:12px; white-space:nowrap; }.color-columns { grid-template-columns:1fr; padding:2px 6px; gap:0; }.color-columns .color-entry:nth-child(even) { border-left:0; }.color-columns .color-entry { margin:0; padding:7px 2px; border-bottom:1px solid #e0ae00; }.color-head { font-size:20px; line-height:23px; white-space:nowrap; }.color-line { font-size:19px; line-height:21px; white-space:nowrap; }.domestic-rows { grid-template-columns:1fr; padding:1px; }.domestic-row { font-size:13px; padding:3px 5px; overflow:visible; }.kill-note { font-size:14px; }.kill-rows { grid-template-columns:1fr; padding:2px 5px; }.kill-row { font-size:14px; padding:2px 1px; }.zodiac-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.zodiac-item { min-width:0; padding:2px 1px; font-size:10px; line-height:13px; overflow-wrap:anywhere; word-break:break-all; }.zodiac-item b { display:block; margin:0; }.zodiac-item span { display:block; }.featured-panel h2 { font-size:15px; letter-spacing:0; }.featured-row { padding:2px 5px; font-size:15px; }.featured-row .label { margin-right:6px; }.history-content { padding:10px 5px; }.history-title { font-size:20px; }.history-period { font-size:16px; }.history-balls { gap:2px; }.history-ball { min-width:0; flex:1; padding:2px; }.history-ball .history-number { font-size:16px; }.history-ball .history-zodiac { font-size:12px; }.history-plus { font-size:20px; } }
@media (max-width:600px) {
  .domestic-row,.kill-row { display:grid; grid-template-columns:max-content max-content; justify-content:center; align-items:center; column-gap:12px; }
  .domestic-row,.kill-row { font-size:12px; }
}
@media (max-width:380px) {
  .domestic-row,.kill-row { column-gap:6px; font-size:11px; }
}
@media (max-width:600px) {
  .result-heading { font-size:17px; }
  .result-heading strong { font-size:22px; }
  .result-heading b { font-size:21px; }
  .countdown { font-size:17px; }
  .result-heading .history-button { font-size:19px; }
  .result-heading button { font-size:14px; }
  .ball .num { font-size:25px; }
  .ball .zodiac { font-size:17px; }
  .plus { font-size:31px; }
  .refresh-btn { font-size:15px; }
  .draw-time { font-size:17px; }
  .panel h2 { font-size:20px; line-height:24px; }
  .purple { font-size:17px; line-height:23px; }
  .image-link { font-size:14px; }
  .leisure-lines { font-size:17px; }
  .notice { font-size:15px; line-height:17px; }
  .independent-row { font-size:14px; }
  .color-head { font-size:14px; }
  .color-line { font-size:17px; line-height:18px; }
  .domestic-row,.kill-row { font-size:14px; }
  .kill-note { font-size:16px; }
  .zodiac-item { font-size:12px; line-height:15px; }
  .featured-panel h2,.featured-row { font-size:17px; }
  .history-title { font-size:22px; }
  .history-period { font-size:18px; }
  .history-ball .history-number { font-size:18px; }
  .history-ball .history-zodiac { font-size:14px; }
}
@media (max-width:380px) {
  .domestic-row,.kill-row { column-gap:6px; font-size:13px; }
}
@media (max-width:600px) {
  .domestic-row,.kill-row { font-size:16px; }
  .zodiac-item { font-size:14px; line-height:17px; }
}
@media (max-width:380px) {
  .domestic-row,.kill-row { font-size:15px; }
  .zodiac-item { font-size:13px; line-height:16px; }
}
@media (max-width:600px) {
  .result-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:3px 7px; white-space:normal; }
  .result-heading .title-period { grid-column:1; grid-row:1; align-self:center; gap:5px; white-space:nowrap; }
  .result-heading strong { white-space:nowrap; font-size:19px; }
  .result-heading .history-button { grid-column:2; grid-row:1; margin-left:0; align-self:center; font-size:15px; white-space:nowrap; }
  .result-heading .current-period { white-space:nowrap; font-size:17px; font-weight:900; }
  .draw-refresh { margin-left:6px; padding:2px 7px; font-size:14px; }
  .leisure-panel .section-title { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; text-align:left; }
  .leisure-heading-main { grid-column:1; grid-row:1; padding-left:5px; white-space:nowrap; }
  .leisure-secret { grid-column:1 / 3; grid-row:2; margin-left:0; padding-left:5px; white-space:normal; }
  .leisure-panel .image-link { grid-column:2; grid-row:1; float:none; white-space:nowrap; }
}
@media (max-width:600px) {
  .independent-row { grid-template-columns:13fr 22fr 20fr 21fr 24fr; column-gap:3px; min-height:27px; padding:0 3px; font-size:clamp(13px,3.5vw,15px); line-height:20px; }
  .color-head { font-size:clamp(13px,3.6vw,15px); line-height:19px; white-space:nowrap; }
  .color-line { font-size:18px; line-height:20px; }
  .domestic-row,.kill-row { font-size:17px; line-height:21px; }
  .kill-note { font-size:17px; line-height:21px; }
  .zodiac-item { font-size:15px; line-height:18px; }
}
@media (max-width:380px) {
  .domestic-row,.kill-row { font-size:17px; }
  .zodiac-item { font-size:15px; line-height:18px; }
}
@media (max-width:600px) {
  .independent-panel h2,.color-panel h2 { padding:0 51px; }
  .domestic-panel h2,.kill-panel h2,.zodiac-panel h2 { padding-left:4px; padding-right:51px; letter-spacing:0; white-space:nowrap; }
  .section-expand { right:3px; padding:1px 6px; font-size:13px; }
  .independent-dialog { width:96vw; padding:6px; }
  .independent-dialog h2 { padding:5px 36px 5px 4px; font-size:21px; }
  .independent-modal-row { column-gap:8px; row-gap:5px; min-height:0; padding:8px; font-size:17px; line-height:21px; }
  .section-modal-x { top:10px; right:10px; }
  .color-modal-rows { display:block; }
  .color-modal-rows .color-entry { padding:8px 2px; }
  .color-columns .color-head,.color-modal-rows .color-head { font-size:19px; line-height:21px; font-weight:900; white-space:nowrap; }
  .color-columns .color-line,.color-modal-rows .color-line { font-size:19px; line-height:21px; font-weight:900; white-space:nowrap; }
  .kill-row { font-size:18px; line-height:23px; }
  .kill-note { font-size:18px; line-height:22px; }
  .domestic-modal-rows .domestic-row,.kill-modal-rows .kill-row { display:grid; grid-template-columns:minmax(0,1fr) auto; justify-content:stretch; column-gap:10px; min-height:42px; padding:7px 5px; font-size:18px; line-height:22px; }
  .domestic-modal-rows .domestic-row { font-size:20px; line-height:24px; }
  .zodiac-modal-rows { grid-template-columns:1fr; }
  .zodiac-modal-rows .zodiac-item { display:flex; justify-content:center; gap:8px; padding:8px 4px; border-right:0; font-size:20px; line-height:24px; }
  .zodiac-modal-rows .zodiac-item b,.zodiac-modal-rows .zodiac-item span { display:inline; }
}
@media (max-width:380px) {
  .independent-panel h2 { padding-left:4px; padding-right:50px; font-size:18px; letter-spacing:0; white-space:nowrap; }
  .domestic-panel h2,.kill-panel h2,.zodiac-panel h2 { padding-left:4px; padding-right:50px; font-size:17px; letter-spacing:0; white-space:nowrap; }
}