/* EA BULL design system, Glass Sky (owner's redesign handoff, 24 Oct 2026; earlier: owner's mobile mockups, 4 Oct 2026):
   sky page, white cards with a thin line and no shadow, one gold button per part, navy for what is chosen.
   Tokens per theme, then base elements, shared components, the app shell (phone up to 800px, the icon rail
   on a tablet from 801px, the full menu from 1181px) and the hide rules for markup kept only because scripts
   still write to it. Page layouts live in wing-pages.css, admin screens in wing-admin.css, the dark theme's
   own touches in wing-dark.css. */

/* ===================================================================== tokens */
:root{
  --navy:#1d180e;--navy-9:#0e0b06;--blue:#8f620c;--blue-2:#a8750f;
  --gold-1:#f6d57a;--gold:#efc25a;--gold-h:#e3b03c;--gold-3:#d9a12e;--gold-text:#8f620c;
  --line-green:#06c755;--line-green-h:#05a648;
  --r-card:22px;--r-inner:14px;--r-field:12px;--r-pill:999px;
  --side-w:264px;--top-h:64px;--gap:20px;
  --font-head:"Kanit","Noto Sans Thai",system-ui,sans-serif;
  --font-body:"Noto Sans Thai","Kanit",system-ui,sans-serif;
  --w-font:var(--font-body);--w-head:var(--font-head);
  --w-r:var(--r-card);--w-r-sm:var(--r-inner);--w-r-lg:26px;--w-h:44px;--w-gap:var(--gap);
  --w-gold:var(--gold);--w-line-green:var(--line-green);
}
@media (max-width:800px){:root{--gap:14px;--w-r:20px}}
:root,:root[data-theme="light"]{color-scheme:light;
  --bg:#fbf8f1;--bg-top:#f3ead6;--surface:#ffffff;--surface-2:#fcfaf5;--surface-3:#f6efe1;--line:#ebe1cc;--line-2:#dccdaf;
  --ink:#1a1710;--ink-2:#3d3627;--muted:#6b6250;--faint:#968c77;--head:#1d180e;--accent:#8f620c;--sel-bg:#1d180e;--sel-ink:#ffffff;--field:#ffffff;
  --ok:#16a34a;--ok-ink:#15803d;--ok-bg:#dcfce7;--bad:#dc2626;--bad-ink:#b91c1c;--bad-bg:#fee2e2;
  --warn:#d97706;--warn-ink:#8a4b06;--warn-bg:#fff1d1;--info:#8f620c;--info-ink:#8f620c;--info-bg:#f7ebcf;
  --glow-gold:rgba(246,213,122,.30);--glow-sky:rgba(228,212,177,.45);--dots:transparent;
  --w-bg:var(--bg);--w-bg2:var(--bg-top);--w-surface:var(--surface);--w-surface2:var(--surface-2);--w-surface3:var(--surface-3);
  --w-border:var(--line);--w-border2:var(--line-2);--w-text:var(--ink);--w-text2:var(--muted);--w-text3:var(--muted);
  --w-primary:var(--blue);--w-primary-h:#7a530a;--w-primary-soft:var(--info-bg);--w-primary-text:var(--accent);
  --w-green:var(--ok-ink);--w-green-soft:var(--ok-bg);--w-red:var(--bad-ink);--w-red-soft:var(--bad-bg);--w-red-border:#f5b9b9;
  --w-amber:var(--warn-ink);--w-amber-soft:var(--warn-bg);--w-amber-border:#f1d596;
  --w-shadow:none;--w-overlay:rgba(14,11,6,.45);--w-disabled:var(--surface-3);--w-track:#e0d4bb;--w-chart:var(--blue);
  --w-header:var(--surface)}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0b0905;--bg-top:#120f08;--surface:#17130b;--surface-2:#1d180e;--surface-3:#252013;--line:#33291a;--line-2:#4a3d24;
  --ink:#f5efe2;--ink-2:#dcd1ba;--muted:#b0a48a;--faint:#8a7f68;--head:#ffffff;--accent:#f0c65e;--sel-bg:#ffffff;--sel-ink:#1d180e;--field:#120f09;
  --ok:#22c55e;--ok-ink:#4ade80;--ok-bg:#0e3b2b;--bad:#ef4444;--bad-ink:#fb8a8a;--bad-bg:#4a1626;
  --warn:#f59e0b;--warn-ink:#fcc54c;--warn-bg:#3f2e08;--info:#f3d48a;--info-ink:#f3d48a;--info-bg:#3a2e12;
  --glow-gold:rgba(239,194,90,.10);--glow-sky:rgba(144,106,29,.30);--dots:rgba(255,255,255,.045);
  --w-primary:#e3b03c;--w-primary-h:#f0c65e;--w-red-border:#7a2a3c;--w-amber-border:#6a4e12;
  --w-overlay:rgba(14,11,6,.62);--w-track:#4a3d24;--w-chart:#e3b03c}

/* ===================================================================== base */
*,*:before,*:after{box-sizing:border-box}
/* No shadows anywhere (brand rule 1): parts are told apart by a 1px line and the surface colour. */
*,*:before,*:after{box-shadow:none!important;text-shadow:none!important}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font:15px/1.6 var(--font-body);color:var(--ink);background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 1px,transparent 1.2px),radial-gradient(640px 420px at 100% 0,var(--glow-gold),transparent 70%),
    radial-gradient(760px 460px at 8% 0,var(--glow-sky),transparent 72%),linear-gradient(180deg,var(--bg-top) 0,var(--bg) 460px);
  background-size:22px 22px,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat;-webkit-font-smoothing:antialiased}
/* English reads in capitals across the app (brand rule 9); what people typed, e-mails, links, symbols such as
   XAUUSD.c, file names and codes keep their own letters (.nc and the value selectors below). */
