/* ==========================================================================
   sx-shell.css — Sysenta shared UI shell (layout «ل») v1.1
   1.1: mobile drawer — header theme icon; compact account row + bottom sheet
   Needs sx-tokens.css first. Rail + floating section panel + apps launcher
   + command palette + top bar + breadcrumb + mobile drawer + scrollbars +
   table wrapper + base buttons / fields / cards / badges.
   ========================================================================== */

/* ---------- fonts (self-hosted, subset files from fontsource) ---------- */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sx-bg);color:var(--sx-text);font-family:var(--sx-font);font-size:var(--sx-fs-15);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--sx-selection);color:inherit}
a{color:var(--sx-accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{line-height:1.25;margin:0;color:var(--sx-text);text-wrap:balance}
:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px;border-radius:var(--sx-radius-sm)}
:focus:not(:focus-visible){outline:none}
.sx-num,.sx-table td.n,.sx-kpi-v{font-variant-numeric:tabular-nums}
.sx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}
svg.sx-i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4}

/* ---------- scrollbars: visible + styled everywhere ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--sx-sb-track)}
::-webkit-scrollbar-thumb{background:var(--sx-sb-thumb);border-radius:8px;border:3px solid var(--sx-sb-track)}
::-webkit-scrollbar-thumb:hover{background:var(--sx-accent)}
::-webkit-scrollbar-corner{background:var(--sx-sb-track)}
/* Firefox (Chromium ignores ::-webkit-scrollbar once these are set, so scope them) */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-color:var(--sx-sb-thumb) var(--sx-sb-track)}
}
.sx-rail,.sx-dark{--sx-sb-track:var(--sx-sb-track-dark);--sx-sb-thumb:var(--sx-sb-thumb-dark)}

/* ---------- app frame ---------- */
.sx-app{min-height:100vh;min-height:100dvh;padding-inline-start:var(--sx-rail-w)}
.sx-main{min-width:0;padding:0 var(--sx-sp-6) var(--sx-sp-12)}
.sx-page{max-width:1440px;margin-inline:auto}

