:root{--shell-gutter:clamp(12px,2vw,28px)}
:root[data-theme=dark]{--bg:#120d14;--panel:#1d1520;--line:#423044;--muted:#b8a8b6;--text:#fbf4f8;--accent:#df4c87;--purple:#df4c87;--ui-accent:#df4c87;--ui-accent-hover:#bd3169;color-scheme:dark}
:root[data-theme=light]{--ui-accent:#199452;--ui-accent-hover:#146e3b;--text:#183f2a}
html[data-theme=dark] body{background:var(--bg);color:var(--text)}
html[data-theme=dark] header{background:var(--panel);border-color:var(--line);padding-inline:var(--shell-gutter)}
html[data-theme=dark] .panel,html[data-theme=dark] .tab,html[data-theme=dark] .metric,html[data-theme=dark] .syncCard,html[data-theme=dark] .mobileMenuPanel,html[data-theme=dark] .customerInfo{background:var(--panel);border-color:var(--line);color:var(--text)}
html[data-theme=dark] button,html[data-theme=dark] .button,html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme=dark] button:hover,html[data-theme=dark] .button:hover{background:color-mix(in srgb,var(--ui-accent) 12%,var(--panel));color:var(--text)}
html[data-theme=dark] .primary,html[data-theme=dark] button.primary,html[data-theme=dark] #keys .ok,html[data-theme=dark] .segmented .active{background:var(--ui-accent);border-color:var(--ui-accent);color:white}
html[data-theme=dark] .primary:hover{background:var(--ui-accent-hover);color:white}
html[data-theme=dark] nav a,html[data-theme=dark] .identity span{color:var(--text)}
html[data-theme=dark] nav a.active{background:color-mix(in srgb,var(--ui-accent) 15%,var(--panel));color:var(--ui-accent)}
html[data-theme=dark] .muted,html[data-theme=dark] .note,html[data-theme=dark] label,html[data-theme=dark] dt,html[data-theme=dark] th,html[data-theme=dark] .tabbody p,html[data-theme=dark] .listrow span,html[data-theme=dark] .stats small{color:var(--muted)}
html[data-theme=dark] .brand{color:var(--text)}html[data-theme=dark] .brand span{color:var(--ui-accent)}
html[data-theme=dark] .playtab,html[data-theme=dark] .playtab b{color:var(--text);background:var(--panel);border-color:var(--line)}
html[data-theme=dark] .playtab.active,html[data-theme=dark] .playtab.active b{background:color-mix(in srgb,var(--ui-accent) 12%,var(--panel));border-color:var(--ui-accent);color:var(--text)}
html[data-theme=dark] .playtab small,html[data-theme=dark] .tabvisual small{color:var(--muted)}
html[data-theme=dark] .tabvisual{background:radial-gradient(ellipse,color-mix(in srgb,var(--ui-accent) 12%,transparent),transparent 75%)}
html[data-theme=dark] .tabhead,html[data-theme=dark] .tabbody,html[data-theme=dark] td,html[data-theme=dark] th,html[data-theme=dark] .listrow{border-color:var(--line)}
html[data-theme=dark] .stats>div{background:color-mix(in srgb,var(--ui-accent) 7%,var(--panel));color:var(--text)}
html[data-theme=dark] .syncCard.syncMain,html[data-theme=dark] canvas,html[data-theme=dark] .reference{border-color:var(--ui-accent)}
html[data-theme=dark] .down{background:var(--ui-accent-hover)!important;color:white!important}
html[data-theme=dark] :focus-visible{outline-color:var(--ui-accent)}
header .brand{order:0}header #userNav{order:1}header .identity{order:2}header>.themeToggle{order:3}header>#logout,header>#adminLogout{order:4}
header>#logout{flex:none;margin-left:4px}header .mobileMenu{order:5}
.customerIdentity>summary{list-style:none;display:grid!important;place-items:center;width:42px;height:42px;padding:0!important;border:1px solid var(--line);border-radius:50%;cursor:pointer}
.customerIdentity>summary::-webkit-details-marker{display:none}.customerIdentity>summary::after{display:none!important}
.customerIdentity #email{display:none!important}.customerIdentity .customerAvatar{display:grid!important;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--ui-accent) 15%,var(--panel));color:var(--ui-accent)}
.customerAvatar svg{width:24px;height:24px}.customerInfo{text-align:left}
.openViewer{width:100%;flex:0 0 100%!important;min-height:42px}
body.is-playing main,body.is-sync main{width:100%;max-width:none;padding-left:var(--shell-gutter)!important;padding-right:var(--shell-gutter)!important}
body.is-sync .syncLayout{align-items:stretch;gap:14px}
body.is-sync .syncPrimary,body.is-sync .syncKeyboard{height:auto;margin-bottom:0!important;box-sizing:border-box;min-width:0;align-self:stretch!important}
body.is-sync .syncPrimary{display:flex;flex-direction:column}body.is-sync .syncPrimary .syncCard{flex:1}
body.is-sync .syncKeyboard{display:flex;flex-direction:column}body.is-sync .syncKeyboard>.note{margin-top:auto;padding-top:18px}
.syncNumberToggle{display:none!important}.syncKeys [data-sync-number="true"]{display:none!important}.sync-numbers .syncKeys [data-sync-number="true"]{display:block!important}
.syncKeys .iconKey{display:grid!important;place-items:center}.syncKeys .iconKey svg{width:27px;height:27px}.syncKeys button[aria-label="▲"] svg,.syncKeys button[aria-label="▼"] svg,.syncKeys button[aria-label="◀"] svg,.syncKeys button[aria-label="▶"] svg{width:29px;height:29px}
.syncKeys,.syncKeys *,#keys,#keys *,#screen{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.syncKeys button{touch-action:none}
.vpsHeader .brand{order:0}.vpsHeader .backAdmin{order:1}.vpsHeader>span{order:2;flex:1}.vpsHeader .billingLink{order:3}.vpsHeader #addServer{order:3}.vpsHeader .themeToggle{order:4}
html[data-theme=dark] header .brand{color:#fff}
@media(min-width:1051px){body.is-sync .syncLayout{grid-template-columns:minmax(0,1fr) minmax(340px,500px) 260px}}
@media(max-width:760px){header.customerHeader .mobileMenu{order:5}.mobileMenuPanel .customerIdentity>summary{margin:auto}.mobileMenuPanel .customerIdentity .customerAvatar{display:grid!important}.vpsHeader{flex-wrap:wrap}.vpsHeader .brand{flex:1}.vpsHeader .backAdmin{font-size:12px}body.is-playing main,body.is-sync main{padding-inline:12px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

.syncKeys button[aria-label="C · Xóa"]{grid-column:1/-1}

/* Layout is shared; the existing light palette remains in theme.css. */
header{padding-inline:var(--shell-gutter)}

/* Equal, centered control contents; fixed padding around header actions. */
button,.button{box-sizing:border-box}
.accountAdminHeader .mobileMenuPanel a,.accountAdminHeader .mobileMenuPanel button{display:flex!important;align-items:center;justify-content:center;text-align:center;min-height:42px;width:100%;padding:10px 14px!important;line-height:1.3;margin:0}
.mobileMenuPanel{gap:8px}
.vpsHeader #addServer{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;min-width:116px;padding:10px 16px!important;line-height:1.3!important;white-space:nowrap}
.vpsHeader .backAdmin,.vpsHeader .billingLink{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:42px;padding:10px 16px;line-height:1.3}
.syncKeys button{display:flex;align-items:center;justify-content:center;line-height:1.2}
@media(max-width:760px){.vpsHeader #addServer[data-mobile-icon]{min-width:42px;width:42px;padding:0!important}}

/* The footer stays outside the mobile game surface, including while typing. */
@media(max-width:760px){body.is-playing>footer{display:none}body.is-playing main{min-height:100svh}}