style: Refactor Vue pages and custom layout components to scoped BEM

resources/js/app.ts

@@ -19,7 +19,9 @@ configureEcho({
     forceTLS: false,
     enabledTransports: ['ws', 'wss'],
 });
+if(window){
     (window as any).echoConfigured = true;
+}
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 

resources/js/components/AddMutationForm.vue

@@ -41,55 +41,55 @@ function submit() {
 </script>
 
 <template>
-    <div class="mt-8">
+    <div class="c-add-mutation-form">
-        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        <h4 class="c-add-mutation-form__title">
             Add Mutation
         </h4>
         <form
             @submit.prevent="submit"
-            class="mt-6 space-y-6 overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800"
+            class="c-add-mutation-form__form"
         >
-            <div>
+            <div class="c-add-mutation-form__field">
                 <label
                     for="amount"
-                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    class="c-add-mutation-form__label"
                     >Amount</label
                 >
                 <input
                     v-model="form.amount"
                     id="amount"
                     type="number"
-                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                    class="c-add-mutation-form__input"
                 />
-                <div v-if="form.errors.amount" class="text-sm text-red-600">
+                <div v-if="form.errors.amount" class="c-add-mutation-form__error">
                     {{ form.errors.amount }}
                 </div>
             </div>
 
-            <div>
+            <div class="c-add-mutation-form__field">
                 <label
                     for="description"
-                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    class="c-add-mutation-form__label"
                     >Description</label
                 >
                 <textarea
                     v-model="form.description"
                     id="description"
                     rows="4"
-                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                    class="c-add-mutation-form__textarea"
                 ></textarea>
                 <div
                     v-if="form.errors.description"
-                    class="text-sm text-red-600"
+                    class="c-add-mutation-form__error"
                 >
                     {{ form.errors.description }}
                 </div>
             </div>
 
             <!-- Media Uploads for Mutations -->
-            <div>
+            <div class="c-add-mutation-form__field">
                 <label
-                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    class="c-add-mutation-form__label"
                     >Attach Proof Media (Photos/Videos)</label
                 >
                 <input
@@ -97,24 +97,24 @@ function submit() {
                     multiple
                     accept="image/*,video/*"
                     @change="handleMutationFileChange"
-                    class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
+                    class="c-add-mutation-form__file-input"
                 />
                 <div
                     v-if="form.media.length > 0"
-                    class="mt-2 flex flex-wrap gap-2"
+                    class="c-add-mutation-form__media-preview-list"
                 >
                     <div
                         v-for="(file, index) in form.media"
                         :key="index"
-                        class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
+                        class="c-add-mutation-form__media-preview-item"
                     >
-                        <span class="max-w-[150px] truncate">{{
+                        <span class="c-add-mutation-form__media-preview-name">{{
                             file.name
                         }}</span>
                         <button
                             type="button"
                             @click="removeMutationFile(index)"
-                            class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
+                            class="c-add-mutation-form__media-preview-remove"
                         >
                             ✕
                         </button>
@@ -122,11 +122,11 @@ function submit() {
                 </div>
             </div>
 
-            <div class="flex items-center gap-4">
+            <div class="c-add-mutation-form__actions">
                 <button
                     type="submit"
                     :disabled="form.processing"
-                    class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                    class="c-add-mutation-form__submit-btn"
                 >
                     Add Mutation
                 </button>
@@ -134,3 +134,67 @@ function submit() {
         </form>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-add-mutation-form {
+    @apply mt-8;
+}
+
+.c-add-mutation-form__title {
+    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
+}
+
+.c-add-mutation-form__form {
+    @apply mt-6 space-y-6 overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-add-mutation-form__field {
+    @apply block;
+}
+
+.c-add-mutation-form__label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+.c-add-mutation-form__input {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-add-mutation-form__textarea {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-add-mutation-form__file-input {
+    @apply mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100;
+}
+
+.c-add-mutation-form__media-preview-list {
+    @apply mt-2 flex flex-wrap gap-2;
+}
+
+.c-add-mutation-form__media-preview-item {
+    @apply relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800;
+}
+
+.c-add-mutation-form__media-preview-name {
+    @apply max-w-[150px] truncate;
+}
+
+.c-add-mutation-form__media-preview-remove {
+    @apply absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500;
+}
+
+.c-add-mutation-form__error {
+    @apply text-sm text-red-600;
+}
+
+.c-add-mutation-form__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-add-mutation-form__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
+}
+</style>

resources/js/components/CreateLedgerForm.vue

@@ -34,58 +34,56 @@ function submit() {
 </script>
 
 <template>
-    <div class="mt-8">
+    <div class="c-create-ledger-form">
-        <div
+        <div class="c-create-ledger-form__card">
-            class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+            <div class="c-create-ledger-form__body">
-        >
+                <h3 class="c-create-ledger-form__title">Create a New Ledger</h3>
-            <div class="p-6 text-gray-900 dark:text-gray-100">
-                <h3 class="text-lg font-medium">Create a New Ledger</h3>
 
-                <form @submit.prevent="submit" class="mt-6 space-y-6">
+                <form @submit.prevent="submit" class="c-create-ledger-form__form">
-                    <div>
+                    <div class="c-create-ledger-form__field">
                         <label
                             for="name"
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            class="c-create-ledger-form__label"
                             >Name</label
                         >
                         <input
                             v-model="form.name"
                             id="name"
                             type="text"
-                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                            class="c-create-ledger-form__input"
                         />
                         <div
                             v-if="form.errors.name"
-                            class="text-sm text-red-600"
+                            class="c-create-ledger-form__error"
                         >
                             {{ form.errors.name }}
                         </div>
                     </div>
 
-                    <div>
+                    <div class="c-create-ledger-form__field">
                         <label
                             for="rules"
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            class="c-create-ledger-form__label"
                             >Rules</label
                         >
                         <textarea
                             v-model="form.rules"
                             id="rules"
                             rows="4"
-                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                            class="c-create-ledger-form__textarea"
                         ></textarea>
                         <div
                             v-if="form.errors.rules"
-                            class="text-sm text-red-600"
+                            class="c-create-ledger-form__error"
                         >
                             {{ form.errors.rules }}
                         </div>
                     </div>
 
                     <!-- Media Uploads for Ledgers -->
-                    <div>
+                    <div class="c-create-ledger-form__field">
                         <label
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            class="c-create-ledger-form__label"
                             >Attach Cover/Rules Media</label
                         >
                         <input
@@ -93,24 +91,24 @@ function submit() {
                             multiple
                             accept="image/*,video/*"
                             @change="handleLedgerFileChange"
-                            class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
+                            class="c-create-ledger-form__file-input"
                         />
                         <div
                             v-if="form.media.length > 0"
-                            class="mt-2 flex flex-wrap gap-2"
+                            class="c-create-ledger-form__media-preview-list"
                         >
                             <div
                                 v-for="(file, index) in form.media"
                                 :key="index"
-                                class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
+                                class="c-create-ledger-form__media-preview-item"
                             >
-                                <span class="max-w-[150px] truncate">{{
+                                <span class="c-create-ledger-form__media-preview-name">{{
                                     file.name
                                 }}</span>
                                 <button
                                     type="button"
                                     @click="removeLedgerFile(index)"
-                                    class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
+                                    class="c-create-ledger-form__media-preview-remove"
                                 >
                                     ✕
                                 </button>
@@ -118,11 +116,11 @@ function submit() {
                         </div>
                     </div>
 
-                    <div class="flex items-center gap-4">
+                    <div class="c-create-ledger-form__actions">
                         <button
                             type="submit"
                             :disabled="form.processing"
-                            class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                            class="c-create-ledger-form__submit-btn"
                         >
                             Create Ledger
                         </button>
@@ -132,3 +130,75 @@ function submit() {
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-create-ledger-form {
+    @apply mt-8;
+}
+
+.c-create-ledger-form__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-create-ledger-form__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-create-ledger-form__title {
+    @apply text-lg font-medium;
+}
+
+.c-create-ledger-form__form {
+    @apply mt-6 space-y-6;
+}
+
+.c-create-ledger-form__field {
+    @apply block;
+}
+
+.c-create-ledger-form__label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+.c-create-ledger-form__input {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-create-ledger-form__textarea {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-create-ledger-form__file-input {
+    @apply mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100;
+}
+
+.c-create-ledger-form__media-preview-list {
+    @apply mt-2 flex flex-wrap gap-2;
+}
+
+.c-create-ledger-form__media-preview-item {
+    @apply relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800;
+}
+
+.c-create-ledger-form__media-preview-name {
+    @apply max-w-[150px] truncate;
+}
+
+.c-create-ledger-form__media-preview-remove {
+    @apply absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500;
+}
+
+.c-create-ledger-form__error {
+    @apply text-sm text-red-600;
+}
+
+.c-create-ledger-form__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-create-ledger-form__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
+}
+</style>

resources/js/components/LedgerList.vue

@@ -14,17 +14,17 @@ defineProps<{
 </script>
 
 <template>
-    <div class="mt-8">
+    <div class="c-ledger-list">
-        <div class="mb-6 flex items-center justify-between">
+        <div class="c-ledger-list__header">
-            <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h4 class="c-ledger-list__title">
                 Ledgers
             </h4>
         </div>
-        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <ul class="c-ledger-list__grid">
             <li
                 v-for="ledger in ledgers"
                 :key="ledger.id"
-                class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
+                class="c-ledger-list__item"
             >
                 <Link
                     :href="
@@ -34,40 +34,92 @@ defineProps<{
                         })
                     "
                 >
-                    <h5 class="text-lg font-semibold">
+                    <h5 class="c-ledger-list__item-name">
                         {{ ledger.name }}
                     </h5>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                    <p class="c-ledger-list__item-score">
                         Score: {{ ledger.score }}
                     </p>
 
                     <!-- Ledger Media Thumbnails -->
                     <div
                         v-if="ledger.media && ledger.media.length > 0"
-                        class="mt-2 flex flex-wrap gap-1"
+                        class="c-ledger-list__media-list"
                     >
                         <div
                             v-for="item in ledger.media"
                             :key="item.id"
-                            class="relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600"
+                            class="c-ledger-list__media-item"
                         >
                             <img
                                 v-if="item.mime_type.startsWith('image/')"
                                 :src="item.url"
-                                class="size-full object-cover"
+                                class="c-ledger-list__media-img"
                             />
                             <video
                                 v-else-if="item.mime_type.startsWith('video/')"
                                 :src="item.url"
-                                class="size-full object-cover"
+                                class="c-ledger-list__media-video"
                             />
                         </div>
                     </div>
                 </Link>
             </li>
         </ul>
-        <div v-if="ledgers.length === 0" class="mt-4 text-gray-500">
+        <div v-if="ledgers.length === 0" class="c-ledger-list__empty">
             No ledgers found for this dynamic.
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-ledger-list {
+    @apply mt-8;
+}
+
+.c-ledger-list__header {
+    @apply mb-6 flex items-center justify-between;
+}
+
+.c-ledger-list__title {
+    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
+}
+
+.c-ledger-list__grid {
+    @apply mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+}
+
+.c-ledger-list__item {
+    @apply border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700;
+}
+
+.c-ledger-list__item-name {
+    @apply text-lg font-semibold;
+}
+
+.c-ledger-list__item-score {
+    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-ledger-list__media-list {
+    @apply mt-2 flex flex-wrap gap-1;
+}
+
+.c-ledger-list__media-item {
+    @apply relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600;
+}
+
+.c-ledger-list__media-img {
+    @apply size-full object-cover;
+}
+
+.c-ledger-list__media-video {
+    @apply size-full object-cover;
+}
+
+.c-ledger-list__empty {
+    @apply mt-4 text-gray-500;
+}
+</style>

resources/js/components/MutationList.vue

@@ -47,19 +47,19 @@ function isOwnerUser(userId: number): boolean {
 </script>
 
 <template>
-    <div class="mt-8">
+    <div class="c-mutation-list">
-        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        <h4 class="c-mutation-list__title">
             Mutations
         </h4>
-        <ul class="mt-4 space-y-4">
+        <ul class="c-mutation-list__list">
             <li
                 v-for="mutation in mutations"
                 :key="mutation.id"
-                class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
+                class="c-mutation-list__item"
             >
-                <div class="flex items-start justify-between">
+                <div class="c-mutation-list__item-header">
                     <div>
-                        <span class="font-semibold">
+                        <span class="c-mutation-list__item-author">
                             {{
                                 isOwnerUser(mutation.user_id)
                                     ? 'Added by'
@@ -67,13 +67,13 @@ function isOwnerUser(userId: number): boolean {
                             }}
                             {{ mutation.user.name }}
                         </span>
-                        <div class="mt-1 flex items-center gap-2">
+                        <div class="c-mutation-list__item-meta">
                             <span
                                 :class="{
-                                    'text-green-500': mutation.amount > 0,
+                                    'c-mutation-list__item-amount--positive': mutation.amount > 0,
-                                    'text-red-500': mutation.amount < 0,
+                                    'c-mutation-list__item-amount--negative': mutation.amount < 0,
                                 }"
-                                class="text-sm font-bold"
+                                class="c-mutation-list__item-amount"
                             >
                                 {{ mutation.amount > 0 ? '+' : ''
                                 }}{{ mutation.amount }}
@@ -82,59 +82,57 @@ function isOwnerUser(userId: number): boolean {
                             <span
                                 v-if="!isOwnerUser(mutation.user_id)"
                                 :class="{
-                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400':
+                                    'c-mutation-list__item-status--pending':
                                         mutation.status === 'pending',
-                                    'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400':
+                                    'c-mutation-list__item-status--approved':
                                         mutation.status === 'approved',
-                                    'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400':
+                                    'c-mutation-list__item-status--rejected':
                                         mutation.status === 'rejected',
                                 }"
-                                class="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase"
+                                class="c-mutation-list__item-status"
                             >
                                 {{ mutation.status }}
                             </span>
                         </div>
                     </div>
-                    <div class="text-xs text-gray-500">
+                    <div class="c-mutation-list__item-time">
                         {{ new Date(mutation.created_at).toLocaleString() }}
                     </div>
                 </div>
-                <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
+                <p class="c-mutation-list__item-desc">
                     {{ mutation.description }}
                 </p>
 
                 <!-- Attached Mutation Proof Media -->
                 <div
                     v-if="mutation.media && mutation.media.length > 0"
-                    class="mt-3 flex flex-wrap gap-2"
+                    class="c-mutation-list__media-list"
                 >
                     <div
                         v-for="item in mutation.media"
                         :key="item.id"
-                        class="max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700"
+                        class="c-mutation-list__media-item"
                     >
                         <img
                             v-if="item.mime_type.startsWith('image/')"
                             :src="item.url"
-                            class="h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
+                            class="c-mutation-list__media-img"
                             @click="
                                 emit('open-lightbox', item.url, item.mime_type)
                             "
                         />
                         <div
                             v-else-if="item.mime_type.startsWith('video/')"
-                            class="relative cursor-pointer transition-opacity hover:opacity-90"
+                            class="c-mutation-list__media-video-wrapper"
                             @click="
                                 emit('open-lightbox', item.url, item.mime_type)
                             "
                         >
                             <video
                                 :src="item.url"
-                                class="h-auto max-h-[150px] w-full"
+                                class="c-mutation-list__media-video"
                             ></video>
-                            <div
+                            <div class="c-mutation-list__media-video-overlay">
-                                class="absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white"
-                            >
                                 ▶
                             </div>
                         </div>
@@ -144,17 +142,17 @@ function isOwnerUser(userId: number): boolean {
                 <!-- Owner Approve/Reject Actions -->
                 <div
                     v-if="isOwner && mutation.status === 'pending'"
-                    class="mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700"
+                    class="c-mutation-list__actions"
                 >
                     <button
                         @click="updateStatus(mutation.id, 'approved')"
-                        class="inline-flex cursor-pointer items-center rounded bg-green-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-green-500"
+                        class="c-mutation-list__approve-btn"
                     >
                         Approve
                     </button>
                     <button
                         @click="updateStatus(mutation.id, 'rejected')"
-                        class="inline-flex cursor-pointer items-center rounded bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500"
+                        class="c-mutation-list__reject-btn"
                     >
                         Reject
                     </button>
@@ -163,8 +161,116 @@ function isOwnerUser(userId: number): boolean {
                 <Chat :chat="mutation.chat" />
             </li>
         </ul>
-        <div v-if="mutations.length === 0" class="mt-4 text-gray-500">
+        <div v-if="mutations.length === 0" class="c-mutation-list__empty">
             No mutations found for this ledger.
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-mutation-list {
+    @apply mt-8;
+}
+
+.c-mutation-list__title {
+    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
+}
+
+.c-mutation-list__list {
+    @apply mt-4 space-y-4;
+}
+
+.c-mutation-list__item {
+    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-mutation-list__item-header {
+    @apply flex items-start justify-between;
+}
+
+.c-mutation-list__item-author {
+    @apply font-semibold;
+}
+
+.c-mutation-list__item-meta {
+    @apply mt-1 flex items-center gap-2;
+}
+
+.c-mutation-list__item-amount {
+    @apply text-sm font-bold;
+}
+
+.c-mutation-list__item-amount--positive {
+    @apply text-green-500;
+}
+
+.c-mutation-list__item-amount--negative {
+    @apply text-red-500;
+}
+
+.c-mutation-list__item-status {
+    @apply rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase;
+}
+
+.c-mutation-list__item-status--pending {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+}
+
+.c-mutation-list__item-status--approved {
+    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+}
+
+.c-mutation-list__item-status--rejected {
+    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
+}
+
+.c-mutation-list__item-time {
+    @apply text-xs text-gray-500;
+}
+
+.c-mutation-list__item-desc {
+    @apply mt-3 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-mutation-list__media-list {
+    @apply mt-3 flex flex-wrap gap-2;
+}
+
+.c-mutation-list__media-item {
+    @apply max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
+}
+
+.c-mutation-list__media-img {
+    @apply h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
+}
+
+.c-mutation-list__media-video-wrapper {
+    @apply relative cursor-pointer transition-opacity hover:opacity-90;
+}
+
+.c-mutation-list__media-video {
+    @apply h-auto max-h-[150px] w-full;
+}
+
+.c-mutation-list__media-video-overlay {
+    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
+}
+
+.c-mutation-list__actions {
+    @apply mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700;
+}
+
+.c-mutation-list__approve-btn {
+    @apply inline-flex cursor-pointer items-center rounded bg-green-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-green-500;
+}
+
+.c-mutation-list__reject-btn {
+    @apply inline-flex cursor-pointer items-center rounded bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500;
+}
+
+.c-mutation-list__empty {
+    @apply mt-4 text-gray-500;
+}
+</style>

resources/js/components/ParticipantsList.vue

@@ -8,18 +8,38 @@ defineProps<{
 </script>
 
 <template>
-    <div class="mt-8">
+    <div class="c-participants-list">
-        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        <h4 class="c-participants-list__title">
             Participants
         </h4>
-        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <ul class="c-participants-list__grid">
             <li
                 v-for="participant in participants"
                 :key="participant.id"
-                class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
+                class="c-participants-list__item"
             >
                 {{ participant.name }}
             </li>
         </ul>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-participants-list {
+    @apply mt-8;
+}
+
+.c-participants-list__title {
+    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
+}
+
+.c-participants-list__grid {
+    @apply mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+}
+
+.c-participants-list__item {
+    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+</style>

resources/js/pages/Dynamics/Create.vue

@@ -26,60 +26,58 @@ function submit() {
 <template>
     <Head title="Create Dynamic" />
 
-    <div class="py-12">
+    <div class="c-dynamics-create">
-        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+        <div class="c-dynamics-create__container">
-            <div
+            <div class="c-dynamics-create__card">
-                class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+                <div class="c-dynamics-create__body">
-            >
+                    <h3 class="c-dynamics-create__title">Create a New Dynamic</h3>
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    <h3 class="text-lg font-medium">Create a New Dynamic</h3>
 
-                    <form @submit.prevent="submit" class="mt-6 space-y-6">
+                    <form @submit.prevent="submit" class="c-dynamics-create__form">
-                        <div>
+                        <div class="c-dynamics-create__field">
                             <label
                                 for="name"
-                                class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                                class="c-dynamics-create__label"
                                 >Name</label
                             >
                             <input
                                 v-model="form.name"
                                 id="name"
                                 type="text"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                                class="c-dynamics-create__input"
                             />
                             <div
                                 v-if="form.errors.name"
-                                class="text-sm text-red-600"
+                                class="c-dynamics-create__error"
                             >
                                 {{ form.errors.name }}
                             </div>
                         </div>
 
-                        <div>
+                        <div class="c-dynamics-create__field">
                             <label
                                 for="rules"
-                                class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                                class="c-dynamics-create__label"
                                 >Rules</label
                             >
                             <textarea
                                 v-model="form.rules"
                                 id="rules"
                                 rows="4"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                                class="c-dynamics-create__textarea"
                             ></textarea>
                             <div
                                 v-if="form.errors.rules"
-                                class="text-sm text-red-600"
+                                class="c-dynamics-create__error"
                             >
                                 {{ form.errors.rules }}
                             </div>
                         </div>
 
-                        <div class="flex items-center gap-4">
+                        <div class="c-dynamics-create__actions">
                             <button
                                 type="submit"
                                 :disabled="form.processing"
-                                class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                                class="c-dynamics-create__submit-btn"
                             >
                                 Create
                             </button>
@@ -90,3 +88,59 @@ function submit() {
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-dynamics-create {
+    @apply py-12;
+}
+
+.c-dynamics-create__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-dynamics-create__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-dynamics-create__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-dynamics-create__title {
+    @apply text-lg font-medium;
+}
+
+.c-dynamics-create__form {
+    @apply mt-6 space-y-6;
+}
+
+.c-dynamics-create__field {
+    @apply block;
+}
+
+.c-dynamics-create__label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+.c-dynamics-create__input {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-dynamics-create__textarea {
+    @apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-dynamics-create__error {
+    @apply text-sm text-red-600;
+}
+
+.c-dynamics-create__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-dynamics-create__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
+}
+</style>

resources/js/pages/Dynamics/Index.vue

@@ -17,17 +17,15 @@ const breadcrumbs = [
 <template>
     <Head title="Dynamics" />
 
-    <div class="py-12">
+    <div class="c-dynamics-index">
-        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+        <div class="c-dynamics-index__container">
-            <div
+            <div class="c-dynamics-index__card">
-                class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+                <div class="c-dynamics-index__body">
-            >
+                    <div class="c-dynamics-index__header">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <h3 class="c-dynamics-index__title">Your Dynamics</h3>
-                    <div class="mb-6 flex items-center justify-between">
-                        <h3 class="text-lg font-medium">Your Dynamics</h3>
                         <Link
                             :href="route('dynamics.create')"
-                            class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                            class="c-dynamics-index__button"
                         >
                             Create Dynamic
                         </Link>
@@ -35,30 +33,80 @@ const breadcrumbs = [
 
                     <div
                         v-if="dynamics.length > 0"
-                        class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
+                        class="c-dynamics-index__grid"
                     >
                         <div
                             v-for="dynamic in dynamics"
                             :key="dynamic.id"
-                            class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
+                            class="c-dynamics-index__item"
                         >
                             <Link :href="route('dynamics.show', dynamic.id)">
-                                <h4 class="text-lg font-semibold">
+                                <h4 class="c-dynamics-index__item-title">
                                     {{ dynamic.name }}
                                 </h4>
                             </Link>
-                            <p
+                            <p class="c-dynamics-index__item-desc">
-                                class="mt-2 text-sm text-gray-600 dark:text-gray-400"
-                            >
                                 {{ dynamic.rules }}
                             </p>
                         </div>
                     </div>
                     <div v-else>
-                        <p>You don't have any dynamics yet.</p>
+                        <p class="c-dynamics-index__empty">You don't have any dynamics yet.</p>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-dynamics-index {
+    @apply py-12;
+}
+
+.c-dynamics-index__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-dynamics-index__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-dynamics-index__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-dynamics-index__header {
+    @apply mb-6 flex items-center justify-between;
+}
+
+.c-dynamics-index__title {
+    @apply text-lg font-medium;
+}
+
+.c-dynamics-index__button {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
+}
+
+.c-dynamics-index__grid {
+    @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+}
+
+.c-dynamics-index__item {
+    @apply border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700;
+}
+
+.c-dynamics-index__item-title {
+    @apply text-lg font-semibold;
+}
+
+.c-dynamics-index__item-desc {
+    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-dynamics-index__empty {
+    @apply text-gray-500 dark:text-gray-400;
+}
+</style>

resources/js/pages/Dynamics/Show.vue

@@ -37,14 +37,12 @@ const breadcrumbs = [
 <template>
     <Head :title="dynamic.name" />
 
-    <div class="py-12">
+    <div class="c-dynamic-show">
-        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+        <div class="c-dynamic-show__container">
-            <div
+            <div class="c-dynamic-show__card">
-                class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+                <div class="c-dynamic-show__body">
-            >
+                    <h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
-                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    <p class="c-dynamic-show__rules">
-                    <h3 class="text-lg font-medium">{{ dynamic.name }}</h3>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                         {{ dynamic.rules }}
                     </p>
                 </div>
@@ -64,3 +62,31 @@ const breadcrumbs = [
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-dynamic-show {
+    @apply py-12;
+}
+
+.c-dynamic-show__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-dynamic-show__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-dynamic-show__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-dynamic-show__title {
+    @apply text-lg font-medium;
+}
+
+.c-dynamic-show__rules {
+    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+}
+</style>

resources/js/pages/Ledgers/Show.vue

@@ -147,66 +147,60 @@ function isOwnerUser(userId: number): boolean {
     <Head :title="ledger.name" />
 
     <!-- Floating Toast Notifications -->
-    <div
+    <div class="c-ledger-show__toast-container">
-        class="pointer-events-none fixed top-6 right-6 z-50 flex max-w-sm flex-col gap-3"
-    >
         <div
             v-for="toast in toasts"
             :key="toast.id"
-            class="pointer-events-auto flex items-center justify-between gap-4 rounded-lg border border-neutral-700/50 bg-neutral-900 px-4 py-3 text-sm text-white shadow-xl"
+            class="c-ledger-show__toast-item"
         >
             <span>{{ toast.message }}</span>
             <button
                 @click="toasts = toasts.filter((t) => t.id !== toast.id)"
-                class="cursor-pointer text-neutral-400 hover:text-white"
+                class="c-ledger-show__toast-close-btn"
             >
                 ✕
             </button>
         </div>
     </div>
 
-    <div class="py-12">
+    <div class="c-ledger-show">
-        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+        <div class="c-ledger-show__container">
-            <div
+            <div class="c-ledger-show__card">
-                class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+                <div class="c-ledger-show__body">
-            >
+                    <h3 class="c-ledger-show__title">{{ ledger.name }}</h3>
-                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    <p class="c-ledger-show__score">
-                    <h3 class="text-lg font-medium">{{ ledger.name }}</h3>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                         Score: {{ ledger.score }}
                     </p>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                    <p class="c-ledger-show__rules">
                         {{ ledger.rules }}
                     </p>
 
                     <!-- Ledger Descriptive Media -->
                     <div
                         v-if="ledger.media && ledger.media.length > 0"
-                        class="mt-4 flex flex-wrap gap-3"
+                        class="c-ledger-show__media-list"
                     >
                         <div
                             v-for="item in ledger.media"
                             :key="item.id"
-                            class="max-w-[320px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700"
+                            class="c-ledger-show__media-item"
                         >
                             <img
                                 v-if="item.mime_type.startsWith('image/')"
                                 :src="item.url"
-                                class="h-auto max-h-[200px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
+                                class="c-ledger-show__media-img"
                                 @click="openLightbox(item.url, item.mime_type)"
                             />
                             <div
                                 v-else-if="item.mime_type.startsWith('video/')"
-                                class="relative cursor-pointer transition-opacity hover:opacity-90"
+                                class="c-ledger-show__media-video-wrapper"
                                 @click="openLightbox(item.url, item.mime_type)"
                             >
                                 <video
                                     :src="item.url"
-                                    class="h-auto max-h-[200px] w-full"
+                                    class="c-ledger-show__media-video"
                                 ></video>
-                                <div
+                                <div class="c-ledger-show__media-video-overlay">
-                                    class="absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white"
-                                >
                                     ▶
                                 </div>
                             </div>
@@ -233,28 +227,116 @@ function isOwnerUser(userId: number): boolean {
     <!-- Lightbox Modal -->
     <div
         v-if="activeLightboxUrl"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 p-4"
+        class="c-ledger-show__lightbox"
         @click="closeLightbox"
     >
         <button
             @click="closeLightbox"
-            class="absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200 hover:text-red-500"
+            class="c-ledger-show__lightbox-close"
         >
             ✕
         </button>
-        <div class="max-h-full max-w-full" @click.stop>
+        <div class="c-ledger-show__lightbox-content" @click.stop>
             <img
                 v-if="activeLightboxType === 'image'"
                 :src="activeLightboxUrl"
-                class="max-h-[90vh] max-w-full rounded object-contain shadow-lg"
+                class="c-ledger-show__lightbox-img"
             />
             <video
                 v-else-if="activeLightboxType === 'video'"
                 :src="activeLightboxUrl"
                 controls
                 autoplay
-                class="max-h-[90vh] max-w-full rounded shadow-lg"
+                class="c-ledger-show__lightbox-video"
             ></video>
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-ledger-show__toast-container {
+    @apply pointer-events-none fixed top-6 right-6 z-50 flex max-w-sm flex-col gap-3;
+}
+
+.c-ledger-show__toast-item {
+    @apply pointer-events-auto flex items-center justify-between gap-4 rounded-lg border border-neutral-700/50 bg-neutral-900 px-4 py-3 text-sm text-white shadow-xl;
+}
+
+.c-ledger-show__toast-close-btn {
+    @apply cursor-pointer text-neutral-400 hover:text-white;
+}
+
+.c-ledger-show {
+    @apply py-12;
+}
+
+.c-ledger-show__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-ledger-show__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-ledger-show__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-ledger-show__title {
+    @apply text-lg font-medium;
+}
+
+.c-ledger-show__score {
+    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-ledger-show__rules {
+    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-ledger-show__media-list {
+    @apply mt-4 flex flex-wrap gap-3;
+}
+
+.c-ledger-show__media-item {
+    @apply max-w-[320px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
+}
+
+.c-ledger-show__media-img {
+    @apply h-auto max-h-[200px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
+}
+
+.c-ledger-show__media-video-wrapper {
+    @apply relative cursor-pointer transition-opacity hover:opacity-90;
+}
+
+.c-ledger-show__media-video {
+    @apply h-auto max-h-[200px] w-full;
+}
+
+.c-ledger-show__media-video-overlay {
+    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
+}
+
+.c-ledger-show__lightbox {
+    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/95 p-4;
+}
+
+.c-ledger-show__lightbox-close {
+    @apply absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200 hover:text-red-500;
+}
+
+.c-ledger-show__lightbox-content {
+    @apply max-h-full max-w-full;
+}
+
+.c-ledger-show__lightbox-img {
+    @apply max-h-[90vh] max-w-full rounded object-contain shadow-lg;
+}
+
+.c-ledger-show__lightbox-video {
+    @apply max-h-[90vh] max-w-full rounded shadow-lg;
+}
+</style>