/* AkorMate visual system — compact progressive layer over the legacy stylesheet. */
:root {
  --ak-bg: #f5f7fb;
  --ak-surface: #ffffff;
  --ak-surface-muted: #eef3fa;
  --ak-ink: #12213a;
  --ak-muted: #61728f;
  --ak-line: #dbe4f1;
  --ak-line-strong: #bdd0eb;
  --ak-blue: #3678e4;
  --ak-indigo: #7069df;
  --ak-violet: #8b72e8;
  --ak-focus: rgba(54, 120, 228, .18);
  --ak-shadow: 0 18px 45px rgba(32, 59, 102, .10);
  --ak-shadow-hover: 0 24px 54px rgba(26, 56, 103, .15);
  --bg-primary: var(--ak-bg);
  --bg-secondary: var(--ak-surface-muted);
  --bg-card: var(--ak-surface);
  --bg-header: rgba(255, 255, 255, .92);
  --text-primary: var(--ak-ink);
  --text-secondary: var(--ak-muted);
  --color-primary: var(--ak-blue);
  --color-secondary: var(--ak-indigo);
  --border-color: var(--ak-line);
  --shadow: 0 5px 16px rgba(32, 59, 102, .08);
  --shadow-lg: var(--ak-shadow);
}

[data-theme="dark"] {
  --ak-bg: #070b14;
  --ak-surface: #0f1727;
  --ak-surface-muted: #0b1322;
  --ak-ink: #eff4ff;
  --ak-muted: #9aa9c3;
  --ak-line: #233149;
  --ak-line-strong: #3b5279;
  --ak-blue: #78aaff;
  --ak-indigo: #9791ff;
  --ak-violet: #ad93ff;
  --ak-focus: rgba(120, 170, 255, .20);
  --ak-shadow: 0 24px 58px rgba(0, 0, 0, .30);
  --ak-shadow-hover: 0 30px 70px rgba(0, 0, 0, .42);
  --bg-primary: var(--ak-bg);
  --bg-secondary: var(--ak-surface-muted);
  --bg-card: var(--ak-surface);
  --bg-header: rgba(7, 11, 20, .90);
  --text-primary: var(--ak-ink);
  --text-secondary: var(--ak-muted);
  --color-primary: var(--ak-blue);
  --color-secondary: var(--ak-indigo);
  --border-color: var(--ak-line);
}

html { scroll-behavior: smooth; }
body {
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.012em;
  text-rendering: optimizeLegibility;
}

body::selection { background: rgba(112, 105, 223, .28); color: var(--ak-ink); }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 3px; }

