/* Responsive layout ownership.
   This file is deliberately loaded last by both the tracker and Admin.
   Adjust phone, tablet and desktop layouts here instead of adding another
   competing breakpoint to a feature stylesheet. */

html,body{max-width:100%;overflow-x:hidden}
.top,.top>*,.top .actions,.top .actions>*,.admin-app-top,.admin-app-top>*,.admin-app-top-actions,.admin-app-main,#adminInside,#adminInside>*{min-width:0}

/* --------------------------------------------------------------------------
   PHONE — portrait and landscape share a full-width, touch-sized control row.
   -------------------------------------------------------------------------- */
@media(max-width:719px), (max-width:900px) and (orientation:landscape){
  .top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:8px max(8px,env(safe-area-inset-right)) 10px max(8px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }
  .top>.persistent-brand{
    grid-column:1!important;grid-row:1!important;
    justify-self:stretch!important;
    display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;
    align-items:center!important;gap:9px!important;
    width:100%!important;max-width:none!important;min-height:58px!important;
    margin:0!important;padding:2px 6px!important;
  }
  .top>.persistent-brand>img{width:52px!important;height:52px!important;object-fit:contain!important}
  .top>.persistent-brand>span{display:grid!important;place-items:center!important;gap:2px!important;min-width:0!important}
  .top>.persistent-brand>span img:first-child{width:min(100%,310px)!important;max-height:36px!important;object-fit:contain!important}
  .top>.persistent-brand>span img:last-child{display:block!important;width:min(88%,260px)!important;max-height:18px!important;object-fit:contain!important}
  .top>.header-profile-avatar{
    grid-column:1!important;grid-row:2!important;
    justify-self:stretch!important;align-self:center!important;
    width:100%!important;max-width:none!important;min-height:64px!important;
    margin:0!important;padding:6px 10px!important;
  }
  .top>.header-profile-avatar img{width:54px!important;height:54px!important;max-height:54px!important}
  .top>.header-sprite-quote{display:none!important}
  .top>.actions{
    grid-column:1!important;grid-row:3!important;
    justify-self:stretch!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;gap:7px!important;
    width:100%!important;max-width:none!important;min-height:44px!important;
    margin:0!important;
  }
  .top>.actions:not(:has(.admin-mode-toggle)){grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .top .actions>.admin-mode-toggle,.top .actions>.console-launch-button,.top .actions>.theme-toggle,.top .actions>#activityButton,.top .actions>.account-menu-trigger{
    grid-column:auto!important;grid-row:auto!important;
    width:100%!important;min-width:0!important;max-width:none!important;min-height:46px!important;
    margin:0!important;padding:5px!important;
    justify-content:center!important;overflow:hidden!important;
  }
  .top .actions>.admin-mode-toggle{grid-template-columns:auto!important;grid-template-rows:auto auto!important;column-gap:0!important}
  .top .actions>.admin-mode-toggle .admin-mode-indicator{display:none!important}
  .top .actions>.admin-mode-toggle strong{font-size:.61rem!important}.top .actions>.admin-mode-toggle small{font-size:.53rem!important}
  .top .actions>.console-launch-button{display:flex!important;gap:4px!important;font-size:.66rem!important;white-space:nowrap!important}
  .top .actions>.console-launch-button strong{font-size:inherit!important}
  .top .actions>.theme-toggle .theme-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  .top .actions>#activityButton{margin:0!important}
  .top .actions>.account-menu-trigger{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
  .top .actions>.account-menu-trigger .account-trigger-copy{display:block!important;min-width:0!important;overflow:hidden!important}
  .top .actions>.account-menu-trigger .account-trigger-copy strong{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.64rem!important}
  .top .actions>.account-menu-trigger .account-trigger-copy small{display:none!important}
  .content{width:calc(100% - 16px)!important;margin-inline:8px!important}
  .toolbar,.console-toolbar{grid-template-columns:minmax(0,1fr)!important}
  .toolbar>*{grid-column:1!important;min-width:0!important}

  /* Admin phone header and workspace. */
  .admin-app-top{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
    width:100%!important;padding:10px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))!important;
  }
  .admin-app-brand{width:100%!important;min-width:0!important}
  .admin-app-top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;margin:0!important}
  .admin-app-top-actions>.admin-session{grid-column:1/-1!important;width:100%!important;max-width:none!important}
  .admin-app-top-actions>.btn{width:100%!important;min-width:0!important;min-height:44px!important;margin:0!important;text-align:center!important}
  .admin-app-main{width:calc(100% - 16px)!important;max-width:none!important;margin-inline:8px!important;padding-inline:0!important}
  .admin-app-hero,.admin-overview-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .admin-isolation-badge,.admin-runtime-state{justify-self:start!important}
  #adminToolNav{width:min(360px,92vw)!important}
  #adminInside,.admin-module-grid,.admin-event-form,.admin-event-card,.admin-metric-grid,.admin-safe-actions,.admin-role-form,.admin-stat-split{grid-template-columns:minmax(0,1fr)!important}
  .admin-gate{grid-template-columns:minmax(0,1fr)!important}
  .admin-gate-mark{justify-self:start!important}
  .admin-page table{min-width:680px}
  .admin-page .table-wrap,.admin-page .admin-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Landscape phones get a shorter identity row without sacrificing controls. */
