:root { --bg: #0b0d10; --glass: rgba(255,255,255,.04); --border: rgba(255,255,255,.08); }
html, body { min-height: 100%; }
body { min-height: 100vh; background: radial-gradient(1000px 500px at 10% 0%,#112 0%,transparent 60%),radial-gradient(1000px 600px at 90% 10%,#021 0%,transparent 60%),linear-gradient(180deg,var(--bg) 0%,#0a0c0f 100%); }
a { color: #8bb9fe; }
.navbar { background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.navbar button[title="Preferences"] { display: none; }
.brand-button { border: 0; color: #f8f9fa; background: transparent; padding: .25rem 0; }
.app-menu { position: relative; }
.app-menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 13rem; padding: .4rem; background: #171a1f; border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.35); z-index: 1100; }
.app-menu-item { display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: .35rem; background: transparent; color: #f8f9fa; text-align: left; text-decoration: none; }
.app-menu-item:hover, .app-menu-item:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.app-menu-check { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem; color: #f8f9fa; cursor: pointer; }
.app-menu-user { padding: .4rem .6rem; color: #adb5bd; font-size: .875rem; border-top: 1px solid var(--border); margin-top: .25rem; }
.desktop-search { max-width: 42rem; }
.quote-card { background: var(--glass); border: 1px solid var(--border); border-radius: 1rem; transition: transform .15s ease,box-shadow .2s ease,border-color .2s ease; }
.quote-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.quote-card[tabindex]:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #86b7fe; outline-offset: 2px; }
blockquote { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.quote-mark { font-size: 1.4rem; opacity: .6; margin-right: .35rem; }
.tag { font-size: .75rem; border: 1px solid var(--border)!important; padding: .15rem .5rem; border-radius: 999px; opacity: .85; }
.muted { opacity: .72; }
.glass-input { background: var(--glass); border: 1px solid var(--border); color: #fff; }
.glass-input:focus { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: none; }
.glass-input::placeholder { color: #aaa; }
.sidebar-sticky { position: sticky; top: 90px; }
.top-popular .popular-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.top-popular .popular-panel > * { margin-bottom: 0!important; }
.dark-select { background-color: rgba(33,37,41,.95); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.modal { background: rgba(0,0,0,.12); }
.modal-content { background: #171a1f; border-color: var(--border); }
.qod-content { margin: 0 3rem; }
.qod-arrow { position: absolute; top: 50%; translate: 0 -50%; border: 0; border-radius: 50%; width: 2.5rem; height: 2.5rem; margin: .25rem; background: rgba(0,0,0,.4); color: white; font-size: 1.75rem; line-height: 1; }
.qod-arrow:disabled { opacity: .25; }
.site-footer { margin-top: 3rem; border-color: var(--border)!important; }
.empty-state { text-align: center; color: #999; padding: 4rem 1rem; }
.validation-message { color: #ff8f8f; }
#blazor-error-ui { color-scheme: light; background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
@media (max-width: 767.98px) { .top-popular .popular-panel { grid-template-columns: 1fr; } .navbar .container-xxl { gap: .5rem!important; } }
@media (max-width: 991.98px) { .sidebar-sticky { position: static; } }