.review-form { display: grid; gap: 12px; max-width: 560px; margin: 20px 0; }
.review-score { margin: 0; padding: 0; border: 0; }
.review-label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.review-choices { display: flex; gap: 8px; margin-top: 10px; }
.review-choice { position: relative; }
.review-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.review-choice span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #a9bbd1; border-radius: 12px; background: #fff; color: #243b53; font-weight: 800; }
.review-choice input:checked + span { background: #0968f9; color: #fff; border-color: #0968f9; }
.review-choice input:focus-visible + span { outline: 3px solid #0968f9; outline-offset: 3px; }
.review-choice input:hover + span { border-color: #0968f9; }
.review-choice input:disabled + span { opacity: .65; cursor: wait; }
.review-star .toy-star { width:32px; height:32px; filter:grayscale(1); opacity:.7; transition:filter 160ms ease,opacity 160ms ease; }
.review-choice.is-filled .toy-star { filter:none; opacity:1; }
.review-choice input:checked + .review-star { background:#fff7da; border-color:#bb7b08; }
@media (prefers-reduced-motion:reduce) { .review-star .toy-star { transition:none; } }

.review-note { font-size: 12px; line-height: 1.6; color: #52657d; margin: 0; }
.review-text { width: 100%; resize: vertical; font: inherit; min-height: 100px; padding: 12px; border: 1px solid #a9bbd1; border-radius: 12px; background: #fff; color: #10233f; }
.review-text::placeholder { color: #52657d; }
.review-error { color: #a92819; font-size: 14px; }
.review-form > button { justify-self: start; }
.review-comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.top-main { max-width: 1040px; margin: 0 auto; padding: 40px 24px 80px; }
.top-heading { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 16px; }
.top-intro { max-width: 70ch; color: #52657d; line-height: 1.65; }
.top-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0; }
.top-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.top-tabs button { min-height: 44px; padding: 10px 16px; border: 1px solid #a9bbd1; border-radius: 12px; background: #fff; color: #243b53; font: inherit; font-weight: 700; cursor: pointer; }
.top-tabs button[aria-pressed="true"] { background: #0968f9; border-color: #0968f9; color: #fff; }
.top-month { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.top-month input { min-height: 44px; border: 1px solid #a9bbd1; border-radius: 12px; padding: 8px 12px; font: inherit; background: #fff; color: #10233f; }
.top-list { margin: 24px 0; padding: 0; list-style: none; background: #fff; border: 1px solid #d9e3ef; border-radius: 16px; overflow: hidden; }
.top-row { display: grid; grid-template-columns: 40px minmax(170px, 1fr) minmax(220px, 1.1fr) auto; gap: 20px; align-items: center; padding: 24px; }
.top-row + .top-row { border-top: 1px solid #d9e3ef; }
.top-place { font-size: 22px; font-weight: 800; color: #52657d; font-variant-numeric: tabular-nums; }
.top-row:first-child .top-place { color: #0968f9; }
.top-name { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; margin: 0 0 6px; }
.top-rating { color: #344f70; font-size: 14px; margin: 0; }
.top-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.top-stats dt { font-size: 12px; color: #52657d; }
.top-stats dd { margin: 4px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.top-status { padding: 24px 0; color: #52657d; line-height: 1.6; }
.top-reviews { margin-top: 40px; scroll-margin-top: 24px; }
.top-reviews h2 { margin-bottom: 10px; font-size: 24px; }
.top-review-list { list-style: none; margin: 20px 0; padding: 0; }
.top-review { padding: 20px 0; border-bottom: 1px solid #d9e3ef; }
.top-review p { margin: 8px 0; line-height: 1.6; }
.top-review-meta { color: #52657d; font-size: 13px; }
.top-main button:focus-visible, .top-main input:focus-visible, .review-text:focus-visible { outline: 3px solid #0968f9; outline-offset: 3px; }
.top-main button:disabled { opacity: .6; cursor: wait; }
.top-main ::selection { background: #cfe2ff; color: #10233f; }
@media (max-width: 700px) {
  .top-main { padding: 28px 16px 60px; }
  .top-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 20px 16px; }
  .top-stats { grid-column: 2 / -1; grid-row: 2; }
  .top-row > button { padding: 10px; font-size: 13px; }
  .top-controls { gap: 20px; }
}

.top-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-identity { min-width: 0; }
.top-picture { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #e7f0ff; color: #0758d4; font-weight: 800; }
.top-picture img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.top-logo { border-radius: 10px; background: #fff; }
.top-logo img { object-fit: contain; background: #fff; }
@media (max-width: 420px) { .top-person { gap: 8px; } .top-picture { width: 36px; height: 36px; } }

.top-name-link { color: inherit; text-decoration: none; }
.top-name-link:hover { color: #0968f9; text-decoration: underline; text-underline-offset: 4px; }
.top-main a:focus-visible { outline: 3px solid #0968f9; outline-offset: 3px; }
.top-row > a { white-space: nowrap; text-decoration: none; text-align: center; }
.profile-main { max-width: 880px; }
.profile-nav { margin-bottom: 32px; }
.profile-nav a { display: inline-flex; min-height: 44px; align-items: center; color: #0968f9; text-underline-offset: 4px; }
.profile-header { display: flex; align-items: center; gap: 24px; }
.profile-identity { min-width: 0; }
.profile-identity h1 { margin-bottom: 8px; overflow-wrap: anywhere; }
.profile-role { margin: 0 0 12px; color: #52657d; }
.person-avatar { flex: 0 0 80px; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 16px; background: #e5efff; color: #0968f9; font-size: 32px; font-weight: 800; overflow: hidden; }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-stats { max-width: 500px; margin: 32px 0 16px; padding: 24px 0; border-top: 1px solid #d9e3ef; border-bottom: 1px solid #d9e3ef; }
.profile-stats dd { font-size: 24px; }
.profile-reviews { margin-top: 48px; }
.profile-review-heading h2 { font-size: 24px; margin: 0 0 8px; }
.profile-review-heading + div { margin-top: 16px; }
@media (max-width: 700px) {
  .top-row > a { padding: 10px; font-size: 13px; }
  .profile-header { align-items: flex-start; gap: 16px; }
  .person-avatar { flex-basis: 64px; width: 64px; height: 64px; font-size: 28px; }
  .profile-nav { margin-bottom: 24px; }
  .profile-identity h1 { font-size: 28px; }
}

@media (max-width: 700px) { .top-rating .toy-rating .toy-star { width: 14px; height: 14px; } }

/* Меню топа и профиля: то же, что в каталоге; на телефоне — нижняя панель. */
.top-actions .nav-search:not([aria-current]) { border-bottom-color: transparent; }
.top-actions [aria-current="page"] { border-bottom: 2px solid var(--blue, #0968f9); }
.page-bottom-nav a { flex: 1; min-height: 56px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; border-radius: 16px; color: #53647a; font-size: 10px; text-decoration: none; }
.page-bottom-nav a.active { color: #0758d4; background: #eaf4ffcc; font-weight: 800; }
.page-bottom-nav .icon { width: 23px; height: 23px; }
@container app (max-width: 799px) {
  .top-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}