@media(max-width:900px) and (orientation:landscape){
  .top{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr)!important;grid-template-rows:auto auto!important;gap:7px 12px!important}
  .top>.persistent-brand{grid-column:2!important;grid-row:1!important;min-height:52px!important}
  .top>.persistent-brand>img{width:46px!important;height:46px!important}
  .top>.persistent-brand>span img:first-child{max-height:31px!important}.top>.persistent-brand>span img:last-child{max-height:15px!important}
  .top>.header-profile-avatar{grid-column:1!important;grid-row:1!important;min-height:54px!important}
  .top>.header-profile-avatar img{width:46px!important;height:46px!important}
  .top>.actions{grid-column:1/-1!important;grid-row:2!important}
  .admin-app-top{grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr)!important;align-items:center!important}
  .admin-app-top-actions{grid-template-columns:minmax(150px,1fr) repeat(3,minmax(110px,auto))!important}
  .admin-app-top-actions>.admin-session{grid-column:auto!important}
}

/* --------------------------------------------------------------------------
   TABLET — preserve content width and use the Admin overlay menu through 1100.
   -------------------------------------------------------------------------- */
@media(min-width:720px) and (max-width:1100px) and (orientation:portrait),
       (min-width:901px) and (max-width:1100px){
  .top{
    display:grid!important;grid-template-columns:minmax(250px,.85fr) minmax(360px,1.15fr)!important;
    grid-template-rows:auto auto!important;align-items:center!important;gap:10px 16px!important;
    min-height:0!important;height:auto!important;padding:12px 16px!important;overflow:visible!important;
  }
  .top>.header-profile-avatar{grid-column:1!important;grid-row:1!important;justify-self:stretch!important;width:100%!important;max-width:none!important;margin:0!important}
  .top>.persistent-brand{grid-column:2!important;grid-row:1!important;justify-self:stretch!important;width:100%!important;max-width:none!important;margin:0!important;padding:4px 8px!important}
  .top>.header-sprite-quote{display:none!important}
  .top>.actions{grid-column:1/-1!important;grid-row:2!important;justify-self:stretch!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;width:100%!important;max-width:none!important;margin:0!important}
  .top>.actions:not(:has(.admin-mode-toggle)){grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .top .actions>.admin-mode-toggle,.top .actions>.console-launch-button,.top .actions>.theme-toggle,.top .actions>#activityButton,.top .actions>.account-menu-trigger{grid-column:auto!important;grid-row:auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
  .content{width:calc(100% - 28px)!important;margin-inline:14px!important}

  .admin-app-top{display:grid!important;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)!important;align-items:center!important;gap:12px!important;padding-inline:16px!important}
  .admin-app-top-actions{display:flex!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important}
  .admin-app-main{width:calc(100% - 28px)!important;max-width:none!important;margin-inline:14px!important}
  #adminInside{display:block!important}
  #adminToolNav{
    position:fixed!important;z-index:90!important;inset:0 auto 0 0!important;
    width:min(360px,76vw)!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:0 var(--radius-dialog,14px) var(--radius-dialog,14px) 0!important;
    background:var(--st-surface,#0d1726)!important;box-shadow:0 0 60px rgba(0,0,0,.5)!important;
    transform:translateX(-102%)!important;transition:transform var(--duration-normal,160ms) var(--motion-ease,ease)!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  #adminToolNav.menu-open{transform:translateX(0)!important}
  #adminToolNav .admin-sidebar-modules,#adminToolNav .admin-tool-nav-actions{display:grid!important}
  .admin-nav-trigger{display:flex!important}
  .admin-nav-scrim{display:block!important}
}

/* --------------------------------------------------------------------------
   DESKTOP — stable three-column tracker header and fixed Admin navigation.
   -------------------------------------------------------------------------- */
@media(min-width:1101px){
  .top{grid-template-columns:minmax(280px,.9fr) minmax(390px,600px) minmax(430px,1.15fr)!important}
  .top>.actions{width:100%!important;max-width:560px!important;justify-self:end!important}
  .top>.header-sprite-quote{max-width:350px!important}
  #adminInside{grid-template-columns:var(--admin-nav-width) minmax(0,1fr)!important}
  .admin-nav-trigger,.admin-nav-scrim{display:none!important}
}

@media(prefers-reduced-motion:reduce){#adminToolNav,.admin-nav-scrim{transition:none!important}}

/* Mobile and tablet command clarity. */
@media(max-width:719px), (max-width:900px) and (orientation:landscape){
  .top>.actions.console-launcher-actions{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .top .actions>.admin-mode-toggle,.top .actions>.console-launch-button,.top .actions>.theme-toggle,.top .actions>#activityButton,.top .actions>.account-menu-trigger{
    min-height:60px!important;padding:6px 3px!important;border-radius:13px!important;
  }
  .top .actions>.console-launch-button,.top .actions>.theme-toggle,.top .actions>#activityButton{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:24px auto!important;place-items:center!important;gap:3px!important;
  }
  .top .actions>.console-launch-button>span,.top .actions>.theme-toggle .theme-icon,.top .actions>#activityButton>span,.top .actions>#activityButton>svg{font-size:22px!important;line-height:1!important}
  .top .actions>.console-launch-button strong,.top .actions>.theme-toggle .theme-label,.top .actions>#activityButton::after{
    display:block!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;
    color:var(--st-text-soft)!important;font-size:clamp(11px,2.8vw,14px)!important;font-weight:900!important;line-height:1.05!important;white-space:nowrap!important;
  }
  .top .actions>#activityButton::after{content:'Alerts'}
  .top .actions>.account-menu-trigger{align-content:center!important}
  .top .actions>.account-menu-trigger .account-trigger-copy::before{
    content:'Account';display:block;color:var(--st-muted)!important;font-size:clamp(10px,2.5vw,12px)!important;font-weight:850!important;line-height:1.05!important;
  }
  .top .actions>.account-menu-trigger .account-trigger-copy strong{font-size:clamp(11px,2.8vw,14px)!important}
  .top .actions>.admin-mode-toggle strong{font-size:clamp(11px,2.8vw,14px)!important}
  .top .actions>.admin-mode-toggle small{font-size:clamp(10px,2.5vw,12px)!important}
}

