html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body.workspace-active { position: fixed; inset: 0; }
/* Keep the original login animation visible until the cover transition finishes. */
.login-scene { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
body.workspace-active .login-scene { display: none; }
body.document-share-active .login-scene,
body.document-share-active #black,
body.document-share-active #work { display: none; }
#document-share-root { position: fixed; inset: 0; overflow: hidden; }

/* The only page layout container is the FlexSystem host. Its public grid API owns
   every heading, label, field, action and list position, including narrow screens. */
.management.app-canvas { box-sizing: border-box; width: 100%; height: 100%; padding: 24px; background: var(--flex-paper); color: var(--flex-ink); font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; }
.management *, .management *::before, .management *::after { box-sizing: border-box; }
.management input, .management select, .management button, .management textarea, .management .flexsystem-content { font-family: inherit; }
.management .app-copy-content { padding: 6px; }
.management .app-copy-tile { border-color: transparent; background: transparent; }
.management .app-copy-tile:has(.management-stat-label), .management .app-copy-tile:has(.management-stat-value) { background: var(--flex-tile); }
.app-copy-content > * { display: block; margin: 0; overflow-wrap: anywhere; }
.management h1 { font-size: 28px; line-height: 1.7; font-weight: 600; letter-spacing: 1px; }
.management h2 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.management h3 { font-size: 14px; line-height: 1.5; font-weight: 600; }
.management-eyebrow { font-size: 10px; line-height: 2; letter-spacing: 2px; color: var(--flex-ink); }
.management-account { font-size: 13px; line-height: 2; color: var(--flex-ink); }
.management-description, .management-scope { font-size: 13px; line-height: 1.8; color: var(--flex-ink); }
.management-notice { font-size: 13px; line-height: 1.7; color: var(--flex-ink); }
.management-notice[data-error="true"] { color: #853d27; }
.management-stat-label { font-size: 12px; line-height: 1.6; color: var(--flex-ink); }
.management-stat-value { font-size: 28px; line-height: 1.8; font-weight: 500; color: var(--flex-ink); }
.management-label { font-size: 12px; line-height: 1.8; font-weight: 600; color: var(--flex-ink); }
.management-help { font-size: 11px; line-height: 1.7; color: var(--flex-ink); }
.management-table .flexsystem-list-cell { white-space: pre-line; }
.management .management-avatar-tile { border-color: transparent; background: transparent; }
.management-avatar-content { display: flex; align-items: center; justify-content: center; }
.management-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--flex-tile); color: var(--flex-ink); font-size: 20px; font-weight: 600; }
.management-avatar-large { width: 96px; height: 96px; font-size: 40px; }
.management-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.management-pagination { font-size: 12px; line-height: 1.7; color: var(--flex-ink); text-align: center; }
.management-dialog { padding: 0; border: 1px solid var(--app-line); width: min(760px, calc(100vw - 32px)); max-width: none; height: min(800px, calc(100dvh - 40px)); max-height: none; overflow: hidden; background: var(--app-paper); color: var(--app-ink); box-shadow: 0 20px 80px color-mix(in srgb, var(--app-ink) 22%, transparent); }
.management-dialog::backdrop { background: color-mix(in srgb, var(--app-ink) 82%, transparent); backdrop-filter: blur(3px); }
.management-dialog-error { font-size: 13px; line-height: 1.6; color: #9a4932; }
.management-secret { font-family: Consolas, monospace !important; font-size: 12px; }
.side-bar { background: var(--app-sidebar); overflow-y: auto; padding-bottom: 90px; box-sizing: border-box; }
.side-bar-item.is-active { background: var(--app-tile); color: var(--app-ink); box-shadow: inset 3px 0 var(--app-ink); }
.side-bar-item:focus-visible { outline: 2px solid var(--app-ink); outline-offset: -3px; }
.side-bar-item .side-bar-icon { flex-shrink: 0; }
.side-bar-switch { background: var(--app-sidebar); }
@media (max-width: 540px) {
    .management.app-canvas { padding: 12px; }
    .management h1 { font-size: 24px; }
}