/* Shared website shell. The historical phone id remains for stored chat scroll helpers. */
.desktop-scene{display:none!important}
.phone{width:100%;max-width:none;min-height:100dvh;margin:0;background:var(--bg);position:relative;isolation:isolate}
.app-root{min-height:100dvh;padding-bottom:0}
.app-header{height:var(--header);position:sticky;top:0;z-index:25;background:var(--surface);border-bottom:1px solid var(--border-subtle)}
.header-inner{max-width:1336px;margin-inline:auto;padding-inline:28px;height:100%;display:flex;align-items:center;gap:20px}
.site-brand{unicode-bidi:isolate;display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--primary);color:var(--primary-fg);border-radius:13px;position:relative}
.brand-mark .ico{width:24px;height:24px;stroke-width:1.7}.brand-mark i{width:7px;height:7px;position:absolute;bottom:5px;inset-inline-end:5px;background:var(--primary-fg);border-radius:3px;border:2px solid var(--primary)}
:root[dir="rtl"] .site-brand{flex-direction:row-reverse}
:root[dir="rtl"] .site-brand .brand-mark{direction:rtl}
.brand-word{font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1}.brand-word>span{color:var(--primary)}
.primary-switch{display:flex;align-items:center;gap:0;flex-shrink:0;padding:3px;border:1px solid var(--border-control);border-radius:var(--radius-pill);background:var(--elevated);direction:ltr;isolation:isolate}
.primary-segment{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:94px;padding:8px 15px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--secondary);white-space:nowrap;transition:background-color var(--duration-capsule) ease,color var(--duration-capsule) ease,transform var(--duration-press) ease}
.primary-segment .ico{width:19px;height:19px;flex-shrink:0}.primary-segment:hover{background:var(--hover);color:var(--fg)}.primary-segment.active{background:var(--primary);color:var(--primary-fg)}.primary-segment:active{transform:scale(.98)}.primary-segment:focus-visible{outline-offset:1px}
.header-search{display:flex;align-items:center;gap:10px;min-width:90px;flex:1;min-height:44px;border:1px solid var(--border-control);border-radius:12px;background:var(--bg);color:var(--secondary);padding:10px 14px;text-align:start;transition:background-color var(--duration-control) ease,border-color var(--duration-control) ease}
.header-search span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-search .ico{width:20px;height:20px;flex-shrink:0}.header-search:hover{background:var(--hover)}.header-search.active{border-color:var(--primary);color:var(--primary)}
.header-settings,.header-favorites{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;color:var(--secondary)}.header-settings .ico,.header-favorites .ico{width:20px;height:20px}.header-settings:hover,.header-favorites:hover,.header-account:hover{background:var(--hover);color:var(--fg)}.header-settings.active,.header-favorites.active{background:var(--accent);color:var(--accent-fg)}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.header-account{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding-inline:4px;font-weight:650;font-size:13px;border-radius:12px}.header-account>span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-account>.ico{width:20px;height:20px;flex-shrink:0}.header-create{white-space:nowrap;border-radius:12px}.header-create>span{max-width:180px;overflow:hidden;text-overflow:ellipsis}.header-create>.ico{flex-shrink:0}
.app-content{max-width:1336px;margin-inline:auto;padding-inline:28px;min-height:calc(100dvh - var(--header) - 92px)}
.page{padding:28px 0 36px;animation:page-appear var(--duration-route) ease-out}
.page-title{font-size:28px;line-height:1.35;letter-spacing:-.7px;font-weight:760;margin:0}.page-subtitle{font-size:14px;color:var(--secondary);margin:7px 0 0;line-height:1.65}
.screen-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 16px}.section-heading h2{font-size:18px;font-weight:740;margin:0}.section-heading>span{font-size:13px;color:var(--secondary)}
.screen-titlebar{min-height:76px;display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}.screen-titlebar h1{font-size:22px;line-height:1.4;font-weight:730;margin:0;flex:1;text-align:start}.screen-titlebar .balancer{display:none}
.site-footer{max-width:1280px;margin-inline:auto;padding:24px 0;display:flex;align-items:center;gap:24px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--secondary)}.footer-brand{color:var(--fg);font-size:18px;font-weight:800;letter-spacing:-.6px}.site-footer>a:last-child{margin-inline-start:auto;min-height:44px;display:flex;align-items:center}
.bottom-nav-frame{display:none}
@keyframes page-appear{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1200px){.header-inner{gap:12px}.primary-segment{padding-inline:12px;min-width:86px}.header-actions{gap:8px}.header-account>span{max-width:100px}.header-create>span{max-width:140px}.header-search{padding-inline:10px}.site-footer{margin-inline:28px}}
@media(max-width:1000px) and (min-width:768px){.brand-word{font-size:22px}.brand-mark{width:34px;height:34px}.header-create{width:44px;min-width:44px;padding:0}.header-create span{display:none}.header-account>span{display:none}}
@media(max-width:767px){
 :root{--header:calc(72px + var(--safe-top));--bottom:72px}
 html{scroll-padding-block-start:var(--header);scroll-padding-block-end:calc(var(--bottom) + var(--safe-bottom) + 12px)}
 .route-form button,.route-form input,.route-form textarea,.route-form select{scroll-margin-block:12px}
 .header-inner{display:flex;justify-content:space-between;gap:12px;padding:calc(10px + var(--safe-top)) 16px 10px}
 .site-brand{width:max-content;gap:7px;min-width:0}.brand-word{font-size:22px}.brand-mark{width:32px;height:32px;border-radius:10px}
 .header-actions,.header-search,.header-settings{display:none}
 .primary-switch{flex:1;max-width:240px;min-width:0;padding:2px;min-height:50px}.primary-segment{flex:1;min-width:0;padding:8px 6px;gap:5px;font-size:12px}.primary-segment .ico{width:18px;height:18px}
 .app-root:not(.chat-room-mode):not(.route-login){padding-bottom:calc(var(--bottom) + var(--safe-bottom))}
 .bottom-nav-frame{position:fixed;inset-inline:0;bottom:0;z-index:55;display:flex;justify-content:center;padding:6px 8px calc(6px + var(--safe-bottom));border-top:1px solid var(--border-subtle);background:var(--surface)}
 .bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-width:540px;gap:2px}
 .nav-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;min-width:0;padding:3px 1px;border-radius:var(--radius-sm);color:var(--secondary);font-size:10.5px;font-weight:600;line-height:1.6;transition:background-color var(--duration-control),color var(--duration-control)}
 .nav-label{white-space:nowrap}.nav-glyph{height:28px;width:28px;display:grid;place-items:center;border-radius:var(--radius-sm)}.nav-icon .ico{width:20px;height:20px}
 .nav-icon:hover{background:var(--hover);color:var(--fg)}.nav-icon.active{color:var(--accent-fg);background:var(--accent)}.nav-icon:active{background:var(--elevated)}.nav-icon:focus-visible{outline-offset:-2px}
 .nav-sell .nav-glyph{background:var(--primary);color:var(--primary-fg)}.nav-sell:hover .nav-glyph{background:var(--primary-hover)}
 body[data-mobile-keyboard="true"] .bottom-nav-frame{display:none}
 body[data-mobile-keyboard="true"] .app-root:not(.chat-room-mode):not(.route-login){padding-bottom:var(--safe-bottom)}
 .app-content{padding-inline:16px;min-height:calc(100dvh - var(--header) - 84px)}.page{padding:20px 0 28px}.page-title{font-size:23px}.page-subtitle{font-size:13px}.screen-heading{margin-bottom:20px;gap:12px}.screen-titlebar{min-height:70px}.screen-titlebar h1{font-size:19px}.section-heading h2{font-size:17px}.site-footer{margin-inline:16px;gap:12px;flex-wrap:wrap;padding-block:18px}.site-footer>span{flex:1;font-size:11px}.site-footer>a:last-child{font-size:11px}
}
@media(max-width:380px){.nav-icon{font-size:10px}.header-inner{padding-inline:12px;gap:8px}.site-brand{gap:6px}.brand-word{font-size:20px}.brand-mark{width:28px;height:28px}.primary-segment{gap:4px;padding-inline:4px;font-size:11px}.primary-segment .ico{width:16px;height:16px}.app-content{padding-inline:12px}.site-footer{margin-inline:12px}.page-title{font-size:22px}}

/* Accessible global shortcuts and saved-list access. */
.skip-link{position:fixed;top:8px;inset-inline-start:12px;z-index:150;padding:12px 16px;background:var(--surface);color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius);transform:translateY(-150%)}
.skip-link:focus{transform:none}
#app-content:focus{outline:none} #app-content{scroll-margin-top:calc(var(--header) + 12px)}
.header-favorites{position:relative}.saved-count{position:absolute;top:0;inset-inline-end:0;min-width:17px;height:17px;padding:0 3px;display:grid;place-items:center;border-radius:8px;font:600 10px/1 var(--font);background:var(--primary);color:var(--primary-fg)}
@media(max-width:1000px) and (min-width:768px){.header-favorites{display:none}}