/* ---------- โทนสี: ออกแบบสำหรับ dark mode เป็นหลัก ---------- */
:root {
  --bg:#0b0d10; --bg-grid:#12151a;
  --panel:#12161b; --panel-2:#161b21; --inset:#0e1216;
  --line:#222932; --line-soft:#1a2027;
  --fg:#e6ebf2; --fg-dim:#9aa6b5; --fg-faint:#6b7887;
  --accent:#37d39f; --accent-dim:#1f7c60; --accent-glow:rgba(55,211,159,.14);
  --lock:#e0b155; --err:#ff6b6b; --ok:#37d39f;
  --on-accent:#04231a; --on-lock:#1a1206;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --sans:'IBM Plex Sans','Noto Sans Thai',-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f4f5f7; --bg-grid:#e9ebee;
    --panel:#ffffff; --panel-2:#fafbfc; --inset:#f2f4f6;
    --line:#dde1e6; --line-soft:#e8ebef;
    --fg:#141820; --fg-dim:#5a6472; --fg-faint:#8a94a3;
    --accent:#0f9d76; --accent-dim:#a9e6d2; --accent-glow:rgba(15,157,118,.1);
    --lock:#a9750d; --err:#c53030;
    --on-accent:#ffffff; --on-lock:#ffffff;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; padding:0 20px 64px; background:var(--bg); color:var(--fg);
  font:15.5px/1.65 var(--sans);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size:52px 52px;
  background-attachment:fixed;
}
main { max-width:860px; margin:0 auto; }

/* ---------- แถบบน ---------- */
.bar {
  display:flex; align-items:center; gap:12px;
  padding:20px 0 18px; border-bottom:1px solid var(--line);
}
.mark { font:600 12.5px/1 var(--mono); letter-spacing:.16em; color:var(--fg-dim); text-transform:uppercase; }
.mark .dot { color:var(--accent); }
.bar .grow { flex:1; }
#langBtn {
  padding:6px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel); color:var(--fg-dim);
  font:500 12px/1.3 var(--mono); letter-spacing:.06em; cursor:pointer; transition:.15s;
}
#langBtn:hover { color:var(--accent); border-color:var(--accent-dim); }

/* ---------- หัวเรื่อง ---------- */
.hero { padding:44px 0 30px; }
.kicker {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font:500 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.kicker::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-glow);
}
h1 { margin:0; font:600 clamp(30px,5.4vw,44px)/1.15 var(--sans); letter-spacing:-.02em; }
.tagline { margin:12px 0 0; max-width:56ch; color:var(--fg-dim); font-size:15.5px; }

/* ---------- แผงหลัก ---------- */
.panel { border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.panel-head {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); background:var(--panel-2);
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.panel-head .led { width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75; }
.panel-body { padding:14px; }

#drop {
  position:relative; padding:52px 20px; text-align:center; cursor:pointer;
  border:1px dashed var(--line); border-radius:10px; background:var(--inset);
  transition:border-color .15s, background .15s;
}
#drop::before, #drop::after {
  content:''; position:absolute; width:12px; height:12px;
  border:1px solid var(--accent); opacity:.45; transition:opacity .15s;
}
#drop::before { top:8px; left:8px; border-right:0; border-bottom:0; }
#drop::after { bottom:8px; right:8px; border-left:0; border-top:0; }
#drop:hover, #drop.over { border-color:var(--accent-dim); background:var(--panel-2); }
#drop:hover::before, #drop:hover::after, #drop.over::before, #drop.over::after { opacity:1; }
#drop svg { display:block; margin:0 auto 12px; color:var(--accent); }
.cta { font-weight:500; font-size:16px; }
.cta-sub { margin-top:4px; font:400 12.5px/1.5 var(--mono); color:var(--fg-faint); }

