.community-tips { scroll-margin-top: 2rem; }
.community-tips > p { margin-top: 1rem; }
.tip-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.tip-card { border: 1px solid var(--color-night-700, #343c39); border-radius: 1rem; padding: 1.25rem; background: linear-gradient(135deg, rgba(86,226,238,.035), transparent 60%), var(--color-night-900, #161a19); }
.tip-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tip-author { display: flex; align-items: center; gap: .875rem; min-width: 0; max-width: 100%; text-decoration: none; }
.tip-avatar { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid rgba(86,226,238,.25); background: var(--color-aqua-950, #0d3940); color: var(--color-aqua-300, #ccfdff); font-size: .875rem; font-weight: 600; }
.tip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tip-identity { display: grid; gap: .375rem; min-width: 0; }
.tip-identity strong { color: var(--color-night-50, #f5f7f6); font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.tip-author:hover strong { color: var(--color-aqua-400, #91f3fa); }
.tip-experience { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .75rem; line-height: 1.5; }
.tip-status { display: inline-flex; padding: .125rem .5rem; border-radius: .375rem; color: var(--color-aqua-300, #ccfdff); background: rgba(86,226,238,.07); border: 1px solid rgba(86,226,238,.12); }
.tip-hours, .tip-date { color: var(--color-night-400, #7f8683); }
.tip-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 1.25rem 0; color: var(--color-night-100, #e7eae9); font-size: 1rem; line-height: 1.75; }
.tip-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: .875rem; border-top: 1px solid rgba(127,134,131,.15); }
.tip-date { font-size: .75rem; line-height: 1.5; }
.tip-votes { display: flex; flex-wrap: wrap; gap: .5rem; }
.tip-vote { display: inline-flex; align-items: center; gap: .625rem; min-height: 36px; padding: .375rem .625rem; border: 1px solid var(--color-night-700, #343c39); border-radius: .5rem; background: rgba(2,7,7,.25); color: var(--color-night-300, #a9adab); font-size: .75rem; line-height: 1.5; transition: border-color .15s, background-color .15s, color .15s; }
button.tip-vote { cursor: pointer; }
button.tip-vote:hover, .tip-vote[aria-pressed="true"] { border-color: var(--color-aqua-700, #1e91a1); background: rgba(86,226,238,.08); color: var(--color-aqua-300, #ccfdff); }
button.tip-vote-obsolete:hover, .tip-vote-obsolete[aria-pressed="true"] { border-color: #a77728; background: rgba(251,191,36,.07); color: #fbbf24; }
.tip-vote-count { min-width: 1.125rem; text-align: center; color: var(--color-night-100, #e7eae9); font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-vote-static { border-color: transparent; background: none; }
.tip-warning { color: #fbbf24; font-size: .75rem; line-height: 1.5; }
.tip-header > .tip-warning { border: 1px solid rgba(251,191,36,.2); background: rgba(251,191,36,.06); border-radius: .375rem; padding: .25rem .5rem; }
.tip-card-outdated { border-color: rgba(251,191,36,.2); }
.tip-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.tip-editor { display: grid; gap: .75rem; margin-top: 1rem; }
.tip-editor label { display: grid; gap: .75rem; }
.tip-editor textarea { width: 100%; box-sizing: border-box; background: var(--color-night-950, #020707); color: var(--color-night-100, #e7eae9); border: 1px solid var(--color-night-600, #4a524f); border-radius: .75rem; padding: .75rem; resize: vertical; }
.tip-editor button { justify-self: start; }
.tip-edit-details { margin-top: .875rem; }
.tip-edit-details summary { width: fit-content; cursor: pointer; color: var(--color-night-300, #a9adab); font-size: .75rem; padding: .375rem 0; }
.tip-edit-details summary:hover { color: var(--color-aqua-300, #ccfdff); }
.tip-edit-details[open] { border-top: 1px solid rgba(127,134,131,.15); padding-top: .75rem; }
.tip-edit-details > form { margin-top: .75rem; }
.tip-author:focus-visible, .tip-vote:focus-visible, .tip-edit-details summary:focus-visible, .tip-editor textarea:focus-visible { outline: 2px solid var(--color-aqua-500, #56e2ee); outline-offset: 3px; }
@media (max-width: 540px) {
    .tip-card { padding: 1rem; }
    .tip-footer { align-items: flex-start; flex-direction: column; }
    .tip-vote { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tip-vote { transition: none; } }

.tip-language { color: var(--color-night-300, #a9adab); font-size: .6875rem; padding: .125rem .375rem; border: 1px solid var(--color-night-700, #343c39); border-radius: .25rem; }

.tip-card, #new-tip { scroll-margin-top: 2rem; }
.tip-card:target { border-color: var(--color-aqua-600, #28bdcf); }
