.feedback-page { max-width: 1240px; margin: 0 auto; padding: 0 40px 90px; }
.preview-notice { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 15px; border: 1px solid #e1d4b9; border-radius: 10px; color: #65553b; background: #f8f2e5; font-size: .75rem; line-height: 1.5; }
.feedback-intro { margin: 38px 0 60px; background: #e5e9e8; border-radius: 24px; padding: 56px 65px; display: grid; grid-template-columns: 1fr 270px; align-items: center; overflow: hidden; }
.intro-kicker { color: #5e6f79; font-size: .85rem; font-weight: 600; margin: 0 0 16px; }
.sparkle { color: #b18c4c; margin-right: 5px; font-size: 1.2rem; }
.feedback-intro h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); max-width: 13ch; margin-bottom: 20px; }
.feedback-intro p:not(.intro-kicker) { color: #596b78; max-width: 47ch; font-size: 1rem; line-height: 1.65; margin-bottom: 26px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #906321; outline-offset: 3px; }
.primary-action { border: 0; border-radius: 12px; background: var(--ink); color: #fff; padding: 13px 20px; font-size: .86rem; font-weight: 600; }
.primary-action:hover { background: #141f32; }
.primary-action span { font-size: 1.15rem; margin-right: 4px; }
.intro-art { position: relative; width: 230px; height: 230px; justify-self: center; }
.moon { position: absolute; width: 150px; height: 150px; top: 40px; left: 40px; border-radius: 50%; background: #edcc90; color: #fff7e4; font-size: 35px; padding: 67px 0 0 38px; box-shadow: 0 12px 35px #a78c5c29; }
.moon:after { content: ''; position: absolute; width: 140px; height: 140px; top: -27px; left: 51px; border-radius: 50%; background: #e5e9e8; }
.star { position: absolute; color: #b69a6c; z-index: 1; }.star-one { top: 23px; right: 32px; font-size: 24px; }.star-two { bottom: 28px; left: 16px; font-size: 30px; }
.orbit { position: absolute; border: 1px solid #cbd4d2; border-radius: 50%; }.orbit-one { inset: 8px; }.orbit-two { inset: -12px; opacity: .55; }
.board-top { display: flex; justify-content: space-between; gap: 24px; align-items: end; border-bottom: 1px solid #d8ddda; }
.board-tabs { display: flex; gap: 30px; }.board-tabs button { background: none; color: #6a7880; border: 0; border-bottom: 3px solid transparent; padding: 0 0 16px; font-weight: 600; font-size: .9rem; }.board-tabs button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.board-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #faf9f6; border: 1px solid #d8ddda; border-radius: 10px; }.search-box svg { width: 18px; height: 18px; fill: none; stroke: #758087; stroke-width: 1.7; }.search-box input { width: 150px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }.search-box:focus-within { outline: 3px solid #906321; outline-offset: 2px; }
.sort-label select { border: 1px solid #d8ddda; border-radius: 10px; background: #faf9f6; padding: 9px 12px; color: var(--ink); font-size: .82rem; }
.section-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 35px 0 20px; }.section-intro h2 { font-size: 1.5rem; margin: 0 0 6px; }.section-intro p { margin: 0; color: var(--muted); font-size: .86rem; }.sample-label { color: #7a858a; font-size: .75rem; white-space: nowrap; }
.idea-list { display: grid; gap: 10px; }.idea-card { display: flex; gap: 20px; align-items: flex-start; background: #faf9f6; border: 1px solid #e0e3df; border-radius: 15px; padding: 20px; }.vote-button { flex: 0 0 58px; min-height: 62px; border: 1px solid #d9dfdc; border-radius: 10px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600; line-height: 1.3; }.vote-button span { display: block; font-size: 1.05rem; }.vote-button[aria-pressed="true"] { background: #e8eee9; border-color: #93aa9d; }.idea-body { min-width: 0; }.status-pill { display: inline-block; padding: 3px 9px; border-radius: 99px; background: #e7edeb; color: #4f6d63; font-size: .68rem; font-weight: 600; line-height: 1.5; }.status-planned { background: #e8eaf3; color: #596b95; }.status-completed { background: #e7eee2; color: #577b56; }.status-wont-do { background: #f2eae3; color: #8a6854; }.idea-title { margin: 8px 0 5px; font-size: 1.07rem; letter-spacing: -.025em; }.idea-description { margin: 0; font-size: .86rem; line-height: 1.55; color: #66737a; }.idea-meta { margin: 8px 0 0; color: #8a9495; font-size: .72rem; }
.roadmap-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.roadmap-column { background: #e9ece8; padding: 16px; border-radius: 15px; min-width: 0; }.roadmap-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .82rem; margin: 0 0 16px; letter-spacing: 0; }.roadmap-heading span { color: #82908c; font-weight: 400; }.roadmap-list { display: grid; gap: 9px; }.roadmap-card { background: #faf9f6; border: 1px solid #e0e3df; border-radius: 11px; padding: 15px; }.roadmap-card h3 { font-size: .92rem; line-height: 1.3; margin: 0 0 8px; }.roadmap-card p { margin: 0; color: #77827f; font-size: .73rem; line-height: 1.5; }.roadmap-card .roadmap-votes { display: block; margin-top: 12px; color: #586d68; font-size: .72rem; font-weight: 600; }.empty-state { padding: 32px 20px; border: 1px dashed #cbd4d0; border-radius: 12px; color: #66737a; font-size: .86rem; }
.feedback-note { display: flex; align-items: center; gap: 20px; margin-top: 55px; padding: 28px 30px; border-top: 1px solid #d8ddda; }.note-icon { flex: 0 0 46px; height: 46px; border-radius: 50%; background: #efe2c9; color: #a48044; display: grid; place-items: center; font-size: 1.3rem; }.feedback-note h2 { font-size: 1.1rem; margin: 0 0 5px; }.feedback-note p { color: var(--muted); font-size: .8rem; margin: 0; }.text-action { margin-left: auto; white-space: nowrap; background: none; border: 0; color: var(--ink); font-size: .83rem; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }
#request-dialog { width: min(600px, calc(100% - 32px)); max-height: min(90vh, 850px); border: 0; padding: 0; border-radius: 20px; color: var(--ink); background: #faf9f6; box-shadow: 0 25px 80px #141f3240; } #request-dialog::backdrop { background: #141f32a8; }.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 32px; border-bottom: 1px solid #e3e5e0; }.dialog-header p { color: #75817f; font-size: .77rem; margin: 0 0 3px; }.dialog-header h2 { font-size: 1.8rem; margin: 0; }.close-dialog { font-size: 1.8rem; line-height: 1; border: 0; background: none; color: var(--ink); }.dialog-body { padding: 28px 32px 32px; }.dialog-intro { font-size: .85rem; color: #66737a; }.conversation-prompt { width: fit-content; max-width: 90%; background: #e8edeb; border-radius: 16px 16px 16px 4px; padding: 14px 17px; margin: 24px 0; font-size: .9rem; }.dialog-body label { display: block; font-size: .8rem; font-weight: 600; margin: 16px 0 6px; }.dialog-body label span { color: #7e8989; font-weight: 400; }.dialog-body input, .dialog-body textarea { width: 100%; border: 1px solid #cfd8d4; border-radius: 10px; padding: 12px; background: #fff; color: var(--ink); font-size: .9rem; }.dialog-body textarea { resize: vertical; }.dialog-body #request-next { margin-top: 18px; }.form-hint { font-size: .73rem; color: #778481; margin: 10px 0 20px; }.form-actions { display: flex; justify-content: space-between; gap: 12px; }.secondary-action { border: 1px solid #cbd4d0; border-radius: 10px; background: transparent; color: var(--ink); padding: 10px 18px; font-size: .85rem; }
@media (max-width: 850px) { .roadmap-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feedback-intro { padding: 45px; grid-template-columns: 1fr 190px; }.intro-art { transform: scale(.8); } }
@media (max-width: 620px) { .feedback-page { padding: 0 20px 50px; }.preview-notice { gap: 2px 7px; }.feedback-intro { margin: 25px 0 40px; padding: 30px 25px; display: block; }.feedback-intro h1 { font-size: 2.6rem; }.intro-art { display: none; }.board-top { display: block; }.board-tabs { gap: 24px; }.board-tools { padding-top: 16px; }.search-box { flex: 1; min-width: 0; }.search-box input { width: 100%; }.section-intro { align-items: flex-start; }.sample-label { display: none; }.idea-card { gap: 13px; padding: 15px; }.vote-button { flex-basis: 50px; }.roadmap-columns { grid-template-columns: 1fr; }.roadmap-column { min-height: auto; }.feedback-note { align-items: flex-start; padding: 25px 0; flex-wrap: wrap; }.feedback-note > div:nth-child(2) { flex: 1; }.text-action { margin-left: 66px; }.dialog-header, .dialog-body { padding-left: 22px; padding-right: 22px; } }
.roadmap-heading { display: block; }.roadmap-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.roadmap-heading h3 { margin: 0; font-size: .83rem; letter-spacing: -.01em; }.roadmap-heading p { color: #788783; font-size: .7rem; margin: 5px 0 0; }.roadmap-card.idea-card { gap: 10px; padding: 13px; }.roadmap-card .vote-button { flex-basis: 42px; min-height: 50px; font-size: .72rem; }.roadmap-card .vote-button span { font-size: .8rem; }.roadmap-card .idea-title { margin: 0 0 7px; }.roadmap-card .idea-description { font-size: .72rem; }.roadmap-empty, .feedback-empty { color: #74817e; font-size: .78rem; }
.status-declined { background: #f2eae3; color: #8a6854; }
.board-message { color: var(--muted); font-size: .85rem; margin: 22px 0 0; }
.board-message.error, .form-error { color: #a43939; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vote-button:disabled, .primary-action:disabled { cursor: wait; opacity: .6; }
.form-error { font-size: .8rem; margin: 0 0 16px; }