/* ================================================================
   TOTO DESIGN OK — PROFESSIONAL HOME DASHBOARD
   Homepage-only visual layer
================================================================ */

.pro-dashboard {
    --dash-bg: #050813;
    --dash-panel: rgba(12, 18, 34, .86);
    --dash-panel-2: rgba(16, 24, 44, .94);
    --dash-panel-soft: rgba(255,255,255,.035);
    --dash-line: rgba(151, 167, 199, .12);
    --dash-line-strong: rgba(126, 231, 255, .23);
    --dash-text: #f7f9ff;
    --dash-copy: #a8b5cb;
    --dash-muted: #71809a;
    --dash-cyan: #58e8ff;
    --dash-blue: #5d8cff;
    --dash-violet: #a77bff;
    --dash-green: #48df86;
    --dash-amber: #f4c15d;
    --dash-rose: #ff7b9b;
    --dash-radius: 24px;
    color: var(--dash-text);
}

.pro-dashboard a {
    text-decoration: none;
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(148,163,184,.09);
    background:
        radial-gradient(760px 420px at 78% 45%, rgba(83, 118, 255, .12), transparent 66%),
        radial-gradient(620px 420px at 96% 18%, rgba(157, 91, 255, .10), transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 78%);
}

.dashboard-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -160px;
    top: -180px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 28%, rgba(88,232,255,.055) 28.4% 28.8%, transparent 29.2% 43%, rgba(167,123,255,.05) 43.4% 43.8%, transparent 44.2%),
        radial-gradient(circle, rgba(70, 97, 242, .10), transparent 67%);
    pointer-events: none;
}

.dashboard-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 58px;
    align-items: center;
    min-height: 580px;
    padding-top: 72px;
    padding-bottom: 78px;
}

.dashboard-hero-copy {
    max-width: 760px;
}

.dashboard-kicker,
.dashboard-overline,
.console-eyebrow {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(88,232,255,.15);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(88,232,255,.065), rgba(167,123,255,.045));
    color: #b7f5ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dash-green);
    box-shadow: 0 0 0 5px rgba(72,223,134,.08), 0 0 18px rgba(72,223,134,.46);
    animation: dashPulse 2s ease-in-out infinite;
}

@keyframes dashPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .7; transform: scale(.88); }
}

.dashboard-hero h1 {
    max-width: 840px;
    margin: 24px 0 20px;
    color: var(--dash-text);
    font-size: clamp(46px, 6vw, 76px);
    line-height: .98;
    font-weight: 870;
    letter-spacing: -3.5px;
}

.dashboard-hero h1 span {
    display: block;
    margin-top: 9px;
    color: transparent;
    background: linear-gradient(90deg, #80f0ff 0%, #88a9ff 48%, #c498ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.dashboard-lead {
    max-width: 680px;
    margin: 0;
    color: #9aa8c0;
    font-size: 15px;
    line-height: 1.8;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 31px;
}

.dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 47px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.dashboard-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #14bad8, #537cf8 54%, #8e5bec);
    box-shadow: 0 14px 34px rgba(66, 103, 238, .25), inset 0 1px 0 rgba(255,255,255,.22);
}

.dashboard-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(66, 103, 238, .32), inset 0 1px 0 rgba(255,255,255,.24);
}

.dashboard-btn.ghost {
    border-color: var(--dash-line);
    color: #dce5f5;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.dashboard-btn.ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(88,232,255,.25);
    background: rgba(255,255,255,.055);
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: 34px;
    color: #74829b;
    font-size: 11px;
    font-weight: 650;
}

.hero-trust-row span {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.hero-trust-row span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #47546c;
}

.hero-trust-row b {
    color: #ced8ea;
    font-size: 12px;
}

.dashboard-console {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(158,173,205,.13);
    border-radius: 27px;
    background:
        linear-gradient(145deg, rgba(17, 26, 47, .94), rgba(8, 14, 28, .96));
    box-shadow: 0 34px 90px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.055);
}