.controls { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
input[type=password] {
  flex:1; min-width:220px; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--inset); color:var(--fg); font:14px/1.5 var(--mono);
}
input[type=password]::placeholder { color:var(--fg-faint); font-family:var(--sans); }
input[type=password]:focus { outline:none; border-color:var(--accent-dim); box-shadow:0 0 0 3px var(--accent-glow); }
button {
  padding:10px 15px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-2); color:var(--fg); font:500 13.5px/1.4 var(--sans); cursor:pointer; transition:.15s;
}
button:hover:not(:disabled) { border-color:var(--accent-dim); color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
button.primary:hover:not(:disabled) { filter:brightness(1.08); color:var(--on-accent); }
button:disabled { opacity:.4; cursor:default; }

/* ---------- รายการไฟล์ ---------- */
ul#list { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:6px; }
ul#list:empty { margin:0; }
#list li {
  display:flex; align-items:center; gap:12px; padding:9px 10px;
  border:1px solid var(--line-soft); border-radius:9px; background:var(--panel-2);
}
#list img { width:46px; height:46px; object-fit:cover; border-radius:6px; background:var(--inset); flex:none; }
.info { flex:1; min-width:0; }
.name { font:500 13.5px/1.45 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status { font:400 12.5px/1.5 var(--sans); color:var(--fg-faint); }
.status.ok { color:var(--ok); } .status.err { color:var(--err); } .status.warn { color:var(--lock); }
#list button { padding:7px 12px; font-size:12.5px; }

/* ---------- เนื้อหาอธิบาย ---------- */
.prose { margin-top:40px; }
.prose section { padding:24px 0; border-top:1px solid var(--line-soft); }
.prose section:first-child { border-top:0; padding-top:0; }
.prose h2 {
  margin:0 0 8px; font:600 16.5px/1.4 var(--sans); letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:10px;
}
.prose h2::before {
  content:attr(data-num); flex:none;
  font:500 11.5px/1 var(--mono); letter-spacing:.1em; color:var(--accent);
}
.prose p { margin:0; color:var(--fg-dim); max-width:66ch; }
.prose p b { color:var(--fg); font-weight:600; }
.prose ol { margin:0; padding-left:0; list-style:none; counter-reset:step; max-width:66ch; }
.prose ol li { counter-increment:step; position:relative; padding-left:28px; margin-bottom:7px; color:var(--fg-dim); }
.prose ol li::before {
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:1px;
  font:500 11.5px/1.7 var(--mono); color:var(--fg-faint);
}
.callout {
  border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:8px;
  padding:14px 16px; background:var(--panel); color:var(--fg-dim); font-size:14.5px;
}
.callout b { color:var(--fg); }
#promoSection .callout { border-left-color:var(--lock); }
#promoSection h2 { margin-bottom:6px; }
#promoSection h2::before { color:var(--lock); }
.promo-btn {
  display:inline-block; margin-top:12px; padding:9px 16px; border-radius:8px;
  border:1px solid var(--lock); color:var(--lock); text-decoration:none;
  font:600 13.5px/1.4 var(--sans); transition:.15s;
}
.promo-btn:hover { background:var(--lock); color:var(--on-lock); }
.disclosure { display:block; margin-top:10px; font:400 12px/1.5 var(--mono); color:var(--fg-faint); }
footer {
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
  font:400 11.5px/1.6 var(--mono); letter-spacing:.06em; color:var(--fg-faint); text-align:center;
}

/* ---------- หน้าต่าง preview ---------- */
.overlay { position:fixed; inset:0; background:rgba(4,6,9,.82); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:10; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:12px;
  width:min(960px,100%); max-height:100%; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55); }
.modal header {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--line-soft); background:var(--panel-2);
}
.modal header .spacer { flex:1; }
.mtitle { font:500 13px/1.4 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%; }
.modal header button { padding:6px 12px; font-size:12.5px; }
.stage { flex:1; min-height:220px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--inset); touch-action:none; }
.stage img { max-width:100%; max-height:70vh; transform-origin:center; will-change:transform; user-select:none; }
.stage video { max-width:100%; max-height:70vh; background:#000; }
.stage audio { width:min(560px,90%); }
.fallback { color:var(--fg-faint); font-size:13.5px; text-align:center; padding:40px 24px; margin:0; max-width:46ch; }
.minfo { padding:8px 12px; border-top:1px solid var(--line-soft);
  font:400 11.5px/1.5 var(--mono); color:var(--fg-faint); }

@media (max-width:560px) {
  .hero { padding:32px 0 24px; }
  #drop { padding:38px 16px; }
  .controls input[type=password] { min-width:100%; }
}

/* ---------- ลิงก์ ---------- */
a.mark { text-decoration:none; }
a.mark:hover { color:var(--accent); }
.back-link, .foot-link {
  color:var(--fg-dim); text-decoration:none;
  font:500 13.5px/1.5 var(--mono); transition:.15s;
}
.back-link:hover, .foot-link:hover { color:var(--accent); }
.foot-nav { margin-top:26px; text-align:center; }
.foot-nav .sep { color:var(--line); margin:0 10px; }

/* ---------- บรรทัดคำอธิบายเพิ่มใต้หัวเรื่อง ---------- */
.alias {
  margin:10px 0 0; max-width:60ch;
  font:400 12.5px/1.6 var(--mono); color:var(--fg-faint);
}

/* ---------- คำถามที่พบบ่อย ---------- */
details.faq { border-bottom:1px solid var(--line-soft); }
details.faq:last-child { border-bottom:0; }
details.faq summary {
  cursor:pointer; padding:11px 0; list-style:none;
  font:500 14.5px/1.5 var(--sans); color:var(--fg);
  display:flex; align-items:baseline; gap:9px;
}
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::before {
  content:'+'; flex:none; width:12px;
  font:500 15px/1.4 var(--mono); color:var(--accent);
}
details.faq[open] summary::before { content:'−'; }
details.faq summary:hover { color:var(--accent); }
details.faq p {
  margin:0 0 14px; padding-left:21px;
  font-size:14px; color:var(--fg-dim); max-width:64ch;
}