/* ──────────────────────────────────────────────────────────────
   Class4-RO — ธีมหน้าจอบนเว็บ

   ภาษาของงานออกแบบ = AI Menu ของไคลเอนต์ PC ที่เราทำเอง
   ผู้เล่นเจอหน้านั้นทุกวัน เว็บต้องพูดภาษาเดียวกัน ไม่ใช่คิดธีมใหม่

   ค่าสีคัดลอกตรงจาก client-ui/src/auto_attack_ui.h (struct Col)
   ความโค้งจาก ImGuiStyle เดียวกัน: หน้าต่าง 16 การ์ด 12 ปุ่ม 8

   ตัวเลือกใช้ .advbook.advbook เพื่อให้ชนะสไตล์ที่ตัวเกมฉีดทีหลัง
   โดยไม่ต้องพึ่ง !important ทั้งไฟล์
   ────────────────────────────────────────────────────────────── */
:root{
  --c4-accent:#ffcb5c; --c4-accentLite:#ffe9a9; --c4-accentDeep:#f0a52e;
  --c4-bg:#e1f0fa; --c4-bgLite:#f1f8fd;
  --c4-headTop:#e6f3fc; --c4-headBot:#b3d8ef;
  --c4-panel:#ffffff; --c4-panelHead:#f0f7fc;
  --c4-line:#acd1e8; --c4-lineSoft:#d7e8f5;
  --c4-blue:#3e86be; --c4-blueDeep:#1f5f93;
  --c4-text:#384a5e; --c4-sub:#4a5e74; --c4-dim:#94aabc;
  --c4-on:#63c670; --c4-off:#c7d6e0; --c4-bad:#e97064;
  --c4-rWin:16px; --c4-rCard:12px; --c4-rBtn:8px;
  --c4-lift:0 10px 28px -12px #0b2a4455;
}

/* วิดเจ็ต AI Bot ที่ติดมากับตัวเกมจากเซิร์ฟเดิม owner สั่งให้เอาออก
   (ลบโหนดจริงใน c4-theme.js ด้วย เพราะมันอยู่ใน shadow DOM) */
.erohub-icon,.erohub-panel{display:none !important}

/* ══ หน้าเลือกตัวละคร ══════════════════════════════════════════ */
#ero-cs{
  font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;
  color:var(--c4-text);
  background:
    linear-gradient(180deg,#05101a88 0%,#05101a33 22%,#05101a33 70%,#05101abb 100%),
    url('bg-login.jpg') center/cover no-repeat;
}

#ero-cs .ecs-head{
  padding:9px 14px;margin-bottom:4px;
  background:linear-gradient(180deg,var(--c4-headTop),var(--c4-headBot));
  border:1px solid var(--c4-line);border-radius:var(--c4-rWin);
  box-shadow:var(--c4-lift)}
#ero-cs .ecs-logo{
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:2px;
  color:var(--c4-blueDeep)}
#ero-cs .ecs-online{font-size:13px;color:var(--c4-sub)}
#ero-cs .ecs-online::before{background:var(--c4-on)}
#ero-cs .ecs-online.off::before{background:var(--c4-bad)}

#ero-cs .ecs-count{color:#eaf4fb;text-shadow:0 1px 4px #000a}
#ero-cs .ecs-add{
  color:var(--c4-blueDeep);background:var(--c4-panel);
  border:1px solid var(--c4-line);border-radius:var(--c4-rBtn);
  box-shadow:var(--c4-lift);font-weight:600}
#ero-cs .ecs-add:active{background:var(--c4-lineSoft)}

/* การ์ดตัวละคร: ขาว โค้ง 12 เลือกอยู่ = แถบอำพันซ้าย เหมือนแถวใน AI Menu */
#ero-cs .ecs-card{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rCard);box-shadow:0 4px 12px -6px #0b2a4466}
#ero-cs .ecs-card:active{background:var(--c4-bgLite)}
#ero-cs .ecs-card.on{
  background:var(--c4-bgLite);border-color:var(--c4-accentDeep);
  box-shadow:inset 3px 0 0 var(--c4-accent),0 4px 12px -6px #0b2a4466}
#ero-cs .ecs-av{
  font-family:inherit;font-weight:700;
  background:linear-gradient(180deg,var(--c4-bgLite),var(--c4-bg));
  color:var(--c4-blueDeep);
  border:1px solid var(--c4-line);border-radius:var(--c4-rBtn)}
#ero-cs .ecs-card.on .ecs-av{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent));
  border-color:var(--c4-accentDeep);color:#5a3f0c}
