/* หอทำนาย · รายการทุกคู่ (2026-10-21) — คู่กับ oracle-watch-20261021a.js */
:root{--wl-bg:#171b29;--wl-panel:#171b29;--wl-raised:#1f2435;--wl-line:#272d42;--wl-hover:#20263a;--wl-cur:#1d2b4a;--wl-accent:#6f9bff;
  --wl-text:#e7e9f1;--wl-muted:#8b91a8;--wl-up:#22c55e;--wl-down:#ef4444}

/* ปุ่มชื่อคู่ (ช่องเลือกเดิมซ่อนไว้ แต่ยังทำงาน) */
.wl-slot{position:relative;display:flex;align-items:center}
.wl-slot>select#asset{position:absolute;inset:0;opacity:0;pointer-events:none;width:1px;min-width:0!important}
.wl-trigger{display:flex;align-items:center;gap:10px;min-height:44px;min-width:190px;padding:5px 10px 5px 7px;border-radius:11px;border:1px solid #2a3047;
  background:linear-gradient(180deg,#20263a,#1b2031);color:var(--wl-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.wl-trigger:hover,.wl-trigger[aria-expanded=true]{border-color:#3d5aa0;background:linear-gradient(180deg,#232b44,#1d2336)}
.wl-trigger .wl-ico{width:32px;height:32px;--wl-bg:#1e2335}
.wl-tname{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.wl-tname b{font-size:15.5px;font-weight:700;letter-spacing:.2px}
.wl-tname small{font-size:11px;color:var(--wl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-caret{margin-left:auto;color:var(--wl-muted);display:flex;transition:transform .18s}
.wl-trigger[aria-expanded=true] .wl-caret{transform:rotate(180deg)}

/* ไอคอนคู่ */
.wl-ico{width:34px;height:34px;flex:none;display:block;overflow:visible}
.wl-glyph{font:700 9.5px/1 'Space Mono',Consolas,monospace;fill:#fff;text-anchor:middle;dominant-baseline:central}
.wl-glyph.two{font-size:7px;letter-spacing:-.4px}
.wl-glyph.big{font-size:11.5px;letter-spacing:-.3px}
.wl-glyph.dark{fill:#4a3208}
.wl-glyph.idx{font-size:8px;letter-spacing:.3px}

/* ปุ่มเล็กบนแถบกราฟ (เฉพาะโหมดเต็มจอ) */
.wl-mini{display:none;flex:none;align-items:center;gap:6px;min-height:34px;padding:2px 9px 2px 4px;border-radius:9px;border:1px solid #2a3047;background:#1d2233;
  color:var(--wl-text);font:700 13px Anuphan,sans-serif;cursor:pointer;--wl-bg:#1d2233}
.wl-mini .wl-ico{width:26px;height:26px}
.wl-mini svg:last-child{color:var(--wl-muted)}
body.ftc-full .wl-mini{display:flex}
@media(min-width:901px){body.ftc-full .wl-panel{top:46px;left:0}}

/* แผง */
.wl-scrim{position:fixed;inset:0;z-index:84;background:rgba(5,8,15,.45);opacity:0;pointer-events:none;transition:opacity .18s}
.wl-scrim.on{opacity:1;pointer-events:auto}
.wl-panel{--wl-bg:var(--wl-panel);position:fixed;z-index:85;top:60px;bottom:0;left:74px;width:456px;display:flex;flex-direction:column;background:var(--wl-panel);color:var(--wl-text);
  border-right:1px solid var(--wl-line);box-shadow:18px 0 40px rgba(0,0,0,.45);transform:translateX(calc(-100% - 90px));visibility:hidden;
  transition:transform .2s ease,visibility 0s linear .2s;font-family:Anuphan,sans-serif}
.wl-panel.open{transform:none;visibility:visible;transition:transform .2s ease}
.wl-grip{display:none}
.wl-head{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 10px}
.wl-head h2{font-size:16px;font-weight:700;margin:0}
.wl-sub{margin:2px 0 0;font-size:11.5px;color:var(--wl-muted)}
.wl-x{margin-left:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--wl-line);background:var(--wl-raised);color:var(--wl-muted);cursor:pointer}
.wl-x:hover{color:var(--wl-text);border-color:#3a4260}
.wl-search{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:0 12px;border-radius:10px;border:1px solid var(--wl-line);background:#12151f;color:var(--wl-muted);font-size:inherit}
.wl-search:focus-within{border-color:var(--wl-accent)}
.wl-search input{flex:1;min-width:0;min-height:40px;margin:0;padding:0;border:0;background:none;color:var(--wl-text);font:inherit;font-size:14px;outline:none}
.wl-search input::-webkit-search-cancel-button{filter:invert(.6)}
.wl-tabs{display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none}
.wl-tabs::-webkit-scrollbar{display:none}
.wl-tab{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--wl-line);background:var(--wl-raised);
  color:var(--wl-muted);font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.wl-tab i{font-style:normal;font-family:'Space Mono',monospace;font-size:11px;opacity:.75}
.wl-tab svg{fill:none}
.wl-tab[aria-selected=true]{background:#24365f;border-color:#3d5aa0;color:#fff}
.wl-tab[data-tab=fav][aria-selected=true] svg{fill:#fbbf24;stroke:#fbbf24}
.wl-cols,.wl-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 92px 68px 26px;gap:8px;align-items:center}
.wl-cols{padding:7px 16px;font-size:11px;color:var(--wl-muted);border-top:1px solid var(--wl-line);border-bottom:1px solid var(--wl-line);background:#141826}
.wl-cols .r{text-align:right;justify-self:end}
.wl-sortbtn{display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;font-size:11px;cursor:pointer;grid-column:4}
.wl-sortbtn:hover{color:var(--wl-text)}
.wl-sortbtn[data-sort=up]{color:var(--wl-up)}.wl-sortbtn[data-sort=down]{color:var(--wl-down)}
.wl-rows{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2f3650 transparent}
.wl-grp{position:sticky;top:0;z-index:1;padding:8px 16px 5px;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--wl-muted);background:#151927;border-bottom:1px solid #1e2333}
.wl-row{padding:9px 10px 9px 16px;border-bottom:1px solid #1d2232;cursor:pointer;position:relative;transition:background .12s}
.wl-row:hover,.wl-row.kb{background:var(--wl-hover)}
.wl-row.cur{background:var(--wl-cur)}
.wl-row.cur::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--wl-accent)}
.wl-row.na{cursor:default;opacity:.42}
.wl-row.na:hover{background:none}
.wl-name{display:flex;align-items:center;gap:10px;min-width:0}
.wl-name>span{display:flex;flex-direction:column;min-width:0;overflow:hidden;line-height:1.25}
.wl-name b{font-size:14px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-name small{font-size:11px;color:var(--wl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-spark{width:62px;height:24px;display:block}
.wl-spark polyline{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.wl-spark.up polyline{stroke:var(--wl-up)}.wl-spark.down polyline{stroke:var(--wl-down)}
.wl-spark.up polygon{fill:rgba(34,197,94,.10)}.wl-spark.down polygon{fill:rgba(239,68,68,.10)}
.wl-px{display:flex;flex-direction:column;align-items:flex-end;justify-self:end;padding:2px 5px;border-radius:6px;font-family:'Space Mono',Consolas,monospace;font-variant-numeric:tabular-nums}
.wl-px b{font-size:13px;font-weight:700}
.wl-px small{font-family:Anuphan,sans-serif;font-size:10.5px;color:var(--wl-muted)}
.wl-px.f-up{animation:wlUp .9s ease-out}.wl-px.f-down{animation:wlDown .9s ease-out}
@keyframes wlUp{0%{background:rgba(34,197,94,.32);color:#7dffb0}100%{background:transparent}}
@keyframes wlDown{0%{background:rgba(239,68,68,.32);color:#ffadad}100%{background:transparent}}
.wl-chg{justify-self:end;min-width:62px;text-align:center;padding:3px 6px;border-radius:6px;font:700 11.5px/1.3 'Space Mono',Consolas,monospace}
.wl-chg.up{color:var(--wl-up);background:rgba(34,197,94,.12)}.wl-chg.down{color:var(--wl-down);background:rgba(239,68,68,.12)}
.wl-star{width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:6px;background:none;color:#4a5170;cursor:pointer}
.wl-star svg{fill:none}
.wl-star:hover{color:#fbbf24}
.wl-star[aria-pressed=true]{color:#fbbf24}.wl-star[aria-pressed=true] svg{fill:#fbbf24}
.wl-empty{padding:34px 20px;text-align:center;font-size:13px;color:var(--wl-muted);margin:0}
.wl-foot{margin:0;padding:9px 16px;font-size:11px;color:var(--wl-muted);border-top:1px solid var(--wl-line)}
.wl-panel button:focus-visible,.wl-trigger:focus-visible{outline:2px solid var(--wl-accent);outline-offset:2px}

/* มือถือ / แผงข้าง: เลื่อนขึ้นจากล่าง */
@media(max-width:900px){
  .wl-trigger{min-width:0;min-height:42px;gap:8px;padding:4px 8px 4px 5px}
  .wl-trigger .wl-ico{width:28px;height:28px}
  .wl-tname b{font-size:14.5px}
  .wl-tname small{display:none}
  .wl-panel{top:auto;left:0;right:0;width:auto;height:min(86vh,760px);border-right:0;border-top:1px solid var(--wl-line);border-radius:18px 18px 0 0;
    box-shadow:0 -18px 44px rgba(0,0,0,.55);transform:translateY(105%);padding-bottom:env(safe-area-inset-bottom)}
  .wl-grip{display:block;width:42px;height:5px;border-radius:3px;background:#363d57;margin:9px auto 0}
  .wl-head{padding:10px 14px 8px}
  .wl-search{margin:0 14px 10px}
  .wl-tabs{padding:0 14px 10px}
  .wl-cols,.wl-row{grid-template-columns:minmax(0,1fr) 56px 88px 64px 26px;gap:6px}
  .wl-cols{padding:7px 14px}
  .wl-row{padding:10px 8px 10px 14px}
  .wl-spark{width:56px}
  body.wl-lock{overflow:hidden}
}
@media(max-width:400px){
  .wl-cols,.wl-row{grid-template-columns:minmax(0,1fr) 84px 62px 24px}
  .wl-cols>span:nth-child(2),.wl-row>.wl-spark{display:none}
  .wl-sortbtn{grid-column:3}
  .wl-name{gap:8px}
}
@media(prefers-reduced-motion:reduce){.wl-panel,.wl-scrim,.wl-caret{transition:none}.wl-px.f-up,.wl-px.f-down{animation:none}}