body{text-transform:uppercase}
:where(input,textarea,select,option,code,pre,kbd,samp,.mono,.nc,[data-nc]){text-transform:none}
button,input,select,textarea{font:inherit;color:inherit;text-transform:inherit}
input,textarea,select{text-transform:none}
/* values: names and labels people typed, e-mail addresses, server names */
:where(#settings-name,#settings-email,#profile-name,#hero-hello b,.w-more-who strong,#email-status,#forgot-status,#support-email-text,#help-mail-text,
  #alerts-email-status,.w-acct-head h3,.w-acct-head small,a[href^="mailto:"]){text-transform:none}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;color:var(--head)}
h1{font-size:30px;line-height:1.25}
h2{font-size:18px;line-height:1.35}
h3{font-size:16px;line-height:1.4}
h4{font-size:15px}
h1 em,h2 em,h3 em{font-style:normal}
small,.small{font-size:13px}
code,pre,.mono{font-family:ui-monospace,'SFMono-Regular',Consolas,monospace}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:13px;line-height:1.6}
.eyebrow{display:none}
.gain{color:var(--ok-ink)!important}
.loss{color:var(--bad-ink)!important}
::selection{background:rgba(143,98,12,.22)}
img{max-width:100%}
:focus-visible{outline:2px solid #8f620c;outline-offset:2px} /* keyboard only, and solid - never a pale halo (owner, 25 Oct 2026) */
:root[data-theme="dark"] :focus-visible{outline-color:var(--accent)}
@media (max-width:800px){h1{font-size:25px}}

/* mask icons: an element with --wi set draws that icon in currentColor */
.wi,.fx-i{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--wi,var(--fx-icon)) center/contain no-repeat;mask:var(--wi,var(--fx-icon)) center/contain no-repeat}
.line-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===================================================================== buttons */
/* Capsules 44 / 36 / 30px (brand rules 2-4): .primary is solid navy (white in the dark theme); gold is kept for the
   few actions that start something new, listed below (owner, 24 Oct 2026: "ปุ่มทอง ... อยากให้ใช้น้อย ๆ หน่อย");
   .secondary is the outline button; .w-navy the solid navy one; .w-soft-button the soft one. */
.primary,.secondary,.danger,.w-navy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--w-h);padding:0 22px;
  border-radius:var(--r-pill);font:500 15px/1.2 var(--font-head);white-space:nowrap;border:1.5px solid transparent;
  transition:background-color .15s,border-color .15s,color .15s;text-decoration:none}
.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.primary:hover:not(:disabled){background:#2e2615;border-color:#2e2615}
:root[data-theme="dark"] .primary{background:#fff;color:var(--navy);border-color:#fff}
:root[data-theme="dark"] .primary:hover:not(:disabled){background:#f6e3b0;border-color:#f6e3b0}
/* gold: adding an MT5 account, and starting an EA from the EA page */
:is(#hub-add,#connect-add,#ea-cta-go,.w-ea-sheet-go,#add-first):not(:disabled),:root[data-theme="dark"] :is(#hub-add,#connect-add,#ea-cta-go,.w-ea-sheet-go,#add-first):not(:disabled){
  background:var(--gold);color:var(--navy);border-color:var(--gold)}
:is(#hub-add,#connect-add,#ea-cta-go,.w-ea-sheet-go,#add-first):hover:not(:disabled){background:var(--gold-h);border-color:var(--gold-h)}
.secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.secondary:hover:not(:disabled){background:var(--surface-3)}
.w-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.w-navy:hover:not(:disabled){background:#2e2615}
.danger{background:transparent;color:var(--bad-ink);border-color:var(--bad)}
.danger:hover:not(:disabled){background:var(--bad-bg)}
.primary:disabled,.secondary:disabled,.danger:disabled,.w-navy:disabled{background:var(--surface-3);border-color:transparent;color:var(--faint);opacity:1}
:root[data-theme="dark"] .secondary{color:#fff;border-color:#dcd1ba}
:root[data-theme="dark"] .secondary:hover:not(:disabled){background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .w-navy{background:#fff;color:var(--navy);border-color:#fff}
.full{width:100%;margin-top:16px}
.text-button{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font:500 15px/1.3 var(--font-head);padding:8px 0}
.text-button:disabled{color:var(--faint)}
.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);font-size:20px;line-height:1}
.icon-button:hover{background:var(--surface-3)}

/* ===================================================================== form controls */
label{display:block;margin:14px 0 6px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{width:100%;min-width:0;min-height:var(--w-h);padding:0 14px;
  border-radius:var(--r-field);border:1px solid var(--line-2);background:var(--field);color:var(--ink);font-size:15px;outline:none;
  transition:border-color .15s,outline-color .15s}
textarea{padding:12px 14px;min-height:96px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--faint)}
/* fields: a solid accent border while typing, no pale halo; a select shows it only from the keyboard (owner, 25 Oct 2026) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus{border-color:#8f620c;outline:none}
select:focus{outline:none}
select:focus-visible{border-color:#8f620c}
/* tick boxes, radios and switches: no pale ring after a click; a clear ring only for the keyboard (owner, 24 Oct 2026) */
input:is([type=checkbox],[type=radio]):focus{outline:none}
input:is([type=checkbox],[type=radio]):focus-visible{outline:2px solid #8f620c;outline-offset:2px}
:root[data-theme="dark"] input:is([type=checkbox],[type=radio]):focus-visible{outline-color:var(--accent)}
:root[data-theme="dark"] :is(input,textarea):focus,:root[data-theme="dark"] select:focus-visible{border-color:var(--accent);outline:none}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad)}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted)}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--field) var(--g-chevrondown) right 12px center/18px no-repeat;cursor:pointer}
select option{background:var(--surface);color:var(--ink)}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--navy);cursor:pointer}
:root[data-theme="dark"] :is(input[type=checkbox],input[type=radio]){accent-color:#f0c65e}
/* leading icons inside fields */
:is(#email,#forgot-email,#resend-email,#accounts-search,#name,#invitation,#account-password,#reset-password,#reset-confirm,#otp,#mt-password,#mt-label,#mt-login){
  padding-left:44px;background-repeat:no-repeat;background-position:14px center;background-size:19px}
#invitation{background-image:var(--g-ticket)}
#accounts-search{background-image:var(--g-search)}
/* fields a browser may fill in carry their icon beside them, not as their background: autofill wipes the background (owner, 24 Oct 2026) */
.w-ic{display:block;position:relative}
.w-ic:before{content:'';position:absolute;z-index:1;left:14px;top:50%;width:19px;height:19px;transform:translateY(-50%);background:center/19px no-repeat;pointer-events:none}
.w-ic-mail:before{background-image:var(--g-mail)}
.w-ic-lock:before{background-image:var(--g-lock)}
.w-ic-user:before{background-image:var(--g-user)}
/* password fields with a show/hide control inside */
.password-field,.flow-password{position:relative}
.password-field input,.flow-password input{padding-right:52px}
.password-field>button,.flow-password>button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:36px;min-height:0;padding:0;
  display:grid;place-items:center;border:0;background:none;color:transparent!important;font-size:0!important;overflow:hidden}
.password-field>button:before,.flow-password>button:before{content:'';position:absolute;inset:0;margin:auto;width:20px;height:20px;background:var(--faint);-webkit-mask:var(--i-eye) center/contain no-repeat;mask:var(--i-eye) center/contain no-repeat}
.password-field>button[aria-pressed=true]:before,.flow-password>button[aria-pressed=true]:before{background:var(--accent)}
/* checkbox rows */
label.check,.check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-weight:500;font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer}
label.check input{margin-top:1px}
/* switches: a checkbox inside label.switch, 44 x 26, green when on */
label.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 0;font-weight:500;font-size:15px;color:var(--ink);cursor:pointer}
label.switch input{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--w-track);transition:background .15s;cursor:pointer;accent-color:auto}
label.switch input:before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
label.switch input:checked{background:var(--ok)}
label.switch input:checked:before{transform:translateX(18px)}
label.switch input:disabled{opacity:.5}