#ero-cs .ecs-card b{color:var(--c4-blueDeep);font-weight:600}
#ero-cs .ecs-card small{color:var(--c4-dim)}
#ero-cs .ecs-card .ecs-del{color:var(--c4-bad)}
#ero-cs .ecs-new{
  border:1px dashed #ffffff8c;background:#ffffff26;color:#eaf4fb;
  border-radius:var(--c4-rCard);box-shadow:none;
  text-shadow:0 1px 4px #000a}
#ero-cs .ecs-list{scrollbar-color:#ffffff80 transparent}
#ero-cs .ecs-list::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:999px}

/* เวทีตัวละคร: ปล่อยให้ยืนบนภาพวาด ไม่ต้องมีแผ่นรอง */
#ero-cs .ecs-stage{background:none;border:0;box-shadow:none;padding:0}
#ero-cs .ecs-ring::before{background:radial-gradient(ellipse,#000000a6 0%,transparent 70%)}
#ero-cs .ecs-name{color:#fff;text-shadow:0 2px 6px #000d}
#ero-cs .ecs-map{color:#dbe8f2;text-shadow:0 1px 4px #000c}
#ero-cs .ecs-pill{
  background:var(--c4-panel);color:var(--c4-sub);
  border:1px solid var(--c4-line);border-radius:999px;font-weight:600}
#ero-cs .ecs-pill.lv{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent));
  color:#5a3f0c;border-color:var(--c4-accentDeep)}
#ero-cs .ecs-pill.del{background:var(--c4-panel);color:var(--c4-bad);border-color:#e9a79f}

#ero-cs .ecs-news{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rCard);box-shadow:var(--c4-lift);padding:12px 14px}
#ero-cs .ecs-news h4{
  display:flex;align-items:center;gap:7px;
  color:var(--c4-blueDeep);letter-spacing:0;text-transform:none;
  font-weight:600;font-size:13px}
#ero-cs .ecs-news h4::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--c4-accent);box-shadow:0 0 0 1px #f0a52e66}
#ero-cs .ecs-news div{color:var(--c4-sub);border-top:1px solid var(--c4-lineSoft)}

#ero-cs-bar #eroMobileEnter{
  color:#5a3f0c;border:1px solid var(--c4-accentDeep);border-radius:var(--c4-rBtn);
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent) 52%,var(--c4-accentDeep));
  box-shadow:0 1px 0 #fff inset,0 6px 18px -6px #000a;
  font-weight:700}
#ero-cs-bar #eroMobileEnter:active{
  background:linear-gradient(180deg,var(--c4-accentDeep),var(--c4-accent))}
#ero-cs-bar #eroMobileDelete{
  color:var(--c4-bad);background:var(--c4-panel);
  border:1px solid var(--c4-line);border-radius:var(--c4-rBtn);
  box-shadow:0 6px 18px -6px #000a}
#ero-cs-bar #eroMobileDelete:active{background:var(--c4-lineSoft)}

/* ══ สมุดนักผจญภัย ════════════════════════════════════════════
   ของเดิมเป็นหน้าต่างไล่สีม่วง-น้ำเงินเข้ม คนละภาษากับ AI Menu
   แปลงเป็นชุดเดียวกัน: พื้นฟ้าอ่อน การ์ดขาว แท็บที่เลือกเป็นอำพัน */
.advbook.advbook .ab-panel{
  background:var(--c4-bg);border:1px solid var(--c4-line);
  border-radius:var(--c4-rWin);color:var(--c4-text);
  box-shadow:0 22px 60px -18px #0b2a4477;
  font-family:'IBM Plex Sans Thai',Tahoma,sans-serif}

.advbook.advbook .ab-head{
  background:linear-gradient(180deg,var(--c4-headTop),var(--c4-headBot));
  border-bottom:1px solid var(--c4-line);padding:10px 16px}
.advbook.advbook .ab-title{
  color:var(--c4-blueDeep);font-weight:700;letter-spacing:.04em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box}
.advbook.advbook .ab-close{
  color:var(--c4-blue);background:#ffffffcc;
  border:1px solid var(--c4-line);border-radius:var(--c4-rBtn)}
.advbook.advbook .ab-close:hover{background:#fff;color:var(--c4-blueDeep)}

/* แท็บ: ขาวขอบฟ้า เลือกอยู่ = ไล่สีอำพัน เหมือนแท็บหลักใน AI Menu */
.advbook.advbook .ab-tabs{background:transparent;border-bottom:1px solid var(--c4-lineSoft)}
.advbook.advbook .ab-tabs button,
.advbook.advbook .ab-tabs [data-tab]{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rBtn);color:var(--c4-blue);
  font-family:inherit;font-weight:600;box-shadow:none}
