/* watchlist.html (Audi 2026-10-16) · finance-family look: display hero, floating tabs, deep-dive card rows with a coloured stripe */

body.ff-wl{--wp-ink:#eef2f8;--wp-ink2:#c3cddd;--wp-ink3:#98a5bb;--wp-up:#3ddc97;--wp-down:#ff7a7a;--wp-gold:#E5C586;--wp-edge:rgba(255,255,255,.10);

  --wp-card:linear-gradient(145deg,rgba(25,34,55,.94),rgba(8,12,24,.98));--near-g:#7ad99a;--near-y:#e9c46a;

  font-family:'AK Thai','Google Sans','Sarabun','Plus Jakarta Sans',sans-serif;color:var(--wp-ink)}

html[data-theme=light] body.ff-wl{--wp-ink:#13233a;--wp-ink2:#34465f;--wp-ink3:#4a5a70;--wp-up:#0b7a4f;--wp-down:#b8321f;--wp-gold:#8a6414;--wp-edge:#a9b8cc;--wp-card:#ffffff;--near-g:#2f8a4f;--near-y:#8a6414}

.wp{width:min(1180px,100% - 32px);margin:0 auto;padding:84px 0 56px}

.wp .num{font-family:'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;font-variant-numeric:tabular-nums}

.wp .up{color:var(--wp-up)}.wp .down{color:var(--wp-down)}

.wp .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wp-hero{padding-top:20px}

.wp-lede{max-width:44ch;font-size:1.12rem;line-height:1.65;color:var(--wp-ink2);margin:0}

.wp-kpi{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;font-size:.95rem;color:var(--wp-ink2)}

.wp-kpi b{font-size:1.3rem;margin-right:4px}.wp-kpi .near{color:var(--near-y)}

html[data-theme=light] body.ff-wl .ff-title{color:#13233a}html[data-theme=light] body.ff-wl .ff-title span{color:#8a6414}html[data-theme=light] body.ff-wl .ff-eb{color:#34465f}

/* tabs float on their own (no band) */

.wp-tabs{position:sticky;top:64px;z-index:20;display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px;padding:8px 0}

.wp-tabs button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(229,197,134,.25);background:rgba(16,33,63,.94);color:var(--wp-ink);font:500 1rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.28);backdrop-filter:blur(8px)}

.wp-tabs button[aria-selected=true]{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-accent-mint)}

html[data-theme=light] .wp-tabs button{background:#fff;color:#13233a;border-color:#a9b8cc;box-shadow:0 6px 16px rgba(20,35,60,.12)}

html[data-theme=light] .wp-tabs button[aria-selected=true]{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-accent-mint)}

.wp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--wp-ink2);margin-bottom:8px}

.wp-legend b{color:var(--wp-ink);font-weight:600}

.wp-rule{font-size:.86rem;color:var(--wp-ink3);margin:0 0 14px}

.wp-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:10px}

.wp-chips{display:flex;flex-wrap:wrap;gap:6px}

.wp-chips button{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--wp-edge);background:transparent;color:var(--wp-ink2);font:500 .9rem var(--aku-font-body);cursor:pointer}

.wp-chips button[aria-pressed=true]{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-accent-mint)}

html[data-theme=light] .wp-chips button[aria-pressed=true]{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-accent-mint)}

.wp-sel{display:flex;flex-wrap:wrap;gap:8px}

.wp-sel input,.wp-sel select,.wp-add input{min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:inherit;color-scheme:dark}

html[data-theme=light] .wp-sel input,html[data-theme=light] .wp-sel select,html[data-theme=light] .wp-add input{background:#fff;color-scheme:light}

.wp-count{font-size:.86rem;color:var(--wp-ink3);margin:0 0 6px}

/* rows = deep-dive card + coloured stripe */

.wp-list{display:grid;gap:8px}

.wp-row{--acc:#7ab7f0;position:relative;display:grid;grid-template-columns:34px minmax(0,1.6fr) repeat(4,minmax(0,1fr)) auto;gap:6px 14px;align-items:center;padding:12px 14px 12px 17px;border-radius:14px;border:1px solid var(--wp-edge);background:var(--wp-card);overflow:hidden}

.wp-row::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc)}

.wp-row:has(.buy.in){--acc:var(--wp-up)}.wp-row:has(.buy.near-g){--acc:var(--near-g)}.wp-row:has(.buy.near-y){--acc:var(--near-y)}

