/* ============================================================
   app.css — หน้าตาของ "ตัวเว็บแอพ" (ธีมรวมของทั้งเว็บ)
   ------------------------------------------------------------
   ครอบคลุม: แถบบน, หน้าคลังความรู้ (การ์ด/หมวด), หน้าแพ็กเกจ
   ไม่ครอบคลุมเนื้อหาหนังสือ — ส่วนนั้นอยู่ใน book.css

   ตัวแปรทั้งหมดวางไว้ที่ :root เพื่อให้ themeEditor.js สแกนเจอ
   และปรับสดได้จากหน้าเว็บ ธีมของเว็บที่ผู้ใช้บันทึกไว้ จะถูกเก็บ
   เป็น css ใน IndexedDB แล้ว EditorTheme ฉีดเป็น <style> ทับ :root อีกที
   ============================================================ */

:root{
  /* ---- โครงสีของเว็บแอพ ---- */
  --app-bg:            #1B2333;   /* พื้นหลังหน้าคลัง */
  --app-surface:       #F7F3E9;   /* การ์ด */
  --app-surface-deep:  #EFE8D6;
  --app-border:        #E4DAC2;
  --app-text:          #1B2333;   /* ตัวอักษรบนพื้นสว่าง */
  --app-text-soft:     #5C667C;
  --app-on-dark:       #F7F3E9;   /* ตัวอักษรบนพื้นเข้ม */
  --app-accent:        #C0904E;
  --app-accent-deep:   #9C6F35;

  /* ---- ตัวอักษร ---- */
  --app-font:          'Sarabun', system-ui, sans-serif;
  --app-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ---- รูปทรง ---- */
  --app-radius-s:      6px;
  --app-radius-m:      12px;
  --app-radius-l:      20px;
  --app-shadow-card:   0 1px 2px rgba(27,35,51,.06), 0 8px 24px -12px rgba(27,35,51,.28);
  --app-shadow-pop:    0 20px 60px -20px rgba(27,35,51,.45);

  /* ============================================================
     ตัวแปรชุดเดิม — ยังคงไว้เพราะ js บางตัวอ้างถึงโดยตรง
     (quizRender.js / resultCard.js / เนื้อหาที่เขียนสีไว้ในบท)
     ค่าเหล่านี้ผูกกับตัวแปรด้านบน เปลี่ยนที่เดียวเปลี่ยนตามกันหมด
     ============================================================ */
  --ink-900:  var(--app-text);
  --ink-800:  #232E44;
  --ink-700:  #3A4763;
  --ink-soft: var(--app-text-soft);
  --paper-0:  var(--app-surface);
  --paper-100:var(--app-surface-deep);
  --paper-200:var(--app-border);
  --kraft:     var(--app-accent);
  --kraft-deep:var(--app-accent-deep);

  /* สีประจำ 4 โหมดของแบบประเมิน — js อ้างถึงชื่อนี้ตรง ๆ ห้ามเปลี่ยนชื่อ */
  --rust:#B3472B;      --rust-soft:#E7C6BB;    /* โหมดผู้นำ */
  --amber:#C98A1F;     --amber-soft:#EAD6AC;   /* โหมดเปิดเผย */
  --teal:#3E7C74;      --teal-soft:#C7DAD6;    /* โหมดอ่อนไหว */
  --indigo:#3B4C7A;    --indigo-soft:#C8CEDF;  /* โหมดนักวิเคราะห์ */
  --ok:#3E7C55;
  --warn:#B3472B;

  --font-body:  var(--app-font);
  --font-mono:  var(--app-font-mono);
  --radius-s:   var(--app-radius-s);
  --radius-m:   var(--app-radius-m);
  --radius-l:   var(--app-radius-l);
  --shadow-card:var(--app-shadow-card);
  --shadow-pop: var(--app-shadow-pop);
  --toc-w:      296px;
}


/* ============================================================
   1. พื้นฐาน
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--app-font);
  background:var(--app-bg);
  color:var(--app-text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--kraft-deep);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}


.hidden{
  display:none;
}
/* ============================================================
   1. TOP BAR
   ============================================================ */