/* ---------- rail ---------- */
.sx-rail{position:fixed;z-index:40;inset-block:0;inset-inline-start:0;width:var(--sx-rail-w);background:var(--sx-rail-bg);color:var(--sx-rail-ink);display:flex;flex-direction:column;align-items:center;padding:var(--sx-sp-2) 0}
.sx-rail-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--sx-radius);background:var(--sx-brand);color:var(--sx-on-brand);font-weight:var(--sx-fw-bold);font-size:var(--sx-fs-18);text-decoration:none;flex:none;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
.sx-rail-logo img{width:26px;height:26px;object-fit:contain}
.sx-rail-name{display:none}
.sx-rail-sep{width:28px;height:1px;background:var(--sx-rail-line);margin:var(--sx-sp-2) 0;flex:none}
.sx-rail-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0;width:100%}
.sx-rail-foot{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:var(--sx-sp-2);border-top:1px solid var(--sx-rail-line);width:100%}
.sx-rb{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:var(--sx-radius);background:transparent;color:var(--sx-rail-ink-2);cursor:pointer;padding:0;transition:background-color var(--sx-dur) var(--sx-ease),color var(--sx-dur) var(--sx-ease);text-decoration:none}
.sx-rb:hover{background:var(--sx-rail-hover);color:var(--sx-rail-ink)}
.sx-rb[aria-expanded="true"]{background:var(--sx-rail-hover);color:var(--sx-rail-ink);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22)}
.sx-rb.is-active{background:var(--sx-rail-active);color:var(--sx-rail-ink)}
.sx-rb.is-active::before{content:"";position:absolute;inset-inline-start:-8px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--sx-rail-ink)}
[dir="rtl"] .sx-rb.is-active::before{border-radius:3px 0 0 3px}
.sx-rb:focus-visible{outline-color:var(--sx-rail-focus);outline-offset:1px}
.sx-rb svg.sx-i{width:21px;height:21px}
.sx-ava{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgb(255 255 255 / .16);color:#fff;font-size:var(--sx-fs-12);font-weight:var(--sx-fw-bold);letter-spacing:.02em}
.sx-rail-menu{display:none}
/* tooltip */
.sx-tip{position:fixed;z-index:90;pointer-events:none;background:#1F1F1F;color:#F5F5F5;font-size:var(--sx-fs-13);font-weight:var(--sx-fw-medium);line-height:1.3;padding:6px 10px;border-radius:var(--sx-radius-sm);box-shadow:var(--sx-shadow-2);white-space:nowrap;opacity:0;transition:opacity var(--sx-dur) var(--sx-ease)}
.sx-tip.is-on{opacity:1}
:root[data-theme="dark"] .sx-tip{background:#3A3A3A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sx-tip{background:#3A3A3A}}

/* ---------- top-bar layout (layout:'topbar' — Hub portal, accounts) ---------- */
.sx-app--top{padding-inline-start:0}
.sx-tbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--sx-sp-4);height:60px;padding:0 var(--sx-sp-6);background:var(--sx-surface);border-bottom:1px solid var(--sx-line)}
.sx-tbar .sx-rail-logo{width:36px;height:36px;font-size:var(--sx-fs-16)}
.sx-tbar .sx-rail-name{display:block;font-weight:var(--sx-fw-bold);font-size:var(--sx-fs-16);white-space:nowrap;color:var(--sx-text)}
.sx-tbar-nav{display:flex;align-items:stretch;align-self:stretch;gap:2px;min-width:0;margin-inline-start:var(--sx-sp-4)}
.sx-tb-l{position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 var(--sx-sp-3);border:0;background:none;color:var(--sx-text-2);font:inherit;font-size:var(--sx-fs-14);font-weight:var(--sx-fw-medium);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--sx-dur) var(--sx-ease)}
.sx-tb-l:hover,.sx-tb-l[aria-expanded="true"]{color:var(--sx-text)}
.sx-tb-l.is-active{color:var(--sx-accent-ink)}
.sx-tb-l.is-active::after{content:"";position:absolute;inset-inline:var(--sx-sp-3);bottom:-1px;height:2px;background:var(--sx-accent-ink)}
.sx-tb-l .sx-chev{width:15px;height:15px;transition:transform var(--sx-dur) var(--sx-ease)}
.sx-tb-l[aria-expanded="true"] .sx-chev{transform:rotate(180deg)}
.sx-tbar-end{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.sx-tbar .sx-search{width:220px;margin-inline-end:var(--sx-sp-2)}
.sx-tbar .sx-rb{color:var(--sx-muted)}
.sx-tbar .sx-rb:hover,.sx-tbar .sx-rb[aria-expanded="true"]{background:var(--sx-surface-2);color:var(--sx-text);box-shadow:none}
.sx-tbar .sx-rb:focus-visible{outline-color:var(--sx-focus)}
.sx-tbar .sx-ava{background:var(--sx-surface-3);color:var(--sx-text)}
.sx-tbar .sx-rb-search{display:none}
.sx-app--top .sx-main{padding-top:var(--sx-sp-6)}

/* ---------- floating section panel (+ generic popover) ---------- */
.sx-pop{position:fixed;z-index:70;width:var(--sx-panel-w);max-width:calc(100vw - 24px);background:var(--sx-panel-bg);color:var(--sx-text);border:1px solid var(--sx-panel-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3);display:flex;flex-direction:column;opacity:0;transform:translateX(var(--sx-pop-shift,-6px));transition:opacity var(--sx-dur) var(--sx-ease),transform var(--sx-dur-slow) var(--sx-ease);visibility:hidden}
[dir="rtl"] .sx-pop{--sx-pop-shift:6px}
.sx-pop.is-below{--sx-pop-shift:0;transform:translateY(-6px)}
.sx-pop.is-open{opacity:1;transform:none;visibility:visible}
.sx-pop-nub{position:absolute;width:12px;height:12px;background:var(--sx-panel-bg);border:1px solid var(--sx-panel-line);border-top:0;border-right:0;transform:rotate(45deg);left:-7px}
[dir="rtl"] .sx-pop:not(.is-below) .sx-pop-nub{left:auto;right:-7px;border:1px solid var(--sx-panel-line);border-bottom:0;border-left:0}
.sx-pop.is-below .sx-pop-nub{top:-7px!important;border:1px solid var(--sx-panel-line);border-bottom:0;border-right:0}
.sx-pop.is-above .sx-pop-nub{top:auto!important;bottom:-7px;border:1px solid var(--sx-panel-line);border-top:0;border-left:0}
.sx-pop-h{display:flex;align-items:center;gap:var(--sx-sp-2);padding:var(--sx-sp-3) var(--sx-sp-4) var(--sx-sp-2);font-size:var(--sx-fs-13);font-weight:var(--sx-fw-bold);color:var(--sx-muted);flex:none}
.sx-pop-h svg.sx-i{width:16px;height:16px}
.sx-pop-c{font-size:var(--sx-fs-12);font-weight:var(--sx-fw-medium);margin-inline-start:auto;color:var(--sx-muted)}
.sx-pop-list{list-style:none;margin:0;padding:0 var(--sx-sp-2) var(--sx-sp-2);overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sx-pop-sub{font-size:var(--sx-fs-12);font-weight:var(--sx-fw-bold);color:var(--sx-muted);padding:var(--sx-sp-3) var(--sx-sp-2) var(--sx-sp-1)}
.sx-link{display:flex;align-items:center;gap:var(--sx-sp-2);min-height:var(--sx-panel-item-h);padding:6px var(--sx-sp-2);border-radius:var(--sx-radius-sm);color:var(--sx-text-2);text-decoration:none;font-size:var(--sx-fs-14);line-height:1.35;transition:background-color var(--sx-dur) var(--sx-ease)}
.sx-link:hover{background:var(--sx-surface-2);color:var(--sx-text)}
.sx-link[aria-current="page"]{background:var(--sx-accent-soft);color:var(--sx-accent-ink);font-weight:var(--sx-fw-bold)}
.sx-link-dot{width:6px;height:6px;border-radius:50%;background:var(--sx-line-strong);flex:none}
.sx-link[aria-current="page"] .sx-link-dot{background:var(--sx-accent-ink)}
.sx-pop-user{padding:var(--sx-sp-3) var(--sx-sp-4);border-bottom:1px solid var(--sx-line)}
.sx-pop-user b{display:block;font-size:var(--sx-fs-14)}
.sx-pop-user span{font-size:var(--sx-fs-13);color:var(--sx-muted)}
.sx-pop-user + .sx-pop-list{padding-top:var(--sx-sp-2)}

/* ---------- content top bar + breadcrumb ---------- */
.sx-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--sx-sp-4);min-height:var(--sx-top-h);margin:0 calc(var(--sx-sp-6) * -1) var(--sx-sp-6);padding:var(--sx-sp-2) var(--sx-sp-6);background:var(--sx-bg);border-bottom:1px solid var(--sx-line)}
.sx-crumb{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--sx-fs-14);color:var(--sx-muted);margin:0;padding:0;list-style:none}
.sx-crumb li{display:flex;align-items:center;gap:6px;min-width:0}
.sx-crumb li+li::before{content:"›";color:var(--sx-placeholder);font-size:var(--sx-fs-16)}
.sx-crumb a{color:var(--sx-muted);text-decoration:none;white-space:nowrap}
.sx-crumb a:hover{color:var(--sx-text);text-decoration:underline}
.sx-crumb [aria-current]{color:var(--sx-text);font-weight:var(--sx-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-top-end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sx-sp-2)}
.sx-search{display:flex;align-items:center;gap:var(--sx-sp-2);width:260px;height:var(--sx-ctl-h);padding:0 6px 0 10px;border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius);background:var(--sx-field);color:var(--sx-placeholder);font:inherit;font-size:var(--sx-fs-14);cursor:pointer;text-align:start;transition:border-color var(--sx-dur) var(--sx-ease)}
[dir="rtl"] .sx-search{padding:0 10px 0 6px}
.sx-search:hover{border-color:var(--sx-field-line);color:var(--sx-muted)}
.sx-search span{flex:1}
.sx-search svg.sx-i{width:17px;height:17px}
.sx-kbd{display:inline-flex;align-items:center;gap:2px;font:var(--sx-fw-medium) var(--sx-fs-12)/1 var(--sx-font);color:var(--sx-muted);background:var(--sx-surface-2);border:1px solid var(--sx-line);border-bottom-width:2px;border-radius:5px;padding:3px 6px;direction:ltr;white-space:nowrap}

