/* Finance family pages in the finance-dashboard look (Audi 2026-10-16: "ไปทำหน้าอื่นที่เกี่ยวข้องทั้งหมดให้อยู่ theme เดียวกัน").
   Design.md §16.1: display heading + emoji eyebrow + mascot, zone headings on the sky, every box = the deep-dive card
   (145° glass gradient, 1px edge, 20px radius), item boxes add a 3px coloured left stripe, gold actions, no band behind sticky tabs.
   Opt-in: <body class="ff-macro"> (macro.html) · html.wl-only (port-tracker.html?view=watchlist). */
:root{--ff-card:linear-gradient(145deg,rgba(25,34,55,.96),rgba(8,12,24,.99));--ff-edge:rgba(255,255,255,.10)}

/* ── shared hero pieces ── */
.ff-hero{position:relative}
.ff-eb{display:inline-flex;align-items:center;gap:6px;font:600 .95rem/1.4 'Mitr',sans-serif;color:#c9d2e3}
.ff-title{margin:8px 0 12px!important;font-weight:800!important;font-size:clamp(3rem,6.4vw,5.2rem)!important;line-height:1.2!important;font-family:'Outfit','Mitr',sans-serif!important;letter-spacing:-.03em;color:#f0f2f8}
.ff-title span,.ff-title .g{color:#E5C586}
.ff-sticker{position:absolute;right:0;top:4px;width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));animation:fffloat 5s ease-in-out infinite;pointer-events:none}
@keyframes fffloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:760px){.ff-sticker{width:92px;height:92px;top:0}.ff-title{font-size:2.9rem!important}}
@media (prefers-reduced-motion:reduce){.ff-sticker{animation:none}}
html[data-motion=paused] .ff-sticker,body.paused .ff-sticker{animation:none}

