/* Generated by scripts/build_css_bundle.py. Do not edit directly. */
/* Entry: app/static/css/style.css */

/* Source: app/static/css/style.css */
/* Source: app/static/css/tokens.css */
:root {
    --color-primary: #0f766e;
    --color-primary-strong: #115e59;
    --color-secondary: #14213d;
    --color-accent: #f59e0b;
    --color-success: #15803d;
    --color-danger: #c2410c;
    --browser-chrome-color: #fbfaf7;
    --color-background: #f7f4ec;
    --color-surface: rgba(255, 253, 248, 0.97);
    --color-surface-strong: #fffdf8;
    --color-text-primary: #172033;
    --color-text-secondary: #5f6472;
    --color-border: rgba(20, 33, 61, 0.1);
    --color-border-strong: rgba(20, 33, 61, 0.16);
    --font-family-base: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
    --font-family-heading: "Noto Sans TC", "Plus Jakarta Sans", sans-serif;
    --border-radius: 22px;
    --border-radius-sm: 14px;
    --box-shadow: 0 12px 28px rgba(20, 33, 61, 0.06);
    --box-shadow-hover: 0 16px 34px rgba(20, 33, 61, 0.09);
    --page-width: 1180px;
    --hero-gradient: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(245, 158, 11, 0.12));
    --chart-sum-color: #0f766e;
    --chart-odd-color: #d97706;
    --chart-even-color: #2563eb;
    --chart-zone-1-color: #0284c7;
    --chart-zone-2-color: #ca8a04;
    --chart-zone-3-color: #dc2626;
    --chart-reference-color: #7c3aed;
}

/* Source: app/static/css/layout.css */
html {
    background: var(--browser-chrome-color);
}

body {
    font-family: var(--font-family-base);
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(245, 158, 11, 0.1), transparent 20%),
        linear-gradient(180deg, #fbfaf7 0%, var(--color-background) 56%, #f1efe8 100%);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.no-transition * {
    transition: none !important;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(251, 250, 247, 0.98);
    border-bottom: 1px solid rgba(20, 33, 61, 0.08);
    box-shadow: 0 4px 14px rgba(20, 33, 61, 0.04);
}

.header-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 1.15rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(20, 33, 61, 0.2);
}

.brand-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 700;
}

.brand-copy h1 {
    margin: 0;
    font-size: 1.35rem;
    font-family: var(--font-family-heading);
    line-height: 1.1;
}

.brand-copy h1 a {
    color: var(--color-secondary);
    text-decoration: none;
}

.site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    list-style-type: none;
    padding: 0.35rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(20, 33, 61, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(20, 33, 61, 0.06);
}

.nav-menu li {
    position: relative;
}

.nav-link,
.dropbtn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.nav-link:hover,
.dropdown:hover .dropbtn {
    background: rgba(20, 33, 61, 0.06);
    color: var(--color-secondary);
}

.nav-link:focus-visible,
.dropbtn:focus-visible,
.footer-links a:focus-visible,
.brand-mark:focus-visible,
.brand-copy h1 a:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.45);
    outline-offset: 3px;
}

.nav-link.is-active,
.dropdown.is-active .dropbtn {
    background: rgba(15, 118, 110, 0.12);
    color: var(--color-primary-strong);
}

.nav-link-accent {
    background: var(--color-secondary);
    color: #fff;
}

.nav-link-accent:hover,
.nav-link-accent.is-active {
    background: var(--color-primary);
    color: #fff;
}

.arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.3s ease;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(20, 33, 61, 0.96);
    min-width: 190px;
    box-shadow: 0px 18px 30px rgba(8, 15, 31, 0.22);
    z-index: 1;
    border-radius: 1rem;
    padding: 0.85rem 0.55rem 0.55rem;
}

.dropdown-content a {
    color: white;
    padding: 0.85rem 1rem;
    text-decoration: none;
    display: block;
    text-align: left;
    border-radius: 0.75rem;
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.is-open .dropdown-content {
    display: block;
}

.dropdown.is-open .arrow-down {
    transform: rotate(180deg);
}

.hamburger {
    display: none;
    cursor: pointer;
    z-index: 11;
    font: inherit;
    color: inherit;
    appearance: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--color-secondary);
}

main {
    flex: 1;
    padding: 2.5rem 1.5rem 4rem;
    max-width: var(--page-width);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.site-main {
    position: relative;
}

.site-footer {
    border-top: 1px solid rgba(20, 33, 61, 0.08);
    background: rgba(20, 33, 61, 0.98);
    color: rgba(255, 255, 255, 0.92);
    padding: 2rem 1.5rem 1.4rem;
}

.footer-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.footer-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
}

.footer-copy {
    margin: 0;
    max-width: 34rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #b7f3eb;
}

.footer-disclaimer,
.footer-copyright {
    max-width: var(--page-width);
    margin: 1rem auto 0;
}

.footer-disclaimer {
    color: #ffd7bf;
    font-size: 0.92rem;
    font-weight: 700;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.92rem;
}

main h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    color: var(--color-secondary);
    margin: 0;
    font-family: var(--font-family-heading);
    line-height: 1.08;
}

