/* ============================================================
   PitlokDD.Com v3 — Glassmorphism Design System (Purple Theme)
   Author: PitlokDD.Com Dev Team
   ============================================================ */

/* ─── 1. CSS Variables (Light Mode) ──────────────────────────── */
:root{
  color-scheme:light;
  /* Brand */
  --primary:#7c3aed;--primary-dark:#6d28d9;--primary-light:rgba(124,58,237,.1);
  --grad:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);
  /* Surfaces */
  --bg:#f0e8ff;--card:rgba(255,255,255,.72);--card-solid:#ffffff;
  --app-bg:radial-gradient(1200px 600px at 100% -10%,rgba(168,85,247,.12),transparent 60%),var(--bg);
  --bg-soft:rgba(124,58,237,.04);
  --border:rgba(139,92,246,.18);--border-solid:#e5d8ff;
  /* Text */
  --text:#1e1b4b;--muted:#6b5b8a;
  /* Status */
  --success:#10b981;--success-bg:rgba(16,185,129,.12);
  --warning:#f59e0b;--warning-bg:rgba(245,158,11,.12);
  --danger:#ef4444;--danger-bg:rgba(239,68,68,.12);
  --info:#0ea5e9;--info-bg:rgba(14,165,233,.12);
  /* Glass */
  --blur:blur(20px);--blur-sm:blur(10px);
  --glass-border:rgba(255,255,255,.35);
  --glass-shadow:0 8px 32px rgba(124,58,237,.12);
  --radius:16px;--shadow:0 4px 24px rgba(124,58,237,.1);
}

/* ─── 2. Dark Mode Variables ──────────────────────────────────── */
[data-theme="dark"]{
  color-scheme:dark;
  /* Glassmorphism: vibrant purple → deep navy-blue (ตามภาพแนบ) */
  --bg:#160b33;--card:rgba(255,255,255,.07);--card-solid:#1c1142;
  --app-bg:linear-gradient(135deg,#5b21b6 0%,#3b1d8f 32%,#221a55 64%,#10133a 100%);
  --bg-soft:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12);--border-solid:#33246b;
  --text:#f5f3ff;--muted:#cbbdee;
  --primary-light:rgba(139,92,246,.22);
  --glass-border:rgba(255,255,255,.16);
  --glass-shadow:0 8px 32px rgba(8,5,30,.45);
  --shadow:0 4px 24px rgba(8,5,30,.4);
  --success-bg:rgba(16,185,129,.16);--warning-bg:rgba(245,158,11,.16);
  --danger-bg:rgba(239,68,68,.16);--info-bg:rgba(56,189,248,.16);
}

