/* ============================================================
   RMM — Theme (ดัดแปลงจาก NurseKPI)
   Emerald #059669 · IBM Plex Sans Thai + IBM Plex Mono · glass + depth
   ใช้ร่วมกันทั้งหน้า landing และ console
   ============================================================ */

/* ---------- Fonts (self-host) ------------------------------ */
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-thai-300.woff2") format("woff2"); unicode-range:U+0E01-0E5B,U+200B-200D,U+25CC; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-latin-300.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-thai-400.woff2") format("woff2"); unicode-range:U+0E01-0E5B,U+200B-200D,U+25CC; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-latin-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-thai-500.woff2") format("woff2"); unicode-range:U+0E01-0E5B,U+200B-200D,U+25CC; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-latin-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-thai-600.woff2") format("woff2"); unicode-range:U+0E01-0E5B,U+200B-200D,U+25CC; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-latin-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-thai-700.woff2") format("woff2"); unicode-range:U+0E01-0E5B,U+200B-200D,U+25CC; }
@font-face { font-family:"IBM Plex Sans Thai"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-sans-thai-latin-700.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); }

/* ---------- Tokens ----------------------------------------- */
:root {
  --app-primary:        #059669;
  --app-primary-dark:   #047857;
  --app-primary-darker: #065f46;
  --app-primary-soft:   #d1fae5;
  --app-primary-tint:   #ecfdf5;

  --app-accent:         #0d9488;
  --app-accent-bright:  #14b8a6;
  --app-accent-dark:    #0f766e;
  --app-accent-soft:    #ccfbf1;
  --app-lime:           #84cc16;
  --app-lime-bright:    #a3e635;

  --app-font:      "IBM Plex Sans Thai","IBM Plex Sans","Segoe UI",Tahoma,sans-serif;
  --app-font-mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,"Cascadia Code",monospace;

  --app-bg:      #f8fafc;
  --app-surface: #ffffff;
  --app-text:    #1e293b;
  --app-muted:   #64748b;
  --app-border:  #e5e7eb;
  --app-heading: #0f172a;
  --app-row-hover: rgba(5,150,105,.05);

  --app-radius:    8px;
  --app-radius-lg: 14px;
  --app-shadow-xs: 0 1px 4px rgba(5,150,105,.07);
  --app-shadow-sm: 0 2px 10px rgba(5,150,105,.10);
  --app-shadow:    0 4px 18px rgba(5,150,105,.13);
  --app-shadow-lg: 0 10px 36px rgba(5,150,105,.18);

  /* สถานะ — คงที่ทุกธีม (ตามตัวอย่าง) */
  --clr-pass: #22c55e;  --clr-pass-soft: #dcfce7;
  --clr-fail: #ef4444;  --clr-fail-soft: #fee2e2;
  --clr-wait: #f59e0b;  --clr-wait-soft: #fef3c7;

  --bs-primary: #059669;
  --bs-primary-rgb: 5,150,105;
  --bs-link-color: #059669;
  --bs-link-hover-color: #047857;
  --bs-body-font-family: var(--app-font);
  --bs-border-radius: 8px;

  --dur-fast: .18s; --dur-normal: .28s;
  --ease-out: cubic-bezier(.22,.68,0,1.2);
}

[data-bs-theme="dark"] {
  --app-primary:        #34d399;
  --app-primary-dark:   #6ee7b7;
  --app-primary-darker: #a7f3d0;
  --app-primary-soft:   #065f46;
  --app-primary-tint:   #022c22;
  --app-bg:      #0a1628;
  --app-surface: #0f2b1f;
  --app-text:    #c8d6cc;
  --app-muted:   #8fb0a0;
  --app-border:  rgba(255,255,255,.09);
  --app-heading: #e6f4ee;
  --app-row-hover: rgba(52,211,153,.07);
  --clr-pass-soft: #14532d; --clr-fail-soft: #450a0a; --clr-wait-soft: #451a03;
  --bs-primary: #34d399; --bs-primary-rgb: 52,211,153;
  --bs-link-color: #34d399; --bs-link-hover-color: #6ee7b7;
}

/* ---------- Base + background depth ------------------------ */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--app-font);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: .9375rem;
  min-height: 100vh;
  position: relative;
}
/* แสงเรืองนุ่ม ๆ สองก้อน (emerald + lime) วางเยื้องซ้าย-ขวา ให้มีมิติ ไม่เป็นกล่องแบน */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px);
}
body::before { width: 46vw; height: 46vw; left: -14vw; top: -12vw; background: radial-gradient(circle, rgba(5,150,105,.16), transparent 68%); }
body::after  { width: 38vw; height: 38vw; right: -10vw; bottom: -12vw; background: radial-gradient(circle, rgba(132,204,22,.12), transparent 68%); }
[data-bs-theme="dark"] body::before { background: radial-gradient(circle, rgba(16,185,129,.20), transparent 68%); }
[data-bs-theme="dark"] body::after  { background: radial-gradient(circle, rgba(132,204,22,.09), transparent 68%); }

