/* Shared page rhythm and camera chrome. Map layers / satellite settings are untouched. */
body.ku-app { --ku-page-width:1200px; --ku-gutter:24px; padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
.ku-app:not(.ku-map) .ku-header { max-width:var(--ku-page-width); padding-inline:var(--ku-gutter); height:auto; min-height:82px; }
.ku-app:not(.ku-map) :is(.news-wrap,.kn-wall,.kwifi,.ops,.ops-auth,.ku-cameras) { width:100%; max-width:var(--ku-page-width); margin:0 auto; padding:24px var(--ku-gutter) 32px; }
.ku-content { background:#edf3f7; }
.ku-content :is(.news-wrap,.kn-wall,.kwifi,.ops,.ops-auth) { background:#fff; min-height:60vh; font-family:var(--f-body); }
.ku-content :is(.post,.cam-single) { max-width:none; margin-inline:0; }
.ku-content :is(h1,.news-title,.post-title,.kn-heading h1,.kwifi-heading h1) { font-family:var(--f-display); font-size:clamp(26px,3vw,36px); line-height:1.4; letter-spacing:-.5px; color:var(--ku-ink); overflow-wrap:anywhere; }
.ku-content :is(.post,.news-content) { font-size:16px; line-height:1.85; }
.ku-content :is(.post,.news-content) img { max-width:100%; height:auto; }
.ku-content :is(.post,.news-content) :is(iframe,video) { max-width:100%; }
.ku-content :is(.kwifi-filters,.kn-toolbar,.ops-top,.auth-card,.kn-ai-panel) { border-color:#dce7f0; border-radius:16px; }
.ku-content .auth-card { border:1px solid #dce7f0; box-shadow:0 5px 24px #18345914; }
.ku-content .auth-btn { background:#009cae; color:#fff; border-color:#009cae; }
.ku-content :is(.kwifi-heading,.kn-heading) { margin-top:0; }
.ku-app input,.ku-app select,.ku-app textarea { max-width:100%; min-width:0; }
.ku-content :is(.news-content,.post) table { display:block; max-width:100%; overflow-x:auto; }
.ku-content :is(.news-content,.post) pre { max-width:100%; overflow-x:auto; }
.ku-menu { max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow-y:auto; overscroll-behavior:contain; }
.ku-menu header { position:sticky; top:-20px; padding-top:8px; background:white; z-index:2; }
.ku-custom-menu { padding:12px 4px; border-bottom:1px solid #e4edf3; font-size:14px; }
.ku-custom-menu summary { cursor:pointer; min-height:30px; }
.ku-custom-menu ul { padding-left:20px; }
.ku-custom-menu a { display:block; padding:8px 0; color:inherit; }

/* Each weather value has its own row; long district names never share rain's column. */
.ku-app .wx { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:start; }
.ku-app .wx>* { min-width:0; }
.ku-app .wx-grid { grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr)); gap:8px; }
.ku-app .wx-d { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-areas:'icon temp' 'name name' 'condition condition' 'rain rain'; gap:3px 8px; padding:12px; align-content:start; align-items:center; min-width:0; height:100%; font-size:13px; line-height:1.55; background:white; color:#173b5c; }
.ku-app .wx-d-icon { grid-area:icon; display:flex; }
.ku-app .wx-d-icon svg { width:26px; height:26px; }
.ku-app .wx-d-icon path[fill="#fff"] { fill:#b8cde0; }
.ku-app .wx-d-temp { grid-area:temp; font-size:20px; line-height:1.3; }
.ku-app .wx-d-name { grid-area:name; font-weight:600; min-width:0; white-space:normal; overflow-wrap:break-word; }
.ku-app .wx-d-condition { grid-area:condition; margin:0; font-size:12px; line-height:1.55; }
.ku-app .wx-d-rain { grid-area:rain; margin-top:4px; padding-top:5px; border-top:1px solid #edf2f6; font-size:12px; white-space:normal; }
.ku-app .wx-now select { width:100%; }
.ku-app .wx-facts div { min-width:0; overflow-wrap:break-word; }

/* One visual frame for snapshots and traffic; only traffic has play controls. */
.ku-app :is(.ct-card,.kt-card,.kn-card,.kw-world-card) { min-width:0; border:1px solid #dbe5ef; border-radius:15px; background:#fff; overflow:hidden; box-shadow:0 3px 13px #12304b08; }
.ku-app :is(.ki-screen,.ct-shot,.kn-shot) { width:100%; height:auto; aspect-ratio:16/9; min-height:0; display:block; position:relative; background:#0d1726; border:0; border-radius:0; padding:0; margin:0; overflow:hidden; }
.ku-app :is(.ki-screen,.ct-shot,.kn-shot)>:is(img,video,iframe) { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; border:0; background:#0d1726; }
.ku-app .ki-screen>.kt-preview { aspect-ratio:auto; height:100%; }
.ki-screen .kt-preview-play,.ki-screen .kt-preview-cta { display:none!important; }
.ku-app .ki-player { background:#0d1726; color:#fff; }
.ku-app .ki-player .ki-controls { display:flex; gap:6px; padding:9px 10px; flex-wrap:wrap; min-height:58px; background:#0d1726; }
.ku-app .ki-controls a { color:#fff; }
.ku-app .ki-thai-clock { display:block; font-size:10px; top:10px; right:10px; }
.ku-app .ki-controls :is(button,a) { min-height:40px; font-size:13px; padding:7px 11px; line-height:1.45; }
.ku-app .ki-controls .ki-play { background:#00a6b6; min-width:80px; }
.ku-app .ki-player:is([data-state=poster],[data-state=offline]) .ki-play { display:none; }
.ku-app .ki-player[data-state=error] .ki-poster-play { display:none; }
.ku-app .ki-player .ki-status { font-size:12px; padding:0 10px 10px; }
.ku-app .ki-player[data-state=poster] .ki-status { display:none; }
.ku-app .ki-screen .kt-preview-type { display:none; }
.ku-app .ki-screen .kt-preview-tag { display:block; background:#9c214b; color:white; top:10px; left:10px; font-size:10px; border-radius:6px; padding:3px 7px; }
.ku-app .ki-screen .kt-location-card { inset:0; border:0; border-radius:0; padding:44px 70px 25px 16px; background:linear-gradient(120deg,#0c1526,#172838)!important; color:#fff; justify-content:center; }
.ku-app .ki-screen .kt-location-card strong { color:#fff!important; max-width:100%; font-size:15px; line-height:1.55; }
.ku-app .ki-screen .kt-location-card small { display:block; color:#c4d6e8!important; font-size:11px; }
.ku-app .ki-screen .kt-preview-caption { display:none; }
.ku-app .ki-screen .kt-preview.has-image .kt-preview-caption { display:block; font-size:10px; padding:3px 10px; background:#0c2034cf; color:#fff; }
.ku-app .ki-poster-play,.ku-app .kc-expand { position:absolute; inset:auto 14px 16px auto; z-index:3; width:46px; height:46px; min-height:0; border-radius:50%; border:2px solid white; background:#00a7b9; color:white; display:grid; place-items:center; font:600 20px/1 var(--f-body); box-shadow:0 0 0 5px #00bed522; padding:0; }
.ku-app .kc-expand { font-size:23px; background:#163b58; box-shadow:none; pointer-events:none; }
.ku-app .ct-shot .ct-tag { top:10px; left:10px; max-width:calc(100% - 20px); bottom:auto; font-size:11px; white-space:normal; line-height:1.4; background:#142c42e8; color:white; border-radius:6px; padding:5px 7px; }
.ku-app .ct-own { left:10px; bottom:9px; right:auto; max-width:calc(100% - 76px); padding:3px 7px; border-radius:5px; background:#332664e6; color:#fff; font-size:11px; }
.ku-app :is(.ct-info,.kt-card-body,.kn-cap,.kw-world-open) { padding:12px 14px; gap:5px; text-align:left; }
.ku-app :is(.ct-info strong,.kt-card-body strong,.kn-cap h3,.kw-world-open>strong) { font-size:16px; line-height:1.55; color:var(--ku-ink); }
.ku-app :is(.ct-info small,.kt-card-body small,.kw-world-open>span) { font-size:12px; line-height:1.65; }
.ku-app .kc-detail,.ku-app .kt-card-action { display:block; border:0; background:none; color:#007e94; font:600 13px/1.5 var(--f-body); padding:8px 0 0; text-align:left; cursor:pointer; }
.ku-app .ct-info .kc-detail { min-height:40px; }
.ku-app.ku-cctv :is(.ct-grid,.kt-grid) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ku-app .ki-screen:fullscreen { width:100vw; height:100dvh; aspect-ratio:auto; }

/* Dialog headers stay reachable in portrait, landscape and browser zoom. */
.ku-app :is(.ct-modal,.kt-viewer,.kn-viewer) { position:fixed; inset:0; width:min(960px,calc(100% - 24px)); height:fit-content; max-width:960px; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); margin:auto; padding:0; border:0; border-radius:16px; background:#fff; color:#14304d; overflow:auto; overscroll-behavior:contain; font-family:var(--f-body); }
.ku-app .ct-modal:not([open]) { display:none; }
.ku-app .ct-modal[open] { display:block; }
.ku-app :is(.ct-modal,.kt-viewer,.kn-viewer)::backdrop { background:#061327cc; }
.ku-app .ct-box { width:100%; max-height:none; overflow:visible; padding:16px; background:white; border-radius:0; }
.ku-app .kt-viewer-box,.ku-app .kn-viewer { padding:16px; }
.ku-app :is(.kc-viewer-head,.kt-viewer-head,.kn-viewer-head) { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:sticky; top:-1px; z-index:8; background:#fff; padding:10px 0; }
.ku-app :is(.kc-viewer-head,.kt-viewer-head,.kn-viewer-head)>div { min-width:0; }
.ku-app :is(.kc-viewer-head,.kt-viewer-head,.kn-viewer-head) h2 { margin:0; font-size:20px; line-height:1.5; color:#0a214f; overflow-wrap:anywhere; }
.ku-app :is(.kc-viewer-head p,.kt-station,#knViewerMeta) { margin:4px 0 0; font-size:12px; line-height:1.55; color:#547086; }
.ku-app :is(.ct-x,.kt-close,.kn-close) { position:static; flex:none; width:44px; height:44px; min-height:44px; border:0; border-radius:12px; background:#e9f0f5; color:#163b58; font-size:28px; line-height:1; }
.ku-app :is(.kc-image-stage,.kt-video-area,.kn-player) { position:relative; width:100%; aspect-ratio:16/9; min-height:0; max-height:65dvh; border-radius:10px; background:#0d1726; overflow:hidden; }
.ku-app :is(.kc-image-stage,.kt-video-area,.kn-player)>:is(img,video,iframe) { position:absolute; inset:0; width:100%; height:100%; max-height:none; min-height:0; object-fit:contain; border:0; }
.ku-app :is(.ct-mstatus,.kt-status,.kn-player-status) { font-size:13px; line-height:1.65; background:none; color:#405f76; margin:10px 0; padding:0; }
.ku-app :is(.ct-mactions,.kt-video-actions,.kn-player-actions) { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 0; background:none; }
.ku-app :is(.ct-mactions,.kt-video-actions,.kn-player-actions) :is(button,a) { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #ccdde8; border-radius:10px; background:#fff; color:#164766; font:600 13px/1.5 var(--f-body); padding:8px 12px; text-decoration:none; }
.ku-app :is(#ctMRefresh,.kt-video-actions .kt-retry,#knRetry) { color:white; background:#009cae; border-color:#009cae; }
.ku-app .kt-player-modes .kt-mode[aria-pressed=true] { background:#009cae; border-color:#009cae; }
.ku-app .kc-connection-options { margin:12px 0; padding:8px 12px; border:1px solid #dce7ef; border-radius:10px; background:#f6f9fb; font-size:13px; }
.ku-app .kc-connection-options summary { min-height:28px; cursor:pointer; align-content:center; color:#315770; }
.ku-app .cam-live { border-radius:14px; overflow:hidden; background:#0d1726; }
.ku-app .cam-live :is(img,video,iframe) { object-fit:contain; max-width:100%; }

@media(max-width:1000px) {
 .ku-app .wx { grid-template-columns:1fr; }
 .ku-app.ku-cctv :is(.ct-grid,.kt-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ku-app .ku-desktop-links { gap:14px; }
}
@media(max-width:760px) {
 body.ku-app { --ku-gutter:14px; }
 .ku-app:not(.ku-map) .ku-header { min-height:67px; }
 .ku-app:not(.ku-map) :is(.news-wrap,.kn-wall,.kwifi,.ops,.ops-auth,.ku-cameras) { padding-top:16px; }
 .ku-app input:not([type=checkbox]):not([type=radio]),.ku-app select,.ku-app textarea { font-size:16px; }
 .ku-app .kh-fanpage { display:none!important; }
 .ku-app .wx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ku-app .wx-now { padding:15px; }
 .ku-app .wx-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ku-app .wx-d { padding:11px; }
 .ku-app :is(.kt-viewer-box,.ct-box,.kn-viewer) { padding:12px; }
 .ku-app :is(.kc-viewer-head,.kt-viewer-head,.kn-viewer-head) h2 { font-size:18px; }
 .ku-app.ku-cctv .kt-filters { grid-template-columns:1fr; }
 .ku-app .ct-bar select { max-width:100%; width:100%; flex-basis:100%; }
 .ku-app .ki-controls :is(button,a) { min-height:44px; }
}
@media(max-width:540px) {
 .ku-app :is(.ct-grid,.kt-grid,.kn-grid,.kw-world-grid) { grid-template-columns:1fr!important; gap:14px; }
 .ku-app .ki-screen .kt-location-card strong { font-size:17px; }
 .ku-app .kt-wall { padding:0; }
 .ku-app .ki-poster-play { width:50px; height:50px; }
 .ku-app .ku-camera-heading { flex-wrap:wrap; }
 .ku-app .ku-thai-clock { margin-left:auto; }
 .ku-app .ku-camera-heading h1 { font-size:27px; }
 .ku-app .kn-heading,.ku-app .kn-summary,.ku-app .kn-source-strip { flex-wrap:wrap; }
 .ku-app .ops-top { flex-wrap:wrap; }
}
@media(max-height:500px) and (orientation:landscape) {
 .ku-app :is(.kc-image-stage,.kt-video-area,.kn-player) { max-height:58dvh; }
 .ku-app :is(.kc-viewer-head,.kt-viewer-head,.kn-viewer-head) { position:static; }
}