/* ============================================================
   SEO Studio Thai — Admin Stylesheet
   โครงสร้าง: 1) Design Tokens  2) Base/Reset  3) Components
              4) Page-specific  5) Sneat Compat Layer
   หมายเหตุ: เมนูข้างใช้สไตล์ของ Sneat (theme-default.css)
             กฎในไฟล์นี้ไม่ควรยุ่งกับ #layout-menu
   ============================================================ */

:root{
  /* ═══ Dark Gradient + Teal Accent — Default Theme ═══ */
  --bg:#0B0F14;
  --surface:#131920;
  --surface-2:#1A222B;
  --ink:#FFFFFF;
  --ink-dim:#D6DCE6;
  --ink-faint:#96A3B5;
  --border:#2A3444;
  --border-soft:#222C38;
  --accent:#3FB8B0;
  --accent-2:#5ED4C9;
  --accent-ink:#A3E8E0;
  --accent-soft:rgba(63,184,176,.12);
  --good:#4ECB8F;
  --good-soft:rgba(78,203,143,.12);
  --warn:#F0B952;
  --warn-soft:rgba(240,185,82,.10);
  --crit:#F07068;
  --crit-soft:rgba(240,112,104,.10);
  --violet:#B08EF8;
  --violet-soft:rgba(176,142,248,.10);
  --blue:#6EAAFA;
  --blue-soft:rgba(110,170,250,.10);
  --shadow:0 2px 8px rgba(0,0,0,.25), 0 12px 40px -8px rgba(0,0,0,.45);
  --shadow-hover:0 4px 16px rgba(0,0,0,.3), 0 20px 50px -12px rgba(63,184,176,.25);
  --glow:0 0 40px -8px rgba(63,184,176,.20);
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.18s;
  --gradient-dark:linear-gradient(160deg,#0B0F14 0%,#111820 40%,#0E151C 100%);
  --gradient-card:linear-gradient(145deg,rgba(19,25,32,.95),rgba(26,34,43,.85));
  --gradient-teal:linear-gradient(135deg,#3FB8B0,#0E7C86);
  --glass:rgba(19,25,32,.72);
  --glass-border:rgba(63,184,176,.12);
  color-scheme:dark;
}
/* Dark is default — no media query needed */
:root[data-theme="dark"], :root:not([data-theme="light"]){
  --bg:#0B0F14; --surface:#131920; --surface-2:#1A222B;
  --ink:#FFFFFF; --ink-dim:#D6DCE6; --ink-faint:#96A3B5;
  --border:#2A3444; --border-soft:#222C38;
  --accent:#3FB8B0; --accent-2:#5ED4C9; --accent-ink:#A3E8E0; --accent-soft:rgba(63,184,176,.12);
  --good:#4ECB8F; --good-soft:rgba(78,203,143,.12);
  --warn:#F0B952; --warn-soft:rgba(240,185,82,.10);
  --crit:#F07068; --crit-soft:rgba(240,112,104,.10);
  --violet:#B08EF8; --violet-soft:rgba(176,142,248,.10);
  --blue:#6EAAFA; --blue-soft:rgba(110,170,250,.10);
  --shadow:0 2px 8px rgba(0,0,0,.25), 0 12px 40px -8px rgba(0,0,0,.45);
  --shadow-hover:0 4px 16px rgba(0,0,0,.3), 0 20px 50px -12px rgba(63,184,176,.25);
  --glow:0 0 40px -8px rgba(63,184,176,.20);
  color-scheme:dark;
}
/* Light theme override */
:root[data-theme="light"]{
  --bg:#F0F4F8; --surface:#FFFFFF; --surface-2:#F8FAFB;
  --ink:#12161C; --ink-dim:#2A2F36; --ink-faint:#5A6474;
  --border:#D8DFE8; --border-soft:#E8EDF2;
  --accent:#0E7C86; --accent-2:#12A38C; --accent-ink:#075C64; --accent-soft:rgba(14,124,134,.08);
  --good:#2E7D5B; --good-soft:rgba(46,125,91,.08);
  --warn:#B4770E; --warn-soft:rgba(180,119,14,.08);
  --crit:#C1443D; --crit-soft:rgba(193,68,61,.08);
  --violet:#6B3FA0; --violet-soft:rgba(107,63,160,.08);
  --blue:#1D5FBF; --blue-soft:rgba(29,95,191,.08);
  --shadow:0 1px 3px rgba(18,22,28,.06), 0 8px 24px -12px rgba(18,22,28,.10);
  --shadow-hover:0 4px 12px rgba(18,22,28,.08), 0 18px 38px -14px rgba(14,124,134,.18);
  --glow:0 0 30px -8px rgba(14,124,134,.12);
  color-scheme:light;
}

/* ---------- 2) Base / Reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
::selection{background:color-mix(in srgb, var(--accent) 26%, transparent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink-faint) 38%, transparent); border-radius:99px; border:3px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--ink-faint) 60%, transparent); border:3px solid transparent; background-clip:content-box;}
body{
  font-family:'Sarabun','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--gradient-dark);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.6;
  font-weight:400;
  min-height:100vh;
}
.mono{font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Courier New",monospace; font-variant-numeric:tabular-nums;}
h1,h2,h3,h4{text-wrap:balance; margin:0; font-size:20px;}
button{font-family:inherit; font-size:inherit;}
a{color:var(--accent-ink);}
label, input, select, textarea, table, .btn, .pill, .hint{font-size:14.5px;}

/* ---------- 3) Components ---------- */
/* Brand (ใช้ในหน้า login / public report) */
.brand{display:flex; align-items:center; gap:9px; padding:2px 8px; text-decoration:none; color:inherit;}
.brand-mark{
  width:26px; height:26px; border-radius:7px;
  background:var(--gradient-teal); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 2px 8px -1px rgba(63,184,176,.5);
}
.brand-mark svg{width:15px; height:15px;}
.brand-name{font-weight:700; font-size:18px; letter-spacing:.1px;}
.brand-sub{font-size:14.5px; color:var(--ink-dim); letter-spacing:.4px; text-transform:uppercase; margin-top:1px;}

.site-switch{padding:0 4px;}
.site-switch label{display:block; font-size:14.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; font-weight:600;}

/* ═══ Dark Sidebar Override ═══ */
.layout-menu, #layout-menu{
  background:linear-gradient(180deg,#0D1219 0%,#111820 50%,#0E151C 100%) !important;
  border-right:1px solid rgba(63,184,176,.06) !important;
}
.menu-inner .menu-item .menu-link{color:var(--ink-dim) !important; font-weight:500;}
.menu-inner .menu-item .menu-link:hover{background:rgba(63,184,176,.08) !important; color:#FFFFFF !important;}
.menu-inner .menu-item.active > .menu-link{background:linear-gradient(135deg,rgba(63,184,176,.15),rgba(63,184,176,.05)) !important; color:#fff !important;}
.menu-header .menu-header-text{color:var(--ink-dim) !important; font-weight:600;}
.menu-inner .menu-item .menu-link-btn{color:var(--ink-dim) !important; font-weight:500;}
.menu-inner .menu-item .menu-link-btn:hover{color:#F07068 !important; background:rgba(240,112,104,.08) !important;}

/* ═══ Override Sneat Bootstrap body color (gray → white) ═══ */
:root{
  --bs-body-color:#FFFFFF !important;
  --bs-body-color-rgb:255,255,255 !important;
  --bs-emphasis-color:#FFFFFF !important;
  --bs-secondary-color:#D6DCE6 !important;
  --bs-secondary-color-rgb:214,220,230 !important;
  --bs-tertiary-color:rgba(255,255,255,.65) !important;
}
body{color:#FFFFFF !important;}
p, span, div, td, th, li, label, h1, h2, h3, h4, h5, h6{color:inherit;}

/* Layout page background */
.layout-page{background:var(--gradient-dark) !important;}
.content-wrapper{background:transparent !important;}

/* Navbar dark */
.layout-navbar{background:rgba(11,15,20,.85) !important; backdrop-filter:blur(12px); border-bottom:1px solid rgba(63,184,176,.06) !important;}
.layout-navbar .navbar-nav .nav-link{color:var(--ink-dim) !important; font-weight:500;}
.layout-navbar .navbar-nav .nav-link:hover{color:#FFFFFF !important;}
.layout-navbar .navbar-nav .nav-link:hover{color:var(--ink) !important;}

/* Footer dark */
.content-footer{background:rgba(11,15,20,.6) !important; border-top:1px solid rgba(63,184,176,.06) !important;}
.site-select-wrap{position:relative;}
.site-select-wrap svg.chev{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-faint); pointer-events:none; transition:transform var(--dur) var(--ease);}
select.site-select{
  width:100%; appearance:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:10px; padding:9px 30px 9px 12px;
  font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select.site-select:hover{border-color:var(--accent);}
select.site-select:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.avatar{width:32px; height:32px; border-radius:50%; background:var(--gradient-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; box-shadow:0 2px 8px rgba(63,184,176,.3);}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:10px; font-size:14.5px; font-weight:600;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn svg{width:14px; height:14px;}
.btn:hover{border-color:var(--ink-faint); transform:translateY(-1px); box-shadow:0 3px 10px -2px rgba(18,22,28,.12);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.btn.primary{background:var(--gradient-teal); border-color:rgba(63,184,176,.3); color:#fff; box-shadow:0 4px 16px -4px rgba(63,184,176,.35);}
.btn.primary:hover{box-shadow:0 8px 24px -4px rgba(63,184,176,.5); transform:translateY(-1px);}
.btn.danger{color:var(--crit); border-color:var(--crit-soft);}
.btn.danger:hover{background:var(--crit-soft); border-color:var(--crit);}
.btn.sm{padding:6px 11px; font-size:14.5px; border-radius:8px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}

.card{
  background:linear-gradient(145deg, rgba(22,30,40,.92), rgba(28,38,50,.88));
  border:1px solid rgba(63,184,176,.08);
  border-top:1px solid rgba(63,184,176,.12);
  border-radius:16px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(63,184,176,.04);
  backdrop-filter:blur(8px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position:relative;
}
/* ═══ Neon Glow — Admin Cards ═══ */
.card:hover{
  border-color:rgba(63,184,176,.35);
  box-shadow:
    0 0 15px -3px rgba(63,184,176,.3),
    0 0 40px -8px rgba(63,184,176,.15),
    0 0 70px -14px rgba(176,142,248,.08),
    var(--shadow);
}
.card:hover::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(63,184,176,.10), transparent 45%, rgba(176,142,248,.06));
  z-index:0; pointer-events:none;
}
.card-pad{padding:26px 28px;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.card-head h3{font-size:20px; font-weight:700; color:var(--ink);}
.card-head h2{color:var(--ink);}
.card-head .meta{font-size:14.5px; color:var(--ink-dim);}

.grid{display:grid; gap:20px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:1.3fr 1fr;}
@media (max-width:1180px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-2{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid.cols-4{grid-template-columns:1fr;} .grid.cols-3{grid-template-columns:1fr;} }

/* Cards that live inside a grid get a lift-and-glow hover, like tiles in a dashboard */
.grid > .card{cursor:pointer; position:relative; overflow:hidden;}
.grid > .card:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(63,184,176,.4);
  box-shadow:
    0 0 15px -3px rgba(63,184,176,.3),
    0 0 40px -8px rgba(63,184,176,.15),
    0 0 70px -14px rgba(176,142,248,.08),
    var(--shadow-hover);
}
.grid > .card:hover::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(63,184,176,.12), transparent 45%, rgba(176,142,248,.08));
  z-index:-1; pointer-events:none;
  animation:admin-neon-pulse 2s ease-in-out infinite alternate;
}
@keyframes admin-neon-pulse{
  0%{ opacity:.4; }
  100%{ opacity:1; filter:blur(1px); }
}

.stat{padding:20px 22px; display:flex; flex-direction:column; gap:8px;}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-ink); flex-shrink:0; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);}
.stat-icon svg{width:17px; height:17px;}
.card:hover .stat-icon{background:var(--accent); color:#fff; transform:scale(1.08) rotate(-4deg);}
.stat-label{font-size:14.5px; color:var(--ink-dim); font-weight:600;}
.stat-value{font-size:28px; font-weight:700; letter-spacing:-.3px; color:var(--ink);}
.stat-delta{font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px; width:fit-content;}
.stat-delta.up{color:var(--good);}
.stat-delta.down{color:var(--crit);}
.stat-delta svg{width:11px; height:11px;}

/* ---------- Circular progress gauge (SVG ล้วน ไม่ใช้ไลบรารีภายนอก) ---------- */
.gauge-card{flex-direction:row; align-items:center; gap:16px;}
.gauge-svg{width:88px; height:88px; flex-shrink:0;}
.gauge-num{font-size:27px; font-weight:800; fill:var(--ink); letter-spacing:-.3px;}
.gauge-unit{font-size:15px; font-weight:700; fill:var(--ink-faint);}
.gauge-lbl{font-size:12.5px; font-weight:600; fill:var(--ink-faint); letter-spacing:.5px; text-transform:uppercase;}
@media (max-width:640px){ .gauge-card{flex-direction:column; align-items:flex-start;} }

/* ---------- Data Viz: sparkline / ratio bar / cell bar (SVG+CSS ล้วน) ---------- */
.viz-spark{display:block; overflow:visible; max-width:100%; height:auto;}
.viz-ratio{display:flex; flex-direction:column; gap:10px;}
.viz-ratio-track{display:flex; height:12px; border-radius:99px; overflow:hidden; background:var(--border-soft);}
.viz-ratio-seg{height:100%; min-width:3px; transition:width var(--dur) var(--ease);}
.viz-ratio-legend{display:flex; flex-wrap:wrap; gap:6px 18px;}
.viz-legend-item{display:inline-flex; align-items:center; font-size:14.5px; color:var(--ink-dim);}
.viz-legend-item b{font-weight:700; color:var(--ink);}
.legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; flex-shrink:0;}
/* mini progress bar ในเซลล์ตาราง (เช่นค่า Authority) */
.viz-cellbar{display:inline-flex; flex-direction:column; align-items:flex-end; gap:4px; vertical-align:middle;}
.viz-cellbar .n{font-weight:700;}
.viz-cellbar-track{display:block; width:64px; height:5px; border-radius:99px; background:var(--border-soft); overflow:hidden;}
.viz-cellbar-track i{display:block; height:100%; border-radius:99px;}

.pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:14.5px; font-weight:700; transition:transform var(--dur) var(--ease);}
.pill.good{background:var(--good-soft); color:var(--good);}
.pill.warn{background:var(--warn-soft); color:var(--warn);}
.pill.crit{background:var(--crit-soft); color:var(--crit);}
.pill.neutral{background:var(--border-soft); color:var(--ink-dim);}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.ring-wrap{display:flex; align-items:center; gap:20px;}
.ring{width:104px; height:104px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:transform var(--dur) var(--ease);}
.ring::before{content:""; position:absolute; inset:10px; border-radius:50%; background:var(--surface);}
.card:hover .ring{transform:scale(1.04);}
.ring-inner{position:relative; text-align:center;}
.ring-inner .n{font-size:28px; font-weight:800; line-height:1;}
.ring-inner .lbl{font-size:14.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:2px;}
.ring-breakdown{display:flex; flex-direction:column; gap:7px; font-size:14.5px;}
.ring-breakdown .row{display:flex; align-items:center; gap:8px;}
.ring-breakdown .swatch{width:8px; height:8px; border-radius:2px; flex-shrink:0;}
.ring-breakdown .row b{margin-left:auto;}

.action-list{display:flex; flex-direction:column; gap:2px;}
.action-row{display:flex; align-items:flex-start; gap:11px; padding:11px 4px; border-bottom:1px solid var(--border-soft); border-radius:8px; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); margin:0 -6px; padding-left:6px; padding-right:6px;}
.action-row:hover{background:var(--surface-2); transform:translateX(2px);}
.action-row:last-child{border-bottom:none;}
.sev-stripe{width:4px; align-self:stretch; border-radius:3px; flex-shrink:0; min-height:34px;}
.sev-stripe.crit{background:var(--crit);}
.sev-stripe.warn{background:var(--warn);}
.sev-stripe.good{background:var(--good);}
.action-row .txt{flex:1; min-width:0;}
.action-row .txt .t{font-weight:600; font-size:14.5px;}
.action-row .txt .d{font-size:14.5px; color:var(--ink-faint); margin-top:1px;}
.action-row a.go{font-size:14.5px; font-weight:700; color:var(--accent-ink); text-decoration:none; white-space:nowrap; padding-top:2px;}
.action-row a.go:hover{text-decoration:underline;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14.5px;}
th{text-align:left; font-size:14.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint); font-weight:700; padding:2px 12px 11px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:14px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
tbody tr{transition:background var(--dur) var(--ease);}
tbody tr:hover{background:var(--surface-2);}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums;}
.row-title{font-weight:600;}
.row-sub{font-size:14.5px; color:var(--ink-faint);}

/* ---------- Data tables: zebra striping, badges & row actions ---------- */
tbody tr:nth-child(even){background:color-mix(in srgb, var(--surface-2) 45%, transparent);}
tbody tr:hover{background:color-mix(in srgb, var(--accent-soft) 38%, var(--surface));}
td .pill, td .rank-badge{vertical-align:middle;}

/* ป้ายสถานะเชิงข้อมูล (info/neutral) เพิ่มเติมจาก good/warn/crit */
.pill.info{background:color-mix(in srgb, var(--accent) 13%, var(--surface)); color:var(--accent-ink);}
.pill.violet{background:var(--violet-soft); color:var(--violet);}
.pill.blue{background:var(--blue-soft); color:var(--blue);}

/* ปุ่มจัดการในแถวตาราง (ดู/แก้ไข/ลบ/ส่งออก) — จัดชิดขวา ขนาดกะทัดรัดสม่ำเสมอ */
.table-actions{display:flex; gap:6px; align-items:center; justify-content:flex-end;}
td.table-actions, th.table-actions{text-align:right; white-space:nowrap;}
.table-actions .btn{padding:5px 10px; font-size:15px; border-radius:7px;}
.table-actions .btn svg{width:13px; height:13px;}
.table-actions .icon-btn{width:30px; height:30px;}

.len-bar{position:relative; height:6px; border-radius:3px; background:var(--border-soft); width:120px; overflow:visible;}
.len-bar .zones{position:absolute; inset:0; border-radius:3px; overflow:hidden; display:flex;}
.len-bar .zones i{height:100%;}
.len-bar .marker{position:absolute; top:-2px; width:2px; height:10px; background:var(--ink); border-radius:1px;}
.len-cap{font-size:14.5px; color:var(--ink-faint); margin-top:3px;}

.sparkline{display:block;}

label.field-label{display:block; font-size:14.5px; font-weight:700; margin-bottom:5px;}
.hint{font-size:14.5px; color:var(--ink-faint); margin-top:5px;}
input[type=text], input[type=url], input[type=email], input[type=tel], input[type=search], input[type=password], input[type=number], input[type=date], textarea, select.form-select{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px;
  font-size:14.5px; font-family:inherit; background:var(--surface); color:var(--ink); resize:vertical;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover, textarea:hover, select.form-select:hover{border-color:var(--ink-faint);}
input:focus-visible, textarea:focus-visible, select.form-select:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field{margin-bottom:16px;}
label.field-label{margin-bottom:7px;}
/* ฟอร์มภายในการ์ด — จัดช่องไฟ input ให้หายใจได้ ไม่เบียดกัน */
.card-pad form.grid{gap:18px 20px;}

.counter-row{display:flex; justify-content:space-between; align-items:center; margin-top:5px;}

.serp-preview{border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface-2);}
.serp-preview .url{font-size:14.5px; color:var(--good); font-family:ui-monospace,monospace;}
.serp-preview .title{color:#1a56db; font-size:18px; margin:3px 0 4px; font-weight:500;}
@media (prefers-color-scheme:dark){ .serp-preview .title{color:#8ab4f8;} }
:root[data-theme="dark"] .serp-preview .title{color:#8ab4f8;}
.serp-preview .desc{font-size:14.5px; color:var(--ink-dim); line-height:1.5;}

.codebox{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; font-size:14.5px; line-height:1.7; color:var(--ink-dim); white-space:pre-wrap; overflow-x:auto;}
.codebox b{color:var(--ink); font-weight:600;}

.faq-item{border:1px solid var(--border); border-radius:10px; padding:13px 15px; margin-bottom:9px; display:flex; gap:12px; align-items:flex-start; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.faq-item:hover{border-color:var(--accent); box-shadow:var(--shadow);}
.faq-item.draft{opacity:.55;}
.faq-item .q{font-weight:700; font-size:14.5px;}
.faq-item .a{font-size:14.5px; color:var(--ink-faint); margin-top:3px;}
.faq-item .icons{display:flex; gap:6px; margin-left:auto; flex-shrink:0;}
.icon-btn{width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);}
.icon-btn:hover{border-color:var(--ink-faint); color:var(--ink); transform:translateY(-1px);}
.icon-btn svg{width:14px; height:14px;}

.bars{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.bar-row .name{width:110px; flex-shrink:0; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-row .track{flex:1; height:8px; border-radius:4px; background:var(--border-soft); overflow:hidden;}
.bar-row .fill{height:100%; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:filter var(--dur) var(--ease);}
.bar-row:hover .fill{filter:brightness(1.08);}
.bar-row .val{width:44px; text-align:right; font-family:ui-monospace,monospace; flex-shrink:0;}

.section-note{font-size:14.5px; color:var(--ink-dim); background:var(--accent-soft); border:1px solid var(--border); border-radius:10px; padding:11px 14px; margin-bottom:16px;}
.section-note b{color:var(--accent-ink);}

.stack{display:flex; flex-direction:column; gap:20px;}

.alert{border-radius:10px; padding:12px 14px; font-size:14.5px; margin-bottom:16px; border:1px solid transparent;}
.alert-danger{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-soft);}
.alert-success{background:var(--good-soft); color:var(--good); border-color:var(--good-soft);}
.alert ul{margin:0; padding-left:18px;}

.empty-state{text-align:center; padding:56px 24px; color:var(--ink-faint);}
.empty-state svg{width:40px; height:40px; margin-bottom:12px; opacity:.6;}
.empty-state h3{font-size:22px; color:var(--ink); margin-bottom:8px;}
.empty-state p{font-size:14.5px; line-height:1.6; max-width:400px; margin:0 auto 16px;}

@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:relative; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:12px;}
  .sidebar .nav-group{flex-direction:row;}
  .sidebar-foot{display:none;}
  .site-switch{min-width:150px;}
}

/* ---------- Site switch footer link ---------- */
.site-switch-foot{display:flex; justify-content:flex-end; margin-top:6px;}
.link-btn{background:none; border:none; padding:0; font-size:14.5px; font-weight:700; color:var(--accent-ink); cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:none; transition:gap var(--dur) var(--ease);}
.link-btn:hover{text-decoration:underline; gap:7px;}
.link-btn svg{width:12px; height:12px;}

/* ---------- Notifications ---------- */
.notif-wrap{position:relative;}
.notif-bell{position:relative; transition:transform var(--dur) var(--ease);}
.notif-bell:hover{transform:translateY(-1px);}
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--crit); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--bg);
}
.notif-panel{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:360px; max-height:70vh;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  z-index:30; flex-direction:column; overflow:hidden;
}
.notif-panel.open{display:flex;}
.notif-panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0;}
.notif-panel-head h4{font-size:18px; font-weight:700;}
.notif-list{overflow-y:auto; flex:1;}
.notif-empty{padding:28px 16px; text-align:center; font-size:14.5px; color:var(--ink-faint);}
.notif-item{display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border-soft); transition:background var(--dur) var(--ease);}
.notif-item:hover{background:var(--surface-2);}
.notif-item:last-child{border-bottom:none;}
.notif-item-icon{width:16px; height:16px; flex-shrink:0; margin-top:1px;}
.notif-item-icon.critical{color:var(--crit);}
.notif-item-icon.warning{color:var(--warn);}
.notif-item-icon.info{color:var(--good);}
.notif-item .txt{flex:1; min-width:0;}
.notif-item .txt .t{font-weight:700; font-size:14.5px;}
.notif-item .txt .d{font-size:14.5px; color:var(--ink-dim); margin-top:2px; line-height:1.45;}
.notif-item .txt .meta{font-size:14.5px; color:var(--ink-faint); margin-top:4px;}
.notif-dismiss{background:none; border:none; padding:2px; cursor:pointer; color:var(--ink-faint); flex-shrink:0; border-radius:5px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);}
.notif-dismiss:hover{color:var(--ink); background:var(--border-soft);}
.notif-dismiss svg{width:12px; height:12px; display:block;}
.notif-item.leaving{opacity:0; transform:translateX(6px); transition:opacity .15s, transform .15s;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,13,17,.5); backdrop-filter:blur(1px);
  display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0;}