/* ---------- apps launcher (overlay + inline home) ---------- */
.sx-launch{position:fixed;z-index:50;inset-block:0;inset-inline-start:var(--sx-rail-w);inset-inline-end:0;background:var(--sx-bg);overflow-y:auto;padding:var(--sx-sp-12) var(--sx-sp-6);opacity:0;visibility:hidden;transition:opacity var(--sx-dur) var(--sx-ease),visibility 0s linear var(--sx-dur)}
.sx-launch.is-open{opacity:1;visibility:visible;transition:opacity var(--sx-dur) var(--sx-ease)}
.sx-home{padding:var(--sx-sp-6) 0 var(--sx-sp-8)}
.sx-lx{max-width:980px;margin-inline:auto}
.sx-lx-hi{font-size:var(--sx-fs-28);font-weight:var(--sx-fw-bold);letter-spacing:-.01em}
.sx-lx-sub{color:var(--sx-muted);margin:var(--sx-sp-1) 0 var(--sx-sp-8);font-size:var(--sx-fs-15)}
.sx-lx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--sx-sp-3);list-style:none;margin:0;padding:0}
.sx-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--sx-sp-2);width:100%;min-height:120px;padding:var(--sx-sp-4);background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius);color:var(--sx-text);font:inherit;cursor:pointer;text-align:start;transition:border-color var(--sx-dur) var(--sx-ease),background-color var(--sx-dur) var(--sx-ease)}
.sx-tile:hover{border-color:var(--sx-field-line);background:var(--sx-surface)}
.sx-tile-ic{display:block;color:var(--sx-muted);margin-bottom:var(--sx-sp-2);transition:color var(--sx-dur) var(--sx-ease)}
.sx-tile-ic svg.sx-i{width:24px;height:24px}
.sx-tile:hover .sx-tile-ic,.sx-tile[aria-expanded="true"] .sx-tile-ic,.sx-tile.is-active .sx-tile-ic{color:var(--sx-accent-ink)}
.sx-tile[aria-expanded="true"]{border-color:var(--sx-accent-ink)}
.sx-tile b{font-size:var(--sx-fs-15);font-weight:var(--sx-fw-bold);line-height:1.3}
.sx-tile small{font-size:var(--sx-fs-13);color:var(--sx-muted);font-variant-numeric:tabular-nums;line-height:1.35}
.sx-tile-stat.is-warn{color:var(--sx-warn)} .sx-tile-stat.is-bad{color:var(--sx-bad)} .sx-tile-stat.is-ok{color:var(--sx-ok)} .sx-tile-stat.is-info{color:var(--sx-info)}

/* ---------- command palette ---------- */
.sx-scrim{position:fixed;inset:0;z-index:80;background:var(--sx-scrim);opacity:0;visibility:hidden;transition:opacity var(--sx-dur) var(--sx-ease),visibility 0s linear var(--sx-dur)}
.sx-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--sx-dur) var(--sx-ease)}
.sx-pal{position:fixed;z-index:85;top:12vh;left:50%;width:min(640px,calc(100vw - 32px));max-height:min(560px,76vh);transform:translate(-50%,-8px);background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--sx-dur) var(--sx-ease),transform var(--sx-dur-slow) var(--sx-ease),visibility 0s linear var(--sx-dur)}
.sx-pal.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--sx-dur) var(--sx-ease),transform var(--sx-dur-slow) var(--sx-ease)}
.sx-pal-in{display:flex;align-items:center;gap:var(--sx-sp-3);padding:0 var(--sx-sp-4);border-bottom:1px solid var(--sx-line);flex:none}
.sx-pal-in svg.sx-i{color:var(--sx-muted)}
.sx-pal-in input{flex:1;min-width:0;height:56px;border:0;background:transparent;color:var(--sx-text);font:inherit;font-size:var(--sx-fs-16);outline:none}
.sx-pal-in input::placeholder{color:var(--sx-placeholder)}
.sx-pal-list{list-style:none;margin:0;padding:var(--sx-sp-2);overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sx-pal-opt{display:flex;align-items:center;gap:var(--sx-sp-3);min-height:44px;padding:6px var(--sx-sp-3);border-radius:var(--sx-radius-sm);cursor:pointer;color:var(--sx-text-2)}
.sx-pal-opt svg.sx-i{width:18px;height:18px;color:var(--sx-muted)}
.sx-pal-opt b{font-weight:var(--sx-fw-medium);color:var(--sx-text);font-size:var(--sx-fs-14)}
.sx-pal-opt small{margin-inline-start:auto;font-size:var(--sx-fs-12);color:var(--sx-muted);white-space:nowrap}
.sx-pal-opt[aria-selected="true"]{background:var(--sx-accent-soft)}
.sx-pal-opt[aria-selected="true"] b,.sx-pal-opt[aria-selected="true"] svg.sx-i{color:var(--sx-accent-ink)}
.sx-pal-opt mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--sx-accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.sx-pal-empty{padding:var(--sx-sp-8) var(--sx-sp-4);text-align:center;color:var(--sx-muted);font-size:var(--sx-fs-14)}
.sx-pal-foot{display:flex;gap:var(--sx-sp-4);flex-wrap:wrap;padding:var(--sx-sp-2) var(--sx-sp-4);border-top:1px solid var(--sx-line);font-size:var(--sx-fs-12);color:var(--sx-muted);flex:none}
.sx-pal-foot span{display:inline-flex;align-items:center;gap:6px}

/* ---------- mobile drawer ---------- */
.sx-drawer{position:fixed;z-index:85;inset-block:0;inset-inline-start:0;width:min(330px,86vw);background:var(--sx-surface);box-shadow:var(--sx-shadow-3);display:flex;flex-direction:column;transform:translateX(-100%);visibility:hidden;transition:transform var(--sx-dur-slow) var(--sx-ease),visibility 0s linear var(--sx-dur-slow)}
[dir="rtl"] .sx-drawer{transform:translateX(100%)}
.sx-drawer.is-open{transform:none;visibility:visible;transition:transform var(--sx-dur-slow) var(--sx-ease)}
.sx-dr-h{display:flex;align-items:center;gap:var(--sx-sp-3);padding:var(--sx-sp-2) var(--sx-sp-2) var(--sx-sp-2) var(--sx-sp-4);min-height:60px;background:var(--sx-rail-bg);color:#fff;flex:none}
[dir="rtl"] .sx-dr-h{padding:var(--sx-sp-2) var(--sx-sp-4) var(--sx-sp-2) var(--sx-sp-2)}
.sx-dr-h b{flex:1;font-size:var(--sx-fs-16)}
.sx-dr-h .sx-rail-logo{width:36px;height:36px;font-size:var(--sx-fs-16)}
.sx-dr-h .sx-rb{width:44px;height:44px}
.sx-dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--sx-sp-2)}
.sx-acc-b{display:flex;align-items:center;gap:var(--sx-sp-3);width:100%;min-height:48px;padding:0 var(--sx-sp-3);border:0;border-radius:var(--sx-radius-sm);background:transparent;color:var(--sx-text);font:inherit;font-size:var(--sx-fs-15);font-weight:var(--sx-fw-medium);cursor:pointer;text-align:start;text-decoration:none}
.sx-acc-b:hover{background:var(--sx-surface-2)}
.sx-acc-b svg.sx-i{color:var(--sx-muted)}
.sx-acc-b.is-active>svg.sx-i:first-child{color:var(--sx-accent-ink)}
.sx-acc-b .sx-chev{margin-inline-start:auto;width:18px;height:18px;transition:transform var(--sx-dur) var(--sx-ease)}
.sx-acc-b[aria-expanded="true"] .sx-chev{transform:rotate(180deg)}
.sx-acc-p{list-style:none;margin:0 0 var(--sx-sp-2);padding:0 var(--sx-sp-2) 0 0;padding-inline-start:var(--sx-sp-8)}
.sx-acc-p .sx-link{min-height:44px}
.sx-dr-h [data-sx="drawer-x"]{margin-inline-start:calc(var(--sx-sp-2) * -1)}
/* 1.1 — account: one compact row at the bottom → bottom sheet inside the drawer */
.sx-drawer{overflow:hidden}
.sx-dr-foot{border-top:1px solid var(--sx-line);padding:var(--sx-sp-2);padding-bottom:calc(var(--sx-sp-2) + env(safe-area-inset-bottom,0px));flex:none}
.sx-dr-acct{display:flex;align-items:center;gap:var(--sx-sp-3);width:100%;min-height:56px;padding:6px var(--sx-sp-3);border:0;border-radius:var(--sx-radius-sm);background:transparent;color:var(--sx-text);font:inherit;cursor:pointer;text-align:start;transition:background-color var(--sx-dur) var(--sx-ease)}
.sx-dr-acct:hover,.sx-dr-acct[aria-expanded="true"]{background:var(--sx-surface-2)}
.sx-dr-acct .sx-ava,.sx-dr-sh-h .sx-ava{width:36px;height:36px;flex:none;background:var(--sx-accent-soft);color:var(--sx-accent-ink);font-size:var(--sx-fs-13)}
.sx-dr-who{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.sx-dr-who b{font-size:var(--sx-fs-15);font-weight:var(--sx-fw-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-dr-who small{font-size:var(--sx-fs-13);color:var(--sx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-dr-acct .sx-chev{width:18px;height:18px;color:var(--sx-muted);transform:rotate(180deg);transition:transform var(--sx-dur) var(--sx-ease)}
.sx-dr-acct[aria-expanded="true"] .sx-chev{transform:none}
.sx-dr-veil{position:absolute;inset:0;z-index:2;background:var(--sx-scrim);opacity:0;visibility:hidden;transition:opacity var(--sx-dur) var(--sx-ease),visibility 0s linear var(--sx-dur)}
.sx-dr-veil.is-open{opacity:1;visibility:visible;transition:opacity var(--sx-dur) var(--sx-ease)}
.sx-dr-sheet{position:absolute;z-index:3;inset-inline:0;bottom:0;max-height:min(80%,560px);display:flex;flex-direction:column;background:var(--sx-surface);border-radius:14px 14px 0 0;box-shadow:var(--sx-shadow-3);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);visibility:hidden;transition:transform var(--sx-dur-slow) var(--sx-ease),visibility 0s linear var(--sx-dur-slow)}
.sx-dr-sheet.is-open{transform:none;visibility:visible;transition:transform var(--sx-dur-slow) var(--sx-ease)}
.sx-dr-sheet::before{content:"";display:block;flex:none;width:36px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--sx-line-strong)}
.sx-dr-sh-h{display:flex;align-items:center;gap:var(--sx-sp-3);padding-block:var(--sx-sp-1) var(--sx-sp-2);padding-inline:var(--sx-sp-4) var(--sx-sp-2);border-bottom:1px solid var(--sx-line);flex:none}
.sx-dr-sh-h .sx-rb{width:44px;height:44px;color:var(--sx-muted)}
.sx-dr-sh-h .sx-rb:hover{background:var(--sx-surface-2);color:var(--sx-text)}
.sx-dr-sh-h .sx-rb:focus-visible{outline-color:var(--sx-focus)}
.sx-dr-sh-list{list-style:none;margin:0;padding:var(--sx-sp-2);overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sx-dr-sh-list .sx-link{min-height:48px;gap:var(--sx-sp-3);padding-inline:var(--sx-sp-3);font-size:var(--sx-fs-15)}
.sx-dr-sh-list .sx-link svg.sx-i{color:var(--sx-muted)}

/* ---------- base components ---------- */
.sx-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sx-sp-4);flex-wrap:wrap;margin-bottom:var(--sx-sp-6)}
.sx-page-head h1{font-size:var(--sx-fs-22);font-weight:var(--sx-fw-bold)}
.sx-page-head p{margin:var(--sx-sp-1) 0 0;color:var(--sx-muted);font-size:var(--sx-fs-14)}
.sx-actions{display:flex;gap:var(--sx-sp-2);flex-wrap:wrap}

.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sx-sp-2);height:var(--sx-ctl-h);padding:0 var(--sx-sp-4);border:1px solid var(--sx-btn-line);border-radius:var(--sx-radius);background:var(--sx-btn-bg);color:var(--sx-btn-ink);font:inherit;font-size:var(--sx-fs-14);font-weight:var(--sx-fw-medium);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--sx-shadow-1);transition:background-color var(--sx-dur) var(--sx-ease),border-color var(--sx-dur) var(--sx-ease),transform 80ms ease}
.sx-btn:hover{background:var(--sx-btn-hover)}
.sx-btn:active{transform:translateY(1px)}
.sx-btn svg.sx-i{width:17px;height:17px}
.sx-btn--primary{background:var(--sx-btn-primary-bg);border-color:var(--sx-btn-primary-bg);color:var(--sx-btn-primary-ink)}
.sx-btn--primary:hover{background:var(--sx-btn-primary-hover);border-color:var(--sx-btn-primary-hover)}
.sx-btn--ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--sx-text-2)}
.sx-btn--ghost:hover{background:var(--sx-surface-2)}
.sx-btn--danger{color:var(--sx-bad)}
.sx-btn--danger:hover{background:var(--sx-bad-soft);border-color:var(--sx-bad)}
.sx-btn--sm{height:30px;padding:0 var(--sx-sp-3);font-size:var(--sx-fs-13)}
.sx-btn--icon{width:var(--sx-ctl-h);padding:0}
.sx-btn:disabled,.sx-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

