@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #101827;
  --muted: #667085;
  --line: #e2e6ec;
  --paper: #ffffff;
  --canvas: #f9fafb;
  --navy: #101827;
  --purple: #111827;
  --purple-dark: #000000;
  --green: #1db954;
  --joy: #fed730;
  --anger: #f97171;
  --sadness: #60a5fa;
  --pleasure: #ae93f9;
  --radius: 18px;
  --shadow: 0 16px 45px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4, .logo { font-family: "Inter", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

.header {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 64px;
  border-bottom: 1px solid rgba(229, 231, 235, .9);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px);
}
.header-inner {
  width: min(1180px, calc(100% - 40px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.logo img { width: 32px; height: 32px; object-fit: contain; }
.header-right, .header-nav { display: flex; align-items: center; }
.header-right { position: relative; }
.header-right { gap: 22px; }
.header-nav { gap: 6px; }
.header-nav a {
  padding: 9px 12px;
  border-radius: 10px;
  color: #5d6471;
  font-size: 14px;
  font-weight: 600;
}
.header-nav a:hover, .header-nav a.active { color: #fff; background: #111827; }
.btn-spotify, .btn-spotify-lg, .btn-spotify-block, .btn-logged-in,
.primary-button, .secondary-button, .danger-button, .btn-continue, .btn-logout,
.icon-button, .text-button, .link-button, .mini-action, .play-demo {
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn-spotify:hover, .btn-spotify-lg:hover, .btn-spotify-block:hover,
.primary-button:hover, .btn-continue:hover { transform: translateY(-1px); }
.btn-spotify, .btn-spotify-lg, .btn-spotify-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #07150c;
  background: var(--green);
  border-radius: 999px;
  font-weight: 700;
}
.btn-spotify { padding: 9px 18px; font-size: 13px; }
.btn-spotify-lg { min-height: 50px; padding: 0 24px; font-size: 15px; }
.btn-spotify-block { width: 100%; padding: 15px; font-size: 15px; }
.btn-spotify-block:disabled { opacity: .65; cursor: wait; }
.sp-icon { width: 20px; height: 20px; object-fit: contain; }
.btn-logged-in {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  border: 1px solid #e1e4e8;
  background: #fff;
  padding: 5px 6px 5px 13px;
  font-size: 12px;
  font-weight: 600;
}
.btn-logged-in:hover, .btn-logged-in[aria-expanded="true"] { background: #f3f4f6; border-color: #cfd3da; }
.btn-logged-in::after { content: "⌄"; margin: -3px 4px 0 -3px; color: #737a86; font-size: 13px; }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.profile-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  right: 0;
  width: 290px;
  overflow: hidden;
  border: 1px solid #e0e3e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}
.profile-menu-user { display: flex; align-items: center; gap: 12px; padding: 18px; }
.profile-menu-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.profile-menu-user strong, .profile-menu-user span { display: block; }
.profile-menu-user strong { margin-bottom: 3px; font-size: 14px; }
.profile-menu-user span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.profile-menu-status { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 9px 10px; border-radius: 9px; color: #176b3d; background: #ecf8f0; font-size: 10px; font-weight: 700; }
.profile-menu-status img { width: 16px; height: 16px; }
.profile-menu > a, .profile-menu > button {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid #eceef1;
  color: #303642;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.profile-menu > a:hover, .profile-menu > button:hover { background: #f5f6f7; }
.profile-menu > button { color: #a8323b; }
.profile-menu b { font-size: 14px; }

/* Main page */
.hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 76px 32px;
  background: #fff;
  text-align: center;
}
.hero-content { position: relative; z-index: 2; max-width: 1180px; margin: auto; }
.hero-logo { display: none; }
.hero-badge {
  display: inline-block;
  margin: 31px 0 26px;
  padding: 0;
  color: #596178;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero h1 { max-width: 1150px; margin: 0 auto 30px; font-size: clamp(39px, 4vw, 58px); line-height: 1.08; letter-spacing: -2.4px; text-align: center; }
.hero-desc { max-width: 720px; margin: 0 auto 34px; color: #5d6578; font-size: 16px; line-height: 1.7; text-align: center; }
.hero-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}
.btn-outline:hover { background: rgba(255,255,255,.35); }
.hero-blobs { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(105px); opacity: .9; }
.blob-blue { width: 650px; height: 650px; top: -190px; left: -145px; background: #76b3ff; }
.blob-green { width: 620px; height: 600px; top: -215px; left: 30%; background: #d2c4fc; }
.blob-pink { width: 650px; height: 650px; top: -185px; right: -145px; background: #ff8073; }
.blob-yellow { width: 650px; height: 520px; left: 42%; bottom: -235px; background: #fee98d; }
.how-it-works, .moods, .data-control { width: 100%; margin: 0; padding: 92px 32px; }
.how-it-works { background: #fff; }
.section-title { margin-bottom: 50px; text-align: center; font-size: 36px; letter-spacing: -1.2px; }
.cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: auto; }
.card-how { min-height: 225px; padding: 31px; border-radius: 16px; }
.card-how h3 { margin: 42px 0 10px; font-size: 22px; }
.card-how p { color: #575e6a; line-height: 1.6; }
.pastel-green { background: #dcf8e4; }
.pastel-purple { background: #eeebff; }
.pastel-grey { background: #eef0f2; }
.step-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #155d37;
  background: #b9eacb;
  font-size: 12px;
  font-weight: 800;
}
.step-badge.purple { color: #fff; background: #111827; }
.step-badge.dark { color: #fff; background: #202938; }
.moods { background: #f9fafb; }
.mood-grid {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 12px;
  max-width: 720px;
  margin: auto;
}
.mood-axis-col, .mood-row-label { display: grid; place-items: center; color: #777e8a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mood-card { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 26px; border-radius: 12px; text-align: left; }
.mood-card-icon { width: 25px; height: 25px; margin-bottom: 13px; object-fit: contain; }
.mood-card h4 { margin-bottom: 8px; font-size: 23px; }
.mood-card p { margin: 0; color: #101827; }
.mood-card.joy { background: var(--joy); }
.mood-card.anger { background: var(--anger); }
.mood-card.sadness { background: var(--sadness); }
.mood-card.pleasure { background: var(--pleasure); }
.mood-footnote { margin: 24px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.dark-banner { padding: 23px 20px; background: var(--navy); color: #fff; }
.dark-banner p { max-width: 900px; margin: auto; color: #d4d8e1; text-align: center; font-size: 13px; font-style: italic; line-height: 1.6; }
.data-control { background: #fff; text-align: center; }
.data-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: auto; }
.data-item { display: flex; gap: 12px; align-items: center; min-height: 115px; padding: 24px; border-radius: 13px; background: #f0faf3; text-align: left; }
.data-item p { margin: 0; color: #555e6c; line-height: 1.55; }
.dot-green { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #19bf5b; font-size: 11px; font-weight: 800; }
.dot-green img { width: 17px; height: 17px; }
.privacy-link { display: inline-block; margin-top: 31px; color: #145df5; font-size: 13px; font-weight: 600; }
.cta { padding: 92px 20px; text-align: center; background: #f9fafb; }
.cta h2 { margin-bottom: 25px; font-size: 36px; }

/* Footer */
footer { padding: 38px max(20px, calc((100% - 1180px)/2)); color: #9da5b3; background: #101827; font-size: 12px; }
.footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer-links, .footer-contact { display: flex; gap: 20px; }
.footer-contact { justify-content: flex-end; }
footer a:hover { color: #fff; }
.footer-divider { border: 0; border-top: 1px solid #293244; margin: 28px 0 18px; }
.footer-disclaimer { margin: 0; text-align: center; }

/* Login */
.login-bg { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 65px 20px; background: #f9fafb; }
.login-card { width: min(560px, 100%); padding: 48px; border: 1px solid #e7e8ec; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.login-card h1 { margin: 18px 0 10px; text-align: center; font-size: 30px; }
.sub-desc, .connected-desc { margin: 0 auto 28px; color: var(--muted); text-align: center; line-height: 1.55; }
.sp-circle { display: grid; place-items: center; width: 68px; height: 68px; margin: auto; border-radius: 50%; background: #e8fbef; }
.sp-circle img { width: 37px; }
.demo-label { display: table; margin: 12px auto 0; padding: 5px 9px; border-radius: 999px; color: #303642; background: #f0f1f3; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.perm-section { display: grid; gap: 12px; }
.perm-label { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.perm-label.green { color: #16824a; }
.perm-label.red { color: #cb4a51; }
.perm-item { display: flex; align-items: center; gap: 10px; color: #505765; font-size: 14px; }
.perm-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 800; }
.perm-icon.check { color: #177947; background: #dbf8e7; }
.perm-icon.x { color: #fff; background: #ef4b52; }
.perm-icon img { width: 20px; height: 20px; }
.perm-divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.btn-spotify-block { margin-top: 30px; }
.success-orbit { display: grid; place-items: center; width: 74px; height: 74px; margin: auto; border-radius: 50%; background: #dbf8e7; }
.success-orbit span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #fff; background: #20b762; font-size: 24px; }
.success-orbit img { width: 28px; height: 28px; }
.user-info-box { display: flex; align-items: center; gap: 17px; padding: 18px; border-radius: 16px; background: #f5f6f8; }
.user-avatar, .settings-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.user-meta h4 { margin: 0 0 4px; font-size: 19px; }
.last-login, .user-meta p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.spotify-badge { display: inline-flex; align-items: center; gap: 6px; color: #147441; font-size: 11px; font-weight: 700; }
.spotify-badge img { width: 15px; }
.connected-actions { display: flex; gap: 10px; margin-top: 24px; }
.btn-logout, .btn-continue { flex: 1; display: grid; place-items: center; min-height: 44px; border-radius: 11px; font-weight: 700; }
.btn-logout { border: 1px solid #d9dce2; background: #fff; }
.btn-continue { color: #fff; background: var(--purple); }

/* Shared application */
.app-shell { width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 250px); margin: auto; padding: 46px 0 75px; }
.panel { border: 1px solid #e7e8ec; border-radius: var(--radius); background: var(--paper); box-shadow: 0 5px 22px rgba(15, 23, 42, .035); }
.page-title-row, .dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-title-row h1, .dashboard-head h1 { margin: 0 0 7px; font-size: 30px; letter-spacing: -.8px; }
.page-title-row p, .dashboard-head p { margin: 0; color: var(--muted); }
.primary-button, .secondary-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.primary-button { color: #fff; background: #111827; }
.secondary-button { border: 1px solid #d8dbe2; background: #fff; }
.secondary-button:hover { border-color: #9da4b0; }
.danger-button { color: #b32632; background: #ffeaec; }
.icon-button { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #f1f2f5; font-size: 18px; }
.icon-button:hover { background: #e6e7eb; }
.icon-button svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link-button, .text-button { padding: 0; color: #111827; background: none; font-weight: 700; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 23px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.section-heading a { color: #111827; font-size: 13px; font-weight: 700; }
.eyebrow { color: #777e8a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.mood-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.mood-pill.compact { min-width: 64px; padding: 5px 9px; font-size: 10px; }
.mood-pill { gap: 5px; }
.mood-pill-icon { width: 12px; height: 12px; object-fit: contain; }
.mood-joy { background: var(--joy); color: #101827; }
.mood-anger { background: var(--anger); color: #101827; }
.mood-sadness { background: var(--sadness); color: #101827; }
.mood-pleasure { background: var(--pleasure); color: #101827; }
.mood-pill.pending { background: #eceef2; color: #7c838f; }
.joy-dot::before, .anger-dot::before, .sadness-dot::before, .pleasure-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.joy-dot::before { background: var(--joy); }
.anger-dot::before { background: var(--anger); }
.sadness-dot::before { background: var(--sadness); }
.pleasure-dot::before { background: var(--pleasure); }
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  border-radius: 999px;
  color: #fff;
  background: #172033;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
  font-size: 13px;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Dashboard */
.top-mood { min-width: 155px; padding: 12px 17px; border-radius: 14px; background: var(--joy); }
.top-mood span { display: block; color: #776405; font-size: 10px; text-transform: uppercase; font-weight: 700; }
.top-mood strong { display: block; margin-top: 3px; font-size: 19px; }
.now-playing { display: grid; grid-template-columns: 155px 1fr auto; align-items: center; gap: 26px; overflow: hidden; padding: 20px; background: #fff; }
.now-playing > img { width: 155px; height: 155px; border-radius: 13px; object-fit: cover; }
.now-copy h2 { margin: 8px 0 4px; font-size: 27px; }
.now-copy > p { margin: 0; color: var(--muted); }
.fake-player { height: 4px; margin: 24px 0 17px; overflow: hidden; border-radius: 99px; background: #daddE5; }
.fake-player span { display: block; width: 44%; height: 100%; background: var(--green); }
.now-meta { display: flex; align-items: center; gap: 16px; }
.confidence-inline { color: var(--muted); font-size: 11px; }
.confidence-inline b { color: var(--ink); }
.mood-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.mood-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px 12px; padding: 18px; border: 1px solid #eceef1; border-top-width: 6px; border-radius: 14px; background: #fff; }
.mood-stat h3 { margin: 0; font-size: 15px; }
.mood-stat strong { grid-row: span 2; font-size: 27px; }
.mood-stat > span { grid-column: 2; color: #5f6570; font-size: 10px; line-height: 1.35; }
.mood-stat-icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.6); font-size: 19px; }
.mood-stat-icon img { width: 22px; height: 22px; }
.mood-stat-joy { border-top-color: var(--joy); }
.mood-stat-anger { border-top-color: var(--anger); }
.mood-stat-sadness { border-top-color: var(--sadness); }
.mood-stat-pleasure { border-top-color: var(--pleasure); }
.dashboard-section { padding: 26px; margin-top: 18px; }
.recent-track { display: grid; grid-template-columns: minmax(240px, 2fr) 130px 82px 30px; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px solid #eceef1; color: #6a717c; font-size: 12px; }
.recent-track > div { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.recent-track img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.recent-track b, .recent-track small { display: block; }
.recent-track small { margin-top: 3px; color: var(--muted); }
.mini-action { background: none; color: #7d8490; }
.text-button { display: block; margin: 19px auto 0; font-size: 12px; }
.chart-legend, .calendar-legend { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; }
.weekly-chart-legend { justify-content: center; margin: 2px 0 18px; }
.weekly-chart-frame { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 17px 18px 10px 10px; border-radius: 12px; background: #f6f7f9; }
.chart-y-axis { position: relative; height: 180px; color: #8a929f; font-size: 9px; }
.chart-y-axis span { position: absolute; right: 0; transform: translateY(-50%); }
.chart-y-axis span:nth-child(1) { top: 0; transform: none; }
.chart-y-axis span:nth-child(2) { top: 25%; }
.chart-y-axis span:nth-child(3) { top: 50%; }
.chart-y-axis span:nth-child(4) { top: 75%; }
.weekly-chart-plot { position: relative; height: 205px; }
.chart-grid-lines { position: absolute; z-index: 0; inset: 0 0 25px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines i { width: 100%; border-top: 1px solid #e7e9ed; }
.weekly-chart { position: relative; z-index: 1; height: 205px; display: grid; grid-template-columns: repeat(7, minmax(50px, 1fr)); align-items: end; gap: 30px; }
.day-column { height: 205px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.stacked-bar { width: min(78px, 76%); height: 180px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 7px 7px 0 0; background: #f0f1f4; }
.stacked-bar i { display: block; width: 100%; }
.bar-joy { background: var(--joy); }
.bar-anger { background: var(--anger); }
.bar-sadness { background: var(--sadness); }
.bar-pleasure { background: var(--pleasure); }
.chart-note { margin: 17px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.recommend-card { position: relative; min-height: 105px; padding: 16px 16px 15px 106px; border: 1px solid #e5e7eb; border-radius: 14px; }
.recommend-card > img { position: absolute; left: 14px; top: 14px; width: 76px; height: 76px; border-radius: 10px; object-fit: cover; }
.recommend-card h3 { margin: 0 0 4px; font-size: 13px; }
.recommend-card p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.play-demo { float: right; padding: 5px 8px; border-radius: 7px; background: #111827; color: #fff; font-size: 9px; font-weight: 700; }

/* History */
.filters-panel { padding: 18px 20px; margin-bottom: 14px; }
.filter-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.filter-line + .filter-line { padding-top: 14px; margin-top: 14px; border-top: 1px solid #eceef2; }
.segmented, .view-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: #eceef2; }
.segmented button, .view-switch button, #mood-filters button {
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  color: #676e79;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.segmented button.active, .view-switch button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.filter-tools { display: flex; gap: 9px; }
input, select, textarea { outline: none; border: 1px solid #dfe2e7; border-radius: 9px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,.09); }
.filter-tools input { width: 230px; padding: 9px 12px; font-size: 11px; }
.filter-tools select { padding: 9px 30px 9px 10px; color: #5f6672; font-size: 11px; }
#mood-filters { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; }
#mood-filters button { padding: 6px 10px; }
#mood-filters button.active { color: #fff; background: #111827; }
.analysis-banner { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(180px, 360px) 42px; align-items: center; gap: 20px; max-height: 90px; margin-bottom: 14px; padding: 16px 20px; overflow: hidden; border-radius: 14px; color: #fff; background: #111827; transform-origin: top center; transition: opacity .35s ease, transform .35s ease, max-height .42s ease, padding .42s ease, margin .42s ease; }
.analysis-banner.complete { background: #174f36; }
.analysis-banner.is-hiding { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-8px) scale(.99); }
.analysis-banner strong, .analysis-banner span { display: block; }
.analysis-banner strong { font-size: 13px; }
.analysis-banner span { margin-top: 4px; color: #cfd4dc; font-size: 10px; }
.analysis-meter { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.18); }
.analysis-meter i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .4s ease; }
.analysis-banner > b { font-size: 13px; text-align: right; }
.history-table { overflow: hidden; }
.history-head, .history-row { display: grid; grid-template-columns: 30px minmax(180px, 1.4fr) minmax(120px, 1fr) 125px 85px 110px 78px; align-items: center; gap: 13px; }
.history-head { padding: 12px 18px; color: #8a919d; background: #f5f6f8; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.history-row { min-height: 73px; padding: 10px 18px; border-top: 1px solid #eceef2; color: #606773; font-size: 11px; }
.track-cell { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.track-cell img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.track-cell b, .track-cell small { display: block; }
.track-cell small { margin-top: 3px; color: #8a919d; }
.confidence-bar { display: inline-block; width: 61px; height: 5px; margin-right: 5px; overflow: hidden; border-radius: 99px; background: #e5e7eb; vertical-align: middle; }
.confidence-bar i { display: block; height: 100%; border-radius: inherit; }
.confidence-bar i.confidence-high { background: #16864b; }
.confidence-bar i.confidence-medium { background: #e5a500; }
.confidence-bar i.confidence-low { background: #df4b52; }
.history-row small { font-size: 9px; }
.edit-mood { border: 0; color: #111827; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.edit-mood:disabled { color: #b3b7be; cursor: default; }
.skeleton-pill, .skeleton-line { display: inline-block; height: 20px; border-radius: 999px; background: linear-gradient(90deg, #eceef1, #f7f8f9, #eceef1); background-size: 200% 100%; animation: shimmer 1.1s infinite; }
.skeleton-pill { width: 66px; }
.skeleton-line { width: 86px; height: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.correction-drawer { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding: 13px 18px 16px 60px; border-top: 1px dashed #dddfea; background: #fafafa; font-size: 11px; }
.correction-drawer > div { display: flex; gap: 5px; }
.mood-choice { border: 0; padding: 7px 11px; border-radius: 999px; cursor: pointer; font-size: 10px; font-weight: 800; }
.history-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: var(--muted); font-size: 11px; }
.history-bottom #rerun-analysis { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 18px; line-height: 1; }
.button-icon { display: block; flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.button-label { display: block; line-height: 1; transform: translateY(.5px); }
.empty-state { padding: 55px; color: var(--muted); text-align: center; }

/* Calendar */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; margin-bottom: 15px; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav h2 { min-width: 180px; margin: 0; text-align: center; font-size: 17px; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 15px; align-items: start; }
.calendar-panel { overflow: hidden; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: #f4f5f7; }
.weekdays span { padding: 11px 8px; color: #818894; text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-day { position: relative; min-height: 112px; padding: 11px; border: 0; border-top: 1px solid #eceef1; border-right: 1px solid #eceef1; background: #fff; cursor: pointer; text-align: left; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.mood-edge-joy::before { background: var(--joy); }
.mood-edge-anger::before { background: var(--anger); }
.mood-edge-sadness::before { background: var(--sadness); }
.mood-edge-pleasure::before { background: var(--pleasure); }
.calendar-day > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.calendar-day b { display: block; margin: 12px 0 7px; font-size: 10px; }
.calendar-day small { display: block; margin-top: 18px; color: #a6abb3; font-size: 9px; }
.calendar-day em { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; font-style: normal; }
.calendar-day.outside { background: #fafafa; opacity: .48; }
.calendar-day.future::before { background: #e2e4e8; }
.calendar-day.today > span { color: #fff; background: var(--purple); }
.calendar-day.selected { z-index: 1; box-shadow: inset 0 0 0 2px #111827; background: #f5f6f7; }
.calendar-grid.week-view .calendar-day { min-height: 190px; }
.day-details { position: sticky; top: 88px; padding: 24px; }
.day-details h2 { margin: 7px 0 18px; font-size: 19px; line-height: 1.3; }
.selected-mood { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 14px; }
.selected-mood > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: rgba(255,255,255,.65); font-size: 19px; }
.selected-mood > span img { width: 23px; height: 23px; }
.selected-mood small, .selected-mood strong, .selected-mood p { display: block; }
.selected-mood small { font-size: 9px; text-transform: uppercase; }
.selected-mood strong { margin: 2px 0; font-size: 18px; }
.selected-mood p { margin: 0; font-size: 9px; }
.mood-bg-joy { background: #fff2a5; }
.mood-bg-anger { background: #ffd9db; }
.mood-bg-sadness { background: #dbeaff; }
.mood-bg-pleasure { background: #e8ddff; }
.day-details h3 { margin: 22px 0 10px; font-size: 13px; }
.day-tracks article { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #eceef1; }
.day-tracks img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; }
.day-tracks b, .day-tracks small { display: block; font-size: 10px; }
.day-tracks small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.note-label { display: block; margin: 19px 0 7px; font-size: 11px; font-weight: 700; }
.day-details textarea { width: 100%; padding: 11px; resize: vertical; font-size: 11px; }
.day-details .primary-button { width: 100%; margin-top: 9px; }
.calendar-insights-section { width: 100%; padding: 62px max(20px, calc((100% - 1180px)/2)) 58px; background: #f5f6f8; }
.calendar-insights-inner { width: 100%; margin: auto; }
.calendar-insights-inner > h2 { margin: 0 0 25px; font-size: 28px; }
.calendar-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.insight-card { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-height: 205px; padding: 24px; color: var(--ink); }
.insight-card > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.insight-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; }
.insight-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.insight-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.insight-card p { margin: 0; color: #4f5868; font-size: 13px; line-height: 1.45; }
.insight-card strong { display: block; margin-top: auto; padding-top: 14px; font-size: 11px; font-weight: 600; }
.insight-sadness .insight-icon, .insight-sadness .insight-badge { color: #3f83e5; background: #e6f0ff; }
.insight-sadness strong { color: #5595ef; }
.insight-joy .insight-icon, .insight-joy .insight-badge { color: #c99200; background: #fff8d7; }
.insight-joy strong { color: #c99200; }
.insight-review .insight-icon, .insight-review .insight-badge { color: #8590a1; background: #eef0f3; }
.insight-review strong { color: #9aa3b1; }
.insights-note { margin: 26px 0 0; color: #7c8593; font-size: 11px; font-style: italic; }

/* Settings */
.settings-layout { display: grid; grid-template-columns: 215px 1fr; gap: 16px; align-items: start; }
.settings-nav { position: sticky; top: 88px; padding: 9px; }
.settings-nav button { display: block; width: 100%; padding: 12px 13px; border: 0; border-radius: 9px; color: #68707c; background: none; cursor: pointer; text-align: left; font-size: 12px; font-weight: 700; }
.settings-nav button:hover, .settings-nav button.active { color: #111827; background: #eef0f2; }
.settings-section { display: none; padding: 27px; }
.settings-section.active { display: block; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #eceef2; }
.settings-heading h2 { margin: 0 0 5px; font-size: 21px; }
.settings-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-setting { display: flex; align-items: center; gap: 17px; margin-bottom: 23px; }
.profile-setting h3 { margin: 0 0 4px; font-size: 19px; }
.profile-setting p { margin: 0 0 7px; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label, .setting-field { color: #4e5561; font-size: 11px; font-weight: 700; }
.form-grid input, .setting-field select { display: block; width: 100%; margin-top: 7px; padding: 11px; font-size: 12px; }
.form-grid input:disabled { background: #f3f4f6; color: #999fa8; }
.settings-action-row, .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid #eceef2; }
.form-grid + .settings-action-row { margin-top: 23px; }
.settings-action-row b, .toggle-row b { font-size: 12px; }
.settings-action-row p, .toggle-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.setting-field { display: block; margin-bottom: 24px; }
.setting-field output { float: right; color: #111827; }
.setting-field input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--purple); }
.switch { position: relative; flex: 0 0 auto; width: 44px; height: 25px; }
.switch input { width: 0; height: 0; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d7dae0; cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .2s; }
.switch input:checked + span { background: var(--purple); }
.switch input:checked + span::before { transform: translateX(19px); }
.privacy-note { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 20px; border-radius: 13px; background: #e8f8ef; color: #256541; }
.privacy-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #cfeeda; }
.privacy-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: #256541; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note p { flex: 1; margin: 0; font-size: 11px; line-height: 1.45; }
.danger-zone { margin-top: 22px; }

/* Compact tags and redesigned calendar */
.recent-track .mood-pill.compact{justify-self:end;width:max-content;min-width:64px;max-width:82px;height:22px;padding:0 8px;gap:4px;font-size:8.5px}
.history-row .mood-pill.compact,.day-tracks .mood-pill.compact{min-width:72px;height:24px;padding:0 9px;gap:4px;font-size:9px}
.recent-track .mood-pill-icon,.history-row .mood-pill-icon,.day-tracks .mood-pill-icon{width:10px!important;height:10px!important}
.profile-action{display:flex;align-items:center;gap:10px}.profile-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-nav{display:grid;gap:7px;padding:10px}.settings-nav button{border:1px solid transparent}.settings-nav button.active{color:#fff;background:#111827}.settings-nav button:hover:not(.active){border-color:#e0e3e8;background:#f5f6f7}
.calendar-shell{width:100%;padding-top:0;padding-bottom:0}.calendar-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:18px max(24px,calc((100% - 1180px)/2));background:#fff;border-bottom:1px solid #eceef1}.calendar-topbar .calendar-legend{justify-content:flex-end}.month-nav{display:flex;align-items:center;gap:12px}.month-nav h1{min-width:170px;margin:0;font-size:20px}.calendar-arrow{border:0;background:none;cursor:pointer;font-size:18px}.mixed-dot::before,.no-data-dot::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%}.mixed-dot::before{background:#9aa4b2}.no-data-dot::before{background:#dfe4e9}
.calendar-layout{width:min(1180px,calc(100% - 40px));margin:60px auto;grid-template-columns:minmax(0,1fr)330px;gap:55px}.calendar-panel{align-self:start}.weekdays{background:#fff}.calendar-day{min-height:105px;padding:12px}.calendar-day small{margin-top:45px}.calendar-day b,.calendar-day .mood-pill{display:none}.calendar-grid.week-view .calendar-day{min-height:150px}.day-details{position:static!important;top:auto;padding:24px;align-self:start}.day-details h2{margin:0 0 14px}.day-details hr{border:0;border-top:1px solid #e6e8ec;margin:14px 0}.breakdown-row{display:grid;grid-template-columns:1fr auto;gap:5px;margin:10px 0;font-size:10px}.breakdown-row i{grid-column:1/-1;height:5px;background:#eceef1;border-radius:99px;overflow:hidden}.breakdown-row em{display:block;height:100%}.day-details input{width:100%;padding:10px;font-size:11px;background:#f8f9fa}.view-day-tracks{display:block;margin-top:14px;color:#145df5;font-size:11px;font-weight:700}.calendar-trends{width:min(1180px,calc(100% - 40px));margin:78px auto 68px}.calendar-trends h2{margin-bottom:4px;font-size:28px}.calendar-trends>p,.calendar-trends>small{color:var(--muted)}.calendar-trends>p{font-size:13px}.calendar-trend-bars{height:245px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,7vw,100px);align-items:end;margin:34px 0 20px}.calendar-trend-bars>div{display:flex;flex-direction:column;align-items:center;text-align:center}.trend-stack{width:100%;max-width:225px;height:200px;display:flex;flex-direction:column;border-radius:7px 7px 0 0;overflow:hidden}.trend-stack i{display:block;width:100%}.calendar-trend-bars span{display:block;margin-top:12px;color:var(--muted);font-size:10px}.calendar-trends-legend{margin-top:4px}.calendar-trends>small{display:block;margin-top:24px;font-size:11px;font-style:italic}

@media (max-width: 1000px) {
  .header-inner { width: min(100% - 24px, 1180px); }
  .header-right { gap: 8px; }
  .header-nav a { padding: 8px; font-size: 12px; }
  .logged-in-label { display: none; }
  .history-head, .history-row { grid-template-columns: 25px minmax(175px, 1.5fr) minmax(110px, 1fr) 95px 80px 90px 65px; gap: 8px; }
  .calendar-layout { grid-template-columns: 1fr; }
  .day-details { position: static; }
  .calendar-insights { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .header { height: auto; min-height: 66px; }
  .header-inner { padding: 10px 0; align-items: flex-start; }
  .header-right { align-items: flex-end; flex-direction: column-reverse; }
  .profile-menu { top: 50px; }
  .header-nav { gap: 0; }
  .header-nav a { padding: 6px; font-size: 10px; }
  .btn-spotify { padding: 8px 12px; font-size: 11px; }
  .logo { padding-top: 5px; font-size: 19px; }
  .logo img { width: 29px; height: 29px; }
  .hero { min-height: 580px; padding: 60px 20px; }
  .hero h1 { font-size: 44px; letter-spacing: -2px; }
  .hero-desc { font-size: 15px; }
  .cards-row, .data-cols, .recommend-grid, .calendar-insights { grid-template-columns: 1fr; }
  .mood-grid { grid-template-columns: 1fr 1fr; }
  .mood-grid > div:first-child, .mood-row-label { display: none; }
  .mood-axis-col { padding: 8px; }
  .footer-top { grid-template-columns: 1fr; text-align: center; }
  .footer-links, .footer-contact { justify-content: center; flex-wrap: wrap; }
  .app-shell { width: min(100% - 24px, 1180px); padding-top: 28px; }
  .page-title-row, .dashboard-head, .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .page-title-row h1, .dashboard-head h1 { font-size: 26px; }
  .now-playing { grid-template-columns: 90px 1fr; gap: 15px; }
  .now-playing > img { width: 90px; height: 90px; }
  .now-playing > .icon-button { display: none; }
  .now-copy h2 { font-size: 20px; }
  .fake-player { margin: 13px 0; }
  .mood-summary { grid-template-columns: 1fr 1fr; }
  .recent-track { grid-template-columns: 1fr auto; }
  .recent-track > span:nth-of-type(1), .recent-track .mini-action { display: none; }
  .weekly-chart-frame { grid-template-columns: 38px minmax(650px, 1fr); overflow-x: auto; }
  .weekly-chart { gap: 18px; }
  .calendar-trend-bars { gap: 18px; }
  .filter-line { align-items: stretch; flex-direction: column; }
  .filter-tools { width: 100%; }
  .filter-tools input { flex: 1; width: auto; }
  .segmented { overflow-x: auto; }
  .mood-line { align-items: flex-start; }
  #mood-filters { flex-wrap: wrap; }
  .analysis-banner { grid-template-columns: 1fr 40px; }
  .analysis-meter { grid-row: 2; grid-column: 1 / -1; }
  .history-table { overflow-x: auto; }
  .history-head, .history-row { min-width: 850px; }
  .calendar-panel { overflow-x: auto; }
  .weekdays, .calendar-grid { min-width: 670px; }
  .calendar-day { min-height: 100px; }
  .calendar-toolbar { align-items: stretch; }
  .month-nav { flex-wrap: wrap; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .settings-nav button { white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .header-nav { max-width: 260px; overflow-x: auto; }
  .header-nav a { white-space: nowrap; }
  .btn-logged-in { padding-left: 5px; }
  .hero h1 { font-size: 37px; }
  .mood-summary { grid-template-columns: 1fr; }
  .login-card { padding: 28px 22px; }
  .connected-actions { flex-direction: column; }
  .settings-section { padding: 20px; }
}