.suggestion-layout { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.5fr); align-items: start; gap: 20px; }
.suggestion-layout [hidden] { display: none !important; }
.suggestion-board { min-height: 430px; }
.suggestion-filter { min-width: 130px; }
.suggestion-list { display: grid; gap: 12px; margin-top: 22px; }
.suggestion-card { padding: 18px; background: var(--page); border: 1px solid var(--line); border-radius: 15px; }
.suggestion-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.suggestion-card h3 { margin: 7px 0; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.suggestion-card p { margin: 7px 0 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-card small,.suggestion-status { color: var(--aqua-deep); font-size: 10px; font-weight: 900; text-transform: capitalize; }
.suggestion-status { padding: 5px 8px; color: var(--navy-deep); background: var(--primary); border-radius: 100px; }
.suggestion-status.pending { background: var(--line-strong); color: var(--muted); }
.suggestion-voting { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.suggestion-vote { padding: 8px 12px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-raised); border-radius: 9px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }
.suggestion-vote[aria-pressed="true"] { border-color: var(--aqua-deep); background: rgba(35,205,226,.17); }
.suggestion-vote:nth-child(2)[aria-pressed="true"] { border-color: #e9706b; background: rgba(233,112,107,.15); }
.suggestion-vote:disabled { opacity: .5; cursor: not-allowed; }
.suggestion-score { margin-left: 5px; color: var(--muted) !important; }
.suggestion-moderation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.suggestion-moderation small { margin-right: auto; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.suggestion-action { padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: var(--surface-raised); cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }
.suggestion-action:hover { border-color: var(--aqua-deep); color: var(--aqua-deep); }
.suggestion-action.danger:hover { border-color: #e9706b; color: #e9706b; }
.suggestion-action:disabled { opacity: .45; cursor: not-allowed; }
@media(max-width:850px) { .suggestion-layout { grid-template-columns: 1fr; } }
@media(max-width:520px) { .suggestion-card-head,.suggestion-board .staff-panel-heading { align-items: flex-start; flex-direction: column; } }