/* ===================================================================== segmented tabs and chips */
/* the capsule track (surface-3, 4px inside) whose chosen part is navy; .ops-tabs and .w-chip are single
   capsules with a line (the admin tabs and the filters). */
.tabs,.set-langs,.w-seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface-3);margin:14px 0;width:max-content;max-width:100%}
.tabs>button,.set-langs>button,.w-seg>button{flex:1;min-height:36px;padding:0 16px;border-radius:var(--r-pill);border:0;background:transparent;
  color:var(--ink-2);font:500 14px/1.2 var(--font-head);white-space:nowrap}
.tabs>button.selected,.set-langs>button.primary,.w-seg>button[aria-pressed=true],.w-seg>button[aria-selected=true]{background:var(--sel-bg);color:var(--sel-ink)}
.ops-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.ops-tabs>button,.w-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:500 14px/1.2 var(--font-head);white-space:nowrap}
.ops-tabs>button.selected,.ops-tabs>button[aria-selected=true],.ops-tabs>button[aria-pressed=true],.w-chip[aria-pressed=true]{background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-bg)}
.w-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.w-chips::-webkit-scrollbar{display:none}
.w-chip b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--surface-3);color:var(--head);font-size:12px;font-weight:600}
.w-chip[aria-pressed=true] b{background:rgba(255,255,255,.2);color:inherit}
:root[data-theme="dark"] .w-chip[aria-pressed=true] b{background:var(--surface-3);color:var(--head)}

/* ===================================================================== pills and badges */
/* Status chips are solid in both themes (brand rule 7): green done or profit, red failed or loss, amber caution, blue information. */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;font:500 12.5px/1.3 var(--font-head);white-space:nowrap;
  background:var(--surface-3);color:var(--ink-2);border:0}
.pill.good{background:var(--ok-bg);color:var(--ok-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.error{background:var(--bad-bg);color:var(--bad-ink)}
.pill.neutral{background:var(--info-bg);color:var(--info-ink)}
.w-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:var(--navy);color:#fff;font:600 12px/1 var(--font-head);letter-spacing:.3px}
:root[data-theme="dark"] .w-badge{background:#fff;color:var(--navy)}
.w-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.w-dot.good{background:var(--ok)}.w-dot.warn{background:var(--warn)}.w-dot.error{background:var(--bad)}

/* ===================================================================== surfaces */
.panel,.w-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--w-r);padding:22px;color:var(--ink)}
@media (max-width:800px){.panel,.w-card{padding:18px 16px}}
.panel h2{font-size:18px;margin-bottom:8px}
.panel>h2+p.hint,.panel>h2+p.muted{margin-top:-2px;margin-bottom:10px}
.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-inner);background:var(--info-bg);color:var(--ink);font-size:14px;line-height:1.55;border:0}
.notice.error,.notice.warn{background:var(--warn-bg)}
.unavailable,.empty-state{display:block;padding:22px 16px;border-radius:var(--r-inner);background:var(--surface-2);border:1px dashed var(--line-2);color:var(--muted);text-align:center;font-size:14px}
.w-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 12px;text-align:center;color:var(--muted);font-size:14px}
.w-empty:before{content:'';width:52px;height:52px;margin-bottom:6px;border-radius:14px;background:var(--info-bg) var(--sk-inbox) center/24px no-repeat}
:root[data-theme="dark"] .w-empty:before{background:var(--surface-3) var(--skd-inbox) center/24px no-repeat}
.w-empty strong{color:var(--head);font:600 17px/1.35 var(--font-head)}
.w-empty small{color:var(--muted);font-size:13px}
.w-warn,.w-alert,.w-info{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-inner);font-size:14px;line-height:1.5;border:0}
.w-warn{background:var(--warn-bg);color:var(--ink)}
.w-alert{background:var(--bad-bg);color:var(--ink)}
.w-info{background:var(--info-bg);color:var(--ink)}
.w-warn:before,.w-alert:before,.w-info:before{content:'';flex:none;width:20px;height:20px;margin-top:1px;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.w-warn:before{background:var(--warn)}
.w-alert:before{background:var(--bad);-webkit-mask-image:var(--i-xcircle);mask-image:var(--i-xcircle)}
.w-info:before{background:var(--info);-webkit-mask-image:var(--i-info);mask-image:var(--i-info)}
.w-warn strong,.w-alert strong{display:block;font-family:var(--font-head);font-weight:600}
.w-warn strong{color:var(--warn-ink)}
.w-alert strong{color:var(--bad-ink)}
details>summary{cursor:pointer}
/* loading blocks (skeleton): surface-3 blocks that pulse between .6 and 1 */
.w-skel{border-radius:var(--r-inner);background:var(--surface-3);animation:w-skel 1.4s ease-in-out infinite}
@keyframes w-skel{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.w-skel{animation:none}}

/* ===================================================================== tables */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;color:var(--ink)}
thead th{padding:11px 12px;background:var(--surface-2);color:var(--muted);font:500 12px/1.3 var(--font-head);text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
thead th:first-child{border-radius:var(--r-inner) 0 0 0}thead th:last-child{border-radius:0 var(--r-inner) 0 0}
tbody td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td small{display:block;color:var(--muted);font-size:12px}
/* on a phone a table becomes one small card per row, each cell labelled (mobile.js writes the labels) */
@media (max-width:800px){
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) thead{display:none}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table),.mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody{display:block}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody tr{display:block;margin:0 0 8px;padding:6px 14px;border-radius:var(--r-inner);background:var(--surface-2);border:1px solid var(--line)}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);text-align:right}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody td:last-child{border-bottom:0}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody td:before{content:attr(data-mobile-label);color:var(--muted);font-size:12.5px;text-align:left;flex:none;max-width:45%}
 .mobile-record-table:not(.w-orders-table):not(.w-deals-table):not(.w-keep-table) tbody td[colspan]:before{display:none}
}

/* ===================================================================== dialogs and toast */
/* Centred, 560 wide (420 to confirm), 26px corners and a line; on a phone a sheet from the bottom with a grip. */
dialog{max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:26px;
  background:var(--surface);color:var(--ink)}
dialog::backdrop{background:var(--w-overlay)}
/* On a phone running the installed app the page reaches under the status bar and the home bar: a dialog stays
   inside the safe area so its heading and close button are never covered (15 Oct 2026). */
