:root {
  color-scheme: light;
  --workspace-bg: #f3f5f7; --workspace-panel: #fff; --workspace-soft: #f7f9fa;
  --workspace-ink: #1b2b36; --workspace-muted: #5c707c; --workspace-border: #dfe6e9;
  --workspace-green: #127665; --workspace-tint: #e7f3ee; --workspace-on-green: #fff;
  --workspace-danger: #b72e3c; --workspace-danger-bg: #fcf0f1; --workspace-shadow: 0 8px 30px #122c3910;
}
html[data-theme=dark] {
  color-scheme: dark;
  --workspace-bg: #121c25; --workspace-panel: #1b2833; --workspace-soft: #202f3b;
  --workspace-ink: #e5eef2; --workspace-muted: #a4b7c3; --workspace-border: #344652;
  --workspace-green: #8cdec5; --workspace-tint: #203f3c; --workspace-on-green: #10352b;
  --workspace-danger: #ff9ca5; --workspace-danger-bg: #422c36; --workspace-shadow: 0 8px 30px #0003;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body.workspace-body { margin: 0; min-width: 0; background: var(--workspace-bg); color: var(--workspace-ink); font: 1rem/1.5 Inter, 'Segoe UI', Arial, sans-serif; }
[hidden], .hidden { display: none !important; }
button, input { font: inherit; }
button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .mini-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--workspace-border); border-radius: 7px; background: var(--workspace-panel); color: var(--workspace-ink); font-size: .875rem; font-weight: 550; cursor: pointer; text-decoration: none; }
button:hover, .mini-button:hover { background: var(--workspace-soft); }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--workspace-green); outline-offset: 3px; }
.save-button { background: var(--workspace-green); color: var(--workspace-on-green); border-color: var(--workspace-green); }
.save-button:hover { background: var(--workspace-green); filter: brightness(.94); }
.text-button { color: var(--workspace-green); border: 0; background: transparent; padding: 4px 0; min-height: 44px; }
.text-button:hover { background: transparent; text-decoration: underline; }
.icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.icon-button { width: 44px; padding: 0; border: 0; background: transparent; }
h1, h2, p { margin: 0; }
h1 { color: var(--workspace-ink); font-size: clamp(1.75rem, 3.7vw, 2.25rem); line-height: 1.2; font-weight: 650; letter-spacing: -.045em; overflow-wrap: anywhere; }
h2 { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
.workspace-muted { color: var(--workspace-muted); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--workspace-panel); color: var(--workspace-green); }
.skip-link:focus { top: 10px; }
.workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px clamp(18px, 4vw, 44px); border-bottom: 1px solid var(--workspace-border); background: var(--workspace-panel); }
.workspace-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-brand img { width: 35px; height: 35px; object-fit: contain; }
.workspace-brand strong { font-size: 1.375rem; letter-spacing: -.04em; font-weight: 700; }
.workspace-brand > span { border-left: 1px solid var(--workspace-border); padding-left: 18px; margin-left: 8px; font-size: .875rem; color: var(--workspace-muted); }
.workspace-top-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-account { position: relative; min-width: 0; }
.workspace-account summary { display: flex; align-items: center; gap: 9px; min-height: 44px; max-width: 240px; padding: 3px; border-radius: 7px; list-style: none; cursor: pointer; font-size: .875rem; font-weight: 550; }
.workspace-account summary::-webkit-details-marker { display: none; }
.workspace-account summary > #centralSessionUser { min-width: 0; overflow-wrap: anywhere; }
.workspace-account summary > span:last-child .icon { width: 16px; height: 16px; }
.workspace-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--workspace-tint); color: var(--workspace-green); font-weight: 600; }
.workspace-account-panel { position: absolute; right: 0; top: calc(100% + 13px); z-index: 20; width: min(290px, calc(100vw - 36px)); display: grid; gap: 5px; padding: 19px; border: 1px solid var(--workspace-border); border-radius: 9px; background: var(--workspace-panel); box-shadow: var(--workspace-shadow); overflow-wrap: anywhere; }
.workspace-account-panel > span { color: var(--workspace-muted); font-size: .875rem; }
.workspace-account-panel > .workspace-security { color: var(--workspace-green); margin-top: 7px; }
.workspace-account-panel > button { width: 100%; justify-content: flex-start; margin-top: 12px; }
.workspace-shell { max-width: 1040px; margin: 0 auto; padding: clamp(30px, 5vw, 62px) 32px 36px; }
.workspace-heading { margin-bottom: 28px; }
.workspace-heading p { margin-top: 9px; color: var(--workspace-muted); }
.workspace-favorite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 21px 24px; background: var(--workspace-tint); border: 1px solid var(--workspace-border); border-radius: 10px; margin-bottom: 30px; }
.workspace-favorite > div { display: grid; gap: 3px; }
.workspace-favorite > div > span { font-size: .875rem; font-weight: 500; color: var(--workspace-green); }
.workspace-favorite strong { font-size: 1.375rem; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.workspace-favorite button { gap: 20px; }
.workspace-section-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.workspace-section-heading > span { font-size: .875rem; color: var(--workspace-muted); }
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workspace-grid[data-count="1"] { grid-template-columns: 1fr; }
.workspace-card { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: start; min-width: 0; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-panel); transition: border-color .14s, box-shadow .14s; }
.workspace-card:hover { border-color: var(--workspace-green); box-shadow: var(--workspace-shadow); }
.workspace-grid[data-count="1"] .workspace-card { grid-template-columns: 1fr; }
.workspace-open { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; justify-content: normal; gap: 17px; width: 100%; min-height: 175px; padding: 25px 0 25px 24px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.workspace-open:hover { background: transparent; }
.workspace-grid[data-count="1"] .workspace-open { padding-right: 24px; }
.workspace-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: var(--workspace-tint); color: var(--workspace-green); }
.workspace-icon .icon { width: 23px; height: 23px; }
.workspace-card[data-portal=admin] .workspace-icon { background: var(--workspace-soft); color: var(--workspace-ink); }
.workspace-copy { display: grid; gap: 7px; min-width: 0; }
.workspace-copy strong { font-size: 1.25rem; line-height: 1.35; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.workspace-description { min-height: 44px; color: var(--workspace-muted); font-size: .9375rem; font-weight: 400; line-height: 1.5; }
.workspace-open-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; color: var(--workspace-green); font-size: .875rem; font-weight: 600; }
.workspace-open-label .icon { width: 18px; height: 18px; }
.workspace-star { border: 0; background: transparent; color: var(--workspace-muted); width: 44px; height: 44px; padding: 0; margin: 9px 8px 0 0; }
.workspace-star[aria-pressed=true] { color: var(--workspace-green); }
.workspace-star[aria-pressed=true] .icon { fill: currentColor; }
.workspace-foot { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; font-size: .875rem; color: var(--workspace-muted); }
.workspace-foot > span { display: flex; align-items: center; gap: 7px; }
.workspace-foot .icon { width: 17px; height: 17px; }
.office-inline-message, #centralLoginMessage { font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.office-inline-message:empty, #centralLoginMessage:empty { display: none; }
.office-inline-message.good { color: var(--workspace-green); }
.office-inline-message.danger { color: var(--workspace-danger); }
.workspace-empty { grid-column: 1 / -1; padding: 26px; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-panel); }
.workspace-empty p { color: var(--workspace-muted); margin-top: 8px; }
.workspace-login { display: grid; place-items: start center; padding: clamp(28px, 5vw, 58px) 18px; }
.workspace-login-card { width: min(440px, 100%); display: grid; gap: 17px; padding: 30px; border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-panel); }
.workspace-login-card .login-brand { display: flex; align-items: center; gap: 10px; color: var(--workspace-green); font-size: .875rem; font-weight: 550; }
.login-brand img { width: 28px; height: 28px; object-fit: contain; }
.workspace-login-card h1 { font-size: 1.875rem; }
.workspace-login-card > .workspace-muted { margin-top: -10px; }
label { display: grid; gap: 7px; min-width: 0; font-size: .875rem; font-weight: 550; }
input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--workspace-border); border-radius: 7px; color: var(--workspace-ink); background: var(--workspace-panel); font-size: 1rem; }
input::placeholder { color: var(--workspace-muted); opacity: 1; }
label small { font-size: .8125rem; font-weight: 400; color: var(--workspace-muted); }
.central-login-tools { display: flex; justify-content: flex-end; margin: -12px 0 -8px; }
.workspace-submit { width: 100%; gap: 18px; }
.workspace-login-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--workspace-border); color: var(--workspace-muted); font-size: .8125rem; }
.workspace-login-foot .icon { width: 17px; height: 17px; }
.central-forgot-panel { display: grid; gap: 16px; }
.central-forgot-panel p { color: var(--workspace-muted); font-size: .875rem; }
.workspace-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.reset-mode :is(.central-login-username-label, .central-login-password-label, .central-login-twofactor-label, .central-login-tools, .workspace-submit, .workspace-login-foot) { display: none; }
.workspace-noscript { max-width: 600px; margin: 20px auto; padding: 20px; color: var(--workspace-danger); background: var(--workspace-danger-bg); }
/* The existing 2FA setup flow keeps every step, QR code and recovery-code gate. */
.twofa-required-overlay { position: fixed; inset: 0; z-index: 100; padding: 24px 18px; overflow-y: auto; background: #07141dcc; display: grid; place-items: start center; }
.twofa-required-dialog { width: min(620px, 100%); padding: 28px; display: grid; gap: 20px; border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-panel); color: var(--workspace-ink); }
.twofa-required-dialog header { display: flex; align-items: flex-start; gap: 15px; }
.twofa-required-dialog header img { width: 40px; height: 40px; object-fit: contain; }
.twofa-required-dialog h2 { font-size: 1.4rem; margin: 4px 0 7px; }
.twofa-required-dialog header span, .twofa-required-steps, .twofa-recovery-box > span, .twofa-google-copy > span { font-size: .875rem; color: var(--workspace-muted); }
.eyebrow { font-size: .8125rem; color: var(--workspace-green); }
.twofa-required-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.twofa-google-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; }
.twofa-qr-frame { display: grid; place-items: center; min-height: 180px; padding: 12px; border: 1px solid var(--workspace-border); border-radius: 8px; background: #fff; color: #1b2b36; }
.twofa-qr-frame img { display: block; width: 100%; max-width: 200px; height: auto; }
.twofa-qr-frame > span { font-size: .875rem; }
.twofa-google-copy { display: grid; gap: 9px; }
.twofa-required-setup { display: grid; gap: 16px; }
.twofa-recovery-box { display: grid; gap: 12px; padding: 16px; border-radius: 8px; background: var(--workspace-tint); }
.twofa-recovery-box [data-twofa-codes] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.twofa-recovery-box code { padding: 8px; color: var(--workspace-ink); border-radius: 5px; background: var(--workspace-panel); font-size: .875rem; overflow-wrap: anywhere; }
.check-line { display: flex; align-items: flex-start; gap: 9px; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--workspace-green); flex-shrink: 0; }
.twofa-required-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.twofa-required-dialog footer > :first-child { margin-right: auto; }
.disabled { pointer-events: none; opacity: .5; }
@media (max-width: 700px) {
  .workspace-topbar { padding: 12px 18px; gap: 12px; }
  .workspace-brand > span { display: none; }
  .workspace-top-actions { gap: 4px; }
  .workspace-account summary { max-width: 190px; }
  .workspace-shell { padding: 30px 18px 25px; }
  .workspace-grid { grid-template-columns: 1fr; gap: 12px; }
  .workspace-open { min-height: 144px; padding: 20px 0 20px 19px; gap: 14px; }
  .workspace-description { min-height: 0; }
  .workspace-favorite { padding: 18px; margin-bottom: 25px; }
  .workspace-section-heading { align-items: flex-start; }
}
@media (max-width: 420px) {
  .workspace-account summary > #centralSessionUser { display: none; }
  .workspace-open { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-left: 16px; }
  .workspace-icon { width: 36px; height: 36px; }
  .workspace-copy strong { font-size: 1.125rem; }
  .workspace-login-card { padding: 23px 20px; }
  .twofa-required-dialog { padding: 20px; }
  .twofa-google-grid { grid-template-columns: 1fr; }
  .twofa-qr-frame { justify-self: center; width: 200px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .workspace-card { transition: none; } }
.passkey-dialog { width:min(540px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); overflow:auto; padding:24px; border:1px solid var(--workspace-border); border-radius:12px; color:var(--workspace-ink); background:var(--workspace-panel); box-shadow:var(--workspace-shadow); }
.passkey-dialog::backdrop { background:#0c192a99; }
.passkey-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.passkey-dialog form,.passkey-dialog label { display:grid; gap:8px; }
.passkey-dialog form { gap:16px; padding-top:20px; border-top:1px solid var(--workspace-border); }
.passkey-dialog input { width:100%; min-height:44px; border:1px solid var(--workspace-border); background:var(--workspace-soft); color:var(--workspace-ink); border-radius:7px; padding:10px; }
.passkey-dialog p,.passkey-dialog small { color:var(--workspace-muted); }
.passkey-dialog h3 { margin:0; font-size:1rem; }
.passkey-list { list-style:none; padding:0; margin:20px 0; display:grid; gap:12px; }
.passkey-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.passkey-list li div { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
#passkeyMessage:not(:empty) { margin-top:18px; }
#workspacePasskeyLogin { margin-top:10px; }
@media(max-width:420px) { .passkey-dialog { padding:18px; } .passkey-list li { align-items:start; flex-direction:column; } }