/* ── design tokens (see the reference note at the top) ── */
.tw-mh, .tw-dr, .tw-dr-bg, .tw-bn {
    --m-bar:#134e5e;                      /* reference gradient start: header, bottom bar, drawer top */
    --m-drawer-end:#2b6766;               /* reference gradient end (#71b280) moved 75% toward the start so white text keeps >= 4.5:1 */
    --m-panel:rgba(255,255,255,.05);      /* reference panel fill */
    --m-panel-hi:rgba(255,255,255,.10);   /* pressed / hover */
    --m-line:rgba(255,255,255,.15);       /* reference chip and control borders */
    --m-divider:rgba(255,255,255,.12);
    --m-y:#ffde39;                        /* reference accent outline */
    --m-y-solid:#f8df37;                  /* reference solid tile */
    --m-on-y:#134e5e;                     /* text on the solid accent */
    --m-txt:#fff;
    --m-mute:rgba(255,255,255,.75);       /* reference icon / secondary text */
    --m-faint:rgba(255,255,255,.62);      /* reference headings are .5; raised slightly for contrast on small text */
    --m-danger:#ffb4b4;
    --m-r:8px;                            /* reference control radius */
    --m-bd:1.25px;                        /* reference outline width */
    --m-hh:56px;
    font-family:inherit;
}
.tw-mh, .tw-dr, .tw-dr-bg, .tw-bn { display:none; }
.tw-mh *, .tw-dr *, .tw-bn * { box-sizing:border-box; }
.tw-mh a, .tw-dr a, .tw-bn a { color:inherit; text-decoration:none; }
.tw-mh :focus-visible, .tw-dr :focus-visible, .tw-bn :focus-visible { outline:2px solid var(--m-y); outline-offset:2px; }
.tw-ic { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* a site-wide `transition: all` would also animate `visibility` on children and leave them hidden: only transition colours */
.tw-mh *, .tw-dr *, .tw-bn * { transition-property:background-color, border-color, color, opacity !important; transition-duration:.15s; }

@media (max-width: 991px) {
    /* the desktop top bar / sidebar are not used on mobile (legacy rules force their display, hence !important) */
    header.header, #mobileSideMenu { display:none !important; }
    body { padding-top: calc(var(--m-hh, 56px) + env(safe-area-inset-top)) !important; padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
    body.tw-no-bn { padding-bottom: env(safe-area-inset-bottom) !important; }

    /* ── top bar ── */
    .tw-mh { display:flex; position:fixed; inset-inline:0; top:0; z-index:9500; align-items:center; gap:6px; height:calc(var(--m-hh) + env(safe-area-inset-top));
        padding:env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); background:var(--m-bar); border-bottom:1px solid var(--m-divider); color:var(--m-txt); }
    .tw-mh-logo { flex:1 1 0; min-width:72px; display:flex; align-items:center; height:44px; }
    .tw-mh-logo img { display:block; height:auto; width:auto; max-height:24px; max-width:100%; object-fit:contain; }
    .tw-mh-btn, .tw-mh-ava { flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--m-r); border:var(--m-bd) solid var(--m-line);
        background:var(--m-panel); color:var(--m-txt); cursor:pointer; padding:0; }
    .tw-mh-btn:active, .tw-mh-ava:active, .tw-mh-bal:active { background:var(--m-panel-hi); }
    .tw-mh-bal { flex:0 1 auto; min-width:0; max-width:46vw; height:44px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; padding:0 10px; border-radius:var(--m-r); background:var(--m-panel); border:var(--m-bd) solid var(--m-line); }
    .tw-mh-bal small { font-size:10px; line-height:1.1; color:var(--m-mute); font-weight:700; }
    .tw-mh-bal b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:1.25; color:var(--m-txt); font-weight:700; direction:ltr; unicode-bidi:isolate; }
    .tw-mh-auth { display:flex; gap:6px; }
    .tw-mh-auth a { min-height:40px; padding:0 12px; display:inline-flex; align-items:center; border-radius:var(--m-r); font-size:12.5px; font-weight:700; white-space:nowrap; color:var(--m-txt); border:var(--m-bd) solid var(--m-y); background:transparent; }
    .tw-mh-auth .is-solid { background:rgba(255,222,57,.16); }       /* Register: same outline as the reference, tinted to read as primary */

    /* ── bottom bar ── */
    .tw-bn { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; position:fixed; inset-inline:0; bottom:0; z-index:9000; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
        background:var(--m-bar); border-top:1px solid var(--m-divider); }
    body.tw-no-bn .tw-bn { display:none; }
    .tw-bn-i { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:48px; border:var(--m-bd) solid transparent; border-radius:var(--m-r); background:transparent;
        color:var(--m-mute); font:inherit; cursor:pointer; padding:2px; -webkit-tap-highlight-color:transparent; }
    .tw-bn-i .tw-ic { width:20px; height:20px; }
    .tw-bn-i span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; font-weight:600; line-height:1.1; }
    .tw-bn-i:active { background:var(--m-panel-hi); }
    .tw-bn-i.is-active, .tw-bn-i[aria-expanded="true"] { color:var(--m-txt); border-color:var(--m-y); background:var(--m-panel); }
    .tw-bn-i.is-active .tw-ic, .tw-bn-i[aria-expanded="true"] .tw-ic { color:var(--m-y); }
    .tw-bn-i.is-active span, .tw-bn-i[aria-expanded="true"] span { font-weight:700; }

    /* ── drawer ── */
    .tw-dr-bg { display:block; position:fixed; inset:0; z-index:10040; background:rgba(5,25,31,.6); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s; }
    .tw-dr-bg.is-open { opacity:1; visibility:visible; transition:opacity .22s ease; }
    .tw-dr { display:flex; flex-direction:column; position:fixed; z-index:10050; inset-block:0; inset-inline-start:0; width:min(88vw, 360px); max-width:100%; color:var(--m-txt);
        background:linear-gradient(180deg, var(--m-bar) 0%, var(--m-drawer-end) 100%); border-inline-end:1px solid var(--m-line); box-shadow:0 0 40px rgba(0,0,0,.4);
        transform:translateX(-105%); visibility:hidden; transition:transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s; padding-top:env(safe-area-inset-top); overscroll-behavior:contain; }
    [dir="rtl"] .tw-dr { transform:translateX(105%); }
    .tw-dr.is-open { transform:none; visibility:visible; transition:transform .26s cubic-bezier(.2,.8,.2,1); }
    .tw-dr-top { flex:none; display:flex; align-items:center; gap:10px; padding:14px 10px 12px 14px; padding-inline:14px 10px; border-bottom:1px solid var(--m-divider); }
    .tw-dr-acc { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 10px; border-radius:var(--m-r); background:var(--m-panel); border:var(--m-bd) solid var(--m-line); }
    .tw-dr-acc .tw-av { flex:none; width:40px; height:40px; border-radius:var(--m-r); background:var(--m-y-solid); color:var(--m-on-y); display:grid; place-items:center; font-weight:700; font-size:17px; }
    .tw-dr-acc-t { min-width:0; flex:1; }
    .tw-dr-acc-t b { display:block; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tw-dr-acc-t small { display:block; margin-top:2px; font-size:12px; color:var(--m-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tw-dr-acc-t small bdi { color:var(--m-txt); font-weight:700; direction:ltr; }
    .tw-dr-chev { color:var(--m-mute); width:16px; height:16px; }
    [dir="rtl"] .tw-dr-chev { transform:scaleX(-1); }
    .tw-dr-guest { flex:1 1 auto; min-width:0; }
    .tw-dr-guest p { margin:0 0 10px; font-size:12.5px; color:var(--m-mute); line-height:1.5; }
    .tw-dr-guest .tw-mh-auth a { min-height:44px; flex:1; justify-content:center; }
    .tw-dr-x { flex:none; width:44px; height:44px; border-radius:var(--m-r); border:var(--m-bd) solid var(--m-line); background:var(--m-panel); color:var(--m-txt); display:grid; place-items:center; padding:0; cursor:pointer; align-self:flex-start; }
    .tw-dr-x:active { background:var(--m-panel-hi); }
    .tw-dr-cta { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px 4px; }
    .tw-cta { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--m-r); font-size:13px; font-weight:700; border:var(--m-bd) solid var(--m-y); color:var(--m-txt); background:transparent; }
    .tw-cta--y { background:var(--m-y-solid); border-color:var(--m-y-solid); color:var(--m-on-y); }        /* Deposit: the one solid action, like the reference's yellow tile */
    .tw-dr-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 12px 12px; }
    .tw-dr-h { margin:16px 4px 6px; padding-top:12px; border-top:1px solid var(--m-divider); font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--m-faint); }
    .tw-dr-h:first-child { margin-top:10px; padding-top:0; border-top:0; }
    .tw-dr-row { display:flex; align-items:center; gap:14px; min-height:46px; padding:0 12px; margin-bottom:2px; border-radius:var(--m-r); border:var(--m-bd) solid transparent; font-size:14px; font-weight:500; color:var(--m-txt); }
    .tw-dr-row .tw-ic { color:var(--m-mute); }
    .tw-dr-row:active { background:var(--m-panel-hi); }
    .tw-dr-row.is-active { border-color:var(--m-y); background:var(--m-panel); font-weight:700; }          /* same treatment as the reference's active menu item */
    .tw-dr-row.is-active .tw-ic { color:var(--m-y); }
    .tw-dr-foot { flex:none; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--m-divider); background:rgba(0,0,0,.12); display:grid; gap:10px; }
    .tw-lang { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
    .tw-lang a { min-height:40px; display:grid; place-items:center; border-radius:var(--m-r); border:var(--m-bd) solid var(--m-line); background:var(--m-panel); font-size:12.5px; font-weight:700; color:var(--m-txt); }
    .tw-lang a.is-active { border-color:var(--m-y); }
    .tw-foot-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .tw-foot-row > a, .tw-foot-row form > button { min-height:44px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; border-radius:var(--m-r);
        font-family:inherit; font-size:13px; font-weight:700; line-height:1.15; text-align:center; cursor:pointer; border:var(--m-bd) solid var(--m-line); background:var(--m-panel); color:var(--m-txt); }
    .tw-foot-row form { margin:0; display:block; }
    .tw-foot-row .tw-ic { width:18px; height:18px; }
    .tw-foot-out { color:var(--m-danger) !important; border-color:rgba(255,180,180,.45) !important; }   /* logout stays visually apart from navigation */
    .tw-foot-row.is-single { grid-template-columns:1fr; }

    html.tw-lock { overflow:hidden; }
}
@media (max-width: 991px) and (max-height: 520px) and (orientation: landscape) {
    .tw-mh, .tw-dr, .tw-bn { --m-hh:48px; }
    .tw-bn-i { min-height:42px; flex-direction:row; gap:6px; justify-content:center; }
    .tw-bn-i span { font-size:11px; }
    .tw-dr { width:min(70vw, 360px); }
    .tw-dr-top { padding-block:8px; }
    .tw-dr-cta { display:none; }                       /* Deposit and Profile stay reachable from the header and the list */
    .tw-dr-foot { grid-template-columns:1fr 1fr; align-items:center; padding-block:8px calc(8px + env(safe-area-inset-bottom)); gap:8px; }
    .tw-lang a, .tw-foot-row > a, .tw-foot-row form > button { min-height:44px; }
}
@media (max-width: 359px) {
    .tw-mh { gap:4px; padding-inline:8px; }
    .tw-mh-btn, .tw-mh-ava { width:40px; height:40px; }
    .tw-mh-bal { padding:0 7px; height:40px; }
    .tw-mh-auth a { padding:0 9px; font-size:12px; }
}
@media (min-width: 992px) { .tw-mh, .tw-dr, .tw-dr-bg, .tw-bn { display:none !important; } }
@media (prefers-reduced-motion: reduce) { .tw-dr, .tw-dr-bg { transition:none !important; } }