/* Same shared controls and DOM nodes across menus; resize never resets state. */
.variant-workspace{container-name:huplix-shell;container-type:inline-size}
html[data-nav-variant=b] .variant-workspace>.topbar{display:flex;flex-wrap:wrap;gap:12px;margin:0;width:100%;padding:12px 20px;min-width:0;box-sizing:border-box;position:relative}
html[data-nav-variant=b] .variant-workspace .header-controls{display:flex;flex:1 1 700px;flex-wrap:wrap;gap:8px;min-width:0;width:auto;margin-left:auto;align-items:center}
html[data-nav-variant=b] .header-controls .search-wrap{display:flex;flex:1 1 180px;min-width:140px;min-height:44px;max-width:none;width:auto;box-sizing:border-box}
.header-controls .search-wrap input{min-width:0;width:100%}
html[data-nav-variant=b] .header-controls :is(select,button){min-height:44px;max-width:100%}
html[data-nav-variant=b] .header-controls>select{flex:0 1 150px;min-width:120px}
html[data-nav-variant=b] .header-controls>.user-menu{display:block;position:relative;margin-left:0;flex:0 0 auto}
html[data-nav-variant=b] .header-controls #userMenuBtn{display:flex;min-width:44px;min-height:44px;justify-content:center}
html[data-nav-variant=b] .header-controls .user-menu-dropdown{right:0;left:auto;max-width:min(280px,calc(100vw - 32px))}
html[data-nav-variant=b] .header-controls #addBtn{white-space:nowrap}
.header-controls :focus-visible,.auth-card :focus-visible,.security-history-controls :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@container huplix-shell (max-width:1000px){
  html[data-nav-variant=b] .ap-workspace-title{flex:1 0 100%}
  html[data-nav-variant=b] .variant-workspace .header-controls{flex-basis:100%;justify-content:flex-start}
  html[data-nav-variant=b] .header-controls .search-wrap{flex:1 0 100%;width:100%;min-width:0}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn{width:44px;min-width:44px;flex:0 0 44px;padding:8px}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn .ap-theme-label{display:none}
}
@container huplix-shell (max-width:520px){
  html[data-nav-variant=b] .variant-workspace>.topbar{padding:12px}
  html[data-nav-variant=b] .variant-workspace .header-controls{gap:6px}
  html[data-nav-variant=b] .header-controls>select{flex:1 1 calc(50% - 8px);min-width:0;width:calc(50% - 8px)}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn{width:44px;min-width:44px;flex:0 0 44px}
  html[data-nav-variant=b] .header-controls #themeTopbarBtn .ap-theme-label{display:none}
  html[data-nav-variant=b] .header-controls #refreshBtn{flex:1 1 84px;min-width:84px;padding:8px 6px}
  html[data-nav-variant=b] .header-controls #addBtn{flex:1 1 92px;min-width:92px;padding:8px 6px}
}
.auth-card[hidden],.auth-card form[hidden],.auth-picker[hidden]{display:none!important}
.auth-card{max-width:min(460px,calc(100vw - 32px));box-sizing:border-box}
.auth-card h1{letter-spacing:-.035em}
.auth-card a{color:var(--blue)}
.security-history-controls{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;align-items:end}
.security-history-controls label{display:grid;gap:6px;min-width:130px;font-size:13px}
.security-history-controls :is(input,select){font:inherit;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);min-height:44px}
.security-history-list{display:grid;gap:8px;margin:12px 0}
.security-history-row{display:grid;gap:6px;padding:14px;border:1px solid var(--border);border-radius:8px;overflow-wrap:anywhere}
.security-history-row small{color:var(--muted);line-height:1.5}