a { color: var(--app-primary); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--app-primary-dark); }
h1,h2,h3,h4,h5,.h4 { color: var(--app-heading); font-weight: 600; }
.text-muted, .text-secondary { color: var(--app-muted) !important; }
.num, .kstat-val, .mono { font-family: var(--app-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

:focus-visible { outline: 2px solid var(--app-accent-bright); outline-offset: 2px; }

/* ---------- Single staggered entrance ---------------------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(132,204,22,.55); } 70% { box-shadow: 0 0 0 7px rgba(132,204,22,0); } 100% { box-shadow: 0 0 0 0 rgba(132,204,22,0); } }
[data-stagger] > * { opacity: 0; animation: fadeInUp var(--dur-normal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
[data-stagger] > *:nth-child(1){--i:0} [data-stagger] > *:nth-child(2){--i:1} [data-stagger] > *:nth-child(3){--i:2}
[data-stagger] > *:nth-child(4){--i:3} [data-stagger] > *:nth-child(5){--i:4} [data-stagger] > *:nth-child(6){--i:5}
[data-stagger] > *:nth-child(n+7){--i:6}
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { opacity: 1; animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   Console shell
   ============================================================ */
.app-outer { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header { display: flex; flex-shrink: 0; height: 64px; z-index: 1030; }
.app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.sidebar-header {
  width: 240px; flex-shrink: 0; padding: 0 1rem; display: flex; align-items: center; gap: .7rem;
  cursor: pointer; user-select: none; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.06);
  transition: width var(--dur-normal) ease, padding var(--dur-normal) ease, background var(--dur-fast);
}
.sidebar-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.14); }
.sidebar-header:hover { background: linear-gradient(180deg, #059f70 0%, #048760 100%); }
.brand-icon-img {
  width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 50%; padding: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform var(--dur-normal) var(--ease-out);
}
.sidebar-header:hover .brand-icon-img { transform: scale(1.05); }
.brand-name { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.brand-title { font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub { font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.78); line-height: 1.2; white-space: nowrap; }
.brand-chevron { font-size: .8rem; color: rgba(255,255,255,.6); margin-left: auto; transition: transform var(--dur-normal) ease; }
.sidebar-collapsed .sidebar-header { width: 62px; padding: 0 .5rem; }
.sidebar-collapsed .brand-name, .sidebar-collapsed .brand-chevron { display: none; }

.app-topbar {
  flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem;
  background: linear-gradient(90deg, rgba(4,120,87,.95) 0%, rgba(5,150,105,.92) 60%, rgba(6,95,70,.95) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 3px 18px rgba(5,150,105,.35), 0 1px 0 rgba(255,255,255,.08) inset;
}
[data-bs-theme="dark"] .app-topbar { background: linear-gradient(90deg,#065f46 0%,#047857 60%,#022c22 100%); box-shadow: 0 3px 18px rgba(0,0,0,.4); }
.topbar-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-brand-main { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.topbar-brand-sub { font-size: .75rem; color: rgba(255,255,255,.72); }
.sidebar-toggle, .theme-toggle {
  width: 36px; height: 36px; border-radius: var(--app-radius); border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.sidebar-toggle:hover, .theme-toggle:hover { background: rgba(255,255,255,.25); color: #fff; transform: scale(1.06); }
.app-user { color: rgba(255,255,255,.92); font-size: .875rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.app-user:hover { color: #fff; }
.app-user .bi-person-circle { font-size: 1.35rem; color: rgba(255,255,255,.78); }
.app-topbar .dropdown-menu { margin-top: .45rem; border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); border-color: var(--app-border); min-width: 220px; }

.app-sidebar {
  width: 240px; background: var(--app-surface); border-right: 1px solid var(--app-border); flex-shrink: 0; padding: .65rem;
  overflow: hidden auto; white-space: nowrap; display: flex; flex-direction: column;
  transition: width var(--dur-normal) ease, padding var(--dur-normal) ease;
}
[data-bs-theme="dark"] .app-sidebar { background: #071f14; border-right-color: rgba(52,211,153,.12); box-shadow: 4px 0 24px rgba(0,0,0,.35); }
.sidebar-label { font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); padding: .7rem .8rem .3rem; display: block; }
.app-sidebar .nav-link {
  color: var(--app-text); border-radius: var(--app-radius); padding: .55rem .8rem; margin-bottom: .15rem;
  font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: .55rem; position: relative;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.app-sidebar .nav-link i { width: 20px; font-size: 1rem; text-align: center; color: var(--app-muted); flex-shrink: 0; transition: color var(--dur-fast), transform var(--dur-fast); }
.app-sidebar .nav-link:hover { background: linear-gradient(90deg, rgba(5,150,105,.10), rgba(5,150,105,.03)); color: var(--app-primary); transform: translateX(3px); }
.app-sidebar .nav-link:hover i { color: var(--app-primary); transform: scale(1.15); }
.app-sidebar .nav-link.active { background: linear-gradient(135deg, #064e3b, #059669); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(5,150,105,.25); transform: none; }
.app-sidebar .nav-link.active i { color: var(--app-accent-bright); transform: none; }
.app-sidebar-bottom { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--app-border); }
.nav-group-toggle .nav-chevron { font-size: .72rem; margin-left: auto; transition: transform .2s; }
.nav-group-toggle:not(.collapsed) .nav-chevron { transform: rotate(180deg); }
.nav-submenu .nav-link { padding-left: 2.2rem; font-size: .84rem; }
.sidebar-collapsed .app-sidebar { width: 62px; padding: .5rem .3rem; }
.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; padding: .55rem 0; }
.sidebar-collapsed .app-sidebar .nav-link span, .sidebar-collapsed .sidebar-label, .sidebar-collapsed .nav-chevron { display: none; }
.sidebar-collapsed .app-sidebar .nav-link i { width: auto; font-size: 1.18rem; }

.app-content { flex: 1; padding: 1.5rem 1.75rem; min-width: 0; overflow-y: auto; }
.app-footer {
  flex-shrink: 0; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;
  font-size: .72rem; color: var(--app-muted); border-top: 1px solid var(--app-border); background: var(--app-surface);
}

/* ---------- Page header ------------------------------------ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head h1 { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.page-head .sub { color: var(--app-muted); font-size: .85rem; margin-top: .2rem; }
.section-title { font-size: .78rem; font-weight: 700; color: var(--app-muted); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .85rem; }

/* ---------- Cards / glass ---------------------------------- */
.card, .chart-card {
  background: var(--app-surface); border: 1.5px solid var(--app-border); border-radius: var(--app-radius-lg);
  box-shadow: 0 1px 4px rgba(0,0,0,.05); position: relative; overflow: hidden;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.card-header { background: transparent; border-bottom: 1px solid rgba(5,150,105,.14); padding: .8rem 1.2rem; font-weight: 700; color: var(--app-heading); }
.card .card-body { padding: 1.15rem 1.25rem; }
.chart-card { padding: 1.15rem 1.3rem; }
.chart-card:hover, .card.hoverable:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(5,150,105,.07), 0 8px 24px rgba(0,0,0,.07); }
.chart-card .chart-title { font-size: .92rem; font-weight: 700; color: var(--app-heading); margin-bottom: .15rem; }
.chart-card .chart-sub { font-size: .76rem; color: var(--app-muted); margin-bottom: .85rem; }
.chart-box { position: relative; height: 230px; }
.chart-box.tall { height: 280px; }
.chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.chart-center .v { font-family: var(--app-font-mono); font-size: 1.9rem; font-weight: 600; color: var(--app-heading); line-height: 1; }
.chart-center .l { font-size: .72rem; color: var(--app-muted); margin-top: .25rem; }
.chart-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--app-muted); font-size: .85rem; }
.glass { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); }
[data-bs-theme="dark"] .glass { background: rgba(15,43,31,.62); border-color: rgba(255,255,255,.08); }

/* ---------- Stat cards (bento) ----------------------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.bento > .kstat-card { grid-column: span 3; }
.bento > .kstat-card.span-6 { grid-column: span 6; }
@media (max-width: 1199px) { .bento > .kstat-card { grid-column: span 4; } .bento > .kstat-card.span-6 { grid-column: span 8; } }
@media (max-width: 767px)  { .bento > .kstat-card, .bento > .kstat-card.span-6 { grid-column: span 6; } }
@media (max-width: 479px)  { .bento > .kstat-card, .bento > .kstat-card.span-6 { grid-column: span 12; } }
.kstat-card {
  border-radius: var(--app-radius-lg); padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); position: relative; overflow: hidden;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.kstat-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 12px 32px rgba(5,150,105,.28); }
.kstat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.07); }
.kstat-card.c-total  { background: linear-gradient(135deg, #064e3b, #065f46 60%, #047857); }
.kstat-card.c-online { background: #16a34a; }
.kstat-card.c-offline{ background: #dc2626; }
.kstat-card.c-cpu    { background: #0f766e; }
.kstat-card.c-ram    { background: #0e7490; }
.kstat-card.c-disk   { background: #b45309; }
.kstat-val   { font-size: 2.05rem; font-weight: 600; line-height: 1; color: #fff; }
.kstat-card.span-6 .kstat-val { font-size: 2.7rem; }
.kstat-unit  { font-size: .85rem; font-weight: 500; opacity: .8; margin-left: .2rem; }
.kstat-label { font-size: .8rem; color: rgba(255,255,255,.82); margin-top: .35rem; }
.kstat-ico   { font-size: 2.1rem; opacity: .28; z-index: 1; }
.kstat-card.span-6 .kstat-ico { font-size: 3rem; }

/* ---------- Buttons ---------------------------------------- */
.btn { border-radius: var(--app-radius); font-weight: 500; font-size: .875rem; padding: .42rem .9rem; transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; }
.btn:active { transform: scale(.97); }
.btn-primary {
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  background: linear-gradient(135deg, var(--app-primary-darker), var(--app-primary)) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 3px 12px rgba(5,150,105,.32);
}
[data-bs-theme="dark"] .btn-primary { background: linear-gradient(135deg, #047857, #10b981) !important; color: #fff !important; }
.btn-primary:hover { background: linear-gradient(135deg, var(--app-primary), var(--app-accent)) !important; box-shadow: 0 6px 22px rgba(132,204,22,.38); transform: translateY(-2px); }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--app-primary-dark); }
.btn-light-glass { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; backdrop-filter: blur(8px); }
.btn-light-glass:hover { background: rgba(255,255,255,.28); color: #fff; }
.btn-soft { background: var(--app-primary-tint); color: var(--app-primary-dark); border: 1px solid transparent; }
[data-bs-theme="dark"] .btn-soft { background: rgba(52,211,153,.12); color: #6ee7b7; }
.btn-soft:hover { background: var(--app-primary-soft); color: var(--app-primary-darker); }

/* ---------- Forms ------------------------------------------ */
.form-label { font-size: .8125rem; font-weight: 600; margin-bottom: .35rem; color: var(--app-text); }
.form-control, .form-select { border-radius: var(--app-radius); border-color: var(--app-border); font-size: .875rem; background-color: var(--app-surface); color: var(--app-text); }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .15rem rgba(5,150,105,.18); background-color: var(--app-surface); color: var(--app-text); }
.form-text { font-size: .78rem; color: var(--app-muted); }
.input-group-text { background: var(--app-primary-tint); border-color: var(--app-border); color: var(--app-muted); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.invalid-feedback { font-size: .78rem; }
.pw-meter { height: 4px; border-radius: 4px; background: var(--app-border); overflow: hidden; margin-top: .4rem; }
.pw-meter > i { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }

/* ---------- Tables ----------------------------------------- */
.table { --bs-table-color: var(--app-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--app-row-hover); --bs-table-border-color: var(--app-border); margin-bottom: 0; font-size: .875rem; }
.table > thead th { background: color-mix(in srgb, var(--app-surface) 70%, var(--app-primary-tint)); color: var(--app-muted); font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1.5px solid var(--app-border); padding: .7rem .95rem; white-space: nowrap; }
.table > tbody > tr > * { padding: .7rem .95rem; vertical-align: middle; border-bottom-color: var(--app-border); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.row-muted > td { opacity: .55; }

/* ---------- Badges / status -------------------------------- */
.badge-soft { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 100px; font-size: .73rem; font-weight: 600; }
.badge-soft.ok    { background: var(--clr-pass-soft); color: #15803d; }
.badge-soft.bad   { background: var(--clr-fail-soft); color: #b91c1c; }
.badge-soft.wait  { background: var(--clr-wait-soft); color: #b45309; }
.badge-soft.info  { background: var(--app-primary-tint); color: var(--app-primary-dark); }
.badge-soft.mute  { background: color-mix(in srgb, var(--app-muted) 16%, transparent); color: var(--app-muted); }
[data-bs-theme="dark"] .badge-soft.ok   { color: #86efac; }
[data-bs-theme="dark"] .badge-soft.bad  { color: #fca5a5; }
[data-bs-theme="dark"] .badge-soft.wait { color: #fcd34d; }
[data-bs-theme="dark"] .badge-soft.info { background: rgba(52,211,153,.12); color: #6ee7b7; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; margin-right: .45rem; flex-shrink: 0; }
.dot.on { background: var(--clr-pass); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot.off { background: #94a3b8; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #065f46, #10b981); flex-shrink: 0; }
.avatar.off { background: #94a3b8; }

/* ---------- Modal / toast / dropdown ----------------------- */
.modal-content { border: 0; border-radius: 18px; background: var(--app-surface); color: var(--app-text); box-shadow: 0 24px 64px rgba(0,0,0,.25); }
.modal-header { border-bottom: 1px solid var(--app-border); padding: 1rem 1.3rem; }
.modal-title { font-size: 1.05rem; font-weight: 700; color: var(--app-heading); }
.modal-body { padding: 1.2rem 1.3rem; }
.modal-footer { border-top: 1px solid var(--app-border); padding: .85rem 1.3rem; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.dropdown-menu { background: var(--app-surface); color: var(--app-text); }
.dropdown-item { font-size: .86rem; color: var(--app-text); }
.dropdown-item:hover { background: var(--app-primary-tint); color: var(--app-primary-dark); }
.dropdown-item-text { color: var(--app-muted); }
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; }
.toast { border: 0; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); background: var(--app-surface); color: var(--app-text); border-left: 4px solid var(--app-primary); }
.toast.t-err { border-left-color: var(--clr-fail); } .toast.t-warn { border-left-color: var(--clr-wait); }
.empty-state { text-align: center; padding: 2.6rem 1rem; color: var(--app-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }
.skeleton { background: linear-gradient(90deg, var(--app-border) 25%, color-mix(in srgb, var(--app-border) 50%, transparent) 50%, var(--app-border) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ============================================================
   Login (แบ่งสองฝั่งเหมือนตัวอย่าง)
   ============================================================ */
.login-shell { min-height: 100vh; display: flex; background: var(--app-surface); }
.panel-left {
  width: 44%; min-height: 100vh; flex-shrink: 0; position: relative; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2.5rem;
  background: linear-gradient(160deg, #021d0e, #052e16 30%, #064e3b 60%, #047857 100%);
}
.panel-left::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.panel-left::after { content: ""; position: absolute; width: 380px; height: 380px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(16,185,129,.28) 0%, transparent 70%); pointer-events: none; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.ring-1 { width: 520px; height: 520px; top: -200px; left: -200px; } .ring-2 { width: 380px; height: 380px; top: -100px; left: -100px; border-color: rgba(255,255,255,.06); }
.ring-3 { width: 460px; height: 460px; bottom: -200px; right: -180px; } .ring-4 { width: 300px; height: 300px; bottom: -120px; right: -100px; border-color: rgba(255,255,255,.06); }
.panel-brand { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.panel-logo { width: 92px; height: 92px; object-fit: contain; margin-bottom: 1.4rem; filter: drop-shadow(0 8px 26px rgba(0,0,0,.4)); }
.panel-hosp-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .35rem; }
.panel-hosp-en { font-size: .76rem; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2rem; }
.panel-divider { height: 2px; width: 40px; background: linear-gradient(90deg, #10b981, #84cc16); border-radius: 2px; margin-bottom: 2rem; }
.panel-badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: .42rem 1rem; font-size: .82rem; color: rgba(255,255,255,.88); margin-bottom: .8rem; }
.panel-badge i { color: #a3e635; }
.panel-tagline { font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 240px; }
.panel-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; background: var(--app-surface); }
.panel-right::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--app-border) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.form-box { position: relative; z-index: 2; width: 100%; max-width: 380px; animation: fadeInUp .5s var(--ease-out) both; }
.form-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; color: var(--app-primary); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .65rem; }
.form-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--app-primary); border-radius: 2px; }
.form-heading h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: .35rem; }
.form-heading p { font-size: .85rem; color: var(--app-muted); margin-bottom: 1.8rem; }
.field { margin-bottom: 1.05rem; }
.field-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .45rem; }
.field-wrap { position: relative; }
.field-wrap > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); pointer-events: none; }
.field-input { width: 100%; padding: .68rem .9rem .68rem 2.5rem; border: 1.5px solid var(--app-border); border-radius: 10px; background: var(--app-bg); color: var(--app-text); font-family: inherit; font-size: .92rem; transition: border-color .18s, box-shadow .18s, background .18s; }
.field-input:focus { outline: none; border-color: var(--app-primary); background: var(--app-surface); box-shadow: 0 0 0 .2rem rgba(5,150,105,.16); }
.otp-input { text-align: center; letter-spacing: .5em; font-family: var(--app-font-mono); font-size: 1.6rem; padding-left: .9rem; }
.btn-submit { width: 100%; border: 0; border-radius: 10px; padding: .78rem; font-weight: 600; font-size: .95rem; color: #fff; background: linear-gradient(135deg, #064e3b, #059669); box-shadow: 0 4px 16px rgba(5,150,105,.32); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: transform .18s, box-shadow .18s, background .18s; }
.btn-submit:hover { background: linear-gradient(135deg, #059669, #0d9488); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(132,204,22,.35); }
.btn-submit:disabled { opacity: .6; transform: none; cursor: wait; }
.form-err { min-height: 1.3rem; color: var(--clr-fail); font-size: .83rem; margin-bottom: .6rem; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--app-muted); margin-top: 1.4rem; }
.back-link:hover { color: var(--app-primary); }
.form-footer { margin-top: 1.6rem; font-size: .75rem; color: var(--app-muted); }
@media (max-width: 860px) { .login-shell { flex-direction: column; } .panel-left { width: 100%; min-height: auto; padding: 2rem 1.5rem; } .panel-right { padding: 2rem 1.25rem 3rem; align-items: flex-start; } .panel-tagline, .panel-hosp-en { display: none; } .panel-hosp-name { margin-bottom: 0; } .panel-divider { display: none; } .panel-logo { width: 64px; height: 64px; margin-bottom: .8rem; } }

/* ============================================================
   Landing
   ============================================================ */
.lp-nav { position: sticky; top: 0; z-index: 100; }
.lp-nav .inner { max-width: 1240px; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-brand { display: flex; align-items: center; gap: .75rem; color: var(--app-heading); }
.lp-brand img { width: 40px; height: 40px; object-fit: contain; }
.lp-brand .t { font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.lp-brand .s { font-size: .72rem; color: var(--app-muted); }
.lp-actions { display: flex; align-items: center; gap: .6rem; }
.theme-toggle.on-light { border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); }
.theme-toggle.on-light:hover { background: var(--app-primary-tint); color: var(--app-primary-dark); }
.lp-hero { position: relative; color: #fff; overflow: hidden; }
.lp-hero .bg { position: absolute; inset: 0; background: #064e3b url("../images/hero.jpg") center 40% / cover no-repeat; }
.lp-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(2,29,14,.92) 0%, rgba(6,78,59,.86) 45%, rgba(5,150,105,.55) 100%); }
.lp-hero .inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 4.2rem 1.25rem 5.5rem; }
.lp-live { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: .35rem .95rem; font-size: .78rem; margin-bottom: 1.1rem; backdrop-filter: blur(6px); }
.lp-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-lime-bright); animation: pulseDot 2s infinite; }
.lp-hero h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; max-width: 760px; margin-bottom: .9rem; }
.lp-hero h1 em { font-style: normal; background: linear-gradient(90deg, #a3e635, #6ee7b7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-hero p { color: rgba(255,255,255,.78); font-size: 1.02rem; max-width: 620px; margin-bottom: 1.8rem; }
.lp-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-cta { background: #fff; color: #064e3b; font-weight: 700; border: 0; border-radius: 12px; padding: .8rem 1.6rem; font-size: .95rem; display: inline-flex; align-items: center; gap: .55rem; box-shadow: 0 8px 28px rgba(0,0,0,.25); transition: transform .18s, box-shadow .18s; }
.btn-cta:hover { background: #fff; color: #047857; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(132,204,22,.35); }
.lp-main { max-width: 1240px; margin: -3.2rem auto 0; padding: 0 1.25rem 3rem; position: relative; }
.lp-asof { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .76rem; color: var(--app-muted); margin: 0 0 .9rem; }
.lp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.lp-grid > .chart-card { grid-column: span 6; }
@media (min-width: 1100px) { .lp-grid > .chart-card.w4 { grid-column: span 4; } }
@media (max-width: 767px) { .lp-grid > .chart-card { grid-column: span 12 !important; } }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .85rem; font-size: .78rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; color: var(--app-text); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend b { font-family: var(--app-font-mono); font-weight: 600; }
.lp-note { font-size: .74rem; color: var(--app-muted); text-align: center; margin-top: 1.6rem; }
.lp-footer { border-top: 1px solid var(--app-border); padding: 1.3rem 1.25rem; text-align: center; font-size: .76rem; color: var(--app-muted); background: var(--app-surface); }

/* ---------- Responsive shell ------------------------------- */
@media (max-width: 767px) {
  .sidebar-header { width: 62px; padding: 0 .5rem; } .sidebar-header .brand-name, .sidebar-header .brand-chevron { display: none; }
  .app-sidebar { width: 62px; padding: .5rem .3rem; } .app-sidebar .nav-link { justify-content: center; padding: .55rem 0; } .app-sidebar .nav-link span, .sidebar-label, .nav-chevron { display: none; }
  .app-content { padding: 1rem; } .topbar-brand-sub { display: none; }
}
@media print { .app-header, .app-sidebar, .app-footer, .toast-wrap { display: none !important; } .app-content { overflow: visible; } body::before, body::after { display: none; } }

/* เนื้อหาชั่วคราวระหว่างโหลด ไม่ต้องเล่น animation เข้าฉาก (ไม่งั้นจะเล่นซ้ำสองรอบตอนข้อมูลจริงมา) */
[data-stagger] > .is-loading { opacity: 1; animation: none; }

/* ---------- Remote viewer ---------------------------------- */
.remote-wrap { height: 100vh; display: flex; flex-direction: column; background: #06130d; position: relative; overflow: hidden; }
.remote-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 1.25rem; color: #fff;
  background: linear-gradient(90deg, #065f46, #047857 60%, #022c22); box-shadow: 0 3px 18px rgba(0,0,0,.4); z-index: 30; }
.remote-stage { flex: 1; min-height: 0; display: flex; padding: .6rem; }
.remote-stage canvas { flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: #000; border-radius: 8px; outline: none; cursor: default; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.remote-hint { text-align: center; font-size: .74rem; color: rgba(255,255,255,.45); padding: 0 0 .5rem; }
/* เต็มหน้าจอ: แถบเมนูซ่อนอยู่เหนือขอบบน เลื่อนเมาส์ชนขอบบนจึงเลื่อนลงมา */
.remote-hot { display: none; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 40; }
.remote-wrap.is-fs .remote-hot { display: block; }
.remote-wrap.is-fs.show-bar .remote-hot { pointer-events: none; }
.remote-wrap.is-fs .remote-bar { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-105%); transition: transform .18s ease; }
.remote-wrap.is-fs.show-bar .remote-bar { transform: translateY(0); }
.remote-wrap.is-fs .remote-stage { padding: 0; }
.remote-wrap.is-fs .remote-stage canvas { border-radius: 0; box-shadow: none; }
.remote-wrap.is-fs .remote-hint { display: none; }
.rc-audio { display: inline-flex; align-items: center; gap: .4rem; }
.rc-vol { width: 84px; accent-color: #34d399; }
.btn-light-glass.on { background: rgba(52,211,153,.35); border-color: #34d399; color: #fff; }
/* แผงคีย์บอร์ดลอย (ขนาดเล็ก 2 แท็บ) */
.kb-panel { position: fixed; z-index: 60; width: 438px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; background: rgba(15,23,20,.97); color: #e6f4ee;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.55); user-select: none; -webkit-user-select: none; font-size: .72rem; }
.kb-panel.is-full { width: 500px; }
.kb-panel[hidden], .kb-panel [hidden] { display: none !important; }
.kb-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem .5rem; cursor: move; background: rgba(255,255,255,.07); border-radius: 10px 10px 0 0; font-weight: 600; touch-action: none; }
.kb-title { display: inline-flex; align-items: center; gap: .3rem; }
.kb-chip { font-size: .62rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px; background: #0f766e; color: #fff; }
.kb-chip-caps { background: #b45309; }
.kb-head-btns button { background: transparent; border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 6px; padding: .05rem .45rem; margin-left: .25rem; font-size: .68rem; }
.kb-head-btns button:hover { background: rgba(255,255,255,.12); }
.kb-tabs { display: flex; gap: 2px; padding: .25rem .4rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.kb-tab { background: transparent; color: #9fb8ad; border: 0; border-bottom: 2px solid transparent; padding: .25rem .7rem; font-size: .72rem; font-weight: 600; cursor: pointer; }
.kb-tab.on { color: #fff; border-bottom-color: #34d399; }
.kb-body { padding: .35rem .45rem .45rem; }
.kb-row { display: flex; gap: 2px; margin-bottom: 2px; }
.kb-row.kb-wrap { flex-wrap: wrap; }
.kb-key { flex: 1 1 0; min-width: 22px; padding: .26rem .15rem; background: #1f2d28; color: #e6f4ee; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; font-size: .7rem; line-height: 1.1; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.kb-panel.is-full .kb-key { padding-top: .36rem; padding-bottom: .36rem; }
.kb-row.kb-wrap .kb-key { flex: 0 0 auto; padding: .26rem .5rem; }
.kb-key:hover { background: #2b4038; }
.kb-key:active { background: #047857; }
.kb-key.on { background: #059669; border-color: #34d399; color: #fff; box-shadow: inset 0 0 0 1px #34d399; }
.kb-ctl { flex: 1.5 1 0; background: #26363a; }
.kb-panel.is-th [data-label] { font-family: inherit; font-size: .78rem; }
.kb-wide-backspace, .kb-wide-tab, .kb-wide-capslock { flex-grow: 1.7; }
.kb-wide-enter, .kb-wide-shift { flex-grow: 2.2; }
.kb-wide-space { flex-grow: 7; }
.kb-help { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; max-height: 340px; overflow: auto; }
.kb-sc { display: flex; flex-direction: column; gap: 1px; text-align: left; background: #1f2d28; color: #e6f4ee; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: .3rem .45rem; cursor: pointer; }
.kb-sc b { font-size: .72rem; color: #6ee7b7; }
.kb-sc span { font-size: .66rem; opacity: .8; line-height: 1.25; }
.kb-sc:hover { background: #2b4038; }
.kb-sc:active { background: #047857; }
.kb-panel input.form-control { background: #1f2d28; color: #fff; border-color: rgba(255,255,255,.18); font-size: .72rem; }

/* แถวการ์ดตัวเลข 3 ช่อง (หน้าจัดการสมาชิก) */
.bento.cols3 > .kstat-card { grid-column: span 4; }
@media (max-width: 767px) { .bento.cols3 > .kstat-card { grid-column: span 12; } }

/* ── ปรับจากการดูภาพจริง ───────────────────────────────────── */
.lp-hero h1 em { white-space: nowrap; }
@media (max-width: 479px) { .lp-hero h1 em { white-space: normal; } }
.lp-asof-hero { margin-top: 1.4rem; font-size: .76rem; color: rgba(255,255,255,.6); }
/* แถวที่สองของ bento (CPU/RAM/Disk) แบ่งสามส่วนเท่ากัน ไม่เหลือช่องว่างด้านขวา */
@media (min-width: 1200px) { .bento > .kstat-card:nth-child(n+4) { grid-column: span 4; } .bento.cols3 > .kstat-card:nth-child(n+4) { grid-column: span 4; } }
/* มือถือ: สองคอลัมน์ (การ์ดรวมเต็มแถว) แทนที่จะเรียงยาวทีละใบ */
@media (max-width: 767px) {
  .bento > .kstat-card { grid-column: span 6 !important; padding: .9rem 1rem; }
  .bento > .kstat-card.span-6 { grid-column: span 12 !important; }
  .bento.cols3 > .kstat-card { grid-column: span 12 !important; }
  .kstat-val { font-size: 1.6rem; } .kstat-ico { display: none; }
  .lp-brand .t { font-size: .9rem; white-space: nowrap; } .lp-brand .s { display: none; }
  .lp-actions .btn { white-space: nowrap; padding: .4rem .7rem; }
  .lp-hero .inner { padding: 3rem 1.25rem 4.5rem; }
}

/* มือถือ: การ์ดใบสุดท้ายที่เหลือเดี่ยวให้เต็มแถว, ชื่อ topbar/footer ไม่ตัดกลางคำ */
@media (max-width: 767px) {
  .bento:not(.cols3) > .kstat-card:last-child { grid-column: span 12 !important; }
  .topbar-brand-main { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  .app-footer { padding: 0 1rem; } .app-footer span:first-child { display: none; } .app-footer { justify-content: center; }
}

/* ---------- สคริปต์ / terminal / แชท ---------------------------------- */
.sc-list { max-height: 360px; overflow: auto; }
.sc-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.sc-item.active { background: var(--app-primary-tint); color: inherit; border-color: var(--app-border); }
.sc-agents { max-height: 360px; overflow: auto; padding: .35rem; }
.sc-agent { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
.sc-agent:hover { background: var(--app-primary-tint); }
.sc-agent.disabled { opacity: .5; cursor: not-allowed; }
.term-wrap { height: 100vh; display: flex; flex-direction: column; background: #0b1410; }
.term-out { flex: 1; min-height: 0; margin: 0; padding: .8rem 1rem; overflow: auto; background: #0b1410; color: #d1fae5; font: .82rem/1.45 "IBM Plex Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-all; outline: none; }
.term-in { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; background: #07100c; border-top: 1px solid rgba(255,255,255,.12); }
.term-prompt { color: #34d399; font-family: "IBM Plex Mono", Consolas, monospace; }
.term-input { flex: 1; background: transparent; border: 0; outline: 0; color: #ecfdf5; font: .88rem "IBM Plex Mono", Consolas, monospace; }
.rc-blink { animation: rcBlink 1s infinite; }
@keyframes rcBlink { 50% { opacity: .35; } }
.chat-panel { position: fixed; right: 0; top: 96px; z-index: 55; display: flex; align-items: stretch; }
.chat-tab { width: 28px; background: #047857; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; border-radius: 10px 0 0 10px; cursor: pointer; padding: .7rem 0; box-shadow: -2px 2px 12px rgba(0,0,0,.4); }
.chat-tab span { background: #f59e0b; color: #1f2937; border-radius: 99px; font-size: .62rem; font-weight: 700; padding: 0 .3rem; }
.chat-tab span[hidden] { display: none; }
.chat-box { width: 300px; height: 380px; background: rgba(15,23,20,.97); color: #e6f4ee; border: 1px solid rgba(255,255,255,.14); border-right: 0; display: flex; flex-direction: column; box-shadow: -4px 6px 22px rgba(0,0,0,.5); font-size: .8rem; }
.chat-panel.is-collapsed .chat-box { display: none; }
.chat-head { padding: .45rem .7rem; background: rgba(255,255,255,.07); font-weight: 600; }
.chat-log { flex: 1; overflow: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-empty { color: #94a3b8; font-size: .74rem; text-align: center; margin: auto; padding: 0 .8rem; }
.chat-msg { max-width: 88%; padding: .35rem .55rem; border-radius: 10px; background: #1f2d28; }
.chat-msg.me { align-self: flex-end; background: #047857; }
.chat-who { font-size: .64rem; opacity: .7; }
.chat-text { white-space: pre-wrap; word-break: break-word; }
.chat-form { display: flex; gap: .3rem; padding: .4rem; border-top: 1px solid rgba(255,255,255,.12); }
.chat-form .form-control { background: #1f2d28; color: #fff; border-color: rgba(255,255,255,.18); }

/* ---------- Terminal แบบเต็ม (xterm) + ตัวจัดการไฟล์ ---------------------------------- */
.tm-tabs { display: flex; align-items: flex-end; gap: 2px; padding: .3rem .5rem 0; background: #07100c; border-bottom: 1px solid rgba(255,255,255,.12); overflow-x: auto; }
.tm-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .75rem; color: #9fb8ad; background: #101c17; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .8rem; white-space: nowrap; }
.tm-tab.on { background: #0b1410; color: #fff; border-color: #34d399; }
.tm-tab.dead { opacity: .6; }
.tm-x { background: transparent; border: 0; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .25rem; border-radius: 4px; }
.tm-x:hover { background: rgba(255,255,255,.15); }
.tm-add { background: transparent; border: 0; color: #9fb8ad; padding: .3rem .6rem; }
.tm-add:hover { color: #fff; }
.tm-body { flex: 1; min-height: 0; display: flex; }
.tm-main { flex: 1; min-width: 0; position: relative; padding: .35rem; display: flex; }
.tm-pane { flex: 1; min-width: 0; min-height: 0; height: 100%; }
.tm-pane .xterm { height: 100%; padding: 2px; }
.tm-pane .xterm-viewport { overflow-y: auto; }
.tm-search { position: absolute; top: 8px; right: 22px; z-index: 5; display: flex; gap: .3rem; background: rgba(15,23,20,.95); padding: .35rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); }
.tm-search[hidden] { display: none; }
.tm-search .form-control { width: 180px; background: #1f2d28; color: #fff; border-color: rgba(255,255,255,.18); }
.tm-side { width: 380px; background: var(--app-surface, #fff); color: var(--app-text, #1f2937); overflow: hidden; }
.tm-side[hidden], .tm-side-grip[hidden] { display: none; }
.tm-side-grip { width: 5px; cursor: col-resize; background: rgba(255,255,255,.12); }
.tm-side-grip:hover { background: #34d399; }
.fm { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: .82rem; }
.fm-modal { height: 70vh; }
.fm-bar { display: flex; gap: .35rem; padding: .4rem .5rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--app-border, #e5e7eb); }
.fm-path { flex: 1; min-width: 120px; font-family: "IBM Plex Mono", Consolas, monospace; font-size: .78rem; }
.fm-list { flex: 1; overflow: auto; min-height: 0; outline: none; }
.fm-row { display: flex; align-items: center; gap: .5rem; padding: .28rem .6rem; border-bottom: 1px solid var(--app-border, #eef2f0); cursor: default; }
.fm-row:hover { background: var(--app-primary-tint, #ecfdf5); }
.fm-row.sel { background: var(--app-primary-tint, #d1fae5); }
.fm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-size { width: 70px; text-align: right; color: var(--app-muted, #6b7280); font-size: .74rem; }
.fm-time { width: 112px; color: var(--app-muted, #6b7280); font-size: .72rem; }
.fm-acts { opacity: 0; white-space: nowrap; }
.fm-row:hover .fm-acts { opacity: 1; }
.fm-ico { font-size: 1.05rem; }
.fm-drop { position: absolute; inset: 0; z-index: 10; background: rgba(4,120,87,.88); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; border: 3px dashed #fff; }
.fm-drop[hidden] { display: none; }
.fm-jobs { border-top: 1px solid var(--app-border, #e5e7eb); max-height: 140px; overflow: auto; }
.fm-job { padding: .35rem .6rem; }
.fm-job.err .fm-jp { color: #dc2626; }