.dashboard-console::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(89,140,255,.20), transparent 70%);
    pointer-events: none;
}

.console-head,
.console-foot,
.console-market-row,
.result-market-ident,
.schedule-card-top {
    display: flex;
    align-items: center;
}

.console-head {
    position: relative;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 19px;
    border-bottom: 1px solid rgba(148,163,184,.10);
}

.console-head > div {
    display: grid;
    gap: 6px;
}

.console-eyebrow {
    color: #6f7e99;
    font-size: 8px;
    letter-spacing: 1.25px;
}

.console-head strong {
    color: #f5f8ff;
    font-size: 15px;
    letter-spacing: -.25px;
}

.console-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(72,223,134,.12);
    border-radius: 999px;
    color: #9bf3ba;
    background: rgba(72,223,134,.055);
    font-size: 9px;
    font-weight: 800;
}

.console-online i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dash-green);
    box-shadow: 0 0 14px rgba(72,223,134,.50);
}

.console-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 0 14px;
}

.console-metric {
    padding: 14px;
    border: 1px solid rgba(148,163,184,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.console-metric span,
.console-foot span,
.console-market-name small,
.result-meta-grid span,
.schedule-countdown span,
.seo-fact span {
    color: #6f7e99;
    font-size: 9px;
    font-weight: 720;
    letter-spacing: .25px;
}

.console-metric strong {
    display: block;
    margin-top: 7px;
    color: #eef3ff;
    font-size: 15px;
    letter-spacing: -.35px;
}

.console-market-list {
    display: grid;
    gap: 8px;
}

.console-market-row {
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid rgba(148,163,184,.085);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
}

.console-market-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.market-flag {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.03);
    font-size: 17px;
}

.console-market-name > span:last-child {
    display: grid;
    gap: 3px;
}

.console-market-name b {
    color: #edf3ff;
    font-size: 11px;
    letter-spacing: .45px;
}

.market-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .2px;
}

.market-state.scheduled {
    color: #9ed6ff;
    background: rgba(91,140,255,.09);
    border: 1px solid rgba(91,140,255,.12);
}

.market-state.active {
    color: #9bf3ba;
    background: rgba(72,223,134,.08);
    border: 1px solid rgba(72,223,134,.13);
}

.market-state.complete {
    color: #d4c4ff;
    background: rgba(167,123,255,.08);
    border: 1px solid rgba(167,123,255,.13);
}

.console-foot {
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(148,163,184,.09);
}

.console-foot time {
    color: #a8b5cb;
    font-size: 9px;
    font-weight: 700;
    text-align: right;
}

.dashboard-quicknav {
    position: relative;
    z-index: 3;
    border-bottom: 1px solid rgba(148,163,184,.08);
    background: rgba(7, 11, 23, .76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.quicknav-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.quicknav-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 55px;
    border-right: 1px solid rgba(148,163,184,.07);
    color: #8593ac;
    font-size: 10px;
    font-weight: 760;
    transition: color .18s ease, background .18s ease;
}

.quicknav-inner a:first-child {
    border-left: 1px solid rgba(148,163,184,.07);
}

.quicknav-inner a span {
    color: #52617a;
    font-size: 8px;
    font-weight: 900;
}

.quicknav-inner a:hover {
    color: #e7efff;
    background: rgba(255,255,255,.025);
}

.dashboard-section {
    position: relative;
    padding: 72px 0;
}

.dashboard-section + .dashboard-section {
    border-top: 1px solid rgba(148,163,184,.07);
}

.dashboard-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 29px;
}

.dashboard-section-head.compact {
    margin-bottom: 25px;
}

.dashboard-section-head > div {
    max-width: 720px;
}

.dashboard-overline {
    display: inline-block;
    margin-bottom: 10px;
    color: #69dff5;
    font-size: 9px;
    letter-spacing: 1.35px;
}

.dashboard-section-head h2,
.seo-copy-card h2 {
    margin: 0;
    color: #f5f8ff;
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -1.25px;
    font-weight: 840;
}