.advbook.advbook .ab-tabs [data-tab]:hover{background:var(--c4-bgLite);color:var(--c4-blueDeep)}
.advbook.advbook .ab-tabs [data-tab].on{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent) 52%,var(--c4-accentDeep));
  border-color:var(--c4-accentDeep);color:#5a3f0c}

.advbook.advbook .ab-body{background:var(--c4-bg)}

/* แถบสรุปด้านบน: ของเดิมเป็นไล่สีม่วง-เขียวจัด เปลี่ยนเป็นการ์ดฟ้าอ่อน */
.advbook.advbook .ab-hero{
  background:linear-gradient(135deg,var(--c4-bgLite),var(--c4-bg) 60%,#d3e9f7);
  border:1px solid var(--c4-line);border-radius:var(--c4-rCard);
  color:var(--c4-text);box-shadow:none}
.advbook.advbook .ab-hero b,
.advbook.advbook .ab-lv{color:var(--c4-blueDeep)}
.advbook.advbook .ab-sub{color:var(--c4-sub)}

/* การ์ดย่อย: ขาว ขอบฟ้า ขีดสีซ้ายเป็นอำพันเส้นเดียว ไม่ใช่หลายสี */
.advbook.advbook .ab-tile,
.advbook.advbook .ab-card,
.advbook.advbook .ab-rankrow,
.advbook.advbook .ab-titleplate{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rCard);color:var(--c4-text);box-shadow:none}
.advbook.advbook .ab-tile b,
.advbook.advbook .ab-card b{color:var(--c4-blueDeep)}
.advbook.advbook .ab-tile i,
.advbook.advbook .ab-desc,
.advbook.advbook .ab-card-n{color:var(--c4-dim);font-style:normal}
.advbook.advbook .ab-tile.lock{background:var(--c4-bgLite);border-color:var(--c4-lineSoft);
  color:var(--c4-dim)}
.advbook.advbook .ab-tile.lock b{color:var(--c4-dim)}
.advbook.advbook .ab-tile.gold{border-color:var(--c4-accentDeep);
  box-shadow:inset 3px 0 0 var(--c4-accent)}

/* หลอดความคืบหน้าในการ์ด */
.advbook.advbook .ab-bar{background:var(--c4-bgLite);border:1px solid var(--c4-lineSoft);
  border-radius:999px;overflow:hidden}
.advbook.advbook .ab-bar>*{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent) 55%,var(--c4-accentDeep))}

/* ปุ่ม */
.advbook.advbook .ab-btn,
.advbook.advbook .ab-pager button,
.advbook.advbook .ab-tile u{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rBtn);color:var(--c4-blue);
  font-family:inherit;font-weight:600;text-decoration:none;box-shadow:none}
.advbook.advbook .ab-btn:hover,
.advbook.advbook .ab-pager button:hover{background:var(--c4-bgLite);color:var(--c4-blueDeep)}
.advbook.advbook .ab-btn.go,
.advbook.advbook .ab-tile u{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent) 52%,var(--c4-accentDeep));
  border-color:var(--c4-accentDeep);color:#5a3f0c}

.advbook.advbook .ab-chips span,
.advbook.advbook .ab-tags span,
.advbook.advbook .ab-medals i{
  background:var(--c4-bgLite);border:1px solid var(--c4-line);
  border-radius:999px;color:var(--c4-sub)}
.advbook.advbook .ab-medals i.on{
  background:linear-gradient(180deg,var(--c4-accentLite),var(--c4-accent));
  border-color:var(--c4-accentDeep);color:#5a3f0c}

.advbook.advbook .ab-search input,
.advbook.advbook .ab-search{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rBtn);color:var(--c4-text);font-family:inherit}
.advbook.advbook .ab-empty{color:var(--c4-dim)}
.advbook.advbook .ab-list span i{color:var(--c4-accentDeep);font-style:normal}
.advbook.advbook .ab-toast{
  background:var(--c4-panel);border:1px solid var(--c4-line);
  border-radius:var(--c4-rBtn);color:var(--c4-text);box-shadow:var(--c4-lift)}

/* ปุ่มลอยที่เปิดสมุด */
.ab-fab{border-radius:var(--c4-rCard) !important;
  border:1px solid var(--c4-line) !important;
  background:linear-gradient(180deg,var(--c4-headTop),var(--c4-headBot)) !important;
  box-shadow:var(--c4-lift) !important}