.modal-head h3{font-size:20px; font-weight:700;}
.modal-head .sub{font-size:14.5px; color:var(--ink-faint); margin-top:3px;}
.modal-close{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.modal-close:hover{color:var(--ink); border-color:var(--ink-faint); transform:rotate(90deg);}
.modal-close svg{width:15px; height:15px;}
.modal-body{padding:18px 20px 20px; overflow-y:auto;}

.url-input-row{display:flex; gap:8px;}
.url-input-row input{flex:1;}
.paste-hint{display:flex; align-items:center; gap:6px; font-size:14.5px; color:var(--ink-faint); margin-top:6px;}
.paste-hint svg{width:13px; height:13px; flex-shrink:0;}

.managed-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.managed-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);}
.managed-row:hover{border-color:var(--accent); background:var(--surface-2);}
.managed-row .favicon{width:24px; height:24px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.managed-row .favicon svg{width:13px; height:13px;}
.managed-row .u{font-weight:600; font-size:14.5px;}
.managed-row .d{font-size:14.5px; color:var(--ink-faint);}
.managed-row .rm{margin-left:auto; flex-shrink:0;}

.modal-tabs{display:flex; gap:4px; margin-top:14px; border-bottom:1px solid var(--border);}
.modal-tab{background:none; border:none; padding:8px 4px; margin-right:14px; font-size:14.5px; font-weight:700; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.modal-tab:hover{color:var(--ink);}
.modal-tab.active{color:var(--accent-ink); border-bottom-color:var(--accent);}
.modal-pane{display:none; padding-top:14px;}
.modal-pane.active{display:block;}

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{position:relative; padding-left:20px; padding-bottom:16px; border-left:2px solid var(--border-soft); margin-left:4px;}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0;}
.timeline li::before{content:""; position:absolute; left:-6px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-soft);}
.timeline .when{font-size:14.5px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.timeline .what{font-size:14.5px; font-weight:600; margin-top:2px;}
.timeline .what .tag{font-weight:700; color:var(--accent-ink); font-size:14.5px; background:var(--accent-soft); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:1px;}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:32px 28px;}
.login-card .brand{justify-content:center; margin-bottom:22px;}
.login-card h1{font-size:20px; text-align:center; margin-bottom:4px;}
.login-card .sub{font-size:14.5px; color:var(--ink-faint); text-align:center; margin-bottom:22px;}
.login-card .btn.primary{width:100%; justify-content:center; padding:10px 14px;}
/* ---------- 4) Page-specific ---------- */
/* Rank page — Summary Scorecard + Filtering (admin/rank.php) */
.scorecard-grid{display:grid; gap:14px; grid-template-columns:repeat(4,1fr);}
@media (max-width:1180px){ .scorecard-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:700px){ .scorecard-grid{grid-template-columns:1fr;} }

