.reviews-page { --review-blue: #158bff; --review-cyan: #38d5ff; --review-line: rgba(100, 158, 230, .23); }
.reviews-layout { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: clamp(56px, 8vw, 100px) 0 90px; }
.reviews-hero { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: 48px; padding: 38px 0 54px; }
.reviews-hero h1 { max-width: 800px; margin: 18px 0; color: #f4f8ff; font-size: clamp(40px, 6vw, 70px); line-height: 1.03; letter-spacing: -.055em; }
.reviews-hero h1 span { color: #a9dcff; }
.reviews-hero > div > p:last-child { max-width: 690px; color: #c2d3eb; font-size: 17px; line-height: 1.75; }
.reviews-hero .eyebrow { font-size: 12px; line-height: 1.45; }
.reviews-hero .eyebrow i { color: #58caff; margin-right: 8px; }
.reviews-score { display: grid; justify-items: center; gap: 8px; padding: 27px 20px; border: 1px solid var(--review-line); border-radius: 22px; background: radial-gradient(circle at 50% 0, rgba(21,139,255,.21), transparent 62%), linear-gradient(145deg, rgba(18,38,67,.93), rgba(8,17,34,.94)); box-shadow: 0 20px 60px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.06); text-align: center; }
.score-label { color: #a8c6e6; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.reviews-score strong { color: #f8fbff; font-size: 62px; line-height: 1; letter-spacing: -.06em; }
.score-stars { color: #ffc85e; font-size: 22px; letter-spacing: .12em; }
.reviews-score > span:last-child { min-height: 18px; color: #bfd2e9; font-size: 12px; }
.reviews-dashboard { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; }
.reviews-distribution,.reviews-compose,.review-card { border: 1px solid var(--review-line); border-radius: 18px; background: linear-gradient(145deg, rgba(16,32,57,.92), rgba(8,16,31,.94)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.reviews-distribution,.reviews-compose { padding: 24px; }
.reviews-distribution h2,.reviews-compose h2,.reviews-list-section h2 { margin: 0; color: #f4f8ff; letter-spacing: -.035em; }
.reviews-distribution > p,.review-form-note { color: #bbcee5; font-size: 13px; line-height: 1.65; }
.distribution-rows { display: grid; gap: 9px; margin-top: 20px; }
.distribution-row { display: grid; grid-template-columns: 42px minmax(40px,1fr) 28px; align-items: center; gap: 10px; color: #d4e3f4; font-size: 12px; }
.distribution-row > span:first-child { color: #ffc85e; white-space: nowrap; }
.distribution-bar { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(128,169,214,.16); }
.distribution-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #087cff, #35d3ff); }
.distribution-row > b { color: #bdd1e8; text-align: right; }
.reviews-compose .section-heading { display: grid; gap: 7px; margin-bottom: 10px; }
.reviews-compose .eyebrow { margin: 0; color: #83caff; font-size: 12px; line-height: 1.45; font-weight: 850; letter-spacing: .12em; }
.reviews-compose form { display: grid; gap: 13px; }
.reviews-compose form[hidden] { display: none; }
.reviews-compose label,.reviews-controls label { display: grid; gap: 7px; color: #e0ecfa; font-size: 13px; line-height: 1.45; font-weight: 750; }
.reviews-compose input,.reviews-compose textarea,.reviews-compose select,.reviews-controls select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(121,165,217,.31); border-radius: 10px; background: #091529; color: #f4f8ff; padding: 11px 12px; font: inherit; font-size: 14px; }
.reviews-compose textarea { resize: vertical; line-height: 1.6; }
.reviews-compose input:focus,.reviews-compose textarea:focus,.reviews-compose select:focus,.reviews-controls select:focus { outline: 2px solid rgba(41,171,255,.52); outline-offset: 2px; }
.reviews-compose .button { justify-self: start; display: inline-flex; gap: 9px; align-items: center; }
.review-own-state { padding: 13px; border-radius: 11px; border: 1px solid rgba(57,178,255,.27); background: rgba(13,99,164,.15); color: #d6eaff; line-height: 1.6; }
.reviews-list-section { margin-top: 54px; }
.reviews-list-section > .section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 18px; }
.reviews-list-section .section-heading > div:first-child { display: grid; gap: 8px; }
.reviews-list-section .eyebrow { margin: 0; color: #83caff; font-size: 12px; line-height: 1.45; font-weight: 850; letter-spacing: .12em; }
.reviews-controls { display: flex; gap: 10px; }
.reviews-controls label { min-width: 155px; }
.reviews-controls select { padding: 9px 11px; }
.reviews-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.review-card { min-width: 0; padding: 22px; }
.review-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.review-person { display: flex; align-items: center; min-width: 0; gap: 11px; }
.review-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #f4fbff; background: linear-gradient(145deg,#0783ff,#3854c9); font-size: 15px; font-weight: 850; }
.review-person strong { display: block; overflow: hidden; color: #f4f8ff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.review-person small { display: block; margin-top: 3px; color: #abc2dc; font-size: 11px; }
.review-stars { color: #ffc85e; white-space: nowrap; letter-spacing: .08em; }
.review-verified { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: #8ed9ff; font-size: 11px; }
.review-comment { margin: 17px 0 0; color: #d5e3f2; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.reviews-empty { grid-column: 1/-1; padding: 32px; border: 1px dashed rgba(110,161,217,.3); border-radius: 16px; color: #c2d3e8; text-align: center; background: rgba(10,24,43,.42); }
.reviews-empty i { display: block; margin-bottom: 12px; color: #50bfff; font-size: 24px; }
.reviews-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 22px; color: #c1d2e7; font-size: 13px; }
.reviews-pagination button:disabled { opacity: .45; cursor: not-allowed; }
#reviewsRetry,#reviewSessionRetry { margin-top: 8px; }
#reviewsRetry[hidden],#reviewSessionRetry[hidden] { display: none; }
#reviewsStatus[data-state="error"] { margin: 10px 0; padding: 16px 18px; border: 1px solid rgba(255, 132, 153, .34); border-radius: 13px; color: #ffe0e5; background: linear-gradient(120deg, rgba(111, 35, 54, .3), rgba(25, 31, 52, .55)); }
#reviewsStatus[data-state="ready"][hidden] { display: none; }
.reviews-controls select:disabled { opacity: .72; cursor: progress; }
.reviews-compose button[aria-busy="true"] { cursor: progress; }
.reviews-transparency { display: flex; gap: 10px; margin-top: 28px; padding: 16px 18px; border: 1px solid rgba(67,159,232,.2); border-radius: 13px; background: rgba(11,37,61,.42); color: #c5d9ed; font-size: 12px; line-height: 1.65; }
.reviews-transparency i { color: #5bc5ff; }
.review-toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; border: 1px solid rgba(91,187,255,.37); border-radius: 12px; background: #10233e; color: #f4f8ff; box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.review-toast[hidden] { display: none; }
.light.reviews-page .reviews-hero h1,.light.reviews-page .reviews-score strong,.light.reviews-page .reviews-distribution h2,.light.reviews-page .reviews-compose h2,.light.reviews-page .reviews-list-section h2,.light.reviews-page .review-person strong { color: #14243a; }
.light.reviews-page .reviews-score,.light.reviews-page .reviews-distribution,.light.reviews-page .reviews-compose,.light.reviews-page .review-card { background: linear-gradient(145deg,#fff,#eff6ff); }
.light.reviews-page .reviews-hero > div > p:last-child,.light.reviews-page .reviews-distribution > p,.light.reviews-page .review-form-note,.light.reviews-page .review-comment { color: #405773; }
.light.reviews-page .reviews-compose input,.light.reviews-page .reviews-compose textarea,.light.reviews-page .reviews-compose select,.light.reviews-page .reviews-controls select { background: #fff; color: #172a43; }
@media(max-width:850px) { .reviews-hero { grid-template-columns: minmax(0,1fr) 230px; gap: 24px; } .reviews-dashboard { grid-template-columns: 1fr; } }
@media(max-width:600px) { .reviews-layout { width: min(100% - 32px,1160px); padding-top: 45px; } .reviews-hero { grid-template-columns: 1fr; padding-top: 28px; gap: 20px; } .reviews-hero h1 { font-size: clamp(38px,12vw,56px); } .reviews-hero > div > p:last-child { font-size: 15px; } .reviews-score { justify-items: start; text-align: left; } .reviews-grid { grid-template-columns: 1fr; } .reviews-controls { width: 100%; } .reviews-controls label { flex: 1; min-width: 0; } .reviews-list-section > .section-heading { align-items: stretch; } .review-card header { align-items: flex-start; } .review-stars { font-size: 12px; } }
@media(prefers-reduced-motion:reduce) { .reviews-page *, .reviews-page *::before, .reviews-page *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
