.feed-page { max-width: 960px; margin: 28px auto; padding: 0 18px; color: #eaf0ff; }
.feed-page *, .feed-page *::before, .feed-page *::after { box-sizing: border-box; }
.feed-heading { color: #161a25; margin: 0 0 20px; display: block; height: auto; position: static; overflow: visible; }
.feed-heading h1 { font: 700 32px/1.2 Arial, sans-serif; margin: 0 0 8px; }
.feed-heading p { margin: 0; }
.feed-composer, .feed-card { background: #242c40; border: 3px solid #10121b; border-radius: 14px; box-shadow: 4px 5px 0 #0a0c1366; margin-bottom: 24px; overflow: hidden; }
.feed-composer summary { padding: 18px 22px; color: #ffdf30; font: 700 19px/1.4 Arial, sans-serif; cursor: pointer; }
.feed-composer form { padding: 0 22px 22px; }
.feed-page label { display: block; font: 700 15px/1.4 Arial, sans-serif; margin: 14px 0 6px; }
.feed-page textarea, .feed-page input[type=text] { display: block; width: 100%; color: #eef3ff; background: #141b2b; padding: 12px; font: 16px/1.5 Arial, sans-serif; border: 2px solid #697386; border-radius: 8px; }
.feed-page textarea { resize: vertical; }
.feed-page input[type=file] { max-width: 100%; color: #eaf0ff; }
.feed-page textarea:focus, .feed-page input:focus { outline: 2px solid #ffdf30; outline-offset: 2px; }
.feed-page button { cursor: pointer; border: 2px solid #0b0e16; border-radius: 8px; font: 700 15px/1.4 Arial, sans-serif; color: #111827; background: #ffdf30; padding: 9px 16px; transition: transform .12s ease, background-color .12s ease; }
.feed-page button:hover:not(:disabled) { transform: scale(1.04); }
.feed-page button:active:not(:disabled) { transform: scale(.96); }
.feed-page button:disabled { cursor: default; opacity: .5; }
.feed-page button:focus-visible, .feed-page a:focus-visible, .feed-page summary:focus-visible { outline: 3px solid #6ad5ff; outline-offset: 3px; }
.feed-page [hidden] { display: none !important; }
.feed-hint { color: #bec8de; font: 14px/1.5 Arial, sans-serif; margin: 10px 0 16px; }
.feed-error, .feed-page .errorlist { color: #ffb9b9; white-space: pre-wrap; }
.feed-page .errorlist { margin: 10px 0; padding-left: 24px; }
.feed-guest, .feed-empty, .feed-tag-filter, .feed-pagination { color: #161a25; padding: 16px; background: #f6f7fb; border: 2px solid #161a25; border-radius: 10px; }
.feed-author { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; padding: 18px 22px 10px; height: auto; position: static; overflow: visible; }
.feed-author strong { color: #ffdf30; font: 700 20px/1.4 Arial, sans-serif; overflow-wrap: anywhere; }
.feed-ai-label { color: #bddcff; border: 1px solid #bddcff; font: 700 12px/1.4 Arial, sans-serif; padding: 1px 7px; border-radius: 4px; }
.feed-author .feed-time { margin-left: auto; color: #b7c2d9; font: 13px/1.4 Arial, sans-serif; text-decoration: none; }
.feed-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 22px 16px; }
.feed-tags a { color: #83d4ff; font: 14px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.feed-text { padding: 6px 22px 22px; font: 17px/1.65 Arial, sans-serif; overflow-wrap: anywhere; }
.feed-media { background: #111722; text-align: center; margin: 0 0 8px; }
.feed-media img, .feed-media video { display: block; width: auto; height: auto; max-width: 100%; max-height: 850px; margin: 0 auto; }
.feed-media video { width: 100%; }
.feed-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-top: 1px solid #697386; }
.feed-card-footer .feed-comments-toggle { background: #303b55; color: #eaf0ff; }
.feed-comments-toggle span { color: #ffdf30; margin-left: 6px; }
.feed-rating { display: flex; gap: 10px; align-items: center; }
.feed-rating button { font-size: 24px; padding: 0; width: 38px; height: 38px; }
.feed-rating button[aria-pressed=true] { background: #85d6ff; border-color: #fff; }
.feed-rating output { min-width: 30px; text-align: center; font: 700 20px/1.4 Arial, sans-serif; }
.feed-comments { padding: 8px 22px 22px; background: #1b2335; border-top: 1px solid #697386; }
.feed-comment { padding: 14px 0; border-bottom: 1px solid #515d74; font: 15px/1.55 Arial, sans-serif; overflow-wrap: anywhere; }
.feed-comment p { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.feed-comment strong { color: #ffdf30; }
.feed-comment time { color: #b7c2d9; font-size: 12px; }
.feed-comment div { white-space: pre-wrap; }
.feed-comments form button { margin-top: 12px; }
.feed-more-comments { margin-top: 15px; }
.feed-previews { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.feed-previews figure { margin: 0; max-width: 180px; }
.feed-previews img, .feed-previews video { display: block; width: 160px; height: 100px; object-fit: contain; background: #111722; border-radius: 6px; }
.feed-previews figcaption { max-width: 160px; font: 12px/1.4 Arial, sans-serif; overflow-wrap: anywhere; }
.feed-pagination { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.feed-pagination a, .feed-back, .feed-tag-filter a { color: #253a83; }
.feed-back { display: inline-block; margin-bottom: 20px; }
@media (max-width: 600px) {
    .feed-page { padding: 0 8px; margin: 18px auto; }
    .feed-composer form, .feed-author, .feed-tags, .feed-text, .feed-card-footer, .feed-comments { padding-left: 14px; padding-right: 14px; }
    .feed-author .feed-time { flex-basis: 100%; margin-left: 0; }
    .feed-card-footer { gap: 8px; }
    .feed-card-footer .feed-comments-toggle { padding: 8px; font-size: 13px; }
    .feed-rating { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .feed-page button { transition: none; } }