/* Default = dark theme. Aligned with the Panopticon web portal: slate surfaces (#020617 / #0f172a) and violet accent (#a78bfa). */ :root { color-scheme: dark; --pf-bg: #020617; --pf-panel: #0f172a; --pf-panel-2: #111827; --pf-panel-3: #1e293b; --pf-line: #1e293b; --pf-line-2: #334155; --pf-text: #dbe4ef; --pf-text-strong: #ffffff; --pf-muted: #7b8798; --pf-muted-2: #556171; --pf-accent: #a78bfa; --pf-accent-strong: #8b5cf6; --pf-accent-soft: rgba(167, 139, 250, 0.15); --pf-accent-border: rgba(167, 139, 250, 0.30); --pf-accent-fg: #0f172a; --pf-good: #34d399; --pf-warn: #f59e0b; --pf-bad: #f87171; --pf-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --pf-input-bg: #020617; --pf-row-hover: rgba(30, 41, 59, 0.58); } /* Light theme — applied when . Mirrors the web portal: cream bg, white panels, orange accent. The same --pf-* tokens are reused so no other rule has to know which theme is active. */ html[data-theme="light"] { color-scheme: light; --pf-bg: #f8fafc; --pf-panel: #ffffff; --pf-panel-2: #f1f5f9; --pf-panel-3: #e2e8f0; --pf-line: #e2e8f0; --pf-line-2: #cbd5e1; --pf-text: #1e293b; --pf-text-strong: #0f172a; --pf-muted: #64748b; --pf-muted-2: #475569; --pf-accent: #ea580c; --pf-accent-strong: #c2410c; --pf-accent-soft: rgba(234, 88, 12, 0.10); --pf-accent-border: rgba(234, 88, 12, 0.35); --pf-accent-fg: #ffffff; --pf-good: #15803d; --pf-warn: #b45309; --pf-bad: #b91c1c; --pf-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); --pf-input-bg: #ffffff; --pf-row-hover: rgba(241, 245, 249, 0.65); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--pf-bg); color: var(--pf-text); font-family: Inter, system-ui, sans-serif; font-size: 14px; overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } .shell { height: 100dvh; display: grid; grid-template-columns: 248px minmax(0, 1fr); overflow: hidden; } body.sidebar-collapsed .shell { grid-template-columns: 72px minmax(0, 1fr); } .sidebar { height: 100dvh; min-height: 0; overflow: hidden; background: rgba(15, 23, 42, .96); border-right: 1px solid var(--pf-line); display: flex; flex-direction: column; position: relative; } .brand { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--pf-line); } .brand-link { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand img { width: 30px; height: 30px; object-fit: contain; } .brand span { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; letter-spacing: .12em; } .sidebar-toggle { flex: none; } body.sidebar-collapsed .brand { justify-content: center; padding: 0; } body.sidebar-collapsed .brand-link { display: none; } body.sidebar-collapsed .nav-label { display: none; } body.sidebar-collapsed .account { padding: 14px 10px; display: flex; justify-content: center; } body.sidebar-collapsed .nav a { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .quick-actions { padding: 10px 0; flex-direction: column; gap: 8px; } .account { padding: 18px; border-bottom: 1px solid var(--pf-line); } .account-name { color: var(--pf-text-strong); font-weight: 700; } .account-meta { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; margin-top: 3px; } .avatar { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; margin-bottom: 10px; border: 1px solid var(--pf-line-2); } .nav { padding: 14px; display: grid; gap: 4px; overflow: auto; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--pf-muted); } .nav a:hover, .nav a.active { background: var(--pf-panel-3); color: var(--pf-text-strong); } .nav i { color: var(--pf-muted); font-size: 16px; } .sidebar-actions { margin-top: auto; padding: 14px; border-top: 1px solid var(--pf-line); display: grid; gap: 8px; } .quick-actions { margin-top: auto; padding: 14px; border-top: 1px solid var(--pf-line); display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; } .round-action { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--pf-line-2); background: var(--pf-panel-2); color: var(--pf-text-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .round-action:hover { border-color: var(--pf-accent); background: #172033; transform: translateY(-1px); } .round-action.primary { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-accent-fg); } .chat-panel { position: fixed; left: 84px; bottom: 24px; width: min(380px, calc(100vw - 32px)); background: var(--pf-panel-2); border: 1px solid var(--pf-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); z-index: 1000; } .chat-panel.popup-mode { position: static; left: auto; bottom: auto; width: 100%; height: 100dvh; display: flex; flex-direction: column; border: none; box-shadow: none; } .chat-panel.popup-mode .chat-messages { flex: 1 1 auto; height: auto; } .chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--pf-line); } .chat-head-title { display: flex; flex-direction: column; gap: 2px; } .chat-head-actions { display: flex; gap: 4px; } .chat-head-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--pf-muted); border-radius: 4px; cursor: pointer; padding: 0; } .chat-head-btn:hover { color: var(--pf-text-strong); border-color: var(--pf-line-2); background: var(--pf-panel-3); } .chat-head span { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; } .chat-messages { height: 280px; overflow: auto; padding: 12px 14px; display: grid; align-content: start; gap: 10px; } .chat-message span { color: var(--pf-accent); font-family: "JetBrains Mono", monospace; font-size: 11px; } .chat-message p { margin: 3px 0 0; color: var(--pf-text); line-height: 1.4; overflow-wrap: anywhere; } .chat-form { display: grid; grid-template-columns: 1fr 38px; gap: 8px; padding: 12px; border-top: 1px solid var(--pf-line); } .chat-input-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; } .chat-input-wrap .emoji-picker { right: 0; bottom: 38px; top: auto; } .button, button.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--pf-line-2); background: var(--pf-panel-3); color: var(--pf-text-strong); min-height: 38px; padding: 0 14px; border-radius: 6px; cursor: pointer; } .button.primary { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-accent-fg); } .button.danger { border-color: #7f1d1d; color: #fecaca; background: #450a0a; } .content { min-width: 0; min-height: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .topbar { height: 56px; border-bottom: 1px solid var(--pf-line); background: rgba(2, 6, 23, .92); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .topbar-title { font-weight: 800; color: var(--pf-text-strong); font-size: 20px; line-height: 1.1; } .main { flex: 1 1 auto; min-height: 0; padding: 24px; overflow: auto; display: flex; flex-direction: column; } .main > * { min-height: 0; } .forum-table { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .78); } .forum-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 240px; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--pf-line); align-items: center; } .forum-row:last-child { border-bottom: 0; } .forum-row:hover { background: rgba(30, 41, 59, .58); } .title-link { color: var(--pf-text-strong); font-weight: 700; } .description { color: var(--pf-muted); margin-top: 4px; line-height: 1.45; } .stat { color: var(--pf-text); font-family: "JetBrains Mono", monospace; font-size: 12px; text-align: right; } .stat span { display: block; color: var(--pf-muted); font-size: 10px; margin-top: 2px; } .latest { color: var(--pf-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; } .inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .search-form { display: flex; align-items: center; gap: 8px; } .search-input { width: 260px; min-height: 38px; } .pager { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .crumbs { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 12px; } .crumbs a { color: var(--pf-text); } .thread-list { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .78); } .feed-search { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .search-results { margin-bottom: 16px; } .dashboard-intro { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; margin-bottom: 16px; } .dashboard-copy, .dashboard-panel, .latest-panel, .message-list, .message-detail { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); padding: 18px; } .dashboard-copy h1 { margin: 0 0 10px; font-size: 28px; color: var(--pf-text-strong); } .dashboard-copy p { margin: 0; color: var(--pf-text); line-height: 1.6; max-width: 760px; } .dashboard-stats { border: 1px solid var(--pf-line); background: var(--pf-panel-2); display: grid; grid-template-columns: repeat(3, 1fr); } .dashboard-stats div { padding: 16px; border-right: 1px solid var(--pf-line); } .dashboard-stats div:last-child { border-right: 0; } .dashboard-stats strong { display: block; color: var(--pf-text-strong); font-size: 24px; } .dashboard-stats span { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .plain-list { margin: 0; padding-left: 18px; color: var(--pf-text); line-height: 1.65; } .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; } .feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .forum-card { min-height: 170px; display: grid; align-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--pf-line); background: linear-gradient(145deg, rgba(17, 24, 39, .98), rgba(8, 13, 26, .98)); color: var(--pf-text); } .forum-card:hover { border-color: rgba(129, 140, 248, .7); background: #121b2d; } .forum-card-head { display: grid; gap: 8px; } .forum-card-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--pf-text-strong); } .forum-card-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(129, 140, 248, .16); color: var(--pf-accent); } .forum-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; } .forum-card-latest { min-height: 34px; color: var(--pf-text); overflow-wrap: anywhere; } .latest-row { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--pf-line); } .latest-row:last-child { border-bottom: 0; } .latest-row span { color: var(--pf-text-strong); overflow-wrap: anywhere; } .latest-row em { color: var(--pf-muted); font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; } .thread-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 120px 120px; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--pf-line); align-items: center; } .empty-thread-state { padding: 20px 22px; border-bottom: 1px solid var(--pf-line); width: min(560px, 100%); } .thread-avatar { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--pf-line-2); background: var(--pf-panel-2); } .thread-avatar.placeholder { display: flex; align-items: center; justify-content: center; color: var(--pf-text); font-weight: 700; } .thread-item:last-child { border-bottom: 0; } .thread-item:hover { background: rgba(30, 41, 59, .58); } .thread-view { flex: 1 1 auto; min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; overflow: hidden; } .thread-stream { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; } .thread-posts { min-height: 0; overflow: auto; padding-right: 4px; } .thread-reply-shell { display: grid; gap: 12px; } .thread-reply-launcher { display: flex; align-items: center; justify-content: flex-start; } .thread-reply-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .thread-reply-panel { max-width: none; margin: 0; } .badge { display: inline-flex; align-items: center; border: 1px solid var(--pf-line-2); background: var(--pf-panel-2); color: var(--pf-text); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-family: "JetBrains Mono", monospace; } .danger-badge { border-color: #7f1d1d; color: #fecaca; background: #450a0a; } .post { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); margin-bottom: 14px; display: grid; grid-template-columns: 180px minmax(0, 1fr); } .post.deleted { border-color: #7f1d1d; opacity: .78; } .post-author { border-right: 1px solid var(--pf-line); padding: 16px; background: rgba(17, 24, 39, .55); } .post-body { padding: 16px 18px; min-width: 0; } .post-content { line-height: 1.65; color: var(--pf-text); min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .post-content * { max-width: 100%; } .post-content p, .post-content li, .post-content blockquote, .post-content h1, .post-content h2, .post-content h3, .post-content a { overflow-wrap: anywhere; word-break: break-word; } .post-content pre { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: var(--pf-input-bg); border: 1px solid var(--pf-line); padding: 12px; border-radius: 6px; } .post-content code { font-family: "JetBrains Mono", monospace; color: #c4b5fd; overflow-wrap: anywhere; word-break: break-word; } .reply-ref { display: block; border-left: 2px solid var(--pf-accent); background: var(--pf-panel-2); color: var(--pf-text); padding: 8px 10px; margin-bottom: 12px; font-size: 12px; overflow-wrap: anywhere; } .ban-notice { border: 1px solid #7f1d1d; background: #450a0a; color: #fecaca; padding: 8px 10px; margin-bottom: 12px; font-size: 12px; line-height: 1.4; } .attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; } .attachments img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--pf-line-2); border-radius: 6px; background: var(--pf-input-bg); } .attachments.existing { margin-bottom: 14px; } .hidden-block { border: 1px solid #4338ca; background: rgba(49, 46, 129, .22); margin-top: 14px; padding: 12px; border-radius: 6px; } .hidden-lock { display: flex; align-items: center; gap: 10px; color: var(--pf-text); flex-wrap: wrap; } .restricted-panel { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); padding: 16px; margin: 16px 0; } .vote-box { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--pf-muted); } .vote-box form { display: inline; } .icon-button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pf-line); background: var(--pf-panel-2); color: var(--pf-text); border-radius: 6px; cursor: pointer; } .icon-button.disabled { opacity: .45; cursor: not-allowed; } .toast-notice { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(420px, calc(100vw - 36px)); padding: 10px 12px; border: 1px solid rgba(251, 191, 36, .45); background: #451a03; color: #fde68a; animation: toastFade 4.8s ease forwards; } .danger-toast { border-color: #7f1d1d; background: #450a0a; color: #fecaca; } .success-toast { border-color: #065f46; background: #052e2b; color: #bbf7d0; } @keyframes toastFade { 0%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); pointer-events: none; } } .form-panel { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); padding: 18px; max-width: 900px; } .editor-panel { max-width: 980px; } .field { margin-bottom: 14px; } .field label { display: block; color: var(--pf-muted); font-weight: 700; margin-bottom: 6px; } .input, .textarea { width: 100%; background: var(--pf-input-bg); border: 1px solid var(--pf-line-2); color: var(--pf-text-strong); border-radius: 6px; padding: 10px 11px; outline: none; } .textarea { min-height: 220px; resize: vertical; font-family: "JetBrains Mono", monospace; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } .compact-textarea { min-height: 120px; } .input:focus, .textarea:focus { border-color: var(--pf-accent); } .title-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 8px; align-items: center; position: relative; } .title-input-row .emoji-picker { right: 0; left: auto; } .editor-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .emoji-picker-wrap { position: relative; display: inline-flex; } .emoji-picker { position: absolute; top: 36px; left: 0; z-index: 70; width: 324px; max-width: calc(100vw - 40px); max-height: 360px; overflow: auto; border: 1px solid var(--pf-line-2); background: #0b1220; padding: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .32); } .emoji-search { width: 100%; min-height: 34px; margin-bottom: 10px; background: var(--pf-input-bg); border: 1px solid var(--pf-line); color: var(--pf-text-strong); border-radius: 6px; padding: 7px 9px; outline: none; } .emoji-search:focus { border-color: var(--pf-accent); } .emoji-section { margin-bottom: 10px; } .emoji-section:last-child { margin-bottom: 0; } .emoji-section-title { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; margin-bottom: 6px; } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .emoji-grid button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--pf-text-strong); border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; } .emoji-grid button:hover, .emoji-grid button:focus { border-color: var(--pf-line-2); background: var(--pf-panel-2); outline: none; } .editor-options { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .whitelist-picker { max-height: 210px; overflow: auto; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--pf-line); background: #070b16; } .whitelist-user { display: grid; grid-template-columns: 18px 120px 1fr; gap: 8px; align-items: center; color: var(--pf-text); } .whitelist-user small { color: var(--pf-muted); overflow-wrap: anywhere; } .check-row, .cost-row { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-text); } .points-input { width: 110px; min-height: 34px; } .replying-to { border: 1px solid var(--pf-line-2); background: var(--pf-panel-2); color: var(--pf-text); padding: 8px 10px; margin-bottom: 12px; border-radius: 6px; } .hidden { display: none !important; } .error { border: 1px solid #7f1d1d; background: #450a0a; color: #fecaca; padding: 10px 12px; margin-bottom: 14px; } .success { border: 1px solid #065f46; background: #052e2b; color: #bbf7d0; padding: 10px 12px; margin-bottom: 14px; } .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .admin-panel { border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); padding: 14px; } .admin-tabs { display: flex; gap: 4px; margin: 18px 0 12px; border-bottom: 1px solid var(--pf-line); padding-bottom: 0; flex-wrap: wrap; } .admin-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: transparent; color: var(--pf-muted); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: -1px; } .admin-tab:hover { color: var(--pf-text-strong); background: var(--pf-panel-2); } .admin-tab.is-active { color: var(--pf-text-strong); background: var(--pf-panel-2); border-color: var(--pf-line); border-bottom-color: var(--pf-panel-2); } .admin-tab i { font-size: 15px; } .admin-tab-count { background: var(--pf-accent); color: var(--pf-accent-fg); font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 6px; border-radius: 999px; line-height: 1; } .admin-tab-panel { display: none; } .admin-tab-panel.is-active { display: block; } .bin-subhead { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--pf-line); } .admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--pf-line); } .admin-row:last-child { border-bottom: 0; } .panel-title { color: var(--pf-text-strong); font-weight: 700; margin-bottom: 8px; } .admin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .section-admin { margin-bottom: 16px; } .section-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .section-table { border: 1px solid var(--pf-line); background: #0b1220; } .section-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--pf-line); } .section-table-row:last-child { border-bottom: 0; } .modal { border: 0; padding: 0; background: transparent; color: var(--pf-text); width: min(900px, calc(100vw - 32px)); } .modal::backdrop { background: rgba(2, 6, 23, .72); } .modal-panel { border: 1px solid var(--pf-line); background: #0f172a; padding: 18px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .message-list { flex: 1 1 auto; min-height: 0; height: 100%; overflow: auto; } .message-detail { flex: 1 1 auto; min-height: 0; height: 100%; overflow: hidden; } .message-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--pf-line); min-width: 0; } .message-row:last-child { border-bottom: 0; } .message-row.unread { background: rgba(79, 70, 229, .12); } .message-row.unread .title-link { color: #ffffff; } .message-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--pf-line); } .chat-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px; overflow: hidden; } .private-chat-messages { display: grid; gap: 10px; margin-bottom: 0; min-width: 0; max-width: 100%; overflow: auto; padding-right: 4px; } .private-chat-message { display: flex; justify-content: flex-start; width: 100%; min-width: 0; } .private-chat-message.mine { justify-content: flex-end; } .chat-bubble { box-sizing: border-box; width: fit-content; max-width: min(680px, 82%); min-width: 0; border: 1px solid var(--pf-line); background: #0b1220; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; } .private-chat-message.mine .chat-bubble { background: var(--pf-panel-2); border-color: var(--pf-line-2); } .chat-time { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; margin-top: 6px; } .chat-reply-form { border-top: 1px solid var(--pf-line); padding-top: 14px; } .select { background: var(--pf-input-bg); border: 1px solid var(--pf-line-2); color: var(--pf-text-strong); border-radius: 6px; padding: 8px 9px; outline: none; } .danger-text, .deleted-label { color: var(--pf-bad); } .deleted-excerpt { color: var(--pf-text); margin-top: 6px; line-height: 1.45; overflow-wrap: anywhere; } .mt { margin-top: 16px; } .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .profile-page { width: min(1320px, 100%); margin: 0 auto; } .profile-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .82); padding: 16px; } .profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .profile-avatar { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pf-line-2); } .profile-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--pf-panel-2); color: var(--pf-text-strong); font-weight: 700; } .profile-panel { max-width: none; min-height: 320px; } .profile-activity { margin-top: 16px; } .delete-account { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pf-line); } .error-panel { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .92); padding: 24px; } .error-panel h1 { margin: 0 0 8px; color: var(--pf-text-strong); font-size: 22px; } .error-panel p { color: var(--pf-muted); line-height: 1.55; margin: 0 0 18px; } .error-code { font-family: "JetBrains Mono", monospace; color: var(--pf-muted); margin-bottom: 8px; } .auth-body { /* Auth pages opt out of the global body { height: 100%; overflow: hidden } used by the chat shell, so the page can grow taller than the viewport and scroll naturally when the form doesn't fit. */ height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; /* `safe center` keeps the card centered when it fits, but falls back to start alignment when the content overflows — otherwise the top of the card slides off-screen and there's nothing to scroll up to. */ display: grid; place-items: safe center; background: radial-gradient(1200px 600px at 12% -10%, rgba(94, 129, 244, .12), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(56, 189, 248, .08), transparent 60%), var(--pf-bg); padding: 24px 16px; } .auth-shell { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; } .auth-shell-wide { width: min(500px, 100%); } .auth-capacity-strip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 10px; margin-bottom: 16px; border: 1px solid var(--pf-line-2); border-radius: 4px; background: var(--pf-panel-2); font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .1em; } .auth-capacity-strip strong { color: var(--pf-text-strong); font-weight: 700; } .auth-capacity-strip i { color: var(--pf-accent); font-size: 13px; } .auth-rules-title { display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 8px; } .auth-rules-title i { color: var(--pf-accent); font-size: 12px; } .auth-rules ul { margin: 0; padding-left: 18px; } .auth-rules ul li { margin: 0 0 6px; } .auth-rules ul li:last-child { margin-bottom: 0; } .auth-check { gap: 8px; } .auth-check span { line-height: 1.4; } .auth-back { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; padding: 4px 0; } .auth-back:hover { color: var(--pf-text-strong); } .auth-panel { width: 100%; border: 1px solid var(--pf-line); background: rgba(15, 23, 42, .92); padding: 24px; } .auth-panel-rich { padding: 32px 30px 28px; border: 1px solid var(--pf-line); background: linear-gradient(180deg, rgba(94, 129, 244, .05), transparent 30%), rgba(15, 23, 42, .94); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 1px 0 0 rgba(255, 255, 255, .04) inset; position: relative; } .auth-panel-rich::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pf-accent), transparent); opacity: .55; } .auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 22px; } .auth-brand img { width: 42px; height: 42px; } .auth-brand span { font-family: "JetBrains Mono", monospace; color: var(--pf-text-strong); letter-spacing: .14em; font-weight: 700; } .auth-brand-block { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; } .auth-brand-logo { width: 56px; height: 56px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(94, 129, 244, .18), rgba(56, 189, 248, .08)); border: 1px solid var(--pf-line-2); margin-bottom: 4px; } .auth-brand-logo img { width: 36px; height: 36px; } .auth-brand-name { font-family: "JetBrains Mono", monospace; color: var(--pf-text-strong); letter-spacing: .22em; font-weight: 800; font-size: 16px; } .auth-brand-sub { font-family: "JetBrains Mono", monospace; color: var(--pf-muted); letter-spacing: .18em; font-size: 10px; text-transform: uppercase; } .auth-header { text-align: center; margin-bottom: 22px; } .auth-h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--pf-text-strong); } .auth-sub { margin: 0; font-size: 13px; color: var(--pf-muted); } .auth-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 16px; border: 1px solid; border-radius: 6px; font-size: 13px; line-height: 1.4; } .auth-alert i { font-size: 16px; flex-shrink: 0; } .auth-alert-error { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .35); color: #fecaca; } .auth-alert-success { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .35); color: #bbf7d0; } .auth-field { margin-bottom: 14px; } .auth-field label { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .1em; } .auth-input-wrap { position: relative; } .auth-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pf-muted); font-size: 14px; pointer-events: none; } .auth-input.input { padding-left: 36px; height: 42px; } .auth-input.input:focus { border-color: var(--pf-accent); } .auth-submit { width: 100%; height: 44px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; letter-spacing: .04em; } .auth-submit i { font-size: 16px; } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 16px; color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .2em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--pf-line); } .auth-footer { text-align: center; font-size: 13px; color: var(--pf-muted); } .auth-footer a { color: var(--pf-accent); font-weight: 600; margin-left: 4px; text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } .auth-meta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--pf-line); font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .1em; flex-wrap: wrap; } .auth-meta-item { display: inline-flex; align-items: center; gap: 5px; } .auth-meta-item i { font-size: 12px; } .auth-meta-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--pf-line-2); } .auth-capacity { color: var(--pf-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; margin-bottom: 14px; } .auth-check { margin: 4px 0 12px; align-items: flex-start; } .auth-rules { border: 1px solid var(--pf-line); background: #0b1220; padding: 10px 12px; margin-bottom: 14px; color: var(--pf-muted); font-size: 12px; line-height: 1.45; } .auth-rules p { margin: 0 0 8px; } .auth-rules p:last-child { margin-bottom: 0; } .field-hint { color: var(--pf-muted); font-size: 12px; margin-top: 5px; line-height: 1.4; } /* ────────────────────────────────────────────────────────────────────────── Light theme overrides — for rules that bake hardcoded slate / amber / crimson into rgba() backgrounds. We can't reach those via the --pf-* variables, so they're remapped here when data-theme="light". ────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] body { background: var(--pf-bg); color: var(--pf-text); } html[data-theme="light"] .sidebar { background: var(--pf-panel); } html[data-theme="light"] .topbar { background: color-mix(in srgb, var(--pf-bg) 92%, transparent); } html[data-theme="light"] .nav a { color: var(--pf-muted-2); } html[data-theme="light"] .nav a:hover, html[data-theme="light"] .nav a.active { background: var(--pf-accent-soft); color: var(--pf-accent-strong); } html[data-theme="light"] .nav a:hover i, html[data-theme="light"] .nav a.active i { color: var(--pf-accent); } html[data-theme="light"] .forum-table, html[data-theme="light"] .thread-list, html[data-theme="light"] .dashboard-copy, html[data-theme="light"] .dashboard-panel, html[data-theme="light"] .latest-panel, html[data-theme="light"] .message-list, html[data-theme="light"] .message-detail, html[data-theme="light"] .post, html[data-theme="light"] .restricted-panel, html[data-theme="light"] .form-panel, html[data-theme="light"] .admin-panel, html[data-theme="light"] .profile-summary, html[data-theme="light"] .error-panel, html[data-theme="light"] .auth-panel, html[data-theme="light"] .modal-panel { background: var(--pf-panel); } html[data-theme="light"] .post-author { background: var(--pf-panel-2); } html[data-theme="light"] .forum-card { background: var(--pf-panel); } html[data-theme="light"] .forum-card:hover { background: var(--pf-panel-2); border-color: var(--pf-accent-border); } html[data-theme="light"] .forum-card-icon { background: var(--pf-accent-soft); color: var(--pf-accent); } html[data-theme="light"] .forum-row:hover, html[data-theme="light"] .thread-item:hover { background: var(--pf-row-hover); } html[data-theme="light"] .emoji-picker, html[data-theme="light"] .whitelist-picker, html[data-theme="light"] .auth-rules, html[data-theme="light"] .section-table, html[data-theme="light"] .chat-bubble { background: var(--pf-panel-2); border-color: var(--pf-line); } html[data-theme="light"] .private-chat-message.mine .chat-bubble { background: var(--pf-accent-soft); border-color: var(--pf-accent-border); } html[data-theme="light"] .input, html[data-theme="light"] .textarea, html[data-theme="light"] .select, html[data-theme="light"] .emoji-search { background: var(--pf-input-bg); color: var(--pf-text-strong); } html[data-theme="light"] .button { background: var(--pf-panel-2); color: var(--pf-text-strong); } html[data-theme="light"] .button:hover { background: var(--pf-panel-3); border-color: var(--pf-accent-border); } html[data-theme="light"] .icon-button { background: var(--pf-panel); color: var(--pf-muted-2); } html[data-theme="light"] .round-action { background: var(--pf-panel); color: var(--pf-text-strong); } html[data-theme="light"] .round-action:hover { background: var(--pf-panel-2); } html[data-theme="light"] .badge { background: var(--pf-panel-2); color: var(--pf-muted-2); } /* Error / success in light theme — keep semantics (red/green) but shift to softer backgrounds that match the rest of the surface. */ html[data-theme="light"] .error, html[data-theme="light"] .danger-toast, html[data-theme="light"] .ban-notice, html[data-theme="light"] .button.danger, html[data-theme="light"] .danger-badge { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.30); color: #b91c1c; } html[data-theme="light"] .post.deleted { border-color: rgba(239, 68, 68, 0.40); } html[data-theme="light"] .success, html[data-theme="light"] .success-toast { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.30); color: #15803d; } html[data-theme="light"] .toast-notice { background: rgba(234, 179, 8, 0.10); border-color: rgba(234, 179, 8, 0.35); color: #b45309; } html[data-theme="light"] .hidden-block { background: var(--pf-accent-soft); border-color: var(--pf-accent-border); } html[data-theme="light"] .post-content pre { background: var(--pf-panel-2); } html[data-theme="light"] .post-content code { color: var(--pf-accent-strong); } html[data-theme="light"] .reply-ref { background: var(--pf-panel-2); border-left-color: var(--pf-accent); color: var(--pf-text); } html[data-theme="light"] .modal::backdrop { background: rgba(15, 23, 42, 0.40); } html[data-theme="light"] .message-row.unread { background: var(--pf-accent-soft); } html[data-theme="light"] .message-row.unread .title-link { color: var(--pf-text-strong); } html[data-theme="light"] .chat-panel { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15); } html[data-theme="light"] .auth-body { background: var(--pf-bg); } html[data-theme="light"] .auth-brand span { color: var(--pf-text-strong); } html[data-theme="light"] .stat, html[data-theme="light"] .stat span, html[data-theme="light"] .crumbs, html[data-theme="light"] .description, html[data-theme="light"] .latest, html[data-theme="light"] .field-hint, html[data-theme="light"] .account-meta, html[data-theme="light"] .account-name, html[data-theme="light"] .topbar-title, html[data-theme="light"] .panel-title, html[data-theme="light"] .dashboard-stats strong, html[data-theme="light"] .dashboard-stats span, html[data-theme="light"] .forum-card-title, html[data-theme="light"] .forum-card-meta, html[data-theme="light"] .forum-card-latest, html[data-theme="light"] .latest-row span, html[data-theme="light"] .latest-row em, html[data-theme="light"] .title-link, html[data-theme="light"] .field label, html[data-theme="light"] .check-row, html[data-theme="light"] .cost-row, html[data-theme="light"] .deleted-excerpt { color: inherit; } html[data-theme="light"] .topbar-title, html[data-theme="light"] .panel-title, html[data-theme="light"] .title-link, html[data-theme="light"] .forum-card-title, html[data-theme="light"] .latest-row span, html[data-theme="light"] .dashboard-stats strong, html[data-theme="light"] .dashboard-copy h1, html[data-theme="light"] .account-name { color: var(--pf-text-strong); } html[data-theme="light"] .account-meta, html[data-theme="light"] .stat span, html[data-theme="light"] .latest-row em, html[data-theme="light"] .crumbs, html[data-theme="light"] .description, html[data-theme="light"] .latest, html[data-theme="light"] .field-hint, html[data-theme="light"] .forum-card-meta, html[data-theme="light"] .dashboard-stats span { color: var(--pf-muted); } /* ────────────────────────────────────────────────────────────────────────── Mr. Robot accents — bracket-style buttons + status indicator dot ────────────────────────────────────────────────────────────────────────── */ .btn-bracket { display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 8px 16px; background: transparent; color: var(--pf-text); border: 1px solid var(--pf-line-2); border-radius: 2px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .btn-bracket:hover { border-color: var(--pf-accent); color: var(--pf-accent); background: var(--pf-accent-soft); } .btn-bracket.primary { border-color: var(--pf-accent); color: var(--pf-accent); background: var(--pf-accent-soft); } .btn-bracket.primary:hover { background: var(--pf-accent); color: var(--pf-accent-fg); } .status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pf-muted); } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-good); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); animation: pf-status-pulse 2.4s ease-in-out infinite; } @keyframes pf-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Theme toggle button — tucked into the sidebar quick-actions row. */ .theme-toggle-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--pf-line-2); background: var(--pf-panel-2); color: var(--pf-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s; } .theme-toggle-btn:hover { border-color: var(--pf-accent); color: var(--pf-accent); transform: translateY(-1px); } .theme-toggle-btn .ri-sun-line { display: none; } html[data-theme="light"] .theme-toggle-btn .ri-moon-line { display: none; } html[data-theme="light"] .theme-toggle-btn .ri-sun-line { display: inline-flex; } /* Brand wordmark in sidebar with a slight monospace identity bump. */ .brand span { text-transform: uppercase; } /* Active nav item — thin accent line on the left for a more terminal feel. */ .nav a.active { position: relative; background: var(--pf-accent-soft); color: var(--pf-accent); } .nav a.active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 2px; background: var(--pf-accent); } .nav a.active i { color: var(--pf-accent); } /* ────────────────────────────────────────────────────────────────────────── Mobile menu trigger + backdrop. Hidden on desktop, surfaced on <=900px. ────────────────────────────────────────────────────────────────────────── */ .mobile-menu-toggle { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 900px) { body { font-size: 14px; } /* Layout becomes single column; sidebar turns into a slide-in drawer. */ .shell { grid-template-columns: 1fr; } body.sidebar-collapsed .shell { grid-template-columns: 1fr; } .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw); z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, .55); } body.sidebar-open .sidebar { transform: translateX(0); } /* On mobile we want the drawer expanded regardless of the desktop "sidebar-collapsed" preference. */ body.sidebar-collapsed .brand { justify-content: space-between; padding: 0 12px 0 18px; } body.sidebar-collapsed .brand-link { display: flex; } body.sidebar-collapsed .nav-label { display: inline; } body.sidebar-collapsed .nav a { justify-content: flex-start; padding: 9px 10px; } body.sidebar-collapsed .quick-actions { padding: 14px; flex-direction: row; } body.sidebar-collapsed .account { padding: 18px; display: block; } .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, .55); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .22s ease; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } /* Hide desktop sidebar collapse toggle, show hamburger in topbar. */ .sidebar-toggle { display: none; } .mobile-menu-toggle { display: inline-flex; margin-right: 10px; } .topbar { padding: 10px 18px; min-height: 60px; height: auto; gap: 14px; } .topbar > div { min-width: 0; flex: 1 1 auto; } .topbar-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-menu-toggle { margin-right: 4px; } /* Switch from flex to block on mobile so no child gets squeezed and overlaps the next one. Children flow normally with their own margins. */ .main { padding: 16px; display: block; gap: 0; } .main > * { flex: none; min-height: 0; } .main > * + * { margin-top: 16px; } .dashboard-intro, .dashboard-grid { margin-bottom: 0; } .dashboard-grid { gap: 14px; } .dashboard-panel { padding: 16px; } .latest-panel { padding: 16px; } .feed-layout { gap: 14px; } .feed-grid { gap: 14px; } /* Stack list rows and force key info legible. */ .forum-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; } .forum-row > .stat, .forum-row > .latest { font-size: 12px; } .stat { text-align: left; } .stat span { display: inline; margin-left: 6px; } .latest { white-space: normal; } .thread-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px 14px; } .thread-item > .stat, .thread-item > .latest { grid-column: 1 / -1; padding-left: 46px; } .thread-item > div { min-width: 0; } /* Long unbroken strings (usernames, spam-titles) must wrap on mobile. */ .title-link, .description, .latest, .latest-row span, .forum-card-latest, .forum-card-title { overflow-wrap: anywhere; word-break: break-word; } /* Topbar title stays on a single line and ellipsises so the page header never balloons to half the viewport when threads have spammy titles. */ .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; } /* Toolbar / search wrapping. */ .toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .inline-actions { justify-content: flex-start; } .search-form { width: 100%; flex-wrap: wrap; } .search-input { width: 100%; } .feed-search { align-items: stretch; flex-direction: column; } /* Admin and section tables. */ .admin-grid { grid-template-columns: 1fr; } .admin-row { grid-template-columns: 1fr; gap: 10px; } .admin-panel { padding: 14px; } .admin-row { min-width: 0; } .admin-row > div { min-width: 0; } .admin-row .inline-actions { width: 100%; max-width: 100%; gap: 10px; flex-wrap: wrap; } .admin-row .admin-toolbar { width: 100%; max-width: 100%; flex-wrap: wrap; gap: 8px; align-items: center; } .admin-row .admin-toolbar > * { min-width: 0; max-width: 100%; } .admin-row .admin-toolbar .select { flex: 1 1 130px; min-width: 0; max-width: 100%; width: 100%; } .admin-row .admin-toolbar .input, .admin-row .admin-toolbar .points-input { flex: 0 0 80px; width: 80px; } .admin-row .admin-toolbar .button { flex: 0 0 auto; } .admin-panel { overflow: hidden; } .section-admin-head { align-items: stretch; flex-direction: column; } .section-table-row { grid-template-columns: 1fr; } /* Dashboards. */ .profile-grid { grid-template-columns: 1fr; } .dashboard-intro, .dashboard-grid, .feed-layout { grid-template-columns: 1fr; } .dashboard-copy { padding: 16px; } .dashboard-copy h1 { font-size: 22px; } .dashboard-stats { grid-template-columns: 1fr; } .dashboard-stats div { border-right: 0; border-bottom: 1px solid var(--pf-line); padding: 14px; } .dashboard-stats div:last-child { border-bottom: 0; } .dashboard-stats strong { font-size: 20px; } .feed-grid { grid-template-columns: 1fr; } /* Posts: stack author header above body. */ .post { grid-template-columns: 1fr; } .post-author { border-right: 0; border-bottom: 1px solid var(--pf-line); padding: 12px 14px; } .post-body { padding: 14px; } /* Vote / action row inside posts must wrap so buttons never escape. */ .vote-box { flex-wrap: wrap; gap: 8px; row-gap: 8px; } .vote-box form { display: inline-flex; } .vote-box .button, .vote-box button.button { padding: 0 10px; min-height: 34px; font-size: 12px; white-space: nowrap; } .vote-box .button i { font-size: 14px; } /* Forms & access grids. */ .form-panel { padding: 14px; } .access-grid { grid-template-columns: 1fr; } .whitelist-picker { max-height: 180px; } .whitelist-user { grid-template-columns: 18px 1fr; } .whitelist-user small { grid-column: 2; } .editor-options { gap: 10px; } .field label { margin-bottom: 4px; } /* Messages. */ .message-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; } .message-detail, .message-list { padding: 14px; } .chat-bubble { max-width: 88%; } /* Modals & chat panel. */ .modal { width: calc(100vw - 16px); } .modal-panel { padding: 14px; } .chat-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; } .chat-messages { height: 240px; } /* Profile. */ .profile-summary { flex-direction: column; align-items: flex-start; padding: 14px; } .profile-avatar { width: 56px; height: 56px; } .profile-page { width: 100%; } /* Forum cards & latest panels. */ .forum-card { min-height: 0; padding: 14px; gap: 12px; } .forum-card-title { font-size: 16px; } /* Thread reply head shouldn't squish on small screens. */ .thread-reply-head { flex-direction: column; align-items: stretch; gap: 8px; } /* Reply wrapper on textarea-heavy forms. */ .textarea { min-height: 160px; font-size: 13px; } .compact-textarea { min-height: 100px; } /* Toast comes from the top to avoid covering bottom-anchored chat. */ .toast-notice { right: 8px; left: 8px; bottom: auto; top: 64px; width: auto; } /* Crumbs wrap nicely. */ .crumbs { line-height: 1.5; } } @media (max-width: 480px) { .main { padding: 10px; } .topbar { padding: 0 10px; } .topbar-title { font-size: 15px; } .forum-row, .thread-item, .message-row { padding: 10px 12px; } .post-author { padding: 10px 12px; } .post-body { padding: 12px; } .form-panel, .admin-panel, .dashboard-copy, .message-detail, .message-list { padding: 12px; } .button, button.button { padding: 0 12px; min-height: 36px; } .btn-bracket { padding: 7px 12px; font-size: 11px; letter-spacing: 1.5px; } .dashboard-copy h1 { font-size: 20px; } .forum-card-title { font-size: 15px; } .emoji-grid { grid-template-columns: repeat(7, 1fr); } .emoji-picker { width: min(300px, calc(100vw - 24px)); } .auth-panel { padding: 18px; } }