.dashboard-section-head p {
    margin: 9px 0 0;
    color: #7f8da7;
    font-size: 12px;
    line-height: 1.7;
}

.section-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #8ceeff;
    font-size: 10px;
    font-weight: 800;
}

.section-cta:hover {
    color: #c7b2ff;
}

.premium-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.premium-result-card {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: 21px;
    border: 1px solid rgba(151,167,199,.12);
    border-radius: var(--dash-radius);
    background: linear-gradient(145deg, rgba(16, 25, 46, .94), rgba(8, 14, 28, .95));
    box-shadow: 0 22px 60px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.premium-result-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    opacity: .92;
}

.premium-result-card.hk::before { background: linear-gradient(90deg, #4f87ff, #5ee7ff); }
.premium-result-card.sgp::before { background: linear-gradient(90deg, #2ecf78, #69efbb); }
.premium-result-card.sdy::before { background: linear-gradient(90deg, #ff6d98, #f5b85f); }

.premium-result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(135,200,255,.22);
    box-shadow: 0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

.result-card-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    right: -85px;
    top: -85px;
    border-radius: 50%;
    opacity: .11;
    filter: blur(4px);
    pointer-events: none;
}

.premium-result-card.hk .result-card-glow { background: #4f87ff; }
.premium-result-card.sgp .result-card-glow { background: #36dc8a; }
.premium-result-card.sdy .result-card-glow { background: #ff769b; }

.premium-result-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.result-market-ident {
    gap: 10px;
}

.result-flag {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.result-market-ident > div {
    display: grid;
    gap: 3px;
}

.result-code {
    color: #6f7e98;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.result-market-ident h3 {
    margin: 0;
    color: #f2f6ff;
    font-size: 14px;
    letter-spacing: -.25px;
}

.result-latest-badge {
    padding: 6px 8px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 999px;
    color: #72809a;
    background: rgba(255,255,255,.025);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .85px;
}

.result-digits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 31px 0 24px;
}

.result-digits span {
    display: grid;
    place-items: center;
    aspect-ratio: .82;
    max-height: 78px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.14);
    font-size: clamp(27px, 3.5vw, 42px);
    font-weight: 880;
    line-height: 1;
    letter-spacing: -1.6px;
}

.premium-result-card.hk .result-digits span { text-shadow: 0 0 24px rgba(79,135,255,.22); }
.premium-result-card.sgp .result-digits span { text-shadow: 0 0 24px rgba(54,220,138,.22); }
.premium-result-card.sdy .result-digits span { text-shadow: 0 0 24px rgba(255,118,155,.22); }

.result-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.result-meta-grid > div {
    padding: 11px 12px;
    border: 1px solid rgba(148,163,184,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}

.result-meta-grid strong {
    display: block;
    margin-top: 5px;
    color: #cdd7e8;
    font-size: 10px;
    font-weight: 760;
}

.result-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: #8a98b2;
    font-size: 9px;
    font-weight: 800;
    transition: color .18s ease;
}

.result-card-link:hover { color: #e9efff; }

.result-empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    color: #73819a;
    font-size: 11px;
}

.data-freshness-bar {
    display: grid;
    grid-template-columns: auto minmax(180px, auto) 1fr auto;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid rgba(148,163,184,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}

.freshness-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(72,223,134,.13);
    border-radius: 9px;
    color: #85efab;
    background: rgba(72,223,134,.065);
    font-size: 11px;
    font-weight: 900;
}

.freshness-copy {
    display: grid;
    gap: 3px;
}

.freshness-copy strong {
    color: #d8e1f1;
    font-size: 10px;
}

.freshness-copy span {
    color: #6f7d95;
    font-size: 9px;
}

.freshness-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

.freshness-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #24c7df, #6d82ff, #9a68ef);
}

.data-freshness-bar > b {
    color: #a8b7cf;
    font-size: 9px;
}

.schedule-dashboard {
    background: rgba(255,255,255,.012);
}

.schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: stretch;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.schedule-card {
    position: relative;
    overflow: hidden;
    min-height: 216px;
    padding: 17px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(15,23,42,.84), rgba(9,15,28,.90));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.schedule-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -56px;
    bottom: -64px;
    border-radius: 50%;
    opacity: .08;
}
.schedule-card.hk::after { background: #5d8cff; }
.schedule-card.sgp::after { background: #48df86; }
.schedule-card.sdy::after { background: #ff7b9b; }

.schedule-card-top {
    justify-content: space-between;
    gap: 10px;
}

.schedule-flag {
    font-size: 18px;
}

.schedule-card h3 {
    margin: 21px 0 5px;
    color: #edf3ff;
    font-size: 15px;
    letter-spacing: -.35px;
}

.schedule-card h3 span {
    margin-left: 5px;
    color: #63718a;
    font-size: 8px;
    letter-spacing: .8px;
}

.schedule-time {
    color: #8c9bb5;
    font-size: 10px;
    font-weight: 720;
}

.schedule-countdown {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 26px;
    padding-top: 13px;
    border-top: 1px solid rgba(148,163,184,.08);
}

.schedule-countdown strong {
    color: #cfd8e8;
    font-size: 13px;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}

.schedule-note {
    display: flex;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(88,232,255,.11);
    border-radius: 19px;
    background:
        linear-gradient(145deg, rgba(88,232,255,.035), rgba(167,123,255,.025)),
        rgba(12,18,34,.72);
}

.note-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(88,232,255,.15);
    border-radius: 10px;
    color: #9ff1ff;
    background: rgba(88,232,255,.055);
    font-size: 11px;
    font-weight: 900;
}

.schedule-note strong {
    color: #dce5f5;
    font-size: 11px;
}

.schedule-note p {
    margin: 7px 0 0;
    color: #7d8aa3;
    font-size: 10px;
    line-height: 1.7;
}

.feature-pro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.feature-pro-card {
    position: relative;
    min-height: 245px;
    padding: 21px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 21px;
    color: inherit;
    background: linear-gradient(145deg, rgba(15,23,42,.80), rgba(9,15,28,.84));
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.feature-pro-card:hover {
    transform: translateY(-4px);
    border-color: rgba(88,232,255,.20);
    background: linear-gradient(145deg, rgba(18,28,51,.92), rgba(10,17,32,.90));
}

.feature-index {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #45536a;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 25px;
    border: 1px solid rgba(88,232,255,.12);
    border-radius: 13px;
    color: #8ceeff;
    background: linear-gradient(145deg, rgba(88,232,255,.07), rgba(167,123,255,.04));
    font-size: 18px;
}

.feature-pro-card h3 {
    margin: 0;
    color: #eef3ff;
    font-size: 15px;
    letter-spacing: -.35px;
}

.feature-pro-card p {
    margin: 10px 0 0;
    color: #7e8ba4;
    font-size: 10px;
    line-height: 1.7;
}

.feature-link {
    position: absolute;
    left: 21px;
    bottom: 20px;
    color: #9ca9bf;
    font-size: 9px;
    font-weight: 800;
}

.feature-pro-card:hover .feature-link { color: #8ceeff; }

.seo-dashboard {
    background:
        radial-gradient(520px 260px at 16% 80%, rgba(83,124,248,.045), transparent 70%),
        transparent;
}

.seo-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    gap: 16px;
    align-items: stretch;
}

.seo-copy-card,
.seo-facts-card {
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 22px;
    background: rgba(12,18,34,.70);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.seo-copy-card {
    padding: 26px;
}

.seo-copy-card h2 {
    max-width: 690px;
    margin-top: 2px;
}

.seo-copy-card p {
    max-width: 820px;
    margin: 15px 0 0;
    color: #8795ad;
    font-size: 11px;
    line-height: 1.85;
}

.seo-copy-card p a {
    color: #96edff;
    font-weight: 720;
}

.seo-copy-card p a:hover { color: #cbb7ff; }

.seo-facts-card {
    overflow: hidden;
    padding: 10px;
}

.seo-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 51px;
    padding: 0 11px;
    border-bottom: 1px solid rgba(148,163,184,.075);
}

.seo-fact strong {
    color: #d8e1f1;
    font-size: 11px;
}

.seo-facts-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 11px;
    color: #8ceeff;
    font-size: 9px;
    font-weight: 800;
}

@media (max-width: 1080px) {
    .dashboard-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr);
        gap: 34px;
    }

    .dashboard-hero h1 {
        font-size: clamp(42px, 6vw, 62px);
        letter-spacing: -2.8px;
    }

    .schedule-layout {
        grid-template-columns: 1fr;
    }

    .schedule-note {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .dashboard-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: auto;
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .dashboard-hero-copy {
        max-width: 760px;
    }

    .dashboard-console {
        max-width: 690px;
    }

    .premium-result-grid,
    .schedule-grid,
    .feature-pro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-result-card:last-child,
    .schedule-card:last-child,
    .feature-pro-card:last-child {
        grid-column: 1 / -1;
    }

    .premium-result-card:last-child .result-digits {
        max-width: 430px;
    }

    .seo-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dashboard-hero-grid {
        padding-top: 45px;
        padding-bottom: 48px;
    }

    .dashboard-hero h1 {
        margin-top: 20px;
        font-size: clamp(38px, 11vw, 54px);
        letter-spacing: -2.5px;
    }

    .dashboard-lead {
        font-size: 13px;
    }

    .hero-trust-row {
        gap: 12px 20px;
        margin-top: 25px;
    }

    .hero-trust-row span:not(:last-child)::after {
        right: -11px;
    }

    .quicknav-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .quicknav-inner a:nth-child(2) {
        border-right: none;
    }

    .quicknav-inner a:nth-child(-n+2) {
        border-bottom: 1px solid rgba(148,163,184,.07);
    }

    .dashboard-section {
        padding: 54px 0;
    }

    .dashboard-section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 23px;
    }

    .premium-result-grid,
    .schedule-grid,
    .feature-pro-grid {
        grid-template-columns: 1fr;
    }

    .premium-result-card:last-child,
    .schedule-card:last-child,
    .feature-pro-card:last-child {
        grid-column: auto;
    }

    .premium-result-card:last-child .result-digits {
        max-width: none;
    }

    .data-freshness-bar {
        grid-template-columns: auto 1fr auto;
    }

    .freshness-progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 520px) {
    .dashboard-hero::before {
        width: 360px;
        height: 360px;
        right: -180px;
        top: -80px;
    }

    .dashboard-kicker {
        font-size: 8px;
    }

    .dashboard-hero h1 {
        font-size: clamp(36px, 12vw, 48px);
        line-height: 1.01;
        letter-spacing: -2.2px;
    }

    .dashboard-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-btn {
        width: 100%;
    }

    .hero-trust-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-trust-row span::after {
        display: none;
    }

    .dashboard-console {
        padding: 16px;
        border-radius: 21px;
    }

    .console-head {
        align-items: flex-start;
    }

    .console-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .console-market-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .market-state {
        margin-left: 44px;
    }

    .console-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .console-foot time {
        text-align: left;
    }

    .quicknav-inner a {
        justify-content: flex-start;
        padding: 0 13px;
        font-size: 9px;
    }

    .premium-result-card,
    .schedule-card,
    .feature-pro-card,
    .seo-copy-card {
        border-radius: 18px;
    }

    .premium-result-card {
        min-height: auto;
        padding: 17px;
    }

    .result-digits {
        gap: 5px;
        margin: 25px 0 18px;
    }

    .result-digits span {
        border-radius: 11px;
        font-size: clamp(29px, 10vw, 38px);
    }

    .result-meta-grid {
        grid-template-columns: 1fr;
    }

    .schedule-grid {
        gap: 10px;
    }

    .seo-copy-card {
        padding: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-pulse {
        animation: none;
    }
}

/* ================================================================
   V4.1 — RESULTS-FIRST HOMEPAGE
   The latest HK/SGP/SDY results are the primary above-the-fold content.
================================================================ */
.primary-results {
    overflow: hidden;
    padding-top: 48px;
    padding-bottom: 56px;
    background:
        radial-gradient(720px 360px at 12% -8%, rgba(88,232,255,.10), transparent 66%),
        radial-gradient(680px 360px at 88% 0%, rgba(167,123,255,.09), transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 80%);
}

.primary-results::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.012), transparent);
}

.primary-results .site-container {
    position: relative;
    z-index: 1;
}

.primary-results .dashboard-section-head {
    margin-bottom: 24px;
}

.primary-results .dashboard-section-head > div {
    max-width: 820px;
}

.primary-results .dashboard-section-head h1 {
    margin: 0;
    color: #f8faff;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -2.2px;
    font-weight: 880;
}

.primary-results .dashboard-section-head p {
    max-width: 720px;
    margin-top: 11px;
    color: #8f9db5;
    font-size: 12px;
}

.primary-results .premium-result-grid {
    gap: 18px;
}

.primary-results .premium-result-card {
    min-height: 350px;
    border-color: rgba(151,167,199,.15);
    box-shadow: 0 28px 72px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045);
}

.primary-results .result-digits {
    margin-top: 34px;
}

.primary-results .result-digits span {
    max-height: 86px;
    font-size: clamp(31px, 3.8vw, 46px);
}

/* Dashboard overview now supports the primary result area instead of preceding it. */
.dashboard-hero-grid {
    min-height: 450px;
    padding-top: 58px;
    padding-bottom: 62px;
}

.dashboard-hero h2 {
    max-width: 840px;
    margin: 24px 0 20px;
    color: var(--dash-text);
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1;
    font-weight: 870;
    letter-spacing: -2.8px;
}

.dashboard-hero h2 span {
    display: block;
    margin-top: 9px;
    color: transparent;
    background: linear-gradient(90deg, #80f0ff 0%, #88a9ff 48%, #c498ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (max-width: 720px) {
    .primary-results {
        padding-top: 30px;
        padding-bottom: 38px;
    }

    .primary-results .dashboard-section-head h1 {
        font-size: clamp(29px, 9vw, 40px);
        letter-spacing: -1.5px;
    }

    .primary-results .dashboard-section-head p {
        font-size: 11px;
    }

    .dashboard-hero-grid {
        min-height: auto;
        padding-top: 44px;
        padding-bottom: 48px;
    }

    .dashboard-hero h2 {
        font-size: clamp(34px, 10vw, 48px);
        letter-spacing: -2px;
    }
}

/* ================================================================
   LIVE RESULT DASHBOARD V5
   Progressive enhancement: server-rendered data remains indexable.
================================================================ */

.live-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .85px;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.live-result-badge i,
.live-refresh-note i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}

.live-result-badge.live {
    color: #72f7b2;
    border-color: rgba(69,230,143,.22);
    background: rgba(69,230,143,.075);
}

.live-result-badge.live i {
    animation: livePulseRing 1.55s ease-out infinite;
}

.live-result-badge.updated {
    color: #8be7ff;
    border-color: rgba(88,211,255,.20);
    background: rgba(88,211,255,.065);
}

.live-result-badge.waiting {
    color: #b2bed1;
    border-color: rgba(178,190,209,.13);
    background: rgba(178,190,209,.04);
}

.live-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,.075);
}

.live-state-detail {
    color: #91a1ba;
    font-size: 8px;
    font-weight: 730;
}

.live-check-time {
    color: #5f6e87;
    font-size: 7px;
    white-space: nowrap;
}

.result-just-updated {
    animation: resultCardFlash 1.7s ease both;
}

.result-digits .digit-flip {
    animation: digitReveal .52s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: var(--digit-delay, 0ms);
}

.live-history-panel {
    margin-top: 22px;
    padding: 21px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(15,23,42,.72), rgba(8,14,28,.80)),
        rgba(255,255,255,.01);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 22px 55px rgba(0,0,0,.18);
}

