:root {font: 16px/1.55 system-ui, Tahoma, sans-serif; color:#193742; background:#f1f5f5}
* {box-sizing:border-box}
body {margin:0; overflow-wrap:anywhere}
header {background:#173e46; color:white; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px max(5%,calc((100% - 1000px)/2))}
.brand {display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px}
.brand span {color:#cde2e2; font-size:.83rem}
main {max-width:1040px; margin:auto; padding:28px 20px}
h1,h2,p {margin:0 0 8px}
h1 {font-size:clamp(1.55rem,4vw,2.35rem); line-height:1.3}
h2 {font-size:1.15rem}
p,small,#time {color:#49616a}
small,#time {font-size:.86rem}
.heading,.controls {display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.heading {justify-content:space-between; margin:0 0 14px}
.heading p {margin:3px 0 0}
.card,dialog {background:white; padding:20px; border:1px solid #d4e1e1; border-radius:15px; margin:12px 0}
.status {border-inline-start:4px solid #347c7a}
#time {display:flex; gap:2px 18px; flex-wrap:wrap; margin-top:4px; font-variant-numeric:tabular-nums}
.grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.grid .card {margin:0; padding:15px 18px; color:#145f79; background:#e6f2f8; border-color:#cddfe9}
.grid .card:nth-child(2) {background:#e4f3ed; color:#205e4c; border-color:#c9e2d7}
.grid .card:nth-child(3) {background:#f1ecf9; color:#624c82; border-color:#dfd5ec}
.grid .card:nth-child(4) {background:#fcf0de; color:#835616; border-color:#ecddc4}
.grid small {color:inherit}
.metric {display:block; font-size:clamp(1.35rem,4.8vw,1.9rem); font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums}
.disk {display:grid; gap:4px; margin:10px 0 15px}
.disk span {font-size:.94rem}
progress {display:block; width:100%; height:10px; appearance:none; border:0; background:#e3ecec; border-radius:10px; color:#287a70; accent-color:#287a70}
progress::-webkit-progress-bar {background:#e3ecec; border-radius:10px}
progress::-webkit-progress-value {background:currentColor; border-radius:10px}
progress::-moz-progress-bar {background:currentColor; border-radius:10px}
.warn progress {color:#b56824}
.services {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:8px}
.services span {padding:7px 10px; border:1px solid #d6e3e4; border-radius:8px}
button,a,input {font:inherit}
button,.controls a {display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:9px; padding:8px 14px; text-align:center; font-weight:600}
button {cursor:pointer; background:#fff; color:#24444b; border:1px solid #a9bdbf}
button:disabled {opacity:.5; cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #1783b0; outline-offset:2px}
.primary {background:#19665f; color:white; border-color:#19665f; width:100%}
.danger {border-color:#bb8176; color:#933e30}
a {color:#17675e}
label,input {display:block; width:100%; min-width:0}
input {margin:4px 0 16px; padding:10px; border:1px solid #a1b2b4; border-radius:8px}
.sign {max-width:440px; margin:8vh auto}
dialog {width:min(440px,calc(100% - 28px)); max-height:85dvh; overflow-y:auto; margin:auto}
dialog::backdrop {background:#14313bbc}
#events p {padding:8px 0; border-bottom:1px solid #e3ecec}
#notice {font-weight:600}
.mobile-nav,[hidden] {display:none!important}
@media(max-width:650px) {
  header {padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
  .brand {display:grid; gap:0; min-width:0}
  header button {font-size:.84rem; flex-shrink:0; padding:6px 10px}
  main {padding:18px max(12px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .heading {gap:8px; align-items:start}
  .heading p {font-size:.84rem}
  .heading button {font-size:.86rem; padding:6px 10px}
  .card,dialog {padding:15px}
  .grid,.services {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .grid .card {padding:12px 14px}
  #time {display:grid; font-size:.8rem}
  .controls {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .controls button,.controls a {min-width:0; padding:8px}
  .controls a {grid-column:1/-1; background:#eef5f4}
  .mobile-nav {display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; z-index:2; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #ccdadb; box-shadow:0 -3px 16px #173b450c; padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .mobile-nav a {display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; min-height:48px; font-size:.8rem; color:#225c62; text-decoration:none}
  .mobile-nav svg {width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
  [id] {scroll-margin-top:10px}
}
@media(max-width:340px) {.grid .card {padding:10px}.services span {font-size:.88rem}}

/* Application frame */
:root{background:#edf3f7;color:#142f43}
header{background:#102c40;flex-wrap:wrap;gap:8px}
.identity,.top-actions{display:flex;align-items:center;gap:9px}
.identity img{border-radius:11px}
.brand{display:grid;gap:0;line-height:1.25}.brand strong{letter-spacing:.025em}
.top-actions button{background:transparent;border-color:#638293;color:#fff;font-size:.85rem}
.top-actions #install{background:#aff2de;color:#113f40;border-color:#aff2de}
.eyebrow,.flag{display:block;font-size:.68rem;font-weight:750;letter-spacing:.13em;color:#376779;margin:0 0 5px}
.card,dialog{border-radius:18px;border-color:#d3e1e7;box-shadow:0 5px 20px #15394b08}
.heading{padding:4px 0}.heading h1{letter-spacing:-.025em}
.status{position:relative;background:linear-gradient(110deg,#14384c,#174b54);color:#fff;border:0;border-left:5px solid #8be8cc}
.status strong:before{content:'';display:inline-block;width:.62em;height:.62em;border-radius:50%;background:#b3c5cd;margin-inline-end:.6em}
.status[data-health="ok"] strong:before{background:#89f1c5}.status[data-health="warn"]{border-color:#f4c273}.status[data-health="warn"] strong:before{background:#f4c273}
#time{color:#d4e4ec}.metric{letter-spacing:-.035em}.grid .card{border-top:3px solid currentColor}
.disk.warn b:after{content:'พื้นที่ใกล้เต็ม';display:inline-block;background:#fff0d7;color:#834500;font-size:.75rem;border-radius:20px;padding:2px 9px;margin-inline-start:8px}
#fallback{margin:12px 0;padding:16px 18px;border-radius:16px;background:#fff4dc;border:1px solid #e9bd72;color:#562f0e}
#fallback .flag{color:#854500;letter-spacing:.015em}#fallback strong{display:block;font-size:1.12rem}#fallback p{color:#5e4229;margin:3px 0 9px}
.z-link{display:inline-flex;align-items:center;min-height:44px;background:#664019;color:#fff;text-decoration:none;font-weight:650;border-radius:10px;padding:8px 14px}
#notice:not(:empty){margin:12px 0 0;padding:10px;background:#eff5f7;border-radius:8px}
#install-help p{margin:14px 0}.mobile-nav a:focus-visible,.mobile-nav a[aria-current]{color:#005e53;background:#e0f4ee;border-radius:12px}
@media(max-width:420px){header{padding-inline:10px}.identity{gap:6px}.identity img{width:32px;height:32px}.brand span{font-size:.7rem}.top-actions{gap:5px}.top-actions button{padding:5px 8px;font-size:.78rem}}
@media(display-mode:standalone){#install{display:none}}