/* Public sound library. Admin styles remain in their own layout. */
.user-login { width:100%; max-width:440px; margin:64px auto 20px; padding:30px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.user-login h1 { margin:0 0 12px; font:normal 36px/1.2 Georgia,"Times New Roman",serif; color:#f0eee0; }
.user-login .login-intro { margin:0 0 26px; color:var(--muted); }
.user-login label { display:block; margin-bottom:8px; font-weight:600; }
.tabletop .user-login #login-name { width:100%; min-height:48px; background:#111a17; border:1px solid #45523e; border-radius:6px; color:var(--ink); padding:11px 13px; font:inherit; }
.login-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.tabletop .login-button { padding:11px 18px; border-radius:6px; font:600 13px/1.5 system-ui,sans-serif; }
.tabletop .login-primary { background:#d0b27b; color:#1b241d; border:1px solid #d0b27b; }
.tabletop .login-primary:hover { background:#e0c490; }
.tabletop .login-secondary { border:1px solid #45523e; background:transparent; color:var(--ink); }
.tabletop .login-secondary:hover { background:#26352a; }
.login-message { padding:12px 14px; border:1px solid; border-radius:6px; margin:0 0 20px; }
.login-error { color:#efb7a8; background:#35241f; border-color:#694239; }
.login-success { color:#c1ddb4; background:#243326; border-color:#435b3e; }
.login-admin-link { display:inline-block; margin-top:28px; color:var(--muted)!important; font-size:12px; }
.login-library-link { display:block; color:var(--accent)!important; margin-bottom:24px; }
.account-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabletop .account-current { color:var(--accent)!important; }
@media(max-width:760px) { .user-login { margin-top:36px; padding:24px; } .account-name { max-width:120px; } }
body.tabletop { color-scheme:dark; --ink:#e7e8df; --muted:#9da99e; --accent:#d5b97d; --line:#2a3730; --bg:#111a17; --surface:#18231d; display:flex; flex-direction:column; min-height:100vh; margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
.tabletop a { color:inherit; } .tabletop a:hover { text-decoration:none; color:#e5c98f; }
.tabletop svg { display:block; width:22px; height:22px; flex-shrink:0; }
.tabletop button { cursor:pointer; } .tabletop button:disabled { cursor:not-allowed; opacity:.4; }
.tabletop :focus-visible { outline:2px solid #e4c78e; outline-offset:4px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 20px; background:#d5b97d; color:#111a17!important; z-index:100; } .skip-link:focus { top:12px; }
.library-header { background:#101814; border-bottom:1px solid var(--line); }
.header-inner { max-width:1376px; min-height:76px; padding:0 40px; margin:auto; display:flex; align-items:center; gap:48px; }
.library-brand { display:flex; align-items:center; gap:12px; font-size:17px; font-weight:650; letter-spacing:-.5px; } .library-brand>svg { width:39px; height:39px; color:var(--accent); } .brand-secondary { font-weight:400; color:#c2c9be; }
.header-inner nav { align-self:stretch; gap:30px; align-items:center; margin-left:auto; } .header-inner nav a { display:flex; align-items:center; height:100%; font-size:13px; font-weight:500; color:#a5afa4; border-bottom:2px solid transparent; padding-top:2px; } .header-inner nav a.nav-current { color:#e0c58e; border-color:#c8a66d; }
.admin-entry { display:flex; align-items:center; gap:7px; font-size:13px; color:#a6b1a5!important; } .admin-entry svg { width:15px; height:15px; }
.library-shell { width:100%; flex:1; max-width:1376px; margin:0 auto; padding:0 40px 60px; }
.library-hero { position:relative; z-index:2; padding:30px 0 20px; isolation:isolate; }
.hero-copy { position:relative; z-index:1; pointer-events:none; } .hero-eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:600; letter-spacing:2px; color:#bea976; } .hero-eyebrow>span { width:5px; height:5px; background:#c8ab73; transform:rotate(45deg); }
.library-hero h1 { font:normal clamp(34px,3.8vw,52px)/1.12 Georgia,"Times New Roman",serif; letter-spacing:-1.7px; color:#f0eee0; margin:12px 0 10px; } .library-hero h1 em { font-style:italic; color:#d7bb82; } .hero-copy>p { color:#a6b2a7; font-size:13px; line-height:1.85; margin:0; }
.hero-map { position:absolute; right:0; top:0; width:44%; max-width:520px; height:100%; max-height:320px; object-fit:contain; z-index:-1; opacity:.95; mask-image:linear-gradient(to right,transparent,#000 13%); }
.library-search { display:flex; align-items:center; width:min(700px,100%); gap:13px; background:#1d2821; border:1px solid #45523e; box-shadow:0 6px 26px #0002; padding:6px 6px 6px 18px; margin-top:0; border-radius:8px; }
.library-search>svg { color:#a8b09c; width:19px; }
.tabletop #sound-search { min-width:0; flex:1; border:0; outline:none; background:transparent; padding:6px 0; color:#eef0e8; font-size:13px; min-height:37px; border-radius:0; } .tabletop .library-search input::placeholder { color:#a0aa9c; }
.library-search button { display:flex; align-items:center; gap:20px; border:0; border-radius:5px; background:#d0b27b; color:#1b241d; font-size:13px; font-weight:700; padding:12px 17px; white-space:nowrap; } .library-search button:hover { background:#e0c490; } .library-search button svg { width:17px; height:17px; }
.search-suggestions { display:flex; align-items:center; gap:16px; font-size:11px; margin-top:10px; color:#a9b4a8; } .search-suggestions>span { color:#829080; } .search-suggestions a { color:#b6bdab; } .search-suggestions a span { color:#697c67; margin-left:3px; }
.library-classifications { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.library-multiselect { position:relative; flex:0 1 calc((100% - 24px)/3); min-width:240px; }
.library-multiselect>summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 14px; margin:0; border:1px solid #45523e; border-radius:7px; background:#1d2821; list-style:none; font-size:12px; }
.library-multiselect>summary::-webkit-details-marker { display:none; } .library-multiselect[open] { z-index:3; } .library-multiselect[open]>summary { border-color:#c8b181; margin:0; }
.multiselect-label { color:#cbd5c3; flex-shrink:0; } .multiselect-value { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-left:auto; font-weight:400; color:#a5b398; }
.library-multiselect summary>svg { width:13px; height:13px; transform:rotate(90deg); color:#a5b398; } .library-multiselect[open] summary>svg { transform:rotate(-90deg); }
.multiselect-count { padding:0 6px; border-radius:4px; background:#39432b; color:#e0c78f; font-size:11px; }
.multiselect-menu { position:absolute; top:calc(100% + 6px); left:0; right:0; padding:12px; border:1px solid #536047; border-radius:8px; background:#18231d; box-shadow:0 14px 35px #0008; }
.tabletop .multiselect-menu input[type="search"].multiselect-search { background:#111a17; border:1px solid #3c4931; color:var(--ink); font-size:12px; min-height:38px; padding:8px 10px; }
.multiselect-options { max-height:240px; overflow-y:auto; overscroll-behavior:contain; margin:10px 0 0; }
.multiselect-option { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:4px; color:#bdcbb2; font-size:12px; cursor:pointer; overflow-wrap:anywhere; } .multiselect-option:hover { background:#263220; } .multiselect-option:has(input:checked) { color:#e0c78f; background:#2b3325; }
.multiselect-option input { accent-color:#d5b97d; } .multiselect-empty { margin:12px 4px; color:#97a88d; font-size:12px; }
.multiselect-actions { display:flex; justify-content:space-between; gap:10px; padding-top:12px; margin-top:10px; border-top:1px solid var(--line); } .multiselect-actions button { border:1px solid #45523e; border-radius:4px; color:#d3c092; background:#25301f; padding:6px 10px; font-size:11px; }
.classification-help { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; margin-top:10px; color:#8e9d88; font-size:11px; } .classification-help p { margin:0; } .classification-help a { margin-left:auto; color:#cfb47b; }
.library-workspace { display:grid; grid-template-columns:222px minmax(0,1fr); gap:34px; padding-top:29px; scroll-margin-top:22px; align-items:start; }
.library-filters { min-width:0; border-right:1px solid var(--line); padding-right:23px; }
.library-filters>summary { display:flex; align-items:center; gap:10px; list-style:none; font-weight:650; font-size:13px; color:#d9dfd2; padding:0 0 20px; } .library-filters>summary::-webkit-details-marker { display:none; } .library-filters>summary>svg:first-child { color:#9fae94; width:17px; height:17px; } .filter-chevron { margin-left:auto; width:15px!important; transition:transform .15s; } .library-filters[open] .filter-chevron { transform:rotate(90deg); } .library-filters[open]>summary { margin-bottom:0; }
.filter-section-heading { display:flex; align-items:center; justify-content:space-between; margin:4px 0 10px; } .filter-section-heading h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:#849580; margin:0; } .filter-section-heading>a { color:#b9a374; font-size:11px; }
.category-navigation { display:flex; flex-direction:column; gap:3px; } .category-item { display:flex; align-items:center; gap:9px; padding:8px 9px 8px calc(9px + var(--category-indent,0px)); border-radius:5px; font-size:13px; color:#a6b19f!important; line-height:1.4; min-height:34px; } .category-item>span:nth-child(2) { overflow-wrap:anywhere; min-width:0; } .category-item>svg { width:16px; height:16px; } .category-item:hover { background:#1c2920; color:#e0e6d8!important; } .category-item.is-selected { background:#2b3325; color:#e2c994!important; } .category-item.is-open:not(.is-selected) { color:#d4dccb!important; } .category-dot { width:4px; height:4px; border:1px solid #6a7a60; border-radius:50%; flex-shrink:0; margin:0 6px; } .category-chevron { width:12px!important; height:12px!important; margin-left:auto; } .category-item.is-open .category-chevron { transform:rotate(90deg); }
.filter-hint { font-size:11px; line-height:1.7; color:#8e9d88; margin:13px 3px 0; } .filter-divider { height:1px; background:var(--line); margin:23px 0 18px; }
.library-field-label { display:block; font-size:12px; font-weight:600; color:#c5cebc; margin:16px 0 7px; }
.tabletop select { border:1px solid #344332; border-radius:5px; color:#ccd5c5; background:#18241c; padding:8px 30px 8px 10px; min-height:37px; font-size:12px; text-overflow:ellipsis; cursor:pointer; }
.apply-filters { width:100%; padding:9px 10px; border:1px solid #4c5c40; border-radius:5px; color:#cfdaa9; background:#25301f; font-size:12px; margin-top:19px; } .reset-filters { display:block; text-align:center; color:#adba9e!important; font-size:11px; margin-top:14px; }
.library-results { min-width:0; transition:opacity .15s; } .library-results[aria-busy=true] { opacity:.55; }
.results-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:21px; } .micro-label { display:block; font-size:9px; font-weight:650; letter-spacing:1.7px; color:#87997f; } .results-heading h1 { display:flex; align-items:center; gap:12px; font:normal 28px/1.2 Georgia,serif; margin:5px 0 0; letter-spacing:-.5px; color:#e2e6d7; } .result-count { display:inline-grid; place-items:center; background:#253022; border:1px solid #39462f; padding:2px 7px; min-width:27px; border-radius:5px; font:11px/1.7 system-ui,sans-serif; letter-spacing:0; color:#b3c39e; }
.library-sort { display:flex; align-items:center; gap:10px; } .library-sort label { font-size:11px; color:#8c9b83; } .tabletop .library-sort select { width:auto; min-height:34px; background:transparent; font-size:11px; }
.sound-type-tabs { display:flex; gap:5px; border-bottom:1px solid #34412e; padding-bottom:12px; } .type-tab { display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 13px; color:#a0af94!important; font-size:12px; font-weight:500; white-space:nowrap; border:1px solid transparent; border-radius:5px; } .type-tab svg { width:15px; height:15px; } .type-tab:hover { background:#1f2c21; } .type-tab.is-selected { background:#303626; border-color:#595a3b; color:#e0c78f!important; }
.results-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#83947c; font-size:11px; padding:16px 0 12px; } .tiny-play { font-size:9px; margin-right:5px; color:#b6a36e; }
.sound-results { display:grid; gap:9px; } .sound-card { display:flex; align-items:center; gap:17px; padding:18px 20px; background:#1a251d; border:1px solid #303d2d; border-radius:8px; min-width:0; transition:border-color .15s,background .15s; } .sound-card:hover { background:#1e2a20; border-color:#536047; } .sound-card.is-playing { background:#252e20; border-color:#9b8b54; }
.play-trigger { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #62704b; color:#d9c186; background:#263120; flex-shrink:0; } .play-trigger svg { width:18px; height:18px; } .play-trigger:hover,.play-trigger[aria-pressed=true] { color:#1a2319; background:#cfb47b; border-color:#cfb47b; }
.sound-card-copy { min-width:0; flex:1; } .sound-title-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .sound-title-line h3 { font-size:14px; font-weight:600; color:#e2e7d8; margin:0; overflow-wrap:anywhere; } .sound-kind { font-size:9px; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border:1px solid #526444; color:#b8c69b; border-radius:3px; white-space:nowrap; } .kind-ambience { color:#a4c5b8; border-color:#3d6457; } .kind-music { color:#c5b3cf; border-color:#65546c; }
.sound-description { color:#a7b49a; font-size:12px; margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } .sound-category { margin:6px 0 0; color:#91a080; font-size:10px; overflow-wrap:anywhere; } .sound-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; } .sound-tags a { font-size:10px; color:#a4b592; background:#263220; border-radius:3px; padding:1px 6px; }
.sound-card-end { align-self:center; display:flex; align-items:center; gap:20px; color:#a8b79b; } .sound-duration { font-size:12px; font-variant-numeric:tabular-nums; } .sound-details { display:grid; place-items:center; width:29px; height:34px; } .sound-details svg { width:17px; height:17px; } .unavailable-label { font-size:11px; color:#aaa88d; }
.library-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:300px; padding:30px 20px 40px; border:1px dashed #35422e; border-radius:8px; background:radial-gradient(ellipse at 50% 0%,#26322166,transparent 75%); } .empty-compass { display:grid; place-items:center; width:64px; height:64px; background:#293321; border:1px solid #465036; border-radius:50%; margin:0 0 18px; color:#bca875; box-shadow:0 0 0 9px #26302150; } .empty-compass svg { width:33px; height:33px; } .library-empty h3 { font:normal 26px/1.2 Georgia,serif; color:#dfe4d3; margin:9px 0 13px; letter-spacing:-.3px; } .library-empty p { font-size:13px; line-height:1.8; color:#98aa89; margin:0; } .library-empty>a { margin-top:19px; font-size:13px; color:#d2b879; }
.library-pagination { display:flex; justify-content:space-between; align-items:center; margin-top:25px; font-size:13px; color:#a8b897; } .library-pagination a { color:#d3bc87; }
.library-footer { border-top:1px solid var(--line); background:#101814; color:#9da99e; font-size:12px; }
.footer-inner { max-width:1376px; margin:0 auto; padding:28px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner small { font-size:inherit; }
.home-intro { max-width:700px; padding:76px 0 58px; }
.home-intro h1 { font:normal clamp(34px,3.8vw,52px)/1.15 Georgia,"Times New Roman",serif; letter-spacing:-1.2px; margin:0 0 22px; color:#f0eee0; }
.home-intro p { color:#a6b2a7; font-size:16px; line-height:1.85; margin:0 0 28px; }
.home-library-link { display:inline-flex; align-items:center; gap:18px; padding:12px 18px; border-radius:5px; background:#d0b27b; color:#1b241d!important; font-size:13px; font-weight:650; } .home-library-link:hover { background:#e0c490; } .home-library-link svg { width:18px; height:18px; }
.home-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; border-top:1px solid var(--line); padding:32px 0 24px; }
.home-features h2 { font-size:16px; margin:0 0 12px; font-weight:600; } .home-features p { color:#9da99e; font-size:13px; line-height:1.8; margin:0; }
.tabletop .panel { background:#1b271e; border-color:#394832; } .tabletop .page-heading { padding-top:36px; } .tabletop .badge { background:#2b3924; color:#c3d0b2; } .tabletop .secondary { background:#263320; color:#cad8b5; border-color:#495b3c; } .tabletop .note { background:#2b3622; color:#c5c7a2; }
.player-dock { position:fixed; z-index:40; bottom:0; left:0; right:0; display:grid; grid-template-columns:minmax(150px,1fr) minmax(210px,1.4fr) auto; align-items:center; gap:30px; padding:17px max(24px,calc((100vw - 1296px)/2)); background:#1a251cee; backdrop-filter:blur(20px); border-top:1px solid #7c7950; box-shadow:0 -10px 40px #0004; } .has-player { padding-bottom:108px; }
.player-now { display:flex; align-items:center; gap:12px; min-width:0; } .player-now>div { min-width:0; } .player-now strong { display:block; font-size:13px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:3px; } .player-art { display:grid; place-items:center; width:40px; height:40px; background:#323c25; border:1px solid #59613b; border-radius:6px; color:#d2b982; flex-shrink:0; }
.player-center { display:flex; align-items:center; gap:11px; } .dock-play { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#d4b77d; color:#1a2116; flex-shrink:0; } .dock-play svg { width:17px; height:17px; } .player-time { font-size:11px; font-variant-numeric:tabular-nums; color:#b3c0a4; } #library-player input[type=range] { padding:0; min-height:20px; height:20px; border:0; border-radius:0; accent-color:#cdb176; background:transparent; box-shadow:none; cursor:pointer; } .player-center input { flex:1; min-width:40px; } .player-options { display:flex; align-items:center; gap:12px; } .player-options input { width:66px!important; } .icon-button { display:grid; place-items:center; background:transparent; border:0; color:#97a684; min-width:32px; min-height:34px; padding:4px; border-radius:4px; } .icon-button svg { width:17px; height:17px; } .icon-button:hover { color:#dbc48b; } .icon-button[aria-pressed=true] { color:#e3c281; background:#3f4329; } .volume-icon { width:16px!important; height:16px!important; color:#96a47f; } .player-error { grid-column:1/-1; color:#e0ae9a; font-size:12px; margin:0; }
.search-error { padding:12px 15px; background:#392b24; color:#e6b699; border:1px solid #6e4c37; border-radius:6px; font-size:13px; }
@media(max-width:1040px) { .footer-inner { padding-left:26px; padding-right:26px; } .header-inner { gap:28px; padding:0 26px; } .library-shell { padding-left:26px; padding-right:26px; } .library-workspace { grid-template-columns:195px minmax(0,1fr); gap:24px; } .library-filters { padding-right:18px; } .hero-map { width:41%; opacity:.7; } .library-search { width:75%; } .type-tab { padding:8px 9px; gap:5px; font-size:11px; } .sound-card { padding:16px; gap:13px; } .sound-card-end { gap:8px; } .library-sort label { display:none; } .player-dock { gap:18px; padding:14px 20px; } .player-options input,.volume-icon { display:none!important; } }
@media(max-width:760px) { .footer-inner { padding:24px 20px; flex-wrap:wrap; gap:12px 24px; } .home-intro { padding:40px 0; } .home-intro p { font-size:14px; } .home-features { grid-template-columns:1fr; gap:24px; padding-top:28px; } .header-inner { min-height:70px; gap:15px; padding:0 20px; } .library-brand { font-size:14px; gap:8px; } .library-brand>svg { width:31px; height:31px; } .header-inner nav { display:none; } .admin-entry { margin-left:auto; font-size:11px; } .library-shell { padding:0 20px 35px; } .library-hero { padding-top:30px; } .library-hero h1 { max-width:80%; font-size:43px; letter-spacing:-1.3px; } .hero-map { width:52%; right:-15px; opacity:.32; mask-image:linear-gradient(to right,transparent,#000 65%); } .hero-copy p { font-size:13px; } .hero-eyebrow { font-size:9px; } .library-search { width:100%; position:relative; z-index:1; } .library-search button { gap:0; padding:12px; } .library-search button svg { display:none; } .library-workspace { display:flex; flex-direction:column; gap:24px; padding-top:20px; } .library-filters { width:100%; border:1px solid #3c4931; padding:0; border-radius:6px; background:#18231a; } .library-filters>summary { padding:12px 15px; } .filter-body { padding:5px 15px 20px; } .category-navigation { max-height:360px; overflow:auto; } .library-results { width:100%; } .results-heading { margin-bottom:16px; } .results-heading h1 { font-size:27px; } .sound-type-tabs { gap:4px; } .type-tab { flex:1; padding:8px 5px; font-size:11px; } .type-tab svg { width:13px; height:13px; } .results-meta { font-size:10px; } .sound-card { padding:15px 12px; gap:12px; } .play-trigger { width:44px; height:44px; } .sound-title-line { gap:5px; } .sound-title-line h3 { font-size:13px; } .sound-kind { font-size:7px; } .sound-card-end { flex-direction:column; gap:2px; } .sound-description { font-size:11px; } .sound-tags { gap:4px; } .sound-tags a { font-size:9px; } .player-dock { grid-template-columns:minmax(0,1fr) auto; gap:10px 15px; padding:11px 16px; } .player-now { grid-column:1; } .player-options { grid-column:2; grid-row:1; gap:6px; } .player-center { grid-column:1/-1; grid-row:2; } .has-player { padding-bottom:145px; } .library-empty { min-height:300px; } }
@media(max-width:760px) { .library-multiselect { flex-basis:100%; min-width:0; } }
@media(max-width:400px) { .library-brand { font-size:13px; } .library-hero h1 { font-size:37px; } .hero-copy p br { display:none; } .search-suggestions { gap:12px; font-size:10px; } .library-search { gap:8px; padding-left:12px; } .library-search input[type=search] { font-size:12px; } .library-search button { font-size:11px; } .type-tab svg { display:none; } .results-heading h1 { font-size:24px; } .tabletop .library-sort select { max-width:122px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }