.feature-voting-page { min-height: calc(100dvh - 68px); }

.feature-voting {
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%);
}

.feature-voting__tabs { display: flex; width: fit-content; max-width: 100%; gap: 5px; margin: 0 auto 42px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.feature-voting__tabs a { padding: 10px 18px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 700; white-space: nowrap; }
.feature-voting__tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.feature-voting__tabs a:hover { color: var(--accent); }

.feature-voting__intro {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.feature-voting__intro h1 { margin: 10px 0 16px; }
.feature-voting__intro p { color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.feature-voting__rule { display: block; margin-top: 16px; font-size: .9rem; color: var(--muted); }
.feature-voting__suggest { display: inline-flex; margin-top: 22px; }

.feature-voting__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-voting__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 25px;
  border-radius: 24px;
}

.feature-voting__card.is-selected { border-color: var(--accent); }
.feature-voting__card.is-completed { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.feature-voting__badge { align-self: flex-start; margin-top: 16px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 800; }
.feature-voting__card.is-completed .button:disabled { opacity: 1; cursor: default; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.feature-voting__card.is-completed h2 { margin-top: 12px; }
.feature-voting__symbol {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.6rem;
}
.feature-voting__card h2 { margin: 25px 0 10px; font-size: 1.45rem; }
.feature-voting__card p { flex: 1; margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
.feature-voting__result { display: flex; align-items: baseline; gap: 8px; }
.feature-voting__result strong { font-size: 1.8rem; }
.feature-voting__result span { color: var(--muted); }
.feature-voting__track { height: 7px; margin: 12px 0 20px; overflow: hidden; border-radius: 99px; background: var(--accent-soft); }
.feature-voting__track span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.feature-voting__card .button { align-self: stretch; }
.feature-voting__footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; color: var(--muted); font-size: .9rem; }

.feature-ideas__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; max-width: 1100px; margin: 0 auto; }
.feature-ideas__form-panel { min-width: 0; padding: 30px; border-radius: 24px; scroll-margin-top: 110px; }
.feature-ideas__form-panel h2, .feature-ideas__own h2 { margin: 8px 0 12px; }
.feature-ideas__form-panel > p { color: var(--muted); line-height: 1.6; }
.feature-ideas__form-panel form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.feature-ideas__form-panel label { font-weight: 700; }
.feature-ideas__form-panel input, .feature-ideas__form-panel textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.feature-ideas__form-panel textarea { resize: vertical; }
.feature-ideas__form-panel input:focus-visible, .feature-ideas__form-panel textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feature-ideas__hint, .feature-ideas__empty { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.feature-ideas__form-panel .button { align-self: flex-start; margin-top: 4px; }
.feature-ideas__status { min-height: 1.5em; margin: 0; color: var(--muted); }
.feature-ideas__own { min-width: 0; }
.feature-ideas__own h2 { margin-top: 0; }
.feature-ideas__item { min-width: 0; margin-top: 14px; padding: 22px; border-radius: 18px; overflow-wrap: anywhere; }
.feature-ideas__item h3 { margin: 12px 0 8px; }
.feature-ideas__item p { margin: 0; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }
.feature-ideas__badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; }
.feature-ideas__badge.is-accepted { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.feature-ideas__badge.is-in-progress { background: var(--accent-soft); color: var(--accent-hover); }
.feature-ideas__badge.is-testing { background: color-mix(in srgb, var(--yellow) 13%, transparent); color: var(--yellow); }
.feature-ideas__badge.is-implemented { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.feature-ideas__badge.is-rejected { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }

.feature-ideas__bonus { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 12px; background: var(--accent-soft); color: var(--text); font-weight: 700; line-height: 1.5; }

@media (max-width: 900px) {
  .feature-voting__grid { grid-template-columns: 1fr; }
  .feature-voting__card { padding: 22px; }
  .feature-voting__footer { flex-direction: column; }
  .feature-ideas__layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .feature-voting__tabs { margin-bottom: 30px; }
  .feature-voting__tabs a { padding: 9px 12px; font-size: .87rem; }
  .feature-ideas__form-panel { padding: 22px; }
}