.live-history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.live-history-head h2 {
    margin: 5px 0 0;
    color: #edf3ff;
    font-size: clamp(17px, 2vw, 22px);
    letter-spacing: -.55px;
}

.live-refresh-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(88,232,255,.12);
    border-radius: 999px;
    color: #87dcec;
    background: rgba(88,232,255,.04);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .25px;
    white-space: nowrap;
}

.live-refresh-note i {
    animation: livePulseRing 1.8s ease-out infinite;
}

.live-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.live-history-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}

.live-history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    opacity: .75;
}

.live-history-card.hk::before { background: linear-gradient(#5f8eff, #64e7ff); }
.live-history-card.sgp::before { background: linear-gradient(#37d984, #73edbd); }
.live-history-card.sdy::before { background: linear-gradient(#ff749b, #f3bd68); }

.live-history-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border-bottom: 1px solid rgba(148,163,184,.07);
}

.live-history-card > header span {
    color: #dce6f6;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .45px;
}

.live-history-card > header a {
    color: #73849d;
    font-size: 7px;
    font-weight: 800;
}

.live-history-card > header a:hover { color: #aeefff; }

.live-history-list {
    padding: 3px 12px 8px;
}

.live-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 37px;
    border-bottom: 1px solid rgba(148,163,184,.055);
}

.live-history-row:last-child { border-bottom: 0; }

.live-history-row time {
    color: #74839b;
    font-size: 8px;
}

.live-history-row strong {
    color: #eef4ff;
    font-size: 11px;
    font-weight: 820;
    letter-spacing: 1.25px;
    font-variant-numeric: tabular-nums;
}

@keyframes livePulseRing {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70% { box-shadow: 0 0 0 6px transparent; opacity: .8; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

@keyframes resultCardFlash {
    0% { box-shadow: 0 28px 72px rgba(0,0,0,.32), inset 0 0 0 0 rgba(108,231,255,0); }
    28% { box-shadow: 0 28px 78px rgba(0,0,0,.36), inset 0 0 0 1px rgba(108,231,255,.32), 0 0 42px rgba(94,211,255,.14); }
    100% { box-shadow: 0 28px 72px rgba(0,0,0,.32), inset 0 0 0 0 rgba(108,231,255,0); }
}

@keyframes digitReveal {
    from { opacity: .25; transform: translateY(-8px) scale(.94); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 920px) {
    .live-history-grid { grid-template-columns: 1fr; }
    .live-history-card { display: grid; grid-template-columns: 120px minmax(0,1fr); }
    .live-history-card > header { border-bottom: 0; border-right: 1px solid rgba(148,163,184,.07); align-items: flex-start; flex-direction: column; justify-content: center; }
}

@media (max-width: 720px) {
    .live-card-foot { align-items: flex-start; flex-direction: column; gap: 4px; }
    .live-history-panel { margin-top: 16px; padding: 15px; border-radius: 18px; }
    .live-history-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .live-refresh-note { white-space: normal; }
    .live-history-card { display: block; }
    .live-history-card > header { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid rgba(148,163,184,.07); }
    .live-history-row { min-height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
    .live-result-badge.live i,
    .live-refresh-note i,
    .result-just-updated,
    .result-digits .digit-flip {
        animation: none !important;
    }
}

.live-history-date{color:inherit;text-decoration:none}.live-history-date:hover{color:#67e8f9;text-decoration:underline}

/* V8: native progress avoids inline styles and keeps layout stable. */
progress.freshness-progress{display:block;width:100%;height:6px;border:0;border-radius:999px;overflow:hidden;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.055)}
progress.freshness-progress::-webkit-progress-bar{background:rgba(255,255,255,.055);border-radius:999px}
progress.freshness-progress::-webkit-progress-value{background:linear-gradient(90deg,#22d3ee,#8b5cf6);border-radius:999px}
progress.freshness-progress::-moz-progress-bar{background:linear-gradient(90deg,#22d3ee,#8b5cf6);border-radius:999px}