:root {
  --bg: #f4f1eb; --surface: #fffdf9; --surface-2: #f0ece4; --text: #171a21;
  --muted: #68707d; --line: #dcd7ce; --accent: #176b5b; --accent-hover: #105347;
  --danger: #b42318; --warning-bg: #fff3d6; --shadow: 0 18px 50px rgb(28 32 38 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#11151b; --surface:#191e26; --surface-2:#222934; --text:#f2f0eb; --muted:#a9b0bb; --line:#343c48; --accent:#59c8af; --accent-hover:#78dac3; --danger:#ff8a80; --warning-bg:#3a3020; --shadow:0 18px 50px rgb(0 0 0 / 25%); }
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38%), var(--bg); }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.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; }
.topbar { height: 66px; display:flex; align-items:center; justify-content:space-between; max-width:1040px; margin:auto; padding:0 24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:var(--accent); font-size:21px; }
.connection { font-size:13px; color:var(--muted); }
.connection::before { content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#d49a21; }
.connection.online::before { background:#2ca56f; }
main { max-width: 920px; margin: 0 auto; padding: 54px 24px 80px; }
.home { max-width:680px; margin:auto; }
.eyebrow { margin:0 0 9px; color:var(--accent); text-transform:uppercase; font-weight:760; font-size:12px; letter-spacing:.11em; }
h1 { margin:0; font-size:clamp(30px, 6vw, 48px); line-height:1.05; letter-spacing:-.045em; }
.lead { max-width:620px; margin:20px 0 34px; color:var(--muted); font-size:18px; line-height:1.55; }
.create-card, .composer, .item, dialog .dialog-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.create-card { display:grid; gap:12px; padding:26px; }
label { font-weight:670; font-size:14px; }
input, textarea, select { width:100%; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:11px; outline:none; transition:border-color .15s, box-shadow .15s; }
input { min-height:43px; padding:9px 12px; }
select { min-height:43px; padding:8px 34px 8px 11px; }
textarea { padding:15px; resize:vertical; min-height:120px; line-height:1.5; tab-size:4; }
input:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input-action { display:flex; align-items:stretch; gap:9px; }
.input-action input { min-width:0; }
.button, .icon-button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap; font-weight:690; }
.button { min-height:43px; padding:9px 16px; }
.button.compact { min-height:34px; padding:6px 11px; font-size:12px; }
.button.primary { color:#fff; background:var(--accent); }
.button.primary:hover { background:var(--accent-hover); }
.button.secondary { color:var(--text); background:var(--surface-2); border:1px solid var(--line); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.icon-button { width:43px; min-width:43px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); font-size:18px; }
.wide { width:100%; margin-top:8px; }
.hint, .muted { color:var(--muted); font-size:13px; line-height:1.45; }
.hint { margin: -3px 0 8px; }
.check-row { display:flex; gap:12px; align-items:flex-start; margin:7px 0; padding:15px; border-radius:12px; background:var(--surface-2); cursor:pointer; }
.check-row input { width:18px; min-height:auto; margin-top:2px; accent-color:var(--accent); }
.check-row span { display:grid; gap:4px; }
.check-row small { color:var(--muted); font-weight:400; line-height:1.4; }
.encryption-options { display:grid; gap:10px; }
.error { color:var(--danger); }
.room-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:27px; }
.room-heading h1 { overflow-wrap:anywhere; font-size:clamp(28px, 5vw, 42px); }
.room-actions { display:flex; gap:8px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.notice { margin-bottom:18px; padding:13px 15px; border-radius:11px; border:1px solid var(--line); }
.notice.warning { background:var(--warning-bg); }
.composer { overflow:hidden; }
.composer-identity { display:grid; grid-template-columns:auto minmax(0, 280px); align-items:center; justify-content:end; gap:10px; padding:11px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.composer-identity input { min-height:36px; padding:6px 10px; }
.file-drop { border-top:1px dashed var(--line); padding:11px 12px; display:flex; align-items:center; gap:10px; color:var(--muted); }
.file-drop.dragging { outline:2px solid var(--accent); outline-offset:-3px; }
.file-drop input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.upload-list { display:grid; gap:8px; padding:0 12px; }
.upload-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:center; }
.upload-row progress { width:100%; grid-column:1 / -1; }
.upload-name, .file-name { overflow-wrap:anywhere; white-space:pre-wrap; }
.file-details { display:grid; gap:3px; min-width:0; }
.composer textarea { display:block; border:0; border-radius:0; background:transparent; box-shadow:none; }
.composer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line); }
.composer-tools label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.composer-tools select { width:auto; min-height:34px; padding-block:4px; }
.inline-check { display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:12px; color:var(--muted); }
.inline-check input { width:16px; min-height:auto; accent-color:var(--accent); }
.composer-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:11px 12px 11px 16px; background:var(--surface-2); border-top:1px solid var(--line); }
.encryption-state { color:var(--muted); font-size:13px; }
.list-heading { display:flex; justify-content:space-between; align-items:baseline; margin:31px 2px 13px; }
.list-heading h2 { margin:0; font-size:18px; }
.timeline-tools { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-bottom:12px; }
.timeline-tools select { width:auto; }
.room-preferences { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 2px 14px; }
.recent-section { margin-top:34px; }
.recent-rooms { display:grid; gap:8px; }
.recent-room { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.recent-room a { display:grid; gap:3px; text-decoration:none; }
.recent-room small { color:var(--muted); }
.items { display:grid; gap:12px; }
.item { overflow:hidden; }
.item.pinned { border-color:color-mix(in srgb, var(--accent) 58%, var(--line)); }
.pin-mark { color:var(--accent); font-size:12px; font-weight:750; }
.attachments { display:grid; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.item-content + .attachments { border-top:1px solid var(--line); }
.file-attachment { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.item-content { margin:0; padding:17px 18px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.item-content.collapsed { max-height:calc(3.1em + 34px); overflow:hidden; }
.item-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 9px 8px 17px; border-top:1px solid var(--line); background:var(--surface-2); }
.item-time { color:var(--muted); font-size:12px; }
.item-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; }
.item-alias { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:720; }
.item-alias::after { content:"·"; margin-left:7px; color:var(--muted); }
.item-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.item-buttons .button { min-height:34px; padding:6px 11px; font-size:12px; }
.delete { color:var(--danger) !important; }
.empty { padding:45px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:16px; }
dialog { width:min(92vw, 520px); padding:0; border:0; border-radius:18px; color:var(--text); background:transparent; }
dialog::backdrop { background:rgb(0 0 0 / 56%); backdrop-filter:blur(3px); }
dialog .dialog-card { position:relative; display:grid; gap:13px; padding:25px; }
.dialog-card h2, .dialog-card p { margin:0; }
.dialog-card > p { color:var(--muted); line-height:1.45; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:8px; }
.dialog-close { position:absolute; right:13px; top:13px; }
.share-card { text-align:center; }
.share-card > label { text-align:left; }
#qr { display:grid; place-items:center; min-height:244px; padding:12px; }
#qr canvas, #qr img { max-width:220px; width:100%; height:auto; padding:10px; border-radius:8px; background:#fff; }
.share-choice { display:flex; justify-content:center; gap:20px; }
.share-choice label { font-weight:500; }
.share-choice input { width:auto; min-height:auto; accent-color:var(--accent); }
.toast { position:fixed; z-index:10; left:50%; bottom:28px; transform:translateX(-50%); padding:11px 17px; border-radius:10px; color:#fff; background:#252a33; box-shadow:var(--shadow); }
.preview-dialog { width:min(96vw, 1000px); }
.preview-card { min-height:min(82vh, 760px); grid-template-rows:auto minmax(0,1fr) auto !important; }
.preview-content { min-height:280px; display:grid; place-items:center; overflow:auto; border:1px solid var(--line); border-radius:12px; background:#0d1117; }
.preview-content img, .preview-content video, .preview-content iframe { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; border:0; }
.preview-content iframe { width:100%; height:68vh; background:#fff; }
.preview-content audio { width:min(100%, 620px); }
.preview-text { width:100%; min-height:100%; margin:0; padding:18px; color:#e6edf3; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.55 ui-monospace, monospace; }
.syntax-comment { color:#8b949e; }
.syntax-string { color:#a5d6ff; }
.syntax-number { color:#79c0ff; }
.syntax-keyword { color:#ff7b72; font-weight:650; }
@media (max-width:620px) {
  main { padding:31px 14px 60px; }
  .topbar { padding:0 15px; }
  .create-card { padding:18px; }
  .room-heading { align-items:flex-start; flex-direction:column; }
  .room-actions { width:100%; }
  .timeline-tools { grid-template-columns:1fr; }
  .timeline-tools select { width:100%; }
  .room-actions > * { flex:1; }
  .input-action { flex-wrap:wrap; }
  .input-action > .button { flex:1; }
  #room-id { flex:1 1 100%; }
  .composer-identity { grid-template-columns:1fr; justify-content:stretch; }
  .file-drop, .file-attachment { align-items:stretch; flex-direction:column; }
  .item-footer { display:grid; grid-template-columns:minmax(0, 1fr); align-items:start; }
  .item-footer .item-buttons, .file-attachment .item-buttons { width:100%; justify-content:flex-start; position:relative; z-index:1; }
  .item-footer .button { flex:1 1 auto; }
}