/* console.css: the pay.u.cash CONSOLE shell chrome, extracted for the money-dapp family
   (operator 2026-09-11: every app gets the console look - sidebar/collapse/drawer).
   Source: /var/www/pay.u.cash/css/admin.css (byte-identical cdn uxc twin), extraction
   2026-09-11. THE EXTRACTION LAW: every selector is copied VERBATIM from the source so
   future admin.css evolutions stay diffable; exactly FOUR mechanical edits are applied:
     1. ancestor rename: .uxc-main / .uxc-admin -> .uxc-dapp-console (the shell wrapper
        contains ONLY the sidebar + backdrop; app content NEVER sits inside it)
     2. dark alias: .uxc-dark-mode -> html:is(.uxc-dark-mode,.dark) - the dapp
        html.light/html.dark THEME_INIT system drives both ustrap light-dark() tokens and
        the console vars with ONE class; pay can adopt later by adding .uxc-dark-mode
     3. z-index rescale (pay 999995..10000002 -> 40..46): the dapp ULINK wallet drawer
        portals at z-60 and must overlay the shell
     4. ONE-DIV DRAWER re-key (2026-09-12, operator: homepage #uxc-navdrawer-panel
        parity): the dapp shell wraps the close head row + account dashrow + nav in a
        .uxc-navdrawer panel INSIDE .uxc-sidebar (pay keeps them as flat siblings), so
        the mobile drawer rules that keyed `.uxc-sidebar > (div.uxc-nav | .uxc-nav-close
        | .uxc-drawer-dashrow ...)` now key the panel itself. Marked `/* v67 re-key */`
        at each site. Re-extraction note: redo edit 4 by hand - the wrapper rules are
        dapp-only additions on top of the pay source.
   Hard-excluded globals (collision set - must NEVER be extracted): .uxc-main * content-box,
   bare button/body font-family rules, global select option colors, page-content families.
   NOBODY edits admin.css here; re-extraction = rerun the extractor + re-apply edits. */

/* Console label typeface, scoped to the shell only (app content keeps Inter).
   Absolute chassis URLs (the uxc namespace owns the woff2 files). */
@font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.uxc-sidebar { font-family: "Uncheckout", Inter, system-ui, sans-serif; }
:root {
  --uxc-bg-primary: #ffffff;
--uxc-bg-secondary: rgba(127, 127, 127, 0.06);
--uxc-bg-tertiary: #f5f5f5;
--uxc-text-primary: var(--uc-text, #1c1a17);
--uxc-text-secondary: #6b6b6b;
--uxc-text-muted: #999999;
--uxc-border-color: #b0b0b0;
--uxc-accent: var(--uc-accent, #a37a29);
--uxc-accent-rgb: 163, 122, 41;
--uxc-error: var(--uc-danger, #c94f42);
--uxc-success: var(--uc-success, #1f9d55);
--uxc-warning: #ffc107;
--uxc-hover-bg: rgba(0, 0, 0, 0.05);
--uxc-input-bg: #ffffff;
--uxc-card-bg: #ffffff;
--uxc-shadow: rgba(0, 0, 0, 0.1);
}

.uxc-nav i:has(svg):before, .uxc-nav i.uxc-icon-bar-chart:before, .uxc-nav i.uxc-icon-settings:before, .uxc-nav i.uxc-icon-user:before, .uxc-nav i.uxc-icon-calendar:before {
content: none;
}

#uxc-theme-toggle i {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
vertical-align: middle;
}

#uxc-theme-toggle .uxc-theme-sun, #uxc-theme-toggle .uxc-theme-moon, #uxc-theme-toggle .uxc-theme-auto {
display: none;
}

#uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-sun, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-moon, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-auto {
display: block;
}

#uxc-theme-toggle .uxc-theme-label-light, #uxc-theme-toggle .uxc-theme-label-dark, #uxc-theme-toggle .uxc-theme-label-system {
display: none !important;
}

#uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-label-light, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-label-dark, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-label-system {
display: inline !important;
}

.uxc-nav-subitem {
display: flex; align-items: center; justify-content: flex-start; text-align: left; width: 100%; box-sizing: border-box; min-height: 26px; padding: 0 8px; font-size: 11.5px; color: var(--uxc-text-muted, #999); cursor: pointer; border-left: 2px solid transparent;
}

.uxc-nav-subitem::before {
content: "›"; margin-right: 7px; color: inherit; font-size: 13px; line-height: 1;
}

.uxc-nav-subitem:hover::before, .uxc-nav-subitem.uxc-active::before {
color: var(--uxc-accent);
}

.uxc-nav-subitem:hover {
color: var(--uxc-accent); background: rgba(var(--uxc-accent-rgb), 0.05);
}

.uxc-nav-subitem.uxc-active {
color: var(--uxc-accent); border-left-color: var(--uxc-accent); font-weight: 600;
}

.uxc-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 160px;
background: #ffffff;
border-left: 1px solid var(--uxc-border-color, #e6e6e6);
border-right: 1px solid var(--uxc-border-color, #e6e6e6);
z-index: 40;
display: flex;
flex-direction: column;
overflow: hidden;
}

.uxc-sidebar > div {
padding: 0;
margin: 0;
}

/* v67 re-key: the ONE-DIV drawer wrapper (.uxc-navdrawer) holds the close head row,
   the account dashrow and the nav. Desktop: transparent flex column between the pinned
   sidebar-head and sidebar-foot so the nav keeps its flex:1 scroll role. Mobile (the
   max-767 blocks below): the wrapper IS the fixed slide-in drawer panel and the rows
   inside it are static - the ONE dialog container, homepage #uxc-navdrawer-panel parity. */
.uxc-sidebar > .uxc-navdrawer {
display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}

.uxc-sidebar .uxc-logo {
display: block;
max-height: 22px;
margin: 10px 0 10px 10px;
max-width: calc(100% - 30px);
}

.uxc-sidebar .uxc-logo-icon {
display: none;
margin: 0;
height: 25px;
max-height: 25px;
}

.uxc-sidebar .uxc-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 160px;
margin: 0;
z-index: 2;
}

.uxc-nav > div {
font-weight: 400;
cursor: pointer;
line-height: 24px;
font-size: 12px;
margin: 3px 3px;
padding: 0 10px;
color: var(--uxc-text-secondary);
transition: background .15s ease, color .15s ease;
display: flex;
align-content: center;
align-items: center;
}

.uxc-nav > div:not(.uxc-nav-group) {
min-height: 32px;
}

.uxc-nav > .uxc-drawer-profile, .uxc-nav > .uxc-drawer-credit, .uxc-sidebar > .uxc-drawer-footer, .uxc-sidebar > .uxc-drawer-dashrow, .uxc-navdrawer > .uxc-drawer-dashrow {
display: none !important;
}

.uxc-nav > div:hover {
background: rgba(0,0,0,0.05); color: var(--uxc-text-primary);
}

.uxc-nav > div.uxc-active {
background: rgba(0,0,0,0.06); color: var(--uxc-text-primary); font-weight: 600;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div {
color: var(--uxc-text-secondary);
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div:hover {
background: rgba(255,255,255,0.06); color: var(--uxc-text-primary);
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active {
background: rgba(255,255,255,0.08); color: var(--uxc-text-primary);
}

.uxc-nav > div:active i {
transform: scale(0.95);
}

.uxc-nav > div > span {
color: #1a1a1a;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div > span {
color: #ffffff;
}

.uxc-nav-logout {
margin-bottom: 8px;
}

.uxc-nav i {
color: var(--uxc-text-secondary);
display: inline-block;
margin-top: 0;
margin-right: 10px;
font-size: 16px;
line-height: 0;
}

.uxc-nav i.uxc-icon-dollar {
margin-right: 12px;
}

.uxc-nav i svg {
width: 16px;
height: 16px;
vertical-align: middle;
}

.uxc-nav i.uxc-icon-shopping-cart {
margin-right: 12px;
}

.uxc-sidebar-head {
display: flex; align-items: center; justify-content: space-between; padding: 0 14px; min-height: 42px; flex: 0 0 auto; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6);
}

.uxc-sidebar > .uxc-sidebar-foot {
flex: 0 0 auto; border-top: 1px solid var(--uxc-border-color, #e6e6e6); padding: 8px;
}

.uxc-sidebar-head > div:not(.uxc-nav-collapse):not(.uxc-nav-open-btn) {
flex: 1;
}

.uxc-nav-collapse, .uxc-nav-open-btn {
background: none; border: none; cursor: pointer; color: var(--uxc-text-muted, #999); padding: 5px; display: none; align-items: center; justify-content: center; border-radius: 0; transition: color 0.2s, background 0.2s;
}

.uxc-nav-collapse {
display: flex; width: 100%; gap: 10px; justify-content: flex-start; padding: 3px; border-radius: 0; box-sizing: border-box; font-size: 14px; font-weight: 500; color: var(--uxc-text-secondary); overflow: hidden;
}

.uxc-nav-collapse-label {
font-size: 14px; white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

.uxc-nav-collapse-label .uxc-cl-expand {
display: none;
}

.uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label .uxc-cl-collapse {
display: none;
}

.uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label .uxc-cl-expand {
display: inline;
}

.uxc-nav-collapse:hover, .uxc-nav-open-btn:hover {
color: var(--uxc-text-primary); background: rgba(0,0,0,0.04);
}

.uxc-nav > #uxc-theme-toggle, .uxc-nav > .uxc-nav-logout {
display: none !important;
}

.uxc-nav-collapse svg {
transition: transform 0.25s ease;
}

.uxc-nav .uxc-nav-group {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; --uxc-grp: #6a6a6a; color: var(--uxc-text-primary); font-weight: 600; padding: 10px 14px 0; margin: 0; border-radius: 0; line-height: 7px; cursor: default;
}

.uxc-nav .uxc-nav-group:hover {
background: transparent !important; color: var(--uxc-grp) !important;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav .uxc-nav-group {
--uxc-grp: #9a9a9a; color: var(--uxc-text-primary);
}

.uxc-nav {
flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0; scrollbar-width: thin; scrollbar-color: #999 transparent;
}

.uxc-nav::-webkit-scrollbar {
width: 2px;
}

.uxc-nav::-webkit-scrollbar-button {
display: none;
}

.uxc-nav::-webkit-scrollbar-track {
background: transparent;
}

.uxc-nav::-webkit-scrollbar-thumb {
background: #999; border-radius: 3px;
}

.uxc-nav::-webkit-scrollbar-thumb:hover {
background: #777;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav {
scrollbar-color: #3a3a3a transparent;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav::-webkit-scrollbar-thumb {
background: #3a3a3a;
}

html:is(.uxc-dark-mode,.dark) .uxc-nav::-webkit-scrollbar-thumb:hover {
background: #555;
}

.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav {
scrollbar-width: thin; scrollbar-color: #999 transparent;
}

.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav::-webkit-scrollbar {
width: 2px; display: block;
}

.uxc-nav-group-items {
max-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s ease;
}

.uxc-nav-group.uxc-open + .uxc-nav-group-items {
max-height: 300px; opacity: 1;
}

.uxc-main.uxc-nav-collapsed .uxc-body {}

.uxc-main:has(.uxc-sidebar.uxc-collapsed.uxc-peek) {
--uxc-content-left: 172px;
}

.uxc-bottom {
padding-top: 50px;
}

.uxc-top:empty, .uxc-bottom:empty {
display: none !important;
}

html:is(.uxc-dark-mode,.dark) {
color-scheme: dark;
--uxc-bg-primary: #1a1a1a;
--uxc-bg-secondary: #242424;
--uxc-bg-tertiary: #2e2e2e;
--uxc-text-primary: var(--uc-text, #f3efe6);
--uxc-text-secondary: #b0b0b0;
--uxc-text-muted: #8a8a8a;
--uxc-border-color: #3d3d3d;
--uxc-accent: var(--uc-accent, #cc9933);
--uxc-accent-rgb: 204, 153, 51;
--uxc-error: var(--uc-danger, #d26565);
--uxc-success: var(--uc-success, #3fa66a);
--uxc-warning: #ffd54f;
--uxc-hover-bg: #383838;
--uxc-input-bg: #2a2a2a;
--uxc-card-bg: #242424;
--uxc-shadow: rgba(0, 0, 0, 0.3);
}

html:is(.uxc-dark-mode,.dark) .uxc-sidebar {
background: #000000;
border-right-color: var(--uxc-border-color);
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div {
color: var(--uxc-text-secondary); border-color: var(--uxc-bg-secondary);
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div:hover {
color: var(--uxc-text-primary); border-color: var(--uxc-bg-secondary);
}

html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active {
color: var(--uxc-text-primary); border-color: var(--uxc-bg-secondary);
}

html:is(.uxc-dark-mode,.dark) .uxc-bottom {
border-top-color: var(--uxc-border-color);
}

.uxc-theme-toggle-top#uxc-theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 40;
width: 20px !important;
height: 20px !important;
border: none !important;
background: transparent !important;
border-radius: 0;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.uxc-theme-toggle-top#uxc-theme-toggle i {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
}

.uxc-theme-toggle-top#uxc-theme-toggle i svg {
width: 16px !important;
height: 16px !important;
}

.uxc-nav > [data-nav-submenu].uxc-open {
display: flex;
}

@media (min-width: 768px) {
.uxc-sidebar.uxc-collapsed .uxc-nav > .uxc-nav-group {
height: 1px; min-height: 1px; padding-top: 4px; padding-bottom: 4px; margin-top: 0; margin-bottom: 0; overflow: hidden; font-size: 0; color: transparent; justify-content: center;
}
.uxc-sidebar.uxc-collapsed .uxc-nav > .uxc-nav-group::after {
content: ''; display: block; width: 20px; height: 1px; margin: 0 auto; background: var(--uxc-border-color, #e0e0e0);
}
.uxc-sidebar.uxc-collapsed .uxc-nav {
scrollbar-width: none;
}
.uxc-sidebar.uxc-collapsed .uxc-nav::-webkit-scrollbar {
display: none;
}
.uxc-sidebar.uxc-collapsed {
width: 38px; overflow: visible;
}
.uxc-sidebar.uxc-collapsed .uxc-logo {
display: none;
}
.uxc-sidebar.uxc-collapsed .uxc-logo-icon {
display: block; margin: 0 auto; height: 30px; max-height: 30px;
}
.uxc-nav-collapse .uxc-expand-ic {
display: none;
}
.uxc-sidebar.uxc-collapsed .uxc-nav-collapse .uxc-collapse-ic {
display: none;
}
.uxc-sidebar.uxc-collapsed .uxc-nav-collapse .uxc-expand-ic {
display: block;
}
.uxc-sidebar.uxc-collapsed .uxc-nav-collapse {
justify-content: center;
}
.uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label {
display: none;
}
/* Collapsed label hide (admin.css 2379-2383; v38: missing from the v35 extraction - tile
   labels rendered clipped in the 38px rail). The peek family below restores them. */
.uxc-sidebar.uxc-collapsed .uxc-nav > div > span,
.uxc-sidebar.uxc-collapsed .uxc-nav-group > span,
.uxc-sidebar.uxc-collapsed .uxc-nav-group::before { display: none; }
.uxc-sidebar.uxc-collapsed .uxc-nav > div {
justify-content: center; margin: 3px; padding: 0; min-height: 32px; height: 32px;
}
.uxc-sidebar.uxc-collapsed .uxc-nav > div > i {
margin: 0 auto; display: block;
}
.uxc-sidebar.uxc-collapsed .uxc-nav-group-items {
max-height: 300px !important; opacity: 1 !important; overflow: visible;
}
.uxc-sidebar.uxc-collapsed .uxc-sidebar-head {
overflow: hidden;
}
.uxc-sidebar.uxc-collapsed > div:not(.uxc-sidebar-foot) {
padding-left: 0;
}
.uxc-sidebar.uxc-collapsed {
transition: width .18s ease;
}
.uxc-sidebar.uxc-collapsed.uxc-peek {
width: 160px; box-shadow: 2px 0 10px rgba(0,0,0,.18); z-index: 41;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div {
width: auto; margin: 3px 3px; padding: 0 10px; min-height: 0; height: auto; justify-content: flex-start;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div:not(.uxc-nav-group) {
min-height: 32px;
}
/* Peek label restore (admin.css 2416-2419; v38: the collapsed span-hide's counterpart). */
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > span,
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-group > span { display: inline; }
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > [data-nav-submenu].uxc-open {
display: flex !important;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i {
margin: 0 10px 0 0; display: inline-block; width: 16px;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i.uxc-icon-dollar, .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i.uxc-icon-shopping-cart {
margin-right: 12px;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > .uxc-nav-group {
height: auto; min-height: 0; overflow: visible; margin: 0; font-size: 9px; color: var(--uxc-text-primary); padding: 10px 14px 0; justify-content: flex-start;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-group::after {
display: none;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-logo {
display: block;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-logo-icon {
display: none;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-collapse-label {
display: inline;
}
.uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-collapse {
justify-content: flex-start; padding: 3px;
}
.uxc-main.uxc-nav-collapsed {
--uxc-content-left: 54px;
}
.uxc-sidebar.uxc-collapsed [data-nav-submenu] {
display: none !important;
}
}

/* Desktop hide for the mobile drawer chrome (admin.css 3655; v39: the extraction carried the
   mobile re-show rules but not this base, so the drawer close X rendered on desktop. TOP-LEVEL,
   outside every media query - a v38 attempt landed inside the max-767 block and inverted). */
.uxc-nav-action, .uxc-nav-backdrop, .uxc-nav-close { display: none; }

/* Shell drawer geometry (v40, v67 re-key): the ONE panel seats directly under the 42px
   page-header top bar (its own first row IS the 42px close head) and runs to the bottom
   edge - pay's +112px stacking gap never applied to this shell. */
@media (max-width: 767px) {
.uxc-dapp-console .uxc-sidebar > .uxc-navdrawer {
top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px) + 42px);
bottom: 0; /* v60: the theme footer moved into the account dropdown (v59) - no more
   34px panel under the grid, the nav runs to the bottom edge again (v40 law) */
}
}

@media (max-width: 767px) {
.uxc-sidebar {
overflow: hidden !important;
}
.uxc-sidebar .uxc-nav {
overflow-x: hidden;
}
.uxc-sidebar .uxc-nav > div:not(#uxc-theme-toggle) span {
display: inline !important;
}
.uxc-sidebar .uxc-nav > div {
justify-content: flex-start !important;
}
.uxc-sidebar .uxc-nav > div i {
margin-right: 12px;
}
/* v66: the three .uxc-nav-open-btn rules in this pre-v45 block were written for the
   head-era burger and left UNSCOPED, so they still leaked onto the v45 page-header
   burger (width 48px !important + a border-right beating the 42px single-border cell).
   Scoped to the sidebar-head - display:none since v45, so they are inert; the
   page-header burger is styled solely by its own v45/v66 rule at the file end. */
.uxc-sidebar-head > .uxc-nav-open-btn {
display: flex !important;
}
.uxc-nav-collapse {
display: none !important;
}
.uxc-sidebar-foot {
display: none !important;
}
.uxc-sidebar .uxc-logo-icon {
margin-left: auto; margin-right: auto;
}
.uxc-sidebar {
background: #fff !important; border: none !important; z-index: 43 !important;
}
html:is(.uxc-dark-mode,.dark) .uxc-sidebar {
background: #000 !important;
}
/* v51: pay's mobile top-bar .uxc-bottom rules (admin.css 2455 + 3513-3516) DELETED.
   In pay .uxc-bottom is an EMPTY spacer (admin_code.php 275) - the functional drawer
   footer is .uxc-drawer-footer. Here .uxc-bottom is the theme row, and its mobile
   geometry is owned solely by the v47 panel at the file end. The 3513 copy carried
   left:0/right:0 !important, which pinned the v47 panel to x=0 no matter what. */
.uxc-sidebar-head > .uxc-nav-open-btn {
position: relative !important; flex: 0 0 auto !important; align-self: stretch !important; height: auto !important; width: 32px; display: flex !important; align-items: center; justify-content: center; border-radius: 0;
}
.uxc-sidebar-head > .uxc-nav-open-btn svg {
width: 16px; height: 16px;
}
.uxc-sidebar, .uxc-sidebar > div {
display: flex;
align-items: center;
justify-content: flex-start;
}
.uxc-sidebar {
bottom: auto;
right: 0 !important;
left: 0 !important;
height: 32px;
width: auto;
border: none !important;
}
.uxc-sidebar > div {
padding: 10px !important;
margin: 0;
}
.uxc-sidebar > div.uxc-nav {
padding-left: 0 !important;
padding-right: 55px !important;
display: flex !important;
justify-content: center !important;
flex: 1;
}
.uxc-sidebar .uxc-logo {
display: none;
}
.uxc-sidebar .uxc-logo-icon {
display: block;
height: 35px;
max-height: 35px;
}
.uxc-sidebar {
top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important;
}
.uxc-dapp-console .uxc-sidebar {
top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important;
}
.uxc-sidebar > .uxc-sidebar-head {
position: fixed !important; top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important; left: 0; right: 0; width: 100%; height: 32px; overflow: visible !important; z-index: 42; align-items: stretch; padding: 0 !important; background: #ffffff; box-sizing: border-box;
}
.uxc-sidebar-head:not(.uxc-ready) {
visibility: hidden;
}
html:is(.uxc-dark-mode,.dark) .uxc-sidebar-head {
background: #000000;
}
.uxc-sidebar-head > .uxc-nav-open-btn {
width: 48px !important; box-sizing: border-box; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-sidebar-head > div:first-child {
flex: 0 0 auto !important; display: flex; align-items: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0 6px 0 6px;
}
#uxc-mobile-header-slot {
flex: 1 1 0%; min-width: 0; display: flex; align-items: stretch; padding: 0; color: #2b2b2b;
}
html:is(.uxc-dark-mode,.dark) #uxc-mobile-header-slot {
color: #fff;
}
#uxc-mobile-header-slot .uxc-mobile-title {
flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; display: flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-sidebar-head > .uxc-mobile-action {
flex: 0 0 auto !important; align-self: stretch !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: auto !important; min-height: 0 !important; line-height: 1 !important; padding: 0 !important; box-sizing: border-box; border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; color: var(--uxc-text-muted, #999) !important;
}
.uxc-sidebar-head > .uxc-mobile-action svg, .uxc-sidebar-head > .uxc-mobile-action i {
width: 16px; height: 16px; font-size: 16px; display: block; margin: 0 !important; padding: 0 !important; line-height: 1; opacity: 0.8; position: relative; top: -4px;
}
.uxc-sidebar-head > .uxc-mobile-action:hover {
background: var(--uxc-hover-bg) !important; color: var(--uxc-text-primary) !important;
}
.uxc-sidebar-head > .uxc-mobile-action:hover svg, .uxc-sidebar-head > .uxc-mobile-action:hover i {
opacity: 1;
}
.uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-cmd-search-trigger"] svg {
position: relative !important; top: 0px !important; opacity: 1 !important;
}
.uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-cmd-search-trigger"] {
color: var(--uxc-text-primary, #000000) !important;
}
.uxc-sidebar-head > .uxc-nav-open-btn {
color: var(--uxc-text-primary, #000000) !important;
}
#uxc-appdrawer-host {
--ad-mut: var(--uxc-text-primary, #000000);
}
.uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-download-transitions"] svg {
position: relative !important; top: 0 !important;
}
.uxc-nav > div {
border: none !important;
width: 46px;
height: 32px;
border-radius: 0;
}
.uxc-nav > div i {
text-indent: 0;
margin: auto !important;
font-size: 25px;
}
.uxc-nav > div span {
display: none !important;
}
}

@media (max-width: 767px) {
/* v67 re-key: the ONE panel. Was `.uxc-sidebar > div.uxc-nav` carrying the whole drawer
   definition; now .uxc-navdrawer is the fixed slide-in panel and the nav is its
   scrolling grid body. Geometry (top under the page header, bottom:0) is owned by the
   v40 block above (higher specificity .uxc-dapp-console prefix). */
.uxc-sidebar > .uxc-navdrawer {
display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
position: fixed; top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px) + 112px); right: 0; bottom: 34px; width: 321px; box-sizing: border-box;
background: #ffffff; transform: translateX(100%); transition: transform 0.3s ease;
z-index: 45; overflow: hidden; padding: 0 !important; margin: 0;
box-shadow: -4px 0 24px rgba(0,0,0,0.18);
border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6);
}
html:is(.uxc-dark-mode,.dark) .uxc-sidebar > .uxc-navdrawer {
background: #000000;
}
.uxc-navdrawer > .uxc-nav {
display: grid !important;
grid-auto-rows: min-content;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-content: start;
flex: 1 1 auto; overflow-y: auto; padding: 12px 8px 0 !important;
}
/* Drawer-open transform (admin.css 3675-3678; v37 restored the family after the v35
   extraction gap; v67: ONE rule - the panel carries everything, the rows ride along. */
body.uxc-nav-open .uxc-sidebar > .uxc-navdrawer { transform: translateX(0); }
.uxc-nav > .uxc-nav-group {
grid-column: 1 / -1 !important;
}
.uxc-nav > [data-nav-submenu].uxc-open {
display: grid !important; grid-column: 1 / -1 !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; align-content: start !important; align-self: start !important; border: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important;
}
.uxc-nav > [data-nav-submenu], .uxc-nav > [data-nav-submenu]:hover {
background: transparent !important;
}
html:is(.uxc-dark-mode,.dark) .uxc-nav > [data-nav-submenu]:hover {
background: transparent !important;
}
.uxc-nav-subitem {
display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100%; box-sizing: border-box; min-height: 36px; padding: 5px 8px; font-size: 12px; line-height: 1.2; color: inherit; background: transparent; border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important;
}
.uxc-nav-subitem::before {
content: none !important; margin-right: 0 !important;
}
.uxc-nav-subitem:hover {
background: transparent !important; color: var(--uxc-accent);
}
.uxc-nav-subitem.uxc-active {
background: transparent !important; border-color: var(--uxc-text-muted, #999) !important; font-weight: 600; color: inherit;
}
html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem {
color: var(--uxc-text-secondary); border-color: var(--uxc-bg-secondary) !important;
}
html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem:hover {
color: var(--uxc-accent);
}
html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem.uxc-active {
border-color: var(--uxc-bg-secondary) !important; color: var(--uxc-text-primary);
}
.uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) {
border-color: var(--uxc-accent) !important;
}
.uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) > span, .uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) > i {
color: var(--uxc-accent) !important;
}
/* v67 re-key: the close row is the panel's HEAD row (pay's .uxc-nav-close carried
   .uxc-drawer-profile + the X; here the identity stack fills it, the X sits right).
   Static flex row - the panel owns fixed/width/transform/shadow/borders. */
.uxc-navdrawer > .uxc-nav-close {
flex: 0 0 auto; height: 42px;
display: flex !important; align-items: center; justify-content: flex-start; gap: 0;
padding: 0 !important; box-sizing: border-box;
color: var(--uxc-text-muted, #999); font-size: 15px;
background: #ffffff; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6);
}
html:is(.uxc-dark-mode,.dark) .uxc-navdrawer > .uxc-nav-close {
background: #000000;
}
/* v67 re-key: the dashrow is the panel's second row (pay's sibling fixed panel,
   admin.css 3727-3731 + its own transform - both carried by the panel now). */
.uxc-navdrawer > .uxc-drawer-dashrow {
flex: 0 0 auto; height: 40px;
display: flex !important; box-sizing: border-box; padding: 0; margin: 0;
background: #ffffff; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-navdrawer > .uxc-drawer-dashrow .uxc-drawer-dashcell:only-child {
flex: 1 1 100%;
}
html:is(.uxc-dark-mode,.dark) .uxc-navdrawer > .uxc-drawer-dashrow {
background: #000000;
}
.uxc-drawer-dashcell {
flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 0; height: 40px; padding: 0 12px; margin: 0; border: 0; background: transparent;
color: var(--uxc-text-primary, #1a1a1a); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em;
/* 9/12: title-case like the u.cash navdrawer reference (.nd-hcell sets text-transform:none
   explicitly); the caps were a pay-side parity deviation. Group headers keep their caps. */
text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.uxc-drawer-dashcell svg {
flex: none;
}
.uxc-drawer-dashcell + .uxc-drawer-dashcell {
border-left: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-drawer-dashcell:hover {
background: var(--uxc-hover-bg, rgba(0,0,0,0.05));
}
.uxc-navdrawer .uxc-nav-close > .uxc-icon-close {
flex: 0 0 42px; align-self: stretch; margin-left: auto; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--uxc-border-color, #e6e6e6); cursor: pointer; background: none; color: inherit; padding: 0;
}
.uxc-navdrawer .uxc-nav-close > .uxc-drawer-profile {
display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; align-self: stretch; padding: 0 12px; border: 0; margin: 0; text-decoration: none; color: inherit;
}
.uxc-navdrawer .uxc-nav-close > .uxc-drawer-profile:hover, .uxc-navdrawer .uxc-nav-close > .uxc-icon-close:hover {
background: var(--uxc-hover-bg, rgba(0,0,0,0.04));
}
/* v67: the identity stack inside the head row (pay's .uxc-drawer-profile-meta idiom +
   the portal avatar img pair, theme-swapped by theme.css's .uxc-logo-dark/light law).
   Signed-out renders a plain "Menu" label (homepage .nd-menu-label parity). */
.uxc-drawer-avatar {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-drawer-avatar img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.uxc-drawer-profile .uxc-drawer-profile-meta {
display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.uxc-drawer-email {
font-size: 12px; font-weight: 600; color: var(--uxc-text-primary, #1a1a1a); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:is(.uxc-dark-mode,.dark) .uxc-drawer-email {
color: #ffffff;
}
.uxc-drawer-role {
font-size: 10px; line-height: 1; color: var(--uxc-text-muted, #999); text-transform: capitalize;
}
.uxc-drawer-menulabel {
padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--uxc-text-primary, #1a1a1a);
}
html:is(.uxc-dark-mode,.dark) .uxc-drawer-menulabel {
color: #ffffff;
}
.uxc-nav > .uxc-nav-group {
width: 100%; padding: 8px 2px 0 !important; margin: 4px 0 0 !important; font-size: 9px; line-height: 12px; height: auto !important; min-height: 0 !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--uxc-text-primary);
}
.uxc-nav .uxc-nav-group::after {
display: none !important;
}
.uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) {
width: auto !important;
box-sizing: border-box;
min-height: 40px !important; border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important;
margin: 0 !important; padding: 6px 10px !important;
display: flex; flex-direction: row; align-items: center; justify-content: space-between !important; gap: 8px; text-align: center;
}
.uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) > i {
margin: 0 !important; width: 20px; height: 20px; flex: 0 0 20px;
}
.uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) > i svg {
width: 20px; height: 20px;
}
.uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) span {
display: block !important; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: right; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover {
background: var(--uxc-hover-bg, rgba(0,0,0,0.04));
}
.uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) {
background: rgba(0,0,0,0.06); border-color: var(--uxc-text-muted, #999); font-weight: 600;
}
.uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover {
background: rgba(0,0,0,0.08);
}
html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover {
background: rgba(255,255,255,0.12);
}
.uxc-nav > div.uxc-open:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) {
border-color: var(--uxc-accent) !important;
}
.uxc-nav > #uxc-theme-toggle, .uxc-nav > .uxc-nav-logout {
display: none !important;
}
.uxc-nav > #account {
display: flex !important;
}
.uxc-sidebar > .uxc-nav-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 44;
}
body.uxc-nav-open .uxc-sidebar > .uxc-nav-backdrop {
display: block;
}
.uxc-sidebar-head > #uxc-appdrawer-host {
flex: 0 0 auto !important; order: 5;
}
.uxc-sidebar-head > .uxc-nav-open-btn {
order: 6;
}
body.uxc-nav-open #una-fab-root {
display: none !important;
}
.uxc-nav > .uxc-drawer-profile {
width: auto !important;
display: flex !important; align-items: center; gap: 10px;
grid-column: 1 / -1 !important;
padding: 8px 10px !important; margin: 0 0 4px !important;
border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important;
}
.uxc-drawer-profile .uxc-drawer-profile-meta {
display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.uxc-nav > .uxc-drawer-credit {
display: block !important; grid-column: 1 / -1 !important; flex-direction: column; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; line-height: normal !important; font-size: 13px !important; border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; background: transparent !important; cursor: pointer; overflow: visible;
}
.uxc-sidebar > .uxc-drawer-footer {
position: fixed; right: 0; bottom: 0; width: 321px; height: 34px;
display: flex !important; align-items: center;
background: #ffffff; border-top: 1px solid var(--uxc-border-color, #e6e6e6);
border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6);
box-shadow: -4px 0 24px rgba(0,0,0,0.18);
padding: 0 !important; box-sizing: border-box;
transform: translateX(100%); transition: transform 0.3s ease; z-index: 46;
}
html:is(.uxc-dark-mode,.dark) .uxc-sidebar > .uxc-drawer-footer {
background: #000000;
}
.uxc-drawer-footer > .uxc-drawer-foot-item {
flex: 1 1 0; justify-content: center; min-width: 0; font-size: 12px; font-weight: 600;
}
.uxc-drawer-foot-item {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; background: transparent; color: var(--uxc-text-primary, #333); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.uxc-drawer-foot-item:hover {
background: var(--uxc-hover-bg, rgba(0,0,0,0.04));
}
.uxc-drawer-foot-icon {
flex: 0 0 44px; padding: 8px;
}
.uxc-drawer-foot-icon svg, .uxc-drawer-theme-ic svg {
display: block;
}
.uxc-drawer-footer > .uxc-drawer-foot-item + .uxc-drawer-foot-item {
border-left: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-drawer-footer .uxc-foot-k {
color: var(--uxc-text-secondary, #6b6b6b); font-weight: 600;
}
.uxc-drawer-footer .uxc-theme-v {
color: var(--uxc-text-primary, #1a1a1a); font-weight: 600;
}
.uxc-drawer-lang {
cursor: pointer; min-width: 0;
}
.uxc-drawer-lang-select {
appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--uxc-text-primary, #1a1a1a); font: inherit; font-weight: 600; padding: 0 4px 0 0; margin: 0; height: 100%; cursor: pointer; min-width: 0; max-width: 90px; text-overflow: ellipsis;
}
.uxc-drawer-lang-select:focus {
outline: none;
}
.uxc-drawer-lang-select option {
background-color: #ffffff; color: #1a1a1a;
}
html:is(.uxc-dark-mode,.dark) .uxc-drawer-lang-select option {
background-color: #2a2a2a; color: #eee;
}
}

@media (max-width: 470px) {
.uxc-nav > div {
width: 40px;
}
}

@media (max-width: 400px) {
.uxc-nav > div {
width: 40px;
}
}

@media (max-width: 440px) {
.uxc-sidebar > div {
padding: 10px 0 10px 20px !important;
}
.uxc-sidebar .uxc-logo-icon {
height: 30px;
max-height: 30px;
}
.uxc-nav > div i {
font-size: 18px !important;
}
.uxc-nav > div i svg {
width: 24px;
height: 24px;
}
.uxc-nav i.uxc-icon-shopping-cart svg {
width: 20px;
height: 20px;
}
.uxc-nav > div span {
font-size: 12px;
}
}

@media (max-width: 395px) {
.uxc-nav > div {
width: 38px;
}
}

@media (max-width: 375px) {
.uxc-nav > div {
width: 33px;
}
.uxc-nav > div i {
font-size: 20px;
}
}

@media (max-width: 340px) {
.uxc-nav > div {
width: 30px;
}
}

@media (max-width: 320px) {
.uxc-nav > div {
width: 28px;
}
.uxc-nav > div i {
font-size: 18px;
}
}

@media (max-width: 250px) {
.uxc-nav > div {
width: 22px;
}
.uxc-nav > div i {
font-size: 14px !important;
}
}

@media (max-width: 290px) {
.uxc-nav > div {
width: 22px;
}
.uxc-nav > div i {
font-size: 14px !important;
}
.uxc-nav > div i svg {
width: 16px;
height: 16px;
}
.uxc-nav i.uxc-icon-shopping-cart svg {
width: 14px;
height: 14px;
}
}

@media (max-width: 305px) {
.uxc-nav > div {
width: 26px;
}
.uxc-nav > div i {
font-size: 16px !important;
}
.uxc-nav > div i svg {
width: 18px;
height: 18px;
}
.uxc-nav i.uxc-icon-shopping-cart svg {
width: 16px;
height: 16px;
}
}

@media (max-width: 295px) {
.uxc-nav > div {
width: 23px;
}
}

@media (max-width: 275px) {
.uxc-nav > div {
width: 21px;
}
}

/* ==== dapp-shell additions (no pay counterpart) ==== */
/* Content offset: the sibling column next to the fixed sidebar. JS applies the same
   uxc-nav-collapsed/uxc-peek classes the sidebar gets, so the padding tracks the rail. */
.uxc-console-content { padding-left: var(--uxc-content-left, 172px); padding-right: 0; padding-top: 0; transition: padding-left .18s ease; }
/* v55 (operator): collapsed offset = the rail width EXACTLY (38px, flush - the
   bordered page header continues the rail's right border). pay keeps 54px (a
   16px gutter its dashboard body wants); the dapp shell's header row reads
   cleaner welded to the rail. Expanded (172 = 160 + 12 gutter) + peek unchanged. */
.uxc-console-content.uxc-nav-collapsed { --uxc-content-left: 38px; }
.uxc-console-content.uxc-peek { --uxc-content-left: 172px; }
@media (max-width: 767px) {
  .uxc-console-content { padding-left: 0; padding-top: 43px; } /* v45: 42px page-header bar + 1px border (the bar is the page header, not the sidebar head) */
}
/* Wallet cell in the sidebar head (pay's head cell is the SSO avatar; dapps are
   wallet-first) - modeled on pay's .uxc-mobile-action cell pattern. */
.uxc-sidebar-head > .uxc-head-wallet { flex: 0 0 auto !important; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 8px; order: 4; }
@media (max-width: 767px) { .uxc-sidebar-head > .uxc-head-wallet { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } }
@media (min-width: 768px) { .uxc-dapp-console .uxc-mobile-title { display: none; } }
/* ThemeSwitch chrome (the fleet header.css kit is gone on console dapps). */
.uxc-dapp-console .uxc-theme-toggle { background: none; border: none; cursor: pointer; color: var(--uxc-text-secondary); display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; line-height: 24px; }
/* Appdrawer trigger cell (v37): appdrawer.js ADOPTS the shell's pre-rendered empty
   #uxc-appdrawer-host and mounts its shadow button in place. flex:0 keeps the head's
   > div:not(...) flex:1 stretch rule from eating it; the widget renders its own 40px button. */
.uxc-dapp-console .uxc-sidebar-head > #uxc-appdrawer-host { flex: 0 0 auto; display: inline-flex; align-items: center; }
/* Page header (v42, pay .uxc-page-header idiom; operator: desktop = pay console structure):
   the SIDEBAR HEAD is logo-only (v38/v41 head-cell + collapsed-stack rules removed - the
   wallet CTA, appdrawer trigger and SSO avatar moved OUT of the sidebar), and the content
   column opens with a 42px header row: bordered title | right cluster (bordered cells:
   wallet CTA, avatar) | adopted appdrawer host - the pay dashboard-header cell look. */
.uxc-page-header {
height: 42px; display: flex; align-items: stretch; gap: 0;
border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); margin-bottom: 14px;
}
.uxc-page-header .uxc-title {
display: flex; align-items: center; padding: 0 14px;
font-weight: 600; font-size: 16px; color: var(--uxc-text-primary, #1a1a1a);
border-right: 1px solid var(--uxc-border-color, #e6e6e6);
}
/* Adopted appdrawer trigger (v64, operator: INSIDE the right cluster, immediately left
   of the avatar - Connect, apps, avatar, the wallet-first order the dapp shell documents;
   was the v44 apps-grid-outside-the-cluster order). The growing search trigger (flex:1)
   pushes the cluster to the edge; cell chrome (padding, border-left, centering) comes
   from the cluster's > * / > * + * rules below. flex:0 keeps the stretch from
   squeezing the cell. */
.uxc-page-header .uxc-page-header-right > #uxc-appdrawer-host { flex: 0 0 auto; }
.uxc-page-header .uxc-page-header-right {
display: flex; align-items: stretch;
border-left: 1px solid var(--uxc-border-color, #e6e6e6);
}
.uxc-page-header .uxc-page-header-right > * {
display: flex; align-items: center; padding: 0 10px;
}
.uxc-page-header .uxc-page-header-right > * + * {
border-left: 1px solid var(--uxc-border-color, #e6e6e6);
}
/* Compact cells so the row holds 42px (the stock .btn-primary padding overflows it). */
/* v56 (operator): the header wallet CTA is a PLAIN ACTION - no border, no box (the
   stock .btn gold border + the wallet trigger's theme-ink hover + the glow are all
   header-scoped off); icon + label stay gold in every state. The cell wraps nothing
   (padding 0); only internal horizontal padding remains so the label clears the
   row dividers. In-page wallet CTAs (page content) keep the boxed look. */
.uxc-page-header .uxc-page-header-right .uxc-head-wallet { padding: 0; }
.uxc-page-header .uxc-page-header-right .uxc-head-wallet .btn-wallet {
border: 0; background: none; border-radius: 0; color: var(--gold, #cc9933);
padding: 0 12px; font-size: 12.5px;
}
.uxc-page-header .uxc-page-header-right .uxc-head-wallet .btn-wallet.btn-wallet:hover,
.uxc-page-header .uxc-page-header-right .uxc-head-wallet .btn-wallet.btn-wallet:focus-visible {
background: none !important; color: var(--gold-2, #e6b347) !important; border-color: transparent !important;
}
.uxc-page-header .uxc-page-header-right .uxc-head-wallet .btn-wallet::after { display: none; }

/* ==== Command search (v58, operator: pay's Ctrl+K in the page header) - trigger fills the
   stretch between the title and the appdrawer cell; the palette is the pay idiom
   (admin.css 6271-6300) with dapp dark-mode (html.dark) in place of .uxc-dark-mode. ==== */
.uxc-page-header .uxc-cmd-search-trigger { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; min-width: 60px; color: var(--uxc-text-muted, #999); cursor: pointer; transition: background .15s; align-self: stretch; }
.uxc-page-header .uxc-cmd-search-trigger:hover { background: #e8e8e8; color: var(--uxc-text-primary, #333); }
html:is(.uxc-dark-mode,.dark) .uxc-page-header .uxc-cmd-search-trigger:hover { background: #262626; color: #fff; }
.uxc-cmd-search-trigger > svg { flex: 0 0 auto; }
.uxc-cmd-search-trigger > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.uxc-cmd-kbd { flex: 0 0 auto; font-family: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid var(--uxc-border-color, #ddd); border-radius: 4px; color: var(--uxc-text-muted, #999); background: rgba(0,0,0,0.03); }
html:is(.uxc-dark-mode,.dark) .uxc-cmd-kbd { background: rgba(255,255,255,0.06); }
.uxc-cmd-palette { position: fixed; inset: 0; z-index: 1000001; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.uxc-cmd-palette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; }
.uxc-cmd-palette-panel { position: relative; width: min(640px, 92vw); max-height: 60vh; background: #fff; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column; color: var(--uxc-text-primary, #1a1a1a); }
html:is(.uxc-dark-mode,.dark) .uxc-cmd-palette-panel { background: #000000; border-color: #333; }
.uxc-cmd-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); }
.uxc-cmd-input-wrap svg { flex: 0 0 auto; color: var(--uxc-text-muted, #999); }
.uxc-cmd-input-wrap input { flex: 1 1 auto; border: none; outline: none; font-size: 16px; background: transparent; color: inherit; font-family: inherit; }
.uxc-cmd-input-wrap input::placeholder { color: var(--uxc-text-muted, #999); }
.uxc-cmd-input-wrap kbd { flex: 0 0 auto; font-family: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid var(--uxc-border-color, #ddd); border-radius: 4px; color: var(--uxc-text-muted, #999); cursor: pointer; }
.uxc-cmd-results { overflow-y: auto; padding: 6px 0; }
.uxc-cmd-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--uxc-text-muted, #999); padding: 8px 16px 4px; font-weight: 600; }
.uxc-cmd-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; font-size: 14px; }
/* Palette hover = gold text/icons (no fill); the ACTIVE state keeps its fill (keyboard selection). */
.uxc-cmd-row:hover { background: transparent; color: var(--uxc-accent); }
.uxc-cmd-row:hover svg { color: var(--uxc-accent); }
.uxc-cmd-row.uxc-cmd-active { background: rgba(0,0,0,0.06); }
html:is(.uxc-dark-mode,.dark) .uxc-cmd-row.uxc-cmd-active { background: rgba(255,255,255,0.08); }
.uxc-cmd-row svg { flex: 0 0 auto; color: var(--uxc-text-muted, #999); }
.uxc-cmd-row-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uxc-cmd-type-tag { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,0.06); color: var(--uxc-text-muted, #999); }
html:is(.uxc-dark-mode,.dark) .uxc-cmd-type-tag { background: rgba(255,255,255,0.1); }
.uxc-cmd-empty { padding: 24px 16px; text-align: center; color: var(--uxc-text-muted, #999); font-size: 14px; }
/* Mobile (operator): the trigger is JUST the search icon - a 40px bordered cell in the
   fixed top bar; the span + Ctrl K kbd are hidden. */
@media (max-width: 767px) {
/* v65: the trigger owns the row's right justification on mobile - desktop grows it
   (flex:1, line above), mobile freezes it at 40px, so the auto margin is what pushes
   the trigger + right cluster + burger to the edge. (v44's margin-left:auto lived on
   the old direct-child appdrawer host rule that v64 removed; mobile had no grow to
   compensate, so the tail packed left.) */
.uxc-page-header .uxc-cmd-search-trigger { flex: 0 0 40px; min-width: 40px; padding: 0; justify-content: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); margin-left: auto; }
.uxc-page-header .uxc-cmd-search-trigger > span, .uxc-page-header .uxc-cmd-search-trigger > kbd { display: none; }
}

/* ==== Account dropdown (v59, operator: pay's #uxc-account-dropdown; the dark/light theme
   control moved INTO it - the sidebar/drawer theme row is gone). pay admin.css 6313-6341
   idiom; dark via html:is(.uxc-dark-mode,.dark). Anchored to #uxc-account-menu (the avatar
   cell, position:relative) - right-aligned under the header's last cell. ==== */
.uxc-account-dropdown { position: absolute; top: calc(100% + 6px); right: 8px; min-width: 240px; background: #fff; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.25); padding: 6px; z-index: 1000002; color: var(--uxc-text-primary, #1a1a1a); }
html:is(.uxc-dark-mode,.dark) .uxc-account-dropdown { background: #000; border-color: #333; }
.uxc-account-id { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 4px; text-decoration: none; color: inherit; border-radius: 7px; }
.uxc-account-id:hover { background: transparent; color: var(--uxc-accent); }
.uxc-account-id > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uxc-account-ext { flex: 0 0 auto; color: var(--uxc-text-muted, #999); opacity: .7; }
.uxc-account-email { font-size: 14px; font-weight: 600; color: var(--uxc-text-primary, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is(.uxc-dark-mode,.dark) .uxc-account-email { color: #fff; }
.uxc-account-role { font-size: 12px; color: var(--uxc-text-muted, #999); text-transform: capitalize; }
.uxc-account-note { padding: 4px 10px 8px; font-size: 12px; line-height: 1.45; color: var(--uxc-text-muted, #999); }
.uxc-account-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; box-sizing: border-box; color: var(--uxc-text-primary, #333); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .12s; }
.uxc-account-item:hover { background: transparent; color: var(--uxc-accent); }
.uxc-account-item:hover svg { color: var(--uxc-accent); }
html:is(.uxc-dark-mode,.dark) .uxc-account-item { color: #e0e0e0; }
html:is(.uxc-dark-mode,.dark) .uxc-account-item:hover { background: rgba(255,255,255,0.08); }
button.uxc-account-item { background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; }
.uxc-account-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.uxc-account-item .uxc-account-switch { margin-left: auto; width: 13px; height: 13px; flex-shrink: 0; color: var(--uxc-text-muted, #999); opacity: .55; }
/* v61 (operator: "proper full width buttons" + browser-language row, pay's #uxc-account-lang):
   every row stretches the panel width; the native select rides the row (pay's inline style
   set: transparent, inherit, flex:1). Options render in OS chrome - keep their text dark. */
.uxc-account-dropdown > .uxc-account-item, .uxc-account-dropdown > .uxc-account-id { width: 100%; }
.uxc-account-item.uxc-account-lang { cursor: default; }
.uxc-account-item select { background: transparent; border: none; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; flex: 1; width: 100%; padding: 0; outline: none; }
.uxc-account-item select option { color: #1a1a1a; background: #ffffff; }

/* ==== Language modal (v63, operator: the homepage u.cash language popup, in pay + send) -
   the .nd-lm-* family ported VERBATIM from the fleet navdrawer.js style block: centered
   panel over a dim backdrop, 42px head (uppercase title + bordered close), 36px rows
   "English · Native (CODE)" with the check glyph visible only on the current pick. ==== */
.nd-lm-root { position: fixed; inset: 0; z-index: 10000100; display: flex; align-items: center; justify-content: center; }
.nd-lm-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.nd-lm-panel { position: relative; display: flex; flex-direction: column; width: min(420px, 92vw); max-height: min(70vh, 560px); background: #fff; border: 1px solid #b0b0b0; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
html:is(.uxc-dark-mode,.dark) .nd-lm-panel { background: #000; border-color: #333; }
.nd-lm-head { flex: none; display: flex; align-items: stretch; height: 42px; border-bottom: 1px solid #b0b0b0; }
html:is(.uxc-dark-mode,.dark) .nd-lm-head { border-bottom-color: #333; }
.nd-lm-title { flex: 1 1 auto; display: flex; align-items: center; padding: 0 14px; font: 600 12px Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #6a6a6a; }
html:is(.uxc-dark-mode,.dark) .nd-lm-title { color: #9a9a9a; }
.nd-lm-close { flex: none; width: 42px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid #b0b0b0; background: transparent; color: #1a1a1a; cursor: pointer; }
.nd-lm-close:hover { background: rgba(0,0,0,.05); }
html:is(.uxc-dark-mode,.dark) .nd-lm-close { border-left-color: #333; color: #e4e4e4; }
html:is(.uxc-dark-mode,.dark) .nd-lm-close:hover { background: rgba(255,255,255,.08); }
.nd-lm-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #999 transparent; }
.nd-lm-list::-webkit-scrollbar { width: 2px; }
.nd-lm-list::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; }
.nd-lm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 36px; padding: 0 14px; margin: 0; border: 0; background: transparent; color: #1a1a1a; font: 500 13px Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; cursor: pointer; text-align: left; }
.nd-lm-row:hover { background: rgba(0,0,0,.05); }
.nd-lm-row svg { flex: none; color: #999; visibility: hidden; }
.nd-lm-row.nd-cur { color: var(--uxc-accent, #a37a29); font-weight: 600; }
.nd-lm-row.nd-cur svg { visibility: visible; color: var(--uxc-accent, #a37a29); }
html:is(.uxc-dark-mode,.dark) .nd-lm-row { color: #e4e4e4; }
html:is(.uxc-dark-mode,.dark) .nd-lm-row:hover { background: rgba(255,255,255,.08); }
html:is(.uxc-dark-mode,.dark) .nd-lm-row.nd-cur { color: var(--uxc-accent, #cc9528); }
html:is(.uxc-dark-mode,.dark) .nd-lm-row.nd-cur svg { color: var(--uxc-accent, #cc9528); }
/* v62: scoped to the DIRECT-child avatar button - the old `#uxc-account-menu button`
   descendant selector also matched every button INSIDE the account dropdown, crushing
   the theme row to 26px (the "broken" dropdown). */
