:root{--bg:#17120f;--bg2:#100d0b;--panel:#211a16;--panel2:#2a211b;--line:#49382d;--line2:#352820;--text:#d9d0c3;--muted:#958a7c;--gold:#d4a65f;--gold2:#8e6432;--red:#ce6e61;--green:#75ae78;--blue:#68a5c0;--purple:#9b83bd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#271b14 0,#17120f 30%,#100d0b 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}.site-head{background:#0d0b09;border-bottom:1px solid #5a4029;box-shadow:0 4px 20px #0008}.head-inner{width:min(1180px,94vw);margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}.title-block{display:flex;align-items:center;gap:17px}.poe-mark{width:72px;height:48px;border:1px solid #7b5733;color:#d0a66d;display:grid;place-items:center;font:700 15px Georgia,serif;letter-spacing:2px;background:linear-gradient(#21170f,#0f0d0a);box-shadow:inset 0 0 15px #000}.title-block h1{margin:0;color:#e1c394;font:700 25px Georgia,serif;letter-spacing:.8px}.title-block p{margin:5px 0 0;color:#8f8170;font-size:12px}.head-actions{display:flex;gap:7px}.head-actions button{border:1px solid #4e3a2b;background:#1c1511;color:#b9ad9d;padding:8px 11px;cursor:pointer}.head-actions button:hover{border-color:#9c7041;color:#dfc398}.actbar-wrap{position:sticky;top:0;z-index:30;background:#1c1511;border-bottom:1px solid #5a4029;box-shadow:0 3px 12px #0007}.act-tabs{width:min(1180px,94vw);margin:auto;display:flex;overflow:auto}.act-tab{border:0;border-right:1px solid #3e2d23;background:transparent;color:#9a8d7c;min-width:94px;padding:13px 18px;cursor:pointer;font:700 12px Georgia,serif;letter-spacing:.5px}.act-tab:first-child{border-left:1px solid #3e2d23}.act-tab:hover{background:#261c16;color:#d5b47e}.act-tab.active{background:linear-gradient(#3a291d,#251a14);color:#e4bf7e;box-shadow:inset 0 -3px #b67b37}.page-shell{width:min(1180px,94vw);margin:20px auto 60px;display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:18px}.guide-toolbar{border:1px solid var(--line);background:#17120f;padding:12px;margin-bottom:13px;display:grid;grid-template-columns:170px minmax(120px,1fr) 240px auto;gap:10px;align-items:center}.progress-copy{display:flex;align-items:center;gap:9px}.progress-copy b{font:700 22px Georgia,serif;color:#e4b76f}.progress-copy span{font-size:11px;color:#968979;line-height:1.3}.progress-track{height:8px;background:#0b0908;border:1px solid #3c2e25}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#815a2e,#d5a55e);transition:.2s}.search-box input{width:100%;border:1px solid #443329;background:#0e0c0a;color:#ddd1c2;padding:8px 9px;outline:none}.search-box input:focus{border-color:#85603a}.filters{display:flex}.filter{border:1px solid #45342a;border-left:0;background:#1d1713;color:#948779;padding:8px 9px;cursor:pointer;font-size:11px}.filter:first-child{border-left:1px solid #45342a}.filter.active{background:#3a291d;color:#e0b574}.act-head{border:1px solid var(--line);background:linear-gradient(#2b211a,#1c1612);padding:13px 15px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.act-head h2{margin:0;color:#e7c78f;font:700 24px Georgia,serif}.act-head p{margin:3px 0 0;color:#8e8273;font-size:12px}.act-progress{font-size:11px;color:#8f7c65}.zone{border:1px solid var(--line);background:#171310;margin-bottom:8px}.zone-head{min-height:42px;background:linear-gradient(90deg,#32241b,#211914);border-bottom:1px solid #49372b;display:flex;align-items:center;justify-content:space-between}.zone-title{display:flex;align-items:stretch;min-height:42px}.zone-num{width:45px;display:grid;place-items:center;border-right:1px solid #58402f;color:#b98b50;font:700 12px Georgia,serif;background:#1a130f}.zone-title>div{padding:7px 11px}.zone-name{font:700 16px Georgia,serif;color:#d9c09b}.zone-meta{font-size:10px;color:#796f64;margin-top:2px}.zone-check{margin-right:8px;border:1px solid #544032;background:#17110e;color:#9b8d7e;padding:6px 8px;cursor:pointer;font-size:10px}.zone-check:hover{color:#dec196;border-color:#87623c}.step{display:grid;grid-template-columns:34px 1fr 190px;align-items:stretch;border-bottom:1px solid #30251f;cursor:pointer;min-height:48px}.step:last-child{border-bottom:0}.step:hover{background:#1d1713}.check-cell{display:grid;place-items:center;border-right:1px solid #30251f}.check{width:17px;height:17px;border:1px solid #68503d;background:#100d0b;display:grid;place-items:center;color:#15100c;font-size:11px}.step.done .check{background:#b98545;border-color:#d9ad72}.step-main{padding:9px 12px;line-height:1.35;color:#c9bfb2}.step-main b{font-weight:600;color:#ded4c6}.step-note{font-size:11px;color:#8f8376;margin-top:4px}.step.done .step-main{opacity:.42;text-decoration:line-through}.badges{border-left:1px solid #30251f;padding:8px;display:flex;gap:5px;align-content:flex-start;justify-content:flex-start;flex-wrap:wrap}.badge{font-size:9px;text-transform:uppercase;letter-spacing:.3px;border:1px solid;padding:3px 5px;background:#120f0d}.badge.required{color:#d9ad64;border-color:#735630}.badge.reward{color:#87bd8a;border-color:#426047}.badge.boss{color:#d98073;border-color:#70423c}.badge.waypoint{color:#78afc7;border-color:#385769}.badge.optional{color:#a995c2;border-color:#554b69}.side-card{border:1px solid var(--line);background:#181310;padding:14px}.sticky-card{position:sticky;top:58px}.side-card h3{margin:0 0 12px;color:#d5b67f;font:700 14px Georgia,serif;border-bottom:1px solid #3c2d24;padding-bottom:9px}.side-card p{margin:9px 0;color:#a99d8e;font-size:12px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.legend-dot.required{background:#d9ad64}.legend-dot.reward{background:#75ae78}.legend-dot.boss{background:#ce6e61}.legend-dot.waypoint{background:#68a5c0}.side-sep{border-top:1px solid #352820;margin:13px 0}.side-card small{color:#786f65;line-height:1.5}footer{border-top:1px solid #3b2c23;padding:22px;text-align:center;color:#685f56;font-size:11px;background:#0e0c0a}body.light{--bg:#e5ded2;--bg2:#d9d0c3;--panel:#f4eee5;--panel2:#eee5da;--line:#b8a995;--line2:#c9bdad;--text:#302a25;--muted:#746a60;background:#ddd5c9;color:#302a25}body.light .site-head{background:#eee7dc}body.light .actbar-wrap{background:#e6ddd1}body.light .guide-toolbar,body.light .zone,body.light .side-card{background:#f5efe7}body.light .step:hover{background:#ece3d7}body.light .step-main b{color:#302a25}body.light .step-main{color:#50483f}body.light footer{background:#d4cabd}@media(max-width:900px){.page-shell{grid-template-columns:1fr}.right-column{display:none}.guide-toolbar{grid-template-columns:1fr 1fr}.search-box{grid-column:1/-1}.filters{grid-column:1/-1}.step{grid-template-columns:32px 1fr}.badges{grid-column:2;border-left:0;border-top:1px solid #30251f;padding-top:6px}.head-inner{min-height:78px}.title-block h1{font-size:20px}.title-block p{display:none}.poe-mark{width:60px}.head-actions button:last-child{font-size:0}.head-actions button:last-child:after{content:'Reset';font-size:11px}}@media(max-width:540px){.page-shell{width:97vw}.head-inner,.act-tabs{width:97vw}.guide-toolbar{grid-template-columns:1fr}.progress-track,.search-box,.filters{grid-column:1}.act-tab{min-width:80px;padding:12px}.zone-check{display:none}.step-main{padding-right:8px}}

/* Nhấn mạnh địa danh / waypoint để dễ nhìn khi leveling */
.zone-name{color:#f0c879;font-weight:800;text-shadow:0 1px 0 #000}
.step-waypoint .step-main b{color:#79c9ef;font-weight:800}
.step-waypoint .step-main b::before{content:"◆ ";color:#5eb7df}
.step-boss:not(.step-waypoint) .step-main b{color:#e99a8d;font-weight:750}
.step-reward:not(.step-waypoint):not(.step-boss) .step-main b{color:#9ed19f;font-weight:750}
body.light .zone-name{color:#7b4e12;text-shadow:none}
body.light .step-waypoint .step-main b{color:#176b91}
body.light .step-boss:not(.step-waypoint) .step-main b{color:#9b3f35}
body.light .step-reward:not(.step-waypoint):not(.step-boss) .step-main b{color:#39763c}

/* Inline highlights: only the matched words change color; the sentence keeps its original color. */
.inline-zone{color:#f0c879;font-weight:800}
.inline-waypoint{color:#79c9ef;font-weight:800}
body.light .inline-zone{color:#7b4e12}
body.light .inline-waypoint{color:#176b91}
/* Disable old whole-line coloring. */
.step-waypoint .step-main b,.step-boss:not(.step-waypoint) .step-main b,.step-reward:not(.step-waypoint):not(.step-boss) .step-main b{color:#ded4c6;font-weight:600}
.step-waypoint .step-main b::before{content:none}
body.light .step-waypoint .step-main b,body.light .step-boss:not(.step-waypoint) .step-main b,body.light .step-reward:not(.step-waypoint):not(.step-boss) .step-main b{color:#302a25}


/* Inline boss highlight: only boss names are emphasized; surrounding sentence stays normal. */
.step-main .step-text{font-weight:400;color:#c9bfb2}
.inline-boss{color:#e99a8d;font-weight:800}
body.light .step-main .step-text{color:#50483f}
body.light .inline-boss{color:#9b3f35}

/* Permanent reward: tăng nhẹ để dễ đọc hơn, các note khác giữ nguyên. */
.step-reward .step-note{font-size:13px;line-height:1.45}

/* Hover image cho tên địa danh / boss có khai báo trong hover-images.js */
.has-hover-image{cursor:help;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.hover-preview{position:fixed;z-index:9999;left:0;top:0;width:min(480px,calc(100vw - 28px));padding:7px;background:#100d0b;border:1px solid #76563a;box-shadow:0 10px 30px #000b;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease,visibility .12s}
.hover-preview.show{opacity:1;visibility:visible;transform:translateY(0)}
.hover-preview img{display:block;width:100%;max-height:373px;object-fit:contain;background:#090706}
.hover-preview-caption{padding:7px 5px 3px;color:#d9c09b;font:700 12px Georgia,serif;text-align:center}
body.light .hover-preview{background:#f5efe7;border-color:#9e7d58;box-shadow:0 10px 26px #57452f45}
body.light .hover-preview-caption{color:#5c4429}
@media(max-width:600px){.hover-preview{width:min(427px,calc(100vw - 20px))}.hover-preview img{max-height:293px}}
.admin-link{border:1px solid #4e3a2b;background:#1c1511;color:#b9ad9d;padding:8px 11px;text-decoration:none;font-size:12px}.admin-link:hover{border-color:#9c7041;color:#dfc398}.loading-box{border:1px solid var(--line);padding:20px;background:#17120f;color:#a99d8e}.zone-name.has-hover-image{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}


/* Bản đồ tổng thể từng Act: chỉ hiện nút trong header, ảnh mở bằng modal để không phá bố cục. */
.act-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.act-map-btn{border:1px solid #6a4d32;background:#211811;color:#d8b77f;padding:7px 10px;cursor:pointer;font:700 11px Georgia,serif;white-space:nowrap}
.act-map-btn:hover{border-color:#a77640;color:#f0cf96;background:#2b1f17}
.act-map-modal{position:fixed;inset:0;z-index:10000;background:#000c;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s}
.act-map-modal.show{opacity:1;visibility:visible}
.act-map-dialog{width:min(1200px,96vw);max-height:94vh;background:#100d0b;border:1px solid #76563a;box-shadow:0 18px 55px #000;display:flex;flex-direction:column}
.act-map-modal-head{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 14px;border-bottom:1px solid #49372b;color:#e2c28d;font:700 15px Georgia,serif}
.act-map-close{width:34px;height:30px;border:1px solid #5b4332;background:#1c1511;color:#c9b79f;font-size:21px;line-height:1;cursor:pointer}
.act-map-canvas{overflow:auto;min-height:0;padding:10px;background:#090706;text-align:center}
.act-map-canvas img{display:block;max-width:100%;height:auto;margin:auto}
body.map-open{overflow:hidden}
body.light .act-map-btn{background:#eee5da;color:#704817;border-color:#a98a63}
body.light .act-map-dialog{background:#f5efe7;border-color:#9e7d58}
body.light .act-map-modal-head{color:#5c4429;border-color:#b8a995}
body.light .act-map-canvas{background:#ddd5c9}
@media(max-width:600px){.act-head{align-items:flex-start}.act-head-actions{gap:6px}.act-map-btn{padding:6px 8px}.act-map-modal{padding:8px}.act-map-dialog{max-height:97vh}.act-map-canvas{padding:5px}}

/* ===== LIGHT THEME — BLUE PALETTE ===== */
body.light{
  --bg:#eaf3fb;--bg2:#dbeaf7;--panel:#f7fbff;--panel2:#edf6fd;
  --line:#9fbad0;--line2:#c1d4e3;--text:#17324a;--muted:#607b91;
  background:linear-gradient(180deg,#dceaf5 0,#edf5fb 45%,#e4eff7 100%);color:#17324a
}
body.light .site-head{background:#f5faff;border-bottom-color:#8eabc2;box-shadow:0 3px 14px #42698422}
body.light .poe-mark{background:linear-gradient(#244f72,#173a57);border-color:#527d9e;color:#d9efff;box-shadow:inset 0 0 15px #0d2940}
body.light .title-block h1{color:#245d89}
body.light .title-block p{color:#66839a}
body.light .head-actions button{background:#e8f3fb;border-color:#8daac0;color:#294f6d}
body.light .head-actions button:hover{background:#d7eaf8;border-color:#4e7fa4;color:#153d5c}
body.light .actbar-wrap{background:#e3eff8;border-bottom-color:#8faec5;box-shadow:0 3px 10px #42698420}
body.light .act-tab{color:#58758b;border-color:#a9bfd0;background:#edf5fb}
body.light .act-tab:first-child{border-left-color:#a9bfd0}
body.light .act-tab:hover{background:#d9eaf6;color:#245d89}
body.light .act-tab.active{background:linear-gradient(#397aa8,#285f89);color:#fff;box-shadow:inset 0 -3px #8fc9ee}
body.light .guide-toolbar,body.light .zone,body.light .side-card{background:#f7fbff;border-color:#9fbad0}
body.light .progress-copy b{color:#2e79aa}
body.light .progress-copy span,body.light .act-progress{color:#66839a}
body.light .progress-track{background:#d5e5f1;border-color:#9db8cd}
body.light .progress-track div{background:linear-gradient(90deg,#3f83b3,#70b5df)}
body.light .search-box input{background:#fff;color:#17324a;border-color:#9db8cd}
body.light .search-box input:focus{border-color:#4c8bb6;box-shadow:0 0 0 2px #75b5df25}
body.light .filter{background:#edf5fb;color:#58758b;border-color:#a9bfd0}
body.light .filter.active{background:#397aa8;color:#fff}
body.light .act-head{background:linear-gradient(90deg,#e2f0fa,#f5faff);border-color:#9fbad0}
body.light .act-head h2{color:#245d89}
body.light .act-head p{color:#66839a}
body.light .zone-head{background:linear-gradient(90deg,#d9eaf6,#edf6fc);border-bottom-color:#a9bfd0}
body.light .zone-num{background:#cce1f0;border-right-color:#9fbad0;color:#245d89}
body.light .zone-name{color:#1e628f}
body.light .zone-meta{color:#6e8799}
body.light .zone-check{background:#f4f9fd;color:#496b83;border-color:#9fbad0}
body.light .zone-check:hover{background:#dcecf7;color:#174e74;border-color:#6495b7}
body.light .step{border-bottom-color:#c6d8e5}
body.light .step:hover{background:#e9f4fb}
body.light .check-cell,body.light .badges{border-color:#c6d8e5}
body.light .check{background:#fff;border-color:#789bb5;color:#fff}
body.light .step.done .check{background:#3f83b3;border-color:#2d6e9b}
body.light .step-main,body.light .step-main .step-text{color:#29465c}
body.light .step-main b{color:#17324a}
body.light .step-note{color:#6d8597}
body.light .inline-zone{color:#176b9d}
body.light .inline-waypoint{color:#147da8}
body.light .inline-boss{color:#b44c45}
body.light .side-card h3{color:#245d89;border-bottom-color:#aec5d6}
body.light .side-card p{color:#49677d}
body.light .side-sep{border-top-color:#c3d5e2}
body.light .side-card small{color:#6c8496}
body.light footer{background:#d4e5f1;border-top-color:#9fbad0;color:#607b91}
body.light .act-map-btn{background:#dcecf7;color:#205d87;border-color:#82a9c5}
body.light .act-map-btn:hover{background:#c7e2f4;border-color:#4f8ab3;color:#123f60}
body.light .act-map-dialog{background:#f7fbff;border-color:#7fa5c0;box-shadow:0 18px 60px #214d6b38}
body.light .act-map-modal-head{color:#245d89;border-color:#aac3d5}
body.light .act-map-canvas{background:#dbeaf5}
body.light .hover-preview{background:#f7fbff;border-color:#7fa5c0;box-shadow:0 10px 26px #214d6b35}
body.light .hover-preview-caption{color:#245d89}

/* ===== LIGHT THEME — MONOCHROME BLACK & WHITE ===== */
body.light{
  --bg:#f1f1f1;--bg2:#e5e5e5;--panel:#ffffff;--panel2:#f6f6f6;
  --line:#a9a9a9;--line2:#d0d0d0;--text:#171717;--muted:#666666;
  background:linear-gradient(180deg,#e7e7e7 0,#f7f7f7 45%,#eeeeee 100%);color:#171717
}
body.light .site-head{background:#fff;border-bottom-color:#8e8e8e;box-shadow:0 3px 14px #00000018}
body.light .poe-mark{background:linear-gradient(#292929,#0f0f0f);border-color:#555;color:#fff;box-shadow:inset 0 0 15px #000}
body.light .title-block h1{color:#151515}
body.light .title-block p{color:#666}
body.light .head-actions button,body.light .admin-link{background:#171717;border-color:#333;color:#f4f4f4}
body.light .head-actions button:hover,body.light .admin-link:hover{background:#333;border-color:#000;color:#fff}
body.light .actbar-wrap{background:#ededed;border-bottom-color:#999;box-shadow:0 3px 10px #00000018}
body.light .act-tab{color:#555;border-color:#aaa;background:#f4f4f4}
body.light .act-tab:first-child{border-left-color:#aaa}
body.light .act-tab:hover{background:#ddd;color:#111}
body.light .act-tab.active{background:linear-gradient(#343434,#171717);color:#fff;box-shadow:inset 0 -3px #8d8d8d}
body.light .guide-toolbar,body.light .zone,body.light .side-card{background:#fff;border-color:#aaa}
body.light .progress-copy b{color:#111}
body.light .progress-copy span,body.light .act-progress{color:#666}
body.light .progress-track{background:#ddd;border-color:#999}
body.light .progress-track div{background:linear-gradient(90deg,#222,#777)}
body.light .search-box input{background:#fff;color:#111;border-color:#999}
body.light .search-box input:focus{border-color:#222;box-shadow:0 0 0 2px #00000012}
body.light .filter{background:#f1f1f1;color:#555;border-color:#aaa}
body.light .filter:hover{background:#ddd;color:#111}
body.light .filter.active{background:#222;color:#fff}
body.light .act-head{background:linear-gradient(90deg,#e5e5e5,#fafafa);border-color:#999}
body.light .act-head h2{color:#111}
body.light .act-head p{color:#666}
body.light .zone-head{background:linear-gradient(90deg,#dedede,#f3f3f3);border-bottom-color:#aaa}
body.light .zone-num{background:#d2d2d2;border-right-color:#999;color:#111}
body.light .zone-name{color:#111;text-shadow:none}
body.light .zone-meta{color:#777}
body.light .zone-check{background:#fafafa;color:#333;border-color:#999}
body.light .zone-check:hover{background:#ddd;color:#000;border-color:#555}
body.light .step{border-bottom-color:#ccc}
body.light .step:hover{background:#f0f0f0}
body.light .check-cell,body.light .badges{border-color:#ccc}
body.light .check{background:#fff;border-color:#666;color:#fff}
body.light .step.done .check{background:#222;border-color:#000}
body.light .step-main,body.light .step-main .step-text{color:#292929}
body.light .step-main b{color:#111}
body.light .step-note{color:#666}
body.light .inline-zone,body.light .inline-waypoint{color:#111}
body.light .inline-boss{color:#111;font-weight:800}
body.light .badge{background:#fff;color:#222;border-color:#666}
body.light .badge.required,body.light .badge.reward,body.light .badge.boss,body.light .badge.waypoint,body.light .badge.optional{color:#111;border-color:#555}
body.light .side-card h3{color:#111;border-bottom-color:#aaa}
body.light .side-card p{color:#444}
body.light .legend-dot.required,body.light .legend-dot.reward,body.light .legend-dot.boss,body.light .legend-dot.waypoint{background:#333}
body.light .side-sep{border-top-color:#ccc}
body.light .side-card small{color:#666}
body.light footer{background:#dedede;border-top-color:#aaa;color:#666}
body.light .act-map-btn{background:#f4f4f4;color:#111;border-color:#777}
body.light .act-map-btn:hover{background:#222;border-color:#000;color:#fff}
body.light .act-map-dialog{background:#fff;border-color:#777;box-shadow:0 18px 60px #00000035}
body.light .act-map-modal-head{color:#111;border-color:#aaa}
body.light .act-map-close{background:#222;color:#fff;border-color:#000}
body.light .act-map-canvas{background:#e5e5e5}
body.light .hover-preview{background:#fff;border-color:#777;box-shadow:0 10px 26px #00000030}
body.light .hover-preview-caption{color:#111}

/* ===== LIGHT MONOCHROME UI + ORIGINAL DARK-THEME ACCENT COLORS =====
   Keep the white/black light layout, but preserve the semantic/accent colors
   used by the dark theme for readability and recognition. */
body.light .title-block h1{color:#e1c394}
body.light .progress-copy b{color:#e4b76f}
body.light .act-head h2{color:#e7c78f}
body.light .zone-num{color:#b98b50}
body.light .zone-name{color:#f0c879;text-shadow:none}
body.light .inline-zone{color:#f0c879}
body.light .inline-waypoint{color:#79c9ef}
body.light .inline-boss{color:#e99a8d;font-weight:800}
body.light .badge{background:#fff}
body.light .badge.required{color:#d9ad64;border-color:#735630}
body.light .badge.reward{color:#87bd8a;border-color:#426047}
body.light .badge.boss{color:#d98073;border-color:#70423c}
body.light .badge.waypoint{color:#78afc7;border-color:#385769}
body.light .badge.optional{color:#a995c2;border-color:#554b69}
body.light .legend-dot.required{background:#d9ad64}
body.light .legend-dot.reward{background:#75ae78}
body.light .legend-dot.boss{background:#ce6e61}
body.light .legend-dot.waypoint{background:#68a5c0}
body.light .side-card h3{color:#d5b67f}
body.light .act-map-btn{color:#b67b37}
body.light .hover-preview-caption{color:#d5a55e}

/* ===== LIGHT MODE — HIGH-CONTRAST ACCENT COLORS =====
   Giữ đúng hệ màu của Dark Mode nhưng dùng sắc đậm hơn để đọc rõ trên nền sáng. */
body.light .title-block h1{color:#7a531d}
body.light .progress-copy b{color:#80520d}
body.light .act-head h2{color:#744b12}
body.light .zone-num{color:#71460c}
body.light .zone-name{color:#80500a;text-shadow:none}
body.light .inline-zone{color:#80500a}
body.light .inline-waypoint{color:#12658b}
body.light .inline-boss{color:#9b3029;font-weight:800}
body.light .step-main,body.light .step-main .step-text{color:#1f1f1f}
body.light .step-main b{color:#080808}
body.light .step-note{color:#4f4f4f}
body.light .badge{background:#fff;font-weight:700}
body.light .badge.required{color:#7d5109;border-color:#8b651e}
body.light .badge.reward{color:#2f6b34;border-color:#4d7c50}
body.light .badge.boss{color:#9b3029;border-color:#9a514a}
body.light .badge.waypoint{color:#12658b;border-color:#47758b}
body.light .badge.optional{color:#67478b;border-color:#735e8b}
body.light .side-card h3{color:#744b12}
body.light .side-card p{color:#303030}
body.light .side-card small{color:#505050}
body.light .act-map-btn{color:#70440a;font-weight:700}
body.light .hover-preview-caption{color:#744b12}

/* =========================================================
   LIGHT THEME - POE IVORY / CHARCOAL
   Nền sáng kiểu parchment, giữ màu phân loại rõ ràng.
   ========================================================= */
body.light{
  --bg:#ece7df;
  --bg2:#e3ddd4;
  --panel:#fbfaf7;
  --panel2:#f2eee8;
  --line:#c8c0b6;
  --line2:#ddd6cd;
  --text:#27231f;
  --muted:#6f675f;
  --gold:#a86f22;
  --gold2:#7f5117;
  background:
    radial-gradient(circle at 50% -120px,#ffffff 0,#f6f3ee 260px,transparent 520px),
    linear-gradient(180deg,#efebe5 0,#e8e3dc 260px,#e5dfd7 100%);
  color:var(--text);
}

body.light .site-head{
  background:rgba(253,252,249,.97);
  border-bottom:1px solid #bdb4a9;
  box-shadow:0 4px 16px rgba(45,38,31,.08);
}

body.light .poe-mark{
  color:#d6a85d;
  background:linear-gradient(180deg,#171717,#090909);
  border-color:#5d554b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 8px rgba(0,0,0,.12);
}

body.light .title-block h1{
  color:#8f5b18;
  text-shadow:0 1px 0 #fff;
}
body.light .title-block p{color:#766b61}

body.light .head-actions button,
body.light .admin-link{
  background:linear-gradient(180deg,#1f1f1f,#111);
  color:#f8f5ef;
  border-color:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
body.light .head-actions button:hover,
body.light .admin-link:hover{
  background:linear-gradient(180deg,#2a2a2a,#151515);
  color:#e9bd73;
  border-color:#6f5a36;
}

body.light .actbar-wrap{
  background:linear-gradient(180deg,#f5f3ef,#e7e2dc);
  border-bottom:1px solid #bdb5aa;
  box-shadow:0 3px 12px rgba(50,42,34,.08);
}

body.light .act-tab{
  color:#4f4942;
  border-right-color:#c7c0b6;
  background:transparent;
}
body.light .act-tab:first-child{border-left-color:#c7c0b6}
body.light .act-tab:hover{
  background:#fbf8f2;
  color:#8d5b1b;
}
body.light .act-tab.active{
  background:linear-gradient(180deg,#292929,#141414);
  color:#f0c477;
  box-shadow:inset 0 -3px #b67a2d;
  text-shadow:0 1px 0 #000;
}

body.light .guide-toolbar{
  background:rgba(252,251,248,.98);
  border-color:#c8c0b5;
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 8px rgba(52,43,34,.05);
}

body.light .progress-copy b{
  color:#9b641e;
  text-shadow:0 1px 0 #fff;
}
body.light .progress-copy span{color:#665f57}
body.light .progress-track{
  background:#ded8d0;
  border-color:#b9b1a7;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
body.light .progress-track div{
  background:linear-gradient(90deg,#8d5a18,#c48b3a 55%,#ddb06a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}

body.light .search-box input{
  background:#fff;
  color:#27231f;
  border-color:#bdb5aa;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
}
body.light .search-box input::placeholder{color:#978f86}
body.light .search-box input:focus{
  border-color:#a46a24;
  box-shadow:0 0 0 2px rgba(164,106,36,.12);
}

body.light .filter{
  background:#f2eee8;
  color:#554d45;
  border-color:#c4bcb1;
}
body.light .filter:hover{
  background:#fffaf1;
  color:#825116;
}
body.light .filter.active{
  background:linear-gradient(180deg,#2b2b2b,#151515);
  color:#f3d39d;
  border-color:#151515;
}

body.light .act-head{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,237,231,.96));
  border-color:#c3baaf;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 7px rgba(45,37,30,.05);
}
body.light .act-head h2{
  color:#8c5818;
  text-shadow:0 1px 0 #fff;
}
body.light .act-head p{color:#746a60}
body.light .act-progress{color:#756b61}

body.light .act-map-btn{
  background:linear-gradient(180deg,#fffaf1,#eee5d7);
  color:#7a4c15;
  border-color:#b89a72;
  box-shadow:0 1px 0 #fff inset;
}
body.light .act-map-btn:hover{
  background:linear-gradient(180deg,#fff3df,#e7d3b6);
  color:#633d0f;
  border-color:#9d763f;
}

body.light .zone{
  background:#fff;
  border-color:#c8c0b6;
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 8px rgba(44,36,29,.045);
}

body.light .zone-head{
  background:linear-gradient(90deg,#ece7e0,#f7f4ef);
  border-bottom-color:#c8c0b6;
}
body.light .zone-num{
  background:linear-gradient(180deg,#dfd8cf,#d5cdc3);
  border-right-color:#beb5aa;
  color:#7c501a;
  font-weight:700;
}
body.light .zone-name{
  color:#7a4b12;
  text-shadow:0 1px 0 #fff;
}
body.light .zone-meta{color:#7f766d}

body.light .zone-check{
  background:linear-gradient(180deg,#fff,#f0ece6);
  color:#514941;
  border-color:#bfb6aa;
}
body.light .zone-check:hover{
  background:#fff8eb;
  color:#7a4b12;
  border-color:#a77a3c;
}

body.light .step{border-bottom-color:#ddd7cf}
body.light .step:hover{
  background:linear-gradient(90deg,#fffaf1,#fffdf9);
}
body.light .check-cell{border-right-color:#ddd7cf}

body.light .check{
  background:#fff;
  border-color:#9d958b;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.03);
}
body.light .step.done .check{
  background:linear-gradient(180deg,#b87829,#8e5b1d);
  border-color:#805019;
}

body.light .step-main,
body.light .step-main .step-text{color:#2d2925}
body.light .step-main b{color:#211e1a}
body.light .step-note{color:#655e57}

body.light .badges{border-left-color:#ddd7cf}
body.light .badge{
  background:#fff;
  font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}

/* Giữ ngôn ngữ màu của Dark Mode nhưng đậm hơn cho nền sáng */
body.light .badge.required{
  color:#8a5200;
  border-color:#c18a37;
  background:#fff6df;
}
body.light .badge.reward{
  color:#146b27;
  border-color:#66a16e;
  background:#eef8ef;
}
body.light .badge.boss{
  color:#a32119;
  border-color:#d27972;
  background:#fff0ef;
}
body.light .badge.waypoint{
  color:#075f8f;
  border-color:#69a5c1;
  background:#edf8fc;
}
body.light .badge.optional{
  color:#68418d;
  border-color:#9e83b9;
  background:#f6f0fb;
}

body.light .inline-zone{
  color:#8a580f;
  font-weight:700;
}
body.light .inline-boss{
  color:#b3261e;
  font-weight:700;
}
body.light .inline-waypoint{
  color:#086b9d;
  font-weight:700;
}
body.light .has-hover-image{
  text-decoration-color:#9e6b27;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

body.light .side-card{
  background:rgba(252,251,248,.98);
  border-color:#c7bfb4;
  box-shadow:
    0 1px 0 #fff inset,
    0 3px 10px rgba(43,35,29,.06);
}
body.light .side-card h3{
  color:#8a5718;
  border-bottom-color:#cfc7bd;
}
body.light .side-card p{color:#4f4942}
body.light .side-sep{border-top-color:#d9d2c9}
body.light .side-card small{color:#756d65}

body.light footer{
  background:#d8d2ca;
  border-top-color:#bdb5aa;
  color:#5f5851;
}

body.light .hover-preview{
  background:#fffdf9;
  border-color:#9f8462;
  box-shadow:0 16px 36px rgba(48,38,27,.2);
}
body.light .hover-preview img{background:#ece7e1}
body.light .hover-preview-caption{color:#4b4035}

body.light .act-map-modal{background:rgba(28,24,20,.84)}
body.light .act-map-dialog{
  background:#fbfaf7;
  border-color:#9b805f;
  box-shadow:0 20px 60px rgba(0,0,0,.38);
}
body.light .act-map-modal-head{
  color:#7a4b12;
  background:linear-gradient(180deg,#f8f4ed,#eee7dd);
  border-bottom-color:#c7bcae;
}
body.light .act-map-close{
  background:#fff;
  color:#403932;
  border-color:#b9afa3;
}
body.light .act-map-close:hover{
  background:#f0e4d3;
  color:#74470f;
}
body.light .act-map-canvas{background:#e9e3db}

@media(max-width:900px){
  body.light .badges{border-top-color:#ddd7cf}
}



/* ===== Latest entity overrides ===== */
/* Nhiệm vụ: xanh #42ff00, không bold */
.inline-quest,
body.light .inline-quest{
  color:#42ff00 !important;
  font-weight:400 !important;
}

/* Bỏ gạch chân nhưng vẫn giữ hover ảnh */
.has-hover-image,
body.light .has-hover-image{
  text-decoration:none !important;
}

/* Light mode: bảo đảm các khối không bị CSS Dark ghi đè */
body.light .act-head{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,237,231,.96)) !important;
  border-color:#c3baaf !important;
}
body.light .zone{
  background:#fff !important;
  border-color:#c8c0b6 !important;
}
body.light .zone-head{
  background:linear-gradient(90deg,#ece7e0,#f7f4ef) !important;
  border-bottom-color:#c8c0b6 !important;
}
body.light .zone-num{
  background:linear-gradient(180deg,#dfd8cf,#d5cdc3) !important;
  border-right-color:#beb5aa !important;
  color:#7c501a !important;
}
body.light .step{
  background:#fff !important;
  border-bottom-color:#ddd7cf !important;
}
body.light .step:hover{
  background:linear-gradient(90deg,#fffaf1,#fffdf9) !important;
}
body.light .step-main,
body.light .step-main .step-text{
  color:#2d2925 !important;
}
body.light .step-note{color:#655e57 !important}
body.light .check-cell{border-right-color:#ddd7cf !important}
body.light .check{
  background:#fff !important;
  border-color:#9d958b !important;
}

/* =========================================================
   LEVELING CONTENT = FONT/SIZE CỦA BẢNG CHÚ THÍCH
   ========================================================= */
.step-main,
.step-main .step-text,
.step-note{
  font-family:inherit !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
}

/* Giữ màu/highlight riêng nhưng không làm thay đổi size của nội dung */
.step-main .inline-zone,
.step-main .inline-boss,
.step-main .inline-waypoint,
.step-main .inline-quest{
  font-size:inherit !important;
  line-height:inherit !important;
}

/* Nhiệm vụ vẫn không bold */
.step-main .inline-quest,
body.light .step-main .inline-quest{
  font-weight:400 !important;
}


/* NPC: dùng màu chữ riêng, không bold */
.inline-npc{color:#d9a6ff;font-weight:400}
body.light .inline-npc{color:#7b3fa1;font-weight:400}
.step-main .inline-npc{font-size:inherit;line-height:inherit;font-weight:400 !important}

/* ===== Sticky progress/header area (desktop) =====
   Giữ phần đầu trang, tab Act, thanh tiến trình, tiêu đề Act và chú thích
   luôn nằm trong tầm nhìn khi cuộn xuống checklist. */
@media (min-width:901px){
  :root{
    --sticky-site-head:92px;
    --sticky-actbar:42px;
    --sticky-gap:10px;
    --sticky-toolbar:60px;
    --sticky-toolbar-gap:13px;
  }

  .site-head{
    position:sticky;
    top:0;
    z-index:60;
  }

  .actbar-wrap{
    top:var(--sticky-site-head);
    z-index:55;
  }

  .guide-toolbar{
    position:sticky;
    top:calc(var(--sticky-site-head) + var(--sticky-actbar) + var(--sticky-gap));
    z-index:50;
    box-shadow:0 7px 14px #0006;
  }

  .act-head{
    position:sticky;
    top:calc(var(--sticky-site-head) + var(--sticky-actbar) + var(--sticky-gap) + var(--sticky-toolbar) + var(--sticky-toolbar-gap));
    z-index:45;
    box-shadow:0 7px 14px #0005;
  }

  .sticky-card{
    top:calc(var(--sticky-site-head) + var(--sticky-actbar) + 20px);
    z-index:40;
  }
}

/* ===== Sticky gap mask fix =====
   Che phần nội dung cuộn phía sau các khoảng hở giữa tab Act,
   thanh tiến trình và tiêu đề Act khi các khối đang sticky. */
@media (min-width:901px){
  :root{ --sticky-mask-bg:#17120f; }
  body.light{ --sticky-mask-bg:#ece7df; }

  .guide-toolbar,
  .act-head{
    isolation:isolate;
  }

  .guide-toolbar::before{
    content:"";
    position:absolute;
    left:-1px;
    right:-1px;
    top:calc(-1 * var(--sticky-gap));
    height:var(--sticky-gap);
    background:var(--sticky-mask-bg);
    pointer-events:none;
    z-index:-1;
  }

  .guide-toolbar::after{
    content:"";
    position:absolute;
    left:-1px;
    right:-1px;
    bottom:calc(-1 * var(--sticky-toolbar-gap));
    height:var(--sticky-toolbar-gap);
    background:var(--sticky-mask-bg);
    pointer-events:none;
    z-index:-1;
  }
}

/* ===== Sticky gap mask precision fix =====
   Cho mask chồng lấn vài pixel để không còn khe hở 1px khi trình duyệt
   làm tròn vị trí sticky trong lúc cuộn. */
@media (min-width:901px){
  .guide-toolbar::before{
    left:-2px;
    right:-2px;
    top:calc(-1 * var(--sticky-gap) - 3px);
    height:calc(var(--sticky-gap) + 4px);
  }

  .guide-toolbar::after{
    left:-2px;
    right:-2px;
    bottom:calc(-1 * var(--sticky-toolbar-gap) - 3px);
    height:calc(var(--sticky-toolbar-gap) + 5px);
  }

  .act-head::before{
    content:"";
    position:absolute;
    left:-2px;
    right:-2px;
    top:-4px;
    height:5px;
    background:var(--sticky-mask-bg);
    pointer-events:none;
    z-index:-1;
  }
}

/* ===== Sticky layout update: chỉ phần từ menu Act trở xuống bám theo =====
   Logo / POE 2 LEVELING GUIDE / nút trên header sẽ cuộn lên bình thường.
   Menu ACT vẫn dính sát đỉnh, các khối tiến trình bên dưới giữ đúng khoảng cách. */
@media (min-width:901px){
  .site-head{
    position:relative;
    top:auto;
    z-index:auto;
  }

  .actbar-wrap{
    top:0;
    z-index:55;
  }

  .guide-toolbar{
    top:calc(var(--sticky-actbar) + var(--sticky-gap));
  }

  .act-head{
    top:calc(var(--sticky-actbar) + var(--sticky-gap) + var(--sticky-toolbar) + var(--sticky-toolbar-gap));
  }

  .sticky-card{
    top:calc(var(--sticky-actbar) + 20px);
  }
}


/* ===== Light mode softening for header/actions/active tabs ===== */
body.light .poe-mark{
  background:linear-gradient(180deg,#3a3229,#241f1a) !important;
  color:#e7c992 !important;
  border-color:#8b7358 !important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.28) !important;
}
body.light .head-actions button,
body.light .admin-link{
  background:linear-gradient(180deg,#f4eee6,#e5ddd3) !important;
  color:#5f4a35 !important;
  border-color:#b8a792 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
body.light .head-actions button:hover,
body.light .admin-link:hover{
  background:linear-gradient(180deg,#fff8ef,#eadfce) !important;
  color:#7a4d16 !important;
  border-color:#9d7b50 !important;
}
body.light .act-tab.active{
  background:linear-gradient(180deg,#6f5b46,#514130) !important;
  color:#f0d4a4 !important;
  box-shadow:inset 0 -3px #b98545 !important;
  text-shadow:none !important;
}
body.light .filter.active{
  background:linear-gradient(180deg,#6f5b46,#514130) !important;
  color:#f5e2c1 !important;
  border-color:#514130 !important;
}


/* =========================================================
   DONATE DOCK — fixed bottom-right, restored after CSS update
   ========================================================= */
.donate-dock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.donate-dock[hidden]{display:none !important}

.donate-btn{
  border:1px solid #6a4d32;
  background:linear-gradient(180deg,#2a2019,#17120f);
  color:#e8c58c;
  padding:9px 13px;
  cursor:pointer;
  font-size:12px;
  box-shadow:0 6px 18px #0007;
}
.donate-btn:hover{
  border-color:#a77640;
  color:#f5d7a5;
  background:linear-gradient(180deg,#34271e,#1d1612);
}

.donate-panel{
  width:min(430px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:14px;
  position:relative;
  padding:16px;
  border:1px solid #6a4d32;
  background:linear-gradient(180deg,#211914,#120f0d);
  color:#d9d0c3;
  box-shadow:0 16px 42px #000a;
}
.donate-panel[aria-hidden="true"]{display:none}
.donate-panel[aria-hidden="false"]{display:grid}

.donate-panel-copy strong{
  display:block;
  color:#e7c78f;
  font-size:14px;
  line-height:1.4;
  margin:0 26px 7px 0;
}
.donate-panel-copy p{
  margin:0 0 12px;
  color:#a99d8e;
  font-size:12px;
  line-height:1.45;
}
.donate-info{
  display:grid;
  gap:5px;
}
.donate-info>div{
  display:flex;
  gap:8px;
  align-items:baseline;
  font-size:12px;
}
.donate-info span{
  color:#8f8376;
  min-width:78px;
}
.donate-info b{
  color:#e2d6c5;
  word-break:break-word;
}

.donate-qr{
  width:132px;
  height:132px;
  object-fit:contain;
  background:#fff;
  border:1px solid #76563a;
  padding:4px;
  align-self:center;
}
.donate-close{
  position:absolute;
  top:7px;
  right:7px;
  width:24px;
  height:24px;
  border:1px solid #5b4332;
  background:#17110e;
  color:#b9ad9d;
  cursor:pointer;
  line-height:20px;
  padding:0;
}
.donate-close:hover{
  color:#fff;
  border-color:#9c7041;
}

/* Light mode */
body.light .donate-btn{
  background:linear-gradient(180deg,#f4eee6,#e5ddd3);
  color:#704817;
  border-color:#b89a72;
  box-shadow:0 5px 16px rgba(50,40,30,.14);
}
body.light .donate-btn:hover{
  background:linear-gradient(180deg,#fff8ef,#eadfce);
  color:#7a4d16;
  border-color:#9d7b50;
}
body.light .donate-panel{
  background:#fffdf9;
  color:#2d2925;
  border-color:#b89a72;
  box-shadow:0 16px 38px rgba(48,38,27,.22);
}
body.light .donate-panel-copy strong{color:#7a4b12}
body.light .donate-panel-copy p{color:#655e57}
body.light .donate-info span{color:#756d65}
body.light .donate-info b{color:#2d2925}
body.light .donate-close{
  background:#f3ece3;
  color:#5f4a35;
  border-color:#b8a792;
}
body.light .donate-qr{border-color:#b89a72}

@media(max-width:600px){
  .donate-dock{right:10px;bottom:10px}
  .donate-panel{
    grid-template-columns:1fr;
    width:min(360px,calc(100vw - 20px));
  }
  .donate-qr{
    width:150px;
    height:150px;
    justify-self:center;
  }
}


/* ===== DONATE BUTTON — yellow pill reference ===== */
.donate-btn,
body.light .donate-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:40px !important;
  padding:9px 18px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#ffdd00 !important;
  color:#000 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
.donate-btn:hover,
body.light .donate-btn:hover{
  background:#ffe43b !important;
  color:#000 !important;
  border:0 !important;
  transform:none !important;
}
.donate-btn span{
  font:inherit !important;
  color:inherit !important;
  font-weight:700 !important;
}


/* Online current-page counter: slightly larger */
.online-current-page, .online-count, #onlineCount, #onlineUsers {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* ===== ONLINE CURRENT PAGE — larger text =====
   Chữ +25%, riêng số online +30%. */
.online-current-page,
.online-status,
.online-counter,
#onlineCurrentPage,
#onlineStatus,
#onlineCounter{
  font-size:18.75px !important;
}
.online-current-page .online-count,
.online-status .online-count,
.online-counter .online-count,
#onlineCurrentPage .online-count,
#onlineStatus .online-count,
#onlineCounter .online-count,
#onlineCount{
  font-size:19.5px !important;
}


/* =========================================================
   COMMUNITY CHAT — compact button bottom-left
   ========================================================= */
.community-chat-dock{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.community-chat-btn,
body.light .community-chat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 16px;
  border:0;
  border-radius:999px;
  background:#ffdd00;
  color:#000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  box-shadow:none;
}
.community-chat-btn:hover,
body.light .community-chat-btn:hover{background:#ffe43b;color:#000}
.community-chat-panel{
  width:min(370px,calc(100vw - 28px));
  height:min(500px,calc(100vh - 100px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #6a4d32;
  background:linear-gradient(180deg,#211914,#120f0d);
  box-shadow:0 16px 42px #000a;
}
.community-chat-panel[aria-hidden="true"]{display:none}
.community-chat-panel[aria-hidden="false"]{display:flex}
.community-chat-head{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px 9px 13px;
  border-bottom:1px solid #49372b;
  color:#e7c78f;
}
.community-chat-head strong{font:700 14px Georgia,serif}
.community-chat-close{
  width:28px;height:28px;padding:0;border:1px solid #5b4332;background:#17110e;color:#b9ad9d;cursor:pointer;font-size:19px;line-height:1
}
.community-chat-close:hover{color:#fff;border-color:#9c7041}
.community-chat-name-row{padding:9px 10px 0}
.community-chat-name-row input,
.community-chat-form input{
  width:100%;border:1px solid #443329;background:#0e0c0a;color:#ddd1c2;padding:9px 10px;outline:none;font:inherit
}
.community-chat-name-row input:focus,
.community-chat-form input:focus{border-color:#85603a}
.community-chat-messages{
  flex:1;min-height:0;overflow:auto;margin:9px 10px 0;padding:8px;border:1px solid #352820;background:#0d0b09
}
.community-chat-message{padding:7px 2px 8px;border-bottom:1px solid #2b211b}
.community-chat-message:last-child{border-bottom:0}
.community-chat-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.community-chat-meta b{color:#e2bd7c;font-size:12px;word-break:break-word}
.community-chat-meta span{color:#6f655b;font-size:10px;flex:0 0 auto}
.community-chat-text{color:#cfc5b8;font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.community-chat-empty{color:#756b61;font-size:12px;text-align:center;padding:24px 8px}
.community-chat-form{display:grid;grid-template-columns:1fr auto;gap:7px;padding:9px 10px 4px}
.community-chat-form button{border:1px solid #6a4d32;background:#2a2019;color:#e8c58c;padding:8px 12px;cursor:pointer;font-weight:700}
.community-chat-form button:hover{border-color:#a77640;background:#34271e}
.community-chat-status{min-height:20px;padding:0 10px 7px;color:#c98779;font-size:10px}
body.light .community-chat-panel{background:#fffdf9;color:#2d2925;border-color:#b89a72;box-shadow:0 16px 38px rgba(48,38,27,.22)}
body.light .community-chat-head{color:#7a4b12;border-bottom-color:#c7bcae;background:linear-gradient(180deg,#f8f4ed,#eee7dd)}
body.light .community-chat-close{background:#f3ece3;color:#5f4a35;border-color:#b8a792}
body.light .community-chat-name-row input,
body.light .community-chat-form input{background:#fff;color:#27231f;border-color:#bdb5aa}
body.light .community-chat-messages{background:#f8f5f0;border-color:#d1c7bb}
body.light .community-chat-message{border-bottom-color:#e1d9cf}
body.light .community-chat-meta b{color:#7a4b12}
body.light .community-chat-meta span{color:#85796d}
body.light .community-chat-text{color:#2d2925}
body.light .community-chat-form button{background:#efe5d8;color:#704817;border-color:#b89a72}
@media(max-width:600px){
  .community-chat-dock{left:10px;bottom:10px}
  .community-chat-panel{width:min(360px,calc(100vw - 20px));height:min(470px,calc(100vh - 78px))}
  .community-chat-btn{min-height:38px;padding:8px 14px;font-size:13px}
}

/* ===== COMMUNITY CHAT — fresh blue accent ===== */
.community-chat-btn,
body.light .community-chat-btn{
  background:#24a8ff !important;
  color:#fff !important;
  box-shadow:0 5px 16px rgba(36,168,255,.28) !important;
}
.community-chat-btn:hover,
body.light .community-chat-btn:hover{
  background:#4bb8ff !important;
  color:#fff !important;
}
.community-chat-panel{border-color:#238fd1}
.community-chat-head{color:#70caff;border-bottom-color:#245f82}
.community-chat-meta b{color:#62c4ff}
.community-chat-form button{border-color:#238fd1;background:#147dbd;color:#fff}
.community-chat-form button:hover{border-color:#5fc5ff;background:#209eea}
.community-chat-name-row input:focus,
.community-chat-form input:focus{border-color:#35adf5}
body.light .community-chat-panel{border-color:#4aa9df}
body.light .community-chat-head{color:#0878b8;border-bottom-color:#9acde9}
body.light .community-chat-meta b{color:#0878b8}
body.light .community-chat-form button{background:#24a8ff;color:#fff;border-color:#168bd0}
body.light .community-chat-form button:hover{background:#4bb8ff;color:#fff;border-color:#168bd0}

/* ===== COMMUNITY CHAT ROOMS: Global / Trade / Gold ===== */
.community-chat-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid #245f82;
  background:#0d1820;
}
.community-chat-tab{
  min-height:36px;
  border:0;
  border-right:1px solid #203b4d;
  background:transparent;
  cursor:pointer;
  font:700 12px Arial,Helvetica,sans-serif;
  opacity:.72;
}
.community-chat-tab:last-child{border-right:0}
.community-chat-tab:hover,.community-chat-tab.active{opacity:1;background:#173247}
.community-chat-tab.active{box-shadow:inset 0 -2px currentColor}
.community-chat-tab.global{color:#fff}
.community-chat-tab.trade{color:#ff9838}
.community-chat-tab.gold{color:#ffd83d}
body.light .community-chat-tabs{background:#edf7fd;border-bottom-color:#9acde9}
body.light .community-chat-tab{border-right-color:#c4deec}
body.light .community-chat-tab:hover,body.light .community-chat-tab.active{background:#dceefa}
body.light .community-chat-tab.global{color:#252525}
body.light .community-chat-tab.trade{color:#d96500}
body.light .community-chat-tab.gold{color:#a77b00}

/* ===== CHAT PROFILE / AVATAR ===== */
.community-chat-main{display:flex;flex-direction:column;flex:1;min-height:0}
.community-chat-main[hidden],.community-chat-setup[hidden]{display:none!important}
.community-chat-setup{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:22px 18px;text-align:center}
.community-chat-setup>strong{color:#70caff;font-size:14px}
.community-chat-setup>small{color:#786f65;font-size:10px}
.community-chat-avatar-preview{width:82px;height:82px;border-radius:50%;overflow:hidden;border:2px solid #238fd1;background:#0d1820}
.community-chat-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.community-chat-avatar-pick{padding:7px 12px;border:1px solid #238fd1;color:#70caff;cursor:pointer;font-size:12px}
.community-chat-avatar-pick:hover{background:#173247}
#communityChatSetupName{width:100%;border:1px solid #443329;background:#0e0c0a;color:#ddd1c2;padding:10px;outline:none}
#communityChatSetupName:focus{border-color:#35adf5}
#communityChatJoin{width:100%;border:1px solid #238fd1;background:#147dbd;color:#fff;padding:9px 12px;cursor:pointer;font-weight:700}
#communityChatJoin:hover{background:#209eea}
.community-chat-message{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start}
.community-chat-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#1c2730;border:1px solid #2d485a}
.community-chat-bubble{min-width:0}
.community-chat-meta b{color:#fff!important}
.community-chat-messages[data-room="global"] .community-chat-text{color:#d9d0c3}
.community-chat-messages[data-room="trade"] .community-chat-text{color:#ff9838}
.community-chat-messages[data-room="gold"] .community-chat-text{color:#ffd83d}
body.light .community-chat-setup>strong{color:#0878b8}
body.light #communityChatSetupName{background:#fff;color:#27231f;border-color:#bdb5aa}
body.light .community-chat-meta b{color:#222!important}
body.light .community-chat-messages[data-room="global"] .community-chat-text{color:#222}
body.light .community-chat-messages[data-room="trade"] .community-chat-text{color:#d96500}
body.light .community-chat-messages[data-room="gold"] .community-chat-text{color:#a77b00}

/* ===== FIX FONT TIẾNG VIỆT — CHAT CỘNG ĐỒNG (LATEST) ===== */
.community-chat-head,
.community-chat-head *,
.community-chat-title,
body.light .community-chat-head,
body.light .community-chat-head *,
body.light .community-chat-title{
  font-family:Arial,Helvetica,sans-serif !important;
  letter-spacing:0 !important;
  word-spacing:0 !important;
  font-style:normal !important;
}

/* ===== CHAT — NEW MESSAGE ALERT ===== */
.community-chat-btn{position:relative}
.community-chat-btn.has-unread,
body.light .community-chat-btn.has-unread{
  animation:communityChatPulse .72s steps(2,end) infinite !important;
}
.community-chat-unread{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ff3b30;
  color:#fff;
  border:2px solid #17120f;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;
  z-index:3;
}
.community-chat-unread[hidden]{display:none !important}
body.light .community-chat-unread{border-color:#ece7df}
@keyframes communityChatPulse{
  0%,100%{
    transform:scale(1);
    background:#24a8ff !important;
    box-shadow:0 5px 16px rgba(36,168,255,.28),0 0 0 0 rgba(255,59,48,.75) !important;
  }
  50%{
    transform:scale(1.10);
    background:#ff3b30 !important;
    box-shadow:0 6px 24px rgba(255,59,48,.60),0 0 0 10px rgba(255,59,48,0) !important;
  }
}



/* ===== CHAT PANEL — ĐỒNG BỘ MÀU VỚI WEBSITE ===== */
.community-chat-panel,
body.light .community-chat-panel{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
  box-shadow:0 16px 42px #000a !important;
}
.community-chat-head,
body.light .community-chat-head{
  background:linear-gradient(#2b211a,#1c1612) !important;
  color:#e7c78f !important;
  border-bottom-color:var(--line) !important;
}
body.light .community-chat-head{
  background:var(--panel2) !important;
  color:#6f4a1e !important;
}
.community-chat-close,
body.light .community-chat-close{
  background:var(--bg) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.community-chat-tabs,
body.light .community-chat-tabs{
  background:var(--bg2) !important;
  border-bottom-color:var(--line) !important;
}
.community-chat-tab{border-right-color:var(--line2) !important}
.community-chat-tab:hover,
.community-chat-tab.active,
body.light .community-chat-tab:hover,
body.light .community-chat-tab.active{background:var(--panel2) !important}
.community-chat-messages,
body.light .community-chat-messages{
  background:var(--bg2) !important;
  border-color:var(--line2) !important;
}
.community-chat-message,
body.light .community-chat-message{border-bottom-color:var(--line2) !important}
.community-chat-name-row input,
.community-chat-form input,
#communityChatSetupName,
body.light .community-chat-name-row input,
body.light .community-chat-form input,
body.light #communityChatSetupName{
  background:var(--bg2) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.community-chat-name-row input:focus,
.community-chat-form input:focus,
#communityChatSetupName:focus{border-color:var(--gold2) !important}
.community-chat-form button,
#communityChatJoin,
body.light .community-chat-form button{
  background:var(--panel2) !important;
  color:#e8c58c !important;
  border-color:var(--gold2) !important;
}
.community-chat-form button:hover,
#communityChatJoin:hover,
body.light .community-chat-form button:hover{
  background:#34271e !important;
  border-color:var(--gold) !important;
}
body.light .community-chat-form button,
body.light #communityChatJoin{background:var(--panel2) !important;color:#704817 !important}
.community-chat-avatar-preview{background:var(--bg2) !important;border-color:var(--line) !important}
.community-chat-avatar-pick{border-color:var(--line) !important;color:var(--gold) !important}
.community-chat-avatar-pick:hover{background:var(--panel2) !important}
.community-chat-setup>strong{color:var(--gold) !important}

/* Username / role trong chat */
.community-chat-userline{display:flex;align-items:center;gap:5px;min-width:0}
.community-chat-meta .community-chat-userline b{font-size:12px;word-break:break-word}
.community-chat-meta .community-chat-userline b.role-member{color:#fff !important}
.community-chat-meta .community-chat-userline b.role-vip{color:#ffd83d !important}
.community-chat-meta .community-chat-userline b.role-moderator{color:#75c97a !important}
.community-chat-meta .community-chat-userline b.role-admin{color:#ff8678 !important}
body.light .community-chat-meta .community-chat-userline b.role-member{color:#302a25 !important}
body.light .community-chat-meta .community-chat-userline b.role-vip{color:#a77b00 !important}
body.light .community-chat-meta .community-chat-userline b.role-moderator{color:#33793a !important}
body.light .community-chat-meta .community-chat-userline b.role-admin{color:#a83f33 !important}
.community-chat-role{
  display:inline-flex;align-items:center;height:15px;padding:0 4px;border:1px solid;
  font:700 8px Arial,Helvetica,sans-serif;font-style:normal;line-height:1;letter-spacing:.2px
}
.community-chat-role.vip{color:#ffd83d;border-color:#806d20;background:#2c270e}
.community-chat-role.moderator{color:#75c97a;border-color:#3c7040;background:#132817}
.community-chat-role.admin{color:#ff8678;border-color:#82443d;background:#321814}

/* ===== DONATE TEXT MARQUEE — text moves inside yellow pill ===== */
.donate-btn{
  width:250px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  justify-content:flex-start !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.donate-btn > span{
  display:inline-block !important;
  flex:0 0 auto !important;
  padding-left:250px !important;
  animation:donateTextMarquee 7s linear infinite !important;
  will-change:transform;
}
@keyframes donateTextMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
.donate-btn:hover > span{
  animation-play-state:paused !important;
}
@media (prefers-reduced-motion:reduce){
  .donate-btn > span{animation:none !important;padding-left:18px !important}
}

/* ===== DONATE MARQUEE EDGE SPACING + remove old leading heart ===== */
.donate-btn{
  position:relative !important;
}
.donate-btn::before,
.donate-btn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:16px;
  z-index:3;
  pointer-events:none;
  background:#ffd900;
}
.donate-btn::before{left:0;border-radius:999px 0 0 999px}
.donate-btn::after{right:0;border-radius:0 999px 999px 0}
body.light .donate-btn::before,
body.light .donate-btn::after{background:#ffd900}
.donate-btn > span{
  padding-left:278px !important;
  padding-right:34px !important;
  position:relative;
  z-index:1;
}


/* ===== DONATE MARQUEE V4 — quick seamless restart ===== */
.donate-btn{
  width:250px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  justify-content:flex-start !important;
  padding-left:0 !important;
  padding-right:0 !important;
  position:relative !important;
}
.donate-btn > span{
  display:inline-block !important;
  flex:0 0 auto !important;
  padding-left:18px !important;
  padding-right:18px !important;
  position:relative !important;
  z-index:1 !important;
  animation:donateTextMarqueeV4 5.8s linear infinite !important;
  will-change:transform;
}
@keyframes donateTextMarqueeV4{
  from{transform:translateX(250px)}
  to{transform:translateX(-100%)}
}
.donate-btn:hover > span{animation-play-state:paused !important}
.donate-btn::before,.donate-btn::after{
  content:"";position:absolute;top:0;bottom:0;width:16px;z-index:3;pointer-events:none;background:#ffd900;
}
.donate-btn::before{left:0;border-radius:999px 0 0 999px}
.donate-btn::after{right:0;border-radius:0 999px 999px 0}
body.light .donate-btn::before,body.light .donate-btn::after{background:#ffd900}
@media (prefers-reduced-motion:reduce){.donate-btn > span{animation:none !important;transform:none !important;padding-left:18px !important}}


/* ===== DONATE MARQUEE V6 — mathematically seamless loop, no snap ===== */
.donate-btn{
  width:250px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  justify-content:flex-start !important;
  padding:0 !important;
  position:relative !important;
}
.donate-btn > .donate-marquee-track{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  min-width:max-content !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
  animation:donateMarqueeSeamlessV6 6.2s linear infinite !important;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.donate-btn .donate-copy{
  display:inline-block !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  padding:0 30px 0 0 !important;
  margin:0 !important;
  white-space:nowrap !important;
}
@keyframes donateMarqueeSeamlessV6{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.donate-btn:hover > .donate-marquee-track{animation-play-state:paused !important}
.donate-btn::before,.donate-btn::after{
  content:"";position:absolute;top:0;bottom:0;width:18px;z-index:3;pointer-events:none;background:#ffd900;
}
.donate-btn::before{left:0;border-radius:999px 0 0 999px}
.donate-btn::after{right:0;border-radius:0 999px 999px 0}
body.light .donate-btn::before,body.light .donate-btn::after{background:#ffd900}
@media (prefers-reduced-motion:reduce){
  .donate-btn > .donate-marquee-track{animation:none !important;transform:none !important}
  .donate-btn .donate-copy:nth-child(2){display:none !important}
}

/* ===== MID / NEUTRAL THEME — warm charcoal, between Dark and Light ===== */
body.mid{
  --bg:#24211e;--bg2:#201d1a;--panel:#2d2925;--panel2:#332e29;
  --line:#5c4b39;--line2:#665443;--text:#e8dfd2;--muted:#b9aa98;
  background:radial-gradient(circle at top,#39332d 0,#292521 34%,#211e1b 100%);color:#e8dfd2
}
body.mid .site-head{background:#211e1b;border-bottom-color:#66513b;box-shadow:0 4px 18px #0005}
body.mid .poe-mark{background:linear-gradient(#3a3026,#25211d);border-color:#8b6843;color:#edc985;box-shadow:inset 0 0 15px #0006}
body.mid .title-block h1{color:#f0cf91}body.mid .title-block p{color:#b5a28d}
body.mid .head-actions button{background:#302a25;border-color:#69533e;color:#d4c5b3}body.mid .head-actions button:hover{background:#3a312a;border-color:#a47a4c;color:#f0d19c}
body.mid .actbar-wrap{background:#2a2521;border-bottom-color:#66513b;box-shadow:0 3px 12px #0005}
body.mid .act-tab{background:#2d2824;color:#c2b29f;border-color:#554536}body.mid .act-tab:first-child{border-left-color:#554536}body.mid .act-tab:hover{background:#39312a;color:#efd09a}body.mid .act-tab.active{background:linear-gradient(#55402d,#3c3026);color:#f3cf8d;box-shadow:inset 0 -3px #c58a42}
body.mid .guide-toolbar,body.mid .zone,body.mid .side-card{background:#2d2925;border-color:#5c4b39}
body.mid .progress-copy b{color:#f0c675}body.mid .progress-copy span,body.mid .act-progress{color:#b9aa98}
body.mid .progress-track{background:#1e1b18;border-color:#574838}body.mid .progress-track div{background:linear-gradient(90deg,#9a6c34,#e0ad5d)}
body.mid .search-box input{background:#24211e;color:#eadfd2;border-color:#62503e}body.mid .search-box input:focus{border-color:#a77b49}
body.mid .filter{background:#302a25;color:#b8a997;border-color:#5d4b3a}body.mid .filter.active{background:#59432f;color:#f0c77f}
body.mid .act-head{background:linear-gradient(90deg,#3b342e,#302b27);border-color:#5c4b39}body.mid .act-head h2{color:#f0cf96}body.mid .act-head p{color:#b7a795}
body.mid .zone-head{background:linear-gradient(90deg,#40362d,#322c27);border-bottom-color:#604d3c}body.mid .zone-num{background:#2a241f;border-right-color:#68513d;color:#d5a45f}body.mid .zone-name{color:#e8c995}body.mid .zone-meta{color:#a39484}
body.mid .zone-check{background:#29241f;color:#c6b6a4;border-color:#66513e}body.mid .zone-check:hover{color:#f0d19b;border-color:#9d7449}
body.mid .step{border-bottom-color:#4a3e34}body.mid .step:hover{background:#35302b}body.mid .check-cell,body.mid .badges{border-color:#4a3e34}body.mid .check{background:#211e1b;border-color:#806449}body.mid .step.done .check{background:#c08b49;border-color:#e1b474}
body.mid .step-main,body.mid .step-main .step-text{color:#ded4c7}body.mid .step-main b{color:#f0e6d9}body.mid .step-note{color:#b0a08f}
body.mid .side-card h3{color:#e7c58c;border-color:#57473a}body.mid .side-card p{color:#c9bbab}body.mid .side-card small{color:#a99a89}body.mid .side-sep{border-color:#514237}
body.mid footer{background:#211e1b;border-top-color:#514237;color:#9f9182}
body.mid .hover-preview{background:#302b27;border-color:#8b6947;box-shadow:0 10px 28px #0007}body.mid .hover-preview-caption{color:#e5c38c}
body.mid .act-map-btn{background:#352e28;color:#e0bb7d;border-color:#775b40}body.mid .act-map-dialog{background:#302b27;border-color:#8b6947}body.mid .act-map-modal-head{color:#e5c38c;border-color:#665443}body.mid .act-map-canvas{background:#25221f}
body.mid .guide-note{color:#cfc2b4;background:rgba(99,69,83,.24)}body.mid .guide-note-tip{background:rgba(74,92,60,.23)}body.mid .guide-note-warning{background:rgba(115,72,50,.23)}body.mid .guide-note-system{background:rgba(82,65,96,.24)}


/* Header: Home shortcut + larger theme switch */
.head-actions{align-items:center}
.home-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 11px;border:1px solid #4e3a2b;background:#1c1511;color:#b9ad9d;text-decoration:none;white-space:nowrap;transition:.15s ease}
.home-link:hover{border-color:#9c7041;color:#dfc398;background:#241a14}
.home-link-icon{font-size:20px;line-height:1;transform:translateY(-1px)}
.home-link-text{font-size:12px;font-weight:600}
#themeBtn.theme-switch-btn{width:40px;height:36px;padding:0;display:inline-grid;place-items:center;font-size:24px;line-height:1;font-family:Arial,Helvetica,sans-serif}
body.mid .home-link{background:#302a25;border-color:#69533e;color:#d4c5b3}
body.mid .home-link:hover{background:#3a312a;border-color:#a47a4c;color:#f0d19c}
body.light .home-link{background:#171717;border-color:#333;color:#f4f4f4}
body.light .home-link:hover{background:#333;border-color:#000;color:#fff}
@media(max-width:700px){.home-link{padding:7px 9px}.home-link-text{display:none}.home-link-icon{font-size:21px}#themeBtn.theme-switch-btn{width:38px;height:35px;font-size:23px}}


/* ===== Back to top ===== */
.back-to-top{
  position:fixed;right:18px;bottom:70px;z-index:9997;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid #6a4d32;background:linear-gradient(180deg,#2a2019,#17120f);
  color:#e8c58c;font-size:20px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 6px 18px #0007;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{border-color:#a77640;color:#f5d7a5;background:linear-gradient(180deg,#34271e,#1d1612)}
body.mid .back-to-top{background:#302a25;border-color:#69533e;color:#e3c596}
body.light .back-to-top{background:#f4eee6;border-color:#b8a792;color:#5f4a35;box-shadow:0 5px 14px rgba(70,50,30,.18)}
@media(max-width:700px){.back-to-top{right:12px;bottom:66px;width:40px;height:40px}}


/* 2026-09-24: Leveling uses the real shared PathOfBuild header. */
.leveling-runtime-nodes{display:none!important}
body{background-image:linear-gradient(rgba(10,8,7,.80),rgba(10,8,7,.88)),url('/assets/pathofbuild-background.png')!important;background-size:cover!important;background-position:center top!important;background-attachment:fixed!important;background-repeat:no-repeat!important}
body.light{background-image:linear-gradient(rgba(238,244,248,.84),rgba(238,244,248,.90)),url('/assets/pathofbuild-background.png')!important}
body.mid{background-image:linear-gradient(rgba(28,24,20,.72),rgba(28,24,20,.82)),url('/assets/pathofbuild-background.png')!important}
/* Root header is sticky; act tabs sit directly below it. */
body>header{position:sticky!important;top:0!important;z-index:80!important}
.actbar-wrap{top:70px!important;z-index:30!important}
.leveling-progress-tools{width:min(1180px,94vw);margin:12px auto 0;display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.leveling-progress-tools button{border:1px solid #4e3a2b;background:#1c1511;color:#b9ad9d;padding:8px 11px;border-radius:7px;cursor:pointer}
.leveling-progress-tools button:hover{border-color:#9c7041;color:#dfc398}
body.light .leveling-progress-tools button{background:#eef6fb;border-color:#8daac0;color:#294f6d}
/* NEW badge on Overlay must stay below shared header. */
#mandatoryMissionLaunch{overflow:visible!important}
#mandatoryMissionLaunch .new-badge,#mandatoryMissionLaunch::after{z-index:3}
@media(max-width:900px){.actbar-wrap{top:70px!important}}

/* 2026-09-24: visual cleanup — Overlay NEW badge + continuous guide rails. */
#mandatoryMissionLaunch::before{
  top:2px!important;
  right:4px!important;
  z-index:5!important;
}
.guide-column{
  position:relative;
}
.guide-column::before,
.guide-column::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line,#5a4029);
  pointer-events:none;
  z-index:4;
}
.guide-column::before{left:0}
.guide-column::after{right:0}
\n\n/* 2026-09-24: layout cleanup — stable first paint + continuous side rails. */
.guide-column{
  position:relative;
  border-left:1px solid var(--line,#5a4029);
  border-right:1px solid var(--line,#5a4029);
}
.guide-column::before,.guide-column::after{display:none!important}
/* Keep children inside the side rails; negative margins used to paint over the rail in four spots. */
.guide-column>.guide-toolbar,
.guide-column>#actContent,
.guide-column>.loading-box{margin-left:0!important;margin-right:0!important;box-sizing:border-box}
.guide-column>.guide-toolbar{border-left:0!important;border-right:0!important}
.guide-column>#actContent{border-left:0!important;border-right:0!important}

/* Do not paint fake 0/0 progress while campaign JSON is still loading. */
.guide-column.is-loading .guide-toolbar,
.guide-column.is-loading #actContent{display:none!important}
.guide-column.is-loading{
  min-height:74px;
  background:rgba(15,12,10,.86);
}
.guide-column.is-loading .loading-box{
  min-height:74px;
  display:flex;
  align-items:center;
  padding:0 18px;
  margin-bottom:0;
  border-top:1px solid var(--line,#5a4029);
  border-bottom:1px solid var(--line,#5a4029);
  border-left:0;
  border-right:0;
  background:transparent;
}
.guide-column.is-ready .loading-box{display:none!important}
body.light .guide-column.is-loading{background:rgba(245,239,231,.94)}
body.mid .guide-column.is-loading{background:rgba(45,41,37,.94)}