room restructure part 1

static/css/room_members.css

@@ -0,0 +1,85 @@
+.badge.bg-primary.rounded-pill {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+    font-size: 1em;
+    height: 32px;
+    border-radius: 5px;
+    padding: 0 18px;
+}
+
+.btn-sm.member-action {
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+}
+
+.form-check-inline {
+    margin-right: 8px;
+}
+
+.member-row {
+    align-items: center;
+    gap: 8px;
+}
+
+.badge.creator-badge {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    font-size: 1em;
+    height: 32px;
+    border-radius: 5px;
+    padding: 0 18px;
+    background-color: rgba(22,118,123,0.08);
+    color: #16767b;
+    border: 1px solid #16767b22;
+}
+
+.btn-save-member {
+    background-color: #16767b;
+    color: #fff;
+    border: 1px solid #16767b;
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    transition: background 0.2s, border 0.2s;
+}
+
+.btn-save-member:hover {
+    background-color: #1a8a90;
+    border-color: #1a8a90;
+}
+
+.btn-remove-member {
+    background-color: rgba(239,68,68,0.1);
+    color: #b91c1c;
+    border: 1px solid #b91c1c22;
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    transition: background 0.2s, color 0.2s;
+}
+
+.btn-remove-member:hover {
+    background-color: #b91c1c;
+    color: #fff;
+} 

static/css/rooms.css

@@ -0,0 +1,33 @@
+.hover-shadow {
+    transition: all 0.3s ease;
+}
+
+.hover-shadow:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.card {
+    border: none;
+    border-radius: 10px;
+}
+
+.card-footer {
+    padding: 1rem;
+}
+
+.btn {
+    border-radius: 5px;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    transition: all 0.2s ease;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn i {
+    font-size: 0.9em;
+}