/* 641: หน้าสถานะระบบ — มือถือก่อน · ใช้ token ของ pann-design.css · มีค่าสำรองเผื่อไฟล์กลางโหลดไม่ได้ */
:root{--st-ok:#1f9d55;--st-slow:#d69e2e;--st-down:#d64545;--st-maint:#3b82c4;--st-unknown:#b8bcc4}
html{font-family:system-ui,"Noto Sans Thai",Tahoma,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--pann-bg,#f6f7f9);color:var(--pann-fg,#1b1f24)}
a{color:var(--pann-brand,#2457c5)}
.st-wrap{max-width:860px;margin:0 auto;padding:0 16px}
.st-header{background:var(--pann-surface,#fff);border-bottom:1px solid var(--pann-line,#e3e6ea)}
.st-header-inner{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.st-brand{display:flex;align-items:center;gap:8px;min-width:0}
.st-brand strong{font-size:1.15rem}
.st-brand span{color:var(--pann-fg-muted,#5b6470);font-size:.95rem}
.st-link{font-size:.95rem;white-space:nowrap}
.st-main{padding-top:16px;padding-bottom:40px}
.st-muted{color:var(--pann-fg-muted,#5b6470);font-size:.9rem;margin:2px 0 0}
.st-h2{font-size:1.05rem;margin:24px 0 8px}
.st-overall{display:flex;gap:12px;align-items:center;padding:16px;border-radius:14px;background:var(--pann-surface,#fff);border:1px solid var(--pann-line,#e3e6ea)}
.st-overall h1{font-size:1.2rem;margin:0;line-height:1.35}
.st-dot{flex:none;width:18px;height:18px;border-radius:50%;background:var(--st-unknown)}
.st-overall--ok .st-dot{background:var(--st-ok)}
.st-overall--slow .st-dot{background:var(--st-slow)}
.st-overall--down .st-dot{background:var(--st-down)}
.st-overall--maintenance .st-dot{background:var(--st-maint)}
.st-overall--down{border-color:var(--st-down)}
.st-notices{display:grid;gap:10px;margin-top:12px}
.st-notice{padding:14px 16px;border-radius:12px;background:var(--pann-surface,#fff);border-left:5px solid var(--st-slow);border-top:1px solid var(--pann-line,#e3e6ea);border-right:1px solid var(--pann-line,#e3e6ea);border-bottom:1px solid var(--pann-line,#e3e6ea)}
.st-notice--maintenance{border-left-color:var(--st-maint)}
.st-notice h3{font-size:1rem;margin:0 0 4px}
.st-notice p{margin:4px 0 0;white-space:pre-line;line-height:1.5}
.st-apps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-app{padding:12px 14px;border-radius:12px;background:var(--pann-surface,#fff);border:1px solid var(--pann-line,#e3e6ea)}
.st-app-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.st-app-name{font-weight:600;min-width:0}
.st-pill{flex:none;font-size:.85rem;padding:3px 10px;border-radius:999px;color:#fff;background:var(--st-unknown)}
.st-pill--ok{background:var(--st-ok)}
.st-pill--slow{background:var(--st-slow);color:#1b1f24}
.st-pill--down{background:var(--st-down)}
.st-pill--maintenance{background:var(--st-maint)}
.st-bars{display:flex;gap:1px;height:26px;margin-top:10px;align-items:stretch}
.st-bar{flex:1 1 0;min-width:0;border-radius:2px;background:var(--st-unknown)}
.st-bar--ok{background:var(--st-ok)}
.st-bar--slow{background:var(--st-slow)}
.st-bar--down{background:var(--st-down)}
.st-bar--maintenance{background:var(--st-maint)}
.st-bar-foot{display:flex;justify-content:space-between;font-size:.8rem;color:var(--pann-fg-muted,#5b6470);margin-top:4px}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.st-sq{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;background:var(--st-unknown)}
.st-sq--ok{background:var(--st-ok)}.st-sq--slow{background:var(--st-slow)}.st-sq--down{background:var(--st-down)}.st-sq--maintenance{background:var(--st-maint)}
.st-past{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-past li{padding:10px 14px;border-radius:10px;background:var(--pann-surface,#fff);border:1px solid var(--pann-line,#e3e6ea);font-size:.95rem;line-height:1.5}
.st-foot{margin-top:28px;line-height:1.6}
/* จอแคบมาก: แถบ 90 วันแสดง 30 วันล่าสุด */
@media (max-width:420px){.st-bar.st-bar--old{display:none}}
@media (prefers-color-scheme:dark){
  body{background:var(--pann-bg,#111418);color:var(--pann-fg,#e8eaed)}
  .st-header,.st-overall,.st-app,.st-notice,.st-past li{background:var(--pann-surface,#1a1e24);border-color:var(--pann-line,#2c323a)}
  .st-notice{border-left-color:var(--st-slow)}
  .st-notice--maintenance{border-left-color:var(--st-maint)}
  .st-overall--down{border-color:var(--st-down)}
}
/* หน้าประกาศ (manage.html) */
.st-form{display:grid;gap:10px;margin-top:8px}
.st-form label{display:grid;gap:4px;font-size:.95rem}
.st-form input,.st-form select,.st-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--pann-line,#cfd4da);background:var(--pann-input,#fff);color:inherit;font:inherit}
.st-form fieldset{border:1px solid var(--pann-line,#e3e6ea);border-radius:8px;padding:8px 10px}
.st-checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.st-form .st-check{display:inline-flex;align-items:center;gap:4px}
.st-form .st-check input{width:auto}
.st-when{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.st-btn{min-height:44px;padding:0 16px;border-radius:10px;border:0;background:var(--pann-brand,#2457c5);color:#fff;font:inherit;cursor:pointer}
.st-btn--ghost{background:transparent;color:var(--pann-brand,#2457c5);border:1px solid currentColor}