/* cs_shell.css — member shell (dashboard_shell.php) in the unified design (SEO-FIX-259) · needs cs_ui.css (tokens) loaded before it
   the shell's own variables now point to the tokens, so pages that use var(--cs-*) follow automatically; pages with their own colours keep them until migrated */
:root{
  --cs-bg:var(--ui-bg); --cs-surface:var(--ui-card); --cs-surface-2:var(--ui-raise); --cs-surface-3:var(--ui-raise);
  --cs-border:var(--ui-hl); --cs-border-hover:var(--ui-hl2);
  --cs-cyan:var(--ui-ac); --cs-cyan-dim:color-mix(in srgb,var(--ui-ac) 14%,transparent); --cs-cyan-glow:color-mix(in srgb,var(--ui-tx) 4%,transparent);
  --cs-green:var(--ui-up); --cs-green-dim:color-mix(in srgb,var(--ui-up) 12%,transparent); --cs-red:var(--ui-dn); --cs-orange:var(--ui-warn); --cs-yellow:var(--ui-warn);
  --cs-text:var(--ui-tx); --cs-text-muted:var(--ui-tx2); --cs-text-faint:var(--ui-tx3);
  --shadow-glow:none; --radius:10px; --radius-lg:14px;
}
body{background:var(--ui-bg);background-image:none;font-family:var(--ui-font)}
/* sidebar */
#cs-sidebar{background:var(--ui-bg0);box-shadow:none}
.sidebar-logo-text .logo-name{background:none;-webkit-text-fill-color:currentColor;color:var(--ui-tx);font-weight:600}
.sidebar-logo-text .logo-sub{text-transform:none;letter-spacing:0;font-size:11px;color:var(--ui-tx3)}
.sidebar-toggle{background:none;border-color:transparent}.sidebar-toggle:hover{background:var(--ui-raise);color:var(--ui-tx);border-color:transparent}
.sidebar-user{background:var(--ui-card)}.sidebar-user:hover{background:var(--ui-raise)}
.user-avatar{background:var(--ui-raise);color:var(--ui-tx);font-weight:500}
.user-info .user-name{font-weight:500}
.user-info .user-plan{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;background:none!important;border:0!important;padding:0;color:var(--ui-ac)!important}
.nav-section-label{background:none;border:0;border-radius:0;color:var(--ui-tx3);font-weight:500;font-size:12px;letter-spacing:0;margin:16px 8px 4px;padding:0 12px}
.nav-item{font-weight:400;color:var(--ui-tx2);transition:color .15s var(--ui-ease),background-color .15s var(--ui-ease);border:1px solid transparent}
.nav-item:hover{background:var(--ui-raise);color:var(--ui-tx)}
.nav-item.active{background:var(--ui-raise);color:var(--ui-tx);border-color:transparent;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ui-tx) 5%,transparent)}
.nav-item.active .shell-icon{filter:none;color:var(--ui-ac)}
.nav-item.active::after{background:var(--ui-ac);box-shadow:none}
.nav-item-upgrade{background:none!important;border:1px solid color-mix(in srgb,var(--ui-ac) 35%,transparent)!important;color:var(--ui-ac)!important}
.nav-item-upgrade:hover{background:var(--ui-raise)!important}.nav-item-upgrade .shell-icon{color:var(--ui-ac)}
.nav-badge{background:none;color:var(--ui-tx3);font:500 10px var(--ui-mono)}
.nav-count{font-weight:600;background:var(--ui-dn)}
.nav-lock svg{width:12px;height:12px;color:var(--ui-tx3);vertical-align:middle}
.sidebar-footer-stock{background:var(--ui-card)}
.masi-label{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ui-tx3)}
.masi-value{font:500 15px var(--ui-mono);font-variant-numeric:tabular-nums}
.masi-change{font:500 11px var(--ui-mono)}
.footer-action-btn,.logout-btn{transition:color .15s var(--ui-ease),background-color .15s var(--ui-ease)}
.logout-btn:hover{background:color-mix(in srgb,var(--ui-dn) 10%,transparent)}
/* topbar */
.cs-topbar{background:var(--ui-nav);border-bottom-color:var(--ui-hl)}
.topbar-title{font-weight:600}
.topbar-btn{background:none;border-color:transparent;color:var(--ui-tx2);transition:color .15s var(--ui-ease),background-color .15s var(--ui-ease)}
.topbar-btn:hover{background:var(--ui-raise);color:var(--ui-tx);border-color:transparent}
#topbarMasi{font-family:var(--ui-mono)!important;font-variant-numeric:tabular-nums}
.topbar-notif-count{font-weight:600}
.shell-notif-panel{background:var(--ui-card);border-color:var(--ui-hl2);box-shadow:var(--ui-shadow)}
.shell-notif-header,.shell-notif-title{font-weight:600}.shell-notif-readall,.shell-notif-footer a{color:var(--ui-ac);font-weight:500}
.shell-notif-item.unread{border-right-color:var(--ui-ac);background:var(--ui-raise)}
/* tickers (the shell builds them with inline styles and its own <style> later in the page: higher specificity + !important on inline ones) */
#cs-ticker-wrap{background:var(--ui-bg0)!important;border-bottom-color:var(--ui-hl)!important}
#cs-ticker-wrap>div{border-bottom-color:var(--ui-hl)!important}
#cs-ticker-wrap>div>div:first-child{font-weight:400!important;font-size:12px!important;color:var(--ui-tx3)!important;background:var(--ui-bg0)!important;border-color:var(--ui-hl)!important}
#cs-ticker-wrap .ticker-item{font-family:var(--ui-mono);font-variant-numeric:tabular-nums;border-left-color:var(--ui-hl)}
#cs-ticker-wrap .ticker-item .t-sym{font-weight:500;color:var(--ui-tx)}
#cs-ticker-wrap .ticker-item .t-price{color:var(--ui-tx2)}
#cs-ticker-wrap .ticker-item .t-up{color:var(--ui-up)}#cs-ticker-wrap .ticker-item .t-down{color:var(--ui-dn)}
#cs-ticker-wrap .ticker-news{border-left-color:var(--ui-hl);font-size:12.5px;color:var(--ui-tx2)}
#cs-ticker-wrap .ticker-news a:hover{color:var(--ui-tx)}
#newsTicker .ticker-news>span:first-child{color:var(--ui-ac)!important;font:500 11.5px var(--ui-mono)!important}
#newsTicker [style*="#00ff9d"]{color:var(--ui-up)!important}#newsTicker [style*="#ff3b5c"]{color:var(--ui-dn)!important}
#newsTicker>span[style*="rgba(255,255,255,0.2)"]{color:var(--ui-hl2)!important}
/* shell utility classes used by pages */
.card{background:var(--ui-card);border-color:var(--ui-hl);border-radius:14px}.card:hover{border-color:var(--ui-hl)}
.badge{font-weight:500}
.btn-primary{background:var(--ui-tx);color:var(--ui-on-tx);font-weight:500;box-shadow:var(--ui-btn-hl);transition:background-color .15s var(--ui-ease),transform .12s var(--ui-ease)}
.btn-primary:hover{background:var(--ui-tx-hi);box-shadow:var(--ui-btn-hl);transform:none}.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:var(--ui-raise);border-color:var(--ui-hl);color:var(--ui-tx)}.btn-ghost:hover{border-color:var(--ui-hl2)}
.font-mono{font-family:var(--ui-mono)}
.cs-footer{background:var(--ui-bg0)}.cs-footer-links a:hover{color:var(--ui-tx)}
#sidebar-overlay{background:rgba(0,0,0,.5);backdrop-filter:none}
/* first-visit legal banner (inline styles in the shell) */
#legalBanner{background:var(--ui-card)!important;border-top:1px solid var(--ui-hl2)!important;box-shadow:var(--ui-shadow)}
#legalBanner>div{color:var(--ui-tx2)!important}
#legalBanner a{color:var(--ui-ac)!important}
#legalBanner button{background:var(--ui-tx)!important;color:var(--ui-on-tx)!important;border:0!important;border-radius:8px!important;font-weight:500!important}
/* SEO-FIX-260: numbers read left to right inside the Arabic layout (was "3.33%+", "MAD 117,9") */
#masiChg,#topbarMasiChg,#topbarMasiVal,#masiVal{direction:ltr;unicode-bidi:isolate;display:inline-block}
#cs-ticker-wrap .ticker-item{direction:ltr;unicode-bidi:isolate}
/* share button (assets/js/cs_share.js) — quiet surface instead of the cyan-to-green gradient pill */
.css-fab{background:var(--ui-card)!important;color:var(--ui-tx)!important;border:1px solid var(--ui-hl2)!important;font-weight:500!important;box-shadow:var(--ui-shadow)!important;transition:background-color .15s var(--ui-ease)}
.css-fab:hover{background:var(--ui-raise)!important}
.css-p{background:var(--ui-card)!important;border-color:var(--ui-hl2)!important;color:var(--ui-tx)!important;box-shadow:var(--ui-shadow)!important}
.css-p .t{font-weight:600!important}
/* SEO-FIX-262: light theme — the sidebar is bg0 and raise is the same tone there, so hover / active use the card surface */
html[data-theme="light"] #cs-sidebar .nav-item:hover,html[data-theme="light"] #cs-sidebar .nav-item.active,html[data-theme="light"] .sidebar-toggle:hover{background:var(--ui-card)}
html[data-theme="light"] #cs-sidebar .nav-item.active{box-shadow:0 1px 2px rgba(31,27,22,.06)}