/* =====================================================================
   BJS WEB SHOP  |  public/css/status.css
   หน้าสถานะระบบ / uptime
   ===================================================================== */

/* ---------------------------------------------------------------------
   แบนเนอร์ตอบคำถามเดียว : ใช้งานได้ไหม

   เดิมเป็นหกเหลี่ยมส้มเปล่า ๆ + ประโยคเดียว + นาฬิกา · พื้นที่ครึ่งจอแต่บอกได้
   แค่ "มีปัญหา" ไม่ได้บอกว่าอันไหน ต้องเลื่อนลงไปหาการ์ดแดงเอง
   ตัวใหม่ : ไอคอนบอกสถานะ · ชิประบบที่ล่มแยกใบ · ตัวนับปกติ/ขัดข้อง
   สีทั้งบล็อกวิ่งจาก --sc ตัวเดียวเหมือนบล็อกอื่นในเว็บ
   --------------------------------------------------------------------- */
.stbanner{
  --sc:var(--or); --scv:var(--o);
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid transparent;
  background:linear-gradient(150deg, rgba(24,16,9,.97), rgba(9,6,4,.98)) padding-box,
             var(--edge) border-box;
  box-shadow:var(--shadow);
  transition:.3s var(--ease);
}
.stbanner.is-ok      { --sc:var(--ok);   --scv:var(--g); }
.stbanner.is-degraded{ --sc:var(--warn); --scv:var(--w); }
.stbanner.is-down    { --sc:var(--bad);  --scv:var(--b); }

.stbanner__rail{ position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(var(--scv),.95) 16%, rgba(var(--scv),.95) 84%, transparent); }
.stbanner__glow{
  position:absolute; inset:auto -70px -140px auto; width:420px; height:420px;
  pointer-events:none; transition:.4s var(--ease);
  background:radial-gradient(circle, rgba(var(--scv),.2), transparent 66%);
}

.stbanner__top{ position:relative; z-index:1;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:24px 26px; }

/* หกเหลี่ยมพร้อมไอคอนบอกสถานะ — เดิมเป็นบล็อกสีเปล่า ๆ ไม่ได้สื่ออะไร */
.stbanner__orb{
  position:relative; width:56px; height:64px; flex:none; clip-path:var(--hex);
  display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(var(--scv),.6), rgba(var(--scv),.16));
  transition:.3s var(--ease);
}
.stbanner__orb .ic{ width:24px; height:24px; color:#fff; stroke-width:2.4;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.stbanner.is-ok .stbanner__orb{ animation:orbPulse 2.6s ease-in-out infinite; }
.stbanner.is-down .stbanner__orb{ animation:orbPulse 1.1s ease-in-out infinite; }
@keyframes orbPulse{ 50%{ filter:brightness(1.4); } }
@media (prefers-reduced-motion: reduce){ .stbanner__orb{ animation:none !important; } }

.stbanner__body{ flex:1; min-width:240px; }
.stbanner__eyebrow{ display:block; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim-2); font-weight:600; }
.stbanner__title{ font-family:var(--f-num); color:var(--sc);
  font-size:clamp(1.25rem,3vw,1.75rem); font-weight:700; line-height:1.2; margin-top:5px;
  text-shadow:0 0 34px rgba(var(--scv),.35); }
.stbanner__sub{ font-size:.88rem; color:var(--dim); margin-top:6px; line-height:1.6; }

/* ระบบที่ล่ม — ชิปแยกใบ กวาดตาแล้วรู้ทันทีว่าอันไหน */
.stbanner__chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.stbanner__chips[hidden]{ display:none; }
.stchip{ display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 9px;
  border-radius:99px; font-size:.75rem; color:#ffb3b3;
  border:1px solid rgba(var(--b),.4); background:rgba(var(--b),.12); }
.stchip i{ width:7px; height:7px; border-radius:99px; background:var(--bad); flex:none;
  box-shadow:0 0 9px rgba(var(--b),.9); }

