/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
:root{--brand:var(--brand-primary,#2c5f8a);--brand-dark:color-mix(in srgb,var(--brand) 70%,black);--brand-light:color-mix(in srgb,var(--brand) 12%,white);}*,*::before,*::after{box-sizing:border-box;}.spa-navbar{background:var(--brand);height:64px;display:flex;align-items:center;padding:0 32px;gap:24px;position:sticky;top:0;z-index:100;}.spa-navbar__logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}.spa-navbar__logo-img{height:36px;width:auto;border-radius:6px;}.spa-navbar__logo-mark{height:36px;width:36px;border-radius:8px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:#fff;}.spa-navbar__name{color:#fff;font-size:15px;font-weight:500;white-space:nowrap;}.spa-navbar__links{display:flex;align-items:center;gap:2px;margin-left:auto;}.spa-navbar__link{color:rgba(255,255,255,0.8);font-size:13px;padding:6px 12px;border-radius:6px;text-decoration:none;display:flex;align-items:center;gap:6px;transition:background 0.15s,color 0.15s;white-space:nowrap;}.spa-navbar__link:hover{background:rgba(255,255,255,0.12);color:#fff;}.spa-navbar__link svg{width:14px;height:14px;flex-shrink:0;opacity:0.85;}.spa-navbar__cta{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:8px;padding:7px 16px;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:background 0.15s;white-space:nowrap;flex-shrink:0;}.spa-navbar__cta:hover{background:rgba(255,255,255,0.25);color:#fff;}.spa-navbar__cta-logo{height:20px;width:auto;border-radius:3px;opacity:0.9;}.spa-hero{background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 100%);padding:28px 32px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}.spa-hero__text h1{color:#fff;font-size:22px;font-weight:500;margin:0 0 4px;}.spa-hero__text p{color:rgba(255,255,255,0.6);font-size:13px;margin:0;}.spa-hero__now-playing{margin-left:auto;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:12px;min-width:240px;}.spa-hero__np-cover{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,0.15);}.spa-hero__np-info{flex:1;min-width:0;}.spa-hero__np-title{color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.spa-hero__np-artist{color:rgba(255,255,255,0.55);font-size:11px;margin-top:2px;}.spa-hero__np-controls{display:flex;align-items:center;gap:6px;}.np-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;flex-shrink:0;}.np-btn:hover{background:rgba(255,255,255,0.28);}.np-btn svg{width:12px;height:12px;fill:#fff;}.np-btn--play{background:rgba(255,255,255,0.9);}.np-btn--play svg{fill:var(--brand);}.np-btn--play:hover{background:#fff;}.spa-main{padding:24px 32px 120px;max-width:1200px;}.spa-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}.spa-section-header h2{font-size:16px;font-weight:500;color:#222;margin:0;}.spa-section-header__see-all{font-size:13px;color:var(--brand);text-decoration:none;cursor:pointer;}.spa-section-header__see-all:hover{text-decoration:underline;}.spa-track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;}.spa-track-card{background:#fff;border:0.5px solid #e0ddd6;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 0.15s,border-color 0.15s,box-shadow 0.15s;}.spa-track-card:hover{transform:translateY(-3px);border-color:#c8c4bc;box-shadow:0 4px 16px rgba(0,0,0,0.08);}.spa-track-card--active{border-color:var(--brand) !important;border-width:1.5px;}.spa-track-card__cover{width:100%;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}.spa-track-card__cover img{width:100%;height:100%;object-fit:cover;display:block;}.spa-track-card__cover-fallback{font-size:40px;line-height:1;}.spa-track-card__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s;}.spa-track-card:hover .spa-track-card__overlay{opacity:1;}.spa-track-card__play-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.92);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}.spa-track-card__play-btn svg{width:16px;height:16px;fill:var(--brand);margin-left:2px;}.spa-track-card__info{padding:10px 12px 12px;}.spa-track-card__title{font-size:13px;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}.spa-track-card__meta{font-size:11px;color:#888;margin-bottom:7px;}.spa-track-card__tags{display:flex;gap:4px;flex-wrap:wrap;}.spa-tag{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:500;}.spa-tag--genre{background:var(--brand-light);color:var(--brand-dark);}.spa-tag--bpm{background:#faeeda;color:#633806;}.spa-tag--freq{background:#e1f5ee;color:#085041;}.spa-player{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:0.5px solid #e0ddd6;padding:10px 32px;display:flex;align-items:center;gap:18px;z-index:200;height:72px;}.spa-player__track{display:flex;align-items:center;gap:12px;min-width:180px;max-width:220px;}.spa-player__thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#eee;}.spa-player__track-title{font-size:13px;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.spa-player__track-artist{font-size:11px;color:#888;margin-top:2px;}.spa-player__controls{display:flex;align-items:center;gap:8px;}.ctrl-btn{width:34px;height:34px;border-radius:50%;background:#f5f4f1;border:0.5px solid #e0ddd6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;flex-shrink:0;}.ctrl-btn:hover{background:#ebe9e4;}.ctrl-btn svg{width:13px;height:13px;fill:#555;}.ctrl-btn--play{width:40px;height:40px;background:var(--brand);border-color:var(--brand);}.ctrl-btn--play svg{fill:#fff;width:15px;height:15px;margin-left:2px;}.ctrl-btn--play:hover{background:var(--brand-dark);}.spa-player__progress{flex:1;display:flex;align-items:center;gap:10px;}.spa-player__time{font-size:11px;color:#888;min-width:30px;white-space:nowrap;}.plyr--audio .plyr__controls{background:transparent;padding:0;border:none;}.spa-player__volume{display:flex;align-items:center;gap:8px;}.spa-player__volume svg{width:16px;height:16px;fill:#888;flex-shrink:0;}.spa-player__vol-track{width:72px;height:3px;background:#e0ddd6;border-radius:2px;cursor:pointer;}.spa-player__vol-fill{height:100%;width:70%;background:#c8c4bc;border-radius:2px;}.spa-sync-badge{display:flex;align-items:center;gap:6px;background:#e1f5ee;border:0.5px solid #9fe1cb;border-radius:8px;padding:5px 12px;font-size:11px;font-weight:500;color:#085041;flex-shrink:0;white-space:nowrap;}.spa-sync-badge__dot{width:7px;height:7px;border-radius:50%;background:#1D9E75;animation:spa-pulse 1.4s ease-in-out infinite;}@keyframes spa-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.45;transform:scale(0.75);}}:root{--plyr-color-main:var(--brand);--plyr-audio-controls-background:transparent;--plyr-audio-control-color:#555;--plyr-range-fill-background:var(--brand);--plyr-range-thumb-background:var(--brand);--plyr-range-track-height:3px;--plyr-range-thumb-height:12px;--plyr-range-thumb-width:12px;}.spa-plyr-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}@media (max-width:640px){.spa-navbar{padding:0 16px;}.spa-navbar__links{display:none;}.spa-hero{padding:20px 16px;}.spa-hero__now-playing{display:none;}.spa-main{padding:16px 16px 100px;}.spa-player{padding:10px 16px;gap:10px;}.spa-player__track{min-width:120px;max-width:140px;}.spa-player__volume{display:none;}}
body{color:#3b3b3b;background:#292929;}#page,#main-wrapper,.region-primary-menu .menu-item a.is-active,.region-primary-menu .menu-item--active-trail a{background:#fff;}.tabs ul.primary li a.is-active{background-color:#fff;}.tabs ul.primary li.is-active a{background-color:#fff;border-bottom-color:#fff;}#navbar-top{background-color:#055a8e;}#navbar-main{background-color:#1d84c3;}a,.link{color:#0071b3;}a:hover,a:focus,.link:hover,.link:focus{color:#018fe2;}.nav-item .dropdown-item a.active{color:white;}.nav-link{color:rgb(231,231,231);}.nav-link:hover,.nav-link:focus{color:rgb(231,231,231);}a:active,.link:active{color:#23aeff;}.page-item.active .page-link{background-color:#0071b3;border-color:#0071b3;}.page-link,.page-link:hover{color:#0071b3;}.sidebar .block{background-color:#f6f6f2;border-color:#f9f9f9;}.btn-primary{background-color:#007bff;border-color:#007bff;}.btn-primary:hover,.btn-primary:focus{background-color:#0256b1;}.site-footer{background:#292929;}.region-header,.region-header a,.region-header li a.is-active,.region-header .site-branding__text,.region-header .site-branding,.region-header .site-branding__text a,.region-header .site-branding a,.region-secondary-menu .menu-item a,.region-secondary-menu .menu-item a.is-active{color:#fffeff;}[dir="rtl"] .color-form .color-palette{margin-left:0;margin-right:20px;}[dir="rtl"] .color-form .form-item label{float:right;}[dir="rtl"] .color-form .color-palette .lock{right:-20px;left:0;}