.top-bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  height:60px; padding:0 14px;
  background:var(--ink-900);
  color:var(--paper-0);
  border-bottom:1px solid rgba(247,243,233,.08);
}
.top-menu-btn{
  display:none;
  width:38px; height:38px; border-radius:var(--radius-s);
  background:transparent; border:1px solid rgba(247,243,233,.18);
  color:var(--paper-0); align-items:center; justify-content:center;
  cursor:pointer;
}
.top-menu-btn svg{width:18px;height:18px}
.top-back{
  display:flex; align-items:center; gap:6px;
  background:none;border:none;color:var(--paper-0);
  font-family:var(--font-body); font-size:14px; cursor:pointer;
  padding:6px 4px; opacity:.85;
}
.top-back svg{width:16px;height:16px}
.top-brand{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:none;border:none;color:inherit; padding:0;
}
.top-brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(155deg,var(--kraft),var(--kraft-deep));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--ink-900);
  flex-shrink:0;
}
.top-brand-name{font-weight:700; font-size:15px; letter-spacing:.01em}
.top-brand-name small{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; font-weight:500; color:var(--kraft); text-transform:uppercase; margin-top:1px}
.top-spacer{flex:1}
.top-book-title{
  font-size:13px; font-weight:600; color:var(--paper-0);
  max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  opacity:.8;
}
.top-member{
  display:flex; align-items:center; gap:6px;
  border:1px solid rgba(247,243,233,.22); background:rgba(247,243,233,.04);
  color:var(--paper-0); border-radius:999px; padding:6px 12px 6px 10px;
  font-size:12px; cursor:pointer; font-family:var(--font-mono); letter-spacing:.02em;
}
.top-member .dot{width:7px;height:7px;border-radius:50%; background:var(--warn)}
.top-member.is-on .dot{background:var(--ok)}
.top-member.is-on{border-color:rgba(62,124,85,.5); background:rgba(62,124,85,.12)}

/* ============================================================
   2. LIBRARY SCREEN
   ============================================================ */
.lib{background:var(--ink-900); min-height:calc(100vh - 60px); padding:44px 20px 90px}
.lib-hero{max-width:760px; margin:0 auto 52px; text-align:center; color:var(--paper-0)}
.lib-hero .eyebrow{color:var(--kraft); justify-content:center; display:flex; gap:8px; align-items:center; margin-bottom:14px}
.lib-hero .eyebrow::before,.lib-hero .eyebrow::after{content:"";width:22px;height:1px;background:var(--kraft);opacity:.6}
.lib-hero h1{
  font-size:clamp(28px,5vw,42px); line-height:1.25; margin:0 0 12px; font-weight:700;
  font-family:var(--font-body);
}
.lib-hero p{color:rgba(247,243,233,.62); font-size:15px; line-height:1.8; margin:0; max-width:520px; margin-inline:auto}

.lib-wrap{max-width:1040px; margin:0 auto}
.lib-series + .lib-series{margin-top:56px}
.lib-series-head{display:flex; align-items:baseline; gap:12px; margin-bottom:20px; color:var(--paper-0)}
.lib-series-head .eyebrow{color:var(--amber)}
.lib-series-head h2{font-size:19px; margin:0; font-weight:700}
.lib-series-head .rule{flex:1; height:1px; background:color-mix(in srgb, var(--app-on-dark) 14%, transparent)}
.lib-series-tagline{font-size:12px; color:color-mix(in srgb, var(--app-on-dark) 42%, transparent)}

