@font-face{font-family:NotoThai;src:url('/okmai/assets/NotoSansThai.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#091e28;--surface:#102c38;--raised:#153642;--border:#22424d;--text:#eef8f7;--muted:#9cb7c0;--mint:#5ddcba;--mint-deep:#173f40;--gold:#e6c479;--radius:22px;--font:NotoThai,system-ui,sans-serif}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-tap-highlight-color:transparent}button,input,a{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;color:inherit;border:0;background:none;padding:0}button:disabled{opacity:.3;cursor:default}a{color:inherit;text-decoration:none}button,a,input,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint)}button:active:not(:disabled),a:active{transform:translateY(1px)}h1,h2,h3,p{margin:0}h1{font-size:22px}h2{font-size:15px;font-weight:600}h3{font-size:15px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.sprite{position:absolute;width:0;height:0;overflow:hidden}.muted{color:var(--muted);font-size:12px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.5px;color:var(--mint);margin-bottom:5px}.app-shell{max-width:760px;margin:auto;padding:14px 18px calc(92px + env(safe-area-inset-bottom));padding-top:max(14px,env(safe-area-inset-top))}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.brand{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#d9f3e9;flex-shrink:0;overflow:hidden}.brand img{width:45px;height:45px;object-fit:contain}.location-pill{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-align:left;min-height:48px}.location-pill>span{display:flex;flex-direction:column;min-width:0}.location-pill small{font-size:10px;color:var(--muted);margin-bottom:1px}.location-pill strong{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.location-pill .chevron{width:16px;height:16px;transform:rotate(90deg);color:var(--mint)}.icon-button{display:inline-flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;border-radius:13px;color:var(--muted)}.icon-button:hover:not(:disabled){background:var(--raised);color:var(--text)}.about-button{border:1px solid var(--border);min-width:38px;min-height:38px}.about-button svg{width:19px;height:19px}.mode-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.mode-switch{display:flex;padding:4px;background:#0d2631;border:1px solid #193744;border-radius:14px;gap:3px}.mode-switch button{min-height:36px;min-width:112px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--muted);border-radius:10px}.mode-switch svg{width:17px;height:17px}.mode-switch button[aria-pressed=true]{background:var(--mint);color:#10332e;font-weight:700;box-shadow:0 3px 12px #0002}.week-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}.month-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px}.month-button h1{font-size:17px;font-weight:600}.month-button svg{width:16px;height:16px;color:var(--mint)}.previous svg{transform:rotate(180deg)}.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:15px}.week-day{min-width:0;padding-top:2px}.week-day .weekday{font-size:11px;color:var(--muted);display:block;text-align:center;margin-bottom:7px}.week-cell{min-height:66px;background:#102d3b;border:1px solid #1d4050;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;transition:background .12s}.week-cell strong{font-size:23px;line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums}.week-day[aria-pressed=true] .week-cell{background:var(--mint);color:#092d29;border-color:var(--mint);box-shadow:0 4px 18px #35c69c1c}.week-day[aria-pressed=true] .weekday{color:var(--mint)}.week-day.is-today .week-cell::after{content:'';position:absolute;top:5px;right:5px;width:3px;height:3px;border-radius:50%;background:currentColor}.score-dots{display:flex;gap:3px;min-height:5px;justify-content:center}.score-dots i{width:4px;height:4px;background:var(--mint);border-radius:100%}.moderate .score-dots i{background:var(--gold)}.week-day[aria-pressed=true] .score-dots i,.day-cell[aria-pressed=true] .score-dots i{background:#195448}.week-day:disabled{opacity:1}.week-day:disabled .week-cell{background:#0c232c;color:#36515b;border-color:#18313b}.week-day:disabled .score-dots{visibility:hidden}.dashboard{display:grid;gap:12px}.forecast-card{padding:17px 16px 0;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(155deg,#13333e 0%,#0e2b38 68%);overflow:hidden;box-shadow:0 10px 24px #04131b25}.day-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#d1e2e6;margin-bottom:10px}.quality-badge{font-size:9px;border:1px solid #426a65;background:#1c4041;color:#b4ead8;border-radius:20px;padding:3px 7px;white-space:nowrap}.quality-badge.moderate{background:#393d32;border-color:#655e45;color:#efd998}.day-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1.6fr) minmax(0,1fr);align-items:center;gap:4px;min-height:119px}.summary-side{display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0}.summary-side>svg{width:29px;height:29px;color:#b2dce6;margin-bottom:5px}.summary-side>strong{font-size:23px;line-height:1.35;font-weight:550;white-space:nowrap;font-variant-numeric:tabular-nums}.summary-side>strong span{font-size:14px;color:#b7cfd4;margin-left:2px}.summary-side>span{font-size:10px;color:#b4cbd0;margin-top:2px}.summary-side small{font-size:9px;color:var(--muted);margin-top:2px}.moon-side>svg{fill:#a1c9d844;stroke:#b5dce6}.score-gauge{position:relative;align-self:center;min-width:0}.score-gauge>svg{width:100%;height:auto;display:block;overflow:visible}.gauge-track,.gauge-fill{fill:none;stroke-width:8;stroke-linecap:round}.gauge-track{stroke:#234954}.gauge-fill{stroke:var(--mint)}.gauge-start{fill:var(--mint);stroke:#10303b;stroke-width:3}.score-content{position:absolute;inset:26% 0 0;display:flex;align-items:center;flex-direction:column;justify-content:center}.score-content>div{line-height:1}.score-content strong{font-size:42px;letter-spacing:-2px;font-weight:600;font-variant-numeric:tabular-nums}.score-content>div>span{font-size:11px;color:#a5c1c7;margin-left:3px}.score-content button{display:flex;align-items:center;gap:4px;font-size:9px;letter-spacing:1px;color:var(--muted);min-height:30px}.score-content button svg{width:11px;height:11px}.model-note{text-align:center;font-size:10px;color:#9bb7bd;margin:4px 0 19px}.rhythm-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.rhythm-heading h2{font-size:12px;font-weight:500}.rhythm-heading>span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot.strong{background:var(--mint)}.dot.moderate{background:var(--gold)}.dot.weather-dot{background:#9dd0e5}.chart-wrap{height:130px;position:relative}#rhythm-chart{width:100%;height:100%;overflow:visible}.chart-grid{stroke:#32535d;stroke-width:1;stroke-dasharray:3 7;opacity:.7;vector-effect:non-scaling-stroke}#chart-windows rect{fill:#51ceac;fill-opacity:.07;stroke:none}#chart-line{stroke:var(--mint);stroke-width:2.8;vector-effect:non-scaling-stroke}#chart-peak{fill:var(--mint);stroke:#153b40;stroke-width:3;vector-effect:non-scaling-stroke}.chart-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;margin:8px 0 14px}.best-window{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #285c58;border-radius:13px;background:#16413f80}.window-symbol{display:grid;place-items:center;color:var(--mint)}.window-symbol svg{width:23px;height:23px}.best-window>div:nth-child(2){display:flex;flex-direction:column;min-width:0}.best-window span:not(.time-zone){font-size:10px;color:#b6d8cf}.best-window strong{font-size:18px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}.time-zone{font-size:9px;margin-left:auto;text-align:right;color:#8bb2ac;line-height:1.5}.windows-details summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:var(--muted);cursor:pointer;min-height:41px}.windows-details summary::-webkit-details-marker{display:none}.windows-details summary svg{width:12px;height:12px;transform:rotate(90deg)}.windows-details[open] summary svg{transform:rotate(270deg)}.windows-details>p{font-size:11px;line-height:1.6;padding:0 0 12px}.windows-list{display:grid;gap:6px;padding-bottom:14px}.window-item{display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:1px solid var(--border);padding:8px 0}.window-item>span{color:var(--muted);font-size:10px}.window-item>strong{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.window-item.major>span{color:var(--mint)}.conditions-column{display:flex;flex-direction:column;gap:12px}.panel{padding:15px 16px;border:1px solid var(--border);border-radius:19px;background:#102b36}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.panel-heading h2{font-size:13px}.data-badge,.mini-label{font-size:9px;color:var(--muted)}.data-badge.available{color:var(--mint)}.weather-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.weather-item{display:flex;align-items:center;flex-direction:column;gap:3px;min-width:0;border-right:1px solid #24434d}.weather-item:last-child{border:0}.weather-item>svg{width:20px;height:20px;color:#91c5d5;margin:0 0 4px}.weather-item>small{font-size:10px;color:var(--muted)}.weather-item>strong{font-size:23px;font-weight:550;line-height:1.4;font-variant-numeric:tabular-nums}.weather-item>strong>span{font-size:9px;margin-left:4px;color:#b1cbd1}.weather-item .sub-value{display:none}.weather-note{font-size:10px;line-height:1.6;color:var(--muted);margin-top:13px}.sun-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.sun-grid>div{display:flex;flex-direction:column;align-items:center;gap:4px}.sun-grid svg{width:21px;height:21px;color:var(--gold)}.sun-grid>div:nth-child(n+3) svg{color:#a6d0e0}.sun-grid small{font-size:9px;color:var(--muted)}.sun-grid strong{font-size:15px;font-weight:550;font-variant-numeric:tabular-nums}.data-footnote{font-size:10px;color:#82a2ac;text-align:center;padding:0 8px;line-height:1.7;white-space:pre-line}.bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:760px;margin:auto;padding:9px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #23414b;background:#0a212bf7;backdrop-filter:blur(18px)}.bottom-nav button,.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#83a5b1;min-height:48px;justify-content:center;border-radius:12px}.bottom-nav svg{width:22px;height:22px}.bottom-nav span{font-size:10px}.bottom-nav [aria-current=page]{color:var(--mint);background:#1a48403d}.connection-bar{border:1px solid #645836;background:#353629;color:#f1d695;border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:12px}.error-panel{padding:18px;border:1px solid #7c4c48;background:#392e30;border-radius:16px;margin-bottom:14px}.error-panel p{font-size:12px;margin:6px 0 14px}.primary-button{min-height:44px;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;background:var(--mint);color:#0d302b;font-size:12px;font-weight:650}.primary-button svg{width:17px;height:17px}.small-button{min-height:40px;border:1px solid #376251;padding:6px 12px;border-radius:10px;color:var(--mint);font-size:11px}.full{width:100%}.saved-section{padding:16px 0}.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.saved-list{display:grid;gap:12px;margin-top:20px}.saved-spot{display:flex;align-items:center;gap:5px;padding:10px 9px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.spot-select{min-width:0;flex:1;text-align:left;min-height:48px;display:flex;flex-direction:column;justify-content:center;gap:4px}.spot-select strong{font-size:14px;overflow-wrap:anywhere}.spot-select small{font-size:10px;color:var(--muted)}.empty-state{display:flex;align-items:center;flex-direction:column;text-align:center;padding:40px 16px;border:1px dashed #38616b;border-radius:20px}.empty-state>svg{width:40px;height:40px;color:var(--mint);margin-bottom:16px}.empty-state>p{font-size:12px;color:var(--muted);max-width:250px;margin:8px 0 20px}
dialog{color:var(--text);background:#102b36;border:1px solid #2b505b;border-radius:26px;max-width:min(460px,calc(100% - 24px));max-height:90dvh;padding:24px;box-shadow:0 25px 100px #0006}dialog::backdrop{background:#021016ba;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dialog-head h2{font-size:21px}.dialog-head .icon-button{background:#1b3d49}.welcome-dialog{text-align:center;padding:32px 24px}.dialog-close{position:absolute;top:12px;right:12px}.welcome-dialog>img{width:114px;height:114px;border-radius:28px;background:#ddf7f0;margin:8px 0 20px}.welcome-dialog h2{font-size:23px;margin-bottom:6px}.welcome-dialog>.muted{font-size:12px;margin-bottom:20px}.welcome-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.welcome-choices button{display:flex;flex-direction:column;align-items:center;padding:21px 8px;border:1px solid #396568;border-radius:17px;background:#163b43;gap:8px}.welcome-choices svg{width:30px;height:30px;color:var(--mint)}.welcome-choices strong{font-size:14px}.welcome-choices span{font-size:9px;color:var(--muted)}.gps-button{display:flex;align-items:center;gap:12px;background:#18443f;border:1px solid #2b6b5a;padding:13px 16px;width:100%;border-radius:14px;color:var(--mint);text-align:left}.gps-button span{display:flex;flex-direction:column;font-size:14px;font-weight:600}.gps-button small{font-size:10px;color:#9fc6b9;font-weight:400;margin-top:3px}.status-message{font-size:12px;color:var(--gold);margin:12px 0}.status-message:empty{margin:0}.preset-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 24px}.preset-button{min-height:48px;display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--border);border-radius:12px;font-size:11px;text-align:left}.preset-button svg{color:var(--mint);width:17px;height:17px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:6px;margin:12px 0}input{min-width:0;width:100%;padding:12px;border:1px solid #345965;border-radius:11px;color:var(--text);background:#09232e;font-size:14px}input::placeholder{color:#799aa6}.about-content h3{font-size:15px;color:#c6e4db;margin:20px 0 8px}.about-content p{font-size:12px;color:#b2c9d0;line-height:1.85}.about-content a{font-size:12px;text-decoration:underline;text-underline-offset:4px;color:var(--mint)}.about-links{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0}.about-content .version-note{font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:16px}.calendar-dialog{padding:24px 18px}.calendar-range{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px}.calendar-range>strong{font-size:13px;font-weight:500}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;color:var(--muted);text-align:center;margin-bottom:9px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.day-cell{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;border:1px solid var(--border);background:#153643;border-radius:11px}.day-cell strong{font-size:18px;font-weight:550;line-height:1}.day-mini{font-size:8px;min-height:10px;color:var(--muted)}.day-cell .weather-dot{position:absolute;width:4px;height:4px;background:#9dd0e5;right:4px;top:4px;border-radius:50%}.day-cell[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#0e332b}.day-cell[aria-pressed=true] .day-mini{color:#1e5c4b}.calendar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:18px 0 10px;font-size:9px;color:var(--muted)}.calendar-legend>span{display:flex;align-items:center;gap:5px}.calendar-help{text-align:center;font-size:10px;color:var(--muted);line-height:1.75}.calendar-loading{height:62px;background:var(--raised);border-radius:11px;opacity:.5}.toast{position:fixed;z-index:100;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 18px;border-radius:14px;background:#d9f3e9;color:#10322c;font-size:12px;box-shadow:0 8px 30px #0005}.loading #refresh svg{animation:spin 1.5s linear infinite}.loading #chart-peak{display:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:650px){.app-shell{padding:24px 26px 110px}.topbar{margin-bottom:22px}.brand{width:54px;height:54px}.brand img{width:50px;height:50px}.location-pill strong{font-size:21px}.location-pill small{font-size:12px}.week-strip{gap:12px}.week-cell{min-height:72px}.dashboard{grid-template-columns:1.15fr 1fr;align-items:start;gap:16px}.day-summary{grid-template-columns:minmax(0,1fr) 135px minmax(0,1fr)}.forecast-card{padding:18px 16px 0}.day-heading{font-size:11px}.chart-wrap{height:140px}.best-window strong{font-size:17px}.quality-badge{font-size:8px}.summary-side>strong{font-size:20px}.summary-side>span{font-size:9px}.summary-side small{font-size:8px}.model-note{font-size:9px;margin-top:8px}.sun-grid{gap:0}.sun-grid strong{font-size:14px}.conditions-column{gap:16px}.weather-note{font-size:11px}.bottom-nav{border-radius:22px 22px 0 0}.bottom-nav span{font-size:11px}.panel{padding:18px 14px}.data-badge{font-size:8px}}
@media(max-width:360px){.app-shell{padding-left:12px;padding-right:12px}.week-strip{gap:5px}.week-cell{min-height:62px}.forecast-card{padding-left:12px;padding-right:12px}.score-content strong{font-size:38px}.summary-side>strong{font-size:21px}.day-heading{font-size:11px}.quality-badge{font-size:8px}.mode-switch button{min-width:106px}dialog{padding:22px 16px}.calendar-grid{gap:5px}.day-cell{min-height:59px}}
@media(max-width:600px){.sheet-dialog{margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;border-radius:25px 25px 0 0;padding-bottom:calc(26px + env(safe-area-inset-bottom))}.sheet-dialog .dialog-head{position:sticky;top:-24px;z-index:2;background:#102b36;padding:8px 0 12px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Compact daily view: retain readable values and move detail behind disclosure. */
#chart-area{stroke:none}.score-content{inset:42% 0 0;justify-content:flex-start}.score-content strong{font-size:36px}.score-content button{min-height:24px}.day-summary{min-height:103px}.forecast-card{padding-top:13px}.day-heading{margin-bottom:4px}.model-note{margin:6px 0 13px}.rhythm-heading{margin-bottom:6px}.chart-wrap{height:102px}.chart-axis{margin:6px 0 11px}.best-window{padding:8px 10px}.best-window strong{font-size:17px}.windows-details summary{min-height:35px}.panel{padding:12px 14px}.panel-heading{margin-bottom:10px}.weather-item>svg{display:none}.weather-item>small{font-size:11px}.weather-note{margin-top:9px}.sun-grid small{font-size:10px}.sun-grid{gap:3px}.sun-grid strong{font-size:15px}
@media(max-width:649px){.app-shell{padding-top:max(12px,env(safe-area-inset-top))}.topbar{margin-bottom:9px}.brand{width:44px;height:44px}.brand img{width:41px;height:41px}.location-pill{min-height:44px}.mode-row{margin-bottom:0}.mode-switch{padding:3px}.mode-switch button{min-height:30px}.week-heading{margin-bottom:0}.week-heading .icon-button,.month-button{min-height:40px}.week-cell{min-height:57px}.week-day .weekday{margin-bottom:4px}.week-strip{margin-bottom:12px}.score-content>div>span{font-size:10px}.day-summary{min-height:102px}.forecast-card{padding-left:14px;padding-right:14px}.summary-side>strong{font-size:21px}.summary-side>svg{width:24px;height:24px;margin-bottom:3px}.summary-side small{font-size:9px}.model-note{font-size:10px}.data-footnote{font-size:9px}}