/* ═══════════════════════════════════════════════
INFINITY X — Admin panel (ธีมเดียวกับเว็บหลัก DESIGN.md)
sidebar/chrome = Command Navy · เนื้อหา = สว่าง · action = Royal Blue
═══════════════════════════════════════════════ */
:root{
--blue:#1D4ED8; --blue-deep:#1E3A8A; --blue-soft:#3B82F6;
--ink:#0F1E3D; --ink-2:#44557A; --ink-3:#6C7C9C;
--navy:#0A1430; --navy-2:#12224E;
--line:#DCE6F5; --sky:#DEEBFB; --tint:#F2F7FD;
--red:#D92638; --red-deep:#B01D2E;
--gold:#E8A812; --green:#15803D; --green-dot:#22C55E;
--font-display:"Cinzel","Inter",serif;
/* ชุดฟอนต์เดียวกับ cabal_web_k — Inter คุมละติน · Anuphan คุมไทย (เฉพาะหลังบ้าน) */
--font-ui:"Inter","Anuphan",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono","Consolas",monospace;
/* พื้นผิวที่เมื่อก่อน hardcode ไว้ตามหน้า — ดึงมาเป็น token เพื่อสลับโหมดมืดได้ */
--card:#FFFFFF; /* พื้นการ์ด/กล่องขาว */
--field:#F8FBFF; /* พื้นช่องกรอก */
--row:#EDF3FC; /* เส้นคั่นแถวในตาราง */
--hl:#EFF5FF; /* พื้นไฮไลต์/hover โทนฟ้า */
--dim:#C3CFE2; /* ตัวอักษรจางสุด */
--shadow:rgba(15,30,61,.45);
/* ── ชิปสถานะ: พื้นอ่อน / เส้นขอบ / ตัวอักษร ──
แยกเป็น token เพราะโหมดมืดต้องกลับด้าน (พื้นเข้ม + ตัวอักษรสว่าง)
ค่าฝั่งสว่าง = สีเดิมที่เคยเขียนตายตัวไว้ตามหน้า */
--t-green:#DCFCE7; --t-green2:#F0FDF4; --t-gold:#FEF3C7; --t-gold2:#FFFBEB;
--t-red:#FEE2E2; --t-red2:#FEF2F2; --t-blue:#DBEAFE; --t-sky2:#E0F2FE;
--t-pink:#FCE7F3; --t-cyan:#CFFAFE; --t-gray:#F1F5F9; --t-orange:#FFEDD5;
--b-gold:#FDE68A; --b-red:#FECACA; --b-red2:#F87171; --b-green:#BBF7D0;
--c-green:#15803D; --c-gold:#92400E; --c-red:#B01D2E; --c-sky2:#075985;
--c-gray:#64748B; --c-pink:#DB2777; --c-cyan:#0E7490; --c-orange:#C2410C;
color-scheme:light;
}
/* ── โหมดมืด — สลับด้วย data-theme="dark" ที่ (ixTheme ใน admin-ui.js) ──
sidebar เป็น navy อยู่แล้วทั้งสองโหมด เปลี่ยนเฉพาะฝั่งเนื้อหา */
html[data-theme="dark"]{
--ink:#E7EEFA; --ink-2:#95A6C6; --ink-3:#7A8CAC;
--line:#25334F; --sky:#17325F; --tint:#0C1526;
--card:#121D34; --field:#0F1A30; --row:#1E2C46; --hl:#17284C; --dim:#54678A;
--blue:#5B90F7; --blue-soft:#7BA9FF; --blue-deep:#2B4FA8;
--green:#4ADE80; --green-dot:#34D399;
--red:#F87171; --red-deep:#FCA5A5; --gold:#F3C051;
--shadow:rgba(0,0,0,.6);
/* ชิปสถานะฝั่งมืด — พื้นเข้มอมสีเดิม + ตัวอักษรสว่างพอให้อ่านออก */
--t-green:#12301F; --t-green2:#0F2719; --t-gold:#332810; --t-gold2:#2A2010;
--t-red:#3A171A; --t-red2:#2B1216; --t-blue:#16294D; --t-sky2:#11283E;
--t-pink:#351829; --t-cyan:#0D2B33; --t-gray:#1C2942; --t-orange:#38230F;
--b-gold:#6B5316; --b-red:#6B2A2F; --b-red2:#9E4247; --b-green:#1F5E3C;
--c-green:#5BE49B; --c-gold:#F0C071; --c-red:#FCA5A5; --c-sky2:#7DD3FC;
--c-gray:#9AACC6; --c-pink:#F9A8D4; --c-cyan:#67E8F9; --c-orange:#FDBA74;
color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
/* ช่องกรอก/ปุ่ม ไม่รับ font จาก body เอง (ค่าเริ่มต้นของเบราว์เซอร์) — บังคับให้ใช้ฟอนต์เดียวกันทั้งเว็บ */
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
/* background = กันจอขาววาบตอนเปลี่ยนหน้า · font-smoothing = ตัวที่ทำให้ตัวอักษรบางและคมแบบ cabal_web_k
(ถ้าไม่ใส่ Chrome บน Windows จะเรนเดอร์แบบ subpixel ตัวหนากว่า แม้จะเป็นฟอนต์เดียวกัน) */
html{background:var(--tint);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-ui);color:var(--ink);background:var(--tint);min-height:100svh;
font-size:15px;line-height:1.5}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.shell{display:flex;min-height:100svh}
/* ── sidebar ── */
.sidebar{
/* 238px ไม่ใช่เลขสวย ๆ แต่เป็นความกว้างที่ "AgentShop Dashboard" (ชื่อเมนูที่ยาวที่สุด)
อยู่ได้ในบรรทัดเดียว — เมนูที่ตัดขึ้นสองบรรทัดทำให้ระยะห่างระหว่างรายการเพี้ยนทั้งแถบ
เพิ่มเมนูชื่อยาวกว่านี้เมื่อไหร่ ต้องขยายตามหรือย่อชื่อเมนู */
width:238px;flex:none;
background:linear-gradient(180deg,var(--navy),var(--navy-2));
color:#AFC0E2;display:flex;flex-direction:column;
padding:15px 11px;position:sticky;top:0;height:100svh;
overflow:hidden; /* ตัวที่เลื่อนคือ .sb-scroll ข้างใน ไม่ใช่ตัว sidebar เอง */
}
/* เมนูตรงกลางเลื่อนได้ในตัวเอง — โลโก้/ผู้ใช้ด้านบน กับปุ่มด้านล่าง จึงอยู่กับที่
min-height:0 ต้องมี ไม่งั้น flex item จะไม่ยอมหดลงมาต่ำกว่าเนื้อหา แล้วเลื่อนไม่ได้ */
.sb-scroll{
flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:rgba(175,192,226,.28) transparent;
margin-right:-5px;padding-right:5px; /* ดันแถบเลื่อนออกไปชิดขอบ ไม่เบียดตัวหนังสือ */
}
.sb-scroll::-webkit-scrollbar{width:6px}
.sb-scroll::-webkit-scrollbar-thumb{background:rgba(175,192,226,.28);border-radius:20px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:rgba(175,192,226,.45)}
.sb-scroll::-webkit-scrollbar-track{background:transparent}
/* แบรนด์: ไอคอนสี่เหลี่ยม + ชื่อ (ทรงเดียวกับ cabal_web_k) */
.sb-logo{display:flex;align-items:center;gap:9px;padding:2px;text-decoration:none}
.sb-logo .bi{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:8px;
background:linear-gradient(160deg,var(--blue-soft),var(--blue));color:#fff}
.sb-logo .bi svg{width:16px;height:16px;display:block}
.sb-logo .bw{min-width:0}
.sb-logo .bt{display:block;font-family:var(--font-display);font-size:.9rem;font-weight:700;
letter-spacing:.08em;color:#fff;line-height:1.1}
.sb-logo .bt b{color:var(--red)}
.sb-badge{display:block;font-size:.55rem;font-weight:700;letter-spacing:.16em;color:#6E86BA;margin-top:2px}
.sb-divider{display:flex;align-items:center;gap:8px;margin:12px 0}
.sb-divider::before,.sb-divider::after{content:'';flex:1;height:1px;background:rgba(175,192,226,.18)}
.sb-divider i{width:5px;height:5px;background:var(--blue-soft);rotate:45deg;display:block}
.sb-user{display:flex;align-items:center;gap:9px;padding:0 4px 10px}
.sb-user .av{width:29px;height:29px;flex:none;display:grid;place-items:center;
background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);border-radius:9px;rotate:45deg}
.sb-user .av svg{rotate:-45deg;width:14px;height:14px}
/* มีรูปโปรไฟล์ — เลิกหมุน แล้วให้รูปเต็มกรอบ */
.sb-user .av.photo{rotate:0deg;border-radius:9px;overflow:hidden;background:none;border-color:rgba(59,130,246,.55)}
.sb-user .av.photo img{width:100%;height:100%;object-fit:cover;display:block}
.sb-user b{display:block;color:#fff;font-size:.8rem;line-height:1.25}
.sb-user span{font-size:.62rem;letter-spacing:.14em;font-weight:700}
.lv-1{color:#7DD3FC}.lv-2{color:#FCA5A5}.lv-3{color:#FCD34D}
/* ── เมนูข้าง: ทรงกระชับแบบ cabal_web_k (ไอคอนเส้น ไม่มีกล่อง) สีของ INFINITY X ── */
.sb-label{margin:14px 8px 5px;font-size:.6rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:#5F76A8}
.sb-label:first-of-type{margin-top:2px}
.sb-menu{list-style:none}
.sb-menu:last-of-type{flex:1} /* กลุ่มสุดท้ายดันแถวล่างลงไปติดขอบ */
/* หัวหมวด (มีเมนูย่อย) และเมนูเดี่ยว หน้าตาเหมือนกัน */
.sb-cat-btn,.sb-item > a{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;
border:0;border-radius:8px;background:none;cursor:pointer;text-align:left;text-decoration:none;
color:#AFC0E2;font-family:var(--font-ui);font-size:.8rem;font-weight:500;
transition:background .15s ease-out,color .15s ease-out,padding-left .15s ease-out}
.sb-cat-btn .mi,.sb-item > a .mi{flex:none;width:20px;height:20px;display:grid;place-items:center}
.sb-cat-btn .mi svg,.sb-item > a .mi svg{width:16px;height:16px;display:block;stroke:currentColor}
.sb-cat-btn .chev{margin-left:auto;width:13px;height:13px;flex:none;display:block;
stroke:#5F76A8;transition:transform .25s ease-out}
.sb-cat-btn:hover,.sb-item > a:hover{background:rgba(59,130,246,.12);color:#fff;padding-left:10px}
.sb-cat.open > .sb-cat-btn{color:#fff}
.sb-cat.open > .sb-cat-btn .chev{transform:rotate(90deg)}
/* หน้าปัจจุบัน (คลาส has-on ใส่โดย admin-ui.js) */
.sb-cat.has-on > .sb-cat-btn{color:#fff}
.sb-cat.has-on > .sb-cat-btn .mi,.sb-item > a.on .mi{color:var(--blue-soft)}
.sb-item > a.on{background:rgba(59,130,246,.16);color:#fff;font-weight:600}
/* เมนูย่อย — จุดเพชรนำหน้า */
.sb-sub{display:none;list-style:none;padding-left:16px}
.sb-cat.open > .sb-sub{display:block;animation:sub-in .2s ease-out}
@keyframes sub-in{from{opacity:0;transform:translateY(-5px)}}
.sb-sub a{position:relative;display:flex;align-items:center;padding:6px 8px 6px 22px;
border-radius:8px;color:#8CA0C4;text-decoration:none;font-size:.78rem;font-weight:400;
transition:background .15s ease-out,color .15s ease-out,padding-left .15s ease-out}
.sb-sub a::before{content:"";position:absolute;left:10px;top:50%;width:4px;height:4px;
background:#5F76A8;rotate:45deg;translate:0 -50%;transition:background .15s ease-out}
.sb-sub a:hover{background:rgba(59,130,246,.1);color:#fff;padding-left:26px}
.sb-sub a:hover::before{background:var(--blue-soft)}
.sb-sub a.on{background:rgba(59,130,246,.18);color:#fff;font-weight:600}
.sb-sub a.on::before{background:var(--blue-soft)}
.sb-sub .soon{margin-left:auto;font-size:.58rem;font-weight:700;color:#5D6F96;
border:1px solid rgba(93,111,150,.5);padding:1px 6px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.sb-cat.open > .sb-sub{animation:none}}
/* ท้ายเมนู — อยู่ล่างสุดเสมอ ไม่เลื่อนหายไปกับเมนู
flex:none กันโดนบีบเมื่อเมนูยาว · สลับ "กลับ" กับ "ออกจากระบบ" มาอยู่แถวเดียวกัน */
.sb-foot{flex:none;border-top:1px solid rgba(175,192,226,.14);padding-top:8px;
display:flex;flex-direction:column;gap:7px;margin-top:10px}
.sb-exit{display:flex;gap:6px}
.sb-foot a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
padding:8px 6px;border-radius:8px;border:1px solid rgba(175,192,226,.16);
color:#8CA0C4;text-decoration:none;font-size:.75rem;font-weight:600;cursor:pointer;
white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.sb-foot a svg{width:14px;height:14px;flex:none}
.sb-foot a:hover{background:rgba(217,38,56,.14);color:#FCA5A5;border-color:rgba(217,38,56,.3)}
.sb-foot a.back:hover{background:rgba(59,130,246,.14);color:#fff;border-color:rgba(59,130,246,.35)}
/* ── content ── */
.content{flex:1;padding:24px 28px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.topbar h1{font-family:var(--font-display);font-size:1.28rem;letter-spacing:.05em}
.topbar .sub{font-size:.8rem;color:var(--ink-2)}
.topbar .spacer{flex:1}
.refresh-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1px solid var(--line);
background:var(--card);border-radius:999px;color:var(--ink-2);font-family:var(--font-ui);font-size:.8rem;
font-weight:600;cursor:pointer;transition:background .15s ease-out,color .15s ease-out}
.refresh-btn:hover{background:var(--sky);color:var(--blue)}
/* ── การ์ดสถิติ ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.st-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
display:flex;align-items:center;gap:14px;transition:transform .15s ease-out,box-shadow .15s ease-out}
.st-card .ico{width:40px;height:40px;flex:none;display:grid;place-items:center;
background:var(--sky);border-radius:11px;rotate:45deg}
.st-card .ico svg{rotate:-45deg}
.st-card .k{font-size:.78rem;font-weight:500;color:var(--ink-2)}
.st-card .v{font-size:1.5rem;font-weight:700;line-height:1.25;min-height:1.25em}
/* ค่าที่เป็นตัวหนังสือ (เช่น "ปิดปรับปรุง") ย่อลงให้สมดุลกับการ์ดตัวเลข */
.st-card.ok .v,.st-card.warn .v,.st-card.bad .v{font-size:1.25rem}
.st-card.click{cursor:pointer}
.st-card.click:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(15,30,61,.4)}
.st-card.ok .v{color:var(--green)} .st-card.warn .v{color:var(--gold)} .st-card.bad .v{color:var(--red-deep)}
/* ── การ์ดเนื้อหา ── */
.grid{display:grid;gap:16px;margin-bottom:16px}
.g-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;min-width:0}
.qcard h2{font-size:.95rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.qcard h2 i{width:7px;height:7px;background:var(--blue);rotate:45deg;display:block;flex:none}
.qcard h2 .count{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--ink-2)}
/* ── list rows (nation / class / points) ── */
.row-list{display:flex;flex-direction:column}
.row-item{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--row);font-size:.86rem}
.row-item:last-child{border-bottom:0}
.row-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item .val{font-weight:700;font-variant-numeric:tabular-nums}
.row-item img{width:22px;height:22px;flex:none}
.dot{width:9px;height:9px;rotate:45deg;flex:none;display:block}
.dot.n1{background:var(--gold)}.dot.n2{background:var(--blue)}.dot.n3{background:var(--red)}.dot.n0{background:#93A5C7}
/* ไอคอน (คลาส / ประเทศ) ในช่องตาราง — รูปนำหน้าข้อความ */
.ico-cell{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ico-cell img{width:20px;height:20px;flex:none;object-fit:contain}
.ico-cell .dot{margin:0 5px}
/* ── Nation / Class Online: การ์ดแนวนอน (ไอคอนรูป + ชื่อ + จำนวน) ── */
/* Nation (1/3) + Class (2/3) แถวเดียวกัน — สัดส่วนตามจำนวนข้อมูล (4 vs 9) */
.nc-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.on-cards{display:grid;gap:12px}
.on-cards.nat{grid-template-columns:repeat(2,minmax(0,1fr))} /* 4 ใบ = 2x2 */
.on-cards.cls{grid-template-columns:repeat(5,minmax(0,1fr))} /* 9 ใบ = 5+4 (ช่องที่ 10 เว้นว่าง) */
.on-card{display:flex;align-items:center;gap:11px;padding:12px 14px;
border:1px solid var(--line);border-radius:13px;background:var(--tint);min-width:0;
transition:border-color .15s ease-out,transform .15s ease-out,background .15s ease-out}
.on-card:hover{background:var(--card);transform:translateY(-2px);border-color:#C9DCF5}
.on-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
background:var(--card);border:1px solid var(--line)}
.on-ic img{width:26px;height:26px;object-fit:contain}
.on-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.on-nm{font-size:.72rem;font-weight:600;color:var(--ink-2);
line-height:1.2;overflow-wrap:anywhere} /* ชื่อยาวขึ้น 2 บรรทัดได้ ไม่โดนตัด */
.on-val{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;color:var(--ink);
font-variant-numeric:tabular-nums}
/* แถบสีชาติ (ขอบซ้าย + สีตัวเลข) */
.on-card.n1{--acc:var(--gold)} .on-card.n2{--acc:var(--blue)}
.on-card.n3{--acc:var(--red)} .on-card.n0{--acc:#93A5C7}
.on-cards.nat .on-card{border-left:3px solid var(--acc,var(--line))}
.on-cards.nat .on-val{color:var(--acc)}
/* มีคนออนไลน์ = เน้นการ์ด */
.on-card.hot{background:var(--card);border-color:var(--blue);box-shadow:0 6px 18px -10px rgba(29,78,216,.5)}
.on-card.hot .on-val{color:var(--blue)}
/* จอแคบ: Nation/Class ซ้อนกันแทนแถวเดียว + ลดคอลัมน์ Class */
@media (max-width:900px){ .nc-row{grid-template-columns:minmax(0,1fr)} }
@media (max-width:680px){ .on-cards.cls{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:460px){ .on-cards.cls{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ── Points Server: การ์ดแนวนอน (ไอคอนสีตามสกุล) ── */
.pt-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pt-card{display:flex;align-items:center;gap:11px;padding:14px 15px;
border:1px solid var(--line);border-radius:13px;background:var(--tint);min-width:0;
transition:border-color .15s ease-out,transform .15s ease-out,background .15s ease-out}
.pt-card:hover{background:var(--card);transform:translateY(-2px)}
.pt-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px}
.pt-ic svg{width:21px;height:21px}
.pt-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-nm{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-val{font-family:var(--font-mono);font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* สีต่อสกุล — พื้นไอคอน + ค่า + ขอบตอน hover */
.pt-card.gold .pt-ic{background:var(--t-gold);color:var(--c-gold)} .pt-card.gold .pt-val{color:var(--c-gold)} .pt-card.gold:hover{border-color:#FCD34D}
.pt-card.pink .pt-ic{background:var(--t-pink);color:var(--c-pink)} .pt-card.pink .pt-val{color:var(--c-pink)} .pt-card.pink:hover{border-color:#F9A8D4}
.pt-card.purple .pt-ic{background:var(--sky);color:var(--blue)} .pt-card.purple .pt-val{color:var(--blue)} .pt-card.purple:hover{border-color:var(--blue-soft)}
.pt-card.cyan .pt-ic{background:var(--t-cyan);color:var(--c-cyan)} .pt-card.cyan .pt-val{color:var(--c-cyan)} .pt-card.cyan:hover{border-color:#67E8F9}
.pt-card.blue .pt-ic{background:var(--sky);color:var(--blue)} .pt-card.blue .pt-val{color:var(--blue)} .pt-card.blue:hover{border-color:#93C5FD}
.pt-card.red .pt-ic{background:var(--t-red);color:var(--c-red)} .pt-card.red .pt-val{color:var(--c-red)} .pt-card.red:hover{border-color:#FDA4AF}
/* จอแคบ: ลดจำนวนคอลัมน์ */
@media (max-width:1200px){ .pt-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .pt-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ── channel tiles ── */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.ch-tile{background:var(--tint);border:1px solid var(--line);border-radius:11px;padding:12px 8px;text-align:center;
cursor:pointer;transition:border-color .15s ease-out,transform .15s ease-out,background .15s ease-out}
.ch-tile:hover{border-color:var(--blue);background:var(--card);transform:translateY(-2px)}
.ch-tile .k{font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.ch-tile .v{font-size:1.25rem;font-weight:700;color:var(--ink);margin:2px 0}
.ch-tile .m{font-size:.66rem;color:var(--ink-2)}
.ch-tile.live{border-color:var(--green);background:var(--t-green2)}
.ch-tile.live .v{color:var(--green)}
/* ── ตาราง ── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.83rem;white-space:nowrap}
/* ไม่ใส่ letter-spacing กับข้อความไทย — สระ/วรรณยุกต์จะหลุดจากพยัญชนะ ทำให้ดูเหมือนคนละฟอนต์ */
th{text-align:left;padding:8px 11px;font-size:.74rem;font-weight:600;color:var(--ink-2);border-bottom:1.5px solid var(--line)}
td{padding:8px 11px;border-bottom:1px solid var(--row)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--field)}
/* ตัวไทยที่หลุดมาในช่อง mono ให้ใช้ Prompt แทน system monospace */
td.mono{font-family:var(--font-mono);font-size:.8rem}
/* คอลัมน์ตัวเลข — หัวตารางต้องชิดขวาตามข้อมูล ไม่งั้นอ่านไม่ตรงช่อง */
td.num,th.num{text-align:right}
td.num{font-variant-numeric:tabular-nums}
.empty{padding:22px 4px;text-align:center;color:var(--ink-2);font-size:.84rem}
/* ── badge ── */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
.badge.b0{background:var(--hl);color:var(--ink-2)}
.badge.b1{background:var(--t-sky2);color:var(--c-sky2)}
.badge.b2{background:var(--t-red);color:var(--red-deep)}
.badge.b3{background:var(--t-gold);color:var(--c-gold)}
.badge.send{background:var(--t-sky2);color:var(--c-sky2)}
.badge.receive{background:var(--t-green);color:var(--green)}
.badge.delete{background:var(--t-red);color:var(--red-deep)}
.badge.in{background:var(--t-green);color:var(--green)}
.badge.out{background:var(--hl);color:var(--ink-2)}
.badge.gm{background:var(--t-gold);color:var(--c-gold)}
/* ป้ายผูกมัดไอเทม — ใช้ร่วมกันทุกหน้า (ตาราง/popup/รายการ)
กว้างเท่ากันทุกแบบ ชื่อไอเทมจะได้เรียงตรงกันเป็นแนวเดียว */
.badge.bind{background:var(--sky);color:#4338CA;font-weight:600;
display:inline-block;width:4.6em;text-align:center;padding:2px 0}
.badge.bind.none{background:var(--tint);color:#93A5C7}
/* ── แถวที่คลิกดูรายละเอียดได้ ── */
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--sky)}
/* ── รายการ key-value ใน popup ── */
.kv-list{display:flex;flex-direction:column;max-height:60vh;overflow-y:auto;margin-top:4px}
.kv{display:flex;gap:12px;padding:7px 2px;border-bottom:1px solid var(--row);font-size:.84rem}
.kv:last-child{border-bottom:0}
.kv-k{flex:0 0 108px;color:var(--ink-2);font-weight:500}
/* หัวข้อกลุ่มใน popup รายละเอียด */
.kv-head{font-size:.72rem;font-weight:700;color:var(--blue);
padding:12px 2px 5px;border-bottom:1.5px solid var(--line)}
.kv-head:first-child{padding-top:2px}
.kv-v{flex:1;min-width:0;word-break:break-word}
.dim{color:#93A5C7}
.mono{font-family:var(--font-mono);font-size:.8rem}
/* ── ระดับตัวละคร: ปกติ / Overlord เขียว / Myth ม่วง ── */
.lvl{font-weight:600;font-variant-numeric:tabular-nums}
.lvl.ol{color:var(--c-green)} /* Overlord */
.lvl.myth{color:var(--blue)} /* Myth */
.lvl.reset{font-size:.72rem;font-weight:600;color:var(--blue);background:var(--sky);
padding:1px 7px;border-radius:999px;margin-left:2px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;font-size:.78rem;font-weight:600}
.pill.on{background:var(--t-green);color:var(--green)}
.pill.off{background:var(--t-red);color:var(--red-deep)}
.pill em{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;font-style:normal}
/* ── popup กลาง (ใช้ทุกหน้าในหลังบ้าน) ──
โครง 3 ชั้น: h2 (หัวติดอยู่กับที่) · .modal-body (เลื่อนได้) · .modal-btns (ปุ่มติดอยู่กับที่)
ทำแบบนี้แทน position:sticky เพราะหัวกับปุ่มอยู่นอกกล่องที่เลื่อน จะไม่มีอาการกระพริบ/ซ้อนขอบ */
/* ── attribute `hidden` ต้องชนะเสมอ ──
คลาสที่ตั้ง display เอง (.modal-x / .modal-btns / .scrim / อะไรก็ตามที่เป็น flex/grid)
จะทับ display:none ที่เบราว์เซอร์ให้มากับ hidden → ใส่ hidden แล้วของยังโผล่
(เจอจริง: ปุ่มปิดกับปุ่ม "ปิด" ในป็อปอัป deploy โผล่ตั้งแต่ยัง deploy ไม่จบ) */
[hidden]{display:none!important}
.scrim{position:fixed;inset:0;background:rgba(10,20,48,.55);display:none;align-items:center;justify-content:center;
padding:20px;z-index:50;backdrop-filter:blur(2px)}
.scrim.open{display:flex}
.modal{display:flex;flex-direction:column;min-height:0;max-height:calc(100svh - 40px);
background:var(--card);border-radius:16px;width:min(430px,100%);overflow:hidden;
box-shadow:0 30px 80px -30px rgba(10,20,48,.6);animation:mo-in .16s ease-out both}
/* ⚠️ ห้ามใส่ transform ใน keyframe นี้ — จะทำให้ .modal เป็น containing block ของ position:fixed
→ dropdown (ixsel-list) ที่เป็น fixed ตำแหน่งเพี้ยนไปเท่าตำแหน่ง modal · ใช้ opacity อย่างเดียว */
@keyframes mo-in{from{opacity:0}}
.modal > h2{flex:none;position:relative;display:flex;align-items:center;gap:9px;
margin:0;padding:18px 24px 15px;border-bottom:1px solid var(--line);
font-size:1.02rem;font-weight:700;background:var(--card)}
.modal > h2 i{flex:none;width:8px;height:8px;background:var(--blue);rotate:45deg;display:block}
.modal > h2 .count{margin-left:0}
/* ปุ่มปิดมุมขวาบน — แดงทุก popup */
.modal-x{position:absolute;right:16px;top:50%;transform:translateY(-50%);
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:0;background:transparent;color:var(--red);font-size:1.35rem;line-height:1;
cursor:pointer;border-radius:8px;transition:background .15s ease-out,color .15s ease-out}
.modal-x:hover{background:var(--t-red2);color:var(--red-deep)}
.modal > h2:has(.modal-x){padding-right:52px}
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:18px 24px}
.modal p.hint{font-size:.82rem;color:var(--ink-2);line-height:1.6;margin-bottom:16px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:.78rem;font-weight:600;margin-bottom:6px}
/* ⚠️ ต้องเขียนแบบ "ยกเว้น checkbox/radio" ห้ามไล่ระบุทีละ type
ของเดิมเขียน `input[type=text]` ไว้ พอหน้าไหนเขียน `` เฉย ๆ ไม่ใส่ type
(ซึ่ง HTML ถือว่าเป็น text อยู่แล้ว) ช่องนั้นจะไม่โดนสไตล์เลย กลายเป็นกล่องเปล่าแคบ ๆ
— เจอมาแล้วที่ช่องค้นหาหน้าประวัติการเติมเงิน · type=password/search/date ก็ตกหล่นเหมือนกัน */
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld .ixsel-btn{width:100%;padding:11px 13px;border:1.5px solid var(--line);
border-radius:9px;background:var(--field);font-family:var(--font-ui);font-size:.88rem;color:var(--ink)}
.fld input:focus,.fld select:focus{border-color:var(--blue);background:var(--card);outline:none}
/* ── dropdown ของเราเอง (ixSelectAll ใน admin-ui.js) ──