refactor: Update layout and styling components; remove unused CSS files and enhance button styles

frontend/vue-app/src/components/shared/LoginButton.vue

@@ -131,16 +131,16 @@ onUnmounted(() => {
 
 <template>
   <div style="position: relative">
-    <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
+    <button
+      v-if="!isParentAuthenticated"
+      @click="open"
+      aria-label="Parent login"
+      class="login-btn parent-btn"
+    >
       Parent
     </button>
     <div v-else style="display: inline-block; position: relative" ref="dropdownRef">
-      <button
-        @click="toggleDropdown"
-        aria-label="Parent menu"
-        class="login-btn"
-        style="min-width: 80px"
-      >
+      <button @click="toggleDropdown" aria-label="Parent menu" class="login-btn parent-btn">
         Parent ▼
       </button>
       <div
@@ -200,8 +200,41 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style>
-/* modal */
+<style scoped>
+.parent-btn {
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  background: var(--button-bg, #fff);
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+  transition:
+    background 0.18s,
+    color 0.18s;
+  white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+  .parent-btn {
+    font-size: 0.7rem;
+  }
+}
 
 .pin-input {
   width: 100%;