/* Shared shell */
.container { width: min(1180px, calc(100% - 48px)); max-width: none; }
.header {
  position: sticky !important;
  top: 0;
  z-index: 1100;
  width: 100%;
  background: var(--bg-header);
  border-bottom: 1px solid var(--ak-line);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* `overflow: hidden` creates a scroll container in some browsers and can
   prevent the shared header from sticking to the viewport. */
@supports (overflow: clip) {
  html, body { overflow-x: clip !important; }
}
@supports not (overflow: clip) {
  html, body { overflow-x: visible !important; }
}
html.auto-scroll-active { scroll-behavior: auto !important; }

@media (max-width: 768px) {
  body.mobile-banner-visible .header { top: var(--mobile-app-banner-height, 64px); }
}
.navbar { min-height: 76px; gap: 18px; padding: 0; }
.logo { flex: 0 0 auto; gap: 8px; font-size: 1.35rem; letter-spacing: -.04em; }
.logo img { width: 34px; height: 34px; margin: 0; object-fit: contain; }
.logo-name { display: inline-flex; gap: .035em; }
.logo-word { color: var(--ak-ink); }
.logo-accent { color: var(--ak-blue); }
.search-form { order: 2; min-width: 190px; max-width: 330px; margin: 0; }
.search-input {
  min-height: 40px;
  padding: .60rem .8rem .60rem 2.35rem;
  border-color: var(--ak-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ak-surface-muted) 78%, transparent);
  font-size: .88rem;
}
.search-input:hover { border-color: var(--ak-line-strong); }
.search-input:focus { border-color: var(--ak-blue); box-shadow: 0 0 0 4px var(--ak-focus); }
.search-icon { left: .78rem; color: var(--ak-blue); font-size: .9rem; }
.nav-links { order: 3; gap: 18px; margin-left: auto; }
.nav-links a { position: relative; color: var(--ak-muted); font-size: .86rem; font-weight: 720; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ak-blue); }
.nav-links a[aria-current="page"]::after { position: absolute; right: 0; bottom: -.7rem; left: 0; height: 2px; border-radius: 99px; background: var(--ak-blue); box-shadow: 0 0 10px color-mix(in srgb, var(--ak-blue) 58%, transparent); content: ""; }
.theme-toggle {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--ak-line);
  border-radius: 11px;
  background: var(--ak-surface);
  font-size: .92rem;
}
.theme-toggle:hover { border-color: var(--ak-line-strong); background: var(--ak-surface-muted); }
.nav-links #nav-login { display: flex; align-items: center; }
.nav-account {
  display: grid;
  align-items: center;
  justify-content: center;
  place-items: center;
  height: 40px;
  min-height: 40px;
  padding: 0 .92rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo));
  box-shadow: 0 8px 18px rgba(54, 120, 228, .20);
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center;
  white-space: nowrap;
}
.nav-account-label { display: block; line-height: 1; transform: translateY(.5px); }
.nav-account:hover { border-color: transparent; box-shadow: 0 11px 24px rgba(54, 120, 228, .30); color: #fff !important; transform: translateY(-1px); }
.mobile-menu-toggle { order: 4; padding: 0; border: 1px solid var(--ak-line); border-radius: 10px; width: 38px; height: 38px; }

.breadcrumb-nav { padding-top: 1rem; }
.breadcrumb { border: 1px solid var(--ak-line); background: var(--ak-surface); border-radius: 10px; }
.footer { position: relative; margin-top: 5rem; padding: 4.5rem 0 1.35rem; overflow: hidden; border: 0; background: #0a1224; color: #d6e2f8; }
.footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(72, 129, 237, .28), transparent 31%), radial-gradient(circle at 82% 10%, rgba(112, 105, 223, .22), transparent 24%); }
.footer .container { position: relative; }
.footer-content { display: grid; grid-template-columns: minmax(250px, 1.6fr) repeat(3, minmax(130px, 1fr)); gap: clamp(2rem, 5vw, 5.5rem); }
.footer-section { min-width: 0; }
.footer-brand { max-width: 330px; }
.footer-logo { display: inline-flex; align-items: center; gap: .62rem; margin-bottom: 1rem; color: #f4f7ff; font-size: 1.35rem; font-weight: 850; letter-spacing: -.06em; text-decoration: none; }
.footer-logo img { width: 38px; height: 38px; object-fit: contain; }
.footer-logo > span { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }
.footer .logo-word { color: #f4f7ff; }.footer .logo-accent { color: #79a8ff; }
.footer-section h3 { margin: .25rem 0 1rem; color: #f4f7ff; font-size: .94rem; letter-spacing: -.02em; }
.footer-section p { margin: 0; color: #aebfda; line-height: 1.65; }
.footer-section a:not(.footer-logo):not(.footer-app-btn) { display: block; width: fit-content; margin: .63rem 0; color: #b5c5df; font-size: .9rem; text-decoration: none; transition: color .18s ease, translate .18s ease; }
.footer-section a:not(.footer-logo):not(.footer-app-btn):hover { color: #fff; translate: 3px 0; }
.footer-store-caption { margin-top: 1.4rem !important; color: #7f95b9 !important; font-size: .74rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.footer .footer-app-links { gap: .55rem; margin-top: .7rem; }
.footer .footer-app-btn { min-width: 0; gap: .68rem; padding: .58rem .82rem; border: 1px solid rgba(158, 187, 239, .24) !important; border-radius: 10px; background: rgba(255,255,255,.06) !important; box-shadow: none; }
.footer .footer-app-btn:hover { background: rgba(104, 140, 231, .26) !important; box-shadow: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(162, 187, 230, .16); color: #8295b8; font-size: .78rem; }
.footer-bottom p { margin: 0; }

/* Professional, consistent primitives used by legacy templates. */
.page-header, .search-header, .blog-header, .about-hero, .contact-hero, .download-hero, .contribute-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ak-line) !important;
  border-radius: 18px !important;
  background: var(--ak-surface) !important;
  box-shadow: var(--ak-shadow) !important;
  color: var(--ak-ink) !important;
}
.page-header, .search-header { padding: clamp(1.5rem, 4vw, 3rem) !important; }
.page-header h1, .search-header h1, .blog-title, .about-hero h1, .contact-hero h1, .download-hero h1, .contribute-hero h1 { color: var(--ak-ink) !important; }
.page-header p, .search-header p, .blog-subtitle, .about-hero p, .contact-hero p, .download-hero p, .contribute-hero p { color: var(--ak-muted) !important; }
.blog-header::before, .about-hero::before, .contact-hero::before, .download-hero::before, .contribute-hero::before { background: linear-gradient(90deg, var(--ak-blue), var(--ak-indigo)) !important; }
.blog-card, .feature-box, .stat-item, .card, .song-card-modern, .song-card, .artist-card, .search-welcome, .no-results, .song-detail, .chord-section {
  border-color: var(--ak-line) !important;
  background: var(--ak-surface) !important;
  box-shadow: 0 12px 30px rgba(27, 52, 93, .06) !important;
}
[data-theme="dark"] .blog-card, [data-theme="dark"] .feature-box, [data-theme="dark"] .stat-item, [data-theme="dark"] .card, [data-theme="dark"] .song-card-modern, [data-theme="dark"] .song-card, [data-theme="dark"] .artist-card, [data-theme="dark"] .search-welcome, [data-theme="dark"] .no-results, [data-theme="dark"] .song-detail, [data-theme="dark"] .chord-section { box-shadow: 0 16px 36px rgba(0,0,0,.17) !important; }
.blog-card:hover, .feature-box:hover, .card:hover, .song-card-modern:hover, .artist-card:hover { border-color: var(--ak-line-strong) !important; box-shadow: var(--ak-shadow-hover) !important; transform: translateY(-3px) !important; }
.song-card-header { display: flex; align-items: center; gap: .75rem; }.catalog-cover { flex: 0 0 auto; overflow: hidden; display: block; width: 48px; height: 48px; border: 1px solid var(--ak-line); border-radius: 11px; background: linear-gradient(140deg, #2b427b, #7665da); }.catalog-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }.artist-avatar { overflow: hidden; }.artist-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artist-avatar-large { overflow: hidden; }.artist-avatar-large img { display: block; width: 100%; height: 100%; object-fit: cover; }
.btn, .search-btn, .btn-refresh, .filter-tag, .blog-category-control { border-radius: 10px !important; }
.btn-primary, .search-btn, .btn-refresh, .filter-tag.active, .blog-category-control[aria-current="page"] { background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; color: #fff !important; }
.btn-primary, .search-btn, .btn-refresh, .filter-tag.active, .blog-category-control[aria-current="page"], .sidebar-view-all, .sidebar-refresh-btn, .view-all-btn, .pagination-btn, .btn-load-more { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.btn-primary *, .search-btn *, .btn-refresh *, .filter-tag.active *, .blog-category-control[aria-current="page"] *, .sidebar-view-all *, .sidebar-refresh-btn *, .view-all-btn *, .pagination-btn *, .btn-load-more * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.btn-secondary { border-color: var(--ak-line-strong) !important; color: var(--ak-blue) !important; background: transparent !important; }
.btn-secondary:hover { background: var(--ak-blue) !important; color: #fff !important; }
.form-input, .search-input-large, .inline-search input, .search-box input { border-color: var(--ak-line) !important; background: var(--ak-surface-muted) !important; color: var(--ak-ink) !important; }

/* Song art fallbacks: missing covers get one of four small music marks, never the product logo. */
.song-cover-fallback { position: relative; display: grid !important; overflow: hidden; place-items: center; border-color: transparent !important; color: rgba(255,255,255,.95); isolation: isolate; }
.song-cover-fallback::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.26), transparent 30%), linear-gradient(145deg, #1f4076, #5f65c9); }
.song-cover-fallback::after { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 1.2em; font-weight: 700; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.song-cover-variant-0.song-cover-fallback::after { content: "♫"; }.song-cover-variant-1.song-cover-fallback::before { background: radial-gradient(circle at 70% 22%, rgba(255,255,255,.26), transparent 26%), linear-gradient(145deg, #3d357f, #8b72e8); }.song-cover-variant-1.song-cover-fallback::after { content: "♬"; }.song-cover-variant-2.song-cover-fallback::before { background: radial-gradient(circle at 30% 75%, rgba(255,255,255,.22), transparent 28%), linear-gradient(145deg, #0f506d, #317fa0); }.song-cover-variant-2.song-cover-fallback::after { content: "♪"; }.song-cover-variant-3.song-cover-fallback::before { background: radial-gradient(circle at 72% 68%, rgba(255,255,255,.25), transparent 28%), linear-gradient(145deg, #4a3b8e, #2c5795); }.song-cover-variant-3.song-cover-fallback::after { content: "✦"; }

/* A tone is metadata, not a button: preserve contrast and remove the pill treatment. */
.key-badge, .home-key, .sidebar-song-key, .other-song-key { display: inline-flex !important; align-items: baseline; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #245fbe !important; font-size: .78rem !important; font-weight: 850 !important; line-height: 1.2; }
.key-label, .home-key::before, .sidebar-song-key::before, .other-song-key::before { content: "Ton"; margin-right: .28rem; color: var(--ak-muted); font-size: .67rem; font-weight: 720; letter-spacing: .02em; }
[data-theme="dark"] .key-badge { color: #8bb9ff !important; }

/* Homepage */
.home-shell { overflow: clip; }
.home-hero {
  position: relative;
  padding: clamp(2rem, 2.8vw, 2.75rem) 0 clamp(2rem, 2.8vw, 2.75rem);
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(112deg, color-mix(in srgb, var(--ak-surface-muted) 82%, var(--ak-bg)), var(--ak-bg) 67%);
}
.home-hero::after { content: none; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(515px, 1.18fr); align-items: center; gap: clamp(1rem, 2.5vw, 3rem); }
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .42rem .7rem;
  border: 1px solid var(--ak-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ak-blue) 7%, var(--ak-surface));
  color: var(--ak-blue);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.home-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-indigo) 15%, transparent); }
.home-title, .home-copy-column h1 { max-width: 620px; margin: 0; color: var(--ak-ink); font-size: clamp(2.75rem, 4.4vw, 4.25rem); line-height: .98; letter-spacing: -.067em; }
.home-title .hero-title-intro, .home-title .hero-title-outro { display: block; color: var(--ak-ink); }
.home-title .hero-title-rotator { display: flex; align-items: baseline; min-height: 1.08em; color: var(--ak-blue); }
.home-title .hero-title-rotator > span:first-child { display: inline-block; }
.hero-title-caret { display: inline-block; width: .055em; height: .82em; margin-left: .085em; background: currentColor; animation: hero-caret-blink .72s step-end infinite; }
@keyframes hero-caret-blink { 50% { opacity: 0; } }
.home-title .sr-only { color: inherit; }
.home-copy { max-width: 510px; margin: 1.35rem 0 0; color: var(--ak-muted); font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.56; }
.home-search { position: relative; display: flex; gap: .5rem; width: min(100%, 535px); margin-top: 1.6rem; padding: .42rem; border: 1px solid var(--ak-line-strong); border-radius: 14px; background: var(--ak-surface); box-shadow: var(--ak-shadow); }
.home-search .home-search-icon { display: grid; place-items: center; width: 36px; color: var(--ak-blue); }
.home-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ak-ink); font-size: .94rem; }
.home-search input::placeholder { color: var(--ak-muted); }
.home-search button { flex: 0 0 auto; min-height: 42px; padding: 0 1rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)); color: #fff; font-weight: 800; }
.home-suggestions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.home-suggestions a { color: var(--ak-muted); font-size: .77rem; font-weight: 700; text-decoration: none; }
.home-suggestions a:hover { color: var(--ak-blue); }
.store-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.store-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .42rem .75rem; border: 1px solid var(--ak-line); border-radius: 11px; background: var(--ak-surface); color: var(--ak-ink); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.store-link:hover { border-color: var(--ak-line-strong); box-shadow: var(--ak-shadow); transform: translateY(-2px); color: var(--ak-ink); }
.store-link i { font-size: 1.15rem; color: var(--ak-blue); }
.store-link small { display: block; color: var(--ak-muted); font-size: .62rem; line-height: 1; }
.store-link strong { display: block; font-size: .84rem; line-height: 1.3; }
.home-facts { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.45rem; }
.home-fact { color: var(--ak-muted); font-size: .75rem; }
.home-fact strong { display: block; color: var(--ak-ink); font-size: .9rem; }

.app-stage { position: relative; display: grid; min-height: clamp(500px, 34vw, 550px); overflow: visible; isolation: isolate; place-items: center; }
.app-stage::before { content: ""; position: absolute; z-index: 0; width: min(720px, 118%); aspect-ratio: 1; border-radius: 47% 53% 55% 45% / 52% 45% 55% 48%; background: radial-gradient(circle at 38% 35%, rgba(117, 166, 255, .42), rgba(93, 115, 228, .17) 45%, rgba(113, 101, 223, .04) 68%, transparent 72%); filter: blur(2px); }
.app-stage::after { content: ""; position: absolute; z-index: 0; width: min(610px, 98%); height: 75%; border: 1px solid rgba(81, 128, 224, .16); border-radius: 48% 52% 50% 50% / 42% 45% 55% 58%; transform: rotate(-8deg) translate(34px, 5px); }
.app-device-visual { position: relative; z-index: 1; display: block; width: min(980px, 160%); max-width: none; transform: translate3d(1.8rem, var(--devices-y, 0), 0) rotate(var(--devices-r, 0)); transition: transform .45s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.app-devices { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 30px 30px rgba(21, 42, 84, .28)); }
[data-theme="dark"] .app-stage::before { background: radial-gradient(circle at 38% 35%, rgba(104, 151, 255, .30), rgba(87, 105, 224, .13) 46%, rgba(62, 69, 151, .04) 67%, transparent 71%); }
[data-theme="dark"] .app-stage::after { border-color: rgba(124, 164, 239, .14); }
.home-content { padding: .5rem 0 1rem; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: 0 0 1rem; }.home-section-heading p { max-width: 400px; margin: 0; color: var(--ak-muted); font-size: .88rem; }.home-section-heading h2 { margin: .25rem 0 0; font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.053em; }.home-section-heading .section-kicker { margin: 0; color: var(--ak-blue); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.home-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-list { min-width: 0; padding: 1rem; border: 1px solid var(--ak-line); border-radius: 16px; background: var(--ak-surface); box-shadow: 0 10px 28px rgba(27, 52, 93, .05); }
.home-list-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ak-line); }.home-list-header h3 { margin: 0; font-size: .98rem; letter-spacing: -.03em; }.home-list-header a { color: var(--ak-blue); font-size: .72rem; font-weight: 800; text-decoration: none; }
.home-song-row { display: grid; grid-template-columns: 23px 34px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .63rem 0; border-bottom: 1px solid var(--ak-line); color: var(--ak-ink); text-decoration: none; transition: background .2s ease; }.home-song-row:last-child { border-bottom: 0; }.home-song-row:hover { color: var(--ak-blue); }.home-rank { color: var(--ak-muted); font-size: .7rem; }.home-cover { overflow: hidden; width: 34px; height: 34px; border: 1px solid var(--ak-line); border-radius: 8px; background: linear-gradient(140deg, #2b427b, #7665da); }.home-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }.home-track { min-width: 0; }.home-track b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }.home-track small { display: block; overflow: hidden; color: var(--ak-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }.home-key { padding: .22rem .37rem; border: 1px solid color-mix(in srgb, var(--ak-blue) 40%, var(--ak-line)); border-radius: 6px; color: var(--ak-blue); background: color-mix(in srgb, var(--ak-blue) 8%, transparent); font-size: .66rem; font-weight: 850; }
.empty-list-message { margin: 1rem 0 0; color: var(--ak-muted); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .75rem; }.home-artist { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .38rem; border-radius: 9px; color: var(--ak-ink); text-decoration: none; }.home-artist:hover { background: var(--ak-surface-muted); color: var(--ak-blue); }.home-avatar { flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)); color: #fff; font-size: .63rem; font-weight: 800; }.home-avatar img { width: 100%; height: 100%; object-fit: cover; }.home-artist b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }.home-artist small { display: block; color: var(--ak-muted); font-size: .65rem; }
.home-contribute { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--ak-line); border-radius: 18px; background: var(--ak-surface-muted); }.home-contribute h2 { margin: 0 0 .4rem; font-size: 1.25rem; }.home-contribute p { max-width: 620px; margin: 0; color: var(--ak-muted); }.home-contribute .btn { flex: 0 0 auto; }

/* Keep consent and mobile-app prompts present but visually secondary. */
.cookie-consent-banner {
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  width: min(500px, calc(100% - 32px)) !important;
  padding: 0 !important;
  border: 1px solid var(--ak-line-strong) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--ak-surface) 96%, transparent) !important;
  box-shadow: var(--ak-shadow-hover) !important;
  backdrop-filter: blur(18px) !important;
}
.cookie-consent-content { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: .8rem !important; align-items: center !important; padding: 1rem !important; }
.cookie-icon-wrapper { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; border: 1px solid var(--ak-line) !important; border-radius: 10px !important; background: var(--ak-surface-muted) !important; color: var(--ak-blue) !important; animation: none !important; }
.cookie-title { margin: 0 0 .25rem !important; color: var(--ak-ink) !important; font-size: .86rem !important; }.cookie-description { margin: 0 !important; color: var(--ak-muted) !important; font-size: .75rem !important; line-height: 1.4 !important; }.cookie-description a { color: var(--ak-blue) !important; }.cookie-actions { display: flex !important; gap: .45rem !important; }.cookie-btn { min-height: 34px !important; padding: 0 .65rem !important; border-radius: 9px !important; font-size: .75rem !important; }.cookie-btn::before { display: none !important; }.cookie-btn-accept { border: 0 !important; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; color: #fff !important; }.cookie-btn-settings { border: 1px solid var(--ak-line-strong) !important; background: transparent !important; color: var(--ak-ink) !important; }.cookie-btn i { display: none !important; }

.mobile-app-banner { background: color-mix(in srgb, var(--ak-surface) 94%, transparent) !important; border-bottom-color: var(--ak-line) !important; box-shadow: var(--ak-shadow) !important; }.mobile-banner-title { color: var(--ak-ink) !important; }.mobile-banner-subtitle { color: var(--ak-muted) !important; }.mobile-banner-btn { background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; }

/* Akor archive and artist archive: stronger information hierarchy than the old gradient cards. */
.song-list-page { padding-bottom: 1rem; }
.archive-eyebrow { display: inline-flex; align-items: center; gap: .42rem; margin: 0 0 .45rem; color: var(--ak-blue); font-size: .72rem; font-weight: 820; letter-spacing: .065em; text-transform: uppercase; }
.song-list-page .page-header { display: grid; align-content: center; min-height: 0; margin-bottom: 1.2rem !important; padding: 1.2rem 1.35rem !important; text-align: left !important; background: linear-gradient(118deg, var(--ak-surface), color-mix(in srgb, var(--ak-blue) 7%, var(--ak-surface))) !important; }
.song-list-page .page-header h1 { justify-content: flex-start !important; margin: 0 0 .35rem !important; color: var(--ak-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important; letter-spacing: -.05em; }
.song-list-page .page-header h1 i { color: var(--ak-blue) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }.song-list-page .page-header p { margin: 0 !important; font-size: 1rem !important; }
.song-list-page .filters-section { margin-bottom: 1.25rem !important; padding: .8rem !important; border: 1px solid var(--ak-line) !important; border-radius: 14px !important; background: var(--ak-surface) !important; box-shadow: 0 10px 25px rgba(27, 52, 93, .05) !important; }
.song-list-page .filter-tag { padding: .58rem .9rem !important; border: 1px solid var(--ak-line) !important; border-radius: 9px !important; background: var(--ak-surface-muted) !important; color: var(--ak-muted) !important; box-shadow: none !important; transform: none !important; }.song-list-page .filter-tag::before { display: none; }.song-list-page .filter-tag:hover, .song-list-page .filter-tag.active { border-color: transparent !important; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; color: #fff !important; }
.song-list-page .inline-search { flex: 1; justify-content: flex-end; }.song-list-page .inline-search .search-input { min-height: 40px; border-radius: 9px; }.song-list-page .inline-search .btn { min-height: 40px; padding: 0 .9rem; }
.song-list-page .songs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 1rem !important; margin-bottom: 2.25rem !important; padding-top: 0 !important; }
.song-list-page .song-card-modern { min-height: 124px; padding: 1rem !important; border-radius: 15px !important; }.song-list-page .song-card-header { align-items: center !important; margin-bottom: .85rem !important; }.song-list-page .catalog-cover { width: 52px; height: 52px; border-radius: 12px; }.song-list-page .song-info { margin-right: 0 !important; }.song-list-page .song-title { font-size: .98rem !important; font-weight: 780 !important; }.song-list-page .song-artist { margin-top: .18rem !important; font-size: .82rem !important; }.song-list-page .song-card-content { padding-top: .7rem; border-top: 1px solid var(--ak-line); }.song-list-page .song-key { margin: 0 !important; }.song-list-page .key-badge { border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #245fbe !important; }.song-list-page .song-stats { gap: .75rem !important; }.song-list-page .stat-item { padding: 0 !important; border: 0 !important; box-shadow: none !important; color: var(--ak-muted) !important; font-size: .73rem !important; }.song-list-page .favorite-btn-songs { top: .85rem !important; right: .85rem !important; }

.artists-container { max-width: 1180px !important; min-height: auto !important; padding: 1.25rem 0 0 !important; }.artists-header { margin-bottom: 1.25rem !important; padding: 1.25rem 1.35rem !important; border: 1px solid var(--ak-line) !important; border-radius: 18px !important; background: linear-gradient(118deg, var(--ak-surface), color-mix(in srgb, var(--ak-indigo) 6%, var(--ak-surface))) !important; box-shadow: var(--ak-shadow) !important; text-align: left !important; }.artists-header::before { height: 2px !important; background: linear-gradient(90deg, var(--ak-blue), var(--ak-indigo), transparent 76%) !important; }.header-content { margin-bottom: 1rem !important; }.artists-container .archive-eyebrow { margin-bottom: .35rem; }.page-title { justify-content: flex-start !important; margin-bottom: .3rem !important; color: var(--ak-ink) !important; font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important; letter-spacing: -.05em; }.page-title i { color: var(--ak-blue) !important; }.page-subtitle { margin: 0 !important; color: var(--ak-muted) !important; }.artists-controls { justify-content: space-between !important; gap: 1rem !important; }.artists-container .search-section { max-width: 420px !important; }.artists-container .search-box { border-color: var(--ak-line) !important; background: var(--ak-surface) !important; box-shadow: none !important; }.artists-container .filter-btn { border: 1px solid var(--ak-line) !important; border-radius: 9px !important; background: var(--ak-surface-muted) !important; color: var(--ak-muted) !important; box-shadow: none !important; }.artists-container .filter-btn.active, .artists-container .filter-btn:hover { border-color: transparent !important; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; color: #fff !important; }.artists-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important; gap: 1rem !important; }.artists-grid .artist-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; column-gap: .85rem; padding: 1rem !important; border: 1px solid var(--ak-line) !important; border-radius: 15px !important; background: var(--ak-surface) !important; box-shadow: 0 10px 25px rgba(27, 52, 93, .05) !important; }.artists-grid .artist-avatar { width: 56px !important; height: 56px !important; margin: 0 !important; border: 1px solid var(--ak-line) !important; border-radius: 14px !important; background: linear-gradient(135deg, var(--ak-blue), var(--ak-indigo)) !important; }.artists-grid .artist-info { text-align: left !important; }.artists-grid .artist-name { margin: .15rem 0 0 !important; color: var(--ak-ink) !important; }.artists-grid .artist-stats { justify-content: flex-start !important; gap: .75rem !important; margin-top: .7rem !important; padding-top: .65rem; border-top: 1px solid var(--ak-line); }.artists-grid .stat-item { min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }.artists-grid .stat-value { color: var(--ak-ink) !important; }.artists-grid .stat-label, .artists-grid .preview-title, .artists-grid .preview-song { color: var(--ak-muted) !important; }.artists-grid .artist-preview { grid-column: 1 / -1; margin-top: .85rem !important; padding: .75rem !important; border-radius: 10px; background: var(--ak-surface-muted) !important; }

/* User-preference-sensitive, subtle movement. */
@media (prefers-reduced-motion: no-preference) {
  .app-device-visual { animation: device-float 7s ease-in-out infinite; }
  .home-eyebrow::before { animation: eyebrow-pulse 2.8s ease-in-out infinite; }
  @keyframes device-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  @keyframes eyebrow-pulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-indigo) 15%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ak-indigo) 3%, transparent); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-caret { animation: none; }
}

@media (max-width: 1050px) {
  .navbar { gap: 12px; }.nav-links { gap: 12px; }.search-form { max-width: 250px; }.home-hero-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }.app-stage { min-height: 500px; }.app-device-visual { width: min(860px, 150%); }.home-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-list:last-child { grid-column: span 2; }
}
@media (max-width: 780px) {
  .container { width: min(100% - 28px, 1180px); }.navbar { min-height: 68px; flex-wrap: wrap; padding: .7rem 0; }.logo { order: 1; }.search-form { order: 3; width: 100%; max-width: none; }.nav-links { order: 5; width: 100%; margin: 0; padding: .25rem 0 .5rem; border-top: 1px solid var(--ak-line); }.nav-links li { width: 100%; }.nav-links a { display: block; padding: .55rem 0; }.nav-account { justify-content: center; }.mobile-menu-toggle { display: grid; place-items: center; margin-left: auto; }.home-hero { padding-top: 2.35rem; }.home-hero-grid { grid-template-columns: 1fr; }.home-copy-column { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }.app-stage { grid-column: 1; grid-row: 2; min-height: 370px; margin-top: .75rem; }.app-device-visual { width: min(660px, 130%); transform: translate3d(.7rem, var(--devices-y, 0), 0) rotate(var(--devices-r, 0)); }.home-section-heading { align-items: start; flex-direction: column; gap: .45rem; }.home-lists { grid-template-columns: 1fr; }.home-list:last-child { grid-column: auto; }.home-contribute { align-items: start; flex-direction: column; }.footer { padding-top: 3rem; }.footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.4rem; }.footer-brand { grid-column: 1 / -1; max-width: 470px; }.footer-bottom { align-items: flex-start; flex-direction: column; margin-top: 2.3rem; }.song-list-page .page-header { min-height: 0; }.song-list-page .inline-search { width: 100%; justify-content: stretch; }.song-list-page .inline-search .search-input { flex: 1; }.artists-controls { align-items: stretch !important; flex-direction: column; }.artists-container .search-section { width: 100%; max-width: none !important; }
}
@media (max-width: 460px) {
  .home-title, .home-copy-column h1 { font-size: clamp(2.45rem, 12vw, 3.1rem); }.home-search button { padding: 0 .72rem; }.home-facts { gap: .8rem; }.store-links { display: grid; grid-template-columns: 1fr 1fr; }.store-link { min-width: 0; padding-inline: .55rem; }.store-link strong { font-size: .76rem; }.app-stage { min-height: 300px; }.app-device-visual { width: min(540px, 130%); }.home-artist-grid { grid-template-columns: 1fr; }.footer-content { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }.footer .footer-app-links { flex-direction: row; }.footer .footer-app-btn { width: auto; max-width: none; }.song-list-page .filters-section { align-items: stretch !important; flex-direction: column; }.song-list-page .filter-tags { display: grid; grid-template-columns: repeat(3, 1fr); }.song-list-page .filter-tag { justify-content: center; padding-inline: .45rem !important; font-size: .78rem; }.song-list-page .songs-grid, .artists-grid { grid-template-columns: 1fr !important; }
}

/* Final card/action contract. Legacy templates place local CSS after this sheet, so these
   declarations intentionally carry the contrast and layout guarantees. */
.song-card-modern .song-key, .song-card .song-key, .search-results .song-key, .artist-page-container .song-key, .favorites-grid .song-key, .repertoire-songs .song-key { display: inline-flex !important; align-items: baseline !important; gap: .32rem !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ak-muted) !important; }
.song-card-modern .song-key .key-label, .song-card .song-key .key-label, .search-results .song-key .key-label, .artist-page-container .song-key .key-label, .favorites-grid .song-key .key-label, .repertoire-songs .song-key .key-label { margin: 0 !important; color: var(--ak-muted) !important; font-size: .68rem !important; font-weight: 720 !important; letter-spacing: .02em; }
.song-card-modern .song-key .key-badge, .song-card .song-key .key-badge, .search-results .song-key .key-badge, .artist-page-container .song-key .key-badge, .favorites-grid .song-key .key-badge, .repertoire-songs .song-key .key-badge { min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #245fbe !important; font-size: .78rem !important; font-weight: 850 !important; }
[data-theme="dark"] .song-card-modern .song-key .key-badge, [data-theme="dark"] .song-card .song-key .key-badge, [data-theme="dark"] .search-results .song-key .key-badge, [data-theme="dark"] .artist-page-container .song-key .key-badge { color: #8bb9ff !important; }

/* Compact navy actions: one visual language for search, filters and account actions. */
.btn-primary, .search-btn, .btn-refresh, .filter-tag.active, .blog-category-control[aria-current="page"], .sidebar-view-all, .sidebar-refresh-btn, .pagination-btn, .btn-load-more, .nav-account { border: 1px solid rgba(103, 154, 227, .58) !important; border-radius: 13px !important; background: linear-gradient(135deg, #1d3658, #2d5283) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(26, 55, 98, .16) !important; color: #f7faff !important; -webkit-text-fill-color: #f7faff !important; }
.btn-primary:hover, .search-btn:hover, .btn-refresh:hover, .filter-tag.active:hover, .sidebar-view-all:hover, .sidebar-refresh-btn:hover, .pagination-btn:hover, .btn-load-more:hover, .nav-account:hover { border-color: #76a8f5 !important; background: linear-gradient(135deg, #25466f, #37639a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 11px 23px rgba(26, 55, 98, .22) !important; color: #fff !important; }

/* Header action: prevent line-box baseline alignment from shifting the label upward. */
.nav-links #nav-login { align-self: center; height: 40px; margin: 0; padding: 0; }
.nav-links #nav-login .nav-account { display: block !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 .92rem !important; line-height: 40px !important; }
.nav-links #nav-login .nav-account-label { display: inline !important; position: static !important; margin: 0 !important; padding: 0 !important; line-height: 40px !important; transform: none !important; vertical-align: baseline; }

/* Homepage live search and shared primary action. */
.home-search { isolation: isolate; }
.home-search button { border: 1px solid rgba(103, 154, 227, .58) !important; background: linear-gradient(135deg, #1d3658, #2d5283) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(26, 55, 98, .16); }
.home-search button:hover { border-color: #76a8f5 !important; background: linear-gradient(135deg, #25466f, #37639a) !important; }
.home-search-results { position: absolute; z-index: 5; top: calc(100% + .55rem); left: 0; width: 100%; overflow: hidden; border: 1px solid var(--ak-line-strong); border-radius: 14px; background: color-mix(in srgb, var(--ak-surface) 95%, transparent); box-shadow: 0 18px 42px rgba(17, 36, 72, .18); backdrop-filter: blur(18px); }
.home-search-results[hidden] { display: none; }
.home-search-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border-bottom: 1px solid var(--ak-line); color: var(--ak-ink); text-decoration: none; }
.home-search-result:last-child { border-bottom: 0; }
.home-search-result:hover { background: var(--ak-surface-muted); color: var(--ak-ink); }
.home-search-result-details { min-width: 0; }
.home-search-result-details b, .home-search-result-details small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-search-result-details b { font-size: .87rem; }
.home-search-result-details small { margin-top: .14rem; color: var(--ak-muted); font-size: .74rem; }
.home-search-result-key { flex: 0 0 auto; color: var(--ak-blue); font-size: .76rem; font-weight: 850; }

/* Sign-in surface. */
.auth-container { width: min(1080px, calc(100% - 48px)); max-width: none; min-height: calc(100vh - 220px); gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(2rem, 6vw, 5rem) 0; }
.auth-container .auth-card { padding: clamp(2rem, 4vw, 3.5rem); border: 1px solid var(--ak-line); border-radius: 22px; background: linear-gradient(145deg, var(--ak-surface), color-mix(in srgb, var(--ak-indigo) 5%, var(--ak-surface))); box-shadow: var(--ak-shadow); }
.auth-container .auth-header { margin-bottom: 2.25rem; text-align: left; }
.auth-container .auth-header h1 { color: var(--ak-ink); font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -.055em; }
.auth-container .auth-header p { color: var(--ak-muted); line-height: 1.6; }
.auth-container .btn-google { min-height: 54px; border: 1px solid var(--ak-line-strong); border-radius: 13px; background: var(--ak-surface-muted); color: var(--ak-ink); box-shadow: none; }
.auth-container .btn-google i { color: #4285f4; }
.auth-container .btn-google:hover { border-color: var(--ak-blue); background: var(--ak-surface); box-shadow: var(--ak-shadow); color: var(--ak-ink); }
.auth-container .auth-footer { border-color: var(--ak-line); }
.auth-container .auth-features { padding: clamp(2rem, 4vw, 3.5rem); border: 1px solid color-mix(in srgb, var(--ak-blue) 35%, var(--ak-line)); border-radius: 22px; background: linear-gradient(145deg, #17345b, #2d5283); box-shadow: 0 20px 45px rgba(21, 52, 94, .22); }
.auth-container .auth-features h3 { font-size: clamp(1.55rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.auth-container .auth-features li { gap: .7rem; padding: .35rem 0; font-size: 1rem; }

/* Chord learner. */
.learn-hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 !important; background: linear-gradient(118deg, var(--ak-surface), color-mix(in srgb, var(--ak-blue) 13%, var(--ak-surface-muted))) !important; color: var(--ak-ink) !important; text-align: left !important; }
.learn-hero::before { content: ""; position: absolute; inset: auto -8% -100px auto; width: 420px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ak-blue) 28%, transparent), transparent 68%); }
.learn-hero .container { position: relative; }
.learn-hero h1 { color: var(--ak-ink) !important; font-size: clamp(2.4rem, 5vw, 4.25rem) !important; letter-spacing: -.065em; }
.learn-hero h1 i { color: var(--ak-blue); }
.learn-hero p { color: var(--ak-muted) !important; max-width: 650px; margin: 0 !important; }
.learn-layout { width: min(1180px, calc(100% - 48px)); max-width: none; padding: clamp(2rem, 5vw, 4rem) 0 !important; }
.learn-layout .chord-selector-section, .learn-layout .chord-diagram-section, .learn-layout .chord-info-section { border: 1px solid var(--ak-line); border-radius: 20px; background: var(--ak-surface); box-shadow: var(--ak-shadow); }
.learn-layout .selector-header { text-align: left; }
.learn-layout .selector-header h2, .learn-layout .guide-section > h2 { color: var(--ak-ink); letter-spacing: -.045em; }
.learn-layout .selector-header p, .learn-layout .guide-card p { color: var(--ak-muted); }
.learn-layout .chord-categories { gap: 1rem; }
.learn-layout .category-card { border: 1px solid var(--ak-line); border-radius: 16px; background: var(--ak-surface-muted); }
.learn-layout .category-card:hover { border-color: var(--ak-line-strong); box-shadow: 0 12px 28px rgba(27, 52, 93, .10); transform: translateY(-2px); }
.learn-layout .category-icon, .learn-layout .finger-position, .learn-layout .finger-number { background: linear-gradient(135deg, #1d3658, #2d5283); }
.learn-layout .chord-btn { border: 1px solid var(--ak-line); border-radius: 9px; background: var(--ak-surface); color: var(--ak-ink); }
.learn-layout .chord-btn:hover, .learn-layout .chord-btn.active { border-color: transparent; background: linear-gradient(135deg, #1d3658, #2d5283); color: #fff; transform: translateY(-1px); }
.learn-layout .empty-state, .learn-layout .guide-card { border: 1px solid var(--ak-line); border-radius: 16px; background: var(--ak-surface); box-shadow: 0 10px 26px rgba(27, 52, 93, .05); }
.learn-layout .guide-card h3, .learn-layout .empty-state h3 { color: var(--ak-ink); }
[data-theme="dark"] .learn-layout .fretboard { background: #273650; }
[data-theme="dark"] .learn-layout .string-column::before { background: #c7d6ee; }
[data-theme="dark"] .learn-layout .fret-cell { border-color: #a8906e; }

/* Blog index. */
.blog-container { width: min(1180px, calc(100% - 48px)); max-width: none; padding: clamp(2rem, 5vw, 4rem) 0; }
.blog-container .blog-header { padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--ak-line); border-radius: 22px; background: linear-gradient(118deg, var(--ak-surface), color-mix(in srgb, var(--ak-indigo) 7%, var(--ak-surface))); box-shadow: var(--ak-shadow); text-align: left; }
.blog-container .blog-header::before { background: linear-gradient(90deg, var(--ak-blue), var(--ak-indigo), transparent 72%); }
.blog-container .blog-title { justify-content: flex-start; color: var(--ak-ink); font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -.065em; }
.blog-container .blog-title i { color: var(--ak-blue); }
.blog-container .blog-subtitle { color: var(--ak-muted); }
.blog-container .blog-categories { justify-content: flex-start; gap: .55rem; }
.blog-container .blog-category-control { border-color: var(--ak-line); background: var(--ak-surface); color: var(--ak-muted); }
.blog-container .blog-category-control:hover, .blog-container .blog-category-control[aria-current="page"] { background: linear-gradient(135deg, #1d3658, #2d5283); color: #fff; }
.blog-container .blog-grid { gap: 1rem; }
.blog-container .blog-card { border: 1px solid var(--ak-line); border-radius: 18px; background: var(--ak-surface); box-shadow: 0 10px 28px rgba(27, 52, 93, .06); }
.blog-container .blog-card:hover { border-color: var(--ak-line-strong); box-shadow: 0 18px 38px rgba(27, 52, 93, .12); transform: translateY(-4px); }
.blog-container .blog-featured-img { height: 165px; background: linear-gradient(135deg, #1d3658, #2d5283 58%, #667eea); }
.blog-container .blog-category { background: color-mix(in srgb, var(--ak-blue) 10%, var(--ak-surface)); border: 1px solid color-mix(in srgb, var(--ak-blue) 24%, var(--ak-line)); color: var(--ak-blue); }
.blog-container .blog-post-title, .blog-container .blog-post-title a { color: var(--ak-ink); }
.blog-container .blog-post-title a:hover, .blog-container .read-more-btn { color: var(--ak-blue); }
.blog-container .blog-excerpt, .blog-container .blog-meta, .blog-container .blog-tag { color: var(--ak-muted); }
.blog-container .blog-tag { border-color: var(--ak-line); background: var(--ak-surface-muted); }
.blog-container .blog-page-link, .blog-container .blog-page-current { border-color: var(--ak-line); background: var(--ak-surface); color: var(--ak-muted); }
.blog-container .blog-page-link:hover, .blog-container .blog-page-current { border-color: transparent; background: linear-gradient(135deg, #1d3658, #2d5283); color: #fff; }

@media (max-width: 780px) {
  .auth-container, .learn-layout, .blog-container { width: min(100% - 28px, 1180px); }
  .auth-container { min-height: 0; }
  .learn-hero, .blog-container .blog-header { text-align: left !important; }
  .blog-container .blog-title { align-items: flex-start; justify-content: flex-start; }
}

/* Content-first learn and blog indexes: keep the semantic H1, remove the large hero bands. */
.learn-layout { padding-top: 1.4rem !important; }
.learn-layout .selector-header { margin-bottom: 1.5rem; }
.learn-layout .selector-header h1 { margin: 0 0 .45rem; color: var(--ak-ink); font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.05em; }
.learn-layout .selector-header h1 + p { max-width: 650px; margin: 0; }
.blog-container { padding-top: 1.45rem; }
.blog-container .blog-categories { justify-content: flex-start; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--ak-line); border-radius: 14px; background: var(--ak-surface); box-shadow: 0 10px 25px rgba(27, 52, 93, .05); }

/* The same photo-card markup is used for initial and searched artists. */
.artists-container { width: min(100% - 28px, 1180px); }
.artists-grid[aria-busy="true"] { opacity: .6; }
.artists-grid a.artist-photo-card {
  display: flex !important; align-items: flex-end; position: relative; isolation: isolate;
  height: 280px; min-width: 0; padding: 0 !important; overflow: hidden;
  border: 1px solid var(--ak-line) !important; border-radius: 8px !important;
  background: #27463f !important; color: #fff !important; text-decoration: none !important;
}
.artists-grid a.artist-photo-variant-1 { background: #443347 !important; }
.artists-grid a.artist-photo-variant-2 { background: #2d414b !important; }
.artists-grid a.artist-photo-variant-3 { background: #393e35 !important; }
.artist-photo-card::before { display: none; }
.artist-photo-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.85) 100%); pointer-events: none; }
.artist-photo-card .artist-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .2s ease; }
.artist-photo-card:hover .artist-photo { transform: scale(1.035); }
.artist-photo-placeholder { position: absolute; inset: 0; z-index: -3; display: grid; place-items: center; padding-bottom: 55px; color: rgba(255,255,255,.3); font-size: 64px; font-weight: 750; }
.artist-photo-content { width: 100%; min-width: 0; padding: 18px; text-align: left; }
.artist-photo-count { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; color: rgba(255,255,255,.86); font-size: .75rem; }
.artist-photo-name { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: 1.2rem; font-weight: 750; line-height: 1.25; letter-spacing: 0; }
.artist-photo-preview { margin: .6rem 0 0; overflow: hidden; color: rgba(255,255,255,.72); font-size: .75rem; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.artist-photo-arrow { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: rgba(0,0,0,.25); color: #fff; }
.artists-container .filter-btn { text-decoration: none; }

/* Song artwork fills the header; key and statistics stay below the divider. */
.song-list-page .song-photo-card { min-height: 0; padding: 0 !important; overflow: hidden; border-radius: 8px !important; }
.song-list-page .song-photo-header { position: relative; isolation: isolate; height: 156px; align-items: flex-end !important; margin-bottom: 0 !important; overflow: hidden; background: #294740; }
.song-list-page .song-photo-variant-1 { background: #443347; }
.song-list-page .song-photo-variant-2 { background: #2d414b; }
.song-list-page .song-photo-variant-3 { background: #393e35; }
.song-photo-header::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.86) 100%); pointer-events: none; }
.song-photo-header .song-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.song-photo-placeholder { position: absolute; inset: 0; z-index: -3; display: grid; place-items: center; padding-bottom: 30px; color: rgba(255,255,255,.24); font-size: 40px; }
.song-photo-header .song-info { min-width: 0; padding: 16px; }
.song-list-page .song-photo-header .song-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: #fff !important; }
.song-list-page .song-photo-header .song-artist { overflow: hidden; color: rgba(255,255,255,.82) !important; text-overflow: ellipsis; white-space: nowrap; }
.song-list-page .song-photo-card .song-card-content { min-height: 42px; padding: .65rem 1rem; }

.song-list-page .archive-random-header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.2rem; }
.archive-random-header > p, .archive-random-header > h1 { grid-column: 1; }
.song-list-page .archive-random-refresh { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; width: max-content; height: 40px; margin: 0; padding: 0 .85rem; border-radius: 8px !important; font-size: .82rem; white-space: nowrap; }
@media (max-width: 760px) {
  .song-list-page .archive-random-header { grid-template-columns: minmax(0, 1fr); row-gap: .7rem; }
  .song-list-page .archive-random-refresh { grid-column: 1; grid-row: auto; }
}

/* Shared editorial layout for product information and policies. */
.info-page { --info-anchor-offset: 104px; padding-top: 2.5rem; padding-bottom: 2rem; letter-spacing: 0; }
.info-page.container { padding-inline: 0; }
.info-page-heading { padding-bottom: 2rem; border-bottom: 1px solid var(--ak-line); }
.info-eyebrow { margin: 0 0 .65rem; color: var(--ak-blue); font-size: .8rem; font-weight: 750; }
.info-page-heading h1 { margin: 0; color: var(--ak-ink); font-size: 2.5rem; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
.info-lead { max-width: 720px; margin: .85rem 0 0; color: var(--ak-muted); font-size: 1.05rem; line-height: 1.7; }
.info-meta { margin: 1rem 0 0; color: var(--ak-muted); font-size: .78rem; }
.info-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 3.5rem; padding-top: 2rem; }
.info-sidebar { position: sticky; top: var(--info-anchor-offset); align-self: start; min-width: 0; }
.info-nav-label { margin: 0 0 .75rem; color: var(--ak-muted); font-size: .75rem; font-weight: 700; }
.info-sidebar nav a { display: block; padding: .55rem 0; color: var(--ak-muted); font-size: .88rem; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.info-sidebar nav a:hover, .info-sidebar nav a:focus-visible { color: var(--ak-blue); }
.info-sidebar-contact { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--ak-line); font-size: .82rem; }
.info-sidebar-contact p { margin: 0 0 .4rem; color: var(--ak-muted); }
.info-sidebar-contact a { color: var(--ak-blue); text-decoration: none; font-weight: 650; }
.info-sidebar-contact i { margin-left: .35rem; }
.info-content { min-width: 0; max-width: 810px; color: var(--ak-ink); }
.info-section { margin: 0 0 2.25rem; scroll-margin-top: var(--info-anchor-offset); }
.info-section + .info-section { padding-top: 2rem; border-top: 1px solid var(--ak-line); }
.info-content h2 { margin: 0 0 1rem; color: var(--ak-ink); font-size: 1.4rem; line-height: 1.35; letter-spacing: 0; }
.info-content h3 { margin: 1.5rem 0 .65rem; font-size: 1.05rem; line-height: 1.5; letter-spacing: 0; }
.info-content p, .info-content li { color: var(--ak-muted); font-size: .95rem; line-height: 1.85; overflow-wrap: anywhere; }
.info-content p { margin: 0 0 1rem; }
.info-content ul, .info-content ol { margin: 1rem 0; padding-left: 1.25rem; }
.info-content li { margin-bottom: .65rem; padding-left: .2rem; }
.info-content li::marker { color: var(--ak-blue); }
.info-content strong { color: var(--ak-ink); font-weight: 650; }
.info-content a { color: var(--ak-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.info-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .88rem; font-weight: 650; }
.info-note { padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--ak-blue); margin: 1.5rem 0; }
.info-note p { margin: 0; font-size: .86rem; }
.info-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 1.25rem 0; border-top: 1px solid var(--ak-line); }
.info-stats div { display: flex; flex-direction: column-reverse; gap: .25rem; }
.info-stats dt { color: var(--ak-muted); font-size: .75rem; }
.info-stats dd { margin: 0; color: var(--ak-blue); font-size: 1.6rem; font-weight: 750; line-height: 1.3; }
.info-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.info-feature-list > div { min-width: 0; }
.info-feature-list i { color: var(--ak-blue); font-size: 1.15rem; }
.info-feature-list h3 { margin-top: .75rem; font-size: 1rem; }
.info-feature-list p { font-size: .86rem; line-height: 1.75; }
.info-product-visual { width: min(100%, 580px); margin: 1.5rem auto 0; }
.info-product-visual img { display: block; width: 100%; height: auto; }
.info-reference-links { font-size: .86rem; }
.info-related { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--ak-line); }
.info-related a { font-size: .82rem; }
.info-related a[aria-current="page"] { color: var(--ak-muted); text-decoration: none; }
@media (max-width: 900px) {
  .info-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .info-sidebar { position: static; }
  .info-sidebar nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ak-line); }
  .info-nav-label { flex-basis: 100%; margin-bottom: .25rem; }
  .info-sidebar nav a { padding: .4rem 0; }
  .info-sidebar-contact { display: none; }
}
@media (max-width: 768px) {
  .info-page.container { width: calc(100% - 32px); padding-top: 1.25rem; }
  body.mobile-banner-visible .info-page { --info-anchor-offset: calc(88px + var(--mobile-app-banner-height, 64px)); }
  .info-page-heading { padding-bottom: 1.25rem; }
  .info-page-heading h1 { font-size: 1.65rem; overflow-wrap: normal; }
  .info-lead { font-size: .96rem; }
  .info-layout { padding-top: .75rem; gap: 1.25rem; }
  .info-sidebar nav { flex-wrap: nowrap; gap: 1.25rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
  .info-nav-label { display: none; }
  .info-sidebar nav a { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
  .info-content h2 { font-size: 1.25rem; }
  .info-content p, .info-content li { font-size: 1rem; line-height: 1.75; }
  .info-section { margin-bottom: 1.5rem; }
  .info-section + .info-section { padding-top: 1.5rem; }
  .info-action i { flex: 0 0 auto; }
}
@media (max-width: 520px) {
  .info-feature-list { grid-template-columns: 1fr; gap: 1rem; }
  .info-feature-list > div + div { padding-top: 1rem; border-top: 1px solid var(--ak-line); }
  .info-stats { gap: .6rem; }
  .info-stats dd { font-size: 1.25rem; }
  .info-stats dt { font-size: .7rem; }
}

/* One-line mobile shell: keep navigation in a compact popover instead of pushing search below the logo. */
@media (max-width: 780px) {
  .header .container { width: min(100% - 24px, 1180px); }
  .navbar { position: relative; min-height: 62px; flex-wrap: nowrap !important; gap: .55rem; padding: .65rem 0 !important; }
  .logo { flex: 0 0 auto; order: 1; gap: .35rem; font-size: 1.12rem; }
  .logo img { width: 30px; height: 30px; }
  .search-form { order: 2; flex: 1 1 auto; width: auto !important; min-width: 0; max-width: none; margin: 0 !important; }
  .search-form .search-input { min-width: 0; min-height: 38px; padding: .5rem .65rem .5rem 2rem; font-size: .82rem; }
  .search-form .search-icon { left: .65rem; font-size: .76rem; }
  .mobile-menu-toggle { display: grid !important; flex: 0 0 38px; place-items: center; order: 3; width: 38px; height: 38px; margin-left: 0; }
  .nav-links { position: absolute; top: calc(100% + .45rem); right: 0; left: 0; display: none; width: auto; max-height: calc(100vh - 120px); margin: 0; padding: .55rem !important; overflow: auto; border: 1px solid var(--ak-line) !important; border-radius: 14px; background: color-mix(in srgb, var(--ak-surface) 97%, transparent); box-shadow: var(--ak-shadow); backdrop-filter: blur(18px); }
  .nav-links.active { display: flex !important; }
  .nav-links li { width: 100%; }
  .nav-links a:not(.nav-account) { display: block; padding: .68rem .72rem !important; border-radius: 9px; }
  .nav-links a[aria-current="page"]::after { right: auto; bottom: .4rem; left: .72rem; width: 28px; }
  .nav-links #nav-login { width: 100%; height: auto; }
  .nav-links #nav-login .nav-account { display: block !important; width: 100%; }
}
@media (max-width: 365px) {
  .logo-name { display: none; }
  .song-list-page .filter-tag i { display: none; }
}
@media (max-width: 640px) {
  .song-list-page .filter-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .song-list-page .filter-tag { gap: .3rem; }
}