.sx-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sx-field>label,.sx-label{font-size:var(--sx-fs-13);font-weight:var(--sx-fw-medium);color:var(--sx-text-2)}
.sx-input,.sx-select{width:100%;height:var(--sx-ctl-h);padding:0 var(--sx-sp-3);border:1px solid var(--sx-field-line);border-radius:var(--sx-radius);background:var(--sx-field);color:var(--sx-text);font:inherit;font-size:var(--sx-fs-14);transition:border-color var(--sx-dur) var(--sx-ease),box-shadow var(--sx-dur) var(--sx-ease)}
.sx-input::placeholder{color:var(--sx-placeholder)}
.sx-input:focus,.sx-select:focus{outline:none;border-color:var(--sx-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 22%,transparent)}
.sx-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 10px center;padding-inline-end:34px}
[dir="rtl"] .sx-select{background-position:left 10px center}
.sx-input[aria-invalid="true"]{border-color:var(--sx-bad)}
.sx-help{font-size:var(--sx-fs-12);color:var(--sx-muted)}

.sx-card{background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-1)}
.sx-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sx-sp-3);flex-wrap:wrap;padding:var(--sx-sp-4) var(--sx-sp-5);border-bottom:1px solid var(--sx-line)}
.sx-card-h h2{font-size:var(--sx-fs-16);font-weight:var(--sx-fw-bold)}
.sx-card-b{padding:var(--sx-sp-5)}

