.calendar-heading,.calendar-toolbar,.meeting-card-top,.meeting-actions { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.calendar-heading { margin-bottom:18px; } .calendar-heading h1,.calendar-heading h2 { margin:0; } .calendar-heading p { color:#777; }
.calendar-heading button,.calendar-toolbar button,.meeting-actions button { width:auto; }
.calendar-layout { display:grid;grid-template-columns:minmax(400px,1.25fr) minmax(320px,1fr);gap:20px;align-items:start; }
.calendar-toolbar h2 { flex:1;margin:0;font-size:20px; } .calendar-toolbar { margin-bottom:18px; }
.calendar-weekdays,.calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
.calendar-weekdays { margin:22px 0 8px;text-align:center;font-size:12px;color:#777; }
.calendar-day { background:#faf9f5;border:1px solid #e3dccf;box-shadow:none;min-height:95px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;color:#37352e;overflow:hidden; }
.calendar-day strong { font-size:14px; } .calendar-day span { width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;text-align:left;margin-top:6px;background:#f4e9bd;padding:3px;border-radius:3px; }
.calendar-day.selected { outline:2px solid #b18b23;background:#fff7da; } .calendar-day.today strong { color:#20764b;text-decoration:underline; } .calendar-day small { font-size:10px; }
.calendar-agenda h2 { font-size:20px; } .meeting-card { padding:18px 0;border-bottom:1px solid #e3dccf; } .meeting-card h3 { font-size:18px;margin:0; } .meeting-card-top>span { font-size:11px;color:#746849; }
.meeting-description { white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px; } .meeting-actions { flex-wrap:wrap;justify-content:flex-start;gap:7px; } .meeting-actions button,.meeting-join { padding:8px 10px;font-size:12px; } .meeting-join { background:#20764b;color:white;border-radius:8px;text-decoration:none; } .cancelled { opacity:.65; } .calendar-empty { color:#777;line-height:1.7; }
#meetingDialog { width:min(650px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #d7cbb2;border-radius:14px;padding:24px; } #meetingDialog::backdrop { background:#161a20aa; }
.meeting-time-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; } .attendee-picker { max-height:160px;overflow:auto;border:1px solid #ddd;border-radius:8px;margin:10px 0; } .attendee-option { display:flex;align-items:center;gap:10px;padding:8px;font-size:13px;cursor:pointer; } .attendee-option[hidden] { display:none; } .attendee-option input { width:17px;height:17px;flex-shrink:0;margin:0; }
.meeting-public { background:#f3efe6;min-height:100dvh; } .meeting-public .container { max-width:1400px; } .meeting-prejoin { max-width:600px;margin:30px auto; } .meeting-prejoin video { width:100%;max-height:240px;object-fit:contain;background:#20252b;border-radius:10px; } .meeting-public button { width:auto; } .meeting-public .meeting-controls { display:flex;flex-wrap:wrap;gap:8px;margin:18px 0; } .meeting-room-layout { display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px; } .meeting-videos { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-content:start; } .participant-tile { position:relative;background:#20252b;border-radius:12px;overflow:hidden;min-height:180px; } .participant-tile video { width:100%;height:240px;object-fit:contain; } .participant-tile>span { position:absolute;bottom:10px;left:10px;color:#fff;background:#0009;padding:4px 8px;border-radius:5px;font-size:12px; } .waiting-person,.participant-person { border-bottom:1px solid #ddd;padding:10px 0; } .waiting-person p,.participant-person p { margin:0 0 8px;overflow-wrap:anywhere; } .waiting-person button,.participant-person button { font-size:12px;padding:5px 8px; } .meeting-public .card h2 { font-size:18px; } #meetingStatus { white-space:pre-wrap; } .join-name-note { color:#777;font-size:12px; }
@media(max-width:900px) { .calendar-layout { grid-template-columns:1fr; } .meeting-room-layout { grid-template-columns:1fr; } }
@media(max-width:600px) { .calendar-heading { align-items:flex-start;flex-direction:column; } .calendar-day { min-height:65px;padding:5px; } .calendar-day span { font-size:9px; } .calendar-month { padding:12px; } .calendar-toolbar { gap:5px; } .calendar-toolbar h2 { font-size:17px; } .meeting-time-row { grid-template-columns:1fr; } #meetingDialog { padding:16px; } .meeting-videos { grid-template-columns:1fr; } }

.meeting-public .menu .brand-copy { color:#f5f5f2; }