*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef1f8;background:#080b14}body{min-height:100vh}.public-health{--accent:#9b6cff;--green:#3ddd8a;--yellow:#e5bd50;--red:#ff667d;position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(114,72,224,.16),transparent 34%),linear-gradient(180deg,#0b0f1b,#070a12 72%)}.ambient{position:absolute;border-radius:50%;pointer-events:none;filter:blur(18px)}.ambient-one{width:540px;height:540px;left:-250px;top:-270px;background:radial-gradient(circle,rgba(145,91,255,.24),transparent 68%)}.ambient-two{width:620px;height:620px;right:-300px;bottom:-350px;background:radial-gradient(circle,rgba(49,181,232,.13),transparent 68%)}.topbar{position:relative;z-index:2;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,5vw);border-bottom:1px solid rgba(141,157,196,.14);background:rgba(8,11,20,.72);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:12px;color:#f4f5fb;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.11em}.brand img{width:36px;height:36px;filter:drop-shadow(0 0 14px rgba(151,96,255,.45))}.brand b{color:#aa7cff}.login-button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid rgba(168,123,255,.35);border-radius:11px;background:linear-gradient(135deg,rgba(119,70,225,.78),rgba(82,47,166,.72));box-shadow:0 10px 28px rgba(79,43,166,.24);color:white;text-decoration:none;font-size:12px;font-weight:700}.login-button:hover{transform:translateY(-1px);border-color:rgba(193,158,255,.62)}.login-button svg,.bottom-row button svg,.lock-icon svg,.service-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}main{position:relative;z-index:1;width:min(1040px,calc(100% - 32px));margin:0 auto;padding:72px 0 50px}.hero{text-align:center}.eyebrow{font-size:10px;letter-spacing:.24em;font-weight:800;color:#aa83ff}.hero h1{margin:15px 0 12px;font-size:clamp(34px,5.2vw,60px);line-height:1.05;letter-spacing:-2px}.hero h1 em{font-style:normal;color:#a978ff}.hero>p{max-width:680px;margin:0 auto;color:#8691a8;font-size:14px;line-height:1.75}.overall{position:relative;max-width:720px;min-height:124px;margin:38px auto 0;display:flex;align-items:center;gap:18px;text-align:left;padding:24px 26px;border:1px solid rgba(151,116,231,.24);border-radius:20px;background:linear-gradient(145deg,rgba(19,25,43,.86),rgba(12,17,29,.82));box-shadow:0 24px 70px rgba(0,0,0,.26);overflow:hidden}.overall:after{content:"";position:absolute;width:240px;height:240px;right:-110px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(155,108,255,.18),transparent 70%)}.overall-symbol{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:18px;background:rgba(155,108,255,.14);border:1px solid rgba(178,142,255,.24);color:#c8adff;font-size:24px;font-weight:900}.overall>div{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;min-width:0}.overall small{color:#78849a;font-size:9px;letter-spacing:.16em}.overall strong{font-size:21px}.overall div span{color:#8e99ae;font-size:12px}.status-light{position:relative;z-index:1;margin-left:auto;width:12px;height:12px;border-radius:50%;background:#778197;box-shadow:0 0 15px rgba(119,129,151,.5)}.public-health[data-state="operational"] .status-light{background:var(--green);box-shadow:0 0 18px rgba(61,221,138,.68)}.public-health[data-state="degraded"] .status-light{background:var(--yellow);box-shadow:0 0 18px rgba(229,189,80,.58)}.public-health[data-state="offline"] .status-light{background:var(--red);box-shadow:0 0 18px rgba(255,102,125,.58)}.public-health[data-state="operational"] .overall-symbol{color:#66e9a1;background:rgba(61,221,138,.12);border-color:rgba(61,221,138,.25)}.public-health[data-state="degraded"] .overall-symbol{color:#f0cb69;background:rgba(229,189,80,.12);border-color:rgba(229,189,80,.25)}.public-health[data-state="offline"] .overall-symbol{color:#ff8497;background:rgba(255,102,125,.12);border-color:rgba(255,102,125,.25)}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:18px}.service{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:108px;padding:17px;border:1px solid rgba(137,151,187,.15);border-radius:16px;background:linear-gradient(145deg,rgba(17,23,39,.83),rgba(10,15,27,.78));box-shadow:0 16px 40px rgba(0,0,0,.14)}.service-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px}.service-icon.violet{color:#b68eff;background:rgba(155,108,255,.13)}.service-icon.blue{color:#70caff;background:rgba(64,174,235,.12)}.service-icon.cyan{color:#5ee0d5;background:rgba(50,206,194,.11)}.service>div{display:flex;flex-direction:column;min-width:0;gap:3px}.service small{font-size:8px;letter-spacing:.15em;color:#677289}.service strong{font-size:13px}.service div span{font-size:10px;color:#7d889d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill{align-self:start;padding:5px 7px;border-radius:999px;background:rgba(119,129,151,.13);color:#8c96aa;font-size:8px}.service[data-state="online"] .pill{background:rgba(61,221,138,.11);color:#65e79e}.service[data-state="warning"] .pill{background:rgba(229,189,80,.12);color:#e9c85f}.service[data-state="offline"] .pill{background:rgba(255,102,125,.12);color:#ff8296}.private-note{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:15px;margin-top:17px;padding:18px;border:1px solid rgba(157,119,239,.19);border-radius:16px;background:linear-gradient(90deg,rgba(119,76,213,.10),rgba(13,18,31,.74))}.lock-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(155,108,255,.13);color:#b892ff}.private-note div{min-width:0}.private-note strong{display:block;font-size:13px}.private-note p{margin:5px 0 0;color:#79849a;font-size:10px;line-height:1.6}.private-note>a{padding:10px 13px;border:1px solid rgba(173,135,249,.28);border-radius:10px;background:rgba(132,82,235,.14);color:#c9adff;text-decoration:none;font-size:10px;font-weight:750}.private-note>a:hover{background:rgba(132,82,235,.23)}.bottom-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 2px;color:#687389;font-size:10px}.bottom-row b{color:#9ca6b8}.bottom-row button{display:flex;align-items:center;gap:7px;border:1px solid rgba(137,151,187,.18);border-radius:10px;background:#111727;color:#aeb7c8;min-height:37px;padding:0 12px;cursor:pointer;font-size:10px}.bottom-row button:hover{color:white;border-color:rgba(174,139,246,.35)}.bottom-row button.loading svg{animation:spin .8s linear infinite}footer{position:relative;z-index:1;text-align:center;padding:22px;color:#515c72;font-size:9px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:820px){.service-grid{grid-template-columns:1fr}.private-note{grid-template-columns:44px 1fr}.private-note>a{grid-column:1/-1;text-align:center}.service{min-height:94px}}@media(max-width:560px){.topbar{height:68px;padding:0 16px}.brand{font-size:11px}.brand img{width:31px;height:31px}.login-button span{display:none}.login-button{width:40px;padding:0;justify-content:center}.hero h1{font-size:36px;letter-spacing:-1.2px}.hero>p{font-size:12px}.overall{padding:20px 18px;gap:13px}.overall-symbol{width:52px;height:52px;border-radius:15px}.overall strong{font-size:17px}.overall div span{font-size:10px}.service{grid-template-columns:43px minmax(0,1fr) auto;padding:14px}.service-icon{width:41px;height:41px}.bottom-row{align-items:flex-start;gap:12px}.bottom-row button{flex:none}}