@oasisomniverse/vue 1.0.0

package/src/components/Eggs/SearchEggs.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; rarity: string }] }>()
+const form = ref({ query: '', rarity: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Eggs</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Egg Name</label><input class="p-input" v-model="form.query" placeholder="Search eggs..." /></div>
+      <div class="p-row">
+        <label class="p-label">Rarity</label>
+        <select class="p-input" v-model="form.rarity">
+          <option>All</option><option>Common</option><option>Rare</option><option>Epic</option><option>Legendary</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Search</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer}
+</style>

package/src/components/Eggs/ViewEggs.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{ name?: string; rarity?: string; hatchProgress?: number; reward?: string }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">{{ (hatchProgress ?? 0) >= 100 ? '🐣' : '🥚' }}</div>
+    <h2 class="p-title">{{ name ?? 'Cosmic Egg' }}</h2>
+    <div class="p-badge" :class="`p-badge--${(rarity ?? 'common').toLowerCase()}`">{{ rarity ?? 'Common' }}</div>
+    <div class="p-progress-wrap" v-if="(hatchProgress ?? 0) < 100">
+      <div class="p-progress-bar"><div class="p-progress-fill" :style="{ width: (hatchProgress ?? 0) + '%' }"></div></div>
+      <span class="p-pct">{{ hatchProgress ?? 0 }}% incubated</span>
+    </div>
+    <p class="p-reward" v-if="(hatchProgress ?? 0) >= 100">✨ {{ reward ?? 'Mystery Companion' }}</p>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:64px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 12px;border:1px solid currentColor}.p-badge--common{color:#7a9bbf}.p-badge--rare{color:#5ba8ff}.p-badge--epic{color:#b87fff}.p-badge--legendary{color:#ffb43c}.p-progress-wrap{width:200px;display:flex;flex-direction:column;gap:6px;align-items:center}.p-progress-bar{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}.p-progress-fill{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px}.p-pct{font-size:12px;color:#7a9bbf}.p-reward{font-size:14px;color:#ffb43c;font-weight:600}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/ForgotPassword/ForgotPassword.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useOasis } from '../../../composables/useOasis'
+
+const emit = defineEmits<{ switchTo: [view: 'login'] }>()
+
+const { forgotPassword } = useOasis()
+
+const email = ref('')
+const loading = ref(false)
+const error = ref('')
+const sent = ref(false)
+
+async function submit() {
+  if (!email.value) { error.value = 'Please enter your email address.'; return }
+  loading.value = true
+  error.value = ''
+  try {
+    await forgotPassword(email.value)
+    sent.value = true
+  } catch (e: any) {
+    error.value = e?.message ?? 'Request failed. Please try again.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="oasis-auth-form">
+    <div class="oasis-auth-header">
+      <h2 class="oasis-auth-title">Forgot Password?</h2>
+      <p class="oasis-auth-sub">Enter your email and we'll send a reset link if the account exists.</p>
+    </div>
+
+    <div v-if="error" class="oasis-auth-error">{{ error }}</div>
+
+    <template v-if="!sent">
+      <div class="oasis-field">
+        <label class="oasis-label" for="fp-email">Email</label>
+        <input class="oasis-input" id="fp-email" type="email" v-model="email" placeholder="name@example.com" autocomplete="email" />
+      </div>
+      <button class="oasis-btn" type="button" :disabled="loading" @click="submit">
+        {{ loading ? 'Sending…' : 'Send Reset Link' }}
+      </button>
+    </template>
+
+    <div v-else class="oasis-auth-success">
+      ✅ Reset link sent! Check your inbox.
+    </div>
+
+    <a class="oasis-link oasis-link--center" href="#" @click.prevent="emit('switchTo', 'login')">← Back to Login</a>
+  </div>
+</template>
+
+<style scoped>
+.oasis-auth-form { display:flex; flex-direction:column; gap:20px; }
+.oasis-auth-header { text-align:center; }
+.oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:20px; color:#fff; margin:0 0 6px; }
+.oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; line-height:1.5; }
+.oasis-auth-error { background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3); color:#ff6b6b; border-radius:8px; padding:10px 14px; font-size:13px; }
+.oasis-auth-success { background:rgba(72,220,130,.12); border:1px solid rgba(72,220,130,.3); color:#48dc82; border-radius:8px; padding:14px; font-size:13px; }
+.oasis-field { display:flex; flex-direction:column; gap:6px; }
+.oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+.oasis-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:8px; padding:10px 14px; color:#fff; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+.oasis-input:focus { border-color:rgba(0,200,255,.5); }
+.oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; font-size:13px; }
+.oasis-link--center { text-align:center; }
+.oasis-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:8px; color:#fff; font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; padding:12px; cursor:pointer; transition:opacity .2s; }
+.oasis-btn:disabled { opacity:.5; cursor:not-allowed; }
+</style>

package/src/components/Game/Game.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Game { id: string; name: string; genre: string; description: string; players: number; karma: number; icon: string; playing: boolean }
+const games = ref<Game[]>([
+  { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
+  { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
+  { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
+  { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
+])
+function toggle(g: Game) { g.playing = !g.playing }
+</script>
+<template>
+  <div class="game-shell">
+    <div class="game-header"><h2 class="game-title">🎮 Games</h2><p class="game-sub">Play games in the OASIS to earn karma and rewards.</p></div>
+    <div class="game-grid">
+      <div v-for="g in games" :key="g.id" class="game-card" :class="{ 'game-card--playing': g.playing }">
+        <div class="game-icon">{{ g.icon }}</div>
+        <div class="game-genre">{{ g.genre }}</div>
+        <div class="game-name">{{ g.name }}</div>
+        <div class="game-desc">{{ g.description }}</div>
+        <div class="game-meta"><div class="game-players">👥 {{ g.players.toLocaleString() }}</div><div class="game-karma">+{{ g.karma }} karma/hr</div></div>
+        <button class="game-btn" :class="{ 'game-btn--stop': g.playing }" @click="toggle(g)">{{ g.playing ? '⏹ Stop' : '▶ Play' }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.game-shell{display:flex;flex-direction:column;gap:18px}.game-header{text-align:center}.game-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.game-sub{font-size:13px;color:#7a9bbf;margin:0}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.game-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}.game-card:hover{border-color:rgba(0,200,255,.3)}.game-card--playing{border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.05)}.game-icon{font-size:40px}.game-genre{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5ba8ff}.game-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}.game-desc{font-size:12px;color:#7a9bbf;line-height:1.5;flex:1}.game-meta{display:flex;justify-content:space-between}.game-players{font-size:11px;color:#7a9bbf}.game-karma{font-size:11px;color:#48dc82;font-weight:600}.game-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px;cursor:pointer;transition:opacity .2s;margin-top:4px}.game-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}
+</style>

package/src/components/Game/SearchProfiles.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; game: string }] }>()
+const form = ref({ query: '', game: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🎮 Search Game Profiles</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Avatar / Player Name</label><input class="p-input" v-model="form.query" placeholder="Search players..." /></div>
+      <div class="p-row">
+        <label class="p-label">Game</label>
+        <select class="p-input" v-model="form.game">
+          <option>All</option><option>Our World</option><option>OASIS Arena</option><option>StarQuest</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Search</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer}
+</style>

package/src/components/Game/ViewAchievements.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const achievements = [
+  { icon: '⭐', name: 'First Steps', desc: 'Complete your first quest', earned: true },
+  { icon: '🏆', name: 'Champion', desc: 'Win 10 tournaments', earned: true },
+  { icon: '🌍', name: 'World Explorer', desc: 'Visit 50 locations in Our World', earned: false },
+  { icon: '💎', name: 'Legendary', desc: 'Reach Karma level 1000', earned: false },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🏆 Achievements</h2>
+    <div class="p-list">
+      <div v-for="a in achievements" :key="a.name" class="p-item" :class="{ 'p-item--locked': !a.earned }">
+        <span class="p-item-icon">{{ a.icon }}</span>
+        <div class="p-item-info"><span class="p-item-name">{{ a.name }}</span><span class="p-item-desc">{{ a.desc }}</span></div>
+        <span class="p-item-status">{{ a.earned ? '✅' : '🔒' }}</span>
+      </div>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:18px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-list{display:flex;flex-direction:column;gap:10px}.p-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px}.p-item--locked{opacity:.5}.p-item-icon{font-size:28px;flex-shrink:0}.p-item-info{display:flex;flex-direction:column;gap:3px;flex:1}.p-item-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-item-desc{font-size:12px;color:#7a9bbf}.p-item-status{font-size:20px}.p-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Game/ViewLeagues.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const leagues = [
+  { name: 'Bronze League', members: 1240, minKarma: 0, icon: '🥉' },
+  { name: 'Silver League', members: 560, minKarma: 500, icon: '🥈' },
+  { name: 'Gold League', members: 210, minKarma: 2000, icon: '🥇' },
+  { name: 'Diamond League', members: 42, minKarma: 10000, icon: '💎' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🏅 Leagues</h2>
+    <div class="p-list">
+      <div v-for="l in leagues" :key="l.name" class="p-item">
+        <span class="p-item-icon">{{ l.icon }}</span>
+        <div class="p-item-info"><span class="p-item-name">{{ l.name }}</span><span class="p-item-desc">{{ l.members }} members · Min Karma {{ l.minKarma }}</span></div>
+        <button class="p-join-btn">Join</button>
+      </div>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:18px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-list{display:flex;flex-direction:column;gap:10px}.p-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px}.p-item-icon{font-size:28px;flex-shrink:0}.p-item-info{display:flex;flex-direction:column;gap:3px;flex:1}.p-item-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-item-desc{font-size:12px;color:#7a9bbf}.p-join-btn{background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.3);border-radius:6px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 14px;cursor:pointer;transition:background .2s}.p-join-btn:hover{background:rgba(0,200,255,.2)}.p-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Game/ViewTournaments.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const tournaments = [
+  { name: 'OASIS Grand Prix', date: '2025-03-01', prize: '5000 KARMA', status: 'Open', icon: '🏁' },
+  { name: 'Quantum Arena Cup', date: '2025-04-15', prize: '2000 SEEDS', status: 'Upcoming', icon: '⚡' },
+  { name: 'Starlight Championship', date: '2025-02-10', prize: '1000 KARMA', status: 'Ended', icon: '⭐' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🏁 Tournaments</h2>
+    <div class="p-list">
+      <div v-for="t in tournaments" :key="t.name" class="p-item">
+        <span class="p-item-icon">{{ t.icon }}</span>
+        <div class="p-item-info">
+          <span class="p-item-name">{{ t.name }}</span>
+          <span class="p-item-desc">{{ t.date }} · Prize: {{ t.prize }}</span>
+        </div>
+        <span class="p-status" :class="`p-status--${t.status.toLowerCase()}`">{{ t.status }}</span>
+      </div>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:18px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-list{display:flex;flex-direction:column;gap:10px}.p-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px}.p-item-icon{font-size:28px;flex-shrink:0}.p-item-info{display:flex;flex-direction:column;gap:3px;flex:1}.p-item-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-item-desc{font-size:12px;color:#7a9bbf}.p-status{font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:4px 10px;border:1px solid currentColor}.p-status--open{color:#00c8ff}.p-status--upcoming{color:#ffb43c}.p-status--ended{color:#5a7a9a}.p-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/HyperDrive/HyperDrive.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const active = ref(false)
+const metrics = [
+  { label: 'Throughput', value: '4.2 TB/s' },
+  { label: 'Latency', value: '0.3ms' },
+  { label: 'Uptime', value: '99.98%' },
+]
+const nodes = [
+  { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
+  { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
+  { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
+]
+</script>
+<template>
+  <div class="hd-shell">
+    <div class="hd-header"><h2 class="hd-title">🚀 HyperDrive</h2><p class="hd-sub">Quantum-speed data layer for the OASIS Omniverse.</p></div>
+    <div class="hd-status-card" :class="{ 'hd-status-card--active': active }">
+      <div class="hd-status-icon">{{ active ? '⚡' : '💤' }}</div>
+      <div class="hd-status-info">
+        <div class="hd-status-label">HyperDrive Status</div>
+        <div class="hd-status-val" :class="{ 'hd-status-val--on': active }">{{ active ? 'ACTIVE' : 'OFFLINE' }}</div>
+      </div>
+      <button class="hd-toggle-btn" :class="{ 'hd-toggle-btn--on': active }" @click="active = !active">{{ active ? 'Disengage' : 'Engage' }}</button>
+    </div>
+    <template v-if="active">
+      <div class="hd-metrics">
+        <div v-for="m in metrics" :key="m.label" class="hd-metric-card">
+          <div class="hd-metric-val">{{ m.value }}</div>
+          <div class="hd-metric-label">{{ m.label }}</div>
+        </div>
+      </div>
+      <div class="hd-nodes-header">Connected Nodes</div>
+      <div class="hd-nodes">
+        <div v-for="n in nodes" :key="n.id" class="hd-node">
+          <div class="hd-node-dot" :class="`hd-node-dot--${n.status}`"></div>
+          <div class="hd-node-name">{{ n.name }}</div>
+          <div class="hd-node-latency">{{ n.latency }}ms</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<style scoped>
+.hd-shell{display:flex;flex-direction:column;gap:18px}.hd-header{text-align:center}.hd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.hd-sub{font-size:13px;color:#7a9bbf;margin:0}.hd-status-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}.hd-status-card--active{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.05)}.hd-status-icon{font-size:28px}.hd-status-info{flex:1}.hd-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}.hd-status-val{font-family:'Orbitron',sans-serif;font-size:16px;color:#7a9bbf;margin-top:2px}.hd-status-val--on{color:#00c8ff}.hd-toggle-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 20px;cursor:pointer}.hd-toggle-btn--on{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}.hd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hd-metric-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.hd-metric-val{font-family:'Share Tech Mono',monospace;font-size:20px;color:#00c8ff;font-weight:600}.hd-metric-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.hd-nodes{display:flex;flex-direction:column;gap:8px}.hd-nodes-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.hd-node{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}.hd-node-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.hd-node-dot--active{background:#48dc82;box-shadow:0 0 6px #48dc82}.hd-node-dot--idle{background:#7a9bbf}.hd-node-name{flex:1;font-size:13px;color:#e0f0ff}.hd-node-latency{font-family:'Share Tech Mono',monospace;font-size:12px;color:#7a9bbf}
+</style>

package/src/components/Karma/SearchKarma.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ username: string; provider: string }] }>()
+const form = ref({ username: '', provider: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">⭐ Search Karma</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Avatar Username</label><input class="p-input" v-model="form.username" placeholder="Search by username" /></div>
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>All</option><option>Holochain</option><option>Ethereum</option><option>IPFS</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Search</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer}
+</style>

package/src/components/Karma/ViewAvatarKarma.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{ username?: string; karma?: number; level?: string; positive?: number; negative?: number }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">⭐</div>
+    <h2 class="p-title">{{ username ?? 'Avatar' }} Karma</h2>
+    <div class="p-stats">
+      <div class="p-stat p-stat--main"><span class="p-stat-label">Total Karma</span><span class="p-stat-value p-stat-value--gold">{{ karma ?? 0 }}</span></div>
+      <div class="p-stat"><span class="p-stat-label">Level</span><span class="p-stat-value">{{ level ?? 'Initiate' }}</span></div>
+      <div class="p-stat"><span class="p-stat-label">Positive</span><span class="p-stat-value p-stat-value--pos">+{{ positive ?? 0 }}</span></div>
+      <div class="p-stat"><span class="p-stat-label">Negative</span><span class="p-stat-value p-stat-value--neg">-{{ negative ?? 0 }}</span></div>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 20px;text-align:center}.p-icon{font-size:50px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px}.p-stat{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}.p-stat--main{grid-column:span 2}.p-stat-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-stat-value{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;font-weight:700}.p-stat-value--gold{color:#ffb43c}.p-stat-value--pos{color:#00e676;font-size:16px}.p-stat-value--neg{color:#ff4444;font-size:16px}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Karma/ViewKarma.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const entries = [
+  { date: '2024-01-10', action: 'Completed Quest', amount: '+50', total: '550' },
+  { date: '2024-01-08', action: 'Helped Avatar', amount: '+20', total: '500' },
+  { date: '2024-01-05', action: 'Joined League', amount: '+30', total: '480' },
+  { date: '2024-01-01', action: 'Welcome bonus', amount: '+100', total: '100' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">⭐ Karma Log</h2>
+    <div class="p-table-wrap">
+      <table class="p-table">
+        <thead><tr><th>Date</th><th>Action</th><th>Amount</th><th>Total</th></tr></thead>
+        <tbody>
+          <tr v-for="(e, i) in entries" :key="i">
+            <td>{{ e.date }}</td><td>{{ e.action }}</td>
+            <td :class="e.amount.startsWith('+') ? 'pos' : 'neg'">{{ e.amount }}</td>
+            <td>{{ e.total }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:18px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-table-wrap{overflow-x:auto;border-radius:10px;border:1px solid rgba(0,200,255,.15)}.p-table{width:100%;border-collapse:collapse;font-size:13px}.p-table th{background:rgba(0,200,255,.08);color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:10px 12px;text-align:left}.p-table td{color:#c8dff0;padding:9px 12px;border-top:1px solid rgba(255,255,255,.05)}.p-table tr:hover td{background:rgba(0,200,255,.04)}.pos{color:#00e676;font-weight:700}.neg{color:#ff4444;font-weight:700}.p-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Karma/VoteKarma.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ username: string; vote: 'positive' | 'negative'; reason: string }] }>()
+const form = ref({ username: '', vote: 'positive' as 'positive' | 'negative', reason: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🗳️ Vote Karma</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Avatar Username</label><input class="p-input" v-model="form.username" placeholder="Who are you voting for?" /></div>
+      <div class="p-row">
+        <label class="p-label">Vote</label>
+        <div class="p-vote-btns">
+          <button type="button" class="p-vote" :class="{ 'p-vote--active-pos': form.vote === 'positive' }" @click="form.vote = 'positive'">👍 Positive</button>
+          <button type="button" class="p-vote" :class="{ 'p-vote--active-neg': form.vote === 'negative' }" @click="form.vote = 'negative'">👎 Negative</button>
+        </div>
+      </div>
+      <div class="p-row"><label class="p-label">Reason</label><textarea class="p-textarea" v-model="form.reason" placeholder="Why are you voting this way?"></textarea></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Submit Vote</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input,.p-textarea{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus,.p-textarea:focus{border-color:rgba(0,200,255,.5)}.p-textarea{min-height:80px;resize:vertical}.p-vote-btns{display:flex;gap:10px}.p-vote{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#a8bfd8;font-size:13px;font-weight:600;padding:10px;cursor:pointer;transition:all .2s}.p-vote--active-pos{background:rgba(0,230,118,.12);border-color:rgba(0,230,118,.4);color:#00e676}.p-vote--active-neg{background:rgba(255,68,68,.12);border-color:rgba(255,68,68,.4);color:#ff4444}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 24px;cursor:pointer}
+</style>

package/src/components/KarmaPanel/KarmaPanel.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useOasis } from '../../../composables/useOasis'
+
+const { session } = useOasis()
+const activeTab = ref<'records' | 'stats' | 'weightings'>('records')
+const level = computed(() => Math.floor(Math.sqrt((session.value?.karma ?? 0) / 100)) + 1)
+</script>
+
+<template>
+  <div class="kp-shell">
+    <div class="kp-banner">
+      <div class="kp-stat">
+        <div class="kp-stat-label">KARMA</div>
+        <div class="kp-stat-value">{{ session?.karma ?? '—' }}</div>
+      </div>
+      <div class="kp-stat">
+        <div class="kp-stat-label">LEVEL</div>
+        <div class="kp-stat-value kp-stat-value--level">{{ level }}</div>
+      </div>
+      <div class="kp-stat">
+        <div class="kp-stat-label">AVATAR TYPE</div>
+        <div class="kp-stat-value kp-stat-value--type">User</div>
+      </div>
+    </div>
+
+    <div class="kp-tabs">
+      <button class="kp-tab" :class="{ 'kp-tab--active': activeTab === 'records' }" @click="activeTab = 'records'">Akashic Records</button>
+      <button class="kp-tab" :class="{ 'kp-tab--active': activeTab === 'stats' }" @click="activeTab = 'stats'">Stats</button>
+      <button class="kp-tab" :class="{ 'kp-tab--active': activeTab === 'weightings' }" @click="activeTab = 'weightings'">Weightings</button>
+    </div>
+
+    <div v-if="activeTab === 'records'" class="kp-panel kp-empty">
+      <div class="kp-empty-icon">📜</div>
+      <p>No karma records found.<br>Complete actions in the OASIS ecosystem to build your Akashic Record.</p>
+    </div>
+    <div v-else-if="activeTab === 'stats'" class="kp-panel kp-empty">
+      <div class="kp-empty-icon">📊</div>
+      <p>No stats available yet.</p>
+    </div>
+    <div v-else class="kp-panel">
+      <div class="kp-vote-banner">
+        <div>
+          <strong>Karma Voting</strong>
+          <p>Community voting to adjust karma weightings is coming soon.</p>
+        </div>
+        <button class="kp-btn-ghost">Vote on Weightings <span class="kp-soon">Coming Soon</span></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kp-shell { color:#fff; display:flex; flex-direction:column; gap:20px; }
+.kp-banner { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
+.kp-stat { background:rgba(0,200,255,.06); border:1px solid rgba(0,200,255,.12); border-radius:10px; padding:14px; text-align:center; }
+.kp-stat-label { font-size:10px; font-weight:700; letter-spacing:.1em; color:#7a9bbf; text-transform:uppercase; margin-bottom:6px; }
+.kp-stat-value { font-family:'Orbitron',sans-serif; font-size:22px; color:#00c8ff; }
+.kp-stat-value--level { color:#a78bfa; }
+.kp-stat-value--type { color:#48dc82; font-size:16px; }
+.kp-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(0,200,255,.12); }
+.kp-tab { background:none; border:none; color:#7a9bbf; font-size:13px; padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
+.kp-tab--active { color:#00c8ff; border-bottom-color:#00c8ff; }
+.kp-panel { padding:16px 0; }
+.kp-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 16px; text-align:center; color:#7a9bbf; font-size:13px; line-height:1.6; }
+.kp-empty-icon { font-size:32px; }
+.kp-vote-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.03); border:1px solid rgba(0,200,255,.1); border-radius:10px; padding:16px; font-size:13px; color:#a8bfd8; line-height:1.5; }
+.kp-vote-banner strong { display:block; color:#fff; margin-bottom:4px; }
+.kp-btn-ghost { flex-shrink:0; background:transparent; border:1px solid rgba(0,200,255,.3); color:#00c8ff; border-radius:6px; padding:8px 14px; font-size:12px; cursor:pointer; white-space:nowrap; }
+.kp-soon { display:inline-block; background:rgba(255,180,60,.15); color:#ffb43c; border-radius:999px; font-size:9px; padding:2px 6px; margin-left:6px; letter-spacing:.06em; vertical-align:middle; }
+</style>

package/src/components/KarmaToast/KarmaToast.vue

@@ -0,0 +1,29 @@
+<template>
+  <Transition name="toast">
+    <div v-if="karmaToast" class="karma-toast">
+      <span class="kt-amount">+{{ karmaToast.amount }} ✦</span>
+      <span class="kt-msg">{{ karmaToast.message }}</span>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useOasis } from '../../../composables/useOasis'
+const { karmaToast } = useOasis()
+</script>
+
+<style scoped>
+.karma-toast {
+  position: fixed; bottom: 32px; right: 32px; z-index: 9999;
+  background: linear-gradient(135deg, rgba(0,232,124,.15), rgba(0,100,60,.1));
+  border: 1px solid rgba(0,232,124,.4); border-radius: 14px;
+  padding: 16px 24px; display: flex; flex-direction: column; gap: 4px;
+  backdrop-filter: blur(12px);
+}
+.kt-amount { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900; color: #00e87c; }
+.kt-msg { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #a8bfd8; }
+.toast-enter-active { transition: all .35s ease; }
+.toast-leave-active { transition: all .3s ease; }
+.toast-enter-from { transform: translateY(20px); opacity: 0; }
+.toast-leave-to { transform: translateY(20px); opacity: 0; }
+</style>

package/src/components/Login/Login.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useOasis } from '../../../composables/useOasis'
+
+const emit = defineEmits<{ switchTo: [view: 'signup' | 'forgot']; loggedIn: [] }>()
+
+const { login } = useOasis()
+
+const username = ref('')
+const password = ref('')
+const rememberMe = ref(false)
+const showPwd = ref(false)
+const loading = ref(false)
+const error = ref('')
+
+async function submit() {
+  if (!username.value || !password.value) { error.value = 'Please fill in all fields.'; return }
+  loading.value = true
+  error.value = ''
+  try {
+    await login(username.value, password.value)
+    emit('loggedIn')
+  } catch (e: any) {
+    error.value = e?.message ?? 'Login failed. Please check your credentials.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="oasis-auth-form">
+    <div class="oasis-auth-header">
+      <h2 class="oasis-auth-title">Beam In</h2>
+      <p class="oasis-auth-sub">
+        Don't have an account?
+        <a class="oasis-link" href="#" @click.prevent="emit('switchTo', 'signup')">Sign Up</a>
+      </p>
+    </div>
+
+    <div v-if="error" class="oasis-auth-error">{{ error }}</div>
+
+    <div class="oasis-field">
+      <label class="oasis-label" for="oasis-login-username">Username</label>
+      <input class="oasis-input" id="oasis-login-username" type="text" v-model="username" placeholder="yourusername" autocomplete="username" />
+    </div>
+
+    <div class="oasis-field">
+      <label class="oasis-label" for="oasis-login-password">Password</label>
+      <div class="oasis-input-wrap">
+        <input class="oasis-input" id="oasis-login-password" :type="showPwd ? 'text' : 'password'" v-model="password" placeholder="••••••••" autocomplete="current-password" />
+        <button class="oasis-pwd-toggle" type="button" @click="showPwd = !showPwd" :aria-label="showPwd ? 'Hide password' : 'Show password'">
+          {{ showPwd ? '🙈' : '👁️' }}
+        </button>
+      </div>
+      <a class="oasis-link oasis-link--small" href="#" @click.prevent="emit('switchTo', 'forgot')">Forgot Password?</a>
+    </div>
+
+    <div class="oasis-field oasis-field--row">
+      <input class="oasis-checkbox" id="oasis-remember" type="checkbox" v-model="rememberMe" />
+      <label class="oasis-label oasis-label--inline" for="oasis-remember">Remember Me</label>
+    </div>
+
+    <button class="oasis-btn" type="button" :disabled="loading" @click="submit">
+      {{ loading ? 'Connecting…' : 'Beam In' }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.oasis-auth-form { display:flex; flex-direction:column; gap:20px; }
+.oasis-auth-header { text-align:center; }
+.oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:22px; color:#fff; margin:0 0 6px; }
+.oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; }
+.oasis-auth-error { background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3); color:#ff6b6b; border-radius:8px; padding:10px 14px; font-size:13px; }
+.oasis-field { display:flex; flex-direction:column; gap:6px; }
+.oasis-field--row { flex-direction:row; align-items:center; gap:10px; }
+.oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+.oasis-label--inline { text-transform:none; font-size:13px; color:#a8bfd8; }
+.oasis-input-wrap { position:relative; }
+.oasis-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:8px; padding:10px 14px; color:#fff; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+.oasis-input:focus { border-color:rgba(0,200,255,.5); }
+.oasis-input-wrap .oasis-input { padding-right:44px; }
+.oasis-pwd-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:0; line-height:1; }
+.oasis-checkbox { width:16px; height:16px; accent-color:#00c8ff; cursor:pointer; flex-shrink:0; }
+.oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; }
+.oasis-link--small { font-size:12px; margin-top:2px; }
+.oasis-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:8px; color:#fff; font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; padding:12px; cursor:pointer; transition:opacity .2s; }
+.oasis-btn:disabled { opacity:.5; cursor:not-allowed; }
+</style>