.tool-main--feature {
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(34, 211, 238, 0.16), transparent 58%),
    radial-gradient(420px 240px at 100% 0%, rgba(20, 184, 166, 0.14), transparent 56%),
    var(--panel);
}

.tool-textarea {
  resize: vertical;
  min-height: 180px;
}

.tool-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.72rem;
}

.tool-result-stack {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
}

.feature-empty-state {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.feature-empty-state strong {
  font-size: 1rem;
}

.tool-info-list {
  display: grid;
  gap: 0.62rem;
}

.info-bullet {
  display: grid;
  gap: 0.24rem;
  padding: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: var(--card-strong);
}

.info-bullet strong {
  font-size: 0.92rem;
}

.info-bullet span {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.score-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.score-hero-card,
.score-summary-card,
.ai-summary-card,
.breakdown-card,
.insight-card,
.note-banner,
.title-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.score-hero-card {
  padding: 1rem;
  display: grid;
  gap: 0.76rem;
  align-content: start;
}

.score-gauge {
  width: clamp(120px, 20vw, 150px);
  aspect-ratio: 1;
  border-radius: 999px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--accent-2) 0deg, var(--accent) var(--score-angle, 0deg), rgba(148, 163, 184, 0.2) 0deg);
}

.score-gauge::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: rgba(6, 11, 22, 0.92);
}

html.light .score-gauge::before {
  background: rgba(248, 251, 255, 0.96);
}

.score-gauge-inner {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.18rem;
  z-index: 1;
}

.score-value {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.score-text {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  border-radius: 999px;
  padding: 0.44rem 0.74rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.score-pill.is-poor {
  background: rgba(248, 113, 113, 0.16);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.42);
}

.score-pill.is-average {
  background: rgba(251, 191, 36, 0.16);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.score-pill.is-good {
  background: rgba(34, 197, 94, 0.14);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.38);
}

.score-pill.is-excellent {
  background: rgba(34, 211, 238, 0.16);
  color: var(--action-link);
  border: 1px solid rgba(34, 211, 238, 0.42);
}

.score-summary-card {
  padding: 1rem;
  display: grid;
  gap: 0.86rem;
}

.ai-summary-card {
  padding: 0.9rem;
}

.score-summary-card p {
  color: var(--text-secondary);
}

.score-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.meta-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  padding: 0.4rem 0.68rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.breakdown-grid,
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.86rem;
}

.breakdown-card,
.insight-card {
  padding: 0.94rem;
  display: grid;
  gap: 0.72rem;
}

.breakdown-top,
.title-card-top,
.title-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
}

.breakdown-score {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.progress-bar {
  position: relative;
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}

.breakdown-card p,
.insight-card p,
.insight-card li,
.note-banner p,
.title-card p {
  color: var(--text-secondary);
}

.insight-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.42rem;
}

.ai-summary {
  display: grid;
  gap: 0.86rem;
}

.ai-summary-card {
  padding: 0.94rem;
}

.note-banner {
  padding: 0.84rem 0.94rem;
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(34, 211, 238, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(11, 19, 36, 0.92) 0%, rgba(8, 15, 29, 0.96) 100%);
}

.note-banner strong {
  display: block;
  margin-bottom: 0.28rem;
}

.title-toolbar {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.82rem;
}

.title-toolbar-group {
  min-width: 220px;
  max-width: 320px;
}

.title-list {
  display: grid;
  gap: 0.86rem;
}

.title-card {
  padding: 1rem;
  display: grid;
  gap: 0.86rem;
  overflow-wrap: anywhere;
}

.title-main {
  display: grid;
  gap: 0.52rem;
}

.title-main h3 {
  font-size: 1.08rem;
  line-height: 1.28;
}

.title-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.title-badge,
.char-badge,
.warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.title-badge {
  background: rgba(34, 211, 238, 0.14);
  color: var(--action-link);
  border: 1px solid rgba(34, 211, 238, 0.36);
}

.char-badge {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.warning-badge {
  background: rgba(251, 191, 36, 0.14);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.34);
}

.title-score {
  min-width: 84px;
  padding: 0.54rem 0.68rem;
  border-radius: 0.84rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.title-score strong {
  display: block;
  font-size: 1.2rem;
  font-family: 'Syne', sans-serif;
}

.title-score span {
  display: block;
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.title-alt {
  padding: 0.78rem 0.84rem;
  border: 1px solid var(--line);
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.02);
}

.title-alt strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.86rem;
}

.title-card-actions {
  flex-wrap: wrap;
}

.favorite-btn.is-active {
  color: #08202a;
  border-color: rgba(34, 211, 238, 0.6);
  background: linear-gradient(135deg, #22d3ee 0%, #5eead4 100%);
}

.tool-result-stack .result-card h3,
.tool-result-stack .score-summary-card h3,
.tool-result-stack .insight-card h3 {
  font-size: 1rem;
}

@media (max-width: 1120px) {
  .score-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tool-action-row,
  .title-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tool-action-row .btn,
  .title-toolbar-group {
    width: 100%;
  }

  .score-hero,
  .breakdown-grid,
  .insight-grid {
    grid-template-columns: 1fr;
  }

  .title-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .title-score {
    width: 100%;
    text-align: left;
  }

  .title-card-actions .btn,
  .title-card-actions .favorite-btn {
    width: 100%;
  }
}

.downloader-result-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    radial-gradient(360px 200px at 0% 0%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(180deg, var(--card) 0%, var(--card-strong) 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.downloader-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}

.downloader-media {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.downloader-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.downloader-content {
  display: grid;
  gap: 0.82rem;
  align-content: start;
}

.downloader-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.downloader-format-pill,
.downloader-quality-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.downloader-format-pill {
  color: #08202a;
  background: linear-gradient(135deg, #22d3ee 0%, #5eead4 100%);
}

.downloader-quality-pill {
  border: 1px solid rgba(34, 211, 238, 0.32);
  background: rgba(34, 211, 238, 0.1);
  color: var(--action-link);
}

.downloader-title {
  font-size: clamp(1.06rem, 2vw, 1.42rem);
  line-height: 1.35;
}

.downloader-channel {
  color: var(--text-secondary);
}

.downloader-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.downloader-meta-item {
  padding: 0.84rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 0.24rem;
}

.downloader-meta-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.downloader-meta-value {
  font-size: 0.94rem;
  line-height: 1.35;
}

.downloader-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.72rem;
}

.downloader-actions .btn {
  flex: 1 1 220px;
}

@media (max-width: 1120px) {
  .downloader-hero,
  .downloader-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .downloader-actions .btn {
    width: 100%;
  }
}