

[hidden] {
  display: none !important;
}

/* Home stays clean: no ad placeholders or mock dialogs */
#topAdContainer,
#bottomAdCard,
#bottomAdContainer,
#adDialog,
#solutionLocked,
#watchAdBtn,
.hint-action-btn,
[id^="hintToggle"] {
  display: none !important;
}

/* Result and progress appear only after checking */
body:not(.has-correction-result) #resultBox,
body:not(.has-correction-result) #progressStrip {
  display: none !important;
}

body.has-correction-result #resultBox:not([hidden]) {
  display: grid !important;
}

body.has-correction-result #progressStrip:not([hidden]) {
  display: flex !important;
}

#resultBox {
  margin-top: 0.72rem;
  border: 1px solid hsl(var(--border) / 0.9);
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--secondary) / 0.56);
  padding: 0.92rem 0.96rem;
  gap: 0.42rem;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

#resultBox p {
  margin: 0;
}

/* Veredicto centrado, con estilo visual parecido a la fecha */
.result-verdict-line {
  margin: 0 0 0.5rem;
  text-align: center;
  color: hsl(var(--muted-foreground) / 0.9);
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

#resultVerdict {
  display: inline-block;
  font-weight: 600;
  color: hsl(var(--foreground));
}

#resultFeedback {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.58;
  color: hsl(var(--foreground) / 0.9);
}

/* Estados del resultado */
#resultBox.result-correct {
  background: #eef8f0 !important;
  border-color: #cfe7d3 !important;
  box-shadow: 0 8px 24px rgba(80, 140, 90, 0.08);
}

#resultBox.result-partial {
  background: #fff7e8 !important;
  border-color: #ecd8a2 !important;
  box-shadow: 0 8px 24px rgba(180, 140, 60, 0.08);
}

#resultBox.result-incorrect {
  background: #fff1f0 !important;
  border-color: #e5b0aa !important;
  box-shadow: 0 8px 24px rgba(170, 90, 80, 0.08);
}

/* Color del texto del veredicto según el estado */
#resultBox.result-correct #resultVerdict {
  color: #2f6b3d;
}

#resultBox.result-partial #resultVerdict {
  color: #9a6b00;
}

#resultBox.result-incorrect #resultVerdict {
  color: #a3443b;
}

/* Modo oscuro */
html[data-theme="dark"] #resultBox.result-correct,
html.dark #resultBox.result-correct {
  background: rgba(50, 92, 60, 0.35) !important;
  border-color: rgba(126, 193, 141, 0.38) !important;
}

html[data-theme="dark"] #resultBox.result-partial,
html.dark #resultBox.result-partial {
  background: rgba(120, 92, 28, 0.3) !important;
  border-color: rgba(232, 195, 108, 0.34) !important;
}

html[data-theme="dark"] #resultBox.result-incorrect,
html.dark #resultBox.result-incorrect {
  background: rgba(110, 52, 48, 0.3) !important;
  border-color: rgba(229, 176, 170, 0.3) !important;
}

html[data-theme="dark"] #resultFeedback,
html.dark #resultFeedback {
  color: hsl(var(--foreground) / 0.92);
}

.result-engine-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.result-engine-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: hsl(var(--muted-foreground));
}

#progressStrip {
  margin-top: 0.58rem;
  align-items: center;
  gap: 1rem;
}

.progress-item-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.progress-item-value {
  color: hsl(var(--foreground));
  font-weight: 610;
}

.home-main #hintsSection,
.home-main #solutionSection,
.home-main .secondary-flow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Inline hint/solution flow */
.home-main #hintsSection,
.home-main #solutionSection {
  margin-top: 0.52rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#hintsSection > h2,
#hintsSection > .section-sub,
#solutionSection > h2,
#adsModeInfo {
  display: none !important;
}

#hintsSection .hint-step {
  margin-top: 0.52rem;
}

#hintsSection .hint-content {
  margin-top: 0.38rem;
  border-radius: calc(var(--radius) + 4px);
  padding: 0.82rem 0.92rem;
}

