.search-page { margin-bottom: 30px; }
.search-page h1 { margin: 6px 0 16px; font-size: clamp(34px, 6vw, 52px); letter-spacing: -1.5px; }
.search-wide { max-width: 780px; }
.search-tags { margin-top: 16px; }
.search-result-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-rank { color: #8a9099; font-size: 10px; font-weight: 700; }

.quality-box { margin: 18px 0 26px; padding: 16px 18px; border: 1px solid #dfe3e8; border-radius: 14px; background: #fafbfc; }
.quality-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quality-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quality-title strong { font-size: 14px; }
.quality-score { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.quality-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.quality-badge.strong { background: #e8f6ed; color: #21733f; }
.quality-badge.developing { background: #edf4fb; color: #365f86; }
.quality-badge.needs-work { background: #fff1dc; color: #915c06; }
.quality-box p { margin: 8px 0 0; color: #717883; font-size: 12px; }
.quality-meter { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #e8ebef; }
.quality-meter span { display: block; height: 100%; width: var(--quality-score); background: #2f343b; border-radius: inherit; }
.quality-breakdown { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; color: #8a9099; font-size: 10px; }

.security-panel { margin: 24px 0; padding: 18px; border: 1px solid #e0e3e8; border-radius: 14px; background: white; }
.security-panel h2 { margin: 0 0 6px; font-size: 17px; }
.security-panel p { margin: 0 0 14px; color: #777e88; font-size: 12px; }
.security-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-status { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: #f3f5f7; color: #626975; font-size: 12px; }

@media (max-width: 760px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .topbar-inner { align-items: flex-start; gap: 10px; }
  .topbar-inner nav { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
  .topbar-inner nav::-webkit-scrollbar { display: none; }
  .topbar-inner nav a, .topbar-inner nav button { min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(34px, 12vw, 48px); line-height: 1.04; }
  .search { display: grid; grid-template-columns: 1fr auto; }
  .search input { min-width: 0; font-size: 16px; }
  .search button { min-height: 46px; }
  .section-head { align-items: flex-start; gap: 12px; }
  .article-card { grid-template-columns: 1fr; gap: 12px; }
  .article-meta { align-items: flex-start; text-align: left; }
  .document-head { flex-direction: column; }
  .document-head .actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .document-body { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
  .source-list li { grid-template-columns: 1fr; gap: 8px; }
  .source-url { justify-self: start; }
  .quality-head { align-items: flex-start; }
  .quality-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-form input, .stack-form textarea, .stack-form select { font-size: 16px; }
  .button, button { min-height: 42px; }
}