main h3 {
    font-size: 1.35rem;
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: 0.65rem;
    font-family: var(--font-family-heading);
}

@media screen and (max-width: 768px) {
    body.nav-open {
        overflow: hidden;
    }

    main {
        padding: 1.5rem 1rem 3rem;
    }

    .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.95rem 1rem;
    }

    .brand-copy h1 {
        font-size: 1.1rem;
    }

    .brand-kicker {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
    }

    .site-nav {
        margin-left: auto;
    }

    .hamburger {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        z-index: 32;
        margin-left: 0.5rem;
        padding: 0.35rem;
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(20, 33, 61, 0.08);
        box-shadow: 0 10px 18px rgba(20, 33, 61, 0.08);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.18rem;
        background:
            radial-gradient(circle at 12% 12%, rgba(15, 118, 110, 0.22), transparent 34%),
            linear-gradient(180deg, #f8fafc, #edf2f7);
        width: auto;
        min-height: 100dvh;
        text-align: left;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        box-shadow: none;
        z-index: 29;
        padding: 5.7rem 1.1rem 2rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1.5rem);
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-menu li {
        padding: 0;
        width: 100%;
    }

    .nav-link,
    .nav-menu .dropbtn {
        box-sizing: border-box;
        width: 100%;
        min-height: 3.8rem;
        padding: 0.9rem 1.05rem;
        display: flex;
        justify-content: space-between;
        color: var(--color-text-primary);
        border-radius: 1.05rem;
        font-size: clamp(1.2rem, 6vw, 2rem);
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .nav-link.is-active,
    .dropdown.is-active .dropbtn,
    .nav-link:hover,
    .dropdown:hover .dropbtn,
    .dropdown.is-open .dropbtn {
        background: rgba(15, 118, 110, 0.1);
        color: var(--color-primary-strong);
    }

    .nav-menu .nav-link-accent,
    .nav-menu .nav-link-accent:hover,
    .nav-menu .nav-link-accent.is-active {
        background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
        color: #fff;
        box-shadow: 0 12px 24px rgba(30, 58, 95, 0.16);
    }

    .dropdown {
        position: static;
    }

    .dropdown-content {
        position: static;
        display: block;
        background-color: transparent;
        box-shadow: none;
        padding: 0 0 0 0.35rem;
        max-height: 0;
        min-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-0.3rem);
        transition: max-height 0.28s ease, opacity 0.24s ease, transform 0.24s ease;
    }

    .dropdown.is-open .dropdown-content {
        max-height: 16rem;
        opacity: 1;
        transform: translateY(0);
    }

    .dropdown-content a {
        box-sizing: border-box;
        width: 100%;
        margin: 0.1rem 0;
        padding: 0.82rem 1.05rem 0.82rem 1.45rem;
        color: var(--color-text-secondary);
        font-size: 1rem;
        font-weight: 700;
        border-radius: 0.9rem;
    }

    .arrow-down {
        display: inline-block;
        flex: 0 0 auto;
        margin-left: 1rem;
    }

    .footer-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Source: app/static/css/components.css */
/* Source: app/static/css/components/base.css */
.card {
    background-color: var(--color-surface);
    border: 1px solid rgba(20, 33, 61, 0.08);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.is-hidden {
    display: none !important;
}

.state-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(20, 33, 61, 0.1);
    background: rgba(255, 253, 248, 0.94);
    box-shadow: var(--box-shadow);
}

.state-panel-body {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.state-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.state-panel-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-primary);
}

.state-panel-description {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.state-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.state-panel-empty {
    border-color: rgba(20, 33, 61, 0.08);
}

.state-panel-error {
    background: rgba(194, 65, 12, 0.08);
    border-color: rgba(194, 65, 12, 0.18);
}

.state-panel-error .state-panel-title,
.state-panel-error .state-panel-description {
    color: #8f2d0b;
}

.state-panel-loading {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.16);
}

.state-panel-loading .state-panel-title,
.state-panel-loading .state-panel-description {
    color: #0f5f59;
}

.card-grid {
    display: grid;
    gap: 1.4rem;
}

.card-grid-home {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-grid-home .draw-card .lotto-ball-container {
    min-height: 6.35rem;
    align-content: flex-start;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 700;
}

.page-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1.8rem;
    margin-bottom: 1.6rem;
    border-radius: calc(var(--border-radius) + 6px);
    background: var(--hero-gradient), rgba(255, 253, 248, 0.92);
    border: 1px solid rgba(20, 33, 61, 0.08);
    box-shadow: var(--box-shadow);
}

.page-hero-copy {
    max-width: 44rem;
}

.page-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 800;
}

