/* Chosen concept 2: the Nordlicht web composition; other profile variants remain intact. */
@font-face {
  font-family: "Priva Inter";
  src: url("/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
body[data-presentation="overview"] {
  --bg: #020f1c; --surface: #061929; --raised: #0e2b43;
  --line: #183d56; --muted: #a9cce6; --active: #008cff;
  background: var(--bg); color: #f4f7fc; font-family: "Priva Inter", "Segoe UI", Arial, sans-serif;
}
body[data-presentation="overview"] :is(button, input, select, textarea) { font-family: inherit; }
body[data-presentation="overview"]::before { display: none; }
body[data-presentation="overview"] .shell { display: block; min-height: 100vh; max-width: 1600px; margin: auto; background: #02121f; box-shadow: none; }
body[data-presentation="overview"] .sidebar { position: relative; inset: auto; width: 100%; min-height: 82px; padding: 14px 28px; display: flex; flex-direction: row; align-items: center; gap: 28px; border: 0; border-bottom: 1px solid #102b40; background: #041728; }
body[data-presentation="overview"] .brand { display: flex; align-items: center; min-height: 0; height: auto; padding: 0; margin: 0; gap: 10px; font-size: 30px; white-space: nowrap; }
body[data-presentation="overview"] .brand img { width: 47px; height: 53px; object-fit: contain; transform: scale(1.3); }
body[data-presentation="overview"] .brand span { display: block; }
body[data-presentation="overview"] .brand i { font-style: normal; font-weight: 400; }
body[data-presentation="overview"] #navigation { display: flex; flex: 1; gap: 8px; margin: 0; }
body[data-presentation="overview"] #navigation button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; height: 52px; padding: 14px 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 16px; white-space: nowrap; }
body[data-presentation="overview"] #navigation [aria-current] { background: #008fff; box-shadow: 0 0 18px #009fff25; border-color: #16acff; }
body[data-presentation="overview"] #navigation .ui-icon { width: 26px; height: 26px; }
body[data-presentation="overview"] .ui-icon { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
body[data-presentation="overview"] .sidebar .profile { display: none; }
body[data-presentation="overview"] #open-account { display: inline-flex; gap: 10px; align-items: center; min-height: 48px; padding: 0; border: 0; background: transparent; font-size: 16px; font-weight: 400; margin-left: auto; white-space: nowrap; }
body[data-presentation="overview"] .header-avatar { width: 43px; height: 43px; border: 2px solid #1abaff; border-radius: 50%; object-fit: cover; }
body[data-presentation="overview"] #open-account .ui-icon { width: 20px; height: 20px; }
body[data-presentation="overview"] main { padding: 14px 28px 24px; min-width: 0; position: static; }
body[data-presentation="overview"] .preview-banner,
body[data-presentation="overview"] footer { display: none; }
body[data-presentation="overview"] .topbar { height: auto; min-height: 60px; margin: 0; padding: 12px 0; }
body[data-presentation="overview"] .topbar > div { visibility: visible; }
body[data-presentation="overview"][data-view="home"] .topbar { display: none; }
body[data-presentation="overview"] .topbar h1 { margin: 0; font-size: 28px; }
body[data-presentation="overview"] .topbar .eyebrow { display: none; }
body[data-presentation="overview"] #content { min-width: 0; }
body[data-presentation="overview"] .overview-sourcebar { display: flex; gap: 24px; align-items: center; padding-bottom: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
body[data-presentation="overview"] .overview-source-choice { display: flex; align-items: center; position: relative; min-width: 300px; width: 320px; height: 44px; border: 1px solid #1c4969; border-radius: 7px; background: #051829; }
body[data-presentation="overview"] .overview-source-choice > .ui-icon { position: absolute; left: 16px; pointer-events: none; width: 22px; height: 22px; }
body[data-presentation="overview"] .overview-source-choice select { width: 100%; height: 44px; padding: 0 32px 0 60px; margin: 0; background: transparent; border: 0; color: #edf5ff; font-size: 16px; border-radius: 7px; }
body[data-presentation="overview"] .overview-manage { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #34c9ff; background: transparent; border: 0; padding: 8px 0; text-decoration: underline; font-size: 16px; }
body[data-presentation="overview"] .overview-manage .ui-icon { filter: invert(68%) sepia(86%) saturate(1660%) hue-rotate(155deg); }
body[data-presentation="overview"] .overview-greeting { margin-bottom: 10px; }
body[data-presentation="overview"] .overview-greeting h1 { font-size: 34px; line-height: 1.25; letter-spacing: -.5px; margin: 0 0 2px; }
body[data-presentation="overview"] .overview-greeting p { font-size: 20px; color: var(--muted); margin: 0; line-height: 1.4; }
body[data-presentation="overview"] .overview-stage { display: grid; grid-template-columns: minmax(0, 2.22fr) minmax(270px, 1fr); gap: 14px; }
body[data-presentation="overview"] .overview-hero { position: relative; width: 100%; aspect-ratio: 2.29; min-height: 320px; overflow: hidden; background: linear-gradient(0deg, #0010219c, transparent 70%), var(--overview-image, linear-gradient(130deg, #0e3450, #031629)) center / cover; border: 1px solid #164362; border-radius: 7px; }
body[data-presentation="overview"] .overview-hero-copy { position: absolute; left: 34px; bottom: 28px; right: 24px; }
body[data-presentation="overview"] .overview-hero h2 { margin: 0; font-size: 54px; line-height: 1.1; letter-spacing: 1px; }
body[data-presentation="overview"] .overview-hero p { margin: 0 0 18px; font-size: 24px; line-height: 1.35; color: #b7d4ec; }
body[data-presentation="overview"] .overview-play { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 58px; width: 300px; max-width: 100%; border: 2px solid #5bd0ff; border-radius: 10px; color: white; background: linear-gradient(110deg, #00a4ff, #0086ff); box-shadow: 0 0 16px #009aff85; font-size: 23px; font-weight: 700; padding: 12px 20px; }
body[data-presentation="overview"] .overview-play .ui-icon { width: 29px; height: 29px; }
body[data-presentation="overview"] .overview-playlists { border: 1px solid #183e56; background: #051827; padding: 22px 20px; border-radius: 7px; min-width: 0; }
body[data-presentation="overview"] .overview-playlists h2 { margin: 0 0 18px; font-size: 23px; }
body[data-presentation="overview"] .overview-source-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
body[data-presentation="overview"] .overview-playlist-row { display: flex; width: 100%; align-items: center; gap: 24px; min-height: 64px; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: #d0e6f7; text-align: left; font-size: 18px; }
body[data-presentation="overview"] .overview-playlist-row > .ui-icon:first-child { width: 30px; height: 30px; }
body[data-presentation="overview"] .overview-playlist-row > .ui-icon:last-child { margin-left: auto; width: 20px; height: 20px; }
body[data-presentation="overview"] .overview-playlist-row[aria-pressed="true"] { background: #102f4b; border: 1px solid #1c5175; border-radius: 9px; color: white; }
body[data-presentation="overview"] .overview-playlist-add { display: inline-flex; justify-content: flex-start; gap: 24px; align-items: center; background: transparent; border: 0; min-height: 64px; width: 100%; padding: 16px 12px; margin-top: 12px; color: var(--muted); font-size: 18px; text-align: left; }
body[data-presentation="overview"] .overview-playlist-add .ui-icon { width: 30px; height: 30px; }
body[data-presentation="overview"] .overview-continued { margin-top: 24px; }
body[data-presentation="overview"] .overview-continued .section-head { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
body[data-presentation="overview"] .overview-continued h2 { font-size: 25px; margin: 0; }
body[data-presentation="overview"] .overview-all { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; border: 0; background: transparent; color: #41ccff; font-size: 15px; padding: 6px 0; }
body[data-presentation="overview"] .overview-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body[data-presentation="overview"] .overview-card { display: block; min-width: 0; width: 100%; padding: 0; text-align: left; border: 0; border-radius: 0; background: transparent; color: #f5f7fa; }
body[data-presentation="overview"] .overview-card-art { position: relative; aspect-ratio: 2.18; background: #0b2940; border: 1px solid #1c4969; border-radius: 7px; overflow: hidden; display: grid; place-items: center; }
body[data-presentation="overview"] .overview-card-art > img { width: 100%; height: 100%; object-fit: cover; }
body[data-presentation="overview"] .overview-card progress { position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: 8px; border: 0; border-radius: 8px; overflow: hidden; appearance: none; }
body[data-presentation="overview"] progress::-webkit-progress-bar { background: #53708db8; border-radius: 8px; }
body[data-presentation="overview"] progress::-webkit-progress-value { background: #00c1ff; border-radius: 8px; }
body[data-presentation="overview"] progress::-moz-progress-bar { background: #00c1ff; border-radius: 8px; }
body[data-presentation="overview"] .overview-card strong { display: block; font-size: 18px; margin: 6px 0 3px; line-height: 1.3; }
body[data-presentation="overview"] .overview-card small { font-size: 17px; color: var(--muted); }
body[data-presentation="overview"] .overview-mobile-manage { display: none; }
body[data-presentation="overview"] .overview-demo-note { color: #8fb2cc; font-size: 12px; margin: 18px 0 0; }
body[data-presentation="overview"] #mobile-navigation { display: none; }
body[data-presentation="overview"] #mobile-menu { width: min(430px, calc(100% - 28px)); background: #061a2b; border: 1px solid #265471; border-radius: 12px; color: white; padding: 20px; }
body[data-presentation="overview"] #mobile-menu-items { display: grid; gap: 10px; }
body[data-presentation="overview"] #mobile-menu-items button { text-align: left; min-height: 48px; }
body[data-presentation="overview"] :is(button, a, select, input):focus-visible { outline: 2px solid #71dcff; outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 961px) {
  body[data-presentation="overview"] .sidebar { gap: 14px; padding-inline: 20px; }
  body[data-presentation="overview"] .brand { font-size: 23px; gap: 6px; }
  body[data-presentation="overview"] #navigation { gap: 2px; }
  body[data-presentation="overview"] #navigation button { gap: 6px; padding: 12px 8px; font-size: 14px; }
  body[data-presentation="overview"] .overview-stage { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
}
@media (max-width: 960px) {
  body[data-presentation="overview"] .shell { width: 100%; max-width: none; border: 0; }
  body[data-presentation="overview"] .sidebar { min-height: 70px; padding: 12px 20px; gap: 8px; }
  body[data-presentation="overview"] .brand { font-size: 25px; gap: 8px; }
  body[data-presentation="overview"] .brand img { width: 34px; height: 40px; }
  body[data-presentation="overview"] #open-account { font-size: 15px; gap: 8px; }
  body[data-presentation="overview"] .header-avatar { width: 38px; height: 38px; }
  body[data-presentation="overview"] #navigation { display: none; }
  body[data-presentation="overview"] main { padding: 8px 18px calc(92px + env(safe-area-inset-bottom, 0px)); }
  body[data-presentation="overview"] .overview-sourcebar { border: 0; margin-bottom: 18px; padding: 0; }
  body[data-presentation="overview"] .overview-source-choice { min-width: 0; width: 100%; height: 52px; }
  body[data-presentation="overview"] .overview-source-choice select { height: 52px; }
  body[data-presentation="overview"] .overview-manage { display: none; }
  body[data-presentation="overview"] .overview-greeting { margin: 0 0 16px; }
  body[data-presentation="overview"] .overview-greeting h1 { font-size: 27px; letter-spacing: -.5px; line-height: 1.23; margin-bottom: 4px; }
  body[data-presentation="overview"] .overview-greeting p { font-size: 18px; }
  body[data-presentation="overview"] .overview-stage { display: block; }
  body[data-presentation="overview"] .overview-hero { aspect-ratio: 1.35; min-height: 260px; background-position: 57% center; }
  body[data-presentation="overview"] .overview-hero { background-image: linear-gradient(0deg, #001021c4, transparent 75%), var(--overview-image, linear-gradient(130deg, #0e3450, #031629)); }
  body[data-presentation="overview"] .overview-hero-copy { left: 14px; right: 14px; bottom: 16px; }
  body[data-presentation="overview"] .overview-hero h2 { font-size: 39px; letter-spacing: .5px; }
  body[data-presentation="overview"] .overview-hero p { font-size: 18px; margin-bottom: 16px; }
  body[data-presentation="overview"] .overview-play { width: 100%; font-size: 21px; min-height: 56px; padding: 12px; }
  body[data-presentation="overview"] .overview-playlists { display: none; }
  body[data-presentation="overview"] .overview-continued { margin-top: 24px; }
  body[data-presentation="overview"] .overview-continued h2 { font-size: 24px; }
  body[data-presentation="overview"] .overview-all { font-size: 0; }
  body[data-presentation="overview"] .overview-cards { display: grid; grid-auto-columns: calc((100% - 14px) / 2); grid-auto-flow: column; grid-template-columns: none; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  body[data-presentation="overview"] .overview-cards { scrollbar-width: none; }
  body[data-presentation="overview"] .overview-cards::-webkit-scrollbar { display: none; }
  body[data-presentation="overview"] .overview-card { scroll-snap-align: start; }
  body[data-presentation="overview"] .overview-card-art { aspect-ratio: 1.65; }
  body[data-presentation="overview"] .overview-card progress { height: 6px; left: 8px; bottom: 6px; width: calc(100% - 16px); }
  body[data-presentation="overview"] .overview-card strong { font-size: 16px; margin: 6px 0 2px; }
  body[data-presentation="overview"] .overview-card small { font-size: 15px; }
  body[data-presentation="overview"] .overview-mobile-manage { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 52px; padding: 12px 16px; margin-top: 8px; background: #071b2a; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 15px; }
  body[data-presentation="overview"] .overview-mobile-manage .ui-icon:last-child { margin-left: auto; width: 20px; }
  body[data-presentation="overview"] .overview-demo-note { font-size: 11px; }
  body[data-presentation="overview"] #mobile-navigation { display: flex; max-width: none; margin: 0; position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; height: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: #041625f5; border-top: 1px solid #1b394f; }
  body[data-presentation="overview"] #mobile-navigation button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; border: 0; background: transparent; padding: 4px; font-size: 13px; color: #edf5ff; min-height: 48px; }
  body[data-presentation="overview"] #mobile-navigation .ui-icon { width: 27px; height: 27px; }
  body[data-presentation="overview"] #mobile-navigation button[aria-current] { color: #00b6ff; background: transparent; box-shadow: none; font-weight: 400; }
  body[data-presentation="overview"] #mobile-navigation [aria-current] .ui-icon { filter: invert(59%) sepia(99%) saturate(2391%) hue-rotate(161deg); }
  body[data-presentation="overview"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-presentation="overview"] .topbar { min-height: 52px; flex-wrap: wrap; gap: 8px; }
  body[data-presentation="overview"] .topbar h1 { font-size: 24px; }
  body[data-presentation="overview"] .topbar #global-search,
  body[data-presentation="overview"] .topbar #open-settings { display: none; }
  body[data-presentation="overview"] .live,
  body[data-presentation="overview"] .settings,
  body[data-presentation="overview"] .reference-settings { grid-template-columns: minmax(0, 1fr); }
  body[data-presentation="overview"] .profile-screen > h2 { font-size: 30px; margin: 12px 0 24px; }
  body[data-presentation="overview"] .profile-row { gap: 16px; }
  body[data-presentation="overview"][data-view="profiles"] .profile-choice { width: 90px; font-size: 16px; }
  body[data-presentation="overview"][data-view="profiles"] .profile-choice img,
  body[data-presentation="overview"][data-view="profiles"] .add-profile .ui-icon { width: 80px; height: 80px; }
  body[data-presentation="overview"][data-view="profiles"] .add-profile .ui-icon { padding: 22px; }
  body[data-presentation="overview"] .profile-welcome { grid-template-columns: 1fr; margin: 20px 0; padding: 18px; }
  body[data-presentation="overview"] .profile-welcome h3 { font-size: 24px; }
  body[data-presentation="overview"] .profile-continue .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-presentation="overview"] .reference-presets,
  body[data-presentation="overview"] .playlist-tiles { grid-template-columns: 1fr; }
  body[data-presentation="overview"] dialog,
  body[data-presentation="overview"] #details { width: calc(100vw - 28px); max-height: 85vh; overflow: auto; padding: 18px; }
}
@media (max-width: 350px) {
  body[data-presentation="overview"] .sidebar { padding-inline: 14px; }
  body[data-presentation="overview"] .brand { font-size: 22px; }
  body[data-presentation="overview"] #open-account { gap: 5px; font-size: 13px; }
  body[data-presentation="overview"] main { padding-inline: 14px; }
  body[data-presentation="overview"] .overview-greeting h1 { font-size: 24px; }
  body[data-presentation="overview"] .overview-hero p { font-size: 16px; }
}