.sx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sx-sp-4);margin-bottom:var(--sx-sp-6)}
.sx-kpi{padding:var(--sx-sp-4) var(--sx-sp-5)}
.sx-kpi-l{font-size:var(--sx-fs-13);color:var(--sx-muted);font-weight:var(--sx-fw-medium)}
.sx-kpi-v{display:block;font-size:var(--sx-fs-22);font-weight:var(--sx-fw-bold);margin-top:2px;letter-spacing:-.01em}
.sx-kpi-v small{font-size:var(--sx-fs-13);font-weight:var(--sx-fw-medium);color:var(--sx-muted);margin-inline-start:4px}
.sx-kpi-d{font-size:var(--sx-fs-12);color:var(--sx-muted);margin-top:2px}
.sx-up{color:var(--sx-ok)} .sx-down{color:var(--sx-bad)}

.sx-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--sx-radius-pill);font-size:var(--sx-fs-12);font-weight:var(--sx-fw-medium);white-space:nowrap;background:var(--sx-surface-2);color:var(--sx-text-2);line-height:1}
.sx-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.sx-badge--ok{background:var(--sx-ok-soft);color:var(--sx-ok)}
.sx-badge--warn{background:var(--sx-warn-soft);color:var(--sx-warn)}
.sx-badge--bad{background:var(--sx-bad-soft);color:var(--sx-bad)}
.sx-badge--info{background:var(--sx-info-soft);color:var(--sx-info)}
.sx-badge--accent{background:var(--sx-accent-soft);color:var(--sx-accent-ink)}

.sx-toolbar{display:flex;gap:var(--sx-sp-2);flex-wrap:wrap;align-items:center;padding:var(--sx-sp-3) var(--sx-sp-4);border-bottom:1px solid var(--sx-line)}
.sx-toolbar .sx-input{width:240px;max-width:100%}
.sx-toolbar .sx-select{width:auto;min-width:150px}
.sx-seg{display:inline-flex;gap:2px;padding:3px;background:var(--sx-surface-2);border-radius:var(--sx-radius)}
.sx-seg button{height:var(--sx-ctl-h);padding:0 var(--sx-sp-3);border:0;border-radius:var(--sx-radius-sm);background:transparent;color:var(--sx-muted);font:inherit;font-size:var(--sx-fs-13);font-weight:var(--sx-fw-medium);cursor:pointer}
.sx-seg button[aria-pressed="true"]{background:var(--sx-surface);color:var(--sx-text);box-shadow:var(--sx-shadow-1)}

/* ---------- TABLES (first-class) ----------
   <table class="sx-table [sx-table--sticky1] [sx-table--cards]" data-sx-sort>
   - default look = light grid + zebra + comfortable (owner pick, 2026-10-14)
     opt-outs: .sx-table--lines (horizontal lines only) · .sx-table--plain (no zebra)
   - header sticks while the wrapper scrolls (wrapper has a max height → visible scrollbars)
   - numbers: td/th.n  → tabular, end-aligned, LTR digits; format with SxShell.num(v)
   - density: .sx-table--compact (toggled by [data-sx-density] buttons, remembered)
   - tfoot = totals row (strong, sticks to the bottom)
   - .sx-table--cards: card list under 768px, labels from data-label (built by JS, 2-row headers OK) */
.sx-tscroll{position:relative;min-width:0}
.sx-tscroll-in{overflow:auto;max-height:var(--sx-tbl-max-h);overscroll-behavior:contain}
.sx-tscroll::before,.sx-tscroll::after{content:"";position:absolute;z-index:4;top:0;bottom:12px;width:16px;pointer-events:none;opacity:0;transition:opacity var(--sx-dur) var(--sx-ease)}
.sx-tscroll::before{left:0;box-shadow:inset 14px 0 12px -12px rgb(15 23 42 / .30)}
.sx-tscroll::after{right:12px;box-shadow:inset -14px 0 12px -12px rgb(15 23 42 / .30)}
.sx-tscroll.is-l::before,.sx-tscroll.is-r::after{opacity:1}
[dir="rtl"] .sx-tscroll::before{left:12px}
[dir="rtl"] .sx-tscroll::after{right:0}
:root[data-theme="dark"] .sx-tscroll::before{box-shadow:inset 14px 0 12px -12px rgb(0 0 0 / .75)}
:root[data-theme="dark"] .sx-tscroll::after{box-shadow:inset -14px 0 12px -12px rgb(0 0 0 / .75)}