dialog:modal{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media (max-width:800px){
 dialog:modal{top:auto;bottom:0;margin:0 auto;max-width:100vw;width:100%;max-height:calc(100dvh - 40px - env(safe-area-inset-top));border-radius:26px 26px 0 0;border-bottom:0;
   padding:28px 18px calc(20px + env(safe-area-inset-bottom))}
 dialog:modal:before{content:'';position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:var(--line-2)}
}
dialog h2{font-size:20px;margin-bottom:6px}
.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.dialog-actions>button{flex:1 1 140px}
#confirm-dialog{max-width:420px}
#confirm-text{margin-top:6px;line-height:1.6}
/* toast: a navy capsule (white in the dark theme) 12px above the phone's bottom bar */
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;max-width:min(520px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--navy);color:#fff;font:500 14px/1.45 var(--font-head)}
#toast[hidden]{display:none}
#toast:before{content:'';flex:none;width:18px;height:18px;background:#4ade80;-webkit-mask:var(--i-checkcircle) center/contain no-repeat;mask:var(--i-checkcircle) center/contain no-repeat}
#toast.error:before{background:#fb8a8a;-webkit-mask-image:var(--i-xcircle);mask-image:var(--i-xcircle)}
:root[data-theme="dark"] #toast{background:#fff;color:var(--navy)}
:root[data-theme="dark"] #toast:before{background:var(--ok)}
:root[data-theme="dark"] #toast.error:before{background:var(--bad)}
@media (min-width:801px){#toast{bottom:28px}}

/* ===================================================================== brand */
.w-brand,.fx-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.w-brand img,.fx-brand img{width:51px;height:30px;object-fit:contain;flex:none}
.fx-word{display:flex;flex-direction:column;line-height:1.1}
.fx-word>span{font:600 19px/1.1 var(--font-head);letter-spacing:.2px;white-space:nowrap;color:var(--head)}
.fx-word>span em{font-style:normal;color:var(--gold-3)}
:root[data-theme="dark"] .fx-word>span em{color:var(--gold)}
.fx-word small{display:none}

/* ===================================================================== theme and language buttons (top bar) */
.theme-switch{display:flex}
#theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--head);font:500 14px/1 var(--font-head)}
#theme-toggle:before{content:'';width:17px;height:17px;background:currentColor;-webkit-mask:var(--i-moon) center/contain no-repeat;mask:var(--i-moon) center/contain no-repeat}
:root[data-theme="dark"] #theme-toggle:before{-webkit-mask-image:var(--i-sun);mask-image:var(--i-sun)}
.language-switch{position:relative;display:flex}
.language-switch>button{display:none}
.language-menu{position:relative}
.language-menu>summary{list-style:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--head);cursor:pointer;font:600 13px/1 var(--font-head)}
.language-menu>summary::-webkit-details-marker{display:none}
.language-menu>summary>svg{display:none}
.language-menu>summary:after{content:'TH'}
html[lang=en] .language-menu>summary:after{content:'EN'}
.language-flag{width:24px;height:16px;border-radius:3px;display:block}
/* dropdowns: surface, a line, 18px corners, 42px rows, the chosen one on surface-2 with a green tick */
.language-options{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;gap:6px;min-width:190px;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line-2)}
.language-options button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border-radius:12px;font:500 14px/1 var(--font-head);color:var(--ink)}
.language-options button:hover,.language-options button[aria-pressed=true]{background:var(--surface-2)}
.language-options button[aria-pressed=true]:after{content:'';margin-left:auto;width:18px;height:18px;background:var(--ok);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

/* ===================================================================== app bar */
.w-appbar,.topbar{position:relative;display:flex;align-items:center;gap:10px;color:var(--ink);background:var(--surface)}
.w-appbar>*,.topbar>*{position:relative;z-index:1}
.w-back{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--head);flex:none}
.w-back:before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-chevron) center/contain no-repeat;mask:var(--i-chevron) center/contain no-repeat;transform:scaleX(-1)}
.w-back:hover{background:var(--surface-3)}
.w-bell,.w-gear{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--head);flex:none}
.w-bell{margin-left:auto}
.w-bell:before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-bell) center/contain no-repeat;mask:var(--i-bell) center/contain no-repeat}
.w-gear:before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-gear) center/contain no-repeat;mask:var(--i-gear) center/contain no-repeat}
.w-bell:hover,.w-gear:hover{background:var(--surface-3)}
.w-bell-count{position:absolute;top:-5px;right:-1px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font:600 11px/1 var(--font-head);display:grid;place-items:center;border:2px solid var(--surface)}

