:root {
    --bg: #eef1f7;
    --panel: #ffffff;
    --border: #e6e9f0;
    --text: #1f2533;
    --text-muted: #8890a0;
    --blue: #2f6fed;
    --blue-soft: #eaf1ff;
    --teal: #0fb8a6;
    --teal-soft: #e6faf7;
    --amber: #f2a30f;
    --amber-soft: #fff3e0;
    --rose: #f0507b;
    --rose-soft: #feeaf0;
    --green: #22b573;
    --red: #e64b5a;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  /* ---------- Shell layout ---------- */
  .shell {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 100vh;
  }

  @media (max-width:900px) {
    .shell {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- Sidebar ---------- */
  .sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform .25s ease;
  }

  @media (max-width:900px) {
    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(280px, 85vw);
      overscroll-behavior: contain;
      z-index: 30;
      transform: translateX(-100%);
      transition: transform .25s ease;
    }

    #nav-toggle:checked~.shell .sidebar {
      transform: translateX(0);
    }

    #nav-toggle:checked~.scrim {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .scrim {
    display: none;
  }

  @media (max-width:900px) {
    .scrim {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(15, 20, 30, .35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 20;
    }
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
  }

  .sidebar-brand .mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  .sidebar-brand .mark svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .sidebar-brand h1 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
  }

  .sidebar-brand p {
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--text-muted);
  }

  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }


  .nav-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 10px;
    margin: 4px 0 4px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4b5567;
  }

  .nav-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .nav-item.active {
    background: var(--blue-soft);
    color: var(--blue);
  }

  /* ---------- Topbar ---------- */
  .topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
  }

  .menu-btn {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .menu-btn svg {
    width: 16px;
    height: 16px;
  }

  @media (max-width:900px) {
    .menu-btn {
      display: flex;
    }
  }

  .search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4f6fa;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 12px;
    max-width: 360px;
    color: var(--text-muted);
    font-size: 13px;
  }

  .search svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .conn-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .conn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c7ccd6;
  }

  .conn-dot.connected {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34, 181, 115, .5);
    animation: pulse 2s ease-out infinite;
  }

  .conn-dot.lost {
    background: var(--red);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(34, 181, 115, .4);
    }

    70% {
      box-shadow: 0 0 0 6px rgba(34, 181, 115, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(34, 181, 115, 0);
    }
  }