.score-stat{
  padding:14px 16px; border:1px solid var(--border); border-radius:11px;
  background:var(--surface-2); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.score-stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover);}
.score-top{display:flex; align-items:center; justify-content:space-between;}
.score-label{font-size:14.5px; color:var(--ink-faint); font-weight:600;}
.score-value{font-size:26px; font-weight:800; letter-spacing:-.3px;}
.score-icon{width:28px; height:28px; border-radius:7px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.score-icon svg{width:15px; height:15px;}

.filter-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:12px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
}
.search-box{position:relative; min-width:180px; flex:1;}
.search-box input{padding-left:34px; width:100%;}
.search-box .search-icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); pointer-events:none;}
.filter-btn{
  display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:99px;
  font-size:15.5px; font-weight:700; color:var(--ink-dim); background:var(--surface);
  border:1px solid var(--border); text-decoration:none; transition:all var(--dur) var(--ease);
}
.filter-btn:hover{border-color:var(--accent); color:var(--accent-ink);}
.filter-btn.active{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}
.filter-btn.active::before{content:"● "; font-size:13px;}
/* --- Rank Alert badge (พุ่งขึ้น/ตกลงชัดเจน) --- */
.rank-badge{
  display:inline-flex; align-items:center; gap:2px; padding:2px 8px; margin-left:5px;
  border-radius:99px; font-size:14.5px; font-weight:800; font-family:ui-monospace,monospace;
}
.rank-badge.up{background:var(--good-soft); color:var(--good);}
.rank-badge.down{background:var(--crit-soft); color:var(--crit);}