.lib-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;
}
.lib-card{
  background:var(--paper-0); border-radius:var(--radius-m);
  overflow:hidden; cursor:pointer; border:1px solid rgba(0,0,0,.04);
  box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.lib-card:hover{transform:translateY(-4px); box-shadow:0 24px 48px -18px rgba(0,0,0,.5)}
.lib-card:disabled,.lib-card.is-soon{cursor:default}
.lib-card.is-soon:hover{transform:none; box-shadow:var(--shadow-card)}
.lib-cover{
  aspect-ratio:3/4; position:relative;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    linear-gradient(150deg,var(--ink-800),var(--ink-900));
  display:flex; flex-direction:column; justify-content:space-between; padding:16px;
  color:var(--paper-0);
}
.lib-cover::after{
  content:"";position:absolute; left:0; top:22px; bottom:22px; width:5px;
  background:var(--accent,var(--kraft)); border-radius:0 3px 3px 0;
}
.lib-cover .tag{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(247,243,233,.1); border:1px solid rgba(247,243,233,.2);
  padding:3px 8px; border-radius:999px; align-self:flex-start;
}
.lib-cover .tag.free{color:var(--ok); border-color:rgba(62,124,85,.5); background:rgba(62,124,85,.14)}
.lib-cover h3{font-size:16.5px; line-height:1.4; margin:0; font-weight:700}
.lib-cover .num{font-family:var(--font-mono); font-size:34px; opacity:.16; font-weight:700; position:absolute; right:14px; top:12px}
.lib-meta{padding:12px 14px 14px}
.lib-meta .name{font-size:13px; font-weight:700; color:var(--ink-900); margin:0 0 2px}
.lib-meta .sub{font-size:11.5px; color:var(--ink-soft); margin:0}
.lib-soon-badge{
  position:absolute; inset:0; background:rgba(27,35,51,.72);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  backdrop-filter:blur(1.5px);
}
.lib-soon-badge span{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--paper-0); border:1px solid rgba(247,243,233,.35); padding:5px 12px; border-radius:999px}

/* ============================================================
   8. SUBSCRIPTION / PRICING PAGE (subscribe.html)
   ============================================================ */
.pricing-page{background:var(--paper-100); min-height:calc(100vh - 60px); padding:0 0 90px}

.pricing-hero{
  background:var(--ink-900); color:var(--paper-0); text-align:center;
  padding:56px 20px 84px;
}
.pricing-hero .eyebrow{color:var(--kraft); justify-content:center; display:flex; gap:8px; align-items:center; margin-bottom:16px}
.pricing-hero .eyebrow::before,.pricing-hero .eyebrow::after{content:"";width:22px;height:1px;background:var(--kraft);opacity:.6}
.pricing-hero h1{font-size:clamp(26px,4.6vw,38px); line-height:1.35; margin:0 0 14px; font-weight:700; max-width:640px; margin-inline:auto}
.pricing-hero p{color:rgba(247,243,233,.62); font-size:15px; line-height:1.8; margin:0; max-width:480px; margin-inline:auto}

.pricing-wrap{max-width:920px; margin:-52px auto 0; padding:0 20px; position:relative; z-index:2}

.pricing-plans{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;
}
.pricing-connector{
  display:flex; align-items:center; justify-content:center; padding:0 6px;
}
.pricing-connector .plus{
  width:40px; height:40px; border-radius:50%; background:var(--kraft); color:var(--ink-900);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700;
  box-shadow:var(--shadow-card); flex-shrink:0;
}

.pricing-card{
  background:var(--paper-0); border-radius:var(--radius-l); padding:30px 26px;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.pricing-card--addon{background:var(--ink-900); color:var(--paper-0); box-shadow:var(--shadow-pop); position:relative}
.pricing-ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--kraft); color:var(--ink-900); font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:5px 14px; border-radius:999px;
  box-shadow:var(--shadow-card); white-space:nowrap;
}

.pricing-step{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--kraft-deep); margin-bottom:10px}
.pricing-card--addon .pricing-step{color:var(--kraft)}
.pricing-name{font-size:19px; font-weight:700; margin:0 0 6px; color:var(--ink-900)}
.pricing-card--addon .pricing-name{color:var(--paper-0)}
.pricing-desc{font-size:13px; color:var(--ink-soft); line-height:1.7; margin:0 0 20px}
.pricing-card--addon .pricing-desc{color:rgba(247,243,233,.65)}

.pricing-toggle{
  display:inline-flex; background:rgba(247,243,233,.08); border:1px solid rgba(247,243,233,.18);
  border-radius:999px; padding:4px; gap:4px; margin-bottom:18px; align-self:flex-start;
}
.pricing-toggle button{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px;
  border:none; background:transparent; color:rgba(247,243,233,.55); cursor:pointer;
}
.pricing-toggle button.is-active{background:var(--kraft); color:var(--ink-900)}