.stbanner__meta{ flex:none; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.stbanner__count{ display:flex; gap:1px; border-radius:10px; overflow:hidden;
  border:1px solid var(--hair); background:var(--hair); }
.stbanner__count > div{ background:rgba(0,0,0,.4); padding:9px 16px; text-align:center; }
.stbanner__count b{ display:block; font-family:var(--f-num); font-size:1.35rem; line-height:1.1; }
.stbanner__count span{ font-size:.62rem; color:var(--dim-2); }
.stbanner__clock{ text-align:right; }
.stbanner__clock span{ display:block; font-size:.62rem; color:var(--dim-2); }
.stbanner__clock b{ display:block; font-family:var(--f-num); font-size:1.02rem; color:var(--dim); margin-top:2px; }

@media (max-width: 700px){
  .stbanner__top{ padding:20px 18px; gap:14px; }
  .stbanner__meta{ width:100%; justify-content:space-between; }
}

/* ---------- การ์ดรายระบบ ---------- */
.stgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:16px; }
@media (max-width: 560px){ .stgrid{ grid-template-columns:1fr; } }

.stcard{
  padding:17px 19px; border-radius:var(--r); border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  transition:.22s var(--ease);
}
.stcard.is-down{ border-color:rgba(var(--b),.4); background:rgba(var(--b),.06); }
.stcard.is-wait{ opacity:.65; }

.stcard__head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.stcard__dot{ width:10px; height:10px; border-radius:99px; flex:none; margin-top:5px;
  background:var(--dim-2); transition:.2s var(--ease); }
.stcard.is-up .stcard__dot{ background:var(--ok); box-shadow:0 0 12px rgba(var(--g),.85); }
.stcard.is-down .stcard__dot{ background:var(--bad); box-shadow:0 0 12px rgba(var(--b),.85);
  animation:pulse 1.3s ease-in-out infinite; }
.stcard__name{ font-size:.98rem; }
.stcard__right{ text-align:right; flex:none; }
.stcard__state{ display:block; font-size:.82rem; font-weight:600; color:var(--dim); }
.stcard.is-up .stcard__state{ color:#a8ecc6; }
.stcard.is-down .stcard__state{ color:#ffb3b3; }

/* ---------- แถบ uptime ----------
   หนึ่งแท่ง = 90 วินาที (40 แท่งต่อชั่วโมง) · ซ้ายเก่าสุด ขวาใหม่สุด

   เคยวาด 120 แท่งแล้วได้แท่งละ 1px กลายเป็นลายพร้อยอ่านไม่ออก
   40 แท่งในการ์ดกว้าง ~380px ได้แท่งละ ~7px — เห็นชัดว่าช่วงไหนแดง */
.upbar{ display:flex; gap:3px; align-items:stretch; height:36px;
  padding:3px; border-radius:8px; background:rgba(0,0,0,.32);
  border:1px solid var(--hair); }
.upbar i{
  flex:1; min-width:3px; border-radius:3px; display:block;
  transition:background .3s var(--ease);
}
.upbar i.is-up{ background:linear-gradient(180deg, rgba(var(--g),.9), rgba(var(--g),.42)); }
.upbar i.is-down{ background:linear-gradient(180deg, rgba(var(--b),1), rgba(var(--b),.5));
  box-shadow:0 0 12px -2px rgba(var(--b),.8); }
/* ยังไม่มีข้อมูล = พื้นจาง ๆ ไม่ใช่ "ล่ม" — ต้องดูออกทันทีว่าต่างกัน */
.upbar i.is-na{ background:rgba(255,255,255,.045); }
/* แท่งล่าสุดเน้นให้เห็นว่านี่คือตอนนี้ */
.upbar i:last-child{ box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.upbar i.is-down:last-child{ box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 0 14px -2px rgba(var(--b),.9); }

.stcard__foot{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.stcard__foot .num{ color:var(--or-hi); }

/* ---------- ตัวเลขประกอบ ---------- */
.stnums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.stnum{
  padding:16px 18px; border-radius:var(--r-sm); border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.stnum__label{ display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--dim-2); }
.stnum__label .ic{ width:14px; height:14px; color:var(--or); }
.stnum b{ display:block; font-family:'Orbitron','Sukhumvit',sans-serif;
  font-size:1.45rem; color:var(--or-hi); margin-top:6px; }
.stnum.is-bad b{ color:#ffb3b3; }
.stnum.is-bad .stnum__label .ic{ color:var(--bad); }

/* =====================================================================
   คู่มืออ่านหน้า  (.stguide)

   คนเห็นจุดแดงแล้วถามว่า "แล้วฉันซื้อของได้ไหม" ไม่ใช่ "ระบบชื่ออะไรล่ม"
   เลยตอบเป็นการ์ดทีละกรณี พร้อมคำตัดสินตัวหนา ๆ แทนย่อหน้ายาว ๆ
   ===================================================================== */
.stguide{
  border-radius:var(--r); border:1px solid transparent; overflow:hidden;
  background:var(--panel) padding-box, var(--edge) border-box;
  box-shadow:0 20px 44px -32px rgba(0,0,0,.9);
}
.stguide__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--hair); background:rgba(0,0,0,.25); }
.stguide__head .ic{ width:15px; height:15px; color:var(--or); flex:none; }
.stguide__head b{ font-family:var(--f-num); font-size:.84rem; font-weight:600; letter-spacing:.05em; }

/* คำอธิบายสีอยู่ตรงนี้ที่เดียว ไม่ต้องมี dl ซ้ำอีกก้อน */
.stguide__legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:.7rem; color:var(--dim-2); }
.stguide__legend span{ display:inline-flex; align-items:center; gap:6px; }
.stdot{ width:9px; height:11px; clip-path:var(--hex); display:block; flex:none; }
.stdot--up{ background:var(--ok); box-shadow:0 0 9px rgba(var(--g),.7); }
.stdot--down{ background:var(--bad); box-shadow:0 0 9px rgba(var(--b),.7); }
.stdot--na{ background:rgba(255,255,255,.14); }

.stguide__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--hair); }
.stguide__case{ position:relative; padding:16px 18px 17px 52px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent); }

