* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f5f5;
    color: #1a1a1a;
    line-height: 1.5;
    min-height: 100vh;
}
.container { max-width: 480px; margin: 0 auto; padding: 24px 16px; }

/* Header */
.meet-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 32px;
}
.logo { width: 48px; height: 48px; }
.meeting-info h1 { font-size: 1.5rem; font-weight: 600; }
.host { color: #666; font-size: 0.9rem; margin-top: 4px; }

/* Card */
.meeting-card {
    background: white; border-radius: 12px; padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.detail-row {
    display: flex; justify-content: space-between; padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.detail-row:last-child { border-bottom: none; }
.label { color: #666; font-size: 0.9rem; }
.value { font-family: monospace; font-weight: 500; }

/* Host preview */
.host-preview {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0; padding: 16px; background: #fafafa; border-radius: 8px;
}
.host-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.host-status { display: flex; flex-direction: column; }
.live-indicator {
    width: 8px; height: 8px; background: #22c55e; border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Button */
.btn-join {
    width: 100%; padding: 14px 24px; background: #2d8cff; color: white;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s;
}
.btn-join:hover { background: #1a73e8; }
.disclaimer { text-align: center; color: #888; font-size: 0.8rem; margin-top: 16px; }

/* Footer */
.footer { text-align: center; color: #999; font-size: 0.75rem; margin-top: 32px; }
.footer a { color: #2d8cff; text-decoration: none; margin: 0 8px; }

/* Launching page */
.launch-container { text-align: center; padding: 48px 24px; }
.launch-container .logo { margin: 0 auto 24px; }
.launch-container h2 { margin-bottom: 24px; }
.spinner {
    width: 40px; height: 40px; border: 3px solid #e0e0e0;
    border-top-color: #2d8cff; border-radius: 50%;
    margin: 0 auto 16px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.small { font-size: 0.85rem; color: #666; margin-top: 16px; }