/* ===== COINSHOP.TH — หน้าบ้าน =====
   แนวคิด: แผงควบคุมของช่าง — แถบนำทางสีกรมเข้มแบบแผงเครื่องมือ, พื้นที่ทำงานสว่างอ่านง่าย,
   สีทอง (เหรียญ) ใช้กับยอดเงินและปุ่มหลักเท่านั้น, ตัวอักษร Mono ใช้กับข้อมูลจริง (IMEI, เลขออเดอร์, API) */
:root{
  --ink:#1B2233; --ink-2:#262F46; --ink-3:#343E58; --ink-text:#C7CEDC; --ink-muted:#8C95AA;
  --paper:#EDF0F4; --card:#FFFFFF; --line:#D8DDE6; --line-2:#E7EAF0;
  --text:#1A2130; --muted:#5E6A7D;
  --gold:#E3A21A; --gold-deep:#B97F08; --gold-soft:#FFF4DA; --gold-light:#FFD570; --gold-text:#3A2600; --gold-hover:#F0B42E;
  --link:#2854C5; --ok:#1C7F46; --ok-soft:#E3F4EA; --bad:#BF3328; --bad-soft:#FBE7E5; --warn:#9A6200; --warn-soft:#FFF3D6;
  --r-lg:12px; --r-md:8px; --r-sm:6px;
  --font:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.6;color:var(--text);background:var(--paper)}