/* ===================================================================== sign-in */
.w-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.w-center{text-align:center}
.auth-layout{min-height:100vh;display:flex;flex-direction:column}
.auth-bar{min-height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0}
.auth-story{display:none}
.auth-main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:16px 14px 32px}
.auth-main>section{padding:22px 18px}
.auth-main h2{font-size:24px;font-weight:800;color:var(--w-text);margin-bottom:4px}
.auth-main h2+p,.auth-main h2+.muted,#twofa-description{color:var(--w-text2);font-size:14.5px;margin-bottom:14px}
.auth-main form input:not([type=checkbox]){min-height:50px;margin-top:10px}
.auth-main #registration-fields input{margin-top:10px}
.auth-main .password-field{margin-top:10px}
.auth-main .password-field input{margin-top:0}
.auth-main .primary.full{min-height:50px;font-size:16px}
.w-line-info{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:14px;font-weight:600;color:var(--w-text)}
.w-line-info:before{content:'';width:20px;height:20px;border-radius:50%;flex:none;background:var(--w-primary);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.w-line-info small{font-weight:500;color:var(--w-text2)}
.w-soft-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:var(--w-r-sm);background:var(--w-primary-soft);color:var(--w-primary-text);font-weight:600;font-size:15px}
.w-soft-button:after{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-chevron) center/contain no-repeat;mask:var(--i-chevron) center/contain no-repeat}
.auth-main #forgot-password{display:block;margin:12px auto 0;color:var(--w-primary-text)}
.w-back-link{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px auto 0}
.w-back-link:before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transform:scaleX(-1)}
.auth-main .w-info{margin-top:14px}
.auth-main .w-info small{color:var(--w-text2)}
#forgot-status,#email-status{margin-top:12px;color:var(--w-text);font-size:14px}
#reset-request-new{display:block;margin:10px auto 0}
.password-checks{margin-top:10px;padding:12px 14px;border-radius:var(--w-r-sm);background:var(--w-surface2);font-size:13px;color:var(--w-text2)}
.password-check{display:flex;gap:8px}
.password-check.met{color:var(--w-green)}
#reset-match.met{color:var(--w-green)}
.captcha-box{margin-top:12px;min-height:66px;border:1px dashed var(--w-border2);border-radius:var(--w-r-sm);display:grid;place-items:center}
.w-mail-art{width:96px;height:96px;margin:4px auto 14px;border-radius:50%;background:var(--w-primary-soft);position:relative}
.w-mail-art:before{content:'';position:absolute;inset:24px;background:var(--w-primary);-webkit-mask:var(--i-mail) center/contain no-repeat;mask:var(--i-mail) center/contain no-repeat}
.w-mail-art:after{content:'';position:absolute;right:10px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--w-green) var(--w-check-white) center/16px no-repeat;box-shadow:0 0 0 3px var(--w-surface)}
#email-panel h2,#verify-email-panel h2{text-align:center}
#email-panel #email-status,#verify-email-panel>p{text-align:center}
/* two-step verification */
/* The QR is as wide as a phone reads from a laptop screen without zooming (owner, 11 Oct 2026); the code and steps sit under it. */
#enrollment:not([hidden]){display:grid;grid-template-columns:1fr;justify-items:center;gap:14px;margin:8px 0 6px}
.w-qr{width:min(280px,100%);padding:10px;border-radius:12px;border:1px solid var(--w-border);background:#fff}
.w-qr-side{width:100%}
.w-qr img{display:block;width:100%;height:auto}
.w-qr-head{font-size:13px;font-weight:600;color:var(--w-text);margin-bottom:6px}
#totp-secret{display:block;padding:8px 10px;border-radius:8px;background:var(--w-surface2);border:1px solid var(--w-border);font-size:12.5px;word-break:break-all;color:var(--w-text);user-select:all}
.w-steps{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--w-text2);line-height:1.6}
#otp{text-align:left;letter-spacing:2px;font-size:18px}
.twofa-skip .hint{margin-top:8px}
#twofa-help{margin-top:14px}
#auth-back{display:none}
.auth-bar .language-switch{margin-left:auto}
.auth-bar .language-menu>summary{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
body>.theme-switch,body>.language-switch{display:none}

/* ===================================================================== workspace shell (phone first) */
/* Phone up to 800px: a white top bar (brand, account picker, bell, settings) and a floating navy capsule at
   the bottom. Tablet 801-1180px: an 84px icon rail. Desktop from 1181px: the floating 264px menu. The scripts
   that move the header controls switch at 801px (header-controls.js, live-status.js), so the shell does too. */
.workspace{min-height:100vh}
.workspace-main{min-width:0}
.topbar{position:sticky;top:0;z-index:40;min-height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 16px;gap:8px;border-bottom:1px solid var(--line)}
#menu-toggle,.topbar .w-crumb,.topbar #node-status{display:none}
.topbar .fx-mobile-brand{display:inline-flex;min-width:0;gap:7px}
.topbar .w-brand img{width:44px;height:26px}
.topbar .fx-word>span{font-size:17px}
.page-heading>.fx-live{margin-top:6px;align-self:flex-start;order:3}
.page-heading:has(>.fx-live):after{content:'';flex-basis:100%;height:0;order:2}
.page-heading>div{flex:1 1 210px}
/* the account picker: a capsule with its label inside (the label shows from 1181px) */
/* as wide as the account names need, at most 150px on a phone and 210px on a tablet (design 5.2, 5.3) */
.topbar .account-context{position:relative;display:flex;align-items:center;margin-left:auto;min-width:0;flex:0 1 auto;max-width:150px;color:var(--ink)}
.topbar .account-context label,.topbar .account-context .pill,.topbar #terminal-summary{display:none}
.topbar .account-context select{width:auto;max-width:100%;min-height:40px;height:40px;padding:0 34px 0 16px;border-radius:999px;font:600 14px/1 var(--font-head);color:var(--head);
  background-color:var(--surface);border:1px solid var(--line-2);background-position:right 12px center;text-overflow:ellipsis}
.topbar .account-context select option{color:var(--ink);background:var(--surface)}
.topbar .account-context~.w-bell{margin-left:0}
@media (max-width:379px){.topbar .fx-word{display:none}}
/* the live line only on pages whose figures move (owner, 9 Oct 2026) */
@media (max-width:800px){body:is([data-page=catalog],[data-page=more],[data-page=settings],[data-page=help],[data-page=backtest]) .page-heading>.fx-live{display:none}}
.content{display:flex;flex-direction:column;gap:var(--gap);padding:16px 16px calc(104px + env(safe-area-inset-bottom));max-width:1180px;margin:0 auto;width:100%}
.content>.page:not([hidden]){display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.content>footer{display:none}
#connection-warning{margin:0}
/* the account picker shows on the pages that act on one account */
.content>.account-context{display:none}
.page>.account-context{display:flex;align-items:center;gap:10px}
.account-context label{margin:0;white-space:nowrap;font-size:14px}
.account-context select{flex:1}
.account-context .pill,.account-context #terminal-summary{display:none}
/* page titles: Kanit 600, 30px on a computer and 25px on a phone, the line under them muted */
.page-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:6px 2px 2px}
.page-heading>div{flex:1;min-width:0}
.page-heading h1{font:600 30px/1.25 var(--font-head);color:var(--head);letter-spacing:0}
.page-heading h1 em{font-style:normal}
.page-heading p.muted{display:block;color:var(--muted);font-size:15px;margin-top:4px;line-height:1.55;max-width:760px}
.page-heading .eyebrow{display:none}
.w-hello .eyebrow{display:block;font-size:15px;font-weight:500;color:var(--ink-2);margin-bottom:2px}
.w-hello .eyebrow b{display:inline;margin-left:6px;font:600 15px/1.4 var(--font-head);color:var(--head);letter-spacing:0}
@media (max-width:800px){.page-heading h1{font-size:25px}.page-heading p.muted{font-size:14.5px}}
/* the sidebar is the menu from 801px; on a phone the bottom bar and the More page replace it */
.sidebar{display:none}
#drawer-overlay{display:none!important}
/* bottom tab bar: a navy capsule 12px from the edges, five equal places, the chosen one a white capsule;
   the middle place (เลือก EA) carries a 34px gold ring that turns navy when chosen (like eabull.com's bar) */
.mobile-nav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  height:66px;padding:6px;border-radius:999px;background:var(--navy);border:1px solid var(--navy)}
:root[data-theme="dark"] .mobile-nav{border-color:#4a3d24}
body.fx-auth .mobile-nav,#workspace-view[hidden]~.mobile-nav{display:none}
.mobile-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;border-radius:999px;color:#fff;
  font:500 12px/1.15 var(--font-head);white-space:nowrap}
.mobile-nav .wi{width:22px;height:22px}
/* the chosen place (owner, 24 Oct 2026, option A): its icon and label in full white, the others dimmed, and a white bar
   on the bar's top edge that slides left and right to it. --i is the chosen place's position, 0 to 4. */
