.control-center .hub-header{position:sticky;top:0;z-index:30;max-width:none;margin:0;background:#f4f6f8;border-bottom:1px solid #dce3ea;padding:14px max(24px,calc((100vw - 1152px)/2));display:flex;flex-wrap:nowrap;gap:12px;align-items:center;backdrop-filter:none;-webkit-backdrop-filter:none}
.control-center .hub-header .brand{min-width:0;flex:1}.control-center .hub-header .brand>span:last-child{min-width:0;overflow-wrap:anywhere}.control-center #hub-menu{display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px}
.control-center .metrics article{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:112px}.control-center .metrics span{font-weight:500}.control-center .metrics strong{font-weight:700}.control-center .site-card{text-align:center}.control-center .site-top{flex-direction:column;align-items:center}.control-center .card-links{justify-content:center}.control-center .site-detail{margin-top:16px}.control-center .heading{align-items:center}.control-center .heading h1{margin-top:0}.control-center .panel,.control-center .connection-settings{scroll-margin-top:120px}
.control-center #hub-menu-dialog{width:min(360px,calc(100vw - 32px));box-sizing:border-box;margin:auto;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);overflow:auto;padding:22px;border-radius:18px}.control-center .menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.control-center .menu-heading h2{margin:0}.control-center #close-menu{font-size:26px;border:0;background:none;padding:0;min-width:44px;min-height:44px}.control-center #account-name{overflow-wrap:anywhere;margin:10px 0 20px}.control-center #account-navigation{display:grid;gap:8px}.control-center #hub-menu-dialog nav button,.control-center #hub-menu-dialog>button{display:block;width:100%;text-align:left;min-height:46px}.control-center #hub-menu-dialog>button{margin-top:8px}.control-center #signout{color:#9c3838;border-color:#ead4d4}.control-center #hub-menu-dialog [aria-pressed=true]{background:#edf3fa;color:#315f91;font-weight:600}
.control-center #assistant-launcher{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;justify-content:center;z-index:35;background:#315f91;border-color:#315f91;color:white;min-height:52px;border-radius:999px;box-shadow:0 6px 24px #24344725;font-weight:600}.control-center main{padding-bottom:100px}
@media(max-width:600px){.control-center .hub-header{padding:12px max(16px,env(safe-area-inset-left,0px))}.control-center .hub-header .brand{font-size:13px;gap:9px}.control-center #hub-menu{font-size:12px;padding:9px 12px}.control-center #assistant-launcher{width:50px;height:50px;padding:0;right:18px}.control-center #assistant-launcher span{display:none}.control-center .hub-header .brand small{font-size:10px}}
.control-center{padding-top:0}.control-center .hub-header{padding-top:calc(14px + env(safe-area-inset-top,0px))}@media(max-width:600px){.control-center .hub-header{padding-top:calc(12px + env(safe-area-inset-top,0px))}}

/* Solid header and compact assistant controls on small screens. */
.control-center .hub-header{isolation:isolate;box-shadow:none;opacity:1}
@media(max-width:600px){.control-center #assistant-launcher{width:50px;height:50px;min-height:50px}.control-center .metrics article{min-height:96px;padding:14px}.control-center .metrics strong{font-size:1.65rem}.control-center .heading h1{font-size:1.6rem}}
/* Ethen Norton charcoal shell with the existing light cards. */
html:has(body.control-center){background:#14181f}
body.control-center{background:#14181f;color:#edf2f7}
.control-center .hub-header{background:#14181f;border-bottom-color:#303946}
.control-center .hub-header .brand{color:#edf2f7}
.control-center .hub-header .brand small{color:#b5c0ce}
.control-center .heading h1,.control-center .panel h2{color:#edf2f7}
.control-center .metrics article,.control-center .site-card,.control-center .auth-card,.control-center .connection-settings,.control-center #hub-menu-dialog{color:#243447}
.control-center .metrics article{border-color:#e0e5eb}
.control-center .site-card .quiet,.control-center .site-card .domain,.control-center .site-detail,.control-center #hub-menu-dialog .quiet{color:#5a6879}
.control-center .auth-card h1,.control-center .auth-card h2,.control-center .connection-settings h2,.control-center #hub-menu-dialog h2{color:#243447}
.control-center .auth-card .intro,.control-center .auth-card .quiet,.control-center .connection-settings .quiet{color:#5a6879}
.control-center .task{border-bottom-color:#35404e}
.control-center .task.done p{color:#b5c0ce}
.control-center .notice{background:#eaf1f8;color:#405c79}
.control-center #assistant-launcher{border:1px solid #7293b7}
/* Keep iOS system chrome outside the app's scrolling surface. */
html:has(body.control-center){height:100%;overflow:hidden;overscroll-behavior:none}
body.control-center{height:100vh;height:100dvh;max-height:100dvh;min-height:0;margin:0;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
.control-center .hub-header{position:relative;top:auto;flex:0 0 auto;width:100%;box-sizing:border-box;z-index:30;background:#14181f;backdrop-filter:none;-webkit-backdrop-filter:none}
.control-center main{flex:1 1 0;min-height:0;width:100%;max-width:1208px;margin:0 auto;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-padding-top:16px;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.control-center .panel,.control-center .connection-settings{scroll-margin-top:16px}
.control-center main>footer{padding-bottom:0}

.control-center #connection .connection-settings{margin-top:0}

body.control-center{height:var(--app-height,100dvh);max-height:var(--app-height,100dvh)}