.pricing-price{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.pricing-price .num{font-size:38px; font-weight:800; color:var(--ink-900)}
.pricing-card--addon .pricing-price .num{color:var(--paper-0)}
.pricing-price .unit{font-size:13.5px; color:var(--ink-soft)}
.pricing-card--addon .pricing-price .unit{color:rgba(247,243,233,.55)}
.pricing-save{
  display:inline-flex; align-self:flex-start; font-family:var(--font-mono); font-size:10.5px;
  color:var(--ok); background:rgba(62,124,85,.12); border:1px solid rgba(62,124,85,.35);
  padding:3px 9px; border-radius:999px; margin-bottom:18px;
}
.pricing-price-note{font-size:12px; color:var(--ink-soft); margin:0 0 20px}
.pricing-card--addon .pricing-price-note{color:rgba(247,243,233,.5)}

.pricing-features{list-style:none; margin:0 0 24px; padding:0; flex:1}
.pricing-features li{
  position:relative; padding-left:26px; margin-bottom:11px; font-size:13.5px; line-height:1.6; color:var(--ink-800);
}
.pricing-card--addon .pricing-features li{color:rgba(247,243,233,.85)}
.pricing-features li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--kraft-deep); font-weight:700;
}
.pricing-card--addon .pricing-features li::before{color:var(--kraft)}
.pricing-features li.is-muted{color:var(--ink-soft); opacity:.7}
.pricing-card--addon .pricing-features li.is-muted{color:rgba(247,243,233,.4)}

.pricing-requirement{
  display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.6;
  color:rgba(247,243,233,.6); background:rgba(247,243,233,.05); border:1px solid rgba(247,243,233,.14);
  border-radius:var(--radius-m); padding:11px 13px; margin-bottom:18px;
}
.pricing-requirement svg{width:14px; height:14px; flex-shrink:0; margin-top:2px; color:var(--kraft)}

.pricing-cta{
  font-family:var(--font-body); font-size:14.5px; font-weight:700; border-radius:999px; cursor:pointer;
  padding:14px 20px; border:none; width:100%; text-align:center;
}
.pricing-cta--primary{background:var(--ink-900); color:var(--paper-0)}
.pricing-cta--kraft{background:var(--kraft); color:var(--ink-900)}
/* สิ่งที่ผู้ใช้มีสิทธิ์อยู่แล้ว โชว์เป็นป้าย ไม่ใช่ปุ่ม จะได้ไม่มีอะไรให้กด */
.pricing-cta--owned{
  background:rgba(78,217,164,.14); color:#4ED9A4;
  border:1px solid rgba(78,217,164,.35); cursor:default;
}
.pricing-cta:disabled{background:rgba(247,243,233,.1); color:rgba(247,243,233,.4); cursor:not-allowed}
.pricing-cta-note{text-align:center; font-size:11px; color:rgba(247,243,233,.4); margin-top:10px}

