.community-page { background: #fffaf2; }
.community-nav { position: sticky; top: 0; z-index: 20; }
.community-hero { padding: 72px 0; background: linear-gradient(135deg, #183b36 0%, #087f6c 100%); color: white; }
.community-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.community-hero h1 { color: white; font-size: clamp(2.7rem, 6vw, 5.4rem); letter-spacing: -2px; max-width: 760px; }
.community-hero p { font-size: 1.2rem; max-width: 650px; margin: 22px 0 30px; color: #e5fff8; }
.community-kicker { display: inline-block; color: #ffd166; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
.community-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.community-hero-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.3); transform: rotate(1.5deg); }
.town-square-wrap { padding: 42px 0; background: #fffaf2; }
.live-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: white; border: 1px solid #e7dfd1; border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; color: #657780; }
.live-indicator { color: #076b59; font-weight: 800; }
.live-indicator span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #06d6a0; margin-right: 7px; box-shadow: 0 0 0 5px rgba(6,214,160,.13); }
.town-square-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.town-card { background: white; border: 1px solid #e7dfd1; border-radius: 18px; padding: 22px; box-shadow: 0 8px 22px rgba(43,58,66,.05); }
.town-card-primary { background: #183b36; color: white; }
.town-card-primary h2 { color: white; }
.town-card h2 { font-size: 1.25rem; margin: 10px 0; }
.town-icon { font-size: 1.7rem; }
.support-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.support-actions .btn { padding: 9px 13px; font-size: .72rem; }
.classroom-town-card { border-color: #e3a928; background: #fff8df; }
.classroom-town-card .town-icon { display: inline-block; background: #e63946; color: white; border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; }
.classroom-wrap { padding: 78px 0; background: #f0e8d8; border-top: 1px solid #dfd1ba; border-bottom: 1px solid #dfd1ba; }
.classroom-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 24px; }
.classroom-heading h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 10px; }
.classroom-heading p { max-width: 760px; font-size: 1.08rem; }
.prototype-badge { background: #fff0cb; color: #6a4600; border: 1px solid #e3a928; border-radius: 999px; padding: 8px 13px; font-size: .75rem; font-weight: 900; white-space: nowrap; }
.class-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.class-choice { border: 1px solid #bcad93; background: #fffaf2; border-radius: 999px; padding: 11px 17px; font: inherit; font-weight: 800; cursor: pointer; }
.class-choice.active { background: #183b36; border-color: #183b36; color: white; }
.classroom-stage-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); gap: 20px; }
.instructor-stage { overflow: hidden; background: white; border: 1px solid #d5c7af; border-radius: 22px; box-shadow: 0 18px 44px rgba(43,58,66,.12); }
.video-placeholder { min-height: 410px; display: grid; place-content: center; justify-items: center; gap: 8px; position: relative; text-align: center; padding: 30px; color: #eafaf6; background: radial-gradient(circle at 50% 35%, #286c61 0, #173f39 42%, #102c28 100%); }
.video-placeholder small { color: #bce6dc; }
.stage-status { position: absolute; top: 18px; left: 18px; background: #e63946; border-radius: 999px; padding: 6px 10px; text-transform: uppercase; font-size: .7rem; font-weight: 900; letter-spacing: .8px; }
.stage-mark { width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; background: #ffd166; color: #183b36; font-size: 3rem; font-weight: 900; margin-bottom: 6px; }
.current-step { padding: 25px; }
.current-step > span { color: #657780; font-size: .85rem; text-transform: uppercase; letter-spacing: .6px; }
.current-step h3 { font-size: 1.7rem; margin: 7px 0; }
.step-controls, .timer-controls, .participant-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 17px; }
.classroom-console { display: grid; gap: 16px; align-content: start; }
.classroom-panel { background: white; border: 1px solid #d5c7af; border-radius: 18px; padding: 21px; }
.panel-label { display: block; color: #657780; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 9px; }
.timer-panel { background: #183b36; color: white; }
.timer-panel .panel-label { color: #bce6dc; }
#class-timer { display: block; font-variant-numeric: tabular-nums; font-size: 3.1rem; line-height: 1; }
.timer-controls button, .participant-actions button, .class-question-form button { border: 0; border-radius: 9px; padding: 9px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.timer-controls button { background: #ffd166; color: #183b36; }
.class-checklist { list-style: none; display: grid; gap: 10px; }
.class-checklist label { display: flex; gap: 8px; align-items: flex-start; }
.participant-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0; }
.participant-seats > span { aspect-ratio: 1; border-radius: 11px; background: #e8eee9; display: grid; place-content: center; text-align: center; font-weight: 900; font-size: .85rem; }
.participant-seats small { display: block; color: #657780; font-weight: 500; font-size: .58rem; }
.participant-panel p { color: #657780; font-size: .84rem; }
.classroom-bottom-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; margin-top: 20px; }
.chat-heading { display: flex; justify-content: space-between; gap: 20px; color: #657780; font-size: .78rem; }
.chat-example { background: #f5f1e8; border-radius: 10px; padding: 11px 13px; margin-top: 9px; }
.chat-example.official { background: #dff9f1; border-left: 4px solid #06a987; }
.class-question-form { margin-top: 16px; display: grid; gap: 7px; font-weight: 800; }
.class-question-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.class-question-form input { min-width: 0; border: 1px solid #d8d2c5; border-radius: 9px; padding: 11px; font: inherit; }
.class-question-form button { background: #183b36; color: white; }
.waiting-room h3 { margin-bottom: 8px; }
.consent-line { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0; font-size: .88rem; }
.waiting-room small { display: block; color: #657780; margin-top: 12px; }
.private-support { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; padding: 32px; margin-bottom: 42px; background: #fff; border: 2px solid #118ab2; border-radius: 20px; }
.private-support[hidden] { display: none; }
.privacy-badge { display: inline-block; background: #e3f3fb; color: #075a79; padding: 5px 10px; border-radius: 999px; font-weight: 800; font-size: .76rem; }
.private-support h2 { margin: 10px 0; }
.support-form { display: grid; gap: 13px; }
.support-form label { display: grid; gap: 6px; font-weight: 700; }
.support-form input, .support-form select { border: 1px solid #d8d2c5; border-radius: 10px; padding: 12px; font: inherit; }
.brain-panel-wrap { background: #102c28; padding: 34px 0; }
.brain-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 18px 42px; align-items: end; color: white; }
.brain-panel h2 { color: white; font-size: 2rem; margin-bottom: 8px; }
.brain-panel p { color: #dff9f1; }
.brain-question-form { display: grid; gap: 8px; font-weight: 800; }
.brain-question-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.brain-question-row input { border: 1px solid #4f766e; border-radius: 12px; padding: 15px 17px; font: inherit; min-width: 0; }
.brain-answer { grid-column: 1 / -1; background: white; color: #2b3a42; padding: 22px; border-radius: 16px; border-left: 6px solid #06a987; }
.brain-answer.pending { border-left-color: #e3a928; }
.brain-answer.pending .official-badge { background: #fff0cb; color: #7a5000; }
.brain-answer-heading { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #657780; }
.brain-answer details { margin-top: 14px; color: #657780; }
.brain-answer ul { margin: 8px 0 0 20px; }
.community-tools { padding: 42px 0 24px; }
.community-search { display: grid; gap: 8px; font-weight: 800; }
.community-search input, .community-form input, .community-form textarea, .community-form select { width: 100%; border: 1px solid #d8d2c5; border-radius: 12px; padding: 14px 16px; font: inherit; background: white; }
.topic-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.topic-filter { border: 1px solid #d8d2c5; background: white; padding: 9px 15px; border-radius: 999px; cursor: pointer; font-weight: 700; }
.topic-filter.active { background: #183b36; color: white; border-color: #183b36; }
.community-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; padding-bottom: 80px; }
.discussion-feed { display: grid; gap: 22px; }
.discussion-card, .sidebar-card { background: white; border: 1px solid #e7dfd1; border-radius: 20px; padding: 26px; box-shadow: 0 10px 28px rgba(43,58,66,.06); }
.discussion-card.featured { border: 2px solid #06a987; }
.discussion-card h2 { margin: 12px 0; font-size: 1.65rem; }
.discussion-meta, .thread-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: #657780; font-size: .9rem; }
.official-badge, .community-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: .75rem; font-weight: 800; }
.official-badge { background: #dff9f1; color: #076b59; }
.community-badge { background: #fff0cb; color: #7a5000; }
.official-answer { margin: 20px 0; background: #f1fbf8; border-left: 5px solid #06a987; padding: 20px; border-radius: 0 14px 14px 0; }
.official-answer h3 { margin-bottom: 10px; }
.official-answer p + p { margin-top: 12px; }
.thread-footer { border-top: 1px solid #eee6da; margin-top: 22px; padding-top: 16px; }
.official-news-card { background: linear-gradient(145deg, #fff, #f1fbf8); }
.vote-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vote-button { border: 1px solid #d8d2c5; border-radius: 999px; padding: 9px 13px; background: white; cursor: pointer; font-weight: 700; }
.vote-button.voted { background: #dff9f1; border-color: #06a987; color: #076b59; }
.vote-button span { display: inline-block; margin-left: 6px; color: #657780; }
.text-button { border: 0; background: none; color: #e63946; font: inherit; font-weight: 800; cursor: pointer; }
.thread-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.thread-photo-grid img, .thread-wide-image { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; margin-top: 18px; }
.community-sidebar { display: grid; align-content: start; gap: 20px; position: sticky; top: 110px; }
.sidebar-card h3 { margin-bottom: 14px; }
.sidebar-card p + p { margin-top: 16px; }
.topic-list { padding-left: 20px; display: grid; gap: 10px; }
.community-submit { background: #183b36; color: white; padding: 76px 0; }
.community-submit h2 { color: white; font-size: 2.6rem; margin-bottom: 16px; }
.submit-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }
.community-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #fffaf2; color: #2b3a42; padding: 28px; border-radius: 20px; }
.community-form label { display: grid; gap: 7px; font-weight: 700; }
.community-form .full-field { grid-column: 1 / -1; }
.community-form .consent { display: flex; align-items: flex-start; font-weight: 500; }
.community-form .consent input { width: auto; margin-top: 5px; }
.upload-field span { color: #657780; font-size: .8rem; font-weight: 500; }
.photo-preview { border: 1px dashed #b7ad9d; border-radius: 14px; padding: 12px; background: white; }
.photo-preview img { max-height: 280px; border-radius: 10px; margin: auto; }
.form-status { min-height: 24px; color: #076b59; font-weight: 700; }
.community-footer { background: #102c28; color: #dff9f1; padding: 28px 0; text-align: center; }
.discussion-card[hidden] { display: none; }
@media (max-width: 850px) {
  .community-hero-grid, .community-layout, .submit-grid, .brain-panel, .private-support, .classroom-stage-grid, .classroom-bottom-grid { grid-template-columns: 1fr; }
  .town-square-grid { grid-template-columns: 1fr 1fr; }
  .classroom-heading { align-items: start; flex-direction: column; }
  .brain-question-row { grid-template-columns: 1fr; }
  .community-sidebar { position: static; }
  .community-nav .nav-links { display: none; }
  .community-form { grid-template-columns: 1fr; }
  .community-form label { grid-column: 1; }
}
@media (max-width: 560px) { .town-square-grid { grid-template-columns: 1fr; } }