refactor: align privacy policy layout with app design

src/views/PrivacyPolicy.vue

@@ -3,8 +3,8 @@ import { ArrowLeft } from 'lucide-vue-next'
 </script>
 
 <template>
-  <div class="privacy-container">
+  <div class="tool-container">
-    <div class="privacy-content">
+    <div class="tool-panel privacy-panel">
       <header class="privacy-header">
         <router-link to="/" class="back-link">
           <ArrowLeft size="20" />
@@ -14,6 +14,7 @@ import { ArrowLeft } from 'lucide-vue-next'
         <p class="last-updated">Last Updated: February 27, 2026</p>
       </header>
 
+      <div class="privacy-body">
         <section>
           <h2>1. Introduction</h2>
           <p>
@@ -75,35 +76,40 @@ import { ArrowLeft } from 'lucide-vue-next'
         </section>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
-.privacy-container {
+.privacy-panel {
-  min-height: 100vh;
+  max-width: 900px; /* Slightly wider for reading */
-  width: 100%;
+  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  padding: 2rem;
-  background: var(--bg-gradient);
-  color: var(--text-color);
 }
 
-.privacy-content {
+.privacy-body {
-  width: 100%;
+  overflow-y: auto;
-  max-width: 800px;
+  padding-right: 0.5rem;
-  background: var(--glass-bg);
+}
-  backdrop-filter: blur(12px);
+
-  -webkit-backdrop-filter: blur(12px);
+/* Custom scrollbar for privacy body */
-  border: 1px solid var(--glass-border);
+.privacy-body::-webkit-scrollbar {
-  border-radius: 16px;
+  width: 8px;
-  padding: 3rem;
+}
-  box-shadow: var(--glass-shadow);
+
+.privacy-body::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.privacy-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
 }
 
 .privacy-header {
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
   border-bottom: 1px solid var(--glass-border);
-  padding-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  flex-shrink: 0;
 }
 
 .back-link {