.avatar {
    width: 42px;         /* ปรับขนาดความกว้างตามต้องการ */
    height: 42px;        /* ปรับขนาดความสูงตามต้องการ (ควรเท่ากับความกว้าง) */
    border-radius: 50%;  /* ทำให้เป็นวงกลม */
    overflow: hidden;    /* ซ่อนส่วนที่ล้นวงกลมออกมา */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;      /* ป้องกันไม่ให้โดนบีบขนาดเมื่อหน้าจอเล็ก */
    background-color: #f3f4f6; /* สีพื้นหลังเผื่อรูปยังไม่โหลด */
}

  .avatar svg {
    width: 16px;
    height: 16px;
    color: #8890a0;
  }

  /* ---------- Main content ---------- */
  main {
    padding: 26px 28px 40px;
    max-width: 1100px;
  }

  .page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }

  .page-head h2 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
  }

  .page-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-muted);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
  }

  @media (max-width:1200px) {
    .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:520px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }

  .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .03);
  }

  .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .card-top h3 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
  }

  .icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .icon-badge svg {
    width: 16px;
    height: 16px;
  }

  .icon-badge.blue {
    background: var(--blue-soft);
    color: var(--blue);
  }

  /* พัดลมหมุน: JS ใส่ .is-spinning และตั้ง --spin-duration ตามรอบ (RPM) */
  .icon-badge.fan-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: box-shadow .4s ease, background-color .4s ease;
  }

  .icon-badge.fan-badge .fan-svg {
    width: 30px;
    height: 30px;
    overflow: visible;
  }

  .icon-badge.fan-badge .fan-blades {
    transform-origin: 12px 12px;
    transform-box: view-box;
  }

  .icon-badge.fan-badge.is-spinning {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 0 18px rgba(37, 99, 235, .35);
  }

  .icon-badge.fan-badge.is-spinning .fan-blades {
    animation: fan-spin var(--spin-duration, 1.2s) linear infinite;
  }

  /* ค่อย ๆ ชะลอตอนหยุด แทนที่จะหยุดกึกกะทันหัน */
  .icon-badge.fan-badge:not(.is-spinning) .fan-blades {
    transition: transform .8s ease-out;
  }

  @keyframes fan-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .icon-badge.fan-badge.is-spinning .fan-blades {
      animation-duration: 6s;
    }
  }

  /* ===== ขยายไอคอนให้เห็นชัด + วงแหวนเรืองจังหวะเต้น ===== */
  .card .icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    position: relative;
  }

  .card .icon-badge svg {
    width: 30px;
    height: 30px;
  }

  .card .icon-badge.fan-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .card .icon-badge.fan-badge .fan-svg {
    width: 38px;
    height: 38px;
  }

  .card .icon-badge:not(.fan-badge)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: badge-ring 2.2s ease-out infinite;
    pointer-events: none;
  }

  @keyframes badge-ring {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(1.55); opacity: 0; }
  }

  /* ===== แอนิเมชันไอคอนของการ์ดอื่น ๆ ===== */
  .icon-badge svg * {
    transform-box: view-box;
    transform-origin: 12px 12px;
  }

  /* Speed: เข็มวัดแกว่งไปมา */
  .gauge-needle {
    transform-origin: 12px 12px;
    animation: gauge-sweep 2.6s ease-in-out infinite alternate;
  }

  /* Power: สายฟ้ากะพริบ + เรืองแสง */
  .bolt-ico {
    animation: bolt-pulse 1.4s ease-in-out infinite;
  }

  /* Humidity: หยดน้ำลอยขึ้นลง */
  .drop-ico {
    animation: drop-float 2.4s ease-in-out infinite;
  }

  .drop-shine {
    animation: shine-fade 2.4s ease-in-out infinite;
  }

  /* Temperature: ปรอทขึ้นลง */
  .thermo-mercury {
    transform-origin: 11.5px 17.5px;
    animation: mercury-rise 3s ease-in-out infinite alternate;
  }

  .thermo-ico {
    animation: thermo-glow 3s ease-in-out infinite alternate;
  }

  /* ไอคอนเล็กใน sub-row */
  .mini-ico.mini-bulb, .mini-ico.mini-bolt, .mini-ico.mini-amp {
    width: 20px;
    height: 20px;
  }

  .mini-bulb {
    animation: bulb-glow 1.6s ease-in-out infinite;
  }

  .mini-bolt {
    animation: bolt-pulse 1.4s ease-in-out infinite;
  }

  .mini-amp {
    animation: amp-ring 3s linear infinite;
  }

  /* ตัวเลขกะพริบเบา ๆ เมื่อค่าอัปเดต (JS ใส่ .value-flash) */
  .value-flash {
    animation: value-flash .7s ease-out;
  }

  /* การ์ดเลื่อนเข้าตอนโหลดหน้า */
  .grid > .card {
    animation: card-in .55s cubic-bezier(.2, .8, .2, 1) both;
  }

  .grid > .card:nth-child(2) { animation-delay: .06s; }
  .grid > .card:nth-child(3) { animation-delay: .12s; }
  .grid > .card:nth-child(4) { animation-delay: .18s; }
  .grid > .card:nth-child(n+5) { animation-delay: .24s; }

  @keyframes gauge-sweep {
    from { transform: rotate(-70deg); }
    to { transform: rotate(80deg); }
  }

  @keyframes bolt-pulse {
    0%, 100% { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0 transparent); }
    50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 8px currentColor); }
  }

  @keyframes drop-float {
    0%, 100% { transform: translateY(3px) scale(.92); }
    50% { transform: translateY(-5px) scale(1.12); }
  }

  @keyframes shine-fade {
    0%, 100% { opacity: .2; }
    50% { opacity: 1; }
  }

  @keyframes mercury-rise {
    from { transform: scaleY(.2); }
    to { transform: scaleY(1); }
  }

  @keyframes thermo-glow {
    from { filter: drop-shadow(0 0 0 transparent); }
    to { filter: drop-shadow(0 0 7px currentColor); }
  }

  @keyframes bulb-glow {
    0%, 100% { opacity: .55; filter: drop-shadow(0 0 0 transparent); }
    50% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
  }

  @keyframes amp-ring {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
  }

  @keyframes value-flash {
    0% { opacity: .35; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes card-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gauge-needle, .bolt-ico, .drop-ico, .drop-shine, .thermo-mercury, .thermo-ico,
    .mini-bulb, .mini-bolt, .mini-amp, .value-flash, .grid > .card {
      animation: none;
    }
  }

  .icon-badge.teal {
    background: var(--teal-soft);
    color: var(--teal);
  }

  .icon-badge.amber {
    background: var(--amber-soft);
    color: var(--amber);
  }

  .icon-badge.rose {
    background: var(--rose-soft);
    color: var(--rose);
  }

  .card .value {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
  }

  .card .value .unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 3px;
  }

  #fan_status.is-on {
    color: var(--green);
  }

  #fan_status.is-off {
    color: var(--red);
  }

  #fan_status.is-offline {
    color: var(--text-muted);
  }

  .card.is-stale .value:not(#fan_status),
  .card.is-stale .sub-row,
  .card.is-stale .footnote {
    opacity: .45;
  }

  .card.is-stale .live-pill {
    opacity: .5;
    filter: grayscale(1);
  }

  .card .sub-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .card .footnote {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: #b0b6c2;
  }

  /* ---------- Chart cards ---------- */
  .chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  @media (max-width:1100px) {
    .chart-grid {
      grid-template-columns: 1fr;
    }
  }

  .chart-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px 12px;
  }

  .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
  }

  .chart-head h3 {
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 600;
  }

  .chart-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
  }

  .legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .legend span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
  }

  .legend .dot-live {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34, 181, 115, .5);
    animation: pulse 2s ease-out infinite;
  }

  canvas {
    width: 100%;
    max-width: 100%;
    display: block;
  }

  /* Match the drawing height in index.js independently of pixel density. */
  .chart-stage canvas {
    height: 160px;
  }

  .logo-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* แนะนำให้ใช้ 50% สำหรับวงกลมที่สมบูรณ์ */
    object-fit: cover;
    display: block;
    border: 1px solid #feffff;
    /* ใช้ 1px จะเป็นมาตรฐานกว่า 1.0px */
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    gap: 10px;
    padding: 0 2px;
  }

  .sidebar-brand .mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* สำคัญมาก! ป้องกันไม่ให้รูปโลโก้ถูกบีบให้เล็กลงเมื่อพื้นที่แคบ */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* หากข้อความโดนดันจนล้น อาจจะต้องปรับขนาดตัวอักษรลงเล็กน้อย (ถ้าจำเป็น) */
  .sidebar-brand h1 {
    font-size: 1.1rem;
    /* ปรับขนาดชื่อ ARS Fan */
    margin: 0;
    overflow-wrap: anywhere;
  }

  .sidebar-brand p {
    font-size: 0.8rem;
    margin: 0;
    color: #666;
    overflow-wrap: anywhere;
  }

  /* ------------------------- Dashboard redesign ------------------------- */

  /* ---------- Hero banner ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    color: #fff;
    background:
      radial-gradient(1200px 420px at 88% -60%, rgba(120, 180, 255, .45), transparent 60%),
      linear-gradient(120deg, #17223b 0%, #244e9e 55%, #0e8f84 140%);
    border-radius: 18px;
    padding: 30px 32px;
    margin-bottom: 22px;
    box-shadow: 0 14px 34px rgba(31, 72, 148, .28);
  }

  .hero::before {
    content: '';
    position: absolute;
    left: -60px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 184, 166, .32), transparent 60%);
    pointer-events: none;
  }

  .hero::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%);
    pointer-events: none;
  }

  .hero>* {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
  }

  .hero-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: pulse 2s ease-out infinite;
  }

  .hero h2 {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .hero p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
  }

  .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
  }

  .hero-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: pulse 2s ease-out infinite;
  }

  .hero-cam { position: relative; flex: 1 1 320px; max-width: 420px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b1224; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .hero-cam img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hero-cam-live { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(10, 18, 36, .6); backdrop-filter: blur(6px); border-radius: 999px; }
  .hero-cam-live i { width: 7px; height: 7px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, .7); animation: cam-pulse 1.6s infinite; }
  @keyframes cam-pulse { 70% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } }
  .hero-runtime { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .hero-hours { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px; margin: 14px 0 12px; }
  .hero-hour { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; }
  .hero-hour span { font-size: 12px; color: rgba(255, 255, 255, .7); }
  .hero-hour strong { font-size: 16px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hero-life { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, .7); }
  .hero-life-track { flex: 1; height: 6px; background: rgba(255, 255, 255, .15); border-radius: 999px; overflow: hidden; }
  .hero-life-track i { display: block; height: 100%; width: 0; background: #4ade80; border-radius: inherit; transition: width .4s; }
  .hero-life-track.is-warning i { background: #fbbf24; }
  .hero-life-track.is-danger i { background: #f87171; }
  @media (max-width: 520px) {
    .hero-hours { grid-template-columns: 1fr; }
  }

  /* ---------- Stat cards ---------- */
  .grid {
    margin-bottom: 22px;
  }

  .card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px 20px 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: fadeUp .4s ease backwards;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
  }

  .card.blue::before {
    background: linear-gradient(90deg, var(--blue), #7aa5ff);
  }

  .card.teal::before {
    background: linear-gradient(90deg, var(--teal), #49d9c6);
  }

  .card.amber::before {
    background: linear-gradient(90deg, var(--amber), #f6c157);
  }

  .card.rose::before {
    background: linear-gradient(90deg, var(--rose), #f89ab1);
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: #d3dae8;
    box-shadow: 0 12px 28px rgba(31, 44, 84, .10);
  }

  .card-top {
    margin-bottom: 16px;
  }

  .card-top h3 {
    font-size: 12.5px;
    font-weight: 600;
    color: #5b6577;
  }

  .icon-badge {
    position: relative;
    border-radius: 11px;
  }

  .icon-badge svg {
    width: 17px;
    height: 17px;
  }

  .icon-badge::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 1px solid currentColor;
    opacity: .16;
  }

  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--green);
    background: #e9f9f1;
    border: 1px solid #d2f1e0;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .live-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34, 181, 115, .5);
    animation: pulse 2s ease-out infinite;
  }

  .card .value {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .card .value .unit {
    font-weight: 600;
  }

  .sub-row {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .mini-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #b6bcc9;
  }

  .dot-state {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34, 181, 115, .5);
    animation: pulse 2s ease-out infinite;
  }

  .card .footnote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    font-size: 11.5px;
    color: #9aa1b0;
  }

  .foot-ico {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #b6bcc9;
  }

  /* ---------- Section bar ---------- */
  .section-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 26px 0 16px;
  }

  .section-bar h3 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 700;
  }

  .section-bar p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
  }

  /* ---------- Chart cards ---------- */
  .chart-grid {
    gap: 18px;
  }

  .chart-card {
    border-radius: 16px;
    padding: 20px 22px 16px;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: fadeUp .45s ease backwards;
  }

  .chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 44, 84, .08);
  }

  .chart-card:nth-child(2) {
    animation-delay: .05s;
  }

  .chart-card:nth-child(3) {
    animation-delay: .1s;
  }

  .chart-card:nth-child(4) {
    animation-delay: .15s;
  }

  .chart-head h3 {
    font-size: 15px;
    font-weight: 700;
  }

  .chart-head p {
    font-size: 12px;
  }

  .legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
  }

  .legend-dot.blue {
    background: var(--blue);
    animation: pulse 2s ease-out infinite;
  }

  .legend-dot.teal {
    background: var(--teal);
    animation: pulse 2s ease-out infinite;
  }

  .legend-dot.rose {
    background: var(--rose);
    animation: pulse 2s ease-out infinite;
  }

  .legend-dot.amber {
    background: var(--amber);
    animation: pulse 2s ease-out infinite;
  }

  .chart-stage {
    margin-top: 8px;
    background: linear-gradient(180deg, #fafbfe, #f3f5fa);
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 8px 14px 4px;
  }

  /* ---------- Entrance animation ---------- */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .card:nth-child(2) {
    animation-delay: .05s;
  }

  .card:nth-child(3) {
    animation-delay: .1s;
  }

  .card:nth-child(4) {
    animation-delay: .15s;
  }

  /* ---------- Multi-module overview ---------- */
  .module-overview {
    margin: 0 0 22px;
  }

  .module-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }

  .section-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .module-heading h3 {
    margin: 0 0 3px;
    font-size: 18px;
  }

  .module-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
  }

  .module-total {
    padding: 6px 10px;
    color: #536078;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .module-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .module-summary>div {
    padding: 12px 16px;
    border-right: 1px solid var(--border);
  }

  .module-summary>div:last-child {
    border-right: 0;
  }

  .module-summary span {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .module-summary strong {
    font-size: 20px;
    letter-spacing: -.02em;
  }

  .module-summary small,
  .module-metrics small {
    color: var(--text-muted);
    font-size: .65em;
    font-weight: 600;
  }

  .online-text {
    color: var(--green);
  }

  .offline-text {
    color: var(--red);
  }

  .module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .module-card {
    min-width: 0;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .03);
  }

  .module-card.featured {
    border-color: #b9cdf9;
    box-shadow: 0 8px 20px rgba(47, 111, 237, .09);
  }

  .module-card.needs-attention {
    border-color: #f3d5dd;
  }

  .module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
  }

  .module-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
  }

  .module-icon svg {
    width: 17px;
    height: 17px;
  }

  .module-icon.blue {
    color: var(--blue);
    background: var(--blue-soft);
  }

  .module-icon.teal {
    color: var(--teal);
    background: var(--teal-soft);
  }

  .module-icon.amber {
    color: var(--amber);
    background: var(--amber-soft);
  }

  .module-icon.rose {
    color: var(--rose);
    background: var(--rose-soft);
  }

  .device-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
  }

  .device-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .device-state.online {
    color: #168c58;
  }

  .device-state.online i {
    background: var(--green);
  }

  .device-state.offline {
    color: #cc3f50;
  }

  .device-state.offline i {
    background: var(--red);
  }

  .module-card h4 {
    margin: 0 0 3px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .module-location {
    margin: 0;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .module-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 15px 0 12px;
  }

  .module-metrics div {
    min-width: 0;
  }

  .module-metrics dt {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
  }

  .module-metrics dd {
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .module-link {
    display: block;
    overflow: hidden;
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .module-link.warning {
    color: #d35f21;
  }

  /* ---------- Responsive and accessibility refinements ---------- */
  .nav-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .shell>div:last-of-type {
    min-width: 0;
  }

  .card,
  .chart-card,
  .chart-stage,
  .hero-info,
  .card-top>div,
  .module-heading>div,
  .sidebar-brand>div {
    min-width: 0;
  }

  .hero,
  .module-heading,
  .section-bar,
  .chart-head,
  .card {
    overflow-wrap: anywhere;
  }

  .module-heading {
    flex-wrap: wrap;
  }

  .card-top {
    gap: 12px;
  }

  .card .value {
    line-height: 1.2;
  }

  .hero-chip {
    max-width: 100%;
    white-space: normal;
  }

  .hero-chip::before,
  .dot-state,
  .conn-dot {
    flex-shrink: 0;
  }

  .menu-btn,
  .sign-in,
  .nav-item {
    min-height: 44px;
  }

  .menu-btn {
    width: 44px;
  }

  .topbar {
    flex-wrap: wrap;
  }

  #nav-toggle:focus-visible~.shell .menu-btn {
    outline: 3px solid rgba(47, 111, 237, .5);
    outline-offset: 2px;
  }

  main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }

  .sign-in {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
  }

  .sign-in:hover,
  .sign-in:focus-visible {
    color: #fff;
    background: var(--blue);
  }

  .menu-btn,
  .nav-item,
  .sign-in {
    cursor: pointer;
  }

  .menu-btn:focus-visible,
  .nav-item:focus-visible,
  .sign-in:focus-visible {
    outline: 3px solid rgba(47, 111, 237, .28);
    outline-offset: 2px;
  }

  @media (max-width:1100px) {
    main {
      padding: 22px 24px 36px;
    }

    .hero {
      padding: 26px 28px;
    }

    .module-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:900px) {
    .topbar {
      padding: 12px 20px;
    }

    main {
      padding: 20px;
    }

    .search {
      max-width: none;
    }

    .hero {
      margin-bottom: 18px;
    }
  }

  @media (max-width:620px) {
    .topbar {
      gap: 10px;
      padding: 10px 14px;
    }

    .topbar-right {
      gap: 8px;
    }

    .conn-pill {
      padding: 6px 9px;
    }

    .conn-pill #live-text {
      display: none;
    }

    .avatar {
      width: 34px;
      height: 34px;
    }

    .search {
      min-width: 0;
      padding: 8px 10px;
    }

    .search span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    main {
      padding: 16px 14px 30px;
    }

    .hero {
      align-items: flex-start;
      gap: 16px;
      padding: 22px 20px;
      border-radius: 14px;
    }

    .hero-eyebrow {
      margin-bottom: 10px;
    }

    .hero h2 {
      font-size: 24px;
    }

    .hero p {
      font-size: 13px;
      line-height: 1.55;
    }

    .hero-chip {
      padding: 8px 12px;
      font-size: 11.5px;
    }

    .grid {
      gap: 12px;
      margin-bottom: 18px;
    }

    .module-heading {
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .module-heading h3 {
      font-size: 17px;
    }

    .module-heading p {
      line-height: 1.45;
    }

    .module-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-summary>div {
      padding: 11px 13px;
      border-bottom: 1px solid var(--border);
    }

    .module-summary>div:nth-child(2) {
      border-right: 0;
    }

    .module-summary>div:nth-child(n+3) {
      border-bottom: 0;
    }

    .module-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .module-card {
      padding: 14px;
    }

    .module-card-head {
      margin-bottom: 11px;
    }

    .module-metrics {
      margin: 12px 0 10px;
    }

    .card {
      padding: 17px 16px 15px;
      border-radius: 14px;
    }

    .card .value {
      font-size: 26px;
    }

    .section-bar {
      margin: 22px 0 13px;
      align-items: flex-start;
    }

    .section-bar h3 {
      font-size: 16px;
    }

    .section-bar p {
      line-height: 1.5;
    }

    .chart-grid {
      gap: 12px;
    }

    .chart-card {
      padding: 16px 14px 12px;
      border-radius: 14px;
    }

    .chart-head {
      gap: 8px;
    }

    .chart-stage {
      padding: 6px 7px 3px;
      border-radius: 10px;
    }
  }

  @media (max-width:380px) {
    .search span {
      display: none;
    }

    .search {
      flex: 0 0 auto;
      padding: 8px;
    }

    .search svg {
      width: 17px;
      height: 17px;
    }

    .sign-in {
      padding: 6px 9px;
      font-size: 12px;
    }

    .hero h2 {
      font-size: 22px;
    }
  }

  @media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }

  /* Device selection */
  .device-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
  }

  .device-picker-card {
    display: block;
    min-width: 0;
    transition: box-shadow .2s, border-color .2s;
  }

  .device-picker-card:hover {
    border-color: var(--blue);
    box-shadow: 0 8px 24px rgba(47, 111, 237, .10);
  }

  .device-picker-card:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
  }

  .device-picker-card h4 {
    overflow-wrap: anywhere;
  }

  .device-picker-card .module-link {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }

  .device-picker-id {
    color: var(--text-muted);
    font-size: 13px;
  }

  .device-picker-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 48px 20px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 16px;
  }

  .device-picker-empty p {
    color: var(--text-muted);
  }

  .history-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .history-controls select,
  .history-controls button {
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--panel);
    color: var(--text);
  }

  .history-controls button {
    cursor: pointer;
  }

  .history-controls :focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  #history-status {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 16px;
  }

  .section-bar {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Keep absent sensor cards out of grid layouts. */
  .card[hidden],
  .chart-card[hidden] {
    display: none !important;
  }

  /* Signed-in account shortcut. */
  .topbar-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    width: min(320px, 100%);
    max-width: 100%;
    min-width: 0;
    flex: 0 1 320px;
    padding: 7px 10px 7px 8px;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(31, 37, 51, .03);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .topbar-profile:hover,
  .topbar-profile.is-active {
    background: #f7faff;
    border-color: #b9cef7;
    box-shadow: 0 3px 10px rgba(47, 111, 237, .08);
  }

  .topbar-profile:focus-visible {
    outline: 3px solid #b9d0ff;
    outline-offset: 3px;
  }

  .topbar-profile .avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #eaf1ff, #e8f8f5);
    border: 1px solid #dce8f7;
  }

  .topbar-profile .avatar svg {
    width: 21px;
    height: 21px;
    color: #4771b3;
  }

  .topbar-profile .topbar-profile-image {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    object-fit: cover;
  }
  .topbar-profile-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .topbar-profile-copy strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #27354c;
  }

  .topbar-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    color: #5b6474;
    background: #f1f3f7;
  }

  .topbar-role--superuser {
    color: #7341af;
    background: #f2eafd;
  }

  .topbar-role--admin {
    color: #285bc2;
    background: #eaf1ff;
  }

  .topbar-role--user {
    color: #15755d;
    background: #e5f6ef;
  }

  .topbar-role-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  .topbar-profile-open {
    display: grid;
    place-items: center;
    margin-left: 6px;
    color: #8b98ac;
    flex: 0 0 14px;
  }

  .topbar-profile-open svg {
    width: 14px;
    height: 14px;
  }

  .topbar-profile:hover .topbar-profile-open {
    color: var(--blue);
  }

  @media(max-width:480px) {
    .topbar-profile {
      width: min(210px, 100%);
      max-width: 100%;
      gap: 8px;
      padding: 6px 8px;
      min-height: 52px;
    }

    .topbar-profile .avatar {
      width: 34px;
      height: 34px;
      border-radius: 10px;
    }

    .topbar-profile .topbar-profile-image {
      width: 34px;
      height: 34px;
      max-width: 34px;
      max-height: 34px;
    }

    .topbar-profile-copy strong {
      max-width: 125px;
      font-size: 12px;
    }

    .topbar-profile-open {
      display: none;
    }
  }

