From c46c911ce6abe710719d99d77dcb418aacf48575 Mon Sep 17 00:00:00 2001
From: Bissbert <43237892+Bissbert@users.noreply.github.com>
Date: Tue, 5 May 2026 17:44:56 +0700
Subject: [PATCH] feat(ux): remove lock gate, fix CSP, raise crystal-chip
 contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wave 1 of the 2026-05-05 UX review implementation.

W1 — Remove lock gate entirely
- Delete LockGate.tsx, all Protected* wrappers (10 files), useAuth.ts
- Inline page chrome into Astro pages for tools/* and gallery
- Extract ProtectedQuiz logic into non-gated QuizPage component
- Extract ProtectedTools UI into ToolsHub component
- Strip LockGate from StudyReviewScreen and StudySettingsScreen
- All Tier-1 surfaces (gallery, playground, tools, quiz, study) now
  render directly with no gate

W2 — Fix CSP headers
- Allow cdn.jsdelivr.net (Monaco editor)
- Allow static.cloudflareinsights.com (analytics beacon)
- Allow api.gemmology.dev (playground render endpoint)
- Add explicit script-src-elem to satisfy strict CSP parsers

W5 — Raise crystal-system chip contrast
- Bump crystalSystemColors.bg from -500 to -700 across all seven
  crystal systems so white-on-coloured chips reach WCAG AA 4.5:1
---
 public/_headers                               |   2 +-
 src/components/auth/LockGate.tsx              | 237 ------------------
 src/components/auth/ProtectedAdvanced.tsx     |  24 --
 src/components/auth/ProtectedConversions.tsx  |  24 --
 src/components/auth/ProtectedGallery.tsx      |  33 ---
 .../auth/ProtectedIdentification.tsx          |  24 --
 src/components/auth/ProtectedLab.tsx          |  24 --
 src/components/auth/ProtectedMeasurement.tsx  |  28 ---
 src/components/auth/ProtectedOptical.tsx      |  24 --
 src/components/auth/ProtectedPlayground.tsx   |  18 --
 src/components/auth/ProtectedQuiz.tsx         |  93 -------
 src/components/auth/useAuth.ts                | 171 -------------
 src/components/learn/icons.ts                 |  14 +-
 src/components/quiz/QuizPage.tsx              |  84 +++++++
 .../quiz/study/StudyReviewScreen.tsx          |  53 ++--
 .../quiz/study/StudySettingsScreen.tsx        |  43 ++--
 .../ProtectedTools.tsx => tools/ToolsHub.tsx} |  73 +++---
 src/pages/gallery/index.astro                 |  23 +-
 src/pages/playground.astro                    |   4 +-
 src/pages/quiz/index.astro                    |   8 +-
 src/pages/study/review.astro                  |   2 -
 src/pages/study/settings.astro                |   2 +-
 src/pages/tools/advanced.astro                |  16 +-
 src/pages/tools/conversions.astro             |  17 +-
 src/pages/tools/identification.astro          |  16 +-
 src/pages/tools/index.astro                   |   5 +-
 src/pages/tools/lab.astro                     |  16 +-
 src/pages/tools/measurement.astro             |  15 +-
 src/pages/tools/optical.astro                 |  16 +-
 29 files changed, 271 insertions(+), 838 deletions(-)
 delete mode 100644 src/components/auth/LockGate.tsx
 delete mode 100644 src/components/auth/ProtectedAdvanced.tsx
 delete mode 100644 src/components/auth/ProtectedConversions.tsx
 delete mode 100644 src/components/auth/ProtectedGallery.tsx
 delete mode 100644 src/components/auth/ProtectedIdentification.tsx
 delete mode 100644 src/components/auth/ProtectedLab.tsx
 delete mode 100644 src/components/auth/ProtectedMeasurement.tsx
 delete mode 100644 src/components/auth/ProtectedOptical.tsx
 delete mode 100644 src/components/auth/ProtectedPlayground.tsx
 delete mode 100644 src/components/auth/ProtectedQuiz.tsx
 delete mode 100644 src/components/auth/useAuth.ts
 create mode 100644 src/components/quiz/QuizPage.tsx
 rename src/components/{auth/ProtectedTools.tsx => tools/ToolsHub.tsx} (58%)

diff --git a/public/_headers b/public/_headers
index 655d1d2..4a31ddc 100644
--- a/public/_headers
+++ b/public/_headers
@@ -3,7 +3,7 @@
   X-Frame-Options: DENY
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=(), interest-cohort=()
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://static.cloudflareinsights.com; script-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: blob:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://api.gemmology.dev https://cloudflareinsights.com https://cdn.jsdelivr.net; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
 
 # Long-cache versioned static assets (Astro hashed bundle)
diff --git a/src/components/auth/LockGate.tsx b/src/components/auth/LockGate.tsx
deleted file mode 100644
index c3d5837..0000000
--- a/src/components/auth/LockGate.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * LockGate Component - Protects page content with invite code authentication
- */
-
-import { useState, type ReactNode, type FormEvent } from 'react';
-import { useAuth } from './useAuth';
-import { Button } from '../ui/Button';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/Card';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/Tabs';
-import { cn } from '../ui/cn';
-
-interface LockGateProps {
-  children: ReactNode;
-}
-
-export function LockGate({ children }: LockGateProps) {
-  const { isAuthenticated, isLoading, verifyCode, requestAccess } = useAuth();
-
-  // Code entry state
-  const [code, setCode] = useState('');
-  const [codeError, setCodeError] = useState<string | null>(null);
-  const [codeLoading, setCodeLoading] = useState(false);
-
-  // Request form state
-  const [email, setEmail] = useState('');
-  const [reason, setReason] = useState('');
-  const [requestError, setRequestError] = useState<string | null>(null);
-  const [requestSuccess, setRequestSuccess] = useState(false);
-  const [requestLoading, setRequestLoading] = useState(false);
-
-  // Show loading state while checking session
-  if (isLoading) {
-    return (
-      <div className="min-h-[60vh] flex items-center justify-center">
-        <div className="animate-pulse text-slate-400">Loading...</div>
-      </div>
-    );
-  }
-
-  // If authenticated, render children
-  if (isAuthenticated) {
-    return <>{children}</>;
-  }
-
-  // Handle code submission
-  const handleCodeSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setCodeError(null);
-    setCodeLoading(true);
-
-    const result = await verifyCode(code.trim());
-
-    if (!result.success) {
-      setCodeError(result.error || 'Invalid code');
-    }
-    setCodeLoading(false);
-  };
-
-  // Handle request submission
-  const handleRequestSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setRequestError(null);
-    setRequestLoading(true);
-
-    const result = await requestAccess(email.trim(), reason.trim());
-
-    if (result.success) {
-      setRequestSuccess(true);
-    } else {
-      setRequestError(result.error || 'Failed to submit request');
-    }
-    setRequestLoading(false);
-  };
-
-  // Render lock overlay
-  return (
-    <div className="min-h-[80vh] flex items-center justify-center px-4 py-12 bg-gradient-to-b from-slate-50 to-white">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center">
-          <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-crystal-100 flex items-center justify-center">
-            <svg
-              className="h-6 w-6 text-crystal-700"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
-              />
-            </svg>
-          </div>
-          <CardTitle>Coming Soon</CardTitle>
-          <CardDescription>
-            This feature is still under development. Access is limited to early testers while we work on finishing it.
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent>
-          <Tabs defaultValue="code" className="w-full">
-            <TabsList className="w-full mb-6">
-              <TabsTrigger value="code" className="flex-1">
-                I have a code
-              </TabsTrigger>
-              <TabsTrigger value="request" className="flex-1">
-                Request access
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="code">
-              <form onSubmit={handleCodeSubmit} className="space-y-4">
-                <div>
-                  <label htmlFor="invite-code" className="block text-sm font-medium text-slate-700 mb-1">
-                    Invite Code
-                  </label>
-                  <input
-                    id="invite-code"
-                    type="text"
-                    value={code}
-                    onChange={(e) => setCode(e.target.value.toUpperCase())}
-                    placeholder="GEMSTONE-XXXX-XXXX"
-                    className={cn(
-                      'w-full px-3 py-2 rounded-lg border text-center font-mono tracking-wider',
-                      'focus:outline-none focus:ring-2 focus:ring-crystal-500 focus:border-transparent',
-                      codeError ? 'border-red-300 bg-red-50' : 'border-slate-300'
-                    )}
-                    autoComplete="off"
-                    autoFocus
-                  />
-                  {codeError && (
-                    <p className="mt-2 text-sm text-red-600">{codeError}</p>
-                  )}
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full"
-                  loading={codeLoading}
-                  disabled={!code.trim()}
-                >
-                  Unlock
-                </Button>
-              </form>
-            </TabsContent>
-
-            <TabsContent value="request">
-              {requestSuccess ? (
-                <div className="text-center py-4">
-                  <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
-                    <svg
-                      className="h-6 w-6 text-green-600"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M4.5 12.75l6 6 9-13.5"
-                      />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold text-slate-900 mb-2">
-                    Request Submitted
-                  </h3>
-                  <p className="text-sm text-slate-600">
-                    We'll review your request and send you an invite code by email.
-                  </p>
-                </div>
-              ) : (
-                <form onSubmit={handleRequestSubmit} className="space-y-4">
-                  <div>
-                    <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
-                      Email Address
-                    </label>
-                    <input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="you@example.com"
-                      className={cn(
-                        'w-full px-3 py-2 rounded-lg border',
-                        'focus:outline-none focus:ring-2 focus:ring-crystal-500 focus:border-transparent',
-                        requestError ? 'border-red-300 bg-red-50' : 'border-slate-300'
-                      )}
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label htmlFor="reason" className="block text-sm font-medium text-slate-700 mb-1">
-                      Why do you want access?
-                    </label>
-                    <textarea
-                      id="reason"
-                      value={reason}
-                      onChange={(e) => setReason(e.target.value)}
-                      placeholder="e.g., FGA student studying crystal morphology..."
-                      rows={3}
-                      className={cn(
-                        'w-full px-3 py-2 rounded-lg border resize-none',
-                        'focus:outline-none focus:ring-2 focus:ring-crystal-500 focus:border-transparent',
-                        'border-slate-300'
-                      )}
-                      required
-                      minLength={10}
-                    />
-                    <p className="mt-1 text-xs text-slate-500">
-                      Minimum 10 characters
-                    </p>
-                  </div>
-
-                  {requestError && (
-                    <p className="text-sm text-red-600">{requestError}</p>
-                  )}
-
-                  <Button
-                    type="submit"
-                    className="w-full"
-                    loading={requestLoading}
-                    disabled={!email.trim() || reason.trim().length < 10}
-                  >
-                    Submit Request
-                  </Button>
-                </form>
-              )}
-            </TabsContent>
-          </Tabs>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/src/components/auth/ProtectedAdvanced.tsx b/src/components/auth/ProtectedAdvanced.tsx
deleted file mode 100644
index 2fb8271..0000000
--- a/src/components/auth/ProtectedAdvanced.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Protected Advanced Analysis tools wrapper.
- */
-
-import { LockGate } from './LockGate';
-import { AdvancedTools } from '../advanced/AdvancedTools';
-
-export function ProtectedAdvanced() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Advanced Analysis</h1>
-            <p className="text-slate-600 mt-2">
-              Advanced gemmological analysis tools including treatment detection reference, origin determination characteristics, and gemstone cut proportion analyzer.
-            </p>
-          </div>
-          <AdvancedTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedConversions.tsx b/src/components/auth/ProtectedConversions.tsx
deleted file mode 100644
index e2a23e3..0000000
--- a/src/components/auth/ProtectedConversions.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Protected Conversions tools component wrapper.
- */
-
-import { LockGate } from './LockGate';
-import { ConversionTools } from '../calculator';
-
-export function ProtectedConversions() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Unit Conversions</h1>
-            <p className="text-slate-600 mt-2">
-              Convert between carats, grams, millimeters, inches, Celsius, Fahrenheit, and calculate price per carat with markup.
-            </p>
-          </div>
-          <ConversionTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedGallery.tsx b/src/components/auth/ProtectedGallery.tsx
deleted file mode 100644
index 3aeb4b0..0000000
--- a/src/components/auth/ProtectedGallery.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Protected Gallery - Wraps Gallery with LockGate
- */
-
-import { LockGate } from './LockGate';
-import { Gallery } from '../gallery/Gallery';
-import { Container, SectionHeader } from '../ui';
-
-interface ProtectedGalleryProps {
-  initialSystem?: string;
-  initialSearch?: string;
-  initialOrigin?: string;
-}
-
-export function ProtectedGallery({ initialSystem = '', initialSearch = '', initialOrigin = '' }: ProtectedGalleryProps) {
-  return (
-    <LockGate>
-      <div className="bg-gradient-to-b from-crystal-50 to-white min-h-[80vh]">
-        <Container size="xl" padding="md">
-          <SectionHeader
-            title="Crystal Gallery"
-            description="Explore our collection of 90+ mineral presets with FGA-accurate crystallographic data. Click any crystal to view detailed properties and open in the playground."
-          />
-          <Gallery
-            initialSystem={initialSystem}
-            initialSearch={initialSearch}
-            initialOrigin={initialOrigin}
-          />
-        </Container>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedIdentification.tsx b/src/components/auth/ProtectedIdentification.tsx
deleted file mode 100644
index a3c837b..0000000
--- a/src/components/auth/ProtectedIdentification.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Protected Gem Identification tools wrapper.
- */
-
-import { LockGate } from './LockGate';
-import { IdentificationTools } from '../identification/IdentificationTools';
-
-export function ProtectedIdentification() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Gem Identification</h1>
-            <p className="text-slate-600 mt-2">
-              Comprehensive identification tools including side-by-side gem comparison, Mohs hardness reference, and cleavage/fracture patterns.
-            </p>
-          </div>
-          <IdentificationTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedLab.tsx b/src/components/auth/ProtectedLab.tsx
deleted file mode 100644
index d30876a..0000000
--- a/src/components/auth/ProtectedLab.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Protected Lab tools wrapper.
- */
-
-import { LockGate } from './LockGate';
-import { LabTools } from '../lab/LabTools';
-
-export function ProtectedLab() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Lab Equipment</h1>
-            <p className="text-slate-600 mt-2">
-              Reference tools for gemological lab equipment including Chelsea filter reactions, spectroscope absorption lines, and heavy liquid separation.
-            </p>
-          </div>
-          <LabTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedMeasurement.tsx b/src/components/auth/ProtectedMeasurement.tsx
deleted file mode 100644
index ef650b7..0000000
--- a/src/components/auth/ProtectedMeasurement.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Protected Measurement tools component wrapper.
- * Wraps the measurement tools interface with LockGate authentication.
- */
-
-import { LockGate } from './LockGate';
-import { MeasurementTools } from '../calculator';
-
-export function ProtectedMeasurement() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          {/* Header */}
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Measurement & Calculation</h1>
-            <p className="text-slate-600 mt-2">
-              Essential measurement and calculation tools for gem identification, including SG, RI, birefringence, dispersion, and carat estimation.
-            </p>
-          </div>
-
-          {/* Tools */}
-          <MeasurementTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedOptical.tsx b/src/components/auth/ProtectedOptical.tsx
deleted file mode 100644
index 59a15e7..0000000
--- a/src/components/auth/ProtectedOptical.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Protected Optical tools wrapper.
- */
-
-import { LockGate } from './LockGate';
-import { OpticalTools } from '../optical/OpticalTools';
-
-export function ProtectedOptical() {
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Optical Properties</h1>
-            <p className="text-slate-600 mt-2">
-              Interactive tools for optical testing including dichroscope interpretation, polariscope reactions, refractometer reading practice, and pleochroism reference.
-            </p>
-          </div>
-          <OpticalTools />
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedPlayground.tsx b/src/components/auth/ProtectedPlayground.tsx
deleted file mode 100644
index 4187b7f..0000000
--- a/src/components/auth/ProtectedPlayground.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Protected Playground - Wraps Playground with LockGate
- */
-
-import { LockGate } from './LockGate';
-import { Playground } from '../playground/Playground';
-
-interface ProtectedPlaygroundProps {
-  initialCDL?: string;
-}
-
-export function ProtectedPlayground({ initialCDL }: ProtectedPlaygroundProps) {
-  return (
-    <LockGate>
-      <Playground initialCDL={initialCDL} />
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/ProtectedQuiz.tsx b/src/components/auth/ProtectedQuiz.tsx
deleted file mode 100644
index 71ea487..0000000
--- a/src/components/auth/ProtectedQuiz.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Protected Quiz component wrapper.
- * Wraps the quiz interface with LockGate authentication.
- */
-
-import { useState, useEffect } from 'react';
-import { LockGate } from './LockGate';
-import { QuizSetup, Quiz, Exam } from '../quiz';
-import type { Question, QuizConfig, Category, LearnEntry } from '../../lib/quiz';
-import { generateQuestions, selectQuestions, getQuestionStats } from '../../lib/quiz';
-
-interface ProtectedQuizProps {
-  /** Learn content entries for generating questions */
-  learnEntries: LearnEntry[];
-}
-
-export function ProtectedQuiz({ learnEntries }: ProtectedQuizProps) {
-  const [allQuestions, setAllQuestions] = useState<Question[]>([]);
-  const [selectedQuestions, setSelectedQuestions] = useState<Question[]>([]);
-  const [config, setConfig] = useState<QuizConfig | null>(null);
-  const [timeLimit, setTimeLimit] = useState<number>(30 * 60);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Generate all questions on mount
-  useEffect(() => {
-    const questions = generateQuestions(learnEntries);
-    setAllQuestions(questions);
-    setIsLoading(false);
-  }, [learnEntries]);
-
-  // Calculate available questions per category
-  const stats = getQuestionStats(allQuestions);
-  const availableQuestions = stats.byCategory as Record<Category, number>;
-
-  // Handle quiz start
-  const handleStart = (newConfig: QuizConfig, examTimeLimit?: number) => {
-    const questions = selectQuestions(allQuestions, newConfig);
-    setSelectedQuestions(questions);
-    setConfig(newConfig);
-    if (examTimeLimit) {
-      setTimeLimit(examTimeLimit);
-    }
-  };
-
-  // Handle going back to setup
-  const handleBack = () => {
-    setConfig(null);
-    setSelectedQuestions([]);
-  };
-
-  return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-4xl mx-auto px-4">
-          {/* Header */}
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Quiz</h1>
-            <p className="text-slate-600 mt-2">
-              Test your gemmology knowledge with questions from the learn content.
-            </p>
-          </div>
-
-          {isLoading ? (
-            <div className="text-center py-12">
-              <div className="animate-pulse text-slate-400">Loading questions...</div>
-            </div>
-          ) : config && selectedQuestions.length > 0 ? (
-            config.mode === 'exam' ? (
-              <Exam
-                config={config}
-                questions={selectedQuestions}
-                timeLimit={timeLimit}
-                onBack={handleBack}
-              />
-            ) : (
-              <Quiz
-                config={config}
-                questions={selectedQuestions}
-                onBack={handleBack}
-              />
-            )
-          ) : (
-            <QuizSetup
-              availableQuestions={availableQuestions}
-              onStart={handleStart}
-              showExamMode={true}
-            />
-          )}
-        </div>
-      </div>
-    </LockGate>
-  );
-}
diff --git a/src/components/auth/useAuth.ts b/src/components/auth/useAuth.ts
deleted file mode 100644
index be25a1b..0000000
--- a/src/components/auth/useAuth.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Auth Hook - Session management for invite code system
- */
-
-import { useState, useEffect, useCallback } from 'react';
-
-const STORAGE_KEY = 'gemmology_session';
-const API_URL = import.meta.env.PUBLIC_API_URL || 'https://api.gemmology.dev';
-
-interface SessionData {
-  token: string;
-  exp: number; // Expiration timestamp
-}
-
-interface AuthState {
-  isAuthenticated: boolean;
-  isLoading: boolean;
-}
-
-interface VerifyResult {
-  success: boolean;
-  error?: string;
-}
-
-interface RequestResult {
-  success: boolean;
-  message?: string;
-  error?: string;
-}
-
-/**
- * Parse JWT payload without verifying signature (client-side only)
- */
-function parseJwtPayload(token: string): { exp?: number } | null {
-  try {
-    const parts = token.split('.');
-    if (parts.length !== 3) return null;
-    const payload = JSON.parse(atob(parts[1]));
-    return payload;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Check if a session is still valid (not expired)
- */
-function isSessionValid(session: SessionData | null): boolean {
-  if (!session) return false;
-  // Add 1 minute buffer for clock skew
-  return session.exp * 1000 > Date.now() + 60000;
-}
-
-/**
- * Get session from localStorage
- */
-function getStoredSession(): SessionData | null {
-  if (typeof window === 'undefined') return null;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (!stored) return null;
-    return JSON.parse(stored);
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Save session to localStorage
- */
-function storeSession(token: string): void {
-  const payload = parseJwtPayload(token);
-  if (!payload?.exp) return;
-
-  const session: SessionData = {
-    token,
-    exp: payload.exp,
-  };
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
-}
-
-/**
- * Clear session from localStorage
- */
-function clearSession(): void {
-  localStorage.removeItem(STORAGE_KEY);
-}
-
-/**
- * Hook for managing authentication state
- */
-export function useAuth(): AuthState & {
-  verifyCode: (code: string) => Promise<VerifyResult>;
-  requestAccess: (email: string, reason: string) => Promise<RequestResult>;
-  logout: () => void;
-} {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Check session on mount
-  useEffect(() => {
-    const session = getStoredSession();
-    if (isSessionValid(session)) {
-      setIsAuthenticated(true);
-    } else if (session) {
-      // Clear expired session
-      clearSession();
-    }
-    setIsLoading(false);
-  }, []);
-
-  // Verify an invite code
-  const verifyCode = useCallback(async (code: string): Promise<VerifyResult> => {
-    try {
-      const response = await fetch(`${API_URL}/api/auth/verify`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code }),
-      });
-
-      const data = await response.json();
-
-      if (data.valid && data.token) {
-        storeSession(data.token);
-        setIsAuthenticated(true);
-        return { success: true };
-      }
-
-      return { success: false, error: data.error || 'Invalid code' };
-    } catch (error) {
-      console.error('Verify code error:', error);
-      return { success: false, error: 'Failed to verify code. Please try again.' };
-    }
-  }, []);
-
-  // Request access
-  const requestAccess = useCallback(async (email: string, reason: string): Promise<RequestResult> => {
-    try {
-      const response = await fetch(`${API_URL}/api/auth/request`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, reason }),
-      });
-
-      const data = await response.json();
-
-      if (data.submitted) {
-        return { success: true, message: data.message };
-      }
-
-      return { success: false, error: data.error || 'Failed to submit request' };
-    } catch (error) {
-      console.error('Request access error:', error);
-      return { success: false, error: 'Failed to submit request. Please try again.' };
-    }
-  }, []);
-
-  // Logout (clear session)
-  const logout = useCallback(() => {
-    clearSession();
-    setIsAuthenticated(false);
-  }, []);
-
-  return {
-    isAuthenticated,
-    isLoading,
-    verifyCode,
-    requestAccess,
-    logout,
-  };
-}
diff --git a/src/components/learn/icons.ts b/src/components/learn/icons.ts
index 784a27c..0adcfe4 100644
--- a/src/components/learn/icons.ts
+++ b/src/components/learn/icons.ts
@@ -69,49 +69,49 @@ export const crystalSystemColors: Record<CrystalSystem, {
   accent: string;
 }> = {
   cubic: {
-    bg: 'bg-amber-500',
+    bg: 'bg-amber-700',
     bgLight: 'bg-amber-50',
     border: 'border-amber-200',
     text: 'text-amber-800',
     accent: 'bg-amber-100',
   },
   hexagonal: {
-    bg: 'bg-cyan-500',
+    bg: 'bg-cyan-700',
     bgLight: 'bg-cyan-50',
     border: 'border-cyan-200',
     text: 'text-cyan-800',
     accent: 'bg-cyan-100',
   },
   trigonal: {
-    bg: 'bg-violet-500',
+    bg: 'bg-violet-700',
     bgLight: 'bg-violet-50',
     border: 'border-violet-200',
     text: 'text-violet-800',
     accent: 'bg-violet-100',
   },
   tetragonal: {
-    bg: 'bg-lime-500',
+    bg: 'bg-lime-700',
     bgLight: 'bg-lime-50',
     border: 'border-lime-200',
     text: 'text-lime-800',
     accent: 'bg-lime-100',
   },
   orthorhombic: {
-    bg: 'bg-orange-500',
+    bg: 'bg-orange-700',
     bgLight: 'bg-orange-50',
     border: 'border-orange-200',
     text: 'text-orange-800',
     accent: 'bg-orange-100',
   },
   monoclinic: {
-    bg: 'bg-rose-500',
+    bg: 'bg-rose-700',
     bgLight: 'bg-rose-50',
     border: 'border-rose-200',
     text: 'text-rose-800',
     accent: 'bg-rose-100',
   },
   triclinic: {
-    bg: 'bg-teal-500',
+    bg: 'bg-teal-700',
     bgLight: 'bg-teal-50',
     border: 'border-teal-200',
     text: 'text-teal-800',
diff --git a/src/components/quiz/QuizPage.tsx b/src/components/quiz/QuizPage.tsx
new file mode 100644
index 0000000..2665df9
--- /dev/null
+++ b/src/components/quiz/QuizPage.tsx
@@ -0,0 +1,84 @@
+/**
+ * QuizPage - top-level quiz interface (practice + exam modes).
+ */
+
+import { useState, useEffect } from 'react';
+import { QuizSetup, Quiz, Exam } from './index';
+import type { Question, QuizConfig, Category, LearnEntry } from '../../lib/quiz';
+import { generateQuestions, selectQuestions, getQuestionStats } from '../../lib/quiz';
+
+interface QuizPageProps {
+  /** Learn content entries for generating questions */
+  learnEntries: LearnEntry[];
+}
+
+export function QuizPage({ learnEntries }: QuizPageProps) {
+  const [allQuestions, setAllQuestions] = useState<Question[]>([]);
+  const [selectedQuestions, setSelectedQuestions] = useState<Question[]>([]);
+  const [config, setConfig] = useState<QuizConfig | null>(null);
+  const [timeLimit, setTimeLimit] = useState<number>(30 * 60);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const questions = generateQuestions(learnEntries);
+    setAllQuestions(questions);
+    setIsLoading(false);
+  }, [learnEntries]);
+
+  const stats = getQuestionStats(allQuestions);
+  const availableQuestions = stats.byCategory as Record<Category, number>;
+
+  const handleStart = (newConfig: QuizConfig, examTimeLimit?: number) => {
+    const questions = selectQuestions(allQuestions, newConfig);
+    setSelectedQuestions(questions);
+    setConfig(newConfig);
+    if (examTimeLimit) {
+      setTimeLimit(examTimeLimit);
+    }
+  };
+
+  const handleBack = () => {
+    setConfig(null);
+    setSelectedQuestions([]);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-slate-900">Quiz</h1>
+          <p className="text-slate-600 mt-2">
+            Test your gemmology knowledge with questions from the learn content.
+          </p>
+        </div>
+
+        {isLoading ? (
+          <div className="text-center py-12">
+            <div className="animate-pulse text-slate-400">Loading questions...</div>
+          </div>
+        ) : config && selectedQuestions.length > 0 ? (
+          config.mode === 'exam' ? (
+            <Exam
+              config={config}
+              questions={selectedQuestions}
+              timeLimit={timeLimit}
+              onBack={handleBack}
+            />
+          ) : (
+            <Quiz
+              config={config}
+              questions={selectedQuestions}
+              onBack={handleBack}
+            />
+          )
+        ) : (
+          <QuizSetup
+            availableQuestions={availableQuestions}
+            onStart={handleStart}
+            showExamMode={true}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/quiz/study/StudyReviewScreen.tsx b/src/components/quiz/study/StudyReviewScreen.tsx
index f5fc6fe..70e53af 100644
--- a/src/components/quiz/study/StudyReviewScreen.tsx
+++ b/src/components/quiz/study/StudyReviewScreen.tsx
@@ -1,7 +1,7 @@
 /**
  * StudyReviewScreen — page-level wrapper that surfaces SM-2 due items.
  *
- * Used by `src/pages/study/review.astro`. Auth-gated via LockGate.
+ * Used by `src/pages/study/review.astro`.
  *
  * Behaviour:
  *  - Generate the full question pool from learn entries
@@ -11,7 +11,6 @@
  */
 
 import { useEffect, useState } from 'react';
-import { LockGate } from '../../auth/LockGate';
 import { Quiz } from '../Quiz';
 import { Button } from '../../ui/Button';
 import {
@@ -53,34 +52,32 @@ export function StudyReviewScreen({ learnEntries }: StudyReviewScreenProps) {
   };
 
   return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-4xl mx-auto px-4">
-          <header className="mb-8">
-            <h1 className="text-3xl font-bold text-slate-900">Review</h1>
-            <p className="text-slate-600 mt-2">
-              Spaced-repetition queue — items the scheduler says you should see today.
-            </p>
-          </header>
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+      <div className="max-w-4xl mx-auto px-4">
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold text-slate-900">Review</h1>
+          <p className="text-slate-600 mt-2">
+            Spaced-repetition queue — items the scheduler says you should see today.
+          </p>
+        </header>
 
-          {dueQuestions === null ? (
-            <div className="text-center py-12 animate-pulse text-slate-400">
-              Loading due items…
-            </div>
-          ) : dueQuestions.length === 0 ? (
-            <EmptyReviewState />
-          ) : (
-            <Quiz
-              config={config}
-              questions={dueQuestions}
-              onBack={() => {
-                window.location.href = '/quiz';
-              }}
-            />
-          )}
-        </div>
+        {dueQuestions === null ? (
+          <div className="text-center py-12 animate-pulse text-slate-400">
+            Loading due items…
+          </div>
+        ) : dueQuestions.length === 0 ? (
+          <EmptyReviewState />
+        ) : (
+          <Quiz
+            config={config}
+            questions={dueQuestions}
+            onBack={() => {
+              window.location.href = '/quiz';
+            }}
+          />
+        )}
       </div>
-    </LockGate>
+    </div>
   );
 }
 
diff --git a/src/components/quiz/study/StudySettingsScreen.tsx b/src/components/quiz/study/StudySettingsScreen.tsx
index 8fa2134..859ff1e 100644
--- a/src/components/quiz/study/StudySettingsScreen.tsx
+++ b/src/components/quiz/study/StudySettingsScreen.tsx
@@ -2,11 +2,10 @@
  * StudySettingsScreen — page-level wrapper that wires the StudySettingsPanel
  * and ExportImportPanel against the real LocalStudyStore.
  *
- * Used by `src/pages/study/settings.astro`. Auth-gated via LockGate.
+ * Used by `src/pages/study/settings.astro`.
  */
 
 import { useEffect, useState } from 'react';
-import { LockGate } from '../../auth/LockGate';
 import { StudySettingsPanel } from './StudySettingsPanel';
 import { ExportImportPanel } from './ExportImportPanel';
 import { getStudyStore } from '../../../lib/quiz/store/local';
@@ -39,28 +38,26 @@ export function StudySettingsScreen() {
   };
 
   return (
-    <LockGate>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
-        <div className="max-w-3xl mx-auto px-4 space-y-8">
-          <header>
-            <h1 className="text-3xl font-bold text-slate-900">Study settings</h1>
-            <p className="text-slate-600 mt-2">
-              Customise how the study system schedules and presents practice questions.
-            </p>
-          </header>
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+      <div className="max-w-3xl mx-auto px-4 space-y-8">
+        <header>
+          <h1 className="text-3xl font-bold text-slate-900">Study settings</h1>
+          <p className="text-slate-600 mt-2">
+            Customise how the study system schedules and presents practice questions.
+          </p>
+        </header>
 
-          {loaded ? (
-            <>
-              <StudySettingsPanel value={settings} onChange={handleChange} />
-              <ExportImportPanel store={store} />
-            </>
-          ) : (
-            <div className="text-center py-12 animate-pulse text-slate-400">
-              Loading settings…
-            </div>
-          )}
-        </div>
+        {loaded ? (
+          <>
+            <StudySettingsPanel value={settings} onChange={handleChange} />
+            <ExportImportPanel store={store} />
+          </>
+        ) : (
+          <div className="text-center py-12 animate-pulse text-slate-400">
+            Loading settings…
+          </div>
+        )}
       </div>
-    </LockGate>
+    </div>
   );
 }
diff --git a/src/components/auth/ProtectedTools.tsx b/src/components/tools/ToolsHub.tsx
similarity index 58%
rename from src/components/auth/ProtectedTools.tsx
rename to src/components/tools/ToolsHub.tsx
index 6155aed..35b9843 100644
--- a/src/components/auth/ProtectedTools.tsx
+++ b/src/components/tools/ToolsHub.tsx
@@ -1,8 +1,7 @@
 /**
- * Protected Tools Hub - Wraps Tools hub with LockGate
+ * ToolsHub - landing page listing all gemmological tool categories.
  */
 
-import { LockGate } from './LockGate';
 import { Container } from '../ui/Container';
 import { Card, CardTitle, CardDescription } from '../ui/Card';
 import { IconBox } from '../ui/IconBox';
@@ -61,45 +60,41 @@ const iconPaths: Record<string, string> = {
   chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
 };
 
-export function ProtectedTools() {
+export function ToolsHub() {
   return (
-    <LockGate>
-      <div className="bg-gradient-to-b from-slate-50 to-white min-h-screen py-12">
-        <Container size="xl" padding="md">
-          {/* Header */}
-          <div className="max-w-3xl pb-8 border-b border-slate-200">
-            <h1 className="text-4xl font-bold text-slate-900">Tools</h1>
-            <p className="mt-4 text-lg text-slate-600">
-              Professional gemmological tools for calculations, conversions, and reference.
-            </p>
-          </div>
+    <div className="bg-gradient-to-b from-slate-50 to-white min-h-screen py-12">
+      <Container size="xl" padding="md">
+        <div className="max-w-3xl pb-8 border-b border-slate-200">
+          <h1 className="text-4xl font-bold text-slate-900">Tools</h1>
+          <p className="mt-4 text-lg text-slate-600">
+            Professional gemmological tools for calculations, conversions, and reference.
+          </p>
+        </div>
 
-          {/* Tools Grid */}
-          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {tools.map((tool) => (
-              <a key={tool.title} href={tool.href} className="group">
-                <Card hover padding="lg" className="h-full">
-                  <div className="flex items-start gap-4">
-                    <IconBox variant={tool.variant} size="md" className="shrink-0 group-hover:scale-105 transition-transform">
-                      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={iconPaths[tool.icon]} />
-                      </svg>
-                    </IconBox>
-                    <div className="flex-1 min-w-0">
-                      <CardTitle className="text-lg group-hover:text-crystal-700 transition-colors">
-                        {tool.title}
-                      </CardTitle>
-                      <CardDescription className="mt-2">
-                        {tool.description}
-                      </CardDescription>
-                    </div>
+        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {tools.map((tool) => (
+            <a key={tool.title} href={tool.href} className="group">
+              <Card hover padding="lg" className="h-full">
+                <div className="flex items-start gap-4">
+                  <IconBox variant={tool.variant} size="md" className="shrink-0 group-hover:scale-105 transition-transform">
+                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={iconPaths[tool.icon]} />
+                    </svg>
+                  </IconBox>
+                  <div className="flex-1 min-w-0">
+                    <CardTitle className="text-lg group-hover:text-crystal-700 transition-colors">
+                      {tool.title}
+                    </CardTitle>
+                    <CardDescription className="mt-2">
+                      {tool.description}
+                    </CardDescription>
                   </div>
-                </Card>
-              </a>
-            ))}
-          </div>
-        </Container>
-      </div>
-    </LockGate>
+                </div>
+              </Card>
+            </a>
+          ))}
+        </div>
+      </Container>
+    </div>
   );
 }
diff --git a/src/pages/gallery/index.astro b/src/pages/gallery/index.astro
index aecf325..baa8096 100644
--- a/src/pages/gallery/index.astro
+++ b/src/pages/gallery/index.astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedGallery } from '../../components/auth/ProtectedGallery';
+import { Gallery } from '../../components/gallery/Gallery';
+import { Container, SectionHeader } from '../../components/ui';
 import { getSiteStats } from '../../lib/stats';
 
 const url = Astro.url;
@@ -19,10 +20,18 @@ const { familyCount } = await getSiteStats();
   description={`Explore ${familyCount} mineral families with FGA-accurate crystallographic data and interactive visualizations.`}
   canonical={canonicalURL}
 >
-  <ProtectedGallery
-    client:load
-    initialSystem={initialSystem}
-    initialSearch={initialSearch}
-    initialOrigin={initialOrigin}
-  />
+  <div class="bg-gradient-to-b from-crystal-50 to-white min-h-[80vh]">
+    <Container size="xl" padding="md">
+      <SectionHeader
+        title="Crystal Gallery"
+        description={`Explore ${familyCount} mineral families with FGA-accurate crystallographic data. Click any crystal to view detailed properties and open in the playground.`}
+      />
+      <Gallery
+        client:load
+        initialSystem={initialSystem}
+        initialSearch={initialSearch}
+        initialOrigin={initialOrigin}
+      />
+    </Container>
+  </div>
 </BaseLayout>
diff --git a/src/pages/playground.astro b/src/pages/playground.astro
index acc2215..56a7803 100644
--- a/src/pages/playground.astro
+++ b/src/pages/playground.astro
@@ -1,6 +1,6 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import { ProtectedPlayground } from '../components/auth/ProtectedPlayground';
+import { Playground } from '../components/playground/Playground';
 
 // Get CDL from query string if present
 const url = new URL(Astro.request.url);
@@ -12,7 +12,7 @@ const initialCDL = url.searchParams.get('cdl') || undefined;
   description="Interactive Crystal Description Language editor with live preview, syntax highlighting, and multi-format export."
 >
   <div class="h-[calc(100vh-4rem)]">
-    <ProtectedPlayground client:load initialCDL={initialCDL} />
+    <Playground client:load initialCDL={initialCDL} />
   </div>
 </BaseLayout>
 
diff --git a/src/pages/quiz/index.astro b/src/pages/quiz/index.astro
index fe9fc44..72f4edc 100644
--- a/src/pages/quiz/index.astro
+++ b/src/pages/quiz/index.astro
@@ -1,17 +1,14 @@
 ---
 /**
  * Quiz hub page.
- * Protected by LockGate - requires authentication to access.
  */
 import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedQuiz } from '../../components/auth/ProtectedQuiz';
+import { QuizPage } from '../../components/quiz/QuizPage';
 import type { LearnEntry } from '../../lib/quiz';
 
-// Get all learn entries for question generation
 const learnEntries = await getCollection('learn');
 
-// Transform to LearnEntry format expected by quiz system
 const entries: LearnEntry[] = learnEntries.map(entry => ({
   id: entry.id,
   data: {
@@ -27,7 +24,6 @@ const entries: LearnEntry[] = learnEntries.map(entry => ({
 <BaseLayout
   title="Quiz"
   description="Test your gemmology knowledge with interactive quizzes covering crystallography, optical properties, treatments, and more."
-  noindex={true}
 >
-  <ProtectedQuiz client:load learnEntries={entries} />
+  <QuizPage client:load learnEntries={entries} />
 </BaseLayout>
diff --git a/src/pages/study/review.astro b/src/pages/study/review.astro
index 78413d2..40a6b99 100644
--- a/src/pages/study/review.astro
+++ b/src/pages/study/review.astro
@@ -2,8 +2,6 @@
 /**
  * Study review — express "show me what's due" route. Bypasses the QuizSetup
  * screen and surfaces only items that the SM-2 scheduler marks as due now.
- *
- * Auth-gated by LockGate (rendered inside the React shell).
  */
 import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
diff --git a/src/pages/study/settings.astro b/src/pages/study/settings.astro
index 613b3be..e516903 100644
--- a/src/pages/study/settings.astro
+++ b/src/pages/study/settings.astro
@@ -1,7 +1,7 @@
 ---
 /**
  * Study settings — user-tunable study system preferences and JSON
- * export/import. Auth-gated by LockGate (rendered inside the React shell).
+ * export/import.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { StudySettingsScreen } from '../../components/quiz/study/StudySettingsScreen';
diff --git a/src/pages/tools/advanced.astro b/src/pages/tools/advanced.astro
index 081eda4..dd7dc7e 100644
--- a/src/pages/tools/advanced.astro
+++ b/src/pages/tools/advanced.astro
@@ -3,12 +3,22 @@
  * Advanced Analysis tools page.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedAdvanced } from '../../components/auth/ProtectedAdvanced';
+import { AdvancedTools } from '../../components/advanced/AdvancedTools';
 ---
 
 <BaseLayout
   title="Advanced Analysis"
-  description="Advanced gemmological analysis including treatment detection, origin determination, and cut proportion evaluation."
+  description="Treatment detection, origin determination, and gemstone proportion analysis tools."
 >
-  <ProtectedAdvanced client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Advanced Analysis</h1>
+        <p class="text-slate-600 mt-2">
+          Advanced gemmological analysis tools including treatment detection reference, origin determination characteristics, and gemstone cut proportion analyzer.
+        </p>
+      </div>
+      <AdvancedTools client:load />
+    </div>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tools/conversions.astro b/src/pages/tools/conversions.astro
index ee197a7..29e8341 100644
--- a/src/pages/tools/conversions.astro
+++ b/src/pages/tools/conversions.astro
@@ -1,15 +1,24 @@
 ---
 /**
  * Unit Conversions tools page.
- * Protected by LockGate - requires authentication to access.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedConversions } from '../../components/auth/ProtectedConversions';
+import { ConversionTools } from '../../components/calculator';
 ---
 
 <BaseLayout
   title="Unit Conversions"
-  description="Unit conversion tools for weight, length, temperature, and price calculations."
+  description="Convert between carats, grams, millimeters, inches, Celsius, Fahrenheit, and calculate price per carat with markup."
 >
-  <ProtectedConversions client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Unit Conversions</h1>
+        <p class="text-slate-600 mt-2">
+          Convert between carats, grams, millimeters, inches, Celsius, Fahrenheit, and calculate price per carat with markup.
+        </p>
+      </div>
+      <ConversionTools client:load />
+    </div>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tools/identification.astro b/src/pages/tools/identification.astro
index 501e371..a07a864 100644
--- a/src/pages/tools/identification.astro
+++ b/src/pages/tools/identification.astro
@@ -3,12 +3,22 @@
  * Gem Identification tools page.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedIdentification } from '../../components/auth/ProtectedIdentification';
+import { IdentificationTools } from '../../components/identification/IdentificationTools';
 ---
 
 <BaseLayout
   title="Gem Identification"
-  description="Gem identification tools including side-by-side comparison, Mohs hardness reference, and cleavage/fracture guide."
+  description="Side-by-side gem comparison, Mohs hardness reference, and cleavage/fracture identification tools."
 >
-  <ProtectedIdentification client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Gem Identification</h1>
+        <p class="text-slate-600 mt-2">
+          Comprehensive identification tools including side-by-side gem comparison, Mohs hardness reference, and cleavage/fracture patterns.
+        </p>
+      </div>
+      <IdentificationTools client:load />
+    </div>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tools/index.astro b/src/pages/tools/index.astro
index 4bc193d..f9ffc79 100644
--- a/src/pages/tools/index.astro
+++ b/src/pages/tools/index.astro
@@ -1,15 +1,14 @@
 ---
 /**
  * Tools hub page.
- * Lists available tools and calculators.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedTools } from '../../components/auth/ProtectedTools';
+import { ToolsHub } from '../../components/tools/ToolsHub';
 ---
 
 <BaseLayout
   title="Tools"
   description="Gemmological tools and calculators for professionals and students."
 >
-  <ProtectedTools client:load />
+  <ToolsHub client:load />
 </BaseLayout>
diff --git a/src/pages/tools/lab.astro b/src/pages/tools/lab.astro
index c9b638f..47f992e 100644
--- a/src/pages/tools/lab.astro
+++ b/src/pages/tools/lab.astro
@@ -3,12 +3,22 @@
  * Lab Equipment tools page.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedLab } from '../../components/auth/ProtectedLab';
+import { LabTools } from '../../components/lab/LabTools';
 ---
 
 <BaseLayout
   title="Lab Equipment"
-  description="Lab equipment reference including Chelsea filter, spectroscope line calculator, and heavy liquid SG separation."
+  description="Reference tools for gemmological lab equipment: Chelsea filter, spectroscope, and heavy liquid SG separation."
 >
-  <ProtectedLab client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Lab Equipment</h1>
+        <p class="text-slate-600 mt-2">
+          Reference tools for gemological lab equipment including Chelsea filter reactions, spectroscope absorption lines, and heavy liquid separation.
+        </p>
+      </div>
+      <LabTools client:load />
+    </div>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tools/measurement.astro b/src/pages/tools/measurement.astro
index a9df4bf..412eb31 100644
--- a/src/pages/tools/measurement.astro
+++ b/src/pages/tools/measurement.astro
@@ -1,15 +1,24 @@
 ---
 /**
  * Measurement & Calculation tools page.
- * Protected by LockGate - requires authentication to access.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedMeasurement } from '../../components/auth/ProtectedMeasurement';
+import { MeasurementTools } from '../../components/calculator';
 ---
 
 <BaseLayout
   title="Measurement & Calculation"
   description="Gemmological measurement and calculation tools including SG, RI, birefringence, dispersion, critical angle, carat estimation, and density."
 >
-  <ProtectedMeasurement client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Measurement & Calculation</h1>
+        <p class="text-slate-600 mt-2">
+          Essential measurement and calculation tools for gem identification, including SG, RI, birefringence, dispersion, and carat estimation.
+        </p>
+      </div>
+      <MeasurementTools client:load />
+    </div>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tools/optical.astro b/src/pages/tools/optical.astro
index 88f64e1..030ec52 100644
--- a/src/pages/tools/optical.astro
+++ b/src/pages/tools/optical.astro
@@ -3,12 +3,22 @@
  * Optical Properties tools page.
  */
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { ProtectedOptical } from '../../components/auth/ProtectedOptical';
+import { OpticalTools } from '../../components/optical/OpticalTools';
 ---
 
 <BaseLayout
   title="Optical Properties"
-  description="Optical property tools including dichroscope, polariscope, refractometer simulator, and pleochroism reference."
+  description="Interactive tools for optical testing: dichroscope, polariscope, refractometer simulator, and pleochroism reference."
 >
-  <ProtectedOptical client:load />
+  <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white py-12">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-slate-900">Optical Properties</h1>
+        <p class="text-slate-600 mt-2">
+          Interactive tools for optical testing including dichroscope interpretation, polariscope reactions, refractometer reading practice, and pleochroism reference.
+        </p>
+      </div>
+      <OpticalTools client:load />
+    </div>
+  </div>
 </BaseLayout>