:root[data-theme=light]{color-scheme:light;--bg:#f6faf7;--panel:#fff;--card:#fff;--line:#d5e7db;--muted:#587565;--green:#168747;--accent:#e85e96}
html[data-theme=light] body{background:#f6faf7;color:#183f2a}
html[data-theme=light] header,html[data-theme=light] .panel,html[data-theme=light] .metric,html[data-theme=light] .server,html[data-theme=light] dialog,html[data-theme=light] aside{background:#fff;color:#183f2a;border-color:#d5e7db}
html[data-theme=light] button,html[data-theme=light] .button,html[data-theme=light] input,html[data-theme=light] select{background:#fff;color:#245337;border-color:#c8dfcf}
html[data-theme=light] .primary,html[data-theme=light] .ok{background:#199452;color:#fff;border-color:#199452}
html[data-theme=light] .tab,html[data-theme=light] .tabvisual{background:linear-gradient(145deg,#fff,#eef8f0);color:#183f2a}
html[data-theme=light] nav a,html[data-theme=light] .identity span{color:#376347}
html[data-theme=light] nav a.active,html[data-theme=light] .segmented .active{background:#fde8f0;color:#a72c5d}
html[data-theme=light] .brand span,html[data-theme=light] .eyebrow,html[data-theme=light] .tabvisual strong{color:#df4c87}
.themeToggle{white-space:nowrap;font-size:12px}.resourceinfo{font-weight:700;color:var(--green)}

html[data-theme=light] .brand{color:#168747!important}
.tabvisual{display:flex;flex-direction:column;gap:8px;height:230px;background:radial-gradient(ellipse at center,#534b8044,transparent 80%)}.tabvisual>strong{font-size:48px;letter-spacing:-2px}.tabvisual>small{font-size:11px;letter-spacing:1px}.tabhead{min-height:44px;gap:8px}.tabhead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabbody .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tabbody .actions .primary{grid-column:1/-1}.tabbody .actions button{white-space:nowrap;min-width:0;min-height:42px;padding:8px;font-size:12px}.leasebadge{display:block;font-size:11px;padding:7px;background:#16874722;color:var(--green);border-radius:8px}.tabbody{overflow-wrap:anywhere}.tabbody>button{width:100%;min-height:44px}.illustration{pointer-events:none}
@media(max-width:700px){header{display:flex!important;flex-wrap:wrap;gap:10px;padding:12px!important}header .brand{font-size:19px;flex:1}header nav{display:flex;gap:6px;flex:0 0 100%;overflow-x:auto;flex-wrap:nowrap}header nav a,header nav button{display:flex!important;align-items:center;justify-content:center;white-space:nowrap;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;flex-shrink:0}#guestNav{flex:0 1 auto;order:0}header .identity{width:100%;display:flex;gap:8px}header .identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}.themeToggle{padding:7px!important;min-height:38px}.tabs,.tabs.large,.tabs.small{grid-template-columns:repeat(2,minmax(0,1fr))}.tabvisual{height:180px}.tabhead{font-size:10px;flex-wrap:wrap;padding:10px}.tabbody{padding:12px}.tabbody .actions{grid-template-columns:1fr}.tabbody .actions button{font-size:12px}.tabvisual>strong{font-size:40px}.createbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.createbar input,.createbar button{grid-column:1/-1}.createbar select{min-width:0!important;width:100%}.homehero .actions button{min-height:44px;white-space:nowrap}.summary{grid-template-columns:1fr 1fr}.homefeatures{grid-template-columns:1fr}.tablewrap{max-width:100%;overflow-x:auto}}
@media(max-width:360px){.tabs,.tabs.large,.tabs.small{grid-template-columns:1fr}}

html[data-theme=dark]{color-scheme:dark;--bg:#0e0a18;--panel:#191124;--card:#191124;--line:#30223f;--muted:#b49dc9;--green:#66e4b1;--accent:#8751ed}
html[data-theme=light] .playtab,html[data-theme=light] .playtab b{background:#fff;color:#245337;border-color:#c8dfcf}
html[data-theme=light] .playtab.active,html[data-theme=light] .playtab.active b{background:#e7f5eb;color:#146e3b;border-color:#199452}
html[data-theme=light] .playtab small,html[data-theme=light] label,html[data-theme=light] .note,html[data-theme=light] .muted,html[data-theme=light] .panel label,html[data-theme=light] dt,html[data-theme=light] th,html[data-theme=light] .listrow span{color:#587565}
html[data-theme=light] .panel input,html[data-theme=light] .panel select,html[data-theme=light] .panel textarea{background:#fff;color:#183f2a;border-color:#c8dfcf}
html[data-theme=light] .stats>div{background:#edf7f0;color:#183f2a}
html[data-theme=light] .stats small,html[data-theme=light] header b span{color:#587565}
html[data-theme=light] #status{color:#168747}
html[data-theme=light] .badge.running,html[data-theme=light] .positive{color:#168747}
html[data-theme=light] .drop,html[data-theme=light] .preline{color:#587565;border-color:#c8dfcf}
html[data-theme=light] button:hover{background:#e7f5eb;color:#183f2a}
html[data-theme=light] #toast{background:#e7f5eb;color:#183f2a;border-color:#199452}
html[data-theme=light] td,html[data-theme=light] th,html[data-theme=light] .listrow{border-color:#d5e7db}
html [hidden],html[data-theme=light] [hidden],html[data-theme=dark] [hidden]{display:none!important}

.mobileMenu{display:none}.tabbody p,.tabbody h3,.tabhead b,.listrow b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.tabbody{min-width:0}.listrow>div{min-width:0;flex:1}button,summary{-webkit-tap-highlight-color:transparent}
@media(max-width:760px){header{position:sticky;top:0;z-index:20;min-height:56px;align-items:center!important;gap:6px!important}header .brand{order:0;flex:1!important;white-space:nowrap}header button[data-mobile-icon]{font-size:0!important;min-width:40px;width:40px;height:40px;padding:0!important;display:inline-grid;place-items:center}header button[data-mobile-icon]::before{content:attr(data-mobile-icon);font-size:22px}header .identity{width:auto!important;margin:0!important;order:1}header .identity span{display:none!important}header .themeToggle{order:2}.mobileMenu{display:block;order:3;position:relative}.mobileMenu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;font-size:22px}.mobileMenu summary::-webkit-details-marker{display:none}.mobileMenuPanel{position:absolute;right:0;top:48px;width:230px;max-width:85vw;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel,#191124);box-shadow:0 12px 35px #0003;display:flex;flex-direction:column;gap:8px}.mobileMenuPanel a,.mobileMenuPanel b{display:block;padding:12px;border-radius:8px;text-decoration:none;color:inherit;border:1px solid var(--line);font-size:14px}.mobileMenuPanel #balance::before{content:'Số dư: ';font-weight:normal}body:not([data-authenticated=true]) .mobileMenuPanel #balance,body:not([data-authenticated=true]) .mobileMenuPanel a[href^="#"]{display:none!important}header nav#userNav{order:4;flex:0 0 100%;width:100%;margin:0}header.is-scrolled nav,header.is-scrolled #guestNav,header.is-scrolled .identity,header.is-scrolled>.themeToggle{display:none!important}header.is-scrolled{padding:6px 12px!important}.summary strong{font-size:20px;overflow-wrap:normal}.tabbody p{font-size:11px}.intro button{white-space:nowrap}.player iframe{max-width:100%}}
body:not([data-authenticated=true]) .mobileMenuPanel .menuLogout{display:none}

@media(max-width:760px){button[data-mobile-icon]{font-size:0!important;min-width:42px;width:42px;height:42px;padding:0!important;display:inline-grid;place-items:center}button[data-mobile-icon]::before{content:attr(data-mobile-icon);font-size:22px}input,select,textarea{font-size:16px!important}.mobileMenuPanel .scrollMenuLink{display:block}}

.customerHeader .mobileMenu,.accountAdminHeader .mobileMenu{display:block}.mobileMenu{position:relative}.mobileMenu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;font-size:22px}.mobileMenu summary::-webkit-details-marker{display:none}.mobileMenuPanel{position:absolute;right:0;top:46px;z-index:40;width:230px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #0003;display:grid;gap:8px}.mobileMenuPanel a,.mobileMenuPanel button,.mobileMenuPanel b{display:block;color:inherit;text-decoration:none;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px!important}.slotnotice{padding:15px;background:#fcebbf;color:#5b4211;border-radius:12px}.slotnotice a{font-weight:700;color:#196c3c}.accountAdminHeader{display:flex;flex-wrap:nowrap!important;align-items:center!important}.accountAdminHeader nav{flex:1!important;width:auto!important;order:0!important;overflow:visible}.accountAdminHeader .brand{flex:0 0 auto!important}.accountAdminHeader nav a{padding:7px;font-size:12px}
@media(max-width:760px){#userSummary{display:none!important}header.customerHeader nav,header.customerHeader .identity{display:none!important}header.customerHeader{flex-wrap:nowrap!important}.customerHeader .mobileMenu,.accountAdminHeader .mobileMenu{order:4}.accountAdminHeader{gap:5px!important}.accountAdminHeader .brand{font-size:14px!important}.accountAdminHeader nav{display:flex!important;flex-wrap:nowrap!important;gap:3px}.accountAdminHeader nav a{font-size:10px!important;min-height:34px;padding:5px!important}.accountAdminHeader .themeToggle{width:34px!important;min-width:34px!important}.is-playing header.customerHeader{position:static}.is-playing .playlayout aside{display:block;padding:8px}.is-playing #playTabs{display:flex}#createTab button{white-space:nowrap}}
header nav:empty{display:none!important}
header nav:empty{display:none!important}
header nav:empty{display:none!important}

header{position:relative}@media(max-width:760px){header{position:sticky;top:0}}.mobileMenu{position:static!important;margin-left:auto;flex-shrink:0}.mobileMenuPanel{right:8px!important;left:auto!important;top:calc(100% + 4px)!important;max-width:calc(100vw - 16px)!important;box-sizing:border-box;max-height:calc(100dvh - 80px);overflow-y:auto}.mobileMenu[hidden]{display:none!important}.mobileMenu:not([open])>.mobileMenuPanel{display:none!important}.mobileMenuPanel a,.mobileMenuPanel button{width:100%;box-sizing:border-box}@media(max-width:760px){.accountAdminHeader .brand{flex:1!important}}

.syncTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:16px 0}.syncTools select{width:auto}.syncLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,370px) 260px;gap:16px;align-items:start}.syncList{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.syncCard{width:var(--sync-preview,230px);max-width:100%;border:2px solid var(--line);border-radius:12px;padding:6px;overflow:hidden;background:var(--panel)}.syncCard.syncMain{width:100%;border-color:#8751ed}.syncCardHead{display:flex;align-items:center;gap:6px}.syncCardHead label{margin:0}.syncCardHead input{accent-color:#8751ed}.syncCardHead button{border:0;background:transparent;padding:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.syncCard iframe{display:block;width:100%;aspect-ratio:3/4;border:0;margin-top:6px}.syncCard small{font-size:11px}.syncPrimary{margin:0!important;min-width:0}.syncKeyboard{margin:0!important}.syncKeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.syncKeys button{min-height:46px;padding:6px;touch-action:none;font-size:12px}#syncWorkspace>input{width:100%;font-size:16px;margin-bottom:12px}@media(max-width:1050px){.syncLayout{grid-template-columns:minmax(0,1fr) 280px}.syncList{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto}.syncList .syncCard{flex:0 0 180px}.syncPrimary{grid-column:1}}@media(max-width:600px){.syncLayout{display:flex;flex-direction:column}.syncList,.syncPrimary,.syncKeyboard{width:100%}.syncPrimary .syncCard{max-width:330px;margin:auto}.syncTools{justify-content:flex-start}.syncKeyboard{padding:12px}.syncKeys button{min-height:42px}.syncList .syncCard{flex-basis:150px}}

/* Use the available viewport for the remote synchronization workspace. */
body.is-sync main{max-width:none;width:100%;padding-left:10px;padding-right:10px;box-sizing:border-box}
body.is-sync .syncLayout{gap:12px}
body.is-sync .syncList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sync-preview,230px)),1fr));gap:12px;align-content:start;min-width:0}
body.is-sync .syncList .syncCard{width:100%;min-width:0;box-sizing:border-box}
@media(min-width:1051px){body.is-sync .syncLayout{grid-template-columns:minmax(0,1fr) clamp(280px,21vw,370px) 260px}}
@media(min-width:601px) and (max-width:1050px){body.is-sync .syncList{overflow:visible;grid-column:1/-1}}
@media(max-width:600px){body.is-sync main{padding-left:8px;padding-right:8px}body.is-sync .syncList{display:flex;overflow-x:auto;flex-wrap:nowrap}body.is-sync .syncList .syncCard{width:150px;flex:0 0 150px}}

body.is-sync .syncList{grid-auto-flow:row;grid-auto-rows:max-content}.syncCard.jar-hover{outline:3px dashed #54dbad;outline-offset:2px}

body.host-viewer-full{overflow:hidden}body.host-viewer-full>header{display:none!important}body.host-viewer-full #playPage>.playlayout>aside{display:none!important}body.host-viewer-full #gameFrame{position:fixed;inset:0;width:100vw!important;height:100dvh!important;z-index:1000;background:var(--bg);border-radius:0!important}
@media(max-width:760px){body.is-playing main{padding:8px}body.is-playing #playTabs{overflow-x:auto;flex-wrap:nowrap}body.is-playing .playtab{flex:0 0 auto;min-width:100px;max-width:170px}body.is-playing .playtab b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

.syncNumberToggle{display:none}
@media(max-width:600px){body.is-sync .syncPrimary{order:1;padding:8px}body.is-sync .syncKeyboard{order:2;padding:8px}body.is-sync .syncList{order:3}body.is-sync .syncPrimary .syncCard{max-width:380px}body.is-sync .syncKeyboard>.note{display:none}.syncNumberToggle{display:block;margin:0 0 8px auto}.syncKeys [data-sync-number="true"]{display:none}.sync-numbers .syncKeys [data-sync-number="true"]{display:block}.syncKeys button{min-height:46px}.syncPrimary h2{font-size:14px}}

/* Fit complete cards in each row; no partially hidden horizontal cards. */
body.is-sync .syncList{overflow:visible;grid-auto-flow:row;grid-auto-rows:max-content}
@media(max-width:600px){body.is-sync .syncList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,144px),1fr));gap:8px;overflow:visible}body.is-sync .syncList .syncCard{width:100%;min-width:0;max-width:100%;flex:none}.syncTools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}.syncTools>span{grid-column:1/-1;font-size:12px}.syncTools button,.syncTools select{width:100%;min-width:0;white-space:nowrap;font-size:12px;padding:8px 4px;margin:0;min-height:38px}.syncCardHead>a{flex:0 0 auto}.syncCardHead button{min-width:0}}
@media(min-width:1051px) and (min-height:800px){body.is-sync .syncPrimary,body.is-sync .syncKeyboard{position:sticky;top:86px;align-self:start}}

/* Compact monochrome theme switch. */
header .themeToggle{position:relative!important;display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 50px;width:50px!important;height:30px!important;min-height:30px!important;padding:3px 5px!important;border:1.5px solid currentColor!important;border-radius:999px!important;background:transparent!important;color:inherit;line-height:1;overflow:hidden;gap:5px}
.themeToggle .themeSun{font:18px/1 Arial,"Segoe UI Symbol",sans-serif;display:grid;place-items:center;width:18px;height:20px}
.themeToggle .themeKnob{position:absolute;right:4px;top:4px;width:19px;height:19px;border:1.5px solid currentColor;border-radius:50%;background:transparent}
html[data-theme=dark] .themeToggle{background:#090909!important;color:#fff!important}
html[data-theme=dark] .themeToggle .themeKnob{background:#fff}
.customerIdentity summary{display:flex!important;align-items:center;gap:9px;min-height:42px;padding:6px 12px!important;white-space:nowrap}
.customerAvatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:#8751ed22;color:inherit;overflow:hidden}
.customerAvatar svg{width:23px;height:23px}

header .themeToggle::before,.viewerMenuPanel .themeToggle::before{content:none!important;display:none!important}header>.themeToggle{padding:3px 5px!important;min-height:30px!important}.customerIdentity summary #email{white-space:nowrap;line-height:1.3}

/* Sliding monochrome switch with space between sun and knob. */
header .themeToggle,.viewerMenuPanel .themeToggle{width:56px!important;flex-basis:56px!important;height:30px!important;min-height:30px!important;padding:3px 5px!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.themeToggle .themeSun{position:absolute;left:5px;top:5px;width:18px;height:18px;transition:transform .28s ease;z-index:1}
.themeToggle .themeSun svg{display:block;width:18px;height:18px}
.themeToggle .themeKnob{left:4px;right:auto;top:4px;width:19px;height:19px;background:currentColor;transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1),background-color .25s ease;z-index:2}
html[data-theme=light] .themeToggle .themeSun{transform:translateX(26px)}
html[data-theme=dark] .themeToggle .themeSun{transform:translateX(0)}
html[data-theme=dark] .themeToggle .themeKnob{transform:translateX(27px);background:#fff}
@media(prefers-reduced-motion:reduce){.themeToggle,.themeToggle .themeSun,.themeToggle .themeKnob{transition:none!important}}