body { 
    font-family: Arial, sans-serif; 
    margin: 20px; 
    background: #f5f5f5; 
}

.container { 
    max-width: 600px; 
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.room-section { 
    margin-bottom: 20px; 
    padding: 15px; 
    background: #f8f9fa; 
    border-radius: 5px; 
}

.room-section input { 
    padding: 8px; 
    margin: 0 10px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
}

.room-section button { 
    padding: 8px 16px; 
    background: #007bff; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
}

.room-section button:hover { 
    background: #0056b3; 
}

.status { 
    padding: 10px; 
    margin: 10px 0; 
    border-radius: 4px; 
    font-weight: bold; 
}

.status.connected { 
    background: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb; 
}

.status.connecting { 
    background: #fff3cd; 
    color: #856404; 
    border: 1px solid #ffeaa7; 
}

.status.disconnected { 
    background: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb; 
}

.counter-section { 
    text-align: center; 
    margin: 30px 0; 
}

.counter-value { 
    font-size: 3em; 
    font-weight: bold; 
    color: #007bff; 
    margin-left: 10px; 
}

.counter-section button { 
    padding: 15px 30px; 
    font-size: 1.2em; 
    background: #28a745; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    margin-top: 20px; 
}

.counter-section button:hover:not(:disabled) { 
    background: #218838; 
}

.counter-section button:disabled { 
    background: #6c757d; 
    cursor: not-allowed; 
}

.peer-info { 
    margin-top: 20px; 
    padding: 10px; 
    background: #e9ecef; 
    border-radius: 4px; 
    font-size: 0.9em; 
}

code { 
    background: #f8f9fa; 
    padding: 2px 4px; 
    border-radius: 3px; 
    font-family: monospace; 
}