.page-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.insight-strip {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.insight-pill {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(20, 33, 61, 0.08);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
}

main h4 {
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: 0.85rem;
}

.analysis-block + .analysis-block {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.analysis-section {
    margin-bottom: 1.5rem;
}

.section-heading {
    margin-bottom: 1rem;
}

.section-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 800;
}

.table-wrap {
    overflow-x: auto;
    margin-bottom: 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 18px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 28rem;
    background: rgba(255, 255, 255, 0.48);
}

.data-table th,
.data-table td {
    padding: 0.85rem 0.95rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.data-table th {
    color: var(--color-text-primary);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    background: rgba(15, 118, 110, 0.07);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.data-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0.2rem;
    flex-wrap: wrap;
    transition: background-color 0.2s ease;
    gap: 0.75rem;
}

.data-list li:not(:first-child) {
    border-top: 1px solid var(--color-border);
}

.data-list li:hover {
    background-color: rgba(20, 33, 61, 0.035);
    cursor: pointer;
}

.data-list li.selected {
    background-color: rgba(245, 158, 11, 0.14);
}

.data-list li.selected:hover {
    background-color: rgba(245, 158, 11, 0.18);
}

.last-updated {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin: 0;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: white;
    border: none;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: 0 12px 24px rgba(20, 33, 61, 0.16);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
    transform: translateY(-2px);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.form-group select:focus-visible,
.form-group input:focus-visible,
.form-group-checkbox input:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.42);
    outline-offset: 3px;
}

.btn-primary:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    color: var(--color-secondary);
    text-decoration: none;
    border: 1px solid rgba(20, 33, 61, 0.12);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.28);
    background: rgba(255, 255, 255, 0.94);
}

.lotto-ball-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.draw-card .lotto-ball-container {
    gap: 0.42rem;
}

.lotto-ball {
    background: linear-gradient(180deg, #f8cd53, #f59e0b);
    color: #342312;
    font-weight: bold;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.24), 0 8px 16px rgba(245, 158, 11, 0.22);
}

.draw-card .lotto-ball {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 0.96rem;
}

.lotto-ball-special {
    background: linear-gradient(180deg, #18314f, #14213d);
    color: #fff;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.12), 0 8px 16px rgba(20, 33, 61, 0.24);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.metric-chip {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(20, 33, 61, 0.04);
    border: 1px solid rgba(20, 33, 61, 0.05);
}

.metric-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.metric-chip strong {
    font-size: 1rem;
}

.metric-chip-wide {
    grid-column: 1 / -1;
}

.jackpot-highlight {
    color: var(--color-danger);
    font-weight: 800;
}

.jackpot-delta {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.86em;
    font-weight: 800;
}

.jackpot-delta-up {
    color: var(--color-success);
}

.jackpot-delta-down {
    color: var(--color-danger);
}

.jackpot-delta-flat {
    color: var(--color-text-secondary);
}

.bullet-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    line-height: 1.75;
}

.bullet-list li::marker {
    color: var(--color-primary);
}

.report-text-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: var(--color-text-secondary);
}

.report-text-stack p {
    margin: 0;
    line-height: 1.8;
}

/* Source: app/static/css/components/trend.css */
.trend-summary-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(20, 33, 61, 0.08);
}

.trend-summary-banner strong {
    font-size: 1.05rem;
}

.trend-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1.45;
}

.trend-summary-copy span {
    color: inherit;
    font-size: 0.9rem;
    opacity: 0.78;
}

.trend-summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trend-report-card-up {
    border-color: rgba(15, 118, 110, 0.16);
}

.trend-report-card-down {
    border-color: rgba(194, 65, 12, 0.18);
}

.trend-report-card-neutral {
    border-color: rgba(20, 33, 61, 0.12);
}

.trend-summary-banner-up {
    background: rgba(15, 118, 110, 0.08);
    color: #0f5f59;
}

.trend-summary-banner-up .trend-summary-label {
    background: rgba(15, 118, 110, 0.14);
    color: #0f5f59;
}

.trend-summary-banner-down {
    background: rgba(194, 65, 12, 0.08);
    color: #8f2d0b;
}

.trend-summary-banner-down .trend-summary-label {
    background: rgba(194, 65, 12, 0.14);
    color: #8f2d0b;
}

.trend-summary-banner-neutral {
    background: rgba(20, 33, 61, 0.05);
    color: var(--color-text-primary);
}

.trend-summary-banner-neutral .trend-summary-label {
    background: rgba(20, 33, 61, 0.09);
    color: var(--color-text-secondary);
}

.signal-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.signal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.72rem;
    border-radius: 999px;
    background: rgba(20, 33, 61, 0.05);
    border: 1px solid rgba(20, 33, 61, 0.08);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.signal-badge-grade-strong {
    background: rgba(194, 65, 12, 0.1);
    border-color: rgba(194, 65, 12, 0.18);
    color: #8f2d0b;
}

.signal-badge-grade-primary {
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.18);
    color: #0f5f59;
}

.signal-badge-grade-support {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.24);
    color: #8a5205;
}

.signal-badge-grade-descriptive {
    background: rgba(20, 33, 61, 0.05);
    color: var(--color-text-secondary);
}

.signal-badge-anomaly-high {
    background: rgba(194, 65, 12, 0.1);
    border-color: rgba(194, 65, 12, 0.2);
    color: #8f2d0b;
}

.signal-badge-anomaly-extreme {
    background: rgba(127, 29, 29, 0.12);
    border-color: rgba(127, 29, 29, 0.24);
    color: #7f1d1d;
}