/* --- ไฮตทไลต์แถวที่มีการเตือน --- */
tbody tr.alert-up{background:color-mix(in srgb, var(--good-soft) 45%, var(--surface));}
tbody tr.alert-down{background:color-mix(in srgb, var(--crit-soft) 45%, var(--surface));}
tbody tr.alert-up td:first-child{border-left:3px solid var(--good);}
tbody tr.alert-down td:first-child{border-left:3px solid var(--crit);}

/* --- เซลล์เทรนด์ / sparkline --- */
.trend-cell{min-width:96px;}
.trend-cell .sparkline{cursor:pointer;}
.trend-cell .hint{font-size:15px; white-space:nowrap;}

/* --- Modal Chart --- */
.chart-canvas{min-height:280px; position:relative;}
.chart-loading, .chart-empty{
  padding:44px 16px; text-align:center; color:var(--ink-faint); font-size:14.5px;
}
.chart-loading::before{content:"⟳ "; display:inline-block; animation:chart-spin 1s linear infinite;}
@keyframes chart-spin{ to{transform:rotate(360deg);} }

/* ---------- Login page: dark gradient background ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 800px 600px at 10% 15%, rgba(63,184,176,.15) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 90% 10%, rgba(14,124,134,.12) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 85% 90%, rgba(63,184,176,.08) 0%, transparent 50%),
    radial-gradient(ellipse 500px 400px at 10% 85%, rgba(14,124,134,.08) 0%, transparent 45%),
    linear-gradient(160deg,#0B0F14 0%,#111820 40%,#0E151C 100%);
}

/* dot-grid ทับด้านบน ให้ความรู้สึก data/analytics เข้ากับธีม SEO */
.login-wrap::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
  pointer-events:none;
}