.wp-logo{width:34px;height:34px;border-radius:10px;background:#fff;object-fit:contain;padding:2px}

.wp-logo.fb{display:grid;place-items:center;background:#132650;color:#E5C586;font:700 .8rem 'AK Thai','Google Sans','Outfit',sans-serif}

.wp-row .nm{min-width:0}

.wp-row .nm b{font:700 1.05rem 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;margin-right:8px}

.wp-row .nm small{display:block;font-size:.82rem;color:var(--wp-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wp-row .deep{font:500 .8rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-gold);text-decoration:none}

.wp-row .deep:hover{text-decoration:underline}

.tgs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

.tg{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font:500 .74rem/1.6 'AK Thai','Google Sans','Sarabun',sans-serif;background:rgba(255,255,255,.06);color:var(--wp-ink2);white-space:nowrap}

.tg.star{background:rgba(229,197,134,.16);color:var(--wp-gold)}.tg.hot{background:rgba(255,120,80,.16);color:#ffab8a}

.tg.long{background:rgba(122,183,240,.14);color:#9cc8f5}.tg.swing{background:rgba(169,154,232,.16);color:#c3b8f2}

.tg.acc{background:rgba(61,220,151,.14);color:var(--wp-up)}.tg.warn{background:rgba(233,196,106,.14);color:var(--near-y)}

.tg.audi{background:rgba(229,197,134,.12);color:var(--wp-gold)}

html[data-theme=light] .tg.hot{color:#a2401c}html[data-theme=light] .tg.long{color:#1d5fa8}html[data-theme=light] .tg.swing{color:#5a46b0}

.wp-row .c{display:grid;gap:1px;min-width:0}

.wp-row .c small{font-size:.74rem;color:var(--wp-ink3)}

.wp-row .c b{font-size:1rem;font-weight:600}.wp-row .c b em{font-style:normal;font-size:.82rem;color:var(--wp-ink3)}

.wp-row .c i{font-style:normal;font-size:.8rem;color:var(--wp-ink3)}

.wp-row .buy.in i{color:var(--wp-up);font-weight:600}.wp-row .buy.near-g i{color:var(--near-g);font-weight:600}.wp-row .buy.near-y i{color:var(--near-y);font-weight:600}

.wp-row .c i.up{color:var(--wp-up)}.wp-row .c i.down{color:var(--wp-down)}

.tr{display:inline-flex;align-self:start;padding:2px 9px;border-radius:999px;font:500 .82rem 'AK Thai','Google Sans','Sarabun',sans-serif;white-space:nowrap}

.tr.up{background:rgba(61,220,151,.14);color:var(--wp-up)}.tr.side{background:rgba(255,255,255,.07);color:var(--wp-ink2)}.tr.down{background:rgba(255,122,122,.14);color:var(--wp-down)}.tr.none{color:var(--wp-ink3)}

html[data-theme=light] .tr.side{background:#eef3fa}

.wp-row input{width:100%;min-height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:600 .95rem 'AK Thai','Google Sans','Outfit',sans-serif;color-scheme:dark}

html[data-theme=light] .wp-row input{background:#fff;color-scheme:light}

.wp-copy,.wp-del{min-height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(229,197,134,.4);background:rgba(229,197,134,.1);color:var(--wp-ink);font:500 .86rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer;white-space:nowrap}

.wp-copy.on{border-color:var(--wp-edge);background:transparent;color:var(--wp-ink3)}

.wp-del{border-color:rgba(255,122,122,.35);background:rgba(255,122,122,.08)}

.wp-empty{padding:18px;border-radius:14px;border:1px dashed var(--wp-edge);color:var(--wp-ink2);text-align:center}

.wp-empty.big p{margin:4px 0}

.wp-add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;padding:14px;border-radius:16px;border:1px solid var(--wp-edge);background:var(--wp-card)}

.wp-add label{display:grid;gap:4px;font-size:.84rem;color:var(--wp-ink2)}

.wp-add button,.wp-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--wl-border-mint);background:var(--wl-mint);color:var(--wl-ink);font:600 .95rem var(--aku-font-body);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}

html[data-theme=light] .wp-add button,html[data-theme=light] .wp-btn{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-border-mint)}

.wp-disc{margin-top:12px;font-size:.84rem;color:var(--wp-ink3)}

.wp-soon{display:flex;gap:20px;align-items:center;padding:22px;border-radius:20px;border:1px solid rgba(229,197,134,.35);background:var(--wp-card)}

.wp-soon img{width:120px;height:120px;object-fit:contain;flex:none}

.wp-soon h2{margin:6px 0;font:700 1.5rem/1.35 'AK Thai','Google Sans','Sarabun',sans-serif}.wp-soon p{color:var(--wp-ink2);line-height:1.65;margin:6px 0}

.wp-toast{position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:60;display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;background:#10213f;border:1px solid rgba(229,197,134,.45);color:#eef2f8;box-shadow:0 14px 34px rgba(0,0,0,.4);max-width:calc(100% - 32px)}

.wp-toast[hidden]{display:none}

.wp-toast button{min-height:34px;padding:0 10px;border-radius:10px;border:1px solid #E5C586;background:transparent;color:#E5C586;font:500 .86rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

@media (max-width:980px){.wp-row{grid-template-columns:34px repeat(3,minmax(0,1fr));grid-template-areas:"lg nm nm nm" "px px buy tgt" "trd trd act act"}.wp-row>.wp-logo{grid-area:lg}.wp-row .nm{grid-area:nm}.wp-row .px{grid-area:px}.wp-row .buy{grid-area:buy}.wp-row .tgt{grid-area:tgt}.wp-row .trd{grid-area:trd;display:flex;gap:8px;align-items:center}.wp-row .wp-copy,.wp-row .wp-del{grid-area:act;justify-self:end}}

@media (max-width:560px){.wp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nm nm" "px buy" "tgt trd" "act act"}.wp-row>.wp-logo{display:none}.wp-row .wp-copy,.wp-row .wp-del{justify-self:stretch}.wp-soon{flex-direction:column;text-align:center}.wp-tabs button{padding:0 12px;font-size:.92rem}}

@media (prefers-reduced-motion:reduce){.wp *{transition:none!important}}

.wp-note{margin:8px 0 0;font-size:.86rem;color:var(--wp-ink3)}

.wp-legend [hidden]{display:none}



/* phase 2: owner editing + request board */

.wp-own{margin:6px 0 12px;padding:12px 14px;border-radius:16px;border:1px dashed rgba(229,197,134,.5)}

.wp-own .wp-add{margin:8px 0}

.wp-edit{min-height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(229,197,134,.5);background:rgba(229,197,134,.12);color:var(--wp-ink);font:500 .86rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-ed{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--wp-edge)}

.wp-ed label{display:grid;gap:4px;font-size:.8rem;color:var(--wp-ink2)}

.wp-ed label.full{grid-column:1/-1}

.wp-ed input,.wp-ed select{min-height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:inherit;color-scheme:dark}

html[data-theme=light] .wp-ed input,html[data-theme=light] .wp-ed select{background:#fff;color-scheme:light}

.wp-ed .cks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 16px}

.wp-ed .ck{display:flex;align-items:center;gap:6px;font-size:.92rem;color:var(--wp-ink)}

.wp-ed .ck input{min-height:0;width:18px;height:18px}

.wp-ed .acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}

.wp-ghost,.wp-danger{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--wp-edge);background:transparent;color:var(--wp-ink);font:500 .92rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-danger{border-color:rgba(255,122,122,.45);color:var(--wp-down);margin-left:auto}

.wp-btn.sm,.wp-ghost.sm{min-height:36px;padding:0 12px;font-size:.86rem}

.wp-req{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 90px auto;gap:12px;align-items:center;padding:12px 14px 12px 17px;border-radius:14px;border:1px solid var(--wp-edge);background:var(--wp-card);overflow:hidden}

.wp-req::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:#e5c586}

.wp-req.done::before{background:var(--wp-up)}.wp-req.declined{opacity:.8}.wp-req.declined::before{background:#9aa6bd}

.wp-req .nm b{font:700 1.02rem 'AK Thai','Google Sans','Outfit',sans-serif}.wp-req .nm small{display:block;font-size:.84rem;color:var(--wp-ink2)}

.wp-req .cnt{display:grid;text-align:center}.wp-req .cnt b{font-size:1.2rem}.wp-req .cnt small{font-size:.74rem;color:var(--wp-ink3)}

.wp-req .own{display:flex;gap:6px}.wp-req .st{font-size:.84rem;color:var(--wp-ink2)}

.wp-vote{min-height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(229,197,134,.45);background:rgba(229,197,134,.1);color:var(--wp-ink);font:500 .86rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-vote.on{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-border-mint)}

html[data-theme=light] .wp-vote.on{background:var(--wl-mint);color:var(--wl-ink);border-color:var(--wl-border-mint)}

.wp-sub{margin:14px 0 4px;font:600 .92rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink2)}

#wp-req-list{margin-top:14px}

.wp-add label.grow{flex:1 1 260px}.wp-add label.grow input{width:100%}

@media (max-width:760px){.wp-ed{grid-template-columns:repeat(2,minmax(0,1fr))}.wp-req{grid-template-columns:34px minmax(0,1fr) 70px;grid-template-areas:"lg nm cnt" "act act act"}.wp-req>.wp-logo{grid-area:lg}.wp-req .nm{grid-area:nm}.wp-req .cnt{grid-area:cnt}.wp-req>button,.wp-req .own,.wp-req .st{grid-area:act}}



/* 💛 หุ้นในดวงใจ from the watchlist (Audi 2026-10-17) */

.wp-row .acts2{display:flex;gap:6px;justify-self:end}

.wp-fav{min-height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,143,166,.45);background:rgba(255,143,166,.08);color:var(--wp-ink);font:500 .86rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer;white-space:nowrap}

.wp-fav.on{border-color:#ff8fa6;background:linear-gradient(135deg,rgba(255,143,166,.32),rgba(255,92,138,.18));box-shadow:0 0 14px rgba(255,92,138,.25)}

.wp-fav:hover{border-color:#ff8fa6}

.wp-favline{grid-column:1/-1;margin:2px 0 0;font-size:.86rem;color:var(--wp-ink2);overflow-wrap:anywhere}

.wp-favbox{grid-column:1/-1;display:grid;gap:10px;margin-top:10px;padding:14px;border-radius:14px;border:1px solid rgba(255,143,166,.45);background:linear-gradient(160deg,rgba(255,143,166,.12),rgba(8,12,24,.4))}

.wp-favbox .hd{margin:0;font-size:.92rem;color:var(--wp-ink2);line-height:1.5}

.wp-favbox .hd b{color:var(--wp-ink)}

.wp-favbox .bks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.wp-favbox .bks button{display:grid;gap:2px;justify-items:center;padding:9px 6px;border-radius:12px;border:1.5px solid var(--wp-edge);background:rgba(8,12,24,.5);color:var(--wp-ink2);font:500 .9rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-favbox .bks button small{font-size:.74rem;color:var(--wp-ink3,#9fabbf)}

.wp-favbox .bks button[aria-pressed=true]{border-color:#E5C586;color:var(--wp-ink);background:rgba(229,197,134,.16)}

.wp-favbox .bks button:disabled{border-style:dashed;cursor:not-allowed}

.wp-favbox .chips{display:flex;flex-wrap:wrap;gap:6px}

.wp-favbox .chips button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(229,197,134,.3);background:rgba(229,197,134,.08);color:var(--wp-ink2);font:500 .84rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-favbox textarea{width:100%;min-height:64px;padding:10px 12px;border-radius:12px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:400 .95rem/1.55 'AK Thai','Google Sans','Sarabun',sans-serif;resize:vertical;color-scheme:dark}

.wp-favbox .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.wp-favbox .acts a{text-decoration:none;display:inline-flex;align-items:center}

#wp-toast a{color:#E5C586;margin-left:6px}

@media (max-width:980px){.wp-row .acts2{grid-area:act}}

@media (max-width:560px){.wp-row .acts2{justify-self:stretch}.wp-row .acts2 button{flex:1}.wp-favbox .bks{grid-template-columns:1fr}}

html[data-theme=light] .wp-favbox{background:linear-gradient(160deg,#fff0f3,#fff);border-color:#f2a7b8}

html[data-theme=light] .wp-favbox textarea,html[data-theme=light] .wp-favbox .bks button{background:#fff;color:#13233a;color-scheme:light}

html[data-theme=light] .wp-fav{background:#fff5f7;color:#13233a}

html[data-theme=light] .wp-fav.on{background:#ffe1e8}

@media (min-width:981px){.wp-row .acts2{flex-direction:column;align-items:stretch}.wp-row .acts2 button{min-height:34px}}

html[data-theme=light] .wp-favbox .bks button[aria-pressed=true]{background:#fff1d2;border-color:#b8862b;color:#13233a;box-shadow:0 0 0 2px rgba(184,134,43,.25)}

.wp-row .nm{min-width:0}.wp-row .nm .tgs{flex-wrap:wrap}.wp-row .nm .tg.audi{white-space:normal;overflow-wrap:anywhere;line-height:1.45}



/* hero breathing room + stat tiles (Audi 2026-10-17: "ตัวหนังสือมันกองกันเกินไป … ตัวเลขบอก stat ทำอย่างกับเป็นช่องตัวอักษรเนื้อหาธรรมดา") */

.wp-hero{padding-top:28px;padding-bottom:12px}

.wp-lede{line-height:1.8;margin:6px 0 0}

.wp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0 0;font-size:1rem}

.wp-stat{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic n" "lab lab";align-items:center;gap:6px 10px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.13);text-align:left;cursor:pointer;color:var(--wp-ink);

  background:linear-gradient(145deg,rgba(42,64,104,.75),rgba(14,22,44,.92));box-shadow:0 12px 28px rgba(0,0,0,.25);transition:translate .15s,border-color .15s}

.wp-stat:hover{translate:0 -2px;border-color:var(--sc,#E5C586)}

.wp-stat .ic{grid-area:ic;font-size:1.3rem}

.wp-stat b{grid-area:n;margin:0;font:800 1.45rem 'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif;color:var(--sc,#eef2f8)}

.wp-stat small{grid-area:lab;font-size:.9rem;line-height:1.45;color:var(--wp-ink2)}

.wp-stat.good{--sc:#4fd39a}.wp-stat.near{--sc:#f2c94c}.wp-stat.star{--sc:#E5C586}

.wp-note{margin:18px 0 0;line-height:1.6}

html[data-theme=light] .wp-stat{background:#fff;border-color:#c9d3e2;border-bottom-width:4px;box-shadow:0 8px 20px rgba(20,35,60,.06)}

html[data-theme=light] .wp-stat.good{--sc:#13804f}html[data-theme=light] .wp-stat.near{--sc:#9a6b00}html[data-theme=light] .wp-stat.star{--sc:#8a6414}html[data-theme=light] .wp-stat.all{--sc:#13233a}

@media (max-width:560px){.wp-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.wp-stat{padding:14px}.wp-stat b{font-size:1.05rem}}

@media (min-width:900px){.wp-kpi{grid-template-columns:repeat(5,minmax(0,1fr))}}

.wp-kpi .wp-stat b.num{font-family:'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif;font-size:1.45rem;font-weight:800;letter-spacing:-0.02em}@media (max-width:560px){.wp-kpi .wp-stat b.num{font-size:1.25rem}}



/* 🙋 request tab with room to breathe (Audi 2026-10-17: "จัด layout ให้ดีด้วย กล่องข้างในอย่างชิดกันเกินไป") */

.wp-rq{display:grid;gap:24px;padding:28px;border-radius:24px;border:1px solid rgba(229,197,134,.35);background:linear-gradient(145deg,rgba(42,64,104,.6),rgba(14,22,44,.9));box-shadow:0 16px 40px rgba(0,0,0,.25)}

.wp-rq-hd{display:flex;align-items:center;gap:18px}

.wp-rq-hd img{width:96px;height:96px;object-fit:contain;flex:none}

.wp-rq-hd h2{margin:8px 0 0;font:700 clamp(1.4rem,2.6vw,1.9rem)/1.3 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-rq-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.wp-rq-steps li{display:grid;gap:6px;padding:18px;border-radius:18px;background:rgba(8,14,30,.45);border:1px solid rgba(255,255,255,.1)}

.wp-rq-steps .ic{font-size:1.5rem}

.wp-rq-steps b{font:600 1rem/1.45 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-rq-steps small{font-size:.9rem;line-height:1.5;color:var(--wp-ink2)}

.wp-rq-box{padding:22px;border-radius:18px;border:1px dashed rgba(229,197,134,.45);background:rgba(229,197,134,.06)}

#wp-req-login p{margin:0 0 14px;color:var(--wp-ink2);line-height:1.6}

.wp-rq-form{display:grid;grid-template-columns:minmax(160px,.6fr) minmax(0,1.4fr) auto;gap:16px;align-items:end}

.wp-rq-form label{display:grid;gap:8px;font:500 .92rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-rq-form label small{font-weight:400;color:var(--wp-ink3)}

.wp-rq-form input{min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:inherit;color-scheme:dark;width:100%}

.wp-rq-form .wp-btn{min-height:48px}

.wp-rq-list-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:30px 0 14px;font:600 1.15rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-rq-list-h small{font:400 .88rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink3)}

#wp-req-list{display:grid;gap:12px;margin-top:0}

.wp-req{padding:16px 18px 16px 20px;gap:16px}

@media (max-width:760px){.wp-rq{padding:20px;gap:20px}.wp-rq-steps{grid-template-columns:1fr}.wp-rq-form{grid-template-columns:1fr}.wp-rq-hd img{width:72px;height:72px}}

html[data-theme=light] .wp-rq{background:#fff;border-color:#c9d3e2;box-shadow:0 10px 26px rgba(20,35,60,.06)}

html[data-theme=light] .wp-rq-steps li{background:#f6f8fc;border-color:#dfe5ef}

html[data-theme=light] .wp-rq-box{background:#fffaf0;border-color:#d9c08a}

html[data-theme=light] .wp-rq-form input{background:#fff;color-scheme:light}

.wp-rq-form[hidden],#wp-req-login[hidden]{display:none}



/* Member queue editors: readable fields, open layout, existing button system. */

.wq-row{display:grid;gap:16px;min-width:0;padding:24px 0;border-bottom:1px solid var(--wp-edge);color:var(--wp-ink);font:400 1rem/1.65 var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif);overflow-wrap:anywhere}

.wq-row :is(p,h3){margin:0}

.wq-row h3{font:600 1.125rem/1.6 var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)}

.wq-row small{font-size:.875rem;color:var(--wp-ink2)}

.wq-row .wq-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 16px}

.wq-edit{display:grid;gap:20px;min-width:0;margin-top:8px;font:inherit}

.wq-edit label{display:grid;gap:8px;min-width:0;color:var(--wp-ink);font-weight:500}

.wq-edit :is(input,select,textarea){box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--wp-ink3);border-radius:10px;background:var(--wp-card);color:var(--wp-ink);font:inherit;line-height:1.6;color-scheme:dark}

.wq-edit :is(input,textarea)::placeholder{color:var(--wp-ink2);opacity:1}

.wq-edit textarea{resize:vertical}

.wq-edit :is(input,select,textarea):focus-visible,.wq-actions :is(button,a):focus-visible{outline:2px solid var(--wp-gold);outline-offset:3px}

.wq-edit fieldset{display:grid;gap:16px;min-width:0;margin:0;padding:0;border:0}

.wq-edit legend{margin-bottom:16px;padding:0;color:var(--wp-ink);font-weight:600}

.wq-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px}

.wq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

.wq-actions :is(button,a){min-height:44px;padding-block:10px;font:500 1rem/1.6 var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)}

html[data-theme=light] .wq-edit :is(input,select,textarea){color-scheme:light}

@media(max-width:760px){.wq-range{grid-template-columns:minmax(0,1fr)}}

@media (max-width:760px){.wp-rq-steps li{grid-template-columns:36px 1fr;grid-template-areas:"ic b" "ic s";gap:2px 12px;padding:14px 16px;align-items:center}.wp-rq-steps .ic{grid-area:ic}.wp-rq-steps b{grid-area:b}.wp-rq-steps small{grid-area:s}}



/* 🗂️ grouped lanes of logo tiles + centre peek (Audi 2026-10-17) */

.wp-countbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:18px 0 12px}

.wp-countbar .wp-count{margin:0}

.wp-view{display:inline-flex;padding:4px;border-radius:999px;background:rgba(8,14,30,.55);border:1px solid rgba(255,255,255,.12)}

.wp-view button{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--wp-ink2);font:500 .9rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-view button[aria-pressed=true]{background:linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));color:var(--wl-ink, rgb(15, 23, 42));font-weight:700;box-shadow:inset 0 1px 0 var(--aku-paper), 0 0 0 1.5px rgba(16, 185, 129, 0.48)}

html[data-theme=light] .wp-view button[aria-pressed=true]{background:linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));color:var(--wl-ink, rgb(15, 23, 42));box-shadow:inset 0 1px 0 var(--aku-paper), 0 0 0 1.5px rgba(16, 185, 129, 0.48)}

.wp-lanes{display:grid;gap:18px}

.wp-lane{padding:18px 20px 20px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(42,64,104,.55),rgba(14,22,44,.9));box-shadow:0 14px 34px rgba(0,0,0,.22);--lc:#9aa6bd}

.wp-lane.in{--lc:#4fd39a;border-color:rgba(79,211,154,.4)}.wp-lane.near{--lc:#f2c94c;border-color:rgba(242,201,76,.35)}.wp-lane.far{--lc:#7ab7f0}

.wp-lane-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;padding:0;border:0;background:none;color:var(--wp-ink);text-align:left;cursor:pointer}

.wp-lane-h .ic{font-size:1.3rem}

.wp-lane-h b{font:600 1.15rem 'AK Thai','Google Sans','Sarabun',sans-serif}

.wp-lane-h .n{min-width:40px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--lc) 22%,transparent);color:var(--lc);font:800 .95rem 'JetBrains Mono',monospace;text-align:center}

.wp-lane-h small{font-size:.86rem;color:var(--wp-ink3)}

.wp-lane-h .car{margin-left:auto;color:var(--wp-ink3)}

.wp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:16px}

.wp-tile{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 8px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(8,14,30,.5);color:var(--wp-ink);cursor:pointer;transition:translate .15s,border-color .15s}

.wp-tile:hover,.wp-tile:focus-visible{translate:0 -2px;border-color:var(--lc)}

.wp-tile .wp-logo{width:42px;height:42px}

.wp-tile b{font:700 .98rem 'AK Thai','Google Sans','Outfit',sans-serif}

.wp-tile small{font-size:.8rem;color:var(--lc);font-weight:600;line-height:1.3;text-align:center}

.wp-lane.far .wp-tile small,.wp-lane.none .wp-tile small{color:var(--wp-ink2);font-weight:500}

.wp-tile .tri{position:absolute;top:6px;left:8px;font-style:normal;font-size:.85rem}

.wp-tile .st{position:absolute;top:6px;right:8px;font-style:normal;font-size:.85rem}

.wp-more{display:block;width:100%;margin-top:12px;min-height:42px;border-radius:12px;border:1px dashed rgba(255,255,255,.2);background:none;color:var(--wp-ink2);font:500 .9rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-peek{width:min(980px,calc(100% - 24px));padding:0;border:1px solid rgba(229,197,134,.45);border-radius:22px;background:linear-gradient(145deg,#1d2a48,#0a1020);color:var(--wp-ink);box-shadow:0 30px 80px rgba(0,0,0,.55);position:fixed;inset:0;margin:auto;height:fit-content;max-height:86vh;overflow:auto}

.wp-peek::backdrop{background:rgba(3,7,18,.72);backdrop-filter:blur(4px)}

.wp-peek-x{position:sticky;top:8px;float:right;margin:8px 8px 0 0;min-width:44px;min-height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:inherit;font-size:1.2rem;cursor:pointer;z-index:2}

.wp-peek-in{padding:20px 20px 22px}

.wp-peek-in .wp-row{border:0;background:none;box-shadow:none;padding:6px 0}

.wp-peek-in .wp-row::before{display:none}

@media (max-width:560px){.wp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wp-tile{padding:12px 4px 10px}.wp-tile .wp-logo{width:36px;height:36px}.wp-lane{padding:16px}.wp-countbar{flex-direction:column;align-items:stretch}.wp-view{justify-content:stretch}.wp-view button{flex:1}}

html[data-theme=light] .wp-view{background:#fff;border-color:#c9d3e2}

html[data-theme=light] .wp-lane{background:#fff;border-color:#c9d3e2;box-shadow:0 8px 22px rgba(20,35,60,.06)}

html[data-theme=light] .wp-lane.in{--lc:#13804f;border-color:#9ed8bb}html[data-theme=light] .wp-lane.near{--lc:#9a6b00;border-color:#e8d08a}html[data-theme=light] .wp-lane.far{--lc:#2a5da8}

html[data-theme=light] .wp-tile{background:#f6f8fc;border-color:#dfe5ef}

html[data-theme=light] .wp-peek{background:#fff;color:#13233a;border-color:#d9c08a}

html[data-theme=light] .wp-peek-x{background:#eef2f8}

.wp-tile .wp-logo,.wp-tile .wp-logo.fb{display:grid;place-items:center;width:42px;height:42px;min-height:42px;margin:0;padding:0;border-radius:12px;font-size:.78rem;line-height:1}@media (max-width:560px){.wp-tile .wp-logo,.wp-tile .wp-logo.fb{width:36px;height:36px;min-height:36px}}.wp-tile{align-content:start}



/* group-by switch + tag chips (Audi 2026-10-17) */

.wp-countbar{align-items:center}

.wp-gb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;flex:1 1 100%;order:3}

.wp-gb[hidden]{display:none}

.wp-gb span{font-size:.88rem;color:var(--wp-ink3);margin-right:4px}

.wp-gb button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,14,30,.5);color:var(--wp-ink2);font:500 .88rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.wp-gb button[aria-pressed=true]{border-color:#E5C586;background:rgba(229,197,134,.18);color:var(--wp-ink);font-weight:600}

.wp-lane.star,.wp-lane.hot{--lc:#E5C586}.wp-lane.acc{--lc:#4fd39a}.wp-lane.up{--lc:#4fd39a}.wp-lane.down{--lc:#f0776b}.wp-lane.side{--lc:#f2c94c}.wp-lane.core{--lc:#7ab7f0}.wp-lane.growth{--lc:#b18cff}.wp-lane.spec{--lc:#f06fd0}.wp-lane.unres{--lc:#9aa6bd}

.wp-lane.rest .wp-tile small,.wp-lane.nocat .wp-tile small,.wp-lane.notr .wp-tile small{color:var(--wp-ink2)}

.wp-own{padding:20px;border-radius:20px}

.wp-ownf{display:grid;gap:16px;margin-top:12px}

.wp-ownf .row1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.wp-ownf label{display:grid;gap:6px;font:500 .9rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-ownf label small{font-weight:400;color:var(--wp-ink3)}

.wp-ownf input{min-height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--wp-edge);background:rgba(8,12,24,.9);color:var(--wp-ink);font:inherit;color-scheme:dark;width:100%}

.wp-ownf .wp-btn{justify-self:start;min-height:48px}

.wp-tags{display:grid;gap:12px}

.wp-tags .grp{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;align-items:center}

.wp-tags .grp>span{font:500 .88rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink2)}

.wp-tags .grp>div{display:flex;flex-wrap:wrap;gap:8px}

.tgc{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(8,14,30,.5);color:var(--wp-ink2);font:500 .88rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.tgc[aria-pressed=true]{border-color:#E5C586;background:rgba(229,197,134,.2);color:var(--wp-ink);font-weight:600;box-shadow:0 0 0 2px rgba(229,197,134,.18)}

.wp-ed .full{grid-column:1/-1}

@media (max-width:640px){.wp-ownf .row1{grid-template-columns:1fr}.wp-tags .grp{grid-template-columns:1fr}}

html[data-theme=light] .wp-gb button,html[data-theme=light] .tgc{background:#fff;border-color:#c9d3e2;color:#34465f}

html[data-theme=light] .wp-gb button[aria-pressed=true],html[data-theme=light] .tgc[aria-pressed=true]{background:#fff1d2;border-color:#b8862b;color:#13233a}

html[data-theme=light] .wp-ownf input{background:#fff;color-scheme:light}

html[data-theme=light] .wp-lane.star,html[data-theme=light] .wp-lane.hot{--lc:#8a6414}html[data-theme=light] .wp-lane.up,html[data-theme=light] .wp-lane.acc{--lc:#13804f}html[data-theme=light] .wp-lane.down{--lc:#b3261e}html[data-theme=light] .wp-lane.side{--lc:#9a6b00}

[hidden].wp-btn,.wp-btn[hidden],.wp-ghost[hidden]{display:none!important}



/* tiles with price · peek extras · request badge (Audi 2026-10-17) */

.wp-tile .pp{display:grid;gap:1px;justify-items:center;margin-top:2px;font-size:.78rem;line-height:1.3}

.wp-tile .pp .num{font-weight:700;color:var(--wp-ink)}

.wp-tile .pp em{font-style:normal;color:var(--wp-ink3)}

#wp-filters button b{margin-left:4px;padding:0 7px;border-radius:999px;background:rgba(229,197,134,.16);font-size:.76rem}

#wp-filters button[aria-pressed=true] b{background:rgba(229,197,134,.22);color:#f2dca6}

#wp-filters button[hidden]{display:none}

.wp-peek-fav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 4px}

.wp-peek-fav small{font-size:.84rem;color:var(--wp-ink3)}

.wp-peek .wp-favbox{margin-top:10px}

.wp-peek .akd{margin-top:6px}

.wp-tabs [data-tab]{position:relative}

.wp-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--wp-ink);font:700 .76rem 'AK Thai','Google Sans','Outfit',sans-serif}

.wp-badge[hidden]{display:none}

.wp-badge.alert{background:#ff4d5e;color:#fff;box-shadow:0 0 0 3px rgba(255,77,94,.25);animation:wpPing 2s ease-in-out infinite}

@keyframes wpPing{0%,70%,100%{box-shadow:0 0 0 3px rgba(255,77,94,.25)}85%{box-shadow:0 0 0 7px rgba(255,77,94,0)}}

@media (prefers-reduced-motion:reduce){.wp-badge.alert{animation:none}}

html[data-motion=paused] .wp-badge.alert,body.paused .wp-badge.alert{animation:none}

html[data-theme=light] .wp-badge{background:#e3e8f0;color:#13233a}

html[data-theme=light] .wp-badge.alert{background:#d92d3c;color:#fff}



/* 📊 summary · 🤖 AI tags · 🔔 Discord · 📜 options (moved from macro.html, Audi 2026-10-17) */

.ws{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin:16px 0 18px}

.ws:empty{display:none}

.ws-donut{display:flex;align-items:center;gap:20px;padding:18px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(42,64,104,.55),rgba(14,22,44,.9))}

.donut{width:140px;height:140px;flex:none}

.d-num{fill:var(--wp-ink);font:700 28px 'AK Thai','Google Sans','Sarabun',sans-serif}.d-lab{fill:var(--wp-ink3);font:500 13px 'AK Thai','Google Sans','Sarabun',sans-serif}

.ws-leg{list-style:none;margin:0;padding:0;flex:1;display:grid;gap:6px;font-size:.9rem;min-width:0}

.ws-leg li{display:flex;align-items:center;gap:8px}.ws-leg li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wp-ink2)}

.ws-leg .sw{width:10px;height:10px;border-radius:3px;flex:none}.ws-leg b{font:600 .9rem 'AK Thai','Google Sans','Sarabun',sans-serif}.ws-leg .muted{color:var(--wp-ink3)}

.ws-side{display:grid;gap:12px;align-content:start}

.ws-stat{display:grid;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(8,14,30,.45)}

.ws-stat.warn{border-color:rgba(242,201,76,.5)}

.ws-stat>span{font:500 .85rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink3)}.ws-stat>b{font:700 1.2rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.ws-stat em{font-style:normal;font-size:.86rem;line-height:1.5;color:var(--wp-ink2)}

.ai-stack{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px}.ai-stack i{display:block;height:100%}

.ai-stack .hi,.ai-tag.hi{background:rgba(240,133,122,.8)}.ai-stack .mid,.ai-tag.mid{background:rgba(226,201,143,.7)}.ai-stack .lo,.ai-tag.lo{background:rgba(77,210,160,.7)}

.hi-t{color:#f0857a}.mid-t{color:#E5C586}.lo-t{color:#4fd39a}

.ai-tag{display:inline-block;margin:2px 4px 0 0;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px;color:#10131d;white-space:nowrap}

.wp-tile .aib{position:absolute;bottom:6px;left:8px;font-style:normal;font-size:.8rem}

.wp-ailine{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:.9rem;line-height:1.55;color:var(--wp-ink2)}

.wp-lane.aihi{--lc:#f0857a}.wp-lane.aimid{--lc:#E5C586}.wp-lane.ailo{--lc:#4fd39a}

#wp-alerts{margin:6px 0 16px}#wp-alerts[hidden]{display:none}

.al{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(8,14,30,.5)}

.al.on{border-color:rgba(77,210,160,.45);background:linear-gradient(90deg,rgba(77,210,160,.1),transparent 60%),rgba(8,14,30,.5)}

.al-l b{display:block;font:600 1rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}.al-l b small{font:400 .78rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink3);margin-left:6px}

.al-l span{display:block;margin-top:4px;font-size:.86rem;line-height:1.55;color:var(--wp-ink2)}.al-l .armed{color:#4fd39a}.al-l .dn{color:#f0857a}

.sw-toggle{flex:none;position:relative;width:52px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);cursor:pointer}

.sw-toggle i{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:#9fabbf;transition:left .18s,background .18s}

.sw-toggle.on{background:rgba(77,210,160,.35);border-color:#4fd39a}.sw-toggle.on i{left:28px;background:#4fd39a}

.wp-optbox{margin-top:16px;padding:14px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(8,14,30,.45)}

.wp-optbox[hidden]{display:none}

.wp-optbox summary{cursor:pointer;font:600 1rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.wp-optbox summary b{margin-left:6px;padding:0 8px;border-radius:999px;background:rgba(229,197,134,.16);font-size:.8rem}

.wp-opts{display:grid;gap:10px;margin-top:12px}

.wp-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);font-size:.9rem;color:var(--wp-ink2)}

.wp-opt b{font:700 1rem 'AK Thai','Google Sans','Outfit',sans-serif;color:var(--wp-ink)}

.wp-opt .sd{padding:1px 10px;border-radius:999px;font-weight:600}.wp-opt .sd.bull{background:rgba(77,210,160,.15);color:#4fd39a}.wp-opt .sd.bear{background:rgba(240,133,122,.15);color:#f0857a}.wp-opt .sd.range{background:rgba(242,201,76,.15);color:#f2c94c}

.wp-opt .wp-del{margin-left:auto}

@media (max-width:760px){.ws{grid-template-columns:1fr}.ws-donut{flex-direction:column;align-items:stretch}.donut{margin:0 auto}}

html[data-theme=light] .ws-donut,html[data-theme=light] .ws-stat,html[data-theme=light] .al,html[data-theme=light] .wp-optbox{background:#fff;border-color:#c9d3e2}

html[data-theme=light] .wp-opt,html[data-theme=light] .wp-ailine{background:#f6f8fc}

html[data-theme=light] .hi-t,html[data-theme=light] .al-l .dn,html[data-theme=light] .wp-opt .sd.bear{color:#b3261e}html[data-theme=light] .mid-t{color:#8a6414}html[data-theme=light] .lo-t,html[data-theme=light] .al-l .armed,html[data-theme=light] .wp-opt .sd.bull{color:#13804f}

html[data-theme=light] #wp-filters button{background:#fff;border-color:#c9d3e2;color:#13233a}html[data-theme=light] #wp-filters button[aria-pressed=true]{background:var(--wl-mint);border-color:var(--wl-accent-mint);color:var(--wl-ink)}html[data-theme=light] #wp-filters button b{background:#eef2f8;color:#13233a}html[data-theme=light] #wp-filters button[aria-pressed=true] b{background:rgba(16,185,129,.18);color:var(--wl-ink)}



/* logo padding, card key, AI reason (Audi 2026-10-17) */

.wp-tile .wp-logo{padding:5px;box-sizing:border-box;object-fit:contain;background:#fff}

.wp-tile .wp-logo.fb{background:#132650;padding:0}

.wp-row>.wp-logo{padding:4px;box-sizing:border-box;object-fit:contain}

.wp-keyline{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 4px;font-size:.86rem;line-height:1.5;color:var(--wp-ink2)}

.wp-keyline b{color:var(--wp-ink);font-weight:600}

.wp-ailine small{display:block;margin-top:4px;font-size:.8rem;color:var(--wp-ink3)}

/* 2026-10-17 (Audi: "เส้นไปบังตัวหนังสือ"): the AI badge sat on "รอ $…" at phone width; it now stacks under the trend icon in the

   top-left corner, beside the logo, never over a text line (bug_sweep.js overlap check) */

.wp-tile .aib{top:28px;bottom:auto;left:8px}



/* ───────── 2026-10-17 🃏 E · trading-card binder (Audi picked E: "E แล้วกัน … ทำให้มันมี gimmick กว่านี้หน่อย") ─────────

   Lanes are binder pages with sleeve seams; tiles are collectible cards dealt in one by one, a holo light and a slight tilt

   follow the pointer, ⭐ cards wear a gold rarity frame. Night = dark binder, day = white binder (designed as a pair). */

.wp-lane{border-radius:18px}

html:not([data-theme=light]) .wp-lane{background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 128px),linear-gradient(180deg,#1b1b2c,#121220);border-color:#34344c;box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}

html[data-theme=light] .wp-lane{background:repeating-linear-gradient(90deg,rgba(20,30,60,.035) 0 1px,transparent 1px 128px),linear-gradient(180deg,#fbfbfd,#eef0f6);border-color:#d5d8e3;box-shadow:0 16px 32px -24px rgba(30,40,80,.35)}

.wp-tile{border-radius:12px;overflow:hidden;isolation:isolate;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,translate .15s,border-color .15s,box-shadow .2s;animation:wpDeal .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 28ms)}

@keyframes wpDeal{from{opacity:0;translate:0 14px;rotate:-4deg}to{opacity:1;translate:0 0;rotate:0deg}}

.wp-tile::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;pointer-events:none;

  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.4),transparent 45%),linear-gradient(115deg,transparent 25%,rgba(160,220,255,.22) 42%,rgba(255,170,240,.22) 52%,rgba(255,240,150,.18) 60%,transparent 75%)}

.wp-tile:is(:hover,:focus-visible)::before{opacity:1}

html:not([data-theme=light]) .wp-tile{background:linear-gradient(160deg,#2c2c48,#1b1b30);border:2px solid #4b4b70}

html[data-theme=light] .wp-tile{background:linear-gradient(160deg,#ffffff,#f2f4fa);border:2px solid #c9cedc}

html[data-theme=light] .wp-tile::before{background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.9),transparent 45%),linear-gradient(115deg,transparent 25%,rgba(120,190,255,.25) 42%,rgba(255,140,220,.22) 52%,rgba(255,220,100,.22) 60%,transparent 75%)}

.wp-tile:has(.st){border-color:#e5c586!important;box-shadow:0 0 0 1px #e5c586,0 0 18px -6px #e5c586}

html[data-theme=light] .wp-tile:has(.st){border-color:#c9a14e!important;box-shadow:0 0 0 1px #c9a14e,0 8px 18px -10px rgba(160,120,40,.6)}

html[data-motion=paused] .wp-tile{animation:none;transform:none}

@media (prefers-reduced-motion:reduce){.wp-tile{animation:none;transform:none}}



/* the peek opens like a card flipping over, then reads as a dashboard: hero verdict → KPI tiles → signals → details */

.wp-peek[open]{animation:wpFlip .55s cubic-bezier(.2,.8,.2,1)}

@keyframes wpFlip{from{transform:perspective(1200px) rotateY(80deg);opacity:.3}to{transform:none;opacity:1}}

html[data-motion=paused] .wp-peek[open]{animation:none}

@media (prefers-reduced-motion:reduce){.wp-peek[open]{animation:none}}

html:not([data-theme=light]) .wp-peek{background:radial-gradient(70% 30% at 50% 0%,rgba(229,197,134,.12),transparent 70%),linear-gradient(160deg,#22223a,#121220);border:2px solid #e5c586}

html[data-theme=light] .wp-peek{background:radial-gradient(70% 30% at 50% 0%,rgba(255,214,150,.35),transparent 70%),linear-gradient(160deg,#ffffff,#f3f5fa);border:2px solid #c9a14e}

.wp-peek-in{padding:22px 24px 26px}

.dsh-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:16px 18px;border-radius:16px;margin:0 44px 16px 0;position:relative;overflow:hidden;isolation:isolate}

.dsh-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,rgba(160,220,255,.12) 52%,transparent 68%) 0 0/250% 100%;animation:wpFoil 6s linear infinite}

@keyframes wpFoil{from{background-position:120% 0}to{background-position:-120% 0}}

html[data-motion=paused] .dsh-hero::before{animation:none}

@media (prefers-reduced-motion:reduce){.dsh-hero::before{animation:none}}

.dsh-hero .id{display:flex;align-items:center;gap:14px;min-width:0}

.dsh-hero .id .wp-logo{width:56px;height:56px;border-radius:14px;flex:0 0 auto}

.dsh-hero .id b{display:block;font:700 1.6rem/1.1 'AK Thai','Google Sans',Sarabun,sans-serif}

.dsh-hero .id small{display:block;margin:2px 0 6px;font-size:.92rem;opacity:.85}

.dsh-hero .tgs{display:flex;flex-wrap:wrap;gap:6px}

.dsh-hero .vd{text-align:right}

.dsh-hero .vd strong{display:block;font:700 1.3rem/1.25 'AK Thai','Google Sans',Sarabun,sans-serif}

.dsh-hero .vd span{font-size:.95rem}

html:not([data-theme=light]) .dsh-hero{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

html[data-theme=light] .dsh-hero{background:linear-gradient(135deg,#ffffff,#f4f6fb);box-shadow:inset 0 0 0 1px #d8dce7}

.dsh-hero.v-g .vd strong{color:#4ade80}.dsh-hero.v-g2 .vd strong{color:#86efac}.dsh-hero.v-a .vd strong{color:#fbbf24}

html[data-theme=light] .dsh-hero.v-g .vd strong{color:#0b7a4f}html[data-theme=light] .dsh-hero.v-g2 .vd strong{color:#15803d}html[data-theme=light] .dsh-hero.v-a .vd strong{color:#a15c07}

html:not([data-theme=light]) .dsh-hero.v-g{box-shadow:inset 0 0 0 1px rgba(74,222,128,.45),0 0 26px -12px rgba(74,222,128,.7)}

html[data-theme=light] .dsh-hero.v-g{box-shadow:inset 0 0 0 1px #8fd3ad}

.dsh-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.dsh-k.wide{grid-column:1/-1}

.dsh-k{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border-radius:14px}

.dsh-k h5{margin:0;font:600 .9rem/1.3 'AK Thai','Google Sans',Sarabun,sans-serif;opacity:.9}

.dsh-k>b{font:700 1.45rem/1.15 'AK Thai','Google Sans',Sarabun,sans-serif}

.dsh-k>span{font-size:.92rem}

.dsh-k small{font-size:.85rem;line-height:1.45;opacity:.9}

html:not([data-theme=light]) :is(.dsh-k,.dsh-s){background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}

html[data-theme=light] :is(.dsh-k,.dsh-s){background:#ffffff;box-shadow:inset 0 0 0 1px #dde1ea,0 6px 14px -12px rgba(30,40,80,.4)}

.dsh-k .up{color:#4ade80}.dsh-k .down{color:#f87171}.dsh-k .warn{color:#fbbf24}

html[data-theme=light] .dsh-k .up{color:#0b7a4f}html[data-theme=light] .dsh-k .down{color:#b8321f}html[data-theme=light] .dsh-k .warn{color:#a15c07}

.dsh-spark{width:100%;height:44px;display:block}

.dsh-spark .ln{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}

.dsh-spark.up .ln{stroke:#4ade80}.dsh-spark.down .ln{stroke:#f87171}

.dsh-spark.up .ar{fill:rgba(74,222,128,.14)}.dsh-spark.down .ar{fill:rgba(248,113,113,.14)}

html[data-theme=light] .dsh-spark.up .ln{stroke:#0b7a4f}html[data-theme=light] .dsh-spark.down .ln{stroke:#b8321f}

.dsh-meter{height:10px;border-radius:999px;overflow:hidden}

.dsh-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fbbf24,#4ade80);transition:width .6s}

html:not([data-theme=light]) .dsh-meter{background:rgba(255,255,255,.1)}html[data-theme=light] .dsh-meter{background:#e6e9f0}

.dsh-52{display:grid;gap:2px;padding:0 6px}

.dsh-52 .ends{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;opacity:.9}

.dsh-bar{position:relative;height:46px}

.dsh-bar .tr{position:absolute;left:0;right:0;top:19px;height:8px;border-radius:999px;background:linear-gradient(90deg,#f87171,#fbbf24 50%,#4ade80)}

.dsh-bar .mk{position:absolute;top:14px;width:4px;height:18px;translate:-50% 0;border-radius:2px}

.dsh-bar .mk.now{background:#fff;box-shadow:0 0 0 2px #121220}.dsh-bar .mk.buy{background:#60a5fa;box-shadow:0 0 0 2px #121220}

html[data-theme=light] .dsh-bar .mk.now{background:#1b2b40;box-shadow:0 0 0 2px #fff}html[data-theme=light] .dsh-bar .mk.buy{background:#1d6fa5;box-shadow:0 0 0 2px #fff}

.dsh-bar .ml{position:absolute;top:34px;translate:-50% 0;font-size:.72rem;line-height:1;white-space:nowrap;font-weight:600}

.dsh-bar .ml.buy{top:0;color:#93c5fd}html[data-theme=light] .dsh-bar .ml.buy{color:#1d6fa5}

.dsh-ladder{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}

.dsh-ladder li{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:8px;font-size:.85rem}

.dsh-ladder li.now{font-weight:700;box-shadow:inset 3px 0 0 #e5c586}

html:not([data-theme=light]) .dsh-ladder li{background:rgba(255,255,255,.05)}html[data-theme=light] .dsh-ladder li{background:#f3f5fa}

.dsh-k b.t-g{color:#4ade80}.dsh-k b.t-r{color:#f87171}.dsh-k b.t-a{color:#fbbf24}

html[data-theme=light] .dsh-k b.t-g{color:#0b7a4f}html[data-theme=light] .dsh-k b.t-r{color:#b8321f}html[data-theme=light] .dsh-k b.t-a{color:#a15c07}

.dsh-sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}

.dsh-s{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:14px}

.dsh-s h5{margin:0;font:600 .95rem/1.3 'AK Thai','Google Sans',Sarabun,sans-serif}

.dsh-s b{font:700 1.2rem 'AK Thai','Google Sans',Sarabun,sans-serif}

.dsh-s small{font-size:.85rem;line-height:1.45;opacity:.9}

.dsh-gauge{position:relative;height:10px;margin:4px 0;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#a78bfa 50%,#f472b6)}

.dsh-gauge i{position:absolute;top:-4px;left:calc(var(--v) * 100%);width:6px;height:18px;translate:-50% 0;border-radius:3px;background:#fff;box-shadow:0 0 0 2px #121220}

html[data-theme=light] .dsh-gauge i{background:#1b2b40;box-shadow:0 0 0 2px #fff}

.dsh-s .deep{font-weight:700}

.dsh-act{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}

.dsh-none{font-size:.82rem;opacity:.8}

.wp-peek .akd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}

.wp-peek .akd>.dt{margin:0;padding:14px 16px;border-radius:14px;min-width:0}

.wp-peek .akd>.dt:last-child{grid-column:1/-1}

html:not([data-theme=light]) .wp-peek .akd>.dt{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}

html[data-theme=light] .wp-peek .akd>.dt{background:#ffffff;box-shadow:inset 0 0 0 1px #dde1ea}

@media (max-width:860px){.dsh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dsh-k:nth-child(3){grid-column:1/-1}.wp-peek .akd{grid-template-columns:1fr}}

@media (max-width:520px){.wp-peek-in{padding:16px 14px 20px}.dsh-hero{margin-right:40px}.dsh-hero .vd{text-align:left}.dsh-kpis{grid-template-columns:1fr}}



.dsh-bar .ml.el{translate:-6px 0}.dsh-bar .ml.er{translate:calc(-100% + 6px) 0}



/* 2026-10-17 (Audi: "ลืมเรื่องการใช้สีไปแล้วหรอ ที่ ต้องลงอีก 0.9% และ รอซื้อ $230 … แถบที่คุณทำมามันดูยาก เป็นสีรุ้ง ไม่รู้จะโฟกัสตรงไหน"):

   one neutral track per bar, colour only on the thing that matters (the buy line / the value), and every buy distance

   coloured by its zone: ✅ ถึงแล้ว green · 🟢 ใกล้ (≤3%) green · 🟡 เริ่มใกล้ (≤8%) amber · ยังห่าง grey. */

:root{--z-in:#4ade80;--z-ng:#86efac;--z-ny:#fbbf24;--z-far:#a7b0c4}

html[data-theme=light]{--z-in:#0b7a4f;--z-ng:#15803d;--z-ny:#a15c07;--z-far:#5b6577}

.z-in .zc,.wp-tile.in small,.wp-tile.in .pp em{color:var(--z-in)!important}

.z-near-g .zc,.wp-tile.near-g small,.wp-tile.near-g .pp em{color:var(--z-ng)!important}

.z-near-y .zc,.wp-tile.near-y small,.wp-tile.near-y .pp em{color:var(--z-ny)!important}

.z-far .zc{color:var(--z-far)!important}

.wp-tile:is(.in,.near-g,.near-y) small{font-weight:700}

/* 52-week: grey track, the stretch from the low up to "now" in quiet ink, the buy line as the one coloured marker */

.dsh-bar .tr{background:var(--trk)!important}

html:not([data-theme=light]) .dsh-bar{--trk:rgba(255,255,255,.14)}html[data-theme=light] .dsh-bar{--trk:#e3e7ef}

.dsh-bar .mk.now{width:14px;height:14px;top:16px;border-radius:50%}

.dsh-bar .ml.now{font-weight:700}

.dsh-bar .mk.buy{width:4px;height:24px;top:11px;border-radius:2px}

.dsh-bar .mk.buy.z-in,.dsh-bar .ml.buy.z-in{--zc:var(--z-in)}.dsh-bar .mk.buy.z-near-g,.dsh-bar .ml.buy.z-near-g{--zc:var(--z-ng)}

.dsh-bar .mk.buy.z-near-y,.dsh-bar .ml.buy.z-near-y{--zc:var(--z-ny)}.dsh-bar .mk.buy.z-far,.dsh-bar .ml.buy.z-far{--zc:var(--z-far)}

.dsh-bar .mk.buy{background:var(--zc)!important}.dsh-bar .ml.buy{color:var(--zc)!important}

/* AI gauge: neutral track, one violet fill up to the value */

.dsh-gauge{background:var(--trk)!important;overflow:visible}

html:not([data-theme=light]) .dsh-gauge{--trk:rgba(255,255,255,.14)}html[data-theme=light] .dsh-gauge{--trk:#e3e7ef}

.dsh-gauge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:inherit;background:#a78bfa}

html[data-theme=light] .dsh-gauge::before{background:#6d4fc2}



/* 2026-10-17 ⭐ ของคุณ rows (Audi: "เรียงตัวไม่ดี … กระชับ เขียนแค่ว่าออดี้รอซื้อ … ไม่ต้องมี ต้องลงอีก"): one aligned grid,

   every column = small label → big value → one short zone-coloured line; trend sits under the price; actions are two icon buttons. */

.wp-row.m2{grid-template-columns:44px minmax(0,1.7fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:start;gap:4px 18px;padding:16px 16px 16px 19px}

.wp-row.m2>.wp-logo{width:44px;height:44px;border-radius:12px;align-self:center}

.wp-row.m2 .nm{display:grid;gap:2px;align-self:center}

.wp-row.m2 .nm b{font-size:1.15rem}

.wp-row.m2 .nm .tgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

.wp-row.m2 .c{gap:4px}

.wp-row.m2 .c small{font-size:.78rem;font-weight:600;letter-spacing:.01em}

.wp-row.m2 .c b{font:700 1.2rem/1.2 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;min-height:36px;display:flex;align-items:center}

.wp-row.m2 .c i{min-height:1.3em;font-size:.82rem}

.wp-row.m2 .c input{min-height:36px}

.wp-row.m2 .px i .tr{font-size:.78rem}

.wp-row.m2 .acts2{display:flex;flex-direction:row;gap:8px;align-self:center}

.wp-row.m2 .acts2 button.ic{width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;border-radius:12px;font-size:1.05rem;flex:0 0 auto}

.wp-row.m2 .wp-favline,.wp-row.m2 .wp-favbox{grid-column:2/-1}

/* the left stripe and the buy status share the zone colour */

.wp-row.m2.z-in{--acc:var(--z-in)}.wp-row.m2.z-near-g{--acc:var(--z-ng)}.wp-row.m2.z-near-y{--acc:var(--z-ny)}.wp-row.m2.z-far{--acc:var(--wp-edge,#3a4560)}

.wp-row.m2 .buy i.zc{font-weight:700}

.wp-row.m2 .tg.audi{font-weight:600}

@media (max-width:980px){

  .wp-row.m2{grid-template-columns:44px repeat(3,minmax(0,1fr));grid-template-areas:"lg nm nm act" "px px buy tgt"}

  .wp-row.m2 .acts2{grid-area:act;justify-self:end}

}

@media (max-width:560px){

  .wp-row.m2{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"lg nm nm act" "px px px px" "buy buy tgt tgt";gap:10px 12px}

  .wp-row.m2>.wp-logo{display:block}

  .wp-row.m2 .acts2{justify-self:end;align-self:start}

  .wp-row.m2 .px{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}

  .wp-row.m2 .px small{width:100%}

  .wp-row.m2 .px b{min-height:0}

}



.wp-row.m2 .wp-fav.ic .hrt{font-size:1.35rem;line-height:1;color:#e05a7e}

.wp-row.m2 .wp-fav.ic.on .hrt{color:#ff4d7d;text-shadow:0 0 10px rgba(255,77,125,.5)}

html[data-theme=light] .wp-row.m2 .acts2 button.ic{background:#fff;border-color:#e3b7c2;box-shadow:0 4px 10px -8px rgba(120,40,60,.5)}

html[data-theme=light] .wp-row.m2 .wp-fav.ic .hrt{color:#c2335b}

html[data-theme=light] .wp-row.m2 .wp-del.ic{border-color:#e7b4b4}



/* 2026-10-17 (Audi: "กล่องไหนที่เป็นสัญญาณดีก็ต้องเป็นสีเขียว … 52 สัปดาห์ไม่ทำสีหรอ … ตาม AI ควรมี 2 สีที่โชว์มากน้อย"):

   each KPI box tints its edge by meaning (g good · a caution · r bad · n neutral); the number/word carries the same colour. */

:root{--k-g:#4ade80;--k-a:#fbbf24;--k-r:#f87171}

html[data-theme=light]{--k-g:#0b7a4f;--k-a:#a15c07;--k-r:#b8321f}

html:not([data-theme=light]) .dsh-k.k-g,html:not([data-theme=light]) .dsh-s.k-g{box-shadow:inset 0 0 0 1px rgba(74,222,128,.55),inset 0 3px 0 rgba(74,222,128,.9);background:linear-gradient(180deg,rgba(74,222,128,.09),rgba(255,255,255,.03) 60%)}

html:not([data-theme=light]) .dsh-k.k-a,html:not([data-theme=light]) .dsh-s.k-a{box-shadow:inset 0 0 0 1px rgba(251,191,36,.5),inset 0 3px 0 rgba(251,191,36,.9);background:linear-gradient(180deg,rgba(251,191,36,.08),rgba(255,255,255,.03) 60%)}

html:not([data-theme=light]) .dsh-k.k-r,html:not([data-theme=light]) .dsh-s.k-r{box-shadow:inset 0 0 0 1px rgba(248,113,113,.5),inset 0 3px 0 rgba(248,113,113,.9);background:linear-gradient(180deg,rgba(248,113,113,.08),rgba(255,255,255,.03) 60%)}

html[data-theme=light] .dsh-k.k-g,html[data-theme=light] .dsh-s.k-g{box-shadow:inset 0 0 0 1px #9fd8b8,inset 0 3px 0 #0b7a4f;background:linear-gradient(180deg,#effaf3,#fff 60%)}

html[data-theme=light] .dsh-k.k-a,html[data-theme=light] .dsh-s.k-a{box-shadow:inset 0 0 0 1px #ecd29a,inset 0 3px 0 #a15c07;background:linear-gradient(180deg,#fff8e8,#fff 60%)}

html[data-theme=light] .dsh-k.k-r,html[data-theme=light] .dsh-s.k-r{box-shadow:inset 0 0 0 1px #efb8ae,inset 0 3px 0 #b8321f;background:linear-gradient(180deg,#fff1ee,#fff 60%)}

.dsh-k .t-g,.dsh-s .t-g{color:var(--k-g)!important}.dsh-k .t-a,.dsh-s .t-a{color:var(--k-a)!important}.dsh-k .t-r,.dsh-s .t-r{color:var(--k-r)!important}

.dsh-pz{font:700 1rem 'AK Thai','Google Sans',Sarabun,sans-serif;margin-top:2px}

.dsh-bar .mk.now.p-g{background:var(--k-g)!important}.dsh-bar .mk.now.p-a{background:var(--k-a)!important}.dsh-bar .mk.now.p-r{background:var(--k-r)!important}

.dsh-bar .ml.now.p-g{color:var(--k-g)}.dsh-bar .ml.now.p-a{color:var(--k-a)}.dsh-bar .ml.now.p-r{color:var(--k-r)}

/* AI meter: ends named, thresholds marked, fill colour = the band it lands in */

.dsh-gauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:currentColor;opacity:.35;translate:-1px 0}

.dsh-gauge.b-lo{--bc:#60a5fa}.dsh-gauge.b-mid{--bc:#fbbf24}.dsh-gauge.b-hi{--bc:#f472b6}

html[data-theme=light] .dsh-gauge.b-lo{--bc:#1d6fa5}html[data-theme=light] .dsh-gauge.b-mid{--bc:#a15c07}html[data-theme=light] .dsh-gauge.b-hi{--bc:#b0306e}

.dsh-gauge::before{background:var(--bc)!important}

.dsh-ends{display:flex;justify-content:space-between;font-size:.76rem;opacity:.85}



/* AI meter ends wear their band colour (Audi 2026-10-17); the middle label sits over the 0.3-0.6 band */

.dsh-ends{position:relative;font-weight:700}

.dsh-ends .e-lo{color:#60a5fa}.dsh-ends .e-mid{position:absolute;left:45%;translate:-50% 0;color:#fbbf24}.dsh-ends .e-hi{color:#f472b6}

html[data-theme=light] .dsh-ends .e-lo{color:#1d6fa5}html[data-theme=light] .dsh-ends .e-mid{color:#a15c07}html[data-theme=light] .dsh-ends .e-hi{color:#b0306e}

.dsh-gauge{background:linear-gradient(90deg,rgba(96,165,250,.22) 0 30%,rgba(251,191,36,.22) 30% 60%,rgba(244,114,182,.22) 60%)!important}

html[data-theme=light] .dsh-gauge{background:linear-gradient(90deg,#dbeafe 0 30%,#fdf0d5 30% 60%,#fbe0ee 60%)!important}



/* card key as a 4-cell legend (Audi 2026-10-17: "อ่านแล้วงงไหม เรียงงงไหม"): symbol on top, one short meaning under it */

.wp-keyline{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:start;gap:10px 14px;margin:14px 0 6px;padding:12px 14px;border-radius:14px}

html:not([data-theme=light]) .wp-keyline{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

html[data-theme=light] .wp-keyline{background:#fff;box-shadow:inset 0 0 0 1px #dde1ea}

.wp-keyline>b{align-self:center;white-space:nowrap}

.wp-keyline .k{display:grid;gap:3px}

.wp-keyline .k i{font-style:normal;font-weight:700;font-size:1rem;letter-spacing:.06em}

.wp-keyline .k i.zg{color:var(--z-ng,#86efac);letter-spacing:0}

.wp-keyline .k small{font-size:.8rem;line-height:1.4;color:var(--wp-ink2)}

@media (max-width:860px){.wp-keyline{grid-template-columns:repeat(2,minmax(0,1fr))}.wp-keyline>b{grid-column:1/-1}}

/* wider on big screens (Audi: "ควรทำจอกว้างกว่านี้ไหม") */

@media (min-width:1500px){.wp{width:min(1400px,100% - 64px)}}

/* site-theme.css caps every <main> at 760px, which kept the whole watchlist narrow on desktop */

main.wp{max-width:none;padding-left:0;padding-right:0}



/* 🎬 Audi's own content + ⚖️ fair value panels in the peek */

.dsh-mine{gap:8px!important}

.dsh-mine .clip{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;text-decoration:none;color:inherit}

html:not([data-theme=light]) .dsh-mine .clip{background:rgba(255,255,255,.05)}html[data-theme=light] .dsh-mine .clip{background:#f3f5fa}

.dsh-mine .clip:hover{outline:1px solid #E5C586}

.dsh-mine .clip img{width:40px;height:72px;object-fit:cover;border-radius:6px;flex:0 0 auto}

.dsh-mine .clip span{font-size:.86rem;line-height:1.4;font-weight:600}

.dsh-mine .deep{font-weight:700}

.dsh-s small b{font:inherit;font-weight:700}



/* ═════════════ 💰 พอร์ตจำลอง 1,000,000 บาทของออดี้ (Model Portfolio Tab, Audi 2026-10-21) ═════════════ */

.mp-wrap{display:grid;gap:20px}

.mp-hero{

  display:grid;

  grid-template-columns:minmax(0,1.5fr) auto;

  gap:20px;

  align-items:center;

  padding:24px 26px;

  border-radius:22px;

  border:1px solid rgba(229,197,134,.42);

  background:radial-gradient(28rem 14rem at 0% 0%,rgba(229,197,134,.18),transparent 70%),var(--wp-card);

  box-shadow:0 16px 38px rgba(0,0,0,.24);

}

html[data-theme=light] .mp-hero{

  background:radial-gradient(28rem 14rem at 0% 0%,rgba(229,197,134,.28),transparent 70%),#ffffff;

  border-color:#d8bc7c;

  box-shadow:0 10px 26px rgba(20,35,60,.07);

}

.mp-hcopy h2{margin:6px 0 8px;font:700 clamp(1.35rem,2.4vw,1.85rem)/1.3 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;color:var(--wp-ink)}

.mp-cap-hl{color:var(--wp-gold)}

.mp-hcopy p{margin:0;color:var(--wp-ink2);line-height:1.6;font-size:.96rem}

.mp-cap-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}

.mp-cap-bar>span{font:600 .88rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink2)}

.mp-cap-btn{

  min-height:36px;

  padding:0 14px;

  border-radius:999px;

  border:1px solid var(--wp-edge);

  background:rgba(255,255,255,.05);

  color:var(--wp-ink2);

  font:600 .88rem 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;

  cursor:pointer;

}

.mp-cap-btn[aria-pressed=true]{background:linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));color:var(--wl-ink, rgb(15, 23, 42));border-color:rgba(16, 185, 129, 0.56);border-bottom:2.5px solid rgb(5, 150, 105);font-weight:700}

html[data-theme=light] .mp-cap-btn{background:var(--aku-paper);color:var(--wl-ink, rgb(15, 23, 42))}

html[data-theme=light] .mp-cap-btn[aria-pressed=true]{background:linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));color:var(--wl-ink, rgb(15, 23, 42));border-color:rgba(16, 185, 129, 0.56);border-bottom:2.5px solid rgb(5, 150, 105)}

.mp-hactions{display:grid;gap:8px;justify-items:end;text-align:right}

.mp-hactions small{font-size:.82rem;color:var(--wp-ink2)}



.mp-alloc{

  padding:20px 22px;

  border-radius:20px;

  border:1px solid var(--wp-edge);

  background:var(--wp-card);

}

.mp-bar{

  display:flex;

  height:18px;

  border-radius:999px;

  overflow:hidden;

  gap:3px;

  margin-bottom:16px;

}

.mp-bar span{

  display:flex;

  align-items:center;

  justify-content:center;

  font:700 .72rem 'AK Thai','Google Sans','Outfit',sans-serif;

  color:#101828;

}

.mp-sleeves{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;

}

.mp-slv{

  padding:14px 15px;

  border-radius:15px;

  border:1px solid var(--wp-edge);

  border-left:3.5px solid var(--sc,#E5C586);

  background:rgba(255,255,255,.03);

  display:grid;

  gap:4px;

}

html[data-theme=light] .mp-slv{background:#f9fafc}

.mp-slv .top{display:flex;align-items:center;gap:6px}

.mp-slv .top b{font:600 .9rem/1.35 'AK Thai','Google Sans','Sarabun',sans-serif;flex:1}

.mp-slv .pct{font:700 .92rem 'AK Thai','Google Sans','Outfit',sans-serif;color:var(--sc)}

.mp-slv .thb{font:700 1.15rem 'AK Thai','Google Sans','Outfit',sans-serif;color:var(--wp-ink)}

.mp-slv small{font-size:.8rem;line-height:1.45;color:var(--wp-ink3)}



.mp-gate{

  padding:18px 20px;

  border-radius:18px;

  border:1px dashed rgba(229,197,134,.6);

  background:linear-gradient(135deg,rgba(229,197,134,.14),rgba(61,220,151,.08));

}

html[data-theme=light] .mp-gate{background:linear-gradient(135deg,#fffaf0,#effaf3);border-color:#c9a24f}

.mp-gate-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}

.mp-gate-in .ic{font-size:1.8rem}

.mp-gate-in>div:nth-child(2){flex:1 1 280px;display:grid;gap:4px}

.mp-gate-in b{font:600 1.02rem 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink)}

.mp-gate-in small{font-size:.88rem;color:var(--wp-ink2);line-height:1.5}

.mp-gate-btns{display:flex;flex-wrap:wrap;gap:10px}



.mp-list{display:grid;gap:10px}

.mp-row{

  position:relative;

  display:grid;

  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) auto;

  gap:12px 16px;

  align-items:center;

  padding:14px 16px 14px 19px;

  border-radius:16px;

  border:1px solid var(--wp-edge);

  background:var(--wp-card);

  overflow:hidden;

}

.mp-row::before{content:'';position:absolute;inset:0 auto 0 0;width:3.5px;background:var(--wp-gold)}

.mp-row.in::before{background:var(--wp-up)}

.mp-id{display:flex;align-items:flex-start;gap:12px;min-width:0}

.mp-tkline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}

.mp-tkline b{font:700 1.06rem 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif}

.mp-slv-tag{

  padding:2px 8px;

  border-radius:999px;

  background:rgba(229,197,134,.14);

  color:var(--wp-gold);

  font:500 .75rem 'AK Thai','Google Sans','Sarabun',sans-serif;

}

.mp-why{display:block;margin-top:4px;font-size:.84rem;line-height:1.5;color:var(--wp-ink2)}

.mp-alloc-col,.mp-px-col{display:grid;gap:3px}

.mp-alloc-col small,.mp-px-col small{font-size:.75rem;color:var(--wp-ink3)}

.mp-alloc-col b,.mp-px-col b{font-size:1rem}

.mp-alloc-col .gold{color:var(--wp-gold)}

.mp-minibar{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:2px}

html[data-theme=light] .mp-minibar{background:rgba(19,35,58,.08)}

.mp-minibar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a58b52,#E5C586)}

.mp-px-col em{font-style:normal;font-size:.84rem;color:var(--wp-ink2)}

.mp-z{font-style:normal;font-size:.8rem;color:var(--wp-ink3)}

.mp-z.in{color:var(--wp-up);font-weight:600}

.mp-z.near-g{color:var(--near-g);font-weight:600}

.mp-z.near-y{color:var(--near-y);font-weight:600}

.mp-cash-badge{

  display:inline-flex;

  align-items:center;

  padding:6px 12px;

  border-radius:999px;

  background:rgba(56,189,248,.14);

  color:#38bdf8;

  font:600 .82rem 'AK Thai','Google Sans','Sarabun',sans-serif;

}

html[data-theme=light] .mp-cash-badge{color:#0369a1;background:rgba(2,132,199,.12)}

.mp-row.is-locked .mp-id,

.mp-row.is-locked .mp-alloc-col,

.mp-row.is-locked .mp-px-col{

  filter:blur(4.5px);

  user-select:none;

}

@media (max-width:960px){

  .mp-hero{grid-template-columns:1fr}

  .mp-hactions{justify-items:start;text-align:left}

  .mp-sleeves{grid-template-columns:repeat(2,minmax(0,1fr))}

  .mp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id id" "al px" "act act"}

  .mp-id{grid-area:id}.mp-alloc-col{grid-area:al}.mp-px-col{grid-area:px}.mp-act-col{grid-area:act}

}

@media (max-width:560px){

  .mp-hero{padding:18px}

  .mp-sleeves{grid-template-columns:1fr}

  .mp-row{grid-template-columns:1fr;grid-template-areas:"id" "al" "px" "act"}

}

/* === EDITORIAL FINANCIAL TERMINAL · ZERO PILL-SOUP & ZERO BOX-SOUP (Audi 2026-10-23) === */

.wp-tabs,

#wp-filters,

.wp-chips,

.chips,

#wp-groupby {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  border-radius: 0 !important;

}

:is(.wp-tabs button, #wp-filters button, .wp-chips button, .chips button, .wp-gb button) :is(b, strong, span, small) {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  border-radius: 0 !important;

}



/* 1. Top 5-Column Open Architectural Telemetry Strip (.wp-kpi) */

.wp-kpi {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 0 !important;

  margin: 18px 0 8px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(9, 15, 30, 0.45);

  border-radius: 0 !important;

}

.wp-stat {

  background: transparent !important;

  border: 0 !important;

  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-left: 2.5px solid var(--sc, #E5C586) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 13px 16px !important;

  transform: none !important;

  transition: background 0.16s ease, border-color 0.16s ease !important;

}

.wp-stat:last-child {

  border-right: 0 !important;

}

.wp-stat.all { --sc: #c084fc; }

.wp-stat.good { --sc: #34d399; }

.wp-stat.near { --sc: #fb923c; }

.wp-stat.star { --sc: #fbbf24; }

.wp-stat:hover,

.wp-stat[aria-pressed="true"] {

  background: linear-gradient(90deg, rgba(229, 197, 134, 0.11), transparent 88%) !important;

  border-left-width: 3.5px !important;

  transform: none !important;

}

.wp-stat b {

  font: 800 clamp(1.45rem, 2.2vw, 1.85rem)/1.1 'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif !important;

  letter-spacing: -0.02em;

  color: var(--sc, #f8fafc) !important;

  text-shadow: none !important;

}

.wp-stat small {

  font: 500 0.84rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif !important;

  color: #94a3b8 !important;

}



/* 2. Primary Underline Tabs (.wp-tabs) */

.wp-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 4px !important;

  margin: 18px 0 16px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;

}

.wp-tabs button {

  background: transparent !important;

  border: 0 !important;

  border-bottom: 2.5px solid transparent !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  min-height: 42px !important;

  padding: 10px 16px !important;

  color: #94a3b8 !important;

  font: 600 0.95rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif !important;

  transform: none !important;

  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;

}

.wp-tabs button:hover {

  color: #f8fafc !important;

  background: rgba(255, 255, 255, 0.03) !important;

}

.wp-tabs button[aria-selected="true"] {

  color: #fef3c7 !important;

  font-weight: 700 !important;

  border-bottom-color: #f59e0b !important;

  background: linear-gradient(180deg, transparent, rgba(245, 158, 11, 0.09)) !important;

}



/* 3. Open Architectural Summary Strip (#wp-summary .ws) & Legend (.wp-keyline) */

.ws {

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  padding: 14px 0 !important;

  gap: 20px !important;

  margin: 8px 0 16px !important;

}

.ws-donut,

.ws-stat {

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 4px 12px !important;

}

.ws-r {

  border-left: 1px solid rgba(255, 255, 255, 0.10);

  padding-left: 18px;

}

.ws-stat + .ws-stat {

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

  padding-top: 10px !important;

}

.wp-keyline {

  background: transparent !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 8px 0 12px !important;

  margin: 8px 0 6px !important;

}



/* 4. Filter Strip (#wp-filters), Group-By Strip (#wp-groupby), & View Switcher (.wp-view) */

.wp-bar {

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  padding-bottom: 8px;

  margin-bottom: 10px;

}

#wp-filters button,

.wp-gb button {

  background: transparent !important;

  border: 0 !important;

  border-bottom: 2px solid transparent !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  min-height: 34px !important;

  padding: 6px 10px !important;

  color: #94a3b8 !important;

  font: 600 0.86rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif !important;

  transform: none !important;

  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;

}

#wp-filters button:hover,

.wp-gb button:hover {

  color: #f8fafc !important;

  background: rgba(255, 255, 255, 0.03) !important;

}

#wp-filters button[aria-pressed="true"],

.wp-gb button[aria-pressed="true"] {

  color: #fef3c7 !important;

  font-weight: 700 !important;

  border-bottom-color: #f59e0b !important;

  background: rgba(245, 158, 11, 0.08) !important;

}

#wp-filters button b {

  margin-left: 5px !important;

  font: 700 0.78rem 'JetBrains Mono', monospace !important;

  color: #64748b !important;

}

#wp-filters button[aria-pressed="true"] b {

  color: #fbbf24 !important;

}

.wp-view {

  display: inline-flex;

  gap: 0 !important;

  padding: 2px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 6px;

  background: rgba(8, 14, 28, 0.55);

}

.wp-view button {

  background: transparent !important;

  border: 0 !important;

  border-bottom: 2px solid transparent !important;

  border-radius: 4px !important;

  box-shadow: none !important;

  min-height: 32px !important;

  padding: 0 12px !important;

  color: #94a3b8 !important;

  font: 600 0.84rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif !important;

}

.wp-view button[aria-pressed="true"] {

  background: rgba(245, 158, 11, 0.14) !important;

  color: #fef3c7 !important;

  border-bottom-color: #f59e0b !important;

}

.wp-tools input,

.wp-tools select {

  border-radius: 6px !important;

  min-height: 36px !important;

  background: rgba(8, 14, 28, 0.65) !important;

  border-color: rgba(255, 255, 255, 0.14) !important;

}



/* 5. Grouped Lanes (.wp-lane) & Tiles (.wp-tile) — Zero Box-in-Box */

.wp-lanes {

  gap: 0 !important;

}

.wp-lane {

  background: transparent !important;

  border: 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 14px 0 16px !important;

}

.wp-lane-h {

  background: transparent !important;

  border: 0 !important;

  border-left: 3px solid var(--lc, #E5C586) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 4px 10px 4px 12px !important;

}

.wp-lane-h:hover {

  background: rgba(255, 255, 255, 0.03) !important;

}

.wp-lane-h .n {

  font: 700 0.78rem 'JetBrains Mono', monospace !important;

  border-radius: 4px !important;

  padding: 2px 7px !important;

  background: rgba(255, 255, 255, 0.06) !important;

  color: var(--lc, #E5C586) !important;

}

.wp-tile {

  border-radius: 8px !important;

  border-width: 1px !important;

  border-color: rgba(255, 255, 255, 0.11) !important;

  background: rgba(13, 21, 38, 0.75) !important;

  box-shadow: none !important;

}

.wp-tile.in { border-top: 2.5px solid #34d399 !important; }

.wp-tile.near-g { border-top: 2.5px solid #6ee7b7 !important; }

.wp-tile.near-y { border-top: 2.5px solid #fbbf24 !important; }

.wp-tile:has(.st) {

  border-color: rgba(229, 197, 134, 0.55) !important;

  box-shadow: inset 0 2px 0 #e5c586 !important;

}

.wp-more {

  background: transparent !important;

  border: 0 !important;

  border-top: 1px dashed rgba(255, 255, 255, 0.14) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  color: #fbbf24 !important;

}



/* 6. Detailed Table Rows (.wp-list > .wp-row) & Model Portfolio Rows (.mp-list > .mp-row) */

.wp-list,

.mp-list {

  display: grid;

  gap: 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}

.wp-row,

.mp-row {

  background: transparent !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 13px 14px 13px 16px !important;

  transition: background 0.15s ease !important;

}

.wp-row:last-child,

.mp-row:last-child {

  border-bottom: 0 !important;

}

.wp-row:hover,

.mp-row:hover {

  background: rgba(229, 197, 134, 0.04) !important;

}

.wp-row::before,

.mp-row::before {

  width: 2.5px !important;

}

.tg,

.ai-tag,

.mp-slv-tag,

.mp-cash-badge {

  border-radius: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-left: 2px solid currentColor !important;

  padding: 1px 6px 1px 7px !important;

  font: 600 0.75rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif !important;

}

.ai-tag {

  color: #cbd5e1 !important;

}

.tr {

  border-radius: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-left: 2.5px solid currentColor !important;

  padding: 2px 0 2px 8px !important;

  min-height: 0 !important;

  justify-content: flex-start !important;

}

.wp-copy,

.wp-edit,

.mp-cap-btn {

  border-radius: 6px !important;

  box-shadow: none !important;

}

.mp-hero,

.mp-alloc {

  border-radius: 8px !important;

  box-shadow: none !important;

}

.mp-slv {

  border-radius: 4px !important;

  border-top: 0 !important;

  border-right: 0 !important;

  border-bottom: 0 !important;

}



/* 7. Light Mode Parity */

html[data-theme="light"] .wp-kpi {

  background: rgba(255, 255, 255, 0.85);

  border-color: #cbd5e1;

}

html[data-theme="light"] .wp-stat {

  border-right-color: #e2e8f0 !important;

}

html[data-theme="light"] .wp-stat.all { --sc: #6d28d9; }

html[data-theme="light"] .wp-stat.good { --sc: #047857; }

html[data-theme="light"] .wp-stat.near { --sc: #c2410c; }

html[data-theme="light"] .wp-stat.star { --sc: #b45309; }

html[data-theme="light"] .wp-stat small {

  color: #475569 !important;

}

html[data-theme="light"] .wp-tabs,

html[data-theme="light"] .wp-bar,

html[data-theme="light"] .ws,

html[data-theme="light"] .wp-keyline,

html[data-theme="light"] .wp-lane,

html[data-theme="light"] .wp-list,

html[data-theme="light"] .mp-list {

  border-color: #cbd5e1 !important;

}

html[data-theme="light"] .ws-r {

  border-left-color: #cbd5e1 !important;

}

html[data-theme="light"] .wp-tabs button,

html[data-theme="light"] #wp-filters button,

html[data-theme="light"] .wp-gb button,

html[data-theme="light"] .wp-view button {

  color: #475569 !important;

}

html[data-theme="light"] .wp-tabs button[aria-selected="true"],

html[data-theme="light"] #wp-filters button[aria-pressed="true"],

html[data-theme="light"] .wp-gb button[aria-pressed="true"],

html[data-theme="light"] .wp-view button[aria-pressed="true"] {

  color: #0f172a !important;

  border-bottom-color: #b45309 !important;

  background: rgba(180, 83, 9, 0.08) !important;

}

html[data-theme="light"] .wp-view {

  background: #f8fafc;

  border-color: #cbd5e1;

}

html[data-theme="light"] .wp-tools input,

html[data-theme="light"] .wp-tools select {

  background: #ffffff !important;

  border-color: #cbd5e1 !important;

  color: #0f172a !important;

}

html[data-theme="light"] .wp-tile {

  background: #ffffff !important;

  border-color: #cbd5e1 !important;

}

html[data-theme="light"] .wp-row,

html[data-theme="light"] .mp-row {

  border-bottom-color: #e2e8f0 !important;

}

html[data-theme="light"] .wp-row:hover,

html[data-theme="light"] .mp-row:hover {

  background: rgba(15, 23, 42, 0.03) !important;

}

html[data-theme="light"] .wp-lane-h .n {

  background: #f1f5f9 !important;

  color: #0f172a !important;

}

@media (max-width: 760px) {

  .wp-kpi {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .wp-stat {

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

  }

  .ws-r {

    border-left: 0 !important;

    padding-left: 0 !important;

  }

}



/* === WATCHLIST v8 INSTITUTIONAL COMMAND HUD & TRUE-SCALE RANGE BARS (Audi 2026-10-23) === */
.wp {
  width: min(1320px, 100% - 32px);
}
.wp-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 4px;
}
@media (min-width: 761px) {
  .wp-hero-top {
    padding-right: 176px;
  }
}
.wp-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
/* routes = text links, not pills (impeccable §3.2, Web Standard v2 2026-10-24) */
.wp-util-link {
  font: 600 0.92rem var(--aku-font-body);
  color: var(--aku-copy);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--aku-primary) 45%, transparent);
  text-underline-offset: 4px;
  padding: 4px 2px;
  border: 0;
  background: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wp-util-link:hover { color: var(--aku-text); text-decoration-color: var(--aku-primary); }
html[data-theme="light"] .wp-util-link { color: color-mix(in srgb, var(--aku-copy) 55%, var(--aku-text)); }

/* 2-Tier Command Bar (.wp-cmd-hud) — eliminates 6-row vertical UI sprawl */
.wp-cmd-hud {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(9, 15, 30, 0.52);
  padding: 10px 14px;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}
html[data-theme="light"] .wp-cmd-hud {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.wp-cmd-tier1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .wp-cmd-tier1 {
  border-bottom-color: #e2e8f0;
}
.wp-cmd-tier2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 !important;
}
.wp-cmd-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}
.wp-cmd-left .wp-count {
  margin: 0 !important;
  font: 700 0.88rem 'AK Thai','Google Sans','Outfit', 'Plus Jakarta Sans', 'Sarabun', sans-serif;
  color: #e2e8f0;
  white-space: nowrap;
}
html[data-theme="light"] .wp-cmd-left .wp-count {
  color: #0f172a;
}
.wp-cmd-sep {
  color: rgba(255, 255, 255, 0.22);
  font-size: 0.85rem;
  user-select: none;
}
html[data-theme="light"] .wp-cmd-sep {
  color: #cbd5e1;
}
.wp-cmd-left .wp-gb {
  flex: 0 1 auto !important;
  order: 0 !important;
}
.wp-cmd-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.wp-cmd-drawers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.wp-drawer-btn {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid rgba(229, 197, 134, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font: 600 0.82rem 'AK Thai','Google Sans','Plus Jakarta Sans', 'Sarabun', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wp-drawer-btn:hover,
.wp-drawer-btn[aria-expanded="true"] {
  color: #fef3c7;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
html[data-theme="light"] .wp-drawer-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .wp-drawer-btn:hover,
html[data-theme="light"] .wp-drawer-btn[aria-expanded="true"] {
  color: #92400e;
  border-color: #b45309;
  background: #fffbeb;
}
.wp-drawer-sheet {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid #f59e0b;
  background: rgba(15, 23, 42, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.wp-drawer-sheet[hidden] {
  display: none !important;
}
html[data-theme="light"] .wp-drawer-sheet {
  background: #ffffff;
  border-top-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
  border-left-color: #b45309;
}
.wp-drawer-sheet .ws {
  margin: 0 !important;
  border: 0 !important;
  padding: 4px 0 !important;
}
.wp-drawer-sheet .wp-keyline {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* True-Scale Mini Range Bar in Detailed Table View (.wp-mini-range) */
.wp-mini-range {
  position: relative;
  display: block;
  height: 12px;
  margin-top: 4px;
  width: 100%;
  max-width: 150px;
}
.wp-mini-range .mr-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 3px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .wp-mini-range .mr-track {
  background: rgba(15, 23, 42, 0.16);
}
.wp-mini-range .mr-buy {
  position: absolute;
  top: 1px;
  width: 2.5px;
  height: 10px;
  translate: -50% 0;
  border-radius: 1px;
  background: #f59e0b;
}
.wp-mini-range .mr-tgt {
  position: absolute;
  top: 2px;
  width: 2px;
  height: 8px;
  translate: -50% 0;
  border-radius: 1px;
  background: #38bdf8;
}
.wp-mini-range .mr-now {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  translate: -50% 0;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #38bdf8;
  box-sizing: border-box;
}
.wp-mini-range .mr-now.in {
  border-color: #34d399;
  background: #34d399;
}
.wp-mini-range .mr-now.near-g,
.wp-mini-range .mr-now.near-y {
  border-color: #fbbf24;
}

@media (max-width: 760px) {
  .wp-cmd-hud {
    padding: 10px;
  }
  .wp-cmd-sep {
    display: none;
  }
  .wp-cmd-tier1,
  .wp-cmd-tier2,
  .wp-cmd-left,
  .wp-cmd-right {
    width: 100%;
  }
  .wp-sel {
    width: 100%;
  }
  .wp-sel label {
    flex: 1 1 130px;
  }
  .wp-sel input,
  .wp-sel select {
    width: 100%;
  }
}
/* light theme: unpressed chips sat on the open sky at 390px (3.9:1) */
html[data-theme=light] .wp-chips button[aria-pressed=false]{background:#fffaf0;color:#3d372b;border-color:#d9c79f}
html[data-theme=light] :is(.fb-legend button, .wp-gb button){color:#3d372b}
/* measured with contrast_pixels.py 2026-10-23: bubble tickers were white/grey on bright sector fills (2.0-3.5:1),
   legend counts grey (3.7-4.5:1), stat counts gold on cream (4.4:1), lane hint grey on blue (4.4:1) */
.fb-bub b{color:#0b1220!important}
html[data-theme=dark] .fb-legend button b{color:#c3cede}
html[data-theme=light] .fb-legend button b{color:#3f4c5e}
html[data-theme=light] .fb-stats b{color:#6b4700}
html[data-theme=light] .wp-lane-h small{color:#3b4a60}
html[data-theme=dark] .wp-lane-h small{color:#b9c6da}
html[data-theme=light] #fbStats b{color:#6b4700!important}
html[data-theme=light] #fbLegend button{color:#2f3640!important}
html[data-theme=dark] #wp-filters button[aria-pressed=false] b{color:#c3cede!important}
html[data-theme=light] #wp-filters button[aria-pressed=false] b{color:#3f4c5e!important}
/* these two groups opt out of the shell light adapter (data-ak-lf-skip) and carry their own inks */
html[data-theme=light] #wp-groupby button[aria-pressed=false]{color:#3d372b}
html[data-theme=dark] #fbLegend button{color:#d5deeb}
html[data-theme=light] #fbLegend button b{color:#3f4c5e!important}
html[data-theme=dark] #fbLegend button b{color:#c3cede!important}
/* light theme: tone-coloured key numbers need ink on the day sky (gold #fbbf24 on white = 1.4:1) */
html[data-theme=light] .dsh-k b.t-g{color:var(--aku-good-ink)}html[data-theme=light] .dsh-k b.t-r{color:var(--aku-bad-ink)}html[data-theme=light] .dsh-k b.t-a{color:var(--aku-warn-ink)}

/* === WATCHLIST v11 · HARMONIOUS SKY-BLUE / OCEAN-TEAL / EMERALD-MINT THEME ON CATALOGUE B SURFACES (Audi 2026-10-27) === */
body.ff-wl {
  --wl-blue: oklch(from var(--aku-sky-2) .915 .045 h);
  --wl-mint: oklch(from var(--aku-accent) .935 .055 h);
  --wl-paper: var(--aku-paper);
  --wl-ink: var(--aku-ink);
  --wl-ink2: var(--aku-ink-2);
  --wl-ink3: color-mix(in srgb, var(--aku-ink) 78%, var(--aku-ink-2));
  --wl-accent-blue: color-mix(in srgb, var(--aku-w-knowledge) 44%, var(--aku-ink));
  --wl-accent-teal: color-mix(in srgb, var(--aku-w-focus) 42%, var(--aku-ink));
  --wl-accent-mint: color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-ink));
  --wl-edge: color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-paper));
  --wl-border-soft: color-mix(in srgb, var(--aku-w-knowledge) 36%, var(--aku-paper));
  --wl-border-mint: color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-paper));
  --wl-rule: color-mix(in srgb, var(--aku-w-knowledge) 24%, var(--aku-paper));
  --wl-surface:
    radial-gradient(ellipse at 92% 12%, color-mix(in srgb, var(--wl-mint) 82%, transparent), transparent 58%),
    linear-gradient(125deg, var(--wl-blue) 0%, var(--aku-paper) 50%, var(--wl-mint) 100%);
  --wl-card: linear-gradient(145deg, var(--aku-paper) 42%, var(--wl-mint) 100%);
  --wl-card-alt: linear-gradient(145deg, var(--aku-paper) 46%, var(--wl-blue) 100%);
  --wp-ink: var(--wl-ink);
  --wp-ink2: var(--wl-ink2);
  --wp-ink3: var(--wl-ink3);
  --wp-up: var(--wl-accent-mint);
  --wp-down: var(--aku-down-ink);
  --wp-gold: var(--wl-accent-teal);
  --wp-edge: var(--wl-edge);
  --wp-card: var(--wl-card);
  --near-g: var(--wl-accent-mint);
  --near-y: var(--wl-accent-teal);
  --z-in: var(--wl-accent-mint);
  --z-ng: var(--wl-accent-mint);
  --z-ny: var(--wl-accent-teal);
  --z-far: var(--wl-ink2);
}
html[data-theme="light"] body.ff-wl {
  --wl-blue: oklch(from var(--aku-sky-2) .94 .038 h);
  --wl-mint: oklch(from var(--aku-accent) .95 .048 h);
  --wp-ink: var(--wl-ink);
  --wp-ink2: var(--wl-ink2);
  --wp-ink3: var(--wl-ink3);
  --wp-up: var(--wl-accent-mint);
  --wp-down: var(--aku-down-ink);
  --wp-gold: var(--wl-accent-teal);
  --wp-edge: var(--wl-edge);
  --wp-card: var(--wl-card);
  --near-g: var(--wl-accent-mint);
  --near-y: var(--wl-accent-teal);
}

/* 1. Grouped Hero Stage (.wp-hero) & Harmonious KPI Cards (.wp-kpi / .wp-stat) */
body.ff-wl .wp-hero {
  position: relative;
  margin: 0 0 24px;
  padding: clamp(22px, 2.8vw, 32px) !important;
  border-radius: 26px !important;
  border: 1.5px solid var(--wl-edge) !important;
  background:
    linear-gradient(90deg, var(--aku-w-knowledge), var(--aku-w-focus), var(--aku-w-finance)) 0 0 / 100% 4px no-repeat,
    var(--wl-surface) !important;
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 24px 48px -26px rgba(4, 10, 24, 0.52) !important;
  color: var(--wl-ink) !important;
  overflow: hidden;
}
html[data-theme="light"] body.ff-wl .wp-hero {
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 18px 36px -24px rgba(20, 47, 73, 0.2) !important;
}
body.ff-wl .ff-eb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aku-w-finance) 16%, var(--aku-paper));
  border: 1px solid var(--wl-border-mint);
  color: var(--wl-accent-mint) !important;
  font: 700 0.76rem/1.2 var(--aku-font-body) !important;
  letter-spacing: 0.04em;
}
body.ff-wl .wp-hero .ff-title {
  color: var(--wl-ink) !important;
  font: 800 clamp(2.1rem, 4.2vw, 3.1rem)/1.08 var(--aku-font-head) !important;
  margin: 8px 0 6px !important;
}
body.ff-wl .wp-hero .ff-title span {
  color: var(--wl-accent-mint) !important;
}
body.ff-wl .wp-hero .wp-lede {
  max-width: 64ch;
  color: var(--wl-ink2) !important;
  font: 500 1.02rem/1.68 var(--aku-font-body) !important;
}
@media (min-width: 761px) {
  body.ff-wl .wp-hero .ff-title,
  body.ff-wl .wp-hero .wp-lede {
    padding-right: 176px;
  }
}
@media (max-width: 760px) {
  body.ff-wl .wp-hero .wp-hero-top .ff-eb {
    max-width: calc(100% - 76px);
  }
  body.ff-wl .wp-hero .ff-sticker {
    width: 56px !important;
    height: 56px !important;
    top: 12px !important;
    right: 12px !important;
  }
}
body.ff-wl .wp-util-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper)) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue)) !important;
  color: var(--wl-ink) !important;
  font: 700 0.8rem/1 var(--aku-font-body) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 2px 6px -2px rgba(20, 47, 73, 0.12);
  transition: translate 140ms ease, border-color 140ms ease, background 140ms ease !important;
}
body.ff-wl .wp-util-link:hover {
  translate: 0 -1.5px;
  border-color: var(--wl-accent-mint) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint)) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-hero .wp-kpi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 20px !important;
  margin: 20px 0 14px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
@media (max-width: 860px) {
  body.ff-wl .wp-hero .wp-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  body.ff-wl .wp-hero .wp-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px !important;
  }
}
body.ff-wl .wp-hero .wp-stat {
  --sc: rgb(4, 120, 87);
  --sedge: rgb(5, 150, 105);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 5px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--sedge) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px 6px 14px !important;
  color: var(--wl-ink) !important;
  text-align: left !important;
  cursor: pointer;
  transition: translate 150ms ease, border-color 150ms ease, filter 150ms ease !important;
}
body.ff-wl .wp-hero .wp-stat.all {
  --sc: rgb(29, 78, 216);
  --sedge: rgb(37, 99, 235);
}
body.ff-wl .wp-hero .wp-stat.good {
  --sc: rgb(4, 120, 87);
  --sedge: rgb(5, 150, 105);
}
body.ff-wl .wp-hero .wp-stat.near {
  --sc: rgb(180, 83, 9);
  --sedge: rgb(217, 119, 6);
}
body.ff-wl .wp-hero .wp-stat.star {
  --sc: rgb(190, 24, 93);
  --sedge: rgb(219, 39, 119);
}
body.ff-wl .wp-hero .wp-stat.trend {
  --sc: rgb(109, 40, 217);
  --sedge: rgb(124, 58, 237);
}
body.ff-wl .wp-hero .wp-stat-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
body.ff-wl .wp-hero .wp-stat .ic {
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: none;
  padding: 0 !important;
}
body.ff-wl .wp-hero .wp-stat .ic svg,
body.ff-wl .wp-hero .wp-stat .ic .ak-px {
  width: 28px !important;
  height: 28px !important;
}
body.ff-wl .wp-hero .wp-stat-pill {
  display: inline-flex;
  align-items: center;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sc) !important;
  font: 700 12px/1.2 var(--aku-font-body) !important;
  white-space: nowrap;
}
body.ff-wl .wp-hero .wp-stat-val {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}
body.ff-wl .wp-hero .wp-stat-unit {
  font: 500 12px/1 var(--aku-font-body) !important;
  font-style: normal;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-hero .wp-stat:hover,
body.ff-wl .wp-hero .wp-stat[aria-pressed="true"] {
  translate: 0 -2px !important;
  filter: saturate(1.08);
  border-bottom-color: var(--sedge) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ff-wl .wp-hero .wp-stat b {
  color: var(--sc, var(--wl-ink)) !important;
  font: 800 22px/1.1 var(--aku-font-mono) !important;
}
body.ff-wl .wp-hero .wp-stat small {
  color: var(--wl-ink) !important;
  font: 600 14px/1.35 var(--aku-font-body) !important;
}
body.ff-wl .wq-sample-tk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.ff-wl .wq-line h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.ff-wl .wp-hero .wp-note {
  margin: 10px 0 0 !important;
  padding: 3px 0 3px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-left: 3px solid var(--wl-accent-mint) !important;
  color: var(--wl-ink2) !important;
  font: 500 0.85rem/1.55 var(--aku-font-body) !important;
}

/* 2. Watchlist Workspace Header & V11 3D Tactile Sub-Navigation (.wp-tabs-head + nav.wp-tabs) */
body.ff-wl .wp-tabs-head {
  margin: 24px 0 0;
  padding: 20px 24px 16px;
  border-radius: 22px 22px 0 0;
  border: 1.5px solid var(--wl-edge);
  border-bottom: 0;
  background:
    linear-gradient(90deg, var(--aku-w-knowledge), var(--aku-w-focus), var(--aku-w-finance)) 0 0 / 100% 4px no-repeat,
    var(--wl-surface);
  display: grid;
  gap: 6px;
}
body.ff-wl .wp-tabs-head .ff-eb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aku-w-finance) 16%, var(--aku-paper));
  border: 1px solid var(--wl-border-mint);
  color: var(--wl-accent-mint) !important;
  font: 700 0.75rem/1.2 var(--aku-font-body) !important;
}
body.ff-wl .wp-sec-h {
  margin: 2px 0 0;
  font: 800 clamp(1.35rem, 2.3vw, 1.7rem)/1.25 var(--aku-font-head);
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-tabs-sub {
  margin: 0;
  font: 400 0.92rem/1.6 var(--aku-font-body);
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-tabs-sub b {
  color: var(--wl-ink) !important;
  font-weight: 700;
}

body.ff-wl nav.wp-tabs {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 12px 24px 16px !important;
  border-radius: 0 0 22px 22px !important;
  border: 1.5px solid var(--wl-edge) !important;
  border-top: 1px solid var(--wl-rule) !important;
  background: color-mix(in srgb, var(--aku-paper) 92%, var(--wl-blue)) !important;
  box-shadow: 0 16px 32px -22px rgba(4, 10, 24, 0.45) !important;
}
body.ff-wl nav.wp-tabs button {
  min-height: 42px !important;
  padding: 8px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-bottom-width: 3px !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper)) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue)) !important;
  color: var(--wl-ink) !important;
  font: 700 0.92rem/1.2 var(--aku-font-body) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 8px -3px rgba(20, 47, 73, 0.14) !important;
  cursor: pointer;
  transition: translate 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}
body.ff-wl nav.wp-tabs button:hover {
  translate: 0 -2px !important;
  border-color: var(--wl-accent-mint) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint)) !important;
  color: var(--wl-ink) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 5px 12px -4px rgba(16, 185, 129, 0.22) !important;
}
body.ff-wl nav.wp-tabs button[aria-selected="true"] {
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 55%, var(--wl-mint)), color-mix(in srgb, var(--aku-w-finance) 32%, var(--wl-mint))) !important;
  color: var(--wl-ink) !important;
  border-color: color-mix(in srgb, var(--aku-w-finance) 52%, var(--aku-paper)) !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-finance) 64%, var(--aku-ink)) !important;
  border-bottom-width: 3px !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 4px 10px -4px rgba(16, 185, 129, 0.24) !important;
}
body.ff-wl .wp-tab-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: var(--wl-ink2);
  font: 800 1.1rem/1 var(--aku-font-mono);
  opacity: 0.65;
  user-select: none;
}
@media (max-width: 640px) {
  body.ff-wl .wp-tabs-head,
  body.ff-wl nav.wp-tabs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.ff-wl .wp-tab-sep {
    display: none;
  }
}

/* 3. Catalogue B Panel Stage (section.wp-panel) */
body.ff-wl section.wp-panel {
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 24px;
  border: 1.5px solid var(--wl-edge);
  background: var(--wl-surface);
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 22px 44px -26px rgba(4, 10, 24, 0.5);
  color: var(--wl-ink);
}
html[data-theme="light"] body.ff-wl section.wp-panel {
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 16px 34px -24px rgba(20, 47, 73, 0.18);
}

/* 4. Guest Gate, Tactical Callout & Active Banner */
body.ff-wl .wp-guest-gate {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--wl-border-mint);
  border-left: 5px solid var(--wl-accent-mint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aku-accent) 26%, var(--aku-paper)), var(--aku-paper)) !important;
  color: var(--wl-ink);
}
.wp-guest-gate[hidden] {
  display: none !important;
}
body.ff-wl .wp-gg-copy h3 {
  margin: 6px 0;
  font: 800 1.18rem/1.35 var(--aku-font-head);
  color: var(--wl-ink);
}
body.ff-wl .wp-gg-copy p {
  margin: 0;
  font: 400 0.92rem/1.6 var(--aku-font-body);
  color: var(--wl-ink2);
}
.wp-guest-more {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px dashed var(--wl-border-mint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aku-accent) 22%, var(--aku-paper)), var(--aku-paper)) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  color: var(--wl-ink);
}
.wp-guest-more b {
  font: 700 0.96rem/1.4 var(--aku-font-body);
  color: var(--wl-ink);
}
.wp-guest-more div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 5. Command HUD (.wp-cmd-hud) & Quiet Collection Filters (#wp-filters, #wp-groupby) */
body.ff-wl .wp-cmd-hud {
  border: 1px solid var(--wl-border-soft) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--aku-paper) 84%, var(--wl-blue)) !important;
  padding: 12px 16px !important;
  margin: 0 0 16px !important;
  display: grid;
  gap: 10px;
  box-shadow: inset 0 1px 0 var(--aku-paper);
}
body.ff-wl .wp-cmd-tier1 {
  border-bottom: 1px solid var(--wl-rule) !important;
}
body.ff-wl .wp-cmd-left .wp-count {
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-cmd-sep {
  color: var(--wl-rule) !important;
}
body.ff-wl #wp-filters button,
body.ff-wl .wp-gb button {
  color: var(--wl-ink2) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
body.ff-wl #wp-filters button.wp-f-member {
  color: var(--wl-accent-mint) !important;
  font-weight: 700 !important;
}
body.ff-wl #wp-filters button:hover,
body.ff-wl .wp-gb button:hover {
  color: var(--wl-ink) !important;
  background: color-mix(in srgb, var(--aku-w-knowledge) 12%, transparent) !important;
}
body.ff-wl #wp-filters button[aria-pressed="true"],
body.ff-wl .wp-gb button[aria-pressed="true"] {
  color: var(--wl-ink) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--wl-accent-mint) !important;
  background: color-mix(in srgb, var(--aku-w-finance) 18%, var(--aku-paper)) !important;
}
body.ff-wl #wp-filters button b,
body.ff-wl #wp-filters button[aria-pressed="false"] b,
body.ff-wl #wp-filters button[aria-pressed="true"] b {
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-tools input,
body.ff-wl .wp-tools select,
body.ff-wl .wp-add input,
body.ff-wl .wp-row input,
body.ff-wl .wp-rq-form input,
body.ff-wl .wq-edit :is(input, select, textarea) {
  background: var(--aku-paper) !important;
  color: var(--wl-ink) !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-radius: 10px !important;
  color-scheme: light !important;
}
body.ff-wl .wp-tools input::placeholder,
body.ff-wl .wp-add input::placeholder,
body.ff-wl .wp-rq-form input::placeholder {
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-view {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-radius: 10px !important;
  padding: 3px !important;
}
body.ff-wl .wp-view button {
  color: var(--wl-ink2) !important;
  border-radius: 7px !important;
}
body.ff-wl .wp-view button[aria-pressed="true"] {
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-accent) 68%, var(--aku-paper)), color-mix(in srgb, var(--aku-w-finance) 42%, var(--wl-mint))) !important;
  color: var(--wl-ink) !important;
  border-bottom-color: var(--wl-accent-mint) !important;
  font-weight: 700 !important;
}
body.ff-wl .wp-drawer-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-bottom-width: 2.5px !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper)) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue)) !important;
  color: var(--wl-ink) !important;
  font: 700 0.82rem/1 var(--aku-font-body) !important;
  cursor: pointer;
}
body.ff-wl .wp-drawer-btn:hover,
body.ff-wl .wp-drawer-btn[aria-expanded="true"] {
  border-color: var(--wl-accent-mint) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint)) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-drawer-sheet {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-mint) !important;
  border-left: 4px solid var(--wl-accent-mint) !important;
  border-radius: 14px;
  color: var(--wl-ink) !important;
}

/* 6. Grouped Lanes (.wp-lane), Collectible Tiles (.wp-tile), & Selectable Card Rows (.wp-row, .mp-row) */
body.ff-wl .wp-lanes {
  gap: 14px !important;
}
body.ff-wl .wp-lane {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-shadow: 0 8px 20px -16px rgba(20, 47, 73, 0.22) !important;
}
body.ff-wl .wp-lane-h {
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-lane-h small {
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-lane-h .n {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-soft) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-tile {
  background: var(--aku-paper) !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-bottom-width: 3px !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-knowledge) 48%, var(--aku-paper)) !important;
  border-radius: 14px !important;
  color: var(--wl-ink) !important;
  box-shadow: 0 6px 14px -10px rgba(20, 47, 73, 0.16) !important;
}
body.ff-wl .wp-tile:hover {
  translate: 0 -2px;
  border-color: var(--wl-accent-mint) !important;
}
body.ff-wl .wp-tile.in {
  border-top: 3px solid var(--wl-accent-mint) !important;
}
body.ff-wl .wp-tile.near-g,
body.ff-wl .wp-tile.near-y {
  border-top: 3px solid var(--wl-accent-teal) !important;
}
body.ff-wl .wp-tile:has(.st) {
  border-color: var(--wl-accent-mint) !important;
  box-shadow: inset 0 3px 0 var(--aku-w-finance) !important;
}
body.ff-wl .wp-more {
  margin-top: 12px !important;
  border: 1px dashed var(--wl-border-soft) !important;
  border-radius: 10px !important;
  background: var(--aku-paper) !important;
  color: var(--wl-ink) !important;
  font-weight: 700 !important;
}

body.ff-wl .wp-list,
body.ff-wl .mp-list {
  display: grid;
  gap: 10px !important;
  border: 0 !important;
}
body.ff-wl :is(.wp-row, .mp-row) {
  background: var(--wl-card) !important;
  border: 1px solid var(--wl-border-mint) !important;
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-finance) 52%, var(--aku-paper)) !important;
  border-radius: 14px !important;
  padding: 14px 16px 14px 18px !important;
  box-shadow: 0 8px 18px -14px rgba(20, 47, 73, 0.18) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl :is(.wp-row, .mp-row):hover {
  background: linear-gradient(145deg, var(--aku-paper), color-mix(in srgb, var(--aku-accent) 34%, var(--wl-mint))) !important;
  border-color: var(--wl-accent-mint) !important;
}
body.ff-wl :is(.wp-row, .mp-row)::before {
  width: 4px !important;
}
body.ff-wl .wp-row :is(b, small, i, .wp-lock-em, .wp-mem-lock, a.deep, .tg, .tr),
body.ff-wl .mp-row :is(b, small, i, em, .mp-why, .mp-z, .mp-slv-tag) {
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-row .buy.in i,
body.ff-wl .mp-z.in {
  color: var(--wl-accent-mint) !important;
}
body.ff-wl .wp-row :is(.buy.near-g, .buy.near-y) i,
body.ff-wl :is(.mp-z.near-g, .mp-z.near-y) {
  color: var(--wl-accent-teal) !important;
}
body.ff-wl .ai-tag {
  color: var(--wl-ink) !important;
}

/* 7. Primary & Secondary Buttons (.wp-btn, .wp-add, .wp-copy, .wp-edit, .wp-empty) — Canonical A+ (.aku-cta) + V11 (.aku-control) */
body.ff-wl .wp-add {
  background: var(--wl-card-alt) !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
body.ff-wl .wp-add label {
  color: var(--wl-ink) !important;
  font-weight: 600;
}
body.ff-wl .wp-add button:not(.aku-cta),
body.ff-wl .wp-btn:not(.aku-cta) {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--aku-w-finance) 52%, var(--aku-paper)) !important;
  border-bottom: 3px solid color-mix(in srgb, var(--aku-w-finance) 64%, var(--aku-ink)) !important;
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 55%, var(--wl-mint)), color-mix(in srgb, var(--aku-w-finance) 32%, var(--wl-mint))) !important;
  color: var(--wl-ink) !important;
  font: 700 0.875rem/1 var(--aku-font-body) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 4px 10px -4px rgba(16, 185, 129, 0.22) !important;
  transition: translate 150ms ease, box-shadow 150ms ease, border-color 150ms ease !important;
}
body.ff-wl .wp-add button:not(.aku-cta):hover,
body.ff-wl .wp-btn:not(.aku-cta):hover {
  translate: 0 -2px;
  border-color: var(--wl-accent-mint) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 14px -4px rgba(16, 185, 129, 0.3) !important;
}
body.ff-wl .wp-ghost:not(.aku-cta):not(.aku-control),
body.ff-wl .wp-copy:not(.aku-cta):not(.aku-control),
body.ff-wl .wp-edit:not(.aku-cta):not(.aku-control),
body.ff-wl .mp-cap-btn {
  border-radius: 10px !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-bottom-width: 2.5px !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper)) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue)) !important;
  color: var(--wl-ink) !important;
  font: 700 0.875rem/1.2 var(--aku-font-body) !important;
}
body.ff-wl .wp-copy.on:not(.aku-cta) {
  border-radius: 999px !important;
  border: 1.5px solid var(--wl-border-mint) !important;
  background: color-mix(in srgb, var(--aku-w-finance) 18%, var(--aku-paper)) !important;
  color: var(--wl-accent-mint) !important;
  padding: 0 14px !important;
  min-height: 36px !important;
}
body.ff-wl .mp-cap-btn[aria-pressed="true"] {
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 55%, var(--wl-mint)), color-mix(in srgb, var(--aku-w-finance) 32%, var(--wl-mint))) !important;
  color: var(--wl-ink) !important;
  border-color: var(--wl-accent-mint) !important;
}
/* Ensure canonical .aku-cta inside rows/forms keeps its exact pill height, white icon badge & arrow disc */
html body.ff-wl .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3) {
  font-size: 14px !important;
  width: auto !important;
  flex: none !important;
  align-self: center;
}
html body.ff-wl :is(.wp-add, .wq-form-row) .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3) {
  align-self: flex-end !important;
  margin: 0 !important;
}
body.ff-wl .wp-add input {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
}
html body.ff-wl .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3) .aku-cta-tx {
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html body.ff-wl .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3) .aku-cta-ar,
html body.ff-wl .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3) .aku-cta-ar span {
  color: var(--ink) !important;
  font-size: 14px !important;
}
html body.ff-wl .aku-cta.aku-cta--take.aku-cta--ghost:not(#aku1):not(#aku2):not(#aku3),
html body.ff-wl .aku-cta.aku-cta--take.aku-cta--ghost:not(#aku1):not(#aku2):not(#aku3) .aku-cta-tx {
  color: color-mix(in srgb, var(--edge) 75%, #000) !important;
}
html body.ff-wl .aku-control--quiet {
  color: var(--wl-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 14px/1.3 var(--aku-font-body) !important;
}
html body.ff-wl .aku-control--quiet:hover {
  color: var(--wl-accent-mint) !important;
  text-decoration: underline !important;
}
body.ff-wl .wp-empty {
  background: var(--aku-paper) !important;
  border: 1.5px dashed var(--wl-border-soft) !important;
  border-radius: 16px !important;
  color: var(--wl-ink) !important;
  padding: 24px 20px !important;
}
body.ff-wl .wp-empty a,
body.ff-wl .wp-disc a {
  color: var(--wl-accent-mint) !important;
  font-weight: 700;
}
body.ff-wl .wp-disc {
  color: var(--wl-ink2) !important;
}

/* 8. Model Portfolio (.mp-hero, .mp-alloc, .mp-slv, .mp-gate) & Request Desk (.wp-rq) */
body.ff-wl .mp-hero,
body.ff-wl .mp-alloc {
  background: var(--wl-card-alt) !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .mp-sleeves {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (max-width: 1180px) {
  body.ff-wl .mp-sleeves {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  body.ff-wl .mp-sleeves {
    grid-template-columns: 1fr !important;
  }
}
body.ff-wl .mp-slv {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-left: 4px solid var(--sc, var(--wl-accent-mint)) !important;
  border-radius: 12px !important;
  padding: 14px 15px !important;
  color: var(--wl-ink) !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.ff-wl .mp-slv .pct {
  color: var(--wl-accent-mint) !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
}
body.ff-wl .mp-slv small {
  color: var(--wl-ink2) !important;
}
body.ff-wl .mp-gate {
  background: linear-gradient(135deg, color-mix(in srgb, var(--aku-accent) 26%, var(--aku-paper)), var(--aku-paper)) !important;
  border: 1.5px dashed var(--wl-border-mint) !important;
  border-radius: 16px !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .mp-diff-note {
  margin: 10px 0 0 !important;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--wl-accent-mint);
  background: var(--aku-paper);
  font: 500 0.86rem/1.55 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-inline-jump {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--wl-accent-mint);
  font: 700 0.86rem/1.4 var(--aku-font-body);
  cursor: pointer;
  text-decoration: underline;
}

body.ff-wl .wp-rq {
  background: var(--wl-card-alt) !important;
  border: 1.5px solid var(--wl-border-soft) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-rq-hd .ff-eb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aku-w-finance) 16%, var(--aku-paper));
  border: 1px solid var(--wl-border-mint);
  color: var(--wl-accent-mint) !important;
  font: 700 0.75rem/1.2 var(--aku-font-body) !important;
}
body.ff-wl .wp-rq-hd h2,
body.ff-wl .wp-rq-sub {
  color: var(--wl-ink) !important;
}
.wq-compare-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .wq-compare-strip {
    grid-template-columns: 1fr;
  }
}
body.ff-wl .wq-cmp-col,
body.ff-wl .wq-cmp-card {
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid var(--wl-border-soft);
  border-left: 4px solid var(--wl-accent-blue);
  background: var(--aku-paper);
  display: grid;
  gap: 5px;
  align-content: start;
  color: var(--wl-ink);
}
body.ff-wl .wq-cmp-col.member,
body.ff-wl .wq-cmp-card.member {
  border-left-color: var(--wl-accent-mint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aku-accent) 22%, var(--aku-paper)), var(--aku-paper));
}
body.ff-wl .wq-cmp-tag {
  font: 700 0.76rem/1.3 var(--aku-font-body);
  color: var(--wl-accent-mint);
}
body.ff-wl .wq-cmp-col b,
body.ff-wl .wq-cmp-card b {
  font: 700 0.96rem/1.4 var(--aku-font-body);
  color: var(--wl-ink);
}
body.ff-wl .wq-cmp-col small,
body.ff-wl .wq-cmp-card small {
  font: 400 0.86rem/1.55 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wq-cmp-link {
  justify-self: start;
  margin-top: 4px;
  font: 700 0.84rem/1.4 var(--aku-font-body);
  color: var(--wl-accent-mint);
  text-decoration: underline;
}
body.ff-wl .wp-rq-steps li {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border-soft) !important;
  border-bottom-width: 3px !important;
  border-bottom-color: color-mix(in srgb, var(--aku-w-knowledge) 48%, var(--aku-paper)) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-rq-steps b,
body.ff-wl .wp-rq-steps small {
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-rq-box {
  background: color-mix(in srgb, var(--aku-paper) 88%, var(--wl-mint)) !important;
  border: 1.5px dashed var(--wl-border-mint) !important;
  color: var(--wl-ink) !important;
}
.wq-gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  align-items: center;
}
@media (max-width: 760px) {
  .wq-gate-grid {
    grid-template-columns: 1fr;
  }
}
.wq-gate-btns,
.wq-gate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
body.ff-wl .wq-sample-card {
  padding: 15px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--wl-accent-mint);
  background: var(--aku-paper) !important;
  display: grid;
  gap: 8px;
  color: var(--wl-ink) !important;
}
body.ff-wl .wq-sample-eb {
  font: 700 0.78rem/1.3 var(--aku-font-body);
  color: var(--wl-accent-mint);
}
body.ff-wl .wq-sample-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--wl-ink);
}
body.ff-wl .wq-sample-res {
  display: grid;
  gap: 4px;
  color: var(--wl-ink);
}
body.ff-wl .wq-sample-res small {
  color: var(--wl-ink2);
  line-height: 1.5;
}

.wp-rq-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.wq-form-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1.45fr) auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 760px) {
  .wq-form-row {
    grid-template-columns: 1fr;
  }
}
.wq-quick-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
body.ff-wl .wq-quick-chips span {
  font: 600 0.82rem/1.4 var(--aku-font-body);
  color: var(--wl-ink);
}
body.ff-wl .wq-quick-chips button {
  min-height: 32px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--wl-border-soft);
  background: var(--aku-paper);
  color: var(--wl-ink);
  font: 600 0.8rem/1 var(--aku-font-body);
  cursor: pointer;
}
body.ff-wl .wq-quick-chips button:hover {
  border-color: var(--wl-accent-mint);
  background: color-mix(in srgb, var(--aku-accent) 26%, var(--aku-paper));
}

.wq-list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 18px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wl-rule);
}
.wq-list-bar .wp-rq-list-h {
  margin: 0 !important;
  color: var(--wl-ink) !important;
}
.wq-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
body.ff-wl .wq-filter-bar button {
  min-height: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: var(--wl-ink2);
  font: 600 0.82rem/1 var(--aku-font-body);
  cursor: pointer;
}
body.ff-wl .wq-filter-bar button[aria-pressed="true"] {
  border-bottom-color: var(--wl-accent-mint);
  background: color-mix(in srgb, var(--aku-w-finance) 18%, var(--aku-paper));
  color: var(--wl-ink);
  font-weight: 700;
}
body.ff-wl .wq-row {
  background: var(--wl-card) !important;
  border: 1px solid var(--wl-border-mint) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 10px;
  color: var(--wl-ink) !important;
}

.wp-cmd-hud[hidden],
.wq-sample-card[hidden],
.wp-rq-form[hidden] {
  display: none !important;
}
.wp-gg-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.wp-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}
body.ff-wl #slime-mate {
  display: none !important;
}
body.ff-wl,
body.ff-wl :is(button, input, select, textarea, optgroup) {
  font-family: var(--aku-font-body);
}
body.ff-wl :is(.wp-stat, .wp-stat-l, .wp-stat-i, .fb-bub, .fb-b-tk, .fb-b-nm) {
  font-family: var(--aku-font-body) !important;
}
body.ff-wl :is(.wp-stat-n, .fb-b-votes, .fb-b-rank) {
  font-family: var(--aku-font-mono) !important;
}

/* Mobile 390px sticker clearance + Zero Box-in-Box + 4-level type scale lock */
@media (max-width: 720px) {
  body.ff-wl .wp-hero .ff-sticker {
    width: 68px !important;
    height: 68px !important;
    top: 14px !important;
    right: 14px !important;
  }
  body.ff-wl .wp-hero-top {
    padding-right: 78px !important;
  }
}

body.ff-wl .ff-eb,
body.ff-wl .fb-eb {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--wl-accent-mint) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  box-shadow: none !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-util-link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--wl-border-sky) !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  box-shadow: none !important;
}
body.ff-wl .fb-mode-bar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wl-rule) !important;
  border-radius: 0 !important;
}
body.ff-wl .fb-field {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  isolation: isolate;
}
body.ff-wl .fb-field::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(600px 280px at 22% 18%, rgba(56, 189, 248, 0.14), transparent 70%),
    radial-gradient(520px 260px at 78% 82%, rgba(20, 184, 166, 0.14), transparent 70%),
    linear-gradient(180deg, var(--aku-night) 0%, var(--aku-sky-2) 100%);
  border: 1.5px solid var(--wl-border-sky);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px -14px rgba(10, 31, 46, 0.35);
  z-index: -1;
  pointer-events: none;
}
body.ff-wl .fb-logo {
  border: 0 !important;
  outline: 1.5px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.18) !important;
  background-image: none !important;
}
body.ff-wl .wp-panel > .wp-add,
body.ff-wl .wp-panel > .wp-empty.big {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wl-rule) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}

/* 4-level body type scale: 12px caption · 14px meta/controls · 16px body · 22px stat/subhead + display */
body.ff-wl :is(.ff-eb, .fb-eb, .fb-qk-lbl, .fb-sec-pill, .fb-sec-pill b, .wp-foot, .wp-add label span, .fb-stat span) {
  font-size: 12px !important;
}
body.ff-wl :is(.wp-util-link, .wp-stat-l, .wp-note, .fb-sub, .fb-input, .fb-submit, .fb-heart-open, .fb-qk-chip, .fb-mode, .fb-foot-note, .wp-tabs-sub, .wp-tab, .wp-add input, .wp-btn, .wp-empty, .wp-empty p, .wp-empty-cta) {
  font-size: 14px !important;
}
body.ff-wl :is(.wp-lede, .fb-b-tk, .fb-b-nm) {
  font-size: 16px !important;
}
body.ff-wl :is(.wp-stat-n, .fb-stat b, .wp-tabs-head h2) {
  font-size: 22px !important;
}
body.ff-wl .fb-head h2 {
  font-size: 36px !important;
}
body.ff-wl .wp-hero h1.ff-title {
  font-size: 48px !important;
}

/* === INNER DIALOGS, DRAWERS & HIDDEN STATES — CATALOGUE B (BLUE / WHITE / MINT) LOCK (Audi 2026-10-28) === */
body.ff-wl #wp-peek.wp-peek,
html:not([data-theme="light"]) body.ff-wl #wp-peek.wp-peek,
html[data-theme="light"] body.ff-wl #wp-peek.wp-peek {
  --k-g: rgb(4, 120, 87);
  --k-a: rgb(180, 83, 9);
  --k-r: rgb(185, 28, 28);
  --z-in: rgb(4, 120, 87);
  --z-ng: rgb(5, 150, 105);
  --z-ny: rgb(180, 83, 9);
  --z-far: rgb(71, 85, 105);
  border: 1.5px solid var(--wl-border-mint, rgba(16, 185, 129, 0.42)) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, var(--aku-w-knowledge), var(--aku-w-focus), var(--aku-w-finance)) 0 0 / 100% 4px no-repeat,
    var(--wl-surface, linear-gradient(155deg, var(--aku-paper) 0%, var(--wl-blue, rgb(239, 246, 255)) 52%, var(--wl-mint, rgb(236, 253, 245)) 100%)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 30px 80px rgba(4, 10, 24, 0.48) !important;
  outline: none !important;
}

body.ff-wl .wp-peek-x {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28)) !important;
  border-bottom: 2.5px solid rgba(37, 99, 235, 0.44) !important;
  background: var(--aku-paper) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 8px -3px rgba(15, 23, 42, 0.14) !important;
}
body.ff-wl .wp-peek-x:hover {
  border-color: rgb(5, 150, 105) !important;
  background: var(--wl-mint, rgb(236, 253, 245)) !important;
}

body.ff-wl .wp-peek .dsh-hero {
  background: linear-gradient(135deg, var(--aku-paper) 45%, var(--wl-blue, rgb(239, 246, 255)) 100%) !important;
  box-shadow: inset 0 0 0 1.5px var(--wl-border, rgba(37, 99, 235, 0.24)), 0 6px 16px -10px rgba(15, 23, 42, 0.1) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .dsh-hero.v-g {
  background: linear-gradient(135deg, var(--aku-paper) 40%, var(--wl-mint, rgb(236, 253, 245)) 100%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, 0.45), 0 8px 20px -12px rgba(16, 185, 129, 0.25) !important;
}
body.ff-wl .wp-peek .dsh-hero .id small,
body.ff-wl .wp-peek .dsh-hero .vd span {
  color: var(--wl-ink-2, var(--aku-ink-2)) !important;
}
body.ff-wl .wp-peek .dsh-hero.v-g .vd strong,
body.ff-wl .wp-peek .dsh-hero.v-g2 .vd strong {
  color: rgb(4, 120, 87) !important;
}
body.ff-wl .wp-peek .dsh-hero.v-a .vd strong {
  color: rgb(180, 83, 9) !important;
}

body.ff-wl .wp-peek :is(.dsh-k, .dsh-s) {
  background: var(--aku-paper) !important;
  box-shadow: inset 0 0 0 1.5px var(--wl-border, rgba(37, 99, 235, 0.22)), 0 6px 14px -10px rgba(15, 23, 42, 0.08) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-g {
  background: linear-gradient(180deg, var(--wl-mint, rgb(236, 253, 245)), var(--aku-paper) 65%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, 0.42), inset 0 3px 0 rgb(5, 150, 105) !important;
}
body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-a {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.65), var(--aku-paper) 65%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.42), inset 0 3px 0 rgb(217, 119, 6) !important;
}
body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-r {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.6), var(--aku-paper) 65%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.38), inset 0 3px 0 rgb(220, 38, 38) !important;
}
body.ff-wl .wp-peek :is(.dsh-k, .dsh-s) small {
  color: var(--wl-ink-2, var(--aku-ink-2)) !important;
}
body.ff-wl .wp-peek .dsh-k .up { color: rgb(4, 120, 87) !important; }
body.ff-wl .wp-peek .dsh-k .down { color: rgb(185, 28, 28) !important; }
body.ff-wl .wp-peek .dsh-k .warn { color: rgb(180, 83, 9) !important; }
body.ff-wl .wp-peek .dsh-spark.up .ln { stroke: rgb(5, 150, 105) !important; }
body.ff-wl .wp-peek .dsh-spark.down .ln { stroke: rgb(220, 38, 38) !important; }
body.ff-wl .wp-peek .dsh-ladder li {
  background: var(--wl-blue, rgb(239, 246, 255)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .dsh-ladder li.now {
  background: var(--wl-mint, rgb(236, 253, 245)) !important;
  box-shadow: inset 3px 0 0 rgb(5, 150, 105) !important;
}
body.ff-wl .wp-peek .dsh-bar {
  --trk: rgba(37, 99, 235, 0.16) !important;
}
body.ff-wl .wp-peek .dsh-bar .mk.now {
  background: var(--wl-ink, rgb(15, 23, 42)) !important;
  box-shadow: 0 0 0 2px var(--aku-paper) !important;
}
body.ff-wl .wp-peek .dsh-mine {
  background: linear-gradient(135deg, var(--wl-mint, rgb(236, 253, 245)) 0%, var(--aku-paper) 55%, var(--wl-blue, rgb(239, 246, 255)) 100%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, 0.38), inset 4px 0 0 rgb(5, 150, 105) !important;
}
body.ff-wl .wp-peek .dsh-mine h5 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .dsh-mine .clip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24)) !important;
  background: var(--aku-paper) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  font: 600 0.86rem/1.35 var(--aku-font-body);
  text-decoration: none;
}
body.ff-wl .wp-peek .dsh-mine .clip:hover {
  border-color: rgb(5, 150, 105) !important;
  background: var(--wl-mint, rgb(236, 253, 245)) !important;
}

body.ff-wl .wp-peek .akd {
  --up: rgb(4, 120, 87);
  --down: rgb(185, 28, 28);
  --amber: rgb(180, 83, 9);
  --gold: rgb(29, 78, 216);
  --ink: var(--wl-ink, rgb(15, 23, 42));
  --muted: var(--wl-ink-2, rgb(51, 65, 85));
  --hair-soft: var(--wl-border, rgba(37, 99, 235, 0.22));
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .akd > .dt {
  background: var(--aku-paper) !important;
  box-shadow: inset 0 0 0 1.5px var(--wl-border, rgba(37, 99, 235, 0.22)), 0 6px 14px -10px rgba(15, 23, 42, 0.08) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .akd :is(.vt, .cs, .dt-biz, .dt-sum) {
  background: linear-gradient(155deg, var(--aku-paper) 60%, var(--wl-blue, rgb(239, 246, 255)) 100%) !important;
  border-color: var(--wl-border, rgba(37, 99, 235, 0.22)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-g {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: linear-gradient(180deg, var(--wl-mint, rgb(236, 253, 245)), var(--aku-paper)) !important;
}
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-g b { color: rgb(4, 120, 87) !important; }
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-a {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.65), var(--aku-paper)) !important;
}
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-a b { color: rgb(180, 83, 9) !important; }
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-r {
  border-color: rgba(239, 68, 68, 0.42) !important;
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.6), var(--aku-paper)) !important;
}
body.ff-wl .wp-peek .akd :is(.vt, .cs).t-r b { color: rgb(185, 28, 28) !important; }
body.ff-wl .wp-peek .akd .dt-sec span {
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  color: rgb(29, 78, 216) !important;
}

body.ff-wl .wp-peek-fav small {
  color: var(--wl-ink-2, var(--aku-ink-2)) !important;
}
body.ff-wl .wp-fav:not(.ic) {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(219, 39, 119, 0.38) !important;
  border-bottom: 2.5px solid rgba(190, 24, 93, 0.62) !important;
  background: linear-gradient(175deg, var(--aku-paper), rgba(252, 231, 243, 0.85)) !important;
  color: rgb(157, 23, 77) !important;
  font: 700 0.88rem/1 var(--aku-font-body) !important;
  cursor: pointer;
}
body.ff-wl .wp-favbox {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1.5px solid var(--wl-border-mint, rgba(16, 185, 129, 0.38)) !important;
  background: linear-gradient(145deg, var(--aku-paper) 50%, var(--wl-mint, rgb(236, 253, 245)) 100%) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 8px 20px -12px rgba(15, 23, 42, 0.12) !important;
}
body.ff-wl .wp-favbox .hd {
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-favbox .bks button {
  background: var(--aku-paper) !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-favbox .bks button[aria-pressed="true"] {
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229))) !important;
  border-color: rgb(5, 150, 105) !important;
  border-bottom: 2.5px solid rgb(4, 120, 87) !important;
}
body.ff-wl .wp-favbox .chips button {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border, rgba(37, 99, 235, 0.28)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .wp-favbox textarea {
  background: var(--aku-paper) !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.3)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  color-scheme: light;
}

/* Drawers (#wpSummaryDrawer, #wpGuideDrawer), Option box & Owner panel in Catalogue B */
body.ff-wl .ws-donut,
body.ff-wl .ws-stat,
body.ff-wl .al,
body.ff-wl .wp-optbox,
body.ff-wl .wp-own {
  background: linear-gradient(155deg, var(--aku-paper) 55%, var(--wl-blue, rgb(239, 246, 255)) 100%) !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 16px -10px rgba(15, 23, 42, 0.08) !important;
}
body.ff-wl .wp-ailine,
body.ff-wl .wp-opt {
  background: var(--aku-paper) !important;
  border: 1px solid var(--wl-border, rgba(37, 99, 235, 0.2)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .d-num,
body.ff-wl .ws-stat > b,
body.ff-wl .al-l b,
body.ff-wl .wp-optbox summary,
body.ff-wl .wp-opt b,
body.ff-wl .wp-keyline b {
  color: var(--wl-ink, var(--aku-ink)) !important;
}
body.ff-wl .d-lab,
body.ff-wl .ws-leg li span,
body.ff-wl .ws-stat > span,
body.ff-wl .ws-stat em,
body.ff-wl .al-l span,
body.ff-wl .wp-keyline,
body.ff-wl .wp-ailine small {
  color: var(--wl-ink-2, var(--aku-ink-2)) !important;
}
body.ff-wl .wp-ownf input {
  background: var(--aku-paper) !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  color-scheme: light;
}
body.ff-wl .tgc {
  background: var(--aku-paper) !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24)) !important;
  color: var(--wl-ink-2, var(--aku-ink-2)) !important;
}
body.ff-wl .tgc[aria-pressed="true"] {
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229))) !important;
  border-color: rgb(5, 150, 105) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
}

/* #wp-add 4-field layout (Ticker + Buy + Target + Optional Reason + CTA) & inline favline trigger (Audi 2026-10-28) */
body.ff-wl .wp-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}
body.ff-wl .wp-add label.wp-add-tk {
  flex: 0 1 132px;
}
body.ff-wl .wp-add label.wp-add-px {
  flex: 0 1 136px;
}
body.ff-wl .wp-add label.wp-add-why {
  flex: 1 1 240px;
}
body.ff-wl .wp-add label input {
  width: 100%;
}
body.ff-wl .wp-add label small {
  font-weight: 500;
  color: var(--wl-ink2);
}
body.ff-wl .wp-favline.muted {
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-favline-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--wl-accent-mint);
  font: 700 0.86rem/1.4 var(--aku-font-body);
  cursor: pointer;
  text-decoration: underline;
}
@media (min-width: 981px) {
  body.ff-wl .wp-row.mine.m2 {
    grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.05fr) auto;
  }
  body.ff-wl .wp-row.mine.m2 .acts2 {
    flex-direction: row;
    align-items: center;
  }
}
body.ff-wl .wp-toast {
  background: linear-gradient(135deg, var(--aku-paper) 55%, var(--wl-mint, rgb(236, 253, 245)) 100%) !important;
  border: 1.5px solid var(--wl-border-mint, rgba(16, 185, 129, 0.45)) !important;
  border-left: 4px solid var(--wl-accent-mint, rgb(5, 150, 105)) !important;
  color: var(--wl-ink, var(--aku-ink)) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 18px 38px -12px rgba(4, 10, 24, 0.36) !important;
  font: 600 0.9rem/1.45 var(--aku-font-body) !important;
}
body.ff-wl .wp-toast button,
body.ff-wl #wp-toast a {
  border-radius: 10px !important;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28)) !important;
  background: var(--aku-paper) !important;
  color: var(--wl-accent-mint, rgb(4, 120, 87)) !important;
  font: 700 0.84rem/1 var(--aku-font-body) !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  text-decoration: none !important;
}
@media (max-width: 720px) {
  body.ff-wl .wp-add label.wp-add-tk,
  body.ff-wl .wp-add label.wp-add-why {
    flex: 1 1 100%;
  }
  body.ff-wl .wp-add label.wp-add-px {
    flex: 1 1 calc(50% - 8px);
  }
}

/* AI chip correlation text contrast & 4-card Guide Drawer (.wp-guide-grid) in Catalogue B */
body.ff-wl .hi-t {
  color: rgb(185, 28, 28) !important;
  font-weight: 700;
}
body.ff-wl .mid-t {
  color: rgb(146, 64, 14) !important;
  font-weight: 700;
}
body.ff-wl .lo-t {
  color: rgb(4, 120, 87) !important;
  font-weight: 700;
}
body.ff-wl .ai-stack {
  height: 10px;
  border-radius: 99px;
  margin: 4px 0 6px;
  background: rgba(15, 23, 42, 0.08);
}
body.ff-wl .ai-stack .hi {
  background: rgb(220, 38, 38);
}
body.ff-wl .ai-stack .mid {
  background: rgb(217, 119, 6);
}
body.ff-wl .ai-stack .lo {
  background: rgb(5, 150, 105);
}

body.ff-wl .wp-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.ff-wl .wp-guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--aku-paper) 55%, var(--wl-blue, rgb(239, 246, 255)) 100%);
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24));
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .wp-guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--aku-paper);
  border: 1px solid var(--wl-border-soft, rgba(37, 99, 235, 0.22));
  color: var(--wl-ink, var(--aku-ink));
  font: 700 0.8rem/1.3 var(--aku-font-body);
}
body.ff-wl .wp-guide-badge.in {
  background: var(--wl-mint, rgb(209, 250, 229));
  border-color: var(--wl-border-mint, rgba(5, 150, 105, 0.35));
  color: rgb(4, 120, 87);
}
body.ff-wl .wp-guide-badge.gold {
  background: rgb(254, 243, 199);
  border-color: rgba(180, 83, 9, 0.35);
  color: rgb(146, 64, 14);
}
body.ff-wl .wp-guide-card > b {
  font: 700 0.88rem/1.35 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .wp-guide-card > small {
  font: 500 0.8rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
}
@media (max-width: 960px) {
  body.ff-wl .wp-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.ff-wl .wp-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* === SEMANTIC ZONE LANES (.wp-lane.in/near/far/none), NON-RAINBOW CARD HOVER, MINE SUMMARY, CONVICTION TAGS & CLIP QUEUE (Audi 2026-10-28) === */
/* 1. Disable rainbow holographic ::before sheen & give .wp-lane + .wp-tile semantic zone colours */
body.ff-wl .wp-tile::before {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
body.ff-wl .wp-lane.in,
body.ff-wl .wp-lane.near,
body.ff-wl .wp-lane.far,
body.ff-wl :is(.wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina, .wp-lane.unres) {
  background: var(--aku-paper) !important;
  border: 1px solid rgba(15, 39, 68, 0.14) !important;
}

/* Semantic .wp-tile borders, distance text & tactile non-rainbow hover */
body.ff-wl .wp-tile {
  transition: translate 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease !important;
}
body.ff-wl .wp-lane.in .wp-tile {
  border-color: rgba(16, 185, 129, 0.42) !important;
  border-top: 3px solid rgb(5, 150, 105) !important;
  border-bottom-color: rgba(5, 150, 105, 0.55) !important;
}
body.ff-wl .wp-lane.in .wp-tile small {
  color: rgb(4, 120, 87) !important;
  font-weight: 700 !important;
}
body.ff-wl .wp-lane.in .wp-tile:hover {
  translate: 0 -3px !important;
  background: linear-gradient(180deg, var(--aku-paper) 45%, rgba(209, 250, 229, 0.55) 100%) !important;
  border-color: rgb(5, 150, 105) !important;
  box-shadow: 0 12px 22px -10px rgba(5, 150, 105, 0.28) !important;
}

body.ff-wl .wp-lane.near .wp-tile,
body.ff-wl .wp-lane.near .wp-tile:has(.st) {
  border-color: rgba(245, 158, 11, 0.45) !important;
  border-top: 3px solid rgb(217, 119, 6) !important;
  border-bottom-color: rgba(217, 119, 6, 0.58) !important;
  box-shadow: 0 6px 14px -10px rgba(180, 83, 9, 0.16) !important;
}
body.ff-wl .wp-lane.near .wp-tile small {
  color: rgb(180, 83, 9) !important;
  font-weight: 700 !important;
}
body.ff-wl .wp-lane.near .wp-tile:hover {
  translate: 0 -3px !important;
  background: linear-gradient(180deg, var(--aku-paper) 45%, rgba(254, 243, 199, 0.65) 100%) !important;
  border-color: rgb(217, 119, 6) !important;
  box-shadow: 0 12px 22px -10px rgba(217, 119, 6, 0.28) !important;
}

body.ff-wl .wp-lane.far .wp-tile,
body.ff-wl .wp-lane.far .wp-tile:has(.st) {
  border-color: rgba(59, 130, 246, 0.36) !important;
  border-top: 3px solid rgb(37, 99, 235) !important;
  border-bottom-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 6px 14px -10px rgba(29, 78, 216, 0.14) !important;
}
body.ff-wl .wp-lane.far .wp-tile small {
  color: rgb(29, 78, 216) !important;
  font-weight: 600 !important;
}
body.ff-wl .wp-lane.far .wp-tile:hover {
  translate: 0 -3px !important;
  background: linear-gradient(180deg, var(--aku-paper) 45%, rgba(219, 234, 254, 0.6) 100%) !important;
  border-color: rgb(37, 99, 235) !important;
  box-shadow: 0 12px 22px -10px rgba(37, 99, 235, 0.25) !important;
}

body.ff-wl :is(.wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina) .wp-tile,
body.ff-wl :is(.wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina) .wp-tile:has(.st) {
  border-color: rgba(148, 163, 184, 0.42) !important;
  border-top: 3px solid rgb(100, 116, 139) !important;
  border-bottom-color: rgba(100, 116, 139, 0.5) !important;
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.12) !important;
}
body.ff-wl :is(.wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina) .wp-tile small {
  color: rgb(71, 85, 105) !important;
}
body.ff-wl :is(.wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina) .wp-tile:hover {
  translate: 0 -3px !important;
  background: linear-gradient(180deg, var(--aku-paper) 45%, rgba(241, 245, 249, 0.85) 100%) !important;
  border-color: rgb(71, 85, 105) !important;
  box-shadow: 0 12px 22px -10px rgba(51, 65, 85, 0.22) !important;
}

/* 2. ⭐ Watchlist ของคุณ Summary Bar & Empty Preview */
body.ff-wl .wp-mine-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 12px 0 8px;
}
body.ff-wl .wp-mine-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--wl-ink, var(--aku-ink));
  font: 500 0.88rem/1.45 var(--aku-font-body);
}
body.ff-wl .wp-mine-meta b {
  font-weight: 800;
  color: var(--wl-accent-mint, rgb(4, 120, 87));
}
body.ff-wl .ws-empty-preview {
  align-items: stretch;
}
body.ff-wl .ws-donut-empty .d-ring-empty {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 5px dashed rgba(37, 99, 235, 0.28);
  background: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  flex: none;
}
body.ff-wl .ws-empty-Copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .ws-empty-Copy b {
  font: 700 0.92rem/1.35 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .ws-empty-Copy small {
  font: 500 0.82rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
}

/* 3. Conviction Badges in 🎯 คัดเน้นจังหวะนี้ & Rows */
body.ff-wl .tg.researched {
  background: rgba(209, 250, 229, 0.85) !important;
  border: 1px solid rgba(5, 150, 105, 0.4) !important;
  color: rgb(4, 120, 87) !important;
  font-weight: 700 !important;
}
body.ff-wl .tg.chart-watch {
  background: rgba(219, 234, 254, 0.78) !important;
  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  color: rgb(29, 78, 216) !important;
  font-weight: 600 !important;
}

/* 4. Concise 🙋 ขอให้ออดี้ทำราคา 🔒 & Ranked Queue Badges */
body.ff-wl .wp-rq.wp-rq-compact {
  display: grid;
  gap: 14px;
}
body.ff-wl .wq-gate-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 14px 18px !important;
}
body.ff-wl .wq-gate-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .wq-gate-copy b {
  font: 700 0.96rem/1.35 var(--aku-font-body);
}
body.ff-wl .wq-gate-copy small {
  font: 500 0.86rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
}
body.ff-wl .wq-gate-compact .wq-gate-btns {
  margin-top: 0;
}
body.ff-wl .wq-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(5, 150, 105), rgb(13, 148, 136));
  color: rgb(255, 255, 255) !important;
  font: 800 0.78rem/1 var(--aku-font-mono);
}
body.ff-wl .wq-vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(217, 119, 6, 0.42);
  color: rgb(146, 64, 14) !important;
  font: 700 0.78rem/1.2 var(--aku-font-body);
}

/* 5. 🎬 คิวหุ้นที่ออดี้กำลังจะทำคลิป (#clip-queue.fb-queue-sec) */
body.ff-wl .fb-queue-sec {
  margin: 0 0 28px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(155deg, var(--aku-paper) 45%, var(--wl-blue, rgb(239, 246, 255)) 100%);
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.26));
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 12px 28px -18px rgba(15, 23, 42, 0.16);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 16px;
}
body.ff-wl .cq-title-wrap {
  max-width: 720px;
}
body.ff-wl .cq-title {
  margin: 6px 0 4px;
  font: 800 1.45rem/1.25 var(--aku-font-display);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-sub {
  margin: 0;
  font: 500 0.9rem/1.5 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
}
body.ff-wl .cq-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.ff-wl .cq-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.26));
  background: var(--aku-paper);
  color: var(--wl-ink2, var(--aku-ink-2));
  font: 700 0.84rem/1 var(--aku-font-body);
  cursor: pointer;
  transition: translate 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
body.ff-wl .cq-tab[aria-selected="true"] {
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));
  border-color: rgb(5, 150, 105);
  border-bottom-width: 2.5px;
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) {
  body.ff-wl .cq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  body.ff-wl .fb-queue-sec {
    padding: 18px 16px;
  }
  body.ff-wl .cq-grid {
    grid-template-columns: 1fr;
  }
}
body.ff-wl .cq-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--aku-paper);
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.22));
  border-bottom: 3px solid rgba(37, 99, 235, 0.38);
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.12);
  color: var(--wl-ink, var(--aku-ink));
  transition: translate 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
body.ff-wl .cq-card.top {
  border-color: rgba(245, 158, 11, 0.5);
  border-top: 3px solid rgb(217, 119, 6);
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.35), var(--aku-paper) 55%);
}
body.ff-wl .cq-card:hover {
  translate: 0 -3px;
  border-color: rgb(5, 150, 105);
  box-shadow: 0 12px 22px -12px rgba(5, 150, 105, 0.25);
}
body.ff-wl .cq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.ff-wl .cq-rank {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.85);
  border: 1px solid rgba(37, 99, 235, 0.32);
  color: rgb(29, 78, 216);
  font: 800 0.76rem/1.2 var(--aku-font-mono);
}
body.ff-wl .cq-card.top .cq-rank {
  background: rgba(254, 243, 199, 0.95);
  border-color: rgba(217, 119, 6, 0.45);
  color: rgb(146, 64, 14);
}
body.ff-wl .cq-sec {
  font: 600 0.76rem/1.2 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
}
body.ff-wl .cq-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.ff-wl .cq-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--wl-blue, rgb(239, 246, 255));
  border: 1px solid rgba(37, 99, 235, 0.22);
  overflow: hidden;
  flex: none;
  font: 800 0.78rem/1 var(--aku-font-mono);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.ff-wl .cq-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.ff-wl .cq-tk {
  font: 800 1rem/1.2 var(--aku-font-mono);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-nm {
  font: 500 0.8rem/1.3 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ff-wl .cq-why {
  margin: 0;
  font: 500 0.82rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2, var(--aku-ink-2));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.ff-wl .cq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(37, 99, 235, 0.18);
}
body.ff-wl .cq-votes {
  font: 700 0.8rem/1.2 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
}
body.ff-wl .cq-acts,
body.ff-wl .cq-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
body.ff-wl .cq-vote-btn,
body.ff-wl .cq-link {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(5, 150, 105, 0.42);
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));
  color: rgb(4, 120, 87);
  font: 700 0.78rem/1 var(--aku-font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
body.ff-wl .cq-vote-btn:hover,
body.ff-wl .cq-link:hover {
  border-color: rgb(4, 120, 87);
  background: rgba(209, 250, 229, 0.95);
}
body.ff-wl .cq-vote-btn.voted {
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--wl-blue, rgb(239, 246, 255));
  color: rgb(29, 78, 216);
}
body.ff-wl .cq-link.ghost {
  border-color: rgba(37, 99, 235, 0.3);
  background: var(--aku-paper);
  color: var(--wl-ink, var(--aku-ink));
}

