/* Shared StarStudy typography and Lucide icons, with reference-inspired cards. */
:root {
  --ink: #101d4d;
  --muted: #60759d;
  --line: #dceafb;
  --pale: #eaf4ff;
  --shadow: 0 5px 22px #174d7c08;
}
body { background: #f2f9ff; font-size: 16px; }
svg.icon { width: 22px; height: 22px; stroke-width: 1.9; }
.panel { border-radius: 13px; box-shadow: var(--shadow); }
button { font-weight: 600; }
.primary { background: #0864ff; box-shadow: none; }
.secondary { border-color: #a9cbff; }
.hero { height: 128px; border-radius: 12px; margin-top: 22px; padding: 25px 32px; }
.hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.7px; }
.hero p { font-size: 16px; color: #f0f6ff; }
.subnav { height: 64px; margin-top: 6px; }
.tabs { gap: 26px; }
.tab { font-size: 16px; gap: 10px; font-weight: 600; }
.tab svg { width: 25px; height: 25px; }
.tab.active { font-weight: 750; }
.my-profile { font-size: 14px; padding: 10px 14px; }
.count { min-width: 19px; height: 19px; padding: 2px 5px; font-size: 11px; }
.integration-note { font-size: 11px; color: #7487a6; margin-top: 10px; }
.content { grid-template-columns: 280px minmax(0,1fr); gap: 20px; margin-top: 20px; }
.filters { padding: 20px 18px; }
.filter-title { margin-bottom: 20px; }
.filter-title h2 { font-size: 21px; letter-spacing: -.5px; }
.filter-title button { gap: 5px; font-size: 13px; font-weight: 500; }
.filter-title svg { width: 18px; height: 18px; }
.filter-group { margin: 18px 0; }
.filter-group h3 { font-size: 14px; font-weight: 750; margin-bottom: 9px; }
.input { font-size: 14px; border-radius: 8px; padding: 9px 12px; min-height: 39px; }
.city-field { position: relative; }
.city-field .input { padding-left: 37px; padding-right: 28px; }
.city-field>.icon { position: absolute; top: 11px; left: 11px; width: 18px; height: 18px; color: #2265d6; pointer-events: none; }
.city-field>.icon-chevron { left: auto; right: 9px; width: 17px; }
.filter-group .hint { font-size: 11px; }
.age-inputs { gap: 12px; }
.levels { gap: 5px; }
.level-btn { min-width: 30px; padding: 7px 8px; font-size: 13px; border-radius: 10px; }
.level-btn.selected { box-shadow: 0 3px 8px #0864ff20; }
.check { font-size: 13px; gap: 9px; margin: 8px 0; color: #273b66; }
.check input { width: 19px; height: 19px; accent-color: #0864ff; flex-shrink: 0; }
.online-switch input { appearance: none; width: 35px; height: 20px; border: 0; border-radius: 12px; background: #a2b1cc; position: relative; cursor: pointer; }
.online-switch input:before { content: ''; position: absolute; height: 16px; width: 16px; border-radius: 50%; left: 2px; top: 2px; background: white; box-shadow: 0 1px 3px #21335e30; transition: transform .15s; }
.online-switch input:checked { background: #0864ff; }
.online-switch input:checked:before { transform: translateX(15px); }
.format-buttons { gap: 6px; }
.format-buttons button { padding: 8px 10px; font-size: 13px; border-radius: 13px; }
.filter-note { line-height: 1.65; font-size: 11px; }
.search-box { padding: 12px 15px; border-radius: 11px; box-shadow: none; gap: 12px; }
.search-box input { font-size: 14px; background: #f4f8fe; padding: 7px 10px; border-radius: 7px; }
.search-box>.icon { color: #315998; }
.sort-row { margin-top: 16px; gap: 7px; }
.sort-label { font-size: 13px; }
.sort-btn { font-size: 13px; padding: 9px 15px; font-weight: 500; }
.sort-help { font-size: 11px; margin-bottom: 12px; }
.result-top { padding: 13px 0; gap: 14px; }
.result-top h2 { font-size: 21px; letter-spacing: -.4px; font-weight: 800; }
.result-count { font-size: 13px; color: #496394; white-space: nowrap; }
.view-btn { border-radius: 8px; padding: 8px; border: 1px solid var(--line); background: white; }
.view-btn.selected { background: #0864ff; color: white; border-color: #0864ff; }
.chips { gap: 7px; }
.chip { font-size: 12px; background: #e5f2ff; border-radius: 8px; padding: 4px 9px; }
.results { gap: 10px; }
.person { grid-template-columns: 82px 172px minmax(0,1fr) 146px; gap: 16px; padding: 17px 16px; box-shadow: none; border-radius: 11px; }
.person>.avatar { width: 82px; height: 82px; }
.avatar-status { width: 19px; height: 19px; right: 0; bottom: 2px; }
.avatar.initials { background: #e7f1ff !important; border: 1px solid #d4e7ff; color: #5282c7; }
.avatar.photo.aidana-portrait { background-image: url('assets/aidana-source.png'); }
.identity .name { font-size: 19px; font-weight: 800; gap: 9px; letter-spacing: -.3px; margin-bottom: 7px; }
.badge { font-size: 13px; font-weight: 650; padding: 4px 10px; border-radius: 7px; }
.city { font-size: 13px; gap: 7px; color: #506993; }
.city .icon { width: 17px; height: 17px; }
.online-text { font-size: 12px; }
.ready-mini { font-size: 10px; background: #e4f8ee; padding: 4px 7px; border-radius: 20px; margin-top: 6px; gap: 3px; }
.ready-mini .icon { width: 13px; height: 13px; }
.bio { padding-left: 18px; }
.bio p { font-size: 14px; line-height: 1.5; margin-bottom: 8px; color: #172951; }
.tags { gap: 7px; }
.tag { font-size: 12px; border-radius: 7px; padding: 5px 9px; gap: 7px; background: #eaf4ff; color: #2858a2; }
.tag .icon { width: 18px; height: 18px; color: #0864ff; }
.goal-tag { color: #0864ff; }
.availability { font-size: 11px; color: #5c759e; margin-top: 9px; gap: 6px; }
.availability .icon { width: 17px; height: 17px; color: #4966a0; }
.reasons { font-size: 11px; color: #4b69a0; gap: 10px; }
.reasons span { display: inline-flex; align-items: center; gap: 5px; }
.reasons span:before { content: none; }
.reasons .icon { width: 15px; height: 15px; color: #0864ff; }
.actions { gap: 7px; }
.actions button { font-size: 13px; padding: 9px 10px; min-height: 39px; border-radius: 8px; }
.actions .icon { width: 20px; height: 20px; }
.load-more { min-height: 39px; font-size: 13px; margin-top: 10px; border-radius: 9px; }
.grid { gap: 13px; }
.grid .person { display: grid; grid-template-columns: 70px minmax(0,1fr); grid-template-rows: auto 1fr auto; padding: 19px; gap: 13px; align-items: start; }
.grid .avatar { width: 70px; height: 70px; }
.grid .name { font-size: 18px; }
.grid .bio p { min-height: 63px; }
.grid .identity { min-width: 0; }
.grid .bio { padding: 0; grid-column: 1/-1; }
.grid .actions { padding: 0; grid-column: 1/-1; margin-top: 0; }
.breadcrumb { margin: 17px 0 11px; font-size: 13px; gap: 11px; }
.profile-redesign { padding: 0; background: none; border: 0; box-shadow: none; }
.profile-header { overflow: visible; }
.profile-cover { height: 178px; border-radius: 12px 12px 0 0; }
.profile-summary { margin: 0; padding: 12px 22px 20px; border: 0; gap: 20px; min-height: 109px; }
.profile-summary>.avatar { width: 142px; height: 142px; margin-top: -77px; border: 5px solid white; box-shadow: 0 3px 10px #132e6510; }
.profile-summary .avatar-status { width: 26px; height: 26px; bottom: 6px; right: 3px; border-width: 4px; }
.profile-name { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.profile-summary h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.6px; }
.profile-name>.badge { margin-bottom: 5px; font-size: 16px; padding: 3px 11px; }
.profile-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-meta .city { margin: 0; font-size: 14px; }
.profile-meta .badge { font-size: 12px; font-weight: 500; border-radius: 20px; }
.profile-meta .badge .icon { width: 16px; height: 16px; }
.profile-actions { gap: 9px; max-width: none; }
.profile-actions button { padding: 11px 17px; min-height: 44px; font-size: 14px; border-radius: 9px; }
.profile-actions .primary { min-width: 144px; }
.profile-actions .secondary[aria-label] { width: 44px; padding: 10px; }
.profile-columns { grid-template-columns: minmax(0,1.25fr) minmax(340px,.95fr); gap: 16px; padding: 16px 0 0; }
.profile-main, .profile-side { min-width: 0; }
.profile-section { padding: 20px 22px; margin-bottom: 13px; }
.profile-section h2, .profile-aside h2, .starter h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.3px; }
.profile-section h2 .icon, .profile-aside h2 .icon, .starter h2 .icon { width: 25px; height: 25px; color: #0864ff; }
.profile-section p { font-size: 14px; line-height: 1.8; color: #273a64; }
.profile-tags .tag { border-radius: 24px; padding: 10px 16px; color: #425e91; font-size: 14px; gap: 10px; background: #f0f7ff; }
.profile-tags .tag .icon { width: 22px; height: 22px; color: #476493; }
.shared-tags .tag { border-radius: 18px; padding: 7px 12px; font-size: 12px; }
.profile-section .shared-note { font-size: 11px; color: #7b90b1; margin-top: 11px; }
.language-list { display: flex; gap: 10px; flex-wrap: wrap; }
.language-settings { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; background: #f7fbff; }
.language-settings legend { padding: 0 5px; font-size: 14px; font-weight: 750; }
.language-settings>.checks { gap: 4px 16px; margin-bottom: 12px; }
.language-settings>.field { display: block; margin-top: 12px; }
.language-settings>.hint { font-weight: 400; line-height: 1.65; margin-bottom: 0; }
.lang { font-size: 14px; margin: 0; padding: 9px 15px; background: #f6faff; flex: 1; }
.lang small { color: #7388a8; display: block; font-size: 11px; margin-top: 3px; }
.profile-aside { padding: 20px 22px; }
.communication-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.communication-tiles>div { display: flex; align-items: center; gap: 10px; padding: 12px 11px; border-radius: 10px; background: #f0f7ff; color: #435e90; font-size: 13px; }
.communication-tiles .icon { width: 23px; height: 23px; color: #0864ff; }
.schedule { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 13px; }
.schedule h3, .partner-info h3 { font-size: 13px; margin: 0 0 10px; font-weight: 750; }
.weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.weekday { display: flex; justify-content: center; align-items: center; height: 34px; border-radius: 8px; font-size: 12px; color: #6c81a7; background: #f2f7fd; }
.weekday.available { color: white; background: #0864ff; box-shadow: 0 2px 5px #0864ff15; }
.schedule .frequency { font-size: 11px; color: #7a90af; margin: 7px 0 17px; }
.schedule-time { display: flex; align-items: center; gap: 13px; color: #102056; }
.schedule-time .icon { width: 25px; height: 25px; color: #0864ff; }
.schedule-time strong { font-size: 28px; letter-spacing: -.7px; line-height: 1.35; font-weight: 800; }
.schedule .timezone { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #7487a9; margin: 9px 0 0; }
.timezone .icon { width: 16px; height: 16px; }
.partner-info { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.partner-info p { font-size: 12px; color: #60769b; line-height: 1.65; margin: 0; }
.starter { margin-top: 13px; padding: 20px 22px; background: #eaf4ff; }
.starter h2 { color: #0864ff; margin-bottom: 6px; }
.starter .starter-hint { background: none; padding: 0; color: #738bb2; font-size: 11px; margin: 0 0 13px; }
.starter .starter-message { border: 1px solid #cce0ff; font-size: 14px; padding: 13px; line-height: 1.65; border-radius: 9px; margin-bottom: 12px; }
.starter button { min-height: 42px; font-size: 14px; border-radius: 8px; }
.chat-header strong { font-size: 18px; }
.bubble { font-size: 14px; }
.chat-aside .tag { font-size: 12px; }
.conversation strong { font-size: 15px; }
.chat-info h3 { font-size: 16px; }
.composer textarea { font-size: 14px; }
.suggestions button { font-size: 11px; }
@media (max-width:1180px) {
  .content { grid-template-columns: 254px minmax(0,1fr); gap: 17px; }
  .person { grid-template-columns: 76px 152px minmax(0,1fr); gap: 14px; }
  .person>.avatar { width: 76px; height: 76px; }
  .person>.actions { grid-column: 3; padding-left: 18px; }
  .person>.actions button { min-width: 0; font-size: 12px; }
  .profile-summary { gap: 15px; padding: 12px 18px 18px; }
  .profile-summary>.avatar { width: 128px; height: 128px; margin-top: -64px; }
  .profile-actions { max-width: 280px; flex-wrap: wrap; }
  .profile-actions button { font-size: 13px; padding: 10px 13px; }
  .profile-actions .primary { min-width: 122px; }
  .profile-columns { grid-template-columns: minmax(0,1.15fr) minmax(310px,.95fr); }
  .profile-tags .tag { padding: 8px 12px; font-size: 13px; }
}
@media (max-width:800px) {
  .hero { height: 145px; padding: 22px; margin-top: 16px; }
  .hero h1 { font-size: 25px; letter-spacing: -.4px; max-width: 330px; }
  .hero p { font-size: 12px; }
  .subnav { height: 62px; }
  .tabs { gap: 10px; }
  .tab { font-size: 12px; padding: 0 3px; gap: 5px; }
  .tab svg { width: 20px; height: 20px; }
  .my-profile { font-size: 0; padding: 8px; }
  .my-profile svg { width: 22px; height: 22px; }
  .integration-note { font-size: 10px; line-height: 1.7; }
  .content { display: block; margin-top: 16px; }
  .mobile-filter { font-size: 13px; min-height: 40px; }
  .search-box { padding: 8px 11px; gap: 6px; }
  .search-box input { padding: 7px; font-size: 12px; }
  .sort-row { gap: 6px; }
  .sort-btn { padding: 7px 12px; font-size: 12px; }
  .sort-help { font-size: 10px; }
  .result-top h2 { font-size: 18px; }
  .result-count { font-size: 11px; margin-right: 0; }
  .result-tools { gap: 6px; }
  .view-btn { padding: 7px; }
  .view-btn .icon { width: 18px; height: 18px; }
  .person { grid-template-columns: 70px minmax(0,1fr); padding: 17px; gap: 13px; }
  .person>.avatar { height: 70px; width: 70px; }
  .person .identity { grid-column: 2; }
  .identity .name { font-size: 19px; }
  .person .bio { grid-column: 1/-1; border: 0; padding: 0; }
  .person .bio p { font-size: 14px; }
  .person>.actions { grid-column: 1/-1; padding: 0; }
  .person>.actions button { font-size: 13px; }
  .grid .person { display: flex; padding: 14px; }
  .grid .name { font-size: 16px; }
  .grid .avatar { width: 54px; height: 54px; }
  .grid .bio p { font-size: 12px; min-height: 85px; }
  .grid .actions { padding: 0; }
  .profile-cover { height: 140px; }
  .profile-summary { padding: 0 15px 18px; flex-wrap: wrap; align-items: center; gap: 12px; }
  .profile-summary>.avatar { width: 95px; height: 95px; margin-top: -30px; border-width: 4px; }
  .profile-summary .avatar-status { width: 22px; height: 22px; bottom: 1px; right: 0; border-width: 3px; }
  .profile-summary .identity { min-width: 150px; padding-top: 9px; }
  .profile-summary h1 { font-size: 23px; margin-bottom: 4px; }
  .profile-name { gap: 7px; }
  .profile-name>.badge { font-size: 13px; padding: 3px 8px; margin: 0; }
  .profile-meta { gap: 5px; align-items: flex-start; flex-direction: column; }
  .profile-meta .city { font-size: 12px; }
  .profile-meta .badge { font-size: 10px; padding: 3px 6px; }
  .profile-actions { width: 100%; max-width: none; flex-wrap: nowrap; gap: 7px; }
  .profile-actions button { font-size: 12px; padding: 9px 10px; min-height: 41px; flex: 1; }
  .profile-actions .primary { min-width: 0; }
  .profile-actions .secondary[aria-label] { flex: 0 0 41px; }
  .profile-actions .icon { width: 18px; height: 18px; }
  .profile-columns { display: flex; flex-direction: column; padding-top: 13px; gap: 0; }
  .profile-section, .profile-aside, .starter { padding: 18px; }
  .profile-section h2, .profile-aside h2, .starter h2 { font-size: 18px; gap: 10px; }
  .profile-section p { font-size: 13px; }
  .profile-tags .tag { font-size: 12px; padding: 8px 11px; }
  .profile-tags .tag .icon { width: 20px; height: 20px; }
  .communication-tiles>div { padding: 10px; gap: 8px; font-size: 12px; }
  .schedule-time strong { font-size: 27px; }
  .weekdays { gap: 5px; }
  .starter .starter-message { font-size: 13px; }
  .starter { margin-bottom: 13px; }
}
@media (prefers-reduced-motion:reduce) {
  button, .online-switch input:before { transition: none; }
}