/* Dark mode: brighten status-pill text so it reads on dark glass */
[data-theme="dark"] .b-success,[data-theme="dark"] .kpi2 .k2-tag.good,
[data-theme="dark"] .itag-g,[data-theme="dark"] .db-act-g{color:#4ade80}
[data-theme="dark"] .b-warning,[data-theme="dark"] .b-warn,
[data-theme="dark"] .kpi2 .k2-tag.warn,[data-theme="dark"] .itag-y,
[data-theme="dark"] .db-act-y{color:#fbbf24}
[data-theme="dark"] .b-info,[data-theme="dark"] .kpi2 .k2-tag.info,
[data-theme="dark"] .itag-b,[data-theme="dark"] .db-act-b{color:#56c6fb}
[data-theme="dark"] .b-danger,[data-theme="dark"] .kpi2 .k2-tag.bad,
[data-theme="dark"] .itag-r,[data-theme="dark"] .db-act-r,
[data-theme="dark"] .aq-head .aq-n,[data-theme="dark"] .aq-age.over-sla,
[data-theme="dark"] .pm-item.danger{color:#fb7185}
/* Work-queue filter chips: zero-count chips were 45% opacity = unreadable on dark */
[data-theme="dark"] .wq-chip{color:var(--chip,#e6def9)}
[data-theme="dark"] .wq-chip.is-zero{opacity:.78}
[data-theme="dark"] .wq-chip.is-zero .wq-n{color:#cbbdee}
/* "เพิ่มเติม" alert chips: brighter text + a touch more fill for contrast */
[data-theme="dark"] .db-act{font-weight:700}
[data-theme="dark"] .db-act-r{background:rgba(239,68,68,.22)}
[data-theme="dark"] .db-act-y{background:rgba(245,158,11,.22)}
[data-theme="dark"] .db-act-b{background:rgba(56,189,248,.22)}
[data-theme="dark"] .db-act-g{background:rgba(16,185,129,.22)}

/* ─── 3. Reset & Base ──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
[data-theme="dark"]{color-scheme:dark}
body{
  font-family:'Prompt',sans-serif;color:var(--text);
  font-size:14.5px;line-height:1.65;
  background:var(--app-bg) fixed;background-color:var(--bg);
  transition:background .3s,color .3s;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;opacity:.9}
img{max-width:100%}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ─── 4. Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:12px;padding:11px 22px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:.2s;text-decoration:none;line-height:1.2;position:relative;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--grad);color:#fff;
  box-shadow:0 6px 20px rgba(124,58,237,.4);
}
.btn-primary:hover{box-shadow:0 10px 28px rgba(124,58,237,.5);color:#fff}
.btn-ghost{
  background:var(--card);color:var(--text);
  border:1.5px solid var(--border);backdrop-filter:var(--blur-sm);
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.3)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.3)}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.btn-white{background:rgba(255,255,255,.9);color:var(--primary);backdrop-filter:var(--blur-sm)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:6px 14px;font-size:12.5px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* Social buttons */
.btn-google{background:#fff;color:#3c4043;border:1.5px solid #dadce0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-google:hover{background:#f8f9fa;box-shadow:0 4px 12px rgba(0,0,0,.12);color:#3c4043}
.btn-facebook{background:#1877F2;color:#fff;box-shadow:0 4px 14px rgba(24,119,242,.35)}
.btn-facebook:hover{background:#166fe5;color:#fff}

/* ─── 5. Badges ─────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;
  font-size:11.5px;font-weight:500;backdrop-filter:blur(8px);
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-success{background:var(--success-bg);color:#059669}
.b-warning{background:var(--warning-bg);color:#d97706}
.b-danger{background:var(--danger-bg);color:#dc2626}
.b-info{background:var(--info-bg);color:#0284c7}
.b-muted{background:rgba(100,116,139,.1);color:#64748b}
.b-warn{background:var(--warning-bg);color:#d97706}/* alias */

/* ─── 6. Cards ──────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:22px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-shadow);transition:box-shadow .2s,transform .2s;
}
.card h3{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3 .more{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--muted)}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-23{grid-template-columns:2fr 1fr}
.mt{margin-top:18px}.mt8{margin-top:8px}.mb{margin-bottom:18px}
.flex{display:flex;align-items:center;gap:10px}
.spacer{flex:1}.right{text-align:right}.center{text-align:center}
.muted{color:var(--muted)}.small{font-size:12.5px}

/* ─── 7. Forms ──────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.form-control{
  width:100%;font-family:inherit;font-size:14.5px;
  padding:11px 14px;border:1.5px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.65);
  color:var(--text);transition:.2s;backdrop-filter:blur(6px);
}
.form-control:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
  background:rgba(255,255,255,.9);
}
[data-theme="dark"] .form-control{background:rgba(255,255,255,.07);color:#f5f3ff;border-color:var(--border)}
[data-theme="dark"] .form-control:focus{background:rgba(255,255,255,.12)}
[data-theme="dark"] .form-control::placeholder{color:#9d8fc4;opacity:1}
select.form-control{cursor:pointer}
/* ฟิลด์ที่บังคับความสูงเตี้ย (เช่น inline height:34/36px) — padding 11px เดิมจะตัดตัวอักษร (border-box) → ตัด padding บน-ล่าง */
.form-control[style*="height:3"]{padding-top:0;padding-bottom:0}
.form-hint{font-size:12px;color:var(--muted);margin-top:5px}
.form-error{font-size:12.5px;color:var(--danger);margin-top:5px}

/* ─── 8. Alerts ─────────────────────────────────────────────────── */
.alert{
  padding:13px 18px;border-radius:12px;font-size:13.5px;
  margin-bottom:18px;backdrop-filter:blur(10px);
}
.alert-success{background:var(--success-bg);color:#047857;border:1px solid rgba(16,185,129,.3)}
.alert-danger{background:var(--danger-bg);color:#b91c1c;border:1px solid rgba(239,68,68,.3)}
.alert-info{background:var(--info-bg);color:#0369a1;border:1px solid rgba(14,165,233,.3)}
.alert-warning{background:var(--warning-bg);color:#b45309;border:1px solid rgba(245,158,11,.3)}
/* Dark mode: alert text was dark (for light bg) → light tints so it reads on dark glass */
[data-theme="dark"] .alert-success{color:#bbf7d0}
[data-theme="dark"] .alert-danger{color:#fecdd3}
[data-theme="dark"] .alert-info{color:#cfeafe}
[data-theme="dark"] .alert-warning{color:#fde6a8}
[data-theme="dark"] .alert a{color:#e9d5ff;text-decoration:underline}
[data-theme="dark"] .alert code{background:rgba(255,255,255,.13);color:#f5f3ff;padding:1px 6px;border-radius:5px}

/* ─── 9. Tables ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:11.5px;color:var(--muted);
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  padding:11px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:12px;border-bottom:1px solid rgba(124,58,237,.07);font-size:13.5px;vertical-align:middle}
tbody tr:hover td{background:var(--primary-light);transition:.15s}
.t-strong{font-weight:600;color:var(--primary)}
.t-sub{font-size:11.5px;color:var(--muted)}

/* ─── 10. Progress ──────────────────────────────────────────────── */
.prog{height:7px;background:rgba(124,58,237,.12);border-radius:99px;overflow:hidden;width:100%}
.prog>div{height:100%;border-radius:99px;background:var(--primary);transition:width .4s}
.prog .ok{background:var(--success)}.prog .warn{background:var(--warning)}.prog .bad{background:var(--danger)}

/* ─── 11. Pagination ────────────────────────────────────────────── */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pagination a{
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--card);backdrop-filter:blur(8px);
  border-radius:9px;font-size:13px;color:var(--text);transition:.15s;
}
.pagination a:hover{border-color:var(--primary);text-decoration:none;background:var(--primary-light)}
.pagination a.cur{background:var(--primary);color:#fff;border-color:var(--primary)}
.pg-dots{padding:0 6px;color:var(--muted);align-self:center}

/* ─── 12. KPI Cards ─────────────────────────────────────────────── */
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kpi .k-label{color:var(--muted);font-size:12.5px}
.kpi .k-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px}
.kpi .k-value{font-size:25px;font-weight:700}
.kpi .k-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.up{color:var(--success);font-weight:600}.down{color:var(--danger);font-weight:600}

/* ─── 13. Toggle ────────────────────────────────────────────────── */
.toggle{
  width:40px;height:22px;border-radius:99px;
  background:rgba(100,116,139,.25);
  position:relative;cursor:pointer;
  display:inline-block;vertical-align:middle;border:none;transition:.2s;
}
.toggle::after{
  content:'';position:absolute;width:17px;height:17px;
  border-radius:50%;background:#fff;top:2.5px;left:2.5px;
  transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle.on{background:linear-gradient(135deg,#10b981,#059669)}
.toggle.on::after{left:20.5px}

/* ─── PUBLIC SITE ────────────────────────────────────────────────── */
.site-nav{
  position:sticky;top:0;
  background:rgba(255,255,255,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);z-index:50;
}
.site-nav .inner{display:flex;align-items:center;gap:30px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .ic{
  width:36px;height:36px;border-radius:10px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 4px 12px rgba(124,58,237,.3);
}
/* Brand logo (company_logo) in public top-nav — โลโก้ในกล่อง + คงชื่อไว้ */
.brand .brand-ic-logo{background:#fff;padding:3px}
.brand .brand-ic-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
.nav-links{display:flex;gap:24px;font-size:14px}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--primary);text-decoration:none}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}

.hero{background:var(--grad);color:#fff;padding:76px 0 110px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.07);top:-180px;right:-120px}
.hero::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-140px;left:-80px}
.hero .inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto}
.hero .tag{display:inline-block;background:rgba(255,255,255,.16);padding:7px 18px;border-radius:99px;font-size:13px;margin-bottom:22px}
.hero h1{font-size:42px;font-weight:800;line-height:1.25;margin-bottom:16px}
.hero h1 em{font-style:normal;color:#fde047}
.hero p{font-size:17px;opacity:.92;margin-bottom:34px}
.search-bar{
  display:flex;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);
  border-radius:16px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.2);
  max-width:640px;margin:0 auto;
}
.search-bar input{flex:1;border:none;outline:none;font-family:inherit;font-size:16px;padding:10px 18px;color:#1e1b4b;background:transparent}
.search-bar input::placeholder{color:#6b5b8a;opacity:1}
.tld-row{display:flex;gap:16px;justify-content:center;margin-top:22px;font-size:13.5px;flex-wrap:wrap}
.tld-row span{background:rgba(255,255,255,.15);padding:6px 16px;border-radius:99px}
.tld-row b{color:#fde047}

.trust{margin-top:-46px;position:relative;z-index:2}
.trust-card{
  background:var(--card);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);border-radius:20px;
  box-shadow:0 20px 50px rgba(124,58,237,.12);
  display:grid;grid-template-columns:repeat(4,1fr);padding:30px 14px;
  position:relative;overflow:hidden;
}
.trust-item{
  text-align:center;padding:8px 18px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateY(20px);
  animation:trustIn .65s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:transform .25s ease;
}
.trust-item:nth-child(1){animation-delay:.05s}
.trust-item:nth-child(2){animation-delay:.15s}
.trust-item:nth-child(3){animation-delay:.25s}
.trust-item:nth-child(4){animation-delay:.35s}
.trust-item:hover{transform:translateY(-4px)}
.trust-item+.trust-item{border-left:1px solid var(--border)}

/* Icon circle — gentle pulse + glow */
.ti-icon{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  background:linear-gradient(135deg,var(--ti-c1,#ede9fe),var(--ti-c2,#ddd6fe));
  animation:tiPulse 3.5s ease-in-out infinite;
  box-shadow:0 6px 20px var(--ti-glow,rgba(124,58,237,.2));
  transition:transform .25s ease;
}
.trust-item:hover .ti-icon{transform:scale(1.08) rotate(-4deg)}
.ti-icon-th {--ti-c1:#fee2e2;--ti-c2:#dbeafe;--ti-glow:rgba(59,130,246,.25)}
.ti-icon-ssl{--ti-c1:#dcfce7;--ti-c2:#a7f3d0;--ti-glow:rgba(16,185,129,.28)}
.ti-icon-da {--ti-c1:#ede9fe;--ti-c2:#ddd6fe;--ti-glow:rgba(124,58,237,.28)}

/* Counter "60 วินาที" — gradient + scale-on-hover */
.trust-item--counter .ti-num{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:38px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .25s ease;
}
.trust-item--counter:hover .ti-num{transform:scale(1.06)}
.trust-item--counter .ti-num small{
  font-size:15px;font-weight:600;color:var(--muted);
  -webkit-text-fill-color:initial;background:none;
}
.ti-label{font-size:13px;color:var(--muted);font-weight:500;line-height:1.4}

/* Rotating text/icon — cross-fade + slide stack (รองรับข้อความยาวต่างกัน) */
.ti-label-rotate{
  position:relative;height:1.4em;width:100%;
  display:flex;justify-content:center;align-items:center;
}
.ti-icon-rotate{position:relative;overflow:hidden}
.ti-icon-rotate>.rotate-track{height:100%}
.rotate-track{
  position:relative;width:100%;height:100%;
}
.rotate-track>span{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  animation:rotateFadeIn 6s ease-in-out infinite;
}
.rotate-track>span:nth-child(2){animation-name:rotateFadeOut}

/* Icon palette ปรับเปลี่ยนตาม phase — global ที่ ti-icon-rotate */
.ti-icon-rotate{
  animation:tiPulse 3.5s ease-in-out infinite, iconTone 6s ease-in-out infinite;
}
@keyframes iconTone{
  0%, 45%  {--ti-c1:#fee2e2;--ti-c2:#dbeafe;--ti-glow:rgba(59,130,246,.25)}
  55%, 95% {--ti-c1:#dbeafe;--ti-c2:#c7d2fe;--ti-glow:rgba(59,130,246,.35)}
}

/* บรรทัดที่ 1: visible 0–45%, slide ออก 50–95%, กลับมา 100% */
@keyframes rotateFadeIn{
  0%, 45%  {opacity:1;transform:translateY(0)}
  50%, 95% {opacity:0;transform:translateY(-10px)}
  100%     {opacity:1;transform:translateY(0)}
}
/* บรรทัดที่ 2: hidden 0–45%, slide เข้า 50–95%, ออก 100% */
@keyframes rotateFadeOut{
  0%, 45%  {opacity:0;transform:translateY(10px)}
  50%, 95% {opacity:1;transform:translateY(0)}
  100%     {opacity:0;transform:translateY(10px)}
}
@media (prefers-reduced-motion:reduce){
  .rotate-track>span{animation:none;opacity:1;transform:none;position:static}
  .rotate-track>span:nth-child(2){display:none}
}

/* Stagger entry */
@keyframes trustIn{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}
/* Subtle icon pulse */
@keyframes tiPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .trust-item,.ti-icon{animation:none;opacity:1;transform:none}
}

section.block{padding:80px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 48px}
.sec-head .pill{display:inline-block;background:var(--primary-light);color:var(--primary);font-size:12.5px;font-weight:600;padding:6px 16px;border-radius:99px;margin-bottom:14px}
.sec-head h2{font-size:31px;font-weight:800;margin-bottom:10px}
.sec-head p{color:var(--muted)}
.bg-soft{background:rgba(124,58,237,.03)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{
  background:var(--card);border:1px solid var(--glass-border);border-radius:20px;padding:32px 28px;
  position:relative;transition:.25s;backdrop-filter:var(--blur);box-shadow:var(--glass-shadow);
}
.plan:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(124,58,237,.22)}
.plan.featured{border:2px solid var(--primary);box-shadow:0 20px 50px rgba(124,58,237,.25)}
.plan .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:12px;font-weight:600;padding:5px 18px;border-radius:99px;white-space:nowrap}
.plan h3{font-size:19px;font-weight:700}
.plan .for{font-size:13px;color:var(--muted);margin-bottom:16px;min-height:38px}
.plan .price{font-size:38px;font-weight:800;color:var(--primary)}
.plan .price small{font-size:14px;color:var(--muted);font-weight:400}
.plan ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.plan li::before{content:'✓';color:var(--success);font-weight:700;margin-right:9px}
.plan li.no{color:var(--muted);opacity:.5}
.plan li.no::before{content:'✕';color:var(--muted)}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{
  border:1px solid var(--glass-border);border-radius:16px;padding:26px;transition:.2s;
  background:var(--card);backdrop-filter:var(--blur);
}
.feat:hover{border-color:var(--primary);box-shadow:0 12px 30px rgba(124,58,237,.18);transform:translateY(-3px)}
.feat .ic{width:50px;height:50px;border-radius:13px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:14px}
.feat h4{font-size:16px;font-weight:700;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--muted)}

.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.how-item .num{width:54px;height:54px;border-radius:50%;background:var(--grad);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 20px rgba(124,58,237,.35)}
.how-item h4{font-size:16px;font-weight:700;margin-bottom:6px}
.how-item p{font-size:13.5px;color:var(--muted)}

.cta-box{background:var(--grad);border-radius:24px;color:#fff;text-align:center;padding:60px 30px;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);top:-120px;left:-80px}
.cta-box h2{font-size:29px;font-weight:800;margin-bottom:10px;position:relative}
.cta-box p{opacity:.92;margin-bottom:26px;position:relative}

.site-foot{background:#0a0520;color:#94a3b8;padding:60px 0 26px;font-size:14px;margin-top:80px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px}
.foot-grid h5{color:#e9d5ff;font-size:14.5px;margin-bottom:14px}
.foot-grid a{display:block;color:#94a3b8;margin-bottom:9px;font-size:13.5px}
.foot-grid a:hover{color:#e9d5ff;text-decoration:none}
.foot-bottom{border-top:1px solid #1e0a3c;padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;flex-wrap:wrap;gap:10px}

/* ─── AUTH CARD ─────────────────────────────────────────────────── */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:48px 24px;background:var(--grad);
  position:relative;overflow:hidden;
}
.auth-wrap::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,.08);top:-200px;right:-150px}
.auth-wrap::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-150px;left:-100px}
.auth-card{
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.5);
  border-radius:22px;padding:42px;width:100%;max-width:460px;
  box-shadow:0 24px 64px rgba(0,0,0,.2);backdrop-filter:blur(20px);
  position:relative;z-index:1;
}
.auth-card h1{font-size:24px;font-weight:700;margin-bottom:6px;color:#1e1b4b}
.auth-card .sub{color:#6b5b8a;font-size:13.5px;margin-bottom:28px}
.auth-foot{text-align:center;margin-top:20px;font-size:13.5px;color:var(--muted)}

/* Social login divider */
.or-divider{
  display:flex;align-items:center;gap:12px;margin:22px 0;
  color:var(--muted);font-size:12.5px;
}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border-solid)}

/* Social login buttons grid */
.social-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.social-btns .btn{justify-content:center;gap:6px;padding:10px;font-size:13px}
.social-btns .si{font-size:16px;flex-shrink:0}

/* ─── QR Box ────────────────────────────────────────────────────── */
.qr-box{
  display:inline-block;padding:14px;background:#fff;
  border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);
}
.qr-box canvas,.qr-box img{display:block}

/* ─── DASHBOARD LAYOUT ──────────────────────────────────────────── */
.app{
  display:flex;min-height:100vh;background:var(--app-bg) fixed;
  background-color:var(--bg);position:relative;
}
/* Purple ambient blobs */
.app::before{
  content:'';position:fixed;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.16) 0%,transparent 70%);
  top:-20%;right:-15%;pointer-events:none;z-index:0;
}
.app::after{
  content:'';position:fixed;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%);
  bottom:-15%;left:-10%;pointer-events:none;z-index:0;
}
/* Dark mode: warmer purple top, cool blue glow bottom (ตามภาพแนบ) */
[data-theme="dark"] .app::before{
  background:radial-gradient(circle,rgba(168,85,247,.28) 0%,transparent 70%);
}
[data-theme="dark"] .app::after{
  width:620px;height:620px;
  background:radial-gradient(circle,rgba(56,130,246,.20) 0%,transparent 70%);
  bottom:-18%;left:-8%;
}

/* ─── Admin impersonation bar (โหมดเข้าใช้แทนลูกค้า) ───────────────── */
/* แถบ sticky บนสุด — อยู่ใน flow จึงดัน .app ลงมาเองโดยไม่เกิดช่องว่าง
   และยัง stick ติดบนเวลาเลื่อน · sidebar/topbar (fixed/sticky) ออฟเซ็ต 40px กันทับ */
.impersonate-bar{
  position:sticky;top:0;z-index:60;
  height:40px;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 16px;
  background:linear-gradient(90deg,#c2410c,#ea580c);
  color:#fff;font-size:13px;font-weight:500;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.impersonate-bar span{
  display:flex;align-items:center;gap:6px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.impersonate-bar span svg{width:16px;height:16px;flex-shrink:0}
.impersonate-bar form{margin:0;flex-shrink:0}
.impersonate-back{
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  color:#fff;white-space:nowrap;
}
.impersonate-back:hover{background:rgba(255,255,255,.3);color:#fff}
/* sidebar (fixed) + topbar (sticky) ต้องเริ่มใต้แถบ 40px กันทับ */
.app.has-imp{min-height:calc(100vh - 40px)}
.app.has-imp .sidebar{top:40px}
.app.has-imp .topbar{top:40px}

/* ─── Sidebar ───────────────────────────────────────────────────── */
/* Sidebar theme variables — light mode defaults */
.sidebar{
  --sb-bg-from:#ffffff;
  --sb-bg-to:#faf7ff;
  --sb-border:rgba(139,92,246,.16);
  --sb-divider:rgba(139,92,246,.12);
  --sb-brand:#1e1b4b;
  --sb-brand-sub:#8b7bb0;
  --sb-section:#9889b8;
  --sb-item:#5e548e;
  --sb-item-hover-bg:rgba(124,58,237,.08);
  --sb-item-hover-color:#4c1d95;
  --sb-item-active-bg:linear-gradient(135deg,#7c3aed,#9333ea);
  --sb-item-active-color:#ffffff;
  --sb-item-active-ring:rgba(139,92,246,.22);
  --sb-icobadge:rgba(255,255,255,.22);
  --sb-group-bg:rgba(124,58,237,.045);
  --sb-group-border:rgba(139,92,246,.10);
  --sb-user-name:#1e1b4b;
  --sb-user-role:#8b7bb0;
}
/* Sidebar in dark mode */
[data-theme="dark"] .sidebar{
  --sb-bg-from:rgba(56,30,116,.55);
  --sb-bg-to:rgba(18,16,58,.55);
  --sb-border:rgba(255,255,255,.12);
  --sb-divider:rgba(255,255,255,.1);
  --sb-brand:#ffffff;
  --sb-brand-sub:#c4b5e8;
  --sb-section:#b9aade;
  --sb-item:#d3c9ee;
  --sb-item-hover-bg:rgba(255,255,255,.08);
  --sb-item-hover-color:#ffffff;
  --sb-item-active-bg:linear-gradient(135deg,#7c3aed,#a855f7);
  --sb-item-active-color:#ffffff;
  --sb-item-active-ring:rgba(255,255,255,.18);
  --sb-icobadge:rgba(255,255,255,.20);
  --sb-group-bg:rgba(0,0,0,.22);
  --sb-group-border:rgba(255,255,255,.06);
  --sb-user-name:#f5f3ff;
  --sb-user-role:#a99cd0;
}

.sidebar{
  width:256px;
  background:linear-gradient(180deg,var(--sb-bg-from) 0%,var(--sb-bg-to) 100%);
  backdrop-filter:blur(24px);
  border-right:1px solid var(--sb-border);
  color:var(--sb-item);
  position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;z-index:30;
  overflow:hidden;transition:transform .25s,width .2s,background .3s;
}
/* โลโก้ปักบน · กลุ่มเมนูเลื่อนตรงกลาง · ผู้ใช้ปักล่าง — กันบั๊ก margin-top:auto + overflow */
.sb-scroll{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  overflow-anchor:none;
  scroll-behavior:auto;
  scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.35) transparent;
}
.sb-scroll::-webkit-scrollbar{width:5px}
.sb-scroll::-webkit-scrollbar-thumb{background:rgba(124,58,237,.32);border-radius:99px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:rgba(124,58,237,.5)}
.dash-main{margin-left:256px;flex:1;display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}

.sb-logo{
  display:flex;align-items:center;gap:11px;padding:20px 18px;
  border-bottom:1px solid var(--sb-divider);flex-shrink:0;
}
.sb-logo .ic{
  width:40px;height:40px;border-radius:12px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(124,58,237,.5);flex-shrink:0;
}
.sb-logo .ic svg{width:21px;height:21px;color:#fff;stroke-width:2}
.sb-logo b{color:var(--sb-brand);font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap;transition:color .3s}
.sb-logo>div span{display:block;font-size:10px;color:var(--sb-brand-sub);letter-spacing:.5px}
.lv{
  margin-left:auto;background:rgba(124,58,237,.18);color:#7c3aed;
  font-size:10px;padding:3px 9px;border-radius:99px;font-weight:700;
  letter-spacing:.5px;white-space:nowrap;flex-shrink:0;
  border:1px solid rgba(124,58,237,.28);
}
[data-theme="dark"] .lv{background:rgba(124,58,237,.22);color:#c4b5fd}

/* ── Brand logo (company_logo) — โลโก้ที่อัปโหลดในกล่องไอคอน + คงชื่อ/ป้ายรองคมชัด ── */
.sb-logo .ic--logo{background:#fff;padding:3px;box-shadow:0 4px 12px rgba(124,58,237,.28)}
.sb-logo .ic--logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:9px}

.sb-section{
  padding:18px 18px 6px;font-size:10px;letter-spacing:1.6px;
  color:var(--sb-section);text-transform:uppercase;font-weight:700;
  transition:color .3s;
}
.sb-item{
  display:flex;align-items:center;gap:10px;padding:8px 11px;
  margin:1px 10px;border-radius:10px;color:var(--sb-item);
  font-size:13.5px;font-weight:500;
  transition:color .18s,background .18s,box-shadow .2s;
}
.sb-item:hover{
  background:var(--sb-item-hover-bg);color:var(--sb-item-hover-color);text-decoration:none;
}
.sb-item.active{
  background:var(--sb-item-active-bg);
  color:var(--sb-item-active-color);font-weight:600;
  /* inset sheen (not an outer glow) so .sb-group-items overflow:hidden can't clip it */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.sb-item .ico{
  width:24px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:inherit;opacity:.8;
  transition:background .18s,opacity .18s;
}
.sb-item .ico svg{width:17px;height:17px;display:block}
.sb-item:hover .ico{opacity:1}
.sb-item.active .ico{opacity:1;background:var(--sb-icobadge)}
.sb-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item .badge-n{
  margin-left:auto;background:linear-gradient(135deg,#fb7185,#e11d48);
  color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;
  box-shadow:0 2px 8px rgba(225,29,72,.35);
}
/* ── Sidebar groups — each group is a rounded card (header + items) ── */
.sb-group{
  background:var(--sb-group-bg);
  border:1px solid var(--sb-group-border);
  border-radius:14px;margin:8px 10px;overflow:hidden;
  --sb-dot:#7c3aed;
  transition:background .3s,border-color .3s;
}
/* category dot colour per group */
.sb-group[data-group="main"],.sb-group[data-group="overview"]{--sb-dot:#3b82f6}
.sb-group[data-group="services"]{--sb-dot:#10b981}
.sb-group[data-group="account"],.sb-group[data-group="billing"]{--sb-dot:#a855f7}
.sb-group[data-group="system"]{--sb-dot:#f59e0b}
.sb-group-head{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:11px 14px;font-size:11px;letter-spacing:.3px;text-transform:none;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;line-height:inherit;
}
.sb-group-head::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--sb-dot);box-shadow:0 0 6px var(--sb-dot);
}
.sb-group-head .sb-gtitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-group-head:hover{color:var(--sb-item-hover-color)}
.sb-gchev{flex-shrink:0;opacity:.6;transition:transform .22s}
.sb-group.closed .sb-gchev{transform:rotate(-90deg)}
/* จุดเตือนเมื่อกลุ่มที่ย่ออยู่มีรายการแจ้งเตือน (badge) ข้างใน */
.sb-group.closed .sb-group-head.has-badge::after{
  content:'';width:7px;height:7px;border-radius:99px;flex-shrink:0;
  background:linear-gradient(135deg,#fb7185,#e11d48);
  box-shadow:0 0 0 3px rgba(225,29,72,.16);
}
.sb-group-body{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .25s ease;
}
.sb-group.closed .sb-group-body{grid-template-rows:0fr}
.sb-group-items{overflow:hidden;min-height:0;padding:0 6px 6px}
.sb-group-items .sb-item{margin:2px 0}
.sb-group.closed .sb-group-items{padding-bottom:0}
/* โหมดยุบ sidebar เป็นไอคอน: ปิดระบบกลุ่ม โชว์ทุกเมนูเสมอ */
.app.sb-col .sb-group-body{grid-template-rows:1fr !important}
/* ปิด transition ชั่วขณะตอนโหลดหน้า (JS คืนสถานะกลุ่ม) — กันเมนูกระตุก */
.sidebar.sb-no-anim .sb-group-body,
.sidebar.sb-no-anim .sb-gchev{transition:none !important}

.sb-foot{margin-top:auto;padding:14px 20px;border-top:1px solid var(--sb-divider);font-size:11px;color:var(--sb-section)}

/* Sidebar user — pinned at bottom by .sb-scroll taking the middle space */
.sb-user{
  padding:14px 16px;
  border-top:1px solid var(--sb-divider);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.su-av{
  width:34px;height:34px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;
  box-shadow:0 3px 10px rgba(124,58,237,.4);flex-shrink:0;overflow:hidden;
}
.su-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.su-info{flex:1;min-width:0}
.su-name{color:var(--sb-user-name);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.su-role{color:var(--sb-user-role);font-size:10.5px;transition:color .3s}
.sb-user button{
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  color:#f87171;width:30px;height:30px;border-radius:8px;
  cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:.15s;flex-shrink:0;
}
.sb-user button:hover{background:rgba(239,68,68,.22);color:#fca5a5}

/* ─── Topbar ────────────────────────────────────────────────────── */
.topbar{
  height:64px;background:var(--card);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:12px;
  position:sticky;top:0;z-index:20;
  box-shadow:0 4px 20px rgba(124,58,237,.06);
}
.topbar h2{font-size:16px;font-weight:700;color:var(--text)}
.topbar .crumb{color:var(--muted);font-size:12px}
.topbar .crumb a{color:var(--muted)}
.topbar .crumb a:hover{color:var(--primary)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar-divider{width:1px;height:24px;background:var(--border);margin:0 2px}

/* Quick search */
.ts-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:12px;padding:7px 14px;min-width:200px;
  backdrop-filter:blur(8px);transition:.2s;
}
.ts-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.ts-wrap .ts-ico{color:var(--muted);flex-shrink:0;display:flex;align-items:center}
.ts-wrap input{border:none;background:transparent;font-family:inherit;font-size:13.5px;color:var(--text);width:100%;outline:none}
.ts-wrap input::placeholder{color:var(--muted)}

/* Icon buttons */
.noti-btn,.theme-btn,.fullscreen-btn{
  width:38px;height:38px;border-radius:11px;
  background:var(--card);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;backdrop-filter:blur(8px);
  transition:.15s;text-decoration:none;position:relative;
}
.noti-btn:hover,.theme-btn:hover,.fullscreen-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary);text-decoration:none}
/* SVG sizing in topbar & sidebar UI buttons */
.noti-btn svg,.theme-btn svg,.fullscreen-btn svg{width:18px;height:18px;display:block;flex-shrink:0}
.mobile-bar svg{width:18px;height:18px;display:block}
.sb-collapse-btn svg{width:15px;height:15px;display:block}
.ts-ico svg{width:14px;height:14px;display:block;flex-shrink:0}
.bell-btn svg{width:18px;height:18px;display:block}
.pm-ic svg{width:15px;height:15px;display:block}
.sb-user button svg{width:15px;height:15px;display:block}
.ndot{
  position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#ef4444,#dc2626);border:2px solid var(--bg);
}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:600;font-size:14px;box-shadow:0 4px 12px rgba(124,58,237,.3);
  cursor:pointer;transition:.15s;
}
.avatar:hover{transform:scale(1.08)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.pm-head .pm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.pm-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;background:var(--primary-light)}
.mobile-bar{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:9px;width:36px;height:36px;
  display:none;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;
}
.dash-content{padding:24px 26px;flex:1}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:920px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);padding:16px 24px;gap:14px;z-index:49;
  }
  .hero h1{font-size:31px}
  .plans,.feat-grid,.how-grid,.trust-card,.grid-5,.grid-4,.grid-3,.grid-23,.grid-2,.foot-grid{grid-template-columns:1fr 1fr}
  .sidebar{transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:none}
  .dash-main{margin-left:0}
  .mobile-bar{display:flex}
  .ts-wrap{display:none}
}
@media(max-width:560px){
  .plans,.feat-grid,.how-grid,.trust-card,.grid-4,.grid-3,.grid-23,.grid-2,.foot-grid{grid-template-columns:1fr}
  .trust-item+.trust-item{border-left:none;border-top:1px solid var(--border);padding-top:16px;margin-top:16px}
  .hero h1{font-size:27px}
  .search-bar{flex-direction:column;gap:8px}
  .social-btns{grid-template-columns:1fr}
}

/* ─── ADMIN ENHANCEMENTS ────────────────────────────────────────── */

/* Stat cards */
.stat-card .stat-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;display:block}
.stat-card .stat-val{font-size:30px;font-weight:800;color:var(--text);line-height:1;display:block}

/* Gradient icon palettes */
.gic-v{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.gic-g{background:linear-gradient(135deg,#4ade80,#16a34a)}
.gic-b{background:linear-gradient(135deg,#38bdf8,#0284c7)}
.gic-y{background:linear-gradient(135deg,#fbbf24,#d97706)}
.gic-r{background:linear-gradient(135deg,#f87171,#dc2626)}
.gic-p{background:linear-gradient(135deg,#c084fc,#9333ea)}
.gic-o{background:linear-gradient(135deg,#fb923c,#ea580c)}
.gic-c{background:linear-gradient(135deg,#2dd4bf,#0d9488)}

/* KPI v2 */
.kpi2{display:flex;flex-direction:column;min-height:118px}
.kpi2 .k2-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.kpi2 .k2-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;line-height:1.4;padding-top:3px}
.kpi2 .k2-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.kpi2 .k2-val{font-size:30px;font-weight:800;line-height:1;color:var(--text);margin-bottom:10px;margin-top:auto}
.kpi2 .k2-val.sm{font-size:22px}
.kpi2 .k2-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.kpi2 .k2-sub{font-size:12px;color:var(--muted)}
.kpi2 .k2-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;display:inline-block}
.kpi2 .k2-tag.good{background:var(--success-bg);color:#059669}
.kpi2 .k2-tag.warn{background:var(--warning-bg);color:#d97706}
.kpi2 .k2-tag.info{background:var(--info-bg);color:#0284c7}
.kpi2 .k2-tag.bad{background:var(--danger-bg);color:#dc2626}
.kpi2 .k2-tag.neu{background:rgba(100,116,139,.1);color:var(--muted)}

/* Pill tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tabs a,.tabs button{
  display:inline-flex;align-items:center;gap:6px;padding:7px 18px;border-radius:99px;
  font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;
  border:1.5px solid var(--border);background:var(--card);backdrop-filter:blur(8px);
  cursor:pointer;transition:.15s;font-family:inherit;line-height:1;white-space:nowrap;
}
.tabs a:hover,.tabs button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);text-decoration:none}
.tabs a.on,.tabs button.on{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.tabs .cnt{font-size:11px;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:var(--border);color:var(--muted);border-radius:99px;padding:0 5px;line-height:1;transition:.15s}
.tabs a.on .cnt,.tabs button.on .cnt{background:rgba(255,255,255,.28);color:#fff}

/* Card title */
.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.card-title h3{margin:0}
.card-title .more{color:var(--muted);font-size:12.5px;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.card-title .more:hover{color:var(--primary)}

/* Empty state */
/* Legacy emoji-based empty-state (admin views) — keep until all views migrate to empty_state() helper */
.empty-state .ei{font-size:38px;display:block;opacity:.5;line-height:1}
.empty-state.legacy{padding:36px 20px;color:var(--muted);background:transparent;border:none;display:block}
.empty-state.legacy p{font-size:13.5px;margin-top:10px}

/* Quick links */
.qlinks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.ql{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  background:var(--card);border:1.5px solid var(--glass-border);
  border-radius:12px;color:var(--text);font-size:13px;font-weight:500;
  text-decoration:none;transition:.2s;backdrop-filter:blur(10px);position:relative;
}
.ql:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,.18)}
.ql-i{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:#fff}
.ql-badge{position:absolute;top:-5px;right:-5px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:99px;padding:0 5px;font-weight:700;box-shadow:0 2px 8px rgba(239,68,68,.35)}

/* Filter row */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filter-row .form-control{min-width:160px;max-width:220px}

/* ─── NEW COMPONENTS ────────────────────────────────────────────── */

/* Toast Notifications */
.toast-container{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:12px;padding:14px 18px;
  border-radius:14px;background:var(--card-solid);border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,.18);backdrop-filter:blur(20px);
  min-width:280px;max-width:380px;pointer-events:all;
  animation:toastIn .3s ease;font-size:13.5px;
}
.toast.exit{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px) scale(.96)}}
.toast .ti{font-size:19px;flex-shrink:0;margin-top:1px}
.toast .tc{flex:1}
.toast .tt{font-weight:600;margin-bottom:2px;color:var(--text)}
.toast .tm{color:var(--muted);font-size:12.5px}
.toast .tx{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;padding:0;margin-left:4px;line-height:1;flex-shrink:0}
.toast-success{border-color:rgba(16,185,129,.3)}
.toast-error{border-color:rgba(239,68,68,.3)}
.toast-warning{border-color:rgba(245,158,11,.3)}
.toast-info{border-color:rgba(14,165,233,.3)}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  z-index:500;display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card-solid);border:1px solid var(--border);border-radius:20px;
  padding:32px;max-width:500px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.25);animation:modalIn .25s ease;position:relative;
}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
.modal-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.modal-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0;transition:.15s}
.modal-close:hover{color:var(--text)}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}

/* Chart */
.chart-wrap{position:relative;height:220px;margin-top:4px}
.chart-wrap canvas{width:100%!important;height:100%!important}
.chart-wrap-lg{height:280px}

/* Calendar */
.cal-wrap .fc{font-family:'Prompt',sans-serif}
.cal-wrap .fc-toolbar-title{font-size:15px;font-weight:700}
.cal-wrap .fc-button{
  background:var(--card)!important;border:1.5px solid var(--border)!important;
  color:var(--text)!important;border-radius:9px!important;
  font-size:12.5px!important;padding:5px 12px!important;
  box-shadow:none!important;
}
.cal-wrap .fc-button:hover{background:var(--primary-light)!important;border-color:var(--primary)!important}
.cal-wrap .fc-button-active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.cal-wrap .fc-daygrid-day-number{color:var(--text)}
.cal-wrap .fc-col-header-cell-cushion{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
/* ช่อง "วันนี้" — default ของ FullCalendar เป็นเหลืองจาง กลายเป็นกล่องเทาขุ่นใน dark mode */
.cal-wrap .fc .fc-day-today{background:var(--primary-light)!important;box-shadow:inset 0 0 0 1.5px var(--primary)}
.cal-wrap .fc .fc-day-today .fc-daygrid-day-number{color:var(--primary);font-weight:700}
.cal-wrap .fc .fc-day-today .fc-daygrid-day-number::after{
  content:'วันนี้';display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:10px;font-weight:600;vertical-align:1px;
}

/* API key display */
.api-key-box{
  font-family:'Courier New',monospace;background:var(--primary-light);
  border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;font-size:12.5px;word-break:break-all;color:var(--primary);
}

/* Notification badge */
.notif-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px;
  border-radius:12px;transition:.15s;cursor:pointer;
}
.notif-item:hover{background:var(--primary-light)}
.notif-item.unread{background:rgba(124,58,237,.06)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:6px}

/* ─── DARK MODE OVERRIDES ───────────────────────────────────────── */
[data-theme="dark"] .site-nav{background:rgba(15,7,40,.9)}
[data-theme="dark"] .site-foot{background:#08041a}
[data-theme="dark"] .auth-card{background:rgba(30,15,60,.92);border-color:rgba(124,58,237,.3)}
[data-theme="dark"] .auth-card h1{color:#ede9fe}
[data-theme="dark"] .auth-card .sub{color:#9b8ec0}
[data-theme="dark"] .auth-wrap{background:linear-gradient(135deg,#1a0533 0%,#0d0820 100%)}
[data-theme="dark"] .topbar{background:rgba(14,7,32,.88);border-color:rgba(124,58,237,.2)}

/* ═══════════ Admin auth (login + 2FA) — modern split-screen ═══════════ */
.aq{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 18px;
    background:radial-gradient(120% 120% at 0% 0%,#efe7fb,#e7dcf7 60%,#ddd0f2)}
.aq-card{width:100%;max-width:960px;display:grid;grid-template-columns:44% 56%;
    background:#fff;border:1px solid rgba(124,58,237,.14);border-radius:24px;overflow:hidden;
    box-shadow:0 40px 90px -50px rgba(46,16,101,.6)}
@media(max-width:760px){.aq-card{grid-template-columns:1fr;max-width:460px}}

.aq-brand{position:relative;overflow:hidden;padding:36px 32px;color:#f3ecff;display:flex;flex-direction:column;
    background:radial-gradient(120% 80% at 10% 0%,rgba(168,85,247,.5),transparent 55%),
               radial-gradient(120% 90% at 100% 100%,rgba(99,102,241,.45),transparent 55%),
               linear-gradient(160deg,#2a1065,#1a0b3a 60%,#12082e)}
@media(max-width:760px){.aq-brand{padding:24px 26px 20px}}
.aq-brand::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%)}
.aq-orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5;pointer-events:none}
.aq-orb.a{width:200px;height:200px;background:#c084fc;top:-60px;right:-40px;animation:aqfloat 9s ease-in-out infinite}
.aq-orb.b{width:160px;height:160px;background:#6366f1;bottom:-50px;left:-30px;animation:aqfloat 11s ease-in-out infinite reverse}
@keyframes aqfloat{50%{transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){.aq-orb{animation:none}}
.aq-top,.aq-mid,.aq-btm{position:relative;z-index:1}
.aq-logo{display:flex;align-items:center;gap:11px}
.aq-mark{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);flex:none;overflow:hidden}
.aq-mark img{width:100%;height:100%;object-fit:contain;padding:4px}
.aq-mark svg{width:26px;height:26px;color:#7c3aed}
.aq-logo>div b{font-size:15px;font-weight:700;color:#fff;line-height:1.1;display:block}
.aq-logo>div span{font-size:10.5px;color:#c9b8f0;letter-spacing:1.5px;text-transform:uppercase}
.aq-mid{margin:auto 0;padding:24px 0}
.aq-mid h2{font-size:26px;line-height:1.25;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.aq-mid h2 em{font-style:normal;background:linear-gradient(90deg,#e9d5ff,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.aq-mid p{color:#c9b8f0;font-size:13px;line-height:1.65;margin:0;max-width:34ch}
.aq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.aq-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#e9d5ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:5px 10px;border-radius:99px}
.aq-chip svg{width:13px;height:13px;flex:none}
.aq-btm{font-size:11px;color:#c9b8f0;display:flex;align-items:center;gap:7px}
.aq-pulse{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:aqpl 2s infinite}
@keyframes aqpl{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@media(max-width:760px){.aq-mid{display:none}}

.aq-form{padding:42px 40px;display:flex;flex-direction:column;justify-content:center;background:#fff;color:#211a3d}
@media(max-width:760px){.aq-form{padding:30px 24px}}
.aq-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a855f7;font-weight:700;margin-bottom:9px}
.aq-form h1{font-size:24px;font-weight:800;margin:0 0 6px;color:#1e1b4b;letter-spacing:-.01em}
.aq-lead{color:#6d6390;font-size:13px;margin:0 0 22px;line-height:1.55}
.aq-lead b{color:#211a3d}
.aq-alert{background:#fbe9e9;border:1px solid rgba(220,38,38,.25);color:#b91c1c;font-size:13px;padding:11px 14px;border-radius:11px;margin-bottom:18px}
.aq-alert.ok{background:#e7f7ee;border-color:rgba(15,157,107,.25);color:#0f9d6b}
.aq-field{margin-bottom:15px}
.aq-field>label{display:block;font-size:12px;font-weight:600;margin-bottom:7px;color:#211a3d}
.aq-inp{position:relative;display:flex;align-items:center}
.aq-inp>svg.lead{position:absolute;left:13px;width:17px;height:17px;color:#8a80a8;pointer-events:none}
.aq-inp input{width:100%;background:#f6f3fd;border:1.5px solid rgba(124,58,237,.22);color:#211a3d;border-radius:12px;padding:13px 14px 13px 40px;font:inherit;font-size:14.5px;transition:border-color .15s,box-shadow .15s}
.aq-inp input::placeholder{color:#9a90b6}
.aq-inp input:focus{outline:0;border-color:#a855f7;box-shadow:0 0 0 4px rgba(168,85,247,.16)}
.aq-peek{position:absolute;right:8px;border:0;background:transparent;color:#8a80a8;cursor:pointer;padding:7px;border-radius:8px;display:grid;place-items:center}
.aq-peek:hover{color:#a855f7}
.aq-peek svg{width:18px;height:18px}
.aq-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;font-size:12.5px}
.aq-row label{display:flex;align-items:center;gap:7px;color:#6d6390;cursor:pointer}
.aq-row input[type=checkbox]{accent-color:#7c3aed}
.aq-row a{color:#a855f7;font-weight:600;text-decoration:none}
.aq-row a:hover{text-decoration:underline}
.btn.aq-submit{gap:8px}
.aq-submit svg{width:17px;height:17px}
.aq-foot{margin-top:22px;text-align:center}
.aq-foot a{color:#6d6390;font-size:13px;text-decoration:none}
.aq-foot a:hover{color:#a855f7}

.aq-shield{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 14px 30px -12px #7c3aed}
.aq-shield svg{width:27px;height:27px}
.aq-otp{display:flex;gap:10px;margin:4px 0}
@media(max-width:400px){.aq-otp{gap:7px}}
.aq-otp input{flex:1;min-width:0;aspect-ratio:1/1;text-align:center;font-size:25px;font-weight:700;font-family:ui-monospace,Consolas,monospace;background:#f6f3fd;border:1.5px solid rgba(124,58,237,.22);color:#211a3d;border-radius:14px;transition:border-color .12s,box-shadow .12s,transform .12s}
.aq-otp input:focus{outline:0;border-color:#a855f7;box-shadow:0 0 0 4px rgba(168,85,247,.18);transform:translateY(-2px)}
.aq-otp input.filled{border-color:#a855f7;background:#f3ebfd}
.aq-otp.done input{border-color:#0f9d6b;background:#e9f7f0}
.aq-otp-hint{display:flex;align-items:center;justify-content:space-between;margin:13px 0 6px;font-size:12.5px;color:#6d6390}
.aq-link{border:0;background:transparent;color:#a855f7;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0}
.aq-link:hover{text-decoration:underline}
.aq-note{margin-top:16px;font-size:12px;color:#6d6390;line-height:1.6;background:#f6f3fd;border:1px solid rgba(124,58,237,.16);border-radius:12px;padding:11px 13px}
.aq-note b{color:#211a3d}
.aq-hidden{display:none!important}

/* Theme toggle button (บนหน้า auth) — reuse #theme-btn ที่ app.js ผูกให้ */
.aq-theme{position:fixed;top:18px;right:18px;z-index:5;width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(124,58,237,.2);background:rgba(255,255,255,.82);color:#5b21b6;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aq-theme:hover{border-color:#a855f7}
.aq-theme svg{width:18px;height:18px}

/* Dark mode — ตาม data-theme (hm_theme) ให้ตรงกับหน้าหลัก ไม่ตาม OS */
[data-theme="dark"] .aq{background:radial-gradient(120% 120% at 0% 0%,#1a0b3a,#140a2e 60%,#0d0820)}
[data-theme="dark"] .aq-card{background:#1a1140;border-color:rgba(168,85,247,.2)}
[data-theme="dark"] .aq-form{background:#1a1140;color:#ece7fb}
[data-theme="dark"] .aq-form h1{color:#f3ecff}
[data-theme="dark"] .aq-lead{color:#a99cce}
[data-theme="dark"] .aq-lead b{color:#ece7fb}
[data-theme="dark"] .aq-field>label{color:#ece7fb}
[data-theme="dark"] .aq-inp input,[data-theme="dark"] .aq-otp input{background:#241653;border-color:rgba(168,85,247,.34);color:#ece7fb}
[data-theme="dark"] .aq-inp input::placeholder{color:#8f83b8}
[data-theme="dark"] .aq-otp input.filled{background:#2e1a63}
[data-theme="dark"] .aq-otp.done input{border-color:#22c99a;background:#183a30}
[data-theme="dark"] .aq-note{background:#241653;border-color:rgba(168,85,247,.28)}
[data-theme="dark"] .aq-note b{color:#ece7fb}
[data-theme="dark"] .aq-row label,[data-theme="dark"] .aq-foot a{color:#a99cce}
[data-theme="dark"] .aq-alert{background:#3a1620;border-color:rgba(220,38,38,.4);color:#fca5a5}
[data-theme="dark"] .aq-theme{background:rgba(40,22,83,.7);border-color:rgba(168,85,247,.3);color:#e9d5ff}
[data-theme="dark"] .ts-wrap{background:rgba(255,255,255,.06)}
[data-theme="dark"] .ts-wrap input{color:#ede9fe}
[data-theme="dark"] .modal{background:#1a0938}
[data-theme="dark"] .toast{background:#1a0938}
[data-theme="dark"] table td{border-color:rgba(124,58,237,.1)}
[data-theme="dark"] tbody tr:hover td{background:rgba(124,58,237,.1)}
/* Dark mode: table links (--primary #7c3aed) are too dark on dark bg → brighter lavender */
[data-theme="dark"] .t-strong,[data-theme="dark"] td a:not(.btn){color:#c4b5fd}
[data-theme="dark"] .t-strong:hover,[data-theme="dark"] td a:not(.btn):hover{color:#ddd0ff}
[data-theme="dark"] .card:hover{box-shadow:0 12px 40px rgba(124,58,237,.25)}
[data-theme="dark"] .plan,.feat{background:var(--card)}

/* Soft form panel (inline new-customer card etc.) */
.form-soft{background:rgba(248,250,252,.6)}
[data-theme="dark"] .form-soft{background:rgba(124,58,237,.08)}

/* Dark mode adjustments for v1.2 components */
[data-theme="dark"] .usage-cell .usage-bar{background:rgba(255,255,255,.08)}
[data-theme="dark"] .coupon-feedback.ok{background:rgba(16,185,129,.18);color:#34d399}
[data-theme="dark"] .coupon-feedback.err{background:rgba(239,68,68,.18);color:#fca5a5}
[data-theme="dark"] .kb-cat-card{background:var(--card)}
[data-theme="dark"] .kb-helpful{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.25)}
[data-theme="dark"] .kb-helpful-done{color:#34d399}
[data-theme="dark"] .kb-content code{background:rgba(124,58,237,.2);color:#c4b5fd}
[data-theme="dark"] .kb-content blockquote{background:rgba(124,58,237,.08);color:#a78bca}
[data-theme="dark"] .kb-related a:hover{color:#c4b5fd}
[data-theme="dark"] .empty-state{background:rgba(124,58,237,.04)}
[data-theme="dark"] .bulk-bar{box-shadow:0 6px 20px rgba(124,58,237,.4)}
[data-theme="dark"] .bg-soft{background:rgba(124,58,237,.05)}
[data-theme="dark"] .trust-card{background:rgba(255,255,255,.04)}
/* กล่องค้นหา hero: คงพื้นขาว + ตัวอักษรเข้มเสมอ (อยู่บน hero สีม่วงทั้ง 2 ธีม → คอนทราสต์สูง อ่านออกแน่นอน) */
[data-theme="dark"] .search-bar{background:rgba(255,255,255,.95)}
[data-theme="dark"] .search-bar input{color:#1e1b4b}
[data-theme="dark"] .search-bar input::placeholder{color:#6b5b8a;opacity:1}

/* ─── PRINT STYLES ──────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.qlinks,.tabs,.btn,.noti-btn,.theme-btn,.fullscreen-btn,
  .mobile-bar,.filter-row,.toast-container,.modal-overlay,.app::before,.app::after{
    display:none!important;
  }
  .dash-main{margin-left:0!important}
  .app{display:block;background:#fff}
  .card{
    break-inside:avoid;box-shadow:none!important;
    border:1px solid #ddd!important;backdrop-filter:none!important;
    background:#fff!important;
  }
  body{background:#fff;color:#000;font-size:13px}
  a{color:#000}
  th{background:#f5f0ff!important;color:#333!important}
  .print-show{display:block!important}
  .no-print{display:none!important}
}

/* ─── SIDEBAR COLLAPSE (desktop) ────────────────────────────────── */
.sb-collapse-btn{
  display:none;background:none;border:none;color:var(--muted);
  cursor:pointer;padding:6px 8px;border-radius:8px;
  transition:color .2s,background .2s;line-height:1;margin-right:4px;
}
.sb-collapse-btn:hover{color:var(--text);background:var(--primary-light)}
@media(min-width:769px){.sb-collapse-btn{display:flex;align-items:center;justify-content:center}}

/* Collapsed sidebar state */
.app.sb-col .sidebar{width:68px;overflow:hidden}
.app.sb-col .dash-main{margin-left:68px}
.app.sb-col .sb-logo>:not(.ic){display:none}
.app.sb-col .sb-logo .lv{display:none}
.app.sb-col .sb-logo{justify-content:center;padding:20px 0}
.app.sb-col .sb-section{display:none}
/* font-size:0 hides raw text-nodes (label text); .ico restores its own size */
.app.sb-col .sb-group{background:none;border:none;margin:0;border-radius:0;overflow:visible}
.app.sb-col .sb-group-items{padding:0}
.app.sb-col .sb-item{
  justify-content:center;padding:9px 0;gap:0;margin:3px 8px;
  overflow:hidden;white-space:nowrap;font-size:0;border-radius:12px;
}
.app.sb-col .sb-item .ico{margin:0;width:22px;height:22px;flex-shrink:0}
.app.sb-col .sb-item .ico svg{width:21px;height:21px}
.app.sb-col .sb-item span:not(.ico){display:none}
.app.sb-col .sb-item .badge,.app.sb-col .sb-item .badge-n{display:none}
.app.sb-col .sb-foot{display:none}
/* Collapsed user strip — avatar only */
.app.sb-col .sb-user{justify-content:center;padding:12px 0;gap:0;flex-wrap:wrap}
.app.sb-col .sb-user .su-info{display:none}
.app.sb-col .sb-user form{display:none}
.app.sb-col .sb-user .su-av{margin:0}

/* ─── NOTIFICATION BELL + DROPDOWN ──────────────────────────────── */
.bell-wrap{position:relative}
.bell-btn{
  background:none;border:none;cursor:pointer;font-size:20px;
  padding:6px 8px;border-radius:10px;transition:background .2s;
  position:relative;color:var(--text);line-height:1;
}
.bell-btn:hover{background:var(--primary-light)}
.bell-badge{
  position:absolute;top:2px;right:2px;
  background:#ef4444;color:#fff;font-size:9px;font-weight:700;
  min-width:16px;height:16px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;pointer-events:none;
}
.noti-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:340px;background:var(--card-solid);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--glass-shadow);z-index:200;
  display:none;overflow:hidden;
}
.noti-dropdown.open{display:block}
.noti-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--border);
}
.noti-head h4{font-size:14px;font-weight:700;margin:0}
.noti-read-all{
  background:none;border:none;cursor:pointer;color:var(--primary);
  font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;
  transition:background .2s;
}
.noti-read-all:hover{background:var(--primary-light)}
.noti-list{max-height:320px;overflow-y:auto;scrollbar-width:thin}
.noti-item{
  display:flex;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .15s;align-items:flex-start;
}
.noti-item:last-child{border-bottom:none}
.noti-item:hover{background:var(--primary-light)}
.noti-item.unread{background:rgba(124,58,237,.06)}
.noti-ic{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;background:var(--primary-light);
}
.noti-body{flex:1;min-width:0}
.noti-title{font-size:13px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noti-msg{font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.noti-time{font-size:10.5px;color:var(--muted);margin-top:4px;white-space:nowrap}
.noti-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);
  flex-shrink:0;margin-top:5px}
.noti-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:13px}
.noti-footer{padding:10px 16px;border-top:1px solid var(--border);text-align:center}
.noti-footer a{font-size:12px;color:var(--primary);font-weight:600;text-decoration:none}
[data-theme="dark"] .noti-dropdown{background:var(--card-solid);border-color:rgba(139,92,246,.25)}
/* dark: dropdown link contrast + clearer unread highlight */
[data-theme="dark"] .noti-read-all,[data-theme="dark"] .noti-footer a{color:#c4b5fd}
[data-theme="dark"] .noti-read-all:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .noti-item.unread{background:rgba(139,92,246,.16);box-shadow:inset 3px 0 0 #8b5cf6}
[data-theme="dark"] .noti-dot{background:#a78bfa}

/* ─── PROFILE MENU (avatar dropdown) ────────────────────────────── */
.pm-wrap{position:relative}
.pm-btn{border:none;font-family:inherit;padding:0}
.pm-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:236px;background:var(--card-solid);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--glass-shadow);z-index:200;
  display:none;overflow:hidden;
}
.pm-dropdown.open{display:block;animation:toastIn .18s ease}
.pm-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border)}
.pm-head .pm-av{
  width:42px;height:42px;border-radius:50%;background:var(--grad);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;
  box-shadow:0 4px 12px rgba(124,58,237,.3);
}
.pm-head .pm-meta{min-width:0}
.pm-head .pm-name{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-head .pm-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-list{padding:6px}
.pm-list form{margin:0}
.pm-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  font-size:13px;color:var(--text);text-decoration:none;cursor:pointer;transition:background .15s;
  width:100%;background:none;border:none;font-family:inherit;text-align:left;
}
.pm-item:hover{background:var(--primary-light);text-decoration:none}
.pm-item .pm-ic{width:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted)}
.pm-item.danger{color:#dc2626}
.pm-item.danger:hover{background:rgba(239,68,68,.1)}
.pm-divider{height:1px;background:var(--border);margin:6px 4px}
[data-theme="dark"] .pm-dropdown{background:var(--card-solid);border-color:rgba(139,92,246,.25)}

/* breadcrumb separator (multi-level trail) */
.topbar .crumb .sep{margin:0 5px;opacity:.45}

/* ═══════════════════════════════════════════════════════════════
   PUBLIC SITE v3 — Extended Components
   ═══════════════════════════════════════════════════════════════ */

/* ─── Announcement Bar ─────────────────────────────────────────── */
.ann-bar{
  background:var(--grad);color:#fff;text-align:center;
  padding:10px 48px;font-size:13px;position:relative;z-index:60;
  display:flex;align-items:center;justify-content:center;
}
.ann-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.ann-link{color:#fde047;font-weight:600;margin-left:10px;white-space:nowrap}
.ann-link:hover{text-decoration:underline}
.ann-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.2);border:none;color:#fff;
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.ann-close:hover{background:rgba(255,255,255,.35)}
/* tone variants */
.ann-bar.ann-tone-info   {background:#0284c7}
.ann-bar.ann-tone-success{background:#059669}
.ann-bar.ann-tone-warning{background:#d97706}
.ann-bar.ann-tone-promo  {background:var(--grad)}
.ann-bar.ann-tone-info .ann-link,
.ann-bar.ann-tone-success .ann-link,
.ann-bar.ann-tone-warning .ann-link{color:#fff;text-decoration:underline}

/* ─── Nav button icons ─────────────────────────────────────────── */
.btn-icon{
  background:none;border:1.5px solid var(--border);border-radius:9px;
  cursor:pointer;font-size:16px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;color:var(--text);
}
.btn-icon:hover{border-color:var(--primary);background:var(--primary-light)}

/* ─── Mobile nav open ──────────────────────────────────────────── */
@media(max-width:768px){
  .nav-links{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(10,5,28,.96);backdrop-filter:blur(24px);
    flex-direction:column;gap:0;padding:80px 28px 28px;z-index:55;
    overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    color:#e9d5ff;font-size:20px;font-weight:600;
    padding:16px 0;border-bottom:1px solid rgba(139,92,246,.2);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-login,.nav-reg{display:none}
  .nav-ham{display:flex!important}
}
@media(min-width:769px){
  .nav-ham{display:none!important}
  .nav-links{display:flex!important}
}

/* ─── Back-to-top ──────────────────────────────────────────────── */
.back-top{
  position:fixed;bottom:28px;right:28px;z-index:100;
  width:44px;height:44px;border-radius:50%;
  background:var(--grad);color:#fff;border:none;cursor:pointer;
  font-size:20px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(124,58,237,.4);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;transform:translateY(10px);
}
.back-top.show{opacity:1;pointer-events:all;transform:none}
.back-top:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(124,58,237,.5)}

/* ─── Footer additions ─────────────────────────────────────────── */
.foot-brand{color:#fff;margin-bottom:14px}
.foot-desc{font-size:13.5px;color:#64748b;max-width:280px;line-height:1.7}
.foot-social{display:flex;gap:10px;margin-top:16px}
.soc-btn{
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.07);color:#94a3b8;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;transition:.2s;border:1px solid rgba(255,255,255,.08);
}
.soc-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);text-decoration:none}
.foot-contact{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#64748b}
.foot-contact span,
.foot-contact a{display:flex;align-items:center;gap:8px;color:#94a3b8;text-decoration:none;transition:color .15s ease}
.foot-contact a:hover{color:#fff}
.foot-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pay-badge{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#94a3b8;font-size:11px;padding:4px 10px;border-radius:6px;
}

/* ─── TLD chip (hero) ──────────────────────────────────────────── */
.tld-chip{
  background:rgba(255,255,255,.15);padding:6px 16px;border-radius:99px;
  color:rgba(255,255,255,.9);font-size:13.5px;transition:.2s;
}
.tld-chip:hover{background:rgba(255,255,255,.25);text-decoration:none;color:#fff}
.tld-chip b{color:#fde047}

/* ─── Billing toggle ───────────────────────────────────────────── */
.billing-toggle{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin-bottom:40px;flex-wrap:wrap;
}
.tog-label{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .2s}
.tog-label.active{color:var(--primary)}
.tog-switch{
  width:52px;height:28px;border-radius:99px;background:var(--grad);
  cursor:pointer;position:relative;border:none;outline:none;
  box-shadow:0 4px 12px rgba(124,58,237,.35);transition:.2s;
}
.tog-switch::after{
  content:'';position:absolute;width:22px;height:22px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:.25s;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.tog-switch.yearly::after{left:27px}
.save-badge{
  background:rgba(16,185,129,.15);color:var(--success);
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;
  border:1px solid rgba(16,185,129,.25);
}

/* ─── Domain pricing section ───────────────────────────────────── */
.domain-search-bar{max-width:640px;margin:0 auto 36px}
.tld-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:14px;margin-top:8px;
}
.tld-card{
  background:var(--card);border:1px solid var(--glass-border);border-radius:14px;
  padding:18px 20px;display:flex;align-items:center;justify-content:space-between;
  transition:.2s;backdrop-filter:var(--blur-sm);
}
.tld-card:hover{
  border-color:var(--primary);box-shadow:0 8px 24px rgba(124,58,237,.15);
  transform:translateY(-2px);
}
.tld-card .ext{font-size:18px;font-weight:800;color:var(--primary)}
.tld-card .pr{font-size:13px;color:var(--muted);margin-top:3px}
.tld-card .pr b{color:var(--text);font-size:14.5px}

/* ─── Testimonials ─────────────────────────────────────────────── */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{
  background:var(--card);border:1px solid var(--glass-border);border-radius:18px;
  padding:28px;backdrop-filter:var(--blur);transition:.2s;
}
.review-card:hover{
  box-shadow:0 12px 30px rgba(124,58,237,.15);
  transform:translateY(-3px);border-color:rgba(124,58,237,.25);
}
.review-stars{color:#f59e0b;font-size:17px;margin-bottom:12px;letter-spacing:1px}
.review-text{font-size:13.5px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.review-author{display:flex;align-items:center;gap:12px}
.review-av{
  width:40px;height:40px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:16px;flex-shrink:0;
}
.review-name{font-weight:600;font-size:14px}
.review-role{font-size:12px;color:var(--muted);margin-top:2px}

.rating-summary{
  display:flex;align-items:center;gap:24px;justify-content:center;
  margin-top:40px;padding:24px 32px;
  background:var(--card);border:1px solid var(--glass-border);border-radius:16px;
  max-width:460px;margin-left:auto;margin-right:auto;margin-top:40px;
  backdrop-filter:var(--blur-sm);
}
.rating-score{font-size:48px;font-weight:800;color:var(--primary);line-height:1}
.rating-stars{color:#f59e0b;font-size:20px;letter-spacing:2px}
.rating-label{color:var(--muted);font-size:13px;margin-top:4px}
.rating-sources{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.rate-src{
  background:var(--primary-light);color:var(--primary);
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;
}

/* ─── FAQ Accordion ────────────────────────────────────────────── */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--card);border:1px solid var(--glass-border);border-radius:14px;
  overflow:hidden;backdrop-filter:var(--blur-sm);transition:border-color .2s;
}
.faq-item.open{border-color:var(--primary)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;
  padding:18px 22px;font-family:inherit;font-size:15px;font-weight:600;
  color:var(--text);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q:hover{color:var(--primary)}
.faq-ic{
  width:28px;height:28px;border-radius:50%;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;flex-shrink:0;transition:transform .3s;
}
.faq-item.open .faq-ic{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  padding:0 22px;
}
.faq-item.open .faq-a{padding:0 22px 18px}
.faq-a p{color:var(--muted);font-size:14px;line-height:1.8}

/* ─── Contact strip ────────────────────────────────────────────── */
.contact-strip{
  background:var(--card);border:1px solid var(--glass-border);
  border-radius:22px;padding:36px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;backdrop-filter:var(--blur);
}
.contact-strip h3{font-size:20px;font-weight:700;margin-bottom:6px}
.contact-strip p{color:var(--muted);font-size:14px;line-height:1.7}
.contact-channels{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ch-badge{
  background:var(--primary-light);color:var(--primary);
  font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:99px;
  display:inline-flex;align-items:center;gap:4px;
}
.ch-badge.ch-link{
  text-decoration:none;transition:transform .12s ease, background .12s ease;
  cursor:pointer;
}
.ch-badge.ch-link:hover{background:rgba(124,58,237,.18);transform:translateY(-1px)}
.contact-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

/* ─── Settings — Billing & Payment ────────────────────────────── */
.settings-section-title{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin-bottom:12px;padding-bottom:6px;
  border-bottom:1px solid var(--border-solid);
}
.vat-toggle-row{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--primary-light);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
}
.toggle-label-main{font-weight:600;font-size:14px}
.toggle-label-sub{font-size:12px;color:var(--muted);margin-top:2px}

.payment-method-block{
  border:1px solid var(--border-solid);border-radius:12px;overflow:hidden;
  transition:border-color .2s;
}
.payment-method-block.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.pm-header{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--bg);cursor:pointer;
}
.pm-title{display:flex;align-items:center;gap:12px}
.pm-icon{font-size:24px;line-height:1}
.pm-desc{font-size:12px;color:var(--muted);margin-top:2px}
.pm-body{padding:16px;border-top:1px solid var(--border-solid);background:var(--card-solid)}

/* ─── Surname mask ─────────────────────────────────────────────── */
.surname-mask{
  display:inline-block;
  letter-spacing:2px;
  color:var(--muted);
  font-style:normal;
  opacity:.7;
  user-select:none;
}

/* ─── Utility ──────────────────────────────────────────────────── */
.text-center{text-align:center}

/* form-row: search/filter strip มาตรฐาน */
.form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-row .form-control{height:36px;padding-top:0;padding-bottom:0}
.form-row .btn{height:36px;padding:0 16px}
.form-row .h-input{flex:1;min-width:220px}
.spacer{flex:1}

/* Drawer (slide-out from right) — used in products / ssl-products */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8900;opacity:0;pointer-events:none;transition:opacity .15s}
.drawer-overlay.open{opacity:1;pointer-events:all}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--card);
  border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.15);
  z-index:9000;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .2s}
.drawer-narrow{width:440px}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.drawer-close{background:none;border:0;font-size:18px;color:var(--muted);cursor:pointer;padding:4px 8px}
.drawer-close:hover{color:var(--text)}
.drawer-body{padding:14px 18px;overflow-y:auto;flex:1}
.drawer-sec{padding:10px 0;border-bottom:1px solid var(--border)}
.drawer-sec:last-child{border-bottom:0}
.drawer-sec-title{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;margin-bottom:8px}
.drawer-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--card)}
@media (max-width:600px){.drawer,.drawer-narrow{width:100vw}}

/* Confirm modal minimal — used in ssl / domains */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none}
.confirm-overlay.open{opacity:1;pointer-events:all}
.confirm-box{background:var(--card);border:1px solid var(--border);border-radius:10px;width:100%;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:90vh;overflow-y:auto}

/* Drag-drop reorder */
.row-drag{cursor:move;color:var(--muted);user-select:none;padding:0 6px}
.row-drag:hover{color:var(--primary)}
tr.dragging{opacity:.4}
tr.drag-over{border-top:2px solid var(--primary)}

/* ─── Client Dashboard utilities ────────────────────────────── */
.welcome-banner{background:var(--grad);color:#fff;border:none}
.welcome-banner h3{color:#fff}
.welcome-banner .btn-white:hover{background:#fff;color:var(--primary)}

.ql-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text);transition:.15s;text-align:center;font-size:13px;background:var(--card)}
.ql-item:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.1)}
.ql-item.primary{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

.usage-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:4px}
.usage-bar{flex:1;height:5px;background:var(--border);border-radius:99px;overflow:hidden}
.usage-bar span{display:block;height:100%}
.usage-bar.warn span{background:#d97706}
.usage-bar.danger span{background:#dc2626}
.usage-bar.ok span{background:#10b981}

.exp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.exp-row:last-child{border-bottom:0}
.exp-kind{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;text-transform:uppercase}
.exp-kind.hosting{background:rgba(124,58,237,.1);color:var(--primary)}
.exp-kind.domain{background:rgba(14,165,233,.1);color:#0284c7}
.exp-kind.ssl{background:rgba(16,185,129,.1);color:#059669}

.notif-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.notif-row:last-child{border-bottom:0}
.notif-row:hover{background:var(--primary-light)}
.notif-row .nf-dot{flex-shrink:0;width:8px;height:8px;border-radius:99px;background:var(--primary);margin-top:6px}

/* ─── tab-item alias (pill tabs active class) ───────────────────── */
.tabs a.tab-item.active,.tabs a.tab-item:hover{
  border-color:var(--primary);color:var(--primary);
  background:var(--primary-light);text-decoration:none;
}
.tabs a.tab-item.active{
  background:var(--primary);color:#fff;font-weight:600;
}
.tabs a.tab-item.active .cnt{background:rgba(255,255,255,.28);color:#fff}

/* ─── DASHBOARD MINIMAL v4 ──────────────────────────────────────── */

/* Metric card — left-accent minimal */
.db-kpi{
  display:flex;flex-direction:column;gap:5px;
  padding:18px 20px 16px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--glass-border);
  border-left-width:3px;
  backdrop-filter:var(--blur);box-shadow:var(--glass-shadow);
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;color:var(--text);
  cursor:pointer;
}
.db-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(124,58,237,.16);text-decoration:none;color:var(--text)}
.db-kpi.ac-v{border-left-color:var(--primary)}
.db-kpi.ac-g{border-left-color:var(--success)}
.db-kpi.ac-y{border-left-color:var(--warning)}
.db-kpi.ac-r{border-left-color:var(--danger)}
.db-kpi.ac-b{border-left-color:var(--info)}
.db-kpi.ac-p{border-left-color:#a855f7}
.db-kpi .dk-lbl{
  font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted);line-height:1;
}
.db-kpi .dk-val{
  font-size:26px;font-weight:800;line-height:1;
  color:var(--text);padding:4px 0 2px;
}
.db-kpi .dk-val.sm{font-size:19px}
.db-kpi .dk-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:2px;
}
.db-kpi .dk-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Inline status tag */
.itag{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:600;padding:2px 8px;
  border-radius:99px;white-space:nowrap;flex-shrink:0;line-height:1.4;
}
.itag-g{background:var(--success-bg);color:#059669}
.itag-y{background:var(--warning-bg);color:#d97706}
.itag-r{background:var(--danger-bg);color:#dc2626}
.itag-b{background:var(--info-bg);color:#0284c7}
.itag-n{background:rgba(100,116,139,.1);color:var(--muted)}

/* Alert action strip */
.db-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:12px 18px;
  backdrop-filter:var(--blur);margin-bottom:18px;
}
.db-banner .db-hd{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted);flex-shrink:0;margin-right:4px;
}
.db-act{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:99px;
  font-size:12px;font-weight:600;text-decoration:none;
  transition:.15s;line-height:1.4;
}
.db-act:hover{opacity:.8;text-decoration:none;transform:translateY(-1px)}
.db-act-r{background:var(--danger-bg);color:#dc2626}
.db-act-y{background:var(--warning-bg);color:#d97706}
.db-act-b{background:var(--info-bg);color:#0284c7}
.db-act-g{background:var(--success-bg);color:#059669}

/* ─── WHMCS-style "to-do" tiles ─────────────────────────────────── */
.db-todo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.db-todo-head h3{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.db-todo-head .dt-date{font-size:12px;color:var(--muted);white-space:nowrap}
.db-todo{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.db-tile{
  display:flex;align-items:center;gap:15px;padding:16px 20px;border-radius:16px;
  color:#fff;text-decoration:none;position:relative;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.10);transition:transform .18s,box-shadow .18s,filter .18s;
}
.db-tile:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.20);text-decoration:none;color:#fff}
.db-tile::after{ /* soft corner glow */
  content:"";position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none;
}
.db-tile .dt-ic{
  width:54px;height:54px;border-radius:15px;flex-shrink:0;z-index:1;
  background:rgba(255,255,255,.20);display:flex;align-items:center;justify-content:center;font-size:26px;
}
.db-tile .dt-body{z-index:1;min-width:0}
.db-tile .dt-num{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.5px}
.db-tile .dt-lbl{font-size:12.5px;font-weight:500;opacity:.95;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-tile .dt-go{position:absolute;top:14px;right:16px;font-size:14px;opacity:0;transition:opacity .18s,transform .18s;z-index:1}
.db-tile:hover .dt-go{opacity:.9;transform:translateX(3px)}
.db-tile.is-zero{filter:saturate(.55) opacity(.82)}
.db-tile.has-items .dt-num::after{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;
  margin-left:8px;vertical-align:middle;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:dtPulse 1.8s infinite}
@keyframes dtPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* tile palettes */
.dt-green{background:linear-gradient(135deg,#5ec26a,#3da94f)}
.dt-pink{background:linear-gradient(135deg,#ec4f8c,#d6336c)}
.dt-orange{background:linear-gradient(135deg,#f0a93b,#e08a16)}
.dt-teal{background:linear-gradient(135deg,#56c4d8,#3a9fb5)}
@media(max-width:900px){.db-todo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.db-todo{grid-template-columns:1fr}}

/* Clean section header */
.sec-hd{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted);margin-bottom:14px;
}

/* Minimal divider row */
.srv-row{padding:10px 0;border-bottom:1px solid rgba(124,58,237,.07)}
.srv-row:last-child{border-bottom:none}

/* grid-6 */
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1100px){.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.grid-6{grid-template-columns:repeat(2,1fr)}}

/* ─── Public site dark mode extras ────────────────────────────── */
[data-theme="dark"] .ann-bar{filter:brightness(.9)}
[data-theme="dark"] .tld-card{background:var(--card)}
[data-theme="dark"] .review-card{background:var(--card)}
[data-theme="dark"] .faq-item{background:var(--card)}
[data-theme="dark"] .contact-strip{background:var(--card)}
[data-theme="dark"] .rating-summary{background:var(--card)}
[data-theme="dark"] .nav-links.open{background:rgba(6,3,18,.97)}

/* ─── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .contact-strip{flex-direction:column;text-align:center}
  .contact-btns{justify-content:center}
  .contact-channels{justify-content:center}
}
@media(max-width:560px){
  .reviews-grid{grid-template-columns:1fr}
  .tld-grid{grid-template-columns:repeat(2,1fr)}
  .billing-toggle{gap:10px}
  .ann-bar{padding:10px 40px 10px 16px;font-size:12px}
  .rating-summary{flex-direction:column;text-align:center;gap:10px}
}

/* ═══════════════════════════════════════════════════════════════
   v1.2 — Shared UI components
   ═══════════════════════════════════════════════════════════════ */

/* ─── Impersonate banner (admin-as-client mode) ─── */
.impersonate-bar{
  background:linear-gradient(135deg,#b45309,#d97706);color:#fff;
  padding:9px 16px;display:flex;align-items:center;justify-content:center;
  gap:14px;font-size:13px;position:sticky;top:0;z-index:9999;
  box-shadow:0 2px 12px rgba(180,83,9,.3);
}
.impersonate-bar svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.impersonate-bar form{margin:0}
.impersonate-back{
  background:#fff;color:#b45309;font-weight:700;padding:4px 12px;
  border:none;border-radius:8px;cursor:pointer;font-size:12.5px;transition:.15s;
}
.impersonate-back:hover{background:#fef3c7;transform:translateY(-1px)}

/* ─── Empty states ─── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;gap:14px;
  background:var(--card);border:1.5px dashed var(--border);border-radius:var(--radius);
  backdrop-filter:var(--blur-sm);
}
.empty-state .es-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(168,85,247,.06));
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
}
.empty-state .es-icon svg{width:32px;height:32px}
.empty-state h3{font-size:16px;font-weight:700;color:var(--text);margin:0}
.empty-state p{font-size:13.5px;color:var(--muted);max-width:380px;margin:0;line-height:1.6}
.empty-state .es-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.empty-state.compact{padding:32px 20px}
.empty-state.compact .es-icon{width:56px;height:56px}
.empty-state.compact .es-icon svg{width:26px;height:26px}

/* ─── Keyboard shortcut overlay ─── */
.kbd-overlay{
  position:fixed;inset:0;background:rgba(8,4,20,.55);backdrop-filter:blur(6px);
  z-index:9998;display:none;align-items:center;justify-content:center;
  animation:kbdFade .15s ease;
}
.kbd-overlay.open{display:flex}
@keyframes kbdFade{from{opacity:0}to{opacity:1}}
.kbd-modal{
  background:var(--card-solid);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);max-width:560px;width:calc(100% - 32px);
  max-height:80vh;overflow:auto;padding:24px;
}
.kbd-modal h3{font-size:17px;font-weight:700;margin:0 0 16px;color:var(--text);display:flex;align-items:center;gap:10px}
.kbd-modal h3 svg{width:20px;height:20px;color:var(--primary)}
.kbd-group{margin-bottom:18px}
.kbd-group:last-child{margin-bottom:0}
.kbd-group-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.kbd-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.kbd-row:last-child{border-bottom:none}
.kbd-row .desc{font-size:13.5px;color:var(--text)}
.kbd-row .keys{display:flex;gap:4px;flex-shrink:0}
.kbd-key{
  display:inline-block;min-width:24px;padding:3px 8px;
  background:var(--primary-light);border:1px solid var(--border);border-radius:6px;
  font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11.5px;font-weight:600;
  color:var(--primary-dark);text-align:center;
  box-shadow:0 1px 0 var(--border);
}
[data-theme="dark"] .kbd-key{color:#c4b5fd}

/* ─── Bulk-actions bar (admin tables) ─── */
.bulk-col{width:36px;padding-left:14px;padding-right:8px}
.bulk-col input[type=checkbox]{
  width:16px;height:16px;cursor:pointer;accent-color:var(--primary);
  vertical-align:middle;
}
/* native checkbox/radio: brand accent in both modes; dark color-scheme so unchecked boxes
   render dark (not stark white) on the dark theme — applies app-wide, not just bulk tables */
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
[data-theme="dark"] input[type=checkbox],[data-theme="dark"] input[type=radio]{color-scheme:dark}
.bulk-bar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--primary) 0%,#a855f7 100%);
  color:#fff;padding:10px 18px;border-radius:12px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 6px 20px rgba(124,58,237,.28);
  animation:bulkSlide .2s ease;
}
.bulk-bar[hidden]{display:none}
@keyframes bulkSlide{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.bulk-bar .bb-count{font-size:13.5px;font-weight:600}
.bulk-bar .bb-count b{font-weight:800;margin-right:4px}
.bulk-bar .bb-actions{display:flex;gap:6px;flex-wrap:wrap}
.bulk-bar .btn{height:30px;padding:0 12px;font-size:12.5px;font-weight:600}
.bulk-bar .btn-ghost{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
.bulk-bar .btn-ghost:hover{background:rgba(255,255,255,.28)}

/* ─── Coupon usage progress (admin list) ─── */
.usage-cell{display:inline-block;text-align:right;line-height:1.3}
.usage-cell .usage-bar{
  display:block;width:80px;height:4px;margin-top:4px;margin-left:auto;
  background:var(--border);border-radius:99px;overflow:hidden;
}
.usage-cell .usage-bar span{
  display:block;height:100%;border-radius:99px;transition:width .3s ease;
  background:var(--primary);
}
.usage-cell.cap-low    .usage-bar span{background:#10b981}
.usage-cell.cap-mid    .usage-bar span{background:#3b82f6}
.usage-cell.cap-near   .usage-bar span{background:#f59e0b}
.usage-cell.cap-exhausted .usage-bar span{background:#ef4444}

/* ─── Coupon row (checkout pages) ─── */
.coupon-row{}
.coupon-input-wrap{display:flex;gap:8px;align-items:stretch}
.coupon-input-wrap .form-control{flex:1;height:38px;padding-top:0;padding-bottom:0}
.coupon-input-wrap .btn{height:38px;padding:0 16px;white-space:nowrap}
.coupon-feedback{margin-top:6px;font-size:12.5px;padding:6px 10px;border-radius:8px;font-weight:500}
.coupon-feedback.ok{background:rgba(16,185,129,.12);color:#047857}
.coupon-feedback.err{background:rgba(239,68,68,.12);color:#dc2626}
.coupon-line{color:#047857}
[data-theme="dark"] .coupon-line{color:#34d399}

/* ─── Mobile polish — components introduced in v1.2 ───────────────── */
@media(max-width:540px){
  /* Tighter padding so cards reach the edges */
  .dash-content{padding:14px 12px}
  .card{padding:14px 14px}

  /* Bulk action bar — stack vertically with full-width action row */
  .bulk-bar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 12px}
  .bulk-bar .bb-count{text-align:center}
  .bulk-bar .bb-actions{justify-content:center;gap:6px}
  .bulk-bar .bb-actions .btn{flex:1;min-width:0}

  /* Coupon row — input + apply button on separate lines */
  .coupon-input-wrap{flex-direction:column}
  .coupon-input-wrap .btn{width:100%}

  /* Topbar — drop optional buttons + tighten spacing so it fits */
  .topbar{padding:0 12px;gap:6px}
  .topbar h2{font-size:14px}
  .topbar .crumb{display:none}
  .fullscreen-btn,.topbar-divider{display:none}

  /* Coupon usage cell — give it more breathing room when wrapped */
  .usage-cell .usage-bar{width:64px}

  /* Tabs row scrolls horizontally instead of wrapping into a wall */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab-item{flex-shrink:0}

  /* KPI cards: smaller numbers */
  .kpi2 .k2-val{font-size:22px}
  .kpi2 .k2-ic{width:36px;height:36px;font-size:16px}

  /* Confirm modals: edge padding */
  .confirm-overlay{padding:10px}
  .confirm-box{border-radius:14px}
  .confirm-header{padding:18px 16px 8px}
  .confirm-actions{padding:12px 14px 16px;gap:8px}
  .confirm-actions .btn{padding:11px 8px;font-size:13.5px}
}

/* ─── Sidebar collapse chevron container (already styled, ensure SVG visible) ─── */

/* ─── Order stage stepper (dashboard action queue + order detail) ─── */
.ostep{display:flex;align-items:flex-start;flex-wrap:nowrap}
.ostep-node{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:50px}
.ostep-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;background:transparent;border:1.5px solid var(--border);color:var(--muted)}
.ostep-lbl{font-size:10.5px;color:var(--muted);white-space:nowrap;text-align:center;line-height:1.2}
.ostep-done .ostep-dot{background:var(--muted);border-color:var(--muted);color:#fff}
.ostep-done .ostep-lbl{color:var(--text)}
.ostep-cur .ostep-dot{background:var(--ostep-cur,var(--primary));border-color:var(--ostep-cur,var(--primary));color:#fff}
.ostep-cur .ostep-lbl{color:var(--ostep-cur,var(--primary));font-weight:600}
.ostep-bar{flex:1;height:2px;background:var(--border);margin:11px 2px 0;min-width:6px}
.ostep-bar.on{background:var(--muted)}

/* ─── Action queue (คิวงานที่ต้องลงมือ) ─── */
.aq-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.aq-head h3{margin:0;display:flex;align-items:center;gap:8px}
.aq-head .aq-n{background:var(--danger-bg);color:#dc2626;font-size:12px;font-weight:600;padding:1px 9px;border-radius:99px}
.aq-list{display:flex;flex-direction:column;gap:10px}
.aq-row{background:var(--card-solid);border:1px solid var(--border);border-left:3px solid var(--aq-tone,var(--muted));
  border-radius:10px;padding:12px 14px}
[data-theme="dark"] .aq-row{background:rgba(255,255,255,.03)}
.aq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.aq-no{font-size:14px;font-weight:600;color:var(--text)}
.aq-who{font-size:13px;color:var(--muted);margin-left:6px}
.aq-items{font-size:12px;color:var(--muted);margin-top:2px}
.aq-age{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.aq-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
.aq-note{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 10px;border-radius:8px}
.aq-passive{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
@media(max-width:560px){.ostep-node{min-width:42px}.ostep-lbl{font-size:9.5px}}

/* ─── Work queue chips (dashboard) ─── */
.wq-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.wq-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:99px;cursor:pointer;background:transparent;
  border:1.5px solid var(--border);color:var(--chip,var(--text));font-family:inherit}
.wq-chip:hover{border-color:var(--chip,var(--primary))}
.wq-chip.active{border-color:var(--chip,var(--primary));background:var(--chip-bg,var(--primary-light))}
.wq-chip.is-zero{opacity:.45;font-weight:500}
.wq-chip .wq-n{background:var(--chip-bg,var(--primary-light));color:var(--chip,var(--primary));
  padding:1px 8px;border-radius:99px;font-size:11.5px;font-weight:700;min-width:22px;text-align:center}
.wq-chip.is-zero .wq-n{background:transparent;color:var(--muted)}
.aq-age.over-sla{color:#dc2626;font-weight:700;background:var(--danger-bg);
  padding:2px 9px;border-radius:99px}

/* ════════════════════════════════════════════════════════════════
   Admin Settings v3 — categorized sidebar layout
   ════════════════════════════════════════════════════════════════ */

.hm-set-page{display:flex;flex-direction:column;min-height:calc(100vh - 100px);gap:18px;
  padding-bottom:80px /* leave room for sticky savebar */}

/* ─── Header ─── */
.hm-set-header{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;background:var(--card);border:1px solid var(--border);
  border-radius:16px;backdrop-filter:blur(10px);flex-wrap:wrap}
.hm-set-header-l{display:flex;align-items:center;gap:14px}
.hm-set-header-ic{width:46px;height:46px;border-radius:12px;background:var(--primary-light);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px}
.hm-set-header h2{margin:0;font-size:20px;font-weight:700}
.hm-set-header-sub{font-size:12.5px;color:var(--muted);margin-top:3px}

.hm-set-search{position:relative;min-width:280px;flex:0 1 340px;
  display:flex;align-items:center;background:rgba(124,58,237,.06);
  border:1.5px solid var(--border);border-radius:10px;padding:7px 12px;gap:8px;
  transition:.15s}
.hm-set-search:focus-within{border-color:var(--primary);background:rgba(124,58,237,.1)}
.hm-set-search-ic{color:var(--muted);font-size:14px}
.hm-set-search input{flex:1;border:none;background:transparent;outline:none;font-size:13.5px;
  color:var(--text);font-family:inherit;padding:2px 0}
.hm-set-kbd{font-size:10.5px;padding:1px 6px;background:var(--card-solid);border:1px solid var(--border);
  border-radius:5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
[data-theme="dark"] .hm-set-search{background:rgba(255,255,255,.04)}

/* ─── Body layout ─── */
.hm-set-body{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}

/* ─── Left sidebar ─── */
.hm-set-sidebar{display:flex;flex-direction:column;gap:4px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:10px;position:sticky;top:90px;backdrop-filter:blur(10px)}
.hm-set-cat-item{display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;background:transparent;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--text);text-align:left;
  font-weight:500;transition:.15s}
.hm-set-cat-item:hover{background:var(--primary-light);color:var(--primary)}
.hm-set-cat-item.active{background:var(--primary);color:#fff;font-weight:600;
  box-shadow:0 4px 14px rgba(124,58,237,.3)}
.hm-set-cat-ic{font-size:16px;width:22px;text-align:center;line-height:1}
.hm-set-cat-tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-set-cat-n{background:rgba(124,58,237,.15);color:var(--primary);font-size:11.5px;
  font-weight:700;padding:2px 9px;border-radius:99px;min-width:24px;text-align:center}
.hm-set-cat-item.active .hm-set-cat-n{background:rgba(255,255,255,.25);color:#fff}

.hm-set-hints{margin-top:14px;padding:10px 12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--muted)}
.hm-set-hints kbd{font-size:10.5px;padding:1px 6px;background:var(--card-solid);
  border:1px solid var(--border);border-radius:4px;font-family:'JetBrains Mono',monospace;color:var(--text)}

/* ─── Content area ─── */
.hm-set-content{display:flex;flex-direction:column;gap:16px;min-width:0}
.hm-set-cat{display:flex;flex-direction:column;gap:16px}
/* ต้อง override class-level display:flex ตอน [hidden] —
   ไม่งั้น section ที่ซ่อนยังโผล่อยู่ ทำให้ tab ดูเหมือนคลิกไม่ทำงาน */
.hm-set-cat[hidden]{display:none}
.hm-set-form{display:flex;flex-direction:column;gap:16px}

/* ─── Section card ─── */
.hm-set-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;backdrop-filter:blur(10px);transition:.2s}
.hm-set-card.is-on{border-left:3px solid var(--primary)}

/* ─── Section head (icon + title + timestamp) ─── */
.hm-set-secthead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed var(--border)}
.hm-set-secthead.with-toggle{align-items:center}
.hm-set-secthead-ic{width:34px;height:34px;border-radius:9px;background:var(--primary-light);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.hm-set-secthead-tt{flex:1;min-width:0}
.hm-set-secthead-tt b{font-size:15px;font-weight:600;color:var(--text);display:block}
.hm-set-secthead-meta{font-size:11.5px;color:var(--muted);margin-top:2px}

.hm-set-subhead{font-size:13px;font-weight:600;color:var(--text);margin:14px 0 10px;
  display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px dashed var(--border)}
.hm-set-subhead:first-of-type{border-top:none;padding-top:0;margin-top:6px}

/* ─── Field grid ─── */
.hm-set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;margin-bottom:6px}
@media(max-width:780px){.hm-set-grid{grid-template-columns:1fr}}

.hm-set-field{display:flex;flex-direction:column;gap:6px;position:relative}
.hm-set-field-full{grid-column:1 / -1}
.hm-set-fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px}
.hm-set-fhead label{font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px}
.hm-set-key{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:11px;
  color:var(--muted);opacity:.75;letter-spacing:0;background:transparent;padding:0}

.hm-set-fmeta{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin-top:4px;font-size:11px;min-height:18px}
.hm-set-when{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.hm-set-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:99px;letter-spacing:.2px}
.hm-set-tag.warn{background:rgba(245,158,11,.16);color:#d97706}
.hm-set-tag.ok{background:rgba(16,185,129,.16);color:#059669}
[data-theme="dark"] .hm-set-tag.warn{background:rgba(245,158,11,.22);color:#fbbf24}
[data-theme="dark"] .hm-set-tag.ok{background:rgba(16,185,129,.22);color:#4ade80}

/* ─── Inline toggle row ─── */
.hm-set-toggle-row{display:flex;align-items:center;gap:14px;padding:10px 0}
.hm-set-toggle-desc{font-size:12.5px;color:var(--muted)}

/* ─── Checkbox row ─── */
.hm-set-checkrow{display:flex;gap:24px;flex-wrap:wrap;margin:10px 0 0;
  padding-top:10px;border-top:1px dashed var(--border)}
.hm-set-checkrow label{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--text);cursor:pointer;margin:0}

/* ─── Inline alert ─── */
.hm-set-alert{padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.55;
  margin:0 0 14px}
.hm-set-alert.info{background:rgba(56,189,248,.1);color:#0369a1;border:1px solid rgba(56,189,248,.25)}
.hm-set-alert.warning{background:rgba(245,158,11,.1);color:#b45309;border:1px solid rgba(245,158,11,.25)}
.hm-set-alert code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px;font-size:12px}
[data-theme="dark"] .hm-set-alert.info{color:#cfeafe;background:rgba(56,189,248,.15)}
[data-theme="dark"] .hm-set-alert.warning{color:#fde6a8;background:rgba(245,158,11,.15)}
[data-theme="dark"] .hm-set-alert code{background:rgba(255,255,255,.13);color:#f5f3ff}

.hm-set-actions-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--border)}

/* ─── Logo upload preview ─── */
.hm-logo-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hm-logo-prev{padding:12px 16px;background:var(--primary-light);border-radius:10px;
  display:flex;align-items:center;justify-content:center;min-width:120px;min-height:70px}
.hm-logo-prev img{max-height:70px;max-width:240px;object-fit:contain;display:block}
.hm-logo-empty{color:var(--muted);font-size:12.5px}
.hm-logo-actions{display:flex;flex-direction:column;gap:6px}
.hm-logo-pick{position:relative;cursor:pointer}
.hm-logo-pick input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.hm-logo-hint{font-size:11.5px;color:var(--muted)}

/* ─── Sticky save bar — sits to the right of fixed sidebar ─── */
.hm-set-savebar{position:fixed;left:calc(256px + 20px);right:20px;bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:var(--card-solid);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 12px 32px rgba(124,58,237,.18);z-index:40;
  backdrop-filter:blur(12px);transition:left .2s, box-shadow .2s, border-color .2s}
.hm-set-savebar-l{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.hm-set-savebar-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:.2s}
.hm-set-savebar.is-dirty{box-shadow:0 14px 38px rgba(124,58,237,.32);border-color:var(--primary)}
.hm-set-savebar.is-dirty .hm-set-savebar-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2);
  animation:hm-set-pulse 1.6s infinite ease}
.hm-set-savebar.is-dirty .hm-set-savebar-l{color:#d97706;font-weight:500}
[data-theme="dark"] .hm-set-savebar{background:rgba(20,10,45,.92)}
[data-theme="dark"] .hm-set-savebar.is-dirty .hm-set-savebar-l{color:#fbbf24}

@keyframes hm-set-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* offset เมื่อ sidebar ถูกย่อ (.app.sb-col) */
.app.sb-col .hm-set-savebar{left:calc(68px + 20px)}

/* ════════════════════════════════════════════════════════════════
   Admin Servers v2 — table polish + health-status dots
   ════════════════════════════════════════════════════════════════ */

.srv-table th, .srv-table td{vertical-align:top}

/* Live link to filtered hosting list */
.srv-acccnt{font-weight:600;color:var(--text);text-decoration:none}
.srv-acccnt:hover{color:var(--primary);text-decoration:underline}

/* Health dot (●) — colored circle + glow */
.srv-test-ok, .srv-test-fail, .srv-test-none{
  display:inline-block;font-size:13px;line-height:1;margin-right:2px;vertical-align:middle}
.srv-test-ok  {color:#10b981;text-shadow:0 0 6px rgba(16,185,129,.5)}
.srv-test-fail{color:#dc2626;text-shadow:0 0 6px rgba(239,68,68,.5)}
.srv-test-none{color:var(--muted);opacity:.5}

/* Modal: stretch on wider screens */
.srv-modal .modal{max-height:calc(100vh - 60px);overflow-y:auto}
.srv-modal .modal-footer{position:sticky;bottom:-32px;background:var(--card-solid);
  margin:24px -32px -32px;padding:18px 32px 22px;border-top:1px solid var(--border)}
[data-theme="dark"] .srv-modal .modal-footer{background:#1a0938}

/* Mobile: stack form columns + tighten */
@media(max-width:780px){
  .srv-modal .modal{max-width:100% !important;padding:20px}
  .srv-modal .grid.grid-2{grid-template-columns:1fr !important}
  .srv-modal .modal-footer{margin:18px -20px -20px;padding:14px 20px 16px}
}

/* ════════════════════════════════════════════════════════════════
   Admin Hosting list — actions dropdown, due-date emphasis
   ════════════════════════════════════════════════════════════════ */

.hl-table .acts{display:inline-flex;align-items:center;gap:3px;position:relative}
.hl-table .acts .btn{padding:5px 9px;font-size:13px}

/* More-actions menu (⋯) */
.hl-more-menu{
  position:absolute;top:calc(100% + 4px);right:0;min-width:200px;
  background:var(--card-solid);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 10px 28px rgba(124,58,237,.18);
  padding:6px;display:flex;flex-direction:column;gap:2px;z-index:30;
  backdrop-filter:blur(8px);text-align:left}
.hl-more-menu[hidden]{display:none}
.hl-more-menu form{display:block;margin:0}
.hl-more-item{
  display:block;width:100%;padding:8px 12px;background:none;border:none;
  font-family:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;
  border-radius:7px;text-decoration:none;line-height:1.4;transition:.12s}
.hl-more-item:hover{background:var(--primary-light);color:var(--primary);text-decoration:none}
.hl-more-item.danger{color:#dc2626}
.hl-more-item.danger:hover{background:rgba(239,68,68,.1);color:#b91c1c}
[data-theme="dark"] .hl-more-menu{background:rgba(20,10,45,.95)}
[data-theme="dark"] .hl-more-item.danger{color:#fb7185}
[data-theme="dark"] .hl-more-item.danger:hover{background:rgba(239,68,68,.18);color:#fda4af}

/* Due-date color emphasis */
.hl-due-over  {color:#dc2626;font-weight:600}
.hl-due-soon  {color:#d97706;font-weight:600}
.hl-due-month {color:#3b82f6}
[data-theme="dark"] .hl-due-over {color:#fca5a5}
[data-theme="dark"] .hl-due-soon {color:#fbbf24}
[data-theme="dark"] .hl-due-month{color:#7dd3fc}

/* ─── Mobile ─── */
@media(max-width:980px){
  .hm-set-body{grid-template-columns:1fr}
  .hm-set-sidebar{position:relative;top:0;flex-direction:row;overflow-x:auto;
    scrollbar-width:none;padding:8px}
  .hm-set-sidebar::-webkit-scrollbar{display:none}
  .hm-set-cat-item{flex-shrink:0;width:auto;padding:8px 12px;font-size:13px}
  .hm-set-cat-tt{display:inline}
  .hm-set-hints{display:none}
  .hm-set-savebar{left:12px;right:12px;bottom:8px;padding:10px 14px;border-radius:12px}
  .hm-set-savebar-l{font-size:12px}
}
@media(max-width:540px){
  .hm-set-header{padding:14px 16px;flex-direction:column;align-items:stretch}
  .hm-set-search{min-width:0;width:100%}
  .hm-set-card{padding:14px 14px}
  .hm-set-secthead-ic{width:30px;height:30px;font-size:15px}
}