:root{--brand-blue:#2563eb;--brand-ink:#10203e;--brand-line:#e2e8f0;--brand-muted:#64748b}
.site-header{position:sticky;top:0;z-index:100;height:72px;display:flex;align-items:center;gap:30px;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(255,255,255,.86);border-bottom:1px solid rgba(226,232,240,.72);backdrop-filter:blur(14px)}.brand-image{display:inline-flex;align-items:center;flex:none}.brand-image img{display:block;width:auto;height:32px;max-width:160px;object-fit:contain}.main-nav{display:flex;flex:1;align-items:center;gap:29px;min-width:0}.main-nav a{color:#40516d;font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap}.main-nav a:hover,.main-nav .active{color:var(--brand-blue)}.main-nav b{display:inline-block;margin-left:3px;padding:2px 5px;border-radius:99px;color:var(--brand-blue);background:#e8f0ff;font-size:9px;vertical-align:top}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}.workspace-credit-pill,.workspace-language-pill,.workspace-avatar-pill{border:0;background:#fff;color:#64748b;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;box-shadow:0 1px 4px rgba(15,23,42,.10);cursor:pointer}.workspace-credit-pill{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;text-decoration:none;white-space:nowrap}.workspace-credit-pill:hover,.workspace-language-pill:hover,.workspace-avatar-pill:hover{background:#f8fafc}.workspace-credit-pill strong{color:#475569;font-size:12px}.credit-icon{color:#2563eb;font-size:14px}.crown-icon{margin-left:2px;color:#f59e0b;font-size:14px}.workspace-language-pill{height:32px;padding:0 12px;border-radius:999px;color:#475569}.account-menu-wrap{position:relative}.workspace-avatar-pill{display:flex;align-items:center;gap:7px;height:34px;padding:3px 9px 3px 4px;border-radius:999px}.account-avatar-image,.account-menu-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#fff;background:#2563eb center/cover no-repeat;font-style:normal;font-weight:750}.account-avatar-image.is-guest,.account-menu-avatar.is-guest{background-color:#f59e0b}.account-avatar-image{width:26px;height:26px;font-size:12px}.avatar-chevron{color:#64748b;font-size:15px;line-height:1;transform:translateY(-2px)}.workspace-dropdown{position:absolute;right:0;top:43px;width:340px;padding:10px;border:1px solid #e2e8f0;border-radius:28px;background:#fff;box-shadow:0 20px 45px rgba(15,23,42,.16)}.workspace-dropdown section{display:grid;gap:4px}.workspace-dropdown p{margin:8px 10px 10px;color:#64748b;font-size:13px;line-height:1.5}.account-menu-profile{display:flex;align-items:center;gap:11px;margin:4px 5px 8px;padding:10px;border-radius:18px;background:#f8fafc}.account-menu-avatar{width:38px;height:38px;flex:none}.account-menu-profile strong,.account-menu-profile small{display:block;overflow:hidden;max-width:245px;text-overflow:ellipsis;white-space:nowrap}.account-menu-profile strong{color:#1e293b;font-size:14px}.account-menu-profile small{margin-top:3px;color:#94a3b8;font-size:12px}.workspace-dropdown a,.workspace-dropdown button{display:block;width:100%;padding:11px 12px;border:0;border-radius:13px;color:#334155;background:transparent;font:600 13px inherit;text-align:left;text-decoration:none;cursor:pointer}.workspace-dropdown a:hover,.workspace-dropdown button:hover{background:#f1f5f9}.auth-modal-open{overflow:hidden}.auth-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:20px}.auth-modal[hidden],.account-menu[hidden],.header-tools [hidden],.auth-dialog .register-only[hidden]{display:none!important}.auth-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(4px)}.auth-dialog{position:relative;z-index:1;width:min(100%,420px);padding:32px;border:1px solid rgba(255,255,255,.6);border-radius:22px;background:#fff;box-shadow:0 24px 80px rgba(15,23,42,.25)}.auth-close{position:absolute;right:15px;top:12px;border:0;color:#64748b;background:transparent;font-size:28px;cursor:pointer}.auth-kicker{margin:0 0 8px;color:var(--brand-blue);font-size:12px;font-weight:800;letter-spacing:.12em}.auth-dialog h2{margin:0;color:var(--brand-ink);font-size:26px}.auth-helper{margin:8px 0 20px;color:var(--brand-muted);font-size:14px}.auth-tabs{display:flex;gap:20px;margin-bottom:18px;border-bottom:1px solid var(--brand-line)}.auth-tabs button{padding:0 2px 10px;border:0;border-bottom:2px solid transparent;color:#64748b;background:transparent;font:700 14px inherit;cursor:pointer}.auth-tabs button.active{border-color:var(--brand-blue);color:var(--brand-blue)}.auth-dialog label{display:grid;gap:7px;margin:13px 0;color:#334155;font-size:13px;font-weight:650}.auth-dialog input{width:100%;height:42px;padding:0 12px;border:1px solid var(--brand-line);border-radius:10px;color:#10203e;font:14px inherit;outline:none}.auth-dialog input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.auth-submit{width:100%;height:44px;margin-top:12px;border:0;border-radius:11px;color:#fff;background:var(--brand-blue);font:700 14px inherit;cursor:pointer}.auth-submit:disabled{opacity:.65;cursor:wait}.auth-error{margin:4px 0 0;color:#dc2626;font-size:13px}
@media(max-width:1120px){.site-header{gap:18px}.main-nav{gap:18px}.workspace-credit-pill{display:none!important}}@media(max-width:820px){.site-header{height:68px;padding:0 18px}.main-nav{display:none}.header-tools{margin-left:auto}.brand-image img{height:30px}.auth-dialog{padding:27px 22px}}@media(max-width:390px){.site-header{padding:0 14px}.brand-image img{height:28px}.workspace-language-pill{padding:0 10px}.workspace-avatar-pill{padding-right:7px}.workspace-dropdown{right:-4px;width:min(340px,calc(100vw - 28px))}}


/* ==================================================
   Studio-like account dropdown
   ================================================== */

.wb-menu-profile {
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 4px 10px;
}

.wb-menu-avatar {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    flex:none;
    border-radius:50%;
    background:#2563eb center/cover no-repeat;
    color:#fff;
    font-size:18px;
    font-weight:800;
}

.wb-menu-profile-copy {
    min-width:0;
}

.wb-menu-profile-copy strong,
.wb-menu-profile-copy small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.wb-menu-profile-copy strong {
    max-width:240px;
    color:#0f172a;
    font-size:20px;
    line-height:1.2;
}

.wb-menu-profile-copy small {
    max-width:240px;
    margin-top:5px;
    color:#94a3b8;
    font-size:12px;
}

.wb-membership-shell {
    margin:6px 0 10px;
    padding:12px;
    border-radius:24px;
    background:#f1f5f9;
}

.wb-membership-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 1px 4px rgba(15,23,42,.08);
}

.wb-membership-copy {
    min-width:0;
}

.wb-membership-copy strong,
.wb-membership-copy small {
    display:block;
}

.wb-membership-copy strong {
    color:#0f172a;
    font-size:14px;
}

.wb-membership-copy small {
    margin-top:5px;
    color:#94a3b8;
    font-size:12px;
}

.wb-crown {
    margin-right:6px;
    color:#f59e0b;
}

.wb-renew-button {
    flex:none !important;
    width:auto !important;
    padding:8px 13px !important;
    border-radius:14px !important;
    background:#fcd34d !important;
    color:#78350f !important;
    text-align:center !important;
}

.wb-menu-actions {
    display:grid;
    gap:2px;
    margin-top:8px;
}

.workspace-dropdown .wb-menu-actions a,
.workspace-dropdown .wb-menu-logout button {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:13px;
    font-weight:600;
}

.workspace-dropdown .wb-menu-actions a span,
.workspace-dropdown .wb-menu-logout button span {
    display:inline-grid;
    place-items:center;
    width:18px;
    color:#64748b;
}

.wb-menu-logout {
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #f1f5f9;
}

/* ===== Unified studio avatar color ===== */
.account-avatar-image:not(.has-image),
.account-menu-avatar:not(.has-image),
.wb-menu-avatar:not(.has-image){
    background:#f27249 !important;
    color:#fff !important;
}


/* Workbench-style fallback avatar */
.wb-menu-avatar{
    background-color:#f27249 !important;
}

.wb-menu-avatar[style*="background-image"]{
    background-color:transparent !important;
}