:root {
    --ink: #17213a; --muted: #68758a; --canvas: #f3f5f8; --card: #fff;
    --indigo: #4856c9; --indigo-soft: #eef0ff; --shadow: 0 16px 44px rgba(28,38,68,.08); --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 10% 12%, rgba(72,86,201,.08), transparent 30rem), var(--canvas); color: var(--ink); font-family: "IBM Plex Sans Thai", Tahoma, sans-serif; line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.page-shell { min-height: 100vh; }
.hero { position: relative; min-height: 310px; padding: 52px max(5vw,24px) 82px; overflow: hidden; color: #fff; background: linear-gradient(118deg,#151d35,#26366f 58%,#264c70); display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: linear-gradient(90deg,#707cf0,#32c0a8,#f0bd55); }
.hero__content { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 22px; }
.brand-mark { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; color: #a9b2ff; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.08); }
.brand-mark svg { width: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow, .section-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.eyebrow { color: #b9c0ff; display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 22px; height: 2px; background: #7e8aff; }
.hero h1 { margin: 10px 0; font-size: clamp(2.15rem,3.5vw,3.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.hero h1 strong { color: #aeb7ff; font-weight: 700; }
.hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.74); font-size: 1.02rem; }
.privacy-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; padding: 7px 11px; border: 1px solid rgba(124,230,203,.24); border-radius: 999px; color: #a7ead9; background: rgba(21,165,142,.12); font-size: .75rem; }
.privacy-pill span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(21,165,142,.32); }
.hero__meta { position: relative; z-index: 1; min-width: 248px; display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.hero__meta small, .hero__meta strong { display: block; }
.hero__meta small { color: rgba(255,255,255,.62); }
.hero__meta strong { margin-top: 2px; font-size: .9rem; }
.live-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #61ddb8; box-shadow: 0 0 0 6px rgba(97,221,184,.13); }
.hero__orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); }
.hero__orb--one { width: 340px; height: 340px; right: 8%; top: -210px; box-shadow: 0 0 0 65px rgba(255,255,255,.018),0 0 0 130px rgba(255,255,255,.012); }
.hero__orb--two { width: 185px; height: 185px; right: 37%; bottom: -150px; background: rgba(72,86,201,.18); }
main { width: min(1500px,calc(100% - 40px)); margin: -38px auto 0; position: relative; z-index: 2; }
.filter-card, .chart-card, .interpret-card, .method-note { background: var(--card); border: 1px solid rgba(34,46,80,.09); border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-card { padding: 22px 24px 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 48px 0 20px; }
.section-heading--filter { margin: 0 0 18px; align-items: center; }
.section-heading h2 { margin: 3px 0 0; font-size: clamp(1.35rem,2vw,1.8rem); line-height: 1.25; }
.section-heading p { margin: 0; color: var(--muted); }
.section-kicker { color: var(--indigo); }
.filter-toggle { display: none; border: 0; background: var(--indigo-soft); color: var(--indigo); padding: 9px 13px; border-radius: 11px; font-weight: 600; cursor: pointer; }
.filter-toggle span { display: inline-block; transition: transform .2s ease; }
.filter-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.filter-form { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 14px; align-items: end; }
.filter-form label > span { display: block; margin: 0 0 7px; color: #4d596e; font-size: .82rem; font-weight: 600; }
.filter-form input, .filter-form select { width: 100%; height: 44px; padding: 0 12px; color: var(--ink); border: 1px solid #d7dde7; border-radius: 11px; outline: 0; background: #fbfcfe; transition: border-color .18s,box-shadow .18s; }
.filter-form input:focus, .filter-form select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(72,86,201,.12); }
.filter-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; font-weight: 600; }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.button--primary { color: #fff; background: var(--indigo); box-shadow: 0 8px 18px rgba(72,86,201,.2); }
.button--ghost { color: #536077; background: #eef1f5; }
.alert { margin-top: 22px; padding: 15px 18px; border-radius: 14px; background: #fff8e6; border: 1px solid #f1d68e; color: #70550f; display: flex; gap: 9px 18px; flex-wrap: wrap; }
.alert--error { background: #fff0f2; border-color: #efb6bf; color: #8b2938; }
.overview-grid { display: grid; grid-template-columns: 1.35fr repeat(5,1fr); gap: 14px; }
.total-card, .metric-card { min-height: 194px; border-radius: 20px; overflow: hidden; }
.total-card { position: relative; padding: 24px; color: #fff; background: linear-gradient(145deg,#1b2544,#3349a4); display: flex; align-items: center; gap: 18px; box-shadow: 0 16px 36px rgba(30,44,105,.2); }
.total-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -75px; bottom: -105px; border: 28px solid rgba(255,255,255,.05); }
.total-card__icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.total-card__icon svg { width: 28px; fill: none; stroke: #aeb7ff; stroke-width: 1.7; }
.total-card span, .total-card strong, .total-card small { display: block; }
.total-card span { color: rgba(255,255,255,.73); }
.total-card strong { margin: 3px 0 -1px; font-size: clamp(2.15rem,3.5vw,3.25rem); line-height: 1.05; letter-spacing: -.03em; }
.total-card small { color: #c0c6ff; }
.total-card__stamp { position: absolute; top: 17px; right: 18px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.35); }
.metric-card { padding: 20px; background: #fff; border: 1px solid #e0e5ec; box-shadow: 0 10px 25px rgba(30,40,72,.05); }
.metric-card__top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; }
.metric-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); }
.metric-card h3 { min-height: 48px; margin: 15px 0 8px; font-size: .96rem; line-height: 1.4; }
.metric-card__value { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.metric-card__value strong { font-size: 1.85rem; line-height: 1; letter-spacing: -.03em; }
.metric-card__value span { color: var(--accent); font-weight: 700; }
.mini-progress { height: 5px; margin: 15px 0 9px; border-radius: 99px; background: #edf0f4; overflow: hidden; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.metric-card small { color: var(--muted); font-size: .68rem; }
.metric-card--amber { --accent: #d99b18; } .metric-card--violet { --accent: #8065ce; } .metric-card--blue { --accent: #3c88bb; } .metric-card--indigo { --accent: #4856c9; } .metric-card--rose { --accent: #d94e63; }
.legend-summary { color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.legend-dot--safe { background: #34a873; } .legend-dot--risk { background: #dd5064; }
.interpret-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.interpret-card { padding: 20px; box-shadow: 0 8px 24px rgba(30,40,72,.05); }
.interpret-card__header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.interpret-card h3 { margin: 0; font-size: 1rem; }
.interpret-card p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.interpret-card__header > strong { color: var(--indigo); font-size: 1.15rem; }
.stacked-bar { display: flex; height: 9px; margin: 19px 0 18px; border-radius: 99px; overflow: hidden; background: #edf0f4; }
.stacked-bar span { height: 100%; min-width: 0; }
.segment-list { display: grid; gap: 10px; }
.segment-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .77rem; }
.segment-label { min-width: 0; display: flex; align-items: center; gap: 7px; color: #4f5b70; }
.segment-label i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.segment-value { display: flex; align-items: baseline; gap: 7px; }
.segment-value strong { font-size: .84rem; } .segment-value small { min-width: 36px; text-align: right; color: var(--muted); }
.analytics-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 14px; }
.analytics-grid--three { grid-template-columns: 1fr 1fr 1.25fr; }
.chart-card { min-width: 0; padding: 22px; box-shadow: 0 8px 24px rgba(30,40,72,.05); }
.chart-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.chart-card__header h3 { margin: 0; font-size: 1.05rem; } .chart-card__header p { margin: 3px 0 0; color: var(--muted); font-size: .77rem; }
.chart-card__header > span { padding: 5px 9px; border-radius: 8px; color: #4f5fbd; background: var(--indigo-soft); font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.chart-wrap { position: relative; width: 100%; height: 300px; }
.chart-wrap--donut { width: 230px; height: 230px; margin: 0 auto; }
.chart-wrap--factors { height: 330px; } .chart-wrap--tall { height: 340px; }
.donut-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); pointer-events: none; text-align: center; }
.donut-center strong, .donut-center span { display: block; } .donut-center strong { font-size: 1.45rem; line-height: 1.1; } .donut-center span { color: var(--muted); font-size: .7rem; }
.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; }
.chart-legend__item { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: #536077; }
.chart-legend__item i { width: 8px; height: 8px; border-radius: 50%; } .chart-legend__item strong { color: var(--ink); }
.method-note { margin-top: 42px; padding: 19px 22px; display: flex; align-items: center; gap: 15px; box-shadow: none; background: #f8f9fd; }
.method-note__icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--indigo); font-family: Georgia,serif; font-weight: 700; }
.method-note strong { display: block; font-size: .9rem; } .method-note p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
.print-button { margin-left: auto; flex: 0 0 auto; border: 1px solid #ced5e0; border-radius: 10px; padding: 8px 12px; color: #4c5870; background: #fff; cursor: pointer; }
footer { width: min(1500px,calc(100% - 40px)); margin: 28px auto 0; padding: 22px 0 30px; border-top: 1px solid #dce1e8; color: #7a8597; display: flex; justify-content: space-between; gap: 20px; font-size: .72rem; }
@media (max-width: 1320px) { .filter-form { grid-template-columns: repeat(3,1fr); } .overview-grid { grid-template-columns: repeat(3,1fr); } .analytics-grid--three { grid-template-columns: 1fr 1fr; } .analytics-grid--three .chart-card:last-child { grid-column: 1/-1; } }
@media (max-width: 900px) { .hero { align-items: flex-start; flex-direction: column; padding-top: 40px; } .hero__meta { margin-left: 90px; } main { width: min(100% - 24px,1500px); } .filter-toggle { display: inline-flex; } .filter-form { grid-template-columns: repeat(2,1fr); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease,opacity .2s ease; } .filter-form.is-open { max-height: 1000px; opacity: 1; } .overview-grid { grid-template-columns: repeat(2,1fr); } .total-card { grid-column: 1/-1; } .interpret-grid { grid-template-columns: repeat(2,1fr); } .analytics-grid, .analytics-grid--three { grid-template-columns: 1fr; } .analytics-grid--three .chart-card:last-child { grid-column: auto; } }
@media (max-width: 560px) { .hero { min-height: 360px; padding: 32px 20px 68px; } .hero__content { gap: 13px; } .brand-mark { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; } .brand-mark svg { width: 33px; } .hero h1 { font-size: 1.78rem; } .hero p { font-size: .9rem; } .privacy-pill { border-radius: 12px; align-items: flex-start; } .hero__meta { margin-left: 63px; min-width: 0; width: calc(100% - 63px); } main { margin-top: -28px; } .filter-card { padding: 18px; } .filter-form { grid-template-columns: 1fr; } .filter-actions { flex-direction: column; } .button { width: 100%; } .section-heading { align-items: flex-start; flex-direction: column; } .section-heading--filter { flex-direction: row; align-items: center; } .overview-grid, .interpret-grid { grid-template-columns: 1fr; } .chart-card { padding: 18px 14px; } .chart-wrap { height: 270px; } .chart-wrap--donut { width: 210px; height: 210px; } .method-note { align-items: flex-start; flex-wrap: wrap; } .print-button { margin-left: 49px; } footer { width: calc(100% - 24px); flex-direction: column; gap: 5px; } }
@media print { body { background: #fff; } .hero { min-height: auto; padding: 30px; print-color-adjust: exact; -webkit-print-color-adjust: exact; } main { width: 100%; margin: 20px 0 0; padding: 0 12px; } .filter-card, .print-button { display: none !important; } .section-heading { margin-top: 28px; } .overview-grid { grid-template-columns: repeat(3,1fr); } .interpret-grid { grid-template-columns: repeat(3,1fr); } .analytics-grid, .analytics-grid--three { grid-template-columns: 1fr 1fr; } .chart-card, .interpret-card { break-inside: avoid; box-shadow: none; } footer { width: 100%; padding-inline: 12px; } }