/* CRCMeetMe – brand: deep teal #0f766e, coral #f97360, ink #0b2a33 */
:root {
    --teal: #0f766e;
    --teal-dark: #0a5a54;
    --coral: #f97360;
    --ink: #0b2a33;
    --ink-2: #133a45;
    --paper: #f5f7f6;
    --card: #ffffff;
    --line: #dfe6e4;
    --muted: #5c6f74;
    --ok: #16a34a;
    --warn: #d97706;
    --bad: #dc2626;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(11, 42, 51, .06), 0 6px 24px rgba(11, 42, 51, .06);
    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
}
a { color: var(--teal); }
code, .mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: .92em; }
code { background: #eef3f2; padding: 1px 6px; border-radius: 6px; word-break: break-all; }
h1 { font-size: 1.45rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.error { color: var(--bad); }
[hidden] { display: none !important; }

/* ---------------- top bar */
.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 20px; background: var(--ink); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.15rem; letter-spacing: .2px; }
.brand b { color: var(--coral); font-weight: 700; }
.topbar-note { color: #a9c2c6; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* ---------------- cards, buttons, forms */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card.narrow { max-width: 620px; margin: 40px auto; }
.center { text-align: center; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #b9c8c5; background: #f7faf9; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); }
.btn.danger { color: var(--bad); border-color: #f3c4c4; }
.btn.danger:hover { background: #fdf0f0; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: .86rem; border-radius: 8px; }
.btn.big { padding: 12px 22px; font-size: 1.02rem; width: 100%; }

input, select {
    font: inherit; color: inherit; padding: 10px 12px; border: 1px solid #c8d4d1; border-radius: 10px; background: #fff; min-width: 0;
}
input:focus, select:focus, .btn:focus-visible, .round:focus-visible { outline: 3px solid rgba(15, 118, 110, .3); outline-offset: 1px; }
#createForm input { flex: 1 1 260px; }
.field { display: grid; gap: 6px; font-weight: 600; margin: 14px 0; }
.field input { font-weight: 400; }

.notice { border-radius: 10px; padding: 10px 14px; margin: 12px 0; background: #eef6f5; border: 1px solid #cfe5e2; }
.notice p { margin: .25rem 0; }
.notice.ok { background: #effaf2; border-color: #bfe6cb; }
.notice.warn { background: #fff8eb; border-color: #f6dca8; }
.notice.bad { background: #fdf0f0; border-color: #f3c4c4; }

.steps { padding-left: 1.2rem; }
.steps li { margin: 6px 0; }

/* ---------------- organizer dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dash > .card:not(.side) { grid-column: 1; }
.dash > .card.side { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash > .card.side { grid-column: 1; grid-row: auto; } }

.rooms { display: grid; gap: 12px; }
.room { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.room.ended { opacity: .6; }
.room-title { font-weight: 700; }
.room-link code { font-size: .85rem; }
.room-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.room-qr { grid-column: 1 / -1; width: 180px; }
@media (max-width: 640px) { .room { grid-template-columns: 1fr; } .room-actions { justify-content: flex-start; } }

.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 12px; }
.qr { width: 150px; background: #fff; }
.qr svg, .room-qr svg { width: 100%; height: auto; display: block; }
details.net summary { cursor: pointer; font-weight: 600; }
details.net { margin-top: 10px; }
.check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .92rem; color: var(--muted); }
.check input { width: 16px; height: 16px; accent-color: var(--teal); }
.badge { font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e7eeed; color: var(--muted); vertical-align: 3px; margin-left: 6px; }
.badge.active { background: #dcf5e3; color: #15803d; }
.badge.starting { background: #fff4d6; color: #a16207; }
.badge.error { background: #fde4e4; color: #b91c1c; }
.net-url { display: grid; gap: 4px; margin: 10px 0; }
.net-url code { font-size: .95rem; }
.net-actions { margin-top: 12px; }
.net-actions .btn.current { outline: 3px solid rgba(15, 118, 110, .25); }
.grid-form { display: grid; gap: 8px; margin: 8px 0; }
.grid-form label { display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
pre.log { white-space: pre-wrap; font-size: .8rem; background: #f3f6f5; border-radius: 8px; padding: 8px; max-height: 180px; overflow: auto; }
.room-public code { background: #e8f3f1; }
.room-pass b { font-family: "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; }
.path-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: rgba(6, 27, 33, .72); color: #cfe1e3; }
.path-badge.relay { color: #fcd34d; }
details.net dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .88rem; }
details.net dt { color: var(--muted); }
details.net dd { margin: 0; word-break: break-all; }

/* ---------------- trust page */
.trust { max-width: 760px; margin: 0 auto; }
.tabs { display: flex; gap: 6px; margin: 18px 0 6px; flex-wrap: wrap; }
.tabs button { font: inherit; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------- call page */
body.call-page { background: var(--ink); color: #e9f1f2; }
body.call-page .page { max-width: none; padding: 16px; }
body.call-page .card { background: #fff; color: var(--ink); }
body.in-call .topbar { display: none; }
body.in-call .page { padding: 0; height: 100dvh; }

.lobby { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 22px; max-width: 1100px; margin: 20px auto; align-items: start; }
@media (max-width: 820px) { .lobby { grid-template-columns: 1fr; margin: 0 auto; } }
.lobby-card h1 { overflow-wrap: anywhere; }
.devices { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.devices label { display: grid; gap: 4px; font-size: .82rem; color: #a9c2c6; flex: 1 1 200px; }
.devices select { background: var(--ink-2); color: #fff; border-color: #2a5561; width: 100%; }
.invite { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.invite .row { flex-wrap: nowrap; }
.invite code { flex: 1; font-size: .82rem; }

.video-tile { position: relative; background: #061b21; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #061b21; }
.video-tile.preview video, .video-tile.self video { transform: scaleX(-1); } /* mirror self view */
.tile-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #a9c2c6; text-align: center; padding: 16px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; }
.avatar.big { width: 104px; height: 104px; font-size: 2.2rem; background: linear-gradient(160deg, var(--teal), var(--teal-dark)); }
.tile-controls { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 12px; justify-content: center; }
.level { position: absolute; left: 14px; bottom: 14px; width: 60px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.level span { display: block; height: 100%; width: 0; background: #34d399; transition: width .08s linear; }

.round {
    width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .16); position: relative;
}
.round:hover { background: rgba(255, 255, 255, .26); }
.round.big { width: 56px; height: 56px; }
.round::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.round.off { background: var(--bad); }
.round.off:hover { background: #b91c1c; }
.round[data-kind="mic"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E"); }
.round[data-kind="mic"].off { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-2a5 5 0 0 1-.7 2.54l1.46 1.46A6.96 6.96 0 0 0 19 11zm-4 .17V5a3 3 0 0 0-5.94-.6L15 10.34zM4.27 3 3 4.27l6 6V11a3 3 0 0 0 4.07 2.8l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.92V21h2v-3.08a6.9 6.9 0 0 0 2.98-1.1L19.73 21 21 19.73z'/%3E%3C/svg%3E"); }
.round[data-kind="cam"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11z'/%3E%3C/svg%3E"); }
.round[data-kind="cam"].off { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 6.5l-4 4V7a1 1 0 0 0-1-1H9.82L21 17.18zM3.27 2 2 3.27 4.73 6H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73z'/%3E%3C/svg%3E"); }
.round.leave { background: var(--bad); width: 68px; border-radius: 28px; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85a1 1 0 0 1-1.41-.01L.29 13.08a1 1 0 0 1 0-1.41C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67a1 1 0 0 1 0 1.41l-2.48 2.48a1 1 0 0 1-1.41.01 11.8 11.8 0 0 0-2.66-1.85 1 1 0 0 1-.56-.9v-3.1A15 15 0 0 0 12 9z'/%3E%3C/svg%3E"); }
.round.leave:hover { background: #b91c1c; }

.call { display: grid; grid-template-rows: 1fr auto; height: 100dvh; }
/* Stage: 0–1 other person = spotlight + self picture-in-picture; 2+ = grid. */
.stage {
    position: relative; padding: 14px; min-height: 0;
    display: grid; gap: 12px; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr);
}
.stage .video-tile.peer, .stage .waiting { width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; }
.stage .video-tile.peer video { object-fit: contain; }
.waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
    background: #061b21; border-radius: 16px; padding: 16px; color: #a9c2c6; }
.video-tile.self {
    position: absolute; right: 28px; bottom: 28px; width: min(26vw, 280px); aspect-ratio: 16 / 9;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .15); z-index: 2;
}
.stage[data-count="2"], .stage[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage[data-count="4"], .stage[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage:not([data-count="0"]):not([data-count="1"]) .video-tile.self {
    position: relative; right: auto; bottom: auto; width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; z-index: auto;
}
.stage:not([data-count="0"]):not([data-count="1"]) .video-tile video { object-fit: cover; }
.stage:not([data-count="0"]):not([data-count="1"]) .self .name-tag { left: 12px; bottom: 12px; font-size: .86rem; padding: 4px 10px; }
.video-tile.speaking { box-shadow: 0 0 0 3px #34d399, 0 0 24px rgba(52, 211, 153, .35); }
.video-tile.connecting .avatar { opacity: .6; }
.tile-remove {
    position: absolute; top: 10px; right: 10px; z-index: 3; border: 0; border-radius: 8px; padding: 4px 10px;
    font: inherit; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(220, 38, 38, .85); cursor: pointer;
    opacity: 0; transition: opacity .15s;
}
.video-tile:hover .tile-remove, .tile-remove:focus-visible { opacity: 1; }
@media (hover: none) { .tile-remove { opacity: .9; } }
.people { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #12333c; color: #cfe1e3; white-space: nowrap; }
@media (max-width: 640px) {
    .video-tile.self { width: 34vw; aspect-ratio: 3 / 4; right: 20px; bottom: 20px; }
    .stage[data-count="1"] .video-tile.peer video { object-fit: cover; }
    .stage { gap: 8px; padding: 8px; }
    .stage[data-count="4"], .stage[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.name-tag {
    position: absolute; left: 12px; bottom: 12px; background: rgba(6, 27, 33, .72); color: #fff;
    padding: 4px 10px; border-radius: 8px; font-size: .86rem; display: flex; gap: 6px; align-items: center;
}
.self .name-tag { left: 8px; bottom: 8px; font-size: .78rem; padding: 2px 8px; }
.mic-off { width: 14px; height: 14px; background: var(--coral); display: inline-block;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-2a5 5 0 0 1-.7 2.54l1.46 1.46A6.96 6.96 0 0 0 19 11zm-4 .17V5a3 3 0 0 0-5.94-.6L15 10.34zM4.27 3 3 4.27l6 6V11a3 3 0 0 0 4.07 2.8l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.92V21h2v-3.08a6.9 6.9 0 0 0 2.98-1.1L19.73 21 21 19.73z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-2a5 5 0 0 1-.7 2.54l1.46 1.46A6.96 6.96 0 0 0 19 11zm-4 .17V5a3 3 0 0 0-5.94-.6L15 10.34zM4.27 3 3 4.27l6 6V11a3 3 0 0 0 4.07 2.8l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.92V21h2v-3.08a6.9 6.9 0 0 0 2.98-1.1L19.73 21 21 19.73z'/%3E%3C/svg%3E") center / contain no-repeat; }
.status-text { font-size: 1.05rem; color: #d3e3e5; }
.invite.inline { border: 0; padding: 0; margin-top: 4px; justify-items: center; }
.invite.inline code { background: rgba(255,255,255,.08); color: #e9f1f2; }
.small-qr { width: 128px; border-radius: 8px; overflow: hidden; }
.unmute-audio { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; }

.callbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #071f26; border-top: 1px solid #12333c;
}
.callbar-center { display: flex; gap: 14px; }
.callbar-right { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.callbar-right .btn { background: transparent; color: #e9f1f2; border-color: #2a5561; }
.callbar-right .btn.danger { color: #fca5a5; border-color: #7f2b2b; }
.callbar-left { display: flex; align-items: center; gap: 8px; color: #a9c2c6; min-width: 0; }
@media (max-width: 640px) {
    .callbar { grid-template-columns: 1fr; justify-items: center; }
    .callbar-left, .callbar-right { justify-content: center; }
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; flex: none; }
.dot.ok { background: #34d399; }
.dot.wait { background: #fbbf24; }
.dot.warn { background: #f59e0b; }
.dot.bad { background: var(--bad); }

.toast {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 50;
    background: #071f26; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
    max-width: calc(100vw - 32px); font-size: .92rem;
}