.view-mode-bar { display:flex; align-items:center; justify-content:center; gap:20px; padding:14px 20px; background:#f7f5eb; border-bottom:1px solid #79633940; color:#493d2d; }
.view-mode-label { font:500 12px/1.4 'Geist',Arial,sans-serif; text-transform:uppercase; white-space:nowrap; }
.mode-selector { position:relative; display:flex; width:270px; flex-shrink:0; gap:3px; padding:6px 13px; border:1px solid #836837; border-radius:7px; background:linear-gradient(110deg,#c6ac70,#e0cc97 45%,#b79a61); box-shadow:inset 0 1px 0 #fff3c4, inset 0 -2px 2px #735b3650, 0 2px 3px #46381d20; }
.mode-selector::before,.mode-selector::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; border:1px solid #7a653d; background:#a18a58; top:calc(50% - 2px); box-shadow:inset 0 1px 1px #fff0bc; }
.mode-selector::before { left:4px; }
.mode-selector::after { right:4px; }
.mode-selector a { display:flex; justify-content:center; align-items:center; gap:9px; flex:1; min-height:44px; padding:8px; border:1px solid transparent; border-radius:4px; text-decoration:none; color:#493d2d; font:500 13px/1.3 'Geist',Arial,sans-serif; white-space:nowrap; transition:background .2s,box-shadow .2s; }
.mode-selector a:last-child { flex:1.4; }
.mode-selector a::before { content:''; width:7px; height:7px; border-radius:50%; background:#655639; box-shadow:inset 0 1px 2px #271c1b70; }
.mode-selector a[aria-current=page] { background:#fffbed; border-color:#a58b55; color:#702e36; box-shadow:0 2px 3px #59472545,inset 0 1px 0 white; }
.mode-selector a[aria-current=page]::before { background:#973c42; box-shadow:0 0 0 2px #973c4215,inset 0 1px 1px #f8b1a0; }
.mode-selector a:hover { background:#fffbed70; }
.mode-selector a[aria-current=page]:hover { background:#fffbed; }
.mode-selector a:focus-visible { outline:3px solid #702e36; outline-offset:3px; }
@media(max-width:600px) { .view-mode-bar { flex-direction:column; gap:6px; padding:10px 12px; } .view-mode-label { font-size:10px; } .mode-selector { width:260px; } }
@media(prefers-reduced-motion:reduce) { .mode-selector a { transition:none; } }