.sx-table{--sx-py:var(--sx-tbl-pad-y);--sx-px:var(--sx-tbl-pad-x);width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:var(--sx-fs-14);line-height:1.45}
.sx-table--compact{--sx-py:var(--sx-tbl-pad-y-c);--sx-px:var(--sx-tbl-pad-x-c);font-size:var(--sx-fs-13)}
.sx-table th,.sx-table td{padding:var(--sx-py) var(--sx-px);border-bottom:1px solid var(--sx-tbl-line);text-align:start;vertical-align:middle}
.sx-table thead th{position:sticky;top:0;z-index:2;background:var(--sx-tbl-head-bg);color:var(--sx-tbl-head-ink);font-size:var(--sx-fs-13);font-weight:var(--sx-fw-medium);white-space:nowrap;border-bottom-color:var(--sx-line-strong)}
.sx-table thead th[colspan]{text-align:center}
.sx-table tbody tr{--sx-row:var(--sx-tbl-row-bg)}
.sx-table td{background:var(--sx-row);color:var(--sx-text-2)}
.sx-table:not(.sx-table--plain) tbody tr:nth-child(even){--sx-row:var(--sx-tbl-zebra)} /* zebra = default (owner pick); .sx-table--plain turns it off */
.sx-table tbody tr:hover{--sx-row:var(--sx-tbl-row-hover)}
.sx-table tbody tr:has(input[type=checkbox]:checked){--sx-row:var(--sx-tbl-row-sel)}
.sx-table th,.sx-table td{border-inline-end:1px solid var(--sx-tbl-grid)} /* light grid = default (owner pick); .sx-table--lines = horizontal only */
.sx-table th:last-child,.sx-table td:last-child,.sx-table--lines th,.sx-table--lines td{border-inline-end:0}
.sx-table thead tr:not(:last-child) th:not(:last-child){border-inline-end:1px solid var(--sx-tbl-grid)}
.sx-table--lines thead tr th{border-inline-end:0}
/* numbers: one format, LTR digits, end aligned in both directions */
.sx-table .n{direction:ltr;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
[dir="rtl"] .sx-table .n{text-align:left}
.sx-table .neg{color:var(--sx-bad)}
.sx-table td.nw{white-space:nowrap}
.sx-table td.code{white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-table td.wrap{min-width:200px;max-width:280px;white-space:normal;font-size:var(--sx-fs-13);color:var(--sx-muted)}
.sx-table td b{color:var(--sx-text);font-weight:var(--sx-fw-medium)}
.sx-table a{font-weight:var(--sx-fw-medium);text-decoration:none}
.sx-table a:hover{text-decoration:underline}
.sx-table input[type=checkbox]{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--sx-accent)}
.sx-table td.chk,.sx-table th.chk{width:1%;padding-inline-end:0}
/* totals row */
.sx-table tfoot td,.sx-table tfoot th{position:sticky;bottom:0;z-index:2;background:var(--sx-tbl-foot-bg);color:var(--sx-text);font-weight:var(--sx-fw-bold);border-top:2px solid var(--sx-line-strong);border-bottom:0;white-space:nowrap}
.sx-table tbody tr:last-child td{border-bottom-color:transparent}
/* sticky first column (code) */
.sx-table--sticky1 tbody td:first-child,.sx-table--sticky1 thead th:first-child,.sx-table--sticky1 tfoot td:first-child{position:sticky;inset-inline-start:0;z-index:1}
.sx-table--sticky1 thead th:first-child,.sx-table--sticky1 tfoot td:first-child{z-index:3}
.sx-table--sticky1 tbody td:first-child,.sx-table--sticky1 thead th:first-child{box-shadow:inset -1px 0 0 var(--sx-line-strong)}
[dir="rtl"] .sx-table--sticky1 tbody td:first-child,[dir="rtl"] .sx-table--sticky1 thead th:first-child{box-shadow:inset 1px 0 0 var(--sx-line-strong)}
/* sortable headers */
.sx-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.sx-sort:hover{color:var(--sx-text)}
.sx-sort svg{width:12px;height:12px;flex:none;fill:none;stroke-width:1.5;stroke-linecap:square}
.sx-sort .u,.sx-sort .d{stroke:var(--sx-line-strong)}
th[aria-sort="ascending"] .sx-sort .u,th[aria-sort="descending"] .sx-sort .d{stroke:var(--sx-accent-ink)}
th[aria-sort] .sx-sort{color:var(--sx-text)}
.sx-th-n .sx-sort{flex-direction:row-reverse}
/* row actions */
.sx-table .sx-btn--sm{height:28px}
.sx-tfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--sx-sp-3);flex-wrap:wrap;padding:var(--sx-sp-3) var(--sx-sp-4);border-top:1px solid var(--sx-line);font-size:var(--sx-fs-13);color:var(--sx-muted)}

.sx-empty{text-align:center;padding:var(--sx-sp-12) var(--sx-sp-4);color:var(--sx-muted)}
.sx-empty svg.sx-i{width:32px;height:32px;margin-bottom:var(--sx-sp-2)}
.sx-empty b{display:block;color:var(--sx-text);font-size:var(--sx-fs-16);margin-bottom:var(--sx-sp-1)}