@media(min-width:720px) and (max-width:1100px){
  .top .actions>.theme-toggle .theme-label{display:block!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important}
  .top .actions>#activityButton{display:grid!important;grid-template-columns:auto auto!important;place-items:center!important;gap:7px!important}
  .top .actions>#activityButton::after{content:'Alerts';font-size:14px!important;font-weight:900!important}
  .top .actions>.account-menu-trigger .account-trigger-copy::before{content:'Account';display:block;color:var(--st-muted)!important;font-size:12px!important;font-weight:850!important}
}

/* Always-available mobile dock. A theme texture previously changed this
   element to position:relative and placed it after the page footer. */
@media(max-width:900px){
  body>.mobile{
    display:grid!important;position:fixed!important;z-index:120!important;inset:auto 0 0!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;
    width:100%!important;min-height:72px!important;margin:0!important;
    padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    overflow:visible!important;border:1px solid color-mix(in srgb,var(--st-border-strong) 78%,transparent)!important;border-width:1px 0 0!important;
    border-radius:18px 18px 0 0!important;background:color-mix(in srgb,var(--st-bg) 94%,transparent)!important;
    box-shadow:0 -16px 42px rgba(0,0,0,.32)!important;backdrop-filter:blur(22px) saturate(135%)!important;
  }
  body>.mobile>.mobile-nav-button,body>.mobile>.mobile-nav-more-toggle{
    display:grid!important;grid-template-rows:25px auto!important;place-items:center!important;gap:3px!important;
    width:100%!important;min-width:0!important;min-height:60px!important;margin:0!important;padding:5px 2px!important;
    border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:var(--st-muted)!important;
    line-height:1!important;white-space:nowrap!important;touch-action:manipulation;
  }
  body>.mobile>.mobile-nav-button.active,body>.mobile>.mobile-nav-more-toggle.active{
    border-color:color-mix(in srgb,var(--st-cyan) 36%,transparent)!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--st-cyan) 13%,transparent),color-mix(in srgb,var(--st-purple) 10%,transparent))!important;
    color:var(--st-text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-cyan) 10%,transparent)!important;
  }
  .mobile-nav-icon{display:grid;place-items:center;min-width:24px;min-height:24px;color:var(--st-cyan);font-size:22px;font-weight:900;line-height:1}
  .mobile-nav-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:inherit;font-size:clamp(10px,2.7vw,13px);font-weight:850;line-height:1.05}
  .content{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
  .site-footer{margin-bottom:calc(14px + env(safe-area-inset-bottom))!important}
  .mobile-nav-layer{position:fixed;z-index:119;inset:0;display:grid;align-items:end;pointer-events:none}
  .mobile-nav-layer[hidden]{display:none!important}
  .mobile-nav-scrim{position:absolute;inset:0;border:0;background:rgba(1,5,12,.68);backdrop-filter:blur(4px);pointer-events:auto}
  .mobile-nav-sheet{
    position:relative;z-index:1;max-height:min(68dvh,620px);margin:0 8px calc(80px + env(safe-area-inset-bottom));padding:16px;
    overflow:auto;pointer-events:auto;border:1px solid var(--st-border-strong);border-radius:20px;
    background:linear-gradient(155deg,color-mix(in srgb,var(--st-surface) 97%,#061020),color-mix(in srgb,var(--st-surface-2) 97%,#030915));
    box-shadow:0 22px 70px rgba(0,0,0,.52)
  }
  .mobile-nav-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
  .mobile-nav-sheet>header span{color:var(--st-cyan);font-size:12px;font-weight:950;letter-spacing:.11em}
  .mobile-nav-sheet h2{margin:3px 0 0;font-size:22px;line-height:1.05}
  .mobile-nav-close{min-height:44px;padding:8px 13px;border:1px solid var(--st-border-strong);border-radius:11px;background:var(--st-surface-2);color:var(--st-text);font-weight:850}
  .mobile-nav-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobile-nav-more-button{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;min-height:54px;padding:9px 11px;border:1px solid var(--st-border);border-radius:13px;background:var(--st-surface-2);color:var(--st-text);text-align:left}
  .mobile-nav-more-button .mobile-nav-label{font-size:14px;white-space:normal}
  body.mobile-nav-more-open{overflow:hidden}
  html.keyboard-open body>.mobile{translate:0 120%;pointer-events:none}
  html.keyboard-open .mobile-nav-layer{display:none!important}
}

@media(max-width:430px){
  .mobile-nav-more-grid{grid-template-columns:minmax(0,1fr)}
  .mobile-nav-sheet{padding:13px}
}

@media(min-width:901px){body>.mobile,.mobile-nav-layer{display:none!important}}
@media(prefers-reduced-motion:reduce){body>.mobile{transition:none!important}}


/* Compact tracker chrome: mobile and tablet keep only theme + account in the
   header. Admin mode and notifications live in the account menu; Console lives
   in the bottom dock's More sheet. Desktop remains unchanged. */
@media(max-width:1100px){
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-template-columns:56px minmax(0,220px)!important;
    justify-content:end!important;
    justify-self:end!important;
    width:min(100%,284px)!important;
    max-width:284px!important;
    min-height:52px!important;
    gap:8px!important;
  }
  .top .actions>.admin-mode-toggle,
  .top .actions>.console-launch-button,
  .top .actions>#activityButton{display:none!important}
  .top .actions>.theme-toggle{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:1fr!important;
    place-items:center!important;
    width:56px!important;
    min-width:56px!important;
    min-height:52px!important;
    padding:6px!important;
  }
  .top .actions>.theme-toggle .theme-icon{font-size:25px!important;line-height:1!important}
  .top .actions>.theme-toggle .theme-label{
    display:block!important;
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
  }
  .top .actions>.account-menu-trigger{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    width:100%!important;
    min-height:52px!important;
    padding:7px 10px!important;
  }
  .account-mobile-utilities{display:grid;gap:7px;padding:8px 0;border-bottom:1px solid var(--st-border)}
  .account-mobile-utilities[hidden]{display:none!important}
  .account-mobile-utilities>button{
    display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;
    width:100%;min-height:50px;padding:8px 10px;border:1px solid var(--st-border);border-radius:11px;
    background:var(--st-surface-2);color:var(--st-text);text-align:left
  }
  .account-mobile-utilities>button[hidden]{display:none!important}
  .account-mobile-utilities>button>span:nth-child(2){display:grid;gap:2px}
  .account-mobile-utilities>button small{color:var(--st-muted);font-size:.72rem}
  .account-mobile-utilities>button b{min-width:24px;padding:4px 6px;border-radius:999px;background:var(--st-danger,#ff5f78);color:#fff;font-size:.68rem;text-align:center}
  .account-mobile-utilities>button.is-active{border-color:#52e0a4;background:color-mix(in srgb,#52e0a4 12%,var(--st-surface-2))}
  .account-utility-icon{display:grid;place-items:center;color:var(--st-cyan);font-size:20px}
}
@media(min-width:1101px){.account-mobile-utilities{display:none!important}}
@media(max-width:900px){
  body>.mobile{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
  }
  body>.mobile>:not(.mobile-nav-button):not(.mobile-nav-more-toggle){display:none!important}
}


/* Mobile/tablet chrome v3: one compact control row, a dominant brand title,
   and explicit pointer ownership for every header and dock control. */
@media(max-width:1100px){
  .top>.persistent-brand{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    place-items:center!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .top>.persistent-brand>img{display:none!important}
  .top>.persistent-brand>span{
    display:grid!important;
    place-items:center!important;
    gap:4px!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .top>.persistent-brand>span img:first-child{
    display:block!important;
    width:min(100%,680px)!important;
    max-width:none!important;
    max-height:82px!important;
    object-fit:contain!important;
  }
  .top>.persistent-brand>span img:last-child{
    display:block!important;
    width:min(86%,470px)!important;
    max-width:none!important;
    max-height:24px!important;
    object-fit:contain!important;
  }
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    align-self:stretch!important;
    justify-self:end!important;
    align-items:stretch!important;
    grid-template-columns:54px minmax(0,220px)!important;
    width:auto!important;
    max-width:none!important;
    min-height:58px!important;
    gap:8px!important;
    pointer-events:auto!important;
  }
  .top .actions>.theme-toggle,
  .top .actions>.account-menu-trigger{
    position:relative!important;
    min-height:58px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .top .actions>.theme-toggle{width:54px!important;min-width:54px!important}
  .top .actions>.account-menu-trigger{width:100%!important;min-width:0!important;max-width:220px!important}
  #sprites>.hero{
    padding-block:14px 18px!important;
    text-align:center!important;
  }
  #sprites>.hero h2{
    margin:0!important;
    font-size:clamp(2.1rem,6.2vw,3.8rem)!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
    text-wrap:balance;
  }
  body>.mobile,
  body>.mobile>.mobile-nav-button,
  body>.mobile>.mobile-nav-more-toggle{
    pointer-events:auto!important;
  }
}

@media(max-width:719px), (max-width:900px) and (orientation:landscape){
  .top{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:8px max(8px,env(safe-area-inset-right)) 10px max(8px,env(safe-area-inset-left))!important;
  }
  .top>.persistent-brand{
    grid-column:1/-1!important;
    grid-row:1!important;
    min-height:86px!important;
    padding:4px 2px!important;
  }
  .top>.persistent-brand>span img:first-child{width:min(100%,480px)!important;max-height:64px!important}
  .top>.persistent-brand>span img:last-child{width:min(88%,350px)!important;max-height:20px!important}
  .top>.header-profile-avatar{
    grid-column:1!important;
    grid-row:2!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-height:58px!important;
    margin:0!important;
    padding:5px 8px!important;
    overflow:hidden!important;
  }
  .top>.header-profile-avatar img{width:48px!important;height:48px!important;max-height:48px!important}
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-column:2!important;
    grid-row:2!important;
    grid-template-columns:46px clamp(116px,35vw,178px)!important;
    width:auto!important;
    min-height:58px!important;
    margin:0!important;
    gap:4px!important;
  }
  .top .actions>.theme-toggle{
    align-self:center!important;
    width:46px!important;
    min-width:46px!important;
    min-height:48px!important;
    height:48px!important;
    padding:4px!important;
  }
  .top .actions>.theme-toggle .theme-icon{font-size:22px!important}
  .top .actions>.account-menu-trigger{max-width:178px!important;padding-inline:9px!important}
}

@media(min-width:720px) and (max-width:1100px) and (orientation:portrait),
       (min-width:901px) and (max-width:1100px){
  .top{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    gap:12px 14px!important;
    padding:12px 16px!important;
  }
  .top>.persistent-brand{
    grid-column:1/-1!important;
    grid-row:1!important;
    min-height:108px!important;
    padding:5px 10px!important;
  }
  .top>.header-profile-avatar{
    grid-column:1!important;
    grid-row:2!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-height:62px!important;
    margin:0!important;
  }
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-column:2!important;
    grid-row:2!important;
    grid-template-columns:56px minmax(160px,220px)!important;
    width:auto!important;
    min-height:62px!important;
    margin:0!important;
  }
  .top .actions>.theme-toggle{width:56px!important;min-width:56px!important}
}

@media(max-width:900px) and (orientation:landscape){
  .top>.persistent-brand{min-height:70px!important}
  .top>.persistent-brand>span img:first-child{max-height:50px!important}
  .top>.persistent-brand>span img:last-child{max-height:16px!important}
}


/* Dark brand clarity and compact mobile account controls. */
html:not([data-theme="light"]) :is(
  .persistent-brand>img,
  .persistent-brand>span img,
  .sidebar-brand img,
  .overview-brand-hero img
){
  filter:invert(1) hue-rotate(180deg) saturate(.72) brightness(1.08) contrast(.94)
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 8px rgba(245,241,224,.34))
    drop-shadow(0 3px 8px rgba(0,0,0,.72))!important;
}
html:not([data-theme="light"]) .persistent-brand{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.075),rgba(255,255,255,.018) 55%,transparent 78%)!important;
}

