/* ===== Minimal White UI (scoped to #app) ===== */
  :root{
    --bg:#ffffff;
    --card-bg:#ffffff;
    --text:#111827;          /* slate-900 */
    --muted:#6b7280;         /* gray-500 */
    --border:#e5e7eb;        /* gray-200 */
    --soft:#f7f8fa;          /* soft bg */
    --chip-bg:#f9fafb;       /* gray-50 */
    --chip-border:#eef0f3;
    --primary:#3a4ed5;       /* เดิมในระบบ */
    --shadow:0 6px 28px rgba(0,0,0,.06);
    --ring:0 0 0 4px rgba(58,78,213,.10);
  }

  /* ฟอนต์ & smoothing นิดๆ */
  #app{
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* ทำให้ container ดูไม่เต็มจอเกินไป แต่ยังเป็น fluid */
  #app .container-fluid{max-width:1240px;padding: 0;}

  /* Card minimal */
  #app .card{
    border:1px solid var(--border);
    background:var(--card-bg);
    border-radius:16px;
    box-shadow:var(--shadow);
  }
  #app .card-body{padding:28px}

  /* หัวข้อ */
  #app h1{
    font-weight:800;
    letter-spacing:-.01em;
    margin:.25rem 0 0.5rem;
  }
  #app .text-danger{color:#111827 !important;} /* ลดแดงให้ minimal */
  #app h2{
    font-weight:700;
    line-height:1.25;
    margin: 8px 0 18px;
  }
  #app .titleh2{opacity:.75}

  /* Input group / Selects: โทนขาว เรียบ */
  #app .input-group-text{
    background:#fff;
    color:var(--muted);
    border:1px solid var(--border);
    border-radius:12px 0 0 12px;
    padding:.55rem .8rem;
  }
  #app .input-group .form-select{
    appearance:none;
    background:#fff;
    border:1px solid var(--border);
    border-left:0;
    border-radius:0 12px 12px 0;
    padding:.55rem .95rem;
    transition:border-color .2s, box-shadow .2s, background-color .2s;
  }
  #app .form-select:hover{border-color:#d1d5db}
  #app .form-select:focus{
    outline:0;
    border-color:var(--primary);
    box-shadow:var(--ring);
  }

  /* แผนที่: การ์ดขาว ขอบมน */
  #app .map-cover .map{
    width:100%; height:350px;
    background:var(--soft);
    border:1px solid var(--border);
    border-radius:12px;
  }
  #app .map-cover .title{
    font-size:.9rem;
    color:var(--muted);
    margin-top:.5rem;
  }
  @media (max-width: 991.98px){
    #app .map-cover .map{height:300px}
  }

  /* ตำนานระดับคะแนน (legend) แบบชิป */
  #app #hos-level-detail{
    gap:.5rem !important;
  }
  #app #hos-level-detail li{
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem;
    background:var(--chip-bg);
    border:1px solid var(--chip-border);
    border-radius:999px;
    box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
  }
  #app .map-level-color{
    width:45px; height:45px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
    margin-right:6px;
  }
  #app .map-level-title{
    display:inline-block; vertical-align:middle; line-height:1.2;
    font-size:.85rem; color:#374151;
  }

  /* ตาราง: ลายบรรทัดอ่อน ๆ */
  #app tbody tr:nth-child(even){background-color:#f9fafb}
  #app table.table{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
  }
  #app table.table thead th{
    background:#fff; color:#374151; border-bottom:1px solid var(--border);
  }

  /* ปุ่ม/ลิงก์ (ถ้ามี) */
  #app .btn, #app a.btn{
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    color:#111827;
    transition: transform .06s ease, box-shadow .2s ease;
  }
  #app .btn:hover{transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.06)}

  /* โหลดหน้า: overlay + spinner (ใช้ body.loading ที่มีอยู่แล้ว) */
  body.loading #app::after{
    content:""; position:fixed; inset:0; z-index:999;
    background:rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
  }
  body.loading #app::before{
    content:"";
    position:fixed; z-index:1000;
    top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
    border:3px solid #e5e7eb; border-top-color:var(--primary);
    border-radius:50%; animation:spin 1s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Motion reduce */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important; transition:none !important}
  }