.signal-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.signal-evidence-item {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 253, 248, 0.78);
    border: 1px solid rgba(20, 33, 61, 0.08);
}

.signal-evidence-item span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.signal-evidence-item strong {
    color: var(--color-text-primary);
    font-size: 1.05rem;
}

.analysis-block-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.analysis-block-heading h4 {
    margin-bottom: 0;
}

.analysis-block-heading span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.trend-target-observation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.trend-target-observation-item {
    padding: 0.9rem;
    border-radius: 1rem;
    background: rgba(20, 33, 61, 0.035);
    border: 1px solid rgba(20, 33, 61, 0.08);
}

.trend-target-observation-item span,
.trend-target-observation-item small {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.trend-target-observation-item strong {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-text-primary);
    font-size: 0.96rem;
    line-height: 1.35;
}

.trend-anomaly-observation {
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(20, 33, 61, 0.08);
}

.trend-anomaly-observation-high {
    background: rgba(194, 65, 12, 0.055);
    border-color: rgba(194, 65, 12, 0.16);
}

.trend-anomaly-observation-extreme {
    background: rgba(127, 29, 29, 0.065);
    border-color: rgba(127, 29, 29, 0.18);
}

.signal-warning {
    margin: -0.25rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    background: rgba(245, 158, 11, 0.13);
    border: 1px solid rgba(245, 158, 11, 0.24);
    color: #805003;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.6;
}

/* Source: app/static/css/components/random-results.css */
.results-grid .card.interactive-card {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.results-grid .card.interactive-card:hover {
    background-color: rgba(20, 33, 61, 0.03);
}

.results-grid .card.interactive-card.selected {
    background-color: rgba(245, 158, 11, 0.12);
    box-shadow: var(--box-shadow-hover);
    border-color: rgba(245, 158, 11, 0.34);
    position: relative;
}

.results-grid .card.interactive-card.selected::after {
    content: "已標記";
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    color: #9a5400;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Source: app/static/css/components/badges.css */
@keyframes flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.72;
    }
}

.new-badge {
    display: inline-block;
    background-color: var(--color-danger);
    color: white;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: 8px;
    text-transform: uppercase;
    vertical-align: middle;
    animation: flash 1.5s infinite;
}

/* Source: app/static/css/components/modal.css */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-content {
    background-color: var(--color-surface);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.modal-hidden .modal-content {
    transform: translateY(-20px);
}

.modal-content h3 {
    margin-top: 0;
    color: var(--color-secondary);
    text-align: center;
}

.modal-content p {
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--color-text-secondary);
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--color-text-primary);
}

.modal-actions {
    text-align: center;
}

/* Source: app/static/css/components/content.css */
.content-card-stack {
    display: grid;
    gap: 1.2rem;
}

.prose-card p {
    line-height: 1.9;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
}

.contact-email {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 1.05rem;
}

.contact-email span {
    color: var(--color-primary-strong);
    font-weight: 700;
}

.results-container {
    margin-top: 1.6rem;
    display: grid;
    gap: 1rem;
}

.spinner-inline {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    flex-shrink: 0;
}

.home-guides-section {
    margin-top: 1.8rem;
}

.feature-card-link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card-link:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.22);
    box-shadow: var(--box-shadow-hover);
}

.guide-grid,
.guide-related-grid {
    margin-bottom: 1.2rem;
}

.guide-article h3 {
    margin: 1.35rem 0 0.65rem;
    color: var(--color-text-primary);
}

.guide-article .contact-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
}

.blog-filter-panel,
.blog-featured {
    margin-bottom: 1.2rem;
}

.blog-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.blog-filter-tags {
    padding-top: 0.4rem;
}

.blog-filter-chip {
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 999px;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 800;
    padding: 0.45rem 0.8rem;
    text-decoration: none;
}

.blog-filter-chip:hover,
.blog-filter-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.blog-featured-card {
    color: inherit;
    display: grid;
    gap: 0;
    overflow: hidden;
    text-decoration: none;
}

.blog-featured-card h2 {
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.85rem;
}

.blog-featured-card p {
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.blog-featured-cover {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(245, 158, 11, 0.10));
    display: block;
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.blog-card {
    color: inherit;
    height: 100%;
    min-height: 100%;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: var(--box-shadow-hover);
}

.blog-card-cover,
.blog-article-cover {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(245, 158, 11, 0.10));
    display: block;
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.blog-card-cover {
    aspect-ratio: 16 / 9;
    height: clamp(170px, 26vw, 214px);
    object-fit: cover;
}

.blog-article-cover {
    aspect-ratio: 16 / 9;
    margin-bottom: 1.2rem;
}

.blog-card-meta {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.65rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.85rem;
}

.blog-card h3 {
    margin: 0 0 0.75rem;
}

.blog-card p {
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin: 0;
}

.blog-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.blog-tag-list span {
    background: rgba(15, 118, 110, 0.1);
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 999px;
    color: var(--color-primary-strong);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.35rem 0.65rem;
}

.blog-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 1.4rem;
}

.blog-article-layout {
    align-items: start;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
}

.blog-article {
    min-width: 0;
    order: 1;
}

.blog-toc {
    order: 2;
}

