.workspace-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--scope-bg);color:var(--scope-ink);border-bottom:1px solid var(--scope-line);font-size:.8rem;line-height:1.5}
.workspace-banner>span:first-child{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.workspace-banner>span:last-child{color:var(--scope-muted)}
.workspace-banner svg{width:16px;height:16px;flex-shrink:0}
.workspace-banner strong{color:var(--scope-ink)}
.workspace-choice{display:flex;align-items:center;text-align:left;gap:12px;white-space:normal}
.workspace-choice>.dg-artwork{width:44px;height:44px;flex:0 0 44px}
.workspace-choice-copy{display:grid;gap:5px;min-width:0}
.workspace-choice-copy>span{font-size:.78rem;font-weight:500;color:var(--muted)}
[data-auth-error]:not(:empty){padding:12px 0;color:var(--danger,#a13131)}
[data-workspace-error]:empty{display:none}
@media(max-width:780px){.workspace-banner{padding:10px 14px;flex-direction:column;align-items:flex-start}.topbar .row #switch span{display:none}.topbar .row{gap:6px}.actor-pill{max-width:150px}}
.page-loading{padding:36px 20px;min-height:260px}
.page-loading>p{max-width:38ch}
/* A single accessible autofill input, presented as six code boxes. Resting
   cells keep a visible edge: at least 3:1 against the card and against their
   own fill in both themes. Filled cells turn teal; the current cell shows a
   ring and a caret, because the real input's own caret is hidden. */
:root{--code-edge:#8D847B;--code-fill:var(--surface2,#FAF6F0);--code-ring:rgba(31,192,180,.45)}
@media screen{:root[data-theme="dark"]{--code-edge:#807363;--code-fill:#191713}}
.otp-code{position:relative;display:block;width:100%;margin:6px 0}
.otp-code-digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1.5vw,10px);pointer-events:none}
.otp-code-digits>span{display:grid;place-items:center;min-width:0;height:56px;border:1.5px solid var(--code-edge);border-radius:12px;background:var(--code-fill);color:var(--ink);font:700 1.6rem/1 'Fredoka',sans-serif}
.otp-code-digits>span.filled{border-color:var(--deep);background:var(--soft,var(--surface,#fff))}
.otp-code.focused .current{border-color:var(--deep);box-shadow:0 0 0 3px var(--code-ring)}
.otp-code.focused .current:not(.filled)::after{content:'';width:2px;height:26px;border-radius:2px;background:var(--deep);animation:otp-caret 1.1s steps(1) infinite}
@keyframes otp-caret{50%{opacity:0}}
/* The real input sits invisibly over the cells. These selectors out-rank the
   themed input, hover and focus rules, which otherwise painted it as one opaque
   box over the cells in dark mode. */
.otp-code .otp-code-input,:root[data-theme] .otp-code input.otp-code-input,:root[data-theme] .otp-code input.otp-code-input:hover,:root[data-theme] .otp-code input.otp-code-input:focus{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;box-shadow:none;outline:none}
.otp-code .otp-code-input::selection{background:transparent;color:transparent}
.otp-code:has(.otp-code-input:disabled){opacity:.65}
@media(prefers-reduced-motion:reduce){.otp-code *{transition:none}.otp-code .current::after{animation:none}}
@media(max-width:420px){.workspace-banner{font-size:.76rem}.topbar{gap:8px}.topbar .mobile-brand{min-width:0;gap:6px}.topbar .mobile-brand .brand{min-width:0}.topbar .mobile-brand .brand img{width:95px}.topbar .mobile-brand .brand-caption{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar #switch{width:44px;min-width:44px;padding:10px}}
@media(max-width:360px){.topbar .mobile-brand .brand img{width:80px}.topbar .mobile-brand .brand-caption{max-width:80px}}