/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — SCDocX design system v3 "Studio" (โหลดหลัง app.css · ทับเฉพาะหน้าตา ไม่แตะตรรกะ)
   แรงบันดาลใจ: เว็บ AI/SaaS ยุคใหม่ (AgentLab) — ขาว/ดำสะอาด · เส้นประนำสายตา · หัวเรื่อง serif น้ำหนักเบา
   · ป้ายกำกับตัวเล็ก + สี่เหลี่ยมน้ำเงิน · ปุ่มดำเหลี่ยมมน · การ์ดเส้นบางไร้เงาหนัก · แถบดำสลับขาว · สำเนียงน้ำเงินไฟฟ้า
   หลัก: ทับ token + คอมโพเนนต์กลาง (.btn .card .input .pill .header .gbtn footer …) เพื่อให้ทุกหน้าเปลี่ยนพร้อมกัน
   สีเชิงความหมาย (สำเร็จ/เตือน/Pro ทอง) คงไว้ — ไม่ใช่สีแบรนด์
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Tokens ─────────────────────────────────────────────────────────── */
:root{
  --ink:#0b0b0d; --ink2:#2b2b31; --muted:#6b6f7b;
  --cream:#ffffff; --cream2:#f6f7f9; --white:#ffffff;
  --line:#e6e7eb; --lineSoft:#f0f1f4; --dash:#d5d8df;
  --accent:#2f5bff; --accent-2:#6d8dff; --accent-soft:#eef2ff; --accent-ink:#1b3fd6;
  --coral:#2f5bff;             /* สำเนียงเดิม (โลโก้ "Doc" / ตัวนับ) → น้ำเงินไฟฟ้า */
  --lime:#e6ecff;              /* พื้นหลังไฮไลต์เดิม → ฟ้าอ่อน (ตัวหนังสือดำยังอ่านชัด) */
  --violet:#5b6bff; --sky:#5aa9ff; --amber:#f2b632; --rose:#ff7d9a; --mint:#4fd1a5;
  --gold:#b3830f;              /* Pro / พรีเมียม (semantic) */
  --serif:"Merriweather","Trirong","Noto Serif Thai",Georgia,serif;
  --sans:"Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(11,11,13,.04);
  --shadow-2:0 8px 24px rgba(11,11,13,.08);
}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);}
:lang(th){font-family:"Noto Sans Thai","Inter",system-ui,sans-serif;}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;}
img{border-radius:0;}

/* ── 2) เส้นประนำสายตา (blueprint rails) — ซ้าย/ขวาของคอนเทนเนอร์ 1400 · เฉพาะจอกว้าง ── */
@media (min-width:1240px){
  body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:0;border-left:1px dashed var(--dash);pointer-events:none;z-index:0;}
  body::before{left:calc((100vw - 1400px) / 2);}
  body::after{right:calc((100vw - 1400px) / 2);}
  body.no-rails::before,body.no-rails::after{display:none;}
}