.stguide__icon{ position:absolute; left:16px; top:16px;
  width:26px; height:30px; clip-path:var(--hex); display:grid; place-items:center; }
.stguide__icon .ic{ width:14px; height:14px; }
.stguide__case.is-ok  .stguide__icon{ background:rgba(var(--g),.16); }
.stguide__case.is-ok  .stguide__icon .ic{ color:var(--ok); }
.stguide__case.is-bad .stguide__icon{ background:rgba(var(--b),.16); }
.stguide__case.is-bad .stguide__icon .ic{ color:var(--bad); }

.stguide__what{ display:block; font-size:.9rem; font-weight:600; }
/* คำตัดสิน — บรรทัดเดียวที่คนอ่านจริง ๆ จึงต้องเด่นกว่าชื่อระบบ */
.stguide__verdict{ display:inline-block; margin:6px 0 7px; padding:3px 11px; border-radius:99px;
  font-size:.74rem; font-weight:600; }
.stguide__case.is-ok  .stguide__verdict{ color:#a8ecc6; background:rgba(var(--g),.13);
  border:1px solid rgba(var(--g),.3); }
.stguide__case.is-bad .stguide__verdict{ color:#ffb3b3; background:rgba(var(--b),.13);
  border:1px solid rgba(var(--b),.3); }
.stguide__case p{ font-size:.78rem; color:var(--dim-2); line-height:1.7; }
.stguide__case p b{ color:var(--dim); font-weight:600; }

.stguide__foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--hair); background:rgba(0,0,0,.25);
  line-height:1.7; }

/* แถบเครื่องมือทีมงาน — ต้องดูออกว่าไม่ใช่ของสาธารณะ
   ลายทางเฉียงคือสัญญาณ "พื้นที่จำกัด" ที่อ่านออกโดยไม่ต้องอ่านตัวหนังสือ */
.stadmin{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-radius:var(--r-sm);
  border:1px dashed rgba(var(--o),.4);
  background:
    repeating-linear-gradient(135deg, rgba(var(--o),.05) 0 10px, transparent 10px 20px),
    rgba(0,0,0,.3);
}
.stadmin > .ic{ width:17px; height:17px; color:var(--or); flex:none; }
.stadmin__body{ min-width:180px; }
.stadmin__body b{ display:block; font-size:.84rem; }
.stadmin__body span{ display:block; font-size:.7rem; color:var(--dim-2); margin-top:2px; line-height:1.55; }