/* ===================== Futuristic card theme ===================== */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.grid > .card.blue  { --accent: #8FD694; --accent2: #a7e6ab; }
.grid > .card.teal  { --accent: #4A4A4A; --accent2: #5e5c5c; }
.grid > .card.amber { --accent: #8B5A2B; --accent2: #b07a45; } /* กำลังไฟ = เส้นกราฟกำลังไฟ */
.grid > .card.hum  { --accent: #0d9488; --accent2: #2dbfae; } /* ความชื้น = เส้นกราฟความชื้น */
.grid > .card.rose  { --accent: #B71C1C; --accent2: #eb4949; }

.grid > .card {
  background:
    radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f8fd);
  border-color: color-mix(in srgb, var(--accent) 24%, #e3e8f2);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* แสงวิ่งรอบขอบการ์ด */
.grid > .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sweep), transparent 0 60%, var(--accent2) 78%, var(--accent) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: card-sweep 5s linear infinite;
  pointer-events: none;
}

.grid > .card:hover {
  box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, #e3e8f2);
}

/* ตัวเลขหลักไล่สี */
.grid > .card .value:not(#fan_status) {
  background: linear-gradient(100deg, var(--accent), var(--accent2) 55%, var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  animation: value-shimmer 6s linear infinite;
}

.grid > .card .value .unit {
  -webkit-text-fill-color: var(--text-muted, #8892a6);
}

/* ป้ายไอคอนวงกลมเรืองแสง + วงโคจร */
.grid > .card .icon-badge {
  border-radius: 50%;
  color: var(--accent);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 20%, #fff),
      color-mix(in srgb, var(--accent2) 38%, #fff));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}

.grid > .card .icon-badge::after {
  inset: -4px;
  border-radius: 50%;
  opacity: .22;
}

.grid > .card .icon-badge:not(.fan-badge)::before {
  inset: -9px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: .75;
  animation: orbit 10s linear infinite;
}

/* พัดลม: วงแหวนแสงหมุนเมื่อทำงาน */
.grid > .card .icon-badge.fan-badge::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--accent2), var(--accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity .5s ease;
}

.grid > .card .icon-badge.fan-badge.is-spinning::before {
  opacity: 1;
  animation: orbit 1.4s linear infinite;
}

@keyframes card-sweep {
  to { --sweep: 360deg; }
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@keyframes value-shimmer {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grid > .card::after,
  .grid > .card .value:not(#fan_status),
  .grid > .card .icon-badge::before {
    animation: none !important;
  }
}

/* แถบสีด้านบนการ์ดใช้สีเดียวกับ --accent ของการ์ด */
.grid > .card.blue::before,
.grid > .card.teal::before,
.grid > .card.amber::before,
.grid > .card.hum::before,
.grid > .card.rose::before {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}