#hintsSection .hint-content.hint-card-visible {
  border: 1px solid rgb(245 158 11 / 0.24);
  background: linear-gradient(180deg, rgb(245 158 11 / 0.08), rgb(245 158 11 / 0.13));
}

#hintsSection .hint-kimi-head {
  margin: 0 0 0.18rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

#hintsSection .hint-kimi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: rgb(245 158 11);
  font-size: 0.92rem;
  line-height: 1;
  margin-top: -0.02rem;
}

#hintsSection .hint-kimi-icon svg {
  width: 0.92rem;
  height: 0.92rem;
}

#hintsSection .hint-kimi-label {
  font-size: 0.74rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 620;
  color: rgb(217 119 6);
}

#hintsSection .hint-kimi-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.56;
  color: hsl(var(--foreground) / 0.9);
}

#hintsSection .hint-kimi-body p + p {
  margin-top: 0.54rem;
}

#hintsInfo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

#solutionSection #solutionRevealed {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid hsl(var(--primary) / 0.3);
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.08),
    hsl(260 78% 75% / 0.12)
  );
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.38);
  padding: 0.9rem 0.96rem;
}

#solutionSection #solutionRevealed .solution-revealed-head {
  margin: 0 0 0.44rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.74rem;
  line-height: 1.1;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  font-weight: 600;
  color: hsl(var(--primary));
}

#solutionSection #solutionRevealed .solution-revealed-head::before {
  content: "✦";
  line-height: 1;
}

#solutionSection #solutionRevealed .markdown-block {
  font-size: 0.92rem;
  line-height: 1.58;
  color: hsl(var(--foreground) / 0.92);
}

#solutionSection #solutionRevealed .markdown-block p + p {
  margin-top: 0.62rem;
}

/* Inline hint/solution buttons */
.kimi-inline-actions {
  max-width: 42rem;
  margin: 0.82rem auto 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.kimi-inline-btn {
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.2rem 0.58rem;
  cursor: pointer;
}

.kimi-inline-btn .label {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kimi-inline-btn .label svg {
  width: 1rem;
  height: 1rem;
}

.kimi-inline-btn .text {
  font-size: 0.88rem;
  line-height: 1;
}

.kimi-inline-btn + .kimi-inline-btn {
  border-left: 1px solid hsl(var(--border));
  margin-left: 0.72rem;
  padding-left: 0.88rem;
}

.kimi-inline-btn[data-open="true"] {
  color: hsl(var(--primary));
}

/* More actions + secondary folds */
.secondary-flow {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

#actionsHubSection {
  border: 1px solid hsl(var(--border) / 0.94);
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--secondary) / 0.68);
  padding: 0;
}

.actions-hub-panel {
  border: 0;
  background: transparent;
  display: grid;
  gap: 0.56rem;
}

.secondary-fold {
  border: 1px solid hsl(var(--border) / 0.9);
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--card));
}

.secondary-toggle {
  width: 100%;
  min-height: 2.82rem;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0 0.86rem;
  cursor: pointer;
}

.secondary-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.secondary-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.72rem;
  border: 1px solid hsl(var(--border) / 0.9);
  background: hsl(var(--secondary) / 0.62);
  color: hsl(var(--muted-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  line-height: 1;
}

.secondary-toggle-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  color: hsl(var(--muted-foreground));
}

.secondary-toggle[aria-expanded="true"] .secondary-toggle-meta {
  transform: rotate(180deg);
}

.secondary-panel {
  padding: 0 0.86rem 0.8rem;
}

/* Quick actions: minimal list without extra wrapper card */
#actionsHubPanel .quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0.48rem;
  padding: 0.04rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#actionsHubPanel .quick-action-btn {
  min-height: 2.54rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border) / 0.95) !important;
  background: hsl(var(--background) / 0.78) !important;
  color: hsl(var(--foreground) / 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.52rem;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0 0.84rem;
  text-align: center;
  width: 100%;
  min-width: 0;
}

