:root { --yz-app-header-height: 64px; }

html[data-youzi-route="home"] body.youzi-home .home-header {
  height: var(--yz-app-header-height);
  padding: 0;
}

.yz-app-header {
  position: relative;
  z-index: 1400;
  height: var(--yz-app-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 clamp(16px, 2.6vw, 42px);
  color: #202532;
  background: rgba(251, 252, 255, .96);
  border-bottom: 1px solid rgba(31, 37, 50, .08);
  box-shadow: 0 4px 18px rgba(29, 43, 73, .045);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.yz-app-header-left,.yz-app-header-right,.yz-app-brand,.yz-canvas-identity,.yz-save-state { display:flex; align-items:center; }
.yz-app-header-left { min-width:0; gap:14px; }
.yz-app-header-right { gap:12px; }
.yz-app-brand { gap:10px; color:#202532; text-decoration:none; font-size:16px; font-weight:680; white-space:nowrap; }
.yz-app-brand img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.yz-canvas-identity { min-width:0; gap:10px; }
.yz-header-divider { width:1px; height:24px; background:rgba(31,37,50,.12); }
.yz-canvas-back { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:9px; background:transparent; color:#667085; cursor:pointer; font-size:18px; }
.yz-canvas-back:hover { background:#f0f3f8; color:#1f63e9; }
.yz-canvas-name { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:620; }
.yz-save-state { gap:7px; color:#667085; font-size:12px; white-space:nowrap; }
.yz-save-state::before,.yz-service-state::before { content:""; width:7px; height:7px; border-radius:50%; background:#2bc88f; box-shadow:0 0 0 4px rgba(43,200,143,.09); }
.yz-save-state[data-state="saving"]::before { background:#f2a93b; box-shadow:0 0 0 4px rgba(242,169,59,.1); }
.yz-service-state { display:flex; align-items:center; gap:8px; color:#687386; font-size:12px; white-space:nowrap; }
.yz-header-icon,.yz-login-button,.yz-avatar-button { border:1px solid rgba(31,37,50,.1); background:#fff; color:#323846; cursor:pointer; }
.yz-header-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:16px; }
.yz-header-icon:hover,.yz-login-button:hover,.yz-avatar-button:hover { border-color:rgba(31,99,233,.32); background:#f7f9ff; }
.yz-login-button { height:36px; padding:0 16px; border-radius:11px; font-size:13px; font-weight:650; }
.yz-avatar-button { position:relative; display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; font-weight:700; }
.yz-avatar-button small { position:absolute; right:-3px; bottom:-2px; display:grid; place-items:center; min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:#1f63e9; color:#fff; font-size:8px; }
.yz-account-menu { position:fixed; z-index:3000; top:58px; right:clamp(10px,2.6vw,42px); width:min(268px,calc(100vw - 20px)); max-height:calc(100vh - 20px); overflow:auto; overscroll-behavior:contain; padding:8px; border:1px solid rgba(31,37,50,.11); border-radius:16px; background:#fff; box-shadow:0 18px 50px rgba(31,43,70,.16); color:#252b38; transform-origin:top right; animation:yz-menu-in 180ms cubic-bezier(.22,1,.36,1); }
.yz-account-summary { display:grid; grid-template-columns:40px 1fr; gap:10px; padding:10px 10px 12px; }
.yz-account-avatar { grid-row:1/3; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#1f63e9; color:#fff; font-weight:750; }
.yz-account-summary strong { align-self:end; font-size:14px; }
.yz-account-summary span { color:#7a8496; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yz-menu-group { padding:6px 0; border-top:1px solid #edf0f5; }
.yz-menu-label { display:block; padding:4px 10px; color:#98a1b1; font-size:10px; font-weight:700; letter-spacing:.08em; }
.yz-account-menu button { display:flex; align-items:center; width:100%; min-height:34px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#3f4756; cursor:pointer; text-align:left; font-size:12px; }
.yz-account-menu button:hover,.yz-account-menu button[aria-current="page"] { background:#f1f5ff; color:#1f63e9; }
.yz-account-menu button:disabled { cursor:not-allowed; color:#a7afbc; opacity:.72; }
.yz-account-menu button:focus-visible,.yz-header-icon:focus-visible,.yz-login-button:focus-visible,.yz-avatar-button:focus-visible,.yz-canvas-back:focus-visible,.yz-app-brand:focus-visible { outline:2px solid rgba(31,99,233,.55); outline-offset:2px; }
.yz-account-menu button[data-danger] { color:#c34747; }
.yz-legacy-header-controls { display:none !important; }
@keyframes yz-menu-in { from { opacity:0; transform:translateY(-5px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:720px) {
  .yz-app-header { padding:0 12px; }
  .yz-app-brand span,.yz-service-state span,.yz-header-divider,.yz-canvas-back { display:none; }
  .yz-canvas-name { max-width:96px; }
  .yz-app-header-right { gap:7px; }
}
html[data-yz-theme="dark"][data-youzi-route="canvas"] .yz-app-header { color:#eef2f8; background:rgba(14,18,25,.97); border-bottom-color:rgba(255,255,255,.09); box-shadow:0 4px 18px rgba(0,0,0,.18); }
html[data-yz-theme="dark"][data-youzi-route="canvas"] .yz-app-brand { color:#eef2f8; }
html[data-yz-theme="dark"][data-youzi-route="canvas"] .yz-header-divider { background:rgba(255,255,255,.13); }
html[data-yz-theme="dark"][data-youzi-route="canvas"] .yz-header-icon,
html[data-yz-theme="dark"][data-youzi-route="canvas"] .yz-avatar-button { color:#e9edf5; background:#171d27; border-color:rgba(255,255,255,.1); }
.yz-admin-account-backdrop{position:fixed;z-index:4200;inset:0;display:grid;place-items:center;padding:18px;background:rgba(20,27,40,.32);animation:yz-admin-backdrop-in 180ms ease-out}.yz-admin-account-dialog{width:min(440px,100%);overflow:hidden;border:1px solid rgba(31,37,50,.12);border-radius:18px;background:#fff;color:#252b38;box-shadow:0 24px 70px rgba(31,43,70,.22);animation:yz-admin-dialog-in 200ms cubic-bezier(.22,1,.36,1)}.yz-admin-account-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 15px;border-bottom:1px solid #edf0f5}.yz-admin-account-dialog h2{margin:0;font-size:18px}.yz-admin-account-dialog header p{margin:6px 0 0;color:#7a8496;font-size:12px}.yz-admin-account-close{width:32px;height:32px;border:0;border-radius:9px;background:#f3f5f8;color:#667085;cursor:pointer;font-size:20px}.yz-admin-account-dialog form{display:grid;gap:13px;padding:18px 22px 22px}.yz-admin-account-dialog label{display:grid;gap:7px;color:#4e596b;font-size:12px}.yz-admin-account-dialog input{width:100%;height:40px;box-sizing:border-box;padding:0 12px;border:1px solid #dce1e9;border-radius:10px;background:#fbfcfe;color:#252b38;font:inherit;outline:none}.yz-admin-account-dialog input:focus{border-color:rgba(31,99,233,.6);box-shadow:0 0 0 3px rgba(31,99,233,.1)}.yz-admin-account-message{min-height:18px;margin:0;color:#198754;font-size:12px}.yz-admin-account-message[data-error]{color:#c34747}.yz-admin-account-dialog footer{display:flex;justify-content:flex-end;gap:9px}.yz-admin-account-dialog footer button{height:38px;padding:0 16px;border:1px solid #dce1e9;border-radius:10px;background:#fff;color:#4e596b;cursor:pointer}.yz-admin-account-dialog footer [data-submit]{border-color:#1f63e9;background:#1f63e9;color:#fff;font-weight:650}.yz-admin-account-dialog footer button:disabled{cursor:wait;opacity:.65}@keyframes yz-admin-backdrop-in{from{opacity:0}}@keyframes yz-admin-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}html[data-yz-theme="dark"] .yz-admin-account-dialog{border-color:#303949;background:#171d27;color:#edf1f7}html[data-yz-theme="dark"] .yz-admin-account-dialog>header{border-color:#303949}html[data-yz-theme="dark"] .yz-admin-account-dialog header p,html[data-yz-theme="dark"] .yz-admin-account-dialog label{color:#aab4c4}html[data-yz-theme="dark"] .yz-admin-account-close,html[data-yz-theme="dark"] .yz-admin-account-dialog input,html[data-yz-theme="dark"] .yz-admin-account-dialog footer button{border-color:#354052;background:#111620;color:#edf1f7}html[data-yz-theme="dark"] .yz-admin-account-dialog footer [data-submit]{border-color:#3979ec;background:#1f63e9;color:#fff}
@media (prefers-reduced-motion:reduce) { .yz-account-menu { animation:none; } }