.blog-mobile-toc {
    display: block;
    order: 1;
    padding: 1rem;
}

.blog-mobile-toc summary {
    color: var(--color-primary-strong);
    cursor: pointer;
    font-weight: 900;
}

.blog-toc h3 {
    margin-top: 0;
}

.blog-toc-content ul {
    line-height: 1.9;
    margin: 0;
    padding-left: 1.1rem;
}

.blog-toc-content a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.blog-toc-content a:hover {
    color: var(--color-primary-strong);
}

.blog-prose {
    color: var(--color-text-secondary);
    line-height: 1.9;
    margin: 0 auto;
    max-width: 74ch;
    min-width: 0;
    overflow-wrap: anywhere;
    width: 100%;
    word-break: normal;
}

.blog-prose *,
.blog-summary-box,
.blog-article .card-content {
    box-sizing: border-box;
    max-width: 100%;
}

.blog-prose h1,
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
    color: var(--color-text-primary);
    line-height: 1.35;
    margin: 2rem 0 0.8rem;
}

.blog-prose h2 {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}

.blog-prose p,
.blog-prose ul,
.blog-prose ol,
.blog-prose blockquote,
.blog-prose table {
    margin: 0 0 1rem;
}

.blog-prose a {
    color: var(--color-primary-strong);
    font-weight: 700;
}

.blog-prose blockquote {
    border-left: 4px solid var(--color-primary);
    color: var(--color-text-primary);
    background: rgba(15, 118, 110, 0.07);
    border-radius: 0.9rem;
    padding-left: 1rem;
    padding: 0.85rem 1rem;
}

.blog-prose table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    width: 100%;
}

.blog-prose th,
.blog-prose td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem;
    text-align: left;
}

.blog-prose pre {
    background: rgba(20, 33, 61, 0.06);
    border-radius: 1rem;
    overflow-x: auto;
    padding: 1rem;
}

.blog-prose code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}

.blog-prose img,
.blog-prose iframe,
.blog-prose svg,
.blog-prose video {
    height: auto;
    max-width: 100%;
}

.blog-prose mjx-container {
    max-width: 100% !important;
}

.blog-summary-box {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(245, 158, 11, 0.08));
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    margin: 0 0 1.4rem;
    padding: 1.1rem;
}

.blog-summary-box h2 {
    margin: 0 0 0.55rem;
}

.blog-summary-box p {
    margin-bottom: 0;
}

.blog-article-actions {
    border-top: 1px solid var(--color-border);
    margin-top: 1.6rem;
    padding-top: 1rem;
}

.blog-related-section {
    margin-top: 1.6rem;
}

.seo-answer-section {
    margin-top: 1.6rem;
}

.seo-answer-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.seo-answer-card h3 {
    color: var(--color-text-primary);
    font-size: 1.05rem;
    line-height: 1.45;
    margin: 0 0 0.65rem;
}

.seo-answer-card p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin: 0;
}

.seo-howto-card {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(245, 158, 11, 0.06)), var(--color-surface);
}