/* ── 3) Typography ─────────────────────────────────────────────────────── */
.serif,h1.serif,h2.serif,h3.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;}
h1.serif{font-weight:300;}
:lang(th) h1.serif,:lang(th) h2.serif{letter-spacing:0;}
.hero-title,.sec-head h2,.how h2,.how-step h3,.review-fig blockquote,.hero-stat-n,.marquee-track span,.cat-ico{font-family:var(--serif);font-weight:300;}
.eyebrow,.label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:12px;height:8px;background:var(--accent);border-radius:1px;flex:0 0 12px;}
.label{color:var(--muted);letter-spacing:.1em;}
.muted{color:var(--muted);}
.mono{font-family:var(--mono);}
/* หัวเรื่องสองโทน (คำหลักดำ ส่วนขยายเทา) — ใช้ <span class="dim"> */
.dim{color:#8a8e99;font-weight:inherit;}

/* ── 4) Buttons ────────────────────────────────────────────────────────── */
.btn,a.btn,button.btn{border-radius:var(--r-sm);font-weight:600;font-size:13.5px;letter-spacing:.005em;padding:11px 18px;line-height:1.2;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;}
.btn:hover{opacity:1;}
.btn-primary,a.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.btn-primary:hover{background:#1f1f24;}
.btn-accent,a.btn-accent{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.btn-accent:hover{background:var(--accent-ink);}
.btn-coral,a.btn-coral{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.btn-ghost,a.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn:focus-visible,.gbtn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chip{border-radius:var(--r-sm);font-weight:500;}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.pill{border-radius:999px;border:1px solid var(--line);font-weight:600;background:#fff;}
.hero-search{border-radius:var(--r);box-shadow:none;}
.hero-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft);}

/* ── 5) Cards / surfaces / inputs ──────────────────────────────────────── */
.card{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:none;}
.cat-card,.prod-card{border-radius:var(--r-lg);border:1px solid var(--line);}
.cat-card:hover,.prod-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#c9ccd4;}
.prod-heart{border-radius:8px;}
.input,.select,.textarea{border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.notice{border-radius:var(--r);}
.table-scroll{border-radius:var(--r);}
::-webkit-scrollbar-thumb{background:#c9ccd4;border-color:#fff;}
/* แถบดำสลับขาว (utility) — ใช้กับ section ที่ต้องการน้ำหนัก */
.sec-dark,.how{background:#0a0a0c;color:#f4f4f6;}
.sec-dark .card{background:#131316;border-color:#26262b;color:#f4f4f6;box-shadow:none;}
.sec-dark .muted,.how p{color:#a3a7b3;}
.sec-dark .btn-primary{background:#fff;color:var(--ink);border-color:#fff;}
.sec-dark .btn-ghost{background:transparent;color:#fff;border-color:#3a3a42;}
.sec-dark .eyebrow{color:#fff;}
.sec-dark .label{color:#8b8f9a;}
.how-step{border-top-color:#2a2a30;}
/* ไทล์ไล่สีน้ำเงิน (ภาพประกอบแบบไม่ใช้รูป) */
.tile-blue{background:linear-gradient(135deg,#1436d9 0%,#3d6bff 48%,#8fb0ff 100%);color:#fff;position:relative;overflow:hidden;}
.tile-blue::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.2px);background-size:9px 9px;opacity:.35;mix-blend-mode:overlay;pointer-events:none;}
.tile-ink{background:#0a0a0c;color:#fff;}
.marquee{background:#0a0a0c;border-color:#1f1f24;}
.marquee-track span{color:#e8e9ee;font-weight:300;}
.hl::after{background:var(--accent-soft);}
.hero-sticker{background:var(--accent);box-shadow:0 12px 32px rgba(47,91,255,.35);}
.review-fig{border:1px solid var(--line);border-radius:var(--r-lg);}
.cat-ico{border-radius:var(--r-sm);}

/* ── 6) Header (sticky) — บาง สะอาด ลิงก์แบน ปุ่มดำ ── */
.header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);}
.header-inner{padding:10px 24px !important;gap:14px !important;}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand-mark{display:grid;grid-template-columns:repeat(3,6px);gap:2.5px;width:23px;height:23px;flex:0 0 23px;}
.brand-mark i{display:block;width:6px;height:6px;background:var(--ink);border-radius:1px;}
.brand-mark i:nth-child(1),.brand-mark i:nth-child(5),.brand-mark i:nth-child(9){background:var(--accent);}
.brand-word{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;font-weight:400;line-height:1;}
.brand-word b{font-weight:400;color:var(--accent);}
.gbtn{background:transparent !important;border:1px solid transparent !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-radius:var(--r-sm) !important;padding:8px 11px !important;font-size:13px !important;font-weight:600 !important;color:var(--ink2) !important;
  transition:background .15s ease,color .15s ease !important;}
.gbtn::before{display:none !important;animation:none !important;}
.gbtn:hover{transform:none !important;background:var(--cream2) !important;color:var(--ink) !important;box-shadow:none !important;}
.gbtn:active{transform:none !important;}
.gbtn .gi svg{width:16px;height:16px;stroke-width:1.8;}
.gbtn-hot{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;}
.gbtn-hot:hover{background:#1f1f24 !important;color:#fff !important;}
.gbtn-ink{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;}
.gbtn-ink:hover{background:var(--accent-ink) !important;color:#fff !important;}
.gbtn .badge-new{position:absolute;top:-7px;right:-6px;background:var(--accent);color:#fff;font-size:8.5px;font-weight:800;border-radius:4px;padding:2px 6px;letter-spacing:.06em;}
.nav-link{font-size:13px;font-weight:600;color:var(--ink2);}
.nav-link:hover{color:var(--ink);}
.hdr-search{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);}
.hdr-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft);}
.hdr-search input{flex:1;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--ink);min-width:0;}
.hdr-select{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2);}
.hdr-ico{position:relative;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:border-color .15s;}
.hdr-ico:hover{border-color:var(--ink);}
.hdr-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:#fff;border-radius:999px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;}
.hdr-wallet{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:8px 12px;text-decoration:none;}
.hdr-wallet:hover{background:#1f1f24;}
.hdr-cta{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;}
.hdr-cta:hover{background:#1f1f24;}
/* แถบประกาศบางบนสุด (สีดำ ตัวเล็ก) */
.announce{background:#0a0a0c;color:#e8e9ee;font-size:12px;text-align:center;padding:7px 14px;letter-spacing:.01em;}
.announce a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);}
.announce a:hover{border-bottom-color:#fff;}
.dpdgo-msearch{background:#fff;}
.dpdgo-msearch input{border-radius:var(--r-sm) !important;}
.scx-live{border-radius:var(--r) !important;box-shadow:var(--shadow-2) !important;}
.scx-live .scx-mono{border-radius:var(--r-sm) !important;}
.scx-live .scx-foot{background:var(--cream2) !important;}
#mbellDrop{border-radius:var(--r) !important;box-shadow:var(--shadow-2) !important;}

/* ── 7) Footer — แถบดำ + ตัวอักษรใหญ่โปร่ง (ลายเซ็นท้ายหน้า) ── */
footer{background:#0a0a0c !important;color:#f4f4f6;border-top:0 !important;position:relative;overflow:hidden;}
footer .label{color:#8b8f9a !important;}
footer a{color:#c9ccd6 !important;transition:color .15s;}
footer a:hover{color:#fff !important;}
footer p{color:#a3a7b3 !important;}
footer .mono{color:#7c8090 !important;}
footer .wrap > div:last-child{border-top-color:#26262b !important;}
footer .wrap::after{content:"SCDocX";display:block;font-family:var(--serif);font-weight:300;font-size:clamp(72px,17vw,220px);line-height:.9;letter-spacing:-.02em;text-align:center;
  color:transparent;-webkit-text-stroke:1px #33333b;margin:44px 0 -18px;pointer-events:none;user-select:none;}
footer .brand-mark i{background:#fff;} footer .brand-mark i:nth-child(1),footer .brand-mark i:nth-child(5),footer .brand-mark i:nth-child(9){background:var(--accent-2);}
footer .brand-word{color:#fff;}

/* ── 8) Dashboard/แอดมิน — ให้เข้าชุด ── */
body.dash .card{border-radius:var(--r-lg);border-color:var(--line);box-shadow:none;}
body.dash .dash-tab{border-radius:var(--r-sm);}
body.dash .dash-num{font-family:var(--serif);font-weight:300;}

/* ── 9) Motion — เบา ๆ ตอนโหลด (เคารพ reduced-motion) ── */
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both;}
.rise-2{animation-delay:.08s;} .rise-3{animation-delay:.16s;} .rise-4{animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;}}

/* ── 10) Mobile hardening ── */
@media (max-width:640px){
  .brand-word{font-size:19px;}
  .btn,a.btn{min-height:42px;}
  footer .wrap::after{margin:28px 0 -10px;}
}