/* ============================================================
   สไตล์ทั้งหมดของ index.html (ย้ายออกมาจากแท็ก <style> เดิมแบบคำต่อคำ 2026-09-24)
   ไฟล์นี้อยู่ใน assets/ — ที่อยู่รูปใน url() อ้างจากโฟลเดอร์นี้ (รูปใน assets/ ใช้ชื่อไฟล์ตรงๆ, รูปที่ราก ../)
   แก้ไฟล์นี้แล้วต้องเปลี่ยนเลข ?v= ที่แท็ก <link> ใน index.html ทุกครั้ง ไม่งั้นผู้ใช้บางคนจะได้ไฟล์เก่าค้างในเครื่อง
   ============================================================ */
:root{
  --bg:#101521;
  --surface:#192233;
  --surface-2:#202c40;
  --surface-hover:#28364d;
  --border:#334158;
  --text:#f2f5fa;
  --text-dim:#adb9cd;
  --accent:#79a7ff;
  --accent-ink:#08101f;
  --warn:#e0ab3c;
  --danger:#ef5a56;
  --success:#3fbd75;
  --shadow: 0 2px 6px rgba(0,0,0,.18), 0 16px 40px rgba(0,0,0,.28);
  --font-ui:"Inter","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --grad-a:#5b8cff;
  --grad-b:#9b5cff;
  --grad-c:#ff4fd8;
  --gradient-brand: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 55%, var(--grad-c) 100%);
  --gradient-btn: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-c) 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-ui);font-weight:700;text-wrap:balance;letter-spacing:0;line-height:1.5;margin:0}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font-family:inherit}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none!important}
svg.icon{width:18px;height:18px;display:block}

/* ---------- auth screen ---------- */
.guest-auth-buttons{display:flex;gap:.6rem}
.auth-modal{position:fixed;inset:0;z-index:80}
.auth-modal[hidden]{display:none}
.auth-modal .auth-card{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;
  max-height:90vh;overflow-y:auto;
}
.auth-modal-close{position:absolute;top:.9rem;right:.9rem}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
  padding:2rem 1.75rem 1.75rem;
  position:relative;
}
.auth-brand{display:flex;align-items:center;justify-content:center;margin-bottom:1.35rem}
.auth-brand-logo{display:block;width:100%;max-width:210px;height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
.auth-tag{color:var(--text-dim);font-size:.88rem;margin:0 0 1.5rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.field label{font-size:.76rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-s);
  padding:.6rem .7rem;
  font-size:.92rem;
  font-family:inherit;
  outline:none;
}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.btn{
  border:1px solid transparent;
  border-radius:var(--radius-s);
  padding:.6rem 1rem;
  font-size:.87rem;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  transition:transform .08s ease, filter .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-success{background:var(--success);color:#06210f}
.btn-success:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-hover)}
#farmAddCostRowBtn,#farmAddRareItemBtn,#mrAddRowBtn,#postAnnouncementBtn{color:#7dd3fc;border-color:color-mix(in srgb, #7dd3fc 45%, var(--border));background:color-mix(in srgb, #7dd3fc 12%, var(--surface-2));box-shadow:none}
#farmAddCostRowBtn:hover,#farmAddRareItemBtn:hover,#mrAddRowBtn:hover{background:color-mix(in srgb, #7dd3fc 20%, var(--surface-2))}
.btn-block{width:100%}
.btn:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-error{color:var(--danger);font-size:.82rem;min-height:1.1em;margin:-.4rem 0 .6rem}
/* กล่อง Captcha (Cloudflare Turnstile) เหนือข้อความ error — กว้างเต็มการ์ด */
.auth-captcha{margin:.2rem 0 .9rem;min-height:65px}
.auth-captcha[hidden]{display:none}
.auth-switch{text-align:center;font-size:.85rem;color:var(--text-dim);margin-top:1.1rem}
.auth-switch button{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;font-size:inherit;padding:0}
.auth-note{font-size:.72rem;color:var(--text-dim);text-align:center;margin-top:1rem;line-height:1.5;border-top:1px dashed var(--border);padding-top:.85rem}

/* ---------- app shell ---------- */
/* จำกัดความกว้างรวมของแอพ (เมนูซ้าย 210 + เนื้อหาสูงสุด 1180 = 1390) แล้วจัดกึ่งกลางหน้าต่าง
   จอที่แคบกว่า 1390px จะไม่โดนผลอะไรเลย เลย์เอาต์เหมือนเดิมทุกอย่าง
   ถ้าไม่ใส่ margin:0 auto เนื้อหาจะไปกองชิดซ้ายและทิ้งที่ว่างไว้ขวาล้วนๆ บนจอกว้าง */
#appScreen{display:grid;grid-template-columns:210px 1fr;min-height:100vh;background:var(--bg);max-width:1390px;margin:0 auto}
/* เมนูซ้ายกลืนไปกับพื้นหลังหน้าเว็บ (ไม่มีแผงสีอ่อนกว่า ไม่มีเส้นคั่นแนวตั้ง)
   แบบเดียวกับเมนูซ้ายของ Facebook — ตัวเลือกเมนูจึงลอยอยู่บนพื้นหลังเดียวกันทั้งหน้า */
.rail{
  background:transparent;
  display:flex;flex-direction:column;align-items:stretch;
  padding:1rem .65rem;gap:.15rem;
}
.rail-brand{display:flex;align-items:center;justify-content:center;padding:.1rem .3rem .85rem;margin-bottom:.4rem;border-bottom:1px solid var(--border)}
/* ลิงก์เพจ Facebook บนเมนูซ้าย: ปุ่มแคปซูลสีฟ้า Facebook (#0866FF สีโลโก้ปัจจุบัน) ไอคอน f + ข้อความสีขาว */
.rail-logo-fb{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:.4rem .85rem;border:1px solid #0866FF;border-radius:999px;background:#0866FF;color:#fff;font-size:.8rem;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.rail-logo-fb svg{width:15px;height:15px;flex:none;fill:currentColor}
.rail-logo-fb:hover{background:#0758DB;border-color:#0758DB;transform:translateY(-1px)}
.rail-btn{
  width:100%;min-height:40px;border-radius:var(--radius-s);
  display:flex;align-items:center;gap:.65rem;justify-content:flex-start;
  padding:.5rem .6rem;
  color:var(--text-dim);cursor:pointer;position:relative;text-align:left;font:inherit;
  background:transparent;border:none;
}
.rail-btn .icon{flex:none}
.rail-btn.active{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.rail-btn:not(.active):not([disabled]):hover{background:var(--surface-hover);color:var(--text)}
.rail-btn[disabled]{opacity:.4;cursor:not-allowed}
.rail-btn .tip{
  font-size:.82rem;font-weight:600;line-height:1.25;
  white-space:normal;overflow-wrap:break-word;
}
/* ป้าย "ลด X%" ข้างเมนูเติมแพ็กเกจ — โชว์เฉพาะช่วงโปร หายเองเมื่อโปรจบ (updatePricingPromoCountdown · 15 ต.ค. 2569) */
/* ขนาดเล็กพอให้ "เติมแพ็กเกจ" ยังอยู่บรรทัดเดียว (ใหญ่กว่านี้ข้อความตัดเป็น 2 บรรทัด เมนูสูงกว่าอันอื่น) */
.rail-promo-tag{
  margin-left:auto;flex:none;padding:.05rem .32rem;border-radius:999px;
  background:#3a1f27;border:1px solid #7a3340;color:#ff6b6b;
  font-size:.6rem;font-weight:800;line-height:1.4;white-space:nowrap;pointer-events:none;
}
/* ผู้ใช้ขอ "อยู่บรรทัดเดียวกัน" — ล็อกไม่ให้ตัดบรรทัด เผื่อเครื่องที่ฟอนต์กว้างกว่า (ที่ว่างเหลือแค่ ~6px) */
.rail-btn[data-page="pricing"] .tip{white-space:nowrap}
.rail-badge{
  margin-left:auto;flex:none;min-width:16px;height:16px;padding:0 3px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-family:"JetBrains Mono",monospace;pointer-events:none;
}

/* min-width:0 จำเป็นเพราะ .content เป็นช่องขวาของ grid — ถ้าไม่ใส่ เนื้อหาที่บีบไม่ลง
   (เช่นการ์ดสถิติ 4 ใบ) จะดันทั้งหน้าให้เลื่อนซ้าย-ขวาแทนที่จะบีบตัวเอง */
.content{padding:1.4rem 1.75rem 3rem;max-width:1180px;width:100%;min-width:0}
.util-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:.9rem;margin-bottom:1.3rem;flex-wrap:wrap;
  padding:1rem 1.5rem;border-radius:var(--radius-l);
  background:
    linear-gradient(90deg, rgba(8,10,16,.75) 0%, rgba(8,10,16,.4) 55%, rgba(8,10,16,.75) 100%),
    url('../login-bg.jpg') center/cover no-repeat;
}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.topbar h1{font-size:1.4rem;margin:0 0 .2rem}
.topbar .sub{color:var(--text-dim);font-size:.86rem;margin:0}
.topbar-right{display:flex;align-items:center;gap:.9rem}
/* รูปตัวละครหน้าหัวข้อ (จับเวลาบอส / ยอดนักฟาร์ม / คลังไอเทม / สรุปซื้อ–ขาย) — รูปอยู่ซ้าย กินความสูงชื่อหน้า+คำอธิบาย */
:root{--page-title-art-h:60px} /* ความสูงรูปหน้าหัวข้อ — การ์ดรายการซื้อ–ขาย (#mrEntryPanel) ใช้ค่านี้จัดแนวด้วย */
.page-title-art{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;align-items:center}
.page-title-art>.page-title-img{grid-row:1 / span 2;display:block;width:auto;height:var(--page-title-art-h);align-self:center;pointer-events:none}
.page-title-art>picture.page-title-img>img{display:block;width:auto;height:var(--page-title-art-h)}
.page-title-art>:is(h1,h2,.sub,.dashboard-help){grid-column:2}
.page-title-art>:is(h1,h2):last-child{grid-row:1 / span 2}
@media(max-width:560px){
  .page-title-art{column-gap:.6rem}
  .page-title-art>.page-title-img,.page-title-art>picture.page-title-img>img{height:48px}
}
.clock{text-align:right}
.clock .time{font-size:1rem}
.clock .date{font-size:.72rem;color:var(--text-dim)}
.user-menu{display:flex;align-items:center;gap:.6rem;padding:.35rem .65rem .35rem .45rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);min-width:0;max-width:100%}
.user-menu .avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;flex:none}
.user-menu .who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
/* ชื่อยาว (เช่นบัญชีเก่าที่ชื่อเป็นอีเมล) ตัดด้วย … แทนที่จะดันแถบหัวเว็บล้นจอ */
.user-menu .name{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.user-menu .membership-time{font-size:.62rem;line-height:1.3;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.user-menu .membership-time.soon{color:var(--warn);font-weight:600}
.user-menu .icon-btn{flex:none}
.membership-pill{font-size:.64rem;padding:.05rem .4rem;border-radius:999px;width:fit-content;font-weight:600}
.membership-pill.ok{background:color-mix(in srgb, var(--success) 20%, transparent);color:var(--success)}
.membership-pill.soon{background:color-mix(in srgb, var(--warn) 22%, transparent);color:var(--warn)}
.membership-pill.expired{background:color-mix(in srgb, var(--danger) 22%, transparent);color:var(--danger)}
.icon-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.3rem;display:flex}
.icon-btn:hover{color:var(--danger)}
.points-chip{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:.8rem}
.points-chip .icon{width:15px;height:15px;color:var(--warn)}
.points-chip b{font-family:"JetBrains Mono";font-weight:800}
.points-chip small{color:var(--text-dim);font-weight:600;font-size:.72rem}

/* ---------- home view ---------- */
#view-home{position:relative}
#view-home::before,#view-home::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;opacity:.35;
}
#view-home::before{width:340px;height:340px;top:-120px;left:10%;background:var(--grad-a)}
#view-home::after{width:300px;height:300px;top:-80px;right:5%;background:var(--grad-c)}
#view-home > *{position:relative;z-index:1}

.home-banner-zone{
  position:relative;
  /* สูงขั้นต่ำเท่ากันทุกสถานะ (ล็อกอิน/ยังไม่ล็อกอิน) — ไม่งั้นตอนไม่มีการ์ดเรทกรอบจะเตี้ย รูปโดนตัดโลโก้ */
  min-height:272px;
  border-radius:var(--radius-l);overflow:hidden;
  background:
    linear-gradient(90deg, rgba(8,10,16,.75) 0%, rgba(8,10,16,.4) 55%, rgba(8,10,16,.75) 100%),
    url('home-banner.webp?v=20260928') center/cover no-repeat;
}
.home-banner-zone .util-bar{margin-bottom:0;padding:1rem 1.5rem 0;border-radius:var(--radius-l) var(--radius-l) 0 0;background:none}
.banner-wrap{margin-bottom:1.4rem}
/* จอคอม: การ์ดเรทซ้อนอยู่ในกรอบแบนเนอร์ ชิดขอบล่าง (อยู่ช่อง grid เดียวกัน) — เว้นตรงกลางให้เห็นโลโก้ */
@media (min-width:761px){
  .banner-wrap{display:grid}
  .banner-wrap > .home-banner-zone,.banner-wrap > .hero-row{grid-area:1/1}
  /* margin-top = เว้นที่ให้แถบบน (เวลา/แต้ม/ปุ่มออก — ความสูงจริงจาก --util-bar-h ใน app.js เพราะจอแคบแถบตัดเป็น 2 บรรทัด): การ์ดเยอะจนสูงเกินแบนเนอร์ → แบนเนอร์ยืดตาม ไม่ทับปุ่ม (ช่องเซิร์ฟไม่จำกัดแล้ว) */
  .banner-wrap > .hero-row{align-self:end;position:relative;z-index:1;margin-top:calc(var(--util-bar-h,4.5rem) + .75rem);padding:0 1.5rem 1.25rem}
}
.hero-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.5rem 1.75rem 2.2rem;
}
.hero-greet{min-width:0}
.hero-line1{font-size:1.05rem;color:var(--text-dim);font-weight:600;margin-bottom:.1rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-line2{
  font-size:2.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.hero-stats{display:flex;gap:.7rem;flex-wrap:wrap;margin-left:auto}
.stat-chip{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:.55rem .9rem;display:flex;flex-direction:column;gap:.3rem;min-width:150px;
}
.stat-chip-label{font-size:.66rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.stat-chip-value{font-size:1.1rem;font-weight:700;font-family:"JetBrains Mono"}

.rate-chip .rate-select{
  width:calc(100% - 16px);background:none;border:none;color:var(--text);font-size:.74rem;font-weight:700;
  padding:0 0 .2rem;margin:0;cursor:pointer;border-bottom:1px solid var(--border);
}
.rate-chip .rate-select option{background:var(--surface-2);color:var(--text)}
.rate-values{display:flex;gap:1rem}
.rate-values > div{display:flex;flex-direction:column;gap:.1rem}
.rate-label{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.rate-num{font-size:.95rem;font-weight:700;font-family:"JetBrains Mono"}
.rate-buy .rate-num{color:var(--danger)}
.rate-chip{position:relative;min-width:128px;padding:.45rem .6rem;gap:.2rem}
.rate-chip-remove{position:absolute;top:.35rem;right:.5rem;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.68rem;padding:0;line-height:1}
.rate-chip-remove:hover{color:var(--danger)}
/* ปุ่มเพิ่มเซิร์ฟเวอร์ชิดขวาสุดของแถวเสมอ (แม้การ์ดจะตัดขึ้นแถวใหม่) */
.rate-chip-add{margin-left:auto;border:1px dashed var(--border);background:transparent;color:var(--text-dim);cursor:pointer;align-items:center;justify-content:center;font-size:.8rem}
.rate-chip-add:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border));color:var(--text)}
.rate-chip-add-label{display:block}
/* ใช้ไปกี่ช่อง / ซื้อไว้ทั้งหมดกี่ช่อง */
.rate-chip-count{display:block;margin-top:.2rem;font-size:.72rem;font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--text-dim);opacity:.85}

.home-controlbar{display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.home-controlbar .search-wrap input{opacity:.6;cursor:not-allowed}
.btn-gradient{background:var(--gradient-btn);color:#fff;box-shadow:0 4px 20px color-mix(in srgb, var(--grad-c) 35%, transparent)}
.btn-gradient:hover{filter:brightness(1.08)}
.btn-gradient:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-sm{padding:.4rem .8rem;font-size:.78rem}

.panel-ticker{margin-bottom:1.4rem;padding:1.3rem 1.4rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ticker-head-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.panel-ticker .ticker-head-title h2{display:flex;align-items:center;gap:.4rem}
.panel-ticker .ticker-heading-icon{width:28px;height:28px;object-fit:contain;flex:none}
.ticker-item .poster{color:var(--text-dim);font-size:.68rem;font-weight:400}
.ticker-item a.poster{color:var(--accent);text-decoration:none;cursor:pointer}
.ticker-item a.poster:hover{text-decoration:underline}
.ticker-wrap{overflow:hidden;border-radius:var(--radius-m);background:var(--surface-2);border:1px solid var(--border);padding:1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;width:max-content;gap:.5rem;animation:ticker-scroll 26s linear infinite}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{white-space:nowrap;font-size:1rem;font-weight:600;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:0 .8rem;border-right:1px solid var(--border)}
.ticker-item .buy{color:var(--danger)}
.ticker-item .sell{color:var(--success)}
.ticker-item-sub{display:flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:400}
.ticker-countdown{color:var(--text-dim);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
}

.home-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1rem;align-items:stretch}
.home-left{display:flex;flex-direction:column;gap:1rem}
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;
}
.panel-head h2{font-size:.98rem;font-weight:700}
.chart-server-tag{color:var(--accent);font-weight:700}
.panel-hero{min-height:320px}
.chart-controls{display:flex;gap:.5rem;flex-wrap:wrap}
.chart-tf-select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.4rem .6rem;font-size:.8rem;cursor:pointer}
.seg-toggle{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.15rem}
.seg-btn{background:none;border:none;color:var(--text-dim);font-size:.72rem;font-weight:600;padding:.3rem .65rem;border-radius:999px;cursor:pointer}
.seg-btn.active{background:var(--accent);color:#fff}
/* ปุ่มสลับกราฟแท่ง/เส้น: ไอคอนเล็กหน้าข้อความ (เส้น = หยักแบบสายฟ้า ตามที่ลูกค้าเรียก) */
.chart-type-toggle .seg-btn{display:inline-flex;align-items:center;gap:.3rem}
.chart-type-toggle .seg-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chart-wrap{position:relative;height:190px}
.chart-wrap svg{width:100%;height:100%;display:block;overflow:visible;cursor:crosshair}
.chart-wrap svg text{font-family:"JetBrains Mono",monospace}
.chart-tooltip{
  position:absolute;top:8px;pointer-events:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:.5rem .65rem;font-size:.72rem;line-height:1.5;box-shadow:var(--shadow);z-index:5;min-width:118px;
}
.chart-tooltip .ct-time{color:var(--text-dim);font-size:.66rem;margin-bottom:.3rem;display:block}
.chart-tooltip .ct-row{display:flex;align-items:center;gap:.4rem;justify-content:space-between}
.chart-tooltip .ct-row + .ct-row{margin-top:.15rem}
.chart-tooltip .ct-key{display:flex;align-items:center;gap:.35rem;color:var(--text-dim);min-width:0}
.chart-tooltip .ct-swatch{width:10px;height:2px;border-radius:1px;flex:none}
.chart-tooltip .ct-val{font-weight:700;color:var(--text);font-family:"JetBrains Mono"}
.chart-legend{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
.chart-legend-row{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.chart-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--text-dim);cursor:pointer;background:none;border:none;padding:0}
.chart-legend-item .cl-dot{width:8px;height:8px;border-radius:50%;flex:none}
.chart-legend-item.chart-legend-dir{font-weight:600}
.chart-legend-item.off{opacity:.35}
.chart-header-price{font-size:.85rem;font-weight:500;color:var(--text-dim);margin-left:.3rem}
.chart-header-price b{font-size:1.05rem;font-weight:700}
.chart-info-price b.buy, .chart-header-price b.buy{color:var(--danger)}
.chart-info-price b.sell, .chart-header-price b.sell{color:var(--success)}
.chart-info-updated{color:var(--text-dim);font-size:.68rem;white-space:nowrap}
.chart-add-select{font-size:.8rem;padding:.3rem .75rem;max-width:180px}
.chart-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.chart-footer .mr-upload-note{flex:1;min-width:200px}
.panel-farm-revenue{min-height:320px}
.farm-series-filter{position:relative;display:flex;align-items:center;gap:.35rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.25rem .35rem .25rem .5rem}
.farm-series-chips{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.farm-series-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .5rem;border-radius:999px;font-size:.72rem;color:var(--text);white-space:nowrap}
.farm-series-chip .cl-dot{width:7px;height:7px;border-radius:50%;flex:none}
.farm-series-chip-x{background:none;border:none;color:inherit;opacity:.65;cursor:pointer;font-size:.6rem;padding:0;line-height:1}
.farm-series-chip-x:hover{opacity:1}
.farm-series-dropdown-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.15rem .3rem;font-size:.65rem}
.farm-series-dropdown-btn:hover{color:var(--text)}
.farm-series-dropdown{position:absolute;top:calc(100% + .4rem);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:var(--shadow);padding:.35rem;z-index:15;display:flex;flex-direction:column;gap:.2rem;min-width:150px}
.farm-series-dropdown-item{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--text);cursor:pointer;padding:.4rem .5rem;border-radius:6px;font-size:.78rem;text-align:left;width:100%}
.farm-series-dropdown-item:hover{background:var(--surface-hover)}
.farm-series-dropdown-item .cl-dot{width:8px;height:8px;border-radius:50%;flex:none}
.farm-series-dropdown-empty{color:var(--text-dim);font-size:.74rem;padding:.4rem .5rem;text-align:center}
.farm-kpi-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.farm-kpi-main{display:flex;align-items:center;gap:.7rem}
.farm-kpi-value{font-size:1.9rem;font-weight:800;font-family:"JetBrains Mono";letter-spacing:-.01em}
.farm-kpi-delta{font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:999px}
.farm-kpi-period{font-size:.78rem;color:var(--text-dim)}
.panel-farm-revenue .panel-head{flex-wrap:nowrap}
.panel-farm-revenue .panel-head h2{white-space:nowrap;flex:none}
.farm-revenue-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0}
#mrCategoryToggle{padding:.25rem}
#mrCategoryToggle .seg-btn{font-size:.88rem;padding:.5rem 1.1rem}
.farm-kpi-delta.up{background:color-mix(in srgb, var(--success) 18%, transparent);color:var(--success)}
.farm-kpi-delta.down{background:color-mix(in srgb, var(--danger) 18%, transparent);color:var(--danger)}
.farm-kpi-sub{font-size:.76rem;color:var(--text-dim);margin:0}
.panel-farm-cost .panel-head{align-items:center}
.farm-cost-items{display:flex;flex-direction:column;gap:.4rem}
.farm-cost-row{display:flex;align-items:center;gap:.4rem}
.farm-cost-row .farm-cost-name{flex:1 1 auto;min-width:0}
.farm-cost-row .farm-cost-qty{flex:0 0 48px;min-width:0}
.farm-cost-row .farm-cost-price{flex:0 0 68px;min-width:0}
.farm-cost-row .farm-cost-currency{flex:0 0 42px}
.farm-cost-row .mr-row-remove{flex:0 0 auto}
.farm-cost-row input,.farm-cost-row select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.45rem .5rem;font-size:.8rem}
.farm-cost-row select{cursor:pointer;padding-left:.3rem;padding-right:.15rem}
.farm-cost-row input[type="number"]::-webkit-outer-spin-button,
.farm-cost-row input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.farm-cost-row input[type="number"]{-moz-appearance:textfield}
.farm-exrate-row{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-dim);flex-wrap:wrap}
.farm-exrate-row input{width:110px;flex:none;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.4rem .5rem;font-size:.82rem}
.farm-exrate-row input.farm-exrate-invalid{border-color:var(--danger)}
#mrExRateField .farm-exrate-row input{width:85px}
.mr-exrate-hint{margin:.3rem 0 0;font-size:.72rem;color:var(--danger)}
.farm-exrate-error{margin:-.3rem 0 .7rem;font-size:.72rem;color:var(--danger)}
.farm-map-row{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-dim)}
.farm-map-row input{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.4rem .5rem;font-size:.82rem}
.farm-rare-heading{font-size:.76rem;color:var(--text-dim);margin-bottom:.1rem}
.farm-rare-items{display:flex;flex-direction:column;gap:.4rem}
.farm-rare-row{display:flex;align-items:center;gap:.4rem}
.farm-rare-row .farm-rare-name{flex:1 1 auto;min-width:0}
.farm-rare-row .farm-rare-qty{flex:0 0 48px;min-width:0}
.farm-rare-row .farm-rare-price{flex:0 0 68px;min-width:0}
.farm-earned-hint{font-size:.72rem;color:var(--text-dim);margin-top:.3rem}
.farm-rare-row .farm-rare-currency{flex:0 0 42px}
.farm-rare-row .mr-row-remove{flex:0 0 auto}
.farm-rare-row input,.farm-rare-row select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.45rem .5rem;font-size:.8rem}
.farm-rare-row select{cursor:pointer;padding-left:.3rem;padding-right:.15rem}
.farm-rare-row input[type="number"]::-webkit-outer-spin-button,
.farm-rare-row input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.farm-rare-row input[type="number"]{-moz-appearance:textfield}
/* ไอเทมหายากที่จำไว้ แต่จำนวน 0 (= รอบนี้ไม่ดรอป ไม่นับ) — ช่องอื่นจาง ช่องจำนวนชัดไว้ให้กรอก (15 ต.ค. 2569) */
.farm-rare-row.farm-rare-off > :not(.farm-rare-qty):not(.mr-row-remove){opacity:.5}
.farm-log-form{border-top:1px solid var(--border);padding-top:.8rem;display:flex;flex-direction:column;gap:.6rem}
.farm-log-fields{display:grid;grid-template-columns:.45fr 1.55fr;gap:.5rem}
.farm-log-fields-rare{grid-template-columns:1fr 1fr}
.farm-log-divider{border-top:1px solid var(--border)}
.farm-log-field{display:flex;flex-direction:column;gap:.3rem}
.farm-log-field label, .farm-log-field-label{font-size:.76rem;color:var(--text-dim)}
/* ป้าย Sv. ข้างหัวข้อ (ประวัติซื้อ–ขาย / กราฟเงินสุทธิ / กำไรสุทธิ ฟาร์ม) = ชิปสีทองเหมือนป้ายในการ์ดประวัติ */
.farm-revenue-server{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:20px;max-width:100%;padding:.1rem .45rem 0;border:1px solid rgba(216,180,103,.5);border-radius:999px;background:rgba(216,180,103,.15);box-shadow:none;color:#f6dfaf;font-size:.66rem;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.4rem;vertical-align:middle}
.farm-revenue-server:empty{display:none}
.mr-chart-server-tags{display:inline-flex;flex-wrap:wrap;gap:.3rem;margin-left:.4rem;vertical-align:middle}
.mr-chart-server-tags .farm-revenue-server{margin-left:0}
.farm-oc-toggle{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.35rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:.08rem .5rem;font-size:.66rem;font-weight:600;cursor:pointer;transition:border-color .12s ease, background .12s ease, color .12s ease}
.farm-oc-toggle:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}
.farm-oc-toggle.active{background:color-mix(in srgb, var(--accent) 22%, transparent);border-color:var(--accent);color:var(--text)}
.farm-log-field input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.55rem .65rem;font-size:.88rem;width:100%}
#farmHistoryList{display:flex;flex-direction:column;gap:.6rem}
.farm-history-day{border:2px solid var(--border);border-radius:var(--radius-s);padding:.5rem .55rem .55rem}
.farm-history-day-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.76rem;font-weight:700;color:var(--text);padding-bottom:.45rem;margin-bottom:.5rem;border-bottom:1px dashed var(--border)}
.farm-history-day-count{color:var(--text-dim);font-weight:500;font-size:.7rem}
.farm-history-day-total{margin-left:auto;font-family:"JetBrains Mono";font-weight:700;font-size:.72rem;white-space:nowrap}
.farm-history-day-list{display:flex;flex-direction:column;gap:.5rem}
.farm-history-day-toggle{margin-left:.5rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:.15rem .55rem;font-size:.66rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}
.farm-history-day-toggle:hover{border-color:var(--accent);color:var(--text)}
.farm-history-day-hidden-note{font-size:.68rem;color:var(--text-dim);font-style:italic;margin:0 0 .4rem}
/* อยู่ในแถบหัวของวัน ต่อจากปุ่ม "แสดงทั้งหมด" — ตัวเล็ก สีจาง ไม่หนา (หัวแถบเป็นตัวหนา) */
.farm-history-day-head .farm-history-day-hidden-note{margin:0;font-weight:400}
.farm-profit-pos{color:var(--success);font-family:"JetBrains Mono"}
.farm-profit-neg{color:var(--danger);font-family:"JetBrains Mono"}
.panel-farm-history .chart-tf-select{padding:.35rem .5rem;font-size:.78rem}
.farm-history-summary{font-size:.74rem;font-weight:500;color:var(--text-dim);margin-left:.4rem}
.farm-history-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border)}
.farm-history-pagination .farm-hist-size{grid-column:1;justify-self:start}
.farm-history-pagination .farm-hist-nav{grid-column:2;justify-self:center}
.farm-hist-size{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-dim)}
.farm-hist-size select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.25rem .4rem;font-size:.75rem}
.farm-hist-nav{display:flex;align-items:center;gap:.8rem}
.farm-cost-hover{border-bottom:1px dashed var(--text-dim);cursor:help}
.farm-profit-hover{border-bottom:1px dashed currentColor;cursor:help}
.farm-income-hover{border-bottom:1px dashed var(--text-dim);cursor:help}
.farm-cost-tooltip{position:fixed;top:auto;z-index:70;pointer-events:none;max-width:340px}
.farm-hist-page-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.3rem .7rem;font-size:.75rem;cursor:pointer}
.farm-hist-page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.farm-hist-page-btn:disabled{opacity:.4;cursor:not-allowed}
.farm-hist-page-info{font-size:.75rem;color:var(--text-dim)}
.hf-group{display:flex;flex-direction:column;gap:.3rem}
.hf-group label{font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
.hf-group select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.35rem .5rem;font-size:.74rem}
.panel-side{min-height:100%}
.items-card-a-grid{display:flex;flex-direction:column;gap:1rem}
.items-card-a-row{display:grid;gap:1rem}
.items-card-a-row-2{grid-template-columns:1fr 1fr}
.items-card-a-sub{min-height:180px}
.items-card-tier-a{position:relative;overflow:hidden}
.items-card-tier-a .panel-head,.items-card-tier-a .items-tier-count,.items-card-tier-a .items-tier-viewall{position:relative;z-index:1}
.items-card-a-art{position:absolute;right:10px;bottom:10px;width:112px;height:auto;opacity:.6;pointer-events:none;z-index:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.items-card-b{min-height:260px}
.items-card-c{min-height:660px}
.items-tier-count{font-size:1.3rem;font-weight:700;font-family:"JetBrains Mono"}
.items-tier-viewall{align-self:flex-start;background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:.78rem;font-weight:600}
.items-tier-viewall:hover{text-decoration:underline}
.items-tier-locked{opacity:.4;pointer-events:none;position:relative}
.items-tier-locked::after{content:"🔒 เติมแพ็กเกจ คลังไอเทม เพื่อปลดล็อก";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:.5rem;font-size:.72rem;font-weight:700;color:var(--text);background:color-mix(in srgb, var(--surface) 55%, transparent);border-radius:inherit;z-index:2}
.items-dropzone{transition:border-color .15s,background .15s}
.items-dropzone.items-drag-over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.items-pending-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.55rem .7rem;margin-bottom:.5rem;cursor:grab}
.items-pending-row:active{cursor:grabbing}
.items-pending-row.items-dragging{opacity:.4}
.items-pending-row:last-child{margin-bottom:0}
.items-pending-row-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.items-pending-name{font-weight:600;font-size:.85rem}
.items-pending-amount{font-family:"JetBrains Mono";font-weight:700;font-size:.85rem;color:var(--accent)}
.items-pending-breakdown{font-size:.74rem;color:var(--text-dim);margin-top:.2rem}
.items-pending-date{font-size:.7rem;color:var(--text-dim);margin-top:.15rem}
.items-detail-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.55rem .7rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.items-detail-row:last-child{margin-bottom:0}
.items-detail-right{display:flex;align-items:baseline;gap:.6rem;flex:none}
.items-detail-date{font-size:.7rem;color:var(--text-dim);white-space:nowrap}
.items-detail-breakdown{font-size:.7rem;color:var(--text-dim);white-space:nowrap}
.items-detail-row.items-detail-row-money{display:flex;flex-direction:column;align-items:stretch;gap:.3rem}
.items-detail-row-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.items-detail-source{font-size:.7rem;color:var(--text-dim)}
.items-undo-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.9rem;padding:.1rem .2rem;line-height:1}
.items-undo-btn:hover{color:var(--accent)}
/* รายการซื้อ-ขาย / ต้นทุนต่อกั้ม: ไม่ปักหมุด ไม่จำกัดความสูง ไม่มีแถบเลื่อนในตัว
   การ์ดจะยืดยาวตามจำนวน Slot/รายการที่กด "+ เพิ่ม" แล้วเลื่อนไปพร้อมเนื้อหาอื่นตามล้อเมาส์
   (เดิมปักหมุด + จำกัดความสูง ทำให้เพิ่มรายการเยอะแล้วต้องเลื่อนซ้อนสองชั้นในการ์ด) */
.panel-merchant-entry,.panel-farm-cost{min-height:0;align-self:start}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.field-row label{margin:0}
.chip.chip-server{
  padding-right:.4rem;gap:.35rem;display:inline-flex;align-items:center;cursor:pointer;
  border-color:var(--border);transition:border-color .12s ease, background .12s ease;
}
.chip.chip-server:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}
.chip.chip-server.selected{background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:var(--accent);color:var(--text)}
.chip-x{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.62rem;line-height:1;padding:0;display:flex}
.chip-x:hover{color:var(--danger)}
.mr-add-select{background:var(--surface-2);border:1px dashed var(--border);color:var(--text-dim);border-radius:999px;padding:.15rem .5rem;font-size:.68rem;cursor:pointer;flex:none}
.mr-add-select-sm{font-size:.62rem;padding:.1rem .4rem;max-width:130px}
.mr-items{display:flex;flex-direction:column;gap:.6rem}
.mr-item-row{display:flex;flex-direction:column;gap:.35rem}
.mr-item-row-main{display:grid;grid-template-columns:1fr .8fr .7fr auto;grid-template-areas:"name name name name" "price currency qty remove";gap:.4rem;align-items:start}
.mr-item-row-main .mr-name-wrap{grid-area:name}
.mr-item-row-main .mr-row-price{grid-area:price}
.mr-item-row-main .mr-row-currency{grid-area:currency}
.mr-item-row-main .mr-row-qty{grid-area:qty}
.mr-item-row-main .mr-row-remove{grid-area:remove;justify-self:end}
.mr-item-row input,.mr-item-row select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.45rem .5rem;font-size:.82rem;width:100%}
.mr-item-row input:disabled,.mr-item-row select:disabled{opacity:.65;cursor:not-allowed}
.mr-item-row input[readonly]{background:var(--surface);color:var(--text);cursor:not-allowed}
.mr-row-currency{cursor:pointer}
.mr-sell-source{display:flex;flex-direction:column;gap:.35rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.25rem;margin-bottom:.1rem}
.mr-stock-select{font-size:.78rem}
.mr-stock-info{font-size:.74rem;color:var(--text-dim)}
.mr-stock-info-warn{color:var(--danger);font-weight:600}
.mr-slot-section-locked{color:var(--text-dim);font-size:.76rem;padding:.1rem .2rem}
.mr-slot-section{display:flex;flex-direction:column;gap:.3rem;padding-left:.2rem}
.mr-slot-row{display:flex;gap:.4rem;align-items:center}
.mr-slot-row input{flex:1;font-size:.76rem}
.mr-slot-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.78rem;padding:.3rem}
.mr-slot-remove:hover{color:var(--danger)}
.mr-slot-add{align-self:flex-start;background:none;border:1px dashed var(--border);color:var(--text-dim);border-radius:var(--radius-s);padding:.3rem .65rem;font-size:.72rem;cursor:pointer}
.mr-slot-add:hover{border-color:var(--accent);color:var(--accent)}
.mr-name-wrap{position:relative;display:flex;align-items:center;gap:.4rem}
.mr-name-wrap .mr-row-name{flex:1 1 0%}
.mr-row-index{color:var(--text-dim);font-size:.82rem;flex:none;font-variant-numeric:tabular-nums}
.mr-item-suggest{
  position:absolute;top:calc(100% + .3rem);left:0;right:0;z-index:15;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  box-shadow:var(--shadow);max-height:180px;overflow-y:auto;padding:.3rem;
}
.mr-suggest-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .5rem;border-radius:6px;cursor:pointer;font-size:.8rem}
.mr-suggest-row:hover{background:var(--surface-hover)}
.mr-suggest-empty{color:var(--text-dim);font-size:.78rem;text-align:center;padding:.5rem}
.mr-row-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:.45rem .3rem}
.mr-row-remove:hover{color:var(--danger)}
.mr-row-remove:disabled{opacity:.3;cursor:not-allowed}
.mr-confirm-row{display:flex;gap:.5rem}
/* บัญชีฟรี: เหลือบันทึกได้อีกกี่ครั้งวันนี้ (ใต้ปุ่มบันทึก) */
.free-quota-note{margin:.45rem 0 0;font-size:.76rem;line-height:1.5;color:var(--text-dim);text-align:center}
.free-quota-note.is-empty{color:var(--warn);font-weight:700}
.mr-confirm-row .btn-block{flex:1}
.mr-entry-actions{display:flex;gap:.3rem}
.mr-entry-actions button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:.1rem .2rem}
.mr-entry-actions button:hover{color:var(--accent)}
.mr-entry-actions button.mr-del:hover{color:var(--danger)}
.panel-farm-cost.mr-entry-editing{border-color:var(--danger);box-shadow:0 0 0 1px rgba(239,90,86,.35)}
/* ยอดนักฟาร์ม: กำลังแก้ไขรายการไหน (เหนือปุ่มบันทึกการแก้ไข) */
.farm-edit-banner{margin:0 0 .55rem;padding:.5rem .7rem;border-radius:var(--radius-s);font-size:.78rem;line-height:1.5;font-weight:600;color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent)}
/* ชิปเซิร์ฟที่เลือกไม่ได้เพราะโควต้าเต็ม */
.share-chip.chip-locked{opacity:.4;cursor:not-allowed}
.server-quota-hint{margin-top:.5rem}
/* เซิร์ฟที่พักอยู่: การ์ดต้นทุนกลายเป็นโหมดดูอย่างเดียว */
.farm-retired-note{margin:.6rem 0 0;padding:.55rem .7rem;border-radius:var(--radius-s);font-size:.76rem;line-height:1.5;color:var(--warn);background:color-mix(in srgb, var(--warn) 12%, transparent);border:1px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.panel-farm-cost.server-retired .farm-log-form,
.panel-farm-cost.server-retired .farm-map-row,
.panel-farm-cost.server-retired .farm-cost-items,
.panel-farm-cost.server-retired .farm-exrate-row{opacity:.45}
.mr-entry.just-saved{animation:mr-flash 1.1s ease}
@keyframes mr-flash{
  0%{background:color-mix(in srgb, var(--success) 35%, var(--surface-2)); border-color:var(--success)}
  100%{background:var(--surface-2); border-color:var(--border)}
}
@media (prefers-reduced-motion: reduce){ .mr-entry.just-saved{animation:none} }
.mr-type-toggle{display:flex;gap:.4rem}
.mr-type-btn{flex:1;padding:.5rem;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.85rem;font-weight:600;cursor:pointer}
.mr-type-btn.active[data-type="buy"]{background:color-mix(in srgb, var(--danger) 20%, transparent);color:var(--danger);border-color:var(--danger)}
.mr-type-btn.active[data-type="sell"]{background:color-mix(in srgb, var(--success) 20%, transparent);color:var(--success);border-color:var(--success)}
.mr-type-badge{font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;white-space:nowrap}
.mr-type-badge.buy{background:color-mix(in srgb, var(--danger) 20%, transparent);color:var(--danger)}
.mr-type-badge.sell{background:color-mix(in srgb, var(--success) 20%, transparent);color:var(--success)}
.mr-entry.type-buy{border-left:3px solid var(--danger)}
.mr-entry.type-sell{border-left:3px solid var(--success)}
.mr-summary{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.mr-summary-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.mr-summary-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.5rem .5rem;text-align:center}
.mr-summary-label{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:.15rem}
.mr-summary-value{font-size:.92rem;font-weight:700;font-family:"JetBrains Mono"}
.mr-summary-value.buy{color:var(--danger)}
.mr-summary-value.sell{color:var(--success)}
.mr-summary-value.profit-pos{color:var(--accent)}
.mr-summary-value.profit-neg{color:var(--danger)}
/* ประวัติ ตามไอเทม: หนึ่งแถวต่อไอเทม (รายการ | ซื้อมา | ขายไป | เหลือ | กำไร)
   กดที่ชื่อเพื่อกางรายการซื้อ-ขายของไอเทมนั้น; ของที่ขายหมดแล้วพับรวมไว้กลุ่มล่าง */
.mr-it{display:flex;flex-direction:column;gap:.2rem}
.mr-it-row{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.95fr)) minmax(0,1.1fr);gap:.5rem;align-items:center;padding:.4rem .6rem;border-radius:var(--radius-s);background:var(--surface-2);border:1px solid var(--border)}
.mr-it-row.mr-ic{cursor:pointer}
.mr-it-row.mr-ic .mr-ic-body{cursor:default}
.mr-it-row.open{border-color:color-mix(in srgb, var(--accent) 55%, var(--border))}
.mr-it-head{background:transparent;border:none;padding:.1rem .6rem .2rem;font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.mr-ic-head{position:relative;display:flex;align-items:flex-start;gap:.4rem;background:none;border:none;color:var(--text);cursor:pointer;padding:0;text-align:left;font:inherit;min-width:0}
.mr-ic-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mr-ic-head:hover .mr-it-name{color:var(--accent)}
.mr-ic-head .mr-ic-chev{margin-top:.15rem}
/* ป้าย "New" ลอยที่มุมบนขวาของหัวการ์ด — ให้เห็นได้แม้การ์ดจะพับปิดอยู่ก็ตาม หายก็ต่อเมื่อกดเปิดการ์ดนั้นจริงๆ */
.mr-ic-new-badge{position:absolute;top:-.55rem;right:-.4rem;font-size:.6rem;font-weight:800;letter-spacing:.03em;color:#0b1220;background:var(--success);padding:.1rem .45rem;border-radius:999px;white-space:nowrap;z-index:1;pointer-events:none;animation:mr-new-glow 1.6s ease-in-out infinite}
@keyframes mr-new-glow{0%,100%{box-shadow:0 0 0 2px var(--surface-2),0 0 6px 1px color-mix(in srgb, var(--success) 55%, transparent)}50%{box-shadow:0 0 0 2px var(--surface-2),0 0 13px 4px color-mix(in srgb, var(--success) 90%, transparent)}}
@media (prefers-reduced-motion: reduce){.mr-ic-new-badge{animation:none;box-shadow:0 0 0 2px var(--surface-2),0 0 8px 2px color-mix(in srgb, var(--success) 70%, transparent)}}
.mr-it-namewrap{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.mr-it-name{font-weight:700;font-size:.82rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.mr-it-tags{display:flex;flex-wrap:wrap;gap:.25rem}
.mr-ic-chev{color:var(--text-dim);font-size:.7rem;transition:transform .15s;flex:none}
.mr-ic.open .mr-ic-chev,.mr-it-group.open .mr-ic-chev{transform:rotate(90deg)}
.mr-it-cell{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mr-it-cell i{display:none}
.mr-it-cell b{font-family:"JetBrains Mono";font-size:.8rem;font-weight:700;white-space:nowrap}
.mr-it-cell small{font-size:.66rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-it-cell small.mr-it-avg{color:var(--text);opacity:.75}
.mr-it-cell.buy b,.mr-it-cell.buy small{color:var(--danger)}
.mr-it-cell.sell b{color:var(--success)}
.mr-it-cell.left b{color:var(--warn)}
.mr-it-cell.left.zero b{color:var(--text-dim)}
.mr-it-cell.profit b.profit-pos{color:var(--accent)}
.mr-it-cell.profit b.profit-neg{color:var(--danger)}
.mr-it-cell.profit.none b{color:var(--text-dim);font-weight:500}
.mr-ic-body{grid-column:1 / -1;border-top:1px dashed var(--border);padding-top:.4rem;margin-top:.1rem;display:flex;flex-direction:column;gap:.35rem}
/* Per-day accordion inside an expanded item card (keeps a long-lived item like M from
   dumping its entire transaction history as one giant flat list). */
.mr-ic-day-head{position:relative;display:flex;align-items:center;gap:.5rem;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.35rem .6rem;cursor:pointer;font-size:.74rem;font-weight:600;color:var(--text);text-align:left;font-family:inherit}
.mr-ic-day-head:hover{border-color:var(--text-dim)}
.mr-ic-day-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mr-ic-day.open .mr-ic-day-head .mr-ic-chev{transform:rotate(90deg)}
.mr-ic-day-count{color:var(--text-dim);font-size:.68rem;font-weight:500}
.mr-ic-day-tot{margin-left:auto;font-family:"JetBrains Mono";font-weight:600;font-size:.68rem;white-space:nowrap}
.mr-ic-day-tot .sell{color:var(--success)}
.mr-ic-day-tot .buy{color:var(--danger)}
.mr-ic-day .mr-tx-list{margin-top:.3rem}
.mr-it-group-wrap{margin-top:.5rem;border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);border-radius:var(--radius-s);background:color-mix(in srgb, var(--accent) 6%, transparent);overflow:hidden}
.mr-it-group{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;font-size:.76rem;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border:none;border-radius:0;cursor:pointer;width:100%;text-align:left;font-family:inherit}
/* กรอบรอบปุ่มนี้ตั้ง overflow:hidden ไว้ ป้ายลอยยื่นออกนอกขอบแบบการ์ดอื่นจะโดนตัด — ให้อยู่ในบรรทัดแทน */
.mr-it-group .mr-ic-new-badge{position:static;flex:none}
.mr-it-group:hover{color:var(--text);background:color-mix(in srgb, var(--accent) 20%, transparent)}
.mr-it-group .mr-ic-chev{color:inherit}
.mr-it-group-wrap .mr-it{padding:.5rem;gap:.4rem}
.mr-it-group-profit{margin-left:auto;font-family:"JetBrains Mono";font-weight:700;font-size:.72rem}
.mr-it-group-profit.profit-pos{color:var(--accent)}
.mr-it-group-profit.profit-neg{color:var(--danger)}
@media (max-width:640px){
  .mr-it-head{display:none}
  .mr-it-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.3rem;column-gap:.4rem}
  .mr-it-row .mr-ic-head{grid-column:1 / -1}
  .mr-it-cell i{display:block;font-style:normal;font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
  .mr-it-cell b{font-size:.76rem}
}
/* ประวัติ: control bar + item cards (expandable) + day groups + transaction rows */
.mr-hist-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.7rem}
.mr-hist-search{flex:1;min-width:140px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.38rem .8rem;font-size:.78rem;font-family:inherit}
.mr-hist-search:focus{outline:none;border-color:var(--accent)}
.mr-hist-bar .chart-tf-select{padding:.35rem .5rem;font-size:.74rem}
.mr-cat-tag{font-size:.6rem;font-weight:700;padding:.08rem .4rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.mr-tx-list{display:flex;flex-direction:column;gap:.25rem}
.mr-tx{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;align-items:center;gap:.6rem;padding:.35rem .55rem;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);font-size:.76rem}
.mr-tx.type-buy{border-left-color:var(--danger)}
.mr-tx.type-sell{border-left-color:var(--success)}
.mr-tx-main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-tx-calc{color:var(--text-dim);font-family:"JetBrains Mono";font-size:.7rem;white-space:nowrap}
.mr-tx-total{font-family:"JetBrains Mono";font-weight:700;white-space:nowrap}
.mr-tx-total small{font-weight:500;color:var(--text-dim);font-size:.66rem}
.mr-tx-main.has-warn{white-space:normal;overflow:visible;text-overflow:clip}
.mr-tx-new-badge{display:inline-block;margin-left:.35rem;font-size:.6rem;font-weight:800;letter-spacing:.03em;color:#0b1220;background:var(--success);padding:.05rem .4rem;border-radius:999px;vertical-align:middle;animation:mr-new-pulse 1.6s ease-in-out infinite}
@keyframes mr-new-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.mr-tx-new-badge{animation:none}}
.mr-tx-nostock-warn{display:inline-block;margin-left:.5rem;font-size:.68rem;font-weight:700;color:var(--danger);background:color-mix(in srgb, var(--danger) 14%, transparent);border-radius:var(--radius-s);padding:.15rem .45rem;white-space:normal}
.mr-tx.type-buy .mr-tx-total{color:var(--danger)}
.mr-tx.type-sell .mr-tx-total{color:var(--success)}
.mr-tx-time{color:var(--text-dim);font-size:.68rem;white-space:nowrap;font-family:"JetBrains Mono"}
.mr-tx .mr-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.8rem;padding:0 .1rem;line-height:1}
.mr-tx .mr-del:hover{color:var(--danger)}
.mr-tx.just-saved{animation:mr-flash 1.1s ease}
@media (prefers-reduced-motion: reduce){ .mr-tx.just-saved{animation:none} }
@media (max-width:600px){
  .mr-tx{grid-template-columns:auto minmax(0,1fr) auto auto;row-gap:.15rem}
  .mr-tx-calc{grid-column:2;grid-row:2}
  .mr-tx-time{grid-column:3 / span 2;grid-row:2;justify-self:end}
}
.mr-dropzone{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-direction:column;
  border:1.5px dashed var(--border);border-radius:var(--radius-m);padding:1.1rem;
  color:var(--text-dim);font-size:.8rem;text-align:center;cursor:pointer;
  background:var(--surface-2);transition:border-color .12s ease, background .12s ease;
}
.mr-dropzone:hover,.mr-dropzone:focus-visible{border-color:var(--accent);color:var(--text);background:color-mix(in srgb, var(--accent) 8%, var(--surface-2))}
.mr-dropzone.dragover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--surface-2))}
@keyframes mr-spin{to{transform:rotate(360deg)}}
/* ---------- รูปไอเทม ---------- */
/* ปุ่มรูปท้ายช่องชื่อของแต่ละแถว: ว่าง = กรอบประ, มีรูป = รูปย่อ, รูปจากตอนซื้อ = กรอบสีม่วงอ่อน */
.mr-row-img{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-s);border:1px dashed var(--border);background:var(--surface-2);color:var(--text-dim);cursor:pointer;overflow:hidden;transition:border-color .12s ease,color .12s ease}
.mr-row-img:hover,.mr-row-img:focus-visible{border-color:var(--accent);color:var(--text)}
.mr-row-img .icon{width:16px;height:16px}
.mr-row-img.has-img{border-style:solid;cursor:zoom-in}
.mr-row-img.inherited{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}
.mr-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.mr-row-img img:not([src]){visibility:hidden}
.mr-row-img.loading{border-style:solid;cursor:progress}
.mr-row-img.loading::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb, var(--accent) 30%, transparent);border-top-color:var(--accent);animation:mr-spin .7s linear infinite}
/* ไอคอนรูปหน้าชื่อไอเทมในประวัติ/คลัง — ชี้เมาส์ที่ชื่อ = รูปเด้ง, กดไอคอน = เปิดรูปใหญ่ (มือถือใช้ทางนี้) */
.item-img-hover{cursor:default}
.item-img-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px;width:16px;height:16px;margin-right:.3rem;color:var(--accent);cursor:zoom-in;border-radius:3px}
.item-img-ico .icon{width:13px;height:13px}
.item-img-ico:hover{background:color-mix(in srgb, var(--accent) 18%, transparent)}
.item-img-pop{position:fixed;z-index:120;pointer-events:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow);padding:.3rem;min-width:120px;min-height:44px;display:flex;align-items:center;justify-content:center}
.item-img-pop img{display:block;max-width:min(360px,60vw);max-height:70vh;border-radius:calc(var(--radius-m) - 4px)}
.item-img-status{font-size:.74rem;color:var(--text-dim);padding:.4rem .6rem}
#itemImageLightbox .confirm-backdrop{z-index:92}
.item-img-lightbox-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:93;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow);padding:2.3rem .9rem .9rem;width:max-content;max-width:92vw;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.item-img-lightbox-close{position:absolute;top:.35rem;right:.4rem;width:30px;height:30px;border:none;border-radius:var(--radius-s);background:none;color:var(--text-dim);font-size:.95rem;cursor:pointer}
.item-img-lightbox-close:hover,.item-img-lightbox-close:focus-visible{background:var(--surface-2);color:var(--text)}
.item-img-lightbox-stage{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:90px}
.item-img-lightbox-stage img{display:block;max-width:min(86vw,680px);max-height:70vh;border-radius:var(--radius-s)}
.item-img-lightbox-caption{margin:0;font-size:.82rem;font-weight:600;text-align:center;max-width:46ch;word-break:break-word}
.item-img-lightbox-box .confirm-actions{width:100%;min-width:240px}
@media (prefers-reduced-motion: reduce){ .mr-row-img.loading::after{animation:none} }
.mr-upload-note{font-size:.68rem;color:var(--text-dim);line-height:1.5;margin:0}
.mr-total-group{display:flex;flex-direction:column;gap:.5rem}
.mr-total{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:.6rem .8rem;
}
.mr-total-label{font-size:.78rem;color:var(--text-dim)}
.mr-total-value{font-size:1.2rem;font-weight:700;color:var(--success)}
#farmCostTotal{color:var(--danger)}
.mr-history{border-top:1px solid var(--border);padding-top:.8rem;flex:1;display:flex;flex-direction:column;min-height:0}
#mrHistoryList{overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:0}
.mr-entry{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.5rem .7rem;font-size:.78rem}
.mr-entry-top{display:flex;justify-content:space-between;font-weight:600}
.mr-entry-sub{color:var(--text-dim);font-size:.72rem;margin-top:.15rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.3rem}
.mr-entry-sub.farm-entry-sub{justify-content:flex-start;gap:.5rem}
.farm-rare-tag{font-size:.68rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;white-space:nowrap}
.farm-rare-tag.sold{color:var(--success);background:color-mix(in srgb, var(--success) 16%, transparent)}
.farm-rare-tag.pending{color:var(--text-dim);background:var(--surface-2);border:1px dashed var(--border)}
.mr-entry-lines{margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:.35rem}
.mr-edited-hover{border-bottom:1px dashed var(--text-dim);cursor:help}
.mr-rate-hover{border-bottom:1px dashed var(--text-dim);cursor:help}
.mr-line-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;font-size:.75rem;color:var(--text-dim)}
.mr-item-name{color:var(--text)}
.mr-item-name-slots{min-width:0}
.mr-item-slots-inline{color:var(--text-dim);font-size:.72rem}
.mr-empty{color:var(--text-dim);font-size:.8rem;text-align:center;padding:1rem 0}
.panel-empty{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--text-dim);font-size:.82rem;line-height:1.6;
  border:1px dashed var(--border);border-radius:var(--radius-m);padding:1.2rem;
  background:var(--surface-2);
}

.party-panel{margin-bottom:1.1rem}
.party-panel.viewing-party{border-left:3px solid var(--grad-b)}
.party-panel-controls{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;min-width:0}
.party-panel-summary{font-size:.78rem;color:var(--text-dim);min-width:0;overflow-wrap:anywhere}
.party-member-row{padding:.55rem .8rem;gap:.6rem}
.party-member-row .admin-topup-user{font-size:.84rem;font-weight:600}
.party-role-tag{color:var(--text-dim);font-weight:400;font-size:.72rem}
.party-panel-body{display:flex;flex-direction:column;gap:.9rem}
.party-panel-body .admin-topup-list{margin-top:0}
/* แจ้งเรื่องแพ็กเกจของหัวปาร์ตี้ (ล็อก = แดง / ใกล้หมด = เหลือง) โทนเดียวกับแถบเตือนแพ็กเกจ .expiry-banner */
.party-panel-note{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin:.2rem 0 .9rem;padding:.6rem .85rem;border-radius:var(--radius-m);border:1px solid;font-size:.8rem;line-height:1.45;color:var(--text)}
.party-panel-note > span{flex:1;min-width:200px}
.party-panel-note .btn{flex:none}
.party-panel-note.is-locked{background:color-mix(in srgb, var(--danger) 14%, transparent);border-color:color-mix(in srgb, var(--danger) 55%, transparent)}
.party-panel-note.is-soon{background:color-mix(in srgb, var(--warn) 14%, transparent);border-color:color-mix(in srgb, var(--warn) 55%, transparent)}

/* auto-fit: ที่แคบลงจะลดจาก 4 ใบต่อแถวเป็น 2 หรือ 1 เองโดยไม่ดันหน้าให้ล้น */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1.3rem}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem}
.stat-tile-top{display:flex;align-items:center;justify-content:space-between}
.stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.stat-icon.kills{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent)}
.stat-icon.items{background:color-mix(in srgb, var(--success) 18%, transparent);color:var(--success)}
.stat-icon.sold{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.stat-icon.share{background:color-mix(in srgb, var(--grad-b) 18%, transparent);color:var(--grad-b)}
.stat-delta{font-size:.7rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--surface-2);color:var(--text-dim)}
.stat-delta.up{color:var(--success);background:color-mix(in srgb, var(--success) 16%, transparent)}
.stat-tile .num{font-size:1.6rem;font-weight:700;font-family:"JetBrains Mono";font-variant-numeric:tabular-nums}
.stat-tile .lbl{font-size:.8rem;color:var(--text-dim)}
.stat-tile .stat-sub{font-size:.78rem;font-weight:600;color:var(--text);font-family:"JetBrains Mono";font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-tile .link{font-size:.74rem;align-self:flex-start;background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
/* รูปบอส/ไอเทมล่าสุดในการ์ดสถิติ — วางขวาของตัวเลข ไม่มีกรอบ/พื้นหลัง ปล่อยให้รูปลอยเลย */
.stat-main{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.stat-main-txt{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.stat-thumb{width:84px;height:84px;flex:none;display:flex;align-items:center;justify-content:center}
.stat-thumb img{width:100%;height:100%;object-fit:contain}

.toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;position:relative}
.search-wrap{position:relative;flex:1;min-width:200px}
.search-wrap svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.search-wrap input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.55rem .7rem .55rem 2.1rem;font-size:.88rem}

.search-results{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  box-shadow:var(--shadow);max-height:340px;overflow-y:auto;padding:.4rem;
}
.search-results-hint{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;padding:.5rem .6rem .3rem}
.search-result-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:var(--radius-s);cursor:pointer}
.search-result-row:hover{background:var(--surface-hover)}
.search-result-row.added{cursor:default;opacity:.55}
.search-result-row.added:hover{background:none}
.search-result-avatar{width:34px;height:34px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none;overflow:hidden}
.search-result-avatar img{width:100%;height:100%;object-fit:cover}
.search-result-main{flex:1;min-width:0}
.search-result-title{font-size:.86rem;font-weight:600}
.search-result-sub{font-size:.72rem;color:var(--text-dim)}
.search-result-action{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap}
.search-result-row.added .search-result-action{color:var(--success)}
.search-results-empty{color:var(--text-dim);font-size:.82rem;text-align:center;padding:1rem}
/* ท้ายรายการค้นหา: ไม่เจอบอส → สร้างบอสเอง · แจ้ง Admin — ติดล่างกล่องเสมอ ไม่ต้องเลื่อนหา (12 ต.ค. 2569) */
.search-results-foot{position:sticky;bottom:-.4rem;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .6rem;margin:.3rem -.4rem -.4rem;padding:.55rem .7rem;background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 var(--radius-m) var(--radius-m);font-size:.8rem;color:var(--text-dim)}
.search-results-foot .btn{padding:.3rem .75rem;font-size:.78rem}
.search-results-foot small{flex-basis:100%;font-size:.7rem;color:var(--text-dim)}

.roster{display:flex;flex-direction:column;gap:.75rem}
.boss-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:.9rem 1rem;position:relative;transition:box-shadow .3s ease}
/* กระพริบกรอบแดงตอนใกล้เกิด (≤1 นาที) และตอนเพิ่งเกิดไปแล้วไม่เกิน 5 นาที
   พอเลย 5 นาทีไปแล้ว (state-overdue-long) จะหยุดกระพริบ เหลือแค่ตัวเลขแดงค้างไว้ */
.boss-card.state-critical,
.boss-card.state-overdue{animation:card-pulse 1.1s ease-in-out infinite}
@keyframes card-pulse{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}
@media (prefers-reduced-motion: reduce){
  .boss-card.state-critical,
  .boss-card.state-overdue{animation:none}
  .boss-card.shake{animation:none}
}
.bc-close{background:none;border:none;color:var(--text-dim);cursor:pointer;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none}
.bc-close:hover{background:var(--surface-2);color:var(--danger)}
/* แบ่งเป็น 3 ช่อง: ซ้าย (อันดับ+รูป+ชื่อ) / Map / ขวา (เวลา+ช่องกรอก+ปุ่ม)
   ช่องซ้ายกับขวากว้างเท่ากัน Map จึงอยู่กึ่งกลางการ์ดพอดีทุกความกว้างจอ
   ฝั่งขวาใช้ minmax(max-content,1fr) กันโดนบีบจนล้นตอนจอไม่กว้างพอ */
.bc-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);gap:.9rem;align-items:center}
.bc-left{display:flex;align-items:center;gap:.9rem;min-width:0}
.bc-right{display:flex;align-items:center;justify-content:flex-end;gap:.9rem}
.bc-rank{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:var(--surface-2);color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));flex:none}
.bc-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);margin:0 .6rem;opacity:.6;flex:none}
.bc-avatar{width:96px;height:96px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:2.8rem;flex:none;overflow:hidden}
.bc-avatar img{width:100%;height:100%;object-fit:contain}
.bc-main{min-width:0;flex:1 1 auto}
.bc-title{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-sub{font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.bc-killedby{font-size:.72rem;color:var(--accent);margin-top:.25rem;display:flex;align-items:center;gap:.3rem}
.bc-map{width:125px;height:125px;border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative;flex:none;cursor:crosshair}
.bc-map svg{width:100%;height:100%;display:block}
.bc-map img{width:100%;height:100%;object-fit:cover;display:block}
.bc-pin{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--danger);border:1px solid var(--surface);box-shadow:0 0 0 1px var(--danger);pointer-events:none}
.bc-time-block{text-align:right;width:100px;flex:none}
.bc-time{font-size:1.15rem;font-weight:700}
.bc-time.state-warning{color:var(--warn)}
.bc-time.state-critical{color:var(--danger)}
/* เกิดไปแล้ว = แดงตลอด ทั้งช่วงกระพริบ (≤5 นาที) และหลังจากนั้น จนกว่าจะกดฆ่าใหม่ */
.bc-time.state-overdue,
.bc-time.state-overdue-long{color:var(--danger)}
.bc-time.idle{color:var(--text-dim)}
.bc-time-sub{font-size:.68rem;color:var(--text-dim);margin-top:.1rem}
.bc-delay-pill{font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:999px;background:color-mix(in srgb, var(--warn) 22%, transparent);color:var(--warn);margin-top:.25rem;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap;border:none;cursor:pointer}
.bc-delay-pill:hover{background:color-mix(in srgb, var(--warn) 34%, transparent)}
.bc-input{width:90px;flex:none;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.45rem .55rem;font-size:.82rem;text-align:center}
.bc-kill-btn{padding:.5rem .9rem}
.bc-kill-btn.bc-kill-btn-img{background:none;border:none;padding:0;cursor:pointer;width:70px;height:63px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .1s ease}
.bc-kill-btn.bc-kill-btn-img img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.bc-kill-btn.bc-kill-btn-img:hover{transform:scale(1.08)}
.bc-kill-btn.bc-kill-btn-img:active{transform:scale(.95)}
.bc-kill-btn.bc-kill-btn-img.is-saving,.bc-kill-btn.bc-kill-btn-img:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.35)}
/* บอกว่ากด MVP = จับเวลาจากตอนนี้ (ผู้ใช้แจ้ง 9 ต.ค. 2569 — คนไม่รู้ เลยพิมพ์เวลาเอง): "กดเมื่อตาย" ในปุ่มใต้รูป */
.bc-kill-btn.bc-kill-btn-img.has-caption{height:auto;flex-direction:column;gap:.15rem}
.bc-kill-btn.bc-kill-btn-img.has-caption img{width:70px;height:63px}
.bc-kill-caption{font-size:.66rem;font-weight:700;line-height:1.1;color:#f4c95d;white-space:nowrap}

.bc-items{margin-top:.75rem;padding-top:.7rem;border-top:1px dashed var(--border);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.bc-items-label{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-right:.2rem}
.item-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.3rem .65rem .3rem .5rem;font-size:.78rem;cursor:pointer;color:var(--text-dim);transition:all .12s ease}
.item-chip:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--border))}
.item-chip .dot{width:16px;height:16px;border-radius:5px;background:color-mix(in srgb, var(--accent) 25%, transparent);display:flex;align-items:center;justify-content:center;font-size:.6rem}
.item-chip.selected{background:color-mix(in srgb, var(--accent) 18%, transparent);border-color:var(--accent);color:var(--text)}
.item-chip.selected .dot{background:var(--accent);color:#fff}
.item-chip .dot.has-img{background:var(--surface);overflow:hidden}
.item-chip .dot.has-img img{width:100%;height:100%;object-fit:contain;display:block}
.item-chip.selected .dot.has-img{background:var(--accent);box-shadow:0 0 0 2px var(--accent)}

.empty-note{color:var(--text-dim);font-size:.85rem;text-align:center;padding:2.5rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m)}

.confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80}
.confirm-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:1.3rem;width:min(320px,90vw);box-shadow:var(--shadow)}
/* ป็อปอัป "วิธีใช้" — กว้างพอดีกับบรรทัดที่ยาวที่สุด ไม่ตัดขึ้นบรรทัดใหม่ (มี max-width+scroll กันจอแคบมากๆ เป็นทางออกฉุกเฉินเท่านั้น) */
.howto-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:1.5rem 2.2rem 1.7rem 1.7rem;width:max-content;max-width:95vw;max-height:85vh;overflow:auto;box-shadow:var(--shadow)}
.howto-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:var(--text-dim);font-size:1rem;cursor:pointer;padding:.4rem;line-height:1;border-radius:50%}
.howto-close:hover{color:var(--text);background:var(--surface-2)}
.howto-title{margin:0 0 .85rem;font-size:1.15rem;font-weight:800;color:var(--accent);white-space:nowrap}
.howto-body{display:flex;flex-direction:column;gap:.4rem;font-size:.86rem;color:var(--text-dim);line-height:1.6}
.howto-body div{white-space:nowrap}
.howto-body .howto-sub{font-weight:800;color:var(--text);margin-top:.5rem}
.howto-body .howto-sub:first-child{margin-top:0}
.howto-body .howto-warn{color:var(--danger);font-weight:700}
/* the generic yes/no confirm dialog can be triggered from inside other modals
   (e.g. delete inside "ประกาศของฉัน") — it must always render above them */
#confirmOverlay .confirm-backdrop{z-index:90}
#confirmOverlay .confirm-box{z-index:91}
/* บัญชีหมดอายุ / ใกล้หมดอายุ */
#expiryOverlay .confirm-backdrop{z-index:85}
#expiryOverlay .confirm-box{z-index:86}
.expiry-msg{margin:0 0 1.1rem;font-size:.88rem;line-height:1.55;color:var(--text);white-space:pre-line}
/* ป๊อปอัปแพ็กเกจแบบจัดรูป: ชื่อแพ็ก (หนา) + วันที่ → กรอบเรื่องปาร์ตี้ (เหลือง/แดง) → คำแนะนำตัวเล็ก */
.expiry-msg.is-rich{white-space:normal}
.pkg-pop-item{display:block;margin-bottom:.55rem}
.pkg-pop-item > b{display:block;font-size:.95rem;font-weight:700}
.pkg-pop-item > span{display:block;font-size:.84rem;color:var(--text-dim)}
.pkg-pop-alert{display:block;margin:.8rem 0;padding:.6rem .8rem;border-radius:var(--radius-m);border:1px solid;font-size:.84rem;line-height:1.5}
.pkg-pop-alert > b{display:block;margin-bottom:.15rem}
.pkg-pop-alert.is-warn{background:color-mix(in srgb, var(--warn) 14%, transparent);border-color:color-mix(in srgb, var(--warn) 55%, transparent)}
.pkg-pop-alert.is-danger{background:color-mix(in srgb, var(--danger) 14%, transparent);border-color:color-mix(in srgb, var(--danger) 55%, transparent)}
.pkg-pop-note{display:block;margin-top:.7rem;font-size:.78rem;line-height:1.5;color:var(--text-dim)}
.pkg-pop-sep{display:block;height:1px;margin:.9rem 0;background:var(--border)}
/* เลือกเซิร์ฟเวอร์ที่เล่น (ตอนสมัคร + หน้าตั้งค่า) */
#serverPickOverlay .confirm-backdrop{z-index:87}
#serverPickOverlay .confirm-box{z-index:88}
.server-pick-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.6rem}
.server-pick-list .share-chip{font-size:.84rem;padding:.35rem .8rem}
.server-pick-list .share-chip.on{font-weight:600}
.expiry-banner{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.7rem 1rem;border-radius:var(--radius-m);margin-bottom:1rem;border:1px solid;font-size:.84rem;line-height:1.45}
.expiry-banner.expired{background:color-mix(in srgb, var(--danger) 14%, transparent);border-color:color-mix(in srgb, var(--danger) 55%, transparent);color:var(--text)}
.expiry-banner.soon{background:color-mix(in srgb, var(--warn) 14%, transparent);border-color:color-mix(in srgb, var(--warn) 55%, transparent);color:var(--text)}
.expiry-banner-text{flex:1;min-width:200px}
.expiry-banner .btn{flex:none}
/* โหมดดูอย่างเดียว: ปุ่ม/ช่องที่ "ทำรายการ" จางลงให้รู้ว่าใช้ไม่ได้ (ตัวกันจริงอยู่ที่ JS) */
body.ro-mode #postAnnouncementBtn, body.ro-mode .ticker-post-caret, body.ro-mode #mrServerChips, body.ro-mode #mrCategoryToggle, body.ro-mode #mrTypeToggle,
body.ro-mode #mrExRateInput, body.ro-mode #mrItemRows, body.ro-mode #mrAddRowBtn, body.ro-mode #mrConfirm, body.ro-mode #mrImageInput, body.ro-mode #mrDropzone,
body.ro-mode #mrHistoryList [data-del], body.ro-mode #mrHistoryList [data-undo-ids],
body.ro-mode #farmExRateInput, body.ro-mode #farmMapInput, body.ro-mode #farmCostItems, body.ro-mode #farmAddCostRowBtn, body.ro-mode #farmRareItems, body.ro-mode #farmAddRareItemBtn,
body.ro-mode #farmCountInput, body.ro-mode #farmOcToggle, body.ro-mode #farmEarnedInput, body.ro-mode #farmLogConfirm, body.ro-mode #farmCancelEdit, body.ro-mode [data-farm-edit], body.ro-mode [data-farm-del],
body.ro-mode #addPartyMemberBtn, body.ro-mode [data-remove-member], body.ro-mode [data-leave-party], body.ro-mode .bc-kill-btn, body.ro-mode .bc-input, body.ro-mode .bc-close, body.ro-mode .item-chip, body.ro-mode [data-minutes],
body.ro-mode #historyDeleteAll, body.ro-mode .hist-del, body.ro-mode .share-chip, body.ro-mode .loot-act, body.ro-mode .sold-amount, body.ro-mode .sold-currency, body.ro-mode [data-sold-save], body.ro-mode [data-sold-edit], body.ro-mode [data-sold-clear],
body.ro-mode .items-dropzone, body.ro-mode .items-pending-row, body.ro-mode #itemsDetailList [data-action]{opacity:.45;cursor:not-allowed}
.confirm-message{margin:0 0 1.1rem;font-size:.88rem;color:var(--text);text-align:center;line-height:1.5}
.confirm-detail{display:block;margin-top:.4rem;font-size:.74rem;color:var(--text-dim)}
.cloud-rejected-list{margin:.5rem 0 0;padding-left:1.1rem;text-align:left;display:grid;gap:.35rem}.cloud-rejected-list small{color:var(--warn)}
.confirm-warehouse-note{margin-top:.5rem;font-size:.74rem;color:var(--warning, #f2c94c)}
.farm-oc-hint-box{width:min(500px,90vw)}
.farm-oc-hint-message{text-align:left;white-space:nowrap}
@media (max-width:560px){ .farm-oc-hint-message{white-space:normal} }
.farm-oc-hint-checkbox{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--text-dim);margin-bottom:1.1rem;cursor:pointer}
.post-announce-box{width:min(360px,90vw);text-align:left}
.post-announce-title{margin:0 0 1rem;font-size:1rem}
.post-announce-field{margin-bottom:.9rem}
.post-announce-field label{display:block;font-size:.76rem;color:var(--text-dim);margin-bottom:.3rem}
.post-announce-field select, .post-announce-field input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.5rem .6rem;font-size:.85rem}
.topup-box{width:min(360px,90vw);text-align:left}
.topup-rate{margin:0 0 .8rem;font-size:.78rem;color:var(--text-dim)}
.topup-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.9rem}
.topup-preset-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.5rem .3rem;font-size:.76rem;font-weight:700;cursor:pointer;font-family:"JetBrains Mono"}
.topup-preset-btn.active{background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:var(--accent);color:var(--accent)}
.topup-methods{display:flex;gap:.4rem}
.topup-method-btn{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius-s);padding:.5rem .4rem;font-size:.78rem;font-weight:600;cursor:pointer}
.topup-method-btn.active{background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:var(--accent);color:var(--accent)}
.topup-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.6rem .8rem;font-size:.85rem;text-align:center;margin-bottom:.8rem}
.topup-summary b{color:var(--warn);font-family:"JetBrains Mono";font-size:1.05rem}
#topupOverlay .topup-box{width:min(400px,calc(100vw - 32px));box-sizing:border-box;padding:1.25rem;max-height:calc(100dvh - 32px);overflow-y:auto}
#topupOverlay [hidden]{display:none!important}
#topupOverlay .topup-presets{grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem;margin-bottom:.8rem}
#topupOverlay .topup-summary{display:grid;gap:.45rem;text-align:left;padding:.8rem;margin:.85rem 0}
#topupOverlay .topup-summary > div{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
#topupOverlay .topup-summary b{font-size:1.3rem;font-variant-numeric:tabular-nums}
#topupOverlay .confirm-actions{display:flex;gap:.5rem;margin-top:.75rem}
#topupOverlay #topupCreateQrBtn{flex:1;white-space:normal;opacity:1;background:var(--gradient-brand);color:#fff;cursor:pointer}
#topupOverlay #topupCreateQrBtn:disabled{opacity:.5;cursor:not-allowed}
#topupOverlay .topup-amount-error{display:block;margin-top:.4rem;font-size:.76rem;color:#ffb4b4}
#topupOverlay .confirm-backdrop{background:rgba(3,8,18,.72);backdrop-filter:blur(5px)}
#topupOverlay .topup-box{border:1px solid rgba(104,151,230,.55);border-radius:20px;background:linear-gradient(145deg,rgba(35,55,91,.98),rgba(15,26,46,.99) 66%);box-shadow:inset 0 1px 0 rgba(218,231,255,.1),inset 0 -24px 34px rgba(5,12,28,.2),0 20px 54px rgba(0,0,0,.48),0 0 22px rgba(77,133,231,.12);padding:1.4rem}
#topupOverlay .topup-title{margin:0;font-size:1.2rem;line-height:1.25;color:#edf5ff;text-shadow:0 1px 0 rgba(0,0,0,.38)}
#topupOverlay .topup-rate{display:grid;gap:.6rem;margin:.35rem 0 1rem;color:#b9c9df;font-size:.8rem;line-height:1.5}
#topupOverlay .topup-rate-copy{color:#b9d2ff;font-weight:700}
#topupOverlay .topup-notice{display:flex;align-items:flex-start;gap:.35rem;padding:.45rem .6rem;border:1px solid rgba(239,182,83,.38);border-radius:9px;background:rgba(129,87,27,.2);color:#f5c878;font-size:.71rem;line-height:1.5}
#topupOverlay .topup-presets{gap:.45rem;margin:0 0 1rem}
#topupOverlay .topup-preset-btn{min-height:39px;border-color:rgba(108,148,213,.38);border-radius:9px;background:linear-gradient(145deg,rgba(54,80,126,.28),rgba(20,32,54,.72));color:#d6e5fc;box-shadow:inset 0 1px 0 rgba(198,219,255,.05);transition:transform 170ms ease,border-color 170ms ease,background 170ms ease,box-shadow 170ms ease}
#topupOverlay .topup-preset-btn:hover{transform:translateY(-1px);border-color:rgba(132,181,255,.7);background:rgba(65,103,167,.35);box-shadow:0 4px 12px rgba(38,84,166,.18)}
#topupOverlay .topup-preset-btn.active{border-color:rgba(125,169,255,.88);background:linear-gradient(135deg,rgba(78,125,212,.72),rgba(116,92,204,.7));color:#fff;box-shadow:inset 0 1px 0 rgba(232,240,255,.24),0 0 13px rgba(94,145,255,.2)}
#topupOverlay .post-announce-field{margin-bottom:1rem}
#topupOverlay .post-announce-field label{color:#b6c8e0;font-size:.76rem;font-weight:600;margin-bottom:.4rem}
#topupOverlay #topupCustomAmount{box-sizing:border-box;width:100%;min-height:43px;border-color:rgba(111,156,228,.46);border-radius:10px;background:rgba(10,21,39,.7);color:#eef5ff;box-shadow:inset 0 1px 0 rgba(213,228,255,.06);transition:border-color 170ms ease,box-shadow 170ms ease,background 170ms ease}
#topupOverlay #topupCustomAmount::placeholder{color:#8295b2}
#topupOverlay #topupCustomAmount:focus{outline:none;border-color:#80b0ff;background:rgba(13,27,50,.9);box-shadow:0 0 0 3px rgba(89,148,255,.16),inset 0 1px 0 rgba(213,228,255,.08)}
#topupOverlay #topupCustomAmount[aria-invalid="true"]{border-color:rgba(255,116,125,.75);background:rgba(88,30,44,.24);box-shadow:0 0 0 3px rgba(255,91,104,.11)}
#topupOverlay .topup-summary{gap:.15rem;margin:1rem 0;padding:.75rem .85rem;border:1px solid rgba(96,143,218,.36);border-radius:12px;background:linear-gradient(145deg,rgba(16,31,55,.78),rgba(9,18,33,.92));box-shadow:inset 0 1px 0 rgba(194,218,255,.07)}
#topupOverlay .topup-summary > div{min-height:30px;padding:.2rem 0;color:#aebfd6;font-size:.78rem}
#topupOverlay .topup-summary > div+div{border-top:1px solid rgba(148,177,224,.14)}
#topupOverlay .topup-summary b{font-size:1.2rem;font-weight:800}
#topupOverlay .topup-summary > div:first-child b{color:#f3c76d;text-shadow:0 0 9px rgba(243,199,109,.13)}
#topupOverlay .topup-summary > div:last-child b{color:#84d9c0;text-shadow:0 0 9px rgba(92,211,181,.13)}
#topupOverlay .confirm-actions{gap:.6rem;margin-top:1rem}
#topupOverlay .confirm-actions .btn{flex:1;min-height:42px;border-radius:10px;font-size:.83rem;font-weight:800}
#topupOverlay #topupCancelBtn{border-color:rgba(123,153,200,.48);background:rgba(38,55,84,.62);color:#cfdbed}
#topupOverlay #topupCancelBtn:hover{border-color:rgba(166,195,240,.66);background:rgba(53,75,112,.78)}
#topupOverlay #topupCreateQrBtn{border:1px solid rgba(171,193,255,.68);background:linear-gradient(105deg,#639aff,#9b7be5);box-shadow:inset 0 1px 0 rgba(243,247,255,.26),0 7px 18px rgba(97,126,236,.25);transition:filter 170ms ease,transform 170ms ease,box-shadow 170ms ease}
#topupOverlay #topupCreateQrBtn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(243,247,255,.3),0 9px 22px rgba(108,134,246,.34)}
#topupOverlay .topup-qr-panel{display:grid;grid-template-columns:138px minmax(0,1fr);gap:.75rem;padding:.8rem;border:1px solid rgba(109,157,231,.4);border-radius:13px;background:rgba(7,17,34,.7);box-shadow:inset 0 1px 0 rgba(210,228,255,.06)}
#topupOverlay .topup-qr-frame{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#fff;padding:.4rem;overflow:hidden}
#topupOverlay .topup-qr-frame img{display:block;width:100%;height:100%;object-fit:contain}
/* QR used up (expired / failed / paid): hide the code itself so it can't be scanned again, show why instead. */
#topupOverlay .topup-qr-frame{position:relative}
#topupOverlay .topup-qr-frame.is-covered img{visibility:hidden}
#topupOverlay .topup-qr-frame.is-covered::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;padding:.5rem;text-align:center;font-size:.8rem;font-weight:800;line-height:1.35;color:#5b6b82;background:repeating-linear-gradient(135deg,#f3f5f9 0 8px,#e8ecf2 8px 16px)}
#topupOverlay .topup-qr-details{display:grid;align-content:center;gap:.38rem}
#topupOverlay .topup-qr-details>div{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.7rem;color:#aebfd6}
#topupOverlay .topup-qr-details b{font-size:.78rem;color:#edf5ff;font-variant-numeric:tabular-nums;text-align:right}
#topupOverlay .topup-qr-details>div:first-child b{color:#f3c76d}
#topupOverlay .topup-qr-details>div:nth-child(2) b{color:#84d9c0}
#topupOverlay .topup-payment-status{grid-column:1/-1;padding:.45rem .6rem;border-radius:9px;text-align:center;font-size:.75rem;font-weight:700}
#topupOverlay .topup-payment-status.pending{color:#b9d7ff;background:rgba(66,112,181,.2);border:1px solid rgba(105,159,236,.34)}
#topupOverlay .topup-payment-status.credited{color:#99e6c7;background:rgba(47,143,106,.2);border:1px solid rgba(83,205,155,.4)}
#topupOverlay .topup-payment-status.failed{color:#ffb4ba;background:rgba(150,47,64,.2);border:1px solid rgba(239,91,106,.4)}
#topupOverlay .topup-payment-status.review{color:#f5c878;background:rgba(139,94,29,.2);border:1px solid rgba(235,181,82,.4)}
#topupOverlay .topup-payment-status.expired{color:#c7cfdd;background:rgba(80,92,112,.24);border:1px solid rgba(147,160,183,.32)}
@media(max-width:480px){#topupOverlay .topup-box{padding:1.05rem;border-radius:18px}#topupOverlay .topup-presets{grid-template-columns:repeat(3,minmax(0,1fr))}#topupOverlay .confirm-actions{flex-direction:column}#topupOverlay .confirm-actions .btn{width:100%}}
@media(max-width:420px){#topupOverlay .topup-qr-panel{grid-template-columns:1fr}#topupOverlay .topup-qr-frame{width:min(190px,100%);justify-self:center}#topupOverlay .topup-qr-details{width:100%}}
.points-topup-btn{width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:.8rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:.1rem}
.points-topup-btn:hover{filter:brightness(1.15)}
.post-announce-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.post-announce-check{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text);width:76px;flex:none;cursor:pointer}
.post-announce-row input[type="text"]{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.5rem .6rem;font-size:.85rem}
.post-announce-note{font-size:.72rem;color:var(--text-dim);margin:.4rem 0 1.1rem;line-height:1.4}
ul.post-announce-note{padding-left:1.1rem;list-style:disc}
ul.post-announce-note li{margin-bottom:.3rem}
ul.post-announce-note li:last-child{margin-bottom:0}
/* select ปกติลงสีแค่บางส่วนของ option ไม่ได้ เลยใช้ปุ่มแทนเพื่อให้ "(N แต้ม)" ขึ้นสีเตือนได้ */
.announce-duration-toggle{display:flex;flex-wrap:wrap;gap:.4rem}
.announce-duration-btn{flex:1 1 0;min-width:0;padding:.45rem .3rem;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.78rem;font-weight:600;cursor:pointer;text-align:center;line-height:1.35}
.announce-duration-btn.active{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);border-color:var(--accent)}
.announce-duration-btn:disabled{opacity:.5;cursor:not-allowed}
.announce-duration-cost{display:block;color:var(--warn);font-size:.7rem;font-weight:700;margin-top:.1rem}
@media(max-width:420px){.announce-duration-toggle{gap:.3rem}.announce-duration-btn{padding:.45rem .1rem;font-size:.72rem}.announce-duration-cost{font-size:.64rem;white-space:nowrap}}
.ticker-post-group{position:relative;display:flex;align-items:stretch;border-radius:var(--radius-s);background:linear-gradient(135deg,#292a29,#1a2434);box-shadow:0 0 0 1px rgba(207,168,82,.6),0 2px 10px rgba(190,144,47,.14)}
.ticker-post-group .btn-sm{border-top-right-radius:0;border-bottom-right-radius:0}
.ticker-post-caret{background:color-mix(in srgb, #7dd3fc 12%, var(--surface-2));color:#7dd3fc;border:1px solid color-mix(in srgb, #7dd3fc 45%, var(--border));border-top-right-radius:var(--radius-s);border-bottom-right-radius:var(--radius-s);padding:0 .5rem;cursor:pointer;font-size:.7rem}
#postAnnouncementBtn,#tickerPostMenuToggle{background:linear-gradient(135deg,#b9954d,#d4b66f);color:#201a10;border-color:#d6b568;box-shadow:inset 0 1px 0 rgba(255,235,183,.25);font-weight:700;transition:background .18s ease,box-shadow .18s ease}
#tickerPostMenuToggle{border-left-color:rgba(65,46,12,.3);display:inline-flex;align-items:center;justify-content:center}
#postAnnouncementBtn:hover,#tickerPostMenuToggle:hover{background:linear-gradient(135deg,#caaa60,#e1c585);box-shadow:inset 0 1px 0 rgba(255,242,208,.35),0 0 8px rgba(214,181,104,.2);filter:none}
.ticker-post-menu{position:absolute;top:calc(100% + .4rem);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:var(--shadow);padding:.3rem;z-index:20;min-width:140px}
.ticker-post-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:.5rem .6rem;font-size:.82rem;border-radius:var(--radius-s);cursor:pointer}
.ticker-post-menu button:hover{background:var(--surface-2)}
.my-announce-box{width:min(420px,90vw);text-align:left}
#myAnnouncementsList{display:flex;flex-direction:column;gap:.5rem;max-height:320px;overflow-y:auto;margin-bottom:1rem}
.my-announce-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.6rem .7rem;font-size:.82rem}
.my-announce-row-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.my-announce-row-sub{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font-size:.72rem;color:var(--text-dim)}
.my-announce-empty{color:var(--text-dim);font-size:.85rem;text-align:center;padding:1.5rem 0}
/* แอดมินเห็นประกาศของทุกคน — ชื่อเจ้าของประกาศต่อท้าย (สีจาง) */
.my-announce-owner{color:var(--text-dim)}
.confirm-actions{display:flex;gap:.6rem}
.confirm-actions .btn{flex:1}

.slideover-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
.slideover{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--surface);border-left:1px solid var(--border);z-index:51;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.slideover-head{padding:1.2rem 1.2rem .8rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.slideover-head h2{margin:0;font-size:1.05rem}
.slideover-body{padding:1rem 1.2rem;overflow-y:auto;flex:1}
.h-tabs{display:flex;gap:.4rem;margin-bottom:.8rem}
.h-tabs button{flex:1;padding:.45rem;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.82rem;cursor:pointer;font-weight:600}
.h-tabs button.active{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);border-color:var(--accent)}
.h-filter{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-dim);margin-bottom:.9rem}
.log-row{padding:.7rem 0;border-bottom:1px solid var(--border);display:flex;gap:.7rem;align-items:center}
.log-avatar{width:44px;height:44px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none;overflow:hidden}
.log-avatar img{width:100%;height:100%;object-fit:contain}
.log-body{flex:1;min-width:0}
.log-row:last-child{border-bottom:none}
.log-row .when{font-size:.72rem;color:var(--text-dim)}
.log-row .boss{font-weight:600;font-size:.9rem;margin:.15rem 0 .3rem}
.chip-row{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.18rem .6rem;font-size:.76rem}
.loot-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.history-more{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.7rem;padding:.55rem .7rem;border:1px dashed var(--border);border-radius:var(--radius-s);font-size:.76rem;color:var(--text-dim)}
.loot-summary>div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.5rem .6rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.loot-summary .lbl{font-size:.68rem;color:var(--text-dim)}
.loot-summary b{font-size:.86rem;overflow-wrap:anywhere}
.loot-filter{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap}
.loot-filter button{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.76rem;cursor:pointer}
.loot-filter button.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent)}
.loot-act{height:24px;padding:0 .55rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.72rem;cursor:pointer;flex:none;white-space:nowrap}
.loot-act:hover{color:var(--text);border-color:var(--text-dim)}
.hist-by{font-size:.72rem;color:var(--text-dim);margin:-.15rem 0 .3rem}
.loot-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.loot-head .boss{margin:0}
.loot-line{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.4rem;font-size:.78rem}
.loot-lbl{color:var(--text-dim);font-size:.72rem;min-width:2.6rem}
.loot-each{color:var(--text-dim);font-size:.72rem}
.share-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.18rem .6rem;font-size:.74rem;color:var(--text-dim);cursor:pointer}
.share-chip.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent)}
/* ✓ ของชิป "เซิร์ฟเวอร์ที่เล่น" (หน้าตั้งค่า + popup ตอนสมัคร) ย้อมทองแยกจากสีชื่อเซิร์ฟ — ดู chipLabelHtml */
.chip-check-gold{color:var(--warn);font-weight:800}
.sold-amount{width:7.5rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.3rem .5rem;font-size:.8rem}
.sold-currency{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.3rem .4rem;font-size:.78rem}
.membership-pill.neutral{background:var(--surface-2);color:var(--text-dim)}
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.hist-del{background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:.8rem;line-height:1;flex:none;display:flex;align-items:center;justify-content:center}
.hist-del:hover{color:var(--danger);border-color:var(--danger)}
.loot-head-r{display:flex;align-items:center;gap:.4rem;flex:none}
.item-ic{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:.3rem;border-radius:3px}
.item-ic-lg{width:22px;height:22px;vertical-align:-5px}
.h-actions{display:flex;justify-content:flex-end;margin:-.3rem 0 .6rem}

/* ---------- ประวัติการล่า: minimal, scoped to this drawer ---------- */
#historyOverlay{
  --history-bg:#192233;
  --history-soft:#202c40;
  --history-line:#303e53;
  --history-muted:#b4c0d2;
  --history-selected:#2b3d58;
  --history-success:#8dd9b0;
}
#historyOverlay .slideover-backdrop{background:rgba(8,13,22,.62)}
#historyOverlay .slideover{
  width:min(540px,100vw);background:var(--history-bg);
  border-color:var(--history-line);box-shadow:-16px 0 48px rgba(0,0,0,.24);
}
#historyOverlay .slideover-head{
  flex:none;min-height:76px;padding:16px 24px;
  border-color:var(--history-line);gap:16px;
}
#historyOverlay .slideover-head h2{font-size:1.15rem;font-weight:700}
#historyOverlay .slideover-head .icon-btn{
  width:44px;height:44px;border-radius:10px;color:var(--history-muted);
}
#historyOverlay .slideover-body{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;
  gap:16px 8px;min-height:0;padding:20px 24px 32px;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--history-line) transparent;
}
#historyOverlay .h-tabs{
  grid-column:1/-1;gap:4px;margin:0;padding:4px;
  background:#111b2b;border-radius:12px;
}
#historyOverlay .h-tabs button{
  min-width:0;min-height:44px;padding:8px;border:0;border-radius:8px;
  background:transparent;color:var(--history-muted);font-size:.875rem;
}
#historyOverlay .h-tabs button.active{
  background:var(--history-selected);color:#e0ebff;
  box-shadow:inset 0 -2px 0 var(--accent);
}
#historyOverlay .h-filter{
  gap:8px;min-height:40px;margin:0;font-size:.8rem;color:var(--history-muted);cursor:pointer;
}
#historyOverlay .h-filter input{width:17px;height:17px;margin:0;accent-color:var(--accent);flex:none}
#historyOverlay .h-filter:has(input:disabled){cursor:not-allowed}
/* ช่วงเวลา (วันนี้ / 7วัน / 30วัน / ทั้งหมด) แทนช่องติ๊ก "แสดงเฉพาะวันนี้" เดิม */
#historyOverlay .h-filter{display:flex;align-items:center;cursor:default}
#historyOverlay .h-filter>span{white-space:nowrap}
#historyOverlay #historyRange{min-height:40px;min-width:110px;padding:8px 10px;border-color:var(--history-line);border-radius:8px;background:#131e2f;color:var(--text);font-family:inherit;font-size:.8125rem}
#historyOverlay .h-actions{align-items:center;margin:0}
#historyOverlay .h-actions:has(>button[hidden]){display:none}
#historyOverlay #historyDeleteAll{
  min-height:40px;padding:8px 0 8px 8px;border:0;background:transparent;
  color:#d9a4a5;font-size:.75rem;font-weight:500;white-space:normal;
}
#historyOverlay #historyList{grid-column:1/-1;min-width:0}
#historyOverlay .loot-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 20px;
  background:transparent;border:0;border-radius:0;
}
#historyOverlay .loot-summary>div{
  --summary-accent:#a8cfff;
  --summary-value:#d4e6ff;
  --summary-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8cfff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='9' cy='5' rx='6' ry='3'/%3E%3Cpath d='M3 5v5c0 1.7 2.7 3 6 3s6-1.3 6-3V5M3 10v5c0 1.7 2.7 3 6 3M18 9c1.8.5 3 1.4 3 2.5 0 1.7-2.7 3-6 3M9 13v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-6.5'/%3E%3C/svg%3E");
  position:relative;min-width:0;min-height:0;
  flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:6px;padding:12px;border:1px solid color-mix(in srgb,var(--summary-accent) 24%,#26354b);
  border-left:2px solid var(--summary-accent);border-radius:10px;
  background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--summary-accent) 9%,transparent),transparent 72%),#1d2a3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 14px rgba(5,12,23,.12);
}
#historyOverlay .loot-summary>div:first-child{
  --summary-accent:#f0cb8b;
  --summary-value:#ffe4b3;
  --summary-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0cb8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 13L3 8l9-5ZM3 8h18M8 8l4 13 4-13M8 8l4-5 4 5'/%3E%3C/svg%3E");
}
#historyOverlay .loot-summary>div:last-child{
  --summary-accent:#97e4c3;
  --summary-value:#c1f2dc;
  --summary-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397e4c3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M3 21v-3a6 6 0 0 1 12 0v3M16 4a3 3 0 0 1 0 6M18 13a6 6 0 0 1 3 5v3'/%3E%3C/svg%3E");
}
/* Icons sit above the labels so all three compact cards keep their text width. */
#historyOverlay .loot-summary>div::before{
  content:"";width:20px;height:20px;flex:none;
  background:var(--summary-icon) center/contain no-repeat;opacity:.8;pointer-events:none;
}
#historyOverlay .loot-summary .lbl{
  max-width:100%;font-size:.75rem;line-height:1.6;color:#c2cedf;
}
#historyOverlay .loot-summary b{
  max-width:100%;margin:0;text-align:left;color:var(--summary-value);
  font-size:1rem;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;text-wrap:pretty;
}
#historyOverlay .loot-filter{gap:8px;margin:0 0 4px}
#historyOverlay .loot-filter button{
  min-height:40px;max-width:100%;padding:8px 12px;border:1px solid transparent;
  border-radius:8px;background:transparent;color:var(--history-muted);
  font-size:.8rem;line-height:1.5;overflow-wrap:anywhere;
}
#historyOverlay .loot-filter button.active{
  background:var(--history-selected);border-color:var(--history-selected);color:#dce9ff;font-weight:600;
}
#historyOverlay .log-row{align-items:flex-start;gap:12px;padding:22px 0;border-color:var(--history-line)}
#historyOverlay .log-avatar{
  width:64px;height:72px;border:0;border-radius:0;background:transparent;
  box-shadow:none;overflow:visible;
}
#historyOverlay .log-body{overflow-wrap:anywhere}
#historyOverlay .log-row .boss{font-size:1rem;line-height:1.5;font-weight:600}
#historyOverlay .log-row .when,#historyOverlay .hist-by{
  font-size:.75rem;line-height:1.7;color:var(--history-muted);overflow-wrap:anywhere;
}
#historyOverlay .hist-head{align-items:flex-start;gap:12px}
#historyOverlay .hist-by{margin:4px 0 8px}
#historyOverlay .chip-row{gap:6px}
#historyOverlay .chip{max-width:100%;padding:4px 8px;border:0;border-radius:6px;font-size:.75rem}
/* Keep the existing DOM and button ancestors; only the avatar is positioned. */
#historyOverlay .loot-row{position:relative;display:block}
#historyOverlay .loot-row>.log-avatar{position:absolute;top:22px;left:0}
#historyOverlay .loot-head{min-height:40px;margin-left:80px;align-items:flex-start;gap:12px}
#historyOverlay .loot-head .boss{min-width:0;margin:2px 0 0}
#historyOverlay .loot-head-r{gap:8px;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
#historyOverlay .loot-row .when{margin:4px 0 20px 80px}
#historyOverlay .membership-pill{padding:4px 8px;font-size:.6875rem;line-height:1.5;white-space:nowrap}
#historyOverlay .membership-pill.ok{background:#243c36;color:var(--history-success)}
#historyOverlay .membership-pill.soon{background:#3b3325;color:#e8c17d}
#historyOverlay .membership-pill.neutral{background:var(--history-soft);color:var(--history-muted)}
#historyOverlay .hist-del{
  width:32px;height:32px;border-color:transparent;border-radius:8px;color:var(--history-muted);
}
#historyOverlay .loot-act{
  height:32px;padding:0 10px;border-color:var(--history-line);border-radius:8px;
  background:transparent;font-size:.75rem;color:var(--history-muted);
}
#historyOverlay .loot-line{gap:8px;margin-top:12px;font-size:.875rem}
#historyOverlay .loot-lbl{min-width:32px;font-size:.75rem;color:var(--history-muted)}
#historyOverlay .share-chip{
  min-height:36px;max-width:100%;padding:6px 10px;border-color:var(--history-line);
  border-radius:8px;background:transparent;font-size:.75rem;line-height:1.5;
  color:var(--history-muted);overflow-wrap:anywhere;
}
#historyOverlay .share-chip.on{background:var(--history-selected);border-color:#5578a9;color:#dce9ff}
#historyOverlay .loot-each{font-size:.75rem;line-height:1.6;color:var(--history-muted);overflow-wrap:anywhere}
#historyOverlay .loot-line>b{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#historyOverlay .loot-line:has(>.sold-amount){
  display:grid;grid-template-columns:auto minmax(0,180px) 76px auto;
  align-items:center;justify-content:start;gap:8px;
}
#historyOverlay .loot-line:has(>.sold-amount)>.loot-lbl{grid-column:1;white-space:nowrap}
#historyOverlay .sold-amount,#historyOverlay .sold-currency{
  width:100%;min-width:0;min-height:40px;padding:8px 10px;
  border-color:var(--history-line);border-radius:8px;background:#131e2f;
  font-family:inherit;font-size:.875rem;line-height:1.5;
}
#historyOverlay .sold-amount::placeholder{color:var(--history-muted);opacity:1}
#historyOverlay .loot-line .btn{min-height:44px;padding:10px 14px;font-size:.8rem;border-radius:8px}
#historyOverlay .loot-line:has(>.sold-amount)>.btn{min-height:40px;padding:8px 12px}
#historyOverlay [data-sold-save]{background:var(--accent);color:var(--accent-ink);box-shadow:none}
#historyOverlay [data-sold-clear]{grid-column:1/-1;justify-self:end}
#historyOverlay .loot-line:has(>b){
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 8px;
  padding:8px 12px;border:1px solid color-mix(in srgb,#a8cfff 24%,#26354b);
  border-left:2px solid #a8cfff;border-radius:10px;
  background:radial-gradient(ellipse at top right,rgba(168,207,255,.07),transparent 72%),#1d2a3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
#historyOverlay .loot-line:has(>b)>.loot-lbl{grid-column:1;grid-row:1}
#historyOverlay .loot-line:has(>b)>b{
  grid-column:2;grid-row:1;min-width:0;color:#d4e6ff;font-size:.9375rem;line-height:1.5;
}
#historyOverlay .loot-line:has(>b)>.loot-each{grid-column:1/3;grid-row:2}
#historyOverlay [data-sold-edit]{
  grid-column:3;grid-row:1/3;align-self:center;
  border-color:#405775;background:rgba(168,207,255,.035);color:#d4e6ff;
}
#historyOverlay .history-more{
  flex-wrap:wrap;margin-top:16px;padding:16px 0 0;border:0;border-top:1px solid var(--history-line);
  border-radius:0;color:var(--history-muted);font-size:.75rem;
}
#historyOverlay .history-more .btn{min-height:44px}
#historyOverlay .empty-note{padding:44px 16px;margin:0;color:var(--history-muted);font-size:.875rem;text-align:center}
#historyOverlay :is(button,input,select):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){
  #historyOverlay .h-tabs button:not(.active):hover,#historyOverlay .loot-filter button:not(.active):hover,
  #historyOverlay .share-chip:not(:disabled):hover,#historyOverlay .loot-act:hover{
    background:var(--history-soft);color:var(--text);
  }
  #historyOverlay .hist-del:hover,#historyOverlay #historyDeleteAll:hover{background:#382b36;color:#ffb4b0}
}
@media(max-width:540px){
  #historyOverlay .slideover{width:100%;border-left:0}
  #historyOverlay .slideover-head{min-height:72px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
  #historyOverlay .slideover-body{padding:16px 16px max(24px,env(safe-area-inset-bottom));gap:12px 8px}
  #historyOverlay .h-filter,#historyOverlay #historyDeleteAll{min-height:44px}
  #historyOverlay .loot-summary{gap:6px;margin-bottom:16px}
  #historyOverlay .loot-summary>div{gap:6px;padding:10px 8px}
  #historyOverlay .loot-summary>div::before{width:18px;height:18px}
  #historyOverlay .loot-summary b{font-size:.78125rem;letter-spacing:-.02em}
  #historyOverlay .loot-filter:has([data-loot-filter]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  #historyOverlay .loot-filter button{min-height:44px;padding:8px 6px;font-size:.75rem}
  #historyOverlay .loot-head{flex-direction:column;gap:6px}
  #historyOverlay .loot-head-r{width:100%;justify-content:flex-start}
  #historyOverlay .loot-head-r .hist-del{margin-left:auto}
  #historyOverlay .hist-del{width:40px;height:40px}
  #historyOverlay .loot-act{height:40px;padding:0 12px}
  #historyOverlay .share-chip{min-height:40px}
  #historyOverlay .sold-amount,#historyOverlay .sold-currency{min-height:44px;font-size:1rem;padding:8px}
  #historyOverlay .loot-line:has(>.sold-amount){grid-template-columns:auto minmax(0,1fr) 76px 68px;gap:6px}
  #historyOverlay .loot-line:has(>.sold-amount)>.btn{min-height:44px;padding:8px 10px}
  #historyOverlay .loot-line .btn{padding:10px}
}
/* Display rules above must never reveal controls or a closed drawer. */
#historyOverlay[hidden],#historyOverlay [hidden]{display:none!important}

.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);background:var(--text);color:var(--bg);padding:.7rem 1.1rem;border-radius:999px;font-size:.85rem;text-align:center;max-width:min(90vw,360px);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* A small pill anchored right above the specific field it's warning about (e.g. the
   จำนวน input when a sell-from-stock qty is capped) — separate from the general toast,
   which stays centered for everything else. */
.mr-field-tip{position:fixed;z-index:65;background:var(--danger);color:#fff;padding:.5rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap;box-shadow:0 0 0 3px rgba(239,90,86,.25),0 8px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(4px);transition:opacity .15s ease, transform .15s ease;pointer-events:none}
.mr-field-tip.show{opacity:1;transform:translateY(0);animation:shake .4s ease}
@media (prefers-reduced-motion: reduce){.mr-field-tip.show{animation:none}}

/* ---------- เติมแพ็กเกจ ---------- */
.pricing-hero{text-align:center;padding:.4rem 0 2rem;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.pricing-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--accent);font-size:.76rem;font-weight:700}
.pricing-title{font-size:2.1rem;font-weight:800;letter-spacing:-.01em;margin:0}
.pricing-title-accent{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricing-sub{color:var(--text-dim);font-size:.9rem;max-width:520px;margin:0}
.pricing-cycle-toggle{margin-top:.3rem}
.pricing-cycle-toggle .seg-btn{font-size:.8rem;padding:.5rem 1.2rem}
.pricing-promo-banner{margin-top:.9rem;display:inline-flex;align-self:center;padding:.55rem 1.1rem;border-radius:999px;background:var(--gradient-brand);color:#fff;font-weight:700;font-size:.82rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch;max-width:1100px;margin:0 auto}
.pricing-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:1.5rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;
}
.pricing-card-best{
  border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--gradient-brand) border-box;
}
.pricing-badge-best{
  position:absolute;top:-.7rem;right:1rem;background:var(--gradient-brand);color:#fff;font-size:.68rem;font-weight:800;
  padding:.3rem .7rem;border-radius:999px;letter-spacing:.02em;box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.pricing-card-name{font-size:.95rem;font-weight:700;min-height:2.5em;display:flex;align-items:center}
.pricing-card-name-main{display:block;font-weight:800}
.pricing-card-name-sub{display:block;font-weight:600;white-space:nowrap}
.pricing-card-tagline{font-size:.76rem;color:var(--text-dim);font-style:italic;margin-top:-.5rem}
.pricing-card-price{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.pricing-card-amount{font-size:2rem;font-weight:800;font-family:"JetBrains Mono";color:var(--text)}
.pricing-card-unit{color:var(--text-dim);font-size:.78rem}
.pricing-original{color:var(--text-dim);font-size:.85rem;text-decoration:line-through;text-decoration-color:var(--danger)}
.pricing-promo-badge{background:var(--danger);color:#fff;font-size:.66rem;font-weight:800;padding:.15rem .5rem;border-radius:999px;margin-left:.4rem}
.pricing-perday{font-size:.72rem;color:var(--text-dim)}
.pricing-feature-divider{list-style:none;font-weight:700;color:var(--text);font-size:.82rem;margin-top:.4rem;padding-top:.6rem;border-top:1px dashed var(--border)}
/* การ์ดฟรีเท่านั้น — เอาเส้นประคั่นระหว่างกลุ่มฟีเจอร์ย่อยออก (เส้นใต้ "ฟรี" เป็นคนละเส้น อยู่ที่ .pricing-features ไม่ถูกแตะ) */
.pricing-card[data-plan-key="free"] .pricing-feature-divider{border-top:none}
.pricing-save{font-size:.7rem;font-weight:700;color:var(--success);background:color-mix(in srgb, var(--success) 16%, transparent);border-radius:999px;padding:.3rem .6rem;display:inline-flex;align-self:flex-start}
.pricing-save-hidden{visibility:hidden}
.pricing-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pricing-features li{display:flex;align-items:center;gap:.55rem;font-size:.84rem;color:var(--text-dim)}
.pricing-check{color:var(--success);font-weight:700;flex:none}
.pricing-cross{color:var(--text-dim);font-weight:700;flex:none}
.pricing-feature-no{opacity:.65}
.pricing-cta{margin-top:.2rem}
.pricing-owned-note{margin-top:.5rem;padding:.4rem .6rem;border-radius:var(--radius-s);background:color-mix(in srgb, var(--success) 14%, transparent);border:1px solid color-mix(in srgb, var(--success) 40%, transparent);color:var(--success);font-size:.76rem;font-weight:700;text-align:center;line-height:1.4}
@media (max-width:760px){ .pricing-grid{grid-template-columns:1fr} }

.admin-topup-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.admin-topup-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:1rem 1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.admin-topup-main{flex:1;min-width:200px}
.admin-topup-user{font-weight:700;font-size:.92rem}
.admin-topup-meta{font-size:.78rem;color:var(--text-dim);margin-top:.2rem}
.admin-topup-slip-link{font-size:.8rem;color:var(--accent);text-decoration:underline}
.admin-topup-actions{display:flex;gap:.5rem;flex:none}
.admin-topup-empty{color:var(--text-dim);font-size:.88rem;text-align:center;padding:2rem 0}
.admin-tabs{max-width:560px;margin-top:1rem}
/* Admin: distinct navigation, filter workspace and results; preserve hidden panels. */
#view-admin .topbar{align-items:flex-start;gap:24px;margin-bottom:24px}
#view-admin .topbar>div{min-width:0;flex:1}
#view-admin .topbar .sub{max-width:76ch;line-height:1.7;margin-top:8px}
#view-admin .topbar>a{flex:none;min-height:44px;white-space:nowrap}
#view-admin #adminTabs{max-width:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--border)}
#view-admin #adminTabs>button:not([hidden]){flex:0 1 auto;min-height:44px;padding:10px 18px;white-space:nowrap;border-radius:8px}
#view-admin #adminTabs>button.active{box-shadow:inset 0 -3px 0 var(--accent)}
#view-admin .admin-filter-card{padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
#view-admin .admin-filter-card .admin-qr-tools{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:16px;margin:0}
#view-admin .admin-filter-card label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:.8rem;font-weight:600;color:var(--text-dim)}
#view-admin .admin-filter-card input,#view-admin .admin-filter-card select{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
#view-admin .admin-filter-label{font-size:.8rem;font-weight:600;color:var(--text-dim);margin-top:20px}
#view-admin .admin-qr-filter{gap:8px;margin-top:8px}
#view-admin .admin-qr-chip{min-height:40px;border-radius:8px;padding:8px 12px;line-height:1.4}
#view-admin .admin-qr-chip.active{font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
#view-admin .admin-qr-summary:empty{display:none}
#view-admin .admin-qr-summary{margin-top:16px}
#view-admin .admin-topup-list>.admin-topup-empty{margin:0;min-height:150px;display:grid;place-items:center;padding:24px;border:1px dashed var(--border);border-radius:12px;background:var(--surface);line-height:1.7}
#view-admin .admin-grant-card{max-width:760px;padding:20px;gap:12px}
#view-admin .admin-grant-card .sub{line-height:1.7}
@media(max-width:640px){
  #view-admin .topbar{flex-direction:column;gap:12px;margin-bottom:20px}
  #view-admin #adminTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #view-admin #adminTabs>button:not([hidden]){white-space:normal;padding:10px 8px}
  #view-admin .admin-filter-card{padding:16px}
  #view-admin .admin-filter-card .admin-qr-tools{grid-template-columns:minmax(0,1fr)}
  #view-admin .admin-qr-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-admin .admin-qr-chip{min-height:44px;padding:8px 6px;overflow-wrap:anywhere}
  #view-admin .admin-grant-row{flex-wrap:wrap}
  #view-admin .admin-grant-row>:is(input,select){flex-basis:100%}
}
.admin-qr-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.admin-table-wrap{overflow-x:auto;margin-top:1rem;border:1px solid var(--border);border-radius:var(--radius-m)}
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem;white-space:nowrap}
.admin-table th{text-align:left;padding:.6rem .8rem;background:var(--surface-2);color:var(--text-dim);font-size:.72rem;font-weight:700;border-bottom:1px solid var(--border)}
.admin-table td{padding:.55rem .8rem;border-bottom:1px solid var(--border);vertical-align:top}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:nth-child(odd){background:var(--surface)}
.admin-table tbody tr:nth-child(even){background:var(--surface-2)}
.admin-table tbody tr:hover{filter:brightness(1.12)}
.admin-table td.at-idx{color:var(--text-dim);font-variant-numeric:tabular-nums;width:2.5rem}
.admin-table td.at-points{font-variant-numeric:tabular-nums;text-align:right}
.admin-table td.at-plan{white-space:normal;min-width:220px}
/* สมาชิก: ป้ายสถานะบัญชี + ปุ่มลบบัญชีขยะ + ประวัติการลบ (SQL 20261006000200) */
.admin-table td.at-actions{width:1%;text-align:right}
.admin-table td .membership-pill{display:inline-block;margin-left:.35rem;vertical-align:1px}
.admin-danger-btn{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 45%, var(--border))}
.admin-danger-btn:hover{background:color-mix(in srgb, var(--danger) 14%, transparent)}
.admin-members-note{margin-top:.6rem}
.admin-deletions{margin-top:.8rem;border:1px solid var(--border);border-radius:var(--radius-m);padding:.45rem .8rem;background:var(--surface)}
.admin-deletions summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text-dim);padding:.45rem 0;line-height:1.6}
.admin-deletions ul{list-style:none;margin:.4rem 0 .3rem;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.8rem}
.admin-delete-confirm{display:block;margin-top:.8rem;font-size:.82rem}
.admin-delete-confirm input{display:block;width:100%;margin-top:.4rem;padding:.55rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit}
.admin-qr-tools input{flex:1;min-width:220px}
.admin-qr-tools input,.admin-qr-tools select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text);padding:.55rem .75rem;font-size:.85rem}
.admin-qr-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.admin-qr-chip{padding:.35rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:.78rem;font-weight:600;cursor:pointer}
.admin-qr-chip.active{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);border-color:var(--accent)}
.admin-qr-summary{font-size:.78rem;color:var(--text-dim);margin-top:.7rem}
.admin-qr-more{display:flex;justify-content:center;margin-top:.8rem}
.admin-qr-more[hidden]{display:none}
/* แอดมิน: โค้ดโปรโมชันแบ่งกลุ่มตามสถานะ — ใช้งานได้ / ใช้ครบแล้ว / หมดอายุ-ปิดแล้ว · กดหัวข้อเพื่อกาง/พับ (12 ต.ค. 2569) */
.admin-promo-tools{margin-top:1rem}
.admin-promo-group>summary{display:flex;align-items:center;gap:.5rem;padding:.55rem .2rem;cursor:pointer;font-weight:700;font-size:.92rem;list-style:none;user-select:none}
.admin-promo-group>summary::-webkit-details-marker{display:none}
.admin-promo-group>summary::before{content:"\25B8";width:1em;color:var(--text-dim)}
.admin-promo-group[open]>summary::before{content:"\25BE"}
.admin-promo-group>summary:hover{color:var(--accent)}
.admin-promo-group-body{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
.admin-promo-group-empty{margin:0;padding:.9rem 1rem;border:1px dashed var(--border);border-radius:var(--radius-m);color:var(--text-dim);font-size:.85rem}
.admin-topup-user .membership-pill{display:inline-block;margin-left:.5rem;vertical-align:middle}
.admin-topup-warn{color:var(--warn)}
.admin-slip-note{margin-top:.6rem}
.admin-grant-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:1.1rem 1.2rem;margin-top:1rem;max-width:560px;display:flex;flex-direction:column;gap:.7rem}
.admin-grant-card h3{margin:0;font-size:1rem}
.admin-grant-row{display:flex;gap:.5rem}
.admin-grant-row input{flex:1;min-width:0}
.admin-grant-row select{flex:1;min-width:0;min-height:44px;cursor:pointer}
.admin-server-row{cursor:grab}
.admin-server-row.dragging{opacity:.4}
.admin-server-row.drag-over{border-color:var(--accent)}
.admin-server-drag-handle{flex:none;font-size:1.1rem;color:var(--text-dim);cursor:grab;user-select:none;padding:0 .2rem}
.promo-code-row{display:flex;gap:.5rem;flex-wrap:nowrap}
.promo-code-row input{width:200px;max-width:100%}
@media (max-width:520px){.promo-code-row{width:100%}.promo-code-row input{flex:1;min-width:0}}
/* Promo redemption: a compact, labelled input and action with a shared surface. */
#view-settings .settings-package>.panel-head{flex-wrap:wrap;gap:16px}
#view-settings .promo-code-field{width:360px;max-width:100%;min-width:0}
#view-settings .promo-code-field>label{display:block;margin-bottom:6px;color:var(--text-dim);font-size:.78rem;font-weight:600;line-height:1.5}
#view-settings .promo-code-row{display:flex;align-items:center;gap:6px;width:100%;padding:5px;background:var(--bg);border:1px solid #50627f;border-radius:12px;transition:border-color 150ms ease,box-shadow 150ms ease}
#view-settings .promo-code-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
#view-settings #stPromoCodeInput{flex:1;width:0;min-width:0;max-width:100%;height:44px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5;box-shadow:none}
#view-settings #stPromoCodeInput::placeholder{color:var(--text-dim);opacity:1;font-size:.85rem}
#view-settings #stPromoCodeInput:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#view-settings #stPromoCodeBtn{flex:none;min-width:82px;min-height:44px;padding:10px 16px;border-radius:8px;white-space:nowrap;font-size:.85rem;box-shadow:none}
#view-settings #stPromoCodeBtn:disabled{opacity:.55;cursor:not-allowed}
#view-settings #stPromoCodeError:empty{display:none}
#view-settings #stPromoCodeError{margin:8px 0 0;overflow-wrap:anywhere}
@media(max-width:640px){#view-settings .promo-code-field{width:100%}}
@media(prefers-reduced-motion:reduce){#view-settings .promo-code-row{transition:none}}
.admin-grant-card input,.admin-grant-card select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text);padding:.6rem .75rem;font-size:.9rem}
/* โค้ดโปรโมชัน: เลือกของรางวัล (แต้ม / แพ็กเกจแต่ละแบบ) */
.admin-promo-reward{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;color:var(--text-dim)}
.admin-promo-reward select{width:100%;min-height:44px;cursor:pointer}
#adminGrantFound{display:flex;flex-direction:column;gap:.6rem}
#adminGrantFound[hidden]{display:none}
.admin-grant-mode{margin:0}
.admin-grant-recent{font-size:.8rem;display:flex;flex-direction:column;gap:.2rem}
.admin-grant-member{padding:.7rem .85rem;border-radius:var(--radius-s);background:color-mix(in srgb, var(--success) 12%, transparent);border:1px solid color-mix(in srgb, var(--success) 35%, var(--border));font-size:.86rem;line-height:1.6}
/* รีเซ็ตรหัสผ่าน (ใต้เติม/หักแต้ม ในการ์ดเดียวกัน) */
.admin-reset-pass{margin-top:.5rem;padding-top:.9rem;border-top:1px dashed var(--border);display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.admin-reset-pass h4{margin:0;font-size:.92rem}
.admin-reset-pass .sub{margin:0;font-size:.8rem;color:var(--text-dim);line-height:1.6}
.admin-reset-pass .sub b{color:var(--text)}
.admin-reset-pass .warn{color:var(--warn)}
.admin-reset-temp{display:inline-block;margin:.5rem 0;padding:.45rem .8rem;border-radius:var(--radius-s);background:var(--surface-2);border:1px solid var(--border);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.25rem;letter-spacing:.06em;color:var(--text);user-select:all}

/* หน้า "ตั้งค่า" */
.field-hint{font-size:.72rem;color:var(--text-dim)}
.field-hint.ok{color:var(--success)}
.field-hint.bad{color:var(--danger)}
.settings-group-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:1.4rem 0 .6rem}
.settings-group-label:first-of-type{margin-top:0}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.settings-card .field{margin-bottom:.2rem}
.settings-wide{grid-column:1/-1}
.settings-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.settings-kv>div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:.5rem .6rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.settings-kv .lbl{font-size:.68rem;color:var(--text-dim)}
.settings-kv b{font-size:.86rem;overflow-wrap:anywhere}
.settings-note{font-size:.74rem;color:var(--text-dim)}
.settings-actions{display:flex;justify-content:flex-end}
.settings-list{display:flex;flex-direction:column}
.settings-list .admin-topup-empty{padding:1rem 0}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-row-main{min-width:0;flex:1}
.settings-row-title{font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.settings-row-meta{font-size:.74rem;color:var(--text-dim);margin-top:.15rem}
.settings-row-amt{font-family:"JetBrains Mono";font-variant-numeric:tabular-nums;font-size:.9rem;flex:none}
@media (max-width:760px){ .settings-grid{grid-template-columns:1fr} }

/* Desktop: ทั้งหน้าเลื่อนไปด้วยกัน (scrollbar อยู่ขอบจอจริง) แต่เมนูซ้ายลอยนิ่งด้วย position:sticky
   (ไม่ใช้กล่องเลื่อนแยกซ้อนกันอีกต่อไป — เดิมเคยทำให้ scrollbar ไปโผล่ที่ขอบ .content แทนขอบจอจริง) */
@media (min-width: 761px){
  #appScreen{align-items:start}
  .rail{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}
  .content{display:block;padding-bottom:3rem}
  .content > section{min-height:0;display:block}
  .content > section[hidden]{display:none}
  .content > section > .page-scroll{
    min-height:0;overflow:visible;margin:0;padding:0;
  }
}

@media (max-width: 760px){
  .pricing-grid{grid-template-columns:1fr}
  .pricing-title{font-size:1.7rem}
  #appScreen{grid-template-columns:1fr}
  .rail{flex-direction:row;align-items:center;justify-content:flex-start;border-right:none;border-bottom:1px solid var(--border);padding:.6rem;overflow-x:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-brand{padding:0;margin:0 .55rem 0 .15rem;border-bottom:none;flex:none}
  .rail-logo-fb{min-height:32px;padding:.3rem .65rem;font-size:.72rem;gap:.4rem}
  .rail-logo-fb svg{width:13px;height:13px}
  .rail-btn{width:42px;min-width:42px;justify-content:center;padding:.5rem}
  .rail-btn .tip{display:none}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-thumb{width:52px;height:52px}
  .content{padding:1.1rem 1rem 3rem;min-width:0}
  .util-bar{justify-content:space-between;gap:.5rem .7rem}
  .user-menu .name{max-width:130px}
  /* แสงเรืองหน้าแรกย่อให้อยู่ในจอ ไม่งั้นดันหน้าให้เลื่อนซ้าย-ขวาได้บนมือถือ */
  #view-home::before{width:220px;height:220px;left:0}
  #view-home::after{width:200px;height:200px;right:0}
  .hero-line2{font-size:1.8rem}
  .home-grid{grid-template-columns:1fr}
  .home-controlbar{flex-wrap:wrap}
}

/* การ์ดบอสต้องใช้ความกว้างเยอะ (รูป 96 + Map 125 + เวลา + ช่องกรอก + ปุ่ม MVP ≈ 780px)
   ต่ำกว่า 1100px จึงสลับเป็นแบบ 2 แถว ไม่รอถึงเบรกพอยต์มือถือ 760px ไม่งั้นช่วง
   760–1100px รูปบอสจะทับ Map และชื่อบอสจะโดนบีบจนหาย */
@media (max-width: 1100px){
  /* แถวบน = ซ้าย(อันดับ+รูป+ชื่อ) กับ Map, แถวล่าง = เวลา+ช่องกรอก+ปุ่ม */
  .bc-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.6rem}
  .bc-left{grid-column:1;grid-row:1;gap:.6rem}
  .bc-map{grid-column:2;grid-row:1;width:99px;height:99px}
  .bc-right{grid-column:1/-1;grid-row:2;flex-wrap:wrap;justify-content:flex-start;gap:.6rem}
  .bc-avatar{width:76px;height:76px}
  .bc-time-block{text-align:left}
  .bc-input{flex:1 1 140px;width:auto}
  .bc-close{margin-left:auto}
}
/* ---------- Gum100 presentation refinements ---------- */
/* Shared typography and controls; existing state and visibility rules remain authoritative. */
html{color-scheme:dark;scrollbar-color:var(--border) var(--bg)}
input,select,textarea{font-family:var(--font-ui);color-scheme:dark}
input::placeholder,textarea::placeholder{color:var(--text-dim);opacity:.8}
.field label,.hf-group label,.stat-chip-label,.rate-label,.mr-summary-label,
.settings-group-label,.mr-it-head{letter-spacing:0;text-transform:none;line-height:1.6}
.field label,.farm-log-field label,.farm-log-field-label{font-size:.82rem;font-weight:500}
.field-hint,.auth-note,.settings-note,.mr-upload-note,.field .field-hint{font-size:.78rem;line-height:1.7}
.topbar .sub,.pricing-sub,.auth-tag{line-height:1.75}
.field{gap:.45rem;margin-bottom:1rem}
.field input,.field select{min-height:44px;padding:.65rem .8rem;font-size:.95rem}
.btn{min-height:42px;padding:.6rem 1rem;line-height:1.5;transition:background .15s ease,border-color .15s ease,filter .15s ease}
.btn-sm{min-height:36px;font-size:.82rem}
.btn-primary,.seg-btn.active{color:var(--accent-ink)}
.btn-gradient{background:linear-gradient(110deg,#355fc4,#7950b5);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.btn-ghost:not(:disabled):hover{border-color:var(--text-dim)}
.btn:disabled{cursor:not-allowed}
.btn-primary:disabled,.btn-success:disabled,.btn-ghost:disabled{opacity:.5;filter:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.seg-btn{font-size:.78rem;line-height:1.5;padding:.4rem .75rem}
.chart-tf-select,.hf-group select,.mr-hist-search{min-height:36px;font-size:.8rem}
.mr-item-row input,.mr-item-row select,.farm-cost-row input,.farm-cost-row select,
.farm-rare-row input,.farm-rare-row select{min-height:40px;line-height:1.5}
.mr-item-row-main > *,.mr-name-wrap input{min-width:0}

/* Shell, navigation and the existing illustrated home banner. */
.rail{padding:1.25rem .75rem;gap:.35rem}
.rail-brand{padding-bottom:1rem;margin-bottom:.7rem}
.rail-btn{min-height:46px;padding:.65rem .75rem}
.rail-btn .tip{font-size:.86rem;line-height:1.6}
.rail-btn.active{background:color-mix(in srgb,var(--accent) 14%,var(--bg));box-shadow:inset 3px 0 var(--accent)}
.topbar{margin-bottom:1.5rem}
.topbar h1{font-size:1.5rem}
.home-banner-zone{border:1px solid var(--border)}
.hero-row{padding:0;gap:1.25rem}
.hero-row:has(.hero-stats:empty){display:none}
.hero-line1{color:#dce5f3;line-height:1.6}
.hero-line2{line-height:1.5;letter-spacing:0;background:none;color:var(--text)}
#view-home::before,#view-home::after{opacity:.1}
.stat-chip{padding:.7rem .9rem;gap:.35rem}
.stat-chip-label,.rate-label{font-size:.74rem}
.rate-chip{padding:.6rem .7rem}
.clock .date,.points-chip small{font-size:.76rem}
.guest-auth-buttons{flex-wrap:wrap}

/* Cards and content hierarchy. No changes to timer-specific components. */
.home-grid{gap:1.25rem;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.home-left{gap:1.25rem;min-width:0}
.panel{padding:1.25rem;gap:1rem;min-width:0}
.panel-head h2{font-size:1.02rem;line-height:1.6}
.panel-ticker{padding:1.15rem 1.25rem;margin-bottom:1.5rem}
.panel-farm-revenue .panel-head{flex-wrap:wrap}
.panel-farm-revenue .panel-head h2{white-space:normal}
.ticker-wrap{padding:.85rem 0}
.ticker-item .poster,.ticker-item-sub{font-size:.75rem}
.mr-summary-item{padding:.7rem .5rem}
.mr-summary-label{font-size:.73rem}
.mr-summary-value{font-size:.96rem}
.mr-total{padding:.8rem}
.mr-empty,.admin-topup-empty{padding:1.75rem .5rem;line-height:1.75}
.settings-group-label{font-size:.8rem;margin-top:1.6rem}
.settings-row{padding:.85rem 0}
.settings-row-meta{font-size:.8rem}
.pricing-hero{padding-bottom:2.25rem}
.pricing-card{padding:1.5rem;gap:1rem}
.pricing-card-name{font-size:1.08rem}
.pricing-features li{font-size:.88rem;align-items:flex-start;line-height:1.7}
.pricing-card-tagline,.pricing-perday{font-size:.8rem}

/* Existing grid-based tables and transaction lists. */
.mr-it-row{padding:.7rem .75rem;column-gap:.65rem}
.mr-it-head{background:var(--surface-2);font-size:.75rem;padding:.5rem .75rem}
.mr-it-name{line-height:1.65}
.mr-it-cell{line-height:1.6;align-items:flex-end;text-align:right}
.mr-it-head > span:not(:first-child){text-align:right}
.mr-it-cell b{font-variant-numeric:tabular-nums}
.mr-it-cell small{font-size:.72rem;max-width:100%}
.mr-tx{padding:.6rem .65rem;row-gap:.4rem}
.mr-it,.mr-tx-list{gap:.5rem}
.mr-ic-day-head{padding:.6rem .7rem;font-size:.8rem}
.items-pending-row,.items-detail-row{padding:.8rem .85rem}
.items-detail-right{flex-wrap:wrap;justify-content:flex-end;min-width:0}
.items-detail-row > :first-child{min-width:0;overflow-wrap:anywhere}
.items-pending-date,.items-detail-date,.items-detail-breakdown{font-size:.76rem}

/* Login, registration and shared dialog surfaces. */
.auth-card{max-width:420px;width:calc(100% - 2rem);padding:2rem;border-color:#435575}
.auth-modal .auth-card{max-height:calc(100dvh - 2rem);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) var(--surface)}
.auth-brand{margin-bottom:1.75rem}
.auth-brand-logo{max-width:220px}
.auth-modal-close{width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--radius-s)}
.auth-modal-close:hover{background:var(--surface-hover)}
.auth-switch{line-height:1.75}
.auth-switch button{padding:.3rem .15rem}
.auth-note{border-top-style:solid;margin-bottom:0;padding-top:1rem}
.auth-error{line-height:1.6}
.confirm-box{max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain}
.confirm-message{line-height:1.7}

/* Preserve the desktop scrolling shell; stack content before columns become cramped. */
@media (min-width:761px) and (max-width:1100px){
  .home-grid{grid-template-columns:1fr}
  .panel-side{min-height:0}
  .items-card-c{min-height:320px}
  .pricing-grid{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:760px){
  .rail{padding:.5rem;gap:.35rem;align-items:stretch;scrollbar-width:thin}
  .rail-brand{padding:0;margin:0 .35rem;align-self:center}
  .rail-logo-fb{min-height:34px;padding:.35rem .7rem;font-size:.74rem}
  .rail-btn{flex:0 0 auto;flex-direction:column;gap:.2rem;width:auto;min-width:80px;min-height:60px;padding:.5rem .65rem}
  .rail-btn .tip{display:block;font-size:.72rem;line-height:1.5;white-space:nowrap}
  .rail-btn.active{box-shadow:inset 0 -3px var(--accent)}
  .rail-badge{position:absolute;top:.15rem;right:.15rem}
  /* มุมขวาบน ยกขึ้นเหนือไอคอน (ไม่ทับไอคอน) — ยังอยู่ในขอบแถบเมนู */
  .rail-promo-tag{position:absolute;top:-.3rem;right:-.1rem;margin:0;padding:0 .28rem;font-size:.56rem}
  .content{padding:1rem 1rem 2rem}
  .home-grid{grid-template-columns:1fr}
  .panel{padding:1rem}
  .panel-side{min-height:0}
  .home-banner-zone .util-bar{padding:1rem}
  /* นาฬิกา+แต้มอยู่แถวบน กล่องผู้ใช้ (ล็อกอินแล้ว) หรือปุ่มเข้าสู่ระบบ/สมัครสมาชิก (ยังไม่ล็อกอิน) ชิดขอบล่าง
     เว้นตรงกลางให้เห็นโลโก้เต็ม */
  .home-banner-zone{display:flex;flex-direction:column;min-height:260px}
  .home-banner-zone .util-bar{flex:1;align-content:space-between}
  #homeBannerZone #guestAuthButtons,#homeBannerZone .user-menu{flex:0 0 100%}
  #homeBannerZone #guestAuthButtons .btn{flex:1}
  #homeBannerZone .user-menu .who{flex:1;min-width:0}
  #homeBannerZone .user-menu .name,#homeBannerZone .user-menu .membership-time{max-width:none}
  .hero-row{padding:0;margin-top:.9rem}
  .hero-line2{font-size:1.8rem}
  .hero-stats{width:100%;gap:.6rem}
  .hero-stats .stat-chip{flex:1 1 140px;min-width:0}
  .guest-auth-buttons{gap:.4rem}
  .guest-auth-buttons .btn{font-size:.82rem;padding:.55rem .75rem}
  .home-controlbar,.topbar-right{flex-wrap:wrap}
  .home-controlbar > *{max-width:100%}
  .panel-farm-revenue .panel-head{gap:.75rem}
  .farm-series-filter{max-width:100%;flex-wrap:wrap}
  .items-card-c{min-height:260px}
  .items-detail-row{flex-wrap:wrap}
  .items-detail-right{flex:1 1 100%;justify-content:flex-start}
  .items-pending-row-top{flex-wrap:wrap}
  .farm-history-pagination{grid-template-columns:1fr;gap:.75rem}
  .farm-history-pagination .farm-hist-nav{grid-column:1;grid-row:2}
  .farm-history-pagination .farm-hist-size{justify-self:center}
  .auth-card{padding:1.75rem 1.25rem}
  .pricing-card{padding:1.25rem}
  .pricing-promo-banner{border-radius:var(--radius-m);text-align:center}
  .field input,.field select,.field textarea,
  .mr-item-row input,.mr-item-row select,.farm-log-field input,
  .farm-cost-row input,.farm-cost-row select,.farm-rare-row input,.farm-rare-row select,
  .mr-hist-search{font-size:1rem}
}
@media (max-width:640px){
  .mr-it-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .mr-it-cell{align-items:flex-start;text-align:left;overflow-x:auto}
  .mr-it-cell i{font-size:.72rem;letter-spacing:0;text-transform:none}
  .mr-it-cell small{overflow:visible;text-overflow:clip}
}
@media (max-width:420px){
  .content{padding-left:.75rem;padding-right:.75rem}
  .items-card-a-row-2,.settings-kv{grid-template-columns:1fr}
  .mr-summary-row{grid-template-columns:1fr}
  .mr-summary-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;text-align:left}
  .mr-summary-label{margin:0}
  .farm-cost-row,.farm-rare-row{flex-wrap:wrap}
  .farm-cost-row .farm-cost-name,.farm-rare-row .farm-rare-name{flex-basis:100%}
  .farm-cost-row .farm-cost-price,.farm-rare-row .farm-rare-price{flex-grow:1}
  .settings-row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}
/* ---------- Home / Dashboard only ---------- */
#view-home .dashboard-heading{margin:.25rem 0 1rem}
#view-home .dashboard-heading h2{font-size:1.45rem}
#view-home .dashboard-help{margin:.35rem 0 0;font-size:.82rem;line-height:1.75;color:var(--text-dim);max-width:76ch}
.dashboard-howto-label{font-size:.68rem;font-weight:500;color:var(--text-dim);vertical-align:middle;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dashboard-howto-label:hover{color:var(--accent)}
#view-home .dashboard-guest-note{display:none;margin:0 0 1rem;padding:.85rem 1rem;border-left:3px solid var(--accent);border-radius:var(--radius-s);background:var(--surface-2);font-size:.85rem;line-height:1.8;color:var(--text-dim)}
body:has(#guestAuthButtons:not([hidden])) #view-home .dashboard-guest-note{display:block}
#view-home .dashboard-shortcuts{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
#view-home .dashboard-shortcut{min-height:44px;font-size:.86rem}
#view-home .dashboard-overview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:1.25rem;margin-bottom:1.5rem}
#view-home .dashboard-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
#view-home .dashboard-overview-head h2{font-size:1.05rem}
#view-home .dashboard-overview-head .hf-group{flex:0 0 auto;min-width:130px;max-width:100%}
#view-home .dashboard-overview-head label{font-size:.78rem}
#view-home .dashboard-overview-head select{min-height:40px;width:100%;max-width:240px}
#view-home #mrSummary{margin-bottom:1rem}
#view-home .mr-summary-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
#view-home .mr-summary-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.65rem;padding:1rem 1.1rem;text-align:left;border-top:3px solid var(--border);min-width:0}
#view-home .mr-summary-item:has(.sell){border-top-color:var(--success)}
#view-home .mr-summary-item:has(.buy){border-top-color:var(--danger)}
#view-home .mr-summary-item:has(.profit-pos){border-top-color:var(--accent)}
#view-home .mr-summary-item:has(.profit-neg){border-top-color:var(--danger)}
#view-home .mr-summary-label{font-size:.84rem;margin:0;color:var(--text)}
#view-home .mr-summary-value{font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.4;max-width:100%;overflow-wrap:anywhere}
#view-home .dashboard-filters{border-top:1px solid var(--border);padding-top:.9rem}
#view-home .dashboard-filter-label{font-size:.76rem;color:var(--text-dim);margin:0 0 .55rem}
#view-home .mr-hist-bar{margin-bottom:0;gap:.65rem}
#view-home .mr-hist-search{flex:1 1 200px;min-height:40px;border-radius:var(--radius-s)}
#view-home #mrHistoryRange{min-height:40px}
#view-home #historyCategoryToggle{flex:none}
#view-home .home-grid{grid-template-columns:1fr;align-items:start}
#view-home .home-left{gap:1.25rem}
#view-home .panel-head{gap:.75rem}
#view-home .panel-hero .panel-head{align-items:flex-start}
#view-home .panel-hero .chart-controls{width:100%;gap:.6rem}
#view-home .panel-hero .chart-controls select{min-height:40px;flex:1;min-width:0;max-width:220px}
#view-home .panel-hero .ticker-head-title{gap:.65rem 1rem}
#view-home #mrChartWrap{height:240px;margin-top:.5rem}
#view-home #mrChartSvg text{font-family:var(--font-ui);fill:var(--text-dim)}
#view-home .dashboard-chart-empty{position:absolute;inset:15% 8% 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;pointer-events:none;background:var(--surface);padding:1rem;font-size:.83rem;line-height:1.75;color:var(--text-dim)}
#view-home .dashboard-chart-empty strong{color:var(--text);font-size:.95rem}
#view-home .farm-kpi-row{gap:1rem}
#view-home .farm-kpi-value{font-size:1.8rem}
#view-home .farm-kpi-main{min-width:0;flex-wrap:wrap}
#view-home .farm-series-filter{max-width:100%;flex-wrap:wrap}
#view-home .mr-history{padding-top:1rem}
#view-home #mrHistoryList{overflow:visible}
#view-home .mr-empty{margin:.5rem 0;padding:1.5rem 1rem;border:1px dashed var(--border);border-radius:var(--radius-m);background:var(--surface-2);font-size:.86rem;line-height:1.8}
#view-home .dashboard-empty-title{display:block;font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
#view-home .dashboard-empty-detail{display:block;font-weight:400;font-size:.83rem;line-height:1.8;color:var(--text-dim)}
#view-home #mrEntryPanel{scroll-margin-top:1rem;gap:.9rem}
#view-home #mrEntryPanel .field{margin-bottom:.4rem}
#view-home #mrEntryPanel .mr-total{padding:.9rem}
#view-home #mrEntryPanel .mr-confirm-row{padding-top:.3rem}
:is(#view-home,#view-farm) .panel-ticker{margin:0 0 1.25rem;padding:1rem 1.25rem;gap:.75rem;border-color:color-mix(in srgb,var(--accent) 45%,var(--border));border-left:3px solid var(--accent)}
:is(#view-home,#view-farm) .panel-ticker h2{font-size:1.05rem}
#view-home .ticker-wrap:has(.dashboard-empty-title){padding:.85rem 1rem;mask-image:none;-webkit-mask-image:none}
#view-home .ticker-track:has(.dashboard-empty-title){width:100%}
#view-home .ticker-item:has(.dashboard-empty-title){white-space:normal;border:0;padding:0;gap:0;max-width:100%}
@media (max-width:1100px){
  #view-home .home-grid{grid-template-columns:1fr}
  #view-home .dashboard-overview-head{flex-wrap:wrap}
}
@media (max-width:760px){
  #view-home .dashboard-heading h2{font-size:1.25rem}
  #view-home .dashboard-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
  #view-home .dashboard-shortcut{white-space:normal;padding:.6rem .5rem;font-size:.82rem}
  #view-home .dashboard-overview{padding:1rem;margin-bottom:1rem}
  #view-home .dashboard-overview-head .hf-group{width:100%}
  #view-home .dashboard-overview-head select{max-width:none}
  #view-home .mr-summary-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  #view-home .mr-summary-item{padding:.8rem;gap:.5rem}
  #view-home .mr-summary-item:last-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  #view-home .mr-summary-value{font-size:1.25rem}
  #view-home .mr-summary-label{font-size:.78rem}
  #view-home .mr-hist-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem}
  #view-home #historyCategoryToggle{grid-column:1/-1;justify-self:start}
  #view-home .mr-hist-search{min-width:0;width:100%;font-size:1rem}
  #view-home #mrHistoryRange{max-width:110px;font-size:1rem}
  #view-home #mrChartWrap{height:220px}
  #view-home .dashboard-chart-empty{inset:10% 4% 18%;padding:.5rem}
  :is(#view-home,#view-farm) .panel-ticker{margin:0 0 1rem;padding:1rem}
}
/* Home transaction entry: presentation only; existing controls keep their hooks. */
#view-home #mrEntryPanel .ticker-head-title{display:block}
#view-home #mrEntryPanel .mr-entry-intro{margin:.3rem 0 0;color:var(--text-dim);font-size:.88rem}
#view-home #mrEntryPanel .field > label{font-size:.88rem;margin-bottom:.5rem}
#view-home #mrEntryPanel .mr-type-toggle{gap:.65rem}
#view-home #mrEntryPanel .mr-type-btn{min-height:52px;font-size:1.1rem;font-weight:700}
#view-home #mrEntryPanel #mrCategoryToggle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:.3rem}
#view-home #mrEntryPanel #mrCategoryToggle .seg-btn{min-height:46px;padding:.6rem .4rem;font-size:.94rem;white-space:normal}
#view-home #mrEntryPanel #mrServerChips .chip{min-height:36px;padding:.4rem .75rem}
#view-home #mrEntryPanel .mr-item-row{gap:.85rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s)}
#view-home #mrEntryPanel .mr-item-row-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(100px,.6fr) 44px;grid-template-areas:"name name name name" "qty price currency remove";gap:.85rem;align-items:end}
#view-home #mrEntryPanel .mr-entry-field{display:flex;flex-direction:column;gap:.45rem;min-width:0;margin:0;color:var(--text-dim);font-size:.88rem}
#view-home #mrEntryPanel .mr-entry-name{grid-area:name}
#view-home #mrEntryPanel .mr-entry-qty{grid-area:qty}
#view-home #mrEntryPanel .mr-entry-price{grid-area:price}
#view-home #mrEntryPanel .mr-entry-currency{grid-area:currency}
#view-home #mrEntryPanel .mr-name-wrap{width:100%}
#view-home #mrEntryPanel .mr-item-row input,#view-home #mrEntryPanel .mr-item-row select{min-height:48px;padding:.7rem .8rem;font-size:1rem}
#view-home #mrEntryPanel .mr-row-remove{width:44px;min-height:48px;margin:0}
#view-home #mrEntryPanel .mr-row-remove:disabled{display:none}
#view-home #mrEntryPanel .mr-sell-source{padding:.85rem;gap:.5rem;margin:0}
#view-home #mrEntryPanel .mr-stock-info{font-size:.85rem;line-height:1.6}
#view-home #mrEntryPanel .mr-entry-details{border-top:1px solid var(--border);padding-top:.65rem}
#view-home #mrEntryPanel .mr-entry-details summary{padding:.4rem 0;cursor:pointer;color:var(--text-dim);font-size:.85rem;min-height:36px}
#view-home #mrEntryPanel .mr-entry-details[open] summary{color:var(--accent);margin-bottom:.6rem}
#view-home #mrEntryPanel .mr-entry-image{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem;font-size:.85rem;color:var(--text-dim)}
#view-home #mrEntryPanel .mr-row-img{width:44px;height:44px}
#view-home #mrEntryPanel .mr-slot-add,#view-home #mrEntryPanel .mr-slot-remove{min-height:44px}
#view-home #mrEntryPanel #mrExRateField{padding:.85rem;background:var(--surface-2);border-radius:var(--radius-s)}
#view-home #mrEntryPanel #mrExRateInput{width:130px;min-height:48px;font-size:1rem}
#view-home #mrEntryPanel .farm-exrate-row label{margin:0}
#view-home #mrEntryPanel .mr-exrate-hint{margin:.5rem 0 0}
#view-home #mrEntryPanel .farm-exrate-error{margin:.6rem 0 0}
#view-home #mrEntryPanel #mrConfirm{min-height:52px;font-size:1rem}
#view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-entry-name,
#view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-entry-currency{display:none}
#view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-item-row-main{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"qty price"}
@media(max-width:640px){
  #view-home #mrEntryPanel .mr-item-row{padding:.8rem}
  #view-home #mrEntryPanel .mr-item-row-main,
  #view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-item-row-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "qty" "price" "currency" "remove"}
  #view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-item-row-main{grid-template-areas:"qty" "price"}
  #view-home #mrEntryPanel #mrCategoryToggle .seg-btn{font-size:.88rem}
}
/* Minimal Home cards; all data rendering and actions remain unchanged. */
#view-home .dashboard-help,#view-home .panel-hero .chart-footer,#view-home .mr-entry-intro{display:none}
#view-home .dashboard-overview{grid-column:1;grid-row:1;min-width:0;padding:0;border:0;background:none;margin-bottom:0}
#view-home .dashboard-overview-head{align-items:center;margin-bottom:.6rem;gap:.5rem}
#view-home .dashboard-overview-head h2{font-size:1.5rem}
/* บรรทัดสองใต้ "สรุปซื้อ–ขาย" — หน้าตาเดียวกับคำอธิบายใต้ชื่อหน้าอื่น (.topbar .sub) */
#view-home .dashboard-overview-head .page-title-art>.sub{margin:0;color:var(--text-dim);font-size:.86rem;line-height:1.75}
#view-home #mrSummary{margin:0}
#view-home .mr-summary-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
#view-home .mr-summary-item,#view-home .mr-summary-item:last-child{grid-column:auto;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.65rem .85rem;border-top-width:2px}
#view-home .mr-summary-value{font-size:1.3rem}
#view-home .mr-summary-label{font-size:.78rem}
#view-home .dashboard-quicklinks{position:relative;font-size:.8rem;color:var(--text-dim)}
#view-home .dashboard-quicklinks summary{cursor:pointer;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-s)}
#view-home .dashboard-shortcuts{position:absolute;right:0;top:100%;z-index:20;display:grid;grid-template-columns:1fr;min-width:180px;margin:.4rem 0 0;padding:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:0 8px 24px #0004}
#view-home .home-grid{grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr);grid-template-rows:auto 1fr;gap:1rem;align-items:start}
#view-home .home-left{grid-column:1;grid-row:2;gap:1rem}
/* เริ่มการ์ดให้ตรงแนวการ์ดสรุปฝั่งซ้าย = ความสูงหัวข้อ "สรุปซื้อ–ขาย" (สูงเท่ารูปหน้าหัวข้อ) + ช่องว่าง .6rem ใต้หัวข้อ
   (เดิม 2.025rem ตอนหัวข้อยังไม่มีรูป) */
#view-home #mrEntryPanel{grid-column:2;grid-row:1 / span 2;margin-top:calc(var(--page-title-art-h) + .6rem)}
#view-home .home-grid .panel{padding:1rem;gap:.75rem}
#view-home .home-grid .panel-head h2{font-size:1rem}
#view-home .dashboard-filters{padding-top:0;border:0;display:flex;flex-wrap:wrap;align-items:end;gap:.6rem}
#view-home .dashboard-filter-label{flex-basis:100%;margin:0;font-size:.73rem}
#view-home .dashboard-filters .hf-group{width:100%;min-width:0}
#view-home .dashboard-filters .hf-group label{display:none}
#view-home .dashboard-filters .hf-group select{min-height:38px;width:100%}
#view-home .mr-hist-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:.5rem}
#view-home #historyCategoryToggle{grid-column:1/-1;justify-self:start}
#view-home .mr-hist-search{min-width:0;width:100%;min-height:38px;font-size:.9rem}
#view-home #mrHistoryRange{min-height:38px;max-width:110px}
#view-home .mr-history{padding-top:.2rem}
#view-home .mr-empty{margin:0;padding:1rem .75rem}
#view-home .home-left .dashboard-empty-detail{display:none}
#view-home .panel-hero .ticker-head-title{gap:.5rem}
#view-home .panel-hero .chart-controls{gap:.5rem}
#view-home .farm-kpi-value{font-size:1.35rem}
#view-home #mrChartWrap{height:210px;margin-top:0}
#view-home .dashboard-chart-empty{gap:0;font-size:.8rem;padding:.5rem}
#view-home .dashboard-chart-empty > :not(strong){display:none}
#view-home #mrEntryPanel{gap:.45rem;padding:.85rem}
#view-home #mrEntryPanel .farm-log-divider{display:none}
#view-home #mrEntryPanel .field{gap:.2rem;margin-bottom:0}
#view-home #mrEntryPanel .field > label{font-size:.8rem;margin:0}
#view-home #mrEntryPanel .field:has(#mrTypeToggle) > label,
#view-home #mrEntryPanel .field:has(#mrCategoryToggle) > label,
#view-home #mrEntryPanel .field:has(#mrItemRows) > label{display:none}
#view-home #mrEntryPanel .mr-type-btn{min-height:44px;padding:.5rem;font-size:1rem}
#view-home #mrEntryPanel #mrCategoryToggle .seg-btn{min-height:40px;padding:.4rem .2rem;font-size:.85rem}
#view-home #mrEntryPanel #mrServerChips .chip{min-height:32px;padding:.3rem .6rem}
#view-home #mrEntryPanel .mr-item-row{padding:.55rem;gap:.4rem}
#view-home #mrEntryPanel .mr-item-row-main{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"name name name" "qty price currency";gap:.45rem}
#view-home #mrEntryPanel .mr-entry-field{font-size:.78rem;gap:.2rem}
#view-home #mrEntryPanel .mr-item-row input,#view-home #mrEntryPanel .mr-item-row select{min-height:40px;padding:.4rem .5rem;font-size:1rem}
#view-home #mrEntryPanel .mr-row-remove{position:absolute;top:0;right:0;min-height:40px;width:36px}
#view-home #mrEntryPanel .mr-item-row:has(.mr-row-remove:not(:disabled)) .mr-entry-name{padding-right:40px}
#view-home #mrEntryPanel .mr-item-row:only-child .mr-row-index{display:none}
#view-home #mrEntryPanel .mr-sell-source{padding:.6rem;gap:.4rem}
#view-home #mrEntryPanel .mr-entry-details{padding-top:.4rem}
#view-home #mrEntryPanel .mr-entry-details summary{padding:.25rem 0;font-size:.78rem}
#view-home #mrEntryPanel .mr-entry-section-label{margin:0 0 .25rem;font-size:.73rem;color:var(--text-dim);font-weight:600}
#view-home #mrEntryPanel .mr-entry-image{gap:.45rem;margin:0;font-size:.76rem}
#view-home #mrEntryPanel .mr-entry-image + .mr-slot-section{padding:0;margin-top:.3rem}
#view-home #mrEntryPanel .mr-row-img{width:56px;height:36px}
#view-home #mrEntryPanel .mr-stock-info > strong{color:#f2d18b;font-weight:700}
#view-home #mrEntryPanel #mrImageField{display:none}
#view-home #mrEntryPanel .mr-slot-add{min-height:36px;padding:.25rem .5rem;font-size:.75rem}
#view-home #mrEntryPanel #mrAddRowBtn{align-self:flex-start;width:auto;min-height:32px;padding:.25rem .5rem;font-size:.78rem;border-color:transparent;background:transparent;color:var(--text-dim);box-shadow:none}
#view-home #mrEntryPanel #mrAddRowBtn:hover{color:var(--accent);background:var(--surface-2)}
#view-home #mrEntryPanel .mr-total{padding:.5rem .65rem}
#view-home #mrEntryPanel #mrConfirm{min-height:46px}
@media(max-width:1100px){
  #view-home .home-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  #view-home #mrEntryPanel{grid-column:1;grid-row:2;margin-top:0}
  #view-home .home-left{grid-column:1;grid-row:3}
}
@media(max-width:640px){
  #view-home .home-grid .panel{padding:.85rem}
  #view-home .mr-summary-row{gap:.4rem}
  #view-home .mr-summary-item,#view-home .mr-summary-item:last-child{padding:.55rem .5rem}
  #view-home .mr-summary-label{font-size:.7rem}
  #view-home .mr-summary-value{font-size:1.05rem}
  #view-home .mr-hist-search{font-size:1rem}
  #view-home #mrEntryPanel .mr-item-row-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "qty" "price" "currency" "remove"}
  #view-home #mrEntryPanel:has([data-category="zeny"].active) .mr-item-row-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"qty" "price"}
}
/* Compact history filters, responsive to the card's available width. */
#view-home .panel:has(#mrHistoryList){container:home-history / inline-size}
#view-home .dashboard-filters{display:grid;grid-template-columns:140px max-content minmax(100px,280px) 76px;align-items:center;gap:.4rem}
#view-home .dashboard-filter-label{display:none}
#view-home .dashboard-filters .hf-group{width:auto;min-width:0}
#view-home .dashboard-filters .mr-hist-bar{display:contents}
#view-home .dashboard-filters #historyCategoryToggle{grid-column:auto;justify-self:start;padding:.15rem;gap:.1rem}
#view-home .dashboard-filters #historyCategoryToggle .seg-btn{min-height:30px;padding:.25rem .5rem;font-size:.76rem;white-space:nowrap}
#view-home .dashboard-filters #historyServerFilter,
#view-home .dashboard-filters #mrHistorySearch,
#view-home .dashboard-filters #mrHistoryRange{width:100%;min-width:0;min-height:36px;padding:.35rem .5rem;font-size:.82rem}
#view-home .dashboard-filters #mrHistoryRange{max-width:76px;justify-self:end}
@container home-history (max-width:519px){
  #view-home .dashboard-filters{grid-template-columns:minmax(0,1fr) max-content;gap:.45rem}
  #view-home .dashboard-filters #historyCategoryToggle{justify-self:end}
  #view-home .dashboard-filters #historyServerFilter,
  #view-home .dashboard-filters #mrHistorySearch,
  #view-home .dashboard-filters #mrHistoryRange{min-height:40px;font-size:1rem}
  #view-home .dashboard-filters #mrHistorySearch{grid-column:1/-1;grid-row:2;width:calc(100% - 92px - .45rem)}
  #view-home .dashboard-filters #mrHistoryRange{grid-column:2;grid-row:2;max-width:92px}
}
/* Home profit chart filters: server, category, timeframe. */
#view-home .panel-hero .panel-head{flex-direction:column;gap:.6rem}
#view-home .panel-hero .chart-controls{align-items:center;gap:.4rem}
#view-home .panel-hero .chart-controls select{flex:0 0 auto;width:140px;max-width:100%;min-height:36px;padding:.35rem .5rem;font-size:.82rem}
#view-home .panel-hero #mrChartTimeframeSelect{width:76px}
#view-home .panel-hero #mrChartCategoryToggle{flex:none;padding:.15rem;gap:.1rem}
#view-home .panel-hero #mrChartCategoryToggle .seg-btn{min-height:30px;padding:.25rem .45rem;font-size:.76rem;white-space:nowrap}
#view-home .panel-hero #mrChartTypeToggle{flex:none;padding:.15rem;gap:.1rem}
#view-home .panel-hero #mrChartTypeToggle .seg-btn{min-height:30px;padding:.25rem .5rem;font-size:.76rem;white-space:nowrap}
@media(max-width:640px){
  #view-home .panel-hero .chart-controls{display:grid;grid-template-columns:minmax(0,1fr) 76px}
  #view-home .panel-hero #mrChartServerSelect{grid-column:1/-1}
  #view-home .panel-hero #mrChartCategoryToggle{justify-self:start}
  #view-home .panel-hero #mrChartTimeframeSelect{justify-self:end}
  /* ปุ่มแท่ง/เส้น ลงแถวของตัวเอง (ช่องขวา 76px เป็นของตัวเลือกช่วงเวลา) */
  #view-home .panel-hero #mrChartTypeToggle{grid-column:1/-1;grid-row:3;justify-self:start}
}
/* Home announcements: compact ticker; native scrolling also allows touch swipes. */
:is(#view-home,#view-farm) .panel-ticker{margin:0 0 1rem;padding:.65rem .9rem;gap:.45rem;min-height:0}
:is(#view-home,#view-farm) .panel-ticker .panel-head{flex-wrap:nowrap;align-items:center;gap:.5rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-head-title{flex:1;min-width:0;flex-wrap:nowrap;gap:.5rem}
:is(#view-home,#view-farm) .panel-ticker h2{flex:none;font-size:.95rem;line-height:1.5;white-space:nowrap}
:is(#view-home,#view-farm) .panel-ticker #tickerServerChips{min-width:0;flex-wrap:nowrap;gap:.35rem;overflow-x:auto;scrollbar-width:thin}
:is(#view-home,#view-farm) .panel-ticker #tickerServerChips .chip{flex:none;padding:.2rem .5rem;font-size:.73rem;line-height:1.5;white-space:nowrap}
:is(#view-home,#view-farm) .panel-ticker .ticker-post-group{flex:none}
:is(#view-home,#view-farm) .panel-ticker #postAnnouncementBtn{min-height:32px;padding:.3rem .65rem;font-size:.8rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-post-caret{min-width:28px;padding:0 .4rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-wrap{overflow-x:auto;overflow-y:hidden;padding:0 0 .15rem;border:0;border-radius:0;background:transparent;mask-image:none;-webkit-mask-image:none;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain}
:is(#view-home,#view-farm) .panel-ticker .ticker-track{width:max-content;display:flex;flex-wrap:nowrap;gap:.5rem;animation:none;transform:none}
:is(#view-home,#view-farm) .panel-ticker .ticker-item{flex:none;flex-direction:column;align-items:flex-start;gap:.08rem;padding:.3rem .65rem;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-2);font-size:.82rem;line-height:1.5;white-space:nowrap}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-main{display:flex;align-items:baseline;gap:.5rem;font-weight:600}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-sub{align-items:baseline;gap:.4rem;font-size:.8rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-sub .buy{font-size:.88rem;font-weight:700}
:is(#view-home,#view-farm) .panel-ticker .ticker-item .poster{font-size:.73rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-countdown{padding:0;border:0;font-size:.72rem;font-weight:400}
:is(#view-home,#view-farm) .panel-ticker .buy + .ticker-countdown::before{content:"|";margin-right:.4rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-track:has(.dashboard-empty-title){width:100%}
:is(#view-home,#view-farm) .panel-ticker .ticker-item:has(.dashboard-empty-title){max-width:100%;padding:.35rem 0;border:0;background:transparent;white-space:normal}
:is(#view-home,#view-farm) .panel-ticker .dashboard-empty-title{margin:0;font-size:.82rem;font-weight:400;color:var(--text-dim)}
:is(#view-home,#view-farm) .panel-ticker .dashboard-empty-detail{display:none}
@media(prefers-reduced-motion:reduce){
  :is(#view-home,#view-farm) .panel-ticker .ticker-wrap{scrollbar-width:thin}
}
@media(max-width:640px){
  :is(#view-home,#view-farm) .panel-ticker{padding:.6rem .7rem}
  :is(#view-home,#view-farm) .panel-ticker #postAnnouncementBtn{min-height:36px}
  :is(#view-home,#view-farm) .panel-ticker .ticker-post-caret{min-width:32px}
}
@media(max-width:360px){
  :is(#view-home,#view-farm) .panel-ticker{padding:.4rem .65rem;gap:.3rem}
  :is(#view-home,#view-farm) .panel-ticker .ticker-head-title{flex-wrap:wrap;gap:.15rem .35rem}
}
/* Inventory: compact warehouse cards and a naturally sized pending list. */
#view-items .home-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:1rem}
#view-items .home-left{gap:1rem}
#view-items .panel{min-height:0;padding:1rem;gap:.75rem}
#view-items .panel-head{gap:.5rem}
#view-items .panel-head h2{font-size:.95rem}
#view-items .items-card-a-grid,#view-items .items-card-a-row{gap:.6rem}
#view-items .items-card-a-sub{position:relative;gap:.15rem;padding:.75rem}
#view-items .items-card-a-sub:has(.items-card-a-art){padding-right:96px}
#view-items .items-tier-count{font-family:inherit;font-size:1.65rem;line-height:1.35;font-weight:750;font-variant-numeric:tabular-nums;color:var(--accent)}
#view-items .items-tier-viewall{min-height:32px;font-size:.8rem;padding:.2rem 0}
#view-items .items-card-a-art{width:72px;height:72px;object-fit:contain;right:12px;top:50%;bottom:auto;transform:translateY(-50%);opacity:.65}
#view-items .items-card-c{align-self:start}
#view-items .items-card-c .panel-head{align-items:center}
#view-items #itemsServerSelect{width:140px;max-width:100%;min-height:36px;padding:.35rem .5rem;font-size:.85rem}
/* dropdown เซิร์ฟเวอร์ของคลังไอเทม (ทำเองแทน select เพื่อให้เลขรอลงคลังเป็นตัวแดง) — กล่องใช้หน้าตา .chart-tf-select เดิม */
#view-items .items-sv-picker{position:relative;flex:none;max-width:100%}
#view-items .items-sv-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:.4rem;width:auto;min-width:140px;max-width:100%;min-height:36px;padding:.35rem .5rem;font-size:.85rem;font-family:inherit;text-align:left;white-space:nowrap}
#view-items .items-sv-btn:disabled{cursor:default;opacity:.7}
#view-items .items-sv-btn svg{width:15px;height:15px;flex:none;opacity:.8;transition:transform .15s ease}
#view-items .items-sv-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
#view-items .items-sv-btn-label{display:inline-flex;align-items:baseline;gap:.3rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
#view-items .items-sv-count{color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}
#view-items .items-sv-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:100%;max-height:220px;overflow-y:auto;margin:0;padding:.25rem;list-style:none;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:0 10px 24px rgba(0,0,0,.45)}
#view-items .items-sv-option{display:flex;align-items:baseline;gap:.3rem;padding:.45rem .6rem;border-radius:6px;font-size:.85rem;white-space:nowrap;color:var(--text);cursor:pointer}
#view-items .items-sv-option:hover,#view-items .items-sv-option:focus{background:color-mix(in srgb,var(--accent) 16%,transparent);outline:none}
#view-items .items-sv-option.selected{background:color-mix(in srgb,var(--accent) 28%,transparent);font-weight:600}
#view-items .items-sv-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* หัวกล่องกับรายการรอลงคลังอยู่ชั้น z-index:1 เท่ากัน (ดูกฎ items-card-c>*) รายการที่มาทีหลังจะทับ dropdown
   — ตอนกางรายการเซิร์ฟให้หัวกล่องขึ้นชั้นบนกว่า */
#view-items .items-card-c>.panel-head:has(.items-sv-list:not([hidden])){z-index:3}
#view-items #itemsPendingList{max-height:min(560px,65dvh);overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable}
#view-items .items-pending-row{padding:.75rem;margin-bottom:.5rem}
#view-items .items-pending-row:last-child{margin-bottom:0}
#view-items .items-pending-row-top{align-items:baseline;flex-wrap:wrap;gap:.25rem .6rem}
#view-items .items-pending-name{min-width:0;overflow-wrap:anywhere;line-height:1.65}
#view-items .items-pending-amount{white-space:nowrap;margin-left:auto}
#view-items .items-pending-breakdown{font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}
#view-items .items-pending-date{font-size:.75rem;line-height:1.6}
#view-items .mr-empty{margin:0;padding:.5rem .25rem;font-size:.85rem;line-height:1.7}
#view-items .items-card-b{container:inventory-detail / inline-size;gap:0}
#view-items .items-card-b > .panel-head{padding-bottom:.65rem}
#view-items .items-card-b > [aria-hidden="true"],
#view-items .items-detail-row{display:grid;grid-template-columns:minmax(0,1fr) 56px 88px 88px 32px;align-items:center;column-gap:.5rem;padding:.4rem .5rem}
#view-items .items-card-b > [aria-hidden="true"]{flex-shrink:0;background:var(--surface-2);color:var(--text-dim);font-size:.72rem;border-bottom:1px solid var(--border);overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin}
#view-items .items-card-b > [aria-hidden="true"] > span:not(:first-child){text-align:right}
#view-items .items-card-b:not(:has(.items-detail-row)) > [aria-hidden="true"]{display:none}
#view-items #itemsDetailList{max-height:min(560px,65dvh);overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin}
#view-items .items-detail-row{min-height:56px;margin:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;font-size:.82rem;line-height:1.5}
#view-items .items-detail-row:last-child{border-bottom:0}
#view-items .items-detail-row:hover,#view-items .items-detail-row:focus-within{background:var(--surface-2)}
#view-items .items-detail-row > span:first-child{grid-column:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
#view-items .items-detail-row > span:nth-child(2){grid-column:2;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#view-items .items-detail-right{display:contents}
#view-items .items-detail-breakdown{display:none}
#view-items .items-detail-right .mono{grid-column:3;min-width:0;text-align:right;font-size:.78rem;font-weight:500;overflow-wrap:anywhere}
#view-items .items-detail-date{grid-column:4;margin:0;text-align:right;font-size:.72rem;white-space:nowrap}
#view-items .items-undo-btn{grid-column:5;justify-self:end;min-width:32px;min-height:32px;margin:0;border:1px solid var(--border);border-radius:var(--radius-s)}
@container inventory-detail (max-width:459px){
  #view-items .items-card-b > [aria-hidden="true"]{display:none}
  #view-items .items-detail-row{grid-template-columns:minmax(0,1fr) auto 40px;row-gap:.15rem;padding:.4rem .15rem}
  #view-items .items-detail-row > span:first-child{grid-column:1/3;grid-row:1}
  #view-items .items-detail-row > span:nth-child(2){grid-column:3;grid-row:1;font-size:.75rem}
  #view-items .items-detail-right .mono{grid-column:1;grid-row:2;text-align:left}
  #view-items .items-detail-date{grid-column:2;grid-row:2}
  #view-items .items-undo-btn{grid-column:3;grid-row:2;min-width:40px;min-height:40px}
}
@media(max-width:1100px){
  #view-items .home-grid{grid-template-columns:minmax(0,1fr)}
  #view-items .home-left{display:contents}
  #view-items .items-card-a-grid{grid-row:1}
  #view-items .items-card-c{grid-row:2}
  #view-items .items-card-b{grid-row:3}
}
@media(max-width:640px){
  #view-items .home-grid{gap:.75rem}
  #view-items .panel{padding:.85rem}
  #view-items .items-card-a-row-2{grid-template-columns:minmax(0,1fr)}
  #view-items .items-card-a-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.15rem .6rem}
  #view-items .items-tier-count{grid-column:2;grid-row:1/3;font-size:1.65rem}
  #view-items .items-tier-viewall{justify-self:start}
  #view-items .items-card-a-sub:has(.items-card-a-art){padding-right:88px}
  #view-items .items-card-a-art{width:64px;height:64px;right:12px}
  #view-items #itemsServerSelect{width:160px;min-height:40px;font-size:1rem}
  #view-items .items-sv-btn{min-width:160px;min-height:40px;font-size:1rem}
  #view-items .items-sv-option{padding:.6rem .7rem;font-size:1rem}
}
/* Farm presentation: compact input groups and a shared announcement strip. */
#view-farm .topbar{margin-bottom:.75rem}
#view-farm .home-grid{grid-template-columns:minmax(0,1.25fr) minmax(390px,1fr);gap:1rem;align-items:start}
#view-farm .home-left{gap:1rem}
#view-farm .panel:not(.panel-ticker){padding:1rem;gap:.65rem;min-width:0}
#view-farm .panel-head h2{font-size:1rem}
#view-farm .panel-farm-cost > .panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:static}
#view-farm .panel-farm-cost > .panel-head h2{margin:0;line-height:1.4}
#view-farm .panel-farm-cost > .panel-head .farm-exrate-row{justify-content:flex-end;margin:0}
#view-farm .farm-exrate-row{font-size:.8rem;gap:.4rem}
#view-farm .farm-exrate-row input{width:100px}
#view-farm .farm-map-row{font-size:.85rem}
#view-farm .farm-map-row input{min-width:0}
#view-farm .panel-farm-cost input,#view-farm .panel-farm-cost select{min-height:38px;padding:.4rem .5rem;font-size:.85rem}
#view-farm .farm-cost-row,#view-farm .farm-rare-row{display:grid;grid-template-columns:18px minmax(0,1fr) 52px 76px 72px 28px;gap:.35rem}
#view-farm .farm-cost-row > *,#view-farm .farm-rare-row > *{min-width:0;width:100%}
#view-farm .farm-cost-row .mr-row-remove,#view-farm .farm-rare-row .mr-row-remove{padding:0;min-width:28px}
#view-farm #farmAddCostRowBtn,#view-farm #farmAddRareItemBtn{align-self:flex-start;width:auto;padding:.3rem .5rem;min-height:32px;font-size:.8rem}
#view-farm .mr-total{padding:.55rem .65rem}
#view-farm .farm-log-form{gap:.55rem;padding-top:.65rem}
#view-farm .farm-rare-heading{font-size:.8rem;line-height:1.5}
#view-farm .farm-log-fields{grid-template-columns:minmax(80px,.6fr) minmax(0,1.4fr);gap:.65rem}
#view-farm .farm-log-field-label{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}
#view-farm #farmLogConfirm{min-height:42px}
#view-farm .farm-history-pagination{flex-wrap:wrap;gap:.5rem}
#view-farm .farm-kpi-value{font-size:1.65rem}
#view-farm .panel-farm-revenue .panel-head{flex-wrap:wrap;gap:.5rem}
#view-farm .mr-empty{padding:.65rem .25rem;margin:0}
@media(max-width:1100px){
  #view-farm .home-grid{grid-template-columns:minmax(0,1fr)}
  #view-farm .panel-farm-cost{grid-row:1}
  #view-farm .home-left{grid-row:2}
}
@media(max-width:640px){
  #view-farm .panel:not(.panel-ticker){padding:.85rem}
  #view-farm .topbar{gap:.5rem;flex-wrap:wrap}
  #view-farm .panel-farm-cost > .panel-head{display:grid;justify-content:stretch;gap:.45rem}
  #view-farm .panel-farm-cost > .panel-head .farm-exrate-row{justify-content:flex-start}
  #view-farm .farm-cost-row,#view-farm .farm-rare-row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 80px 32px;gap:.35rem}
  #view-farm .farm-cost-name,#view-farm .farm-rare-name{grid-column:2/-1}
  #view-farm .farm-cost-row > :first-child,#view-farm .farm-rare-row > :first-child{grid-column:1;grid-row:1}
  #view-farm .panel-farm-cost input,#view-farm .panel-farm-cost select{font-size:1rem;min-height:40px}
}
/* Compact Boss card presentation; timer and action behavior stays unchanged. */
#view-timers .boss-card{padding:.65rem .85rem}
#view-timers .bc-row{gap:.65rem}
#view-timers .bc-left,#view-timers .bc-right{gap:.55rem}
#view-timers .bc-avatar{width:80px;height:80px;background:transparent;border:0;box-shadow:none;border-radius:0}
#view-timers .bc-map{width:125px;height:125px}
#view-timers .bc-time-block{width:120px}
#view-timers .bc-time{font-size:1.2rem;line-height:1.2;font-variant-numeric:tabular-nums}
#view-timers .bc-time:is(.state-warning,.state-critical){color:#f4c95d}
#view-timers .bc-time-block:has(.state-warning,.state-critical){outline:2px solid #f4c95d;outline-offset:4px;border-radius:6px;background:rgba(244,201,93,.09);box-shadow:0 0 14px rgba(244,201,93,.15)}
#view-timers .bc-time-block:has(.state-overdue,.state-overdue-long){outline:2px solid var(--danger);outline-offset:4px;border-radius:6px;background:color-mix(in srgb,var(--danger) 9%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--danger) 18%,transparent)}
#view-timers .boss-card.state-critical{animation:none}
#view-timers .bc-items{margin-top:.45rem;padding-top:.4rem;gap:.3rem}
#view-timers .item-chip{padding:.2rem .45rem;font-size:.72rem;gap:.25rem}
/* Boss roster cards share the dark-fantasy summary language without changing their structure. */
#view-timers .boss-card{
  --boss-accent:102,151,255;
  overflow:hidden;
  border-color:rgba(var(--boss-accent),.32);
  background:
    radial-gradient(ellipse at 4% 0%,rgba(104,145,255,.12),transparent 42%),
    radial-gradient(ellipse at 100% 100%,rgba(62,123,208,.08),transparent 38%),
    linear-gradient(145deg,#1d2a42,#152035 62%,#121b2c);
  box-shadow:inset 0 1px 0 rgba(190,213,255,.08),0 6px 18px rgba(6,15,33,.18);
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease;
}
#view-timers .boss-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--boss-accent),.52);
  box-shadow:inset 0 1px 0 rgba(204,224,255,.13),0 10px 24px rgba(34,83,162,.15),0 0 15px rgba(83,145,255,.08);
  filter:brightness(1.025);
}
#view-timers .bc-rank{background:rgba(67,111,195,.16);border-color:rgba(var(--boss-accent),.38);box-shadow:0 0 11px rgba(var(--boss-accent),.1)}
#view-timers .bc-title{color:#e9f2ff;text-shadow:0 1px 0 rgba(0,0,0,.34)}
#view-timers .bc-sub{color:#aebed8}
#view-timers .bc-killedby{color:#8ec3ff}
#view-timers .bc-avatar img{filter:drop-shadow(0 5px 8px rgba(86,148,255,.3))}
#view-timers .bc-map{border-color:rgba(121,165,237,.4);background:#111c2e;box-shadow:inset 0 0 0 1px rgba(203,222,255,.05),0 5px 13px rgba(0,0,0,.2)}
#view-timers .bc-map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 18px rgba(36,81,153,.18)}
#view-timers .bc-time-block{padding:.35rem .45rem;border:1px solid rgba(118,156,222,.25);border-radius:var(--radius-s);background:linear-gradient(145deg,rgba(50,79,126,.16),rgba(23,33,51,.2));box-shadow:inset 0 1px 0 rgba(190,213,255,.06)}
#view-timers .bc-time.state-normal{color:#f3f6ff;text-shadow:none}
#view-timers .bc-time-block:has(> .state-warning){display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-color:rgba(244,201,93,.62);background:linear-gradient(145deg,rgba(128,88,26,.22),rgba(38,34,31,.34));box-shadow:inset 0 1px 0 rgba(255,226,156,.14),0 0 14px rgba(244,201,93,.14)}
#view-timers .bc-time-block:has(> .state-overdue){display:flex;flex-direction:column;align-items:center;text-align:center;border-color:rgba(255,108,116,.58);background:linear-gradient(145deg,rgba(121,41,49,.23),rgba(43,28,35,.34));box-shadow:inset 0 1px 0 rgba(255,177,181,.12),0 0 14px rgba(255,82,94,.16)}
@keyframes boss-time-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-.5px)}20%,40%,60%,80%{transform:translateX(.5px)}}
@keyframes boss-card-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-.6px)}50%{transform:translateX(.6px)}}
#view-timers .boss-card:is(.state-warning,.state-spawn){border-color:rgba(244,201,93,.7);box-shadow:inset 0 1px 0 rgba(255,226,156,.14),0 8px 22px rgba(143,99,31,.14),0 0 13px rgba(244,201,93,.08)}
#view-timers .bc-time-sub{color:#b6c4d9}
#view-timers .bc-delay-pill{border:1px solid rgba(244,201,93,.32);box-shadow:0 0 9px rgba(244,201,93,.1);transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease}
#view-timers .bc-delay-pill:hover{box-shadow:0 0 12px rgba(244,201,93,.22);transform:translateY(-1px)}
#view-timers .bc-input{border-color:rgba(118,156,222,.38);background:rgba(12,23,40,.64);box-shadow:inset 0 1px 0 rgba(190,213,255,.05)}
#view-timers .bc-close{border:1px solid transparent;transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease}
#view-timers .bc-close:hover{border-color:rgba(255,115,126,.34);background:rgba(159,48,65,.16);transform:scale(1.06)}
#view-timers .bc-kill-btn.bc-kill-btn-img img{filter:drop-shadow(0 4px 8px rgba(246,174,59,.22))}
#view-timers .bc-items{border-top-color:rgba(126,162,221,.27)}
#view-timers .bc-items-label{color:#9eb0ca;letter-spacing:.025em;text-transform:none}
#view-timers .item-chip{border-color:rgba(104,146,213,.28);background:linear-gradient(145deg,rgba(66,99,150,.18),rgba(17,29,48,.78));color:#c4d3e9;box-shadow:inset 0 1px 0 rgba(188,211,255,.05);transition:transform 170ms ease,border-color 170ms ease,background 170ms ease,box-shadow 170ms ease}
#view-timers .item-chip:hover{transform:translateY(-1px);border-color:rgba(120,177,255,.58);background:linear-gradient(145deg,rgba(73,119,184,.3),rgba(18,32,55,.9));box-shadow:0 4px 10px rgba(48,104,190,.16)}
#view-timers .item-chip .dot{border:1px solid rgba(155,190,246,.24);box-shadow:0 0 8px rgba(78,139,235,.1)}
#view-timers .item-chip.selected{box-shadow:0 0 12px rgba(89,151,255,.18)}
@media(prefers-reduced-motion:reduce){
  #view-timers .boss-card,#view-timers .bc-delay-pill,#view-timers .bc-close,#view-timers .item-chip{transition:none}
  #view-timers .boss-card:hover,#view-timers .bc-delay-pill:hover,#view-timers .bc-close:hover,#view-timers .item-chip:hover{transform:none}
}
@media(max-width:1100px){
  #view-timers .bc-row{grid-template-columns:minmax(0,1fr) auto}
  #view-timers .bc-left{grid-column:1;grid-row:1}
  #view-timers .bc-map{grid-column:2;grid-row:1}
  #view-timers .bc-right{grid-column:1/-1;grid-row:2;justify-content:flex-end;flex-wrap:nowrap}
  #view-timers .bc-time-block{text-align:right;margin-right:auto}
  #view-timers .bc-input{flex:0 0 90px;width:90px}
}
@media(max-width:640px){
  #view-timers .boss-card{padding:.6rem}
  #view-timers .bc-avatar{width:68px;height:68px}
  #view-timers .bc-map{width:104px;height:104px}
  #view-timers .bc-left,#view-timers .bc-right{gap:.3rem}
  #view-timers .bc-time-block{width:auto;min-width:86px}
  #view-timers .bc-input{flex-basis:76px;width:76px;padding:.4rem .2rem}
  #view-timers .bc-time{font-size:1.04rem}
}
/* Decorative artwork for the two existing Boss summary cards only. */
#view-timers .stat-main:has(#statItemsSold)::after,
#view-timers .stat-main:has(#statMyShare)::after{content:"";display:block;flex:0 0 72px;height:72px;background:center / contain no-repeat;opacity:.75;pointer-events:none}
#view-timers .stat-main:has(#statItemsSold)::after{background-image:url("timers-sold-gum100.png");transform:scale(1.12);opacity:.85}
#view-timers .stat-main:has(#statMyShare)::after{background-image:url("timers-share-zeny.png")}
#view-timers .stat-main:has(#statItemsSold,#statMyShare) .stat-main-txt{overflow-wrap:anywhere}
@media(max-width:1100px){
  #view-timers .stat-main:has(#statItemsSold,#statMyShare)::after{flex-basis:42px;height:42px}
}
/* Boss page summary spacing only. */
#view-timers .stats-row{grid-auto-rows:1fr}
#view-timers .party-panel{
  padding:.65rem 1rem;margin-bottom:.85rem;gap:.6rem;
  border-color:rgba(112,143,225,.42);
  background:radial-gradient(ellipse at 0% 0%,rgba(91,142,244,.13),transparent 58%),radial-gradient(ellipse at 100% 0%,rgba(155,92,255,.1),transparent 54%),linear-gradient(145deg,#1e2b42,#172133);
  box-shadow:inset 0 1px 0 rgba(210,226,255,.08),0 4px 14px rgba(42,83,148,.1);
}
#view-timers .party-panel > .panel-head{align-items:center;gap:.5rem;flex-wrap:nowrap}
#view-timers .party-panel > .panel-head h2{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;white-space:nowrap;color:#edf3ff;text-shadow:0 1px 0 rgba(0,0,0,.3)}
#view-timers .party-heading-icon{display:block;width:113px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 5px rgba(96,161,255,.3))}
#view-timers .party-panel-controls{gap:.5rem;flex-wrap:nowrap}
#view-timers #partyPanelToggle{min-height:34px;padding:.3rem .65rem;font-size:.8rem;white-space:nowrap}
#view-timers .stat-tile{padding:.75rem 1rem;gap:.3rem}
#view-timers .stat-main-txt{gap:.25rem}
#view-timers .stat-delta{font-size:.63rem;padding:.08rem .35rem;font-weight:600}
#view-timers .stat-thumb{width:72px;height:72px}
#view-timers .stat-main:has(#statItemsSold,#statMyShare)::after{flex-basis:64px;height:64px}
#view-timers .stat-tile .link{min-height:24px;display:inline-flex;align-items:center}
/* Boss summary cards: four restrained accents matching the dashboard summary language. */
#view-timers .stats-row > .stat-tile{
  --stat-accent:112,154,255;
  position:relative;
  overflow:hidden;
  border-color:rgba(var(--stat-accent),.36);
  background:
    radial-gradient(circle at 92% 8%,rgba(var(--stat-accent),.12),transparent 42%),
    linear-gradient(145deg,rgba(var(--stat-accent),.075),rgba(21,31,49,.97) 58%);
  box-shadow:inset 0 1px 0 rgba(var(--stat-accent),.11),0 6px 18px rgba(var(--stat-accent),.07);
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease;
}
#view-timers .stats-row > .stat-tile:nth-child(1){--stat-accent:91,154,255}
#view-timers .stats-row > .stat-tile:nth-child(1){
  border-color:rgba(91,154,255,.5);
  background:
    radial-gradient(circle at 92% 8%,rgba(69,132,255,.19),transparent 44%),
    linear-gradient(145deg,rgba(43,83,156,.2),rgba(17,29,49,.99) 62%);
  box-shadow:inset 0 1px 0 rgba(137,180,255,.16),0 6px 20px rgba(35,91,190,.12);
}
#view-timers .stats-row > .stat-tile:nth-child(2){--stat-accent:53,211,153}
#view-timers .stats-row > .stat-tile:nth-child(3){--stat-accent:245,181,65}
#view-timers .stats-row > .stat-tile:nth-child(4){--stat-accent:166,105,255}
#view-timers .stats-row > .stat-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--stat-accent),.58);
  box-shadow:inset 0 1px 0 rgba(var(--stat-accent),.18),0 9px 23px rgba(var(--stat-accent),.13),0 0 12px rgba(var(--stat-accent),.07);
  filter:brightness(1.035);
}
#view-timers .stats-row > .stat-tile .num{color:rgb(var(--stat-accent));text-shadow:0 0 12px rgba(var(--stat-accent),.22)}
#view-timers .stats-row > .stat-tile .stat-icon{border:1px solid rgba(var(--stat-accent),.22);box-shadow:0 0 12px rgba(var(--stat-accent),.12)}
#view-timers .stats-row > .stat-tile .stat-thumb,
#view-timers .stats-row > .stat-tile .stat-main::after{filter:drop-shadow(0 4px 8px rgba(var(--stat-accent),.2))}
#view-timers .stats-row > .stat-tile .lbl{color:#dce7fa}
#view-timers .stats-row > .stat-tile .link{color:rgb(var(--stat-accent));transition:color 180ms ease,text-shadow 180ms ease,transform 180ms ease}
#view-timers .stats-row > .stat-tile .link:hover{color:#fff;text-shadow:0 0 9px rgba(var(--stat-accent),.55);transform:translateX(2px)}
@media(max-width:1100px){
  #view-timers .stat-thumb{width:46px;height:46px}
  #view-timers .stat-main:has(#statItemsSold,#statMyShare)::after{flex-basis:38px;height:38px}
}
@media(max-width:640px){
  #view-timers .party-panel{padding:.6rem .65rem}
  #view-timers .party-heading-icon{width:95px;height:32px}
  #view-timers .party-panel-summary{font-size:.7rem}
  #view-timers .party-panel-controls{gap:.35rem}
  #view-timers #partyPanelToggle{font-size:.75rem;padding:.3rem .45rem}
  #view-timers .stat-tile{padding:.7rem .8rem}
}
/* Separate currency values in the two Boss summary cards. */
#view-timers :is(#statItemsSoldAmount,#statMyShareAmount){display:flex;flex-direction:column;gap:.1rem;line-height:1.45}
#view-timers :is(#statItemsSoldAmount,#statMyShareAmount) > span:first-child{color:#f4c95d}
#view-timers :is(#statItemsSoldAmount,#statMyShareAmount) > span:last-child{color:var(--success)}
/* Clear-time action sits centred directly below the countdown box (gap clears the warning/overdue outline). */
#view-timers .bc-time-col{display:flex;flex-direction:column;align-items:center;gap:.7rem;flex:none}
#view-timers .bc-time-col > .bc-delay-pill{margin-top:0}
#view-timers .bc-right > div:has(> .bc-kill-btn){display:flex;flex-direction:column;align-items:center;flex:none}
@media(max-width:1100px){
  #view-timers .bc-time-col{margin-right:auto}
  #view-timers .bc-time-col > .bc-time-block{margin-right:0}
}
#view-timers .bc-time-block:has(> .state-normal){text-align:center}
/* ด้านขวาของการ์ดบอส (ผู้ใช้ขอ 10 ต.ค. 2569 — 3 อย่างติดกันเกินไป): แยก 2 กลุ่ม
   กรอบเวลา (ดูอย่างเดียว) | ช่องเวลาหลุม + MVP (ที่ต้องกด) · "— / ยังไม่ได้ฆ่า" อยู่กลางกรอบเหมือนตอนนับเวลา */
#view-timers .bc-time-block:has(> .idle){text-align:center}
#view-timers .bc-right > .bc-input{margin-left:.9rem}                  /* กรอบเวลา ↔ ช่องเวลาหลุม ≈ 23px (รวม gap) */
#view-timers .bc-right > div:has(> .bc-kill-btn){margin-left:.3rem}    /* ช่องเวลาหลุม ↔ MVP ≈ 14px */
@media(min-width:1101px){
  #view-timers .bc-right > .bc-close{margin-left:.45rem}               /* MVP ↔ × (จอแคบกว่านี้ × ชิดขวาสุดของแถวอยู่แล้ว) */
}
@media(max-width:640px){
  #view-timers .bc-right > .bc-input{margin-left:0}                    /* มือถือ: กรอบเวลาถูกดันไปซ้ายสุดอยู่แล้ว */
  #view-timers .bc-right > div:has(> .bc-kill-btn){margin-left:.32rem} /* ช่องเวลาหลุม ↔ MVP ≈ 10px (เดิม ≈ 5px) */
}

/* Custom Boss additions only: existing card geometry and MVP artwork are untouched. */
.custom-boss-badge{font-size:.62rem;font-weight:500;padding:.1rem .3rem;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);vertical-align:middle}
.custom-boss-actions{display:flex;justify-content:flex-end;gap:.35rem;margin-top:.35rem}
.custom-boss-actions .btn{padding:.2rem .45rem;font-size:.7rem}
.custom-boss-dialog{width:min(440px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:1.2rem}
.custom-boss-dialog::backdrop{background:#080c16bb}
.custom-boss-dialog .custom-boss-title-note{color:var(--danger)}
.custom-boss-dialog form{display:grid;gap:.7rem}.custom-boss-dialog label{display:grid;gap:.3rem;font-size:.82rem}
.custom-boss-dialog input{width:100%;min-width:0;padding:.6rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit}
.custom-boss-dialog small{font-size:.7rem;color:var(--text-dim)}.custom-boss-dialog [role=alert]{color:#ffaaa6;overflow-wrap:anywhere}.custom-boss-dialog [role=alert]:empty{display:none}
.custom-drop-row{display:flex;gap:.4rem;margin-bottom:.4rem}.custom-modal-actions{display:flex;justify-content:flex-end;gap:.5rem;position:sticky;bottom:0;background:var(--surface);padding-top:.6rem}
#addCustomBoss{white-space:nowrap;flex:none}
#view-timers .boss-sound-control{position:relative;display:inline-flex;align-items:stretch;flex:none;border:1px solid rgba(92,149,239,.48);border-radius:9px;background:linear-gradient(135deg,rgba(28,49,85,.96),rgba(17,31,58,.96));box-shadow:inset 0 1px 0 rgba(174,207,255,.1),0 4px 13px rgba(5,13,31,.2);overflow:visible}
#view-timers .boss-sound-control button{border:0;background:transparent;color:#a8cbff;min-width:37px;height:36px;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
#view-timers .boss-sound-control button:hover,#view-timers .boss-sound-control button:focus-visible{background:rgba(91,151,255,.14);color:#f0f6ff;outline:none}
#view-timers .boss-sound-toggle{border-radius:8px 0 0 8px}
#view-timers .boss-sound-menu-toggle{min-width:26px!important;border-left:1px solid rgba(117,165,241,.23)!important;border-radius:0 8px 8px 0;font-size:.78rem}
#view-timers .boss-sound-toggle.is-muted{color:#8c9ab1;background:rgba(15,23,41,.34)}
#view-timers .boss-sound-toggle svg{width:18px;height:18px;filter:drop-shadow(0 0 5px rgba(94,165,255,.3))}
#view-timers .boss-sound-popover{position:absolute;z-index:35;top:calc(100% + .55rem);right:0;width:242px;padding:.78rem;border:1px solid rgba(90,150,238,.52);border-radius:11px;background:linear-gradient(145deg,rgba(25,44,78,.99),rgba(13,25,50,.99));box-shadow:0 14px 30px rgba(2,8,23,.46),inset 0 1px 0 rgba(180,214,255,.11)}
#view-timers .boss-sound-popover[hidden]{display:none}
#view-timers .boss-sound-popover-head{font-size:.82rem;font-weight:800;color:#e6f0ff;margin-bottom:.7rem}
#view-timers .boss-sound-enable-row,#view-timers .boss-sound-volume-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;color:#c6d4ea;font-size:.78rem}
#view-timers .boss-sound-enable-row{padding-bottom:.62rem;border-bottom:1px solid rgba(117,157,214,.2)}
#view-timers .boss-sound-enable-row input{accent-color:#69a6ff;width:16px;height:16px;margin:0}
#view-timers .boss-sound-volume-row{display:block;padding-top:.62rem}
#view-timers .boss-sound-volume-head output{color:#ffd779;font-weight:800;font-variant-numeric:tabular-nums}
#view-timers .boss-sound-volume-row input{display:block;width:100%;margin:.62rem 0 .12rem;accent-color:#70adff;cursor:pointer}
#view-timers .boss-sound-preview{width:100%;margin-top:.72rem;padding:.47rem .6rem;border:1px solid rgba(116,175,255,.48);border-radius:7px;background:linear-gradient(135deg,rgba(61,111,196,.2),rgba(31,58,109,.18));color:#d9eaff;font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
#view-timers .boss-sound-preview:hover,#view-timers .boss-sound-preview:focus-visible{background:rgba(85,143,236,.28);border-color:#82b7ff;box-shadow:0 0 11px rgba(70,143,255,.18);outline:none}
@media(max-width:640px){#view-timers .boss-sound-popover{width:min(242px,calc(100vw - 1.5rem))}#view-timers .boss-sound-control button{height:35px}}

/* Header status cards: points, profile, and selected server share the summary-card language. */
#homeBannerZone .points-chip,
#homeBannerZone .user-menu,
#rateChips .rate-chip{
  border:1px solid rgba(113,151,218,.42);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(40,62,102,.9),rgba(19,30,49,.96));
  box-shadow:inset 0 1px 0 rgba(211,226,255,.09),inset 0 -9px 18px rgba(4,10,25,.16),0 7px 18px rgba(2,8,20,.22);
  transition:border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease,transform 180ms ease;
}
#homeBannerZone .points-chip:hover,
#homeBannerZone .user-menu:hover,
#rateChips .rate-chip:hover{
  border-color:rgba(148,187,255,.68);
  box-shadow:inset 0 1px 0 rgba(225,237,255,.14),0 9px 22px rgba(29,83,161,.24),0 0 14px rgba(88,145,237,.12);
  filter:brightness(1.04);
  transform:translateY(-1px);
}
#homeBannerZone .points-chip{min-height:48px;padding:.42rem .62rem .42rem .7rem;gap:.38rem;border-color:rgba(216,174,74,.52);background:linear-gradient(145deg,rgba(84,67,31,.72),rgba(29,33,39,.96));}
#homeBannerZone .points-chip:hover{border-color:rgba(246,204,100,.75);box-shadow:inset 0 1px 0 rgba(255,235,177,.13),0 9px 22px rgba(141,101,26,.2),0 0 14px rgba(238,186,66,.12)}
#homeBannerZone .points-chip .icon{width:18px;height:18px;color:#f6c85f;filter:drop-shadow(0 0 5px rgba(246,200,95,.38))}
#homeBannerZone .points-chip b{font-size:1.08rem;color:#fff1bf;text-shadow:0 0 10px rgba(246,200,95,.18)}
#homeBannerZone .points-chip small{font-size:.66rem;color:#d8c788}
#homeBannerZone .points-topup-btn{width:22px;height:22px;margin-left:.18rem;border:1px solid rgba(255,224,142,.62);border-radius:50%;background:linear-gradient(145deg,#d6a63d,#a97721);color:#fff8dc;box-shadow:inset 0 1px 0 rgba(255,245,202,.35),0 0 9px rgba(236,181,57,.22);font-size:1rem;line-height:1}
#homeBannerZone .points-topup-btn:hover{filter:brightness(1.13);transform:scale(1.05)}
#homeBannerZone .user-menu{min-height:52px;padding:.35rem .5rem .35rem .4rem;gap:.5rem;border-color:rgba(89,189,185,.42);background:linear-gradient(145deg,rgba(31,72,91,.86),rgba(18,33,51,.97));}
#homeBannerZone .user-menu .avatar{width:31px;height:31px;background:linear-gradient(145deg,#75b6ff,#4d78d8);border:1px solid rgba(190,232,255,.5);box-shadow:0 0 0 3px rgba(88,180,180,.1),0 0 12px rgba(86,173,226,.23);font-size:.82rem}
#homeBannerZone .user-menu .name{font-size:.8rem;color:#eef7ff;font-weight:800}
#homeBannerZone .user-menu .membership-pill{font-size:.58rem;padding:.08rem .34rem;line-height:1.2}
#homeBannerZone .user-menu .membership-time{font-size:.61rem;color:#b7d1d8}
#homeBannerZone .user-menu .membership-time.soon{color:#f3bd62}
#homeBannerZone .user-menu .icon-btn{border:1px solid rgba(136,184,227,.24);border-radius:9px;color:#a7c1da;padding:.28rem;background:rgba(14,28,46,.38)}
#homeBannerZone .user-menu .icon-btn:hover{color:#ffb0b7;border-color:rgba(255,126,137,.45);background:rgba(116,39,54,.24)}
#rateChips .rate-chip{min-width:142px;min-height:62px;padding:.5rem .68rem;gap:.3rem;border-color:rgba(103,151,232,.5);background:linear-gradient(145deg,rgba(40,70,121,.84),rgba(17,32,57,.98));}
#rateChips .rate-chip .rate-select{width:100%;padding:0 .8rem .28rem 0;border-bottom-color:rgba(140,182,244,.32);color:#e5f0ff;font-size:.78rem;letter-spacing:.01em}
#rateChips .rate-chip .rate-values{gap:.45rem}
/* "รับ" กับจำนวนอยู่บรรทัดเดียวกัน (ผู้ใช้ขอ 28 ก.ย. 2569) */
#rateChips .rate-chip .rate-values > div{flex-direction:row;align-items:baseline;gap:.4rem}
#rateChips .rate-chip .rate-label{font-size:.72rem;font-weight:700;color:#dce8f8;letter-spacing:.06em}
#rateChips .rate-chip .rate-num{font-size:1.08rem;color:#ff9e65;text-shadow:0 0 9px rgba(255,139,89,.16)}
/* ปุ่ม "เข้าสู่ระบบ/สมัครสมาชิก" ตอนยังไม่ล็อกอิน — สูงเท่ากับกล่องผู้ใช้/แต้มตอนล็อกอินแล้ว กันแบนเนอร์เตี้ยลง */
#homeBannerZone #guestAuthButtons{align-items:center}
#homeBannerZone #guestAuthButtons .btn{min-height:52px}
@media(max-width:760px){
  #homeBannerZone .points-chip{min-height:42px;padding:.32rem .5rem}
  #homeBannerZone .user-menu{min-height:48px}
  #rateChips .rate-chip{min-width:126px;min-height:56px}
  #homeBannerZone #guestAuthButtons .btn{min-height:48px}
}

/* Pricing-only presentation: preserve package controls and purchase hooks. */
.content:has(#view-pricing:not([hidden])) .banner-wrap{margin-bottom:.65rem}
#view-pricing .pricing-hero{padding:.6rem 0 1.55rem;gap:.65rem}
#view-pricing .pricing-badge{padding:.5rem 1.2rem;font-size:1.52rem;color:#b9caff;background:#202d49;border-color:#35466a}
#view-pricing .pricing-title{font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.4;max-width:850px;text-wrap:balance}
#view-pricing .pricing-sub{max-width:700px;font-size:.9rem;line-height:1.65;text-wrap:balance}
#view-pricing .pricing-benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.25rem;font-size:.78rem;color:#b5d8cb}
#view-pricing .pricing-cycle-toggle{margin:.25rem 0 0;padding:4px;background:#111827;border:1px solid #394661;border-radius:12px}
#view-pricing .pricing-cycle-toggle .seg-btn{min-width:108px;padding:.5rem 1rem;border-radius:8px;font-size:.85rem}
#view-pricing .pricing-cycle-toggle .seg-btn.active{background:#344766;color:#fff;box-shadow:0 2px 8px #0003}
#view-pricing .pricing-promo-banner{margin:.15rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .7rem;padding:.55rem 1rem;border-radius:10px;background:#202839;border:1px solid #3a4760;box-shadow:none;color:#c6cedc;font-size:.76rem;font-weight:400}
#view-pricing .pricing-promo-banner strong{color:#fff;font-weight:700}
#view-pricing .pricing-promo-banner .pricing-promo-off{color:var(--danger)}
#view-pricing .pricing-promo-banner{width:fit-content;max-width:100%;box-sizing:border-box;align-items:center;justify-content:center;gap:.5rem 1rem;padding:.55rem .8rem;border-radius:9px;background:#192333;border-color:#3a4760;text-align:left}
#view-pricing .pricing-promo-copy{flex:0 0 auto;line-height:1.4}
#view-pricing .pricing-promo-copy strong{font-size:.85rem}
#view-pricing .pricing-promo-clock{display:flex;align-items:center;gap:.45rem;min-width:0}
#view-pricing .pricing-promo-status{font-size:.75rem;color:#c6cedc}
#view-pricing .pricing-promo-digits{display:flex;gap:.25rem}
#view-pricing .pricing-promo-digits[hidden]{display:none}
#view-pricing .pricing-promo-unit{display:flex;align-items:baseline;justify-content:center;gap:.2rem;padding:.2rem .35rem;background:#111b2b;border:1px solid #34435b;border-radius:5px;box-sizing:border-box;white-space:nowrap}
#view-pricing .pricing-promo-unit b{font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;color:#ffe0a1}
#view-pricing .pricing-promo-unit small{font-size:.65rem;color:#aebdd2;margin:0}
@media(max-width:600px){
  #view-pricing .pricing-promo-banner{padding:.6rem .5rem;gap:.45rem}
  #view-pricing .pricing-promo-clock{width:100%;justify-content:center;flex-wrap:wrap;gap:.3rem}
  #view-pricing .pricing-promo-status{font-size:.68rem}
  #view-pricing .pricing-promo-unit{padding:.2rem .25rem}
}
#view-pricing .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;gap:1rem;padding-top:.4rem}
#view-pricing .pricing-card{min-width:0;padding:1.35rem;gap:.7rem;background:#192231;border:1px solid #364155;border-radius:20px}
#view-pricing .pricing-card-best{border:2px solid #d9b75d;padding:calc(1.35rem - 1px);background:linear-gradient(150deg,#544317,#1d2127 65%);box-shadow:inset 0 1px 0 rgba(255,235,177,.1),0 0 28px rgba(217,183,93,.22)}
#view-pricing .pricing-badge-best{top:-.8rem;right:1rem;padding:.35rem .85rem;font-size:.75rem;background:linear-gradient(100deg,#8aaeff,#b49bf2);color:#111b32;box-shadow:0 4px 16px #0003}
#view-pricing .pricing-card-name{min-height:0;font-size:1.2rem;line-height:1.5;font-weight:800}
#view-pricing .pricing-card-tagline{min-height:4.8em;margin:0;font-size:.82rem;line-height:1.6;font-style:normal;color:#b8c4d7}
#view-pricing .pricing-card-price{gap:.45rem}
#view-pricing .pricing-card-amount{font-family:inherit;font-variant-numeric:tabular-nums;font-size:2.85rem;line-height:1.1;letter-spacing:-.03em}
#view-pricing .pricing-card-best .pricing-card-amount{color:#d6ddff}
#view-pricing .pricing-grid{grid-auto-rows:1fr;row-gap:1.6rem}
#view-pricing .pricing-badge-secondary{background:#344159;color:#d1dced;box-shadow:none}
#view-pricing .pricing-pending-note{font-size:.72rem;color:#b6c1d2;margin-top:.7rem}
#view-pricing .pricing-original{font-size:.75rem;color:#96a4b8;text-decoration-color:currentColor}
#view-pricing .pricing-promo-badge{position:absolute;top:1.25rem;right:1rem;margin:0;padding:.3rem .65rem;border:1px solid #ff737b;border-radius:5px;background:#c92e3c;color:#fff;font-size:.8rem;line-height:1.4;font-weight:900;white-space:nowrap;box-shadow:0 3px 10px #0003}
#view-pricing .pricing-card:has(.pricing-promo-badge) .pricing-card-name{padding-right:5.25rem}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-card-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding-right:0}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-card-name-main{font-size:3rem;color:#a9c6ff}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-card-name-sub{font-size:1.15rem;color:#fff}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-promo-badge{position:static;transform:none}
#view-pricing .pricing-card:has([data-plan-key="timers"]){border:2px solid #9fb2cc;padding:calc(1.35rem - 1px)}
#view-pricing .pricing-card:has([data-plan-key="bundle"]){border:2px solid #79a7ff;padding:calc(1.35rem - 1px)}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-card-name{display:block;padding-right:0;font-size:3rem;text-align:center;color:#dfe7f3}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-promo-badge{position:static}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-card-tagline{min-height:0;text-align:center}
#view-pricing .pricing-promo-heading{min-height:9.1rem;display:flex;flex-direction:column;gap:.7rem}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-original,
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-original{font-size:1.2rem;font-weight:500;color:#8a96a9}
#view-pricing .pricing-card-best.pricing-card:has(.pricing-promo-badge) .pricing-card-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding-right:0}
#view-pricing .pricing-card-best .pricing-card-name-main{font-size:3rem;color:#d9b75d}
#view-pricing .pricing-card-best .pricing-card-name-sub{font-size:.93rem;color:#fff}
#view-pricing .pricing-card-best .pricing-promo-badge{position:static}
#view-pricing .pricing-card-best .pricing-original{font-size:1.2rem;font-weight:500;color:#a39a86}
#view-pricing .pricing-card[data-plan-key="free"] .pricing-card-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
#view-pricing .pricing-card[data-plan-key="free"] .pricing-card-name-main{font-size:3rem}
#view-pricing .pricing-card[data-plan-key="free"] .pricing-card-name-sub{font-size:1.15rem;color:#d3ddef}
#view-pricing .pricing-card[data-plan-key="free"] .pricing-card-tagline{text-align:center}
#view-pricing .pricing-card:has([data-plan-key="farm"]) .pricing-card-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
#view-pricing .pricing-card:has([data-plan-key="farm"]) .pricing-card-name-main{font-size:3rem}
#view-pricing .pricing-card:has([data-plan-key="farm"]) .pricing-card-name-sub{font-size:1.15rem;color:#d3ddef}
#view-pricing .pricing-card:has([data-plan-key="farm"]) .pricing-card-tagline{text-align:center}
#view-pricing .pricing-card:has([data-plan-key="accountItems"]) .pricing-card-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
#view-pricing .pricing-card:has([data-plan-key="accountItems"]) .pricing-card-name-main{font-size:3rem}
#view-pricing .pricing-card:has([data-plan-key="accountItems"]) .pricing-card-name-sub{font-size:1.05rem;color:#d3ddef}
#view-pricing .pricing-card:has([data-plan-key="accountItems"]) .pricing-card-tagline{text-align:center}
#view-pricing .pricing-bundle-price{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
#view-pricing .pricing-bundle-price .pricing-card-price{flex-wrap:nowrap;white-space:nowrap;justify-content:center;gap:.45rem}
#view-pricing .pricing-bundle-price .pricing-perday{margin:0}
#view-pricing .pricing-perday{font-size:.75rem;margin-top:-.3rem}
#view-pricing .pricing-features{border-top:1px solid #ffffff14;padding-top:1rem;gap:.65rem;margin-top:.25rem}
#view-pricing .pricing-features li{font-size:.84rem;line-height:1.55;align-items:flex-start;color:#c9d3e2;gap:.5rem}
#view-pricing .pricing-check{color:#8bc8b1}
#view-pricing .pricing-cta{min-height:46px;margin-top:1rem;border-radius:11px;font-size:.93rem;font-weight:800;border:1px solid #637baf;background:#293b5d;color:#edf2ff}
#view-pricing .pricing-card-best .pricing-cta{background:linear-gradient(100deg,#8aaeff,#b49bf2);color:#111b32;border-color:#b6baff;box-shadow:0 5px 18px #839df52b}
#view-pricing .pricing-cta:hover:not(:disabled){filter:brightness(1.1)}
#view-pricing .pricing-card:has([data-plan-key="timers"]),
#view-pricing .pricing-card:has([data-plan-key="bundle"]){
  background:linear-gradient(150deg,rgba(38,54,83,.72),rgba(25,35,56,.96) 68%);
  box-shadow:inset 0 1px 0 rgba(190,213,255,.08),0 8px 22px rgba(25,48,95,.16)
}
/* ระดับแพ็ก: จับเวลาบอส = เงิน, 3 in 1 = ฟ้า, 4 in 1 = ทอง (ทองมีใบเดียว ให้สายตาหยุดที่แพ็กแนะนำ) */
#view-pricing .pricing-card:has([data-plan-key="timers"]):hover{border-color:#c6d4e8;box-shadow:inset 0 1px 0 rgba(210,226,255,.12),0 12px 28px rgba(20,32,55,.35)}
#view-pricing .pricing-card:has([data-plan-key="bundle"]):hover{border-color:#a3c2ff;box-shadow:inset 0 1px 0 rgba(210,226,255,.12),0 12px 28px rgba(45,83,150,.3)}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-card-amount{color:#e6edf7}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-card-amount{color:#c2d6ff}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-badge-best{background:#46546b;color:#e6edf7}
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-badge-best{background:#79a7ff;color:#0e1a33}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-cta,
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-cta{background:rgba(121,167,255,.16);border-color:#79a7ff;color:#eef3ff}
#view-pricing .pricing-card:has([data-plan-key="timers"]) .pricing-check,
#view-pricing .pricing-card:has([data-plan-key="bundle"]) .pricing-check{color:#82d5c0}
#view-pricing .pricing-card{transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease}
#view-pricing .pricing-card:hover{transform:translateY(-4px)}
#view-pricing .pricing-card-best{border-width:3px;padding:calc(1.35rem - 2px);box-shadow:inset 0 1px 0 rgba(255,235,177,.14),0 0 0 1px rgba(217,183,93,.25),0 0 42px rgba(217,183,93,.32);z-index:1}
#view-pricing .pricing-card-best:hover{border-color:#f0cf7c;box-shadow:inset 0 1px 0 rgba(255,235,177,.18),0 0 0 1px rgba(240,207,124,.35),0 0 54px rgba(217,183,93,.42)}
#view-pricing .pricing-card-best .pricing-badge-best{padding:.4rem 1rem;font-size:.8rem;font-weight:900;background:linear-gradient(100deg,#f2d488,#c99a3c);color:#2b1d05;box-shadow:0 4px 16px rgba(201,154,60,.35)}
#view-pricing .pricing-card-best .pricing-cta{background:linear-gradient(100deg,#f0cf7c,#c99a3c);color:#241703;border-color:#f5dc9c;box-shadow:0 6px 20px rgba(201,154,60,.3)}
@media (min-width:901px){
  #view-pricing .pricing-card-best{transform:scale(1.03)}
  #view-pricing .pricing-card-best:hover{transform:scale(1.03) translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){
  #view-pricing .pricing-card{transition:none}
  #view-pricing .pricing-card:hover{transform:none}
  #view-pricing .pricing-card-best:hover{transform:none}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  #view-pricing .pricing-card-best,#view-pricing .pricing-card-best:hover{transform:scale(1.03)}
}
/* ราคาเฉลี่ยต่อวัน: ป้ายเน้นสีเขียวใต้ราคา */
#view-pricing .pricing-bundle-price .pricing-perday{margin:0;font-size:.8rem;font-weight:700;color:#8fe0bf;background:rgba(74,196,146,.12);border:1px solid rgba(74,196,146,.3);border-radius:999px;padding:.2rem .75rem;white-space:nowrap}
/* แถวระบบในการ์ดแพ็กรวม */
#view-pricing .pricing-modules{list-style:none;margin:.25rem 0 0;padding:1rem 0 0;border-top:1px solid #ffffff14;display:flex;flex-direction:column;gap:.5rem}
#view-pricing .pricing-module{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#view-pricing .pricing-module .icon{width:22px;height:22px;flex:none;color:#9fc0ff}
#view-pricing .pricing-card-best .pricing-module .icon{color:#f0cf7c}
#view-pricing .pricing-module-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
#view-pricing .pricing-module-text b{font-size:.88rem;color:#eef3fa}
#view-pricing .pricing-module-text small{font-size:.72rem;color:#aab6c8}
#view-pricing .pricing-module-mark{flex:none;font-weight:800;color:#82d5c0}
#view-pricing .pricing-module-off{background:transparent;border-style:dashed}
#view-pricing .pricing-module-off .icon,#view-pricing .pricing-module-off .pricing-module-text b,#view-pricing .pricing-module-off .pricing-module-mark{color:#6b778a}
#view-pricing .pricing-module-off .pricing-module-text small{color:#6b778a}
#view-pricing .pricing-modules + .pricing-features{margin-top:.1rem}
#view-pricing .pricing-module-limited .icon,#view-pricing .pricing-module-limited .pricing-module-mark{color:#e3b95e}
#view-pricing .pricing-features-spacer{flex:1}
#view-pricing .pricing-details-toggle{align-self:center;display:inline-flex;align-items:center;gap:.3rem;margin-top:.1rem;padding:.35rem .9rem;border-radius:999px;border:1px solid #3d4a61;background:transparent;color:#b9c6da;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
#view-pricing .pricing-details-toggle:hover{background:rgba(255,255,255,.06);color:#eef3fa;border-color:#58678a}
#view-pricing .pricing-details-toggle:focus-visible{outline:3px solid #c1d3ff;outline-offset:2px}
#view-pricing .pricing-details-toggle + .pricing-features{border-top:none;padding-top:.25rem}
#view-pricing .pricing-features > .pricing-feature-divider:first-child{border-top:none;margin-top:0;padding-top:0}#view-pricing .pricing-cta:focus-visible,#view-pricing .seg-btn:focus-visible{outline:3px solid #c1d3ff;outline-offset:3px}
#view-pricing .pricing-cta:disabled{opacity:1;color:#aebace;background:#222c3b;border-color:#3b4658;cursor:default}
#view-pricing .pricing-card:nth-child(n+4){padding-block:1rem;gap:.5rem}
#view-pricing .pricing-card:nth-child(n+4) .pricing-card-tagline{min-height:0}
#view-pricing .pricing-card:nth-child(n+4) > .pricing-bundle-price{margin-top:.65rem}
#view-pricing .pricing-card:nth-child(n+4) .pricing-features{padding-top:.75rem;margin-top:.15rem}
#view-pricing .pricing-card:nth-child(n+4) .pricing-cta{margin-top:.5rem}
@media(min-width:901px){
  #view-pricing .pricing-grid{grid-template-rows:auto auto}
}
@media(max-width:900px){
  #view-pricing .pricing-grid{grid-template-columns:1fr;grid-auto-rows:auto;max-width:540px;gap:1.5rem}
  #view-pricing .pricing-card-tagline{min-height:0}
  #view-pricing .pricing-hero{padding-bottom:1.4rem}
}
/* Compact Settings only */
#view-settings .topbar{margin-bottom:1rem}
#view-settings .settings-card{padding:1rem;gap:.65rem;border-radius:12px}
#view-settings .panel-head{margin:0;gap:.6rem;flex-wrap:wrap}
#view-settings .panel-head h2{font-size:1rem}
#view-settings .settings-card .field{margin:0;gap:.3rem}
#view-settings .settings-card input{padding:.55rem .7rem;min-width:0}
#view-settings .settings-note{margin:0;font-size:.75rem}
#view-settings .settings-actions .btn{min-height:40px;padding:.5rem .85rem}
#view-settings .settings-kv{grid-template-columns:1fr 1.5fr 1fr;gap:.75rem;padding-bottom:.65rem;border-bottom:1px solid var(--border)}
#view-settings .settings-kv>div{background:none;border:0;padding:0}
#view-settings .settings-kv>div[hidden]{display:none}
#view-settings .settings-kv b{font-size:.8rem}
#view-settings .settings-grid{gap:.8rem}
#view-settings .settings-group-label{margin:1rem 0 .5rem}
#view-settings .server-pick-list{margin:.2rem 0;gap:.45rem}
#view-settings .settings-package{margin-bottom:.8rem;border-color:#46577b}
#view-settings .settings-package{position:relative;overflow:hidden;padding:1rem 1.15rem;background:linear-gradient(145deg,rgba(39,61,101,.82),rgba(21,33,55,.97) 68%);border-color:rgba(105,151,228,.52);box-shadow:inset 0 1px 0 rgba(212,227,255,.1),inset 0 -22px 30px rgba(5,12,27,.16),0 9px 22px rgba(14,36,77,.16)}
#view-settings .settings-package::before{content:"";position:absolute;top:0;left:1.15rem;right:1.15rem;height:2px;background:linear-gradient(90deg,rgba(130,177,255,.05),rgba(130,177,255,.72),rgba(130,177,255,.05));pointer-events:none}
#view-settings .settings-package .panel-head{margin-bottom:.5rem}
#view-settings .settings-package .panel-head h2{font-size:1.04rem;color:#eef5ff;display:flex;align-items:center;gap:.5rem}
#view-settings .settings-package .panel-head h2::before{content:"";width:4px;height:18px;border-radius:999px;background:linear-gradient(#87b5ff,#71d5c0);box-shadow:0 0 10px rgba(103,182,255,.34)}
#view-settings .settings-package-list{display:grid;gap:.65rem}
#view-settings .settings-package-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.15rem 0}
#view-settings .settings-package-name{font-size:1.1rem;font-weight:800;color:#f1f6ff}
#view-settings .settings-package-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.2rem}
#view-settings .settings-package-time{font-size:.94rem;font-weight:700;font-variant-numeric:tabular-nums;color:#8dd9c4}
#view-settings .settings-package-time.soon{color:#f5bd62}
#view-settings .settings-package-expiry{font-size:.72rem;color:#a7b9d1}
#view-settings .settings-package-link{font-size:.78rem;text-decoration:none;white-space:nowrap;min-height:36px;padding:.4rem .7rem}
#view-settings .settings-package-upgrade{background:linear-gradient(135deg,#8c6724,#bb9347);border-color:#d2ae63;color:#fff3cf;box-shadow:inset 0 1px 0 rgba(255,239,188,.28),0 4px 12px rgba(167,120,36,.2)}
#view-settings .settings-package-upgrade:hover{background:linear-gradient(135deg,#a77b2c,#d0a554);border-color:#e3c277;color:#fff8e6;box-shadow:inset 0 1px 0 rgba(255,244,205,.34),0 6px 15px rgba(190,142,43,.3)}
#view-settings .settings-package #stPackageAccessNote{margin:.35rem 0 0;padding-top:.45rem;border-top:1px solid rgba(157,188,236,.15);font-size:.7rem;color:#9db0c9;opacity:.85}
#view-settings .settings-security{grid-column:2;grid-row:1}
#view-settings .settings-servers{padding:1rem 1.1rem .9rem}
#view-settings .settings-servers .panel-head{align-items:center;margin-bottom:.15rem;flex-wrap:wrap}
#view-settings .settings-servers .panel-head h2{font-size:1rem}
#view-settings .settings-servers-head-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
#view-settings .settings-servers .panel-head .party-panel-summary{font-size:.78rem;color:#a9c4f5;font-weight:700;white-space:nowrap}
#view-settings .settings-servers-head-actions .settings-package-upgrade{padding:.3rem .65rem;min-height:0;font-size:.72rem;white-space:nowrap}
#view-settings .settings-package-upgrade:disabled,#view-settings .settings-package-upgrade:disabled:hover{background:var(--surface-2);border-color:var(--border);color:var(--text-dim);box-shadow:none;cursor:not-allowed}
#view-settings .settings-servers .settings-note{margin:.15rem 0 .65rem;font-size:.72rem}
#view-settings .settings-servers .server-pick-list{gap:.35rem;margin-bottom:.55rem}
#view-settings .settings-servers .server-pick-list .share-chip{font-size:.78rem;padding:.28rem .62rem}
#view-settings .settings-servers .settings-actions{display:flex;justify-content:flex-end;margin-top:.75rem}
#view-settings .settings-servers .settings-actions .btn{padding:.42rem .75rem;min-height:36px;font-size:.78rem}
@media(max-width:760px){
 #view-settings .settings-security{grid-column:auto;grid-row:4}
 #view-settings .settings-servers{grid-row:2}
 #view-settings #stRetiredServerCard{grid-row:3}
 #view-settings .settings-servers .settings-actions{margin-top:.6rem}
 #view-settings .settings-servers .settings-actions .btn{width:100%}
 #view-settings .settings-kv{grid-template-columns:1fr 1fr}
 #view-settings .settings-kv>div:nth-child(2){grid-column:1/-1;grid-row:2}
 #view-settings .settings-package-row{align-items:flex-start;gap:.65rem}
 #view-settings .settings-package-link{white-space:normal}
}
/* Settings polish: aligned forms, readable account summary and distinct selections. */
#view-settings .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view-settings .settings-grid>.settings-card{padding:20px;gap:14px;min-width:0}
#view-settings :is(.settings-profile,.settings-security){align-self:stretch}
#view-settings :is(.settings-profile,.settings-security)>.settings-actions{margin-top:auto;padding-top:2px}
#view-settings .settings-grid .settings-actions>.btn{min-height:44px;border-radius:8px;padding:10px 16px}
#view-settings .settings-grid .field{gap:6px}
#view-settings .settings-grid .field>input{min-height:44px;font-size:.9rem}
#view-settings .settings-grid .field>label{font-size:.82rem;font-weight:500;color:#c4d1e4}
#view-settings .settings-grid :is(.settings-note,.field-hint){font-size:.78rem;line-height:1.65;color:var(--text-dim)}
#view-settings .settings-profile .settings-kv{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
#view-settings .settings-kv .lbl{font-size:.72rem}
#view-settings .settings-kv b{font-size:.82rem;font-weight:600;line-height:1.6}
#view-settings .settings-servers .panel-head{margin:0;gap:12px}
#view-settings .settings-servers .settings-note{margin:0}
/* หัวการ์ด: "เซิร์ฟเวอร์ที่เล่น" + คำแนะนำ "✓ ออก เพื่อเลือกเซิร์ฟเวอร์ใหม่" บรรทัดเดียวกัน (จอแคบขึ้นบรรทัดใหม่เอง) */
#view-settings .settings-servers-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0}
#view-settings .settings-servers .settings-note-link{font-weight:600;text-decoration:underline;text-underline-offset:2px}
#view-settings .settings-servers .settings-note-link:hover{color:#a9c4ff}
#view-settings .settings-servers-head-actions{gap:8px}
#view-settings .settings-servers-head-actions .settings-package-upgrade{min-height:40px;padding:7px 10px}
#view-settings .settings-servers .server-pick-list{gap:8px;margin:0}
#view-settings .settings-servers .server-pick-list .share-chip{min-height:44px;padding:9px 12px;border-radius:9px;font-size:.8rem;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
#view-settings .settings-servers .server-pick-list .share-chip.on{background:#2b4163;border-color:#79a7ff;color:#dce9ff;box-shadow:inset 0 -2px 0 #79a7ff;font-weight:600}
#view-settings .settings-servers .server-pick-list .share-chip:not(:disabled):hover{background:var(--surface-hover);border-color:#7490b8}
#view-settings .settings-servers .settings-actions{margin-top:0;padding-top:2px}
#view-settings #stRetiredServerCard{background:color-mix(in srgb,var(--surface) 70%,var(--bg));border-color:var(--border)}
#view-settings #stRetiredServerCard .panel-head h2{color:#c4d1e4;font-size:.94rem}
#view-settings .settings-group-label{margin:24px 0 10px;font-size:.82rem}
#view-settings .settings-history>.h-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
#view-settings .settings-history>.h-tabs>button{min-height:44px;border-radius:8px;line-height:1.5;padding:8px 12px}
#view-settings .settings-history>.h-tabs>button.active{box-shadow:inset 0 -2px 0 var(--accent)}
#view-settings .settings-history .settings-note:not(:empty){padding:10px 0;border-bottom:1px solid var(--border)}
#view-settings .settings-history .settings-note:empty{display:none}
#view-settings .settings-history .settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;align-items:center}
#view-settings .settings-history .settings-row-title{font-size:.88rem;line-height:1.6;overflow-wrap:anywhere}
#view-settings .settings-history .settings-row-meta{font-size:.78rem;margin-top:4px;line-height:1.65;overflow-wrap:anywhere}
#view-settings .settings-history .settings-row>.membership-pill{padding:4px 9px;font-size:.72rem;white-space:normal;line-height:1.5;text-align:center}
#view-settings .settings-history .settings-row-amt{font-size:.85rem;text-align:right;max-width:180px;overflow-wrap:anywhere}
#view-settings .settings-history .settings-list>.admin-topup-empty{margin:0;padding:28px 12px;line-height:1.7}
@media(max-width:1000px){
  #view-settings .settings-profile .settings-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-settings .settings-profile .settings-kv>div:nth-child(2){grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
  #view-settings .settings-grid{grid-template-columns:minmax(0,1fr)}
  #view-settings .settings-grid>.settings-card{padding:16px}
  #view-settings :is(.settings-profile,.settings-security){align-self:start}
  #view-settings .settings-grid .field>input{font-size:16px}
  #view-settings .settings-grid .settings-actions>.btn{width:100%}
  #view-settings .settings-history>.h-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-settings .settings-history .settings-row{gap:10px}
  #view-settings .settings-history .settings-row-amt{max-width:112px}
}
/* Dashboard summary: original GIF bytes, decorative and separate from values. */
#view-home .mr-summary-item{--summary-rgb:88,196,249;--summary-image:url('Marin.gif')}
#view-home .mr-summary-item:has(.sell){--summary-rgb:82,211,153;--summary-image:url('Poporing.gif')}
#view-home .mr-summary-item:has(.buy){--summary-rgb:248,127,151;--summary-image:url('Poring.gif')}
#view-home .mr-summary-item,#view-home .mr-summary-item:last-child{
 position:relative;isolation:isolate;overflow:hidden;justify-content:flex-start;
 padding:.8rem .9rem;gap:.35rem;border:1px solid rgba(var(--summary-rgb),.3);border-radius:12px;
 background:radial-gradient(ellipse at 100% 0%,rgba(var(--summary-rgb),.14),transparent 75%),linear-gradient(145deg,#1d293b,#172131);
 box-shadow:inset 0 1px 0 rgba(var(--summary-rgb),.13),0 3px 12px rgba(0,0,0,.12);
 transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#view-home .mr-summary-item::after{content:"";position:absolute;right:.8rem;top:.65rem;width:40px;height:40px;background:var(--summary-image) center/contain no-repeat;opacity:.95;filter:drop-shadow(0 2px 5px rgba(var(--summary-rgb),.28));pointer-events:none}
#view-home .mr-summary-item .mr-summary-label{display:flex;align-items:center;min-height:32px;width:100%;padding-right:46px;box-sizing:border-box;font-size:.8rem;line-height:1.45;color:#d8e4f1;letter-spacing:0}
#view-home .mr-summary-item .mr-summary-value{width:100%;font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.4;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#view-home .mr-summary-item .sell{color:#79e6b4}
#view-home .mr-summary-item .buy{color:#ff9daf}
#view-home .mr-summary-item .profit-pos{color:#83d8ff}
@media(hover:hover){#view-home .mr-summary-item:hover{transform:translateY(-2px);border-color:rgba(var(--summary-rgb),.6);box-shadow:0 5px 16px rgba(var(--summary-rgb),.1)}}
@media(max-width:600px){
 #view-home .mr-summary-row{grid-template-columns:1fr;gap:.55rem}
 #view-home .mr-summary-item,#view-home .mr-summary-item:last-child{padding:.65rem .85rem;gap:.15rem}
 #view-home .mr-summary-item::after{width:36px;height:36px;top:.6rem}
 #view-home .mr-summary-item .mr-summary-label{min-height:28px}
}
@media(prefers-reduced-motion:reduce){#view-home .mr-summary-item{transition:none}#view-home .mr-summary-item:hover{transform:none}}
/* ช่องที่ 4 "กำไรจากที่ขายแล้ว" (ลูกค้าขอ 8 ต.ค. 2569) · สีทองตามเส้นในกราฟ · ไอคอน Drops
   จอคอม (กว้างกว่า 1100px): 4 ช่องแถวเดียวเต็มหน้า แล้วฟอร์มรายการซื้อ-ขายเลื่อนลงมาใต้แถว (ผู้ใช้เลือก)
   แท็บเล็ต 601–1100px: 2×2 · มือถือ: ช่องละแถว (กฎ max-width:600 ด้านบน) */
#view-home .mr-summary-item.mr-summary-realized{--summary-rgb:233,185,73;--summary-image:url('drop.gif')}
#view-home .mr-summary-item .realized{color:#f2d18b}
#view-home .mr-summary-item .realized-neg{color:#ff9daf}
#view-home .mr-summary-note{grid-column:1/-1;font-size:.74rem;line-height:1.5;color:var(--text-dim)}
@media(min-width:601px) and (max-width:1100px){
  #view-home .mr-summary-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1101px){
  #view-home .dashboard-overview{grid-column:1 / -1}
  #view-home #mrEntryPanel{grid-row:2;margin-top:0}
  #view-home .mr-summary-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* การ์ดสรุปแบบกระชับ (ผู้ใช้เลือกแบบ B 8 ต.ค. 2569): ตัวเลขเล็กลง · ไอคอนกึ่งกลางด้านขวา หัวการ์ดไม่ต้องสูงเท่าไอคอน
   ที่จอ 1366 การ์ดสูง 122px → 88px · มือถือ (≤600px) ใช้แบบแถวแนวนอนเดิม ไม่แตะ */
@media(min-width:601px){
  #view-home .mr-summary-item,#view-home .mr-summary-item:last-child{padding:.6rem 3.6rem .6rem .9rem;gap:.15rem}
  #view-home .mr-summary-item::after{top:50%;transform:translateY(-50%);width:36px;height:36px;right:.85rem}
  #view-home .mr-summary-item .mr-summary-label{min-height:0;padding-right:0}
  #view-home .mr-summary-item .mr-summary-value{font-size:clamp(1.15rem,1.45vw,1.35rem);line-height:1.3}
  #view-home .mr-summary-note{line-height:1.4}
}
/* หัวกราฟซื้อ–ขาย: ชื่อกำกับเลขใหญ่ (เปลี่ยนตามเส้นที่เปิดอยู่ จุดสีเดียวกับเส้น) */
#view-home .mr-kpi-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap}
#view-home .mr-kpi-label .cl-dot{width:8px;height:8px;border-radius:50%;flex:none}
/* Announcement widget: shared wherever the existing widget is displayed. */
:is(#view-home,#view-farm) .panel-ticker{padding:.85rem 1rem;gap:.7rem;border:1px solid rgba(205,172,99,.48);border-radius:12px;background:radial-gradient(ellipse at 100% 0%,rgba(194,151,65,.13),transparent 65%),linear-gradient(145deg,#202c3e,#172131);box-shadow:inset 0 1px 0 rgba(241,210,148,.12),0 3px 14px rgba(177,131,43,.07)}
:is(#view-home,#view-farm) .panel-ticker .panel-head{margin:0;gap:.65rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-head-title{flex-wrap:wrap;gap:.3rem .55rem}
:is(#view-home,#view-farm) .panel-ticker h2{font-size:1rem;font-weight:700;color:#f4e7cb}
:is(#view-home,#view-farm) .panel-ticker #tickerServerChips .chip{background:rgba(216,180,103,.07);border-color:rgba(216,180,103,.25);color:#d9c9a9}
:is(#view-home,#view-farm) .panel-ticker #tickerServerChips .chip.selected{background:rgba(216,180,103,.15);border-color:rgba(216,180,103,.5);color:#f6dfaf}
:is(#view-home,#view-farm) .panel-ticker .ticker-wrap{padding:.1rem 0 .2rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-item{padding:.5rem .75rem;gap:.3rem;border-color:rgba(199,174,119,.2);background:linear-gradient(135deg,rgba(221,183,103,.07),rgba(12,21,35,.4));border-radius:9px}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-main{font-size:.75rem;color:#b8c5d7;gap:.5rem}
:is(#view-home,#view-farm) .panel-ticker .ticker-item .poster{font-size:.78rem;color:#b7d9f9}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-sub{gap:.65rem;align-items:center}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-sub .buy{font-size:1.1rem;line-height:1.35;font-weight:700;color:#f2d18b}
/* ชื่อเซิร์ฟบนการ์ดประกาศ = ป้ายกรอบทองแบบชิปเซิร์ฟบนหัวแผง (#tickerServerChips .chip.selected) ใหญ่กว่าป้ายข้างหัวข้อเล็กน้อยให้เด่น */
.ticker-item .ticker-server{display:inline-flex;align-items:center;box-sizing:border-box;height:22px;padding:.1rem .55rem 0;border:1px solid rgba(216,180,103,.5);border-radius:999px;background:rgba(216,180,103,.15);color:#f6dfaf;font-size:.78rem;font-weight:600;line-height:1;white-space:nowrap}
:is(#view-home,#view-farm) .panel-ticker .ticker-item-main{align-items:center}
:is(#view-home,#view-farm) .panel-ticker .ticker-countdown{font-size:.64rem;color:#c4cedc;background:rgba(8,17,29,.4);padding:.05rem .35rem;border-radius:5px}
:is(#view-home,#view-farm) .panel-ticker .buy + .ticker-countdown::before{content:none}
:is(#view-home,#view-farm) .panel-ticker .ticker-item:has(.dashboard-empty-title){width:100%;box-sizing:border-box;padding:.65rem .8rem;border:1px dashed rgba(199,174,119,.22);border-radius:9px;background:rgba(12,21,35,.2);gap:.15rem}
:is(#view-home,#view-farm) .panel-ticker .dashboard-empty-title{font-size:.8rem;color:#d5deeb;font-weight:500}
:is(#view-home,#view-farm) .panel-ticker .dashboard-empty-detail{display:block;font-size:.72rem;line-height:1.6;color:#9dacc1}
@media(max-width:600px){
 :is(#view-home,#view-farm) .panel-ticker{padding:.75rem;gap:.6rem}
 :is(#view-home,#view-farm) .panel-ticker .panel-head{flex-wrap:wrap}
 :is(#view-home,#view-farm) .panel-ticker .ticker-head-title{flex:1 1 175px}
 :is(#view-home,#view-farm) .panel-ticker h2{font-size:.9rem}
 :is(#view-home,#view-farm) .panel-ticker .ticker-post-group{margin-left:auto}
}
/* Matching book-header panels for the Home trading workspace. */
#view-home :is(#mrEntryPanel,.home-left>.panel){
 border:1px solid rgba(130,153,213,.32);border-radius:12px;padding:1rem;gap:.75rem;
 background:radial-gradient(ellipse at 100% 0%,rgba(100,116,201,.11),transparent 65%),linear-gradient(145deg,#1e2a3e,#172131);
 box-shadow:inset 0 1px 0 rgba(175,194,248,.1),0 3px 14px rgba(9,15,32,.18);
}
#view-home :is(#mrEntryPanel,.home-left>.panel)>.panel-head{margin:0;gap:.65rem;align-items:center;flex-wrap:wrap}
#view-home :is(#mrEntryPanel,.home-left>.panel)>.panel-head h2{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:1rem;font-weight:700;line-height:1.5;color:#e4eafa;letter-spacing:0}
#view-home .dashboard-book-icon{width:28px;height:28px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 3px rgba(126,140,230,.2))}
#view-home .home-left>.panel>.panel-head>.ticker-head-title{align-self:stretch;width:100%;justify-content:flex-start}
#view-home :is(#mrEntryPanel,.home-left>.panel) .mr-chart-server-tags{font-size:.72rem;font-weight:500}
@media(max-width:600px){
 #view-home :is(#mrEntryPanel,.home-left>.panel){padding:.8rem;gap:.65rem}
 #view-home :is(#mrEntryPanel,.home-left>.panel)>.panel-head h2{font-size:.95rem;gap:.35rem}
 #view-home .dashboard-book-icon{width:26px;height:26px}
}
#view-home #mrEntryPanel>.panel-head{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:.6rem}
#view-home #mrEntryPanel>.panel-head>.ticker-head-title{min-width:0;flex:none}
#view-home #mrEntryPanel>.panel-head>.field{flex:1;min-width:0;margin:0}
#view-home #mrEntryPanel>.panel-head h2{flex-wrap:nowrap;white-space:nowrap}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle{width:100%;box-sizing:border-box;gap:.15rem}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{padding:.4rem .45rem;white-space:nowrap}
@media(max-width:400px){
 #view-home #mrEntryPanel>.panel-head{gap:.3rem}
 #view-home #mrEntryPanel>.panel-head h2{font-size:.85rem;gap:.2rem}
 #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{padding:.35rem .25rem;font-size:.78rem}
}
/* Inventory tier cards: one navy system with a distinct accent per warehouse. */
#view-items .items-card-a-sub{
 --tier-rgb:115,185,255;
 position:relative;isolation:isolate;overflow:hidden;
 border:1px solid rgba(var(--tier-rgb),.34);border-radius:12px;
 background:radial-gradient(ellipse at 100% 0%,rgba(var(--tier-rgb),.16),transparent 70%),linear-gradient(145deg,#202d43,#172131);
 box-shadow:inset 0 1px 0 rgba(220,232,255,.08),0 5px 16px rgba(var(--tier-rgb),.07);
 transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#view-items #itemsCardTierA{--tier-rgb:82,211,153}
#view-items #itemsCardTierB{--tier-rgb:248,127,151}
#view-items #itemsCardTierC{--tier-rgb:115,185,255}
#view-items #itemsCardTierD{--tier-rgb:250,176,80}
#view-items #itemsCardTierE{--tier-rgb:45,200,190}
#view-items #itemsCardTierS{--tier-rgb:184,145,255}
#view-items .items-card-a-sub::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,rgba(var(--tier-rgb),.07),transparent 42%);opacity:.8}
#view-items .items-card-a-sub .panel-head,
#view-items .items-card-a-sub .items-tier-count,
#view-items .items-card-a-sub .items-tier-viewall{z-index:1}
#view-items .items-card-a-sub .panel-head h2{font-size:1rem;font-weight:750;letter-spacing:0;color:#e4eafa}
#view-items .items-card-a-sub .items-tier-count{font-family:inherit;font-size:1.7rem;line-height:1.25;font-weight:800;font-variant-numeric:tabular-nums;color:rgb(var(--tier-rgb));text-shadow:0 0 14px rgba(var(--tier-rgb),.18)}
#view-items .items-card-a-sub .items-tier-free-note{font-size:.7rem;color:var(--text-dim);margin-top:-.1rem;z-index:1;position:relative}
#view-items .items-card-a-sub .items-tier-viewall{color:rgb(var(--tier-rgb));font-size:.8rem;transition:color .16s ease,text-shadow .16s ease}
#view-items .items-card-a-sub .items-tier-viewall:hover{color:#fff;text-decoration:none;text-shadow:0 0 10px rgba(var(--tier-rgb),.55)}
#view-items .items-card-a-sub .items-card-a-art{opacity:.42;filter:drop-shadow(0 3px 9px rgba(var(--tier-rgb),.35));transition:opacity .18s ease,transform .18s ease,filter .18s ease}
#view-items .items-card-a-sub:hover{border-color:rgba(var(--tier-rgb),.62);box-shadow:inset 0 1px 0 rgba(220,232,255,.12),0 7px 20px rgba(var(--tier-rgb),.14);transform:translateY(-2px)}
#view-items .items-card-a-sub:hover .items-card-a-art{opacity:.58;filter:drop-shadow(0 4px 11px rgba(var(--tier-rgb),.5));transform:translateY(-50%) scale(1.03)}
@media(max-width:640px){
 #view-items .items-card-a-sub .items-tier-count{font-size:1.55rem}
 #view-items .items-card-a-sub:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 #view-items .items-card-a-sub,#view-items .items-card-a-sub .items-card-a-art{transition:none}
 #view-items .items-card-a-sub:hover{transform:none}
}
/* Inventory detail surfaces: treasure-led headers with separate warm/cool accents. */
#view-items .inventory-heading-icon{width:30px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 5px rgba(245,190,94,.35))}
#view-items .items-card-b,#view-items .items-card-c{position:relative;isolation:isolate;overflow:hidden;border-radius:12px}
#view-items .items-card-b{--detail-rgb:128,166,255;--detail-heading:#e8edff;border-color:rgba(var(--detail-rgb),.5);background:radial-gradient(ellipse at 100% 0%,rgba(var(--detail-rgb),.19),transparent 68%),linear-gradient(145deg,#222f4c,#172131);box-shadow:inset 0 1px 0 rgba(210,224,255,.12),0 6px 20px rgba(var(--detail-rgb),.14);transition:border-color .24s ease,box-shadow .24s ease,background .24s ease}
#view-items .items-card-b.items-detail-tier-a{--detail-rgb:82,211,153;--detail-heading:#d9ffeb}
#view-items .items-card-b.items-detail-tier-b{--detail-rgb:248,127,151;--detail-heading:#ffe0e6}
#view-items .items-card-b.items-detail-tier-c{--detail-rgb:115,185,255;--detail-heading:#e0efff}
#view-items .items-card-b.items-detail-tier-d{--detail-rgb:250,176,80;--detail-heading:#ffe9cc}
#view-items .items-card-b.items-detail-tier-e{--detail-rgb:45,200,190;--detail-heading:#d6fff9}
#view-items .items-card-b.items-detail-tier-s{--detail-rgb:184,145,255;--detail-heading:#eee3ff}
#view-items .items-card-c{border-color:rgba(224,164,76,.46);background:radial-gradient(ellipse at 100% 0%,rgba(236,163,65,.17),transparent 68%),linear-gradient(145deg,#302a38,#1b2433);box-shadow:inset 0 1px 0 rgba(255,224,156,.11),0 5px 18px rgba(207,139,36,.1)}
#view-items .items-card-b::before,#view-items .items-card-c::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.04),transparent 38%)}
#view-items .items-card-b>.panel-head,#view-items .items-card-c>.panel-head,#view-items .items-card-b>*,#view-items .items-card-c>*{position:relative;z-index:1}
#view-items .items-card-b>.panel-head,#view-items .items-card-c>.panel-head{align-items:center}
#view-items .items-card-b>.panel-head h2,#view-items .items-card-c>.panel-head h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:750;color:#e8edff}
#view-items .items-card-b>.panel-head h2{color:var(--detail-heading);transition:color .24s ease}
#view-items .items-card-c>.panel-head h2{color:#fff0d0}
#view-items .items-card-b .inventory-heading-icon{filter:drop-shadow(0 2px 6px rgba(var(--detail-rgb),.55));transition:filter .24s ease}
#view-items .items-card-b #itemsDetailList{border-top:1px solid rgba(var(--detail-rgb),.2);padding-top:.25rem;transition:border-color .24s ease}
#view-items .items-card-b .items-detail-row,#view-items .items-card-b>[aria-hidden="true"]{border-color:rgba(var(--detail-rgb),.28);transition:border-color .24s ease,background .24s ease}
#view-items .items-card-b .items-detail-right .mono{color:rgb(var(--detail-rgb));transition:color .24s ease}
#view-items .items-card-b .items-undo-btn:hover{color:rgb(var(--detail-rgb))}
#view-items .items-card-c .items-pending-row{border-color:rgba(225,173,92,.28);background:rgba(32,34,48,.6)}
#view-items .items-card-c .items-pending-amount{color:#f5ca78}
#view-items .items-card-b .items-detail-row:hover,#view-items .items-card-b .items-detail-row:focus-within{background:rgba(var(--detail-rgb),.1)}
#view-items .items-card-c .items-pending-row:hover{background:rgba(219,155,56,.1)}
#view-items .items-card-a-sub.items-tier-selected{border-color:rgba(var(--tier-rgb),.86);box-shadow:inset 0 0 0 1px rgba(var(--tier-rgb),.24),0 0 18px rgba(var(--tier-rgb),.18);transform:translateY(-1px)}
@media(max-width:640px){
 #view-items .inventory-heading-icon{width:27px;height:27px}
 #view-items .items-card-b>.panel-head h2,#view-items .items-card-c>.panel-head h2{font-size:.95rem}
}
/* Farm panels: a shared blue-violet surface that carries the dashboard visual system. */
#view-farm .panel-farm-history,#view-farm .panel-farm-revenue,#view-farm .panel-farm-cost{
  position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(112,160,227,.3);border-radius:12px;
  background:radial-gradient(ellipse at 100% 0%,rgba(90,167,255,.09),transparent 62%),linear-gradient(145deg,#1d293b,#151f2e);
  box-shadow:inset 0 1px 0 rgba(218,235,255,.065),0 4px 14px rgba(38,78,130,.07);
}
#view-farm .panel-farm-history::before,#view-farm .panel-farm-revenue::before,#view-farm .panel-farm-cost::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,rgba(127,190,255,.035),transparent 40%);
}
#view-farm .panel-farm-history>* ,#view-farm .panel-farm-revenue>* ,#view-farm .panel-farm-cost>*{position:relative;z-index:1}
#view-farm .panel-farm-history>.panel-head,#view-farm .panel-farm-revenue>.panel-head,#view-farm .panel-farm-cost>.panel-head{padding-bottom:.55rem;border-bottom:1px solid rgba(119,165,226,.14)}
#view-farm .panel-farm-history>.panel-head h2,#view-farm .panel-farm-revenue>.panel-head h2,#view-farm .panel-farm-cost>.panel-head h2{display:flex;align-items:center;gap:.45rem;color:#e7effc;text-shadow:0 1px 0 rgba(0,0,0,.28)}
#view-farm .farm-heading-icon{width:39px;height:39px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 4px rgba(92,181,255,.38))}
#view-farm .panel-farm-history:hover,#view-farm .panel-farm-revenue:hover,#view-farm .panel-farm-cost:hover{border-color:rgba(132,186,255,.42);box-shadow:inset 0 1px 0 rgba(218,235,255,.09),0 6px 17px rgba(38,78,130,.1)}
@media(max-width:640px){
  #view-farm .farm-heading-icon{width:37px;height:37px}
}
@media(prefers-reduced-motion:reduce){
  #view-farm .panel-farm-history,#view-farm .panel-farm-revenue,#view-farm .panel-farm-cost{transition:none}
}
/* Merchant history: classes are emitted by historyItemRowHtml in displayed order. */
#view-home #mrHistoryList .mr-it-row.mr-ic{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem 1rem;align-items:start}
#view-home #mrHistoryList .mr-ic>.mr-ic-head{grid-column:1/-1;align-items:center}
#view-home #mrHistoryList .mr-it-namewrap{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.4rem .6rem}
#view-home #mrHistoryList .mr-it-name{display:block;overflow:visible;overflow-wrap:anywhere}
#view-home #mrHistoryList .mr-it-row.mr-ic>.mr-ic-head>.mr-ic-chev{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15rem;height:1.15rem;margin-top:0;font-size:1.4rem;line-height:1;
  color:#a9bfff;text-shadow:0 0 7px rgba(111,148,255,.42);
}
#view-home #mrHistoryList .mr-it-cell{align-items:flex-start;text-align:left;gap:.15rem;overflow:visible}
#view-home #mrHistoryList .mr-it-cell i{display:block;font-style:normal;font-size:.72rem;color:var(--text-dim)}
#view-home #mrHistoryList .mr-it-cell b{font-size:.92rem;white-space:normal;overflow-wrap:anywhere}
#view-home #mrHistoryList .mr-it-cell small{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
#view-home #mrHistoryList .mr-it-cell .mr-it-avg,#view-home #mrHistoryList .mr-it-cell.profit small{font-size:.6rem;opacity:.65}
#view-home #mrHistoryList .mr-it-cell.profit .mr-profit-sale-note{font-size:.7rem;opacity:.75}
#view-home #mrHistoryList .mr-it-cell.left b{color:var(--warn)}
@container home-history (max-width:440px){
 #view-home #mrHistoryList .mr-it-row.mr-ic{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
 #view-home #mrHistoryList .mr-it-row.mr-ic>.mr-ic-head>.mr-ic-chev{font-size:1.4rem}
}
#view-home #mrHistoryList .mr-it-row.mr-ic{margin-top:.65rem;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}
#view-home #mrHistoryList .mr-it-row.mr-ic.history-alt-odd{
  background:linear-gradient(135deg,rgba(31,42,70,.92),rgba(39,50,82,.9));
  border-color:rgba(120,150,255,.38);
  box-shadow:inset 0 1px 0 rgba(201,214,255,.075),0 2px 8px rgba(8,16,34,.16);
}
#view-home #mrHistoryList .mr-it-row.mr-ic.history-alt-even{
  background:linear-gradient(135deg,rgba(31,42,70,.92),rgba(39,50,82,.9));
  border-color:rgba(120,150,255,.38);
  box-shadow:inset 0 1px 0 rgba(201,214,255,.075),0 2px 8px rgba(8,16,34,.16);
}
#view-home #mrHistoryList .mr-it-row.mr-ic.history-alt-odd:hover{border-color:rgba(152,178,255,.56);box-shadow:inset 0 1px 0 rgba(214,225,255,.11),0 4px 12px rgba(46,85,175,.18);filter:brightness(1.035)}
#view-home #mrHistoryList .mr-it-row.mr-ic.history-alt-even:hover{border-color:rgba(152,178,255,.56);box-shadow:inset 0 1px 0 rgba(214,225,255,.11),0 4px 12px rgba(46,85,175,.18);filter:brightness(1.035)}
@media(prefers-reduced-motion:reduce){
  #view-home #mrHistoryList .mr-it-row.mr-ic{transition:none}
}
/* Farm history: ordered session records without changing any underlying values. */
#view-farm .panel-farm-history>.panel-head h2{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
#view-farm .farm-history-summary{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0;font-size:.74rem;font-weight:600}
#view-farm .farm-history-summary-count{padding:.14rem .45rem;border:1px solid rgba(201,168,240,.35);border-radius:999px;background:rgba(201,168,240,.1);color:#dbc7fb;white-space:nowrap}
#view-farm .farm-history-day{border-color:rgba(201,168,240,.6);background:rgba(201,168,240,.06);box-shadow:0 2px 10px rgba(20,10,40,.25)}
#view-farm .farm-history-day-head{color:#e7edf8}
#view-farm .farm-history-summary-profit{white-space:nowrap}
#view-farm .farm-history-entry{padding:.75rem .8rem;display:grid;gap:.6rem;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}
#view-farm .farm-history-entry.farm-history-alt-odd{background:linear-gradient(135deg,rgba(31,40,76,.96),rgba(38,48,88,.94));border-color:rgba(112,126,220,.5);box-shadow:inset 0 1px 0 rgba(205,210,255,.07),0 2px 8px rgba(30,39,100,.16)}
#view-farm .farm-history-entry.farm-history-alt-even{background:linear-gradient(135deg,rgba(22,50,78,.97),rgba(27,65,98,.94));border-color:rgba(70,160,220,.55);box-shadow:inset 0 1px 0 rgba(194,228,255,.075),0 2px 8px rgba(20,79,124,.17)}
#view-farm .farm-history-entry.farm-history-alt-odd:hover{border-color:rgba(136,151,239,.62);box-shadow:inset 0 1px 0 rgba(218,222,255,.1),0 3px 11px rgba(50,63,154,.2);filter:brightness(1.035)}
#view-farm .farm-history-entry.farm-history-alt-even:hover{border-color:rgba(91,184,235,.66);box-shadow:inset 0 1px 0 rgba(211,237,255,.1),0 3px 11px rgba(28,105,158,.2);filter:brightness(1.035)}
#view-farm .farm-history-entry-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.65rem}
#view-farm .farm-history-meta{display:flex;align-items:center;gap:.35rem .45rem;flex-wrap:wrap;min-width:0}
#view-farm .farm-history-time{font-size:.82rem;font-weight:700;color:#e7edf8;font-variant-numeric:tabular-nums}
/* ป้าย "ล่าสุด" ของกั้มที่เพิ่งบันทึก — พื้นแดงเข้ม ตัวขาว (คอนทราสต์ ~4.7:1) · ระยะห่างใช้ gap ของแถวแทน margin
   ป้าย New สีเขียวในประวัติซื้อ–ขายไม่เปลี่ยน (ใช้คลาส mr-tx-new-badge ร่วม แต่ทับเฉพาะในหน้าฟาร์ม) */
#view-farm .farm-history-meta>.farm-history-new-badge{margin-left:0;background:#d9342f;color:#fff;font-size:.68rem;letter-spacing:0;line-height:1.45;padding:.05rem .45rem}
#view-farm .farm-history-chip{display:inline-flex;align-items:center;min-height:24px;padding:.12rem .45rem;border:1px solid rgba(143,165,208,.32);border-radius:999px;background:rgba(102,129,185,.1);font-size:.7rem;font-weight:700;line-height:1.25;white-space:nowrap}
#view-farm .farm-history-count{color:#ddcaff;border-color:rgba(201,168,240,.38);background:rgba(201,168,240,.1)}
#view-farm .farm-history-map{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#b9d8ff}
#view-farm .farm-history-actions{align-self:start;gap:.2rem;padding:.1rem;border:1px solid rgba(143,165,208,.24);border-radius:7px;background:rgba(10,17,29,.3)}
#view-farm .farm-history-actions button{display:grid;place-items:center;width:28px;height:28px;border-radius:5px;padding:0}
#view-farm .farm-history-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(119,146,192,.2);border-radius:9px;overflow:hidden;background:rgba(10,17,29,.24)}
#view-farm .farm-history-metric{display:grid;gap:.14rem;min-width:0;padding:.5rem .6rem;border-right:1px solid rgba(119,146,192,.2)}
#view-farm .farm-history-metric:last-child{border-right:0}
#view-farm .farm-history-metric>span,#view-farm .farm-history-earned>span,#view-farm .farm-history-rares>span{font-size:.67rem;font-weight:700;color:#aebbd0}
#view-farm .farm-history-metric b,#view-farm .farm-history-earned b{min-width:0;overflow-wrap:anywhere;font-size:.84rem;line-height:1.35;font-variant-numeric:tabular-nums;color:#ecf1fb}
#view-farm .farm-history-metric small,#view-farm .farm-history-earned small{font-size:.7rem;line-height:1.35;color:#9cacc4;font-variant-numeric:tabular-nums}
#view-farm .farm-history-metric small:empty,#view-farm .farm-history-earned small:empty{display:none}
#view-farm .farm-history-revenue b{color:var(--success)}
#view-farm .farm-history-metric.farm-profit-pos b,#view-farm .farm-history-metric.farm-profit-pos small{color:var(--success)}
#view-farm .farm-history-metric.farm-profit-neg b,#view-farm .farm-history-metric.farm-profit-neg small{color:var(--danger)}
#view-farm .farm-history-earned{display:flex;align-items:baseline;gap:.35rem .5rem;flex-wrap:wrap;padding:.05rem .1rem 0}
#view-farm .farm-history-earned b{color:#f3d48e}
#view-farm .farm-history-rares{display:flex;align-items:flex-start;gap:.45rem;flex-wrap:wrap;padding-top:.5rem;border-top:1px dashed rgba(119,146,192,.28)}
#view-farm .farm-history-rares>div{display:flex;gap:.3rem;flex-wrap:wrap;min-width:0}
#view-farm .farm-history-rares .farm-rare-tag{white-space:normal;line-height:1.4}
@media(max-width:640px){
 #view-farm .farm-history-entry{padding:.65rem;gap:.55rem}
 #view-farm .farm-history-entry-head{gap:.45rem}
 #view-farm .farm-history-time{flex-basis:100%}
 #view-farm .farm-history-metrics{grid-template-columns:1fr}
 #view-farm .farm-history-metric{grid-template-columns:68px minmax(0,1fr);align-items:baseline;border-right:0;border-bottom:1px solid rgba(119,146,192,.2)}
 #view-farm .farm-history-metric:last-child{border-bottom:0}
 #view-farm .farm-history-metric small{grid-column:2}
 #view-farm .farm-history-rares{gap:.35rem}
}
@media(prefers-reduced-motion:reduce){
 #view-farm .farm-history-entry{transition:none}
}
/* Stronger frame hierarchy only within the three trading panels. */
#view-home :is(#mrEntryPanel,.home-left>.panel){
 --border:#4b5e80;
 border-color:#536788;
 box-shadow:inset 0 0 0 1px rgba(151,178,231,.04),0 0 8px rgba(88,118,187,.035),0 3px 12px rgba(9,15,32,.14);
}
/* Keep warehouse choices readable without allowing long item labels to widen the entry form. */
#view-home #mrEntryPanel .mr-sell-source .mr-stock-select{
 min-width:0;width:100%;max-width:100%;font-size:.78rem;line-height:1.35;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-home #mrEntryPanel .mr-sell-source .mr-stock-select option{font-size:.78rem}
@media(max-width:600px){
 #view-home #mrEntryPanel .mr-sell-source .mr-stock-select,
 #view-home #mrEntryPanel .mr-sell-source .mr-stock-select option{font-size:.74rem}
}

/* ---------- มือถือ (ตรวจ 25 ก.ย. 2569) ---------- */
/* 1) การ์ดบอส: ชื่อ/บรรทัดรองขึ้นบรรทัดใหม่ได้ 2 บรรทัด — ส่วนท้ายชื่อ ("(Hidden)", "(2)") กับชื่อแผนที่ใช้แยกการ์ด ห้ามถูกตัด */
@media (max-width:640px){
  .bc-title,.bc-sub{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
}
/* 3) ปุ่มเล็ก: ขยายพื้นที่กด (มองไม่เห็น) รอบปุ่ม หน้าตาเท่าเดิม */
.farm-series-chip-x,.farm-series-dropdown-btn,.farm-oc-toggle,.points-topup-btn,.bc-close{position:relative}
.farm-series-chip-x::after,.farm-series-dropdown-btn::after,.farm-oc-toggle::after,.points-topup-btn::after,.bc-close::after{content:"";position:absolute}
.farm-series-chip-x::after{inset:-12px -9px}
.farm-series-dropdown-btn::after{inset:-12px}
.farm-oc-toggle::after{inset:-7px -4px}
.points-topup-btn::after{inset:-11px}
.bc-close::after{inset:-10px -6px}
/* 4) หน้ายอดนักฟาร์มตอนยังไม่ล็อกอิน: ใช้หน้าตาเดียวกับข้อความว่างของหน้าบัญชีนักลงทุน */
#view-farm .dashboard-chart-empty{position:absolute;inset:15% 8% 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;pointer-events:none;background:var(--surface);padding:1rem;font-size:.83rem;line-height:1.75;color:var(--text-dim)}
#view-farm .dashboard-chart-empty[hidden]{display:none}
#view-farm .dashboard-chart-empty strong{color:var(--text);font-size:.95rem}
#view-farm #farmHistoryList .mr-empty:has(.dashboard-empty-title){margin:.5rem 0;padding:1.5rem 1rem;border:1px dashed var(--border);border-radius:var(--radius-m);background:var(--surface-2);font-size:.86rem;line-height:1.8}
#view-farm .dashboard-empty-title{display:block;font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
#view-farm .dashboard-empty-detail{display:block;font-weight:400;font-size:.83rem;line-height:1.8;color:var(--text-dim)}
/* เสียงแจ้งเตือนยังถูกเบราว์เซอร์กันอยู่ (ยังไม่ได้แตะหน้าเว็บ) */
.boss-sound-lock-hint{margin:.6rem 0 0;padding:.5rem .8rem;border:1px dashed color-mix(in srgb, var(--warn) 55%, transparent);border-radius:var(--radius-m);background:color-mix(in srgb, var(--warn) 10%, transparent);color:var(--warn);font-size:.82rem;line-height:1.6}
.boss-sound-lock-hint[hidden]{display:none}

/* ---------- UI polish: preserve the original Gum100 artwork and layout ---------- */
/* Banner account actions: paired navy and blue-violet finishes. */
#guestAuthButtons{gap:.65rem;align-items:center}
#guestAuthButtons .btn{
  min-height:44px;padding:.65rem 1.15rem;border-radius:12px;
  font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:0;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#guestLoginBtn{
  color:#e4edff;background:linear-gradient(145deg,rgba(36,51,77,.96),rgba(22,33,53,.96));
  border:1px solid rgba(159,188,242,.4);
  box-shadow:inset 0 1px 0 rgba(213,227,255,.08),0 3px 10px rgba(7,13,27,.2);
}
#guestRegisterBtn{
  color:#fff;background:linear-gradient(115deg,#365fbd 0%,#6848ad 100%);
  border:1px solid rgba(170,180,255,.48);
  box-shadow:inset 0 1px 0 rgba(231,231,255,.2),0 4px 14px rgba(52,56,140,.3);
}
@media(hover:hover){
  #guestLoginBtn:hover{
    background:linear-gradient(145deg,#2c4061,#1f304d);border-color:#91b5f6;
    box-shadow:inset 0 1px 0 rgba(213,227,255,.12),0 4px 14px rgba(7,13,27,.25);filter:none;
  }
  #guestRegisterBtn:hover{
    background:linear-gradient(115deg,#416ecf,#7957bf);border-color:#b2bfff;
    box-shadow:inset 0 1px 0 rgba(231,231,255,.24),0 5px 18px rgba(89,92,187,.38);filter:none;
  }
}
#guestAuthButtons .btn:active{transform:none;box-shadow:inset 0 2px 6px rgba(7,13,27,.3)}
#guestAuthButtons .btn:focus-visible{outline:2px solid #d1dfff;outline-offset:3px}
@media(max-width:760px){
  #guestAuthButtons .btn{min-height:46px;padding:.65rem .75rem}
}
@media(prefers-reduced-motion:reduce){#guestAuthButtons .btn{transition:none}}

:root{
  --focus-ring:#b5ceff;
  --control-height:44px;
  --polish-divider:rgba(151,178,231,.18);
}

/* Shared controls: quiet surfaces, legible labels and consistent keyboard feedback. */
.btn{min-height:var(--control-height)}
.btn-sm{min-height:38px}
.seg-btn{min-height:36px}
.icon-btn{border-radius:var(--radius-s);align-items:center;justify-content:center}
.auth-modal-close{width:44px;height:44px;top:.65rem;right:.65rem}
.field-hint,.auth-note,.settings-note,.mr-exrate-hint{line-height:1.75}
input,select,textarea{scroll-margin-block:5rem}
button,a,input,select,textarea,summary{scroll-margin-block:1rem}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px;
}
/* These controls previously replaced keyboard outlines with a hover treatment. */
#view-timers .boss-sound-control button:focus-visible,
#view-timers .boss-sound-preview:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px;
}
@media(hover:hover){
  .rail-btn:not(.active):hover{background:var(--surface-2);color:var(--text)}
  .seg-btn:not(.active):not(:disabled):hover{background:var(--surface-hover);color:var(--text)}
  .icon-btn:not(:disabled):hover{background:var(--surface-hover);color:var(--text)}
}
.rail-btn{transition:background .16s ease,color .16s ease}
.rail-btn.active{color:#b7d0ff}
.ticker-wrap:focus-within .ticker-track{animation-play-state:paused}

/* Trading workspace: keep the same columns, with a consistent 8/16px rhythm. */
#view-home :is(#mrEntryPanel,.home-left>.panel){padding:1.125rem;gap:1rem}
#view-home :is(#mrEntryPanel,.home-left>.panel)>.panel-head{
  padding-bottom:.75rem;border-bottom:1px solid var(--polish-divider);
}
#view-home #mrEntryPanel .field{gap:.5rem}
#view-home #mrEntryPanel .field>label,
#view-home #mrEntryPanel .mr-entry-field{font-size:.85rem;line-height:1.6}
#view-home #mrEntryPanel .mr-item-row{padding:.75rem;gap:.65rem}
#view-home #mrEntryPanel .mr-item-row-main{gap:.65rem}
#view-home #mrEntryPanel .mr-item-row input,
#view-home #mrEntryPanel .mr-item-row select{min-height:44px}
#view-home #mrEntryPanel #mrAddRowBtn{
  min-height:40px;padding:.4rem .75rem;border:1px dashed var(--border);
  border-radius:var(--radius-s);color:var(--accent);
}
#view-home #mrEntryPanel .mr-total{padding:.8rem .9rem;border-radius:var(--radius-s)}
#view-home #mrEntryPanel #mrConfirm{min-height:48px}
#view-home .mr-summary-item .mr-summary-label{line-height:1.6}
#view-home .mr-summary-item .mr-summary-value{letter-spacing:-.025em}
#view-home .mr-empty{padding:1.5rem 1rem;line-height:1.8}
#view-home .mr-hist-search,#view-home #mrHistoryRange,
#view-home .dashboard-filters .hf-group select{min-height:40px}

/* Category selector: inset navy track with a raised blue-violet selected tab. */
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle{
  padding:4px;gap:4px;border-radius:14px;
  border:1px solid rgba(139,166,213,.22);
  background:linear-gradient(180deg,#121c2e,#172338);
  box-shadow:inset 0 2px 5px rgba(4,10,22,.24),0 1px 0 rgba(210,224,255,.04);
}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{
  position:relative;min-width:0;min-height:40px;padding:.5rem .65rem;
  border:1px solid transparent;border-radius:10px;
  color:#adbbd3;background:transparent;font-size:.875rem;font-weight:600;
  line-height:1.5;box-shadow:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn.active{
  background:linear-gradient(115deg,#365eae,#6249a0);
  color:#fff;border-color:rgba(172,193,255,.5);
  box-shadow:inset 0 1px 0 rgba(231,237,255,.16),0 2px 7px rgba(5,10,27,.35);
}
@media(hover:hover){
  #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn:not(.active):hover{
    background:rgba(135,168,229,.1);color:#e3ecfc;border-color:rgba(139,166,213,.15);
  }
}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:1px;z-index:1;
}
@media(prefers-reduced-motion:reduce){
  #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{transition:none}
}

/* Merchant form: a calm surface, clear sections and one primary action. */
#view-home #mrEntryPanel{
  --entry-muted:#b4c1d7;
  --entry-line:rgba(150,174,215,.2);
  --entry-input:#121d2f;
  padding:1.5rem;gap:1.25rem;border-radius:18px;
  border-color:#3c4d69;background:#1a2538;
  box-shadow:inset 0 1px 0 rgba(222,233,255,.045),0 12px 32px rgba(5,12,25,.16);
}
#view-home #mrEntryPanel>.panel-head{
  display:flex;flex-wrap:wrap;gap:1rem;padding-bottom:0;border-bottom:0;
}
#view-home #mrEntryPanel>.panel-head>.ticker-head-title{width:100%}
#view-home #mrEntryPanel>.panel-head h2{font-size:1.075rem;gap:.5rem;color:#f0f4fd}
#view-home #mrEntryPanel .dashboard-book-icon{width:25px;height:25px;filter:none}
#view-home #mrEntryPanel .mr-entry-intro{display:block;font-size:.8rem;line-height:1.7;margin:.35rem 0 0;color:var(--entry-muted)}
#view-home #mrEntryPanel>.panel-head>.field{flex:1 0 100%}
#view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{min-height:42px}
#view-home #mrEntryPanel .field{gap:.5rem}
#view-home #mrEntryPanel .field>label,
#view-home #mrEntryPanel .mr-entry-field{font-size:.825rem;font-weight:500;color:var(--entry-muted)}
#view-home #mrEntryPanel .mr-type-toggle{gap:.625rem}
#view-home #mrEntryPanel .mr-type-btn{
  min-height:46px;border-radius:10px;background:transparent;border-color:#43536e;
  color:var(--entry-muted);font-size:.925rem;font-weight:600;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
#view-home #mrEntryPanel .mr-type-btn.active[data-type="buy"]{
  background:rgba(239,90,86,.1);border-color:#c87888;color:#ffb2bb;
  box-shadow:inset 0 0 0 1px rgba(200,120,136,.1);
}
#view-home #mrEntryPanel .mr-type-btn.active[data-type="sell"]{
  background:rgba(63,189,117,.1);border-color:#60ae91;color:#91e4bc;
  box-shadow:inset 0 0 0 1px rgba(96,174,145,.1);
}
#view-home #mrEntryPanel #mrServerChips{gap:.5rem}
#view-home #mrEntryPanel #mrServerChips .chip{
  min-height:36px;padding:.4rem .8rem;border-radius:9px;font-size:.8rem;
}
#view-home #mrEntryPanel .mr-item-row{
  padding:1rem;background:rgba(8,17,32,.22);border-color:var(--entry-line);
  border-radius:12px;gap:.85rem;
}
#view-home #mrEntryPanel .mr-item-row-main{gap:.8rem}
#view-home #mrEntryPanel .mr-entry-field{gap:.45rem}
#view-home #mrEntryPanel .mr-item-row input,
#view-home #mrEntryPanel .mr-item-row select{
  min-height:46px;padding:.65rem .75rem;border-radius:9px;
  background:var(--entry-input);border-color:#40516c;font-size:1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
#view-home #mrEntryPanel .mr-item-row input:focus,
#view-home #mrEntryPanel .mr-item-row select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(121,167,255,.12);
}
#view-home #mrEntryPanel .mr-stock-info{font-size:.8rem;line-height:1.7;color:var(--entry-muted)}
#view-home #mrEntryPanel .mr-stock-info>strong{font-weight:600;color:#f2d18b}
#view-home #mrEntryPanel .mr-stock-info-warn{color:#ffb2bb}
#view-home #mrEntryPanel .mr-entry-details{padding-top:.8rem;border-top:1px solid var(--entry-line)}
#view-home #mrEntryPanel .mr-entry-section-label{font-size:.75rem;font-weight:500;color:var(--entry-muted);margin-bottom:.45rem}
#view-home #mrEntryPanel .mr-entry-image{gap:.65rem;font-size:.75rem;line-height:1.6;color:var(--entry-muted)}
#view-home #mrEntryPanel .mr-row-img{width:44px;height:44px;border-radius:9px;background:var(--entry-input)}
#view-home #mrEntryPanel .mr-total-group{padding-top:1rem;border-top:1px solid var(--entry-line)}
#view-home #mrEntryPanel .mr-total{padding:.15rem 0;background:transparent;border:0;gap:1rem}
#view-home #mrEntryPanel .mr-total-label{color:var(--entry-muted);font-size:.85rem}
#view-home #mrEntryPanel .mr-total-value{font-size:1.65rem;line-height:1.4;letter-spacing:-.035em;color:#95e4bc;overflow-wrap:anywhere;min-width:0;text-align:right}
#view-home #mrEntryPanel .mr-confirm-row{padding:0}
#view-home #mrEntryPanel #mrConfirm{
  min-height:48px;border:1px solid rgba(177,191,255,.3);border-radius:11px;
  background:linear-gradient(110deg,#365fbd,#6b49ad);font-size:.95rem;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(231,235,255,.1),0 4px 12px rgba(9,16,37,.16);
}
@media(hover:hover){
  #view-home #mrEntryPanel .mr-type-btn:not(.active):hover{background:rgba(139,166,213,.08);border-color:#7087ac;color:#edf3ff}
  #view-home #mrEntryPanel #mrConfirm:not(:disabled):hover{filter:brightness(1.1)}
}
@media(max-width:760px){
  #view-home #mrEntryPanel{padding:1.125rem;gap:1.125rem}
  #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{min-height:44px}
}
@media(max-width:360px){
  #view-home #mrEntryPanel{padding:.875rem}
  #view-home #mrEntryPanel .mr-item-row{padding:.75rem}
}
@media(prefers-reduced-motion:reduce){
  #view-home #mrEntryPanel .mr-type-btn,
  #view-home #mrEntryPanel .mr-item-row input,
  #view-home #mrEntryPanel .mr-item-row select{transition:none}
}

/* Desktop density: keep controls readable while fitting a single entry comfortably. */
@media(min-width:761px){
  #view-home #mrEntryPanel{padding:1.125rem;gap:.875rem}
  #view-home #mrEntryPanel>.panel-head{flex-wrap:nowrap;gap:.75rem;align-items:center}
  #view-home #mrEntryPanel>.panel-head>.ticker-head-title{width:auto;flex:0 0 auto}
  #view-home #mrEntryPanel>.panel-head h2{font-size:1rem}
  #view-home #mrEntryPanel .mr-entry-intro{display:none}
  #view-home #mrEntryPanel>.panel-head>.field{flex:1 1 0;min-width:0}
  #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{padding:.45rem .35rem}
  #view-home #mrEntryPanel .mr-item-row{padding:.8rem;gap:.625rem}
  #view-home #mrEntryPanel .mr-entry-field{gap:.35rem}
  #view-home #mrEntryPanel .mr-item-row>.mr-entry-details{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:.5rem .65rem;padding-top:.625rem;
  }
  #view-home #mrEntryPanel .mr-entry-section-label{margin:0}
  #view-home #mrEntryPanel .mr-entry-details>.mr-slot-section{grid-column:1/-1}
  #view-home #mrEntryPanel .mr-total-group{padding-top:.75rem}
  #view-home #mrEntryPanel .mr-total-value{font-size:1.4rem}
}

/* Mini entry fields: match the fine-pointer desktop density of cost-per-gum. */
@media(min-width:761px) and (pointer:fine){
  #view-home #mrEntryPanel .mr-item-row input,
  #view-home #mrEntryPanel .mr-item-row select{
    min-height:36px;padding:6px 8px;font-size:.85rem;
  }
  #view-home #mrEntryPanel .mr-item-row-main{gap:.5rem}
  #view-home #mrEntryPanel .mr-entry-field{gap:.25rem}
}

/* Trading history: compact, readable metrics with a quiet header. */
#view-home .panel:has(#mrHistoryList){
  --history-card:#253247;--history-card-hover:#2b3b51;
  --history-muted:#bac1cc;--history-border:#435066;
  --history-summary-width:15.5rem;
  background:#121a26;border-color:#303b4c;box-shadow:none;
}
#view-home #mrHistoryList .mr-it-row.mr-ic:is(.history-alt-odd,.history-alt-even){
  background:var(--history-card);border:1px solid var(--history-border);border-radius:12px;
  padding:.9rem 1rem;gap:.8rem 1rem;margin-top:.75rem;
  box-shadow:none;filter:none;
  transition:background .16s ease,border-color .16s ease;
}
#view-home #mrHistoryList .mr-it-row.mr-ic:is(.history-alt-odd,.history-alt-even):hover{
  background:var(--history-card-hover);border-color:#7084a0;
  box-shadow:none;filter:none;
}
#view-home #mrHistoryList .mr-it-row.mr-ic.open{border-color:#7394cc}
#view-home #mrHistoryList .mr-ic>.mr-ic-head{
  gap:.55rem;min-height:32px;padding-bottom:.65rem;
  border-bottom:1px solid rgba(153,176,213,.15);width:100%;
}
#view-home #mrHistoryList .mr-it-namewrap{flex:1;min-width:0;gap:.4rem .55rem}
#view-home #mrHistoryList .mr-it-name{font-size:.875rem;line-height:1.6;font-weight:600;color:#edf3ff}
/* Keep slot details below their item name, alongside (not below) the icon. */
#view-home #mrHistoryList .mr-it-name:has(.mr-item-name-slots){width:100%;min-width:0}
#view-home #mrHistoryList .mr-it-name:has(>.mr-item-name-slots),
#view-home #mrHistoryList .mr-it-name>.item-img-hover:has(>.mr-item-name-slots){display:flex;align-items:flex-start;gap:.4rem}
#view-home #mrHistoryList .mr-it-name:has(>.mr-item-name-slots)>.mr-history-icon,
#view-home #mrHistoryList .mr-it-name>.item-img-hover:has(>.mr-item-name-slots)>.item-img-ico{flex:none;margin-right:0}
#view-home #mrHistoryList .mr-it-name .mr-item-name-slots{flex:1;min-width:0}
#view-home #mrHistoryList .mr-it-name .mr-item-slots-inline{display:block;margin-top:.1rem;color:var(--history-muted);overflow-wrap:anywhere}
#view-home #mrHistoryList .mr-it-row.mr-ic>.mr-ic-head>.mr-ic-chev{
  width:20px;height:20px;font-size:1rem;color:#a9bfdf;text-shadow:none;
}
#view-home #mrHistoryList .mr-ic-head>.mr-ic-new-badge{
  position:static;order:3;flex:none;align-self:flex-start;margin-left:auto;
  padding:.15rem .5rem;border:1px solid rgba(103,213,164,.3);border-radius:6px;
  background:rgba(63,189,117,.1);color:#90e2b9;
  font-size:.65rem;font-weight:600;line-height:1.5;letter-spacing:0;
  animation:none;box-shadow:none;
}
#view-home #mrHistoryList .mr-it-cell{gap:.25rem;line-height:1.5;min-width:0}
#view-home #mrHistoryList .mr-it-cell i{font-size:.75rem;color:var(--history-muted);font-weight:500}
#view-home #mrHistoryList .mr-it-cell b{font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:-.025em}
#view-home #mrHistoryList .mr-it-cell small{font-size:.75rem;line-height:1.6;color:var(--history-muted)}
#view-home #mrHistoryList .mr-it-cell .mr-it-avg,
#view-home #mrHistoryList .mr-it-cell.profit small,
#view-home #mrHistoryList .mr-it-cell.profit .mr-profit-sale-note{
  font-size:.7rem;line-height:1.6;opacity:1;color:var(--history-muted);
}
#view-home #mrHistoryList .mr-it-cell.buy b{color:#ff9faa}
#view-home #mrHistoryList .mr-it-cell.buy small:not(.mr-it-avg){color:#f3a1aa}
#view-home #mrHistoryList .mr-it-cell.sell b{color:#88dfb6}
#view-home #mrHistoryList .mr-it-cell.left b{color:#f0cf87}
#view-home #mrHistoryList .mr-it-cell.left.zero b{color:#b2c0d6}
#view-home #mrHistoryList .mr-it-cell.profit{padding-left:.75rem;border-left:1px solid rgba(153,176,213,.18)}
#view-home #mrHistoryList .mr-it-cell.profit b.profit-pos{color:#9bbcff}
#view-home #mrHistoryList .mr-it-cell.profit b.profit-neg{color:#ff9faa}
#view-home #mrHistoryList .mr-it-cell.profit.none b{color:#b2c0d6}
#view-home #mrHistoryList .mr-ic-body{border-top:1px solid rgba(153,176,213,.18);padding-top:.75rem;margin-top:0}
@container home-history (max-width:440px){
  #view-home #mrHistoryList .mr-it-row.mr-ic:is(.history-alt-odd,.history-alt-even){padding:.8rem;gap:.85rem .75rem}
  #view-home #mrHistoryList .mr-it-cell.profit{padding-left:0;border-left:0}
}
@media(prefers-reduced-motion:reduce){
  #view-home #mrHistoryList .mr-it-row.mr-ic:is(.history-alt-odd,.history-alt-even){transition:none}
}

/* Expanded history: quiet date groups and aligned transaction rows. */
#view-home #mrHistoryList .mr-ic-day-head{
  min-height:44px;padding:.65rem .75rem;gap:.4rem .6rem;flex-wrap:wrap;
  border:1px solid #384c68;border-radius:9px;background:#142033;
  font-size:.8rem;line-height:1.6;color:#e0e9fa;
}
#view-home #mrHistoryList .mr-ic-day-head:hover{background:#1b2a41;border-color:#6883aa}
#view-home #mrHistoryList .mr-ic-day-count{font-size:.7rem;color:#adbed7;font-weight:400}
#view-home #mrHistoryList .mr-ic-day-tot{
  flex:1 1 180px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.2rem .4rem;
  margin-left:auto;font-size:.7rem;font-weight:500;white-space:normal;
}
#view-home #mrHistoryList .mr-ic-day-tot .buy{color:#f3a1aa}
#view-home #mrHistoryList .mr-ic-day-tot .sell{color:#88dfb6}
#view-home #mrHistoryList .mr-ic-day-head>.mr-ic-new-badge,
#view-home #mrHistoryList .mr-tx-new-badge{
  position:static;flex:none;padding:.1rem .4rem;border:1px solid rgba(103,213,164,.3);
  border-radius:5px;background:rgba(63,189,117,.1);color:#90e2b9;
  font-size:.6rem;line-height:1.5;font-weight:600;animation:none;box-shadow:none;
}
#view-home #mrHistoryList .mr-ic-day-head>.mr-ic-new-badge{order:3}
#view-home #mrHistoryList .mr-ic-day .mr-tx-list{margin-top:.5rem;gap:.25rem}
#view-home #mrHistoryList .mr-tx{
  grid-template-columns:auto minmax(40px,1fr) minmax(0,auto) minmax(0,auto) 32px;
  min-height:48px;padding:.4rem .6rem;gap:.5rem;
  background:rgba(9,18,32,.24);border:1px solid transparent;
  border-bottom-color:rgba(148,173,211,.12);border-left:2px solid #576783;border-radius:6px;
}
#view-home #mrHistoryList .mr-tx:has(.mr-tx-time){grid-template-columns:auto minmax(40px,1fr) minmax(0,auto) minmax(0,auto) auto 32px}
#view-home #mrHistoryList .mr-tx.type-buy{border-left-color:#c87888}
#view-home #mrHistoryList .mr-tx.type-sell{border-left-color:#60ae91}
#view-home #mrHistoryList .mr-tx:hover,#view-home #mrHistoryList .mr-tx:focus-within{background:rgba(137,166,215,.07)}
#view-home #mrHistoryList .mr-type-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:6px;font-weight:600}
#view-home #mrHistoryList .mr-type-badge.buy{background:rgba(239,90,86,.12);color:#ffadb7}
#view-home #mrHistoryList .mr-type-badge.sell{background:rgba(63,189,117,.12);color:#91e4bc}
#view-home #mrHistoryList .mr-tx-main{font-size:.8rem;color:#dbe5f7;line-height:1.6}
#view-home #mrHistoryList .mr-tx-calc{font-size:.7rem;color:#aebed6;white-space:normal;overflow-wrap:anywhere;text-align:right;grid-column:auto;grid-row:auto}
#view-home #mrHistoryList .mr-tx-total{font-size:.8rem;line-height:1.6;text-align:right;white-space:normal;overflow-wrap:anywhere}
#view-home #mrHistoryList .mr-tx.type-buy .mr-tx-total{color:#ffadb7}
#view-home #mrHistoryList .mr-tx.type-sell .mr-tx-total{color:#91e4bc}
#view-home #mrHistoryList .mr-tx-time{grid-column:auto;grid-row:auto}
#view-home #mrHistoryList .mr-del{width:32px;min-height:32px;padding:0;border-radius:6px;justify-self:end}
#view-home #mrHistoryList .mr-del:hover{color:#ffadb7;background:rgba(239,90,86,.12)}
@container home-history (max-width:480px){
  #view-home #mrHistoryList .mr-ic-day-tot{order:2;flex-basis:100%;justify-content:flex-start;margin-left:0}
  #view-home #mrHistoryList .mr-ic-day-head>.mr-ic-new-badge{order:1;margin-left:auto}
  #view-home #mrHistoryList .mr-tx,
  #view-home #mrHistoryList .mr-tx:has(.mr-tx-time){grid-template-columns:auto minmax(0,1fr) 40px;gap:.35rem .5rem}
  #view-home #mrHistoryList .mr-type-badge{grid-column:1;grid-row:1;justify-self:start}
  #view-home #mrHistoryList .mr-tx-main{grid-column:2;grid-row:1}
  #view-home #mrHistoryList .mr-del{grid-column:3;grid-row:1 / span 2;width:40px;min-height:44px}
  #view-home #mrHistoryList .mr-tx-calc{grid-column:1;grid-row:2;text-align:left;max-width:100px}
  #view-home #mrHistoryList .mr-tx-total{grid-column:2;grid-row:2}
  #view-home #mrHistoryList .mr-tx-time{grid-column:1 / span 2;grid-row:3}
}

/* Sold-out archive: one quiet group surface, with the same readable detail rows. */
#view-home #mrHistoryList .mr-it-group-wrap{
  container:sold-history / inline-size;margin-top:.75rem;
  border:1px solid transparent;border-radius:11px;background:#181c24;
}
#view-home #mrHistoryList .mr-it-group{
  min-height:48px;padding:.75rem .9rem;gap:.5rem;flex-wrap:wrap;
  background:transparent;color:#dee8fa;font-size:.8rem;font-weight:600;line-height:1.6;
  transition:background .16s ease;
}
#view-home #mrHistoryList .mr-it-group:hover{background:rgba(134,165,221,.08);color:#f0f5ff}
#view-home #mrHistoryList .mr-it-group:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-3px}
#view-home #mrHistoryList .mr-it-group.open{border-bottom:1px solid rgba(153,176,213,.16)}
#view-home #mrHistoryList .mr-it-group>.mr-ic-chev{order:-1;color:#a9bfdf;font-size:.8rem}
#view-home #mrHistoryList .mr-it-group>.mr-ic-new-badge{
  order:1;padding:.1rem .4rem;border:1px solid rgba(103,213,164,.3);border-radius:5px;
  background:rgba(63,189,117,.1);color:#90e2b9;font-size:.6rem;font-weight:600;
  animation:none;box-shadow:none;
}
#view-home #mrHistoryList .mr-it-group-profit{
  order:2;margin-left:auto;font-size:.75rem;font-weight:500;line-height:1.6;
  white-space:normal;overflow-wrap:anywhere;min-width:0;text-align:right;
}
#view-home #mrHistoryList .mr-it-group-profit.profit-pos{color:#9bbcff}
#view-home #mrHistoryList .mr-it-group-profit.profit-neg{color:#ff9faa}
#view-home #mrHistoryList #mrItSoldList{padding:.65rem;gap:.65rem}
#view-home #mrHistoryList #mrItSoldList>.mr-it-row.mr-ic{
  margin-top:0;background:#242a34;border-color:#3f4652;box-shadow:none;
}
#view-home #mrHistoryList #mrItSoldList>.mr-it-row.mr-ic:hover{background:#2d3440;border-color:#7084a0}
#view-home #mrHistoryList #mrItSoldList>.mr-it-row.mr-ic.open{border-color:#7394cc}
@container sold-history (max-width:440px){
  #view-home #mrHistoryList .mr-it-group-profit{flex-basis:100%;margin-left:0;text-align:left;padding-left:1.2rem}
  #view-home #mrHistoryList #mrItSoldList>.mr-it-row.mr-ic{grid-template-columns:repeat(2,minmax(0,1fr));padding:.75rem;gap:.85rem .65rem}
  #view-home #mrHistoryList #mrItSoldList .mr-it-cell.profit{border-left:0;padding-left:0}
}
@media(prefers-reduced-motion:reduce){#view-home #mrHistoryList .mr-it-group{transition:none}}

/* History category hierarchy: currency first, compact inventory, quiet other group. */
#view-home #mrHistoryList .mr-history-section{display:flex;align-items:center;gap:.55rem;margin:1.25rem 0 .25rem;padding:0 .15rem;font-size:.85rem;color:#dce7fa;font-weight:600}
#view-home #mrHistoryList .mr-history-section:first-child{margin-top:.3rem}
#view-home #mrHistoryList .mr-history-count{font-size:.75rem;font-weight:400;color:var(--history-muted);margin-left:auto}
#view-home #mrHistoryList .mr-history-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:9px;background:#24354e;color:#b1c9ec;vertical-align:middle;margin-right:.4rem}
#view-home #mrHistoryList .mr-history-icon svg{width:20px;height:20px}
#view-home #mrHistoryList .mr-history-section .mr-history-icon{width:24px;height:24px;background:none;margin:0}
#view-home #mrHistoryList .mr-history-other .mr-history-icon{color:#c7b9ed;background:rgba(154,126,204,.12)}
#view-home #mrHistoryList .mr-history-zeny .mr-history-icon{color:#a5caff;background:#29466b}
/* Zeny = กลุ่มสีน้ำเงิน · ไอเทม = กลุ่มสีม่วงอ่อน — ให้แยกสองหมวดออกจากกันได้ทันที */
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-zeny{background:#182d47;border-color:#2f5378;border-top:3px solid #6fa8ee}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-zeny:hover{background:#1d3552;border-color:#3f6894;border-top-color:#6fa8ee}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-zeny.open{border-color:#4a78ad;border-top-color:#6fa8ee}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-item{background:#252136;border-color:#3d3656}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-item:hover{background:#2b263f;border-color:#524a73}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-item.open{border-color:#6a5f92}
#view-home #mrHistoryList .mr-history-zeny>.mr-it-cell.left b{font-size:1.4rem;line-height:1.1}
#view-home #mrHistoryList .mr-it-row.mr-ic:is(.mr-history-item,.mr-history-other){padding:.7rem .85rem;gap:.6rem .8rem;margin-top:.4rem}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-other{border-left:3px solid #8c7aaa}
#view-home #mrHistoryList .mr-it-row.mr-ic:is(.mr-history-item,.mr-history-other):not(.open) .mr-it-avg{display:none}
#view-home #mrHistoryList .mr-ic>.mr-ic-head{min-height:44px}
#view-home #mrHistoryList .mr-it-name .item-img-ico{width:32px;height:32px;background:#303e52;border:1px solid transparent;border-radius:9px;margin-right:.5rem}
#view-home #mrHistoryList .mr-it-name .item-img-ico .icon{width:18px;height:18px}
#view-home #mrHistoryList .mr-it-name .item-img-ico{position:relative;overflow:hidden}
#view-home #mrHistoryList .mr-history-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#24354e}
#view-home #mrHistoryList .mr-history-thumb:not([src]){display:none}
#view-home #mrHistoryList .mr-it-cell b,#view-home #mrHistoryList .mr-it-cell small{overflow-wrap:anywhere}

/* Server belongs to the item identity, not a detached category pill. */
#view-home #mrHistoryList .mr-it-namewrap:has(.mr-history-server){row-gap:.1rem;text-align:left}
#view-home #mrHistoryList .mr-history-server{display:flex;align-items:baseline;flex-wrap:wrap;flex-basis:100%;gap:.25rem .5rem;padding-left:2.5rem;box-sizing:border-box;min-width:0;font-size:.75rem;line-height:1.6;color:var(--history-muted);font-weight:400}
/* ป้ายเซิร์ฟเวอร์ในการ์ด = ชิปสีทองแบบเดียวกับชิปเซิร์ฟในแผงประกาศ (#tickerServerChips .chip.selected) — ผู้ใช้ขอ 28 ก.ย. 2569
   เล็ก + ตัวหนังสืออยู่กึ่งกลางกรอบ (inline-flex + line-height:1 + สูงตายตัว) ใช้ค่าเดียวกับป้าย Sv. ข้างหัวข้อ (.farm-revenue-server) */
#view-home #mrHistoryList .mr-history-server .mr-cat-tag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:20px;max-width:100%;padding:.1rem .45rem 0;border:1px solid rgba(216,180,103,.5);border-radius:999px;background:rgba(216,180,103,.15);box-shadow:none;color:#f6dfaf;font-size:.66rem;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-home #mrHistoryList .mr-history-zeny .mr-history-server{flex-basis:auto;padding-left:0}
/* การ์ดไอเทม / อื่นๆ: "เซิร์ฟเวอร์ Sv.xxx" อยู่บรรทัดเดียวกับชื่อ ต่อจากป้าย "ล่าสุด" (แบบเดียวกับการ์ด Zeny)
   ชื่อยาวจนไม่พอที่ค่อยตัดขึ้นบรรทัดใหม่เอง · ทับกฎเว้นซ้าย 2.25–2.5rem เดิมที่เคยจัดให้อยู่ใต้ชื่อ */
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap>.mr-history-server{flex-basis:auto;padding-left:0}
/* ชื่อที่มีรายละเอียดสล็อต (": | C.เรดิก | ...") เดิมกินเต็มความกว้าง เซิร์ฟเวอร์เลยตกบรรทัด — คลี่กล่องชื่อออก
   (display:contents) แล้วเรียงใหม่: บรรทัดแรก ไอคอน · ชื่อ · ป้ายหมวด · ล่าสุด · เซิร์ฟเวอร์ / บรรทัดสอง สล็อต (ตรงใต้ชื่อ)
   DOM/คลาสเดิมไม่เปลี่ยน — เปลี่ยนแค่การจัดวาง */
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap:has(.mr-item-slots-inline) :is(.mr-it-name,.item-img-hover,.mr-item-name-slots){display:contents}
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap:has(.mr-item-slots-inline)>.mr-it-tags{order:2}
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap:has(.mr-item-slots-inline)>.mr-ic-new-badge{order:3}
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap:has(.mr-item-slots-inline)>.mr-history-server{order:4}
#view-home #mrHistoryList .mr-it-row:is(.mr-history-item,.mr-history-other) .mr-it-namewrap:has(.mr-item-slots-inline) .mr-item-slots-inline{order:5;flex-basis:100%;margin-top:0;padding-left:calc(28px + .55rem);box-sizing:border-box}

/* Compact inventory summaries and independent category pagination. */
#view-home #mrHistoryList .mr-compact-metrics{display:none}
#view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-it-cell{display:none}
#view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head{
  display:grid;grid-template-columns:20px minmax(0,1fr) var(--history-summary-width);
  align-items:center;border-bottom:0;padding-bottom:0;gap:.5rem;
}
#view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head>.mr-ic-chev{grid-column:1;grid-row:1}
#view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head>.mr-it-namewrap{grid-column:2;grid-row:1}
#view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head>.mr-ic-new-badge{grid-column:2;grid-row:2;margin-left:0;justify-self:start}
#view-home #mrHistoryList .mr-ic:not(.open) .mr-compact-metrics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:3;grid-row:1;
  align-items:baseline;gap:.3rem 1rem;font-size:.75rem;color:var(--history-muted);min-width:0;
}
#view-home #mrHistoryList .mr-compact-metrics>:is(.mr-compact-remaining,.mr-compact-profit){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.3rem;min-width:0;text-align:left}
#view-home #mrHistoryList .mr-compact-metrics>:is(.mr-compact-remaining,.mr-compact-profit)>b{text-align:right;font-variant-numeric:tabular-nums}
#view-home #mrHistoryList .mr-compact-metrics b{color:#f0cf87;font-weight:600;overflow-wrap:anywhere}
#view-home #mrHistoryList .mr-compact-metrics>span:nth-child(2) b:not(.profit-pos):not(.profit-neg){color:#b2c0d6}
#view-home #mrHistoryList .mr-compact-metrics .profit-pos{color:#9bbcff}
#view-home #mrHistoryList .mr-compact-metrics .profit-neg,#view-home #mrHistoryList .mr-compact-warning{color:#ff9faa}
#view-home #mrHistoryList .mr-compact-warning{grid-column:1 / -1;text-align:right}
#view-home #mrHistoryList .mr-history-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem .75rem;padding:.6rem 0;font-size:.75rem;color:var(--history-muted)}
#view-home #mrHistoryList .mr-history-pager label,#view-home #mrHistoryList .mr-page-actions{display:flex;align-items:center;gap:.5rem}
#view-home #mrHistoryList .mr-history-pager select,#view-home #mrHistoryList .mr-history-pager button{min-height:44px;border:1px solid #405778;background:#19283e;color:#e0e9fa;border-radius:8px;padding:.3rem .6rem;font:inherit}
#view-home #mrHistoryList .mr-history-pager button:disabled{opacity:.4;cursor:not-allowed}
#view-home #mrHistoryList .mr-history-pager button:not(:disabled):hover{background:#294366;border-color:#82b5f4}
#view-home #mrHistoryList .mr-history-pager :is(button,select):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
#view-home #mrHistoryList .mr-history-section:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@container home-history (max-width:520px){
  #view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head{grid-template-columns:20px minmax(0,1fr)}
  #view-home #mrHistoryList .mr-ic:not(.open) .mr-compact-metrics{grid-column:2;grid-row:2;width:100%}
  #view-home #mrHistoryList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head>.mr-ic-new-badge{grid-row:3}
  #view-home #mrHistoryList .mr-page-actions{flex-basis:100%;justify-content:space-between}
}
@container sold-history (max-width:520px){
  #view-home #mrHistoryList #mrItSoldList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head{grid-template-columns:20px minmax(0,1fr)}
  #view-home #mrHistoryList #mrItSoldList .mr-ic:not(.open) .mr-compact-metrics{grid-column:2;grid-row:2;width:100%}
  #view-home #mrHistoryList #mrItSoldList .mr-ic:is(.mr-history-item,.mr-history-other):not(.open)>.mr-ic-head>.mr-ic-new-badge{grid-row:3}
}
@container home-history (max-width:440px){
  #view-home #mrHistoryList .mr-compact-metrics>:is(.mr-compact-remaining,.mr-compact-profit){grid-template-columns:minmax(0,1fr);gap:.1rem;text-align:right}
}
@container sold-history (max-width:440px){
  #view-home #mrHistoryList #mrItSoldList .mr-compact-metrics>:is(.mr-compact-remaining,.mr-compact-profit){grid-template-columns:minmax(0,1fr);gap:.1rem;text-align:right}
}

/* Four timer summaries share a baseline and a quieter visual weight. */
#view-timers .stats-row>.stat-tile:nth-child(n){padding:12px 14px;gap:8px;display:grid;grid-template-rows:28px 1fr auto;background:linear-gradient(135deg,rgba(var(--stat-accent),.065),#151f31 70%);box-shadow:inset 0 1px 0 rgba(var(--stat-accent),.08)}
#view-timers .stats-row>.stat-tile:hover{transform:none;filter:none;box-shadow:inset 0 1px 0 rgba(var(--stat-accent),.13);border-color:rgba(var(--stat-accent),.6)}
#view-timers .stats-row>.stat-tile .stat-icon{width:28px;height:28px;border-radius:8px;box-shadow:none}
#view-timers .stats-row>.stat-tile .stat-icon .icon{width:16px;height:16px}
#view-timers .stats-row>.stat-tile .stat-main{align-items:flex-start;min-height:98px;gap:10px}
#view-timers .stats-row>.stat-tile .stat-main-txt{gap:4px;flex:1}
#view-timers .stats-row>.stat-tile .num{font-size:1.5rem;line-height:1.3;text-shadow:none;overflow-wrap:anywhere}
#view-timers .stats-row>.stat-tile .lbl{font-size:.8rem;line-height:1.5}
#view-timers .stats-row>.stat-tile .stat-thumb{width:52px;height:60px;align-self:center;filter:none}
#view-timers .stats-row>.stat-tile #thumbTotalItems{width:36px;height:36px}
#view-timers .stats-row>.stat-tile .stat-main:has(#statItemsSold,#statMyShare)::after{flex-basis:52px;height:56px;align-self:center;transform:none;filter:none;opacity:.85}
/* Supplied three-headgear artwork replaces the sold-items logo only. */
#view-timers .stats-row>.stat-tile .stat-main:has(#statItemsSold)::after{background-image:url("timers-sold-headgear.webp");flex-basis:clamp(44px,34%,88px);height:76px;opacity:1}
@media(max-width:480px){
  #view-timers .stats-row>.stat-tile .stat-main:has(#statItemsSold){flex-direction:column;align-items:stretch}
  #view-timers .stats-row>.stat-tile .stat-main:has(#statItemsSold)::after{flex-basis:auto;width:64px;height:56px;align-self:flex-end}
}
#view-timers .stats-row>.stat-tile .link{align-self:end;justify-self:start;min-height:24px;margin:0;text-shadow:none;transform:none}
#view-timers :is(#statItemsSoldAmount,#statMyShareAmount){gap:2px;line-height:1.5;font-size:.75rem}
@media(max-width:640px){
  #view-timers .stats-row>.stat-tile .link{min-height:44px}
}

/* Supplied party artwork sits with the live member count, not inside its text hook. */
#view-timers .party-member-identity{display:inline-flex;align-items:center;gap:8px;min-width:0}
#view-timers .party-members-art{width:72px;height:47px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
@media(max-width:640px){
  #view-timers #partyPanel>.panel-head{flex-wrap:wrap}
  #view-timers #partyPanel .party-panel-controls{flex-wrap:wrap;gap:8px}
  #view-timers .party-members-art{width:60px;height:39px}
}

/* Farm history: preserve alternating DAY colors, not alternating entry colors. */
#view-farm .farm-history-day{--farm-day-edge:#a79bd9;--farm-day-surface:#252841;--farm-day-head:#363858;--farm-entry-surface:#2c3150;container:farm-day / inline-size;border:1px solid var(--farm-day-edge);border-left:4px solid var(--farm-day-edge);border-radius:12px;padding:10px;background:var(--farm-day-surface);box-shadow:0 3px 10px rgba(0,0,0,.18)}
#view-farm .farm-history-day:has(.farm-history-alt-even){--farm-day-edge:#70b5d8;--farm-day-surface:#172f43;--farm-day-head:#24475e;--farm-entry-surface:#203e55}
#view-farm .farm-history-day+.farm-history-day{margin-top:16px}
#view-farm .farm-history-day-head{background:var(--farm-day-head);border:0;border-radius:7px;padding:10px 12px;margin:0 0 10px;gap:6px 10px;line-height:1.6}
#view-farm .farm-history-day-head>span:first-child{font-size:.85rem;color:#f0f3ff}
#view-farm .farm-history-day-count{color:#becbe0;font-size:.75rem}
#view-farm .farm-history-day-total{white-space:normal;overflow-wrap:anywhere;font-size:.78rem}
#view-farm .farm-history-day-toggle{min-height:36px;padding:6px 10px;border:1px solid var(--farm-day-edge);border-radius:8px;background:rgba(9,18,32,.3);color:#e0ebfa;font-size:.75rem}
#view-farm .farm-history-day-head .farm-history-day-hidden-note{font-size:.72rem;color:#b6c4da}
#view-farm .farm-history-day-list{gap:8px}
#view-farm .farm-history-day .farm-history-entry:is(.farm-history-alt-odd,.farm-history-alt-even){background:var(--farm-entry-surface);border:1px solid rgba(187,206,239,.26);border-radius:9px;padding:12px;gap:10px;box-shadow:none;filter:none}
#view-farm .farm-history-day .farm-history-entry:is(.farm-history-alt-odd,.farm-history-alt-even):hover{border-color:var(--farm-day-edge);box-shadow:none;filter:none}
#view-farm .farm-history-day .farm-history-entry.editing{border:2px solid #e7c783}
#view-farm .farm-history-chip{border-radius:6px;font-weight:500}
#view-farm .farm-history-map{background:none;border-color:transparent;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
#view-farm .farm-history-actions{padding:0;gap:4px;border:0;background:none}
#view-farm .farm-history-actions button{width:34px;height:34px;border:1px solid rgba(183,204,236,.25);border-radius:7px;background:rgba(9,18,32,.24);color:#c5d4eb}
#view-farm .farm-history-actions .mr-del:hover{color:#ffadb7;background:rgba(239,90,86,.12)}
#view-farm .farm-history-metrics{border:0;border-radius:7px;background:rgba(7,16,29,.25)}
#view-farm .farm-history-metric{padding:9px 10px;gap:4px}
#view-farm .farm-history-metric>span,#view-farm .farm-history-earned>span{font-size:.75rem;font-weight:500;color:#bfcee2}
#view-farm .farm-history-metric b{font-size:.9rem;line-height:1.5}
#view-farm .farm-history-metric small,#view-farm .farm-history-earned small{font-size:.75rem;line-height:1.5}
#view-farm .farm-history-metric :is(.farm-income-hover,.farm-cost-hover,.farm-profit-hover){border-bottom:0;text-decoration:none}
#view-farm .farm-history-metric :is(.farm-income-hover,.farm-cost-hover,.farm-profit-hover):hover{text-decoration:underline;text-underline-offset:3px}
#view-farm .farm-history-earned{padding:8px 10px;border-radius:7px;background:rgba(7,16,29,.2);gap:4px 8px}
#view-farm .farm-history-rares{border-top:1px solid rgba(183,204,236,.18);padding-top:8px}
#view-farm :is(.farm-history-day-toggle,.farm-history-actions button):focus-visible{outline:2px solid #bad8ff;outline-offset:2px}
@container farm-day (max-width:460px){
  #view-farm .farm-history-day-total{flex-basis:100%;margin-left:0}
  #view-farm .farm-history-day-toggle{margin-left:auto;min-height:44px}
  #view-farm .farm-history-metrics{grid-template-columns:1fr}
  #view-farm .farm-history-metric{grid-template-columns:64px minmax(0,1fr);border-right:0;border-bottom:1px solid rgba(183,204,236,.16);align-items:baseline}
  #view-farm .farm-history-metric small{grid-column:2}
  #view-farm .farm-history-metric:last-child{border-bottom:0}
  #view-farm .farm-history-actions button{width:44px;height:44px}
}

/* Farm cost form shares the merchant form's quiet surfaces and control rhythm. */
#view-farm .panel.panel-farm-cost{container:farm-entry / inline-size;background:#1a263b;border:1px solid #425777;border-radius:14px;padding:18px;gap:14px;box-shadow:inset 0 1px 0 rgba(220,232,255,.04)}
#view-farm .panel-farm-cost::before{display:none}
#view-farm .panel-farm-cost>.panel-head{gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #354860}
#view-farm .panel-farm-cost>.panel-head h2{font-size:1rem;text-shadow:none}
#view-farm .panel-farm-cost>.panel-head+.farm-retired-note+.farm-log-divider{display:none}
#view-farm .panel-farm-cost .farm-exrate-row{font-size:.75rem;color:#adbed7;gap:6px;flex-wrap:wrap}
#view-farm .panel-farm-cost .farm-exrate-row input{width:96px}
#view-farm .panel-farm-cost :is(input,select){min-height:44px;box-sizing:border-box;border:1px solid #405575;border-radius:9px;background:#152135;color:#e3edfc;padding:9px 10px;font-size:.85rem;box-shadow:none}
#view-farm .panel-farm-cost input::placeholder{color:#8e9eb8;opacity:1}
#view-farm .panel-farm-cost :is(input,select):focus-visible{outline:2px solid #84adf4;outline-offset:2px;border-color:#84adf4}
#view-farm .panel-farm-cost .farm-map-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;color:#b5c4da;font-size:.8rem}
#view-farm .panel-farm-cost .farm-section-title{margin:0;font-size:.85rem;font-weight:600;color:#dce7fa;line-height:1.5}
#view-farm .panel-farm-cost :is(.farm-cost-row,.farm-rare-row){grid-template-columns:18px minmax(0,1fr) 64px 80px 78px 32px;gap:6px;align-items:center}
#view-farm .panel-farm-cost .mr-row-index{color:#8499b8;font-size:.75rem}
#view-farm .panel-farm-cost .mr-row-remove{height:44px;min-height:44px;border-radius:8px;color:#aabbd4}
#view-farm .panel-farm-cost .mr-row-remove:not(:disabled):hover{background:rgba(239,90,86,.12);color:#ffadb7}
#view-farm .panel-farm-cost :is(#farmAddCostRowBtn,#farmAddRareItemBtn){align-self:flex-start;width:auto;min-height:40px;padding:8px 12px;background:#20334e;border:1px solid #3e5d82;border-radius:9px;color:#b4d2fb;font-size:.8rem}
#view-farm .panel-farm-cost .mr-total{padding:12px 14px;background:#21324a;border:1px solid #405777;border-radius:10px}
#view-farm .panel-farm-cost .mr-total-label{color:#b9c8dd;font-size:.8rem}
#view-farm .panel-farm-cost .mr-total-value{color:#ffacb5;font-size:1.2rem}
#view-farm .panel-farm-cost .farm-log-form{gap:12px;padding-top:16px;border-top:1px solid #354860}
#view-farm .panel-farm-cost .farm-rare-heading p{margin:4px 0 0;color:#a4b5ce;font-size:.75rem;line-height:1.7}
#view-farm .panel-farm-cost .farm-log-divider{margin:2px 0;border-color:#354860}
#view-farm .panel-farm-cost .farm-log-fields{gap:10px;grid-template-columns:minmax(80px,.6fr) minmax(0,1.4fr)}
#view-farm .panel-farm-cost .farm-log-field-label,#view-farm .panel-farm-cost .farm-log-field label{color:#b5c4da;font-size:.8rem;min-height:24px}
#view-farm .panel-farm-cost #farmLogConfirm{min-height:48px;border-radius:10px;background:linear-gradient(110deg,#365ac0,#7550af);border:1px solid rgba(145,151,240,.25);font-weight:600}
@container farm-entry (max-width:440px){
  #view-farm .panel-farm-cost :is(.farm-cost-row,.farm-rare-row){grid-template-columns:18px minmax(0,1fr) minmax(0,1fr) 80px;gap:7px}
  #view-farm .panel-farm-cost :is(.farm-cost-name,.farm-rare-name){grid-column:2/4;grid-row:1}
  #view-farm .panel-farm-cost .mr-row-index{grid-column:1;grid-row:1}
  #view-farm .panel-farm-cost .mr-row-remove{grid-column:4;grid-row:1;width:44px;justify-self:end}
  #view-farm .panel-farm-cost :is(.farm-cost-qty,.farm-rare-qty){grid-column:2;grid-row:2}
  #view-farm .panel-farm-cost :is(.farm-cost-price,.farm-rare-price){grid-column:3;grid-row:2}
  #view-farm .panel-farm-cost :is(.farm-cost-currency,.farm-rare-currency){grid-column:4;grid-row:2}
}
@media(max-width:640px){
  #view-farm .panel.panel-farm-cost{padding:14px;gap:12px}
  #view-farm .panel-farm-cost :is(input,select){font-size:16px}
  #view-farm .panel-farm-cost :is(#farmAddCostRowBtn,#farmAddRareItemBtn){min-height:44px}
}

/* Desktop density: keep long cost lists compact without hiding entered rows. */
@media(min-width:761px) and (pointer:fine){
  #view-farm .panel.panel-farm-cost{padding:14px;gap:9px}
  #view-farm .panel-farm-cost>.panel-head{padding-bottom:10px;gap:8px}
  #view-farm .panel-farm-cost .farm-map-row{flex-direction:row;align-items:center;gap:10px}
  #view-farm .panel-farm-cost .farm-map-row label{flex:none}
  #view-farm .panel-farm-cost :is(input,select){min-height:36px;padding:6px 8px}
  #view-farm .panel-farm-cost .mr-row-remove{height:36px;min-height:36px}
  #view-farm .panel-farm-cost :is(.farm-cost-items,.farm-rare-items){gap:5px}
  #view-farm .panel-farm-cost :is(#farmAddCostRowBtn,#farmAddRareItemBtn){min-height:32px;padding:5px 10px}
  #view-farm .panel-farm-cost .mr-total{padding:8px 12px}
  #view-farm .panel-farm-cost .mr-total-value{font-size:1.1rem}
  #view-farm .panel-farm-cost .farm-log-form{padding-top:10px;gap:8px}
  #view-farm .panel-farm-cost .farm-rare-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
  #view-farm .panel-farm-cost .farm-rare-heading p{margin:0}
  #view-farm .panel-farm-cost .farm-log-field{gap:3px}
  #view-farm .panel-farm-cost #farmLogConfirm{min-height:40px}
}

/* Readable help dialog: bounded lines, persistent title and scrollable instructions. */
#howtoOverlay .confirm-backdrop{background:rgba(5,11,22,.76);backdrop-filter:blur(4px)}
#howtoOverlay .howto-box{display:flex;flex-direction:column;width:min(720px,calc(100vw - 32px));max-width:none;max-height:85vh;max-height:85dvh;box-sizing:border-box;padding:0;overflow:hidden;border:1px solid #435673;border-radius:18px;background:#182438;box-shadow:0 24px 80px rgba(0,0,0,.45)}
#howtoOverlay .howto-title{flex:none;margin:0;padding:24px 70px 20px 26px;border-bottom:1px solid #35465f;background:#1e2e46;color:#e8f0ff;white-space:normal;font-size:1.15rem;line-height:1.5}
#howtoOverlay .howto-close{top:14px;right:14px;width:44px;height:44px;padding:0;border:1px solid #465b79;border-radius:10px;background:#263850;color:#dce8fa}
#howtoOverlay .howto-body{overflow:auto;overscroll-behavior:contain;padding:8px 26px 26px;gap:8px;min-height:0;font-size:.9rem;line-height:1.85;color:#c6d3e7;scrollbar-gutter:stable}
#howtoOverlay .howto-body div{white-space:normal;overflow-wrap:anywhere}
#howtoOverlay .howto-sub{font-size:.95rem;font-weight:600;color:#e8f0ff;margin:20px 0 4px;padding-top:18px;border-top:1px solid #35465f;line-height:1.6}
#howtoOverlay .howto-sub:first-child{margin-top:12px;padding-top:0;border:0}
#howtoOverlay .howto-step{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:12px;padding:5px 0}
#howtoOverlay .howto-step-num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#294367;color:#b7d1ff;font-size:.8rem;font-weight:600;line-height:1}
#howtoOverlay .howto-warn{padding:12px 14px;background:rgba(230,157,57,.1);border:1px solid #876331;border-radius:10px;color:#f5d29b;font-weight:500}
#howtoOverlay :is(.howto-close,.howto-body):focus-visible{outline:2px solid #90b8ff;outline-offset:-3px}
@media(max-width:480px){
  #howtoOverlay .howto-box{width:calc(100vw - 20px);max-height:90dvh;border-radius:14px}
  #howtoOverlay .howto-title{padding:18px 64px 18px 18px;font-size:1rem}
  #howtoOverlay .howto-close{top:10px;right:10px}
  #howtoOverlay .howto-body{padding:4px 16px 20px;font-size:.875rem}
}

/* Supplied merchant mascot; preserve the existing icon hook and transparent artwork. */
#view-home .dashboard-book-icon,#view-home #mrEntryPanel .dashboard-book-icon{width:36px;height:44px;object-fit:contain;flex:none;vertical-align:middle;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}

/* Smaller collapsed item cards; expanded details retain their original spacing. */
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-item:not(.open),
#view-home #mrHistoryList #mrItSoldList>.mr-it-row.mr-ic.mr-history-item:not(.open){padding:4px 12px;gap:0;margin-top:3px;border-radius:10px}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-item:not(.open)>.mr-ic-head{min-height:44px}
#view-home #mrHistoryList .mr-history-item:not(.open) .mr-history-icon,
#view-home #mrHistoryList .mr-history-item:not(.open) .mr-it-name .item-img-ico{width:28px;height:28px;border-radius:7px}
#view-home #mrHistoryList .mr-history-item:not(.open) .mr-history-server{padding-left:2.25rem}

/* Unread badges breathe gently until their own section is opened. */
@keyframes history-new-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 1px rgba(103,213,164,.12),0 0 8px rgba(63,189,117,.2)}
  50%{opacity:.55;box-shadow:0 0 0 1px transparent,0 0 0 transparent}
}
#view-home #mrHistoryList :is(.mr-ic-head,.mr-ic-day-head,.mr-it-group)>.mr-ic-new-badge,
#view-home #mrHistoryList .mr-tx-new-badge{animation:history-new-pulse 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  #view-home #mrHistoryList :is(.mr-ic-head,.mr-ic-day-head,.mr-it-group)>.mr-ic-new-badge,
  #view-home #mrHistoryList .mr-tx-new-badge{animation:none;opacity:1}
}
/* ป้าย "ล่าสุด" (เดิม New) ทุกจุดในประวัติซื้อ–ขาย — พื้นแดงเข้ม ตัวขาว แบบเดียวกับป้ายในยอดนักฟาร์ม
   (ทับสีเขียวโปร่งด้านบน · ตำแหน่ง/ขนาดกรอบของแต่ละจุดยังใช้ของเดิม) */
#view-home #mrHistoryList :is(.mr-ic-head,.mr-ic-day-head,.mr-it-group,.mr-it-namewrap)>.mr-ic-new-badge,
#view-home #mrHistoryList .mr-tx-new-badge{
  background:#d9342f;border-color:#d9342f;color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:0;line-height:1.45;
  box-shadow:none;animation:mr-new-pulse 1.6s ease-in-out infinite;
}
/* ป้ายของการ์ดไอเทม/Zeny อยู่ในแถวชื่อ ต่อจากป้ายหมวด (เช่น Zeny (หน่วย:M) · M · ล่าสุด) ไม่ลอยมุมขวาแล้ว */
#view-home #mrHistoryList .mr-it-namewrap>.mr-ic-new-badge{
  position:static;flex:none;align-self:center;z-index:auto;
  padding:.05rem .45rem;border:1px solid #d9342f;border-radius:5px;
}
@media(prefers-reduced-motion:reduce){
  #view-home #mrHistoryList :is(.mr-ic-head,.mr-ic-day-head,.mr-it-group,.mr-it-namewrap)>.mr-ic-new-badge,
  #view-home #mrHistoryList .mr-tx-new-badge{animation:none;opacity:1}
}

/* Minimal pricing comparison: scoped IDs intentionally supersede legacy promo selectors. */
#view-pricing #pricingGrid{--plan-surface:#1b283c;--plan-border:#425574;--plan-muted:#b3c1d5;grid-auto-rows:auto;gap:20px;align-items:stretch}
#view-pricing #pricingGrid .pricing-card{padding:52px 20px 20px;gap:12px;border:1px solid var(--plan-border);border-radius:14px;background:var(--plan-surface);box-shadow:none;transform:none;transition:border-color 160ms ease}
#view-pricing #pricingGrid .pricing-card:hover{transform:none;box-shadow:none;border-color:#758caf}
#view-pricing #pricingGrid .pricing-card-best{border-color:#a18b58;background:var(--plan-surface);box-shadow:inset 0 3px 0 #d6b464}
#view-pricing #pricingGrid .pricing-badge-best{top:16px;right:20px;padding:3px 9px;border-radius:6px;background:#2d3e57;color:#c7d8f2;box-shadow:none;font-size:.75rem;font-weight:600;letter-spacing:0}
#view-pricing #pricingGrid .pricing-card-best .pricing-badge-best{background:#3d3829;color:#f0d391}
#view-pricing #pricingGrid .pricing-promo-heading{min-height:94px;gap:6px}
/* Supplied Morocc fills the right-hand gap below the title, without covering price text. */
#view-pricing #pricingGrid .pricing-card[data-plan-key="timers"] .pricing-promo-heading{position:relative;box-sizing:border-box;min-height:94px}
#view-pricing #pricingGrid .pricing-artwork{position:absolute;right:-8px;top:60px;width:150px;max-width:calc(100% - 140px);aspect-ratio:1;pointer-events:none}
#view-pricing #pricingGrid .pricing-artwork img{display:block;width:100%;height:auto;object-fit:contain}
#view-pricing #pricingGrid .pricing-card[data-plan-key="accountItems"] .pricing-promo-heading{position:relative}
#view-pricing #pricingGrid .pricing-artwork-merchant{top:88px;width:130px}
#view-pricing #pricingGrid .pricing-artwork-merchant img{height:100%;position:absolute;inset:0}
#view-pricing #pricingGrid .pricing-card[data-plan-key="farm"] .pricing-promo-heading{position:relative}
#view-pricing #pricingGrid .pricing-artwork-knight{top:88px;width:130px}
#view-pricing #pricingGrid .pricing-artwork-archer img{width:auto;height:120px;max-width:100%;margin-left:auto;border-radius:8px}
@media(max-width:640px){
  #view-pricing #pricingGrid .pricing-artwork-archer{top:76px}
  #view-pricing #pricingGrid .pricing-artwork-archer img{height:100px}
}
#view-pricing #pricingGrid .pricing-card[data-plan-key="free"] .pricing-promo-heading{position:relative}
#view-pricing #pricingGrid .pricing-artwork-novice{top:88px;width:130px}
#view-pricing #pricingGrid .pricing-card[data-plan-key="bundle"] .pricing-promo-heading{position:relative;min-height:94px}
#view-pricing #pricingGrid .pricing-artwork-bundle{top:80px;width:110px;height:128px;aspect-ratio:auto}
#view-pricing #pricingGrid .pricing-artwork-bundle img{height:100%;object-fit:contain}
#view-pricing #pricingGrid .pricing-card[data-plan-key="all"] .pricing-promo-heading{position:relative;min-height:94px}
#view-pricing #pricingGrid .pricing-card-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:0;text-align:left;font-size:1.55rem;line-height:1.35;color:#edf3fc}
#view-pricing #pricingGrid .pricing-card-name-main{font-size:1.55rem;line-height:1.35;color:#edf3fc}
#view-pricing #pricingGrid .pricing-card-name-sub{font-size:.85rem;font-weight:500;line-height:1.6;white-space:normal;color:#d0dcee;overflow-wrap:anywhere}
#view-pricing #pricingGrid .pricing-card-tagline{min-height:0;margin:0;text-align:left;font-size:.8rem;line-height:1.6;color:var(--plan-muted)}
#view-pricing #pricingGrid .pricing-bundle-price{min-height:102px;margin:0;align-items:flex-start;justify-content:flex-end;gap:7px;text-align:left}
#view-pricing #pricingGrid .pricing-card-price{justify-content:flex-start;flex-wrap:wrap;white-space:normal;gap:8px}
#view-pricing #pricingGrid .pricing-card-amount{font-size:2.35rem;line-height:1.1;color:#edf3fc;font-weight:750;letter-spacing:-.02em}
#view-pricing #pricingGrid .pricing-original{font-size:.85rem;color:var(--plan-muted);font-weight:400}
#view-pricing #pricingGrid .pricing-promo-badge{position:static;margin:0;padding:2px 7px;border:0;border-radius:5px;background:#512c38;color:#ffb7bd;font-size:.75rem;font-weight:600;box-shadow:none;transform:none}
#view-pricing #pricingGrid .pricing-perday{padding:0;border:0;background:none;border-radius:0;font-size:.75rem;line-height:1.6;color:#97dac2;font-weight:500;white-space:normal}
/* รายปี: ป้ายเขียว "ประหยัด X บาท" + บรรทัดเล็กบอกยอดรายเดือน 12 เดือนที่ใช้เทียบ (รายปีไม่ลดช่วงโปรแล้ว — ไม่มีป้ายแดง "ลด 50%") */
#view-pricing #pricingGrid .pricing-yearly-save{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.5}
#view-pricing #pricingGrid .pricing-yearly-save b{padding:2px 7px;border-radius:5px;background:#203c3c;color:#94dfbd;font-size:.75rem;font-weight:600;white-space:nowrap}
#view-pricing #pricingGrid .pricing-yearly-save small{font-size:.7rem;color:var(--plan-muted)}
#view-pricing #pricingGrid .pricing-card-unit{font-size:.8rem;color:var(--plan-muted)}
#view-pricing #pricingGrid .pricing-modules{margin:2px 0 0;padding:10px 0 0;border-top:1px solid #3a4b65;gap:0}
#view-pricing #pricingGrid .pricing-module{padding:10px 0;gap:10px;border:0;border-bottom:1px solid #304159;border-radius:0;background:transparent;min-height:52px;box-sizing:border-box}
#view-pricing #pricingGrid .pricing-module:last-child{border-bottom:0}
#view-pricing #pricingGrid .pricing-module .icon{width:20px;height:20px}
#view-pricing #pricingGrid .pricing-module-text{line-height:1.5}
#view-pricing #pricingGrid .pricing-module-text b{font-size:.84rem;font-weight:600}
#view-pricing #pricingGrid .pricing-module-text small{font-size:.75rem;color:var(--plan-muted)}
#view-pricing #pricingGrid .pricing-module-off :is(.icon,.pricing-module-text b,.pricing-module-mark){color:#a7b5ca}
#view-pricing #pricingGrid .pricing-details-toggle{align-self:flex-start;min-height:44px;padding:6px 10px;margin:0 0 0 -10px;border-color:transparent;border-radius:7px;color:#b6cefa;font-size:.8rem}
#view-pricing #pricingGrid .pricing-details-toggle:hover{background:#293c58;border-color:#4c6488}
#view-pricing #pricingGrid .pricing-features{margin:0;padding:12px 0;border-top:1px solid #3a4b65;gap:10px}
#view-pricing #pricingGrid .pricing-features li{font-size:.8rem;line-height:1.65}
#view-pricing #pricingGrid .pricing-owned-note{margin:0;padding:8px 10px;border:0;border-radius:7px;background:#203c3c;color:#94dfbd;font-size:.75rem;font-weight:500}
#view-pricing #pricingGrid .pricing-cta{margin:0;min-height:44px;border-radius:9px;background:#2c4163;border:1px solid #6f8fbe;color:#eef4ff;box-shadow:none;font-size:.86rem;font-weight:600}
#view-pricing #pricingGrid .pricing-card-best .pricing-cta{background:#dec078;color:#262217;border-color:#dec078;box-shadow:none}
#view-pricing #pricingGrid .pricing-cta:disabled{background:#253247;border-color:#455570;color:#b3bfd1;filter:none}
@media(max-width:1100px){
  #view-pricing #pricingGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px}
}
@media(max-width:640px){
  #view-pricing #pricingGrid{grid-template-columns:minmax(0,1fr);max-width:480px;gap:16px}
  #view-pricing #pricingGrid .pricing-card{padding:48px 18px 18px;gap:10px}
  #view-pricing #pricingGrid .pricing-promo-heading{min-height:0}
  #view-pricing #pricingGrid .pricing-bundle-price{min-height:0;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){#view-pricing #pricingGrid .pricing-card{transition:none}}

/* Shared media rail: same frame, baseline and reserved price column on all plans. */
#view-pricing #pricingGrid .pricing-card .pricing-promo-heading{position:static;min-height:94px}
#view-pricing #pricingGrid .pricing-media-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,40%);gap:12px;align-items:end;min-height:140px}
#view-pricing #pricingGrid .pricing-media-row .pricing-bundle-price{min-width:0;min-height:0;padding:0 0 4px}
#view-pricing #pricingGrid .pricing-media-row .pricing-artwork{position:static;inset:auto;display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:128px;height:140px;aspect-ratio:auto;justify-self:end}
#view-pricing #pricingGrid .pricing-media-row .pricing-artwork picture{display:contents}
#view-pricing #pricingGrid .pricing-media-row .pricing-artwork img{position:static;inset:auto;display:block;width:100%;height:100%;max-width:100%;margin:0;object-fit:contain;object-position:center bottom;border-radius:0}
#view-pricing #pricingGrid .pricing-card:is([data-plan-key="free"],[data-plan-key="accountItems"]) .pricing-media-row .pricing-artwork img{width:85%;height:85%}
@media(max-width:640px){
  #view-pricing #pricingGrid .pricing-media-row{min-height:144px;gap:10px}
  #view-pricing #pricingGrid .pricing-media-row .pricing-artwork{height:128px}
}
/* รายปีช่วงโปร: ราคาขีดฆ่า + ป้าย "ประหยัด" ทำให้กล่องราคาสูง ~149px — ขยายแถวนี้ทุกใบ (รวมการ์ดฟรี) ให้เท่ากัน แถวระบบด้านล่างจะตรงกัน */
#view-pricing #pricingGrid:has(.pricing-original):has(.pricing-yearly-save) .pricing-media-row{min-height:150px}

/* Dialog actions stay readable when a message wraps on a narrow screen. */
.confirm-box{scrollbar-width:thin;scrollbar-color:var(--border) var(--surface)}
.confirm-message{overflow-wrap:anywhere}
.confirm-actions{flex-wrap:wrap;gap:.65rem}
.confirm-actions .btn{white-space:normal;line-height:1.6}
.pricing-card-name-sub{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
/* กล่องยืนยันซื้อแพ็กเกจ: หัว + ชื่อแพ็กตัวใหญ่ + ระบบที่ได้ + ตาราง รอบ/ราคา/ใช้งานถึง/แต้มคงเหลือ */
.confirm-message .buy-confirm-title{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim)}
.confirm-message .buy-confirm-plan{display:block;margin-top:.15rem;font-size:1.35rem;font-weight:800;line-height:1.35;color:var(--text)}
.confirm-message .buy-confirm-sub{display:block;margin-top:.1rem;font-size:.76rem;line-height:1.55;color:var(--text-dim)}
.confirm-message .buy-confirm-rows{display:grid;gap:.4rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--border);text-align:left}
.confirm-message .buy-confirm-row{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-size:.8rem;line-height:1.5}
.confirm-message .buy-confirm-row>span:first-child{color:var(--text-dim);white-space:nowrap}
.confirm-message .buy-confirm-row>span:last-child{text-align:right;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:normal}
.confirm-message .buy-confirm-row s{color:var(--text-dim);font-size:.74rem}
.confirm-message .buy-confirm-off{padding:1px 6px;border-radius:5px;background:#512c38;color:#ffb7bd;font-size:.7rem;font-weight:600;white-space:nowrap}
.confirm-message .buy-confirm-save{color:var(--success);font-weight:700}
.confirm-message .buy-confirm-short{color:var(--danger);font-weight:700}
/* ช่องโค้ดส่วนลดในกล่องยืนยันซื้อ — หน้าตาเดียวกับช่อง "โค้ดโปรโมชัน" หน้าตั้งค่า */
.confirm-message .buy-confirm-code{display:block;margin-top:.85rem;text-align:left}
.confirm-message .buy-confirm-code-row{display:flex;align-items:center;gap:6px;padding:4px;background:var(--bg);border:1px solid #50627f;border-radius:10px;transition:border-color 150ms ease,box-shadow 150ms ease}
.confirm-message .buy-confirm-code-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.confirm-message #buyConfirmCode{flex:1;width:0;min-width:0;height:38px;margin:0;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5;box-shadow:none;outline:none}
.confirm-message #buyConfirmCode::placeholder{color:var(--text-dim);opacity:1;font-size:.8rem}
.confirm-message #buyConfirmCodeBtn{flex:none;min-height:38px;padding:8px 14px;border-radius:8px;font-size:.8rem;white-space:nowrap;box-shadow:none}
.confirm-message #buyConfirmCodeBtn:disabled{opacity:.55;cursor:wait}
.confirm-message .buy-confirm-code-msg{display:block;margin-top:6px;font-size:.74rem;line-height:1.5;color:var(--text-dim);overflow-wrap:anywhere}
.confirm-message .buy-confirm-code-msg:empty{display:none}
.confirm-message .buy-confirm-code-msg.is-error{color:var(--danger)}
.confirm-message .buy-confirm-code-msg.is-ok{color:var(--success)}
#confirmOkBtn:disabled{opacity:.5;cursor:not-allowed}
/* กล่องยืนยันเพิ่มช่องเซิร์ฟเวอร์: หมายเหตุเป็นข้อสั้นๆ + กรอบเตือนสีเหลือง (กรณีช่องครบทุกเซิร์ฟในระบบแล้ว) */
.confirm-message .buy-confirm-notes{display:grid;gap:.35rem;margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--border);text-align:left}
.confirm-message .buy-confirm-notes>span{position:relative;padding-left:.9rem;font-size:.76rem;line-height:1.55;color:var(--text-dim)}
.confirm-message .buy-confirm-notes>span::before{content:"•";position:absolute;left:0}
.confirm-message .buy-confirm-warn{display:block;margin-top:.7rem;padding:.55rem .7rem;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:8px;background:color-mix(in srgb,var(--warn) 12%,transparent);color:#f0cf86;font-size:.76rem;line-height:1.55;text-align:left}
/* เพิ่มเพื่อนเข้าปาร์ตี้: ผลตรวจก่อนยืนยัน (ชื่อเพื่อน + ค่าเข้าปาร์ตี้ ฟรี/50 แต้ม) */
.party-add-quote{display:grid;gap:.2rem;margin:.1rem 0 .7rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:.82rem;line-height:1.5}
.party-add-quote>b{font-size:.95rem;color:var(--text);overflow-wrap:anywhere}
.party-add-quote>span{color:var(--text-dim)}
.party-add-free{color:var(--success);font-weight:700}
.party-add-short{display:block;color:var(--danger);font-weight:600}
/* หน้าจับเวลาบอสของสมาชิกที่เข้าปาร์ตี้ฟรีแล้วแพ็กหมดอายุ: มืดทั้งหน้า + การ์ดให้เลือกทางไปต่อ */
#view-timers{position:relative}
#view-timers .party-lock{position:absolute;inset:0;z-index:30;background:rgba(4,7,13,.8);backdrop-filter:blur(2px)}
#view-timers .party-lock-card{position:sticky;top:12vh;box-sizing:border-box;width:min(440px,calc(100% - 32px));margin:10vh auto 0;padding:1.4rem 1.3rem;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
#view-timers .party-lock-card h2{margin:0 0 .5rem;font-size:1.1rem;line-height:1.4;text-wrap:balance}
#view-timers .party-lock-card p{margin:0 0 1rem;font-size:.86rem;line-height:1.6;color:var(--text-dim)}
#view-timers .party-lock-options{display:grid;gap:.7rem}
/* ปุ่มเลือกทางไปต่อ: ชื่อปุ่ม + คำอธิบายอยู่ในกรอบเดียวกัน */
#view-timers .party-lock .party-lock-choice{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-height:56px;padding:10px 14px;line-height:1.35;white-space:normal;text-align:center}
#view-timers .party-lock-choice b{font-size:.92rem;font-weight:700}
#view-timers .party-lock-choice small{font-size:.74rem;font-weight:400;line-height:1.45;opacity:.78}
/* ป้ายสิทธิ์สมาชิกในแผงปาร์ตี้: เข้าแบบไหน (ทอง = จ่าย 50 ถาวร / เขียว = เข้าฟรี) + ใช้งานได้แค่ไหน (ฟ้า = เต็ม / เทา = ดูอย่างเดียว / แดง = ถูกพักสิทธิ์) */
.party-pills{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}
/* ป้ายอยู่บรรทัดเดียวกับชื่อ (ที่ไม่พอค่อยขึ้นบรรทัดใหม่เอง) */
.party-member-row .admin-topup-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.party-member-row .party-pills{margin-top:0}
/* สมาชิกปาร์ตี้แพ็กฟรี (ดูอย่างเดียว): แผนที่ปักหมุดไม่ได้ · ช่องเวลาตายกดไม่ได้ */
.bc-map.bc-map-readonly{cursor:default}
.bc-input:disabled{opacity:.5;cursor:not-allowed}
/* ส่งอีเมลยืนยันอีกครั้ง (ใต้ข้อความ error ของหน้าล็อกอิน) */
.auth-resend{margin:-.2rem 0 .7rem;text-align:center}
.auth-resend-btn{background:none;border:none;padding:.3rem .2rem;color:var(--accent);font-size:.84rem;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.auth-resend-btn:disabled{opacity:.55;cursor:wait}
/* ลืมรหัสผ่าน: ข้อความหลังส่งลิงก์ + ทางสำรองติดต่อแอดมิน */
.forgot-sent{margin:-.2rem 0 .9rem;padding:.6rem .75rem;border-radius:10px;background:color-mix(in srgb,var(--success) 12%,transparent);border:1px solid color-mix(in srgb,var(--success) 38%,transparent);color:#94dfbd;font-size:.8rem;line-height:1.6}
.forgot-sent b{display:block;margin-bottom:.15rem;font-size:.86rem;color:#c9f2de}
.forgot-sent ul{margin:.3rem 0 0;padding-left:1.1rem}
.forgot-sent li+li{margin-top:.15rem}
.forgot-alt{margin:.9rem 0 0;font-size:.76rem;line-height:1.6;color:var(--text-dim)}
/* ลิงก์ในอีเมลหมดอายุ/เคยกดไปแล้ว: กล่องแจ้งบนหน้าต่างเข้าสู่ระบบ (โทนเตือนสีเหลือง) */
.auth-link-notice{margin:0 0 1rem;padding:.65rem .8rem;border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:#f0cf86;font-size:.8rem;line-height:1.6}
.auth-link-notice b{display:block;margin-bottom:.15rem;font-size:.86rem;color:#f7e2b0}
.auth-link-notice ul{margin:.35rem 0 0;padding-left:1.1rem}
.auth-link-notice li+li{margin-top:.2rem}
.forgot-alt a{color:var(--accent);font-weight:600}
.party-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid transparent;border-radius:999px;font-size:.72rem;font-weight:600;line-height:1.5}
.party-pill-paid{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:#f0cf86}
.party-pill-free{background:color-mix(in srgb,var(--success) 14%,transparent);border-color:color-mix(in srgb,var(--success) 40%,transparent);color:#94dfbd}
.party-pill-full{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:#b6cefa}
.party-pill-view{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text-dim)}
.party-pill-locked{background:color-mix(in srgb,var(--danger) 14%,transparent);border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:#ffb7bd}

@media(max-width:760px){
  .content{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
  .rail{scroll-padding-inline:.5rem}
  .rail-btn{scroll-margin-inline:.5rem}
  .btn-sm{min-height:44px}
  #view-home :is(#mrEntryPanel,.home-left>.panel){padding:1rem;gap:.875rem}
  #view-home #mrEntryPanel>.panel-head{flex-wrap:wrap;gap:.75rem}
  #view-home #mrEntryPanel>.panel-head>.field{flex:1 0 100%}
  #view-home #mrEntryPanel>.panel-head #mrCategoryToggle .seg-btn{min-height:44px;font-size:.875rem}
  #view-home #mrEntryPanel #mrAddRowBtn{min-height:44px}
  #view-home #mrEntryPanel .farm-exrate-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
  #view-home #mrEntryPanel .farm-exrate-row label{grid-column:1/-1}
  #view-home #mrEntryPanel #mrExRateInput{width:100%;min-width:0}
  #view-home .mr-hist-search,#view-home #mrHistoryRange,
  #view-home .dashboard-filters .hf-group select{min-height:44px;font-size:1rem}
  #view-home #historyCategoryToggle .seg-btn{min-height:40px}
}
@media(max-width:600px){
  /* Retain all three original summary cards, while reducing empty vertical space. */
  #view-home .mr-summary-item,#view-home .mr-summary-item:last-child{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
    gap:.5rem;padding:1rem 3.5rem 1rem .85rem;
  }
  #view-home .mr-summary-item .mr-summary-label{padding:0;min-height:0;font-size:.82rem}
  #view-home .mr-summary-item .mr-summary-value{width:auto;max-width:100%;font-size:1.2rem;text-align:right}
  #view-home .mr-summary-item::after{top:50%;transform:translateY(-50%);right:.75rem;width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .rail-btn,.seg-btn,.icon-btn{transition:none}
}

/* ---------- หน้าจับเวลาบอส: ปุ่ม + การ์ดแจ้งเตือนบอสเข้า Discord ---------- */
#view-timers .boss-discord-toggle{position:relative;display:inline-flex;align-items:center;gap:.4rem;flex:none;height:38px;padding:0 .8rem;border:1px solid rgba(118,132,245,.55);border-radius:9px;background:linear-gradient(135deg,rgba(47,52,110,.96),rgba(27,31,72,.96));color:#c7cdff;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 rgba(199,205,255,.1),0 4px 13px rgba(5,13,31,.2);transition:background .18s ease,color .18s ease}
#view-timers .boss-discord-toggle svg{width:16px;height:16px}
#view-timers .boss-discord-toggle:hover,#view-timers .boss-discord-toggle:focus-visible,#view-timers .boss-discord-toggle.active{background:linear-gradient(135deg,rgba(68,75,160,.98),rgba(40,46,110,.98));color:#fff;outline:none}
#view-timers .boss-discord-toggle:focus-visible{box-shadow:0 0 0 3px rgba(118,132,245,.45)}
#view-timers .boss-discord-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#57d6a4;box-shadow:0 0 0 2px #1d2150}
.settings-discord{display:flex;flex-direction:column;gap:12px;padding:1rem 1.1rem;margin:0 0 1.1rem;border-radius:12px}
.settings-discord[hidden]{display:none}
.settings-discord .panel-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:0}
.settings-discord .panel-head h2{margin:0;font-size:1rem}
.settings-discord .settings-note{margin:0;font-size:.78rem;line-height:1.65;color:var(--text-dim)}
.settings-discord-status{font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);background:var(--surface-2)}
.settings-discord-status:empty{display:none}
.settings-discord-status.on{color:#8dd9c4;border-color:color-mix(in srgb, #8dd9c4 45%, transparent);background:color-mix(in srgb, #8dd9c4 12%, transparent)}
.settings-discord-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:end}
.settings-discord-form .field{margin:0;gap:6px}
.settings-discord-form .settings-discord-url{grid-column:1/-1}
.settings-discord-form input:disabled,.settings-discord-form select:disabled{opacity:.55;cursor:not-allowed}
.settings-discord-toggle{display:flex;align-items:center;gap:.5rem;min-height:44px;font-size:.88rem;cursor:pointer}
.settings-discord-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.settings-discord #stDiscordError:empty{display:none}
.settings-discord #stDiscordError{margin:0;overflow-wrap:anywhere}
.settings-discord-actions{gap:8px;flex-wrap:wrap}
.settings-discord-actions .btn{min-height:40px;padding:.5rem .9rem}
.settings-discord-locked{padding:.55rem .75rem;border:1px solid color-mix(in srgb, #f5bd62 40%, var(--border));border-radius:8px;background:color-mix(in srgb, #f5bd62 10%, transparent)}
.settings-discord-help{font-size:.8rem;color:var(--text-dim);border-top:1px solid var(--border);padding-top:10px}
.settings-discord-help summary{cursor:pointer;min-height:32px;display:flex;align-items:center;color:var(--text)}
.settings-discord-help ol{margin:.4rem 0 .5rem 1.2rem;padding:0;display:flex;flex-direction:column;gap:.3rem;line-height:1.6}
.settings-discord-help p{margin:0;line-height:1.6}
.settings-discord-url .field-hint{overflow-wrap:anywhere}
@media(max-width:760px){
  .settings-discord-form{grid-template-columns:1fr}
  .settings-discord-actions .btn{flex:1 1 auto}
}
#stDiscordWebhook.is-saved{color:#8dd9c4;border-color:color-mix(in srgb, #8dd9c4 45%, var(--border));cursor:pointer}
#view-timers .boss-sound-popover-head:has(+ .boss-sound-popover-note){margin-bottom:.15rem}
#view-timers .boss-sound-popover-note{font-size:.74rem;font-weight:700;color:#f5bd62;margin-bottom:.7rem}
.settings-discord-host{margin:0;padding:.55rem .75rem;border-radius:8px;font-size:.84rem;font-weight:700;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim)}
.settings-discord-host.on{color:#8dd9c4;border-color:color-mix(in srgb, #8dd9c4 45%, var(--border));background:color-mix(in srgb, #8dd9c4 10%, transparent)}
.settings-discord-host[hidden]{display:none}
#view-timers .boss-sound-popover-note:has(+ .boss-sound-popover-tip){margin-bottom:.1rem}
#view-timers .boss-sound-popover-tip{font-size:.72rem;color:#a9b8d6;margin-bottom:.7rem}
/* การ์ดกรอกรายการ "รายการซื้อ-ขาย" (บัญชีนักลงทุน) และ "ต้นทุนต่อกั้ม" (ยอดนักฟาร์ม) เลื่อนตามหน้าจอ
   เฉพาะจอกว้างที่แบ่ง 2 ฝั่ง (เกิน 1100px — แคบกว่านี้การ์ดเรียงแถวเดียว ไม่ต้องตาม)
   การ์ดสูงไม่เกินจอ: ค้างห่างขอบบน 1rem · สูงกว่าจอ: top ติดลบ = เลื่อนไปจนขอบล่างการ์ด (ปุ่มบันทึก) ห่างขอบล่างจอ 1rem แล้วค้าง
   --sticky-card-h = ความสูงการ์ด วัดโดย ResizeObserver ใน app.js (ไม่มีค่า = 0 → ค้างขอบบนอย่างเดียว) */
@media (min-width:1101px){
  #view-home #mrEntryPanel,
  #view-farm .panel-farm-cost{position:sticky;top:min(1rem, calc(100vh - var(--sticky-card-h, 0px) - 1rem))}
}
/* ประวัติซื้อ-ขาย: ไอคอนในการ์ด M เป็นรูปเหรียญ (assets/zeny-coin.webp) แทนกรอบสี่เหลี่ยมสีฟ้า + ตัว Z — ขนาดเท่ากรอบเดิม 32px
   (หัวหมวด "Zeny" ยังเป็นไอคอน Z แบบเส้นเหมือนเดิม — historyCategoryIcon ใน app.js) */
#view-home #mrHistoryList .mr-history-icon.mr-history-icon-coin{background:none;border-radius:0;overflow:hidden}
/* รูปมีขอบว่างรอบเหรียญ (เหรียญกว้าง ~73% ของรูป และอยู่สูงกว่ากึ่งกลาง ~1.8%) → ขยาย 1.35 เท่า + เลื่อนลง 2.4% ให้เหรียญเต็มกรอบพอดีกลาง */
#view-home #mrHistoryList .mr-history-icon-coin img{display:block;width:100%;height:100%;object-fit:contain;transform:translateY(2.4%) scale(1.35)}
/* หน้าต่างเติมแต้ม: คำว่า "Admin" ในกล่องเตือนสีเหลือง = ลิงก์ไปเพจ Facebook — สีเดียวกับข้อความเตือน ตัวหนา ขีดเส้นใต้ */
#topupOverlay .topup-notice-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#topupOverlay .topup-notice-link:hover{color:#ffe2a6}
/* คลังไอเทม: รูปรถเข็น (หัวข้อ "รายการรอลงคลัง" + "รายการในคลัง" ตอนยังไม่เลือกคลัง) แทนหีบเดิม
   รูปมีขอบว่าง (รถเข็นกว้าง ~87% ของรูป อยู่ค่อนซ้าย-ล่างเล็กน้อย) — 1.13 เท่า = กว้างเต็มกรอบเท่าหีบเดิม แล้วผู้ใช้ขอใหญ่ขึ้นอีก 30%
   → 1.47 เท่า (ขยายแค่ภาพ ไม่ขยายช่อง: ข้อความหัวข้อไม่ขยับ, สลับเป็นรูปคลังแล้วไม่กระตุก)
   เลื่อนซ้าย ~3px ให้ห่างข้อความ (ภาพเกินช่องไปทางซ้ายแทน) + เลื่อนขึ้นให้อยู่กลางแนวตั้ง
   เลือกคลังแล้วหัวข้อเปลี่ยนเป็นรูปของคลังนั้น (src ไม่ใช่รถเข็น) จึงไม่โดนกฎนี้ */
#view-items .inventory-heading-icon[src$="inventory-cart.webp"]{transform:translate(-7.5%,-2.7%) scale(1.47)}
/* หน้าต่างเพิ่มเพื่อนเข้าปาร์ตี้: ไม่ใช้จุด bullet — ราคานำหน้าบรรทัด (ฟรี = เขียว / 50 แต้ม = ทอง ตรงกับป้ายในแผงปาร์ตี้)
   รายละเอียดเสริมเป็นบรรทัดล่างตัวเล็กสีจาง · ข้อห้ามกดออกเป็นสีเตือน */
ul.post-announce-note.party-add-rules{list-style:none;padding-left:0;font-size:.76rem;line-height:1.5}
ul.post-announce-note.party-add-rules li{margin-bottom:.6rem;color:var(--text)}
ul.post-announce-note.party-add-rules li:last-child{margin-bottom:0}
ul.post-announce-note.party-add-rules small{display:block;margin-top:.1rem;font-size:.7rem;color:var(--text-dim)}
ul.post-announce-note.party-add-rules .party-add-price-free{color:#94dfbd}
ul.post-announce-note.party-add-rules .party-add-price-paid{color:#f0cf86}
ul.post-announce-note.party-add-rules .party-add-warn{color:var(--warn)}
ul.post-announce-note.party-add-rules .party-add-keep{white-space:nowrap} /* วลีสั้นที่ไม่ควรขาดกลางคำ (เช่น "ทุก / อย่าง") — ขึ้นบรรทัดใหม่ทั้งก้อน */

/* การ์ดประวัติซื้อ–ขายกะทัดรัดขึ้น: ลดเฉพาะระยะห่าง — ข้อความ/ขนาดตัวอักษร/สีเท่าเดิม (ผู้ใช้ขอ 28 ก.ย. 2569)
   การ์ดไอเทมตอนยังไม่กดเปิด (แถวเตี้ย) มีกฎของตัวเองที่เจาะจงกว่า ไม่โดนกฎนี้ */
#view-home #mrHistoryList .mr-it-row.mr-ic:is(.history-alt-odd,.history-alt-even){padding:.55rem .85rem;row-gap:.45rem}
#view-home #mrHistoryList .mr-it-row.mr-ic.mr-history-zeny{margin-top:.5rem}
#view-home #mrHistoryList .mr-ic>.mr-ic-head{padding-bottom:.4rem;min-height:34px}
#view-home #mrHistoryList .mr-it-cell{gap:.05rem;line-height:1.35}
#view-home #mrHistoryList .mr-it-cell b{line-height:1.35}
#view-home #mrHistoryList .mr-it-cell small,
#view-home #mrHistoryList .mr-it-cell .mr-it-avg,
#view-home #mrHistoryList .mr-it-cell.profit small,
#view-home #mrHistoryList .mr-it-cell.profit .mr-profit-sale-note{line-height:1.4}