.seo-howto-list {
    counter-reset: seo-step;
    display: grid;
    gap: 0.85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-howto-list li {
    align-items: flex-start;
    counter-increment: seo-step;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.seo-howto-list li::before {
    align-items: center;
    background: var(--color-primary);
    border-radius: 999px;
    color: #fff;
    content: counter(seo-step);
    display: inline-flex;
    font-weight: 900;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    width: 1.75rem;
}

.seo-howto-list strong {
    color: var(--color-text-primary);
}

.seo-howto-list span {
    color: var(--color-text-secondary);
    grid-column: 2;
    line-height: 1.75;
}

@media (min-width: 980px) {
    .blog-featured-card {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    }

    .blog-article-layout {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    }

    .blog-toc {
        position: sticky;
        top: 1.2rem;
    }

    .blog-mobile-toc {
        display: none;
    }
}

@media (max-width: 1180px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 979px) {
    .blog-card-cover {
        height: auto;
        object-fit: contain;
    }

    .blog-toc {
        display: none;
    }

    .blog-article-layout,
    .blog-article,
    .blog-article .card-content,
    .blog-prose {
        width: 100%;
    }

    .blog-article .card-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .blog-prose {
        font-size: 0.96rem;
    }

    .blog-prose table {
        display: table;
        font-size: 0.82rem;
        table-layout: fixed;
    }

    .blog-prose th,
    .blog-prose td {
        overflow-wrap: anywhere;
        padding: 0.55rem 0.45rem;
        word-break: break-word;
    }

    .blog-prose pre {
        overflow-x: hidden;
        white-space: pre-wrap;
    }

    .blog-prose mjx-container[display="true"] {
        font-size: clamp(0.68rem, 3vw, 0.92rem);
        overflow-x: hidden;
        overflow-y: visible;
    }
}

@media (max-width: 720px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* Source: app/static/css/components/responsive.css */
@media screen and (max-width: 768px) {
    .page-hero {
        padding: 1.35rem;
    }

    .page-hero,
    .page-hero-actions,
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .state-panel-body {
        align-items: flex-start;
    }

    .card-grid-home .draw-card .lotto-ball-container {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .trend-summary-banner {
        align-items: flex-start;
    }

    .signal-evidence-grid {
        grid-template-columns: 1fr;
    }

    .analysis-block-heading {
        flex-direction: column;
        gap: 0.25rem;
    }

    .trend-target-observation-grid {
        grid-template-columns: 1fr;
    }
}


/* Source: app/static/css/pages.css */
.page-description {
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 760px;
    margin: 0;
}

.hidden-combo {
    display: none;
}

.show-all-container {
    text-align: center;
    margin-top: 1rem;
}

.form-group-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.hits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.hit-option {
    display: flex;
    align-items: center;
}

.hit-option input {
    margin-right: 8px;
}

.hit-option .hit-periods {
    color: var(--color-text-secondary);
    font-size: 0.9em;
    margin-left: 4px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    align-items: end;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-group select,
.form-group input {
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.9rem;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.82);
}

.form-group-checkbox {
    flex-direction: row;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(20, 33, 61, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.6);
}

.form-group-checkbox input {
    margin-right: 10px;
}

.form-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.results-container {
    margin-top: 1.6rem;
}

.result-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.form-group-description {
    color: var(--color-text-secondary);
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 0.85rem;
    line-height: 1.75;
}

.sum-high {
    color: var(--color-danger);
    font-weight: bold;
}

.sum-low {
    color: var(--color-primary);
    font-weight: bold;
}

.lotto-charts-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    margin-bottom: 1.6rem;
    min-width: 0;
}

.lotto-chart-item {
    position: relative;
    aspect-ratio: 460 / 390;
    min-height: 302px;
    height: auto;
    background:
        radial-gradient(circle at 8% 0%, rgba(15, 118, 110, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 250, 241, 0.94));
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1rem;
    border: 1px solid rgba(20, 33, 61, 0.08);
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.lotto-svg-chart {
    width: 100%;
    height: 100%;
    display: block;
}

.chart-title {
    fill: var(--color-text-primary);
    font-size: 1.18rem;
    font-weight: 800;
}

.chart-subtitle {
    fill: var(--chart-reference-color);
    font-size: 0.78rem;
    font-weight: 900;
}

.chart-grid-line {
    stroke: var(--color-border);
    stroke-width: 1;
}

.chart-axis-line {
    stroke: var(--color-border-strong);
    stroke-width: 1.25;
}

.chart-x-label,
.chart-y-label,
.chart-legend-label {
    fill: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.chart-line {
    fill: none;
    stroke: var(--chart-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.5;
}

.chart-area {
    fill: var(--chart-color);
    opacity: 0.12;
}

.chart-point,
.chart-legend-dot {
    fill: var(--chart-color);
}

.chart-point {
    stroke: var(--color-surface-strong);
    stroke-width: 2.5;
}

.chart-reference-line {
    stroke: var(--chart-reference-color);
    stroke-dasharray: 7 5;
    stroke-linecap: round;
    stroke-width: 2.2;
}

.chart-load-fallback {
    grid-column: 1 / -1;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 1rem;
    color: #8a4b0d;
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 158, 11, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92));
    box-shadow: 0 12px 24px rgba(120, 53, 15, 0.08);
    line-height: 1.7;
}

.home-highlights {
    margin-bottom: 1rem;
}

.feature-grid,
.contact-grid {
    display: grid;
    gap: 1.2rem;
}

.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.feature-card h3,
.support-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.feature-card p,
.support-card p,
.contact-note {
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.contact-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.contact-note {
    margin-bottom: 0;
}

.random-summary-card {
    border-color: rgba(15, 118, 110, 0.12);
}

.trend-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.trend-target-explainer-card {
    margin-bottom: 1.25rem;
    border-color: rgba(15, 118, 110, 0.14);
}

.trend-target-range-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.trend-target-range-card {
    padding: 0.95rem;
    border-radius: 1rem;
    background: rgba(255, 253, 248, 0.72);
    border: 1px solid rgba(20, 33, 61, 0.08);
}

.trend-target-range-card h4 {
    margin-bottom: 0.65rem;
}

.trend-target-range-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.trend-target-range-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.trend-target-range-list strong {
    color: var(--color-text-primary);
    white-space: nowrap;
}

.trend-explainer-card .bullet-list {
    font-size: 0.95rem;
}

.result-summary-note {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
}

@media screen and (max-width: 768px) {
    .result-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lotto-charts-layout {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        width: 100%;
    }

    .lotto-chart-item {
        min-height: 286px;
        width: 100%;
        box-sizing: border-box;
        padding: 0.75rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .trend-rule-grid {
        grid-template-columns: 1fr;
    }

    .trend-target-range-grid {
        grid-template-columns: 1fr;
    }
}

/* Source: app/static/css/theme.css */
:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #5eead4;
    --color-primary-strong: #99f6e4;
    --color-secondary: #dbeafe;
    --color-accent: #fbbf24;
    --color-success: #86efac;
    --color-danger: #fb923c;
    --browser-chrome-color: #091220;
    --color-background: #101827;
    --color-surface: rgba(18, 30, 46, 0.92);
    --color-surface-strong: #1b2a3f;
    --color-text-primary: #edf6ff;
    --color-text-secondary: #aab9cf;
    --color-border: rgba(180, 205, 235, 0.15);
    --color-border-strong: rgba(180, 205, 235, 0.24);
    --box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    --box-shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.36);
    --hero-gradient: linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(251, 191, 36, 0.12), rgba(96, 165, 250, 0.1));
    --chart-sum-color: #5eead4;
    --chart-odd-color: #fbbf24;
    --chart-even-color: #93c5fd;
    --chart-zone-1-color: #38bdf8;
    --chart-zone-2-color: #facc15;
    --chart-zone-3-color: #fb7185;
    --chart-reference-color: #c4b5fd;
    --dark-action-background: linear-gradient(135deg, #145c67, #162644);
    --dark-action-background-hover: linear-gradient(135deg, #176b75, #1d345f);
    --dark-action-text: #f2fbff;
    --dark-action-border: rgba(125, 211, 252, 0.22);
}

.theme-toggle {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    min-height: 2.75rem;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(20, 33, 61, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.28);
    background: rgba(255, 255, 255, 0.94);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.42);
    outline-offset: 3px;
}

.theme-toggle-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #18314f;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.32), 0 8px 16px rgba(245, 158, 11, 0.18);
}

.site-nav {
    gap: 0.55rem;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(94, 234, 212, 0.13), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(251, 191, 36, 0.12), transparent 22%),
        radial-gradient(circle at 45% 78%, rgba(96, 165, 250, 0.1), transparent 30%),
        linear-gradient(180deg, #08111f 0%, #101827 54%, #0a1020 100%);
}

:root[data-theme="dark"] .site-header {
    background: rgba(9, 18, 32, 0.9);
    border-bottom-color: rgba(180, 205, 235, 0.14);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

:root[data-theme="dark"] .brand-mark {
    background: linear-gradient(135deg, #1e3a5f, #0f766e 58%, #f59e0b);
    color: #f8fbff;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .brand-copy h1 a,
:root[data-theme="dark"] main h2 {
    color: var(--color-secondary);
}

:root[data-theme="dark"] .nav-menu,
:root[data-theme="dark"] .hamburger,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .insight-pill,
:root[data-theme="dark"] .page-hero,
:root[data-theme="dark"] .state-panel,
:root[data-theme="dark"] .metric-chip,
:root[data-theme="dark"] .signal-evidence-item,
:root[data-theme="dark"] .trend-target-observation-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .btn-secondary {
    background: rgba(18, 30, 46, 0.82);
    border-color: rgba(180, 205, 235, 0.14);
}

:root[data-theme="dark"] .card {
    background:
        linear-gradient(180deg, rgba(30, 45, 66, 0.94), rgba(17, 28, 45, 0.94));
    border-color: rgba(180, 205, 235, 0.14);
}

:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .btn-secondary:hover {
    background: rgba(31, 47, 70, 0.94);
    border-color: rgba(94, 234, 212, 0.28);
}

:root[data-theme="dark"] .theme-toggle-icon {
    color: #dffcff;
    background: linear-gradient(135deg, #1e3a5f, #0f766e);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(94, 234, 212, 0.12);
}

:root[data-theme="dark"] .bar {
    background-color: var(--color-secondary);
}

:root[data-theme="dark"] .dropdown-content,
:root[data-theme="dark"] .site-footer {
    background: rgba(7, 14, 26, 0.98);
    border-color: rgba(180, 205, 235, 0.12);
}

:root[data-theme="dark"] .dropdown-content a:hover,
:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .dropdown:hover .dropbtn,
:root[data-theme="dark"] .dropdown.is-open .dropbtn,
:root[data-theme="dark"] .nav-link.is-active,
:root[data-theme="dark"] .dropdown.is-active .dropbtn {
    background: rgba(94, 234, 212, 0.12);
    color: var(--color-primary-strong);
}

:root[data-theme="dark"] .nav-link-accent,
:root[data-theme="dark"] .btn-primary {
    background: var(--dark-action-background);
    color: var(--dark-action-text);
    border: 1px solid var(--dark-action-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 26px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .nav-link-accent:hover,
:root[data-theme="dark"] .nav-link-accent.is-active,
:root[data-theme="dark"] .btn-primary:hover {
    background: var(--dark-action-background-hover);
    color: var(--dark-action-text);
}

:root[data-theme="dark"] .data-list li:hover,
:root[data-theme="dark"] .results-grid .card.interactive-card:hover {
    background-color: rgba(180, 205, 235, 0.06);
}

:root[data-theme="dark"] .data-list li.selected,
:root[data-theme="dark"] .results-grid .card.interactive-card.selected {
    background-color: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.32);
}

:root[data-theme="dark"] .trend-summary-banner-up,
:root[data-theme="dark"] .trend-summary-banner-up .trend-summary-label,
:root[data-theme="dark"] .signal-badge-grade-primary {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.22);
    color: #99f6e4;
}

:root[data-theme="dark"] .trend-summary-banner-down,
:root[data-theme="dark"] .trend-summary-banner-down .trend-summary-label,
:root[data-theme="dark"] .signal-badge-grade-strong,
:root[data-theme="dark"] .signal-badge-anomaly-high {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.22);
    color: #fed7aa;
}

:root[data-theme="dark"] .trend-summary-banner-neutral,
:root[data-theme="dark"] .trend-summary-banner-neutral .trend-summary-label,
:root[data-theme="dark"] .signal-badge,
:root[data-theme="dark"] .signal-badge-grade-descriptive {
    background: rgba(180, 205, 235, 0.08);
    border-color: rgba(180, 205, 235, 0.14);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .signal-badge-grade-support,
:root[data-theme="dark"] .signal-warning {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.26);
    color: #fde68a;
}

:root[data-theme="dark"] .state-panel-error {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.22);
}

:root[data-theme="dark"] .state-panel-error .state-panel-title,
:root[data-theme="dark"] .state-panel-error .state-panel-description {
    color: #fed7aa;
}

:root[data-theme="dark"] .state-panel-loading .state-panel-title,
:root[data-theme="dark"] .state-panel-loading .state-panel-description {
    color: #99f6e4;
}

:root[data-theme="dark"] .modal-overlay {
    background-color: rgba(3, 7, 18, 0.78);
}


:root[data-theme=dark] .form-group label,
:root[data-theme=dark] .form-group-label,
:root[data-theme=dark] .form-group-description {
    color: var(--color-text-secondary);
}

:root[data-theme=dark] .form-group select,
:root[data-theme=dark] .form-group input {
    color: var(--color-text-primary);
    background:
        linear-gradient(180deg, rgba(31, 47, 70, 0.96), rgba(18, 30, 46, 0.96));
    border-color: rgba(180, 205, 235, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color-scheme: dark;
}

:root[data-theme=dark] .form-group select:hover,
:root[data-theme=dark] .form-group input:hover {
    border-color: rgba(94, 234, 212, 0.3);
}

:root[data-theme=dark] .form-group select option {
    color: #edf6ff;
    background-color: #162235;
}

:root[data-theme=dark] .form-group-checkbox {
    color: var(--color-text-primary);
    background: rgba(18, 30, 46, 0.72);
    border-color: rgba(180, 205, 235, 0.16);
}

:root[data-theme=dark] .trend-target-range-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(94, 234, 212, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(30, 45, 66, 0.94), rgba(16, 27, 43, 0.94));
    border-color: rgba(180, 205, 235, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

:root[data-theme=dark] .trend-target-range-card h4 {
    color: var(--color-secondary);
}

:root[data-theme=dark] .trend-target-range-list li {
    color: var(--color-text-secondary);
}

:root[data-theme=dark] .trend-target-range-list strong {
    color: var(--color-primary-strong);
}

:root[data-theme=dark] .trend-target-range-list span {
    color: #d5e4f5;
}

:root[data-theme=dark] .lotto-chart-item {
    background:
        radial-gradient(circle at 8% 0%, rgba(94, 234, 212, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(30, 45, 66, 0.95), rgba(17, 28, 45, 0.94));
    border-color: rgba(180, 205, 235, 0.14);
}

:root[data-theme=dark] .chart-point {
    stroke: #122033;
}

:root[data-theme=dark] .chart-load-fallback {
    color: #fde68a;
    background:
        radial-gradient(circle at 12% 0%, rgba(251, 191, 36, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(41, 32, 17, 0.92), rgba(30, 45, 66, 0.88));
    border-color: rgba(251, 191, 36, 0.26);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

@media screen and (max-width: 1100px) {
    .theme-toggle {
        padding: 0.3rem;
    }

    .theme-toggle-text {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .theme-toggle {
        min-height: 2.6rem;
        padding: 0.28rem;
    }

    .theme-toggle-text {
        display: none;
    }

    :root[data-theme="dark"] .nav-menu {
        background:
            radial-gradient(circle at 12% 12%, rgba(20, 184, 166, 0.18), transparent 34%),
            radial-gradient(circle at 85% 18%, rgba(37, 99, 235, 0.15), transparent 28%),
            linear-gradient(180deg, #070e1a, #0f1827);
        box-shadow: 0 20px 36px rgba(0, 0, 0, 0.36);
    }

    :root[data-theme="dark"] .nav-link,
    :root[data-theme="dark"] .nav-menu .dropbtn {
        color: #edf6ff;
    }

    :root[data-theme="dark"] .dropdown-content a {
        color: rgba(237, 246, 255, 0.78);
    }

    .nav-menu .nav-link-accent,
    .nav-menu .nav-link-accent:hover,
    .nav-menu .nav-link-accent.is-active {
        background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
        color: #fff;
        box-shadow: 0 12px 24px rgba(30, 58, 95, 0.16);
    }

    :root[data-theme="dark"] .nav-menu .nav-link-accent,
    :root[data-theme="dark"] .nav-menu .nav-link-accent:hover,
    :root[data-theme="dark"] .nav-menu .nav-link-accent.is-active {
        background: var(--dark-action-background);
        color: var(--dark-action-text);
        border: 1px solid var(--dark-action-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 26px rgba(0, 0, 0, 0.24);
    }
}