/* ---------- mobile (<768px): rail → top bar, drawer for sections ---------- */
@media (max-width:767.98px){
  html,body{overflow-x:clip;max-width:100vw}
  .sx-app{padding-inline-start:0;padding-top:var(--sx-top-h)}
  .sx-main{padding:0 var(--sx-sp-4) var(--sx-sp-12)}
  .sx-rail{inset-block:0 auto;inset-inline:0;width:auto;height:var(--sx-top-h);flex-direction:row;padding:0 var(--sx-sp-1);gap:2px}
  .sx-rail-menu{display:grid}
  .sx-rail-list,.sx-rail-sep{display:none}
  .sx-rail-logo{width:34px;height:34px;font-size:var(--sx-fs-16);margin-inline-start:2px}
  .sx-rail-name{display:block;flex:1;min-width:0;margin-inline-start:var(--sx-sp-2);font-weight:var(--sx-fw-bold);font-size:var(--sx-fs-16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sx-rail-foot{flex-direction:row;width:auto;border-top:0;padding:0;gap:0}
  .sx-rb{width:44px;height:44px}
  .sx-rb.is-active::before{display:none}
  .sx-top{top:var(--sx-top-h);margin:0 calc(var(--sx-sp-4) * -1) var(--sx-sp-4);padding:var(--sx-sp-2) var(--sx-sp-4);min-height:48px}
  .sx-top .sx-search{display:none}
  .sx-launch{inset-inline-start:0;top:var(--sx-top-h);padding:var(--sx-sp-6) var(--sx-sp-4)}
  .sx-lx-hi{font-size:var(--sx-fs-22)}
  .sx-lx-sub{margin-bottom:var(--sx-sp-6)}
  .sx-lx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sx-sp-2)}
  .sx-tile{min-height:112px;padding:var(--sx-sp-4) var(--sx-sp-2)}
  .sx-pal{top:var(--sx-sp-4);max-height:calc(100dvh - 32px)}
  .sx-pal-foot{display:none}
  .sx-page-head h1{font-size:var(--sx-fs-18)}
  .sx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sx-sp-2)}
  .sx-kpi{padding:var(--sx-sp-3)}
  .sx-kpi-v{font-size:var(--sx-fs-18)}
  .sx-toolbar .sx-input,.sx-toolbar .sx-select{width:100%}
  .sx-btn--sm{height:44px;padding:0 var(--sx-sp-4)}
  .sx-card-h,.sx-card-b{padding-inline:var(--sx-sp-4)}
  /* table card view (opt-in .sx-table--cards) */
  .sx-tscroll-in:has(.sx-table--cards){max-height:none;overflow:visible}
  .sx-tscroll:has(.sx-table--cards)::before,.sx-tscroll:has(.sx-table--cards)::after{display:none}
  .sx-table--cards{width:100%;min-width:0;display:block}
  .sx-table--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sx-table--cards tbody,.sx-table--cards tfoot,.sx-table--cards tr{display:block}
  .sx-table--cards tbody{padding:var(--sx-sp-2)}
  .sx-table--cards tr{border:1px solid var(--sx-line);border-radius:var(--sx-radius);background:var(--sx-row,var(--sx-surface));margin-bottom:var(--sx-sp-2);padding:var(--sx-sp-1) 0}
  .sx-table--cards td,.sx-table--cards tfoot td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sx-sp-3);position:static;background:transparent;border:0;padding:6px var(--sx-sp-3);white-space:normal;text-align:end;min-height:0}
  .sx-table--cards td::before{content:attr(data-label);flex:none;max-width:48%;text-align:start;color:var(--sx-muted);font-size:var(--sx-fs-12);font-weight:var(--sx-fw-medium)}
  .sx-table--cards td.n{direction:inherit;text-align:end}
  .sx-table--cards td.wrap{max-width:none;min-width:0}
  .sx-table--cards td.chk,.sx-table--cards td:empty{display:none}
  .sx-table--cards td:first-child,.sx-table--cards td.chk+td{font-weight:var(--sx-fw-bold);color:var(--sx-text)}
  .sx-table--cards td{box-shadow:none!important}
  .sx-table--cards tfoot{padding:0 var(--sx-sp-2) var(--sx-sp-2)}
  .sx-table--cards tfoot tr{background:var(--sx-tbl-foot-bg);border-color:var(--sx-line-strong)}
}
@media (max-width:767.98px){
  .sx-app--top{padding-top:0}
  .sx-tbar{height:56px;padding:0 var(--sx-sp-1);gap:2px}
  .sx-tbar-nav,.sx-tbar .sx-search{display:none}
  .sx-tbar .sx-rb-search{display:grid}
  .sx-tbar .sx-rail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-inline-start:var(--sx-sp-2)}
  .sx-app--top .sx-main{padding-top:var(--sx-sp-4)}
}
@media (min-width:768px){.sx-drawer,.sx-drawer-scrim{display:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* ---------- print ---------- */
@media print{
  .sx-rail,.sx-top,.sx-pop,.sx-launch,.sx-pal,.sx-scrim,.sx-drawer,.no-print{display:none!important}
  .sx-app{padding:0}
  .sx-main{padding:0}
  .sx-tscroll-in{overflow:visible;max-height:none}
  .sx-table thead{display:table-header-group}
  .sx-table tr{break-inside:avoid}
}