/* ยกการ์ดให้ลอยเหนือพื้นหลัง + เงาเป็นสี accent แทนเงาเทาธรรมดา */
.login-card{
  position:relative; z-index:1;
  background:rgba(19,25,32,.85);
  backdrop-filter:blur(20px);
  border:1px solid rgba(63,184,176,.15);
  box-shadow:
    0 20px 60px -18px rgba(63,184,176,.25),
    0 0 0 1px rgba(63,184,176,.05),
    var(--shadow);
}

/* เส้น accent บาง ๆ บนขอบบนการ์ด เป็นจุดสังเกตเล็ก ๆ */
.login-card::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80px; height:3px; border-radius:0 0 3px 3px;
  background:var(--gradient-teal);
  box-shadow:0 0 12px rgba(63,184,176,.5);
}

/* ลอยเบา ๆ ให้ดูมีชีวิต (เคารพ prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .login-wrap{ animation: login-bg-drift 24s ease-in-out infinite alternate; }
}
@keyframes login-bg-drift{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 18px 14px, -14px 18px, 10px -10px, -10px -14px, 0 0; }
}

/* ---------- Pagination ---------- */
.pagination{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:18px;}
.page-btn{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; transition:border-color .15s, background .15s, color .15s;}
.page-btn:hover:not(.disabled):not(.active){border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.page-btn.active{background:var(--accent); border-color:var(--accent); color:#fff; cursor:default;}
.page-btn.disabled{opacity:.45; cursor:not-allowed;}
.page-ellipsis{color:var(--ink-faint); padding:0 2px;}
.page-info{margin-left:10px; font-size:13px; color:var(--ink-faint);}
@media (max-width:640px){
  .page-info{width:100%; margin:6px 0 0; text-align:center;}
}

/* ---------- Users table (compact action cells) ---------- */
.users-table td{vertical-align:middle;}
.users-table .cell-actions{display:flex; align-items:center; gap:6px;}
.users-table .cell-actions select{width:150px; flex-shrink:0;}
.users-table .cell-actions input[type="password"]{width:118px; flex-shrink:0;}
.users-table td a.btn.sm{white-space:nowrap;}

/* ---------- Link Building form (premium) ---------- */
.lb-form{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 24px; align-items:start;}
.lb-form .field{margin-bottom:0; display:flex; flex-direction:column;}
.lb-form label.field-label{margin-bottom:8px; font-size:15px; color:var(--ink);}
.lb-form label.field-label .req{color:var(--crit); margin-left:3px; font-style:normal;}
.lb-form input, .lb-form select.form-select{height:44px; padding:10px 14px; border-radius:12px; font-size:15px;}
.lb-form input:hover, .lb-form select.form-select:hover{border-color:var(--accent);}
.lb-form input:focus-visible, .lb-form select.form-select:focus-visible{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.lb-form .field-hint{font-size:12.5px; line-height:1.5; color:var(--ink-faint); margin-top:7px;}
.lb-submit{display:flex; align-items:flex-end; justify-content:flex-end;}
.lb-submit .btn.primary{height:44px; padding:0 24px; border-radius:12px; font-size:15px; box-shadow:0 1px 2px rgba(18,22,28,.10), 0 2px 6px rgba(18,22,28,.08);}
@media (max-width:960px){
  .lb-form{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .lb-form{grid-template-columns:minmax(0,1fr);}
  .lb-submit{justify-content:stretch;}
  .lb-submit .btn.primary{width:100%;}
}

/* ============================================================
   5) Sneat compatibility layer (โหลดท้ายสุด — ชนะ cascade)
   ============================================================ */
body{font-family:'Sarabun','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;}
a{text-decoration:none;}
/* Bootstrap .modal เป็น display:none ซึ่งจะกลบ modal จัดการเว็บไซต์ของเรา */
.modal-overlay .modal{display:block;position:relative;inset:auto;z-index:auto;width:auto;}
.notif-wrap{position:relative;}
/* site switcher ภายในเมนู Sneat */
.menu-inner .site-switch{margin:.25rem .75rem 1rem;padding:.85rem .9rem;border-radius:.6rem;background:rgba(125,138,155,.1);}
.menu-inner .site-switch label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:.4rem;}
.menu-inner .site-select-wrap{position:relative;display:block;}
.menu-inner .site-select{width:100%;appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink);border:1px solid rgba(125,138,155,.35);border-radius:.45rem;padding:.5rem 1.9rem .5rem .7rem;font-size:.86rem;font-family:inherit;}
.menu-inner .site-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.menu-inner .site-select-wrap svg.chev{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;color:var(--ink-dim);}
.menu-inner .site-switch-foot{margin-top:.55rem;}
.menu-inner .hint{font-size:.8rem;color:var(--ink-dim);}
/* การ์ด/ตารางเดิมของเราอยู่บน BS reboot ได้ปกติ — แค่เคลียร์ margin heading ใน card-head เดิม */
.card-head h2,.card-head h3{margin-bottom:0;}
/* แถบขวาบน: เว้นช่องไฟระหว่างปุ่มแจ้งเตือน / โปรไฟล์ / ออกจากระบบ / เพิ่มเว็บไซต์ */
#layout-navbar .navbar-nav{gap:.4rem; flex-wrap:nowrap; align-items:center;}
#layout-navbar .nav-item.dropdown > .nav-link{padding:.25rem .4rem; border-radius:.45rem;}
#layout-navbar .notif-bell, #layout-navbar .btn-outline-danger{flex-shrink:0;}
/* แบรนด์ในเมนู: กันข้อความยาวล้นไปทับ navbar */
.app-brand{min-height:66px; padding:1rem 1.1rem;}
.app-brand-link{min-width:0; overflow:hidden;}
.app-brand-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1rem;}
/* sparkline ในการ์ดสถิติ (Dashboard) */
.stat-spark{width:100%; margin-top:8px;}
.stat-spark .apexcharts-svg{overflow:visible;}
/* ปุ่มออกจากระบบในเมนูข้าง — ให้หน้าตาเหมือน menu-link ของ Sneat */
.menu-link-btn{width:100%; border:0; background:none; text-align:left; font:inherit; cursor:pointer; border-radius:.375rem;}
/* ขนาดฟอนต์ระบบ 14.5px — เฉพาะเนื้อหา (layout-page) ไม่แตะเมนูข้าง */
.layout-page{font-size:14.5px;}
.layout-page .btn,.layout-page .form-control,.layout-page .form-select,
.layout-page .dropdown-menu,.layout-page .dropdown-item,.layout-page .badge,
.layout-page .nav-link,.layout-page .navbar-brand{font-size:inherit;}
/* เมนูข้างคงขนาดเดิม */
.menu-inner .link-btn{font-size:16px;}

/* ============================================================
   6) Analytics Dashboard — SaaS layout (scoped ภายใต้ .analytics-wrap)
   ============================================================ */
.analytics-wrap{display:flex; flex-direction:column; gap:20px;}
/* การ์ดทุกใบในหน้านี้: ขอบมน + เงาอ่อน */
.analytics-wrap .card{border-radius:16px; border:1px solid rgba(63,184,176,.08); border-top:1px solid rgba(63,184,176,.12); box-shadow:0 1px 2px rgba(0,0,0,.15), 0 8px 24px -12px rgba(0,0,0,.25), inset 0 1px 0 rgba(63,184,176,.04); overflow:hidden; transition:all .4s var(--ease); background:linear-gradient(145deg, rgba(22,30,40,.92), rgba(28,38,50,.88));}
.analytics-wrap .card:hover{ border-color:rgba(63,184,176,.35); box-shadow:0 0 15px -3px rgba(63,184,176,.3), 0 0 40px -8px rgba(63,184,176,.12), 0 8px 24px -12px rgba(0,0,0,.25); }
.analytics-wrap .card-pad{padding:20px 22px;}
.analytics-wrap .card-head{margin-bottom:14px;}

/* แถวเลือกช่วงเวลา: site url + pill tabs */
.analyt-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.analyt-head h3{font-size:1.05rem; margin:0;}
.range-tabs{display:inline-flex; background:rgba(125,138,155,.08); border-radius:999px; padding:4px; gap:2px;}
.range-tabs a{padding:.34rem .95rem; border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink-dim); transition:all .15s ease;}
.range-tabs a:hover{color:var(--ink);}
.range-tabs a.active{background:#fff; color:var(--accent); box-shadow:0 1px 4px rgba(18,22,28,.12);}

/* การ์ด KPI: เลขโดดเด่น + mini chart เป็นพื้นหลังล่างของการ์ด */
.kpi-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:560px){.kpi-grid{grid-template-columns:1fr;}}
.kpi-card{position:relative; padding:18px 20px 52px; border-radius:16px;
  border:1px solid rgba(63,184,176,.08); border-top:1px solid rgba(63,184,176,.12);
  background:linear-gradient(145deg, rgba(22,30,40,.92), rgba(28,38,50,.88));
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 10px 28px -14px rgba(0,0,0,.25), inset 0 1px 0 rgba(63,184,176,.04);
  transition:all .4s var(--ease);}
.kpi-card:hover{ border-color:rgba(63,184,176,.4); box-shadow:0 0 18px -4px rgba(63,184,176,.35), 0 0 45px -10px rgba(63,184,176,.15), 0 10px 28px -14px rgba(0,0,0,.25); }
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;}
.kpi-card:hover{transform:translateY(-2px); box-shadow:0 2px 6px rgba(18,22,28,.06), 0 16px 36px -14px rgba(18,22,28,.18);}
.kpi-label{display:block; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim);}
.kpi-value{font-size:2rem; line-height:1.15; font-weight:700; color:var(--ink); margin-top:4px; position:relative; z-index:2;}
.kpi-delta{display:inline-block; margin-top:6px; font-size:.74rem; font-weight:600; padding:.14rem .55rem; border-radius:999px; position:relative; z-index:2;}
.kpi-delta.up{color:var(--good); background:rgba(46,158,107,.12);}
.kpi-delta.down{color:var(--crit); background:rgba(201,59,59,.10);}
.kpi-delta.flat{color:var(--ink-dim); background:rgba(125,138,155,.12);}
.kpi-spark{position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none; opacity:.9;}
.kpi-accent{width:34px; height:4px; border-radius:2px; margin-top:10px;}

