/* K3: only a small icon is visible; native details controls the popup. */
.topbar .top-actions{overflow:visible}
.topbar .design-menu{position:relative;flex:0 0 auto;margin:0;color:#fff;font-size:14px;line-height:1.4}
.topbar .design-menu>summary{display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0;margin:0;border:0;border-radius:4px;background:transparent;color:rgba(255,255,255,.82);cursor:pointer;list-style:none;box-shadow:none}
.topbar .design-menu>summary::-webkit-details-marker{display:none}
.topbar .design-menu>summary::marker{content:""}
.topbar .design-menu>summary svg{display:block;width:18px;height:18px;pointer-events:none}
.topbar .design-menu>summary:hover,.topbar .design-menu[open]>summary{color:#fff;background:rgba(255,255,255,.1)}
.topbar .design-menu>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.topbar .design-menu-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:100;width:236px;max-width:calc(100vw - 24px);padding:12px;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:var(--hb-top);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.topbar .design-menu:not([open])>.design-menu-panel{display:none}
.topbar .design-switch{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;margin:0;color:#fff;font-size:14px;font-weight:600}
.topbar .design-switch>span{color:rgba(255,255,255,.9);font-size:14px;letter-spacing:0}
.topbar .design-switch select{width:100%;max-width:100%;min-width:0;min-height:38px;margin:0;padding:6px 8px;border:1px solid rgba(255,255,255,.4);border-radius:3px;background:var(--hb-top);color:#fff;color-scheme:dark;font:inherit;font-size:14px;cursor:pointer}
.topbar .design-switch select option{color:#fff;background:var(--hb-top)}
.topbar .design-switch select:hover{border-color:rgba(255,255,255,.7)}
.topbar .design-switch select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.design-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:780px){
 .topbar:has(.design-menu){display:grid;grid-template-columns:28px minmax(0,1fr) 44px;column-gap:8px;padding:0 8px}
 .topbar:has(.design-menu) .topbar-spacer{display:none}
 .topbar:has(.design-menu) .period-control{min-width:0;max-width:100%;grid-column:2;justify-self:center}
 .topbar:has(.design-menu) .period-control>span{display:none}
 .topbar:has(.design-menu) .period-control input{max-width:100%;min-width:0;min-height:40px;font-size:16px}
 .topbar:has(.design-menu) .top-actions{display:flex;grid-column:3;justify-content:flex-end;min-width:44px;margin:0}
 .topbar:has(.design-menu) .top-actions>:not(.design-menu):not(.design-status){display:none}
 .topbar .design-menu>summary{width:44px;height:44px}
 .topbar .design-switch select{min-height:44px;font-size:16px}
}
@media print{.design-menu,.design-status{display:none}}