Moved things around

frontend/vue-app/src/assets/actions-shared.css

@@ -0,0 +1,56 @@
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.actions button {
+  padding: 1rem 2.2rem;
+  border-radius: 12px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem;
+  transition: background 0.18s;
+  min-width: 120px;
+}
+
+/* Unified error style */
+.error {
+  color: var(--error);
+  margin-top: 0.7rem;
+  text-align: center;
+  background: var(--error-bg);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+@media (max-width: 480px) {
+  .actions {
+    gap: 1.2rem;
+  }
+  .actions button {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.05rem;
+    min-width: 90px;
+  }
+}
+
+/* Error message */
+.error-message {
+  color: var(--error, #e53e3e);
+  font-size: 0.98rem;
+  margin-top: 0.4rem;
+  display: block;
+}
+
+/* Success message */
+.success-message {
+  color: var(--success, #16a34a);
+  font-size: 1rem;
+}
+
+/* Input error */
+.input-error {
+  border-color: var(--error, #e53e3e);
+}

frontend/vue-app/src/assets/button-shared.css

@@ -0,0 +1,121 @@
+/* Base button style */
+.btn {
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  padding: 0.7rem 1.5rem;
+  font-size: 1.1rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
+  transition:
+    background 0.18s,
+    color 0.18s;
+  display: inline-block;
+}
+
+/* Primary button (e.g., Save, Confirm) */
+.btn-primary {
+  background: var(--btn-primary);
+  color: #fff;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background: var(--btn-primary-hover);
+}
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background: var(--btn-secondary, #f3f3f3);
+  color: var(--btn-secondary-text, #666);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Secondary button (e.g., Cancel) */
+.btn-secondary {
+  background: var(--btn-secondary);
+  color: var(--btn-secondary-text);
+}
+.btn-secondary:hover,
+.btn-secondary:focus {
+  background: var(--btn-secondary-hover);
+}
+
+/* Danger button (e.g., Delete) */
+.btn-danger {
+  background: var(--btn-danger);
+  color: #fff;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background: var(--btn-danger-hover);
+}
+
+/* Green button (e.g., Confirm) */
+.btn-green {
+  background: var(--btn-green);
+  color: #fff;
+}
+.btn-green:hover,
+.btn-green:focus {
+  background: var(--btn-green-hover);
+}
+
+.form-btn {
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  border: none;
+  background: var(--btn-primary, #667eea);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.12);
+  transition:
+    background 0.15s,
+    transform 0.06s;
+}
+.form-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.form-btn:hover:not(:disabled) {
+  background: var(--btn-primary-hover, #5a67d8);
+  transform: translateY(-1px);
+}
+
+/* Link-style button */
+.btn-link {
+  color: var(--btn-primary);
+  text-decoration: underline;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-weight: 600;
+  margin-left: 6px;
+}
+.btn-link:disabled {
+  text-decoration: none;
+  opacity: 0.75;
+  cursor: default;
+  pointer-events: none;
+  color: var(--btn-primary);
+}
+
+.round-btn {
+  background: var(--sign-in-btn-bg);
+  color: var(--sign-in-btn-color);
+  border: 2px solid var(--sign-in-btn-border);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-right: 0.1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+.round-btn:hover {
+  background: var(--sign-in-btn-hover-bg);
+  color: var(--sign-in-btn-hover-color);
+}

frontend/vue-app/src/assets/child-list-shared.css

@@ -0,0 +1,205 @@
+.child-list-container {
+  background: var(--child-list-bg, rgba(255, 255, 255, 0.1));
+  border-radius: 12px;
+  padding: 1rem;
+  color: var(--child-list-title-color, #fff);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.child-list-container h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--child-list-title-color, #fff);
+}
+
+.scroll-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-track {
+  background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
+  border-radius: 10px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb {
+  background: var(
+    --child-list-scrollbar-thumb,
+    linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
+  );
+  border-radius: 10px;
+  border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb:hover {
+  background: var(
+    --child-list-scrollbar-thumb-hover,
+    linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
+  );
+  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
+}
+
+.item-scroll {
+  display: flex;
+  gap: 0.75rem;
+  min-width: min-content;
+  padding: 0.5rem 0;
+}
+
+/* Fallback for browsers that don't support flex gap */
+.item-card + .item-card {
+  margin-left: 0.75rem;
+}
+
+.item-card {
+  position: relative;
+  background: var(--item-card-bg, rgba(255, 255, 255, 0.12));
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-width: 140px;
+  max-width: 220px;
+  width: 100%;
+  text-align: center;
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+  border: var(--item-card-border, 1px solid rgba(255, 255, 255, 0.08));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.item-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
+}
+
+.item-card.ready {
+  box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
+  border-color: var(--item-card-ready-border, #667eea);
+  animation: ready-glow 0.7s;
+}
+
+.item-card.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  filter: grayscale(0.7);
+}
+
+.item-card.good {
+  border-color: var(--item-card-good-border, rgba(46, 204, 113, 0.9)); /* green */
+  background: var(--item-card-good-bg, rgba(46, 204, 113, 0.06));
+}
+
+.item-card.bad {
+  border-color: var(--item-card-bad-border, rgba(255, 99, 71, 0.95)); /* red */
+  background: var(--item-card-bad-bg, rgba(255, 99, 71, 0.03));
+}
+
+@keyframes ready-glow {
+  0% {
+    box-shadow: 0 0 0 0 #667eea00;
+    border-color: inherit;
+  }
+  100% {
+    box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
+    border-color: var(--item-card-ready-border, #667eea);
+  }
+}
+
+.item-name {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+  color: var(--item-name-color, #fff);
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+/* Image styling */
+.item-image {
+  width: 70px;
+  height: 70px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin: 0 auto 0.4rem auto;
+  display: block;
+}
+
+.item-points {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--item-points-color, #ffd166);
+  font-size: 1rem;
+  font-weight: 900;
+  text-shadow: var(
+    --item-points-shadow,
+    -1px -1px 0 #1a3d1f,
+    1px -1px 0 #1a3d1f,
+    -1px 1px 0 #1a3d1f,
+    1px 1px 0 #1a3d1f
+  );
+}
+
+.item-points.ready {
+  color: var(--item-points-ready-color, #38c172); /* a nice green */
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+/* Mobile tweaks */
+@media (max-width: 480px) {
+  .item-card {
+    min-width: 110px;
+    max-width: 150px;
+    padding: 0.6rem;
+  }
+  .item-name {
+    font-size: 0.86rem;
+  }
+  .item-image {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto 0.3rem auto;
+  }
+  .item-points {
+    font-size: 0.78rem;
+  }
+  .scroll-wrapper::-webkit-scrollbar {
+    height: 10px;
+  }
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    border-width: 1px;
+  }
+}
+
+.pending-block {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  background: var(--pending-block-bg, #222b);
+  color: var(--pending-block-color, #62ff7a);
+  font-weight: 700;
+  font-size: 1.05rem;
+  text-align: center;
+  border-radius: 6px;
+  padding: 0.4rem 0;
+  letter-spacing: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0.95;
+  pointer-events: none;
+}

frontend/vue-app/src/assets/common.css

@@ -0,0 +1,29 @@
+.loading,
+.empty {
+  text-align: center;
+  padding: 1rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+  color: var(--child-list-loading-color, #fff);
+}
+
+.error {
+  color: var(--error);
+  margin-top: 0.7rem;
+  text-align: center;
+  background: var(--error-bg);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.error-message {
+  color: var(--error, #e53e3e);
+  font-size: 0.98rem;
+  margin-top: 0.4rem;
+  display: block;
+}
+
+.success-message {
+  color: var(--success, #16a34a);
+  font-size: 1rem;
+}

frontend/vue-app/src/assets/edit-forms.css

@@ -0,0 +1,80 @@
+.profile-view,
+.edit-view,
+.child-edit-view,
+.reward-edit-view,
+.task-edit-view {
+  max-width: 400px;
+  margin: 2rem auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+
+.profile-view h2,
+.edit-view h2,
+.child-edit-view h2,
+.reward-edit-view h2,
+.task-edit-view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
+}
+
+.profile-form,
+.task-form,
+.reward-form,
+.child-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.profile-form div.group,
+.task-form div.group,
+.reward-form div.group,
+.child-edit-form div.group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  box-sizing: border-box;
+}
+
+.profile-form div.group label,
+.task-form div.group label,
+.reward-form div.group label,
+.child-edit-form div.group label {
+  font-weight: 600;
+  color: var(--form-label-color);
+  font-size: 1rem;
+}
+
+div.group input[type='text'],
+div.group input[type='number'],
+div.group input[type='email'] {
+  display: block;
+  width: 100%;
+  margin-top: 0.4rem;
+  padding: 0.5rem;
+  border-radius: 7px;
+  border: 1px solid var(--form-input-border);
+  font-size: 1rem;
+  background: var(--form-input-bg);
+  box-sizing: border-box;
+}
+div.group input:focus {
+  outline: none;
+  border: 1.5px solid var(--form-input-focus);
+}
+
+.loading-message {
+  text-align: center;
+  color: var(--form-loading);
+  margin-bottom: 1.2rem;
+}
+
+.form-group.image-picker-group {
+  display: block;
+  text-align: left;
+}

frontend/vue-app/src/assets/global.css

@@ -0,0 +1,185 @@
+:root {
+  --primary: #667eea;
+  --secondary: #7257b3;
+  --accent: #cbd5e1;
+  --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --button-bg: #fff;
+  --button-active-bg: var(--secondary);
+  --button-hover-bg: #e6eaff;
+  --button-text: var(--primary);
+  --button-active-text: #fff;
+  --app-version: var(--accent);
+
+  /* Add these: */
+  --btn-primary: #667eea;
+  --btn-primary-hover: #5a67d8;
+  --btn-secondary: #f3f3f3;
+  --btn-secondary-hover: #e2e8f0;
+  --btn-secondary-text: #666;
+  --btn-danger: #ef4444;
+  --btn-danger-hover: #dc2626;
+  --btn-green: #22c55e;
+  --btn-green-hover: #16a34a;
+
+  --error: #e53e3e;
+  --error-bg: rgba(255, 107, 107, 0.1);
+
+  --form-bg: #fff;
+  --form-shadow: #667eea22;
+  --form-heading: #667eea;
+  --form-label: #444;
+  --form-input-bg: #f8fafc;
+  --form-input-border: #cbd5e1;
+  --form-loading: #666;
+
+  --list-bg: #fff5;
+  --list-item-bg: #f8fafc;
+  --list-item-border-reward: #38c172;
+  --list-item-border-bad: #e53e3e;
+  --list-item-border-good: #00e1ff;
+  --list-item-bg-reward: #94ffb1;
+  --list-item-bg-bad: #ffc5c5;
+  --list-item-bg-good: #8dabfd;
+  --list-image-bg: #eee;
+  --delete-btn-hover-bg: #ffeaea;
+  --delete-btn-hover-shadow: #ef444422;
+  --checkbox-accent: #667eea;
+  --list-loading-color: #c0c0c0;
+
+  --modal-bg: #fff;
+  --modal-text: #222;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  --dialog-message: #444;
+  --dialog-child-name: #667eea;
+  --info-image-bg: #eee;
+  --info-points: #667eea;
+  --loading-color: #fff;
+
+  /* ChildrenListView styles */
+  --card-bg: #fff;
+  --card-title: #333;
+  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  --kebab-icon-color: #666;
+  --kebab-menu-bg: #f7fafc;
+  --kebab-menu-border: #bcc1c9;
+  --kebab-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(102, 126, 234, 0.08);
+  --kebab-menu-blur: 11px;
+  --menu-item-color: #333;
+  --menu-item-hover-bg: rgba(0, 0, 0, 0.04);
+  --menu-item-danger: #ff4d4f;
+  --modal-bg: #fff;
+  --modal-text: #222;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  --fab-bg: #667eea;
+  --fab-hover-bg: #5a67d8;
+  --fab-active-bg: #4c51bf;
+  --message-block-color: #fdfdfd;
+  --sub-message-color: #c1d0f1;
+  --sign-in-btn-bg: #fff;
+  --sign-in-btn-color: #2563eb;
+  --sign-in-btn-border: #2563eb;
+  --sign-in-btn-hover-bg: #2563eb;
+  --sign-in-btn-hover-color: #fff;
+  --child-image-bg: #fff;
+  --age-color: #666;
+  --points-color: #444;
+
+  /* Image Picker styles */
+  --icon-btn-bg: #f3f3f3;
+  --icon-btn-color: #667eea;
+  --icon-btn-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
+  --selectable-image-border: #e6e6e6;
+  --selectable-image-bg: #fafbff;
+  --selectable-image-selected: #667eea;
+  --loading-text: #888;
+  --modal-bg: #fff;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+
+  /* ChildDetailCard color variables */
+  --detail-card-bg: #fff;
+  --detail-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
+
+  --child-name-color: #333;
+  --child-age-color: #666;
+
+  --points-label-color: #888;
+  --points-value-color: #667eea;
+
+  /* ChildEditView styles */
+  --form-label-color: #333;
+  --form-input-bg: #fafbff;
+  --form-input-border: #e6e6e6;
+  --form-input-color: #222;
+  --form-input-focus: #667eea;
+
+  /*Reward/Task Assignment styles*/
+  --assign-heading-color: #ffffff;
+  --assign-no-items-color: #fdfdfd;
+  --assign-sub-message-color: #b5ccff;
+  --assign-create-btn-bg: #fff;
+  --assign-create-btn-color: #2563eb;
+  --assign-create-btn-border: #2563eb;
+  --assign-create-btn-hover-bg: #2563eb;
+  --assign-create-btn-hover-color: #fff;
+
+  --notification-reward-name: #ef4444;
+
+  /* ChildLists styles */
+  --child-list-bg: rgba(255, 255, 255, 0.1);
+  --child-list-title-color: #fff;
+  --child-list-loading-color: #fff;
+  --child-list-scrollbar-track: rgba(255, 255, 255, 0.05);
+  --child-list-scrollbar-thumb: linear-gradient(
+    180deg,
+    rgba(102, 126, 234, 0.8),
+    rgba(118, 75, 162, 0.8)
+  );
+  --child-list-scrollbar-thumb-hover: linear-gradient(
+    180deg,
+    rgba(102, 126, 234, 1),
+    rgba(118, 75, 162, 1)
+  );
+  --child-list-scrollbar-thumb-border: 2px solid rgba(255, 255, 255, 0.08);
+
+  --item-card-bg: rgba(255, 255, 255, 0.12);
+  --item-card-border: 1px solid rgba(255, 255, 255, 0.08);
+  --item-card-good-border: rgba(46, 204, 113, 0.9);
+  --item-card-good-bg: rgba(46, 204, 113, 0.06);
+  --item-card-bad-border: rgba(255, 99, 71, 0.95);
+  --item-card-bad-bg: rgba(255, 99, 71, 0.03);
+  --item-card-ready-shadow: 0 0 0 3px #667eea88, 0 0 12px #667eea44;
+  --item-card-ready-border: #667eea;
+  --item-card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+
+  --item-name-color: #fff;
+
+  --item-points-color: #ffd166;
+  --item-points-shadow:
+    -1px -1px 0 #1a3d1f, 1px -1px 0 #1a3d1f, -1px 1px 0 #1a3d1f, 1px 1px 0 #1a3d1f;
+  --item-points-ready-color: #38c172;
+
+  --pending-block-bg: #222b;
+  --pending-block-color: #62ff7a;
+
+  /* TaskEditView styles */
+  --toggle-btn-bg: #f3f3f3;
+  --toggle-btn-color: #444;
+  --toggle-btn-border: #cbd5e1;
+
+  --toggle-btn-good-bg: #38c172;
+  --toggle-btn-good-color: #fff;
+  --toggle-btn-good-shadow: #38c17233;
+  --toggle-btn-good-border: #38c172;
+
+  --toggle-btn-bad-bg: #e53e3e;
+  --toggle-btn-bad-color: #fff;
+  --toggle-btn-bad-shadow: #e53e3e33;
+  --toggle-btn-bad-border: #e53e3e;
+
+  /*TaskView and RewardView styles*/
+  --create-btn-bg: #fff;
+  --create-btn-color: #2563eb;
+  --create-btn-border: #2563eb;
+  --create-btn-hover-bg: #2563eb;
+  --create-btn-hover-color: #fff;
+}

frontend/vue-app/src/assets/layout-shared.css

@@ -0,0 +1,108 @@
+/* Root layout */
+.layout-root {
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: stretch;
+  padding: 5px 5px;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Back button container and login button container */
+.back-btn-container,
+.login-btn-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+}
+
+.back-btn-container {
+  justify-content: flex-start;
+}
+
+.login-btn-container {
+  justify-content: flex-end;
+}
+
+/* Spacer for layouts without a center nav */
+.spacer {
+  flex: 1 1 auto;
+}
+
+/* Back button */
+.back-btn {
+  background: var(--button-bg, #fff);
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+/* Login button inside login-btn container */
+.login-btn {
+  background: var(--button-bg, #fff);
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/* Main content area */
+.main-content {
+  flex: 1 1 auto;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+  overflow-y: visible;
+}
+
+/* App version display */
+.app-version {
+  position: fixed;
+  right: 18px;
+  bottom: 12px;
+  font-size: 0.92rem;
+  color: var(--app-version, #cbd5e1);
+  opacity: 0.85;
+  z-index: 100;
+  pointer-events: none;
+  user-select: none;
+  font-family: monospace;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .back-btn,
+  .login-btn button {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.6rem;
+    height: 100%;
+  }
+}

frontend/vue-app/src/assets/modal.css

@@ -0,0 +1,25 @@
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+}
+
+.modal {
+  background: var(--modal-bg);
+  color: var(--modal-text);
+  padding: 1.25rem;
+  border-radius: 10px;
+  width: 360px;
+  max-width: calc(100% - 32px);
+  box-shadow: var(--modal-shadow);
+  text-align: center;
+}
+
+.modal h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1.05rem;
+}

frontend/vue-app/src/assets/scroll.css

@@ -0,0 +1,25 @@
+.scroll-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-track {
+  background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
+  border-radius: 10px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb {
+  background: var(
+    --child-list-scrollbar-thumb,
+    linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
+  );
+  border-radius: 10px;
+  border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb:hover {
+  background: var(
+    --child-list-scrollbar-thumb-hover,
+    linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
+  );
+  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
+}

frontend/vue-app/src/assets/view-shared.css

@@ -0,0 +1,112 @@
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.loading {
+  color: var(--loading-color);
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Modal Backdrop and Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+}
+.modal {
+  background: var(--modal-bg);
+  color: var(--modal-text);
+  padding: 1.5rem 2rem;
+  border-radius: 12px;
+  min-width: 240px;
+  box-shadow: var(--modal-shadow);
+  text-align: center;
+}
+
+/* Dialog Message */
+.dialog-message {
+  font-size: 1.08rem;
+  color: var(--dialog-message);
+  font-weight: 500;
+  margin-bottom: 1.2rem;
+  text-align: center;
+}
+.dialog-message .child-name {
+  color: var(--dialog-child-name);
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+/* Info Sections (Reward/Task) */
+.info,
+.reward-info,
+.task-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.image,
+.reward-image,
+.task-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--info-image-bg);
+}
+.details,
+.reward-details,
+.task-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.name,
+.reward-name,
+.task-name {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+.points,
+.reward-points,
+.task-points {
+  color: var(--info-points);
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    gap: 1rem;
+  }
+  .modal {
+    padding: 1rem;
+    min-width: 0;
+  }
+}