/* ==========================================================================
   ROUND 6 & 7 (2026-10-28):
   1. Canonical Theme Pair Lock:
      - Dark Mode (html:not([data-theme="light"])): D1 · Deep Obsidian Navy
      - Light Mode (html[data-theme="light"]): L1 · Crisp Cool White & Mint-Sky
        with Medium-Pastel Semantic Zones
   2. ZERO BOX-IN-BOX ("กล่องในกล่องมันเยอะไปไหม" — Audi 2026-10-28):
      - .wp-util-link: Clean borderless underline links (not rectangular boxes)
      - .wp-hero .wp-stat: Clean left-accent-bar stat columns (matching #fbStats,
        no rectangular box around each KPI)
      - #clip-queue (.cq-card): Single card layer, no redundant top badge box,
        hairline footer with plain crowd stat + single pill button
      - section.wp-panel & .wp-drawer-sheet: Transparent stage wrappers (no
        outer wrapper box around inner cards)
      - .wp-row (STRL & all rows): Single card surface; .c.px / .c.buy / .c.tgt
        / .c.trd and .tg use clean vertical left-accent bars (zero inner boxes)
   ========================================================================== */

/* ── 1A. LIGHT MODE (☀️ L1 · Crisp Cool White & Mint-Sky) ── */
html[data-theme="light"] body.ff-wl {
  --aku-paper: rgb(255, 255, 255);
  --aku-ink: rgb(20, 47, 73);
  --aku-ink-2: rgb(51, 65, 85);
  --wl-bg-top: rgb(228, 240, 252);
  --wl-bg-mid: rgb(238, 246, 254);
  --wl-bg-bot: rgb(226, 247, 239);
  --wl-paper: rgb(255, 255, 255);
  --wl-blue: rgb(219, 234, 254);
  --wl-mint: rgb(209, 250, 229);
  --wl-surface: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(246, 250, 255) 55%, rgb(238, 251, 245) 100%);
  --wl-card: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(246, 250, 255) 55%, rgb(238, 251, 245) 100%);
  --wl-card-alt: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(242, 248, 255) 100%);
  --wl-ink: rgb(20, 47, 73);
  --wl-ink2: rgb(51, 65, 85);
  --wl-muted: rgb(71, 85, 105);
  --wl-edge: rgba(59, 130, 246, 0.28);
  --wl-rule: rgba(59, 130, 246, 0.18);
  --wl-border: rgba(59, 130, 246, 0.28);
  --wl-border-mint: rgba(16, 185, 129, 0.34);
  --wl-border-soft: rgba(59, 130, 246, 0.24);
  --wl-accent-mint: rgb(5, 150, 105);
  --wl-accent-teal: rgb(13, 148, 136);
  background: linear-gradient(155deg, rgb(228, 240, 252) 0%, rgb(238, 246, 254) 48%, rgb(226, 247, 239) 100%) !important;
  color: rgb(20, 47, 73) !important;
}