.mobile-nav button{color:rgba(255,255,255,.62)}
.mobile-nav button[aria-current=page]{color:#fff;font-weight:600}
.mobile-nav{--i:0}
.mobile-nav:has(>[data-target=connect][aria-current=page]){--i:1}
.mobile-nav:has(>[data-target=catalog][aria-current=page]){--i:2}
.mobile-nav:has(>[data-target=positions][aria-current=page]){--i:3}
.mobile-nav:has(>[data-target=more][aria-current=page]){--i:4}
.mobile-nav:after{content:'';position:absolute;z-index:1;top:0;width:30px;height:4px;border-radius:0 0 4px 4px;background:#fff;opacity:0;
  left:calc(6px + (100% - 20px) / 5 * (var(--i) + .5) + 2px * var(--i) - 15px);transition:left .32s cubic-bezier(.3,.7,.2,1),opacity .2s}
.mobile-nav:has([aria-current=page]):after{opacity:1}
@media (prefers-reduced-motion:reduce){.mobile-nav:after{transition:none}}
/* the middle place: the gold ring rises above the bar (owner, 24 Oct 2026: "วงกลมทอง เอาขึ้นไปเหลื่อม ๆ บน"), ringed in the
   bar's navy so it grows out of it; its label sits on the same line as the others. Chosen: the white capsule, the ring
   ringed in white to join it. */
.mobile-nav .mobile-nav-main{justify-content:center;gap:2px;padding-top:24px}
.mobile-nav-ring{position:absolute;z-index:2;left:50%;top:-24px;transform:translateX(-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:var(--navy);border:4px solid var(--navy)}
.mobile-nav-ring .wi{width:22px;height:22px}
/* chosen, the middle place keeps its gold ring, ringed in white, and its label turns gold; the white bar slides under the ring */
.mobile-nav .mobile-nav-main[aria-current=page]{color:var(--gold)}
.mobile-nav .mobile-nav-main[aria-current=page] .mobile-nav-ring{background:var(--gold);color:var(--navy);border-color:#fff}
/* the เพิ่มเติม page (owner's dark mockups, 9 Oct 2026) */
.w-more{display:flex;flex-direction:column;gap:12px}
.w-more-profile{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:var(--w-r);background:var(--surface);border:1px solid var(--line);text-align:left;color:var(--ink)}
.w-more-avatar{width:54px;height:54px;border-radius:50%;flex:none;background:var(--navy);position:relative}
.w-more-avatar:before{content:'';position:absolute;inset:14px;background:#fff;-webkit-mask:var(--i-user) center/contain no-repeat;mask:var(--i-user) center/contain no-repeat}
.w-more-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-transform:none}
.w-more-who strong{font:600 18px/1.3 var(--font-head);color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-more-2fa{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.w-more-2fa:before{content:'';width:15px;height:15px;background:var(--faint);-webkit-mask:var(--i-shield) center/contain no-repeat;mask:var(--i-shield) center/contain no-repeat}
.w-more-2fa[data-on=true]{color:var(--ok-ink)}
.w-more-2fa[data-on=true]:before{background:var(--ok);-webkit-mask-image:var(--i-shieldcheck);mask-image:var(--i-shieldcheck)}
.w-more-profile>.wi,.w-more-tile>.wi:last-child{width:18px;height:18px;color:var(--faint);flex:none;margin-left:auto}
.w-more-title{display:flex;align-items:center;gap:12px;margin:8px 2px 0;font:600 16px/1.3 var(--font-head);color:var(--head)}
.w-more-title:after{content:'';flex:1;height:1px;background:var(--line)}
.w-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.w-more-tile{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 10px 10px 12px;border-radius:var(--r-inner);background:var(--surface);border:1px solid var(--line);color:var(--ink);text-align:left;text-decoration:none}
.w-more-tile>.wi:first-child{width:22px;height:22px;color:var(--info);flex:none}
.w-more-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.w-more-name{font:600 14px/1.3 var(--font-head);color:var(--head)}
.w-more-sub{font-size:11.5px;color:var(--muted);line-height:1.35}
.w-more-count{position:absolute;top:6px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font:600 11px/1 var(--font-head);display:grid;place-items:center}
.w-more-mark{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;font:600 17px/1 var(--font-head);color:#fff}
.w-more-mark.z{background:var(--navy)}
.w-more-mark.z:before{content:'Z'}
.w-more-mark.line{background:var(--line-green)}
.w-more-mark.line:before{content:'LINE';font-size:8.5px;letter-spacing:.2px;padding:3px;border-radius:6px;background:#fff;color:var(--line-green)}
.w-more-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.w-more-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;background:var(--surface);border:1.5px solid var(--navy);color:var(--navy);font:500 15px/1 var(--font-head)}
:root[data-theme="dark"] .w-more-action{border-color:#dcd1ba;color:#fff;background:transparent}
.w-more-action .wi{width:20px;height:20px}
.w-more-logout,:root[data-theme="dark"] .w-more-logout{color:var(--bad-ink);background:transparent;border-color:var(--bad)}
/* the risk note at the foot of every page: a white card, a thin line, an amber sign, 12.5px (brand rule; never shortened) */
.content>.risk-banner{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 18px;border-radius:var(--w-r);background:var(--surface);border:1px solid var(--line);
  text-align:left;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.content>.risk-banner:before{content:'';flex:none;width:18px;height:18px;margin-top:1px;background:var(--warn);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.content>.risk-banner strong{font-weight:600;color:var(--head)}
.fx-line-card{display:none}

/* the menu's line icons (design file 00): one per page, drawn as a mask in the colour of the item */
.nav-item[data-page=overview]{--nav-i:var(--i-home)}.nav-item[data-page=connect]{--nav-i:var(--i-wallet)}.nav-item[data-page=positions]{--nav-i:var(--i-file)}
.nav-item[data-page=backtest]{--nav-i:var(--i-flask)}.nav-item[data-page=history]{--nav-i:var(--i-history)}.nav-item[data-page=news]{--nav-i:var(--i-calendar)}
.nav-item[data-page=catalog]{--nav-i:var(--i-cpu)}.nav-item[data-page=risk]{--nav-i:var(--i-shield)}.nav-item[data-page=analytics]{--nav-i:var(--i-pie)}
.nav-item[data-page=notifications]{--nav-i:var(--i-bell)}.nav-item[data-page=activity]{--nav-i:var(--i-activity)}.nav-item[data-page=settings]{--nav-i:var(--i-gear)}
.nav-item[data-page=slots]{--nav-i:var(--i-users)}.nav-item[data-page=operations]{--nav-i:var(--i-server)}.nav-item[data-page=trade]{--nav-i:var(--i-candle)}
.nav-item[data-page=help]{--nav-i:var(--i-help)}

/* ===================================================================== sign-in (desktop part; the pages themselves are restyled in their own pass) */
@media (min-width:801px){
 .auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);grid-template-rows:auto 1fr;min-height:100vh}
 .auth-bar{grid-column:1/3}
 .auth-story{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:56px clamp(32px,6vw,90px);color:var(--ink)}
 .auth-story>.w-brand .fx-word>span{font-size:30px}
 .auth-story>.w-brand img{width:103px;height:60px}
 .auth-story h1{font-size:clamp(30px,3vw,42px);line-height:1.2;max-width:620px}
 .auth-story p{font-size:17px;line-height:1.7;color:var(--muted);max-width:560px;margin-top:12px}
 .fx-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px}
 .managed-note,.auth-foot{display:flex;gap:14px;padding:16px;border-radius:var(--w-r);background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--muted);margin:0}
 .auth-foot{display:block;position:relative;padding-left:66px}
 .auth-foot br{display:none}
 .managed-note strong,.auth-foot strong{display:block;color:var(--head);margin-bottom:4px}
 .managed-note>span{flex:none;width:38px;height:38px;border-radius:12px;background:var(--info-bg);display:grid;place-items:center}
 .managed-note>span>*{display:none}
 .managed-note>span:before,.auth-foot:before{content:'';width:20px;height:20px;background:var(--info);-webkit-mask:var(--i-server) center/contain no-repeat;mask:var(--i-server) center/contain no-repeat}
 .auth-foot:before{position:absolute;left:25px;top:25px;z-index:1;background:var(--ok);-webkit-mask-image:var(--i-shieldcheck);mask-image:var(--i-shieldcheck)}
 .auth-foot:after{content:'';position:absolute;left:16px;top:16px;z-index:0;width:38px;height:38px;border-radius:12px;background:var(--ok-bg)}
 .auth-story .fx-cards p{font-size:14px;line-height:1.55;margin-top:0}
 .w-risk-line{color:var(--muted);font-size:13px}
 .auth-main{max-width:none;padding:40px 40px 40px 0;display:flex;align-items:center}
 .auth-main>section{width:100%;padding:30px 28px}
}

/* ===================================================================== tablet and desktop shell (from 801px) */
@media (min-width:801px){
 .workspace{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;padding:14px;min-height:100vh}
 /* the menu floats: 26px corners, a line, as tall as the window */
 .sidebar{display:flex;flex-direction:column;align-items:center;position:sticky;top:14px;height:calc(100vh - 28px);padding:16px 10px 12px;background:var(--surface);
   border:1px solid var(--line);border-radius:26px;overflow-y:auto;scrollbar-width:none}
 .sidebar::-webkit-scrollbar{display:none}
 .sidebar .brand{padding:2px 0 14px}
 .sidebar .brand .fx-word{display:none}
 #drawer-close{display:none}
 .nav-heading{display:none}
 .sidebar nav{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
 /* menu icons: the design's line icons, drawn from wing-icons.css over the script's own glyph */
 .nav-item{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:56px;min-height:48px;padding:0;border-radius:16px;color:var(--ink);
   font:500 0/1 var(--font-head);text-align:left}
 .nav-item:hover{background:var(--surface-2)}
 .nav-item>span:first-child{width:22px;height:22px;flex:none;display:block;background:currentColor;-webkit-mask:var(--nav-i,var(--i-grid)) center/20px no-repeat;mask:var(--nav-i,var(--i-grid)) center/20px no-repeat;color:var(--ink-2)}
 .nav-item>span:first-child>svg{display:none}
 .nav-item.selected,body:is([data-page=risk],[data-page=analytics],[data-page=activity],[data-page=help],[data-page=trade]) .nav-item[data-page=settings]{background:var(--sel-bg);color:var(--sel-ink)}
 .nav-item.selected>span:first-child,body:is([data-page=risk],[data-page=analytics],[data-page=activity],[data-page=help],[data-page=trade]) .nav-item[data-page=settings]>span:first-child{color:var(--sel-ink)}
 .nav-item .pill{position:absolute;top:2px;right:2px;min-width:20px;min-height:20px;height:20px;justify-content:center;padding:0 6px;font:600 11px/1 var(--font-head);border-radius:999px}
 #alerts-badge:not(:empty){background:var(--bad);color:#fff}
 #operations-badge{background:var(--surface-3);color:var(--ink-2)}
 #alerts-badge:is(:empty),#operations-badge:is(:empty){display:none}
 .fx-menu-link{display:flex;align-items:center;justify-content:center;gap:10px;width:56px;min-height:48px;margin-top:10px;padding:0;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:13px;text-align:left}
 .sidebar nav+.fx-menu-link{margin-top:auto}
 .sidebar nav{margin-bottom:12px} /* a long admin menu still keeps its distance from the tiles */
 .fx-menu-txt{display:none}
 .fx-menu-link strong{display:block;font:600 13.5px/1.3 var(--font-head);color:var(--head)}
 .fx-menu-link small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
 .fx-menu-ic{width:32px;height:32px;border-radius:10px;background:var(--line-green);flex:none;position:relative}
 .fx-menu-ic:before{content:'';position:absolute;inset:7px;background:#fff;-webkit-mask:var(--i-chat) center/contain no-repeat;mask:var(--i-chat) center/contain no-repeat}
 /* the Zaurix tile asks on LINE: LINE's own mark, white on LINE green (owner, 24 Oct 2026) */
 .fx-menu-link[href*="line.me"]{--i-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314zM19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629z'/%3E%3C/svg%3E")}
 .fx-menu-link[href*="line.me"] .fx-menu-ic:before{inset:6px;-webkit-mask-image:var(--i-line);mask-image:var(--i-line)}
 .fx-install .fx-menu-ic{background:var(--gold-1)}
 .fx-install .fx-menu-ic:before{background:var(--navy);-webkit-mask-image:var(--i-download);mask-image:var(--i-download)}
 .fx-sheet-controls{display:none}
 .profile{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px;padding:12px 0 0;width:100%;border-top:1px solid var(--line)}
 .profile>div{display:none;flex:1;min-width:0;text-transform:none}
 .profile strong{display:block;font:600 14px/1.3 var(--font-head);color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .profile small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
 .profile small:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
 .profile small[data-on=true]{color:var(--ok-ink)}
 .profile small[data-on=true]:before{background:var(--ok)}
 .avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 15px/1 var(--font-head);flex:none}
 :root[data-theme="dark"] .avatar{background:#fff;color:var(--navy)}
 #logout{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:transparent;font-size:0;position:relative;flex:none}
 #logout:before{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;background:var(--head);-webkit-mask:var(--i-logout) center/contain no-repeat;mask:var(--i-logout) center/contain no-repeat}
 #logout:hover{background:var(--surface-3)}
 /* the top bar: a white capsule, 64px, kept in view */
 .topbar{position:sticky;top:14px;min-height:64px;padding:0 12px 0 22px;gap:10px;border:1px solid var(--line);border-radius:999px}
 .topbar .fx-mobile-brand{display:none}
 .topbar .w-crumb{display:block;font:600 16px/1 var(--font-head);color:var(--head);white-space:nowrap}
 .topbar .w-crumb b{font-weight:600}
 .topbar #node-status{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font:500 12.5px/1 var(--font-head);white-space:nowrap}
 .topbar #node-status:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
 .topbar #node-status[hidden]{display:none}
 .topbar .account-context{flex:0 1 auto;max-width:210px;margin-left:4px}
 .topbar .theme-switch{margin-left:0}
 .topbar .w-bell{margin-left:0}
 .content{padding:24px 6px 28px}
 .mobile-nav{display:none}
 /* tablet: the buttons in the bar keep only their icons */
 .topbar #node-status{width:28px;padding:0;justify-content:center;font-size:0}
 .topbar #theme-toggle{width:40px;padding:0;justify-content:center;font-size:0;gap:0}
}

/* ===================================================================== desktop shell (from 1181px) */
@media (min-width:1181px){
 .workspace{grid-template-columns:var(--side-w) minmax(0,1fr);gap:20px;padding:16px}
 .sidebar{align-items:stretch;top:16px;height:calc(100vh - 32px);padding:18px 14px 14px}
 .sidebar .brand{position:relative;padding:4px 10px 18px;align-items:center}
 .sidebar .brand .fx-word{display:flex}
 .sidebar .brand .fx-word:after{content:'แดชบอร์ดบัญชี MT5';margin-top:3px;font:400 11.5px/1.2 var(--font-body);color:var(--muted);letter-spacing:0}
 html[lang=en] .sidebar .brand .fx-word:after{content:'MT5 account dashboard'}
 .nav-heading{display:block;margin:4px 14px 8px;color:var(--muted);font-size:12px;font-weight:500}
 .sidebar nav{align-items:stretch;gap:6px} /* a hovered item never touches the open one */
 .nav-item{justify-content:flex-start;width:auto;min-height:42px;padding:0 14px;border-radius:999px;font-size:14.5px;line-height:1.2}
 .nav-item .pill{position:static;margin-left:auto}
 /* the admin pages under their own heading */
 .nav-item[data-page=slots]:not([hidden]),.nav-item[data-page=slots][hidden]+.nav-item[data-page=operations]{margin-top:34px}
 .nav-item[data-page=slots]:not([hidden]):after,.nav-item[data-page=slots][hidden]+.nav-item[data-page=operations]:after{content:'ผู้ดูแล';position:absolute;left:14px;top:-24px;
   font:500 12px/1 var(--font-body);color:var(--muted)}
 html[lang=en] .nav-item[data-page=slots]:not([hidden]):after,html[lang=en] .nav-item[data-page=slots][hidden]+.nav-item[data-page=operations]:after{content:'Admin'}
 .fx-menu-link{justify-content:flex-start;width:auto;padding:10px 12px;min-height:58px;border-radius:16px} /* both tiles one height */
 .fx-menu-link small{text-wrap:balance}
 .fx-menu-txt{display:block;min-width:0}
 .profile{flex-direction:row;padding:12px 4px 0}
 .profile>div{display:block}
 .topbar{top:16px}
 .topbar .account-context{flex:0 1 auto;max-width:none;margin-left:6px;border:1px solid var(--line-2);border-radius:999px;padding:0 0 0 16px;gap:4px;background:var(--surface)}
 .topbar .account-context label{display:block;margin:0;color:var(--muted);font:400 12.5px/1 var(--font-body)}
 .topbar .account-context select{width:auto;min-width:150px;max-width:240px;border:0;background-color:transparent;padding-left:8px}
 .topbar #node-status{width:auto;padding:0 12px;font-size:12.5px}
 .topbar #theme-toggle{width:auto;padding:0 16px;font-size:14px;gap:8px}
 .content{padding:28px 8px 28px}
}

/* ===================================================================== 6-digit code boxes (wing-shell.js) */
.w-otp{position:relative;margin-top:10px}
.w-otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.w-otp-row span{height:52px;display:grid;place-items:center;border-radius:var(--r-field);border:1px solid var(--line-2);background:var(--field);font:600 22px/1 var(--font-head);color:var(--head);font-variant-numeric:tabular-nums}
.w-otp-row span.on{border-color:#8f620c}
.w-otp .w-otp-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;font-size:16px;cursor:text;background:none;border:0;outline:0}

/* ===================================================================== notices shared by pages */
.twofa-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--w-r);background:var(--warn-bg);border:0;font-size:13.5px;line-height:1.5}
.twofa-banner p{flex:1 1 200px;min-width:0;color:var(--ink-2)}
.twofa-banner p strong{color:var(--head);display:block;font-family:var(--font-head);font-weight:600}
.twofa-banner .primary{min-height:36px;padding:0 16px;font-size:14px}
.twofa-banner .icon-button{width:32px;height:32px;font-size:18px}
@media (max-width:800px){.twofa-banner{position:relative;padding-right:48px}.twofa-banner .icon-button{position:absolute;top:10px;right:10px}}
.security-dialog{max-width:440px}
.security-error{color:var(--bad-ink);font-size:12.5px;margin-top:8px}
.security-error:empty{display:none}
.security-qr{display:block;width:min(260px,100%);height:auto;margin:10px auto;border-radius:var(--r-inner);border:1px solid var(--line);background:#fff;padding:6px}
.security-dialog code{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--surface-2);word-break:break-all;font-size:12.5px}
.privacy-close-list{margin:10px 0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ===================================================================== install banner and steps (pwa.js) */
.fx-install-bar{position:fixed;left:12px;right:12px;top:calc(8px + env(safe-area-inset-top));z-index:250;display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;
  border-radius:20px;background:var(--surface);border:1px solid var(--line-2);transform:translateY(-150%);transition:transform .35s ease}
.fx-install-bar.show{transform:none}
.fx-install-bar img{width:46px;height:46px;border-radius:12px;flex:none}
.fx-install-text{flex:1;min-width:0}
.fx-install-text strong{display:block;font:600 14.5px/1.3 var(--font-head);color:var(--head)}
.fx-install-text small{display:block;font-size:12.5px;color:var(--muted)}
.fx-install-go{min-height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:500 13.5px/1 var(--font-head);white-space:nowrap}
.fx-install-close{width:32px;height:32px;min-height:0;flex:none;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center}
.fx-install-close:before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-x) center/contain no-repeat;mask:var(--i-x) center/contain no-repeat}
.fx-install-dialog{max-width:420px}
.fx-install-dialog ol{margin:10px 0 16px;padding-left:20px;font-size:14.5px;line-height:1.7}
.fx-install-dialog .primary{width:100%}
@media (min-width:801px){.fx-install-bar{left:auto;right:16px;width:420px}}
@media (prefers-reduced-motion:reduce){.fx-install-bar{transition:none}}

/* the password rule and its advice chips (FENIX 60dc252, 12 Oct 2026): one line for what is enforced, chips for what is advised */
.password-checks{display:grid;gap:8px;text-transform:none}
.password-nice{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.password-nice>span{padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.password-nice>span:first-child{border:0;padding:0 2px 0 0;color:var(--muted)}
.password-nice>span.met{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-bg)}