/* =========================================================================
   RAYDRIC-RO · AI Panel — ธีมร่วมของทุกหน้า (index.php, dashboard.php, ...)
   ที่มา: ai-afk-ro-dashboard.html (UI Kit) — ห้ามก๊อบสีธีม/เคอร์เซอร์จากไฟล์อื่น
   แก้สีของทั้งระบบได้จากตัวแปรใน :root ที่นี่ที่เดียว
   ========================================================================= */
:root{
  --font: Tahoma, 'Leelawadee UI', 'Kanit', 'Segoe UI', sans-serif;

  /* กรอบหน้าต่างแบบ RO */
  --win-border:   #c6c6c6;
  --win-face:     #ffffff;
  --title-top:    #8494ce;
  --title-1:      #b2c3de;
  --title-2:      #a7bbe2;
  --title-3:      #becff3;
  --title-4:      #d3e6fb;
  --title-5:      #dcf3ff;
  --title-line:   #000000;
  --title-text:   #000000;
  --foot-stripe:  #f7f7f7;
  --foot-line:    #cecece;

  /* ไล่สีแถบหัวหน้าต่าง — ใช้ร่วมกันทุกที่ (หน้าต่าง / แผงย่อย / การ์ด / ทูลทิป)
     2026-09-08: ลดความจัดของเส้นขีดขาวลงอีก 50% (.30 → .15) ตามคำขอ — มีผลทุกหน้า
     เพราะทุกหน้าดึงค่าจากตัวแปรนี้ตัวเดียว ไม่ต้องไปไล่แก้ทีละไฟล์ */
  --title-grad:
    repeating-linear-gradient(180deg, rgba(255,255,255,.15) 0 1px, rgba(0,0,0,.035) 1px 2px),
    linear-gradient(180deg,
      var(--title-top) 0, var(--title-top) 1px,
      var(--title-1) 1px, var(--title-2) 38%, var(--title-3) 62%,
      var(--title-4) 84%, var(--title-5) 100%);

  --sunken-bg:    #ffffff;
  --sunken-line:  #c3cfdc;

  --bar-1:        #3f74b4;
  --bar-2:        #2b578e;
  --bar-text:     #ffffff;

  --ink:          #16324f;
  --ink-soft:     #4a6885;
  --line:         #d8dde4;

  --good:         #3fae4a;
  --good-2:       #2b8a34;
  --warn:         #e0a020;
  --bad:          #d64545;
  --sp-1:         #4f8fe0;
  --sp-2:         #2f63ad;

  --tag-atk:      #c0392b;
  --tag-loot:     #b8860b;
  --tag-heal:     #2e8b57;
  --tag-walk:     #3f74b4;
  --tag-idle:     #6b7c8f;

  /* เคอร์เซอร์แบบในเกม — มาจาก UI Kit (ai-afk-ro-dashboard.html) เท่านั้น
     ไฟล์ ro-login.html ต้นฉบับมี --cur-arrow เสีย (base64 ผิด 1 ตัวอักษร) อย่าก๊อบจากที่นั่น */
  --cur-arrow:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACkklEQVR4nM3Xv0sbYRzH8XfkhOcgwz2QgLd5omBCBS8geKEOnnSooUITOtTQoWjHbv1XOtqhkG6mU3GQ2qFgOpS0Q0kdpFdwSEDhMgTyQAPXQU1Mk/j7Yr/Hwd3zPNznxfd5losEBNxljQBEtEggDXknkpHTh9fFMjI2fEQbIEZ1UgtrmOMTQ0W0AWiw9vIVqcU1JqaTQ0OMnH0ROghhkHDypGZTQ0F0tkATLM+OIQyJNeNizuRIzadDR3R3QIP8iguAabvIqQzp+0uhIroAaJC+Z6D8KkIILNtFtxyWHoSHGPl3wBCC7EoapdQJIgMxh6VHmVAQPQA0SI0b+AcVgGPEXAaETSYERC+A47MgpUQp1UHYLj4mmce5W0X0B0QFy4s2/oHXGTMkSWcVX0lyT24PMbAD6WkTMy7aXeggsngNSe5p/lYQfQEAhiFwF2yaVa9rXMRMUk6WakMn/2z9xoiBAKFBelIi4waqobrnYibJhVW8hkH++c0QAwEARszAdRI0D72eORGVJJ1lvLrB+ovrI84FCA3sdhf8gYjKkbg24lwAgIwaJCYt/KqHqld7ICIqSc5lqdQgfw3EhQChgRkXoBT+gYd/WEMdVbtuWgpr2uXn7+aVO3ExQIA9LrGmLETMRAhB84/qufX4GIn5POUrIrSLFqgW1I4UtBS0QNfFgIUKfRSsyTQftjcum38+QLXg216NjXeb7GwVQNMR0QGAM1XdL0duDjgNf7tJpVTk14/dS3/0KtUf0ILSSXj5c5Hyl4+hhMOAQ1jarw8lHPp0oLRXZ+NNgfKnIuWv4YZ3AVRLtcN3twtUvoez5wMBAIX3O+xuFaiEdOD6VkAAGoHzMBtYs04QMNwr8l/8Hd9l/QW6wDGk5GRtXwAAAABJRU5ErkJggg==") 0 0;
  --cur-hand: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC0UlEQVR4nO2WQWjTYBTH/ynDU7JcPIRUqkjMChuj3cnTTh7GOsZOVkREtp087Diw62GX6cWDIMgu8zBlh14UoWOIiHM9aGFaRhQb59CMVhEPTVI8qPR5SJM1a5ol27xI/yE0/fLy/X957+VLGAIhrOYyc1QqlQAAiUQCCzcXmNCTNMXYAAwY6u3tBcuyqFQrrglToykX5ZX5FedYXb2DYrGI/Gr+cBBNAFop1oiIqFqtkizLRLC24eFhMgyDbCk1opVijRSFyDAMMgyDlF2iTCbjXBNmcwP8tnZVVUkURRoaGnKN27uye3wQIBBEUaRcLmfdadPEMAyXCZH1q9SsLCi75AKwIWZmZkJBOAeyLFMul9u705aUt0I4ADW3eSvE5ORkYIgeuxfKapnpy/aRJElIJpNOj/TzwDsAmsYBpw7uqRhvQpKkwD0Yaf1TVsvM9PQ0NjY2XEH9PDzNtQbnOen4+A2kL6YDPd+R/QObbzaZbDbbBvGv1OM1uP5ynYleitLT1xXA+yb9xQOCIAQKbcuArUQigeeP7gJmeP8Yb2J7eztQrGcGACC/mmeipSidPH8VgxwfCqBTb4QCAICRkRHP8VjEbDPRdA7QYTWraV2bZtNUr9d9l2nnXbBfUTFKtx+/BwAMynsZiEXcNdEaHH7tvMWHP2edWDtG0zk8eXALhUKhI0THHnDJtIy9zLdUHS8+JRHv2cFYPGJlR+esjAA4c+G679S+JbC19VUHwCPGuwFOfP+Ib1/OQTitO4uP1uCa8ZZ+vFr2fSI6AlSqFWZqcYoEQcDAxKwD4UgHtn42ANglMp2MtGptbe1wPWArNZoilmU9z0mShIGJWYzFI57mD+cvH/idcGAJ/CZIjaZIEJaB+LW29SKIORC0CX3gCoWC03AA8PnZvcDmQIASBJH94qnX6xAEAUv3lwJ/nh0LwFF0pBJ0AboAXYAuwH8B8BcB30CH/hlmJwAAAABJRU5ErkJggg==") 4 2;
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
*{cursor:var(--cur-arrow), auto}
a, button, .btn, .wbtn, .panel-head, .bot, .slot, [onclick], label, summary,
input[type=checkbox], .ro-cb{cursor:var(--cur-hand), pointer}
.win-title{cursor:var(--cur-hand), move}
.btn[disabled], .stat-row .a span, input[disabled]{cursor:var(--cur-arrow), not-allowed}

/* ---------- หน้าต่าง RO ---------- */
.win{
  border:1px solid var(--win-border);border-radius:3px;background:var(--win-face);
  box-shadow:0 5px 14px rgba(0,0,0,.40);overflow:hidden;
}
.win + .win{margin-top:12px}
.win-title{
  display:flex;align-items:center;gap:8px;height:26px;padding:0 7px;
  background-image:var(--title-grad);
  border-bottom:2px solid var(--title-line);
  user-select:none;
}
.gem{
  width:10px;height:10px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 42% 26%, #eef4ff 0 16%, #8fb8ee 34%, #4a79cd 62%, #29427b 88%, #1d3566 100%);
  box-shadow:0 0 0 1px rgba(20,38,74,.55), 0 1px 1px rgba(255,255,255,.75);
}
.win-title h1,.win-title h2{
  margin:0;font-size:14.5px;font-weight:600;letter-spacing:.2px;color:var(--title-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-title .sub{font-size:13.2px;font-weight:400;color:#2c3d5c;white-space:nowrap}
.win-title .spacer{flex:1}
/* container-type ทำให้ลูก ๆ ใช้ @container query แทน @media ได้ (วัดความกว้างจริงของ .win-body เอง
   ไม่ใช่ viewport) — สำคัญตอนแผงถูกวางในคอลัมน์แคบ ๆ (เช่น dash-row 2/3:1/3 ใน dashboard.php)
   .bots ด้านล่างใช้ตัวนี้กันการ์ดล้นคอลัมน์แคบตอน viewport กว้างแต่คอลัมน์ไม่กว้างตาม */
.win-body{padding:10px;background:var(--win-face);container-type:inline-size}
.win-foot{
  display:flex;align-items:center;gap:8px;padding:6px 8px;min-height:34px;
  font-size:13.8px;color:#5a6a7d;
  border-top:1px solid var(--foot-line);
  background:repeating-linear-gradient(180deg,var(--foot-stripe) 0 2px,#ffffff 2px 4px);
}
.win-foot .spacer{flex:1}
.win-foot b{color:#1d3557}
.wbtn{
  width:14px;height:14px;flex:none;line-height:1;padding:0;
  border:1px solid #2f4d86;border-radius:50%;
  background:radial-gradient(circle at 40% 28%, #dfeaff 0 14%, #7ea6e2 40%, #3f6cbb 74%, #22406f 100%);
  color:#fff;font-size:9.2px;font-family:var(--font);font-weight:700;
  display:grid;place-items:center;text-decoration:none;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
}
.wbtn:hover{filter:brightness(1.12)}
.wbtn:active{filter:brightness(.9)}
.wbtn{border-radius:50%;-webkit-appearance:none;appearance:none}
button.wbtn{cursor:var(--cur-hand), pointer}

/* กดปุ่ม ✕ ที่หัวหน้าต่างแล้ว "ย่อ" แผงนั้นไว้ชั่วคราว (ไม่ได้ลบข้อมูล) — ใช้ .js-win-close ร่วมกับ
   สคริปต์เล็ก ๆ ท้ายหน้า toggle class นี้ */
.win.collapsed .win-body, .win.collapsed .win-foot{display:none}

/* ---------- ปุ่ม ---------- */
.btn{
  font-family:var(--font);font-size:14px;font-weight:500;line-height:1.35;
  color:#3a3a3a;padding:3px 14px;
  border:1px solid #a3a3a3;border-radius:8px;
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 45%,#e6e6e6 100%);
  box-shadow:inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
  text-decoration:none;display:inline-block;white-space:nowrap;
}
.btn:hover{background:linear-gradient(180deg,#ffffff 0%,#efefef 45%,#dcdcdc 100%)}
.btn:active{background:linear-gradient(180deg,#dcdcdc,#f5f5f5);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.btn:focus-visible{outline:2px solid #7fa5d4;outline-offset:1px}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.blue {color:#123a68;border-color:#8aa6c8;background:linear-gradient(180deg,#ffffff,#eef4fc 45%,#d5e5f7)}
.btn.blue:hover {background:linear-gradient(180deg,#ffffff,#e3eefa 45%,#c3dbf3)}
.btn.green{color:#17512c;border-color:#8cb897;background:linear-gradient(180deg,#ffffff,#ecf7ef 45%,#d6eddd)}
.btn.green:hover{background:linear-gradient(180deg,#ffffff,#e1f3e6 45%,#c3e5cf)}
.btn.gold {color:#6b4a06;border-color:#c9ae72;background:linear-gradient(180deg,#ffffff,#fdf6e2 45%,#f7e9c2)}
.btn.gold:hover {background:linear-gradient(180deg,#ffffff,#fbf0d3 45%,#f2dfab)}
.btn.red, .btn.danger{color:#7d1d1d;border-color:#c79494;background:linear-gradient(180deg,#ffffff,#fdeeee 45%,#f8dada)}
.btn.red:hover, .btn.danger:hover{background:linear-gradient(180deg,#ffffff,#fbe3e3 45%,#f3c9c9)}
.btn.sm{padding:2px 10px;font-size:13.1px;border-radius:7px}

/* ---------- แผงย่อย ---------- */
.panel{border:1px solid var(--win-border);border-radius:3px;background:#ffffff;overflow:hidden}
.panel-head{
  display:flex;align-items:center;gap:6px;padding:0 7px;height:21px;
  background-image:var(--title-grad);
  border-bottom:1px solid var(--title-line);
  color:#000;font-size:13.3px;font-weight:700;user-select:none;
}
.panel-head .arrow{font-size:9.2px;transition:transform .15s;color:#22304a}
.panel-head .spacer{flex:1}
.panel-head .hint{font-weight:400;font-size:12.6px;color:#2c3d5c}
.panel.collapsed .panel-body{display:none}
.panel.collapsed .arrow{transform:rotate(-90deg)}
.panel-body{padding:8px}
.sunken{background:var(--sunken-bg);border:1px solid var(--sunken-line);border-radius:2px;
  box-shadow:inset 1px 1px 2px rgba(22,50,79,.16)}

/* ---------- เลย์เอาต์ ---------- */
.wrap{position:relative;max-width:1320px;margin:0 auto;padding:18px 16px 64px}
.grid-main{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:1000px){ .grid-main{grid-template-columns:380px 1fr} }
.col{display:grid;gap:10px;align-content:start}
.row2{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){ .row2{grid-template-columns:1fr 232px} }
.row2 > .panel{display:flex;flex-direction:column}
.row2 > .panel .panel-body{flex:1;display:flex;flex-direction:column;min-height:0}
.row2 > .panel.collapsed .panel-body{display:none}

/* ---------- หลอด HP/SP ---------- */
.bar{position:relative;height:19px;border:1px solid #97a3bb;border-radius:7px;
  background:#eceef2;overflow:hidden;box-shadow:inset 0 1px 1px rgba(0,0,0,.10)}
.bar i{display:block;height:100%;
  background:linear-gradient(180deg,#dcebfd,#bed7f6 45%,#9dbcea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);transition:width .5s ease}
.bar.sp i{background:linear-gradient(180deg,#e4e2f4,#c9c5e4 45%,#aeaacf)}
.bar.low i{background:linear-gradient(180deg,#ffd7d7,#f6bebe 45%,#ea9d9d)}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;font-size:12px;font-weight:700;color:#1b3055;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.robar{position:relative;height:14px;overflow:hidden;
  border:1px solid #97a3bb;border-radius:7px;background:#eceef2;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.10)}
.robar > i{display:block;height:100%;
  background:linear-gradient(180deg,#dcebfd,#bed7f6 45%,#9dbcea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);transition:width .4s ease}
.robar > em{position:absolute;inset:0;display:grid;place-items:center;
  font-style:normal;font-size:12.4px;font-weight:600;color:#1b3055;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.robar.low > i{background:linear-gradient(180deg,#ffd7d7,#f6bebe 45%,#ea9d9d)}
/* .robar ที่วางอยู่ใน .stat-line (แถบ Base Lv / Job Lv ในการ์ด "ID GAME : ...") ให้กินพื้นที่ที่เหลือ
   แทนที่จะยุบเหลือ 0 (div เปล่าไม่มีความกว้างของตัวเองในบริบท flex) */
.stat-line .robar{flex:1;min-width:0}
.robar.exp{height:19px}

.stat-line{display:flex;align-items:center;gap:7px;font-size:13.3px}
.stat-line .lbl{color:var(--ink-soft);min-width:52px}
/* .lbl ของแถบ Base Lv / Job Lv (explbl) ต้องกว้างเท่ากันทุกแถวเป๊ะ ๆ ไม่ใช่ min-width ที่ยืดตามความยาว
   ข้อความ ("Base Lv. 99" ยาวกว่า "Job Lv. 10") ไม่งั้นหลอด .robar (flex:1) จะเริ่มคนละตำแหน่ง/ยาวไม่เท่ากัน */
.stat-line .lbl.explbl{width:80px;flex:0 0 80px;white-space:nowrap}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;text-align:center}
.kv div{background:#fff;border:1px solid var(--line);border-radius:2px;padding:2px}
.kv b{display:block;font-size:14.3px;color:#101d33;font-variant-numeric:tabular-nums}
.kv small{font-size:11.7px;color:var(--ink-soft)}

/* ---------- ตาราง ---------- */
table.ro{width:100%;border-collapse:collapse;font-size:13.3px}
table.ro thead th{position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#f7f8fa,#e4e7ec);
  color:#12233d;font-weight:700;text-align:left;
  padding:3px 8px;border-bottom:1px solid #c9ced6;white-space:nowrap}
table.ro td{padding:3px 8px;border-bottom:1px solid #eef0f3;vertical-align:middle}
table.ro tbody tr:nth-child(even){background:#fafbfc}
table.ro tbody tr:hover{background:#eef4fb}
/* ตาราง "แยกตามไอดี" (ภาพรวมบัญชี) — ไอดีชิดซ้าย (มีชื่อตัวละครอยู่บรรทัดล่าง)
   ส่วนตัวเลข/เวลาให้อยู่กึ่งกลางคอลัมน์ ทั้งหัวตารางและข้อมูล */
table.ro.acct-tbl th:not(:first-child),
table.ro.acct-tbl td:not(:first-child){text-align:center}
.acct-charname{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.who{display:flex;align-items:center;gap:6px;white-space:nowrap}

.spr{width:22px;height:22px;flex:none;border-radius:3px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25)}
.spr.lg{width:46px;height:46px;font-size:17.2px;border-radius:4px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:13.1px;font-weight:700;
  white-space:nowrap;color:#4a5668}
.tag::before{content:"";width:7px;height:7px;flex:none;border-radius:1px;
  background:currentColor;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.tag.atk{color:var(--tag-atk)}  .tag.loot{color:#96700a}
.tag.heal{color:var(--tag-heal)} .tag.walk{color:#2b578e}
.tag.idle{color:var(--tag-idle)}

/* ---------- การ์ดบอท ---------- */
.bots{display:grid;grid-template-columns:1fr;gap:10px}
/* @container แทน @media — วัดความกว้าง .win-body ที่ .bots อยู่จริง (ดู container-type ด้านบน)
   กันการ์ดล้นตอนแผงอยู่ในคอลัมน์แคบ (เช่น dash-row 2/3 บนจอกลาง ๆ ที่ media query แบบเดิมจะเข้าใจผิด
   ว่าจอกว้างพอจะขึ้น 2-3 คอลัมน์ ทั้งที่คอลัมน์จริงแคบกว่านั้นมาก) */
@container (min-width:660px){ .bots{grid-template-columns:1fr 1fr} }
@container (min-width:980px){ .bots{grid-template-columns:1fr 1fr 1fr} }

/* ---------- การ์ด "ID GAME : ..." (binfo-card) ---------- */
.char-row{display:flex;align-items:center;gap:8px;margin-bottom:1px}
.char-row-txt{min-width:0}
.char-row-txt .cn{font-weight:700;font-size:14.3px;line-height:1.2;color:#101d33;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-row-txt .cj{font-size:12.2px;color:var(--ink-soft);line-height:1.2}

/* มินิแมพในการ์ดบอท: ซ้าย = 4 แถวข้อความเดิม (ตำแหน่ง/สถานะ/Weight/Zeny), ขวา = ภาพแผนที่
   สี่เหลี่ยมจัตุรัสคงที่ + จุดกระพริบบอกตำแหน่งตัวละคร (ai_minimap_dot_pos() ฝั่ง PHP คำนวณ %
   จากขนาดแมพจริงที่พาร์สจาก map_cache.dat — ภาพหาไม่เจอก็ยังโชว์จุดได้ถ้ารู้ขนาดแมพ) */
.bot-lower{display:flex;gap:9px;align-items:flex-start;margin-top:1px}
.bot-lower .stat-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.minimap-box{position:relative;flex:0 0 108px;width:108px;height:108px;border-radius:5px;
  overflow:hidden;background:#0c1a2c;border:1px solid #2c4260;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.minimap-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.minimap-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:10.3px;line-height:1.35;color:#5d7ba3;padding:6px}
.minimap-dot{position:absolute;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;
  background:#ff3b3b;box-shadow:0 0 0 2px rgba(255,255,255,.85);animation:mmBlink 1.2s ease-in-out infinite}
@keyframes mmBlink{
  0%,100%{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 0 rgba(255,59,59,.55)}
  50%{opacity:.4;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 0 6px rgba(255,59,59,0)}
}
@container (max-width:300px){ .minimap-box{flex-basis:88px;width:88px;height:88px} }
.bot{border:1px solid var(--win-border);border-radius:3px;overflow:hidden;background:#fff}
.bot-head{display:flex;align-items:center;gap:8px;padding:4px 7px;
  background-image:var(--title-grad);border-bottom:1px solid var(--title-line)}
.bot-head .nm{font-weight:700;font-size:14.3px;line-height:1.15;color:#000}
.bot-head .jb{font-size:12.4px;color:#2c3d5c;line-height:1.15}
.bot-head .lv{margin-left:auto;flex:none;font-size:12.6px;font-weight:700;color:#12233d;
  font-variant-numeric:tabular-nums}
.bot-body{padding:8px;display:grid;gap:7px}
.bot-foot{display:flex;gap:6px;padding:7px 8px;border-top:1px solid var(--line);
  background:repeating-linear-gradient(180deg,var(--foot-stripe) 0 2px,#ffffff 2px 4px)}
.bot-foot .btn{flex:1}

/* ---------- สถานะ (dot) ---------- */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:-1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.dot.on{background:radial-gradient(circle at 35% 30%,#c8f7c8,#3fae4f 70%,#1f6b2c)}
.dot.off{background:radial-gradient(circle at 35% 30%,#f7c8c8,#c04040 70%,#7a2222)}
.taskbar .dot{width:8px;height:8px;box-shadow:0 0 6px rgba(63,174,74,.9)}

/* ---------- ฟอร์ม ---------- */
.ro-field{
  font-family:var(--font);font-size:13.8px;color:#101d33;
  height:22px;width:100%;padding:0 7px;
  border:1px solid #9aa4b2;border-radius:2px;background:#fff;
  box-shadow:inset 1px 1px 2px rgba(22,50,79,.12);
}
.ro-field:focus{outline:none;border-color:#5c86c8;
  box-shadow:inset 1px 1px 2px rgba(22,50,79,.12), 0 0 0 2px rgba(124,157,196,.35)}
.ro-cb{display:inline-flex;align-items:center;gap:5px;font-size:13.1px;color:#4a5668;white-space:nowrap}
.ro-cb input{appearance:none;-webkit-appearance:none;margin:0;position:relative;
  width:13px;height:13px;flex:none;border:1px solid #6b6b6b;border-radius:1px;background:#fff}
.ro-cb input:checked::after{content:"";position:absolute;left:4px;top:0;width:3px;height:8px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(42deg)}
.ro-select{font-family:var(--font);font-size:13.1px;color:#20364f;
  border:1px solid #a3a3a3;border-radius:6px;padding:1px 5px;
  background:linear-gradient(180deg,#ffffff,#f0f0f0)}

.msg{margin:8px 0 0;font-size:12.9px;color:#a03030;min-height:15px;text-align:center}
.msg.ok{color:#1d6b3a}

/* ---------- scrollbar สไตล์ RO ---------- */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#e6eef8;border-left:1px solid #c2d6ea}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffffff,#c6d9ef);
  border:1px solid #89a8cc;border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff,#b3cbe6)}

/* ---------- ทูลทิป ---------- */
.ro-tip{position:fixed;z-index:80;pointer-events:none;display:none;
  min-width:158px;max-width:250px;overflow:hidden;background:var(--win-face);
  border:1px solid var(--win-border);border-radius:3px;
  box-shadow:0 5px 14px rgba(0,0,0,.40);font-size:13.2px;color:var(--ink);line-height:1.4}
.ro-tip .tip-head{display:flex;align-items:center;gap:6px;height:20px;padding:0 7px;
  background-image:var(--title-grad);border-bottom:1px solid var(--title-line);
  color:#000;font-weight:700;font-size:13.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-tip .tip-body{padding:5px 8px}
.ro-tip .tip-row{display:flex;gap:12px;align-items:baseline}
.ro-tip .tip-row span{color:var(--ink-soft)}
.ro-tip .tip-row b{margin-left:auto;color:#101d33;font-variant-numeric:tabular-nums}

.note{margin:12px 2px 0;font-size:13.3px;color:#9fb6cf;text-align:center;line-height:1.6}

/* =========================================================================
   หน้า "หลังล็อกอิน" (dashboard.php, link.php, และหน้าใหม่ที่จะเพิ่มต่อไป) — พื้นหลัง
   ไบยิ้มแผนที่เข้ม + แถบบนสุด .top + .empty/.warn-strip ใช้ร่วมกันทุกหน้า ย้ายมาไว้ที่นี่
   ที่เดียวกันโค้ดซ้ำ (เดิมก๊อบวางซ้ำในแต่ละไฟล์ ก่อนหน้านี้แก้ .top ต้องไล่แก้ทุกไฟล์)
   หน้า index.php (หน้า LogOn) มีพื้นหลังของตัวเองแยกต่างหาก ไม่ใช้ชุดนี้ — ประกาศ body ทับในหน้า
   ตัวเองได้ตามปกติ เพราะ <style> ในหน้าอยู่หลัง <link> เส้นนี้เสมอ ชนะได้โดยไม่ต้องเพิ่ม specificity
   ========================================================================= */
body{
  margin:0;font-family:var(--font);font-size:13.8px;color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, #2c4a70 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #1d3a5c 0%, transparent 55%),
    linear-gradient(160deg,#152a44 0%,#0d1b2e 55%,#0a1524 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
}
/* flex-wrap:wrap กันแถวบนสุดล้นแนวนอนบนจอมือถือ (h1 + who + ปุ่มต่าง ๆ ยาวไม่พอจอ 390px) —
   ล้นมาแล้วจริงตอนเพิ่มปุ่ม "จัดการไอดี" ก่อนปุ่ม logout ในรอบนี้ ขึ้นบรรทัดใหม่แทนดันจนสกรอลแนวนอน */
.top{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:2px 2px 12px;color:#dbe9fb}
.top h1{margin:0;font-size:18.4px;font-weight:800;letter-spacing:.5px;color:#fff}
.top .who{margin-left:4px;font-size:13.3px;color:#9db8d6}
.top .spacer{flex:1}
.empty{padding:22px 10px;text-align:center;color:var(--ink-soft);font-size:13.8px}
.warn-strip{
  margin-bottom:11.5px;padding:6px 10px;border:1px solid #e7c876;border-radius:3px;
  background:#fff8e6;color:#6b4a06;font-size:13.3px;
}

/* ---------- Bot Settings popup (.js-bot-settings ในการ์ดบอท) ----------
   ใช้ธีม .win/.win-title/.btn/.ro-select/.ro-cb ชุดเดิมของทั้งระบบ ไม่สร้างสีใหม่
   เทมเพลตฟอร์มเท่านั้นตอนนี้ — ยังไม่ผูกกับ aa_skill_info/aa_mob_info/aa_item_info จริง */
.bs-backdrop{
  position:fixed;inset:0;z-index:200;padding:18px;
  background:rgba(10,18,32,.55);
  display:flex;align-items:center;justify-content:center;
}
.bs-backdrop[hidden]{display:none}
.bs-dialog{width:100%;max-width:760px;max-height:calc(100vh - 36px);
  display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.bs-dialog .win-title h2{font-size:14.3px}

/* 8 แท็บไม่พอความกว้างเสมอ (โดยเฉพาะจอกลาง ๆ /มือถือ) — scroll แนวนอนแทนหด/ตัดคำ
   ซ่อน scrollbar ให้ดูเนียนแต่ยัง scroll ด้วยนิ้ว/ล้อเมาส์ได้ปกติ */
.bs-tabbar{display:flex;gap:2px;padding:6px 7px 0;background:#eef1f6;border-bottom:1px solid var(--win-border);
  overflow-x:auto;scrollbar-width:none}
.bs-tabbar::-webkit-scrollbar{display:none}
.bs-tab{
  font-family:var(--font);font-size:13.1px;font-weight:600;color:#556478;flex:none;
  padding:6px 12px;border:1px solid var(--win-border);border-bottom:none;white-space:nowrap;
  border-radius:4px 4px 0 0;background:#e2e6ee;cursor:pointer;
}
.bs-tab.active{background:var(--win-face);color:#12233d;position:relative;top:1px}

.bs-body{overflow-y:auto;flex:1}
.bs-note{margin:0 0 10px;font-size:12.2px;color:#96a0ad;font-style:italic}
.bs-note-live{color:#2b8a34;font-style:normal;font-weight:600}
.bs-pane[hidden]{display:none}

.bs-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--line)}
.bs-row:last-child{border-bottom:none}
.bs-lbl{flex:0 0 96px;width:96px;padding-top:3px;font-size:13.1px;color:var(--ink-soft);font-weight:600}
.bs-content{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.bs-hint{font-size:12.4px;color:var(--ink-soft)}
.bs-num{width:70px}

.bs-slider{display:flex;align-items:center;gap:8px;flex:1;min-width:180px}
.bs-slider input[type=range]{flex:1;accent-color:#4f74ad}
.bs-slider-val{min-width:26px;text-align:right;font-size:13.1px;font-weight:700;
  color:#12233d;font-variant-numeric:tabular-nums}

/* แท็กลิสต์ (มอน/สกิล/ไอเทมที่พิมพ์เพิ่มเอง) */
.bs-taglist{width:100%}
.bs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bs-tags:empty{margin-bottom:0}
.bs-tag{display:inline-flex;align-items:center;gap:5px;font-size:12.6px;font-weight:600;
  padding:3px 6px 3px 10px;border-radius:12px;background:#e3ebfa;color:#1d3a66;border:1px solid #c3d4ef}
.bs-tag-x{appearance:none;border:none;background:transparent;color:#4a6aa0;font-size:14px;
  line-height:1;cursor:pointer;padding:0 2px}
.bs-tag-x:hover{color:#c0392b}
.bs-tag-add{display:flex;gap:6px}
.bs-tag-add .bs-tag-input{flex:1;min-width:0}
.bs-tag-add .bs-tag-select{flex:1;min-width:0}
.bs-tag-select:disabled{color:var(--ink-soft,#7a8598)}

/* ตารางบัพในแท็บ "ร้านค้า" */
#bsBuffTable td, #bsBuffTable th{white-space:nowrap}
#bsBuffTable td:nth-child(2){white-space:normal}

@media (max-width:640px){
  .bs-backdrop{padding:0}
  .bs-dialog{max-width:none;max-height:none;height:100%;border-radius:0}
  .bs-lbl{flex-basis:100%;width:100%;padding-top:0;padding-bottom:2px}
  .bs-row{flex-direction:column;gap:4px}
}