/* ── 1B. DARK MODE (🌙 D1 · Deep Obsidian Navy) ── */
html:not([data-theme="light"]) body.ff-wl {
  --aku-paper: rgb(9, 23, 43);
  --aku-ink: rgb(244, 246, 252);
  --aku-ink-2: rgb(189, 205, 226);
  --wl-bg-top: rgb(6, 13, 26);
  --wl-bg-mid: rgb(7, 18, 34);
  --wl-bg-bot: rgb(5, 19, 28);
  --wl-paper: rgb(11, 25, 45);
  --wl-blue: rgb(14, 34, 62);
  --wl-mint: rgb(9, 44, 38);
  --wl-surface: linear-gradient(145deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 58%, rgb(8, 26, 40) 100%);
  --wl-card: linear-gradient(145deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 58%, rgb(8, 26, 40) 100%);
  --wl-card-alt: linear-gradient(145deg, rgb(8, 20, 38) 0%, rgb(11, 27, 50) 100%);
  --wl-ink: rgb(244, 246, 252);
  --wl-ink2: rgb(189, 205, 226);
  --wl-muted: rgb(148, 163, 184);
  --wl-edge: rgba(96, 165, 250, 0.36);
  --wl-rule: rgba(96, 165, 250, 0.22);
  --wl-border: rgba(96, 165, 250, 0.36);
  --wl-border-mint: rgba(52, 211, 153, 0.38);
  --wl-border-soft: rgba(96, 165, 250, 0.28);
  --wl-accent-mint: rgb(52, 211, 153);
  --wl-accent-teal: rgb(56, 189, 248);
  background:
    radial-gradient(960px 420px at 14% 0%, rgba(56, 189, 248, 0.12), transparent 62%),
    radial-gradient(880px 400px at 88% 8%, rgba(16, 185, 129, 0.1), transparent 64%),
    linear-gradient(160deg, rgb(6, 13, 26) 0%, rgb(7, 18, 34) 50%, rgb(5, 19, 28) 100%) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .aku-cta {
  --aku-paper: rgb(255, 255, 255);
}

/* Remove outer wrapper boxes on section.wp-panel & .wp-drawer-sheet so cards don't sit inside boxes */
body.ff-wl section.wp-panel,
body.ff-wl .wp-drawer-sheet {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 0 !important;
}

html:not([data-theme="light"]) body.ff-wl :is(
  .wp-hero,
  .fb-queue-sec,
  .wp-tabs-head,
  .wp-cmd-hud,
  .wp-guest-gate,
  .wp-guest-more,
  .wp-rq,
  .wp-rq-box,
  .mp-hero,
  .mp-alloc,
  .wp-add,
  .wp-own,
  .wp-empty,
  #wp-toast
) {
  background: linear-gradient(145deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 58%, rgb(8, 26, 40) 100%) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.12), 0 16px 34px -20px rgba(2, 6, 23, 0.72) !important;
  color: rgb(244, 246, 252) !important;
}

html:not([data-theme="light"]) body.ff-wl :is(
  .ff-title,
  .wp-sec-h,
  .cq-h,
  .wp-rq-hcopy h2,
  .wp-rq-list-h,
  .mp-hcopy h2,
  .ws-h b,
  .ws-card b,
  .wp-guide-card b
) {
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .ff-title span {
  color: rgb(52, 211, 153) !important;
}
html:not([data-theme="light"]) body.ff-wl :is(
  .wp-lede,
  .wp-note,
  .cq-sub,
  .wp-tabs-sub,
  .wp-rq-sub,
  .wp-count,
  .wp-disc,
  .ws-card small,
  .wp-guide-card small
) {
  color: rgb(189, 205, 226) !important;
}

/* ── 1C. HERO LINKS (.wp-util-link) & HERO KPI STATS (.wp-hero .wp-stat) — ZERO BOXES (Matches #fbStats) ── */
body.ff-wl .wp-hero-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
body.ff-wl .wp-util-link,
html:not([data-theme="light"]) body.ff-wl .wp-util-link,
html[data-theme="light"] body.ff-wl .wp-util-link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid rgba(96, 165, 250, 0.42) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 2px 4px !important;
  min-height: auto !important;
  color: var(--wl-ink2) !important;
  font: 700 0.84rem/1.2 var(--aku-font-body) !important;
  text-decoration: none !important;
}
body.ff-wl .wp-util-link:hover {
  color: var(--wl-accent-mint) !important;
  border-bottom-color: var(--wl-accent-mint) !important;
  background: transparent !important;
  translate: 0 -1px !important;
}

