:root { --bg: #0f1115; --panel: #171a21; --panel2: #1e222b; --border: #2a2f3a; --text: #e7e9ee; --muted: #9aa3b2; --accent: #4f8cff; --accent2: #7c5cff; --ok: #37c07a; --warn: #f0b429; --danger: #ff5c6c; --radius: 10px; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.25; } .container { max-width: 960px; margin: 0 auto; padding: 24px; } .wide { max-width: 1280px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; } input, select, textarea, button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; width: 100%; } textarea { resize: vertical; min-height: 70px; } button { background: var(--accent); border: none; color: white; cursor: pointer; font-weight: 600; width: auto; padding: 9px 16px; } button.secondary { background: var(--panel2); border: 1px solid var(--border); color: var(--text); } button.ghost { background: transparent; border: 1px solid var(--border); } button:disabled { opacity: .5; cursor: not-allowed; } button.active { background: var(--accent2); } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .muted { color: var(--muted); } .mono { font-family: var(--mono); font-size: 12px; word-break: break-all; } .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--panel2); } .pill.open { color: var(--warn); } .pill.accepted { color: var(--accent); } .pill.rejected { color: var(--danger); } .pill.planned { color: var(--accent2); } .pill.resolved { color: var(--ok); } .copy { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 6px 0; display: flex; justify-content: space-between; gap: 10px; align-items: center; } .notice { padding: 10px 12px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--border); } .notice.err { border-color: var(--danger); color: var(--danger); } .notice.ok { border-color: var(--ok); color: var(--ok); } .hidden { display: none !important; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 14px; } img.shot { max-width: 220px; border: 1px solid var(--border); border-radius: 6px; } /* Language selector bar. Sits in normal flow at the very top of so it appears on every view and pushes content down instead of overlapping fixed panels. Aligned to the inline-start edge, which automatically flips to the right under RTL (he/ar) and stays clear of the reviewer's inline-end sidebar in both directions. */ .langbar { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border); } .langbar-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); } .langbar-icon { font-size: 15px; line-height: 1; } .langbar select { width: auto; min-width: 130px; padding: 6px 10px; } /* URLs / code stay left-to-right even under an RTL UI; quotes follow their own content. */ input[dir="ltr"], .mono { unicode-bidi: plaintext; } /* Visually-hidden but screen-reader-available. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }