:root{--xug-bg:#f4f7fb;--xug-panel:#fff;--xug-text:#17263d;--xug-muted:#56667d;--xug-line:#d9e2ee;--xug-accent:#245dd8;--xug-error:#b32837}
#xu-login,#xu-account-bar,#xu-dev-note,#xu-usage-dialog,.xu-managed-note{font-family:Inter,"Microsoft YaHei",sans-serif;color:var(--xug-text);box-sizing:border-box}
#xu-login * ,#xu-usage-dialog *{box-sizing:border-box}
#app[aria-hidden="true"]{display:none!important}
#xu-login{position:fixed;inset:0;z-index:50000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 15% 10%,#e8efff,transparent 50%),var(--xug-bg);overflow:auto}
#xu-login[hidden],#xu-account-bar[hidden],#xu-dev-note[hidden],#xu-admin-link[hidden]{display:none!important}
.xu-login-card{width:min(100%,460px);background:var(--xug-panel);padding:38px;border:1px solid var(--xug-line);border-radius:20px;box-shadow:0 16px 55px #243f6610}
.xu-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--xug-accent);margin:0 0 16px}
#xu-login h1{font-size:28px;letter-spacing:-.7px;font-weight:700;margin:0 0 14px}
.xu-intro{font-size:14px;line-height:1.9;color:var(--xug-muted);margin:0 0 25px}
#xu-login label{display:block;font-size:13px;font-weight:600;margin:18px 0 8px}
#xu-login input{display:block;width:100%;height:48px;background:var(--xug-panel);border:1px solid #b8c7da;border-radius:9px;padding:0 13px;color:var(--xug-text);font-size:16px}
#xu-login button{width:100%;background:var(--xug-accent);border:0;color:white;height:48px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer}
#xu-login button:disabled{opacity:.6;cursor:wait}
#xu-login-error{color:var(--xug-error);font-size:13px;line-height:1.6;min-height:22px;margin:12px 0}
.xu-footnote{color:var(--xug-muted);font-size:12px;line-height:1.9;margin:20px 0 0}
#xu-account-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px;background:var(--xug-panel);border-bottom:1px solid var(--xug-line);position:relative;z-index:1;flex-wrap:wrap}
#xu-account-bar>div{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px}
#xu-account-points{color:var(--xug-muted)}
#xu-account-bar nav{display:flex;gap:8px;align-items:center}
#xu-account-bar button,#xu-account-bar a,#xu-usage-dialog button,.xu-managed-note button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--xug-line);border-radius:8px;background:var(--xug-panel);color:var(--xug-text);cursor:pointer;text-decoration:none;font-size:13px}
#xu-dev-note{background:#edf3ff;color:#315783;font-size:12px;line-height:1.8;padding:8px 20px;border-bottom:1px solid #d5e3fa}
#xu-usage-dialog{width:min(740px,calc(100% - 24px));max-height:85vh;border:1px solid var(--xug-line);border-radius:16px;padding:24px;background:var(--xug-panel)}
#xu-usage-dialog::backdrop{background:#0d20396b}
#xu-usage-dialog:not([open]){display:none}
#xu-usage-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#xu-usage-dialog h2{font-size:24px;margin:0;font-weight:700}
#xu-usage-dialog .xu-eyebrow{margin:0 0 8px}
#xu-usage-refresh{margin:18px 0}
#xu-usage-message{color:var(--xug-muted);font-size:13px}
.xu-usage-filters,.xu-usage-pages{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.xu-usage-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;flex:1 1 140px;min-width:0}
.xu-usage-filters input,.xu-usage-filters select{width:100%;min-height:44px;border:1px solid var(--xug-line);border-radius:8px;padding:8px;background:var(--xug-panel);color:var(--xug-text);font:inherit}
#xu-usage-dialog [hidden]{display:none!important}
#xu-usage-dialog button:disabled{opacity:.5;cursor:default}
.xu-usage-pages{justify-content:space-between;font-size:13px}
.xu-usage-row{padding:15px 0;border-top:1px solid var(--xug-line);overflow-wrap:anywhere}
.xu-usage-row b{display:block;font-size:14px;margin-bottom:7px}
.xu-usage-row p,.xu-usage-row summary{font-size:12px;line-height:1.8;color:var(--xug-muted);margin:0}
.xu-usage-row pre{white-space:pre-wrap;max-height:200px;overflow:auto;font-size:12px;background:var(--xug-bg);padding:12px;border-radius:8px}
.xu-managed-note{width:min(480px,100%);padding:26px;border-radius:16px;background:var(--xug-panel);border:1px solid var(--xug-line)}
.xu-managed-note h2{font-size:20px;font-weight:700}.xu-managed-note p{font-size:14px;line-height:1.8;margin:16px 0}
#xu-login :focus-visible,#xu-account-bar :focus-visible,#xu-usage-dialog :focus-visible,.xu-managed-note :focus-visible{outline:3px solid #82a9ff;outline-offset:3px}
body:not(.theme-light) #xu-account-bar,body:not(.theme-light) #xu-usage-dialog,body:not(.theme-light) .xu-managed-note{--xug-panel:#182335;--xug-bg:#111b2a;--xug-text:#e7eef9;--xug-muted:#b9c7da;--xug-line:#37485f;--xug-accent:#a9c5ff}
body:not(.theme-light) #xu-dev-note{background:#142740;color:#c1d6f4;border-color:#37485f}
@media(max-width:480px){.xu-login-card{padding:28px 22px}#xu-login{padding:16px}#xu-login h1{font-size:25px}#xu-account-bar{padding:8px 12px}#xu-account-bar nav{width:100%}#xu-dev-note{padding:8px 12px}#xu-usage-dialog{padding:18px}}
/* Scope the legacy header fix to the isolated studio; wrapping must not hide clipped controls. */
@media(max-width:767px){
  #app .xu-header>div:first-child{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  #app .xu-header .xu-logo{flex:0 0 44px;width:44px;height:44px}
  #app .xu-header .xu-brand-copy{flex:1 0 calc(100% - 104px);min-width:0}
  #app .xu-header h1{font-size:20px;line-height:1.4;white-space:nowrap}
  #app .xu-header .xu-brand-copy p{font-size:12px;letter-spacing:0;white-space:nowrap}
  #app .xu-header .theme-toggle{flex:0 0 44px;width:44px;min-height:44px;margin:0}
  #app .xu-header>div:first-child>button:not(.theme-toggle){flex:1 1 auto;margin:0;min-height:44px;padding:8px;justify-content:center;white-space:nowrap;gap:6px}
  #app .xu-header>div:last-child{gap:8px}
  #app .xu-header>div:last-child>button{min-width:44px;min-height:44px}
}