:root { --ink:#20201d; --paper:#f7f4ee; --surface:#fbfaf7; --panel:#efe9df; --line:rgba(32,32,29,.14); --muted:#5d5a54; --blue:#1769e0; --moss:#536452; --coral:#fa7657; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
button, input { font: inherit; }
.app-view { min-height: 100vh; }
.hidden { display: none !important; }
.landing-view { display: flex; align-items: center; justify-content: center; padding: 24px; }
.landing-card, .pow-card { width: min(100%, 470px); padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 16px 36px rgba(32,32,29,.08); text-align: center; }
.shield { display: grid; width: 70px; height: 70px; margin: 0 auto 22px; place-items: center; border: 1px solid rgba(23,105,224,.25); border-radius: 50%; background: rgba(23,105,224,.1); color: var(--blue); font-size: 34px; }
h1, h2, h3, p { margin-top: 0; }
.landing-card h1 { margin-bottom: 8px; font-size: 32px; letter-spacing: -.04em; }
.subtitle { margin-bottom: 26px; color: var(--muted); font-size: 14px; }
.room-option { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(239,233,223,.45); text-align: left; }
.room-option h3 { margin: 0 0 6px; font-size: 16px; }
.room-option h3 span { margin-right: 7px; color: var(--blue); }
.room-option p { margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.actions { display: flex; gap: 8px; }
.actions button, .admin-actions button, .return-button { flex: 1; padding: 9px 10px; border: 1px solid rgba(32,32,29,.2); border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; }
.actions .staff-dashboard-link { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border: 1px solid rgba(32,32,29,.2); border-radius: 7px; color: var(--muted); font-size: 11px; text-align: center; text-decoration: none; }.actions .staff-dashboard-link:hover { border-color: var(--blue); color: var(--blue); }
.actions button:first-child, .admin-actions button:first-child { border-color: rgba(23,105,224,.3); background: rgba(23,105,224,.1); color: var(--blue); }
.actions button:hover, .return-button:hover { background: var(--ink); color: white; }
.fine-print { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.pow-view { display: flex; align-items: center; justify-content: center; padding: 24px; }
.pow-card h2 { margin-bottom: 10px; font-size: 21px; }
.pow-card p { color: var(--muted); font-size: 13px; }
.setup-view { display: flex; align-items: center; justify-content: center; padding: 24px; }
.setup-card { width: min(100%, 420px); padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 16px 36px rgba(32,32,29,.08); text-align: center; }
.setup-card h2 { margin-bottom: 8px; font-size: 21px; }
.setup-card p { margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.setup-field { margin-bottom: 18px; text-align: left; }
.setup-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.setup-field input { display: block; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); }
.field-error { min-height: 16px; margin: 6px 0 0; color: var(--coral); font-size: 11px; }
.setup-colors { margin: 0 0 22px; padding: 0; border: 0; }
.setup-colors legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 12px; }
.color-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.color-swatch { width: 34px; height: 34px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.color-swatch.is-selected { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(32,32,29,.15); }
.setup-submit { width: 100%; padding: 10px 12px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: white; cursor: pointer; font-size: 13px; }
.setup-submit:disabled { cursor: wait; opacity: .6; }
.join-captcha-panel { display: grid; justify-items: center; gap: 12px; margin-top: 20px; }
.join-captcha-image { display: block; width: min(100%, 280px); height: auto; min-height: 72px; border: 1px solid var(--line); background: var(--paper); }
.join-captcha-prompt { margin: 0; color: var(--ink) !important; font-size: 15px !important; }
.captcha-tools { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.captcha-tool { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.captcha-tool:hover { border-color: var(--blue); color: var(--blue); }
.join-captcha-form { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; text-align: left; }
.captcha-answer-field { min-width: 0; }
.join-captcha-form label { color: var(--muted); font-size: 12px; }
.join-captcha-form input { display: block; width: 100%; min-width: 0; margin-top: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); text-transform: uppercase; }
.join-captcha-form button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: white; cursor: pointer; font-size: 12px; }
.join-captcha-form button:disabled { cursor: wait; opacity: .55; }
.report-message.is-pending { cursor: default; opacity: .65; }
.room-view { display: grid; min-height: 100vh; grid-template-rows: 44px minmax(0, 1fr) 40px; background: #292b28; color: #f0d1a0; }
.room-header { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(240,209,160,.2); background: #292b28; font: 11px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.room-brand { display: flex; align-items: center; gap: 9px; } .room-brand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f85d2; } .room-meta { display: flex; gap: 22px; color: #a9a69b; } .room-meta span:first-child { color: #f0d1a0; }
.room-main { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, .95fr); min-height: 0; }
.room-content { position: relative; min-width: 0; overflow: hidden; padding: 25px 22px 24px; background: linear-gradient(124deg, transparent 0 18%, rgba(240,209,160,.9) 18.2% 18.8%, transparent 19% 44%, rgba(240,209,160,.9) 44.2% 44.8%, transparent 45% 71%, rgba(240,209,160,.9) 71.2% 71.8%, transparent 72%), linear-gradient(155deg, transparent 0 27%, rgba(240,209,160,.75) 27.2% 27.8%, transparent 28% 58%, rgba(240,209,160,.75) 58.2% 58.8%, transparent 59%), linear-gradient(145deg, #b6503c, #8e372d); }
.room-content::after { content: ""; position: absolute; width: 260px; height: 260px; right: -12px; top: 35px; border: 25px solid #f0d1a0; border-radius: 50%; opacity: .9; pointer-events: none; }
.media-zone { position: relative; z-index: 1; width: 100%; min-height: 315px; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.media-zone.video { display: grid; place-items: center; min-height: 315px; background: transparent; color: #fff1d5; }
.media-zone.video::before { content: "ON AIR"; position: absolute; top: 0; left: 0; padding: 7px 13px; background: #182b41; color: #f7f3ea; font: 11px "Courier New", monospace; letter-spacing: .1em; }
.media-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.media-title span { color: var(--moss); font: 11px monospace; }
.feed { min-height: 330px; padding: 16px; }
.feed-item { margin-bottom: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); font-size: 12px; line-height: 1.45; }
.feed-item strong { color: var(--moss); }
.video-hero { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 270px; }
.video-hero-empty { margin: 0; padding: 0 24px; color: #f8dfb7; font: 12px "Courier New", monospace; text-align: center; }
.hero-video-player { display: block; width: 100%; max-height: 100%; }
.video-unmute-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border: 1px solid rgba(240,209,160,.4); border-radius: 6px; background: rgba(24,27,24,.6); color: #f0d1a0; cursor: pointer; font: 10px "Courier New", monospace; text-transform: uppercase; }
.room-content h2 { position: absolute; z-index: 2; bottom: 47px; left: 22px; max-width: 430px; margin: 0; color: #fff1d5; font: 400 clamp(40px, 5vw, 70px)/.91 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.room-description { position: absolute; z-index: 2; bottom: 20px; left: 22px; margin: 0; color: #f8dfb7; font: 10px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.chat-hub { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; border-left: 1px solid rgba(240,209,160,.2); background: #292b28; }
.chat-head { display: flex; justify-content: space-between; padding: 20px 13px; border-bottom: 1px solid rgba(240,209,160,.2); color: #a9a69b; font: 11px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.chat-messages { flex: 1 1 0; min-height: 0; max-height: 100%; padding: 20px 13px; overflow-y: auto; overflow-x: hidden; }
.chat-message { margin-bottom: 18px; color: #aaa99e; font: 11px/1.35 "Courier New", monospace; }
.chat-message strong { margin-right: 6px; color: var(--blue); }
.chat-message.staff { padding: 12px; border: 1px solid rgba(214, 164, 34, .5); border-radius: 8px; background: #fff5c9; color: #4c3b0b; }
.chat-message.staff strong { color: #9a7100; }
.role-badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; font: 700 9px "Courier New", monospace; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.role-badge-admin { background: #9a7100; color: #fff5c9; }
.role-badge-moderator { background: #6b7a99; color: #eef1f8; }
.chat-avatar.role-avatar { border-radius: 6px; font-weight: 700; }
.chat-avatar.role-avatar-admin { background: #9a7100; color: #fff5c9; }
.chat-avatar.role-avatar-moderator { background: #6b7a99; color: #eef1f8; }
.chat-message .delete-message { float: right; padding: 0 4px; border: 0; background: transparent; color: #a9a69b; cursor: pointer; }
.chat-message .delete-message:hover { color: var(--coral); }
.chat-message.announcement { padding: 12px; border: 1px solid #75a9d8; border-radius: 8px; background: #dceeff; color: #17324d; }
.chat-message.announcement strong { color: #1256a3; }
.chat-message.private { padding: 10px; border: 1px dashed #8aa6bb; border-radius: 8px; background: #eef5fa; color: #29485c; }
.chat-message.private strong { color: #1769a3; }
.chat-message.with-avatar { display: flex; gap: 10px; align-items: flex-start; }
.chat-avatar { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #1c1c1a; font: 700 11px Arial, sans-serif; text-transform: uppercase; }
.chat-message-body { min-width: 0; }
.avatar-c0 { background: #f2994a; }
.avatar-c1 { background: #eb5757; color: #fff; }
.avatar-c2 { background: #2f80ed; color: #fff; }
.avatar-c3 { background: #27ae60; color: #fff; }
.avatar-c4 { background: #9b51e0; color: #fff; }
.avatar-c5 { background: #f2c94c; }
.chat-form { display: flex; gap: 0; margin: 0 13px 12px; border: 1px solid #555852; }
.chat-form input { flex: 1; min-width: 0; padding: 10px; border: 0; background: transparent; color: #f6f0e1; outline: none; font: 11px "Courier New", monospace; }
.chat-form button { padding: 0 10px; border: 0; background: transparent; color: #438fd5; cursor: pointer; }
.chat-form input:disabled, .chat-form button:disabled { cursor: not-allowed; opacity: .45; }
.chat-form input:disabled { background: #e4e1da; }
.admin-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-dashboard { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.5fr) minmax(230px, .9fr); gap: 18px; margin: 0; padding: 18px 22px; border: 0; border-bottom: 1px solid rgba(240,209,160,.2); border-radius: 0; background: #f7f4ee; color: var(--ink); }
.admin-dashboard h3 { grid-column: 1 / -1; margin: 0; color: var(--ink); font: 700 13px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.admin-dashboard .automod-control { margin: 0; padding: 0 14px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
.admin-dashboard .admin-actions { align-content: start; }
.admin-dashboard .moderation-review, .moderation-log-panel { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--line); }
.chat-hub .admin-dashboard { display: block; margin: 0; padding: 14px; border-top: 1px solid rgba(240,209,160,.2); border-bottom: 0; border-left: 0; border-radius: 0; background: #f7f4ee; }
.chat-hub .admin-dashboard h3 { margin-bottom: 12px; }
.chat-hub .admin-dashboard .automod-control { margin-bottom: 12px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
.chat-hub .admin-dashboard .moderation-review, .chat-hub .admin-dashboard .moderation-log-panel { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
.admin-dashboard-toggle { padding: 5px 8px; border: 1px solid rgba(240,209,160,.35); background: transparent; color: #f0d1a0; cursor: pointer; font: 9px "Courier New", monospace; text-transform: uppercase; }
.admin-dashboard-toggle:hover { background: rgba(240,209,160,.12); }
.moderation-log-panel { max-height: 150px; overflow: auto; }
.moderation-log-panel h3 { margin-bottom: 8px; font-size: 11px; }
.moderation-log-item { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 9px/1.35 "Courier New", monospace; }
.admin-mode .room-main { grid-template-columns: 1fr; }
.admin-mode .room-content { display: none; }
.admin-mode .chat-hub { border-left: 0; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-actions input { min-width: 120px; flex: 1; padding: 9px 10px; border: 1px solid rgba(32,32,29,.2); border-radius: 7px; background: var(--paper); color: var(--ink); } .admin-actions button:last-child { border-color: rgba(250,118,87,.35); color: var(--coral); }
.automod-control { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--ink); }
.automod-control label { display: flex; justify-content: space-between; margin-bottom: 8px; font: 10px "Courier New", monospace; text-transform: uppercase; }
.automod-control output { color: var(--blue); font-weight: 700; }
.automod-control input { width: 100%; accent-color: var(--blue); cursor: pointer; }
.automod-scale { display: flex; justify-content: space-between; color: var(--muted); font: 9px "Courier New", monospace; text-transform: uppercase; }
.toggle-control { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--ink); font: 10px "Courier New", monospace; text-transform: uppercase; }
.toggle-control input { position: relative; width: 38px; height: 20px; margin: 0; appearance: none; border: 1px solid #aaa69d; border-radius: 20px; background: #d5d1c8; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.toggle-control input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(32,32,29,.25); transition: transform .15s ease; }
.toggle-control input:checked { border-color: var(--blue); background: var(--blue); }
.toggle-control input:checked::after { transform: translateX(18px); }
.toggle-control input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.toggle-control::after { content: "OFF"; color: var(--muted); font: 9px "Courier New", monospace; }
.toggle-control:has(input:checked)::after { content: "ON"; color: var(--blue); font-weight: 700; }
.moderation-review { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.moderation-review > strong { display: block; margin-bottom: 9px; }
.list-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--muted); font: 9px "Courier New", monospace; }
.list-toolbar input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--line); background: white; color: var(--ink); font: 10px "Courier New", monospace; }
.list-toolbar button { padding: 5px 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 9px "Courier New", monospace; }
.list-toolbar button:hover { background: var(--ink); color: white; }
.moderation-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid #d6a422; background: #fff5c9; color: #4c3b0b; }
.moderation-item + .moderation-item { margin-top: 7px; }
.moderation-item p { margin: 0 0 4px; font-size: 11px; line-height: 1.35; }
.moderation-item small { color: #8f6500; font-size: 10px; }
.moderation-actions { display: flex; gap: 5px; }
.moderation-actions button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(32,32,29,.25); background: transparent; color: var(--ink); cursor: pointer; font-size: 10px; }
.moderation-actions button:first-child { background: #dff1e4; color: #27613c; }
.moderation-actions button:last-child { background: #f7d8d2; color: #8e372d; }
.queue-empty { color: var(--muted); font-size: 11px; }
.admin-help { grid-column: 1 / -1; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.admin-help summary { color: var(--ink); cursor: pointer; font: 10px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.admin-help p { max-width: 800px; margin: 9px 0 0; line-height: 1.45; }
.profile-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(32,32,29,.62); }
.profile-card { position: relative; width: min(100%, 460px); max-height: min(680px, 90vh); overflow: auto; padding: 24px; border: 1px solid #d8c89a; border-radius: 12px; background: #fffaf0; color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.profile-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; }
.profile-kicker { margin-bottom: 7px; color: var(--moss); font: 10px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.profile-card h2 { margin-bottom: 4px; font: 400 30px Georgia, "Times New Roman", serif; }
.profile-role { color: var(--muted); font-size: 12px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.profile-stat { padding: 10px; border: 1px solid var(--line); background: var(--paper); }
.profile-stat strong, .profile-stat span { display: block; } .profile-stat strong { font-size: 16px; } .profile-stat span { margin-top: 3px; color: var(--muted); font: 9px "Courier New", monospace; text-transform: uppercase; }
.profile-history { border-top: 1px solid var(--line); }
.profile-history-item { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.4; }
.profile-history-item small { display: block; margin-bottom: 3px; color: var(--muted); font: 9px "Courier New", monospace; }
.profile-pagination { margin-top: 10px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-actions label { display: flex; align-items: center; gap: 7px; width: 100%; color: var(--muted); font: 10px "Courier New", monospace; text-transform: uppercase; }
.profile-actions input { width: 70px; padding: 7px; border: 1px solid var(--line); background: white; color: var(--ink); }
.profile-actions button { padding: 8px 12px; border: 1px solid rgba(32,32,29,.25); background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; }
.profile-actions button:hover { background: var(--ink); color: white; }
.chat-message strong[data-profile-user] { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(23,105,224,.35); text-underline-offset: 3px; }
.room-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-top: 1px solid rgba(240,209,160,.2); background: #292b28; color: #aeb89e; font: 11px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.destroyed-view { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; background: #20201d; color: #d4d0c8; text-align: center; }
.destroyed-view h1 { font-size: 30px; }
.destroyed-view p { max-width: 430px; color: #99958d; font: 13px/1.7 monospace; }
.report-message { float: right; margin-left: 8px; padding: 1px 4px; border: 1px solid rgba(240,209,160,.28); background: transparent; color: #a9a69b; cursor: pointer; font: 9px "Courier New", monospace; text-transform: uppercase; }
.report-reason-label { display: grid; gap: 5px; margin: 16px 0; color: var(--muted); font-size: 11px; }.report-reason-label textarea,#report-reason { width: 100%; padding: 9px; border: 1px solid var(--line); background: white; color: var(--ink); }.report-reason-label textarea { min-height: 95px; resize: vertical; }#report-submit { padding: 9px 12px; border: 1px solid var(--blue); background: var(--blue); color: white; cursor: pointer; font-size: 11px; }
.report-message:hover { border-color: var(--coral); color: var(--coral); }
.staff-workflows { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.moderation-workflow { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }
.moderation-workflow h3 { display: flex; justify-content: space-between; margin-bottom: 10px; font: 700 11px "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; }
.workflow-list { max-height: 220px; overflow: auto; }
.workflow-item { margin-bottom: 7px; padding: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; }
.workflow-item p { margin: 0 0 6px; line-height: 1.4; }.workflow-item small, .workflow-row small { color: var(--muted); font: 9px "Courier New", monospace; }
.workflow-item .moderation-actions { margin-top: 8px; }.workflow-item .moderation-actions button, .workflow-row button { padding: 5px 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 9px; }
.workflow-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 10px; }
.workflow-row > span { min-width: 0; overflow-wrap: anywhere; }.appeal-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }.appeal-form h3 { margin-bottom: 9px; font-size: 14px; }.appeal-form label { display: block; margin: 8px 0; color: var(--muted); font-size: 10px; }.appeal-form input, .appeal-form textarea { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--line); background: white; color: var(--ink); }.appeal-form textarea { min-height: 76px; resize: vertical; }.appeal-form button { padding: 8px 10px; border: 1px solid var(--blue); background: var(--blue); color: white; cursor: pointer; font-size: 11px; }.appeal-status { margin: 12px 0 0; color: var(--moss); font-size: 11px; }
@media (max-width: 800px) { .room-view { grid-template-rows: 44px auto 40px; } .room-main { grid-template-columns: 1fr; } .room-content { min-height: 470px; } .chat-hub { min-height: 300px; border-top: 1px solid rgba(240,209,160,.2); border-left: 0; } .room-meta { gap: 9px; font-size: 10px; } .landing-card, .pow-card { padding: 22px; } }
@media (max-width: 800px) { .staff-workflows { grid-template-columns: 1fr; } }
.appeal-chat-button { border:1px solid rgba(240,209,160,.32); padding:5px 8px; background:transparent; color:#f0d1a0; cursor:pointer; font:9px "Courier New",monospace; text-transform:uppercase; }.appeal-chat-button:hover { border-color:var(--coral); color:var(--coral); }.appeal-form { padding:0; border:0; }.appeal-form label { font:10px "Courier New",monospace; text-transform:uppercase; }.appeal-form textarea { min-height:100px; font:12px/1.5 Arial,sans-serif; text-transform:none; }.appeal-status { min-height:16px; }
#report-status { color:var(--coral); }