body.ff-wl .wp-hero .wp-stat,
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat,
html[data-theme="light"] body.ff-wl .wp-hero .wp-stat {
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--sedge) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 10px 6px 14px !important;
}
body.ff-wl .wp-hero .wp-stat .wp-stat-pill,
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat .wp-stat-pill,
html[data-theme="light"] body.ff-wl .wp-hero .wp-stat .wp-stat-pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--sc) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat.all {
  --sc: rgb(96, 165, 250);
  --sedge: rgb(59, 130, 246);
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat.good {
  --sc: rgb(52, 211, 153);
  --sedge: rgb(16, 185, 129);
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat.near {
  --sc: rgb(251, 191, 36);
  --sedge: rgb(245, 158, 11);
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat.star {
  --sc: rgb(244, 114, 182);
  --sedge: rgb(236, 72, 153);
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat.trend {
  --sc: rgb(167, 139, 250);
  --sedge: rgb(139, 92, 246);
}
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat small,
html:not([data-theme="light"]) body.ff-wl .wp-hero .wp-stat .wp-stat-unit {
  color: rgb(189, 205, 226) !important;
}

/* ── 1D. QUIET UNDERLINE FILTER TABS (NO BOXED PILLS INSIDE HUD OR CLIP QUEUE HEADER) ── */
body.ff-wl :is(#wp-filters button, .wp-gb button, .cq-tabs button, .wq-filter-bar button),
html:not([data-theme="light"]) body.ff-wl :is(#wp-filters button, .wp-gb button, .cq-tabs button, .wq-filter-bar button),
html[data-theme="light"] body.ff-wl :is(#wp-filters button, .wp-gb button, .cq-tabs button, .wq-filter-bar button) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  min-height: 34px !important;
  color: var(--wl-ink2) !important;
  font: 600 0.84rem/1.2 var(--aku-font-body) !important;
}
body.ff-wl :is(#wp-filters button, .wp-gb button, .cq-tabs button, .wq-filter-bar button):hover {
  color: var(--wl-ink) !important;
  border-bottom-color: rgba(96, 165, 250, 0.45) !important;
}
body.ff-wl :is(#wp-filters button[aria-pressed="true"], .wp-gb button[aria-pressed="true"], .cq-tabs button[aria-pressed="true"], .wq-filter-bar button[aria-pressed="true"]),
html:not([data-theme="light"]) body.ff-wl :is(#wp-filters button[aria-pressed="true"], #wp-filters button.wp-f-member[aria-pressed="true"], .wp-gb button[aria-pressed="true"], .cq-tabs button[aria-pressed="true"], .wq-filter-bar button[aria-pressed="true"]),
html[data-theme="light"] body.ff-wl :is(#wp-filters button[aria-pressed="true"], #wp-filters button.wp-f-member[aria-pressed="true"], .wp-gb button[aria-pressed="true"], .cq-tabs button[aria-pressed="true"], .wq-filter-bar button[aria-pressed="true"]) {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 0 !important;
  border-bottom: 2.5px solid var(--wl-accent-mint) !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
  color: var(--wl-ink) !important;
  font-weight: 700 !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-filters button[aria-pressed="true"] b,
html:not([data-theme="light"]) body.ff-wl .cq-tabs button[aria-pressed="true"] b {
  color: rgb(110, 231, 183) !important;
}

/* Primary Tab Bar (nav.wp-tabs) & Disclosure Toggles (.wp-drawer-btn, .cq-add-toggle) */
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs {
  background: linear-gradient(175deg, rgb(10, 24, 45), rgb(7, 18, 34)) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
}
html:not([data-theme="light"]) body.ff-wl :is(
  nav.wp-tabs button,
  .wp-drawer-btn,
  .cq-add-toggle,
  .wq-quick-chips button
) {
  background: linear-gradient(175deg, rgb(13, 31, 56), rgb(8, 21, 38)) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
  color: rgb(226, 232, 240) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.1) !important;
}
html:not([data-theme="light"]) body.ff-wl :is(
  nav.wp-tabs [role="tab"][aria-selected="true"],
  .wp-drawer-btn[aria-expanded="true"],
  .cq-add-toggle[aria-expanded="true"]
) {
  background: linear-gradient(165deg, rgb(6, 78, 59) 0%, rgb(12, 46, 68) 100%) !important;
  border-color: rgba(52, 211, 153, 0.72) !important;
  color: rgb(236, 253, 245) !important;
}

html:not([data-theme="light"]) body.ff-wl :is(
  .wp-search input,
  .wp-sel select,
  .wp-add input,
  .wp-rq-form input,
  .cq-add-form input
) {
  background: rgb(6, 15, 30) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.38) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl :is(
  .wp-search input::placeholder,
  .wp-add input::placeholder,
  .wp-rq-form input::placeholder,
  .cq-add-form input::placeholder
) {
  color: rgb(148, 163, 184) !important;
}

/* ── 1E. SUMMARY DRAWER (#wp-a-sum, #wp-m-sum) — SINGLE CARD SURFACE, NO NESTED BOXES ── */
body.ff-wl .ws {
  padding: 16px 20px !important;
  border-radius: 18px !important;
  margin-bottom: 16px !important;
}
html:not([data-theme="light"]) body.ff-wl :is(.ws, .wp-guide-card, .mp-slv) {
  background: linear-gradient(155deg, rgb(10, 24, 45) 0%, rgb(8, 20, 38) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.32) !important;
  color: rgb(244, 246, 252) !important;
}
html[data-theme="light"] body.ff-wl .ws {
  background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(246, 250, 255) 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.26) !important;
  color: rgb(20, 47, 73) !important;
}
/* Flatten .ws-donut, .ws-stat, .wp-ailine inside .ws so there is no box-in-box */
body.ff-wl .ws :is(.ws-donut, .ws-stat, .wp-ailine) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── 1F. SEMANTIC GROUPED LANES (.wp-lane.*) & TILES (.wp-tile) — DARK (D1) & LIGHT (L1) ── */
html:not([data-theme="light"]) body.ff-wl .wp-lane {
  background: linear-gradient(180deg, rgba(14, 31, 55, 0.94), rgba(9, 21, 39, 0.94)) !important;
  border: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-top: 3px solid var(--lc, rgb(56, 189, 248)) !important;
}
html[data-theme="light"] body.ff-wl .wp-lane {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(15, 39, 68, 0.14) !important;
  border-top: 3px solid var(--lc, rgb(2, 132, 199)) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-lane-h small {
  color: rgb(203, 213, 225) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-lane-h .n {
  background: rgba(7, 19, 36, 0.92) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.45) !important;
  color: rgb(224, 242, 254) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile {
  background: linear-gradient(180deg, rgb(14, 28, 49) 0%, rgb(9, 19, 35) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.32) !important;
  border-bottom: 3px solid rgba(56, 189, 248, 0.45) !important;
  color: rgb(244, 246, 252) !important;
  box-shadow: 0 8px 18px -12px rgba(2, 6, 23, 0.72) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile :is(b, .px, .t-sub) {
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile small {
  color: rgb(189, 205, 226) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile:hover,
html:not([data-theme="light"]) body.ff-wl :is(.wp-lane.in, .wp-lane.near, .wp-lane.far, .wp-lane.none, .wp-lane.nocat, .wp-lane.notr, .wp-lane.aina) .wp-tile:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, rgb(17, 34, 58) 0%, rgb(11, 23, 42) 100%) !important;
  border-color: var(--tile-bd, rgba(96, 165, 250, 0.55)) !important;
  box-shadow: 0 12px 24px -12px rgba(2, 8, 20, 0.75) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-lane.in .wp-tile small {
  color: rgb(110, 231, 183) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-lane.near .wp-tile small {
  color: rgb(252, 211, 77) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-lane.far .wp-tile small {
  color: rgb(147, 197, 253) !important;
}

/* ── 2. CURATED CLIP QUEUE (#clip-queue) — COMPACT 1-LINE PILL ROWS WITH REORDER ── */
body.ff-wl .cq-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
body.ff-wl :is(.cq-add-toggle, .cq-sort-btn) {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font: 700 0.8rem/1 var(--aku-font-body);
  cursor: pointer;
}
body.ff-wl .cq-add-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 0 0 14px;
  padding: 12px 0 2px;
  border: 0;
  border-top: 1px dashed var(--wl-rule, rgba(96, 165, 250, 0.28));
  background: transparent !important;
}
body.ff-wl .cq-add-form[hidden] {
  display: none !important;
}
body.ff-wl .cq-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 700 0.78rem/1.2 var(--aku-font-body);
}
body.ff-wl .cq-add-form input {
  min-height: 36px;
  width: 210px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--wl-border, rgba(59, 130, 246, 0.32));
  font: 600 0.86rem/1.2 var(--aku-font-body);
}
body.ff-wl .cq-af-submit {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.16);
  color: var(--wl-accent-mint);
  font: 700 0.84rem/1 var(--aku-font-body);
  cursor: pointer;
}

body.ff-wl .cq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 860px) {
  body.ff-wl .cq-grid {
    grid-template-columns: 1fr !important;
  }
}

body.ff-wl .cq-card.cq-compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
body.ff-wl .cq-card.cq-compact.is-dragging {
  opacity: 0.55;
}
body.ff-wl .cq-card.cq-compact.is-drag-over {
  outline: 2px dashed var(--wl-accent-mint);
  outline-offset: 2px;
}
html:not([data-theme="light"]) body.ff-wl .cq-card {
  background: rgba(11, 26, 48, 0.72) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  border-left: 3.5px solid rgb(56, 189, 248) !important;
  color: rgb(244, 246, 252) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-card.is-boosted {
  border-color: rgba(52, 211, 153, 0.42) !important;
  border-left: 3.5px solid rgb(16, 185, 129) !important;
  background: rgba(6, 48, 38, 0.52) !important;
}
html[data-theme="light"] body.ff-wl .cq-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  border-left: 3.5px solid rgb(37, 99, 235) !important;
  color: rgb(20, 47, 73) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-boosted {
  border-color: rgba(5, 150, 105, 0.38) !important;
  border-left: 3.5px solid rgb(5, 150, 105) !important;
  background: linear-gradient(160deg, rgb(220, 252, 231) 0%, rgb(255, 255, 255) 92%) !important;
}

body.ff-wl .cq-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 145px;
  flex: 1 1 auto;
  cursor: pointer;
}
@media (max-width: 560px) {
  body.ff-wl .cq-card.cq-compact {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  body.ff-wl .cq-card.cq-compact .cq-left {
    width: 100%;
  }
  body.ff-wl .cq-card.cq-compact .cq-right {
    width: 100%;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
  }
}
body.ff-wl .cq-order {
  font: 800 0.76rem/1 var(--aku-font-mono);
  color: var(--wl-accent-blue);
  min-width: 22px;
  text-align: center;
  opacity: 0.9;
}
body.ff-wl .cq-order.done {
  color: var(--wl-accent-mint);
}
body.ff-wl .cq-tk {
  font: 800 0.98rem/1.1 var(--aku-font-mono);
  color: var(--wl-ink);
  letter-spacing: -0.01em;
}
body.ff-wl .cq-sec {
  font: 600 0.76rem/1.2 var(--aku-font-body);
  color: var(--wl-ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ff-wl .cq-right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
body.ff-wl .cq-rush-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.78rem/1.2 var(--aku-font-body);
  color: var(--wl-ink2);
  white-space: nowrap;
}
body.ff-wl .cq-rush-stat b.num {
  font: 800 0.84rem/1 var(--aku-font-mono);
  color: var(--wl-ink);
}
body.ff-wl .cq-card.is-boosted .cq-rush-stat {
  color: var(--wl-accent-mint);
}
body.ff-wl .cq-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(16, 185, 129);
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.22);
  flex: none;
}

body.ff-wl .cq-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font: 700 0.76rem/1 var(--aku-font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl .cq-plus-btn {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.48);
  color: rgb(110, 231, 183);
}
html:not([data-theme="light"]) body.ff-wl .cq-plus-btn:hover {
  background: rgba(16, 185, 129, 0.26);
  border-color: rgb(52, 211, 153);
  color: rgb(236, 253, 245);
}
html:not([data-theme="light"]) body.ff-wl .cq-plus-btn.on {
  background: rgb(5, 150, 105);
  border: 1px solid rgb(52, 211, 153);
  color: rgb(240, 253, 244);
}
html[data-theme="light"] body.ff-wl .cq-plus-btn {
  background: rgb(220, 252, 231);
  border: 1px solid rgba(5, 150, 105, 0.42);
  color: rgb(6, 95, 70);
}
html[data-theme="light"] body.ff-wl .cq-plus-btn.on {
  background: rgb(5, 150, 105);
  border: 1px solid rgb(4, 120, 87);
  color: rgb(255, 255, 255);
}

body.ff-wl .cq-move-grp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
}
body.ff-wl :is(.cq-mv-btn, .cq-del-btn) {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--wl-ink2);
  font: 700 0.76rem/1 var(--aku-font-mono);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
body.ff-wl .cq-mv-btn:hover:not(:disabled) {
  opacity: 1;
  color: var(--wl-accent-mint);
  background: rgba(16, 185, 129, 0.12) !important;
}
body.ff-wl .cq-mv-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
body.ff-wl .cq-del-btn:hover {
  opacity: 1;
  color: rgb(244, 63, 94);
  background: rgba(244, 63, 94, 0.12) !important;
}

/* Keep .cq-vote-btn for request queue rows (.wq-vote-btn) */
body.ff-wl .cq-vote-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font: 700 0.78rem/1 var(--aku-font-body) !important;
  cursor: pointer;
  transition: translate 140ms ease, border-color 140ms ease, background 140ms ease;
}
html[data-theme="light"] body.ff-wl .cq-vote-btn {
  background: rgb(239, 246, 255) !important;
  border: 1px solid rgba(37, 99, 235, 0.38) !important;
  color: rgb(29, 78, 216) !important;
}
html[data-theme="light"] body.ff-wl .cq-vote-btn.on {
  background: rgb(5, 150, 105) !important;
  border-color: rgb(4, 120, 87) !important;
  color: rgb(255, 255, 255) !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-vote-btn {
  background: rgba(15, 36, 68, 0.9) !important;
  border: 1px solid rgba(96, 165, 250, 0.44) !important;
  color: rgb(186, 230, 253) !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-vote-btn.on {
  background: rgb(5, 150, 105) !important;
  border-color: rgb(52, 211, 153) !important;
  color: rgb(240, 253, 244) !important;
}

body.ff-wl .wq-vote-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 0 0 8px !important;
  border: 0 !important;
  border-left: 3px solid rgb(16, 185, 129) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wl-accent-mint) !important;
  font: 700 0.78rem/1.2 var(--aku-font-body) !important;
}

/* ── 3. REDESIGNED .wp-row CARD ARCHITECTURE (STRL & ALL ROWS) — SINGLE CARD, LEFT-ACCENT COLUMNS, ZERO INNER BOXES ── */
body.ff-wl .wp-row:not(.mine) {
  display: grid !important;
  grid-template-columns: 44px minmax(250px, 1.45fr) minmax(125px, 0.85fr) minmax(175px, 1.15fr) minmax(135px, 0.88fr) minmax(118px, 0.78fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
}
html:not([data-theme="light"]) body.ff-wl :is(.wp-row, .mp-row, .wq-row) {
  background: linear-gradient(145deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 58%, rgb(8, 26, 40) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.32) !important;
  border-bottom: 3px solid rgba(56, 189, 248, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.08), 0 10px 22px -16px rgba(2, 6, 23, 0.72) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl :is(.wp-row, .mp-row, .wq-row):hover {
  background: linear-gradient(145deg, rgb(10, 23, 43) 0%, rgb(12, 30, 56) 58%, rgb(10, 34, 50) 100%) !important;
  border-color: rgba(52, 211, 153, 0.6) !important;
}
html[data-theme="light"] body.ff-wl :is(.wp-row, .mp-row, .wq-row) {
  background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(246, 250, 255) 58%, rgb(238, 251, 245) 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.26) !important;
  border-bottom: 3px solid rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 8px 18px -14px rgba(20, 47, 73, 0.14) !important;
  color: rgb(20, 47, 73) !important;
}

body.ff-wl .wp-row .wp-logo-btn {
  align-self: center;
}
body.ff-wl .wp-row .nm {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding-right: 4px !important;
}
body.ff-wl .wp-row .nm-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
body.ff-wl .wp-row .nm-id {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
body.ff-wl .wp-row .nm .tk-sym {
  font: 800 1.16rem/1.15 var(--aku-font-mono) !important;
  letter-spacing: -0.01em;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-row .nm .tk-corp {
  font: 600 0.84rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* Deep-Dive Analysis Link (🔬 อ่านบทวิเคราะห์ ↗) — Clean Underline Link, Not a Box */
body.ff-wl .wp-row a.deep,
html:not([data-theme="light"]) body.ff-wl .wp-row a.deep,
html[data-theme="light"] body.ff-wl .wp-row a.deep {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 2px 2px !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--wl-accent-teal) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wl-accent-teal) !important;
  font: 700 0.78rem/1.2 var(--aku-font-body) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
body.ff-wl .wp-row a.deep:hover {
  color: var(--wl-accent-mint) !important;
  border-bottom-color: var(--wl-accent-mint) !important;
}

/* Tags inside .wp-row .tgs — Clean Left-Bar Inline Badges, ZERO Box Clutter */
body.ff-wl .wp-row .tgs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 12px !important;
  margin-top: 0 !important;
}
body.ff-wl .wp-row :is(.tg, .ai-tag),
html:not([data-theme="light"]) body.ff-wl .wp-row :is(.tg, .ai-tag),
html[data-theme="light"] body.ff-wl .wp-row :is(.tg, .ai-tag) {
  background: transparent !important;
  border: 0 !important;
  border-left: 2.5px solid rgba(96, 165, 250, 0.55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1px 0 1px 7px !important;
  font: 600 0.76rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-row .tg.star {
  border-left-color: rgb(245, 158, 11) !important;
  color: var(--wl-ink) !important;
  font-weight: 700 !important;
}
body.ff-wl .wp-row .tg.researched,
body.ff-wl .wp-row .tg.conv.studied {
  border-left-color: rgb(16, 185, 129) !important;
  color: var(--wl-accent-mint) !important;
  font-weight: 700 !important;
}

/* 4 Metric Columns inside .wp-row (.c.px, .c.buy, .c.tgt, .c.trd) — Clean Left-Accent Columns, ZERO Inner Boxes */
body.ff-wl .wp-row .c,
html:not([data-theme="light"]) body.ff-wl .wp-row .c,
html[data-theme="light"] body.ff-wl .wp-row .c {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 3px !important;
  padding: 2px 6px 2px 13px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2.5px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
}
body.ff-wl .wp-row .c small {
  font: 700 0.73rem/1.2 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-row .c b {
  font: 800 1.05rem/1.2 var(--aku-font-mono) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-row .c.tgt.no-tgt b {
  font: 700 0.86rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-row .c i {
  font: 600 0.75rem/1.25 var(--aku-font-body) !important;
  font-style: normal !important;
  color: var(--wl-ink2) !important;
}

/* Semantic Left-Accent Bars & Text Colors on .c.buy & .c.trd */
body.ff-wl .wp-row :is(.c.buy.in, .c.trd.tr-up) {
  border-left: 3.5px solid rgb(16, 185, 129) !important;
}
html[data-theme="light"] body.ff-wl .wp-row :is(.c.buy.in, .c.trd.tr-up) :is(b, i, .tr) {
  color: rgb(4, 120, 87) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-row :is(.c.buy.in, .c.trd.tr-up) :is(b, i, .tr) {
  color: rgb(110, 231, 183) !important;
}

body.ff-wl .wp-row :is(.c.buy.near-g, .c.buy.near-y) {
  border-left: 3.5px solid rgb(245, 158, 11) !important;
}
html[data-theme="light"] body.ff-wl .wp-row :is(.c.buy.near-g, .c.buy.near-y) :is(b, i) {
  color: rgb(180, 83, 9) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-row :is(.c.buy.near-g, .c.buy.near-y) :is(b, i) {
  color: rgb(252, 211, 77) !important;
}

body.ff-wl .wp-row .c.buy.far {
  border-left: 3.5px solid rgb(59, 130, 246) !important;
}
html[data-theme="light"] body.ff-wl .wp-row .c.buy.far i {
  color: rgb(29, 78, 216) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-row .c.buy.far i {
  color: rgb(147, 197, 253) !important;
}

body.ff-wl .wp-row .c.trd.tr-down {
  border-left: 3.5px solid rgb(244, 63, 94) !important;
}
html[data-theme="light"] body.ff-wl .wp-row .c.trd.tr-down .tr {
  color: rgb(190, 18, 60) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-row .c.trd.tr-down .tr {
  color: rgb(253, 164, 175) !important;
}

body.ff-wl .wp-row .c.trd .tr {
  margin-top: 2px;
  font: 700 0.86rem/1.2 var(--aku-font-body) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body.ff-wl .wp-row :is(.wp-copy, .wp-edit) {
  align-self: center !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-row .wp-copy.on {
  background: rgba(6, 56, 42, 0.92) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: rgb(167, 243, 208) !important;
}

@media (max-width: 1020px) {
  body.ff-wl .wp-row:not(.mine) {
    grid-template-columns: 40px 1fr 1fr !important;
  }
  body.ff-wl .wp-row:not(.mine) .nm {
    grid-column: 2 / -1 !important;
  }
  body.ff-wl .wp-row:not(.mine) :is(.wp-copy, .wp-edit) {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }
}
@media (max-width: 560px) {
  body.ff-wl .wp-row:not(.mine) {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
  }
  body.ff-wl .wp-row:not(.mine) .wp-logo-btn {
    display: none !important;
  }
  body.ff-wl .wp-row:not(.mine) .nm {
    grid-column: 1 / -1 !important;
  }
}

/* ── 4. #wp-peek STOCK DETAIL MODAL — D1 (DARK) & L1 (LIGHT) ZERO BOX-IN-BOX REDESIGN (Audi 2026-10-28) ── */
html:not([data-theme="light"]) body.ff-wl #wp-peek.wp-peek {
  --k-g: rgb(52, 211, 153);
  --k-a: rgb(251, 191, 36);
  --k-r: rgb(251, 113, 133);
  --z-in: rgb(52, 211, 153);
  --z-ng: rgb(110, 231, 183);
  --z-ny: rgb(251, 191, 36);
  --z-far: rgb(148, 163, 184);
  background:
    linear-gradient(90deg, rgb(56, 189, 248), rgb(16, 185, 129), rgb(59, 130, 246)) 0 0 / 100% 4px no-repeat,
    linear-gradient(155deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 56%, rgb(8, 26, 40) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.38) !important;
  color: rgb(244, 246, 252) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.12), 0 32px 84px rgba(2, 6, 23, 0.85) !important;
}
html[data-theme="light"] body.ff-wl #wp-peek.wp-peek {
  --k-g: rgb(4, 120, 87);
  --k-a: rgb(180, 83, 9);
  --k-r: rgb(190, 18, 60);
  --z-in: rgb(4, 120, 87);
  --z-ng: rgb(5, 150, 105);
  --z-ny: rgb(180, 83, 9);
  --z-far: rgb(71, 85, 105);
  background:
    linear-gradient(90deg, rgb(37, 99, 235), rgb(16, 185, 129), rgb(14, 116, 144)) 0 0 / 100% 4px no-repeat,
    linear-gradient(155deg, rgb(255, 255, 255) 0%, rgb(246, 250, 255) 56%, rgb(238, 251, 245) 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.34) !important;
  color: rgb(20, 47, 73) !important;
  box-shadow: inset 0 2px 0 rgb(255, 255, 255), 0 28px 72px rgba(15, 23, 42, 0.24) !important;
}

html:not([data-theme="light"]) body.ff-wl .wp-peek-x {
  background: rgb(13, 31, 56) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.38) !important;
  color: rgb(226, 232, 240) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek-x:hover {
  background: rgb(6, 78, 59) !important;
  border-color: rgb(52, 211, 153) !important;
  color: rgb(240, 253, 244) !important;
}

/* Open Unboxed Header (.dsh-hero) inside #wp-peek */
body.ff-wl .wp-peek .dsh-hero,
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-hero,
html[data-theme="light"] body.ff-wl .wp-peek .dsh-hero {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 48px 16px 0 !important;
  margin: 0 0 18px 0 !important;
}
body.ff-wl .wp-peek .dsh-hero::before {
  display: none !important;
}
body.ff-wl .wp-peek .dsh-hero .id .wp-logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
}
body.ff-wl .wp-peek .dsh-hero .id b {
  font: 800 1.55rem/1.1 var(--aku-font-mono) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-peek .dsh-hero .id small {
  font: 600 0.88rem/1.3 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
  margin: 2px 0 6px !important;
}
/* Clean left-accent-bar tags inside #wp-peek .dsh-hero .tgs (no solid light-blue or grey boxes) */
body.ff-wl .wp-peek .dsh-hero .tgs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 12px !important;
}
body.ff-wl .wp-peek .dsh-hero .tgs :is(.tg, .ai-tag),
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-hero .tgs :is(.tg, .ai-tag),
html[data-theme="light"] body.ff-wl .wp-peek .dsh-hero .tgs :is(.tg, .ai-tag) {
  background: transparent !important;
  border: 0 !important;
  border-left: 2.5px solid rgba(96, 165, 250, 0.58) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1px 0 1px 7px !important;
  font: 600 0.78rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-peek .dsh-hero .tgs .tg.star {
  border-left-color: rgb(245, 158, 11) !important;
  color: var(--wl-ink) !important;
  font-weight: 700 !important;
}
body.ff-wl .wp-peek .dsh-hero .tgs :is(.tg.researched, .tg.conv.studied) {
  border-left-color: rgb(16, 185, 129) !important;
  color: var(--wl-accent-mint) !important;
  font-weight: 700 !important;
}

/* Verdict Callout on Right of .dsh-hero */
body.ff-wl .wp-peek .dsh-hero .vd {
  text-align: left !important;
  padding: 4px 0 4px 14px !important;
  border-left: 3.5px solid rgba(96, 165, 250, 0.5) !important;
  max-width: 390px;
}
body.ff-wl .wp-peek .dsh-hero.v-g .vd,
body.ff-wl .wp-peek .dsh-hero.v-g2 .vd {
  border-left-color: rgb(16, 185, 129) !important;
}
body.ff-wl .wp-peek .dsh-hero.v-a .vd {
  border-left-color: rgb(245, 158, 11) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-hero.v-g .vd strong,
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-hero.v-g2 .vd strong {
  color: rgb(52, 211, 153) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-hero.v-a .vd strong {
  color: rgb(251, 191, 36) !important;
}
body.ff-wl .wp-peek .dsh-hero .vd strong {
  font: 800 1.08rem/1.3 var(--aku-font-head) !important;
}
body.ff-wl .wp-peek .dsh-hero .vd span {
  display: block;
  margin-top: 2px;
  font: 500 0.82rem/1.45 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}

/* Top 3 KPI Cards (.dsh-k) & Signal Cards (.dsh-s) — Clean Left-Accent Surfaces, Zero Pink/White Gradient Clash */
body.ff-wl .wp-peek :is(.dsh-k, .dsh-s) {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  justify-content: space-between;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek :is(.dsh-k, .dsh-s) {
  background: rgba(11, 26, 48, 0.72) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  border-left: 4px solid rgb(56, 189, 248) !important;
  box-shadow: none !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-g {
  background: linear-gradient(155deg, rgba(6, 52, 39, 0.75) 0%, rgba(9, 24, 42, 0.88) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.36) !important;
  border-left: 4px solid rgb(16, 185, 129) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-a {
  background: linear-gradient(155deg, rgba(58, 36, 9, 0.72) 0%, rgba(9, 24, 42, 0.88) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.36) !important;
  border-left: 4px solid rgb(245, 158, 11) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-r {
  background: linear-gradient(155deg, rgba(62, 16, 32, 0.75) 0%, rgba(9, 24, 42, 0.9) 100%) !important;
  border: 1px solid rgba(251, 113, 133, 0.36) !important;
  border-left: 4px solid rgb(244, 63, 94) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.ff-wl .wp-peek :is(.dsh-k, .dsh-s) {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
  border-left: 4px solid rgb(37, 99, 235) !important;
  box-shadow: 0 6px 14px -10px rgba(20, 47, 73, 0.1) !important;
  color: rgb(20, 47, 73) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-g {
  background: linear-gradient(155deg, rgb(220, 252, 231) 0%, rgb(255, 255, 255) 85%) !important;
  border: 1px solid rgba(5, 150, 105, 0.38) !important;
  border-left: 4px solid rgb(5, 150, 105) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-a {
  background: linear-gradient(155deg, rgb(254, 243, 199) 0%, rgb(255, 255, 255) 85%) !important;
  border: 1px solid rgba(217, 119, 6, 0.38) !important;
  border-left: 4px solid rgb(217, 119, 6) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.ff-wl .wp-peek :is(.dsh-k, .dsh-s).k-r {
  background: linear-gradient(155deg, rgb(255, 228, 230) 0%, rgb(255, 255, 255) 85%) !important;
  border: 1px solid rgba(225, 29, 72, 0.36) !important;
  border-left: 4px solid rgb(225, 29, 72) !important;
  box-shadow: none !important;
}

body.ff-wl .wp-peek .dsh-k h5 {
  font: 700 0.82rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-peek .dsh-k > b {
  font: 800 1.48rem/1.15 var(--aku-font-mono) !important;
  color: var(--wl-ink) !important;
}
body.ff-wl .wp-peek .dsh-k .dsh-muted {
  font: 600 0.84rem/1.3 var(--aku-font-body);
  color: var(--wl-ink2) !important;
}

/* 🧭 แนวโน้ม (.dsh-ma-strip) — Unboxed 3-Column Comparison Strip (No Nested Pill Boxes) */
body.ff-wl .wp-peek .dsh-tr-rule {
  font: 600 0.8rem/1.35 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-peek .dsh-ma-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}
body.ff-wl .wp-peek .dsh-ma-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 2px solid rgba(148, 163, 184, 0.28);
  min-width: 0;
}
body.ff-wl .wp-peek .dsh-ma-col:first-child {
  padding-left: 0;
  border-left: 0;
}
body.ff-wl .wp-peek .dsh-ma-col small {
  font: 600 0.72rem/1.2 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
  white-space: nowrap;
}
body.ff-wl .wp-peek .dsh-ma-col b {
  font: 800 0.94rem/1.2 var(--aku-font-mono) !important;
  color: var(--wl-ink) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ma-col.is-now.t-r b {
  color: rgb(253, 164, 175) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ma-col.is-now.t-g b {
  color: rgb(110, 231, 183) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ma-col.is-now.t-a b {
  color: rgb(252, 211, 77) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ma-col.is-now.t-r b {
  color: rgb(190, 18, 60) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ma-col.is-now.t-g b {
  color: rgb(4, 120, 87) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ma-col.is-now.t-a b {
  color: rgb(180, 83, 9) !important;
}

/* Unified Action Bar (.dsh-actions-bar) & High-Contrast Favorite Button (.wp-peek-fav-btn) */
body.ff-wl .wp-peek .dsh-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}
body.ff-wl .wp-peek .dsh-act-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
body.ff-wl .wp-peek .dsh-act-hint {
  font: 500 0.8rem/1.4 var(--aku-font-body);
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-peek .wp-peek-fav-btn,
body.ff-wl .wp-peek .wp-peek-req-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  font: 700 0.84rem/1 var(--aku-font-body) !important;
  cursor: pointer;
  transition: translate 140ms ease, border-color 140ms ease, background 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-fav-btn {
  background: rgba(80, 20, 48, 0.72) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.55) !important;
  color: rgb(253, 242, 248) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-fav-btn:hover,
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-fav-btn.on {
  background: rgba(131, 24, 67, 0.88) !important;
  border-color: rgb(244, 114, 182) !important;
  color: rgb(255, 255, 255) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-fav-btn {
  background: rgb(255, 241, 242) !important;
  border: 1.5px solid rgba(225, 29, 72, 0.38) !important;
  color: rgb(159, 18, 57) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-fav-btn:hover,
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-fav-btn.on {
  background: rgb(254, 205, 211) !important;
  border-color: rgb(225, 29, 72) !important;
  color: rgb(136, 19, 55) !important;
}

html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-req-btn {
  background: rgba(13, 31, 56, 0.88) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.48) !important;
  color: rgb(186, 230, 253) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-req-btn.is-stale,
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-req-btn.is-nobuy {
  background: rgba(78, 42, 8, 0.78) !important;
  border-color: rgba(251, 191, 36, 0.58) !important;
  color: rgb(254, 240, 138) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-req-btn:hover,
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-peek-req-btn.is-voted {
  background: rgba(6, 78, 59, 0.82) !important;
  border-color: rgb(52, 211, 153) !important;
  color: rgb(236, 253, 245) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-req-btn {
  background: rgb(239, 246, 255) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.36) !important;
  color: rgb(3, 105, 161) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-req-btn.is-stale,
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-req-btn.is-nobuy {
  background: rgb(254, 243, 199) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: rgb(146, 64, 14) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-req-btn:hover,
html[data-theme="light"] body.ff-wl .wp-peek .wp-peek-req-btn.is-voted {
  background: rgb(220, 252, 231) !important;
  border-color: rgb(5, 150, 105) !important;
  color: rgb(6, 95, 70) !important;
}

body.ff-wl .wp-peek .akd[hidden],
body.ff-wl .wp-peek .akd:empty {
  display: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd {
  --up: rgb(52, 211, 153);
  --down: rgb(251, 113, 133);
  --amber: rgb(251, 191, 36);
  --gold: rgb(56, 189, 248);
  --ink: rgb(244, 246, 252);
  --muted: rgb(189, 205, 226);
  --hair-soft: rgba(96, 165, 250, 0.24);
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd > .dt {
  background: rgba(11, 26, 48, 0.72) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  box-shadow: none !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs, .dt-biz, .dt-sum) {
  background: rgba(7, 17, 32, 0.65) !important;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-g {
  background: rgba(6, 52, 39, 0.55) !important;
  border-color: rgba(52, 211, 153, 0.38) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-g b {
  color: rgb(110, 231, 183) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-a {
  background: rgba(58, 36, 9, 0.55) !important;
  border-color: rgba(251, 191, 36, 0.38) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-a b {
  color: rgb(252, 211, 77) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-r {
  background: rgba(62, 16, 32, 0.55) !important;
  border-color: rgba(251, 113, 133, 0.38) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-r b {
  color: rgb(253, 164, 175) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-favbox {
  background: rgba(11, 26, 48, 0.88) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.42) !important;
  color: rgb(244, 246, 252) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-favbox :is(.bks button, .chips button, textarea) {
  background: rgb(6, 15, 30) !important;
  border: 1px solid rgba(96, 165, 250, 0.32) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .wp-favbox .bks button[aria-pressed="true"] {
  background: rgba(6, 78, 59, 0.85) !important;
  border-color: rgb(52, 211, 153) !important;
  color: rgb(240, 253, 244) !important;
}

/* ── 5. DONE CLIP QUEUE META BADGE (.cq-done-meta) ── */
body.ff-wl .cq-card.is-done {
  cursor: pointer;
}
body.ff-wl .cq-done-meta {
  font: 700 0.78rem/1.2 var(--aku-font-body);
  color: var(--wl-accent-mint);
  white-space: nowrap;
}
body.ff-wl .cq-card.is-done:hover .cq-done-meta {
  text-decoration: underline;
}

/* ── 6. ⏳ UNPRICED TAB, BUY-PRICE DATE STAMPS & TWO-WAY REQUEST BRIDGE (Audi 2026-10-30) ── */
body.ff-wl .wp-tile.none .pz-pcol.buy .v {
  font-size: 0.76rem !important;
  white-space: nowrap !important;
}
body.ff-wl .pz-date-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding-top: 3px;
  margin-top: 1px;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
}
html[data-theme="light"] body.ff-wl .pz-date-row {
  border-top-color: rgba(15, 23, 42, 0.10);
}
body.ff-wl .pz-date {
  font: 600 0.64rem/1.15 var(--aku-font-body);
  color: rgba(148, 163, 184, 0.92);
  white-space: nowrap;
  flex-shrink: 0;
}
html[data-theme="light"] body.ff-wl .pz-date {
  color: rgb(100, 116, 139);
}
body.ff-wl .pz-date-row.is-stale .pz-date {
  color: rgb(251, 191, 36);
  font-weight: 700;
}
html[data-theme="light"] body.ff-wl .pz-date-row.is-stale .pz-date {
  color: rgb(180, 83, 9);
}
body.ff-wl .pz-req-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px;
  border-radius: 999px;
  font: 700 0.62rem/1.1 var(--aku-font-body);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl .pz-req-chip {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: rgb(203, 213, 225);
}
html:not([data-theme="light"]) body.ff-wl .pz-req-chip.is-stale {
  background: rgba(120, 53, 15, 0.42);
  border-color: rgba(251, 191, 36, 0.55);
  color: rgb(253, 224, 71);
}
html:not([data-theme="light"]) body.ff-wl .pz-req-chip:hover,
html:not([data-theme="light"]) body.ff-wl .pz-req-chip.is-voted {
  background: rgba(6, 78, 59, 0.78);
  border-color: rgb(52, 211, 153);
  color: rgb(209, 250, 229);
}
html[data-theme="light"] body.ff-wl .pz-req-chip {
  background: rgb(241, 245, 249);
  border: 1px solid rgba(100, 116, 139, 0.28);
  color: rgb(51, 65, 85);
}
html[data-theme="light"] body.ff-wl .pz-req-chip.is-stale {
  background: rgb(254, 243, 199);
  border-color: rgba(217, 119, 6, 0.45);
  color: rgb(146, 64, 14);
}
html[data-theme="light"] body.ff-wl .pz-req-chip:hover,
html[data-theme="light"] body.ff-wl .pz-req-chip.is-voted {
  background: rgb(209, 250, 229);
  border-color: rgb(5, 150, 105);
  color: rgb(6, 95, 70);
}

/* Inline Quick-Price Input & Request Price CTA on Unpriced Cards (.pz-qb-row / .pz-req-cta) */
body.ff-wl .pz-qb-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 3px;
}
body.ff-wl .pz-qb-inp {
  flex: 1 1 0;
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  border-radius: 7px;
  font: 700 0.78rem/1 var(--aku-font-body);
}
html:not([data-theme="light"]) body.ff-wl .pz-qb-inp {
  background: rgba(6, 14, 28, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: rgb(248, 250, 252);
}
html[data-theme="light"] body.ff-wl .pz-qb-inp {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(2, 132, 199, 0.42);
  color: rgb(15, 23, 42);
}
body.ff-wl .pz-qb-btn {
  height: 27px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.22);
  color: rgb(167, 243, 208);
  font: 800 0.72rem/1 var(--aku-font-body);
  cursor: pointer;
  white-space: nowrap;
}
html[data-theme="light"] body.ff-wl .pz-qb-btn {
  background: rgb(209, 250, 229);
  border-color: rgba(5, 150, 105, 0.45);
  color: rgb(6, 95, 70);
}
body.ff-wl .pz-req-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 0.71rem/1.1 var(--aku-font-body);
  cursor: pointer;
  white-space: nowrap;
}
html:not([data-theme="light"]) body.ff-wl .pz-req-cta {
  background: rgba(14, 116, 144, 0.35);
  border: 1px solid rgba(56, 189, 248, 0.52);
  color: rgb(186, 230, 253);
}
html:not([data-theme="light"]) body.ff-wl .pz-req-cta:hover,
html:not([data-theme="light"]) body.ff-wl .pz-req-cta.is-voted {
  background: rgba(6, 78, 59, 0.82);
  border-color: rgb(52, 211, 153);
  color: rgb(209, 250, 229);
}
html[data-theme="light"] body.ff-wl .pz-req-cta {
  background: rgb(224, 242, 254);
  border: 1px solid rgba(2, 132, 199, 0.42);
  color: rgb(3, 105, 161);
}
html[data-theme="light"] body.ff-wl .pz-req-cta:hover,
html[data-theme="light"] body.ff-wl .pz-req-cta.is-voted {
  background: rgb(209, 250, 229);
  border-color: rgb(5, 150, 105);
  color: rgb(6, 95, 70);
}

/* Peek Modal Buy Date Row (.dsh-buy-date) */
body.ff-wl .dsh-buy-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 4px 0 6px;
  padding: 5px 9px;
  border-radius: 8px;
  font: 600 0.76rem/1.3 var(--aku-font-body);
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
html[data-theme="light"] body.ff-wl .dsh-buy-date {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(100, 116, 139, 0.24);
  color: rgb(51, 65, 85);
}
body.ff-wl .dsh-buy-date.is-stale {
  border-color: rgba(251, 191, 36, 0.45);
  color: rgb(253, 224, 71);
}
html[data-theme="light"] body.ff-wl .dsh-buy-date.is-stale {
  border-color: rgba(217, 119, 6, 0.42);
  background: rgb(254, 252, 232);
  color: rgb(146, 64, 14);
}

/* Unpriced / Reset Banner (.wp-nobuy-banner) & Two-Way Bridge (.wq-bridge-card) */
body.ff-wl .wp-nobuy-banner,
body.ff-wl .wq-bridge-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 14px 18px;
  margin: 8px 0 14px;
  border-radius: 16px;
  border-top: 3px solid rgb(251, 191, 36);
}
html:not([data-theme="light"]) body.ff-wl .wp-nobuy-banner,
html:not([data-theme="light"]) body.ff-wl .wq-bridge-card {
  background: linear-gradient(180deg, rgba(15, 31, 56, 0.92), rgba(9, 20, 38, 0.92));
  border-left: 1px solid rgba(251, 191, 36, 0.32);
  border-right: 1px solid rgba(251, 191, 36, 0.32);
  border-bottom: 1px solid rgba(251, 191, 36, 0.32);
}
html[data-theme="light"] body.ff-wl .wp-nobuy-banner,
html[data-theme="light"] body.ff-wl .wq-bridge-card {
  background: rgb(255, 255, 255);
  border-left: 1px solid rgba(217, 119, 6, 0.32);
  border-right: 1px solid rgba(217, 119, 6, 0.32);
  border-bottom: 1px solid rgba(217, 119, 6, 0.32);
}
body.ff-wl .wp-nobuy-head,
body.ff-wl .wp-nb-copy,
body.ff-wl .wq-bridge-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  flex: 1 1 360px;
}
body.ff-wl :is(.wp-nobuy-head, .wp-nb-copy, .wq-bridge-copy) b {
  font: 800 0.96rem/1.32 var(--aku-font-head);
  color: var(--wl-ink);
}
body.ff-wl :is(.wp-nobuy-head, .wp-nb-copy, .wq-bridge-copy) small {
  font: 500 0.82rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-nobuy-acts,
body.ff-wl .wp-nb-acts,
body.ff-wl .wq-bridge-jumps,
body.ff-wl .wq-bridge-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.ff-wl .wp-nobuy-btn,
body.ff-wl .wp-nb-btn,
body.ff-wl .wq-stat-btn,
body.ff-wl .wq-bstat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 999px;
  font: 700 0.8rem/1.1 var(--aku-font-body);
  cursor: pointer;
  border: 1px solid rgba(56, 189, 248, 0.42);
  background: rgba(14, 116, 144, 0.22);
  color: var(--wl-ink);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
html[data-theme="light"] body.ff-wl :is(.wp-nobuy-btn, .wp-nb-btn, .wq-stat-btn, .wq-bstat) {
  background: rgb(241, 245, 249);
  border-color: rgba(2, 132, 199, 0.34);
  color: rgb(15, 23, 42);
}
body.ff-wl .wq-bstat.is-on {
  border-color: rgb(52, 211, 153);
  background: rgba(16, 185, 129, 0.24);
}
html[data-theme="light"] body.ff-wl .wq-bstat.is-on {
  background: rgb(209, 250, 229);
  border-color: rgb(5, 150, 105);
}
body.ff-wl .wp-nobuy-btn.warn {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(180, 83, 9, 0.25);
}
body.ff-wl :is(.wp-nobuy-btn.restore, .wp-nb-btn.is-restore) {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.35);
}
/* Compact 1-Line Ranked Request Queue (.wq-compact-grid > .wq-compact-row)
 * Audi 2026-10-30: "ที่หน้า 🙋 ขอให้ออดี้ทำราคา มันใส่รายละเอียดมาเยอะเกินไปหรือเปล่า? มันแค่โชว์ logo บริษัท แล้วก็อันดับ ก็พอมั้ยตรงนี้"
 */
body.ff-wl #wp-req-meta:empty {
  display: none !important;
}
body.ff-wl #wp-req-filters button .cnt {
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--aku-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--g) 18%, transparent);
  color: inherit;
}
body.ff-wl .wq-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 8px;
}
@media (max-width: 860px) {
  body.ff-wl .wq-compact-grid {
    grid-template-columns: 1fr;
  }
}
body.ff-wl .wq-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 10px 14px;
  border-radius: 14px;
  transition: border-color 140ms ease, transform 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl .wq-compact-row {
  background: rgba(11, 24, 44, 0.88);
  border: 1px solid rgba(96, 165, 250, 0.24);
}
html[data-theme="light"] body.ff-wl .wq-compact-row {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(15, 23, 42, 0.12);
}
body.ff-wl .wq-compact-row .cq-left[data-jump-wl-card] {
  cursor: pointer;
}
body.ff-wl .wq-compact-row .cq-left[data-jump-wl-card]:hover .cq-tk {
  text-decoration: underline;
}
body.ff-wl .wq-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font: 700 0.72rem/1.15 var(--aku-font-body);
  white-space: nowrap;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.34);
  color: var(--wl-ink2);
}
body.ff-wl .wq-mini-tag.is-refresh {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.38);
  color: rgb(253, 224, 71);
}
html[data-theme="light"] body.ff-wl .wq-mini-tag.is-refresh {
  background: rgb(254, 243, 199);
  border-color: rgba(217, 119, 6, 0.38);
  color: rgb(146, 64, 14);
}
body.ff-wl .wq-mini-tag.is-new {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.38);
  color: rgb(221, 214, 254);
}
html[data-theme="light"] body.ff-wl .wq-mini-tag.is-new {
  background: rgb(243, 232, 255);
  border-color: rgba(124, 58, 237, 0.32);
  color: rgb(109, 40, 217);
}
body.ff-wl .wq-mini-tag.is-done {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.42);
  color: rgb(167, 243, 208);
}
html[data-theme="light"] body.ff-wl .wq-mini-tag.is-done {
  background: rgb(209, 250, 229);
  border-color: rgba(5, 150, 105, 0.38);
  color: rgb(6, 95, 70);
}
body.ff-wl .wq-owner-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.ff-wl .wq-oq-inp {
  width: 78px;
  height: 28px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(6, 15, 30, 0.88);
  color: var(--wl-ink);
  font: 700 0.76rem/1 var(--aku-font-body);
}
html[data-theme="light"] body.ff-wl .wq-oq-inp {
  background: rgb(255, 255, 255);
  color: rgb(15, 23, 42);
}
body.ff-wl .wq-oq-btn {
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.22);
  color: var(--wl-ink);
  font: 700 0.74rem/1 var(--aku-font-body);
  cursor: pointer;
}
body.ff-wl .wp-empty-audi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px 18px;
}
body.ff-wl .wp-empty-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ── 7. COHESIVE ARCHITECTURAL GLASS DOCK FOR nav.wp-tabs & .wp-tabs-sub (Audi 2026-10-29) ── */
body.ff-wl nav.wp-tabs [data-tab]::after,
body.ff-wl nav.wp-tabs [data-tab]::before {
  display: none !important;
  content: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub :is(b.ts-mine, b.ts-audi, b.ts-port, b.ts-req, b.ts-comm) {
  color: rgb(110, 231, 183) !important;
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub :is(b.ts-mine, b.ts-audi, b.ts-port, b.ts-req, b.ts-comm) {
  color: rgb(4, 120, 87) !important;
}
body.ff-wl nav.wp-tabs [data-tab] {
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease !important;
}
body.ff-wl nav.wp-tabs [data-tab]:hover {
  transform: translateY(-1.5px);
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab] {
  background: linear-gradient(165deg, rgba(13, 31, 56, 0.86), rgba(8, 20, 38, 0.94)) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.34) !important;
  border-top: 1.5px solid rgba(186, 230, 253, 0.28) !important;
  color: rgb(226, 232, 240) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px -8px rgba(2, 6, 23, 0.65) !important;
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab]:hover {
  background: linear-gradient(165deg, rgba(16, 42, 72, 0.92), rgba(10, 26, 48, 0.96)) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
  color: rgb(255, 255, 255) !important;
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab][aria-selected="true"] {
  background: linear-gradient(135deg, rgb(6, 95, 70) 0%, rgb(13, 148, 136) 54%, rgb(3, 105, 161) 100%) !important;
  border: 1.5px solid rgb(110, 231, 183) !important;
  border-top: 2px solid rgb(167, 243, 208) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -6px rgba(16, 185, 129, 0.48) !important;
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab] {
  background: linear-gradient(165deg, rgb(255, 255, 255), rgb(241, 247, 255)) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.28) !important;
  color: rgb(30, 41, 59) !important;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 4px 10px -6px rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab]:hover {
  background: linear-gradient(165deg, rgb(240, 253, 244), rgb(224, 242, 254)) !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
  color: rgb(6, 78, 59) !important;
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab][aria-selected="true"] {
  background: linear-gradient(135deg, rgb(167, 243, 208) 0%, rgb(209, 250, 229) 52%, rgb(224, 242, 254) 100%) !important;
  border: 1.5px solid rgb(5, 150, 105) !important;
  border-bottom: 3px solid rgb(4, 120, 87) !important;
  color: rgb(6, 78, 59) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 18px -6px rgba(5, 150, 105, 0.26) !important;
}

/* ── 8. #wp-peek INTERIOR LAYOUT REDESIGN — TOP TOOLBAR, 2-COL CONTEXT GRID, UNBOXED .akd & 4x2 COMPANY GRID (Audi 2026-10-28) ── */
body.ff-wl .wp-peek .wp-peek-dash {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top Action Toolbar (.dsh-actions-bar) directly below .dsh-hero */
body.ff-wl .wp-peek .dsh-actions-bar {
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-actions-bar {
  background: rgba(11, 25, 46, 0.78) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-actions-bar {
  background: rgb(241, 245, 249) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
}

/* Core 3 KPI Cards (.dsh-kpis) with inline header (.dsh-k-head) */
body.ff-wl .wp-peek .dsh-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}
body.ff-wl .wp-peek .dsh-k-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
body.ff-wl .wp-peek .dsh-k-head h5 {
  margin: 0 !important;
}
body.ff-wl .wp-peek .dsh-k-head > span,
body.ff-wl .wp-peek .dsh-k-head > b {
  font: 700 0.78rem/1.2 var(--aku-font-body) !important;
  white-space: nowrap;
}

/* Balanced 2-Column Context Grid (.dsh-context-grid): Left = 52W Range, Right = AI Correlation + Dividend */
body.ff-wl .wp-peek .dsh-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
body.ff-wl .wp-peek .dsh-ctx-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  min-width: 0;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ctx-card {
  background: rgba(11, 26, 48, 0.72);
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-left: 4px solid rgb(56, 189, 248);
  color: rgb(244, 246, 252);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ctx-card.k-g {
  border-left-color: rgb(16, 185, 129);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ctx-card.k-a {
  border-left-color: rgb(245, 158, 11);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-ctx-card.k-r {
  border-left-color: rgb(244, 63, 94);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ctx-card {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-left: 4px solid rgb(37, 99, 235);
  box-shadow: 0 6px 14px -10px rgba(20, 47, 73, 0.08);
  color: rgb(20, 47, 73);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ctx-card.k-g {
  border-left-color: rgb(5, 150, 105);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ctx-card.k-a {
  border-left-color: rgb(217, 119, 6);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-ctx-card.k-r {
  border-left-color: rgb(225, 29, 72);
}

body.ff-wl .wp-peek .ctx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.ff-wl .wp-peek .ctx-head h5 {
  margin: 0 !important;
  font: 700 0.84rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-peek .dsh-pz-badge,
body.ff-wl .wp-peek .ctx-ai-score {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font: 700 0.74rem/1.2 var(--aku-font-body);
  white-space: nowrap;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek :is(.dsh-pz-badge, .ctx-ai-score) {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: rgb(226, 232, 240);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-pz-badge.t-g {
  background: rgba(6, 78, 59, 0.65);
  border-color: rgba(52, 211, 153, 0.45);
  color: rgb(110, 231, 183);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-pz-badge.t-a {
  background: rgba(120, 53, 15, 0.65);
  border-color: rgba(251, 191, 36, 0.45);
  color: rgb(252, 211, 77);
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .dsh-pz-badge.t-r {
  background: rgba(136, 19, 55, 0.65);
  border-color: rgba(251, 113, 133, 0.45);
  color: rgb(253, 164, 175);
}
html[data-theme="light"] body.ff-wl .wp-peek :is(.dsh-pz-badge, .ctx-ai-score) {
  background: rgb(241, 245, 249);
  border: 1px solid rgba(100, 116, 139, 0.28);
  color: rgb(51, 65, 85);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-pz-badge.t-g {
  background: rgb(220, 252, 231);
  border-color: rgba(5, 150, 105, 0.38);
  color: rgb(6, 95, 70);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-pz-badge.t-a {
  background: rgb(254, 243, 199);
  border-color: rgba(217, 119, 6, 0.38);
  color: rgb(146, 64, 14);
}
html[data-theme="light"] body.ff-wl .wp-peek .dsh-pz-badge.t-r {
  background: rgb(255, 228, 230);
  border-color: rgba(225, 29, 72, 0.38);
  color: rgb(159, 18, 57);
}

body.ff-wl .wp-peek .ctx-foot {
  display: block;
  margin: 0;
  font: 500 0.78rem/1.4 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-peek .ctx-ai-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.ff-wl .wp-peek .dsh-div-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.28);
}
body.ff-wl .wp-peek .dsh-div-row .div-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.ff-wl .wp-peek .dsh-div-row .div-lbl {
  font: 700 0.8rem/1.2 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-peek .dsh-div-row .div-main b {
  font: 800 0.88rem/1.2 var(--aku-font-mono);
  color: var(--wl-ink);
}
body.ff-wl .wp-peek .dsh-div-row .div-sub {
  font: 500 0.74rem/1.3 var(--aku-font-body);
  color: var(--wl-ink2);
}

/* ── .akd Fundamental & Analyst Deep-Dive: Unbox Nested Containers & Balance Columns ── */
body.ff-wl .wp-peek .akd {
  margin-top: 12px !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd :is(.dt-sum, .dt-hero) {
  background: transparent !important;
  box-shadow: none !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-sum {
  border: 0 !important;
  border-left: 3px solid rgba(96, 165, 250, 0.55) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  margin: 4px 0 8px !important;
  font: 600 0.82rem/1.45 var(--aku-font-body) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-sum:is(.t-g, .g) {
  border-left-color: rgb(16, 185, 129) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-sum:is(.t-a, .a) {
  border-left-color: rgb(245, 158, 11) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-sum:is(.t-r, .r) {
  border-left-color: rgb(244, 63, 94) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-hero {
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 0 !important;
  padding: 4px 0 12px !important;
  margin-bottom: 10px !important;
}

/* Analyst Vote Distribution Bar (.dt-votes-wrap) */
body.ff-wl .wp-peek .akd .dt-votes-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.26);
}
body.ff-wl .wp-peek .akd .dt-votes-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.2);
  gap: 2px;
  margin-bottom: 8px;
}
body.ff-wl .wp-peek .akd .dt-votes-bar i {
  display: block;
  height: 100%;
  min-width: 4px;
}
body.ff-wl .wp-peek .akd .dt-votes-bar :is(.vb-b, .vb-buy) {
  background: rgb(16, 185, 129);
}
body.ff-wl .wp-peek .akd .dt-votes-bar :is(.vb-h, .vb-hold) {
  background: rgb(245, 158, 11);
}
body.ff-wl .wp-peek .akd .dt-votes-bar :is(.vb-s, .vb-sell) {
  background: rgb(244, 63, 94);
}
body.ff-wl .wp-peek .akd .dt-votes-leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font: 600 0.78rem/1.3 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .wp-peek .akd .dt-votes-leg b {
  font-family: var(--aku-font-mono);
  color: var(--wl-ink);
}

/* Clean Left-Accent Metric Cells in .vgrid (.vt) & 4x2 Company Grid (.cgrid > .cs) */
body.ff-wl .wp-peek .akd .vgrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.ff-wl .wp-peek .akd .cgrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs) {
  border: 0 !important;
  border-left: 3px solid rgba(96, 165, 250, 0.5) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs) {
  background: rgba(7, 17, 32, 0.55) !important;
}
html[data-theme="light"] body.ff-wl .wp-peek .akd :is(.vt, .cs) {
  background: rgb(248, 250, 252) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-g {
  border-left-color: rgb(16, 185, 129) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-a {
  border-left-color: rgb(245, 158, 11) !important;
}
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd :is(.vt, .cs).t-r {
  border-left-color: rgb(244, 63, 94) !important;
}
body.ff-wl .wp-peek .akd .vt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
body.ff-wl .wp-peek .akd .vt-head span {
  font: 600 0.76rem/1.25 var(--aku-font-body) !important;
  color: var(--wl-ink2) !important;
}
body.ff-wl .wp-peek .akd .vt-head b {
  font: 800 1.02rem/1.15 var(--aku-font-mono) !important;
  white-space: nowrap;
}

/* Unbox .dt-biz (🏭 บริษัทนี้ทำอะไร) at bottom of Company Card */
:is(html:not([data-theme="light"]), html[data-theme="light"]) body.ff-wl .wp-peek .akd .dt-biz {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px dashed rgba(148, 163, 184, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 0 2px !important;
  margin-top: 14px !important;
}

@media (max-width: 820px) {
  body.ff-wl .wp-peek .dsh-kpis,
  body.ff-wl .wp-peek .dsh-context-grid {
    grid-template-columns: 1fr !important;
  }
  body.ff-wl .wp-peek .akd .cgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  body.ff-wl .wp-peek .akd .vgrid,
  body.ff-wl .wp-peek .akd .cgrid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. ROUND 15 (2026-10-28):
   - #wp-req-pages clean pagination bar & non-empty .wp-rq-box
   - #1 Next-Up Spotlight Card (.cq-card.is-next-up) in 🏆 คิวทำคลิปของออดี้
   - Done Content Type Sub-Filters (.cq-done-toolbar) & Badges (.cq-media-badge)
   ── */
body.ff-wl .wp-rq-box:not(:has(> :not([hidden]))) {
  display: none !important;
}
body.ff-wl #wp-req-pages[hidden],
body.ff-wl #wp-req-pages.wq-pages[hidden] {
  display: none !important;
}
body.ff-wl #wp-req-pages.wq-pages:not([hidden]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px !important;
  margin: 10px 0 14px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-req-pages.wq-pages {
  background: rgba(11, 26, 48, 0.68) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  color: rgb(203, 213, 225) !important;
}
html[data-theme="light"] body.ff-wl #wp-req-pages.wq-pages {
  background: rgb(248, 250, 252) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  color: rgb(51, 65, 85) !important;
}
body.ff-wl #wp-req-pages .wq-page-info {
  font: 600 0.82rem/1.3 var(--aku-font-body) !important;
  text-align: center;
}
body.ff-wl #wp-req-pages .wq-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font: 700 0.8rem/1 var(--aku-font-body) !important;
  cursor: pointer;
}
body.ff-wl #wp-req-pages .wq-page-btn::before,
body.ff-wl #wp-req-pages .wq-page-btn::after {
  display: none !important;
  content: none !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-req-pages .wq-page-btn {
  background: rgba(15, 36, 68, 0.85) !important;
  border: 1px solid rgba(96, 165, 250, 0.38) !important;
  color: rgb(226, 232, 240) !important;
}
html[data-theme="light"] body.ff-wl #wp-req-pages .wq-page-btn {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: rgb(20, 47, 73) !important;
}
body.ff-wl #wp-req-pages .wq-page-btn:disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

/* #1 Next-Up Featured Spotlight Box (.cq-card.is-next-up) in 🏆 คิวทำคลิปของออดี้ */
body.ff-wl .cq-card.is-next-up {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px 20px !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  position: relative;
}
html:not([data-theme="light"]) body.ff-wl .cq-card.is-next-up {
  background:
    radial-gradient(480px 180px at 12% 0%, rgba(16, 185, 129, 0.22), transparent 70%),
    linear-gradient(135deg, rgba(6, 54, 43, 0.92) 0%, rgba(10, 32, 58, 0.95) 55%, rgba(8, 22, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.68) !important;
  border-left: 5px solid rgb(16, 185, 129) !important;
  box-shadow: 0 16px 34px -16px rgba(16, 185, 129, 0.38), inset 0 1px 0 rgba(167, 243, 208, 0.18) !important;
  color: rgb(244, 246, 252) !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-next-up {
  background:
    radial-gradient(480px 180px at 12% 0%, rgba(16, 185, 129, 0.18), transparent 70%),
    linear-gradient(135deg, rgb(220, 252, 231) 0%, rgb(240, 249, 255) 58%, rgb(255, 255, 255) 100%) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.52) !important;
  border-left: 5px solid rgb(5, 150, 105) !important;
  box-shadow: 0 14px 28px -16px rgba(5, 150, 105, 0.24), inset 0 1px 0 rgb(255, 255, 255) !important;
  color: rgb(20, 47, 73) !important;
}
body.ff-wl .cq-next-main {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
body.ff-wl .cq-next-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
body.ff-wl .cq-next-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font: 800 0.76rem/1.2 var(--aku-font-body);
}
html:not([data-theme="light"]) body.ff-wl .cq-next-pill {
  background: rgba(6, 78, 59, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.65);
  color: rgb(167, 243, 208);
}
html[data-theme="light"] body.ff-wl .cq-next-pill {
  background: rgb(5, 150, 105);
  border: 1px solid rgb(4, 120, 87);
  color: rgb(255, 255, 255);
}
body.ff-wl .cq-next-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.ff-wl .cq-card.is-next-up .qc-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  flex-shrink: 0;
}
body.ff-wl .cq-next-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.ff-wl .cq-next-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
body.ff-wl .cq-card.is-next-up .cq-tk {
  font: 900 1.32rem/1.1 var(--aku-font-mono) !important;
}
body.ff-wl .cq-next-hint {
  font: 700 0.76rem/1.2 var(--aku-font-body);
  color: var(--wl-accent-mint);
}
body.ff-wl .cq-next-why {
  margin: 0;
  font: 500 0.84rem/1.45 var(--aku-font-body);
  color: var(--wl-ink2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.ff-wl .cq-next-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  flex-shrink: 0;
}
body.ff-wl .cq-rush-stat.is-next-stat .cq-crowd-txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
body.ff-wl .cq-rush-stat.is-next-stat .cq-crowd-txt small {
  font: 600 0.7rem/1.1 var(--aku-font-body);
  color: var(--wl-accent-mint);
}
body.ff-wl .cq-next-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.ff-wl .cq-plus-btn.is-next-btn {
  min-height: 36px !important;
  padding: 0 16px !important;
  font: 800 0.84rem/1 var(--aku-font-body) !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-plus-btn.is-next-btn:not(.on) {
  background: linear-gradient(165deg, rgb(5, 150, 105), rgb(4, 120, 87)) !important;
  border: 1px solid rgb(110, 231, 183) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55);
}
html[data-theme="light"] body.ff-wl .cq-plus-btn.is-next-btn:not(.on) {
  background: linear-gradient(165deg, rgb(5, 150, 105), rgb(4, 120, 87)) !important;
  border: 1px solid rgb(6, 95, 70) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: 0 6px 14px -6px rgba(5, 150, 105, 0.35);
}

/* Sub-header dividing #1 Spotlight from #2..#N waiting queue */
body.ff-wl .cq-rest-label {
  grid-column: 1 / -1 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 4px 4px 0;
  font: 700 0.8rem/1.3 var(--aku-font-body);
  color: var(--wl-ink2);
}
body.ff-wl .cq-rest-label small {
  font: 500 0.76rem/1.3 var(--aku-font-body);
  opacity: 0.85;
}

/* Done Queue Sub-Filter Bar (.cq-done-toolbar) & Media Type Badges (.cq-media-badge) */
body.ff-wl .cq-done-toolbar {
  grid-column: 1 / -1 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.24);
  margin-bottom: 2px;
}
body.ff-wl .cqd-lbl {
  font: 700 0.78rem/1.2 var(--aku-font-body);
  color: var(--wl-ink2);
  margin-right: 4px;
}
body.ff-wl .cqd-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font: 700 0.76rem/1 var(--aku-font-body);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl .cqd-pill {
  background: rgba(11, 26, 48, 0.75);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: rgb(203, 213, 225);
}
html:not([data-theme="light"]) body.ff-wl .cqd-pill[aria-pressed="true"] {
  background: rgba(6, 78, 59, 0.88);
  border-color: rgb(52, 211, 153);
  color: rgb(240, 253, 244);
}
html[data-theme="light"] body.ff-wl .cqd-pill {
  background: rgb(248, 250, 252);
  border: 1px solid rgba(59, 130, 246, 0.26);
  color: rgb(51, 65, 85);
}
html[data-theme="light"] body.ff-wl .cqd-pill[aria-pressed="true"] {
  background: rgb(209, 250, 229);
  border-color: rgb(5, 150, 105);
  color: rgb(6, 95, 70);
}
body.ff-wl .cq-media-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
body.ff-wl .cq-media-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font: 700 0.72rem/1 var(--aku-font-body);
  white-space: nowrap;
}
html:not([data-theme="light"]) body.ff-wl .cq-media-badge.is-clip {
  background: rgba(124, 45, 18, 0.55);
  border: 1px solid rgba(251, 146, 60, 0.52);
  color: rgb(254, 215, 170);
}
html[data-theme="light"] body.ff-wl .cq-media-badge.is-clip {
  background: rgb(255, 237, 213);
  border: 1px solid rgba(234, 88, 12, 0.38);
  color: rgb(154, 52, 18);
}
html:not([data-theme="light"]) body.ff-wl .cq-media-badge.is-deep {
  background: rgba(12, 74, 110, 0.58);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: rgb(186, 230, 253);
}
html[data-theme="light"] body.ff-wl .cq-media-badge.is-deep {
  background: rgb(224, 242, 254);
  border: 1px solid rgba(2, 132, 199, 0.38);
  color: rgb(7, 89, 133);
}
html:not([data-theme="light"]) body.ff-wl .cq-card.is-done.has-both {
  border-left: 3.5px solid rgb(52, 211, 153) !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-card.is-done.has-clip-only {
  border-left: 3.5px solid rgb(251, 146, 60) !important;
}
html:not([data-theme="light"]) body.ff-wl .cq-card.is-done.has-deep-only {
  border-left: 3.5px solid rgb(56, 189, 248) !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-done.has-both {
  border-left: 3.5px solid rgb(5, 150, 105) !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-done.has-clip-only {
  border-left: 3.5px solid rgb(234, 88, 12) !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-done.has-deep-only {
  border-left: 3.5px solid rgb(2, 132, 199) !important;
}








/* ==========================================================================
   ROUND 16 (2026-10-28): Next-Up Spotlight = GOLD (not emerald).
   Emerald stays reserved for "you already voted / +1 แล้ว" so the #1 card
   never blends into the voted rows below it. Bigger logo + ticker.
   ========================================================================== */
html:not([data-theme="light"]) body.ff-wl .cq-card.is-next-up {
  background:
    radial-gradient(520px 200px at 10% 0%, rgba(245, 158, 11, 0.30), transparent 70%),
    linear-gradient(135deg, rgb(66, 40, 6) 0%, rgb(38, 26, 10) 50%, rgb(14, 20, 36) 100%) !important;
  border: 2px solid rgb(251, 191, 36) !important;
  border-left: 6px solid rgb(245, 158, 11) !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), 0 18px 38px -16px rgba(245, 158, 11, 0.5) !important;
}
html[data-theme="light"] body.ff-wl .cq-card.is-next-up {
  background:
    radial-gradient(520px 200px at 10% 0%, rgba(251, 191, 36, 0.32), transparent 70%),
    linear-gradient(135deg, rgb(254, 243, 199) 0%, rgb(255, 251, 235) 60%, rgb(255, 255, 255) 100%) !important;
  border: 2px solid rgb(217, 119, 6) !important;
  border-left: 6px solid rgb(217, 119, 6) !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), 0 14px 30px -16px rgba(180, 83, 9, 0.32) !important;
  color: rgb(41, 23, 2) !important;
}
body.ff-wl .cq-card.is-next-up { padding: 18px 20px !important; }
html:not([data-theme="light"]) body.ff-wl .cq-next-pill,
html[data-theme="light"] body.ff-wl .cq-next-pill {
  background: linear-gradient(165deg, rgb(251, 191, 36), rgb(217, 119, 6)) !important;
  border: 1px solid rgb(255, 237, 160) !important;
  color: rgb(41, 23, 2) !important;
}
html body.ff-wl #fbClipQueue .cq-card.is-next-up .fb-qc-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgb(255, 255, 255), 0 0 0 6px rgb(245, 158, 11) !important;
}
html body.ff-wl #fbClipQueue#fbClipQueue#fbClipQueue .cq-card.is-next-up .cq-tk { font-size: 1.7rem !important; font-weight: 900 !important; line-height: 1.05 !important; font-family: "JetBrains Mono", ui-monospace, monospace !important; }
html:not([data-theme="light"]) html body.ff-wl #fbClipQueue#fbClipQueue#fbClipQueue .cq-card.is-next-up .cq-tk { color: rgb(253, 230, 138) !important; }
html[data-theme="light"] html body.ff-wl #fbClipQueue#fbClipQueue#fbClipQueue .cq-card.is-next-up .cq-tk { color: rgb(120, 53, 15) !important; }
html:not([data-theme="light"]) body.ff-wl .cq-card.is-next-up .cq-next-hint { color: rgb(252, 211, 77) !important; }
html[data-theme="light"] body.ff-wl .cq-card.is-next-up .cq-next-hint { color: rgb(146, 64, 14) !important; }
html:not([data-theme="light"]) body.ff-wl .cq-card.is-next-up .cq-next-why { color: rgb(231, 222, 204) !important; }
html[data-theme="light"] body.ff-wl .cq-card.is-next-up .cq-next-why { color: rgb(68, 45, 14) !important; }
html:not([data-theme="light"]) body.ff-wl .cq-rush-stat.is-next-stat .cq-crowd-txt small { color: rgb(252, 211, 77) !important; }
html[data-theme="light"] body.ff-wl .cq-rush-stat.is-next-stat .cq-crowd-txt small { color: rgb(146, 64, 14) !important; }
html:not([data-theme="light"]) body.ff-wl .cq-plus-btn.is-next-btn:not(.on),
html[data-theme="light"] body.ff-wl .cq-plus-btn.is-next-btn:not(.on) {
  background: linear-gradient(165deg, rgb(251, 191, 36), rgb(217, 119, 6)) !important;
  border: 1px solid rgb(255, 237, 160) !important;
  color: rgb(41, 23, 2) !important;
  box-shadow: 0 6px 16px -6px rgba(217, 119, 6, 0.6) !important;
  min-height: 40px !important;
}

html body.ff-wl #fbClipQueue .cq-card.is-next-up .fb-qc-logo img { width: 100% !important; height: 100% !important; }

@media (max-width: 640px) {
  html body.ff-wl #fbClipQueue .cq-card.is-next-up .cq-next-side { width: 100%; justify-content: space-between; }
  html body.ff-wl #fbClipQueue .cq-card.is-next-up .cq-next-actions { flex-wrap: wrap; width: 100%; justify-content: space-between; }
  html body.ff-wl #fbClipQueue .cq-card.is-next-up .cq-plus-btn.is-next-btn { flex: 1 1 auto; }
  html body.ff-wl #fbClipQueue .cq-card.is-next-up .fb-qc-logo { width: 48px !important; height: 48px !important; }
}


/* ==========================================================================
   ROUND 17 (2026-10-28): ⭐ Watchlist ของคุณ = compact tile grid (same as
   👀 Watchlist ออดี้). Tap a tile → full editor opens under the grid.
   Audi: "แบบนี้มันยาวไป ทำให้เหมือน 👀 Watchlist ออดี้ ดีกว่า"
   ========================================================================== */
body.ff-wl #wp-m-list { display: block !important; }
body.ff-wl #wp-m-list .wp-m-tiles { margin-top: 4px; }
body.ff-wl #wp-m-list .mine-tile { cursor: pointer; }
body.ff-wl #wp-m-list .mine-tile .mine-fav { font-size: 0.8rem; }
html:not([data-theme="light"]) body.ff-wl #wp-m-list .mine-tile.is-open {
  border-color: rgb(96, 165, 250) !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.55), 0 10px 22px -12px rgba(59, 130, 246, 0.7) !important;
}
html[data-theme="light"] body.ff-wl #wp-m-list .mine-tile.is-open {
  border-color: rgb(37, 99, 235) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 10px 22px -12px rgba(37, 99, 235, 0.4) !important;
}
body.ff-wl #wp-m-list .wp-m-hint {
  margin: 14px 0 0;
  font: 500 0.84rem/1.5 var(--aku-font-body, 'AK Thai', 'Google Sans', sans-serif);
  color: var(--wl-ink2, rgb(148, 163, 184));
  text-align: center;
}
body.ff-wl #wp-m-list .wp-m-editor { margin-top: 16px; }
body.ff-wl #wp-m-list .wp-row.mine.is-editor { position: relative; padding-right: 48px; }
body.ff-wl #wp-m-list .wp-mine-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font: 700 0.9rem/1 var(--aku-font-body, sans-serif);
  cursor: pointer;
  z-index: 2;
}
html:not([data-theme="light"]) body.ff-wl #wp-m-list .wp-mine-close {
  background: rgb(6, 14, 28);
  border: 1.5px solid rgba(125, 211, 252, 0.6);
  color: rgb(226, 232, 240);
}
html[data-theme="light"] body.ff-wl #wp-m-list .wp-mine-close {
  background: rgb(255, 255, 255);
  border: 1.5px solid rgb(37, 99, 235);
  color: rgb(30, 41, 59);
}

/* Round 17: next-up card pill matches the refined galaxy tag (dark glass + gold hairline) */
html:not([data-theme="light"]) body.ff-wl .cq-next-pill {
  background: rgba(10, 16, 32, 0.88) !important;
  border: 1px solid rgba(252, 211, 77, 0.85) !important;
  color: rgb(253, 224, 138) !important;
}
html[data-theme="light"] body.ff-wl .cq-next-pill {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(217, 119, 6) !important;
  color: rgb(146, 64, 14) !important;
}
@media (max-width: 900px) {
  body.ff-wl #wp-m-list .wp-row.mine.is-editor { padding-top: 52px !important; padding-right: inherit; }
  body.ff-wl #wp-m-list .wp-mine-close { top: 10px; right: 10px; }
}


/* ── Watchlist Zone-Radar Card (.wp-tile / .pz) (Audi 2026-10-29 v3: True Luminous Emerald Scale + Red Over-Target + Clean Non-Sunken Price-Comparison Cards) ── */
html:not([data-theme="light"]) body.ff-wl{--z-in:rgb(16,185,129);--z-in-deep:rgb(5,150,105);--z-in-mid:rgb(52,211,153);--z-in-soft:rgb(134,239,172);--z-ng:rgb(251,191,36);--z-ny:rgb(245,158,11);--z-far:rgb(244,63,94)}
html[data-theme="light"] body.ff-wl{--z-in:rgb(5,150,105);--z-in-deep:rgb(4,120,87);--z-in-mid:rgb(16,185,129);--z-in-soft:rgb(52,211,153);--z-ng:rgb(217,119,6);--z-ny:rgb(180,83,9);--z-far:rgb(225,29,72)}
body.ff-wl :is(.wp-lanes,.wp-list,.mp-list){grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
body.ff-wl .wp-lane{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body.ff-wl .wp-lane-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}

/* Separate .wp-lane outer surface onto Deep Obsidian Navy (D1) / Crisp Sky-White (L1) with canonical .aku-zonecard 3px top accent bar */
html:not([data-theme="light"]) body.ff-wl .wp-lane.in{background:linear-gradient(180deg,rgba(14,31,55,.94) 0%,rgba(9,21,39,.94) 100%)!important;border:1px solid rgba(148,196,240,.22)!important;border-top:3px solid rgb(16,185,129)!important;box-shadow:0 18px 36px -20px rgba(0,0,0,.75)!important}
html[data-theme="light"] body.ff-wl .wp-lane.in{background:rgb(255,255,255)!important;border:1px solid rgba(15,39,68,.14)!important;border-top:3px solid rgb(5,150,105)!important;box-shadow:0 14px 30px -18px rgba(15,23,42,.12)!important}

/* Amber Lane Accent for .wp-lane.near ("ใกล้ถึงราคารอรับ ≤ 8%") */
html:not([data-theme="light"]) body.ff-wl .wp-lane.near{background:linear-gradient(180deg,rgba(14,31,55,.94) 0%,rgba(9,21,39,.94) 100%)!important;border:1px solid rgba(148,196,240,.22)!important;border-top:3px solid rgb(251,191,36)!important}
html[data-theme="light"] body.ff-wl .wp-lane.near{background:rgb(255,255,255)!important;border:1px solid rgba(15,39,68,.14)!important;border-top:3px solid rgb(217,119,6)!important}

/* Red Lane Accent for .wp-lane.far ("เกินราคารอซื้อไปเยอะ > 8%") */
html:not([data-theme="light"]) body.ff-wl .wp-lane.far{background:linear-gradient(180deg,rgba(14,31,55,.94) 0%,rgba(9,21,39,.94) 100%)!important;border:1px solid rgba(148,196,240,.22)!important;border-top:3px solid rgb(244,63,94)!important}
html[data-theme="light"] body.ff-wl .wp-lane.far{background:rgb(255,255,255)!important;border:1px solid rgba(15,39,68,.14)!important;border-top:3px solid rgb(225,29,72)!important}

/* Clean right-aligned chevron disc in .wp-lane-h (retired "23% ของลิสต์" .wp-lane-share clutter) */
body.ff-wl .wp-lane-share{display:none!important}
body.ff-wl .wp-lane-h .car{margin-left:auto;width:28px;height:28px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.28);color:var(--wl-ink);font-size:.82rem;line-height:1;transition:transform .15s ease,background .15s ease,border-color .15s ease}
body.ff-wl .wp-lane-h:hover .car{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.55);transform:scale(1.06)}

/* ── Slim 1-Line Underline-Glow Depth Filter Bar (.wp-ds-filters > .wp-ds-fbtn.aku-ftab)
   Audi 2026-10-30: retired redundant depth-stage header, spectrum ruler, and duplicate spotlight card above .wp-tiles ── */
body.ff-wl .wp-ds-filters{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 12px;padding:4px 8px;border-radius:14px;background:rgba(8,15,30,.62);border:1px solid rgba(148,163,184,.2);min-width:0}
html[data-theme="light"] body.ff-wl .wp-ds-filters{background:rgba(241,245,249,.92);border-color:rgba(15,23,42,.12)}
body.ff-wl .wp-ds-fbtn{--g:rgb(56,189,248);position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 11px 9px;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;font:650 .8rem/1 var(--aku-font-body);color:color-mix(in srgb,var(--g) 76%,rgb(241,245,249))!important;cursor:pointer;user-select:none;transition:color .2s,background .2s,translate .2s}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn{color:color-mix(in srgb,var(--g) 78%,rgb(4,16,28))!important}
body.ff-wl .wp-ds-fbtn.is-all{--g:rgb(56,189,248)}
body.ff-wl .wp-ds-fbtn.is-deep{--g:rgb(52,211,153)}
body.ff-wl .wp-ds-fbtn.is-mid{--g:rgb(34,211,238)}
body.ff-wl .wp-ds-fbtn.is-soft{--g:rgb(96,165,250)}
body.ff-wl .wp-ds-fbtn.is-star{--g:rgb(250,204,21)}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-all{--g:rgb(2,132,199)}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-deep{--g:rgb(5,150,105)}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-mid{--g:rgb(8,145,178)}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-soft{--g:rgb(37,99,235)}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-star{--g:rgb(217,119,6)}
body.ff-wl .wp-ds-fbtn::after{content:""!important;display:block!important;position:absolute;left:10px;right:10px;bottom:1px;height:3px;border-radius:3px;background:var(--g);box-shadow:0 0 10px 1px var(--g);scale:.35 1;opacity:.45;transition:scale .25s cubic-bezier(.22,1,.36,1),opacity .2s}
body.ff-wl .wp-ds-fbtn .em{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
body.ff-wl .wp-ds-fbtn:hover{translate:0 -1px;color:rgb(255,255,255)!important;background:color-mix(in srgb,var(--g) 12%,transparent)!important}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn:hover{color:rgb(15,23,42)!important}
body.ff-wl .wp-ds-fbtn:hover::after{scale:.72 1;opacity:.85}
body.ff-wl .wp-ds-fbtn:hover .em{animation:akuEmWiggle .55s ease}
body.ff-wl .wp-ds-fbtn b{font-family:var(--aku-font-body);font-variant-numeric:tabular-nums;font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--g) 18%,transparent);color:color-mix(in srgb,var(--g) 85%,rgb(255,255,255))}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn b{color:color-mix(in srgb,var(--g) 85%,rgb(4,16,28))}
body.ff-wl .wp-ds-fbtn[aria-pressed="true"]{color:rgb(255,255,255)!important;font-weight:700;background:radial-gradient(90% 95% at 50% 105%,color-mix(in srgb,var(--g) 34%,transparent),transparent 72%)!important;box-shadow:none!important}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn[aria-pressed="true"]{color:rgb(15,23,42)!important;background:radial-gradient(90% 95% at 50% 105%,color-mix(in srgb,var(--g) 28%,transparent),transparent 72%)!important}
body.ff-wl .wp-ds-fbtn[aria-pressed="true"]::after{scale:1 1;opacity:1}
body.ff-wl .wp-ds-fbtn[aria-pressed="true"] b{background:var(--g)!important;color:rgb(6,16,28)!important}
html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-deep[aria-pressed="true"] b,html[data-theme="light"] body.ff-wl .wp-ds-fbtn.is-all[aria-pressed="true"] b{color:rgb(255,255,255)!important}

body.ff-wl .wp-ds-active-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 12px;padding:8px 14px;border-radius:12px;background:rgba(5,150,105,.2);border:1px dashed rgba(52,211,153,.55);font:600 .82rem/1.3 var(--aku-font-body);color:var(--wl-ink)}
html[data-theme="light"] body.ff-wl .wp-ds-active-filter{background:rgb(209,250,229);border-color:rgb(5,150,105)}
body.ff-wl .wp-ds-reset{min-height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(52,211,153,.6);background:rgb(5,150,105);color:rgb(255,255,255);font:700 .76rem/1 var(--aku-font-body);cursor:pointer}

/* ── STOCK CARDS (.wp-tile): UNIFIED CARD SURFACE + DISTINCT SEMANTIC BORDER BY DEPTH/ZONE
   Audi 2026-10-30: "มันก็ดูยังไงๆอยู่อยู่ดี หรือว่าเราทำสีเดียวกันแต่ขอบคนละสี?? แล้ว font ของตัวเลขนี่คืออะไร พวก $13.64 อันนี้ไม่สวยเลย" ── */
body.ff-wl .wp-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:12px!important;min-width:0}
body.ff-wl .wp-tile{
  --zc:var(--z-far);
  --tile-accent:rgb(148,163,184);
  --tile-bd:rgba(148,163,184,.36);
  --tile-ink:rgb(248,250,252);
  --tile-ink2:rgb(148,163,184);
  --tile-gold:rgb(253,224,71);
  grid-template-columns:minmax(0,1fr);
  padding:14px 11px 11px!important;
  gap:4px!important;
  border-radius:15px!important;
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
  min-width:0;
}
body.ff-wl .wp-tile:hover{transform:translateY(-3px)}
body.ff-wl .wp-tile.in{--zc:var(--z-in)}
body.ff-wl .wp-tile.in-deep{--zc:var(--z-in-deep)}
body.ff-wl .wp-tile.in-mid{--zc:var(--z-in-mid)}
body.ff-wl .wp-tile.in-soft{--zc:var(--z-in-soft)}
body.ff-wl .wp-tile.near-g{--zc:var(--z-ng)}
body.ff-wl .wp-tile.near-y{--zc:var(--z-ny)}
body.ff-wl .wp-tile.far{--zc:var(--z-far)}

/* 1. UNIFIED CARD SURFACE across ALL .wp-tile cards (Dark D1 & Light L1) — Zero mid-row background/ink flip & zero green background tint! */
html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile,
html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(.in,.in-deep,.in-mid,.in-soft,.in-g5,.in-g4,.in-g3,.in-g2,.in-g1,.near-g,.near-y,.far,.none),
html:not([data-theme="light"]) body.ff-wl .wp-lane :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(:hover,:focus-visible){
  --tile-ink:rgb(248,250,252)!important;
  --tile-ink2:rgb(148,163,184)!important;
  --tile-buy-ink:color-mix(in srgb,var(--tile-accent) 76%,rgb(255,255,255));
  --tile-grad:linear-gradient(90deg,color-mix(in srgb,var(--tile-accent) 78%,rgb(2,6,23)) 0%,var(--tile-accent) 28%,color-mix(in srgb,var(--tile-accent) 52%,rgb(255,255,255)) 52%,var(--tile-accent) 76%,color-mix(in srgb,var(--tile-accent) 78%,rgb(2,6,23)) 100%);
  background:linear-gradient(180deg,rgb(14,28,49) 0%,rgb(9,19,35) 100%)!important;
  border:1.5px solid var(--tile-bd)!important;
  border-top:3px solid var(--tile-accent)!important;
  box-shadow:0 10px 22px -12px rgba(2,8,20,.72),0 0 0 1px color-mix(in srgb,var(--tile-accent) 14%,transparent)!important;
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile,
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(.in,.in-deep,.in-mid,.in-soft,.in-g5,.in-g4,.in-g3,.in-g2,.in-g1,.near-g,.near-y,.far,.none),
html[data-theme="light"] body.ff-wl .wp-lane :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(:hover,:focus-visible){
  --tile-ink:rgb(15,23,42)!important;
  --tile-ink2:rgb(100,116,139)!important;
  --tile-buy-ink:color-mix(in srgb,var(--tile-accent) 88%,rgb(15,23,42));
  --tile-grad:linear-gradient(90deg,color-mix(in srgb,var(--tile-accent) 88%,rgb(15,23,42)) 0%,var(--tile-accent) 28%,color-mix(in srgb,var(--tile-accent) 58%,rgb(255,255,255)) 52%,var(--tile-accent) 76%,color-mix(in srgb,var(--tile-accent) 88%,rgb(15,23,42)) 100%);
  background:linear-gradient(180deg,rgb(255,255,255) 0%,rgb(248,250,252) 100%)!important;
  border:1.5px solid var(--tile-bd)!important;
  border-top:3px solid var(--tile-accent)!important;
  box-shadow:0 8px 18px -10px rgba(15,23,42,.12)!important;
}

/* 2. DISTINCT BORDER, TOP ACCENT, TARGET-BUY INK (--tile-buy-ink) & FLOWING GRADIENT (--tile-grad) BY DEPTH / ZONE */
/* 💎 Tier 1: ลึกพิเศษ ≥12% (.in-deep, .in-g5, .in-g4) — Vibrant Emerald → Mint-Aqua */
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-g5,
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-g4,
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-deep{
  --tile-accent:rgb(16,185,129);
  --tile-bd:rgba(52,211,153,.78);
  --tile-buy-ink:rgb(110,231,183);
  --tile-grad:linear-gradient(90deg,rgb(5,150,105) 0%,rgb(16,185,129) 28%,rgb(110,231,183) 52%,rgb(52,211,153) 76%,rgb(5,150,105) 100%);
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in:is(.in-deep,.in-g5,.in-g4){
  --tile-accent:rgb(5,150,105);
  --tile-bd:rgba(5,150,105,.62);
  --tile-buy-ink:rgb(4,120,87);
  --tile-grad:linear-gradient(90deg,rgb(4,120,87) 0%,rgb(16,185,129) 28%,rgb(110,231,183) 52%,rgb(16,185,129) 76%,rgb(4,120,87) 100%);
}

/* 🌿 Tier 2: โซนกลาง 5%–12% (.in-mid, .in-g3) — Vivid Cyan-Aqua → Ice-Teal */
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-g3,
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-mid{
  --tile-accent:rgb(34,211,238);
  --tile-bd:rgba(34,211,238,.68);
  --tile-buy-ink:rgb(103,232,249);
  --tile-grad:linear-gradient(90deg,rgb(8,145,178) 0%,rgb(6,182,212) 28%,rgb(165,243,252) 52%,rgb(34,211,238) 76%,rgb(8,145,178) 100%);
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in:is(.in-mid,.in-g3){
  --tile-accent:rgb(8,145,178);
  --tile-bd:rgba(8,145,178,.54);
  --tile-buy-ink:rgb(14,116,144);
  --tile-grad:linear-gradient(90deg,rgb(14,116,144) 0%,rgb(6,182,212) 28%,rgb(103,232,249) 52%,rgb(6,182,212) 76%,rgb(14,116,144) 100%);
}

/* 🌱 Tier 3: เพิ่งแตะโซน <5% (.in-soft, .in-g2, .in-g1) — Sky-Blue → Electric Ice */
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-g2,
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-g1,
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in.in-soft{
  --tile-accent:rgb(96,165,250);
  --tile-bd:rgba(96,165,250,.64);
  --tile-buy-ink:rgb(147,197,253);
  --tile-grad:linear-gradient(90deg,rgb(37,99,235) 0%,rgb(59,130,246) 28%,rgb(186,230,253) 52%,rgb(96,165,250) 76%,rgb(37,99,235) 100%);
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.in:is(.in-soft,.in-g2,.in-g1){
  --tile-accent:rgb(37,99,235);
  --tile-bd:rgba(37,99,235,.50);
  --tile-buy-ink:rgb(29,78,216);
  --tile-grad:linear-gradient(90deg,rgb(29,78,216) 0%,rgb(59,130,246) 28%,rgb(147,197,253) 52%,rgb(59,130,246) 76%,rgb(29,78,216) 100%);
}

/* 🟡 Zone 2: ใกล้ถึงราคารอรับ ≤8% (.near-g, .near-y) — Warm Amber-Gold */
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(.near-g,.near-y){
  --tile-accent:rgb(251,191,36);
  --tile-bd:rgba(251,191,36,.68);
  --tile-buy-ink:rgb(253,224,71);
  --tile-grad:linear-gradient(90deg,rgb(217,119,6) 0%,rgb(245,158,11) 28%,rgb(254,240,138) 52%,rgb(251,191,36) 76%,rgb(217,119,6) 100%);
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile:is(.near-g,.near-y){
  --tile-accent:rgb(217,119,6);
  --tile-bd:rgba(217,119,6,.54);
  --tile-buy-ink:rgb(180,83,9);
  --tile-grad:linear-gradient(90deg,rgb(180,83,9) 0%,rgb(245,158,11) 28%,rgb(253,224,71) 52%,rgb(245,158,11) 76%,rgb(180,83,9) 100%);
}

/* 🔴 Zone 3: เกินราคารอซื้อไปเยอะ >8% (.far) — Rose-Coral */
body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.far{
  --tile-accent:rgb(244,63,94);
  --tile-bd:rgba(251,113,133,.58);
  --tile-buy-ink:rgb(253,164,175);
  --tile-grad:linear-gradient(90deg,rgb(225,29,72) 0%,rgb(244,63,94) 28%,rgb(254,205,211) 52%,rgb(251,113,133) 76%,rgb(225,29,72) 100%);
}
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile.far{
  --tile-accent:rgb(225,29,72);
  --tile-bd:rgba(225,29,72,.46);
  --tile-buy-ink:rgb(190,18,60);
  --tile-grad:linear-gradient(90deg,rgb(190,18,60) 0%,rgb(244,63,94) 28%,rgb(253,164,175) 52%,rgb(244,63,94) 76%,rgb(190,18,60) 100%);
}

/* Logo & Ticker Title inside .wp-tile — Unified Crisp Ink + Google Sans */
body.ff-wl .wp-tile .wp-logo{background:rgb(255,255,255)!important;border:1px solid rgba(203,213,225,.85)!important;box-shadow:0 3px 8px rgba(0,0,0,.22)!important}
body.ff-wl .wp-tile b,
html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile b,
html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile b{
  font-family:var(--aku-font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important;
  font-size:1.02rem!important;
  font-weight:700!important;
  letter-spacing:.01em;
  margin-top:2px;
  color:var(--tile-ink)!important;
}

/* Medallion Badges in Top-Left (.tri & .aib) and Unified SVG Star in Top-Right (.st-btn) */
body.ff-wl .wp-tile :is(.tri,.aib){width:21px;height:21px;border-radius:999px;display:inline-grid;place-items:center;font-size:.7rem;line-height:1;background:rgba(15,23,42,.65);color:rgb(255,255,255);border:1px solid rgba(255,255,255,.28)}
body.ff-wl .wp-tile .tri{top:6px;left:6px}
body.ff-wl .wp-tile .aib{top:29px;left:6px}
body.ff-wl .wp-tile .st-btn{position:absolute;top:6px;right:6px;z-index:3;width:26px;height:26px;padding:0;box-sizing:border-box;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:0;color:rgb(241,245,249);background:rgba(15,23,42,.58);border:1px solid rgba(255,255,255,.32);opacity:.9;cursor:pointer;user-select:none;transition:transform .15s ease,opacity .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
body.ff-wl .wp-tile .st-btn .st-svg{width:15px;height:15px;display:block;flex-shrink:0;fill:transparent;stroke:currentColor;stroke-width:1.95;stroke-linejoin:round;stroke-linecap:round;transition:fill .15s ease,stroke .15s ease,transform .15s ease}
body.ff-wl .wp-tile:hover .st-btn,body.ff-wl .wp-tile .st-btn:hover,body.ff-wl .wp-tile .st-btn:focus-visible{opacity:1;color:rgb(253,224,71);background:rgba(15,23,42,.82);border-color:rgb(251,191,36)}
body.ff-wl .wp-tile .st-btn:hover .st-svg,body.ff-wl .wp-tile .st-btn:focus-visible .st-svg{fill:rgba(251,191,36,.28)}
body.ff-wl .wp-tile .st-btn:hover,body.ff-wl .wp-tile .st-btn:focus-visible{transform:scale(1.08)}
body.ff-wl .wp-tile .st-btn.on{opacity:1;color:rgb(253,224,71);background:rgba(15,23,42,.85);border-color:rgb(251,191,36)}
body.ff-wl .wp-tile .st-btn.on .st-svg{fill:rgb(251,191,36);stroke:rgb(253,224,71);stroke-width:1.5}
body.ff-wl .wp-fav :is(.hrt,.fav-ic){display:inline-flex;align-items:center;justify-content:center;line-height:0}
body.ff-wl .wp-fav .st-svg{width:16px;height:16px;display:block;fill:transparent;stroke:currentColor;stroke-width:1.95;stroke-linejoin:round;stroke-linecap:round}
body.ff-wl .wp-fav.on .st-svg{fill:rgb(251,191,36);stroke:rgb(245,158,11);stroke-width:1.5}

/* 3. Side-by-Side ตอนนี้ & รอรับ Price Pair (.pz-prices) — Clean Google Sans Tabular Numerals ($13.64) */
body.ff-wl .wp-tile .pz{--zc:var(--z-far);display:grid;grid-template-columns:minmax(0,1fr);gap:5px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin-top:2px}
body.ff-wl .wp-tile .pz.in{--zc:var(--z-in)}
body.ff-wl .wp-tile .pz.in-deep{--zc:var(--z-in-deep)}
body.ff-wl .wp-tile .pz.in-mid{--zc:var(--z-in-mid)}
body.ff-wl .wp-tile .pz.in-soft{--zc:var(--z-in-soft)}
body.ff-wl .wp-tile .pz.near-g{--zc:var(--z-ng)}
body.ff-wl .wp-tile .pz.near-y{--zc:var(--z-ny)}
body.ff-wl .wp-tile .pz.far{--zc:var(--z-far)}
body.ff-wl .wp-tile .pz.none{--zc:var(--aku-copy,var(--wp-ink2))}

body.ff-wl .wp-tile .pz-prices{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:3px 2px 1px;min-width:0}
body.ff-wl .wp-tile .pz-pcol{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0}
body.ff-wl .wp-tile .pz-pcol.now{text-align:left}
body.ff-wl .wp-tile .pz-pcol.buy{text-align:right}
body.ff-wl .wp-tile .pz-plab,html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile small.pz-plab,html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile small.pz-plab{font:600 .64rem/1.1 var(--aku-font-body);color:var(--tile-ink2)!important;white-space:nowrap}
body.ff-wl .wp-tile .pz-now,html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile .pz-now,html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile .pz-now{
  font-family:var(--aku-font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1,"zero" 0!important;
  font-size:.98rem!important;
  font-weight:700!important;
  line-height:1.15!important;
  color:var(--tile-ink)!important;
  letter-spacing:-.01em;
  white-space:nowrap;
}
body.ff-wl .wp-tile .pz-pcol.buy .v,html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile .pz-pcol.buy .v,html[data-theme="light"] body.ff-wl :is(.wp-tiles,.wp-m-tiles) .wp-tile .pz-pcol.buy .v{
  font-family:var(--aku-font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1,"zero" 0!important;
  font-size:.92rem!important;
  font-weight:700!important;
  line-height:1.15!important;
  color:var(--tile-buy-ink)!important;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* 4. Flowing Multi-Stop Gradient Tube & Travelling Light-Pulse Stream (.pz-meter / .pz-fill / .pz-dot / .pz-tick)
   Audi 2026-10-30: "ไอพวกแท่ง หลอด ระหว่าง ตอนนี้กับรอรับเนี่ย ทำให้มันเป็นสีแบบวิ่งๆ หน่อยไหม ดูมีการเคลื่อนไหวหน่อย เหมือนไล่สี ... แล้วรอรับเนี่ย เราควรใช้เป็นสีเหลืองหรอ เป็นสีอื่นจะดีกว่าไหม" */
@keyframes wlBarGradFlow{
  0%{background-position:200% 50%}
  100%{background-position:0% 50%}
}
@keyframes wlBarLightSweep{
  0%{transform:translateX(-115%)}
  100%{transform:translateX(215%)}
}
@keyframes wlDotBreath{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tile-accent) 55%,transparent),0 0 8px var(--tile-accent)}
  50%{box-shadow:0 0 0 3.5px color-mix(in srgb,var(--tile-accent) 0%,transparent),0 0 12px var(--tile-accent)}
}
body.ff-wl .wp-tile .pz-meter{
  position:relative;
  display:block;
  width:100%;
  height:8px;
  margin:3px 0;
  border-radius:999px;
  background:rgba(15,23,42,.74);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.48);
  overflow:visible;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-meter{
  background:rgba(203,213,225,.56);
  border-color:rgba(100,116,139,.24);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.12);
}
body.ff-wl .wp-tile .pz-meter .pz-zone{
  position:absolute;
  inset:0 auto 0 0;
  width:66%;
  border-radius:999px 0 0 999px;
  background-image:var(--tile-grad);
  background-size:220% 100%;
  opacity:.28;
  animation:wlBarGradFlow 3.4s linear infinite;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-meter .pz-zone{
  opacity:.24;
}
body.ff-wl .wp-tile .pz-meter .pz-fill{
  position:absolute;
  top:-.5px;
  bottom:-.5px;
  left:var(--fleft,50%);
  width:var(--fwidth,0%);
  border-radius:999px;
  background-image:var(--tile-grad);
  background-size:220% 100%;
  box-shadow:0 0 10px color-mix(in srgb,var(--tile-accent) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.38);
  overflow:hidden;
  animation:wlBarGradFlow 2.6s linear infinite;
  transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1);
}
body.ff-wl .wp-tile .pz-meter .pz-fill::after{
  content:"";
  position:absolute;
  inset:0;
  width:58%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 25%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.15) 75%,transparent 100%);
  animation:wlBarLightSweep 1.95s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
body.ff-wl .wp-tile .pz-meter .pz-tick{
  position:absolute;
  left:66%;
  top:-3px;
  bottom:-3px;
  width:3px;
  border-radius:999px;
  background:var(--tile-buy-ink);
  box-shadow:0 0 8px var(--tile-accent);
  z-index:2;
}
body.ff-wl .wp-tile .pz-meter .pz-dot{
  position:absolute;
  top:50%;
  left:var(--ppos,50%);
  width:11px;
  height:11px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgb(255,255,255);
  border:2.5px solid var(--tile-accent);
  animation:wlDotBreath 2.2s ease-in-out infinite;
  transition:left .35s cubic-bezier(.22,1,.36,1),transform .18s ease;
  z-index:3;
}
body.ff-wl .wp-tile:hover .pz-meter .pz-dot{transform:translate(-50%,-50%) scale(1.2)}
html[data-motion="paused"] body.ff-wl .wp-tile .pz-meter :is(.pz-fill,.pz-fill::after,.pz-dot){animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){body.ff-wl .wp-tile .pz-meter :is(.pz-fill,.pz-fill::after,.pz-dot){animation:none!important}}

/* 5. Clean Verdict Pill Badge (.pz-foot) — Matches Border Accent Color */
body.ff-wl .wp-tile .pz-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:4px 8px;
  margin-top:2px;
  border-radius:999px;
  background:color-mix(in srgb,var(--tile-accent) 18%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--tile-accent) 48%,transparent)!important;
  line-height:1.2;
}
body.ff-wl .wp-tile .pz-pct{
  font-family:var(--aku-font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1,"zero" 0!important;
  font-size:.73rem!important;
  font-weight:700!important;
  color:color-mix(in srgb,var(--tile-accent) 78%,rgb(255,255,255))!important;
  white-space:nowrap;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-pct{
  color:color-mix(in srgb,var(--tile-accent) 84%,rgb(15,23,42))!important;
}
body.ff-wl .wp-tile .pz-pct.none{font-size:.68rem!important;font-weight:500!important;color:var(--tile-ink2)!important}
@media (max-width:560px){body.ff-wl .wp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}body.ff-wl .wp-tile{padding:12px 9px 10px!important}body.ff-wl .wp-tile .pz-pct{font-size:.66rem!important}}

/* ==========================================================================
   WATCHLIST SUB-NAV GROUP CAPSULES (#z-subnav / #z-nav) & FILTER BAR (#z-filter)
   Canonical Alignment with /design-standard.html + assets/ak-ui.css
   ========================================================================== */

/* 1. Header Card (.wp-tabs-head) — Zone Card Top 3px Accent + Group Legend Badges */
html body.ff-wl .wp-tabs-head {
  position: relative;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  border-top: 3px solid rgb(52, 211, 153) !important;
  overflow: hidden;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-head {
  background:
    radial-gradient(380px 120px at 14% 0%, rgba(52, 211, 153, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(16, 36, 62, 0.94), rgba(11, 27, 48, 0.92)) !important;
  border-left: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-right: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-bottom: 1px solid rgba(148, 196, 240, 0.22) !important;
}
html[data-theme="light"] body.ff-wl .wp-tabs-head {
  background:
    radial-gradient(380px 120px at 14% 0%, rgba(16, 185, 129, 0.10), transparent 72%),
    rgb(255, 255, 255) !important;
  border-left: 1px solid rgba(15, 39, 68, 0.14) !important;
  border-right: 1px solid rgba(15, 39, 68, 0.14) !important;
  border-bottom: 1px solid rgba(15, 39, 68, 0.14) !important;
}

/* Override the old blanket rule that forced all .wp-tabs-sub b into green */
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub b.ts-mine,
html body.ff-wl .wp-tabs-sub b.ts-mine {
  color: rgb(249, 168, 212) !important;
  background: rgba(244, 114, 182, 0.16);
  border: 1px solid rgba(244, 114, 182, 0.36);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub b.ts-audi,
html body.ff-wl .wp-tabs-sub b.ts-audi {
  color: rgb(110, 231, 183) !important;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.36);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub b.ts-port,
html body.ff-wl .wp-tabs-sub b.ts-port {
  color: rgb(253, 224, 71) !important;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.38);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub b.ts-req,
html body.ff-wl .wp-tabs-sub b.ts-req {
  color: rgb(125, 211, 252) !important;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.36);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
html:not([data-theme="light"]) body.ff-wl .wp-tabs-sub b.ts-comm,
html body.ff-wl .wp-tabs-sub b.ts-comm {
  color: rgb(196, 181, 253) !important;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.36);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub b.ts-mine {
  color: rgb(190, 24, 93) !important;
  background: rgba(244, 114, 182, 0.14);
  border-color: rgba(219, 39, 119, 0.34);
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub b.ts-audi {
  color: rgb(4, 120, 87) !important;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(5, 150, 105, 0.34);
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub b.ts-port {
  color: rgb(146, 64, 14) !important;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(217, 119, 6, 0.38);
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub b.ts-req {
  color: rgb(3, 105, 161) !important;
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(2, 132, 199, 0.34);
}
html[data-theme="light"] body.ff-wl .wp-tabs-sub b.ts-comm {
  color: rgb(109, 40, 217) !important;
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(124, 58, 237, 0.34);
}

/* 2. Sub-Navigation Container (nav.wp-tabs) — Color + | Divider Only (No Group Labels or Pod Wrapper Boxes)
   Audi 2026-10-29: "ใช้แค่สีกับ | แยกดีไหม ไม่ต้อง ของคุณ ของออดี้&สมาชิกอะไรงี้หรอก" */
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs,
html[data-theme="light"] body.ff-wl nav.wp-tabs,
html body.ff-wl nav.wp-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 8px !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .2s ease, padding .2s ease, box-shadow .2s ease;
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs.is-stuck {
  background: rgba(11, 25, 44, 0.90) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 196, 240, 0.24) !important;
  box-shadow: 0 14px 32px rgba(2, 8, 20, 0.48) !important;
}
html[data-theme="light"] body.ff-wl nav.wp-tabs.is-stuck {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 39, 68, 0.14) !important;
  box-shadow: 0 12px 28px rgba(15, 39, 68, 0.12) !important;
}

/* Visible "|" Pipe Separator (.wp-tab-sep) Between the 3 Functional Groups */
html body.ff-wl nav.wp-tabs > .wp-tab-sep {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 24px !important;
  padding: 0 4px !important;
  margin: 0 2px !important;
  font-family: var(--aku-font-mono) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(148, 196, 240, 0.55) !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}
html[data-theme="light"] body.ff-wl nav.wp-tabs > .wp-tab-sep {
  color: rgba(15, 39, 68, 0.36) !important;
}

/* 3. Individual Sub-Nav Buttons ([data-tab]) — Distinct Group Color Tokens at Rest & Active */
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab],
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab],
html body.ff-wl nav.wp-tabs [data-tab] {
  --tab-g: rgb(52, 211, 153);
  --tab-bg-rest: rgba(52, 211, 153, 0.12);
  --tab-bd-rest: rgba(52, 211, 153, 0.30);
  --tab-ink-rest: rgb(226, 248, 238);
  --tab-bg-act: linear-gradient(135deg, rgb(52, 211, 153) 0%, rgb(16, 185, 129) 100%);
  --tab-lip-act: rgb(4, 120, 87);
  --tab-ink-act: rgb(4, 34, 24);
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-family: var(--aku-font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background: var(--tab-bg-rest) !important;
  color: var(--tab-ink-rest) !important;
  border: 1.5px solid var(--tab-bd-rest) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

/* Per-Button Group Hues (Dark Mode D1) */
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab="mine"] {
  --tab-g: rgb(244, 114, 182);
  --tab-bg-rest: rgba(244, 114, 182, 0.15);
  --tab-bd-rest: rgba(244, 114, 182, 0.42);
  --tab-ink-rest: rgb(252, 231, 243);
  --tab-bg-act: linear-gradient(135deg, rgb(249, 168, 212) 0%, rgb(244, 114, 182) 55%, rgb(219, 39, 119) 100%);
  --tab-lip-act: rgb(157, 23, 77);
  --tab-ink-act: rgb(38, 6, 22);
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab="audi"] {
  --tab-g: rgb(52, 211, 153);
  --tab-bg-rest: rgba(52, 211, 153, 0.15);
  --tab-bd-rest: rgba(52, 211, 153, 0.42);
  --tab-ink-rest: rgb(209, 250, 229);
  --tab-bg-act: linear-gradient(135deg, rgb(110, 231, 183) 0%, rgb(52, 211, 153) 55%, rgb(16, 185, 129) 100%);
  --tab-lip-act: rgb(6, 95, 70);
  --tab-ink-act: rgb(4, 34, 24);
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab="model-port"] {
  --tab-g: rgb(250, 204, 21);
  --tab-bg-rest: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(245, 158, 11, 0.12));
  --tab-bd-rest: rgba(250, 204, 21, 0.48);
  --tab-ink-rest: rgb(254, 240, 138);
  --tab-bg-act: linear-gradient(135deg, rgb(254, 240, 138) 0%, rgb(250, 204, 21) 55%, rgb(245, 158, 11) 100%);
  --tab-lip-act: rgb(180, 83, 9);
  --tab-ink-act: rgb(38, 20, 3);
}
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab="request"] {
  --tab-g: rgb(56, 189, 248);
  --tab-bg-rest: rgba(56, 189, 248, 0.15);
  --tab-bd-rest: rgba(56, 189, 248, 0.42);
  --tab-ink-rest: rgb(224, 242, 254);
  --tab-bg-act: linear-gradient(135deg, rgb(125, 211, 252) 0%, rgb(56, 189, 248) 55%, rgb(14, 165, 233) 100%);
  --tab-lip-act: rgb(3, 105, 161);
  --tab-ink-act: rgb(6, 28, 46);
}

/* Per-Button Group Hues (Light Mode L1) */
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab="mine"] {
  --tab-g: rgb(219, 39, 119);
  --tab-bg-rest: rgba(244, 114, 182, 0.14);
  --tab-bd-rest: rgba(219, 39, 119, 0.34);
  --tab-ink-rest: rgb(157, 23, 77);
  --tab-bg-act: linear-gradient(135deg, rgb(236, 72, 153) 0%, rgb(219, 39, 119) 100%);
  --tab-lip-act: rgb(131, 24, 67);
  --tab-ink-act: rgb(255, 255, 255);
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab="audi"] {
  --tab-g: rgb(5, 150, 105);
  --tab-bg-rest: rgba(16, 185, 129, 0.14);
  --tab-bd-rest: rgba(5, 150, 105, 0.36);
  --tab-ink-rest: rgb(6, 95, 70);
  --tab-bg-act: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
  --tab-lip-act: rgb(6, 78, 59);
  --tab-ink-act: rgb(255, 255, 255);
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab="model-port"] {
  --tab-g: rgb(217, 119, 6);
  --tab-bg-rest: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(245, 158, 11, 0.12));
  --tab-bd-rest: rgba(217, 119, 6, 0.42);
  --tab-ink-rest: rgb(146, 64, 14);
  --tab-bg-act: linear-gradient(135deg, rgb(251, 191, 36) 0%, rgb(245, 158, 11) 100%);
  --tab-lip-act: rgb(180, 83, 9);
  --tab-ink-act: rgb(38, 20, 3);
}
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab="request"] {
  --tab-g: rgb(2, 132, 199);
  --tab-bg-rest: rgba(14, 165, 233, 0.14);
  --tab-bd-rest: rgba(2, 132, 199, 0.34);
  --tab-ink-rest: rgb(7, 89, 133);
  --tab-bg-act: linear-gradient(135deg, rgb(14, 165, 233) 0%, rgb(2, 132, 199) 100%);
  --tab-lip-act: rgb(12, 74, 110);
  --tab-ink-act: rgb(255, 255, 255);
}

/* Hover & Active ([aria-selected="true"]) States for Sub-Nav Buttons */
html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab]:hover:not([aria-selected="true"]),
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab]:hover:not([aria-selected="true"]) {
  transform: translateY(-2px) !important;
  border-color: var(--tab-g) !important;
  box-shadow:
    0 6px 16px -6px color-mix(in srgb, var(--tab-g) 48%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html:not([data-theme="light"]) body.ff-wl nav.wp-tabs [data-tab][aria-selected="true"],
html[data-theme="light"] body.ff-wl nav.wp-tabs [data-tab][aria-selected="true"],
html body.ff-wl nav.wp-tabs [data-tab][aria-selected="true"] {
  background: var(--tab-bg-act) !important;
  color: var(--tab-ink-act) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 3px 0 var(--tab-lip-act),
    0 10px 24px -6px color-mix(in srgb, var(--tab-g) 58%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Re-enable ✦ twinkle inline on Model Port button (overriding .aku-control::after absolute glint bar) */
html body.ff-wl nav.wp-tabs [data-tab="model-port"]::after {
  position: static !important;
  display: inline-block !important;
  content: "✦" !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  font-size: 0.78rem !important;
  margin-left: 3px !important;
  opacity: 0.92 !important;
}

/* 4. Canonical Filter Bar (#z-filter .aku-ftab) Across All Watchlist Filter Strips
   Single glowing bottom bar (::after at bottom: -1px) — ZERO double-border overlap */
html body.ff-wl :is(#fbModeBar, #fbLegend, #wp-filters, .wp-ds-filters) {
  border-bottom: 0 !important;
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button,
html[data-theme="light"] body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button {
  --g: rgb(52, 211, 153);
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px 10px !important;
  border-radius: 10px 10px 0 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--g) 76%, var(--aku-head, rgb(244, 248, 255))) !important;
  font-family: var(--aku-font-sans) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  cursor: pointer !important;
  transition: color .2s ease, background .2s ease !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button {
  color: color-mix(in srgb, var(--g) 82%, rgb(15, 23, 42)) !important;
}
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button[hidden] {
  display: none !important;
}

/* Per-Filter Semantic Hues (--g) */
html body.ff-wl #fbLegend button { --g: var(--c, rgb(168, 85, 247)) !important; }
html body.ff-wl #wp-filters [data-f="all"],
html body.ff-wl #fbModeBar [data-fbmode="all"],
html body.ff-wl #wp-req-filters [data-rqf="all"],
html body.ff-wl .wp-ds-filters [data-depth-band="all"] { --g: rgb(56, 189, 248) !important; }
html body.ff-wl #wp-filters [data-f="tactical"],
html body.ff-wl .wp-ds-filters [data-depth-band="deep"] { --g: rgb(16, 185, 129) !important; }
html body.ff-wl .wp-ds-filters [data-depth-band="mid"] { --g: rgb(52, 211, 153) !important; }
html body.ff-wl .wp-ds-filters [data-depth-band="soft"] { --g: rgb(110, 231, 183) !important; }
html body.ff-wl #wp-filters [data-f="nobuy"],
html body.ff-wl .wp-ds-filters [data-depth-band="nobuy"],
html body.ff-wl #wp-req-filters [data-rqf="unpriced"] { --g: rgb(56, 189, 248) !important; }
html body.ff-wl #wp-filters [data-f="stale"],
html body.ff-wl .wp-ds-filters [data-depth-band="stale"],
html body.ff-wl #wp-req-filters [data-rqf="refresh"] { --g: rgb(251, 191, 36) !important; }
html body.ff-wl #wp-req-filters [data-rqf="new-stock"] { --g: rgb(167, 139, 250) !important; }
html body.ff-wl #wp-filters [data-f="star"],
html body.ff-wl #wp-groupby [data-groupby="interest"],
html body.ff-wl .wp-ds-filters [data-depth-band="star"] { --g: rgb(250, 204, 21) !important; }
html body.ff-wl #wp-filters [data-f="hot"],
html body.ff-wl #fbModeBar [data-fbmode="vote"],
html body.ff-wl #wp-req-filters [data-rqf="pending"] { --g: rgb(251, 113, 133) !important; }
html body.ff-wl #wp-filters [data-f="long"],
html body.ff-wl #wp-groupby [data-groupby="price"] { --g: rgb(52, 211, 153) !important; }
html body.ff-wl #wp-filters [data-f="swing"],
html body.ff-wl #wp-groupby [data-groupby="trend"] { --g: rgb(56, 189, 248) !important; }
html body.ff-wl #wp-filters [data-f="div"],
html body.ff-wl #fbModeBar [data-fbmode="reason"] { --g: rgb(251, 191, 36) !important; }
html body.ff-wl #wp-filters [data-f="divsteady"],
html body.ff-wl #wp-groupby [data-groupby="ai"],
html body.ff-wl #fbModeBar [data-fbmode="clip"] { --g: rgb(167, 139, 250) !important; }
html body.ff-wl #wp-filters [data-f="deep"],
html body.ff-wl #wp-groupby [data-groupby="cat"] { --g: rgb(244, 114, 182) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="star"],
html[data-theme="light"] body.ff-wl #wp-groupby [data-groupby="interest"],
html[data-theme="light"] body.ff-wl #wp-filters [data-f="div"],
html[data-theme="light"] body.ff-wl #fbModeBar [data-fbmode="reason"],
html[data-theme="light"] body.ff-wl #wp-filters [data-f="stale"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="stale"],
html[data-theme="light"] body.ff-wl #wp-req-filters [data-rqf="refresh"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="star"] { --g: rgb(217, 119, 6) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="all"],
html[data-theme="light"] body.ff-wl #wp-filters [data-f="swing"],
html[data-theme="light"] body.ff-wl #wp-filters [data-f="nobuy"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="nobuy"],
html[data-theme="light"] body.ff-wl #wp-req-filters [data-rqf="unpriced"],
html[data-theme="light"] body.ff-wl #wp-groupby [data-groupby="trend"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="all"] { --g: rgb(2, 132, 199) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="tactical"],
html[data-theme="light"] body.ff-wl #wp-filters [data-f="long"],
html[data-theme="light"] body.ff-wl #wp-groupby [data-groupby="price"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="deep"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="mid"],
html[data-theme="light"] body.ff-wl .wp-ds-filters [data-depth-band="soft"] { --g: rgb(5, 150, 105) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="hot"] { --g: rgb(225, 29, 72) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="divsteady"],
html[data-theme="light"] body.ff-wl #wp-req-filters [data-rqf="new-stock"],
html[data-theme="light"] body.ff-wl #wp-groupby [data-groupby="ai"] { --g: rgb(124, 58, 237) !important; }
html[data-theme="light"] body.ff-wl #wp-filters [data-f="deep"],
html[data-theme="light"] body.ff-wl #wp-groupby [data-groupby="cat"] { --g: rgb(219, 39, 119) !important; }

/* Single Glowing Bottom Indicator Bar (::after at bottom: -1px so it sits right on the baseline)
   Canonical #z-filter .aku-ftab::after: scaleX(0) at rest, scaleX(1) on active */
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button::before {
  display: none !important;
  content: none !important;
}
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 0px !important;
  width: auto !important;
  height: 2.5px !important;
  border-radius: 3px !important;
  background: var(--g) !important;
  box-shadow: 0 0 10px 1px var(--g) !important;
  animation: none !important;
  translate: none !important;
  transform: scaleX(0) !important;
  opacity: 0 !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .2s ease !important;
}
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button:is(:hover, :focus-visible) {
  transform: none !important;
  translate: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  background: color-mix(in srgb, var(--g) 10%, transparent) !important;
}
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button:hover::after {
  transform: scaleX(0.68) !important;
  opacity: 0.82 !important;
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) :is(button, button.wp-f-member):is([aria-pressed="true"], [aria-selected="true"], .on) {
  color: rgb(255, 255, 255) !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  translate: none !important;
  background: radial-gradient(85% 95% at 50% 100%, color-mix(in srgb, var(--g) 26%, transparent), transparent 75%) !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) :is(button, button.wp-f-member):is([aria-pressed="true"], [aria-selected="true"], .on) {
  color: rgb(15, 23, 42) !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  translate: none !important;
  background: radial-gradient(85% 95% at 50% 100%, color-mix(in srgb, var(--g) 22%, transparent), transparent 75%) !important;
}
html body.ff-wl :is(#wp-filters, #wp-groupby, #fbModeBar, #fbLegend, #fbClipQueueTabs, #wp-req-filters, .wp-ds-filters) button:is([aria-pressed="true"], [aria-selected="true"], .on)::after {
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* Count pill inside #wp-filters & .wp-ds-filters (.cnt) */
html body.ff-wl :is(#wp-filters, .wp-ds-filters) button .cnt {
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--aku-font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--g) 18%, transparent);
  color: inherit;
}

/* 5. Redesigned 4 Zone Lanes (.wp-lane & .wp-lane-h) — Canonical #z-card .aku-zonecard Top 3px Accent
   Audi 2026-10-29: "🟢 ถึงราคาที่รอแล้ว 36 / 🟡 ใกล้ถึงราคารอรับ 19 / 🔴 เกินราคารอซื้อไปเยอะ 96 / ⚪ ยังไม่ตั้งราคาที่รอ 4 พวกนี้ออกแบบอีกทีให้มันสวยขึ้นตรงตามประสงค์การใช้งานหน่อยได้ไหม ดูง่าย ไม่ซ้ำซ้อน" */
html body.ff-wl .wp-lanes {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body.ff-wl .wp-lane {
  --lc: rgb(96, 165, 250);
  --lc-soft: transparent;
  --lc-bd: rgba(148, 196, 240, 0.24);
  --lc-pill-bg: rgba(96, 165, 250, 0.16);
  --lc-pill-ink: rgb(186, 230, 253);
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.in, .near, .far, .none, .up, .side, .down, .notr, .core, .growth, .spec, .unres, .nocat, .aihi, .aimid, .ailo, .aina, .star, .hot, .acc, .rest),
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.in, .near, .far, .none, .up, .side, .down, .notr, .core, .growth, .spec, .unres, .nocat, .aihi, .aimid, .ailo, .aina, .star, .hot, .acc, .rest),
html body.ff-wl .wp-lane {
  position: relative !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  border-top: 3px solid var(--lc) !important;
  border-left: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-right: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-bottom: 1px solid rgba(148, 196, 240, 0.22) !important;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Per-Lane Semantic Color Variables (--lc) — ONLY .in / .near / .far (Price Group) use Cheap/Expensive Green-Amber-Red!
   Non-price groups (⭐ ความน่าสนใจ, 🏷️ ประเภทหุ้น, 📈 แนวโน้ม, 🤖 ตาม AI ไหม?) use non-green category accents + neutral background */
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.in {
  --lc: rgb(16, 185, 129);
  --lc-bd: rgba(52, 211, 153, 0.36);
  --lc-pill-bg: rgba(16, 185, 129, 0.18);
  --lc-pill-ink: rgb(167, 243, 208);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.near {
  --lc: rgb(245, 158, 11);
  --lc-bd: rgba(251, 191, 36, 0.38);
  --lc-pill-bg: rgba(245, 158, 11, 0.18);
  --lc-pill-ink: rgb(253, 224, 71);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.far {
  --lc: rgb(244, 63, 94);
  --lc-bd: rgba(251, 113, 133, 0.36);
  --lc-pill-bg: rgba(244, 63, 94, 0.18);
  --lc-pill-ink: rgb(254, 205, 211);
}
/* ⭐ ความน่าสนใจ (.star, .hot, .acc, .rest) */
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.star {
  --lc: rgb(250, 204, 21);
  --lc-bd: rgba(250, 204, 21, 0.38);
  --lc-pill-bg: rgba(250, 204, 21, 0.16);
  --lc-pill-ink: rgb(254, 240, 138);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.hot {
  --lc: rgb(251, 146, 60);
  --lc-bd: rgba(251, 146, 60, 0.38);
  --lc-pill-bg: rgba(251, 146, 60, 0.16);
  --lc-pill-ink: rgb(254, 215, 170);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.acc, .growth, .up, .aimid) {
  --lc: rgb(56, 189, 248);
  --lc-bd: rgba(56, 189, 248, 0.36);
  --lc-pill-bg: rgba(56, 189, 248, 0.16);
  --lc-pill-ink: rgb(186, 230, 253);
}
/* 🏷️ ประเภทหุ้น & 📈 แนวโน้ม & 🤖 ตาม AI ไหม? (.core, .spec, .side, .down, .aihi, .ailo) */
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.core, .ailo) {
  --lc: rgb(96, 165, 250);
  --lc-bd: rgba(96, 165, 250, 0.36);
  --lc-pill-bg: rgba(96, 165, 250, 0.16);
  --lc-pill-ink: rgb(191, 219, 254);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.spec, .aihi) {
  --lc: rgb(167, 139, 250);
  --lc-bd: rgba(167, 139, 250, 0.38);
  --lc-pill-bg: rgba(167, 139, 250, 0.16);
  --lc-pill-ink: rgb(221, 214, 254);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.side {
  --lc: rgb(129, 140, 248);
  --lc-bd: rgba(129, 140, 248, 0.36);
  --lc-pill-bg: rgba(129, 140, 248, 0.16);
  --lc-pill-ink: rgb(199, 210, 254);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.down {
  --lc: rgb(244, 114, 182);
  --lc-bd: rgba(244, 114, 182, 0.36);
  --lc-pill-bg: rgba(244, 114, 182, 0.16);
  --lc-pill-ink: rgb(251, 207, 232);
}
html body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.none, .unres, .nocat, .aina, .notr, .rest) {
  --lc: rgb(148, 163, 184);
  --lc-bd: rgba(148, 163, 184, 0.28);
  --lc-pill-bg: rgba(148, 163, 184, 0.16);
  --lc-pill-ink: rgb(226, 232, 240);
}

html:not([data-theme="light"]) body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane {
  background: linear-gradient(180deg, rgba(14, 31, 55, 0.94), rgba(9, 21, 39, 0.94)) !important;
  box-shadow:
    0 14px 32px -16px rgba(2, 8, 20, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane {
  background: rgb(255, 255, 255) !important;
  border-left-color: rgba(15, 39, 68, 0.14) !important;
  border-right-color: rgba(15, 39, 68, 0.14) !important;
  border-bottom-color: rgba(15, 39, 68, 0.14) !important;
  box-shadow:
    0 12px 28px -16px rgba(15, 39, 68, 0.14),
    inset 0 1px 0 rgb(255, 255, 255) !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.in {
  --lc: rgb(5, 150, 105);
  --lc-bd: rgba(5, 150, 105, 0.30);
  --lc-pill-bg: rgba(16, 185, 129, 0.14);
  --lc-pill-ink: rgb(6, 95, 70);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.near, .star) {
  --lc: rgb(217, 119, 6);
  --lc-bd: rgba(217, 119, 6, 0.32);
  --lc-pill-bg: rgba(245, 158, 11, 0.16);
  --lc-pill-ink: rgb(146, 64, 14);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.hot {
  --lc: rgb(234, 88, 12);
  --lc-bd: rgba(234, 88, 12, 0.32);
  --lc-pill-bg: rgba(249, 115, 22, 0.14);
  --lc-pill-ink: rgb(154, 52, 18);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.far {
  --lc: rgb(225, 29, 72);
  --lc-bd: rgba(225, 29, 72, 0.30);
  --lc-pill-bg: rgba(244, 63, 94, 0.14);
  --lc-pill-ink: rgb(159, 18, 57);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.acc, .growth, .up, .aimid) {
  --lc: rgb(2, 132, 199);
  --lc-bd: rgba(2, 132, 199, 0.30);
  --lc-pill-bg: rgba(14, 165, 233, 0.14);
  --lc-pill-ink: rgb(3, 105, 161);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.core, .ailo) {
  --lc: rgb(37, 99, 235);
  --lc-bd: rgba(37, 99, 235, 0.30);
  --lc-pill-bg: rgba(59, 130, 246, 0.14);
  --lc-pill-ink: rgb(29, 78, 216);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.spec, .aihi) {
  --lc: rgb(124, 58, 237);
  --lc-bd: rgba(124, 58, 237, 0.30);
  --lc-pill-bg: rgba(139, 92, 246, 0.14);
  --lc-pill-ink: rgb(91, 33, 182);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.side {
  --lc: rgb(79, 70, 229);
  --lc-bd: rgba(79, 70, 229, 0.30);
  --lc-pill-bg: rgba(99, 102, 241, 0.14);
  --lc-pill-ink: rgb(55, 48, 163);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane.down {
  --lc: rgb(219, 39, 119);
  --lc-bd: rgba(219, 39, 119, 0.30);
  --lc-pill-bg: rgba(236, 72, 153, 0.14);
  --lc-pill-ink: rgb(157, 23, 77);
}
html[data-theme="light"] body.ff-wl :is(#wp-a-list, #wp-m-list, main.wp) .wp-lane:is(.none, .unres, .nocat, .aina, .notr, .rest) {
  --lc: rgb(100, 116, 139);
  --lc-bd: rgba(100, 116, 139, 0.26);
  --lc-pill-bg: rgba(100, 116, 139, 0.14);
  --lc-pill-ink: rgb(51, 65, 85);
}

/* Zone Header Button (.wp-lane-h) — Zero Left Border, Structured Left Badge + Subtitle + Right Toggle Pill */
html body.ff-wl .wp-lane-h {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px !important;
  width: 100% !important;
  padding: 4px 2px 12px !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body.ff-wl .wp-lane.is-closed .wp-lane-h {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}
html body.ff-wl .wp-lane-h .lh-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}
html body.ff-wl .wp-lane-h .lh-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html body.ff-wl .wp-lane-h .lh-badge .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 0;
  margin-right: 0 !important;
}
html body.ff-wl .wp-lane-h .lh-badge b {
  font-family: var(--aku-font-head) !important;
  font-size: clamp(1.36rem, 1.9vw, 1.62rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--aku-head, rgb(244, 248, 255)) !important;
}
html[data-theme="light"] body.ff-wl .wp-lane-h .lh-badge b {
  color: rgb(15, 23, 42) !important;
}
html body.ff-wl .wp-lane-h .lh-badge .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--aku-font-mono) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  background: var(--lc-pill-bg) !important;
  color: var(--lc-pill-ink) !important;
  border: 1px solid var(--lc-bd) !important;
}
html body.ff-wl .wp-lane-h .lh-sub {
  font-family: var(--aku-font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--aku-copy, rgb(189, 205, 226)) !important;
}
html[data-theme="light"] body.ff-wl .wp-lane-h .lh-sub {
  color: rgb(71, 85, 105) !important;
}
html body.ff-wl .wp-lane-h .lh-meta {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
html body.ff-wl .wp-lane-h .car {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 5px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--aku-font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: rgba(148, 163, 184, 0.14) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: var(--aku-head, rgb(226, 232, 240)) !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
html[data-theme="light"] body.ff-wl .wp-lane-h .car {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  color: rgb(30, 41, 59) !important;
}
html body.ff-wl .wp-lane-h:hover .car {
  border-color: var(--lc) !important;
  background: var(--lc-pill-bg) !important;
  color: var(--lc-pill-ink) !important;
  transform: translateY(-1px);
}

/* 6. Zone Card Top 3px Accent on Command HUD */
html body.ff-wl .wp-cmd-hud {
  border-top: 3px solid rgb(56, 189, 248) !important;
  border-radius: 20px !important;
}

/* 7. Clean Geometric Google Sans Tabular Numerals on Financial Prices & Counts ($13.64, $3.40, 37.6%)
   Audi 2026-10-30: "แล้ว font ของตัวเลขนี่คืออะไร พวก $13.64 อันนี้ไม่สวยเลย" — retire programmer monospace slashed-zero on prices */
html body.ff-wl {
  --aku-font-mono: var(--aku-font-body, 'AK Thai', 'Google Sans', 'Plus Jakarta Sans', 'Sarabun', system-ui, sans-serif);
}
html body.ff-wl :is(
  .num,
  .wp-tile b,
  .wp-tile .pz-now,
  .wp-tile .pz-pcol.buy .v,
  .wp-tile .pz-pct,
  .wp-ds-tk,
  .ds-b-end b,
  .ds-b-pct,
  .wp-ds-cursor,
  .wp-ds-fbtn b,
  .wp-lane-h .lh-badge .n,
  #wp-filters button .cnt,
  .wp-row .c.px b,
  .wp-row .c.px i.num,
  .wp-row .c.buy b,
  .wp-row .c.tgt b,
  .mp-row .num,
  .fb-stats b,
  #fbLegend button b,
  #fbClipQueue .cq-tk,
  #fbClipQueue#fbClipQueue#fbClipQueue .cq-card.is-next-up .cq-tk,
  .cq-rush-stat b.num
) {
  font-family: var(--aku-font-body, 'AK Thai', 'Google Sans', 'Plus Jakarta Sans', 'Sarabun', system-ui, sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
}

/* Keep each .wp-tile's depth/zone border color (--tile-bd & --tile-accent) even when starred (.st) */
html:not([data-theme="light"]) body.ff-wl :is(.wp-tiles, .wp-m-tiles) .wp-tile:has(.st),
html[data-theme="light"] body.ff-wl :is(.wp-tiles, .wp-m-tiles) .wp-tile:has(.st) {
  border-color: var(--tile-bd) !important;
  border-top: 3px solid var(--tile-accent) !important;
}

@media (max-width: 720px) {
  html body.ff-wl nav.wp-tabs {
    gap: 6px !important;
  }
  html body.ff-wl nav.wp-tabs > .wp-tab-sep {
    display: none !important;
  }
  html body.ff-wl nav.wp-tabs [data-tab] {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }
  html body.ff-wl .wp-lane {
    padding: 14px 12px !important;
  }
}

/* ==========================================================================
   v12 UPGRADES (Audi 2026-10-30):
   1. Redesigned .ws Sector & AI Telemetry Deck (#wp-m-sum & #wp-a-sum)
   2. Unboxed .wp-rq-box (no dashed inner border around #wp-req-form)
   3. 52-Week Low–High Energy Tube (.pz-meter + .pz-52w-ends)
   ========================================================================== */

/* 1. Unbox .wp-rq-box — remove dashed wrapper border around #wp-req-form
   (Audi 2026-10-30: "แล้ว พิมพ์ชื่อหุ้น เช่น COST, AMD, TE... เอาเส้นประที่คลุมกล่องออกไหม") */
html body.ff-wl .wp-rq-box,
html:not([data-theme="light"]) body.ff-wl .wp-rq-box,
html[data-theme="light"] body.ff-wl .wp-rq-box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 2. 52-Week Low–High Energy Tube (.pz-meter + .pz-52w-ends)
   (Audi 2026-10-30: "แล้ว ตอนนี้ $2.12 รอรับ $3.40 ต่ำกว่ารอรับ 37.6% ⚠️ 15 ส.ค. 69 🔄 +1·17 ไอแท่งหลอด เปลี่ยนเป็น52weeks low highแทนดีไหม") */
html body.ff-wl .wp-tile .pz-meter .pz-zone {
  width: 100% !important;
  border-radius: 999px !important;
}
html body.ff-wl .wp-tile .pz-meter .pz-tick {
  left: var(--bpos, 66%) !important;
}
html body.ff-wl .wp-tile .pz.none .pz-tick {
  display: none !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile.none .pz-meter {
  --tile-accent: rgb(56, 189, 248);
  --tile-grad: linear-gradient(90deg, rgb(2, 132, 199) 0%, rgb(56, 189, 248) 50%, rgb(125, 211, 252) 100%, rgb(56, 189, 248) 100%);
}
html[data-theme="light"] body.ff-wl .wp-tile.none .pz-meter {
  --tile-accent: rgb(2, 132, 199);
  --tile-grad: linear-gradient(90deg, rgb(3, 105, 161) 0%, rgb(14, 165, 233) 50%, rgb(56, 189, 248) 100%, rgb(14, 165, 233) 100%);
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-52w-ends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  margin: 0 0 2px;
  padding: 0 1px;
  font-family: var(--aku-font-body, 'AK Thai', 'Google Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: rgb(248, 250, 252) !important;
  white-space: nowrap;
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-52w-ends,
html:not([data-theme="light"]) body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-52w-ends :is(small, .w-lo, .w-hi) {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: rgb(248, 250, 252) !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-52w-ends,
html[data-theme="light"] body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-52w-ends :is(small, .w-lo, .w-hi) {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: rgb(15, 23, 42) !important;
}
html body.ff-wl .wp-tile .pz-52w-ends .w-lo {
  opacity: 0.92;
}
html body.ff-wl .wp-tile .pz-52w-ends .w-hi {
  opacity: 1;
}

/* 2b. Unified Full-Width Centered Footer Action Pill (.pz-date-row & .pz-req-chip) — ZERO PILL-IN-PILL & ZERO OVERFLOW
   (Audi 2026-10-30: "52w ใช้เป็นสีขาวไหม ไม่ต้องสีตามcard แล้วปุ่ม ขอใหม่มันยังไม่สวย วางตำแหน่งไม่ดีป่ะ") */
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-date-row {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 25px !important;
  box-sizing: border-box !important;
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-date-row.is-fresh .pz-date.is-fresh-date {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 25px !important;
  padding: 0 6px !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  opacity: 0.78 !important;
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-family: var(--aku-font-body, 'AK Thai', 'Google Sans', sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-date-row :is(small.pz-date, .pz-date) {
  font-family: var(--aku-font-body, 'AK Thai', 'Google Sans', sans-serif) !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  color: rgb(203, 213, 225) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-date-row :is(small.pz-date, .pz-date) {
  font-family: var(--aku-font-body, 'AK Thai', 'Google Sans', sans-serif) !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  color: rgb(71, 85, 105) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip .rq-dot {
  font-style: normal !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  opacity: 0.55 !important;
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip :is(.rq-act, .rq-txt) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
html:not([data-theme="light"]) body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip :is(.rq-act, .rq-txt) {
  color: rgb(186, 230, 253) !important;
}
html[data-theme="light"] body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip :is(.rq-act, .rq-txt) {
  color: rgb(3, 105, 161) !important;
}
html body.ff-wl :is(#wp-panel-audi, #wp-panel-mine, main) :is(#wp-lanes, #wp-m-tiles, .wp-tile) .pz-req-chip .rq-svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  display: block;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
html body.ff-wl .wp-tile .pz-req-chip:hover .rq-svg {
  transform: rotate(45deg);
}
html:not([data-theme="light"]) body.ff-wl .wp-tile :is(.pz-req-chip, .pz-req-chip.is-stale) {
  background: rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: rgb(241, 245, 249) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile .pz-req-chip:hover {
  background: rgba(14, 116, 144, 0.44) !important;
  border-color: rgb(56, 189, 248) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.28) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile .pz-req-chip:hover .rq-act {
  color: rgb(255, 255, 255) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile .pz-req-chip.is-voted,
html:not([data-theme="light"]) body.ff-wl .wp-tile .pz-req-chip.is-voted .rq-act {
  background: rgba(6, 78, 59, 0.72) !important;
  border-color: rgb(52, 211, 153) !important;
  color: rgb(209, 250, 229) !important;
}
html:not([data-theme="light"]) body.ff-wl .wp-tile .pz-req-chip.is-voted .rq-act {
  background: transparent !important;
  border: 0 !important;
}
html[data-theme="light"] body.ff-wl .wp-tile :is(.pz-req-chip, .pz-req-chip.is-stale) {
  background: rgba(248, 250, 252, 0.94) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: rgb(15, 23, 42) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-req-chip:hover {
  background: rgb(224, 242, 254) !important;
  border-color: rgb(2, 132, 199) !important;
  color: rgb(3, 105, 161) !important;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-req-chip.is-voted,
html[data-theme="light"] body.ff-wl .wp-tile .pz-req-chip.is-voted .rq-act {
  background: rgb(209, 250, 229) !important;
  border-color: rgb(5, 150, 105) !important;
  color: rgb(6, 95, 70) !important;
}
html[data-theme="light"] body.ff-wl .wp-tile .pz-req-chip.is-voted .rq-act {
  background: transparent !important;
  border: 0 !important;
}

/* 3. Redesigned .ws Summary Telemetry Deck (#wp-m-sum & #wp-a-sum) — SINGLE ROUNDED SURFACE, ZERO BOX-IN-BOX & ZERO SHARP CORNERS
   (Audi 2026-10-30: "1 ตัว สินค้าจำเป็น 100% 📊 กลุ่มที่มากที่สุด สินค้าจำเป็น 100% ⚠️ เกินครึ่ง กระจุกกลุ่มเดียว 🤖 วิ่งตามหุ้นชิป AI 0 ตัวตามมาก · 0 บ้าง · 1 ไม่ค่อยตาม ตรงนี้มันยังดูไม่ค่อยสวยไหม" & "อันนี้แย่กว่าเดิมนะ แบบนี้เป็น 4 เหลี่ยมแหลม ขอบแหลมใน 4 เหลี่ยมอีกทีนึงอ่ะ") */
html body.ff-wl .ws {
  display: grid !important;
  grid-template-columns: minmax(0, 1.56fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
  border-top: 3px solid rgb(56, 189, 248) !important;
}
html:not([data-theme="light"]) body.ff-wl .ws {
  background:
    radial-gradient(480px 160px at 8% 0%, rgba(56, 189, 248, 0.11), transparent 72%),
    linear-gradient(180deg, rgba(14, 31, 55, 0.94), rgba(9, 21, 39, 0.94)) !important;
  border-left: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-right: 1px solid rgba(148, 196, 240, 0.22) !important;
  border-bottom: 1px solid rgba(148, 196, 240, 0.22) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 20, 0.26) !important;
}
html[data-theme="light"] body.ff-wl .ws {
  background:
    radial-gradient(480px 160px at 8% 0%, rgba(14, 165, 233, 0.08), transparent 72%),
    rgb(255, 255, 255) !important;
  border-left: 1px solid rgba(15, 39, 68, 0.14) !important;
  border-right: 1px solid rgba(15, 39, 68, 0.14) !important;
  border-bottom: 1px solid rgba(15, 39, 68, 0.14) !important;
  box-shadow: 0 8px 22px rgba(15, 39, 68, 0.06) !important;
}

/* Frameless Zone 1: Donut + Sector Legend (.ws-donut — NO inner box border or background) */
html body.ff-wl .ws .ws-donut,
html:not([data-theme="light"]) body.ff-wl .ws .ws-donut,
html[data-theme="light"] body.ff-wl .ws .ws-donut {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 2px 20px 2px 2px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
html body.ff-wl .ws .donut {
  width: 96px !important;
  height: 96px !important;
  flex-shrink: 0 !important;
}
html body.ff-wl .ws .ws-leg-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html body.ff-wl .ws .ws-head-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body.ff-wl .ws .ws-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: 800 clamp(1.06rem, 1.35vw, 1.2rem)/1.28 var(--aku-font-head) !important;
  color: var(--wl-ink) !important;
  letter-spacing: -0.01em;
}
html body.ff-wl .ws .ws-kicker .ic,
html body.ff-wl .ws .ws-stat > span .ic {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  margin-right: 0 !important;
}
html body.ff-wl .ws .ws-leg {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
html body.ff-wl .ws .ws-leg.is-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 20px !important;
}
html body.ff-wl .ws .ws-leg li,
html:not([data-theme="light"]) body.ff-wl .ws .ws-leg li,
html[data-theme="light"] body.ff-wl .ws .ws-leg li {
  display: grid !important;
  grid-template-columns: minmax(90px, 1.15fr) minmax(56px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
}
html body.ff-wl .ws .ws-leg.is-grid li {
  grid-template-columns: minmax(92px, auto) minmax(36px, 1fr) auto auto !important;
  gap: 7px !important;
}
html body.ff-wl .ws .ws-leg .s-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: var(--wl-ink) !important;
}
html body.ff-wl .ws .ws-leg .sw {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
html body.ff-wl .ws .ws-leg .s-bar {
  display: block !important;
  width: 100% !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.20) !important;
  overflow: hidden !important;
}
html body.ff-wl .ws .ws-leg .s-bar em {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
}
html body.ff-wl .ws .ws-leg .s-cnt {
  font-size: 0.74rem !important;
  color: var(--wl-ink-2) !important;
  white-space: nowrap !important;
}
html body.ff-wl .ws .ws-leg b {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: var(--wl-ink) !important;
  min-width: 32px !important;
  text-align: right !important;
}

/* Frameless Zone 2 (.ws-side -> single clean AI correlation column separated by subtle vertical hairline) */
html body.ff-wl .ws .ws-side {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body.ff-wl .ws .ws-side.has-opts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body.ff-wl .ws .ws-stat,
html:not([data-theme="light"]) body.ff-wl .ws .ws-stat,
html[data-theme="light"] body.ff-wl .ws .ws-stat {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 4px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid rgba(148, 196, 240, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-stat {
  border-left: 1px solid rgba(15, 39, 68, 0.10) !important;
}
html body.ff-wl .ws .ws-stat:last-child {
  padding-right: 2px !important;
}
html body.ff-wl .ws .ws-stat > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: 800 clamp(1.06rem, 1.35vw, 1.2rem)/1.28 var(--aku-font-head) !important;
  color: var(--wl-ink) !important;
  letter-spacing: -0.01em;
}
html body.ff-wl .ws .ws-conc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font: 700 0.70rem/1.25 var(--aku-font-body) !important;
  font-style: normal !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-conc-badge.is-hint {
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  color: rgb(186, 230, 253) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-conc-badge.is-hint {
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(2, 132, 199, 0.28) !important;
  color: rgb(3, 105, 161) !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-conc-badge.is-ok {
  background: rgba(52, 211, 153, 0.14) !important;
  border: 1px solid rgba(52, 211, 153, 0.34) !important;
  color: rgb(167, 243, 208) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-conc-badge.is-ok {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(5, 150, 105, 0.30) !important;
  color: rgb(6, 95, 70) !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-conc-badge.is-warn {
  background: rgba(251, 191, 36, 0.14) !important;
  border: 1px solid rgba(251, 191, 36, 0.38) !important;
  color: rgb(253, 224, 71) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-conc-badge.is-warn {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(217, 119, 6, 0.34) !important;
  color: rgb(146, 64, 14) !important;
}

/* AI Correlation Pill Track & Pills (.ai-stack & .ws-ai-pills) */
html body.ff-wl .ws .ws-stat .ai-stack {
  height: 7px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.20) !important;
  overflow: hidden !important;
  gap: 3px !important;
}
html body.ff-wl .ws .ws-stat .ai-stack i {
  border-radius: 999px !important;
}
html body.ff-wl .ws .ws-ai-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html body.ff-wl .ws .ws-ai-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font: 600 0.73rem/1.2 var(--aku-font-body) !important;
  white-space: nowrap !important;
}
html body.ff-wl .ws .ws-ai-pill.is-zero {
  opacity: 0.46 !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-ai-pill.hi {
  background: rgba(244, 63, 94, 0.16) !important;
  border: 1px solid rgba(251, 113, 133, 0.36) !important;
  color: rgb(254, 205, 211) !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-ai-pill.mid {
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.36) !important;
  color: rgb(254, 240, 138) !important;
}
html:not([data-theme="light"]) body.ff-wl .ws .ws-ai-pill.lo {
  background: rgba(52, 211, 153, 0.16) !important;
  border: 1px solid rgba(52, 211, 153, 0.38) !important;
  color: rgb(167, 243, 208) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-ai-pill.hi {
  background: rgba(244, 63, 94, 0.11) !important;
  border: 1px solid rgba(225, 29, 72, 0.28) !important;
  color: rgb(159, 18, 57) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-ai-pill.mid {
  background: rgba(245, 158, 11, 0.13) !important;
  border: 1px solid rgba(217, 119, 6, 0.30) !important;
  color: rgb(146, 64, 14) !important;
}
html[data-theme="light"] body.ff-wl .ws .ws-ai-pill.lo {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(5, 150, 105, 0.30) !important;
  color: rgb(6, 95, 70) !important;
}

@media (max-width: 960px) {
  html body.ff-wl .ws {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body.ff-wl .ws .ws-donut {
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(148, 196, 240, 0.16) !important;
  }
  html[data-theme="light"] body.ff-wl .ws .ws-donut {
    border-bottom-color: rgba(15, 39, 68, 0.10) !important;
  }
  html body.ff-wl .ws .ws-stat:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}
@media (max-width: 640px) {
  html body.ff-wl .ws .ws-donut {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html body.ff-wl .ws .ws-leg.is-grid {
    grid-template-columns: 1fr !important;
  }
  html body.ff-wl .ws .ws-leg-wrap {
    width: 100% !important;
  }
  html body.ff-wl .ws .ws-side {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body.ff-wl .ws .ws-stat,
  html[data-theme="light"] body.ff-wl .ws .ws-stat {
    border-left: 0 !important;
    padding: 10px 0 0 0 !important;
    border-top: 1px solid rgba(148, 196, 240, 0.16) !important;
  }
  html[data-theme="light"] body.ff-wl .ws .ws-stat {
    border-top-color: rgba(15, 39, 68, 0.10) !important;
  }
}

/* ==========================================================================
   v15 UPGRADES (Audi 2026-11-01):
   1. Group-Mode Color Sync (#wp-a-list[data-group-mode="interest|cat|trend|ai"]):
      - ⭐ ความน่าสนใจ (interest) = Gold rgb(250, 204, 21)
      - 🏷️ ประเภทหุ้น (cat) = Rose-Pink rgb(244, 114, 182)
      - 📈 แนวโน้ม (trend) = Sky-Blue rgb(56, 189, 248)
      - 🤖 ตาม AI ไหม? (ai) = Violet-Purple rgb(167, 139, 250)
      Both .wp-lane AND .wp-tile cards inside those 4 modes match the group tab color (NEVER cheap/expensive green!).
   2. Enlarged Section Headings (#wp-m-count, .wp-rq-list-h) & 16-bit Pixel Icon Alignment
   ========================================================================== */

html body.ff-wl #wp-m-count {
  font: 800 clamp(1.16rem, 1.5vw, 1.34rem)/1.3 var(--aku-font-head) !important;
  color: var(--wl-ink) !important;
  letter-spacing: -0.01em;
}
html body.ff-wl .wp-rq-list-h {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 800 clamp(1.32rem, 1.8vw, 1.56rem)/1.25 var(--aku-font-head) !important;
  letter-spacing: -0.02em;
}
html body.ff-wl :is(#wp-groupby, #wp-filters, .wp-ds-filters, .wp-rq-list-h, .ws-ai-pill) :is(.ic, .em)[data-ak-px] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin-right: 0 !important;
}

/* 1. ⭐ ความน่าสนใจ (data-group-mode="interest") — Gold Theme for Lanes & Cards */
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="interest"] .wp-lane {
  --lc: rgb(250, 204, 21) !important;
  --lc-bd: rgba(250, 204, 21, 0.44) !important;
  --lc-pill-bg: rgba(250, 204, 21, 0.18) !important;
  --lc-pill-ink: rgb(254, 240, 138) !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="interest"] .wp-tile {
  --tile-accent: rgb(250, 204, 21) !important;
  --tile-bd: rgba(250, 204, 21, 0.64) !important;
  --tile-buy-ink: rgb(254, 240, 138) !important;
  --tile-grad: linear-gradient(90deg, rgb(217, 119, 6) 0%, rgb(250, 204, 21) 28%, rgb(254, 249, 195) 52%, rgb(250, 204, 21) 76%, rgb(217, 119, 6) 100%) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="interest"] .wp-lane {
  --lc: rgb(217, 119, 6) !important;
  --lc-bd: rgba(217, 119, 6, 0.36) !important;
  --lc-pill-bg: rgba(245, 158, 11, 0.16) !important;
  --lc-pill-ink: rgb(146, 64, 14) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="interest"] .wp-tile {
  --tile-accent: rgb(217, 119, 6) !important;
  --tile-bd: rgba(217, 119, 6, 0.54) !important;
  --tile-buy-ink: rgb(180, 83, 9) !important;
  --tile-grad: linear-gradient(90deg, rgb(180, 83, 9) 0%, rgb(245, 158, 11) 28%, rgb(253, 224, 71) 52%, rgb(245, 158, 11) 76%, rgb(180, 83, 9) 100%) !important;
}

/* 2. 🏷️ ประเภทหุ้น (data-group-mode="cat") — Rose-Pink Theme for Lanes & Cards */
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="cat"] .wp-lane {
  --lc: rgb(244, 114, 182) !important;
  --lc-bd: rgba(244, 114, 182, 0.44) !important;
  --lc-pill-bg: rgba(244, 114, 182, 0.18) !important;
  --lc-pill-ink: rgb(251, 207, 232) !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="cat"] .wp-tile {
  --tile-accent: rgb(244, 114, 182) !important;
  --tile-bd: rgba(244, 114, 182, 0.64) !important;
  --tile-buy-ink: rgb(251, 207, 232) !important;
  --tile-grad: linear-gradient(90deg, rgb(219, 39, 119) 0%, rgb(244, 114, 182) 28%, rgb(252, 231, 243) 52%, rgb(244, 114, 182) 76%, rgb(219, 39, 119) 100%) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="cat"] .wp-lane {
  --lc: rgb(219, 39, 119) !important;
  --lc-bd: rgba(219, 39, 119, 0.36) !important;
  --lc-pill-bg: rgba(236, 72, 153, 0.15) !important;
  --lc-pill-ink: rgb(157, 23, 77) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="cat"] .wp-tile {
  --tile-accent: rgb(219, 39, 119) !important;
  --tile-bd: rgba(219, 39, 119, 0.54) !important;
  --tile-buy-ink: rgb(157, 23, 77) !important;
  --tile-grad: linear-gradient(90deg, rgb(157, 23, 77) 0%, rgb(236, 72, 153) 28%, rgb(249, 168, 212) 52%, rgb(236, 72, 153) 76%, rgb(157, 23, 77) 100%) !important;
}

/* 3. 📈 แนวโน้ม (data-group-mode="trend") — Sky-Blue Theme for Lanes & Cards */
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="trend"] .wp-lane {
  --lc: rgb(56, 189, 248) !important;
  --lc-bd: rgba(56, 189, 248, 0.44) !important;
  --lc-pill-bg: rgba(56, 189, 248, 0.18) !important;
  --lc-pill-ink: rgb(186, 230, 253) !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="trend"] .wp-tile {
  --tile-accent: rgb(56, 189, 248) !important;
  --tile-bd: rgba(56, 189, 248, 0.64) !important;
  --tile-buy-ink: rgb(186, 230, 253) !important;
  --tile-grad: linear-gradient(90deg, rgb(2, 132, 199) 0%, rgb(56, 189, 248) 28%, rgb(224, 242, 254) 52%, rgb(56, 189, 248) 76%, rgb(2, 132, 199) 100%) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="trend"] .wp-lane {
  --lc: rgb(2, 132, 199) !important;
  --lc-bd: rgba(2, 132, 199, 0.36) !important;
  --lc-pill-bg: rgba(14, 165, 233, 0.15) !important;
  --lc-pill-ink: rgb(3, 105, 161) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="trend"] .wp-tile {
  --tile-accent: rgb(2, 132, 199) !important;
  --tile-bd: rgba(2, 132, 199, 0.54) !important;
  --tile-buy-ink: rgb(3, 105, 161) !important;
  --tile-grad: linear-gradient(90deg, rgb(3, 105, 161) 0%, rgb(14, 165, 233) 28%, rgb(125, 211, 252) 52%, rgb(14, 165, 233) 76%, rgb(3, 105, 161) 100%) !important;
}

/* 4. 🤖 ตาม AI ไหม? (data-group-mode="ai") — Violet-Purple Theme for Lanes & Cards */
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="ai"] .wp-lane {
  --lc: rgb(167, 139, 250) !important;
  --lc-bd: rgba(167, 139, 250, 0.44) !important;
  --lc-pill-bg: rgba(167, 139, 250, 0.18) !important;
  --lc-pill-ink: rgb(221, 214, 254) !important;
}
html:not([data-theme="light"]) body.ff-wl #wp-a-list[data-group-mode="ai"] .wp-tile {
  --tile-accent: rgb(167, 139, 250) !important;
  --tile-bd: rgba(167, 139, 250, 0.64) !important;
  --tile-buy-ink: rgb(221, 214, 254) !important;
  --tile-grad: linear-gradient(90deg, rgb(124, 58, 237) 0%, rgb(167, 139, 250) 28%, rgb(237, 233, 254) 52%, rgb(167, 139, 250) 76%, rgb(124, 58, 237) 100%) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="ai"] .wp-lane {
  --lc: rgb(124, 58, 237) !important;
  --lc-bd: rgba(124, 58, 237, 0.36) !important;
  --lc-pill-bg: rgba(139, 92, 246, 0.15) !important;
  --lc-pill-ink: rgb(91, 33, 182) !important;
}
html[data-theme="light"] body.ff-wl #wp-a-list[data-group-mode="ai"] .wp-tile {
  --tile-accent: rgb(124, 58, 237) !important;
  --tile-bd: rgba(124, 58, 237, 0.54) !important;
  --tile-buy-ink: rgb(91, 33, 182) !important;
  --tile-grad: linear-gradient(90deg, rgb(91, 33, 182) 0%, rgb(139, 92, 246) 28%, rgb(196, 181, 253) 52%, rgb(139, 92, 246) 76%, rgb(91, 33, 182) 100%) !important;
}