/* กริดสอง/สามคอลัมน์ของหน้านี้: ช่องไฟกว้างขึ้น */
.analytics-wrap .grid{gap:20px;}

/* ═══════════════════════════════════════════════════════════════
   TEXT VISIBILITY FIX — Ensure ALL text is bright on dark bg
   ═══════════════════════════════════════════════════════════════ */
.breadcrumb,.breadcrumb-item,.breadcrumb-item a{color:var(--ink-dim) !important;}
.breadcrumb-item.active{color:var(--ink) !important;}
.hint{color:var(--ink-dim) !important;}
.table td,.table th,.table tbody td,.table thead th{color:var(--ink) !important;}
.table td{border-color:var(--border) !important;}
.table thead{border-bottom:1px solid var(--border) !important;}
.form-label,.field-label,label{color:var(--ink-dim) !important; font-weight:600;}
.form-control,.form-select,input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--border) !important;
}
.form-control:focus,.form-select:focus,select:focus{border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important;}
.dropdown-menu{background:var(--surface-2) !important; border:1px solid var(--border) !important;}
.dropdown-item{color:var(--ink-dim) !important;}
.dropdown-item:hover{background:rgba(63,184,176,.08) !important; color:#fff !important;}
.text-muted{color:var(--ink-dim) !important;}
small,.small{color:var(--ink-dim) !important;}
.page-link{color:var(--ink-dim) !important;}
.page-item.active .page-link{background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important;}
.alert-danger{color:#fff !important; background:var(--crit-soft) !important; border-color:var(--crit) !important;}
.alert-success{color:#fff !important; background:var(--good-soft) !important; border-color:var(--good) !important;}
.alert-warning{color:#fff !important; background:var(--warn-soft) !important; border-color:var(--warn) !important;}
.alert-info{color:#fff !important; background:var(--blue-soft) !important; border-color:var(--blue) !important;}
.modal-body,.modal-header,.modal-footer{color:var(--ink) !important;}
.toast{background:var(--surface-2) !important; color:var(--ink) !important; border:1px solid var(--border) !important;}
.list-group-item{background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important;}
.list-group-item.active{background:var(--accent) !important; color:#fff !important;}
.progress{background:var(--surface-2) !important;}
.form-check-label{color:var(--ink-dim) !important;}
.invalid-feedback,.valid-feedback{color:var(--crit) !important;}
.tooltip-inner{background:var(--surface-2) !important; color:var(--ink) !important;}
.offcanvas{background:var(--surface) !important; color:var(--ink) !important;}
.badge{font-weight:600;}
.card-body{color:var(--ink) !important;}
.card-body p,.card-body span,.card-body div{color:inherit;}
.col-form-label{color:var(--ink-dim) !important; font-weight:600;}
.input-group-text{background:var(--surface-2) !important; color:var(--ink-dim) !important; border-color:var(--border) !important;}
.navbar-brand{color:var(--ink) !important;}
.navbar-toggler{border-color:var(--border) !important;}
.navbar-toggler-icon{filter:invert(1);}
.kpi-label{color:var(--ink-dim) !important;}
.kpi-value{color:var(--ink) !important;}
/* ═══ End Text Visibility Fix ═══ */