:root{font:16px/1.55 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#162239;background:#e9eef7;--blue:#3479e6;--muted:#64738a;--paper:#f5f6f8;--border:#e1e6ee;--shell:680px}
*{box-sizing:border-box}
body{margin:0}
a{color:var(--blue);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button,.primary{border:1px solid var(--border);border-radius:10px;background:#fff;padding:8px 15px;cursor:pointer}
.primary{display:inline-flex;justify-content:center;align-items:center;background:var(--blue);border-color:var(--blue);color:white;font-weight:650}
.small{padding:5px 13px;font-size:.88rem;border-radius:24px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #214eae;outline-offset:3px}
.shell{max-width:var(--shell);min-height:100dvh;background:var(--paper);margin:auto;padding-bottom:calc(80px + env(safe-area-inset-bottom));box-shadow:0 0 32px #243e6a15}
.bar{height:58px;background:white;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--border)}
.back{position:absolute;left:15px;font-size:33px;line-height:1;padding:5px 9px}
.hero,.profile-hero{background:var(--blue);color:white;padding:15px 15px 20px}
.hero h1{font-size:2rem;margin:0 0 12px;letter-spacing:.08em}
.hero img{display:block;width:100%;aspect-ratio:3.3;object-fit:cover;border:1px solid #ffffffaa;border-radius:15px}
.controls{padding:12px 14px;border-bottom:1px solid var(--border)}
.pills,.tabs,.search,.actions,.balls,.between{display:flex;align-items:center;gap:10px}
.pills a{border:1px solid var(--border);padding:4px 17px;border-radius:99px;background:white;color:#31415a}
.pills a.selected{background:var(--blue);border-color:var(--blue);color:white;font-weight:700}
.tabs{gap:22px;flex-wrap:wrap}
.tabs a{color:#47566b;padding:12px 4px;position:relative;white-space:nowrap}
.tabs .selected{color:var(--blue);font-weight:700}
.tabs .selected::after{content:"";height:3px;background:var(--blue);border-radius:4px;position:absolute;bottom:5px;left:25%;right:25%}
.search{margin:9px 0 0}
.search form{display:flex;gap:5px;align-items:center;flex:1;min-width:0;padding:5px;border:1px solid var(--border);border-radius:30px;background:white}
.search input{min-width:0;flex:1;border:0;border-radius:24px;padding:6px 10px}
.filter{white-space:nowrap;color:var(--blue);border-radius:99px}
dialog{border:0;border-radius:18px 18px 0 0;background:white;color:inherit;padding:16px;width:min(100%,var(--shell));max-width:none;margin:auto auto 0}
dialog::backdrop{background:#0b172766}
.dialog-head,.between{justify-content:space-between}
.dialog-head{display:flex;align-items:center;gap:8px}
fieldset{border:0;padding:12px 0 6px;margin:10px 0 0}
legend{color:var(--muted);font-size:.92rem}
.chip{display:inline-flex;cursor:pointer;margin:0 8px 8px 0}
.chip input{position:absolute;opacity:0}
.chip span{border:1px solid var(--border);background:#f3f5f9;padding:5px 14px;border-radius:8px}
.chip input:checked + span,.chip input:focus-visible + span{border-color:var(--blue);color:var(--blue);background:#eaf2ff}
.stack{padding:14px;display:grid;gap:12px}
.stack>h3{margin:4px 2px 0}
.card,.draw{min-width:0;padding:17px 18px;border-radius:15px;background:white;border:1px solid #e8ebf0;overflow-wrap:anywhere}
.listing{display:grid;gap:5px;color:inherit}
.listing strong{font-size:1.04rem}
.listing:hover{border-color:#a6c6fa}
h2{font-size:1.22rem;margin:8px 0}
h3{font-size:1.02rem;margin:0 0 9px}
.meta{font-size:.88rem;color:var(--muted)}
.tag,.hit{font-size:.78rem;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block}
.tag{background:#1d4c90;color:white;margin-right:4px}
.tag.gold{background:#d78b22}
.hit{background:#fff1ec;color:#b7352e}
.price{color:#ba332b;font-weight:750;white-space:nowrap}
.chevron{font-size:1.4rem;color:#8e9bb0;margin-left:auto}
.draw{background:linear-gradient(125deg,#4f91f2,#2e65c1);color:white;border:0}
.draw-balls{margin:12px 0;flex-wrap:wrap}
.ball{width:2.3rem;height:2.3rem;display:inline-grid;place-items:center;border-radius:50%;background:#ecf0f5;color:#21324a;font:700 1.14rem/1 system-ui}
.draw .ball{background:white;color:#c23a30}
.ball.hit-ball{background:#d74941;color:white}
.sum{border:1px solid #ffffff9e;border-radius:99px;padding:3px 9px;font-size:.85rem}
.draw select,.draw input{max-width:100%;background:#fff;color:#182842;padding:5px 9px;border:1px solid white;border-radius:8px}
.empty{min-height:230px;text-align:center;display:grid;place-content:center;color:#697990}
.empty span{font-size:3.8rem;line-height:1;color:#9eabbd}
.empty.compact{min-height:65px}
.lock{margin-top:14px;border:1px dashed #bdd1ef;background:#f5f9ff;border-radius:12px;padding:15px;text-align:center}
.actions{justify-content:center;flex-wrap:wrap;margin-top:10px}
.actions.left{justify-content:flex-start}
.pick-grid{display:flex;gap:10px 16px;flex-wrap:wrap;justify-content:center;margin:0 0 16px}
.pick-grid .balls{gap:4px}
.notice,.alert{padding:10px 12px;border-radius:8px;background:#e7f1ff;color:#194a88;margin:0}
.alert{background:#fff0ef;color:#a62822}
.fields{display:grid;gap:13px}
.fields label{display:grid;gap:5px}
.fields .check{display:flex;align-items:center;flex-wrap:wrap}
.fields input:not([type=checkbox],[type=radio]),.fields textarea,.fields select,.actions input{width:100%;padding:9px 11px;border:1px solid #cdd6e3;border-radius:9px;background:white}
.fields textarea{min-height:82px;resize:vertical}
.fields .reason{padding:6px 0;border-bottom:1px solid var(--border)}
.fields .actions{margin-top:0}
.center,.auth-intro{text-align:center}
.auth-intro{padding:20px 6px 10px}
.auth-intro p{color:var(--muted)}
.brand-icon,.avatar{background:var(--blue);color:white;font-weight:800;display:inline-grid;place-items:center}
.brand-icon{width:64px;height:64px;border-radius:16px;font-size:1.8rem}
.profile-hero{min-height:250px;display:flex;gap:14px;align-items:center}
.profile-hero a{margin-left:auto;color:white;white-space:nowrap}
.avatar{width:78px;height:78px;border-radius:50%;font-size:2rem;background:#fff;color:var(--blue);flex:none}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:14px 0}
.tiles b{display:block;font-size:1.32rem}
.tiles a{color:#354765}
.tiles a b{color:var(--blue)}
.link-list{display:grid}
.link-list a{padding:9px 0;border-bottom:1px solid var(--border)}
.link-list a:last-child{border-bottom:0}
.danger{color:#a62822}
.wallet-summary{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem}
.wallet-summary strong{display:block}
.actions input{width:min(100%,260px)}
.bottom{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--shell));background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(3,1fr);padding:7px 0 calc(6px + env(safe-area-inset-bottom));text-align:center}
.bottom a{display:grid;justify-items:center;font-size:.78rem;color:#65728a}
.bottom a.selected{color:var(--blue);font-weight:750}
.bottom svg,.floating svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.floating{position:fixed;z-index:4;right:max(14px,calc((100vw - var(--shell))/2 + 14px));bottom:calc(94px + env(safe-area-inset-bottom));display:grid;gap:8px}
.floating a{display:grid;place-content:center;text-align:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:white;box-shadow:0 3px 11px #18283d33;font-size:.7rem;line-height:1.1;font-weight:700}
.floating .light{background:white;color:var(--blue);font-size:1.25rem}
.purchase-bar {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: white;
  border-top: 1px solid var(--border);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
}
.purchase-bar button { width: 100%; }
.shell:has(.floating) .listing{padding-right:57px}
.copy-status:empty{display:none}
@media(max-width:400px){.card,.draw{padding:13px}.stack{padding:10px}.tabs{gap:13px}.between{gap:6px}.profile-hero{min-height:205px}.hero h1{font-size:1.65rem}}


/* Shared sky-blue and white responsive layout */
:root { --blue: #087bb3; --paper: #f5faff; --border: #dbeaf3; --shell: 1120px; background: #fff; }
.shell { box-shadow: none; }
.hero, .profile-hero { background: white; color: #143552; border-bottom: 1px solid var(--border); }
.hero { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.hero h1 { margin: 0; }
.hero span { color: #47667b; }
.profile-hero a { color: var(--blue); }
.avatar { background: #e2f4ff; }
.draw { background: #e3f4ff; color: #143552; }
.sum { border-color: #8fbed8; }
.price { color: #056b9c; }
.card, .draw { border-radius: 12px; }
.auth-dialog { width: min(460px, calc(100% - 24px)); max-height: 92dvh; margin: auto; border-radius: 14px; overflow: auto; }
.auth-dialog .auth-form { border: 0; padding: 0; }
.auth-page { width: min(100%, 510px); margin-inline: auto; }
.home-entry-notices {
  position: fixed;
  inset: auto max(12px, calc((100vw - var(--shell)) / 2 + 14px)) calc(68px + env(safe-area-inset-bottom)) auto;
  z-index: 6;
  margin: 0;
  max-height: 38dvh;
  border: 1px solid var(--border);
  box-shadow: 0 7px 28px #18396029;
}
.home-entry-notices h2 { font-size: 1.1rem; margin: 0; }
.home-entry-notices h3 { font-size: .9rem; margin: 8px 0 2px; }
.home-entry-notices p { font-size: .85rem; margin: 0 0 8px; }
.auth-form small { color: #355b73; }
.auth-form [data-password-toggle] { justify-self: start; }
.admin-content { min-width: 0; display: grid; align-content: start; gap: 12px; }
.admin-sidebar { display: none; }
.admin-menu-toggle { position: absolute; inset-inline-start: 12px; min-height: 44px; padding: 5px 12px; color: var(--blue); }
.admin-drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, 86vw); height: 100dvh; max-height: none;
  overflow: auto; overscroll-behavior: contain; border-radius: 0 16px 16px 0;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
}
body:has(.admin-drawer[open]) { overflow: hidden; }
.admin-nav { display: grid; gap: 4px; align-items: start; }
.admin-drawer .admin-nav { margin-top: 14px; }
.admin-nav a { color: #354c62; padding: 11px 12px; border-radius: 8px; }
.admin-nav a[aria-current="page"] { color: #075f8a; background: #e3f4ff; font-weight: 700; }
.admin-nav form { margin-top: 8px; }
.admin-nav button { width: 100%; min-height: 44px; }
.fields label { min-width: 0; }
.recharge-layout { display: grid; gap: 12px; }
.admin-page { background: var(--paper); }
.admin-page .shell { max-width: none; border: 0; padding-bottom: 24px; }
.admin-page .bar { position: sticky; top: 0; z-index: 5; }
.admin-layout { max-width: 1600px; margin: auto; }
.admin-content > h2 { margin: 0; }
.admin-record-grid, .overview, .overview-metrics, .overview-columns { display: grid; gap: 12px; }
.metric { display: grid; gap: 3px; color: #355b73; }
.metric strong { color: #143552; font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.overview-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.record-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; }
.record-details dt { color: var(--muted); }
.record-details dd { margin: 0; overflow-wrap: anywhere; }
.admin-content .card { min-width: 0; overflow-wrap: anywhere; }
.admin-content .card h3 { margin-top: 0; }
.result-form { margin-top: 12px; }
.result-form button { justify-self: start; }
.result-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.home-carousel { position: relative; margin: 12px 14px 0; overflow: hidden; border-radius: 14px; background: #dcefff; }
.home-carousel img { width: 100%; aspect-ratio: 3.5; object-fit: cover; vertical-align: middle; }
.carousel-controls { display: flex; gap: 5px; position: absolute; inset: auto 8px 6px auto; }
.carousel-controls button { padding: 0; width: 25px; height: 25px; border: 0; background: transparent; }
.carousel-controls button::after { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: #ffffff89; }
.carousel-controls button[aria-pressed="true"]::after { background: white; box-shadow: 0 0 0 2px #16507a; }
.home-tabs .catalog-grid { touch-action: pan-y pinch-zoom; }
.result-picks { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-block: 8px; }
.result-picks .balls { gap: 4px; }
.result-picks .ball { background: #ebedef; color: #243244; }
.result-picks .result-hit { background: #d83736; color: white; }
.pick-comma { color: var(--muted); align-self: flex-end; }
.profile-hero > div { min-width: 0; overflow-wrap: anywhere; }
.account-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.account-tiles a { display: grid; gap: 6px; justify-items: center; text-align: center; align-content: start; }
.account-tiles b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e4f4fc; color: var(--blue); font-size: 1.2rem; }
.banner-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.banner-slots img { width: 100%; aspect-ratio: 3.5; object-fit: cover; border-radius: 8px; }
.banner-slots input { max-width: 100%; }
.admin-search { grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); align-items: end; }
@media (max-width: 390px) {
  .account-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
}
.disclaimer-scroll { overflow: hidden; color: #ad292b; background: #fff3f3; padding: 8px 12px; border-radius: 8px; }
.disclaimer-scroll span, .notice-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .home-carousel img:not([hidden]) { animation: fade-in 340ms ease-out both; }
  .disclaimer-scroll:not(:hover):not(:focus-within) span {
    display: inline-block; width: max-content; white-space: pre;
    padding-inline-start: 100%; animation: disclaimer-marquee 25s linear infinite;
  }
  @keyframes disclaimer-marquee { to { transform: translateX(-100%); } }
}
@media (min-width: 760px) {
  .shell { border-inline: 1px solid var(--border); }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-grid > :not(.listing) { grid-column: 1 / -1; }
  .admin-layout { grid-template-columns: clamp(190px, 17vw, 240px) minmax(0, 1fr); gap: 24px; padding: 24px; align-items: start; }
  .admin-sidebar {
    display: block; position: sticky; top: 82px; max-height: calc(100dvh - 106px);
    overflow: auto; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  }
  .admin-menu-toggle { display: none; }
  .recharge-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .overview-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .result-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-note { grid-column: 1 / -1; }
  .record-search { grid-template-columns: minmax(0, 260px) auto 1fr; align-items: end; }
  .record-search a { align-self: center; }
}
@media (min-width: 1024px) {
  .admin-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 110ms ease-in both fade-away; }
  ::view-transition-new(root) { animation: 200ms ease-out both fade-in; }
  @keyframes fade-away { to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes details-in { from { opacity: 0; transform: translateY(-5px); } }
  details[open] > :not(summary) { animation: details-in 180ms ease-out both; }
  button, a, summary, input, select, textarea {
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease,
      box-shadow 160ms ease, opacity 160ms ease, scale 150ms ease;
  }
  button:active, .primary:active, .floating a:active { scale: .97; }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px #087bb31a; }
  @media (hover: hover) {
    button:hover { box-shadow: 0 2px 8px #18396024; }
    .admin-nav a:hover { background: #edf8ff; }
    a.card:hover { box-shadow: 0 4px 14px #18396018; }
  }
  dialog {
    --dialog-offset: 0 20px;
    opacity: 0; translate: 0 20px;
    transition: opacity 180ms ease, translate 250ms cubic-bezier(.22,1,.36,1),
      overlay 250ms allow-discrete, display 250ms allow-discrete;
  }
  dialog[open] { opacity: 1; translate: 0 0; animation: dialog-enter 250ms cubic-bezier(.22,1,.36,1); }
  @keyframes dialog-enter { from { opacity: 0; translate: var(--dialog-offset); } }
  dialog.auth-dialog { --dialog-offset: 0 12px; translate: 0 12px; }
  dialog.admin-drawer { --dialog-offset: -100% 0; translate: -100% 0; opacity: 1; }
  dialog[open].admin-drawer, dialog[open].auth-dialog { translate: 0 0; }
  dialog::backdrop { background: #0b172700; transition: background-color 230ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete; }
  dialog[open]::backdrop { background: #0b172766; }
  @starting-style { dialog[open]::backdrop { background: #0b172700; } }
}