/* Approved Handoff components: preserve dimensions, radii and typography. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;min-width:44px;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--white);flex-shrink:0;font:700 .75rem var(--sans)}
.theme-toggle:hover{background:var(--green-soft);border-color:var(--green-dark)}
.theme-toggle .icon{width:18px;height:18px}.header-actions{margin-left:auto;gap:1rem}
.login-box .theme-toggle{position:absolute;top:1.5rem;right:2rem;margin:0;display:inline-flex}
/* Anchor panels to the viewport. Only the body scrolls, not the page below. */
#app-dialog,#preview-dialog{position:fixed;inset:0;margin:auto;padding:0;color:var(--ink);max-height:calc(100dvh - 32px);overflow:visible}
#app-dialog{width:min(560px,calc(100% - 32px));max-width:none}
#app-dialog .dialog-card{margin:0;width:100%;max-height:calc(100dvh - 32px);background:var(--white)}
#app-dialog.side-dialog{inset:0 0 0 auto;margin:0;width:min(540px,100%);height:100dvh;max-height:100dvh}
#app-dialog.side-dialog .dialog-card{height:100%;max-height:100%;border-radius:20px 0 0 20px}
#app-dialog .dialog-head,#app-dialog .dialog-actions{flex-shrink:0}
#app-dialog .dialog-head{align-items:flex-start}
#app-dialog .dialog-head button{color:var(--ink);border-radius:8px}
#app-dialog .dialog-head button:hover{background:var(--paper)}
#app-dialog .dialog-body{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
#app-dialog .dialog-actions{background:var(--paper);border-top:1px solid var(--line)}
#app-dialog .dialog-actions .button{min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--ink)}
#app-dialog .dialog-actions .primary{background:var(--navy);border-color:var(--navy);color:#fff}
#app-dialog .dialog-actions .danger{background:var(--danger);border-color:var(--danger);color:#fff}
#app-dialog .dialog-actions .primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
#app-dialog .dialog-actions a{font-size:inherit;padding:.7rem 1rem}
#app-dialog [aria-busy=true] button[type=submit]::before{content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:action-spin .8s linear infinite}
@keyframes action-spin{to{transform:rotate(360deg)}}
.dialog-body .action-list{display:flex;flex-wrap:wrap;gap:.5rem}
.dialog-body .action-list .button{font-size:.78rem;min-height:44px}
.detail-access .field{margin-bottom:.85rem}
.detail-access output{display:block;padding:.85rem 1rem;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);font:500 1.2rem var(--mono);letter-spacing:.2em}
.detail-access input[readonly]{font:.75rem var(--mono)}
.pad-metadata{margin-top:1.25rem;border-top:1px solid var(--line)}
.pad-metadata summary{cursor:pointer;padding:1rem 0;color:var(--ink);font-weight:700}
#preview-dialog{width:min(1000px,calc(100% - 32px));max-width:none}
#preview-dialog .preview-shell{max-height:calc(100dvh - 32px)}
#preview-content{overscroll-behavior:contain}html:has(body.dialog-open){overflow:hidden;scrollbar-gutter:auto}
/* Dark adaptation of the same components. */
.donut.real-donut{background:none;position:relative}
.real-donut>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.real-donut>div{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:96px;height:96px;border-radius:50%;background:transparent;pointer-events:none}
.real-donut>div strong{font-size:1.3rem;line-height:1.15;letter-spacing:-.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
.real-donut>div span{font-size:.68rem;line-height:1.3;color:var(--muted)}
.real-donut circle{fill:none;stroke-width:20}
.format-track{stroke:var(--line)}
.real-donut:before{content:none}
.storage-card .format-legend{max-height:320px;overflow:auto}
.format-legend li{align-items:center}
.format-key{width:10px;height:10px}
.format-legend span{min-width:0;overflow-wrap:anywhere}
.format-legend small{display:block;color:var(--muted);font-size:.65rem;margin-top:.2rem}
.real-donut .format-segment{stroke-linecap:butt}
[data-theme=dark] .theme-toggle,[data-theme=dark] .field input,[data-theme=dark] .slug-field,[data-theme=dark] .dialog-body select,[data-theme=dark] .search input,[data-theme=dark] .filter-group{background:var(--white);color:var(--ink)}
[data-theme=dark] .slug-field input{background:transparent}
[data-theme=dark] .field input::placeholder,[data-theme=dark] .search input::placeholder{color:var(--muted)}
[data-theme=dark] .tag.temporary{background:#2b4036;color:#c3d8cb}
[data-theme=dark] .tag.expired{background:#493725;color:#f5c58e}
[data-theme=dark] .state.inactive{color:#f2a4a4}
[data-theme=dark] .button.danger{background:#a6343b;color:#fff}
[data-theme=dark] #app-dialog .dialog-actions .danger{background:#a6343b;border-color:#a6343b}
[data-theme=dark] #app-dialog .dialog-actions .primary:hover{background:#27654b;border-color:#27654b}
[data-theme=dark] .theme-toggle:hover,[data-theme=dark] .filter:hover,[data-theme=dark] .user-card>button:hover{background:var(--green-soft);color:var(--ink)}
[data-theme=dark] .metric-card.accent strong{color:var(--ink)}
[data-theme=dark] .toast.error{background:#792e35;color:#fff}
@media(max-width:780px){.theme-toggle{width:44px;padding:.65rem}.theme-label{display:none}.header-actions{gap:.35rem}.login-box .theme-toggle{right:1rem}.back-login{max-width:calc(100% - 84px)}#app-dialog .dialog-actions{padding-bottom:max(1rem,env(safe-area-inset-bottom))}}
@media(max-width:600px){#app-dialog.side-dialog .dialog-card{border-radius:0}#app-dialog .dialog-actions .button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){#app-dialog [aria-busy=true] button[type=submit]::before{animation:none}}