@media(max-width:1100px){
  .top>.persistent-brand{
    grid-template-columns:clamp(54px,7.5vw,76px) minmax(0,1fr)!important;
    column-gap:clamp(7px,1.4vw,14px)!important;
  }
  .top>.persistent-brand>img{
    display:block!important;
    grid-column:1!important;
    width:100%!important;
    height:auto!important;
    max-height:78px!important;
    object-fit:contain!important;
  }
  .top>.persistent-brand>span{grid-column:2!important}
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-template-columns:50px minmax(0,220px)!important;
    gap:6px!important;
  }
  .top .actions>.theme-toggle{
    width:50px!important;
    min-width:50px!important;
  }
}

@media(max-width:719px), (max-width:900px) and (orientation:landscape){
  .top>.persistent-brand{
    grid-template-columns:clamp(46px,12vw,58px) minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  .top>.persistent-brand>img{max-height:58px!important}
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-template-columns:42px clamp(116px,35vw,178px)!important;
    gap:3px!important;
  }
  .top .actions>.theme-toggle{
    width:42px!important;
    min-width:42px!important;
    height:46px!important;
    min-height:46px!important;
    padding:3px!important;
  }
  .top .actions>.theme-toggle .theme-icon{font-size:20px!important}
}

@media(min-width:720px) and (max-width:1100px){
  .top>.persistent-brand>img{max-height:72px!important}
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-template-columns:50px minmax(160px,220px)!important;
    gap:6px!important;
  }
}


/* Landscape phones keep the theme button's grid track equal to its visible width. */
@media(min-width:720px) and (max-width:900px) and (orientation:landscape){
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    grid-template-columns:42px clamp(116px,35vw,178px)!important;
    gap:3px!important;
  }
  .top .actions>.theme-toggle{
    width:42px!important;
    min-width:42px!important;
  }
}