:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #202c2b; background: #f5f7f8; font-size: 16px; letter-spacing: 0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
header { min-height: 72px; padding: 20px 32px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #e0e5e5; background: #fff; font-weight: 600; }
.privacy { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5e706d; font-weight: 400; }
.privacy svg { width: 15px; height: 15px; }
main { width: min(100%, 620px); margin: auto; padding: 52px 24px 40px; text-align: center; }
.avatar { width: 104px; height: 104px; border-radius: 50%; background: #dceee9; color: #216c56; display: grid; place-items: center; margin: 0 auto 26px; }
.avatar svg { width: 48px; height: 48px; stroke-width: 1.5; }
.eyebrow { color: #627370; font-size: 14px; margin: 0 0 12px; }
h1 { font-size: 28px; line-height: 1.35; margin: 0 0 16px; font-weight: 600; overflow-wrap: anywhere; }
#status { margin: 0; min-height: 48px; line-height: 1.6; color: #5e706d; }
.timer { height: 56px; margin: 6px 0 26px; font-size: 32px; font-variant-numeric: tabular-nums; line-height: 56px; }
.actions { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
button { font: inherit; cursor: pointer; border: 0; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #4476bd; outline-offset: 5px; }
button:disabled { opacity: .55; cursor: wait; }
.action { width: 108px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: transparent; color: #293b35; font-size: 14px; }
.action svg { width: 64px; height: 64px; padding: 20px; border-radius: 50%; transition: filter .15s; }
.action:hover svg { filter: brightness(.93); }
.danger svg { background: #c84549; color: #fff; }
.accept svg { background: #18835c; color: #fff; }
.neutral svg { background: #e2e8ed; color: #344851; }
.neutral[aria-pressed="true"] svg { background: #ecd5d7; color: #a8343e; }
.secondary { display: inline-flex; gap: 8px; align-items: center; margin: 8px; padding: 10px 14px; background: #fff; border: 1px solid #d2dcdf; border-radius: 6px; color: #324d57; }
.secondary svg { width: 18px; height: 18px; }
.error { color: #ad343e; line-height: 1.7; font-size: 14px; overflow-wrap: anywhere; margin-top: 26px; }
textarea { width: 100%; height: 96px; border: 1px solid #d2dcdf; border-radius: 6px; font: inherit; font-size: 13px; }
footer { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #82928e; font-size: 12px; padding-bottom: env(safe-area-inset-bottom); }
footer svg { width: 18px; height: 18px; }
[hidden] { display: none !important; }
.video-call main { width: min(100%, 1040px); padding-top: 20px; }
.video-call .avatar { display: none; }
.video-call h1 { font-size: 22px; margin-bottom: 8px; }
.video-call .timer { height: 36px; line-height: 36px; font-size: 24px; margin: 4px 0 12px; }
.video-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #172321; margin: 0 0 20px; overflow: hidden; }
#remoteVideo { width: 100%; height: 100%; object-fit: contain; }
#localVideo { position: absolute; right: 12px; bottom: 12px; width: 24%; max-height: 36%; aspect-ratio: 4 / 3; object-fit: contain; background: #35433f; border: 1px solid #acbdb7; }
.video-status { position: absolute; top: 12px; left: 12px; color: #fff; font-size: 13px; background: #172321; padding: 4px 8px; }
.video-call .actions { gap: 12px; }
.video-call .action { width: 92px; gap: 8px; }
.video-call .action svg { width: 52px; height: 52px; padding: 15px; }
.devices { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.devices label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-align: left; width: min(100%, 240px); }
.devices select { width: 100%; min-height: 36px; border: 1px solid #d2dcdf; background: #fff; color: #293b35; font: inherit; border-radius: 4px; }
@media (max-width: 480px) { header { padding: 18px 20px; } main { padding: 32px 20px; } h1 { font-size: 24px; } .actions { gap: 16px; } .action { width: 96px; } }
@media (max-width: 480px) { .video-call main { padding: 20px 12px; } .video-stage { aspect-ratio: 4 / 3; } .video-call .action { width: 86px; } .devices label { width: 100%; } }