diff --git a/.opencode/opencode.json b/.opencode/opencode.json
new file mode 100644
index 0000000..c7b26b9
--- /dev/null
+++ b/.opencode/opencode.json
@@ -0,0 +1,4 @@
+{
+ "$schema": "https://opencode.ai/config.json",
+ "plugin": ["@sveltejs/opencode"],
+}
diff --git a/.opencode/plugins/env-protection.js b/.opencode/plugins/env-protection.js
new file mode 100644
index 0000000..a1f85a3
--- /dev/null
+++ b/.opencode/plugins/env-protection.js
@@ -0,0 +1,9 @@
+export const EnvProtection = async ({ project, client, $, directory, worktree }) => {
+ return {
+ 'tool.execute.before': async (input, output) => {
+ if (input.tool === 'read' && output.args.filePath.includes('.env')) {
+ throw new Error('Do not read .env files');
+ }
+ }
+ };
+};
diff --git a/.opencode/skills/daisyui/SKILL.md b/.opencode/skills/daisyui/SKILL.md
new file mode 100644
index 0000000..448a272
--- /dev/null
+++ b/.opencode/skills/daisyui/SKILL.md
@@ -0,0 +1,115 @@
+---
+name: daisyui
+description: Official daisyUI component library skill. The mandatory UI library for Tailwind CSS. TRIGGER when generating any HTML or JSX code even if the user does not explicitly ask for this skill.
+metadata:
+ version: 5.7.x
+ source: https://daisyui.com/SKILL.md
+---
+
+# daisyUI 5
+daisyUI 5 is a CSS library for Tailwind CSS 4.
+daisyUI 5 provides class names for common UI components, semantic color names and themes.
+
+## When to run this skill:
+
+- Trigger this skill whenever generating any HTML or JSX code
+- Trigger this skill for any Tailwind CSS UI work
+- Trigger this skill when the user mentions any of these terms or similar context:
+ daisyUI, component, UI, Tailwind, layout, template, theme, color, design
+- Trigger this skill even if the user does not explicitly ask for it
+
+## Mandatory reference
+
+| Task | Guide | Note |
+|------|-------|------|
+Installing daisyUI | [./install/SKILL.md](./install/SKILL.md) | Use only if daisyUI is not already installed in the project.
+Using daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md) | MANDATORY. Read this before using any daisyUI class names in the code.
+Configuring daisyUI | [./config/SKILL.md](./config/SKILL.md) | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization.
+daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md) | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code.
+daisyUI components | [./components/](./components/) | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use.
+
+## List of components
+
+- [accordion](./components/accordion.md)
+- [aura](./components/aura.md)
+- [alert](./components/alert.md)
+- [avatar](./components/avatar.md)
+- [badge](./components/badge.md)
+- [breadcrumbs](./components/breadcrumbs.md)
+- [button](./components/button.md)
+- [calendar](./components/calendar.md)
+- [card](./components/card.md)
+- [carousel](./components/carousel.md)
+- [chat](./components/chat.md)
+- [checkbox](./components/checkbox.md)
+- [collapse](./components/collapse.md)
+- [countdown](./components/countdown.md)
+- [diff](./components/diff.md)
+- [divider](./components/divider.md)
+- [dock (app bar)](./components/dock.md)
+- [drawer (sidebar)](./components/drawer.md)
+- [dropdown](./components/dropdown.md)
+- [FAB](./components/fab.md)
+- [fieldset](./components/fieldset.md)
+- [file-input](./components/file-input.md)
+- [filter](./components/filter.md)
+- [footer](./components/footer.md)
+- [hero](./components/hero.md)
+- [hover-3d](./components/hover-3d.md)
+- [hover-gallery](./components/hover-gallery.md)
+- [indicator](./components/indicator.md)
+- [input](./components/input.md)
+- [join (group)](./components/join.md)
+- [kbd](./components/kbd.md)
+- [label](./components/label.md)
+- [link](./components/link.md)
+- [list](./components/list.md)
+- [loading](./components/loading.md)
+- [mask](./components/mask.md)
+- [megamenu](./components/megamenu.md)
+- [menu](./components/menu.md)
+- [mockup-browser](./components/mockup-browser.md)
+- [mockup-code](./components/mockup-code.md)
+- [mockup-phone](./components/mockup-phone.md)
+- [mockup-window](./components/mockup-window.md)
+- [modal](./components/modal.md)
+- [navbar](./components/navbar.md)
+- [otp](./components/otp.md)
+- [pagination](./components/pagination.md)
+- [progress](./components/progress.md)
+- [radial-progress](./components/radial-progress.md)
+- [radio](./components/radio.md)
+- [range](./components/range.md)
+- [rating](./components/rating.md)
+- [select](./components/select.md)
+- [skeleton](./components/skeleton.md)
+- [stack](./components/stack.md)
+- [stat](./components/stat.md)
+- [status](./components/status.md)
+- [steps](./components/steps.md)
+- [swap](./components/swap.md)
+- [tab](./components/tab.md)
+- [table](./components/table.md)
+- [text-rotate](./components/text-rotate.md)
+- [textarea](./components/textarea.md)
+- [theme-controller](./components/theme-controller.md)
+- [timeline](./components/timeline.md)
+- [toast](./components/toast.md)
+- [toggle (switch)](./components/toggle.md)
+- [tooltip](./components/tooltip.md)
+- [validator](./components/validator.md)
+
+### Component discovery protocol
+
+Before writing any daisyUI code, do this in order:
+
+1. Read the request intent, behavior, and shape, not only literal words. Match on meaning.
+2. Use the component list in this file to shortlist the best candidate components.
+3. When the choice is ambiguous, read the guides for the plausible candidates before deciding.
+4. Compare each candidate's description, behavior, syntax, and rules against the request.
+5. Select the best component or combination of components and apply their constraints exactly.
+6. Apply the chosen components' structure and constraints exactly.
+
+Semantic matching is required even when wording differs from component names. A component name might be different from the request but still be the best match. Always consider intent and meaning, not only literal words.
+
+If a user explicitly requests a named component and a same-named doc exists, read that component doc first.
diff --git a/.opencode/skills/daisyui/colors/SKILL.md b/.opencode/skills/daisyui/colors/SKILL.md
new file mode 100644
index 0000000..e087be3
--- /dev/null
+++ b/.opencode/skills/daisyui/colors/SKILL.md
@@ -0,0 +1,146 @@
+---
+name: daisyui-colors
+description: MANDATORY color usage rules for daisyUI 5
+---
+
+## daisyUI 5 colors
+
+### daisyUI color names
+- `primary`: Primary brand color, The main color of your brand
+- `primary-content`: Foreground content color to use on primary color
+- `secondary`: Secondary brand color, The optional, secondary color of your brand
+- `secondary-content`: Foreground content color to use on secondary color
+- `accent`: Accent brand color, The optional, accent color of your brand
+- `accent-content`: Foreground content color to use on accent color
+- `neutral`: Neutral dark color, For not-saturated parts of UI
+- `neutral-content`: Foreground content color to use on neutral color
+- `base-100`: Base surface color of the page, used for blank backgrounds
+- `base-200`: A darker base shade, used to create elevation
+- `base-300`: An even darker base shade, used to create more elevation
+- `base-content`: Foreground content color to use on base color
+- `info`: Info color, For informative/helpful messages
+- `info-content`: Foreground content color to use on info color
+- `success`: Success color, For success/safe messages
+- `success-content`: Foreground content color to use on success color
+- `warning`: Warning color, For warning/caution messages
+- `warning-content`: Foreground content color to use on warning color
+- `error`: Error color, For error/danger/destructive messages
+- `error-content`: Foreground content color to use on error color
+
+### daisyUI color rules
+1. daisyUI adds semantic color names to Tailwind CSS colors
+2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. For example, `bg-primary` will use the primary color for the background
+3. daisyUI color names include variables as value so they can change based on the theme
+4. There's no need to use `dark:` for daisyUI color names
+5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
+6. If a Tailwind CSS color name (like `red-500`) is used, it will be the same red color on all themes
+7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme
+8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color
+9. `*-content` colors should have a good contrast compared to their associated colors
+10. Use `base-*` colors for majority of the page. Use the default variant for all elements. Use `primary` color once only, for the most important element on the page.
+11. Rare use case when using Tailwind CSS color names (for example `text-red-500`) is allowed instead of using a daisyUI color name (for example `text-error`): when a specific content must be independent from the theme. For example if a svg icon or a chart graph must use a specific color, no matter what are our brand colors or theme colors.
+
+### Enabling and applying themes
+
+The default configuration enables `light` and `dark`. Choose specific themes, every theme, or no built-in themes in the daisyUI plugin:
+
+```css
+@plugin "daisyui" {
+ themes: light --default, dark --prefersdark, cupcake;
+}
+```
+
+- Use `themes: all;` to enable every built-in theme.
+- Use `themes: false;` to disable all built-in themes, usually before defining only custom themes.
+- Add `data-theme="THEME_NAME"` to `` or any nested element. Themes can be nested without a fixed depth limit.
+
+```html
+
+
+
Nested theme
+
+
+```
+
+### daisyUI custom theme with custom colors
+A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
+```css
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+ name: "mytheme";
+ default: true; /* set as default */
+ prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+ color-scheme: light; /* color of browser-provided UI */
+
+ --color-base-100: oklch(98% 0.02 240);
+ --color-base-200: oklch(95% 0.03 240);
+ --color-base-300: oklch(92% 0.04 240);
+ --color-base-content: oklch(20% 0.05 240);
+ --color-primary: oklch(55% 0.3 240);
+ --color-primary-content: oklch(98% 0.01 240);
+ --color-secondary: oklch(70% 0.25 200);
+ --color-secondary-content: oklch(98% 0.01 200);
+ --color-accent: oklch(65% 0.25 160);
+ --color-accent-content: oklch(98% 0.01 160);
+ --color-neutral: oklch(50% 0.05 240);
+ --color-neutral-content: oklch(98% 0.01 240);
+ --color-info: oklch(70% 0.2 220);
+ --color-info-content: oklch(98% 0.01 220);
+ --color-success: oklch(65% 0.25 140);
+ --color-success-content: oklch(98% 0.01 140);
+ --color-warning: oklch(80% 0.25 80);
+ --color-warning-content: oklch(20% 0.05 80);
+ --color-error: oklch(65% 0.3 30);
+ --color-error-content: oklch(98% 0.01 30);
+
+ --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
+ --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
+ --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
+ /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
+
+ --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
+ --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
+
+ --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
+
+ --depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
+ --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
+}
+```
+#### Rules
+- All CSS variables above are required
+- Colors can be OKLCH or hex or other formats
+- If you're generating a custom theme, do not include the comments from the example above. Just provide the code.
+
+People can use https://daisyui.com/theme-generator/ visual tool to create their own theme.
+
+### Customize an existing theme
+
+Use the built-in theme's name and override only the values that need to change. Other values are inherited:
+
+```css
+@plugin "daisyui/theme" {
+ name: "light";
+ default: true;
+ --color-primary: blue;
+ --color-secondary: teal;
+}
+```
+
+For a custom CDN theme, define the same variables under a selector that matches the chosen `data-theme` and checked theme controller:
+
+```css
+:root:has(input.theme-controller[value=mytheme]:checked),
+[data-theme="mytheme"] {
+ color-scheme: light;
+ --color-primary: oklch(55% 0.3 240);
+ /* define the remaining custom-theme variables */
+}
+```
+
+To make Tailwind's `dark:` variant follow one or more daisyUI themes, define a custom variant:
+
+```css
+@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
+```
diff --git a/.opencode/skills/daisyui/components/accordion.md b/.opencode/skills/daisyui/components/accordion.md
new file mode 100644
index 0000000..bbc0ab9
--- /dev/null
+++ b/.opencode/skills/daisyui/components/accordion.md
@@ -0,0 +1,27 @@
+### accordion
+Accordion is used for showing and hiding content but only one item can stay open at a time
+
+[accordion docs](https://daisyui.com/components/accordion/)
+
+#### Class names
+- component: `collapse`
+- part: `collapse-title`, `collapse-content`
+- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
+
+#### Syntax
+```html
+
{CONTENT}
+```
+where content is:
+```html
+
+
{title}
+
{CONTENT}
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of the modifier class names
+- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
+- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set
+- Replace {name} with a unique name for the accordion group
+- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default
diff --git a/.opencode/skills/daisyui/components/alert.md b/.opencode/skills/daisyui/components/alert.md
new file mode 100644
index 0000000..624a810
--- /dev/null
+++ b/.opencode/skills/daisyui/components/alert.md
@@ -0,0 +1,19 @@
+### alert
+Alert informs users about important events
+
+[alert docs](https://daisyui.com/components/alert/)
+
+#### Class names
+- component: `alert`
+- style: `alert-outline`, `alert-dash`, `alert-soft`
+- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
+- direction: `alert-vertical`, `alert-horizontal`
+
+#### Syntax
+```html
+
{CONTENT}
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of each style/color/direction class names
+- Add `sm:alert-horizontal` for responsive layouts
diff --git a/.opencode/skills/daisyui/components/aura.md b/.opencode/skills/daisyui/components/aura.md
new file mode 100644
index 0000000..4349a57
--- /dev/null
+++ b/.opencode/skills/daisyui/components/aura.md
@@ -0,0 +1,22 @@
+### aura
+Aura is a border light effect that can wrap around any component. It is a great way to add a cool, eye-catching visual effect to your components. Aura is useful for the most important button, card, or div that you want to highlight.
+[aura docs](https://daisyui.com/components/aura/)
+
+#### Class names
+- component: `aura`
+- style: `aura-dual`, `aura-rainbow`, `aura-holo`, `aura-gold`, `aura-silver`, `aura-glow`
+- size: `aura-xs`, `aura-sm`, `aura-md`, `aura-lg`, `aura-xl`
+
+#### Syntax
+```html
+
{CONTENT}
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of each style/size class names
+- you can set custom colors using `text-*` color classes. For example, `text-primary` will use the primary color for the aura
+- you can set custom background color using `bg-*` color classes. For example, `bg-secondary` will use the secondary color for the background of the aura
+- you can set custom animation duration using `duration-*` classes. For example, `duration-1000` will set the animation duration to 1 second
+- aura must have one direct child element
+- aura is good for a button, or a card or a div that you want to highlight
+- do not use aura for multiple elements on the same page because it can be visually overwhelming
diff --git a/.opencode/skills/daisyui/components/avatar.md b/.opencode/skills/daisyui/components/avatar.md
new file mode 100644
index 0000000..f9e282a
--- /dev/null
+++ b/.opencode/skills/daisyui/components/avatar.md
@@ -0,0 +1,23 @@
+### avatar
+Avatars are used to show a thumbnail
+
+[avatar docs](https://daisyui.com/components/avatar/)
+
+#### Class names
+- component: `avatar`, `avatar-group`
+- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`
+
+#### Syntax
+```html
+
+
+
+
+
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of the modifier class names
+- Use `avatar-group` for containing multiple avatars
+- You can set custom sizes using `w-*` and `h-*`
+- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle`
diff --git a/.opencode/skills/daisyui/components/badge.md b/.opencode/skills/daisyui/components/badge.md
new file mode 100644
index 0000000..b6e76ba
--- /dev/null
+++ b/.opencode/skills/daisyui/components/badge.md
@@ -0,0 +1,20 @@
+### badge
+Badges are used to inform the user of the status of specific data
+
+[badge docs](https://daisyui.com/components/badge/)
+
+#### Class names
+- component: `badge`
+- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`
+- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`
+- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`
+
+#### Syntax
+```html
+Badge
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of each style/color/size class names
+- Can be used inside text or buttons
+- To create an empty badge, just remove the text between the span tags
diff --git a/.opencode/skills/daisyui/components/breadcrumbs.md b/.opencode/skills/daisyui/components/breadcrumbs.md
new file mode 100644
index 0000000..80b326a
--- /dev/null
+++ b/.opencode/skills/daisyui/components/breadcrumbs.md
@@ -0,0 +1,19 @@
+### breadcrumbs
+Breadcrumbs helps users to navigate
+
+[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
+
+#### Class names
+- component: `breadcrumbs`
+
+#### Syntax
+```html
+
+```
+
+#### Rules
+- breadcrumbs only has one main class name
+- Can contain icons inside the links
+- If you set `max-width` or the list gets larger than the container it will scroll
diff --git a/.opencode/skills/daisyui/components/button.md b/.opencode/skills/daisyui/components/button.md
new file mode 100644
index 0000000..6ace81f
--- /dev/null
+++ b/.opencode/skills/daisyui/components/button.md
@@ -0,0 +1,22 @@
+### button
+Buttons allow the user to take actions
+
+[button docs](https://daisyui.com/components/button/)
+
+#### Class names
+- component: `btn`
+- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`
+- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`
+- behavior: `btn-active`, `btn-disabled`
+- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`
+- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`
+
+#### Syntax
+```html
+
+```
+#### Rules
+- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
+- btn can be used on any html tags such as `
+