.uxc-page-header .uxc-page-header-right .uxc-account-avatar, .uxc-page-header .uxc-page-header-right #uxc-account-menu > button { width: 26px; height: 26px; min-width: 26px; }
/* Mobile brand + far-right burger cells (v45; hidden on desktop, the sidebar head owns
   the desktop brand). */
.uxc-page-header .uxc-mobile-brand { display: none; }
.uxc-page-header > .uxc-nav-open-btn { display: none; }
@media (max-width: 767px) {
/* v45 (operator: ONE header row on mobile - no second bar): the page header becomes the
   fixed top bar [brand | title | apps | Connect | avatar | burger far right]; the
   sidebar-head is hidden and the sidebar exists only as the burger's menu drawer. */
.uxc-dapp-console .uxc-sidebar-head { display: none; }
/* The aside still forms the (now empty) 32px top strip at z-43 and would swallow clicks on
   the z-42 page-header bar; the drawer's real surfaces are its fixed children - re-enable
   those, leave the empty strip pointer-transparent. */
.uxc-dapp-console .uxc-sidebar { pointer-events: none; }
.uxc-dapp-console .uxc-sidebar > * { pointer-events: auto; }
.uxc-page-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 42;
height: 42px; margin: 0 0 0 0; background: #ffffff;
}
html:is(.uxc-dark-mode,.dark) .uxc-page-header { background: #000000; }
.uxc-page-header .uxc-mobile-brand { display: flex; align-items: center; padding: 0 6px 0 10px; }
.uxc-page-header .uxc-mobile-brand img { display: block; height: 22px; max-height: 22px; width: auto; }
.uxc-page-header .uxc-title { font-size: 15px; }
/* v66: self-sufficient (the pre-v45 head-era rules it silently borrowed on are now
   sidebar-head-scoped): 42px incl. its single left divider, 16px glyph, no radius. */
.uxc-page-header > .uxc-nav-open-btn {
display: flex !important; align-items: center; justify-content: center;
flex: 0 0 auto; align-self: stretch; height: auto; box-sizing: border-box; border-radius: 0;
width: 42px; border-left: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0;
background: none; cursor: pointer; color: var(--uxc-text-muted, #999);
}
.uxc-page-header > .uxc-nav-open-btn svg { width: 16px; height: 16px; }
}
@media (max-width: 767px) {
.uxc-page-header { margin-bottom: 10px; }
.uxc-page-header .uxc-title { font-size: 14px; padding: 0 10px; }
}
/* Shell fix: pay pins .uxc-sidebar .uxc-bottom position:fixed bottom:0, which overlays the
   .uxc-sidebar-foot collapse button (the theme label intercepts its clicks). In this shell
   the bottom bar rides the flex column instead - .uxc-nav is the flex:1 scroll region, so
   margin-top:auto seats the bar above the foot with zero overlap. */
.uxc-dapp-console .uxc-sidebar .uxc-bottom { position: static; width: auto; margin-top: auto; border-top: 1px solid var(--uxc-border-color, #e6e6e6); }
.uxc-dapp-console .uxc-theme-toggle:hover { color: var(--uxc-text-primary); background: var(--uxc-hover-bg, rgba(0,0,0,.05)); }

@media (max-width: 767px) {
/* v47 (operator: the theme row lives IN the mobile drawer, pay drawer-footer behavior):
   a 34px sliding panel pinned bottom-right under the nav grid, off-canvas with the drawer.
   v51: left is EXPLICIT viewport-relative calc (belt-and-braces after deleting pay's
   left/right !important spacers) - no over-constrained solving, no solver dependence.
   v52: pay footer read - the toggle CENTERS in the bar (pay centers its foot-items in
   flex:1 cells) and carries pay's verbatim footer shadow so the bar separates from the
   drawer body instead of reading as a detached floating pill.
   v53: padding needs !important - pay's <=440px `.uxc-sidebar > div` compensation
   (10px 0 10px 20px) is !important and the footer IS a sidebar div child, so it
   shifted the bar 20px and squeezed the 34px content box. The toggle itself gets a
   footer-scoped 34px fit (its has-mode-label padding + 24px line-height = 36px,
   which overflowed the bar). */
.uxc-dapp-console .uxc-sidebar > .uxc-bottom {
position: fixed; top: auto; left: calc(100vw - 321px); right: auto; bottom: 0; width: 321px; height: 34px; margin: 0;
display: flex; align-items: center; justify-content: center; padding: 0 !important;
background: #ffffff; border-left: 1px solid var(--uxc-border-color, #e6e6e6);
border-right: 1px solid var(--uxc-border-color, #e6e6e6); border-top: 1px solid var(--uxc-border-color, #e6e6e6);
box-shadow: -4px 0 24px rgba(0,0,0,0.18);
transform: translateX(100%); transition: transform 0.3s ease; z-index: 45;
}
.uxc-dapp-console .uxc-sidebar > .uxc-bottom .uxc-theme-toggle {
height: 34px; line-height: 34px; padding: 0 12px;
}
html:is(.uxc-dark-mode,.dark) .uxc-dapp-console .uxc-sidebar > .uxc-bottom { background: #000000; }
body.uxc-nav-open .uxc-dapp-console .uxc-sidebar > .uxc-bottom { transform: translateX(0); }
}

/* Collapsed-rail theme row (v54, operator): the ThemeSwitch label ("Dark Theme"/
   "System Theme") rendered at its intrinsic ~76px inside the 38px rail - the toggle
   spanned 118px and the label text spilled ~81px PAST the sidebar's right border
   into the content gutter (read as "too much width, a space after the collapsed
   section borders" + "it still says Dark Theme"). The rail goes icon-only centered,
   exactly like the tile labels (the v38 collapsed span-hide family); peek restores
   the label + left alignment. Guarded min-width 768: on mobile the sidebar IS the
   drawer and the v47 law (label visible at every width in the drawer footer) wins. */
@media (min-width: 768px) {
.uxc-dapp-console .uxc-sidebar.uxc-collapsed > .uxc-bottom { justify-content: center; }
.uxc-dapp-console .uxc-sidebar.uxc-collapsed > .uxc-bottom .theme-mode-label { display: none; }
.uxc-dapp-console .uxc-sidebar.uxc-collapsed.uxc-peek > .uxc-bottom { justify-content: flex-start; }
.uxc-dapp-console .uxc-sidebar.uxc-collapsed.uxc-peek > .uxc-bottom .theme-mode-label { display: inline; }
}