#actionsHubPanel .quick-action-btn:hover {
  background: hsl(var(--secondary) / 0.72) !important;
}

#actionsHubPanel .quick-action-btn:nth-child(3) {
  grid-column: 1 / -1;
  width: min(12rem, 100%);
  justify-self: center;
}

#actionsHubPanel .quick-action-btn .qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: hsl(var(--muted-foreground));
}

#actionsHubPanel .quick-action-btn .qa-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Archive panel */
#archivePanel .text-sm {
  margin: 0.02rem 0 0.3rem;
  font-size: 0.74rem;
  color: hsl(var(--muted-foreground) / 0.9);
}

#archiveList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

#archiveList .archive-row-link {
  position: relative;
  display: block;
  padding: 0.56rem 1.06rem 0.56rem 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  border-radius: 0;
  background: transparent;
}

#archiveList .archive-row-link::after {
  content: "›";
  position: absolute;
  right: 0.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground) / 0.76);
  font-size: 0.98rem;
  line-height: 1;
}

#archiveList .archive-row:last-child .archive-row-link {
  border-bottom: 0;
}

#archiveList .archive-item-title {
  display: block;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 540;
  color: hsl(var(--foreground));
}

#archiveList .archive-item-meta {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: hsl(var(--muted-foreground) / 0.88);
}

/* Subscribe panel */
.newsletter-compact {
  display: grid;
  gap: 0.36rem;
}

.newsletter-compact .subsection-title {
  display: none;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.9);
}

.newsletter-inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.38rem;
}

.newsletter-inline-row input {
  min-height: 2.48rem;
  border-radius: 0.78rem;
  font-size: 0.86rem;
  padding-inline: 0.76rem;
}

.newsletter-inline-row .btn {
  min-height: 2.48rem;
  border-radius: 0.78rem;
  padding: 0 0.7rem;
  font-size: 0.82rem;
}

.consent-row {
  margin-top: 0.06rem;
  display: flex;
  align-items: flex-start;
  gap: 0.34rem;
  font-size: 0.64rem;
  line-height: 1.26;
  color: hsl(var(--muted-foreground) / 0.92);
}

.consent-row input[type="checkbox"] {
  width: 0.72rem !important;
  height: 0.72rem !important;
  min-height: 0.72rem !important;
  min-width: 0.72rem !important;
  margin: 0.08rem 0 0;
  padding: 0 !important;
  border-radius: 0.18rem;
  flex-shrink: 0;
}

.newsletter-links {
  display: none !important;
}

/* Remove legacy leftover blocks in home */
#participateSection,
#shareSection,
#communityEditorSection,
#monetizationCard,
#bottomAdCard,
.action-inline-card {
  display: none !important;
}

@media (max-width: 768px) {
  .home-main .secondary-flow {
    gap: 0.52rem;
  }

  .kimi-inline-actions {
    margin-top: 0.72rem;
  }

  #actionsHubPanel .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  #actionsHubPanel .quick-action-btn {
    min-height: 2.46rem;
    font-size: 0.84rem;
    min-width: 0;
    padding-inline: 0.64rem;
  }

  #actionsHubPanel .quick-action-btn:nth-child(3) {
    max-width: 12rem;
    margin-inline: auto;
  }

  .secondary-toggle {
    min-height: 2.82rem;
    font-size: 0.91rem;
    padding: 0 0.74rem;
  }

  .secondary-panel {
    padding: 0 0.7rem 0.72rem;
  }

  #archiveList .archive-row-link {
    padding: 0.66rem 1.92rem 0.66rem 0.72rem;
  }

  .newsletter-inline-row {
    grid-template-columns: 1fr;
  }

  .newsletter-inline-row .btn {
    width: 100%;
  }

  .consent-row {
    font-size: 0.68rem;
  }
}

@media (max-width: 420px) {
  .secondary-toggle {
    min-height: 2.84rem;
    font-size: 0.92rem;
  }
}