.pricing-devtoggle{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:28px auto 0; max-width:920px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
}
.pricing-devtoggle button{
  border:1px solid var(--paper-200); background:var(--paper-0); color:var(--ink-800); border-radius:999px;
  padding:6px 14px; cursor:pointer; font-family:inherit; font-size:11px;
}
.pricing-devtoggle button.is-on{background:var(--ok); border-color:var(--ok); color:#fff}

.pricing-trust{
  max-width:920px; margin:44px auto 0; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.pricing-trust-item{
  background:var(--paper-0); border:1px solid var(--paper-200); border-radius:var(--radius-m);
  padding:16px; text-align:center; font-size:12.5px; color:var(--ink-soft); line-height:1.6;
}
.pricing-trust-item b{display:block; color:var(--ink-900); font-size:13.5px; margin-bottom:3px}

.pricing-faq{max-width:720px; margin:56px auto 0; padding:0 20px}
.pricing-faq h2{font-size:20px; text-align:center; margin:0 0 22px; color:var(--ink-900); font-weight:700}
.pricing-faq-item{border-bottom:1px solid var(--paper-200)}
.pricing-faq-item button{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:none; border:none; padding:16px 4px; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--ink-900);
}
.pricing-faq-item .chev{transition:transform .2s ease; flex-shrink:0; color:var(--kraft-deep)}
.pricing-faq-item.is-open .chev{transform:rotate(45deg)}
.pricing-faq-item .ans{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  font-size:13.5px; color:var(--ink-soft); line-height:1.75;
}
.pricing-faq-item.is-open .ans{max-height:220px; padding-bottom:16px}

@media (max-width:760px){
  .pricing-plans{grid-template-columns:1fr; gap:16px}
  .pricing-connector{padding:0; margin:-4px 0}
  .pricing-connector .plus{margin:0 auto}
  .pricing-wrap{margin-top:-40px}
}
@media (max-width:480px){
  .pricing-trust{grid-template-columns:1fr}
  .pricing-hero{padding:44px 16px 76px}
}

/* ============================================================
   RESPONSIVE — เฉพาะส่วนของเว็บแอพ
   ============================================================ */
@media (max-width:860px){
  .top-menu-btn{display:flex}
  .top-book-title{display:none}
  .lib{padding:30px 14px 70px}
  .lib-hero{margin-bottom:36px}
}
@media (max-width:480px){
  .lib-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   ส่วนที่ใช้เฉพาะเว็บฝั่ง server (php)
   ------------------------------------------------------------
   หน้าเข้าสู่ระบบ / บัญชีของฉัน / แอดมิน / ท้ายหน้า
   ============================================================ */

.site-foot{
  display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap;
  padding:26px 20px 34px;
  background:var(--app-bg);
  color:color-mix(in srgb, var(--app-on-dark) 45%, transparent);
  font-size:12.5px;
}
.site-foot a{color:color-mix(in srgb, var(--app-on-dark) 70%, transparent); text-decoration:none}
.site-foot a:hover{color:var(--app-accent)}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-form{margin:26px auto 10px; max-width:340px}
.login-form .lock-btn{width:100%}

/* ---------- หน้าบัญชีของฉัน / แอดมิน ---------- */
.account-wrap{color:var(--app-on-dark)}
.account-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.account-actions .btn-ghost{
  background:transparent;
  color:var(--app-on-dark);
  border-color:color-mix(in srgb, var(--app-on-dark) 24%, transparent);
}
.account-actions .btn-ghost:hover{border-color:var(--app-accent); color:var(--app-accent)}
.account-empty{
  font-size:13.5px; line-height:1.9;
  color:color-mix(in srgb, var(--app-on-dark) 60%, transparent);
}
.account-empty a{color:var(--app-accent)}

.account-table{
  width:100%; border-collapse:collapse; margin-top:6px;
  background:var(--app-surface); color:var(--app-text);
  border-radius:var(--app-radius-m); overflow:hidden;
  font-size:13.5px;
}
.account-table th,
.account-table td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--app-border)}
.account-table th{
  font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--app-text-soft); font-weight:700;
}
.account-table tr:last-child td{border-bottom:0}

/* ---------- ปุ่มเลือกแพ็กเกจในการ์ดปลดล็อก ---------- */
.lock-plan-form{margin:0}
button.lock-plan{
  display:flex; flex-direction:column; gap:2px;
  font-family:inherit; cursor:pointer; text-align:center;
  color:var(--book-invert-text, #F7F3E9);
}
button.lock-plan:hover{border-color:var(--book-accent)}

/* ============================================================
   แถบสลับมุมมอง (js/previewMode.js)
   ------------------------------------------------------------
   ใช้เฉพาะตอนทำงานออฟไลน์ที่ index.html / book.html
   ไม่ได้ขึ้น server เพราะบนเว็บจริงใช้สิทธิ์แอดมินตัดสินแทน
   ============================================================ */
.preview-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  font-size:12.5px; font-weight:600;
}
.preview-bar .pv-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.preview-bar .pv-text{flex:1; min-width:0}
.preview-bar .pv-btn{
  font-family:inherit; font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:999px; cursor:pointer; flex-shrink:0;
  background:transparent; border:1px solid currentColor; color:inherit;
}
.preview-bar .pv-btn:hover{background:rgba(255,255,255,.14)}

