@oasisomniverse/vue 1.0.0

package/src/components/ONODE/ONODE.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const running = ref(false)
+const metrics = [
+  { label: 'CPU', value: '18%' },
+  { label: 'RAM', value: '2.1 GB' },
+  { label: 'Storage', value: '47 GB' },
+  { label: 'Blocks', value: '12,450' },
+]
+const logs = [
+  { time: '09:42:01', level: 'info', message: 'ONODE started. Connecting to ONET…' },
+  { time: '09:42:02', level: 'info', message: 'Connected to 12 peers.' },
+  { time: '09:42:05', level: 'info', message: 'Block #12450 validated.' },
+  { time: '09:42:08', level: 'warn', message: 'Peer ONODE-77 latency high: 340ms.' },
+  { time: '09:42:12', level: 'info', message: 'Data sync complete. 100% coverage.' },
+]
+</script>
+<template>
+  <div class="nd-shell">
+    <div class="nd-header"><h2 class="nd-title">🖥️ ONODE</h2><p class="nd-sub">Your personal OASIS node. Store, validate, and relay data.</p></div>
+    <div class="nd-status-row">
+      <div class="nd-status-pill" :class="{ 'nd-status-pill--running': running }">{{ running ? '● Running' : '○ Stopped' }}</div>
+      <button class="nd-btn" :class="{ 'nd-btn--stop': running }" @click="running = !running">{{ running ? 'Stop Node' : 'Start Node' }}</button>
+    </div>
+    <template v-if="running">
+      <div class="nd-metrics">
+        <div v-for="m in metrics" :key="m.label" class="nd-metric"><div class="nd-metric-val">{{ m.value }}</div><div class="nd-metric-label">{{ m.label }}</div></div>
+      </div>
+      <div class="nd-logs-header">Node Logs</div>
+      <div class="nd-logs">
+        <div v-for="l in logs" :key="l.time" class="nd-log" :class="`nd-log--${l.level}`">
+          <span class="nd-log-time">{{ l.time }}</span>
+          <span class="nd-log-level">[{{ l.level.toUpperCase() }}]</span>
+          <span class="nd-log-msg">{{ l.message }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<style scoped>
+.nd-shell{display:flex;flex-direction:column;gap:18px}.nd-header{text-align:center}.nd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.nd-sub{font-size:13px;color:#7a9bbf;margin:0}.nd-status-row{display:flex;align-items:center;gap:14px}.nd-status-pill{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,80,80,.2);border-radius:8px;padding:10px 14px;font-family:'Orbitron',sans-serif;font-size:13px;color:#ff6b6b}.nd-status-pill--running{border-color:rgba(72,220,130,.3);color:#48dc82}.nd-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}.nd-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}.nd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.nd-metric{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:12px;text-align:center}.nd-metric-val{font-family:'Share Tech Mono',monospace;font-size:16px;color:#00c8ff;font-weight:600}.nd-metric-label{font-size:10px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.nd-logs-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.nd-logs{background:#020a14;border:1px solid rgba(0,200,255,.1);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto;font-family:'Share Tech Mono',monospace}.nd-log{display:flex;gap:10px;font-size:11px}.nd-log-time{color:#4a6a88;flex-shrink:0}.nd-log--info .nd-log-level{color:#00c8ff}.nd-log--warn .nd-log-level{color:#ffb43c}.nd-log--error .nd-log-level{color:#ff6b6b}.nd-log-msg{color:#7a9bbf}
+</style>

package/src/components/OasisModal/OasisModal.vue

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="open" class="modal-backdrop" @click="$emit('close')">
+        <div class="modal-box" :style="{ borderColor: accentColor }" @click.stop>
+          <button class="modal-close" @click="$emit('close')">✕</button>
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{ open: boolean; accentColor?: string }>()
+defineEmits<{ close: [] }>()
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed; inset: 0; z-index: 9000;
+  background: rgba(3,7,20,.85); backdrop-filter: blur(8px);
+  display: flex; align-items: center; justify-content: center; padding: 20px;
+}
+.modal-box {
+  background: #0a1535; border: 1px solid rgba(0,232,124,.25); border-radius: 20px;
+  padding: 40px 36px; max-width: 520px; width: 100%;
+  position: relative; max-height: 90vh; overflow-y: auto;
+}
+.modal-close {
+  position: absolute; top: 16px; right: 18px;
+  background: none; border: none; color: #a8bfd8; font-size: 20px; cursor: pointer;
+}
+.modal-enter-active, .modal-leave-active { transition: all .25s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; transform: scale(.96); }
+</style>

package/src/components/Provider/ActivityPub.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🐘</div>
+    <h2 class="p-title">ActivityPub Provider</h2>
+    <p class="p-body">ActivityPub integration with the OASIS is coming soon — enabling federated social networking across Mastodon, Pixelfed, PeerTube and other ActivityPub-compatible platforms.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/CompareProviderSpeeds.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const providers = [
+  { name: 'Holochain', read: 95, write: 92, score: 94 },
+  { name: 'MongoDB', read: 88, write: 85, score: 87 },
+  { name: 'SQLite', read: 99, write: 96, score: 98 },
+  { name: 'IPFS', read: 60, write: 45, score: 53 },
+  { name: 'Ethereum', read: 40, write: 30, score: 35 },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">⚡ Compare Provider Speeds</h2>
+    <div class="p-table-wrap">
+      <table class="p-table">
+        <thead><tr><th>Provider</th><th>Read</th><th>Write</th><th>Score</th></tr></thead>
+        <tbody>
+          <tr v-for="p in providers" :key="p.name">
+            <td>{{ p.name }}</td>
+            <td><div class="p-bar-wrap"><div class="p-bar" :style="{ width: p.read + '%' }"></div><span>{{ p.read }}</span></div></td>
+            <td><div class="p-bar-wrap"><div class="p-bar p-bar--write" :style="{ width: p.write + '%' }"></div><span>{{ p.write }}</span></div></td>
+            <td class="p-score">{{ p.score }}</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-bar-wrap{display:flex;align-items:center;gap:8px}.p-bar{height:6px;border-radius:999px;background:linear-gradient(90deg,#00c8ff,#0080ff);transition:width .4s}.p-bar--write{background:linear-gradient(90deg,#b87fff,#7040cc)}.p-score{color:#ffb43c;font-family:'Orbitron',sans-serif;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/Provider/Eosio.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">⚡</div>
+    <h2 class="p-title">EOSIO Provider</h2>
+    <p class="p-body">EOSIO blockchain integration with the OASIS is coming soon — enabling high-throughput decentralised applications and smart contracts via the EOS network.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/Ethereum.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">💎</div>
+    <h2 class="p-title">Ethereum Provider</h2>
+    <p class="p-body">Ethereum blockchain integration with the OASIS — enabling smart contracts, NFTs, DeFi and decentralised identity across the Ethereum network and L2 chains.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/Holochain.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🔮</div>
+    <h2 class="p-title">Holochain Provider</h2>
+    <p class="p-body">Holochain is the primary OASIS provider — a truly peer-to-peer distributed computing platform with agent-centric architecture and no global consensus bottleneck.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/Ipfs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">📁</div>
+    <h2 class="p-title">IPFS Provider</h2>
+    <p class="p-body">IPFS (InterPlanetary File System) integration with the OASIS — decentralised content-addressed file storage for avatars, OAPPs, NFT media, and map assets.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ManageAutoFailOver.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🔄</div>
+    <h2 class="p-title">Manage Auto Fail-Over</h2>
+    <p class="p-body">Auto fail-over configuration is coming soon — automatically switch to backup providers when your primary provider becomes unavailable, ensuring zero-downtime for your OASIS data.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ManageAutoReplicaton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">📋</div>
+    <h2 class="p-title">Manage Auto Replication</h2>
+    <p class="p-body">Auto replication settings are coming soon — mirror your OASIS data across multiple providers simultaneously for redundancy and increased resilience.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ManageLoadBalancing.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">⚖️</div>
+    <h2 class="p-title">Manage Load Balancing</h2>
+    <p class="p-body">Load balancing configuration is coming soon — distribute read and write operations intelligently across your active OASIS providers for optimal performance.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ManageProviders.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const providers = [
+  { name: 'Holochain', status: 'Active', type: 'P2P', priority: 1 },
+  { name: 'MongoDB', status: 'Active', type: 'Database', priority: 2 },
+  { name: 'IPFS', status: 'Standby', type: 'File', priority: 3 },
+  { name: 'Ethereum', status: 'Inactive', type: 'Blockchain', priority: 4 },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">⚙️ Manage Providers</h2>
+    <div class="p-list">
+      <div v-for="p in providers" :key="p.name" class="p-item">
+        <div class="p-item-info">
+          <span class="p-item-name">{{ p.name }}</span>
+          <span class="p-item-type">{{ p.type }} · Priority {{ p.priority }}</span>
+        </div>
+        <span class="p-status" :class="`p-status--${p.status.toLowerCase()}`">{{ p.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:8px}.p-item{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:12px 14px}.p-item-info{display:flex;flex-direction:column;gap:3px}.p-item-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-item-type{font-size:11px;color:#7a9bbf}.p-status{font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 10px;border:1px solid currentColor;text-transform:uppercase}.p-status--active{color:#00e676}.p-status--standby{color:#ffb43c}.p-status--inactive{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/Provider/MongoDb.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🍃</div>
+    <h2 class="p-title">MongoDB Provider</h2>
+    <p class="p-body">MongoDB integration with the OASIS — a flexible NoSQL database provider for storing avatar data, OAPPs, quests and off-chain OASIS state.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/Neo4j.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🕸️</div>
+    <h2 class="p-title">Neo4j Provider</h2>
+    <p class="p-body">Neo4j graph database integration with the OASIS — enabling complex relationship queries across avatars, quests, OAPPs and social connections.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/SearchProviders.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; type: string }] }>()
+const form = ref({ query: '', type: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Providers</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Provider Name</label><input class="p-input" v-model="form.query" placeholder="Search providers..." /></div>
+      <div class="p-row">
+        <label class="p-label">Type</label>
+        <select class="p-input" v-model="form.type">
+          <option>All</option><option>Blockchain</option><option>Database</option><option>P2P</option><option>File Storage</option><option>Social</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/Provider/Seeds.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🌱</div>
+    <h2 class="p-title">SEEDS Provider</h2>
+    <p class="p-body">SEEDS blockchain integration with the OASIS — a regenerative currency and governance system for a thriving civilisation. Connect your SEEDS account to send and receive SEEDS tokens.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/Solid.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">💠</div>
+    <h2 class="p-title">Solid Provider</h2>
+    <p class="p-body">Solid (Social Linked Data) integration with the OASIS — enabling personal data pods where users own and control their own data, interoperable with any Solid-compatible application.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/SqlLite.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🗄️</div>
+    <h2 class="p-title">SQLite Provider</h2>
+    <p class="p-body">SQLite integration with the OASIS — a lightweight local database provider for offline and edge-device OASIS deployments with full SQL query support.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ThreeFold.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">♾️</div>
+    <h2 class="p-title">ThreeFold Provider</h2>
+    <p class="p-body">ThreeFold integration with the OASIS — a decentralised cloud infrastructure provider offering peer-to-peer compute, storage and networking built on the ThreeFold grid.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Provider/ViewProviderStats.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{ providerName?: string }>()
+const emit = defineEmits<{ close: [] }>()
+const stats = [
+  { label: 'Total Reads', value: '1,248,530' },
+  { label: 'Total Writes', value: '524,120' },
+  { label: 'Avg Response', value: '12ms' },
+  { label: 'Uptime', value: '99.97%' },
+  { label: 'Data Stored', value: '14.2 GB' },
+  { label: 'Active Connections', value: '342' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">📊 {{ providerName ?? 'Provider' }} Stats</h2>
+    <div class="p-grid">
+      <div v-for="s in stats" :key="s.label" class="p-stat">
+        <span class="p-stat-label">{{ s.label }}</span>
+        <span class="p-stat-value">{{ s.value }}</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-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.p-stat{background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}.p-stat-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.p-stat-value{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;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/Provider/ViewProviders.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const providers = [
+  { name: 'Holochain', type: 'P2P', status: 'Active', icon: '🔮' },
+  { name: 'MongoDB', type: 'Database', status: 'Active', icon: '🍃' },
+  { name: 'IPFS', type: 'File', status: 'Active', icon: '📁' },
+  { name: 'Ethereum', type: 'Blockchain', status: 'Inactive', icon: '💎' },
+  { name: 'Neo4j', type: 'Graph DB', status: 'Active', icon: '🕸️' },
+  { name: 'SQLite', type: 'Local DB', status: 'Active', icon: '🗄️' },
+  { name: 'SEEDS', type: 'Blockchain', status: 'Inactive', icon: '🌱' },
+  { name: 'Solid', type: 'Data Pod', status: 'Standby', icon: '💠' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔌 All Providers</h2>
+    <div class="p-grid">
+      <div v-for="p in providers" :key="p.name" class="p-card">
+        <span class="p-card-icon">{{ p.icon }}</span>
+        <span class="p-card-name">{{ p.name }}</span>
+        <span class="p-card-type">{{ p.type }}</span>
+        <span class="p-status" :class="`p-status--${p.status.toLowerCase()}`">{{ p.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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.p-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.p-card-icon{font-size:24px}.p-card-name{font-family:'Orbitron',sans-serif;font-size:11px;color:#fff;font-weight:700}.p-card-type{font-size:10px;color:#7a9bbf}.p-status{font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 8px;border:1px solid currentColor;text-transform:uppercase}.p-status--active{color:#00e676}.p-status--standby{color:#ffb43c}.p-status--inactive{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/ProviderDropdown/ProviderDropdown.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Provider { id: string; name: string; icon: string; color: string }
+const emit = defineEmits<{ providerChange: [p: Provider] }>()
+const providers: Provider[] = [
+  { id: 'ethereum', name: 'Ethereum', icon: '⟠', color: '#627eea' },
+  { id: 'solana', name: 'Solana', icon: '◎', color: '#9945ff' },
+  { id: 'polygon', name: 'Polygon', icon: '⬡', color: '#8247e5' },
+  { id: 'arbitrum', name: 'Arbitrum', icon: '🔵', color: '#2d9cdb' },
+  { id: 'eosio', name: 'EOSIO', icon: '🔮', color: '#443f54' },
+  { id: 'holochain', name: 'Holochain', icon: '⬡', color: '#00e5be' },
+]
+const open = ref(false)
+const selected = ref<Provider>(providers[0])
+function select(p: Provider) { selected.value = p; open.value = false; emit('providerChange', p) }
+</script>
+<template>
+  <div class="pd-shell">
+    <div class="pd-trigger" :class="{ 'pd-trigger--open': open }" @click="open = !open">
+      <div class="pd-icon" :style="{ color: selected.color }">{{ selected.icon }}</div>
+      <div class="pd-label"><div class="pd-name">{{ selected.name }}</div><div class="pd-sub">Active Provider</div></div>
+      <div class="pd-arrow" :class="{ 'pd-arrow--open': open }">▼</div>
+    </div>
+    <div v-if="open" class="pd-menu">
+      <div v-for="p in providers" :key="p.id" class="pd-option" :class="{ 'pd-option--selected': p.id === selected.id }" @click="select(p)">
+        <div class="pd-opt-icon" :style="{ color: p.color }">{{ p.icon }}</div>
+        <div class="pd-opt-name">{{ p.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.pd-shell{position:relative}.pd-trigger{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s;color:#fff}.pd-trigger:hover,.pd-trigger--open{border-color:rgba(0,200,255,.5)}.pd-icon{font-size:20px;width:28px;text-align:center}.pd-label{flex:1}.pd-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#fff}.pd-sub{font-size:11px;color:#7a9bbf;margin-top:2px}.pd-arrow{font-size:10px;color:#7a9bbf;transition:transform .2s}.pd-arrow--open{transform:rotate(180deg)}.pd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0d1b2e;border:1px solid rgba(0,200,255,.2);border-radius:10px;overflow:hidden;z-index:100;box-shadow:0 8px 32px rgba(0,0,0,.5)}.pd-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;color:#e0f0ff}.pd-option:hover{background:rgba(0,200,255,.1)}.pd-option--selected{background:rgba(0,200,255,.12);border-left:3px solid #00c8ff}.pd-opt-icon{font-size:18px;width:24px;text-align:center}.pd-opt-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
+</style>

package/src/components/Providers/Providers.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Provider { id: string; name: string; icon: string; color: string; type: string; connected: boolean; description: string }
+const providers = ref<Provider[]>([
+  { id: '1', name: 'Ethereum', icon: '⟠', color: '#627eea', type: 'Blockchain', description: 'Connect your Ethereum wallet (MetaMask, WalletConnect).', connected: false },
+  { id: '2', name: 'Solana', icon: '◎', color: '#9945ff', type: 'Blockchain', description: 'Connect your Solana wallet (Phantom, Solflare).', connected: false },
+  { id: '3', name: 'EOSIO', icon: '🔮', color: '#443f54', type: 'Blockchain', description: 'Connect via EOSIO for high-speed transactions.', connected: false },
+  { id: '4', name: 'Holochain', icon: '⬡', color: '#00e5be', type: 'P2P Network', description: 'Peer-to-peer data storage on Holochain.', connected: false },
+  { id: '5', name: 'The Graph', icon: '📊', color: '#6f4cff', type: 'Indexer', description: 'Query blockchain data with The Graph protocol.', connected: false },
+])
+function toggle(p: Provider) { p.connected = !p.connected }
+</script>
+<template>
+  <div class="prov-shell">
+    <div class="prov-header"><h2 class="prov-title">🔗 Providers</h2><p class="prov-sub">Connect blockchain providers to your OASIS avatar.</p></div>
+    <div class="prov-list">
+      <div v-for="p in providers" :key="p.id" class="prov-card" :class="{ 'prov-card--connected': p.connected }">
+        <div class="prov-icon" :style="{ color: p.color }">{{ p.icon }}</div>
+        <div class="prov-info"><div class="prov-name">{{ p.name }}</div><div class="prov-type">{{ p.type }}</div><div class="prov-desc">{{ p.description }}</div></div>
+        <div class="prov-actions">
+          <div class="prov-status-dot" :class="{ 'prov-status-dot--on': p.connected }"></div>
+          <button class="prov-btn" :class="{ 'prov-btn--disconnect': p.connected }" @click="toggle(p)">{{ p.connected ? 'Disconnect' : 'Connect' }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.prov-shell{display:flex;flex-direction:column;gap:18px}.prov-header{text-align:center}.prov-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.prov-sub{font-size:13px;color:#7a9bbf;margin:0}.prov-list{display:flex;flex-direction:column;gap:10px}.prov-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:14px 16px;transition:border-color .2s}.prov-card--connected{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.03)}.prov-icon{font-size:26px;flex-shrink:0}.prov-info{flex:1}.prov-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:2px}.prov-type{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.prov-desc{font-size:12px;color:#7a9bbf}.prov-actions{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.prov-status-dot{width:8px;height:8px;border-radius:50%;background:#4a6a88}.prov-status-dot--on{background:#48dc82;box-shadow:0 0 6px #48dc82}.prov-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:7px 14px;cursor:pointer;white-space:nowrap}.prov-btn--disconnect{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}
+</style>

package/src/components/Quest/ManageQuest.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">⚔️</div>
+    <h2 class="p-title">Manage Quest</h2>
+    <p class="p-body">Quest management tools are coming soon — create, edit, assign objectives and track completions for your OASIS quests across all providers.</p>
+    <button class="p-btn" @click="emit('close')">OK</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:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.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/Quest/Quest.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Quest { id: string; title: string; description: string; reward: number; difficulty: string; accepted: boolean; completed: boolean }
+const quests = ref<Quest[]>([
+  { id: '1', title: 'Avatar Awakening', description: 'Complete your avatar profile and connect your first provider.', reward: 200, difficulty: 'Easy', accepted: true, completed: true },
+  { id: '2', title: 'Karma Seeker', description: 'Earn 1000 karma through good deeds and OASIS contributions.', reward: 500, difficulty: 'Medium', accepted: true, completed: false },
+  { id: '3', title: 'The NFT Collector', description: 'Acquire 5 unique NFTs across different categories.', reward: 1000, difficulty: 'Hard', accepted: false, completed: false },
+  { id: '4', title: 'Omniverse Explorer', description: 'Visit every major hub location on the OASIS map.', reward: 2500, difficulty: 'Legendary', accepted: false, completed: false },
+])
+function accept(q: Quest) { q.accepted = true }
+function complete(q: Quest) { q.completed = true }
+</script>
+<template>
+  <div class="qst-shell">
+    <div class="qst-header"><h2 class="qst-title">⚔️ Quests</h2><p class="qst-sub">Embark on quests to gain karma and rare rewards.</p></div>
+    <div class="qst-list">
+      <div v-for="q in quests" :key="q.id" class="qst-card" :class="{ 'qst-card--active': q.accepted && !q.completed, 'qst-card--done': q.completed }">
+        <div class="qst-diff" :class="`qst-diff--${q.difficulty.toLowerCase()}`">{{ q.difficulty }}</div>
+        <div class="qst-body">
+          <div class="qst-title-text">{{ q.title }}</div>
+          <div class="qst-desc">{{ q.description }}</div>
+          <div class="qst-reward">+{{ q.reward }} karma</div>
+        </div>
+        <div class="qst-actions">
+          <div v-if="q.completed" class="qst-done">✅ Done</div>
+          <button v-else-if="!q.accepted" class="qst-btn" @click="accept(q)">Accept Quest</button>
+          <button v-else class="qst-btn qst-btn--finish" @click="complete(q)">Finish</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.qst-shell{display:flex;flex-direction:column;gap:18px}.qst-header{text-align:center}.qst-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.qst-sub{font-size:13px;color:#7a9bbf;margin:0}.qst-list{display:flex;flex-direction:column;gap:12px}.qst-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}.qst-card--active{border-color:rgba(0,200,255,.4)}.qst-card--done{opacity:.6;border-color:rgba(72,220,130,.2)}.qst-diff{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 10px;border:1px solid currentColor;white-space:nowrap;flex-shrink:0}.qst-diff--easy{color:#48dc82;border-color:rgba(72,220,130,.3)}.qst-diff--medium{color:#ffb43c;border-color:rgba(255,180,60,.3)}.qst-diff--hard{color:#ff6b6b;border-color:rgba(255,107,107,.3)}.qst-diff--legendary{color:#b87fff;border-color:rgba(184,127,255,.3)}.qst-body{flex:1}.qst-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}.qst-desc{font-size:12px;color:#7a9bbf;line-height:1.5;margin-bottom:6px}.qst-reward{font-size:12px;color:#48dc82;font-weight:600}.qst-actions{flex-shrink:0}.qst-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px 16px;cursor:pointer;white-space:nowrap}.qst-btn--finish{background:linear-gradient(135deg,#48dc82,#00aa55)}.qst-done{font-size:13px;color:#48dc82;font-weight:600}
+</style>