/* ═════════ macro.html ═════════ */
body.ff-macro{--font-head:'Mitr','Outfit',sans-serif;--font-body:'Sarabun','Plus Jakarta Sans',sans-serif;--text-muted:#aab4c8}
body.ff-macro .mb-head{position:relative;padding-top:24px}
body.ff-macro .mb-head .lede{font-size:1.12rem;color:#c9d2e3;max-width:40ch}
/* sticky topic tabs: no band behind them (the band's edges showed while scrolling) */
body.ff-macro .mb-tabs{background:none;padding:.6rem 0}
body.ff-macro .mb-tabs .seg{border:0;background:none;padding:0;gap:8px;flex-wrap:wrap}
body.ff-macro .mb-tabs .seg button{min-height:42px;padding:6px 16px;font:500 .98rem 'Mitr',sans-serif;color:#eef2f8;border:1px solid rgba(229,197,134,.22);background:rgba(16,33,63,.92);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
body.ff-macro .mb-tabs .seg button.on{background:#E5C586;color:#172b43;border-color:#a58b52}
/* boxes = deep-dive card */
body.ff-macro :is(.dial,.fig,.viz,.stat-strip,.ws-donut,.wl-table,.act,.ic,.ws-stat,.sm-li,.mk){position:relative;overflow:hidden;background:var(--ff-card);border:1px solid var(--ff-edge);box-shadow:0 14px 36px rgba(0,0,0,.24)}
body.ff-macro :is(.dial,.fig,.viz,.stat-strip,.ws-donut,.wl-table,.act){border-radius:20px}
body.ff-macro .dial{background:radial-gradient(26rem 12rem at 50% 0%,rgba(229,197,134,.10),transparent 60%),var(--ff-card)}
/* item boxes: coloured left stripe, blue / gold / purple */
body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk){--acc:#7ab7f0;border-radius:14px}
body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk)::after{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc);pointer-events:none}
body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk):nth-child(3n+2){--acc:#e5c586}
body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk):nth-child(3n){--acc:#a99ae8}
body.ff-macro .ic.hot{--acc:#f0857a;border-color:rgba(240,133,122,.35)}
body.ff-macro .ic:hover,body.ff-macro .sm-li:hover{border-color:rgba(229,197,134,.45)}
/* section headings = zone heading on the sky (no box) */
body.ff-macro .sec-h{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;padding:0 0 14px;margin-bottom:1.4rem;align-items:center}
body.ff-macro .sec-h h2{font:700 clamp(1.9rem,3.6vw,2.8rem)/1.3 'Mitr',sans-serif}
body.ff-macro .sec-h .sub{font-size:1rem;color:#c9d2e3}
body.ff-macro .sec-n{width:2.8rem;height:2.8rem;font-size:1.3rem}
body.ff-macro .act-h h3,body.ff-macro .panel-h{font-family:'Mitr',sans-serif}

/* ═════════ port-tracker.html?view=watchlist ═════════ */
html.wl-only #wl-only-head{position:relative;padding-top:96px}
html.wl-only #wl-only-head .wrap{position:relative}
html.wl-only #wl-only-head p{max-width:46ch}
html.wl-only .mini-wl-zone,html.wl-only #audi-wl{position:relative;overflow:hidden;border-radius:20px!important;border:1px solid var(--ff-edge)!important;background:radial-gradient(26rem 12rem at 0% 0%,rgba(229,197,134,.08),transparent 60%),var(--ff-card)!important;box-shadow:0 18px 44px rgba(0,0,0,.28)}
html.wl-only .mini-wl-zone::before,html.wl-only #audi-wl::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:#7ab7f0}
html.wl-only #audi-wl::before{background:#e5c586}
html.wl-only #mini-wl-title,html.wl-only #audi-wl h3{font:700 clamp(1.5rem,2.6vw,1.9rem)/1.35 'Mitr',sans-serif!important}
body.ff-macro .mk-strip{gap:10px;background:none;border:0;overflow:visible}
body.ff-macro .mk{padding:.7rem .8rem .6rem 1rem}
/* macro.html has a light theme: white cards with a visible edge, dark ink (watchlist view stays dark like the rest of port-tracker) */
html[data-theme=light] body.ff-macro{--ff-card:#ffffff;--ff-edge:#c9d3e2}
html[data-theme=light] body.ff-macro :is(.dial,.fig,.viz,.stat-strip,.ws-donut,.wl-table,.act,.ic,.ws-stat,.sm-li,.mk){box-shadow:0 10px 26px rgba(20,35,60,.08)}
html[data-theme=light] body.ff-macro .dial{background:radial-gradient(26rem 12rem at 50% 0%,rgba(229,197,134,.16),transparent 60%),#ffffff}
html[data-theme=light] body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk):nth-child(3n+2){--acc:#b08a3a}
html[data-theme=light] body.ff-macro :is(.ic,.ws-stat,.sm-li,.mk):nth-child(3n){--acc:#7a68c9}
html[data-theme=light] body.ff-macro .ff-title{color:#13233a}
html[data-theme=light] body.ff-macro .ff-title .g{color:#8a6414}
html[data-theme=light] body.ff-macro .ff-eb,html[data-theme=light] body.ff-macro .mb-head .lede,html[data-theme=light] body.ff-macro .sec-h .sub{color:#34465f}
html[data-theme=light] body.ff-macro .sec-h{border-bottom-color:rgba(19,35,58,.12)}
html[data-theme=light] body.ff-macro .mb-tabs .seg button{background:#ffffff;color:#13233a;border-color:#c9d3e2;box-shadow:0 6px 16px rgba(20,35,60,.12)}
html[data-theme=light] body.ff-macro .mb-tabs .seg button.on{background:#E5C586;color:#172b43;border-color:#a58b52}
/* macro: .vb-ctx sets display:block, which beat its [hidden] attribute, so an empty link showed until the data loaded */
body.ff-macro .vb-ctx[hidden]{display:none}

/* ═════════ community.html (หุ้นในดวงใจ) · Audi 2026-10-16: finance theme + the page's job = vote the stocks you believe in ═════════ */
body.ff-comm{--font-head:'Mitr','Outfit',sans-serif;--font-body:'Sarabun','Plus Jakarta Sans',sans-serif}
body.ff-comm .hd{position:relative;text-align:left;padding-top:24px}
body.ff-comm .hd .hd-sub{margin-left:0;max-width:52ch;font-size:1.1rem;line-height:1.7;color:#c9d2e3}
body.ff-comm .hd .legend{justify-content:flex-start}
body.ff-comm .hd-eyebrow{display:none}
body.ff-comm .shrimp-wm{display:none}
body.ff-comm :is(.pod,.row,.card,.note){position:relative;background:var(--ff-card);border:1px solid var(--ff-edge);border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,.24)}
body.ff-comm .row{--acc:#7ab7f0;overflow:hidden;border-radius:14px}
body.ff-comm .row::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc)}
body.ff-comm .row.lead{--acc:#e5c586}
body.ff-comm .row:hover,body.ff-comm .row.open,body.ff-comm .pod:hover{border-color:rgba(229,197,134,.55)}
body.ff-comm .pod{border-radius:20px;background:radial-gradient(18rem 9rem at 50% 0%,rgba(229,197,134,.10),transparent 65%),var(--ff-card)}
body.ff-comm .pod.p1{border-color:rgba(229,197,134,.6);box-shadow:0 0 0 1px rgba(229,197,134,.18),0 18px 44px rgba(0,0,0,.3)}
body.ff-comm .note{border-left:3px solid #e5c586}
body.ff-comm :is(.tab,.sortb){min-height:42px;border:1px solid rgba(229,197,134,.22);background:rgba(16,33,63,.92);color:#eef2f8;font-family:'Mitr',sans-serif;font-weight:500}
body.ff-comm :is(.tab,.sortb).on{background:#E5C586;color:#172b43;border-color:#a58b52}
body.ff-comm .card h2,body.ff-comm .radar-title{font-family:'Mitr',sans-serif!important;font-size:1.3rem!important}
body.ff-comm .disclaimer{border-radius:14px}
.ff-next{margin-top:40px}
.ff-zh{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.ff-zh h2{margin:6px 0 0;font:700 clamp(1.7rem,3vw,2.4rem)/1.3 'Mitr',sans-serif;color:#f0f2f8}
.ff-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ff-door{--acc:#7ab7f0;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:14px;padding:16px 18px 16px 21px;border-radius:16px;border:1px solid var(--ff-edge);background:var(--ff-card);text-decoration:none;color:#eef2f8;overflow:hidden;transition:translate .25s,border-color .25s}
.ff-door::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc)}
.ff-door:nth-child(2){--acc:#e5c586}.ff-door:nth-child(3){--acc:#a99ae8}.ff-door:nth-child(4){--acc:#3ddc97}
.ff-door:hover{translate:0 -3px;border-color:rgba(229,197,134,.55)}
.ff-door .ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(16,185,129,.16);font-size:1.6rem}
.ff-door b{display:block;font:600 1.08rem 'Mitr',sans-serif}.ff-door small{display:block;font-size:.92rem;line-height:1.5;color:#bdc7da}
.ff-door .go{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(229,197,134,.3);color:#E5C586}
html[data-theme=light] body.ff-comm{--ff-card:#ffffff;--ff-edge:#c9d3e2}
html[data-theme=light] body.ff-comm .ff-title{color:#13233a}
html[data-theme=light] body.ff-comm .ff-title span{color:#8a6414}
html[data-theme=light] body.ff-comm .ff-eb,html[data-theme=light] body.ff-comm .hd .hd-sub{color:#34465f}
html[data-theme=light] body.ff-comm :is(.pod,.row,.card,.note){box-shadow:0 10px 26px rgba(20,35,60,.08)}
html[data-theme=light] body.ff-comm :is(.tab,.sortb){background:#ffffff;color:#13233a;border-color:#c9d3e2}
html[data-theme=light] body.ff-comm :is(.tab,.sortb).on{background:#E5C586;color:#172b43;border-color:#a58b52}
html[data-theme=light] .ff-zh h2,html[data-theme=light] .ff-door{color:#13233a}
html[data-theme=light] .ff-door small{color:#34465f}
html[data-theme=light] .ff-zh{border-bottom-color:rgba(19,35,58,.12)}
@media (max-width:760px){.ff-doors{grid-template-columns:1fr}}
@media (max-width:760px){.ff-sticker{width:64px!important;height:64px!important;top:0}.ff-hero .ff-title,.ff-hero .ff-eb,.ff-hero>.eb{padding-right:72px}.ff-hero .ff-title{font-size:2.6rem!important}}
@media (max-width:760px){html.wl-only #wl-only-head .wrap{padding-left:16px;padding-right:16px}}

/* 12d: emoji sit bare, no box behind them on any page (Audi 2026-10-18: "จำไว้ใช้กับทุกหน้าด้วย ไม่มีกล่องหลัง emoji") */
.ff-door .ic{background:none!important;border-color:transparent!important;box-shadow:none!important;outline:0;font-size:32px!important;line-height:1}