a{color:var(--link);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1{font-size:24px;line-height:1.3;font-weight:700;margin:0 0 18px;letter-spacing:-.2px}
h2{font-size:19px;margin:0 0 12px} h3{font-size:16px;font-weight:600;margin:0 0 12px}
code,.mono{font-family:var(--mono);font-size:.92em}
.hint{color:var(--muted);font-size:13px} .center{text-align:center}

/* ---------- โครงหลัก: แถบข้าง + พื้นที่ทำงาน ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--ink);color:var(--ink-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:20px 20px 18px;color:#fff;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:.2px}
.coin{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);display:grid;place-items:center;color:var(--gold-text);font-size:13px;font-weight:800;flex:none}
.side nav{padding:4px 10px 16px;display:flex;flex-direction:column;gap:1px}
.side .group{font-size:12px;color:var(--ink-muted);padding:16px 12px 6px}
.side nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-text);text-decoration:none;padding:8px 12px;border-radius:var(--r-sm);font-size:14.5px}
.side nav a:hover{background:var(--ink-2);color:#fff}
.side nav a.on{background:var(--ink-3);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.side nav a .n{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.side .foot{margin-top:auto;padding:14px 20px;border-top:1px solid var(--ink-2);font-size:13px;color:var(--ink-muted)}
.side .foot a{color:var(--ink-text)}

.work{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .who{font-size:14px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who b{color:var(--text);font-weight:600}
.top .spacer{flex:1}
.wallet{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:5px 5px 5px 14px;text-decoration:none;white-space:nowrap}
.wallet .amt{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.wallet .add{background:var(--gold);color:var(--gold-text);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
.wallet:hover .add{background:var(--gold-hover)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font:inherit;cursor:pointer}
main{padding:26px 32px 40px;max-width:1480px;width:100%;margin:0 auto}
.foot-note{padding:18px 32px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:auto}

/* ---------- ส่วนประกอบ ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px}
.card h3:first-child{margin-top:0}
.field{margin-bottom:14px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid #C5CCD8;border-radius:var(--r-sm);background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ink)}
textarea{line-height:1.5}
#imei,textarea[name=imei],input[name=txid]{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 18px;border-radius:var(--r-sm);
  cursor:pointer;font:inherit;font-weight:600;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--ink-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-text)} .btn.gold:hover{background:var(--gold-hover);border-color:var(--gold-hover)}
.btn.sec{background:#fff;color:var(--text);border-color:var(--line)} .btn.sec:hover{border-color:#AEB7C6}
.btn.block{width:100%} .btn[disabled]{opacity:.5;cursor:not-allowed}
.msg{padding:12px 14px;border-radius:var(--r-md);margin-bottom:16px;font-size:14px;border:1px solid}
.msg.ok{background:var(--ok-soft);border-color:#9FD3B4;color:#114D2B}
.msg.err{background:var(--bad-soft);border-color:#EDB0AA;color:#7A1F17}
.msg.warn{background:var(--warn-soft);border-color:#E7C77B;color:#5E3C00}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left;font-size:14px;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:13px;background:#F7F8FA}
tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto}
.card:has(> .tbl:only-child),.card[style*="padding:0"]{overflow:hidden}
.plus{color:var(--ok)} .minus{color:var(--bad)}
.grp td{background:#F2F4F8;font-weight:600;font-size:13.5px;color:var(--ink);border-top:1px solid var(--line)}
.price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
td .btn{padding:6px 14px;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.stat{margin:0}
.stat span{color:var(--muted);font-size:13px}
.stat b{display:block;font-size:28px;line-height:1.25;margin-top:4px;font-variant-numeric:tabular-nums}
.stats .stat:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.stats .stat:first-child span{color:var(--ink-muted)} .stats .stat:first-child b{color:var(--gold-light)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;color:var(--text);font-size:14px}
.tabs a:hover{border-color:#AEB7C6}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:14px}
.narrow{max-width:440px;margin:24px auto}
td[style*="monospace"],.imei{font-family:var(--mono)!important;font-size:13px}

/* ---------- หน้าเข้าสู่ระบบ / สมัคร: สองฝั่ง ---------- */
.auth{display:grid;grid-template-columns:minmax(320px,440px) 1fr;min-height:100vh}
.auth .panel{background:var(--ink);color:var(--ink-text);padding:40px 36px;display:flex;flex-direction:column}
.auth .panel .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.auth .panel h2{color:#fff;font-size:26px;line-height:1.35;margin:auto 0 16px;max-width:15em}
.auth .panel ul{list-style:none;padding:0;margin:0 0 auto;display:grid;gap:10px;font-size:14.5px}
.auth .panel li{padding-left:18px;position:relative}
.auth .panel li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.auth .panel .small{font-size:13px;color:var(--ink-muted);margin-top:28px}
.auth .form{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth .form .card{width:100%;max-width:420px;margin:0;padding:28px 28px 22px;border-radius:14px}
.auth .form h1{font-size:22px}

/* ---------- หน้าแรก (ผู้เยี่ยมชม) ---------- */
.gtop{background:var(--ink);color:var(--ink-text)}
.gtop .bar{max-width:1180px;margin:auto;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gtop .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.gtop nav{display:flex;gap:4px;flex-wrap:wrap} .gtop nav a{color:var(--ink-text);text-decoration:none;padding:7px 12px;border-radius:var(--r-sm);font-size:14.5px}
.gtop nav a:hover,.gtop nav a.on{background:var(--ink-2);color:#fff}
.gtop .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.gtop .right a.plain{color:#fff;text-decoration:none;font-size:14.5px}
.gmain{max-width:1180px;margin:auto;padding:26px 24px 40px}
.hero{background:var(--ink);color:var(--ink-text)}
.hero .in{max-width:1180px;margin:auto;padding:44px 24px 56px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{color:#fff;font-size:clamp(28px,3.6vw,42px);line-height:1.22;letter-spacing:-.5px;margin:0 0 16px;max-width:14em}
.hero p{font-size:16.5px;max-width:34em;margin:0 0 26px;color:var(--ink-text)}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn.sec{background:transparent;color:#fff;border-color:var(--ink-3)} .hero .btn.sec:hover{border-color:var(--ink-muted)}
/* แผงสถานะเซิร์ฟเวอร์ (ข้อมูลจริงจากระบบ) */
.board{background:#131927;border:1px solid var(--ink-3);border-radius:14px;overflow:hidden;font-size:14px}
.board .bh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ink-2);color:#fff;font-weight:600}
.board .live{width:8px;height:8px;border-radius:50%;background:#35C47A;box-shadow:0 0 0 0 rgba(53,196,122,.6);animation:pulse 2.4s ease-out infinite}
.board .bh span.t{margin-left:auto;font-weight:400;color:var(--ink-muted);font-size:12.5px;font-family:var(--mono)}
.board .counts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink-2)}
.board .counts a{padding:14px 16px;text-decoration:none;color:var(--ink-text);border-right:1px solid var(--ink-2)}
.board .counts a:last-child{border-right:0}
.board .counts b{display:block;color:#fff;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.2}
.board .counts a:hover{background:var(--ink)}
.board ul{list-style:none;margin:0;padding:6px 0}
.board li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px 16px;align-items:baseline}
.board li .id{font-family:var(--mono);font-size:12.5px;color:var(--ink-muted)}
.board li .nm{color:#E6EAF2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li .ac{font-size:12.5px;white-space:nowrap}
.ac.created,.ac.enabled{color:#6FD39C} .ac.disabled,.ac.deleted{color:#FF8A7E} .ac.price{color:var(--gold-light)} .ac.renamed,.ac.fields,.ac.moved{color:#9EB4FF}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,196,122,.55)}70%{box-shadow:0 0 0 8px rgba(53,196,122,0)}100%{box-shadow:0 0 0 0 rgba(53,196,122,0)}}
.section{padding:36px 0 8px}
.section h2{font-size:22px;margin:0 0 6px}
.section > .hint{margin:0 0 18px;font-size:14.5px}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.types a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;text-decoration:none;color:var(--text)}
.types a:hover{border-color:var(--ink)}
.types b{font-size:17px;display:block;margin-bottom:4px} .types .c{font-size:13px;color:var(--muted)}
.types p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 18px;counter-increment:s}
.steps div::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold-light);font-weight:700;margin-bottom:10px}
.steps b{display:block;margin-bottom:4px}
.steps p{margin:0;font-size:14px;color:var(--muted)}
.apibox{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.apibox pre{margin:0;background:var(--ink);color:#DDE3EE;border-radius:var(--r-md);padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-x:auto}
.apibox pre .k{color:var(--gold-light)}
.gfoot{background:var(--ink);color:var(--ink-muted);font-size:13.5px;margin-top:40px}
.gfoot .in{max-width:1180px;margin:auto;padding:26px 24px;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.gfoot b{color:#fff}

/* ---------- มือถือ ---------- */
@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:20;transform:translateX(-100%);transition:transform .2s ease}
  .app.open .side{transform:none;box-shadow:0 0 0 100vmax rgba(10,14,24,.45)}
  .menu-btn{display:inline-block}
  .top{padding:10px 14px} main{padding:18px 14px 32px;margin:0}
  .top .who{display:none}
  .hero .in{grid-template-columns:1fr;padding:32px 20px 40px}
  .types,.steps{grid-template-columns:1fr}
  .apibox{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr} .auth .panel{padding:24px 22px} .auth .panel h2{margin-top:18px;font-size:21px} .auth .panel ul,.auth .panel .small{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- หน้าสั่งงาน: ฟอร์มซ้าย สรุปยอดขวา ---------- */
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.order-grid > .card{margin:0}
.sum{position:sticky;top:84px}
.sum .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-variant-numeric:tabular-nums}
.sum .total{border-top:1px solid var(--line-2);margin-top:6px;padding-top:12px;font-size:15px}
.sum .total b{font-size:24px}
.card td{vertical-align:middle}
@media (min-width:961px){.app{background:linear-gradient(to right,var(--ink) 248px,var(--paper) 248px)}}
@media (max-width:960px){.order-grid{grid-template-columns:1fr}.sum{position:static}}
.brand-m{display:none;font-weight:700;color:var(--text);text-decoration:none}
@media (max-width:960px){.brand-m{display:inline}.stats{grid-template-columns:1fr 1fr}.stats .stat:first-child{grid-column:1/-1}}

/* โลโก้ที่อัปโหลดจากหลังบ้าน */
.brand img.logo{height:32px;width:auto;max-width:170px;object-fit:contain;display:block}
.auth .panel .brand img.logo{height:36px}

/* หน้าเข้าสู่ระบบ: รูปพื้นหลังจากหลังบ้าน */
.auth.has-bg{grid-template-columns:minmax(360px,1.15fr) minmax(380px,.85fr)}
.auth .panel.bg{background-size:cover;background-position:center;position:relative;isolation:isolate}
.auth .panel.bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 20%,transparent) 0%,color-mix(in srgb,var(--ink) 35%,transparent) 45%,color-mix(in srgb,var(--ink) 85%,transparent) 100%)}
.auth .panel.bg.plain::before{display:none}
.auth .panel.bg h2,.auth .panel.bg li{text-shadow:0 1px 3px rgba(0,0,0,.35)}
/* แถบประกาศสำหรับสมาชิก */
.notice{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--text);border-radius:var(--r-md);padding:11px 14px;margin-bottom:16px;font-size:14px;white-space:pre-line}
@media (max-width:960px){.auth.has-bg{grid-template-columns:1fr}.auth .panel.bg{min-height:220px}}

/* รูปหน้าแรก (ตั้งจากหลังบ้าน) */
.hero-img{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--ink-3);background:#0000001a}
.hero-img img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.hero.hero-bg{background-size:cover;background-position:center;position:relative;isolation:isolate}
.hero.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 88%,transparent) 0%,color-mix(in srgb,var(--ink) 60%,transparent) 55%,color-mix(in srgb,var(--ink) 25%,transparent) 100%)}
.hero.hero-bg h1,.hero.hero-bg p{text-shadow:0 1px 3px rgba(0,0,0,.35)}
.home-banner{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.home-banner img{display:block;width:100%;height:auto}

/* สองคอลัมน์ให้หน้าเต็มจอดูสมดุล (จอเล็ก → คอลัมน์เดียว) */
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}
.cols2 > .card,.cols2 > div > .card:last-child{margin-bottom:0}
.cols2 > div{display:flex;flex-direction:column;gap:18px}
.cols2 > div > .card{margin:0}
.pay-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.pay-info{background:#F7F8FA;border:1px solid var(--line-2);border-radius:var(--r-md);padding:16px 18px}
.pay-info .big{font-size:20px;font-weight:700;letter-spacing:.3px}
@media (max-width:1100px){.cols2,.pay-grid{grid-template-columns:1fr}}