/* มุมเจ้าของ = สีน้ำตาลเตือน เพราะเห็นไม่เหมือนของจริง */
.preview-bar.is-owner{
  background:#7A3E12; color:#FFE9CF;
  border-bottom:1px solid rgba(255,233,207,.25);
}
.preview-bar.is-owner .pv-dot{background:#FFB454; box-shadow:0 0 0 3px rgba(255,180,84,.25)}

/* มุมผู้อ่าน = สีเขียว เพราะตรงกับของจริงแล้ว */
.preview-bar.is-reader{
  background:#12513A; color:#D8F3E5;
  border-bottom:1px solid rgba(216,243,229,.25);
}
.preview-bar.is-reader .pv-dot{background:#4ED9A4; box-shadow:0 0 0 3px rgba(78,217,164,.25)}

@media (max-width:600px){
  .preview-bar{font-size:11.5px; padding:7px 12px; gap:8px}
}

/* ป้ายบนการ์ดหน้าคลัง บอกว่าเล่มนี้ยังไม่เปิดให้อ่าน (เห็นเฉพาะมุมเจ้าของ) */
.lib-admin-note{
  position:absolute; left:12px; bottom:12px; z-index:3;
  padding:3px 9px; border-radius:999px;
  background:#7A3E12; color:#FFE9CF;
  font-size:10.5px; font-weight:800;
}
/* การ์ด SOON ที่เปิดเข้าไปได้ในมุมเจ้าของ ต้องดูกดได้ ไม่ใช่กล่องตาย */
.lib-card.is-soon-open{cursor:pointer}
.lib-card.is-soon-open:hover{transform:translateY(-2px)}

/* ============================================================
   แถบเตือนโหมดตรวจงานของแอดมิน (ฝั่ง server เท่านั้น)
   ------------------------------------------------------------
   ขึ้นเฉพาะตอนที่ Repo อยู่ในโหมดพรีวิว คือผู้ใช้เป็นแอดมิน
   ต้องเห็นชัดจนไม่มีทางลืม เพราะในโหมดนี้สิ่งที่เห็น
   ไม่เหมือนสิ่งที่คนทั่วไปเห็น
   ============================================================ */
.admin-preview-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:#7A3E12; color:#FFE9CF;
  font-size:12.5px; font-weight:600;
  border-bottom:1px solid rgba(255,233,207,.25);
}
.admin-preview-bar .apb-dot{
  width:8px; height:8px; border-radius:50%; background:#FFB454; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,180,84,.25);
}
.admin-preview-bar .apb-text{flex:1; min-width:0}
.admin-preview-bar .apb-link{color:#FFE9CF; text-decoration:underline; flex-shrink:0; font-weight:700}

@media (max-width:600px){
  .admin-preview-bar{font-size:11.5px; padding:7px 12px; gap:8px}
  .admin-preview-bar .apb-link{display:none}
}

/* การ์ด SOON ที่แอดมินกดเข้าไปได้ */
.lib-card.is-soon-admin{cursor:pointer}
.lib-card.is-soon-admin:hover{transform:translateY(-2px)}

/* ============================================================
   หน้าตรวจการเชื่อมกับ Stripe (admin/stripe-check.php)
   ============================================================ */
.stripe-ok{color:#1E7A4C; font-weight:700; margin:0 0 18px}
.stripe-bad{color:#A03028; font-weight:700; margin:0 0 18px}

.stripe-table{display:flex; flex-direction:column; gap:12px}

.stripe-row{
  padding:14px 16px; border-radius:12px;
  background:var(--paper-0); border:1px solid var(--paper-300);
  border-left:4px solid var(--paper-300);
}
.stripe-row.is-ok{border-left-color:#1E7A4C}
.stripe-row.is-bad{border-left-color:#A03028; background:#FDF4F2}

.sr-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
.sr-code{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:var(--ink-900); color:var(--paper-0);
}
.sr-name{font-size:14px; font-weight:700}
.sr-tag{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:#EEE; color:#666;
}

.sr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-bottom:10px}
.sr-label{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-500,#6B7280); margin-bottom:3px;
}
.sr-val{font-size:12.5px; line-height:1.7}

.sr-ids{display:flex; gap:9px; flex-wrap:wrap}
.sr-ids code{
  font-family:var(--font-mono); font-size:11px;
  padding:3px 8px; border-radius:6px;
  background:var(--paper-100); color:var(--ink-700);
}

.sr-problems{
  margin:10px 0 0; padding:10px 12px 10px 28px; border-radius:8px;
  background:#F8E3DF; color:#8A2B22; font-size:12.5px; line-height:1.75;
}

.sr-help{
  margin-top:20px; font-size:12.5px; line-height:1.8;
  color:var(--ink-500,#6B7280);
}
.sr-help code{
  font-family:var(--font-mono); font-size:11.5px;
  padding:2px 6px; border-radius:5px; background:var(--paper-100);
}