.side-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(var(--side-panel-width, 780px), 100vw);
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--floating-panel-border);
    background: var(--floating-panel-bg);
    color: var(--text);
    box-shadow: var(--floating-panel-shadow);
    font: inherit;
}
.side-panel[open] { display: flex; flex-direction: column; }
.side-panel::backdrop { background: var(--settings-modal-backdrop-bg); }
.side-panel-head { display: flex; align-items: flex-start; gap: 24px; padding: 32px 32px 12px; }
.side-panel-title { margin: 0; font-size: 1.3rem; line-height: 1.45; font-weight: 550; overflow-wrap: anywhere; }
.side-panel-subtitle { color: var(--muted); margin: 8px 0 0; font-size: .85rem; }
.side-panel-close { margin-left: auto; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 26px; cursor: pointer; }
.side-panel-close:hover { background: var(--floating-panel-divider); color: var(--text); }
.side-panel-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 32px 32px; flex: 1; min-height: 0; }
.side-panel-status { min-height: 20px; margin: 0; padding: 0 32px; font-size: .8rem; color: var(--muted); }
.side-panel :focus-visible { outline: 2px solid var(--text-accent-strong); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 600px) {
    .side-panel-head { padding: 24px 18px 12px; gap: 12px; }
    .side-panel-body { padding: 12px 18px 24px; }
    .side-panel-status { padding: 0 18px; }
    .side-panel-title { font-size: 1.12rem; }
}