Spaces:

FocusGuard
/

test_final

Sleeping

App Files Files Community

Abdelrahman Almatrooshi commited on 27 days ago

Commit

a008ed3

2 Parent(s): afda79c 7d6010e

Merge hf-final_v2/main (HF Space final_v2) into hugging_face_final

Browse files

Files changed (12) hide show

.coverage +0 -0
checkpoints/L2CSNet_gaze360.pkl +3 -0
checkpoints/hybrid_focus_config.json +3 -7
src/App.css +2047 -1992
src/App.jsx +125 -91
src/components/FocusPageLocal.jsx +1040 -944
src/components/Help.jsx +44 -15
src/components/Home.jsx +22 -18
src/components/Records.jsx +757 -645
src/src/App.css +2047 -0
src/src/App.jsx +125 -0
ui/pipeline.py +8 -5

.coverage DELETED Viewed

Binary file (86 kB)

checkpoints/L2CSNet_gaze360.pkl ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:8a7f3480d868dd48261e1d59f915b0ef0bb33ea12ea00938fb2168f212080665
+size 95849977

checkpoints/hybrid_focus_config.json CHANGED Viewed

@@ -1,14 +1,10 @@
 {
-  "use_xgb": true,
   "w_mlp": 0.3,
-  "w_xgb": 0.3,
   "w_geo": 0.7,
-  "threshold": 0.46117913373775393,
   "use_yawn_veto": true,
   "geo_face_weight": 0.7,
   "geo_eye_weight": 0.3,
-  "mar_yawn_threshold": 0.55,
-  "metric": "f1",
-  "combiner": "logistic",
-  "combiner_path": "hybrid_combiner.joblib"
 }

 {
+  "use_xgb": false,
   "w_mlp": 0.3,
   "w_geo": 0.7,
+  "threshold": 0.35,
   "use_yawn_veto": true,
   "geo_face_weight": 0.7,
   "geo_eye_weight": 0.3,
+  "mar_yawn_threshold": 0.55
 }

src/App.css CHANGED Viewed

@@ -1,1992 +1,2047 @@
-/* =========================================
-   1. REACT layout setting
-   ========================================= */
-html, body, #root {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-.app-container {
-    width: 100%;
-    min-height: 100vh; /* screen height */
-    display: flex;
-    flex-direction: column;
-    background-color: #f9f9f9;
-}
-/* =========================================
-   2. original layout
-   ========================================= */
-/* GLOBAL STYLES */
-body {
-    font-family: 'Nunito', sans-serif;
-    background-color: #f9f9f9;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-/* dynamic class name */
-.hidden {
-    display: none !important;
-}
-/* TOP MENU */
-#top-menu {
-    height: 60px;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0;
-    padding: 0 16px 0 20px;
-    box-sizing: border-box;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    z-index: 1000;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-}
-.top-menu-links {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0;
-    min-width: 0;
-}
-.menu-btn {
-    background: none;
-    border: none;
-    font-family: 'Nunito', sans-serif;
-    font-size: 16px;
-    color: #333;
-    padding: 10px 20px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-.menu-btn:hover {
-    background-color: #f0f0f0;
-    border-radius: 4px;
-}
-/* active for React */
-.menu-btn.active {
-    font-weight: bold;
-    color: #007BFF;
-    background-color: #eef7ff;
-    border-radius: 4px;
-}
-.separator {
-    width: 1px;
-    height: 20px;
-    background-color: #555; /* Dark gray separator */
-    margin: 0 5px;
-}
-/* PAGE CONTAINER */
-.page {
-    /* content under menu */
-    min-height: calc(100vh - 60px);
-    width: 100%;
-    padding-top: 60px; /* Space for fixed menu */
-    padding-bottom: 40px; /* Space at bottom for scrolling */
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-}
-/* Ensure page titles are black */
-.page h1 {
-    color: #000 !important;
-    background: transparent !important;
-}
-.page-title {
-    color: #000 !important;
-    background: transparent !important;
-}
-/* PAGE A SPECIFIC */
-#page-a {
-    justify-content: center; /* Center vertically */
-    /* Fine-tune this margin if the Home screen sits slightly too low. */
-    margin-top: -40px;
-    flex: 1; /* Fill the remaining height so vertical centering still works. */
-}
-#page-a h1 {
-    font-size: 80px;
-    margin: 0 0 10px 0;
-    color: #000;
-    text-align: center; /* Keep the heading centered. */
-}
-#page-a p {
-    color: #666;
-    font-size: 20px;
-    margin-bottom: 40px;
-    text-align: center;
-}
-.btn-main {
-    background-color: #007BFF; /* Blue */
-    color: white;
-    border: none;
-    padding: 15px 50px;
-    font-size: 20px;
-    font-family: 'Nunito', sans-serif;
-    border-radius: 30px; /* Fully rounded corners */
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-.btn-main:hover {
-    transform: scale(1.1); /* Zoom effect */
-}
-/* PAGE B SPECIFIC */
-#page-b {
-    justify-content: space-evenly; /* Distribute vertical space */
-    padding-bottom: 20px;
-    min-height: calc(100vh - 60px); /* Ensure the page still fills the viewport. */
-}
-/* 1. Display Area */
-#display-area {
-    width: 60%;
-    height: 50vh; /* Use viewport height to scale more consistently across screens. */
-    min-height: 300px;
-    border: 2px solid #ddd;
-    border-radius: 12px;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #555;
-    font-size: 24px;
-    position: relative;
-    /* Keep video content centered without overflowing the frame. */
-    overflow: hidden;
-}
-.focus-display-shell {
-    background: #101010;
-}
-.focus-flow-overlay {
-    position: fixed;
-    top: 76px;
-    right: 20px;
-    bottom: 20px;
-    left: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    background: rgba(17, 31, 52, 0.18);
-    backdrop-filter: blur(10px);
-    z-index: 900;
-}
-.focus-flow-card {
-    width: min(1040px, 100%);
-    background: #fff;
-    border-radius: 24px;
-    padding: 30px 34px;
-    box-shadow: 0 28px 80px rgba(14, 44, 88, 0.18);
-    border: 1px solid rgba(0, 123, 255, 0.12);
-    box-sizing: border-box;
-}
-.focus-flow-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 24px;
-    margin-bottom: 18px;
-}
-.focus-flow-eyebrow {
-    display: inline-block;
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: #e7f3ff;
-    color: #007BFF;
-    font-size: 0.82rem;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-.focus-flow-header h2 {
-    margin: 14px 0 0;
-    color: #333;
-    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
-    line-height: 1.1;
-}
-.focus-flow-icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 116px;
-    height: 116px;
-    border-radius: 24px;
-    background: linear-gradient(180deg, #f4f9ff 0%, #edf5ff 100%);
-    border: 1px solid rgba(0, 123, 255, 0.12);
-}
-.focus-flow-lead {
-    margin: 0 0 20px;
-    color: #4a4a4a;
-    font-size: 1rem;
-    line-height: 1.6;
-}
-.focus-flow-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 16px;
-}
-.focus-flow-panel {
-    background: #f8fbff;
-    border: 1px solid #d9eaff;
-    border-radius: 14px;
-    padding: 18px;
-}
-.focus-flow-panel h3,
-.focus-flow-step-copy h3 {
-    margin: 0 0 8px;
-    color: #333;
-    font-size: 1rem;
-}
-.focus-flow-panel p,
-.focus-flow-step-copy p {
-    margin: 0;
-    color: #5e6670;
-    font-size: 0.95rem;
-    line-height: 1.6;
-}
-.focus-flow-steps {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 14px;
-}
-.focus-flow-step {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    background: #f8fbff;
-    border: 1px solid #d9eaff;
-    border-radius: 14px;
-    padding: 16px 18px;
-    min-height: 100px;
-    box-sizing: border-box;
-}
-.focus-flow-step-number {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 50%;
-    background: #007BFF;
-    color: #fff;
-    font-size: 0.95rem;
-    font-weight: 800;
-}
-.focus-flow-step-copy {
-    min-width: 0;
-}
-.focus-flow-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-top: 20px;
-}
-.focus-flow-note {
-    color: #667281;
-    font-size: 0.94rem;
-    line-height: 1.6;
-}
-.focus-flow-button,
-.focus-flow-secondary {
-    border: none;
-    border-radius: 999px;
-    padding: 13px 24px;
-    font-family: 'Nunito', sans-serif;
-    font-size: 0.98rem;
-    font-weight: 800;
-    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-}
-.focus-flow-button {
-    background: #007BFF;
-    color: #fff;
-    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.18);
-}
-.focus-flow-button:hover {
-    background: #0069d9;
-    border-color: transparent;
-    transform: translateY(-1px);
-}
-.focus-flow-secondary {
-    background: #eef3f8;
-    color: #4b5a6b;
-}
-.focus-flow-secondary:hover {
-    background: #e2eaf3;
-    border-color: transparent;
-}
-.focus-state-pill {
-    position: absolute;
-    top: 18px;
-    left: 18px;
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 16px;
-    border-radius: 999px;
-    color: #fff;
-    font-size: 0.88rem;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    z-index: 2;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
-}
-.focus-state-pill.pending {
-    background: rgba(87, 96, 111, 0.92);
-}
-.focus-state-pill.focused {
-    background: rgba(33, 163, 102, 0.94);
-}
-.focus-state-pill.not-focused {
-    background: rgba(215, 68, 68, 0.94);
-}
-.focus-state-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: currentColor;
-    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
-}
-.focus-idle-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.72));
-    color: #fff;
-    text-align: center;
-    z-index: 1;
-}
-.focus-idle-overlay p {
-    margin: 0;
-    font-size: 1.6rem;
-    font-weight: 800;
-}
-.focus-idle-overlay span {
-    max-width: 420px;
-    color: rgba(255, 255, 255, 0.82);
-    font-size: 0.98rem;
-    line-height: 1.5;
-}
-.focus-inline-error {
-    margin-top: 18px;
-    padding: 12px 16px;
-    max-width: 620px;
-    border-radius: 12px;
-    background: #fff1ee;
-    color: #b54028;
-    font-size: 0.95rem;
-    font-weight: 700;
-    box-shadow: 0 10px 20px rgba(181, 64, 40, 0.08);
-}
-.focus-inline-error-standalone {
-    width: 60%;
-    box-sizing: border-box;
-}
-.focus-debug-panel {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: rgba(0,0,0,0.7);
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 12px;
-    font-family: monospace;
-}
-.focus-model-strip {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 10px 16px;
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 12px;
-    margin: 10px auto;
-    max-width: 700px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-}
-/* --- Model info card --- */
-.model-card {
-    width: 60%;
-    margin: 14px auto 0;
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 14px;
-    padding: 18px 22px 14px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
-    animation: cardFadeIn 0.25s ease;
-    box-sizing: border-box;
-}
-.model-card-details {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-}
-@keyframes cardFadeIn {
-    from { opacity: 0; transform: translateY(4px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-.model-card-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 4px;
-}
-.model-card-title {
-    margin: 0;
-    font-size: 1.05rem;
-    color: #1a1a2e;
-}
-.model-card-badge {
-    padding: 3px 10px;
-    border-radius: 999px;
-    background: #e7f3ff;
-    color: #007BFF;
-    font-size: 0.7rem;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-.model-card-badge-baseline {
-    padding: 3px 10px;
-    border-radius: 999px;
-    background: #fff3e0;
-    color: #e67e22;
-    font-size: 0.7rem;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-.model-card-tagline {
-    margin: 0 0 12px;
-    color: #667281;
-    font-size: 0.85rem;
-    line-height: 1.4;
-}
-.model-card-metrics {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    margin-bottom: 14px;
-}
-.model-card-metric {
-    text-align: center;
-    padding: 8px 4px;
-    background: #f8fbff;
-    border: 1px solid #e8f0fe;
-    border-radius: 10px;
-}
-.model-card-metric-value {
-    display: block;
-    font-size: 1.1rem;
-    font-weight: 800;
-    color: #007BFF;
-    line-height: 1.2;
-}
-.model-card-metric-label {
-    display: block;
-    font-size: 0.65rem;
-    color: #8899aa;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    margin-top: 2px;
-}
-.model-card-section {
-    margin-bottom: 8px;
-}
-.model-card-section h4 {
-    margin: 0 0 2px;
-    font-size: 0.78rem;
-    color: #555;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-.model-card-section p {
-    margin: 0;
-    font-size: 0.82rem;
-    color: #4a4a4a;
-    line-height: 1.5;
-}
-.model-card-eval {
-    margin-top: 10px;
-    padding: 6px 10px;
-    background: #f5f7fa;
-    border-radius: 8px;
-    font-size: 0.72rem;
-    color: #7a8a9a;
-    font-weight: 600;
-}
-@media (max-width: 768px) {
-    .model-card {
-        width: 90%;
-    }
-    .model-card-metrics {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .model-card-details {
-        grid-template-columns: 1fr;
-    }
-}
-.focus-model-label {
-    color: #666;
-    font-size: 13px;
-    font-weight: 700;
-    margin-right: 4px;
-}
-.focus-model-button {
-    padding: 6px 16px;
-    border-radius: 16px;
-    border: 1px solid #d0d0d0;
-    background: #f5f5f5;
-    color: #555;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-.focus-model-button:hover {
-    border-color: #007BFF;
-    color: #007BFF;
-    background: #f0f7ff;
-}
-.focus-model-button.active {
-    border: 2px solid #007BFF;
-    background: #007BFF;
-    color: #fff;
-}
-.focus-model-sep {
-    width: 1px;
-    height: 24px;
-    background: #d0d0d0;
-    margin: 0 4px;
-}
-.eye-gaze-toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    border-radius: 16px;
-    font-size: 12px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-.eye-gaze-toggle.off {
-    border: 1px solid #d0d0d0;
-    background: #f5f5f5;
-    color: #888;
-}
-.eye-gaze-toggle.off:hover {
-    border-color: #007BFF;
-    color: #007BFF;
-    background: #f0f7ff;
-}
-.eye-gaze-toggle.on {
-    border: 2px solid #007BFF;
-    background: #007BFF;
-    color: #fff;
-    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
-}
-.eye-gaze-toggle.on:hover {
-    background: #0069d9;
-    border-color: #0069d9;
-}
-.eye-gaze-icon {
-    flex-shrink: 0;
-}
-.focus-model-button.recalibrate {
-    border: 1px solid #007BFF;
-    background: transparent;
-    color: #007BFF;
-    font-weight: 600;
-    font-size: 11px;
-}
-.focus-model-button.recalibrate:hover {
-    background: #f0f7ff;
-}
-.focus-system-stats {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 4px 16px;
-    margin: 4px auto;
-    max-width: 400px;
-    font-size: 12px;
-    color: #888;
-}
-.focus-system-stats strong {
-    color: #555;
-}
-.focus-system-stats-sep {
-    width: 1px;
-    height: 12px;
-    background: #ccc;
-}
-#display-area video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover; /* Behaves similarly to background-size: cover. */
-}
-/* 2. Timeline Area */
-#timeline-area {
-    width: 60%;
-    height: 80px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-}
-.timeline-label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: #888;
-    font-size: 14px;
-}
-#timeline-line {
-    width: 100%;
-    height: 2px;
-    background-color: #87CEEB; /* Light blue */
-}
-/* 3. Control Panel */
-#control-panel {
-    display: flex;
-    gap: 20px;
-    width: 60%;
-    justify-content: space-between;
-}
-.action-btn {
-    flex: 1; /* Evenly distributed width */
-    padding: 12px 0;
-    border: none;
-    border-radius: 12px;
-    font-size: 16px;
-    font-family: 'Nunito', sans-serif;
-    font-weight: 700;
-    cursor: pointer;
-    color: white;
-    transition: opacity 0.2s;
-}
-.action-btn:hover {
-    opacity: 0.9;
-}
-.action-btn.green { background-color: #28a745; }
-.action-btn.blue { background-color: #007BFF; }
-.action-btn.orange { background-color: #e67e22; }
-.action-btn.red { background-color: #dc3545; }
-/* 4. Frame Control */
-#frame-control {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    color: #333;
-    font-weight: bold;
-}
-#frame-slider {
-    width: 200px;
-    cursor: pointer;
-}
-#frame-input {
-    width: 50px;
-    padding: 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    text-align: center;
-    font-family: 'Nunito', sans-serif;
-}
-/* ================ ACHIEVEMENT PAGE ================ */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-    width: 80%;
-    margin: 40px auto;
-}
-.stat-card {
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    text-align: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-.stat-number {
-    font-size: 48px;
-    font-weight: bold;
-    color: #007BFF;
-    margin-bottom: 10px;
-}
-.stat-label {
-    font-size: 16px;
-    color: #666;
-}
-.achievements-section {
-    width: 80%;
-    margin: 0 auto;
-}
-.achievements-section h2 {
-    color: #333;
-    margin-bottom: 20px;
-}
-.badges-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-}
-.badge {
-    background: white;
-    padding: 30px 20px;
-    border-radius: 12px;
-    text-align: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: transform 0.2s;
-}
-.badge:hover {
-    transform: translateY(-5px);
-}
-.badge.locked {
-    opacity: 0.4;
-    filter: grayscale(100%);
-}
-.badge-icon {
-    font-size: 64px;
-    margin-bottom: 15px;
-}
-.badge-name {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-}
-/* ================ RECORDS PAGE ================ */
-.records-controls {
-    display: flex;
-    gap: 10px;
-    margin: 20px auto;
-    width: 80%;
-    justify-content: center;
-}
-.filter-btn {
-    padding: 10px 20px;
-    border: 2px solid #007BFF;
-    background: white;
-    color: #007BFF;
-    border-radius: 8px;
-    cursor: pointer;
-    font-family: 'Nunito', sans-serif;
-    font-weight: 600;
-    transition: all 0.2s;
-}
-.filter-btn:hover {
-    background: #e7f3ff;
-}
-.filter-btn.active {
-    background: #007BFF;
-    color: white;
-}
-.chart-container {
-    width: 80%;
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    margin: 20px auto;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-#focus-chart {
-    display: block;
-    margin: 0 auto;
-    /* Make sure the chart scales within its container. */
-    max-width: 100%;
-}
-.sessions-list {
-    width: 80%;
-    margin: 20px auto;
-}
-.sessions-list h2 {
-    color: #333;
-    margin-bottom: 15px;
-}
-#sessions-table {
-    width: 100%;
-    background: white;
-    border-collapse: collapse;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-#sessions-table th {
-    background: #007BFF;
-    color: white;
-    padding: 15px;
-    text-align: left;
-    font-weight: 600;
-}
-#sessions-table td {
-    padding: 12px 15px;
-    border-bottom: 1px solid #eee;
-}
-#sessions-table tr:last-child td {
-    border-bottom: none;
-}
-#sessions-table tbody tr:hover {
-    background: #f8f9fa;
-}
-.btn-view {
-    padding: 6px 18px;
-    background: #007BFF;
-    color: white;
-    border: none;
-    border-radius: 999px;
-    cursor: pointer;
-    font-family: 'Nunito', sans-serif;
-    font-size: 12px;
-    font-weight: 700;
-    transition: background 0.2s;
-}
-.btn-view:hover {
-    background: #0056b3;
-}
-.records-detail-modal {
-    width: min(960px, 92vw);
-    max-width: 960px;
-    max-height: 86vh;
-    overflow-y: auto;
-    padding: 30px;
-    box-sizing: border-box;
-}
-.records-detail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 20px;
-    margin-bottom: 24px;
-}
-.records-detail-kicker {
-    color: #007BFF;
-    font-size: 12px;
-    font-weight: 800;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-}
-.records-detail-header h2 {
-    margin: 10px 0 8px;
-    color: #333;
-    text-align: left;
-}
-.records-detail-subtitle {
-    margin: 0;
-    color: #667281;
-    line-height: 1.6;
-}
-.records-detail-close {
-    border: 1px solid #d6e6fa;
-    background: #f4f9ff;
-    color: #3569a8;
-    border-radius: 999px;
-    padding: 10px 18px;
-    font-family: 'Nunito', sans-serif;
-    font-weight: 700;
-    cursor: pointer;
-}
-.records-detail-close:hover {
-    border-color: #bfd9f7;
-    background: #e9f4ff;
-}
-.records-detail-feedback {
-    padding: 18px 20px;
-    border-radius: 14px;
-    background: #f7f9fc;
-    color: #516173;
-    font-weight: 700;
-}
-.records-detail-feedback-error {
-    background: #fff1ee;
-    color: #b54028;
-}
-.records-detail-summary {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 14px;
-    margin-bottom: 18px;
-}
-.records-detail-stat {
-    padding: 18px;
-    border-radius: 14px;
-    background: #f8fbff;
-    border: 1px solid #d9eaff;
-}
-.records-detail-stat.excellent {
-    background: #eef9f0;
-    border-color: #cdebd3;
-}
-.records-detail-stat.good {
-    background: #fff9eb;
-    border-color: #f8e3a8;
-}
-.records-detail-stat.fair {
-    background: #fff4eb;
-    border-color: #ffd6af;
-}
-.records-detail-stat.low {
-    background: #fff0f0;
-    border-color: #f3c7c7;
-}
-.records-detail-stat-label {
-    display: block;
-    margin-bottom: 8px;
-    color: #667281;
-    font-size: 13px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-.records-detail-stat-value {
-    display: block;
-    color: #1f2d3d;
-    font-size: 28px;
-    line-height: 1.1;
-}
-.records-detail-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-    margin-bottom: 16px;
-}
-.records-detail-card {
-    background: white;
-    border: 1px solid #e8eef5;
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: 0 8px 24px rgba(20, 44, 74, 0.06);
-    margin-bottom: 16px;
-}
-.records-detail-card:last-child {
-    margin-bottom: 0;
-}
-.records-detail-card h3 {
-    margin: 0 0 16px;
-    color: #333;
-    font-size: 18px;
-}
-.records-detail-list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 14px 18px;
-}
-.records-detail-item {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.records-detail-item-label {
-    color: #7a8795;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-.records-detail-item-value {
-    color: #263445;
-    font-size: 15px;
-    font-weight: 700;
-    line-height: 1.5;
-}
-.records-detail-section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-.records-detail-section-head span {
-    color: #7a8795;
-    font-size: 13px;
-    font-weight: 700;
-}
-.records-detail-timeline {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
-    gap: 5px;
-}
-.records-detail-segment {
-    height: 48px;
-    border-radius: 999px;
-}
-.records-detail-segment.focused {
-    background: linear-gradient(180deg, #3ab86a 0%, #23a057 100%);
-}
-.records-detail-segment.mixed {
-    background: linear-gradient(180deg, #f1b447 0%, #df9a1e 100%);
-}
-.records-detail-segment.distracted {
-    background: linear-gradient(180deg, #ec7d7d 0%, #d9534f 100%);
-}
-.records-detail-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-top: 14px;
-    color: #667281;
-    font-size: 13px;
-    font-weight: 700;
-}
-.records-detail-legend span {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-.records-detail-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: inline-block;
-}
-.records-detail-dot.focused {
-    background: #23a057;
-}
-.records-detail-dot.mixed {
-    background: #df9a1e;
-}
-.records-detail-dot.distracted {
-    background: #d9534f;
-}
-.records-detail-events {
-    display: grid;
-    gap: 10px;
-    max-height: 280px;
-    overflow-y: auto;
-}
-.records-detail-event {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    background: #f8fbff;
-    border: 1px solid #e1edf9;
-    border-radius: 14px;
-}
-.records-detail-event-time {
-    min-width: 52px;
-    color: #3569a8;
-    font-size: 13px;
-    font-weight: 800;
-}
-.records-detail-event-copy {
-    min-width: 0;
-}
-.records-detail-event-status {
-    color: #243345;
-    font-size: 14px;
-    font-weight: 800;
-}
-.records-detail-event-meta {
-    margin-top: 4px;
-    color: #6f7d8c;
-    font-size: 12px;
-    line-height: 1.5;
-}
-.records-detail-event-badge {
-    padding: 7px 12px;
-    border-radius: 999px;
-    font-size: 11px;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-.records-detail-event-badge.focused {
-    background: #eaf8ef;
-    color: #1f8a4c;
-}
-.records-detail-event-badge.distracted {
-    background: #fff1f1;
-    color: #c24c49;
-}
-.records-detail-empty {
-    padding: 16px 18px;
-    border-radius: 14px;
-    background: #f7f9fc;
-    color: #708090;
-    font-weight: 700;
-}
-/* ================ SETTINGS PAGE ================ */
-.settings-container {
-    width: 60%;
-    max-width: 800px;
-    margin: 20px auto;
-}
-.setting-group {
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-.setting-group h2 {
-    margin-top: 0;
-    color: #333;
-    font-size: 20px;
-    margin-bottom: 20px;
-    border-bottom: 2px solid #007BFF;
-    padding-bottom: 10px;
-}
-.setting-item {
-    margin-bottom: 25px;
-}
-.setting-item:last-child {
-    margin-bottom: 0;
-}
-.setting-item label {
-    display: block;
-    margin-bottom: 8px;
-    color: #333;
-    font-weight: 600;
-}
-.slider-group {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-.slider-group input[type="range"] {
-    flex: 1;
-}
-.slider-group span {
-    min-width: 40px;
-    text-align: center;
-    font-weight: bold;
-    color: #007BFF;
-    font-size: 18px;
-}
-.setting-description {
-    font-size: 14px;
-    color: #666;
-    margin-top: 5px;
-    font-style: italic;
-}
-input[type="checkbox"] {
-    margin-right: 10px;
-    cursor: pointer;
-}
-input[type="number"] {
-    width: 100px;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-family: 'Nunito', sans-serif;
-}
-/* Center the settings buttons and give them more width. */
-.setting-group .action-btn {
-    display: inline-block;   /* Allow buttons to sit side by side. */
-    width: 48%;              /* Roughly half-width each, with a small gutter. */
-    margin: 15px 1%;         /* Vertical spacing plus horizontal separation. */
-    text-align: center;      /* Center the label text. */
-    box-sizing: border-box;  /* Prevent borders from forcing an early wrap. */
-}
-#save-settings {
-    display: block;
-    margin: 20px auto;
-}
-/* ================ HELP PAGE ================ */
-.help-container {
-    width: 70%;
-    max-width: 900px;
-    margin: 20px auto;
-}
-/* Fake ad block (Help page) */
-.fake-ad {
-    position: relative;
-    display: block;
-    width: min(600px, 90%);
-    margin: 10px auto 30px auto;
-    border: 1px solid #e5e5e5;
-    border-radius: 12px;
-    overflow: hidden;
-    background: #fff;
-    text-decoration: none;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.fake-ad:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
-}
-.fake-ad img {
-    display: block;
-    width: 100%;
-    height: auto;
-}
-.fake-ad-badge {
-    position: absolute;
-    top: 12px;
-    left: 12px;
-    background: rgba(0,0,0,0.75);
-    color: #fff;
-    font-size: 12px;
-    padding: 4px 8px;
-    border-radius: 6px;
-    letter-spacing: 0.5px;
-}
-.fake-ad-cta {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    background: #111;
-    color: #fff;
-    font-size: 14px;
-    padding: 8px 12px;
-    border-radius: 8px;
-}
-.help-section {
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-.help-section h2 {
-    color: #007BFF;
-    margin-top: 0;
-    margin-bottom: 15px;
-}
-.help-section ol,
-.help-section ul {
-    line-height: 1.8;
-    color: #333;
-}
-.help-section p {
-    line-height: 1.6;
-    color: #333;
-}
-details {
-    margin: 15px 0;
-    cursor: pointer;
-    padding: 10px;
-    background: #f8f9fa;
-    border-radius: 5px;
-}
-summary {
-    font-weight: bold;
-    padding: 5px;
-    color: #007BFF;
-}
-details[open] summary {
-    margin-bottom: 10px;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 10px;
-}
-details p {
-    margin: 10px 0 0 0;
-}
-/* ================ SESSION SUMMARY MODAL ================ */
-/* These modal styles can be reused for future overlays. */
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-}
-.modal-content {
-    background: white;
-    padding: 40px;
-    border-radius: 16px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-    max-width: 500px;
-    width: 90%;
-}
-.modal-content h2 {
-    margin-top: 0;
-    color: #333;
-    text-align: center;
-    margin-bottom: 30px;
-}
-.summary-stats {
-    margin-bottom: 30px;
-}
-.summary-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 15px 0;
-    border-bottom: 1px solid #eee;
-}
-.summary-item:last-child {
-    border-bottom: none;
-}
-.summary-label {
-    font-weight: 600;
-    color: #666;
-}
-.summary-value {
-    font-weight: bold;
-    color: #007BFF;
-    font-size: 18px;
-}
-.modal-content .btn-main {
-    display: block;
-    margin: 0 auto;
-    padding: 12px 40px;
-}
-/* ================ TIMELINE BLOCKS ================ */
-.timeline-block {
-    transition: opacity 0.2s;
-    border-radius: 2px;
-}
-.timeline-block:hover {
-    opacity: 0.7;
-}
-/* ================ RESPONSIVE DESIGN ================ */
-@media (max-width: 1200px) {
-    .stats-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .badges-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-@media (max-width: 768px) {
-    .stats-grid,
-    .badges-grid {
-        grid-template-columns: 1fr;
-        width: 90%;
-    }
-    .settings-container,
-    .help-container,
-    .chart-container,
-    .sessions-list,
-    .records-controls {
-        width: 90%;
-    }
-    #control-panel {
-        width: 90%;
-        flex-wrap: wrap;
-    }
-    #display-area {
-        width: 90%;
-    }
-    #timeline-area {
-        width: 90%;
-    }
-    #frame-control {
-        width: 90%;
-        flex-direction: column;
-    }
-    .focus-inline-error-standalone {
-        width: 90%;
-    }
-    .focus-flow-overlay {
-        top: 70px;
-        right: 10px;
-        bottom: 10px;
-        left: 10px;
-    }
-    .focus-flow-card {
-        padding: 22px 20px;
-    }
-    .focus-flow-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .focus-flow-icon {
-        width: 92px;
-        height: 92px;
-    }
-    .focus-flow-grid {
-        grid-template-columns: 1fr;
-    }
-    .focus-flow-steps {
-        grid-template-columns: 1fr;
-    }
-    .focus-flow-footer {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .focus-flow-button,
-    .focus-flow-secondary {
-        width: 100%;
-    }
-    .records-detail-modal {
-        width: 94vw;
-        padding: 22px 18px;
-    }
-    .records-detail-header,
-    .records-detail-section-head {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .records-detail-summary,
-    .records-detail-grid,
-    .records-detail-list {
-        grid-template-columns: 1fr;
-    }
-    .records-detail-event {
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-    }
-}
-/* =========================================
-   SESSION RESULT OVERLAY
-   ========================================= */
-.session-result-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent backdrop. */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    z-index: 10;
-    animation: fadeIn 0.5s ease;
-    backdrop-filter: blur(5px); /* Optional background blur. */
-}
-.session-result-overlay h3 {
-    font-size: 32px;
-    margin-bottom: 30px;
-    color: #4cd137; /* Green title accent. */
-    text-transform: uppercase;
-    letter-spacing: 2px;
-}
-.session-result-overlay .result-item {
-    display: flex;
-    justify-content: space-between;
-    width: 200px; /* Keep the stat row compact. */
-    margin-bottom: 15px;
-    font-size: 20px;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    padding-bottom: 5px;
-}
-.session-result-overlay .label {
-    color: #ccc;
-    font-weight: normal;
-}
-.session-result-overlay .value {
-    color: #fff;
-    font-weight: bold;
-    font-family: 'Courier New', monospace; /* Give the values a data-like look. */
-}
-@keyframes fadeIn {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
-}
-/* ================= Welcome modal styles ================= */
-.welcome-modal-overlay {
-position: fixed;
-top: 0; left: 0; right: 0; bottom: 0;
-background-color: rgba(0, 0, 0, 0.7);
-display: flex;
-justify-content: center;
-align-items: center;
-z-index: 9999;
-}
-.welcome-modal {
-background-color: #1e1e24;
-padding: 40px;
-border-radius: 15px;
-text-align: center;
-box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-border: 1px solid #333;
-}
-.welcome-modal h2 { margin-top: 0; color: #fff; }
-.welcome-modal p { margin-bottom: 30px; color: #ccc; }
-.welcome-buttons { display: flex; gap: 20px; justify-content: center; }
-/* ================= Top-left avatar styles ================= */
-.avatar-container {
-    position: absolute;
-    left: 20px;
-    cursor: pointer;
-    z-index: 1;
-}
-.avatar-circle {
-width: 40px;
-height: 40px;
-border-radius: 50%;
-display: flex;
-justify-content: center;
-align-items: center;
-font-weight: bold;
-font-size: 1.2rem;
-color: white;
-transition: all 0.3s ease;
-border: 2px solid transparent;
-}
-.avatar-circle.user { background-color: #555; }
-.avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }
-/* ================ CALIBRATION OVERLAY ================ */
-.cal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(8, 15, 28, 0.94);
-  backdrop-filter: blur(6px);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: 'Nunito', sans-serif;
-}
-/* ---- header / instructions ---- */
-.cal-header {
-  position: absolute;
-  top: 36px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
-  pointer-events: none;
-}
-.cal-eyebrow {
-  display: inline-block;
-  padding: 6px 14px;
-  border-radius: 999px;
-  font-size: 0.82rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.cal-eyebrow-collect {
-  background: rgba(40, 167, 69, 0.18);
-  color: #5ee882;
-}
-.cal-eyebrow-verify {
-  background: rgba(0, 123, 255, 0.18);
-  color: #6bb8ff;
-}
-.cal-instruction {
-  margin: 10px 0 0;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.95rem;
-  line-height: 1.5;
-}
-/* ---- target dot + ring ---- */
-.cal-target {
-  position: absolute;
-  transform: translate(-50%, -50%);
-}
-.cal-ring {
-  position: absolute;
-  left: -30px;
-  top: -30px;
-}
-.cal-dot {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  transition: box-shadow 0.3s ease;
-}
-/* ---- cancel button (matches focus-flow-secondary) ---- */
-.cal-cancel {
-  position: absolute;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 999px;
-  padding: 12px 28px;
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.85);
-  font-family: 'Nunito', sans-serif;
-  font-size: 0.95rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease;
-}
-.cal-cancel:hover {
-  background: rgba(255, 255, 255, 0.14);
-  border-color: rgba(255, 255, 255, 0.4);
-}
-/* ---- done card (matches focus-flow-card style) ---- */
-.cal-done-card {
-  text-align: center;
-  padding: 36px 44px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
-  animation: fadeIn 0.4s ease;
-}
-.cal-done-success {
-  background: linear-gradient(168deg, rgba(40, 167, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
-  border-color: rgba(40, 167, 69, 0.3);
-}
-.cal-done-fail {
-  background: linear-gradient(168deg, rgba(220, 53, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
-  border-color: rgba(220, 53, 69, 0.3);
-}
-.cal-done-eyebrow {
-  display: inline-block;
-  padding: 6px 14px;
-  border-radius: 999px;
-  font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  margin-bottom: 14px;
-}
-.cal-done-success .cal-done-eyebrow {
-  background: rgba(40, 167, 69, 0.2);
-  color: #5ee882;
-}
-.cal-done-fail .cal-done-eyebrow {
-  background: rgba(220, 53, 69, 0.2);
-  color: #f87171;
-}
-.cal-done-title {
-  margin: 0 0 8px;
-  font-size: 1.6rem;
-  color: #fff;
-}
-.cal-done-subtitle {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.95rem;
-  line-height: 1.5;
-}
-/* ================= Home page 2x2 responsive button grid ================= */
-.home-button-grid {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 360px;
-  margin: 40px auto 0;
-}
-.home-button-grid .btn-main {
-  width: 100%;
-  height: 60px; /* Keep all tiles at the same height. */
-  margin: 0; /* Remove default outer spacing. */
-  padding: 10px;
-  font-size: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  box-sizing: border-box; /* Prevent padding and borders from breaking the grid. */
-}
-/* Mobile-only scaling for screens below 600px. */
-@media (max-width: 600px) {
-  #top-menu {
-    justify-content: flex-start;
-    padding: 0 12px 0 68px;
-  }
-  .menu-btn {
-    padding: 10px 14px;
-    font-size: 0.92rem;
-  }
-  .separator {
-    margin: 0 2px;
-  }
-  .home-button-grid {
-    gap: 15px;
-    max-width: 90%;
-  }
-  .home-button-grid .btn-main {
-    height: 50px;
-    font-size: 0.85rem;
-  }
-}

+/* =========================================
+   1. REACT layout setting
+   ========================================= */
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.app-container {
+    width: 100%;
+    min-height: 100vh; /* screen height */
+    display: flex;
+    flex-direction: column;
+    background-color: #f9f9f9;
+}
+/* =========================================
+   2. original layout
+   ========================================= */
+/* GLOBAL STYLES */
+body {
+    font-family: 'Nunito', sans-serif;
+    background-color: #f9f9f9;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+/* dynamic class name */
+.hidden {
+    display: none !important;
+}
+/* TOP MENU */
+#top-menu {
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    padding: 0 16px 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1000;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+.top-menu-links {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0;
+    min-width: 0;
+}
+.menu-btn {
+    background: none;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.menu-btn:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+/* active for React */
+.menu-btn.active {
+    font-weight: bold;
+    color: #007BFF;
+    background-color: #eef7ff;
+    border-radius: 4px;
+}
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+/* PAGE CONTAINER */
+.page {
+    /* content under menu */
+    min-height: calc(100vh - 60px);
+    width: 100%;
+    padding-top: 60px; /* Space for fixed menu */
+    padding-bottom: 40px; /* Space at bottom for scrolling */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+}
+/* Ensure page titles are black */
+.page h1 {
+    color: #000 !important;
+    background: transparent !important;
+}
+.page-title {
+    color: #000 !important;
+    background: transparent !important;
+}
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    /* Fine-tune this margin if the Home screen sits slightly too low. */
+    margin-top: -40px;
+    flex: 1; /* Fill the remaining height so vertical centering still works. */
+}
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+    text-align: center; /* Keep the heading centered. */
+}
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+}
+.btn-main {
+    background-color: #007BFF; /* Blue */
+    color: white;
+    border: none;
+    padding: 15px 50px;
+    font-size: 20px;
+    font-family: 'Nunito', sans-serif;
+    border-radius: 30px; /* Fully rounded corners */
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.btn-main:hover {
+    transform: scale(1.1); /* Zoom effect */
+}
+/* PAGE B SPECIFIC */
+#page-b {
+    justify-content: space-evenly; /* Distribute vertical space */
+    padding-bottom: 20px;
+    min-height: calc(100vh - 60px); /* Ensure the page still fills the viewport. */
+}
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50vh; /* Use viewport height to scale more consistently across screens. */
+    min-height: 300px;
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #555;
+    font-size: 24px;
+    position: relative;
+    /* Keep video content centered without overflowing the frame. */
+    overflow: hidden;
+}
+.focus-display-shell {
+    background: #101010;
+}
+@keyframes fadeInOverlay {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+@keyframes slideUpCard {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.focus-flow-overlay {
+    position: fixed;
+    top: 76px;
+    right: 20px;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: rgba(17, 31, 52, 0.18);
+    backdrop-filter: blur(10px);
+    z-index: 900;
+    animation: fadeInOverlay 0.3s ease-out forwards;
+}
+.focus-flow-card {
+    width: min(1040px, 100%);
+    background: #fff;
+    border-radius: 24px;
+    padding: 30px 34px;
+    box-shadow: 0 28px 80px rgba(14, 44, 88, 0.18);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+    box-sizing: border-box;
+    animation: slideUpCard 0.4s ease-out forwards;
+}
+.focus-flow-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 18px;
+}
+.focus-flow-eyebrow {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.focus-flow-header h2 {
+    margin: 14px 0 0;
+    color: #333;
+    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
+    line-height: 1.1;
+}
+.focus-flow-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 116px;
+    height: 116px;
+    border-radius: 24px;
+    background: linear-gradient(180deg, #f4f9ff 0%, #edf5ff 100%);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+}
+.focus-flow-lead {
+    margin: 0 0 20px;
+    color: #4a4a4a;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+.focus-flow-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+.focus-flow-panel {
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 18px;
+}
+.focus-flow-grid .focus-flow-panel:nth-child(4) {
+    grid-column: span 3 !important;
+}
+.focus-flow-panel h3,
+.focus-flow-step-copy h3 {
+    margin: 0 0 8px;
+    color: #333;
+    font-size: 1rem;
+}
+.focus-flow-panel p,
+.focus-flow-step-copy p {
+    margin: 0;
+    color: #5e6670;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+.focus-flow-steps {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+.focus-flow-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 16px 18px;
+    min-height: 100px;
+    box-sizing: border-box;
+}
+.focus-flow-step-number {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: #007BFF;
+    color: #fff;
+    font-size: 0.95rem;
+    font-weight: 800;
+}
+.focus-flow-step-copy {
+    min-width: 0;
+}
+.focus-flow-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 20px;
+}
+.focus-flow-note {
+    color: #667281;
+    font-size: 0.94rem;
+    line-height: 1.6;
+}
+.focus-flow-glasses-note {
+    background: #fffbea;
+    border: 1px solid #f5c518;
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-size: 0.9rem;
+    color: #5a4a00;
+    line-height: 1.55;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+.focus-flow-panel-warn {
+    border-left: 3px solid #f5a623;
+    background: #fff9f0;
+}
+.eye-gaze-modal-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 0.9rem;
+    color: #667281;
+    cursor: pointer;
+    user-select: none;
+}
+.focus-flow-button,
+.focus-flow-secondary {
+    border: none;
+    border-radius: 999px;
+    padding: 13px 24px;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.98rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.focus-flow-button {
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.18);
+}
+.focus-flow-button:hover {
+    background: #0069d9;
+    border-color: transparent;
+    transform: translateY(-1px);
+}
+.focus-flow-secondary {
+    background: #eef3f8;
+    color: #4b5a6b;
+}
+.focus-flow-secondary:hover {
+    background: #e2eaf3;
+    border-color: transparent;
+}
+.focus-state-pill {
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 999px;
+    color: #fff;
+    font-size: 0.88rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    z-index: 2;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
+}
+.focus-state-pill.pending {
+    background: rgba(87, 96, 111, 0.92);
+}
+.focus-state-pill.focused {
+    background: rgba(33, 163, 102, 0.94);
+}
+.focus-state-pill.not-focused {
+    background: rgba(215, 68, 68, 0.94);
+}
+.focus-state-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
+}
+.focus-idle-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.72));
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+}
+.focus-idle-overlay p {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 800;
+}
+.focus-idle-overlay span {
+    max-width: 420px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 0.98rem;
+    line-height: 1.5;
+}
+.focus-inline-error {
+    margin-top: 18px;
+    padding: 12px 16px;
+    max-width: 620px;
+    border-radius: 12px;
+    background: #fff1ee;
+    color: #b54028;
+    font-size: 0.95rem;
+    font-weight: 700;
+    box-shadow: 0 10px 20px rgba(181, 64, 40, 0.08);
+}
+.focus-inline-error-standalone {
+    width: 60%;
+    box-sizing: border-box;
+}
+.focus-debug-panel {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: monospace;
+}
+.focus-model-strip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 16px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin: 10px auto;
+    max-width: 700px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+/* --- Model info card --- */
+.model-card {
+    width: 60%;
+    margin: 14px auto 0;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 14px;
+    padding: 18px 22px 14px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+    animation: cardFadeIn 0.25s ease;
+    box-sizing: border-box;
+}
+.model-card-details {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+@keyframes cardFadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.model-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+.model-card-title {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #1a1a2e;
+}
+.model-card-badge {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.model-card-badge-baseline {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #fff3e0;
+    color: #e67e22;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.model-card-tagline {
+    margin: 0 0 12px;
+    color: #667281;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+.model-card-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    margin-bottom: 14px;
+}
+.model-card-metric {
+    text-align: center;
+    padding: 8px 4px;
+    background: #f8fbff;
+    border: 1px solid #e8f0fe;
+    border-radius: 10px;
+}
+.model-card-metric-value {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #007BFF;
+    line-height: 1.2;
+}
+.model-card-metric-label {
+    display: block;
+    font-size: 0.65rem;
+    color: #8899aa;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 2px;
+}
+.model-card-section {
+    margin-bottom: 8px;
+}
+.model-card-section h4 {
+    margin: 0 0 2px;
+    font-size: 0.78rem;
+    color: #555;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+.model-card-section p {
+    margin: 0;
+    font-size: 0.82rem;
+    color: #4a4a4a;
+    line-height: 1.5;
+}
+.model-card-eval {
+    margin-top: 10px;
+    padding: 6px 10px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    color: #7a8a9a;
+    font-weight: 600;
+}
+@media (max-width: 768px) {
+    .model-card {
+        width: 90%;
+    }
+    .model-card-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .model-card-details {
+        grid-template-columns: 1fr;
+    }
+}
+.focus-model-label {
+    color: #666;
+    font-size: 13px;
+    font-weight: 700;
+    margin-right: 4px;
+}
+.focus-model-button {
+    padding: 6px 16px;
+    border-radius: 16px;
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #555;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.focus-model-button:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+.focus-model-button.active {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+}
+.focus-model-sep {
+    width: 1px;
+    height: 24px;
+    background: #d0d0d0;
+    margin: 0 4px;
+}
+.eye-gaze-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+.eye-gaze-toggle.off {
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #888;
+}
+.eye-gaze-toggle.off:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+.eye-gaze-toggle.on {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
+}
+.eye-gaze-toggle.on:hover {
+    background: #0069d9;
+    border-color: #0069d9;
+}
+.eye-gaze-icon {
+    flex-shrink: 0;
+}
+.focus-model-button.recalibrate {
+    border: 1px solid #007BFF;
+    background: transparent;
+    color: #007BFF;
+    font-weight: 600;
+    font-size: 11px;
+}
+.focus-model-button.recalibrate:hover {
+    background: #f0f7ff;
+}
+.focus-system-stats {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 4px 16px;
+    margin: 4px auto;
+    max-width: 400px;
+    font-size: 12px;
+    color: #888;
+}
+.focus-system-stats strong {
+    color: #555;
+}
+.focus-system-stats-sep {
+    width: 1px;
+    height: 12px;
+    background: #ccc;
+}
+#display-area video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Behaves similarly to background-size: cover. */
+}
+/* 2. Timeline Area */
+#timeline-area {
+    width: 60%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-self: center;
+    margin: 0 auto;
+}
+#timeline-visuals {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 2px;
+    width: 100%;
+}
+.timeline-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #888;
+    font-size: 14px;
+}
+#timeline-line {
+    width: 100%;
+    height: 2px;
+    background-color: #87CEEB; /* Light blue */
+}
+/* 3. Control Panel */
+#control-panel {
+    display: flex;
+    gap: 20px;
+    width: 60%;
+    justify-content: space-between;
+}
+.action-btn {
+    flex: 1; /* Evenly distributed width */
+    padding: 12px 0;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+    transition: opacity 0.2s;
+}
+.action-btn:hover {
+    opacity: 0.9;
+}
+.action-btn.green { background-color: #28a745; }
+.action-btn.blue { background-color: #007BFF; }
+.action-btn.orange { background-color: #e67e22; }
+.action-btn.red { background-color: #dc3545; }
+/* 4. Frame Control */
+#frame-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #333;
+    font-weight: bold;
+}
+#frame-slider {
+    width: 200px;
+    cursor: pointer;
+}
+#frame-input {
+    width: 50px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+}
+/* ================ ACHIEVEMENT PAGE ================ */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    width: 80%;
+    margin: 40px auto;
+}
+.stat-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.stat-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+.stat-label {
+    font-size: 16px;
+    color: #666;
+}
+.achievements-section {
+    width: 80%;
+    margin: 0 auto;
+}
+.achievements-section h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.badge {
+    background: white;
+    padding: 30px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.2s;
+}
+.badge:hover {
+    transform: translateY(-5px);
+}
+.badge.locked {
+    opacity: 0.4;
+    filter: grayscale(100%);
+}
+.badge-icon {
+    font-size: 64px;
+    margin-bottom: 15px;
+}
+.badge-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+/* ================ RECORDS PAGE ================ */
+.records-controls {
+    display: flex;
+    gap: 10px;
+    margin: 20px auto;
+    width: 80%;
+    justify-content: center;
+}
+.filter-btn {
+    padding: 10px 20px;
+    border: 2px solid #007BFF;
+    background: white;
+    color: #007BFF;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.filter-btn:hover {
+    background: #e7f3ff;
+}
+.filter-btn.active {
+    background: #007BFF;
+    color: white;
+}
+.chart-container {
+    width: 80%;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin: 20px auto;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#focus-chart {
+    display: block;
+    margin: 0 auto;
+    /* Make sure the chart scales within its container. */
+    max-width: 100%;
+}
+.sessions-list {
+    width: 80%;
+    margin: 20px auto;
+}
+.sessions-list h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+#sessions-table {
+    width: 100%;
+    background: white;
+    border-collapse: collapse;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#sessions-table th {
+    background: #007BFF;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+}
+#sessions-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+#sessions-table tr:last-child td {
+    border-bottom: none;
+}
+#sessions-table tbody tr:hover {
+    background: #f8f9fa;
+}
+.btn-view {
+    padding: 6px 18px;
+    background: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    transition: background 0.2s;
+}
+.btn-view:hover {
+    background: #0056b3;
+}
+.records-detail-modal {
+    width: min(960px, 92vw);
+    max-width: 960px;
+    max-height: 86vh;
+    overflow-y: auto;
+    padding: 30px;
+    box-sizing: border-box;
+}
+.records-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+.records-detail-kicker {
+    color: #007BFF;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+.records-detail-header h2 {
+    margin: 10px 0 8px;
+    color: #333;
+    text-align: left;
+}
+.records-detail-subtitle {
+    margin: 0;
+    color: #667281;
+    line-height: 1.6;
+}
+.records-detail-close {
+    border: 1px solid #d6e6fa;
+    background: #f4f9ff;
+    color: #3569a8;
+    border-radius: 999px;
+    padding: 10px 18px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+}
+.records-detail-close:hover {
+    border-color: #bfd9f7;
+    background: #e9f4ff;
+}
+.records-detail-feedback {
+    padding: 18px 20px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #516173;
+    font-weight: 700;
+}
+.records-detail-feedback-error {
+    background: #fff1ee;
+    color: #b54028;
+}
+.records-detail-summary {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 14px;
+    margin-bottom: 18px;
+}
+.records-detail-stat {
+    padding: 18px;
+    border-radius: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+}
+.records-detail-stat.excellent {
+    background: #eef9f0;
+    border-color: #cdebd3;
+}
+.records-detail-stat.good {
+    background: #fff9eb;
+    border-color: #f8e3a8;
+}
+.records-detail-stat.fair {
+    background: #fff4eb;
+    border-color: #ffd6af;
+}
+.records-detail-stat.low {
+    background: #fff0f0;
+    border-color: #f3c7c7;
+}
+.records-detail-stat-label {
+    display: block;
+    margin-bottom: 8px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.records-detail-stat-value {
+    display: block;
+    color: #1f2d3d;
+    font-size: 28px;
+    line-height: 1.1;
+}
+.records-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+}
+.records-detail-card {
+    background: white;
+    border: 1px solid #e8eef5;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(20, 44, 74, 0.06);
+    margin-bottom: 16px;
+}
+.records-detail-card:last-child {
+    margin-bottom: 0;
+}
+.records-detail-card h3 {
+    margin: 0 0 16px;
+    color: #333;
+    font-size: 18px;
+}
+.records-detail-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px 18px;
+}
+.records-detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.records-detail-item-label {
+    color: #7a8795;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.records-detail-item-value {
+    color: #263445;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.5;
+}
+.records-detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.records-detail-section-head span {
+    color: #7a8795;
+    font-size: 13px;
+    font-weight: 700;
+}
+.records-detail-timeline {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+    gap: 5px;
+}
+.records-detail-segment {
+    height: 48px;
+    border-radius: 999px;
+}
+.records-detail-segment.focused {
+    background: linear-gradient(180deg, #3ab86a 0%, #23a057 100%);
+}
+.records-detail-segment.mixed {
+    background: linear-gradient(180deg, #f1b447 0%, #df9a1e 100%);
+}
+.records-detail-segment.distracted {
+    background: linear-gradient(180deg, #ec7d7d 0%, #d9534f 100%);
+}
+.records-detail-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 14px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+}
+.records-detail-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+.records-detail-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+.records-detail-dot.focused {
+    background: #23a057;
+}
+.records-detail-dot.mixed {
+    background: #df9a1e;
+}
+.records-detail-dot.distracted {
+    background: #d9534f;
+}
+.records-detail-events {
+    display: grid;
+    gap: 10px;
+    max-height: 280px;
+    overflow-y: auto;
+}
+.records-detail-event {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    background: #f8fbff;
+    border: 1px solid #e1edf9;
+    border-radius: 14px;
+}
+.records-detail-event-time {
+    min-width: 52px;
+    color: #3569a8;
+    font-size: 13px;
+    font-weight: 800;
+}
+.records-detail-event-copy {
+    min-width: 0;
+}
+.records-detail-event-status {
+    color: #243345;
+    font-size: 14px;
+    font-weight: 800;
+}
+.records-detail-event-meta {
+    margin-top: 4px;
+    color: #6f7d8c;
+    font-size: 12px;
+    line-height: 1.5;
+}
+.records-detail-event-badge {
+    padding: 7px 12px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.records-detail-event-badge.focused {
+    background: #eaf8ef;
+    color: #1f8a4c;
+}
+.records-detail-event-badge.distracted {
+    background: #fff1f1;
+    color: #c24c49;
+}
+.records-detail-empty {
+    padding: 16px 18px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #708090;
+    font-weight: 700;
+}
+/* ================ SETTINGS PAGE ================ */
+.settings-container {
+    width: 60%;
+    max-width: 800px;
+    margin: 20px auto;
+}
+.setting-group {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.setting-group h2 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007BFF;
+    padding-bottom: 10px;
+}
+.setting-item {
+    margin-bottom: 25px;
+}
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+.setting-item label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+.slider-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.slider-group input[type="range"] {
+    flex: 1;
+}
+.slider-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.setting-description {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+    font-style: italic;
+}
+input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+input[type="number"] {
+    width: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: 'Nunito', sans-serif;
+}
+/* Center the settings buttons and give them more width. */
+.setting-group .action-btn {
+    display: inline-block;   /* Allow buttons to sit side by side. */
+    width: 48%;              /* Roughly half-width each, with a small gutter. */
+    margin: 15px 1%;         /* Vertical spacing plus horizontal separation. */
+    text-align: center;      /* Center the label text. */
+    box-sizing: border-box;  /* Prevent borders from forcing an early wrap. */
+}
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+/* ================ HELP PAGE ================ */
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+/* Fake ad block (Help page) */
+.fake-ad {
+    position: relative;
+    display: block;
+    width: min(600px, 90%);
+    margin: 10px auto 30px auto;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    text-decoration: none;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.fake-ad:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
+}
+.fake-ad img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+.fake-ad-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: rgba(0,0,0,0.75);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    letter-spacing: 0.5px;
+}
+.fake-ad-cta {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    background: #111;
+    color: #fff;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+.help-section {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.help-section h2 {
+    color: #007BFF;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.help-section ol,
+.help-section ul {
+    line-height: 1.8;
+    color: #333;
+}
+.help-section p {
+    line-height: 1.6;
+    color: #333;
+}
+details {
+    margin: 15px 0;
+    cursor: pointer;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+}
+summary {
+    font-weight: bold;
+    padding: 5px;
+    color: #007BFF;
+}
+details[open] summary {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+details p {
+    margin: 10px 0 0 0;
+}
+/* ================ SESSION SUMMARY MODAL ================ */
+/* These modal styles can be reused for future overlays. */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.modal-content {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+.modal-content h2 {
+    margin-top: 0;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+.summary-stats {
+    margin-bottom: 30px;
+}
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+.summary-item:last-child {
+    border-bottom: none;
+}
+.summary-label {
+    font-weight: 600;
+    color: #666;
+}
+.summary-value {
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.modal-content .btn-main {
+    display: block;
+    margin: 0 auto;
+    padding: 12px 40px;
+}
+/* ================ TIMELINE BLOCKS ================ */
+.timeline-block {
+    transition: opacity 0.2s;
+    border-radius: 2px;
+}
+.timeline-block:hover {
+    opacity: 0.7;
+}
+/* ================ RESPONSIVE DESIGN ================ */
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .badges-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 768px) {
+    .stats-grid,
+    .badges-grid {
+        grid-template-columns: 1fr;
+        width: 90%;
+    }
+    .settings-container,
+    .help-container,
+    .chart-container,
+    .sessions-list,
+    .records-controls {
+        width: 90%;
+    }
+    #control-panel {
+        width: 90%;
+        flex-wrap: wrap;
+    }
+    #display-area {
+        width: 90%;
+    }
+    #timeline-area {
+        width: 90%;
+    }
+    #frame-control {
+        width: 90%;
+        flex-direction: column;
+    }
+    .focus-inline-error-standalone {
+        width: 90%;
+    }
+    .focus-flow-overlay {
+        top: 70px;
+        right: 10px;
+        bottom: 10px;
+        left: 10px;
+    }
+    .focus-flow-card {
+        padding: 22px 20px;
+    }
+    .focus-flow-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .focus-flow-icon {
+        width: 92px;
+        height: 92px;
+    }
+    .focus-flow-grid {
+        grid-template-columns: 1fr;
+    }
+    .focus-flow-steps {
+        grid-template-columns: 1fr;
+    }
+    .focus-flow-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .focus-flow-button,
+    .focus-flow-secondary {
+        width: 100%;
+    }
+    .records-detail-modal {
+        width: 94vw;
+        padding: 22px 18px;
+    }
+    .records-detail-header,
+    .records-detail-section-head {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .records-detail-summary,
+    .records-detail-grid,
+    .records-detail-list {
+        grid-template-columns: 1fr;
+    }
+    .records-detail-event {
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+    }
+}
+/* =========================================
+   SESSION RESULT OVERLAY
+   ========================================= */
+.session-result-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent backdrop. */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    z-index: 10;
+    animation: fadeIn 0.5s ease;
+    backdrop-filter: blur(5px); /* Optional background blur. */
+}
+.session-result-overlay h3 {
+    font-size: 32px;
+    margin-bottom: 30px;
+    color: #4cd137; /* Green title accent. */
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+.session-result-overlay .result-item {
+    display: flex;
+    justify-content: space-between;
+    width: 200px; /* Keep the stat row compact. */
+    margin-bottom: 15px;
+    font-size: 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    padding-bottom: 5px;
+}
+.session-result-overlay .label {
+    color: #ccc;
+    font-weight: normal;
+}
+.session-result-overlay .value {
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Courier New', monospace; /* Give the values a data-like look. */
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+/* ================= Welcome modal styles ================= */
+.welcome-modal-overlay {
+position: fixed;
+top: 0; left: 0; right: 0; bottom: 0;
+background-color: rgba(0, 0, 0, 0.7);
+display: flex;
+justify-content: center;
+align-items: center;
+z-index: 9999;
+}
+.welcome-modal {
+background-color: #1e1e24;
+padding: 40px;
+border-radius: 15px;
+text-align: center;
+box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+border: 1px solid #333;
+}
+.welcome-modal h2 { margin-top: 0; color: #fff; }
+.welcome-modal p { margin-bottom: 30px; color: #ccc; }
+.welcome-buttons { display: flex; gap: 20px; justify-content: center; }
+/* ================= Top-left avatar styles ================= */
+.avatar-container {
+    position: absolute;
+    left: 20px;
+    cursor: pointer;
+    z-index: 1;
+}
+.avatar-circle {
+width: 40px;
+height: 40px;
+border-radius: 50%;
+display: flex;
+justify-content: center;
+align-items: center;
+font-weight: bold;
+font-size: 1.2rem;
+color: white;
+transition: all 0.3s ease;
+border: 2px solid transparent;
+}
+.avatar-circle.user { background-color: #555; }
+.avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }
+/* ================ CALIBRATION OVERLAY ================ */
+.cal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(8, 15, 28, 0.94);
+  backdrop-filter: blur(6px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Nunito', sans-serif;
+}
+/* ---- header / instructions ---- */
+.cal-header {
+  position: absolute;
+  top: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+}
+.cal-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.cal-eyebrow-collect {
+  background: rgba(40, 167, 69, 0.18);
+  color: #5ee882;
+}
+.cal-eyebrow-verify {
+  background: rgba(0, 123, 255, 0.18);
+  color: #6bb8ff;
+}
+.cal-instruction {
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+/* ---- target dot + ring ---- */
+.cal-target {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+.cal-ring {
+  position: absolute;
+  left: -30px;
+  top: -30px;
+}
+.cal-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transition: box-shadow 0.3s ease;
+}
+/* ---- cancel button (matches focus-flow-secondary) ---- */
+.cal-cancel {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  padding: 12px 28px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Nunito', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+.cal-cancel:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+/* ---- done card (matches focus-flow-card style) ---- */
+.cal-done-card {
+  text-align: center;
+  padding: 36px 44px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
+  animation: fadeIn 0.4s ease;
+}
+.cal-done-success {
+  background: linear-gradient(168deg, rgba(40, 167, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(40, 167, 69, 0.3);
+}
+.cal-done-fail {
+  background: linear-gradient(168deg, rgba(220, 53, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(220, 53, 69, 0.3);
+}
+.cal-done-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+.cal-done-success .cal-done-eyebrow {
+  background: rgba(40, 167, 69, 0.2);
+  color: #5ee882;
+}
+.cal-done-fail .cal-done-eyebrow {
+  background: rgba(220, 53, 69, 0.2);
+  color: #f87171;
+}
+.cal-done-title {
+  margin: 0 0 8px;
+  font-size: 1.6rem;
+  color: #fff;
+}
+.cal-done-subtitle {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+/* ================= Home page 2x2 responsive button grid ================= */
+.home-button-grid {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 360px;
+  margin: 40px auto 0;
+}
+.home-button-grid .btn-main {
+  width: 100%;
+  height: 60px; /* Keep all tiles at the same height. */
+  margin: 0; /* Remove default outer spacing. */
+  padding: 10px;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box; /* Prevent padding and borders from breaking the grid. */
+}
+/* Mobile-only scaling for screens below 600px. */
+@media (max-width: 600px) {
+  #top-menu {
+    justify-content: flex-start;
+    padding: 0 12px 0 68px;
+  }
+  .menu-btn {
+    padding: 10px 14px;
+    font-size: 0.92rem;
+  }
+  .separator {
+    margin: 0 2px;
+  }
+  .home-button-grid {
+    gap: 15px;
+    max-width: 90%;
+  }
+  .home-button-grid .btn-main {
+    height: 50px;
+    font-size: 0.85rem;
+  }
+}

src/App.jsx CHANGED Viewed

@@ -1,91 +1,125 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './App.css';
-import { VideoManagerLocal } from './utils/VideoManagerLocal';
-import Home from './components/Home';
-import FocusPageLocal from './components/FocusPageLocal';
-import Achievement from './components/Achievement';
-import Records from './components/Records';
-import Customise from './components/Customise';
-import Help from './components/Help';
-function App() {
-  const [activeTab, setActiveTab] = useState('home');
-  const videoManagerRef = useRef(null);
-  const [isSessionActive, setIsSessionActive] = useState(false);
-  const [sessionResult, setSessionResult] = useState(null);
-  useEffect(() => {
-    const callbacks = {
-      onSessionStart: () => {
-        setIsSessionActive(true);
-        setSessionResult(null);
-      },
-      onSessionEnd: (summary) => {
-        setIsSessionActive(false);
-        if (summary) setSessionResult(summary);
-      }
-    };
-    videoManagerRef.current = new VideoManagerLocal(callbacks);
-    return () => {
-      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
-    };
-  }, []);
-  const renderMenuButton = (tabId, label) => (
-    <button
-      className={`menu-btn ${activeTab === tabId ? 'active' : ''}`}
-      onClick={() => setActiveTab(tabId)}
-    >
-      {label}
-    </button>
-  );
-  return (
-    <div className="app-container">
-      <nav id="top-menu">
-        <div className="top-menu-links">
-        <button
-          type="button"
-          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`}
-          onClick={() => setActiveTab('home')}
-        >
-          Home
-        </button>
-        <div className="separator" aria-hidden />
-        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={() => setActiveTab('focus')}>
-          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
-        </button>
-        <div className="separator"></div>
-        {renderMenuButton('achievement', 'My Achievement')}
-        <div className="separator"></div>
-        {renderMenuButton('records', 'My Records')}
-        <div className="separator"></div>
-        {renderMenuButton('customise', 'Settings')}
-        <div className="separator"></div>
-        {renderMenuButton('help', 'Help')}
-        </div>
-      </nav>
-      {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
-      <FocusPageLocal
-        videoManager={videoManagerRef.current}
-        sessionResult={sessionResult}
-        setSessionResult={setSessionResult}
-        isActive={activeTab === 'focus'}
-      />
-      {activeTab === 'achievement' && <Achievement />}
-      {activeTab === 'records' && <Records />}
-      {activeTab === 'customise' && <Customise />}
-      {activeTab === 'help' && <Help />}
-    </div>
-  );
-}
-export default App;

+import React, { useState, useRef, useEffect } from 'react';
+import './App.css';
+import { VideoManagerLocal } from './utils/VideoManagerLocal';
+import Home from './components/Home';
+import FocusPageLocal from './components/FocusPageLocal';
+import Achievement from './components/Achievement';
+import Records from './components/Records';
+import Help from './components/Help';
+function App() {
+  const [activeTab, setActiveTab] = useState('home');
+  const videoManagerRef = useRef(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [sessionResult, setSessionResult] = useState(null);
+  const [isTutorialActive, setIsTutorialActive] = useState(false);
+  const [hasSeenTutorial, setHasSeenTutorial] = useState(false);
+  useEffect(() => {
+    fetch('/api/history', { method: 'DELETE' })
+      .then(() => {
+        const backup = localStorage.getItem('focus_magic_backup');
+        if (backup) {
+          try {
+            const sessions = JSON.parse(backup);
+            fetch('/api/import', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(sessions)
+            });
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      })
+      .catch(err => console.error(err));
+    const callbacks = {
+      onSessionStart: () => {
+        setIsSessionActive(true);
+        setSessionResult(null);
+      },
+      onSessionEnd: (summary) => {
+        setIsSessionActive(false);
+        if (summary) setSessionResult(summary);
+        fetch('/api/sessions?filter=all')
+          .then(res => res.json())
+          .then(data => {
+            if (data && Array.isArray(data)) {
+              localStorage.setItem('focus_magic_backup', JSON.stringify(data));
+            }
+          })
+          .catch(err => console.error(err));
+      }
+    };
+    videoManagerRef.current = new VideoManagerLocal(callbacks);
+    return () => {
+      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
+    };
+  }, []);
+  const handleStartFocus = () => {
+    if (!hasSeenTutorial) {
+      setIsTutorialActive(true);
+    }
+    setActiveTab('focus');
+  };
+  const handleStartTutorial = () => {
+    setIsTutorialActive(true);
+    setActiveTab('focus');
+  };
+  return (
+    <div className="app-container">
+      <nav id="top-menu">
+        <button
+          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`}
+          onClick={() => setActiveTab('home')}
+        >
+          Home
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={handleStartFocus}>
+          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
+          My Achievement
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
+          My Records
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
+          Help
+        </button>
+      </nav>
+      {activeTab === 'home' && <Home onStartFocus={handleStartFocus} onStartTutorial={handleStartTutorial} />}
+      <FocusPageLocal
+        videoManager={videoManagerRef.current}
+        sessionResult={sessionResult}
+        setSessionResult={setSessionResult}
+        isActive={activeTab === 'focus'}
+        isTutorialActive={isTutorialActive}
+        setIsTutorialActive={setIsTutorialActive}
+        setHasSeenTutorial={setHasSeenTutorial}
+      />
+      {activeTab === 'achievement' && <Achievement />}
+      {activeTab === 'records' && <Records />}
+      {activeTab === 'help' && <Help />}
+    </div>
+  );
+}
+export default App;

src/components/FocusPageLocal.jsx CHANGED Viewed

@@ -1,944 +1,1040 @@
-import React, { useState, useEffect, useRef } from 'react';
-import CalibrationOverlay from './CalibrationOverlay';
-const FLOW_STEPS = {
-  intro: 'intro',
-  permission: 'permission',
-  ready: 'ready'
-};
-const FOCUS_STATES = {
-  pending: 'pending',
-  focused: 'focused',
-  notFocused: 'not-focused'
-};
-function HelloIcon() {
-  return (
-    <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
-      <circle cx="48" cy="48" r="40" fill="#007BFF" />
-      <path d="M30 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-      <path d="M54 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-      <path d="M30 52c3 11 10 17 18 17s15-6 18-17" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-    </svg>
-  );
-}
-function CameraIcon() {
-  return (
-    <svg width="110" height="110" viewBox="0 0 110 110" aria-hidden="true">
-      <rect x="30" y="36" width="50" height="34" rx="5" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <path d="M24 72h62c0 9-7 16-16 16H40c-9 0-16-7-16-16Z" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <path d="M55 28v8" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
-      <circle cx="55" cy="36" r="14" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <circle cx="55" cy="36" r="4" fill="#007BFF" />
-      <path d="M46 83h18" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
-    </svg>
-  );
-}
-const MODEL_ORDER = ['hybrid', 'xgboost', 'mlp', 'geometric'];
-const MODEL_INFO = {
-  hybrid: {
-    label: 'Hybrid',
-    tagline: 'Best overall — combines ML with geometric scoring',
-    how: 'Fuses XGBoost predictions (30%) with geometric face/eye scores (70%). Uses a weighted blend tuned with LOPO evaluation.',
-    accuracy: 'N/A',
-    f1: '0.8409',
-    auc: 'N/A',
-    threshold: '0.46',
-    evaluation: 'LOPO tuning (9 participants, 144K frames)',
-    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
-    strengths: 'Most robust across different people. Latest LOPO mean F1 is 0.8409 at w_mlp=0.3.',
-    badge: 'Recommended',
-  },
-  xgboost: {
-    label: 'XGBoost',
-    tagline: 'Highest raw accuracy — gradient-boosted decision trees',
-    how: 'Ensemble of 600 decision trees (max depth 8). Each tree learns to correct errors from previous trees. Outputs probability of focused state.',
-    accuracy: '95.87%',
-    f1: '0.9585',
-    auc: '0.9908',
-    threshold: '0.38',
-    evaluation: 'Random split test (15%) + LOPO thresholds',
-    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
-    strengths: 'Strong pattern recognition and fast inference. LOPO: AUC 0.8695, optimal threshold 0.280, F1 0.8549.',
-    badge: null,
-  },
-  mlp: {
-    label: 'MLP',
-    tagline: 'Lightweight neural network — fast and efficient',
-    how: 'Two-layer neural network (64→32 neurons). Takes 10 face features, applies learned weights, outputs focused/unfocused probability via softmax.',
-    accuracy: '92.92%',
-    f1: '0.9287',
-    auc: '0.9714',
-    threshold: '0.23',
-    evaluation: 'Random split test (15%) + LOPO thresholds',
-    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
-    strengths: 'Fastest inference and smallest model size. LOPO: AUC 0.8624, optimal threshold 0.228, F1 0.8578.',
-    badge: null,
-  },
-  geometric: {
-    label: 'Geometric',
-    tagline: 'Baseline only — hardcoded thresholds, no learning',
-    how: 'Uses fixed thresholds on head orientation (70%) and eye openness (30%). No training — just hand-tuned rules on 478 face landmarks. Cannot adapt to new faces or environments.',
-    accuracy: 'N/A',
-    f1: '0.8195',
-    auc: 'N/A',
-    threshold: '0.55',
-    evaluation: 'LOPO geometric sweep',
-    features: 'Head yaw/pitch/roll angles, eye aspect ratio (EAR), iris gaze offset, mouth aspect ratio (MAR)',
-    strengths: 'No model files needed. Useful fallback when model checkpoints are unavailable.',
-    badge: 'Baseline',
-  },
-};
-function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive }) {
-  const [currentFrame, setCurrentFrame] = useState(15);
-  const [timelineEvents, setTimelineEvents] = useState([]);
-  const [stats, setStats] = useState(null);
-  const [systemStats, setSystemStats] = useState(null);
-  const [availableModels, setAvailableModels] = useState([]);
-  const [currentModel, setCurrentModel] = useState('mlp');
-  const [flowStep, setFlowStep] = useState(FLOW_STEPS.intro);
-  const [cameraReady, setCameraReady] = useState(false);
-  const [isStarting, setIsStarting] = useState(false);
-  const [focusState, setFocusState] = useState(FOCUS_STATES.pending);
-  const [cameraError, setCameraError] = useState('');
-  const [calibration, setCalibration] = useState(null);
-  const [l2csBoost, setL2csBoost] = useState(false);
-  const [l2csBoostAvailable, setL2csBoostAvailable] = useState(false);
-  const localVideoRef = useRef(null);
-  const displayCanvasRef = useRef(null);
-  const pipVideoRef = useRef(null);
-  const pipStreamRef = useRef(null);
-  const previewFrameRef = useRef(null);
-  const formatDuration = (seconds) => {
-    if (seconds === 0) return '0s';
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}m ${secs}s`;
-  };
-  const stopPreviewLoop = () => {
-    if (previewFrameRef.current) {
-      cancelAnimationFrame(previewFrameRef.current);
-      previewFrameRef.current = null;
-    }
-  };
-  const startPreviewLoop = () => {
-    stopPreviewLoop();
-    const renderPreview = () => {
-      const canvas = displayCanvasRef.current;
-      const video = localVideoRef.current;
-      if (!canvas || !video || !cameraReady || videoManager?.isStreaming) {
-        previewFrameRef.current = null;
-        return;
-      }
-      if (video.readyState >= 2) {
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      }
-      previewFrameRef.current = requestAnimationFrame(renderPreview);
-    };
-    previewFrameRef.current = requestAnimationFrame(renderPreview);
-  };
-  const getErrorMessage = (err) => {
-    if (err?.name === 'NotAllowedError') {
-      return 'Camera permission denied. Please allow camera access.';
-    }
-    if (err?.name === 'NotFoundError') {
-      return 'No camera found. Please connect a camera.';
-    }
-    if (err?.name === 'NotReadableError') {
-      return 'Camera is already in use by another application.';
-    }
-    if (err?.target?.url) {
-      return `WebSocket connection failed: ${err.target.url}. Check that the backend server is running.`;
-    }
-    return err?.message || 'Failed to start focus session.';
-  };
-  useEffect(() => {
-    if (!videoManager) return;
-    const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
-    const originalOnSessionEnd = videoManager.callbacks.onSessionEnd;
-    videoManager.callbacks.onStatusUpdate = (isFocused) => {
-      setTimelineEvents((prev) => {
-        const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
-        if (newEvents.length > 60) newEvents.shift();
-        return newEvents;
-      });
-      setFocusState(isFocused ? FOCUS_STATES.focused : FOCUS_STATES.notFocused);
-      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
-    };
-    videoManager.callbacks.onSessionEnd = (summary) => {
-      setFocusState(FOCUS_STATES.pending);
-      setCameraReady(false);
-      if (originalOnSessionEnd) originalOnSessionEnd(summary);
-    };
-    videoManager.callbacks.onCalibrationUpdate = (cal) => {
-      setCalibration(cal && cal.active ? { ...cal } : null);
-    };
-    const statsInterval = setInterval(() => {
-      if (videoManager && videoManager.getStats) {
-        setStats(videoManager.getStats());
-      }
-    }, 1000);
-    return () => {
-      if (videoManager) {
-        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
-        videoManager.callbacks.onSessionEnd = originalOnSessionEnd;
-        videoManager.callbacks.onCalibrationUpdate = null;
-      }
-      clearInterval(statsInterval);
-    };
-  }, [videoManager]);
-  // Fetch available models on mount
-  useEffect(() => {
-    fetch('/api/models')
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.available) setAvailableModels(data.available);
-        if (data.current) {
-          // If L2CS was the active model, switch to a base model + enable boost
-          if (data.current === 'l2cs') {
-            const fallback = data.available.find((m) => m !== 'l2cs') || 'mlp';
-            setCurrentModel(fallback);
-            handleModelChange(fallback);
-          } else {
-            setCurrentModel(data.current);
-          }
-        }
-        if (data.l2cs_boost !== undefined) setL2csBoost(data.l2cs_boost);
-        if (data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
-      })
-      .catch((err) => console.error('Failed to fetch models:', err));
-  }, []);
-  useEffect(() => {
-    if (flowStep === FLOW_STEPS.ready && cameraReady && !videoManager?.isStreaming) {
-      startPreviewLoop();
-      return;
-    }
-    stopPreviewLoop();
-  }, [cameraReady, flowStep, videoManager?.isStreaming]);
-  useEffect(() => {
-    if (!isActive) {
-      stopPreviewLoop();
-    }
-  }, [isActive]);
-  useEffect(() => {
-    return () => {
-      stopPreviewLoop();
-      if (pipVideoRef.current) {
-        pipVideoRef.current.pause();
-        pipVideoRef.current.srcObject = null;
-      }
-      if (pipStreamRef.current) {
-        pipStreamRef.current.getTracks().forEach((t) => t.stop());
-        pipStreamRef.current = null;
-      }
-    };
-  }, []);
-  // Poll server CPU/memory for UI
-  useEffect(() => {
-    const fetchSystem = () => {
-      fetch('/api/stats/system')
-        .then(res => res.json())
-        .then(data => setSystemStats(data))
-        .catch(() => setSystemStats(null));
-    };
-    fetchSystem();
-    const interval = setInterval(fetchSystem, 3000);
-    return () => clearInterval(interval);
-  }, []);
-  const handleModelChange = async (modelName) => {
-    try {
-      const res = await fetch('/api/settings', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ model_name: modelName })
-      });
-      const result = await res.json();
-      if (result.updated) {
-        setCurrentModel(modelName);
-      }
-    } catch (err) {
-      console.error('Failed to switch model:', err);
-    }
-  };
-  const handleEnableCamera = async () => {
-    if (!videoManager) return;
-    try {
-      setCameraError('');
-      await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
-      setCameraReady(true);
-      setFlowStep(FLOW_STEPS.ready);
-      setFocusState(FOCUS_STATES.pending);
-    } catch (err) {
-      const errorMessage = getErrorMessage(err);
-      setCameraError(errorMessage);
-      console.error('Camera init error:', err);
-    }
-  };
-  const handleEyeGazeToggle = async () => {
-    const next = !l2csBoost;
-    try {
-      const res = await fetch('/api/settings', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ l2cs_boost: next })
-      });
-      if (!res.ok) return;
-      setL2csBoost(next);
-      if (next && videoManager && videoManager.isStreaming) {
-        // Turning ON → auto-start calibration
-        videoManager.startCalibration();
-      } else if (!next && videoManager) {
-        // Turning OFF → cancel any active calibration
-        videoManager.cancelCalibration();
-      }
-    } catch (err) {
-      console.error('Failed to toggle eye gaze:', err);
-    }
-  };
-  const handleStart = async () => {
-    try {
-      setIsStarting(true);
-      setSessionResult(null);
-      setTimelineEvents([]);
-      setFocusState(FOCUS_STATES.pending);
-      setCameraError('');
-      if (!cameraReady) {
-        await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
-        setCameraReady(true);
-        setFlowStep(FLOW_STEPS.ready);
-      }
-      await videoManager.startStreaming();
-    } catch (err) {
-      const errorMessage = getErrorMessage(err);
-      setCameraError(errorMessage);
-      setFocusState(FOCUS_STATES.pending);
-      console.error('Start error:', err);
-      alert(`Failed to start: ${errorMessage}\n\nCheck browser console for details.`);
-    } finally {
-      setIsStarting(false);
-    }
-  };
-  const handleStop = async () => {
-    if (videoManager) {
-      await videoManager.stopStreaming();
-    }
-    try {
-      if (document.pictureInPictureElement === pipVideoRef.current) {
-        await document.exitPictureInPicture();
-      }
-    } catch (_) {}
-    if (pipVideoRef.current) {
-      pipVideoRef.current.pause();
-      pipVideoRef.current.srcObject = null;
-    }
-    if (pipStreamRef.current) {
-      pipStreamRef.current.getTracks().forEach((t) => t.stop());
-      pipStreamRef.current = null;
-    }
-    stopPreviewLoop();
-    setFocusState(FOCUS_STATES.pending);
-    setCameraReady(false);
-  };
-  const handlePiP = async () => {
-    try {
-      //
-      if (!videoManager || !videoManager.isStreaming) {
-        alert('Please start the video first.');
-        return;
-      }
-      if (!displayCanvasRef.current) {
-        alert('Video not ready.');
-        return;
-      }
-      //
-      if (document.pictureInPictureElement === pipVideoRef.current) {
-        await document.exitPictureInPicture();
-        console.log('PiP exited');
-        return;
-      }
-      //
-      if (!document.pictureInPictureEnabled) {
-        alert('Picture-in-Picture is not supported in this browser.');
-        return;
-      }
-      //
-      const pipVideo = pipVideoRef.current;
-      if (!pipVideo) {
-        alert('PiP video element not ready.');
-        return;
-      }
-      const isSafariPiP = typeof pipVideo.webkitSetPresentationMode === 'function';
-      //
-      let stream = pipStreamRef.current;
-      if (!stream) {
-        const capture = displayCanvasRef.current.captureStream;
-        if (typeof capture === 'function') {
-          stream = capture.call(displayCanvasRef.current, 30);
-        }
-        if (!stream || stream.getTracks().length === 0) {
-          const cameraStream = localVideoRef.current?.srcObject;
-          if (!cameraStream) {
-            alert('Camera stream not ready.');
-            return;
-          }
-          stream = cameraStream;
-        }
-        pipStreamRef.current = stream;
-      }
-      //
-      if (!stream || stream.getTracks().length === 0) {
-        alert('Failed to capture video stream from canvas.');
-        return;
-      }
-      pipVideo.srcObject = stream;
-      //
-      if (pipVideo.readyState < 2) {
-        await new Promise((resolve) => {
-          const onReady = () => {
-            pipVideo.removeEventListener('loadeddata', onReady);
-            pipVideo.removeEventListener('canplay', onReady);
-            resolve();
-          };
-          pipVideo.addEventListener('loadeddata', onReady);
-          pipVideo.addEventListener('canplay', onReady);
-          //
-          setTimeout(resolve, 600);
-        });
-      }
-      try {
-        await pipVideo.play();
-      } catch (_) {}
-      //
-      if (isSafariPiP) {
-        try {
-          pipVideo.webkitSetPresentationMode('picture-in-picture');
-          console.log('PiP activated (Safari)');
-          return;
-        } catch (e) {
-          //
-          const cameraStream = localVideoRef.current?.srcObject;
-          if (cameraStream && cameraStream !== pipVideo.srcObject) {
-            pipVideo.srcObject = cameraStream;
-            try {
-              await pipVideo.play();
-            } catch (_) {}
-            pipVideo.webkitSetPresentationMode('picture-in-picture');
-            console.log('PiP activated (Safari fallback)');
-            return;
-          }
-          throw e;
-        }
-      }
-      //
-      if (typeof pipVideo.requestPictureInPicture === 'function') {
-        await pipVideo.requestPictureInPicture();
-        console.log('PiP activated');
-      } else {
-        alert('Picture-in-Picture is not supported in this browser.');
-      }
-    } catch (err) {
-      console.error('PiP error:', err);
-      alert(`Failed to enter Picture-in-Picture: ${err.message}`);
-    }
-  };
-  const handleFloatingWindow = () => {
-    handlePiP();
-  };
-  const handleFrameChange = (val) => {
-    const rate = parseInt(val, 10);
-    setCurrentFrame(rate);
-    if (videoManager) {
-      videoManager.setFrameRate(rate);
-    }
-  };
-  const handlePreview = () => {
-    if (!videoManager || !videoManager.isStreaming) {
-      alert('Please start a session first.');
-      return;
-    }
-    //
-    const currentStats = videoManager.getStats();
-    if (!currentStats.sessionId) {
-      alert('No active session.');
-      return;
-    }
-    const sessionDuration = Math.floor((Date.now() - (videoManager.sessionStartTime || Date.now())) / 1000);
-    const totalFrames = currentStats.framesProcessed || 0;
-    const focusedFrames = currentStats.focusedFrames ?? 0;
-    const focusScore = totalFrames > 0 ? focusedFrames / totalFrames : 0;
-    setSessionResult({
-      duration_seconds: sessionDuration,
-      focus_score: focusScore,
-      total_frames: totalFrames,
-      focused_frames: focusedFrames
-    });
-  };
-  const handleCloseOverlay = () => {
-    setSessionResult(null);
-  };
-  const pageStyle = isActive
-    ? undefined
-    : {
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        overflow: 'hidden',
-        opacity: 0,
-        pointerEvents: 'none'
-      };
-  const focusStateLabel = {
-    [FOCUS_STATES.pending]: 'Pending',
-    [FOCUS_STATES.focused]: 'Focused',
-    [FOCUS_STATES.notFocused]: 'Not Focused'
-  }[focusState];
-  const introHighlights = [
-    {
-      title: 'Live focus tracking',
-      text: 'Head pose, gaze, and eye openness are read continuously during the session.'
-    },
-    {
-      title: 'Quick setup',
-      text: 'Front-facing light and a stable camera angle give the cleanest preview.'
-    },
-    {
-      title: 'Private by default',
-      text: 'Only session metadata is stored, not the raw camera footage.'
-    }
-  ];
-  const permissionSteps = [
-    {
-      title: 'Allow browser access',
-      text: 'Approve the camera prompt so the preview can appear immediately.'
-    },
-    {
-      title: 'Check your framing',
-      text: 'Keep your face visible and centered for more stable landmark detection.'
-    },
-    {
-      title: 'Start when ready',
-      text: 'After the preview appears, use the page controls to begin or stop.'
-    }
-  ];
-  const renderIntroCard = () => {
-    if (flowStep === FLOW_STEPS.intro) {
-      return (
-        <div className="focus-flow-overlay">
-          <div className="focus-flow-card">
-            <div className="focus-flow-header">
-              <div>
-                <div className="focus-flow-eyebrow">Focus Session</div>
-                <h2>Before you begin</h2>
-              </div>
-              <div className="focus-flow-icon">
-                <HelloIcon />
-              </div>
-            </div>
-            <p className="focus-flow-lead">
-              The focus page uses your live camera preview to estimate attention in real time.
-              Review the setup notes below, then continue to camera access.
-            </p>
-            <div className="focus-flow-grid">
-              {introHighlights.map((item) => (
-                <article key={item.title} className="focus-flow-panel">
-                  <h3>{item.title}</h3>
-                  <p>{item.text}</p>
-                </article>
-              ))}
-            </div>
-            <div className="focus-flow-footer">
-              <div className="focus-flow-note">
-                You can still change frame rate and available model options after the preview loads.
-              </div>
-              <button className="focus-flow-button" onClick={() => setFlowStep(FLOW_STEPS.permission)}>
-                Continue
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-    if (flowStep === FLOW_STEPS.permission && !cameraReady) {
-      return (
-        <div className="focus-flow-overlay">
-          <div className="focus-flow-card">
-            <div className="focus-flow-header">
-              <div>
-                <div className="focus-flow-eyebrow">Camera Setup</div>
-                <h2>Enable camera access</h2>
-              </div>
-              <div className="focus-flow-icon">
-                <CameraIcon />
-              </div>
-            </div>
-            <p className="focus-flow-lead">
-              Once access is granted, your preview appears here and the rest of the Focus page
-              behaves like the other dashboard screens.
-            </p>
-            <div className="focus-flow-steps">
-              {permissionSteps.map((item, index) => (
-                <div key={item.title} className="focus-flow-step">
-                  <div className="focus-flow-step-number">{index + 1}</div>
-                  <div className="focus-flow-step-copy">
-                    <h3>{item.title}</h3>
-                    <p>{item.text}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-            {cameraError ? <div className="focus-inline-error">{cameraError}</div> : null}
-            <div className="focus-flow-footer">
-              <button
-                type="button"
-                className="focus-flow-secondary"
-                onClick={() => setFlowStep(FLOW_STEPS.intro)}
-              >
-                Back
-              </button>
-              <button className="focus-flow-button" onClick={handleEnableCamera}>
-                Enable Camera
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-    return null;
-  };
-  return (
-    <main id="page-b" className="page" style={pageStyle}>
-      {renderIntroCard()}
-      <section id="display-area" className="focus-display-shell">
-        <video
-          ref={pipVideoRef}
-          muted
-          playsInline
-          autoPlay
-          style={{
-            position: 'absolute',
-            width: '1px',
-            height: '1px',
-            opacity: 0,
-            pointerEvents: 'none'
-          }}
-        />
-        {/* local video (hidden, for capture) */}
-        <video
-          ref={localVideoRef}
-          muted
-          playsInline
-          autoPlay
-          style={{ display: 'none' }}
-        />
-        {/* processed video (canvas) */}
-        <canvas
-          ref={displayCanvasRef}
-          width={640}
-          height={480}
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'contain',
-            backgroundColor: '#101010'
-          }}
-        />
-        {flowStep === FLOW_STEPS.ready ? (
-          <>
-            <div className={`focus-state-pill ${focusState}`}>
-              <span className="focus-state-dot" />
-              {focusStateLabel}
-            </div>
-            {!cameraReady && !videoManager?.isStreaming ? (
-              <div className="focus-idle-overlay">
-                <p>Camera is paused.</p>
-                <span>Use Start to enable the camera and begin detection.</span>
-              </div>
-            ) : null}
-          </>
-        ) : null}
-        {sessionResult && (
-          <div className="session-result-overlay">
-            <h3>Session Complete!</h3>
-            <div className="result-item">
-              <span className="label">Duration:</span>
-              <span className="value">{formatDuration(sessionResult.duration_seconds)}</span>
-            </div>
-            <div className="result-item">
-              <span className="label">Focus Score:</span>
-              <span className="value">{(sessionResult.focus_score * 100).toFixed(1)}%</span>
-            </div>
-            <button
-              onClick={handleCloseOverlay}
-              style={{
-                marginTop: '20px',
-                padding: '8px 20px',
-                background: 'transparent',
-                border: '1px solid white',
-                color: 'white',
-                borderRadius: '20px',
-                cursor: 'pointer'
-              }}
-            >
-              Close
-            </button>
-          </div>
-        )}
-      </section>
-      {flowStep === FLOW_STEPS.ready ? (
-        <>
-          {/* Model selector */}
-          {availableModels.length > 0 ? (
-            <section className="focus-model-strip">
-              <span className="focus-model-label">Model:</span>
-              {MODEL_ORDER.filter((n) => availableModels.includes(n)).map((name) => (
-                <button
-                  key={name}
-                  onClick={() => handleModelChange(name)}
-                  className={`focus-model-button ${currentModel === name ? 'active' : ''}`}
-                >
-                  {MODEL_INFO[name]?.label || name}
-                </button>
-              ))}
-              {l2csBoostAvailable && (
-                <>
-                  <span className="focus-model-sep" />
-                  <button
-                    onClick={handleEyeGazeToggle}
-                    className={`eye-gaze-toggle ${l2csBoost ? 'on' : 'off'}`}
-                    title={l2csBoost ? 'Eye gaze tracking active — click to disable' : 'Enable eye gaze tracking (requires calibration)'}
-                  >
-                    <svg width="16" height="16" viewBox="0 0 16 16" className="eye-gaze-icon" aria-hidden="true">
-                      <ellipse cx="8" cy="8" rx="7" ry="4.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
-                      <circle cx="8" cy="8" r="2.2" fill="currentColor" />
-                    </svg>
-                    {l2csBoost ? 'Eye Gaze On' : 'Eye Gaze'}
-                  </button>
-                  {l2csBoost && stats && stats.isStreaming && (
-                    <button
-                      onClick={() => videoManager && videoManager.startCalibration()}
-                      className="focus-model-button recalibrate"
-                      title="Re-run gaze calibration"
-                    >
-                      Recalibrate
-                    </button>
-                  )}
-                </>
-              )}
-            </section>
-          ) : null}
-          {/* Server stats */}
-          {systemStats && systemStats.cpu_percent != null && (
-            <section className="focus-system-stats">
-              <span>CPU: <strong>{systemStats.cpu_percent}%</strong></span>
-              <span className="focus-system-stats-sep" />
-              <span>RAM: <strong>{systemStats.memory_percent}%</strong> ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</span>
-            </section>
-          )}
-          <section id="timeline-area">
-            <div className="timeline-label">Timeline</div>
-            <div id="timeline-visuals">
-              {timelineEvents.map((event, index) => (
-                <div
-                  key={index}
-                  className="timeline-block"
-                  style={{
-                    backgroundColor: event.isFocused ? '#28a745' : '#dc3545',
-                    width: '10px',
-                    height: '20px',
-                    display: 'inline-block',
-                    marginRight: '2px',
-                    borderRadius: '2px'
-                  }}
-                  title={event.isFocused ? 'Focused' : 'Distracted'}
-                />
-              ))}
-            </div>
-            <div id="timeline-line" />
-          </section>
-          <section id="control-panel">
-            <button id="btn-cam-start" className="action-btn green" onClick={handleStart} disabled={isStarting}>
-              {isStarting ? 'Starting...' : 'Start'}
-            </button>
-            <button id="btn-floating" className="action-btn blue" onClick={handlePiP}>
-              Floating Window
-            </button>
-            <button id="btn-preview" className="action-btn orange" onClick={handlePreview}>
-              Preview Result
-            </button>
-            <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
-              Stop
-            </button>
-          </section>
-          {cameraError ? (
-            <div className="focus-inline-error focus-inline-error-standalone">{cameraError}</div>
-          ) : null}
-          {/* Model info card — below action buttons */}
-          {MODEL_INFO[currentModel] && (
-            <section className="model-card">
-              <div className="model-card-header">
-                <h3 className="model-card-title">{MODEL_INFO[currentModel].label}</h3>
-                {MODEL_INFO[currentModel].badge && (
-                  <span className={MODEL_INFO[currentModel].badge === 'Baseline' ? 'model-card-badge-baseline' : 'model-card-badge'}>
-                    {MODEL_INFO[currentModel].badge}
-                  </span>
-                )}
-              </div>
-              <p className="model-card-tagline">{MODEL_INFO[currentModel].tagline}</p>
-              <div className="model-card-metrics">
-                <div className="model-card-metric">
-                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].accuracy}</span>
-                  <span className="model-card-metric-label">Accuracy</span>
-                </div>
-                <div className="model-card-metric">
-                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].f1}</span>
-                  <span className="model-card-metric-label">F1 Score</span>
-                </div>
-                <div className="model-card-metric">
-                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].auc}</span>
-                  <span className="model-card-metric-label">ROC-AUC</span>
-                </div>
-                <div className="model-card-metric">
-                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].threshold}</span>
-                  <span className="model-card-metric-label">Threshold</span>
-                </div>
-              </div>
-              <div className="model-card-details">
-                <div className="model-card-section">
-                  <h4>How it works</h4>
-                  <p>{MODEL_INFO[currentModel].how}</p>
-                </div>
-                <div className="model-card-section">
-                  <h4>Features used</h4>
-                  <p>{MODEL_INFO[currentModel].features}</p>
-                </div>
-                <div className="model-card-section">
-                  <h4>Strengths</h4>
-                  <p>{MODEL_INFO[currentModel].strengths}</p>
-                </div>
-              </div>
-              <div className="model-card-eval">
-                Evaluated with {MODEL_INFO[currentModel].evaluation}
-              </div>
-            </section>
-          )}
-          <section id="frame-control">
-            <label htmlFor="frame-slider">Frame Rate (FPS)</label>
-            <input
-              type="range"
-              id="frame-slider"
-              min="10"
-              max="30"
-              value={currentFrame}
-              onChange={(e) => handleFrameChange(e.target.value)}
-            />
-            <input
-              type="number"
-              id="frame-input"
-              min="10"
-              max="30"
-              value={currentFrame}
-              onChange={(e) => handleFrameChange(e.target.value)}
-            />
-          </section>
-        </>
-      ) : null}
-      {/* Calibration overlay (fixed fullscreen, must be outside overflow:hidden containers) */}
-      <CalibrationOverlay calibration={calibration} videoManager={videoManager} />
-    </main>
-  );
-}
-export default FocusPageLocal;

+import React, { useState, useEffect, useRef } from 'react';
+import CalibrationOverlay from './CalibrationOverlay';
+const FLOW_STEPS = {
+  intro: 'intro',
+  permission: 'permission',
+  ready: 'ready'
+};
+const FOCUS_STATES = {
+  pending: 'pending',
+  focused: 'focused',
+  notFocused: 'not-focused'
+};
+function HelloIcon() {
+  return (
+    <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
+      <circle cx="48" cy="48" r="40" fill="#007BFF" />
+      <path d="M30 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
+      <path d="M54 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
+      <path d="M30 52c3 11 10 17 18 17s15-6 18-17" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
+    </svg>
+  );
+}
+function CameraIcon() {
+  return (
+    <svg width="110" height="110" viewBox="0 0 110 110" aria-hidden="true">
+      <rect x="30" y="36" width="50" height="34" rx="5" fill="none" stroke="#007BFF" strokeWidth="6" />
+      <path d="M24 72h62c0 9-7 16-16 16H40c-9 0-16-7-16-16Z" fill="none" stroke="#007BFF" strokeWidth="6" />
+      <path d="M55 28v8" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
+      <circle cx="55" cy="36" r="14" fill="none" stroke="#007BFF" strokeWidth="6" />
+      <circle cx="55" cy="36" r="4" fill="#007BFF" />
+      <path d="M46 83h18" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
+    </svg>
+  );
+}
+const MODEL_ORDER = ['hybrid', 'xgboost', 'mlp', 'geometric'];
+const MODEL_INFO = {
+  hybrid: {
+    label: 'Hybrid',
+    tagline: 'Best overall — combines ML with geometric scoring',
+    how: 'Fuses XGBoost predictions (30%) with geometric face/eye scores (70%). Uses a weighted blend tuned with LOPO evaluation.',
+    accuracy: 'N/A',
+    f1: '0.8409',
+    auc: 'N/A',
+    threshold: '0.46',
+    evaluation: 'LOPO tuning (9 participants, 144K frames)',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Most robust across different people. Latest LOPO mean F1 is 0.8409 at w_mlp=0.3.',
+    badge: 'Recommended',
+  },
+  xgboost: {
+    label: 'XGBoost',
+    tagline: 'Highest raw accuracy — gradient-boosted decision trees',
+    how: 'Ensemble of 600 decision trees (max depth 8). Each tree learns to correct errors from previous trees. Outputs probability of focused state.',
+    accuracy: '95.87%',
+    f1: '0.9585',
+    auc: '0.9908',
+    threshold: '0.38',
+    evaluation: 'Random split test (15%) + LOPO thresholds',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Strong pattern recognition and fast inference. LOPO: AUC 0.8695, optimal threshold 0.280, F1 0.8549.',
+    badge: null,
+  },
+  mlp: {
+    label: 'MLP',
+    tagline: 'Lightweight neural network — fast and efficient',
+    how: 'Two-layer neural network (64→32 neurons). Takes 10 face features, applies learned weights, outputs focused/unfocused probability via softmax.',
+    accuracy: '92.92%',
+    f1: '0.9287',
+    auc: '0.9714',
+    threshold: '0.23',
+    evaluation: 'Random split test (15%) + LOPO thresholds',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Fastest inference and smallest model size. LOPO: AUC 0.8624, optimal threshold 0.228, F1 0.8578.',
+    badge: null,
+  },
+  geometric: {
+    label: 'Geometric',
+    tagline: 'Baseline only — hardcoded thresholds, no learning',
+    how: 'Uses fixed thresholds on head orientation (70%) and eye openness (30%). No training — just hand-tuned rules on 478 face landmarks. Cannot adapt to new faces or environments.',
+    accuracy: 'N/A',
+    f1: '0.8195',
+    auc: 'N/A',
+    threshold: '0.55',
+    evaluation: 'LOPO geometric sweep',
+    features: 'Head yaw/pitch/roll angles, eye aspect ratio (EAR), iris gaze offset, mouth aspect ratio (MAR)',
+    strengths: 'No model files needed. Useful fallback when model checkpoints are unavailable.',
+    badge: 'Baseline',
+  },
+};
+function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive, isTutorialActive, setIsTutorialActive, setHasSeenTutorial }) {
+  const [currentFrame, setCurrentFrame] = useState(15);
+  const [timelineEvents, setTimelineEvents] = useState([]);
+  const [stats, setStats] = useState(null);
+  const [systemStats, setSystemStats] = useState(null);
+  const [availableModels, setAvailableModels] = useState([]);
+  const [currentModel, setCurrentModel] = useState('mlp');
+  const [flowStep, setFlowStep] = useState(FLOW_STEPS.ready);
+  const [cameraReady, setCameraReady] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [focusState, setFocusState] = useState(FOCUS_STATES.pending);
+  const [cameraError, setCameraError] = useState('');
+  const [calibration, setCalibration] = useState(null);
+  const [l2csBoost, setL2csBoost] = useState(false);
+  const [l2csBoostAvailable, setL2csBoostAvailable] = useState(false);
+  const [showEyeGazeModal, setShowEyeGazeModal] = useState(false);
+  const [eyeGazeDontShow, setEyeGazeDontShow] = useState(
+    () => localStorage.getItem('focusguard_eyegaze_skipmodal') === 'true'
+  );
+  const localVideoRef = useRef(null);
+  const displayCanvasRef = useRef(null);
+  const pipVideoRef = useRef(null);
+  const pipStreamRef = useRef(null);
+  const previewFrameRef = useRef(null);
+  useEffect(() => {
+    if (isTutorialActive) {
+      setFlowStep(FLOW_STEPS.intro);
+    } else {
+      setFlowStep(FLOW_STEPS.ready);
+    }
+  }, [isTutorialActive]);
+  const formatDuration = (seconds) => {
+    if (seconds === 0) return '0s';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}m ${secs}s`;
+  };
+  const stopPreviewLoop = () => {
+    if (previewFrameRef.current) {
+      cancelAnimationFrame(previewFrameRef.current);
+      previewFrameRef.current = null;
+    }
+  };
+  const startPreviewLoop = () => {
+    stopPreviewLoop();
+    const renderPreview = () => {
+      const canvas = displayCanvasRef.current;
+      const video = localVideoRef.current;
+      if (!canvas || !video || !cameraReady || videoManager?.isStreaming) {
+        previewFrameRef.current = null;
+        return;
+      }
+      if (video.readyState >= 2) {
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      }
+      previewFrameRef.current = requestAnimationFrame(renderPreview);
+    };
+    previewFrameRef.current = requestAnimationFrame(renderPreview);
+  };
+  const getErrorMessage = (err) => {
+    if (err?.name === 'NotAllowedError') {
+      return 'Camera permission denied. Please allow camera access.';
+    }
+    if (err?.name === 'NotFoundError') {
+      return 'No camera found. Please connect a camera.';
+    }
+    if (err?.name === 'NotReadableError') {
+      return 'Camera is already in use by another application.';
+    }
+    if (err?.target?.url) {
+      return `WebSocket connection failed: ${err.target.url}. Check that the backend server is running.`;
+    }
+    return err?.message || 'Failed to start focus session.';
+  };
+  useEffect(() => {
+    if (!videoManager) return;
+    const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
+    const originalOnSessionEnd = videoManager.callbacks.onSessionEnd;
+    videoManager.callbacks.onStatusUpdate = (isFocused) => {
+      setTimelineEvents((prev) => {
+        const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
+        if (newEvents.length > 60) newEvents.shift();
+        return newEvents;
+      });
+      setFocusState(isFocused ? FOCUS_STATES.focused : FOCUS_STATES.notFocused);
+      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
+    };
+    videoManager.callbacks.onSessionEnd = (summary) => {
+      setFocusState(FOCUS_STATES.pending);
+      setCameraReady(false);
+      if (originalOnSessionEnd) originalOnSessionEnd(summary);
+    };
+    videoManager.callbacks.onCalibrationUpdate = (cal) => {
+      setCalibration(cal && cal.active ? { ...cal } : null);
+    };
+    const statsInterval = setInterval(() => {
+      if (videoManager && videoManager.getStats) {
+        setStats(videoManager.getStats());
+      }
+    }, 1000);
+    return () => {
+      if (videoManager) {
+        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
+        videoManager.callbacks.onSessionEnd = originalOnSessionEnd;
+        videoManager.callbacks.onCalibrationUpdate = null;
+      }
+      clearInterval(statsInterval);
+    };
+  }, [videoManager]);
+  useEffect(() => {
+    fetch('/api/models')
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.available) setAvailableModels(data.available);
+        if (data.current) {
+          if (data.current === 'l2cs') {
+            const fallback = data.available.find((m) => m !== 'l2cs') || 'mlp';
+            setCurrentModel(fallback);
+            handleModelChange(fallback);
+          } else {
+            setCurrentModel(data.current);
+          }
+        }
+        if (data.l2cs_boost !== undefined) setL2csBoost(data.l2cs_boost);
+        if (data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
+      })
+      .catch((err) => console.error('Failed to fetch models:', err));
+  }, []);
+  useEffect(() => {
+    if (flowStep === FLOW_STEPS.ready && cameraReady && !videoManager?.isStreaming) {
+      startPreviewLoop();
+      return;
+    }
+    stopPreviewLoop();
+  }, [cameraReady, flowStep, videoManager?.isStreaming]);
+  useEffect(() => {
+    if (!isActive) {
+      stopPreviewLoop();
+    }
+  }, [isActive]);
+  useEffect(() => {
+    return () => {
+      stopPreviewLoop();
+      if (pipVideoRef.current) {
+        pipVideoRef.current.pause();
+        pipVideoRef.current.srcObject = null;
+      }
+      if (pipStreamRef.current) {
+        pipStreamRef.current.getTracks().forEach((t) => t.stop());
+        pipStreamRef.current = null;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const fetchSystem = () => {
+      fetch('/api/stats/system')
+        .then(res => res.json())
+        .then(data => setSystemStats(data))
+        .catch(() => setSystemStats(null));
+    };
+    fetchSystem();
+    const interval = setInterval(fetchSystem, 3000);
+    return () => clearInterval(interval);
+  }, []);
+  const handleModelChange = async (modelName) => {
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: modelName })
+      });
+      const result = await res.json();
+      if (result.updated) {
+        setCurrentModel(modelName);
+      }
+    } catch (err) {
+      console.error('Failed to switch model:', err);
+    }
+  };
+  const closeTutorial = () => {
+    setFlowStep(FLOW_STEPS.ready);
+    setIsTutorialActive(false);
+    setHasSeenTutorial(true);
+  };
+  const handleEnableCamera = async () => {
+    if (!videoManager) return;
+    try {
+      setCameraError('');
+      await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
+      setCameraReady(true);
+      closeTutorial();
+      setFocusState(FOCUS_STATES.pending);
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setCameraError(errorMessage);
+      console.error('Camera init error:', err);
+    }
+  };
+  const applyEyeGazeChange = async (enable, withCalibration = true) => {
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ l2cs_boost: enable })
+      });
+      if (!res.ok) return;
+      setL2csBoost(enable);
+      if (enable && withCalibration && videoManager && videoManager.isStreaming) {
+        videoManager.startCalibration();
+      } else if (!enable && videoManager) {
+        videoManager.cancelCalibration();
+      }
+    } catch (err) {
+      console.error('Failed to toggle eye gaze:', err);
+    }
+  };
+  const handleEyeGazeToggle = async () => {
+    const next = !l2csBoost;
+    if (next && !eyeGazeDontShow) {
+      setShowEyeGazeModal(true);
+      return;
+    }
+    await applyEyeGazeChange(next, false);
+  };
+  const handleEyeGazeModalAction = async (withCalibration) => {
+    if (eyeGazeDontShow) {
+      localStorage.setItem('focusguard_eyegaze_skipmodal', 'true');
+    }
+    setShowEyeGazeModal(false);
+    await applyEyeGazeChange(true, withCalibration);
+  };
+  const handleStart = async () => {
+    try {
+      setIsStarting(true);
+      setSessionResult(null);
+      setTimelineEvents([]);
+      setFocusState(FOCUS_STATES.pending);
+      setCameraError('');
+      if (!cameraReady) {
+        await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
+        setCameraReady(true);
+        setFlowStep(FLOW_STEPS.ready);
+      }
+      await videoManager.startStreaming();
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setCameraError(errorMessage);
+      setFocusState(FOCUS_STATES.pending);
+      console.error('Start error:', err);
+      alert(`Failed to start: ${errorMessage}\n\nCheck browser console for details.`);
+    } finally {
+      setIsStarting(false);
+    }
+  };
+  const handleStop = async () => {
+    if (videoManager) {
+      await videoManager.stopStreaming();
+    }
+    try {
+      if (document.pictureInPictureElement === pipVideoRef.current) {
+        await document.exitPictureInPicture();
+      }
+    } catch (_) {}
+    if (pipVideoRef.current) {
+      pipVideoRef.current.pause();
+      pipVideoRef.current.srcObject = null;
+    }
+    if (pipStreamRef.current) {
+      pipStreamRef.current.getTracks().forEach((t) => t.stop());
+      pipStreamRef.current = null;
+    }
+    stopPreviewLoop();
+    setFocusState(FOCUS_STATES.pending);
+    setCameraReady(false);
+  };
+  const handlePiP = async () => {
+    try {
+      if (!videoManager || !videoManager.isStreaming) {
+        alert('Please start the video first.');
+        return;
+      }
+      if (!displayCanvasRef.current) {
+        alert('Video not ready.');
+        return;
+      }
+      if (document.pictureInPictureElement === pipVideoRef.current) {
+        await document.exitPictureInPicture();
+        console.log('PiP exited');
+        return;
+      }
+      if (!document.pictureInPictureEnabled) {
+        alert('Picture-in-Picture is not supported in this browser.');
+        return;
+      }
+      const pipVideo = pipVideoRef.current;
+      if (!pipVideo) {
+        alert('PiP video element not ready.');
+        return;
+      }
+      const isSafariPiP = typeof pipVideo.webkitSetPresentationMode === 'function';
+      let stream = pipStreamRef.current;
+      if (!stream) {
+        const capture = displayCanvasRef.current.captureStream;
+        if (typeof capture === 'function') {
+          stream = capture.call(displayCanvasRef.current, 30);
+        }
+        if (!stream || stream.getTracks().length === 0) {
+          const cameraStream = localVideoRef.current?.srcObject;
+          if (!cameraStream) {
+            alert('Camera stream not ready.');
+            return;
+          }
+          stream = cameraStream;
+        }
+        pipStreamRef.current = stream;
+      }
+      if (!stream || stream.getTracks().length === 0) {
+        alert('Failed to capture video stream from canvas.');
+        return;
+      }
+      pipVideo.srcObject = stream;
+      if (pipVideo.readyState < 2) {
+        await new Promise((resolve) => {
+          const onReady = () => {
+            pipVideo.removeEventListener('loadeddata', onReady);
+            pipVideo.removeEventListener('canplay', onReady);
+            resolve();
+          };
+          pipVideo.addEventListener('loadeddata', onReady);
+          pipVideo.addEventListener('canplay', onReady);
+          setTimeout(resolve, 600);
+        });
+      }
+      try {
+        await pipVideo.play();
+      } catch (_) {}
+      if (isSafariPiP) {
+        try {
+          pipVideo.webkitSetPresentationMode('picture-in-picture');
+          console.log('PiP activated (Safari)');
+          return;
+        } catch (e) {
+          const cameraStream = localVideoRef.current?.srcObject;
+          if (cameraStream && cameraStream !== pipVideo.srcObject) {
+            pipVideo.srcObject = cameraStream;
+            try {
+              await pipVideo.play();
+            } catch (_) {}
+            pipVideo.webkitSetPresentationMode('picture-in-picture');
+            console.log('PiP activated (Safari fallback)');
+            return;
+          }
+          throw e;
+        }
+      }
+      if (typeof pipVideo.requestPictureInPicture === 'function') {
+        await pipVideo.requestPictureInPicture();
+        console.log('PiP activated');
+      } else {
+        alert('Picture-in-Picture is not supported in this browser.');
+      }
+    } catch (err) {
+      console.error('PiP error:', err);
+      alert(`Failed to enter Picture-in-Picture: ${err.message}`);
+    }
+  };
+  const handleFloatingWindow = () => {
+    handlePiP();
+  };
+  const handleFrameChange = (val) => {
+    const rate = parseInt(val, 10);
+    setCurrentFrame(rate);
+    if (videoManager) {
+      videoManager.setFrameRate(rate);
+    }
+  };
+  const handlePreview = () => {
+    if (!videoManager || !videoManager.isStreaming) {
+      alert('Please start a session first.');
+      return;
+    }
+    const currentStats = videoManager.getStats();
+    if (!currentStats.sessionId) {
+      alert('No active session.');
+      return;
+    }
+    const sessionDuration = Math.floor((Date.now() - (videoManager.sessionStartTime || Date.now())) / 1000);
+    const totalFrames = currentStats.framesProcessed || 0;
+    const focusedFrames = currentStats.focusedFrames ?? 0;
+    const focusScore = totalFrames > 0 ? focusedFrames / totalFrames : 0;
+    setSessionResult({
+      duration_seconds: sessionDuration,
+      focus_score: focusScore,
+      total_frames: totalFrames,
+      focused_frames: focusedFrames
+    });
+  };
+  const handleCloseOverlay = () => {
+    setSessionResult(null);
+  };
+  const pageStyle = isActive
+    ? undefined
+    : {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        overflow: 'hidden',
+        opacity: 0,
+        pointerEvents: 'none'
+      };
+  const focusStateLabel = {
+    [FOCUS_STATES.pending]: 'Pending',
+    [FOCUS_STATES.focused]: 'Focused',
+    [FOCUS_STATES.notFocused]: 'Not Focused'
+  }[focusState];
+  const introHighlights = [
+    {
+      title: 'Live focus tracking',
+      text: 'Head pose, gaze, and eye openness are read continuously during the session.'
+    },
+    {
+      title: 'Quick setup',
+      text: 'Front-facing light and a stable camera angle give the cleanest preview.'
+    },
+    {
+      title: 'Private by default',
+      text: 'Only session metadata is stored, not the raw camera footage.'
+    },
+    {
+      title: 'Sync across devices',
+      text: 'Your history auto-saves to this browser. To switch devices, use the Data Management tools at the bottom of the My Records tab to export or import your data.'
+    }
+  ];
+  const permissionSteps = [
+    {
+      title: 'Allow browser access',
+      text: 'Approve the camera prompt so the preview can appear immediately.'
+    },
+    {
+      title: 'Check your framing',
+      text: 'Keep your face visible and centered for more stable landmark detection.'
+    },
+    {
+      title: 'Start when ready',
+      text: 'After the preview appears, use the page controls to begin or stop.'
+    }
+  ];
+  const renderIntroCard = () => {
+    if (flowStep === FLOW_STEPS.intro) {
+      return (
+        <div className="focus-flow-overlay">
+          <div className="focus-flow-card">
+            <div className="focus-flow-header">
+              <div>
+                <div className="focus-flow-eyebrow">Focus Session</div>
+                <h2>Before you begin</h2>
+              </div>
+              <div className="focus-flow-icon">
+                <HelloIcon />
+              </div>
+            </div>
+            <p className="focus-flow-lead">
+              The focus page uses your live camera preview to estimate attention in real time.
+              Review the setup notes below, then continue to camera access.
+            </p>
+            <div className="focus-flow-grid">
+              {introHighlights.map((item) => (
+                <article key={item.title} className="focus-flow-panel">
+                  <h3>{item.title}</h3>
+                  <p>{item.text}</p>
+                </article>
+              ))}
+            </div>
+            <div className="focus-flow-glasses-note">
+              <strong>Wearing glasses?</strong> Glasses may reduce detection accuracy on some models. If results seem inaccurate, try switching to a different model (e.g. Geometric or MLP).
+            </div>
+            <div className="focus-flow-footer">
+              <div className="focus-flow-note">
+                You can still change frame rate and available model options after the preview loads.
+              </div>
+              <div style={{ display: 'flex', gap: '10px' }}>
+                <button className="focus-flow-secondary" onClick={closeTutorial}>
+                  Skip
+                </button>
+                <button className="focus-flow-button" onClick={() => setFlowStep(FLOW_STEPS.permission)}>
+                  Continue
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    if (flowStep === FLOW_STEPS.permission && !cameraReady) {
+      return (
+        <div className="focus-flow-overlay">
+          <div className="focus-flow-card">
+            <div className="focus-flow-header">
+              <div>
+                <div className="focus-flow-eyebrow">Camera Setup</div>
+                <h2>Enable camera access</h2>
+              </div>
+              <div className="focus-flow-icon">
+                <CameraIcon />
+              </div>
+            </div>
+            <p className="focus-flow-lead">
+              Once access is granted, your preview appears here and the rest of the Focus page
+              behaves like the other dashboard screens.
+            </p>
+            <div className="focus-flow-steps">
+              {permissionSteps.map((item, index) => (
+                <div key={item.title} className="focus-flow-step">
+                  <div className="focus-flow-step-number">{index + 1}</div>
+                  <div className="focus-flow-step-copy">
+                    <h3>{item.title}</h3>
+                    <p>{item.text}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {cameraError ? <div className="focus-inline-error">{cameraError}</div> : null}
+            <div className="focus-flow-footer">
+              <button
+                type="button"
+                className="focus-flow-secondary"
+                onClick={() => setFlowStep(FLOW_STEPS.intro)}
+              >
+                Back
+              </button>
+              <button className="focus-flow-button" onClick={handleEnableCamera}>
+                Enable Camera
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+  const renderEyeGazeModal = () => {
+    if (!showEyeGazeModal) return null;
+    return (
+      <div className="focus-flow-overlay" style={{ zIndex: 2000 }}>
+        <div className="focus-flow-card">
+          <div className="focus-flow-header">
+            <div>
+              <div className="focus-flow-eyebrow">Eye Gaze Tracking</div>
+              <h2>Before you enable</h2>
+            </div>
+            <div className="focus-flow-icon">
+              <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
+                <ellipse cx="48" cy="48" rx="38" ry="24" fill="none" stroke="#007BFF" strokeWidth="5" />
+                <circle cx="48" cy="48" r="13" fill="none" stroke="#007BFF" strokeWidth="5" />
+                <circle cx="48" cy="48" r="5" fill="#007BFF" />
+              </svg>
+            </div>
+          </div>
+          <p className="focus-flow-lead">
+            Eye gaze tracking runs an additional deep neural network (L2CS-Net) alongside your current model.
+            Please read the notes below before proceeding.
+          </p>
+          <div className="focus-flow-grid">
+            <article className="focus-flow-panel focus-flow-panel-warn">
+              <h3>Performance impact</h3>
+              <p>Enabling eye gaze tracking increases CPU usage and may reduce frame rate. If the system feels sluggish, consider disabling it.</p>
+            </article>
+            <article className="focus-flow-panel">
+              <h3>Calibration (recommended)</h3>
+              <p>For best accuracy, calibrate by looking at 9 screen positions one at a time, followed by 1 validation point. The whole process takes about 30 seconds.</p>
+            </article>
+          </div>
+          <div className="focus-flow-steps">
+            <div className="focus-flow-step">
+              <div className="focus-flow-step-number">1</div>
+              <div className="focus-flow-step-copy">
+                <h3>Click "Start Calibration"</h3>
+                <p>A dot will appear on screen. Look directly at it and keep your gaze steady. It will cycle through 9 positions then show a final validation dot.</p>
+              </div>
+            </div>
+            <div className="focus-flow-step">
+              <div className="focus-flow-step-number">2</div>
+              <div className="focus-flow-step-copy">
+                <h3>Or skip for now</h3>
+                <p>Click "Skip" to enable eye gaze tracking without calibrating. You can recalibrate at any time using the "Recalibrate" button during a session.</p>
+              </div>
+            </div>
+          </div>
+          <label className="eye-gaze-modal-checkbox">
+            <input
+              type="checkbox"
+              checked={eyeGazeDontShow}
+              onChange={(e) => setEyeGazeDontShow(e.target.checked)}
+            />
+            Don't show this again
+          </label>
+          <div className="focus-flow-footer">
+            <button
+              type="button"
+              className="focus-flow-secondary"
+              onClick={() => handleEyeGazeModalAction(false)}
+            >
+              Skip
+            </button>
+            <button
+              className="focus-flow-button"
+              onClick={() => handleEyeGazeModalAction(true)}
+            >
+              Start Calibration
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <main id="page-b" className="page" style={pageStyle}>
+      {renderIntroCard()}
+      {renderEyeGazeModal()}
+      <section id="display-area" className="focus-display-shell">
+        <video
+          ref={pipVideoRef}
+          muted
+          playsInline
+          autoPlay
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            opacity: 0,
+            pointerEvents: 'none'
+          }}
+        />
+        <video
+          ref={localVideoRef}
+          muted
+          playsInline
+          autoPlay
+          style={{ display: 'none' }}
+        />
+        <canvas
+          ref={displayCanvasRef}
+          width={640}
+          height={480}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            backgroundColor: '#101010'
+          }}
+        />
+        {flowStep === FLOW_STEPS.ready ? (
+          <>
+            <div className={`focus-state-pill ${focusState}`}>
+              <span className="focus-state-dot" />
+              {focusStateLabel}
+            </div>
+            {!cameraReady && !videoManager?.isStreaming ? (
+              <div className="focus-idle-overlay">
+                <p>Camera is paused.</p>
+                <span>Use Start to enable the camera and begin detection.</span>
+              </div>
+            ) : null}
+          </>
+        ) : null}
+        {sessionResult && (
+          <div className="session-result-overlay">
+            <h3>Session Complete!</h3>
+            <div className="result-item">
+              <span className="label">Duration:</span>
+              <span className="value">{formatDuration(sessionResult.duration_seconds)}</span>
+            </div>
+            <div className="result-item">
+              <span className="label">Focus Score:</span>
+              <span className="value">{(sessionResult.focus_score * 100).toFixed(1)}%</span>
+            </div>
+            <button
+              onClick={handleCloseOverlay}
+              style={{
+                marginTop: '20px',
+                padding: '8px 20px',
+                background: 'transparent',
+                border: '1px solid white',
+                color: 'white',
+                borderRadius: '20px',
+                cursor: 'pointer'
+              }}
+            >
+              Close
+            </button>
+          </div>
+        )}
+      </section>
+      {flowStep === FLOW_STEPS.ready ? (
+        <>
+          {availableModels.length > 0 ? (
+            <section className="focus-model-strip">
+              <span className="focus-model-label">Model:</span>
+              {MODEL_ORDER.filter((n) => availableModels.includes(n)).map((name) => (
+                <button
+                  key={name}
+                  onClick={() => handleModelChange(name)}
+                  className={`focus-model-button ${currentModel === name ? 'active' : ''}`}
+                >
+                  {MODEL_INFO[name]?.label || name}
+                </button>
+              ))}
+              {l2csBoostAvailable && (
+                <>
+                  <span className="focus-model-sep" />
+                  <button
+                    onClick={handleEyeGazeToggle}
+                    className={`eye-gaze-toggle ${l2csBoost ? 'on' : 'off'}`}
+                    title={l2csBoost ? 'Eye gaze tracking active — click to disable' : 'Enable eye gaze tracking (requires calibration)'}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 16 16" className="eye-gaze-icon" aria-hidden="true">
+                      <ellipse cx="8" cy="8" rx="7" ry="4.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
+                      <circle cx="8" cy="8" r="2.2" fill="currentColor" />
+                    </svg>
+                    {l2csBoost ? 'Eye Gaze On' : 'Eye Gaze'}
+                  </button>
+                  {l2csBoost && stats && stats.isStreaming && (
+                    <button
+                      onClick={() => videoManager && videoManager.startCalibration()}
+                      className="focus-model-button recalibrate"
+                      title="Re-run gaze calibration"
+                    >
+                      Recalibrate
+                    </button>
+                  )}
+                </>
+              )}
+            </section>
+          ) : null}
+          {systemStats && systemStats.cpu_percent != null && (
+            <section className="focus-system-stats">
+              <span>CPU: <strong>{systemStats.cpu_percent}%</strong></span>
+              <span className="focus-system-stats-sep" />
+              <span>RAM: <strong>{systemStats.memory_percent}%</strong> ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</span>
+            </section>
+          )}
+          <section id="timeline-area">
+            <div className="timeline-label">Timeline</div>
+            <div id="timeline-visuals">
+              {timelineEvents.map((event, index) => (
+                <div
+                  key={index}
+                  className="timeline-block"
+                  style={{
+                    backgroundColor: event.isFocused ? '#43ff6f' : '#ff2c41',
+                    width: '10px',
+                    height: '20px',
+                    borderRadius: '2px',
+                    flexShrink: 0
+                  }}
+                  title={event.isFocused ? 'Focused' : 'Distracted'}
+                />
+              ))}
+            </div>
+            <div id="timeline-line" />
+          </section>
+          <section id="control-panel">
+            <button id="btn-cam-start" className="action-btn green" onClick={handleStart} disabled={isStarting}>
+              {isStarting ? 'Starting...' : 'Start'}
+            </button>
+            <button id="btn-floating" className="action-btn blue" onClick={handlePiP}>
+              Floating Window
+            </button>
+            <button id="btn-preview" className="action-btn orange" onClick={handlePreview}>
+              Preview Result
+            </button>
+            <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
+              Stop
+            </button>
+          </section>
+          {cameraError ? (
+            <div className="focus-inline-error focus-inline-error-standalone">{cameraError}</div>
+          ) : null}
+          {MODEL_INFO[currentModel] && (
+            <section className="model-card">
+              <div className="model-card-header">
+                <h3 className="model-card-title">{MODEL_INFO[currentModel].label}</h3>
+                {MODEL_INFO[currentModel].badge && (
+                  <span className={MODEL_INFO[currentModel].badge === 'Baseline' ? 'model-card-badge-baseline' : 'model-card-badge'}>
+                    {MODEL_INFO[currentModel].badge}
+                  </span>
+                )}
+              </div>
+              <p className="model-card-tagline">{MODEL_INFO[currentModel].tagline}</p>
+              <div className="model-card-metrics">
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].accuracy}</span>
+                  <span className="model-card-metric-label">Accuracy</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].f1}</span>
+                  <span className="model-card-metric-label">F1 Score</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].auc}</span>
+                  <span className="model-card-metric-label">ROC-AUC</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].threshold}</span>
+                  <span className="model-card-metric-label">Threshold</span>
+                </div>
+              </div>
+              <div className="model-card-details">
+                <div className="model-card-section">
+                  <h4>How it works</h4>
+                  <p>{MODEL_INFO[currentModel].how}</p>
+                </div>
+                <div className="model-card-section">
+                  <h4>Features used</h4>
+                  <p>{MODEL_INFO[currentModel].features}</p>
+                </div>
+                <div className="model-card-section">
+                  <h4>Strengths</h4>
+                  <p>{MODEL_INFO[currentModel].strengths}</p>
+                </div>
+              </div>
+              <div className="model-card-eval">
+                Evaluated with {MODEL_INFO[currentModel].evaluation}
+              </div>
+            </section>
+          )}
+          <section id="frame-control">
+            <label htmlFor="frame-slider">Frame Rate (FPS)</label>
+            <input
+              type="range"
+              id="frame-slider"
+              min="10"
+              max="30"
+              value={currentFrame}
+              onChange={(e) => handleFrameChange(e.target.value)}
+            />
+            <input
+              type="number"
+              id="frame-input"
+              min="10"
+              max="30"
+              value={currentFrame}
+              onChange={(e) => handleFrameChange(e.target.value)}
+            />
+          </section>
+        </>
+      ) : null}
+      <CalibrationOverlay calibration={calibration} videoManager={videoManager} />
+    </main>
+  );
+}
+export default FocusPageLocal;

src/components/Help.jsx CHANGED Viewed

@@ -28,11 +28,12 @@ function Help() {
           <h2>How to Use Focus Guard</h2>
           <ol>
             <li>Navigate to the Focus page from the menu</li>
-            <li>Allow camera access when prompted</li>
             <li>Click the green "Start" button to begin monitoring</li>
-            <li>Position yourself in front of the camera</li>
             <li>The system will track your focus in real-time using face mesh analysis</li>
-            <li>Use the model selector to switch between detection models (MLP, XGBoost, Geometric, Hybrid)</li>
             <li>Click "Stop" when you're done to save the session</li>
           </ol>
         </section>
@@ -51,20 +52,38 @@ function Help() {
         <section className="help-section">
           <h2>Available Models</h2>
-          <p><strong>MLP:</strong> Neural network trained on extracted facial features. Good balance of speed and accuracy.</p>
-          <p><strong>XGBoost:</strong> Gradient-boosted tree model using 10 selected features. Strong on tabular data with fast inference.</p>
-          <p><strong>Geometric:</strong> Rule-based scoring using head pose and eye openness. No ML model needed, lightweight.</p>
-          <p><strong>Hybrid:</strong> Combines MLP predictions with geometric scoring for robust results.</p>
         </section>
         <section className="help-section">
           <h2>Adjusting Settings</h2>
-          <p><strong>Frame Rate:</strong> Controls how many frames per second are sent for analysis. Recommended: 15-30 FPS. Minimum is 10 FPS to ensure temporal features (blink rate, PERCLOS) remain accurate.</p>
-          <p><strong>Model Selection:</strong> Switch models in real-time using the pill buttons above the timeline. Different models may perform better depending on your lighting and setup.</p>
         </section>
         <section className="help-section">
-          <h2>Privacy & Data</h2>
           <p>Video frames are processed in real-time on the server and are never stored. Only focus status metadata (timestamps, confidence scores) is saved to the session database. View past runs under <strong>My Records</strong>; stats and badges live under <strong>My Achievement</strong>.</p>
           <p style={{ marginTop: '12px' }}>
             <button
@@ -94,13 +113,17 @@ function Help() {
             <summary>Why is my focus score low?</summary>
             <p>Ensure good lighting so the face mesh can detect your landmarks clearly. Face the camera directly and avoid large head movements. Try switching to a different model if one isn't working well for your setup.</p>
           </details>
           <details>
             <summary>Can I use this without a camera?</summary>
             <p>No, camera access is required. The system relies on real-time face landmark detection to determine focus.</p>
           </details>
           <details>
             <summary>Does this work on mobile?</summary>
-            <p>Yes, it works on mobile browsers that support camera access and WebSocket connections. Performance depends on your device and network speed.</p>
           </details>
           <details>
             <summary>Is my data private?</summary>
@@ -108,17 +131,23 @@ function Help() {
           </details>
           <details>
             <summary>Why does the face mesh lag behind my movements?</summary>
-            <p>The face mesh overlay updates each time the server returns a detection result. The camera feed itself renders at 60fps locally. Any visible lag depends on network latency and server processing time.</p>
           </details>
         </section>
         <section className="help-section">
           <h2>Technical Info</h2>
           <p><strong>Face Detection:</strong> MediaPipe Face Mesh (478 landmarks)</p>
-          <p><strong>Feature Extraction:</strong> Head pose (yaw/pitch/roll), EAR, MAR, gaze offset, PERCLOS, blink rate</p>
-          <p><strong>ML Models:</strong> MLP (scikit-learn), XGBoost, Geometric, Hybrid</p>
-          <p><strong>Storage:</strong> SQLite database</p>
           <p><strong>Framework:</strong> FastAPI + React (Vite) + WebSocket</p>
         </section>
       </div>
     </main>

           <h2>How to Use Focus Guard</h2>
           <ol>
             <li>Navigate to the Focus page from the menu</li>
+            <li>Read the setup notes in the intro screen, then allow camera access when prompted</li>
             <li>Click the green "Start" button to begin monitoring</li>
+            <li>Position yourself in front of the camera with good lighting</li>
             <li>The system will track your focus in real-time using face mesh analysis</li>
+            <li>Use the model selector to switch between detection models (Hybrid, XGBoost, MLP, Geometric)</li>
+            <li>Optionally enable <strong>Eye Gaze</strong> tracking for additional gaze-based focus signals</li>
             <li>Click "Stop" when you're done to save the session</li>
           </ol>
         </section>
         <section className="help-section">
           <h2>Available Models</h2>
+          <p><strong>Hybrid</strong> <em>(Recommended)</em>: Blends MLP predictions (30%) with geometric face/eye scoring (70%) using a weighted average tuned with LOPO evaluation. Most robust across different people. LOPO F1: 0.8409.</p>
+          <p><strong>XGBoost:</strong> Gradient-boosted tree model using 10 selected features. Highest raw accuracy (95.87% pooled, LOPO AUC 0.8695). Strong on tabular data with fast inference.</p>
+          <p><strong>MLP:</strong> Two-layer neural network (10→64→32 neurons) trained with PyTorch. Good balance of speed and accuracy (92.92% pooled, LOPO AUC 0.8624). Fastest inference.</p>
+          <p><strong>Geometric:</strong> Rule-based scoring using head pose and eye openness. No ML model needed — lightweight fallback when model checkpoints are unavailable. LOPO F1: 0.8195.</p>
+          <p style={{ marginTop: '10px', color: '#667281', fontSize: '0.9rem' }}>
+            <strong>Tip:</strong> If you wear glasses or have unusual lighting, try different models to find the one that works best for your setup.
+          </p>
+        </section>
+        <section className="help-section">
+          <h2>Eye Gaze Tracking</h2>
+          <p>The <strong>Eye Gaze</strong> button enables L2CS-Net, a deep neural network that estimates your gaze direction from the eye region. It runs alongside your selected base model and can improve focus detection accuracy.</p>
+          <p style={{ marginTop: '8px' }}><strong>Performance note:</strong> Eye gaze tracking increases CPU usage and may reduce frame rate. If the system feels sluggish, disable it.</p>
+          <h3 style={{ marginTop: '14px', fontSize: '1rem' }}>Calibration</h3>
+          <p>For best accuracy, calibrate when Eye Gaze is active:</p>
+          <ol>
+            <li>Start a session, then click the <strong>"Recalibrate"</strong> button that appears in the model strip when Eye Gaze is on</li>
+            <li>Look directly at each dot as it appears on screen — there are <strong>9 calibration points</strong> across the screen</li>
+            <li>A final <strong>validation point</strong> confirms accuracy before calibration is applied</li>
+          </ol>
+          <p>You can recalibrate at any time using the "Recalibrate" button, which appears in the model strip when Eye Gaze is on and a session is running.</p>
         </section>
         <section className="help-section">
           <h2>Adjusting Settings</h2>
+          <p><strong>Frame Rate:</strong> Controls how many frames per second are sent for analysis. Range: 10–30 FPS. A minimum of 10 FPS is enforced to keep temporal features (blink rate, PERCLOS) accurate.</p>
+          <p><strong>Model Selection:</strong> Switch models in real-time using the pill buttons above the timeline. The active model is highlighted. Different models may perform better depending on your lighting, setup, and whether you wear glasses.</p>
+          <p><strong>Floating Window:</strong> Opens a Picture-in-Picture window with your camera feed so you can keep the video visible while working in other apps.</p>
         </section>
         <section className="help-section">
+          <h2>Privacy &amp; Data</h2>
           <p>Video frames are processed in real-time on the server and are never stored. Only focus status metadata (timestamps, confidence scores) is saved to the session database. View past runs under <strong>My Records</strong>; stats and badges live under <strong>My Achievement</strong>.</p>
           <p style={{ marginTop: '12px' }}>
             <button
             <summary>Why is my focus score low?</summary>
             <p>Ensure good lighting so the face mesh can detect your landmarks clearly. Face the camera directly and avoid large head movements. Try switching to a different model if one isn't working well for your setup.</p>
           </details>
+          <details>
+            <summary>Does wearing glasses affect accuracy?</summary>
+            <p>Yes, glasses can reduce accuracy — especially for eye-based features like EAR and gaze offset — because the lenses may distort landmark positions or cause reflections. If you wear glasses, try different models (e.g. Geometric or MLP may handle glasses better than XGBoost for some users). Avoid using Eye Gaze tracking with glasses as it may significantly degrade results.</p>
+          </details>
           <details>
             <summary>Can I use this without a camera?</summary>
             <p>No, camera access is required. The system relies on real-time face landmark detection to determine focus.</p>
           </details>
           <details>
             <summary>Does this work on mobile?</summary>
+            <p>Yes, it works on mobile browsers that support camera access and WebSocket connections. Performance depends on your device and network speed. Eye Gaze tracking is not recommended on mobile due to performance constraints.</p>
           </details>
           <details>
             <summary>Is my data private?</summary>
           </details>
           <details>
             <summary>Why does the face mesh lag behind my movements?</summary>
+            <p>The face mesh overlay updates each time the server returns a detection result. The camera feed itself renders locally. Any visible lag depends on network latency and server processing time. Reducing the frame rate slider can help if lag is noticeable.</p>
+          </details>
+          <details>
+            <summary>The Hybrid model doesn't seem to work differently from MLP — why?</summary>
+            <p>The Hybrid model blends MLP (30%) and geometric (70%) scores using a fixed weighted average. Because its geometric component dominates, it tends to be more conservative than raw MLP — especially when head pose or eye openness signals are borderline. It is tuned to be the most consistent across different people rather than the most aggressive.</p>
           </details>
         </section>
         <section className="help-section">
           <h2>Technical Info</h2>
           <p><strong>Face Detection:</strong> MediaPipe Face Mesh (478 landmarks)</p>
+          <p><strong>Feature Extraction:</strong> Head pose (yaw/pitch/roll), EAR, MAR, gaze offset, PERCLOS, blink rate — 10 features selected via LOFO analysis</p>
+          <p><strong>ML Models:</strong> PyTorch MLP (10→64→32→2), XGBoost (600 trees), Geometric (rule-based), Hybrid (MLP 30% + Geometric 70% weighted blend)</p>
+          <p><strong>Eye Gaze:</strong> L2CS-Net (ResNet50 backbone, trained on Gaze360) with 9-point polynomial calibration</p>
+          <p><strong>Storage:</strong> SQLite database (sessions, events, settings)</p>
           <p><strong>Framework:</strong> FastAPI + React (Vite) + WebSocket</p>
+          <p><strong>Evaluation:</strong> Leave-One-Person-Out (LOPO) cross-validation on 9 participants, 144K frames</p>
         </section>
       </div>
     </main>

src/components/Home.jsx CHANGED Viewed

@@ -1,18 +1,22 @@
-import React from 'react';
-function Home({ setActiveTab }) {
-  return (
-    <main id="page-a" className="page">
-      <h1>FocusGuard</h1>
-      <p>Your productivity monitor assistant.</p>
-      <div className="home-button-grid">
-        <button type="button" className="btn-main" onClick={() => setActiveTab('focus')}>
-          Start Focus
-        </button>
-      </div>
-    </main>
-  );
-}
-export default Home;

+import React from 'react';
+function Home({ onStartFocus, onStartTutorial }) {
+  return (
+    <main id="page-a" className="page">
+      <h1>FocusGuard</h1>
+      <p>Your productivity monitor assistant.</p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center', marginTop: '30px' }}>
+        <button className="btn-main" onClick={onStartFocus} style={{ width: '250px' }}>
+          Start Focus
+        </button>
+        <button className="btn-main" onClick={onStartTutorial} style={{ width: '250px' }}>
+          Tutorial
+        </button>
+      </div>
+    </main>
+  );
+}
+export default Home;

src/components/Records.jsx CHANGED Viewed

@@ -1,645 +1,757 @@
-import React, { useState, useEffect, useRef } from 'react';
-function Records() {
-  const [filter, setFilter] = useState('all');
-  const [sessions, setSessions] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [detailState, setDetailState] = useState({
-    open: false,
-    loading: false,
-    error: '',
-    session: null
-  });
-  const chartRef = useRef(null);
-  // Format a session duration.
-  const formatDuration = (seconds) => {
-    const safeSeconds = Math.max(0, Number(seconds) || 0);
-    const mins = Math.floor(safeSeconds / 60);
-    const secs = safeSeconds % 60;
-    return `${mins}m ${secs}s`;
-  };
-  // Format a session timestamp for table display.
-  const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  };
-  const formatDateTime = (dateString) => {
-    if (!dateString) return 'Not available';
-    const date = new Date(dateString);
-    return date.toLocaleString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  };
-  const parseMetadata = (detectionData) => {
-    if (!detectionData) return {};
-    if (typeof detectionData === 'object') return detectionData;
-    try {
-      return JSON.parse(detectionData);
-    } catch (_) {
-      return {};
-    }
-  };
-  const averageOf = (values) => {
-    const valid = values.filter((value) => Number.isFinite(value));
-    if (valid.length === 0) return null;
-    return valid.reduce((sum, value) => sum + value, 0) / valid.length;
-  };
-  const buildTimelineSegments = (events, maxSegments = 48) => {
-    if (!events.length) return [];
-    const segmentSize = Math.ceil(events.length / maxSegments);
-    const segments = [];
-    for (let i = 0; i < events.length; i += segmentSize) {
-      const slice = events.slice(i, i + segmentSize);
-      const focusedCount = slice.filter((event) => event.isFocused).length;
-      const focusRatio = focusedCount / slice.length;
-      const confidence = averageOf(slice.map((event) => event.confidence));
-      let tone = 'distracted';
-      if (focusRatio >= 0.75) tone = 'focused';
-      else if (focusRatio >= 0.35) tone = 'mixed';
-      segments.push({
-        tone,
-        focusRatio,
-        confidence,
-        count: slice.length
-      });
-    }
-    return segments;
-  };
-  const buildDetailView = (session) => {
-    if (!session) return null;
-    const parsedEvents = (session.events || []).map((event) => {
-      const metadata = parseMetadata(event.detection_data);
-      return {
-        ...event,
-        metadata,
-        isFocused: Boolean(event.is_focused),
-        confidence: Number(event.confidence) || 0
-      };
-    });
-    const focusRatio = session.total_frames
-      ? session.focused_frames / session.total_frames
-      : parsedEvents.length
-      ? parsedEvents.filter((event) => event.isFocused).length / parsedEvents.length
-      : 0;
-    const modelCounts = parsedEvents.reduce((counts, event) => {
-      const model = event.metadata?.model;
-      if (model) counts[model] = (counts[model] || 0) + 1;
-      return counts;
-    }, {});
-    const dominantModel = Object.entries(modelCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'Unavailable';
-    const avgConfidence = averageOf(parsedEvents.map((event) => event.confidence));
-    const avgFaceScore = averageOf(parsedEvents.map((event) => Number(event.metadata?.s_face)));
-    const avgEyeScore = averageOf(parsedEvents.map((event) => Number(event.metadata?.s_eye)));
-    const avgMar = averageOf(parsedEvents.map((event) => Number(event.metadata?.mar)));
-    const startTime = session.start_time ? new Date(session.start_time) : null;
-    const timeline = buildTimelineSegments(parsedEvents);
-    const recentEvents = parsedEvents.slice(-10).reverse();
-    return {
-      parsedEvents,
-      focusRatio,
-      dominantModel,
-      avgConfidence,
-      avgFaceScore,
-      avgEyeScore,
-      avgMar,
-      timeline,
-      recentEvents,
-      formatOffset(timestamp) {
-        if (!startTime || !timestamp) return '--';
-        const offsetSeconds = Math.max(0, Math.round((new Date(timestamp) - startTime) / 1000));
-        const mins = Math.floor(offsetSeconds / 60);
-        const secs = offsetSeconds % 60;
-        return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
-      }
-    };
-  };
-  const getScoreTone = (score) => {
-    if (score >= 0.8) return 'excellent';
-    if (score >= 0.6) return 'good';
-    if (score >= 0.4) return 'fair';
-    return 'low';
-  };
-  const closeDetails = () => {
-    setDetailState({
-      open: false,
-      loading: false,
-      error: '',
-      session: null
-    });
-  };
-  // Load session rows for the selected filter.
-  const loadSessions = async (filterType) => {
-    setLoading(true);
-    try {
-      const response = await fetch(`/api/sessions?filter=${filterType}&limit=50`);
-      const data = await response.json();
-      setSessions(data);
-      drawChart(data);
-    } catch (error) {
-      console.error('Failed to load sessions:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-  // Draw the session score chart.
-  const drawChart = (data) => {
-    const canvas = chartRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    const width = canvas.width = canvas.offsetWidth;
-    const height = canvas.height = 300;
-    // Clear the canvas before each redraw.
-    ctx.clearRect(0, 0, width, height);
-    if (data.length === 0) {
-      ctx.fillStyle = '#999';
-      ctx.font = '16px Nunito';
-      ctx.textAlign = 'center';
-      ctx.fillText('No data available', width / 2, height / 2);
-      return;
-    }
-    // Use at most the latest 20 sessions in the chart.
-    const displayData = data.slice(0, 20).reverse();
-    const padding = 50;
-    const chartWidth = width - padding * 2;
-    const chartHeight = height - padding * 2;
-    const barWidth = chartWidth / displayData.length;
-    // Use a normalized max score for chart scaling.
-    const maxScore = 1.0;
-    // Draw the chart axes.
-    ctx.strokeStyle = '#E0E0E0';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(padding, padding);
-    ctx.lineTo(padding, height - padding);
-    ctx.lineTo(width - padding, height - padding);
-    ctx.stroke();
-    // Draw Y-axis labels.
-    ctx.fillStyle = '#666';
-    ctx.font = '12px Nunito';
-    ctx.textAlign = 'right';
-    for (let i = 0; i <= 4; i++) {
-      const y = height - padding - (chartHeight * i / 4);
-      const value = (maxScore * i / 4 * 100).toFixed(0);
-      ctx.fillText(value + '%', padding - 10, y + 4);
-      // Draw horizontal grid lines.
-      ctx.strokeStyle = '#F0F0F0';
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.moveTo(padding, y);
-      ctx.lineTo(width - padding, y);
-      ctx.stroke();
-    }
-    // Draw the bar chart.
-    displayData.forEach((session, index) => {
-      const barHeight = (session.focus_score / maxScore) * chartHeight;
-      const x = padding + index * barWidth + barWidth * 0.1;
-      const y = height - padding - barHeight;
-      const barActualWidth = barWidth * 0.8;
-      // Map each score to a blue-toned color band.
-      const score = session.focus_score;
-      let color;
-      if (score >= 0.8) color = '#4A90E2';
-      else if (score >= 0.6) color = '#5DADE2';
-      else if (score >= 0.4) color = '#85C1E9';
-      else color = '#AED6F1';
-      ctx.fillStyle = color;
-      ctx.fillRect(x, y, barActualWidth, barHeight);
-      // Draw a matching outline around each bar.
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1;
-      ctx.strokeRect(x, y, barActualWidth, barHeight);
-    });
-    // Draw the chart title.
-    ctx.textAlign = 'left';
-    ctx.font = 'bold 14px Nunito';
-    ctx.fillStyle = '#4A90E2';
-    ctx.fillText('Focus Score by Session', padding, 30);
-  };
-  // Initial load.
-  useEffect(() => {
-    loadSessions(filter);
-  }, [filter]);
-  useEffect(() => {
-    if (!detailState.open) return undefined;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        closeDetails();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [detailState.open]);
-  // Filter button handler.
-  const handleFilterClick = (filterType) => {
-    setFilter(filterType);
-  };
-  // Open the detail modal for one session.
-  const handleViewDetails = async (sessionId) => {
-    setDetailState({
-      open: true,
-      loading: true,
-      error: '',
-      session: null
-    });
-    try {
-      const response = await fetch(`/api/sessions/${sessionId}`);
-      if (!response.ok) {
-        throw new Error('Failed to load session details.');
-      }
-      const data = await response.json();
-      setDetailState({
-        open: true,
-        loading: false,
-        error: '',
-        session: data
-      });
-    } catch (error) {
-      setDetailState({
-        open: true,
-        loading: false,
-        error: error.message || 'Failed to load session details.',
-        session: null
-      });
-    }
-  };
-  const detailView = buildDetailView(detailState.session);
-  return (
-    <main id="page-d" className="page">
-      <h1 className="page-title">My Records</h1>
-      <div className="records-controls" style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '30px' }}>
-        <button
-          id="filter-today"
-          onClick={() => handleFilterClick('today')}
-          style={{
-            padding: '10px 30px',
-            borderRadius: '8px',
-            border: filter === 'today' ? 'none' : '2px solid #4A90E2',
-            background: filter === 'today' ? '#4A90E2' : 'transparent',
-            color: filter === 'today' ? 'white' : '#4A90E2',
-            fontSize: '14px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            transition: 'all 0.3s'
-          }}
-        >
-          Today
-        </button>
-        <button
-          id="filter-week"
-          onClick={() => handleFilterClick('week')}
-          style={{
-            padding: '10px 30px',
-            borderRadius: '8px',
-            border: filter === 'week' ? 'none' : '2px solid #4A90E2',
-            background: filter === 'week' ? '#4A90E2' : 'transparent',
-            color: filter === 'week' ? 'white' : '#4A90E2',
-            fontSize: '14px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            transition: 'all 0.3s'
-          }}
-        >
-          This Week
-        </button>
-        <button
-          id="filter-month"
-          onClick={() => handleFilterClick('month')}
-          style={{
-            padding: '10px 30px',
-            borderRadius: '8px',
-            border: filter === 'month' ? 'none' : '2px solid #4A90E2',
-            background: filter === 'month' ? '#4A90E2' : 'transparent',
-            color: filter === 'month' ? 'white' : '#4A90E2',
-            fontSize: '14px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            transition: 'all 0.3s'
-          }}
-        >
-          This Month
-        </button>
-        <button
-          id="filter-all"
-          onClick={() => handleFilterClick('all')}
-          style={{
-            padding: '10px 30px',
-            borderRadius: '8px',
-            border: filter === 'all' ? 'none' : '2px solid #4A90E2',
-            background: filter === 'all' ? '#4A90E2' : 'transparent',
-            color: filter === 'all' ? 'white' : '#4A90E2',
-            fontSize: '14px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            transition: 'all 0.3s'
-          }}
-        >
-          All Time
-        </button>
-      </div>
-      <div className="chart-container" style={{
-        background: 'white',
-        padding: '20px',
-        borderRadius: '10px',
-        marginBottom: '30px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-        <canvas ref={chartRef} id="focus-chart" style={{ width: '100%', height: '300px' }}></canvas>
-      </div>
-      <div className="sessions-list" style={{
-        background: 'white',
-        padding: '20px',
-        borderRadius: '10px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-        <h2 style={{ color: '#333', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Recent Sessions</h2>
-        {loading ? (
-          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
-            Loading sessions...
-          </div>
-        ) : sessions.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
-            No sessions found for this period.
-          </div>
-        ) : (
-          <table id="sessions-table" style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '10px', overflow: 'hidden' }}>
-            <thead>
-              <tr style={{ background: '#4A90E2' }}>
-                <th style={{ padding: '15px', textAlign: 'left', color: 'white', fontWeight: '600', fontSize: '14px' }}>Date</th>
-                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Duration</th>
-                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Focus Score</th>
-                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Action</th>
-              </tr>
-            </thead>
-            <tbody id="sessions-tbody">
-              {sessions.map((session, index) => (
-                <tr key={session.id} style={{
-                  background: index % 2 === 0 ? '#f8f9fa' : 'white',
-                  borderBottom: '1px solid #e9ecef'
-                }}>
-                  <td style={{ padding: '15px', color: '#333', fontSize: '13px' }}>{formatDate(session.start_time)}</td>
-                  <td style={{ padding: '15px', textAlign: 'center', color: '#333', fontSize: '13px' }}>{formatDuration(session.duration_seconds)}</td>
-                  <td style={{ padding: '15px', textAlign: 'center' }}>
-                    <span
-                      style={{
-                        color:
-                          session.focus_score >= 0.8
-                            ? '#28a745'
-                            : session.focus_score >= 0.6
-                            ? '#ffc107'
-                            : session.focus_score >= 0.4
-                            ? '#fd7e14'
-                            : '#dc3545',
-                        fontWeight: '600',
-                        fontSize: '13px'
-                      }}
-                    >
-                      {(session.focus_score * 100).toFixed(1)}%
-                    </span>
-                  </td>
-                  <td style={{ padding: '15px', textAlign: 'center' }}>
-                    <button
-                      onClick={() => handleViewDetails(session.id)}
-                      className="btn-view"
-                    >
-                      View
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-      {detailState.open ? (
-        <div className="modal-overlay" onClick={closeDetails}>
-          <div className="modal-content records-detail-modal" onClick={(event) => event.stopPropagation()}>
-            <div className="records-detail-header">
-              <div>
-                <div className="records-detail-kicker">Session Detail</div>
-                <h2>
-                  {detailState.session ? formatDateTime(detailState.session.start_time) : 'Loading session'}
-                </h2>
-                <p className="records-detail-subtitle">
-                  Review score, capture quality, and a condensed event timeline for this session.
-                </p>
-              </div>
-              <button type="button" className="records-detail-close" onClick={closeDetails}>
-                Close
-              </button>
-            </div>
-            {detailState.loading ? (
-              <div className="records-detail-feedback">Loading session details...</div>
-            ) : detailState.error ? (
-              <div className="records-detail-feedback records-detail-feedback-error">{detailState.error}</div>
-            ) : detailState.session && detailView ? (
-              <>
-                <section className="records-detail-summary">
-                  <article className={`records-detail-stat ${getScoreTone(detailState.session.focus_score)}`}>
-                    <span className="records-detail-stat-label">Focus Score</span>
-                    <strong className="records-detail-stat-value">
-                      {(detailState.session.focus_score * 100).toFixed(1)}%
-                    </strong>
-                  </article>
-                  <article className="records-detail-stat">
-                    <span className="records-detail-stat-label">Duration</span>
-                    <strong className="records-detail-stat-value">
-                      {formatDuration(detailState.session.duration_seconds)}
-                    </strong>
-                  </article>
-                  <article className="records-detail-stat">
-                    <span className="records-detail-stat-label">Frames Analysed</span>
-                    <strong className="records-detail-stat-value">{detailState.session.total_frames}</strong>
-                  </article>
-                  <article className="records-detail-stat">
-                    <span className="records-detail-stat-label">Focused Frames</span>
-                    <strong className="records-detail-stat-value">
-                      {(detailView.focusRatio * 100).toFixed(1)}%
-                    </strong>
-                  </article>
-                </section>
-                <section className="records-detail-grid">
-                  <article className="records-detail-card">
-                    <h3>Session Info</h3>
-                    <div className="records-detail-list">
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Started</span>
-                        <span className="records-detail-item-value">{formatDateTime(detailState.session.start_time)}</span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Ended</span>
-                        <span className="records-detail-item-value">{formatDateTime(detailState.session.end_time)}</span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Dominant Model</span>
-                        <span className="records-detail-item-value">{detailView.dominantModel}</span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Event Samples</span>
-                        <span className="records-detail-item-value">{detailView.parsedEvents.length}</span>
-                      </div>
-                    </div>
-                  </article>
-                  <article className="records-detail-card">
-                    <h3>Signal Quality</h3>
-                    <div className="records-detail-list">
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Avg Confidence</span>
-                        <span className="records-detail-item-value">
-                          {detailView.avgConfidence !== null ? `${(detailView.avgConfidence * 100).toFixed(1)}%` : '--'}
-                        </span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Avg Face Score</span>
-                        <span className="records-detail-item-value">
-                          {detailView.avgFaceScore !== null ? detailView.avgFaceScore.toFixed(3) : '--'}
-                        </span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Avg Eye Score</span>
-                        <span className="records-detail-item-value">
-                          {detailView.avgEyeScore !== null ? detailView.avgEyeScore.toFixed(3) : '--'}
-                        </span>
-                      </div>
-                      <div className="records-detail-item">
-                        <span className="records-detail-item-label">Avg MAR</span>
-                        <span className="records-detail-item-value">
-                          {detailView.avgMar !== null ? detailView.avgMar.toFixed(3) : '--'}
-                        </span>
-                      </div>
-                    </div>
-                  </article>
-                </section>
-                <section className="records-detail-card">
-                  <div className="records-detail-section-head">
-                    <h3>Focus Timeline</h3>
-                    <span>{detailView.parsedEvents.length} events condensed</span>
-                  </div>
-                  {detailView.timeline.length > 0 ? (
-                    <>
-                      <div className="records-detail-timeline">
-                        {detailView.timeline.map((segment, index) => (
-                          <div
-                            key={`${segment.tone}-${index}`}
-                            className={`records-detail-segment ${segment.tone}`}
-                            title={`${(segment.focusRatio * 100).toFixed(0)}% focused, ${segment.count} events`}
-                          />
-                        ))}
-                      </div>
-                      <div className="records-detail-legend">
-                        <span><i className="records-detail-dot focused" />Focused</span>
-                        <span><i className="records-detail-dot mixed" />Mixed</span>
-                        <span><i className="records-detail-dot distracted" />Distracted</span>
-                      </div>
-                    </>
-                  ) : (
-                    <div className="records-detail-empty">No event timeline was recorded for this session.</div>
-                  )}
-                </section>
-                <section className="records-detail-card">
-                  <div className="records-detail-section-head">
-                    <h3>Recent Events</h3>
-                    <span>Last {detailView.recentEvents.length} samples</span>
-                  </div>
-                  {detailView.recentEvents.length > 0 ? (
-                    <div className="records-detail-events">
-                      {detailView.recentEvents.map((event) => (
-                        <article key={event.id} className="records-detail-event">
-                          <div className="records-detail-event-time">{detailView.formatOffset(event.timestamp)}</div>
-                          <div className="records-detail-event-copy">
-                            <div className="records-detail-event-status">
-                              {event.isFocused ? 'Focused' : 'Distracted'}
-                            </div>
-                            <div className="records-detail-event-meta">
-                              {event.metadata?.model || 'model n/a'} · confidence {(event.confidence * 100).toFixed(1)}%
-                            </div>
-                          </div>
-                          <div className={`records-detail-event-badge ${event.isFocused ? 'focused' : 'distracted'}`}>
-                            {event.isFocused ? 'OK' : 'Alert'}
-                          </div>
-                        </article>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="records-detail-empty">No individual event samples are available.</div>
-                  )}
-                </section>
-              </>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-    </main>
-  );
-}
-export default Records;

+import React, { useState, useEffect, useRef } from 'react';
+function Records() {
+  const [filter, setFilter] = useState('all');
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [detailState, setDetailState] = useState({
+    open: false,
+    loading: false,
+    error: '',
+    session: null
+  });
+  const chartRef = useRef(null);
+  const fileInputRef = useRef(null);
+  // Format a session duration.
+  const formatDuration = (seconds) => {
+    const safeSeconds = Math.max(0, Number(seconds) || 0);
+    const mins = Math.floor(safeSeconds / 60);
+    const secs = safeSeconds % 60;
+    return `${mins}m ${secs}s`;
+  };
+  // Format a session timestamp for table display.
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+  const formatDateTime = (dateString) => {
+    if (!dateString) return 'Not available';
+    const date = new Date(dateString);
+    return date.toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+  const parseMetadata = (detectionData) => {
+    if (!detectionData) return {};
+    if (typeof detectionData === 'object') return detectionData;
+    try {
+      return JSON.parse(detectionData);
+    } catch (_) {
+      return {};
+    }
+  };
+  const averageOf = (values) => {
+    const valid = values.filter((value) => Number.isFinite(value));
+    if (valid.length === 0) return null;
+    return valid.reduce((sum, value) => sum + value, 0) / valid.length;
+  };
+  const buildTimelineSegments = (events, maxSegments = 48) => {
+    if (!events.length) return [];
+    const segmentSize = Math.ceil(events.length / maxSegments);
+    const segments = [];
+    for (let i = 0; i < events.length; i += segmentSize) {
+      const slice = events.slice(i, i + segmentSize);
+      const focusedCount = slice.filter((event) => event.isFocused).length;
+      const focusRatio = focusedCount / slice.length;
+      const confidence = averageOf(slice.map((event) => event.confidence));
+      let tone = 'distracted';
+      if (focusRatio >= 0.75) tone = 'focused';
+      else if (focusRatio >= 0.35) tone = 'mixed';
+      segments.push({
+        tone,
+        focusRatio,
+        confidence,
+        count: slice.length
+      });
+    }
+    return segments;
+  };
+  const buildDetailView = (session) => {
+    if (!session) return null;
+    const parsedEvents = (session.events || []).map((event) => {
+      const metadata = parseMetadata(event.detection_data);
+      return {
+        ...event,
+        metadata,
+        isFocused: Boolean(event.is_focused),
+        confidence: Number(event.confidence) || 0
+      };
+    });
+    const focusRatio = session.total_frames
+      ? session.focused_frames / session.total_frames
+      : parsedEvents.length
+      ? parsedEvents.filter((event) => event.isFocused).length / parsedEvents.length
+      : 0;
+    const modelCounts = parsedEvents.reduce((counts, event) => {
+      const model = event.metadata?.model;
+      if (model) counts[model] = (counts[model] || 0) + 1;
+      return counts;
+    }, {});
+    const dominantModel = Object.entries(modelCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'Unavailable';
+    const avgConfidence = averageOf(parsedEvents.map((event) => event.confidence));
+    const avgFaceScore = averageOf(parsedEvents.map((event) => Number(event.metadata?.s_face)));
+    const avgEyeScore = averageOf(parsedEvents.map((event) => Number(event.metadata?.s_eye)));
+    const avgMar = averageOf(parsedEvents.map((event) => Number(event.metadata?.mar)));
+    const startTime = session.start_time ? new Date(session.start_time) : null;
+    const timeline = buildTimelineSegments(parsedEvents);
+    const recentEvents = parsedEvents.slice(-10).reverse();
+    return {
+      parsedEvents,
+      focusRatio,
+      dominantModel,
+      avgConfidence,
+      avgFaceScore,
+      avgEyeScore,
+      avgMar,
+      timeline,
+      recentEvents,
+      formatOffset(timestamp) {
+        if (!startTime || !timestamp) return '--';
+        const offsetSeconds = Math.max(0, Math.round((new Date(timestamp) - startTime) / 1000));
+        const mins = Math.floor(offsetSeconds / 60);
+        const secs = offsetSeconds % 60;
+        return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+      }
+    };
+  };
+  const getScoreTone = (score) => {
+    if (score >= 0.8) return 'excellent';
+    if (score >= 0.6) return 'good';
+    if (score >= 0.4) return 'fair';
+    return 'low';
+  };
+  const closeDetails = () => {
+    setDetailState({
+      open: false,
+      loading: false,
+      error: '',
+      session: null
+    });
+  };
+  // Load session rows for the selected filter.
+  const loadSessions = async (filterType) => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/sessions?filter=${filterType}&limit=50`);
+      const data = await response.json();
+      setSessions(data);
+      drawChart(data);
+    } catch (error) {
+      console.error('Failed to load sessions:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // Draw the session score chart.
+  const drawChart = (data) => {
+    const canvas = chartRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width = canvas.offsetWidth;
+    const height = canvas.height = 300;
+    // Clear the canvas before each redraw.
+    ctx.clearRect(0, 0, width, height);
+    if (data.length === 0) {
+      ctx.fillStyle = '#999';
+      ctx.font = '16px Nunito';
+      ctx.textAlign = 'center';
+      ctx.fillText('No data available', width / 2, height / 2);
+      return;
+    }
+    // Use at most the latest 20 sessions in the chart.
+    const displayData = data.slice(0, 20).reverse();
+    const padding = 50;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding * 2;
+    const barWidth = chartWidth / displayData.length;
+    // Use a normalized max score for chart scaling.
+    const maxScore = 1.0;
+    // Draw the chart axes.
+    ctx.strokeStyle = '#E0E0E0';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(padding, padding);
+    ctx.lineTo(padding, height - padding);
+    ctx.lineTo(width - padding, height - padding);
+    ctx.stroke();
+    // Draw Y-axis labels.
+    ctx.fillStyle = '#666';
+    ctx.font = '12px Nunito';
+    ctx.textAlign = 'right';
+    for (let i = 0; i <= 4; i++) {
+      const y = height - padding - (chartHeight * i / 4);
+      const value = (maxScore * i / 4 * 100).toFixed(0);
+      ctx.fillText(value + '%', padding - 10, y + 4);
+      // Draw horizontal grid lines.
+      ctx.strokeStyle = '#F0F0F0';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(padding, y);
+      ctx.lineTo(width - padding, y);
+      ctx.stroke();
+    }
+    // Draw the bar chart.
+    displayData.forEach((session, index) => {
+      const barHeight = (session.focus_score / maxScore) * chartHeight;
+      const x = padding + index * barWidth + barWidth * 0.1;
+      const y = height - padding - barHeight;
+      const barActualWidth = barWidth * 0.8;
+      // Map each score to a blue-toned color band.
+      const score = session.focus_score;
+      let color;
+      if (score >= 0.8) color = '#4A90E2';
+      else if (score >= 0.6) color = '#5DADE2';
+      else if (score >= 0.4) color = '#85C1E9';
+      else color = '#AED6F1';
+      ctx.fillStyle = color;
+      ctx.fillRect(x, y, barActualWidth, barHeight);
+      // Draw a matching outline around each bar.
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.strokeRect(x, y, barActualWidth, barHeight);
+    });
+    // Draw the chart title.
+    ctx.textAlign = 'left';
+    ctx.font = 'bold 14px Nunito';
+    ctx.fillStyle = '#4A90E2';
+    ctx.fillText('Focus Score by Session', padding, 30);
+  };
+  // Initial load.
+  useEffect(() => {
+    loadSessions(filter);
+  }, [filter]);
+  useEffect(() => {
+    if (!detailState.open) return undefined;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        closeDetails();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [detailState.open]);
+  // Filter button handler.
+  const handleFilterClick = (filterType) => {
+    setFilter(filterType);
+  };
+  // Open the detail modal for one session.
+  const handleViewDetails = async (sessionId) => {
+    setDetailState({
+      open: true,
+      loading: true,
+      error: '',
+      session: null
+    });
+    try {
+      const response = await fetch(`/api/sessions/${sessionId}`);
+      if (!response.ok) {
+        throw new Error('Failed to load session details.');
+      }
+      const data = await response.json();
+      setDetailState({
+        open: true,
+        loading: false,
+        error: '',
+        session: data
+      });
+    } catch (error) {
+      setDetailState({
+        open: true,
+        loading: false,
+        error: error.message || 'Failed to load session details.',
+        session: null
+      });
+    }
+  };
+  const handleExport = async () => {
+    try {
+      const response = await fetch('/api/sessions?filter=all');
+      if (!response.ok) throw new Error("Failed to fetch data");
+      const data = await response.json();
+      const jsonString = JSON.stringify(data, null, 2);
+      localStorage.setItem('focus_magic_backup', jsonString);
+      const blob = new Blob([jsonString], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `focus-guard-backup-${new Date().toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Export failed: " + error.message);
+    }
+  };
+  const triggerImport = () => {
+    if (fileInputRef.current) fileInputRef.current.click();
+  };
+  const handleFileChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const content = e.target.result;
+        const sessions = JSON.parse(content);
+        if (!Array.isArray(sessions)) {
+          throw new Error("Invalid file format: Expected a list of sessions.");
+        }
+        const response = await fetch('/api/import', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(sessions)
+        });
+        if (response.ok) {
+            const result = await response.json();
+            alert(`Success! Imported ${result.count} sessions.`);
+            loadSessions(filter);
+        } else {
+            alert("Import failed on server side.");
+        }
+      } catch (err) {
+        alert("Error parsing file: " + err.message);
+      }
+      event.target.value = '';
+    };
+    reader.readAsText(file);
+  };
+  const handleClearHistory = async () => {
+    if (!window.confirm("Are you sure? This will delete ALL your session history permanently.")) {
+        return;
+    }
+    try {
+        const response = await fetch('/api/history', { method: 'DELETE' });
+        if (response.ok) {
+            alert("All history has been cleared.");
+            loadSessions(filter);
+        } else {
+            alert("Failed to clear history.");
+        }
+    } catch (err) {
+        alert("Error: " + err.message);
+    }
+  };
+  const detailView = buildDetailView(detailState.session);
+  return (
+    <main id="page-d" className="page">
+      <h1 className="page-title" style={{ marginBottom: '10px' }}>My Records</h1>
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '15px', marginBottom: '25px' }}>
+        <input
+          type="file"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          accept=".json"
+          onChange={handleFileChange}
+        />
+        <button
+          onClick={handleExport}
+          style={{ background: '#eef3f8', border: '1px solid #d9eaff', color: '#4b5a6b', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#e2eaf3'; }}
+          onMouseOut={(e) => { e.target.style.background = '#eef3f8'; }}
+        >
+          ⬇️ Export
+        </button>
+        <button
+          onClick={triggerImport}
+          style={{ background: '#eef3f8', border: '1px solid #d9eaff', color: '#4b5a6b', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#e2eaf3'; }}
+          onMouseOut={(e) => { e.target.style.background = '#eef3f8'; }}
+        >
+          ⬆️ Import
+        </button>
+        <button
+          onClick={handleClearHistory}
+          style={{ background: '#fff1ee', border: '1px solid #f3c7c7', color: '#b54028', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#fbe5e1'; }}
+          onMouseOut={(e) => { e.target.style.background = '#fff1ee'; }}
+        >
+          🗑️ Clear
+        </button>
+      </div>
+      <div className="records-controls" style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '30px' }}>
+        <button
+          id="filter-today"
+          onClick={() => handleFilterClick('today')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'today' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'today' ? '#4A90E2' : 'transparent',
+            color: filter === 'today' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          Today
+        </button>
+        <button
+          id="filter-week"
+          onClick={() => handleFilterClick('week')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'week' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'week' ? '#4A90E2' : 'transparent',
+            color: filter === 'week' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          This Week
+        </button>
+        <button
+          id="filter-month"
+          onClick={() => handleFilterClick('month')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'month' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'month' ? '#4A90E2' : 'transparent',
+            color: filter === 'month' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          This Month
+        </button>
+        <button
+          id="filter-all"
+          onClick={() => handleFilterClick('all')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'all' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'all' ? '#4A90E2' : 'transparent',
+            color: filter === 'all' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          All Time
+        </button>
+      </div>
+      <div className="chart-container" style={{
+        background: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        marginBottom: '30px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+      }}>
+        <canvas ref={chartRef} id="focus-chart" style={{ width: '100%', height: '300px' }}></canvas>
+      </div>
+      <div className="sessions-list" style={{
+        background: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+      }}>
+        <h2 style={{ color: '#333', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Recent Sessions</h2>
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+            Loading sessions...
+          </div>
+        ) : sessions.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+            No sessions found for this period.
+          </div>
+        ) : (
+          <table id="sessions-table" style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '10px', overflow: 'hidden' }}>
+            <thead>
+              <tr style={{ background: '#4A90E2' }}>
+                <th style={{ padding: '15px', textAlign: 'left', color: 'white', fontWeight: '600', fontSize: '14px' }}>Date</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Duration</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Focus Score</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Action</th>
+              </tr>
+            </thead>
+            <tbody id="sessions-tbody">
+              {sessions.map((session, index) => (
+                <tr key={session.id} style={{
+                  background: index % 2 === 0 ? '#f8f9fa' : 'white',
+                  borderBottom: '1px solid #e9ecef'
+                }}>
+                  <td style={{ padding: '15px', color: '#333', fontSize: '13px' }}>{formatDate(session.start_time)}</td>
+                  <td style={{ padding: '15px', textAlign: 'center', color: '#333', fontSize: '13px' }}>{formatDuration(session.duration_seconds)}</td>
+                  <td style={{ padding: '15px', textAlign: 'center' }}>
+                    <span
+                      style={{
+                        color:
+                          session.focus_score >= 0.8
+                            ? '#28a745'
+                            : session.focus_score >= 0.6
+                            ? '#ffc107'
+                            : session.focus_score >= 0.4
+                            ? '#fd7e14'
+                            : '#dc3545',
+                        fontWeight: '600',
+                        fontSize: '13px'
+                      }}
+                    >
+                      {(session.focus_score * 100).toFixed(1)}%
+                    </span>
+                  </td>
+                  <td style={{ padding: '15px', textAlign: 'center' }}>
+                    <button
+                      onClick={() => handleViewDetails(session.id)}
+                      className="btn-view"
+                    >
+                      View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+      {detailState.open ? (
+        <div className="modal-overlay" onClick={closeDetails}>
+          <div className="modal-content records-detail-modal" onClick={(event) => event.stopPropagation()}>
+            <div className="records-detail-header">
+              <div>
+                <div className="records-detail-kicker">Session Detail</div>
+                <h2>
+                  {detailState.session ? formatDateTime(detailState.session.start_time) : 'Loading session'}
+                </h2>
+                <p className="records-detail-subtitle">
+                  Review score, capture quality, and a condensed event timeline for this session.
+                </p>
+              </div>
+              <button type="button" className="records-detail-close" onClick={closeDetails}>
+                Close
+              </button>
+            </div>
+            {detailState.loading ? (
+              <div className="records-detail-feedback">Loading session details...</div>
+            ) : detailState.error ? (
+              <div className="records-detail-feedback records-detail-feedback-error">{detailState.error}</div>
+            ) : detailState.session && detailView ? (
+              <>
+                <section className="records-detail-summary">
+                  <article className={`records-detail-stat ${getScoreTone(detailState.session.focus_score)}`}>
+                    <span className="records-detail-stat-label">Focus Score</span>
+                    <strong className="records-detail-stat-value">
+                      {(detailState.session.focus_score * 100).toFixed(1)}%
+                    </strong>
+                  </article>
+                  <article className="records-detail-stat">
+                    <span className="records-detail-stat-label">Duration</span>
+                    <strong className="records-detail-stat-value">
+                      {formatDuration(detailState.session.duration_seconds)}
+                    </strong>
+                  </article>
+                  <article className="records-detail-stat">
+                    <span className="records-detail-stat-label">Frames Analysed</span>
+                    <strong className="records-detail-stat-value">{detailState.session.total_frames}</strong>
+                  </article>
+                  <article className="records-detail-stat">
+                    <span className="records-detail-stat-label">Focused Frames</span>
+                    <strong className="records-detail-stat-value">
+                      {(detailView.focusRatio * 100).toFixed(1)}%
+                    </strong>
+                  </article>
+                </section>
+                <section className="records-detail-grid">
+                  <article className="records-detail-card">
+                    <h3>Session Info</h3>
+                    <div className="records-detail-list">
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Started</span>
+                        <span className="records-detail-item-value">{formatDateTime(detailState.session.start_time)}</span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Ended</span>
+                        <span className="records-detail-item-value">{formatDateTime(detailState.session.end_time)}</span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Dominant Model</span>
+                        <span className="records-detail-item-value">{detailView.dominantModel}</span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Event Samples</span>
+                        <span className="records-detail-item-value">{detailView.parsedEvents.length}</span>
+                      </div>
+                    </div>
+                  </article>
+                  <article className="records-detail-card">
+                    <h3>Signal Quality</h3>
+                    <div className="records-detail-list">
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Avg Confidence</span>
+                        <span className="records-detail-item-value">
+                          {detailView.avgConfidence !== null ? `${(detailView.avgConfidence * 100).toFixed(1)}%` : '--'}
+                        </span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Avg Face Score</span>
+                        <span className="records-detail-item-value">
+                          {detailView.avgFaceScore !== null ? detailView.avgFaceScore.toFixed(3) : '--'}
+                        </span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Avg Eye Score</span>
+                        <span className="records-detail-item-value">
+                          {detailView.avgEyeScore !== null ? detailView.avgEyeScore.toFixed(3) : '--'}
+                        </span>
+                      </div>
+                      <div className="records-detail-item">
+                        <span className="records-detail-item-label">Avg MAR</span>
+                        <span className="records-detail-item-value">
+                          {detailView.avgMar !== null ? detailView.avgMar.toFixed(3) : '--'}
+                        </span>
+                      </div>
+                    </div>
+                  </article>
+                </section>
+                <section className="records-detail-card">
+                  <div className="records-detail-section-head">
+                    <h3>Focus Timeline</h3>
+                    <span>{detailView.parsedEvents.length} events condensed</span>
+                  </div>
+                  {detailView.timeline.length > 0 ? (
+                    <>
+                      <div className="records-detail-timeline">
+                        {detailView.timeline.map((segment, index) => (
+                          <div
+                            key={`${segment.tone}-${index}`}
+                            className={`records-detail-segment ${segment.tone}`}
+                            title={`${(segment.focusRatio * 100).toFixed(0)}% focused, ${segment.count} events`}
+                          />
+                        ))}
+                      </div>
+                      <div className="records-detail-legend">
+                        <span><i className="records-detail-dot focused" />Focused</span>
+                        <span><i className="records-detail-dot mixed" />Mixed</span>
+                        <span><i className="records-detail-dot distracted" />Distracted</span>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="records-detail-empty">No event timeline was recorded for this session.</div>
+                  )}
+                </section>
+                <section className="records-detail-card">
+                  <div className="records-detail-section-head">
+                    <h3>Recent Events</h3>
+                    <span>Last {detailView.recentEvents.length} samples</span>
+                  </div>
+                  {detailView.recentEvents.length > 0 ? (
+                    <div className="records-detail-events">
+                      {detailView.recentEvents.map((event) => (
+                        <article key={event.id} className="records-detail-event">
+                          <div className="records-detail-event-time">{detailView.formatOffset(event.timestamp)}</div>
+                          <div className="records-detail-event-copy">
+                            <div className="records-detail-event-status">
+                              {event.isFocused ? 'Focused' : 'Distracted'}
+                            </div>
+                            <div className="records-detail-event-meta">
+                              {event.metadata?.model || 'model n/a'} · confidence {(event.confidence * 100).toFixed(1)}%
+                            </div>
+                          </div>
+                          <div className={`records-detail-event-badge ${event.isFocused ? 'focused' : 'distracted'}`}>
+                            {event.isFocused ? 'OK' : 'Alert'}
+                          </div>
+                        </article>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="records-detail-empty">No individual event samples are available.</div>
+                  )}
+                </section>
+              </>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </main>
+  );
+}
+export default Records;

src/src/App.css ADDED Viewed

	@@ -0,0 +1,2047 @@

+/* =========================================
+   1. REACT layout setting
+   ========================================= */
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.app-container {
+    width: 100%;
+    min-height: 100vh; /* screen height */
+    display: flex;
+    flex-direction: column;
+    background-color: #f9f9f9;
+}
+/* =========================================
+   2. original layout
+   ========================================= */
+/* GLOBAL STYLES */
+body {
+    font-family: 'Nunito', sans-serif;
+    background-color: #f9f9f9;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+/* dynamic class name */
+.hidden {
+    display: none !important;
+}
+/* TOP MENU */
+#top-menu {
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    padding: 0 16px 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1000;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+.top-menu-links {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0;
+    min-width: 0;
+}
+.menu-btn {
+    background: none;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.menu-btn:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+/* active for React */
+.menu-btn.active {
+    font-weight: bold;
+    color: #007BFF;
+    background-color: #eef7ff;
+    border-radius: 4px;
+}
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+/* PAGE CONTAINER */
+.page {
+    /* content under menu */
+    min-height: calc(100vh - 60px);
+    width: 100%;
+    padding-top: 60px; /* Space for fixed menu */
+    padding-bottom: 40px; /* Space at bottom for scrolling */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+}
+/* Ensure page titles are black */
+.page h1 {
+    color: #000 !important;
+    background: transparent !important;
+}
+.page-title {
+    color: #000 !important;
+    background: transparent !important;
+}
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    /* Fine-tune this margin if the Home screen sits slightly too low. */
+    margin-top: -40px;
+    flex: 1; /* Fill the remaining height so vertical centering still works. */
+}
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+    text-align: center; /* Keep the heading centered. */
+}
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+}
+.btn-main {
+    background-color: #007BFF; /* Blue */
+    color: white;
+    border: none;
+    padding: 15px 50px;
+    font-size: 20px;
+    font-family: 'Nunito', sans-serif;
+    border-radius: 30px; /* Fully rounded corners */
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.btn-main:hover {
+    transform: scale(1.1); /* Zoom effect */
+}
+/* PAGE B SPECIFIC */
+#page-b {
+    justify-content: space-evenly; /* Distribute vertical space */
+    padding-bottom: 20px;
+    min-height: calc(100vh - 60px); /* Ensure the page still fills the viewport. */
+}
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50vh; /* Use viewport height to scale more consistently across screens. */
+    min-height: 300px;
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #555;
+    font-size: 24px;
+    position: relative;
+    /* Keep video content centered without overflowing the frame. */
+    overflow: hidden;
+}
+.focus-display-shell {
+    background: #101010;
+}
+@keyframes fadeInOverlay {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+@keyframes slideUpCard {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.focus-flow-overlay {
+    position: fixed;
+    top: 76px;
+    right: 20px;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: rgba(17, 31, 52, 0.18);
+    backdrop-filter: blur(10px);
+    z-index: 900;
+    animation: fadeInOverlay 0.3s ease-out forwards;
+}
+.focus-flow-card {
+    width: min(1040px, 100%);
+    background: #fff;
+    border-radius: 24px;
+    padding: 30px 34px;
+    box-shadow: 0 28px 80px rgba(14, 44, 88, 0.18);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+    box-sizing: border-box;
+    animation: slideUpCard 0.4s ease-out forwards;
+}
+.focus-flow-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 18px;
+}
+.focus-flow-eyebrow {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.focus-flow-header h2 {
+    margin: 14px 0 0;
+    color: #333;
+    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
+    line-height: 1.1;
+}
+.focus-flow-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 116px;
+    height: 116px;
+    border-radius: 24px;
+    background: linear-gradient(180deg, #f4f9ff 0%, #edf5ff 100%);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+}
+.focus-flow-lead {
+    margin: 0 0 20px;
+    color: #4a4a4a;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+.focus-flow-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+.focus-flow-panel {
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 18px;
+}
+.focus-flow-grid .focus-flow-panel:last-child {
+    grid-column: 1 / -1;
+}
+.focus-flow-panel h3,
+.focus-flow-step-copy h3 {
+    margin: 0 0 8px;
+    color: #333;
+    font-size: 1rem;
+}
+.focus-flow-panel p,
+.focus-flow-step-copy p {
+    margin: 0;
+    color: #5e6670;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+.focus-flow-steps {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+.focus-flow-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 16px 18px;
+    min-height: 100px;
+    box-sizing: border-box;
+}
+.focus-flow-step-number {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: #007BFF;
+    color: #fff;
+    font-size: 0.95rem;
+    font-weight: 800;
+}
+.focus-flow-step-copy {
+    min-width: 0;
+}
+.focus-flow-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 20px;
+}
+.focus-flow-note {
+    color: #667281;
+    font-size: 0.94rem;
+    line-height: 1.6;
+}
+.focus-flow-glasses-note {
+    background: #fffbea;
+    border: 1px solid #f5c518;
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-size: 0.9rem;
+    color: #5a4a00;
+    line-height: 1.55;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+.focus-flow-panel-warn {
+    border-left: 3px solid #f5a623;
+    background: #fff9f0;
+}
+.eye-gaze-modal-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 0.9rem;
+    color: #667281;
+    cursor: pointer;
+    user-select: none;
+}
+.focus-flow-button,
+.focus-flow-secondary {
+    border: none;
+    border-radius: 999px;
+    padding: 13px 24px;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.98rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.focus-flow-button {
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.18);
+}
+.focus-flow-button:hover {
+    background: #0069d9;
+    border-color: transparent;
+    transform: translateY(-1px);
+}
+.focus-flow-secondary {
+    background: #eef3f8;
+    color: #4b5a6b;
+}
+.focus-flow-secondary:hover {
+    background: #e2eaf3;
+    border-color: transparent;
+}
+.focus-state-pill {
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 999px;
+    color: #fff;
+    font-size: 0.88rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    z-index: 2;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
+}
+.focus-state-pill.pending {
+    background: rgba(87, 96, 111, 0.92);
+}
+.focus-state-pill.focused {
+    background: rgba(33, 163, 102, 0.94);
+}
+.focus-state-pill.not-focused {
+    background: rgba(215, 68, 68, 0.94);
+}
+.focus-state-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
+}
+.focus-idle-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.72));
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+}
+.focus-idle-overlay p {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 800;
+}
+.focus-idle-overlay span {
+    max-width: 420px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 0.98rem;
+    line-height: 1.5;
+}
+.focus-inline-error {
+    margin-top: 18px;
+    padding: 12px 16px;
+    max-width: 620px;
+    border-radius: 12px;
+    background: #fff1ee;
+    color: #b54028;
+    font-size: 0.95rem;
+    font-weight: 700;
+    box-shadow: 0 10px 20px rgba(181, 64, 40, 0.08);
+}
+.focus-inline-error-standalone {
+    width: 60%;
+    box-sizing: border-box;
+}
+.focus-debug-panel {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: monospace;
+}
+.focus-model-strip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 16px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin: 10px auto;
+    max-width: 700px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+/* --- Model info card --- */
+.model-card {
+    width: 60%;
+    margin: 14px auto 0;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 14px;
+    padding: 18px 22px 14px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+    animation: cardFadeIn 0.25s ease;
+    box-sizing: border-box;
+}
+.model-card-details {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+@keyframes cardFadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.model-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+.model-card-title {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #1a1a2e;
+}
+.model-card-badge {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.model-card-badge-baseline {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #fff3e0;
+    color: #e67e22;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.model-card-tagline {
+    margin: 0 0 12px;
+    color: #667281;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+.model-card-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    margin-bottom: 14px;
+}
+.model-card-metric {
+    text-align: center;
+    padding: 8px 4px;
+    background: #f8fbff;
+    border: 1px solid #e8f0fe;
+    border-radius: 10px;
+}
+.model-card-metric-value {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #007BFF;
+    line-height: 1.2;
+}
+.model-card-metric-label {
+    display: block;
+    font-size: 0.65rem;
+    color: #8899aa;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 2px;
+}
+.model-card-section {
+    margin-bottom: 8px;
+}
+.model-card-section h4 {
+    margin: 0 0 2px;
+    font-size: 0.78rem;
+    color: #555;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+.model-card-section p {
+    margin: 0;
+    font-size: 0.82rem;
+    color: #4a4a4a;
+    line-height: 1.5;
+}
+.model-card-eval {
+    margin-top: 10px;
+    padding: 6px 10px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    color: #7a8a9a;
+    font-weight: 600;
+}
+@media (max-width: 768px) {
+    .model-card {
+        width: 90%;
+    }
+    .model-card-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .model-card-details {
+        grid-template-columns: 1fr;
+    }
+}
+.focus-model-label {
+    color: #666;
+    font-size: 13px;
+    font-weight: 700;
+    margin-right: 4px;
+}
+.focus-model-button {
+    padding: 6px 16px;
+    border-radius: 16px;
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #555;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.focus-model-button:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+.focus-model-button.active {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+}
+.focus-model-sep {
+    width: 1px;
+    height: 24px;
+    background: #d0d0d0;
+    margin: 0 4px;
+}
+.eye-gaze-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+.eye-gaze-toggle.off {
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #888;
+}
+.eye-gaze-toggle.off:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+.eye-gaze-toggle.on {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
+}
+.eye-gaze-toggle.on:hover {
+    background: #0069d9;
+    border-color: #0069d9;
+}
+.eye-gaze-icon {
+    flex-shrink: 0;
+}
+.focus-model-button.recalibrate {
+    border: 1px solid #007BFF;
+    background: transparent;
+    color: #007BFF;
+    font-weight: 600;
+    font-size: 11px;
+}
+.focus-model-button.recalibrate:hover {
+    background: #f0f7ff;
+}
+.focus-system-stats {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 4px 16px;
+    margin: 4px auto;
+    max-width: 400px;
+    font-size: 12px;
+    color: #888;
+}
+.focus-system-stats strong {
+    color: #555;
+}
+.focus-system-stats-sep {
+    width: 1px;
+    height: 12px;
+    background: #ccc;
+}
+#display-area video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Behaves similarly to background-size: cover. */
+}
+/* 2. Timeline Area */
+#timeline-area {
+    width: 60%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-self: center;
+    margin: 0 auto;
+}
+#timeline-visuals {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 2px;
+    width: 100%;
+}
+.timeline-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #888;
+    font-size: 14px;
+}
+#timeline-line {
+    width: 100%;
+    height: 2px;
+    background-color: #87CEEB; /* Light blue */
+}
+/* 3. Control Panel */
+#control-panel {
+    display: flex;
+    gap: 20px;
+    width: 60%;
+    justify-content: space-between;
+}
+.action-btn {
+    flex: 1; /* Evenly distributed width */
+    padding: 12px 0;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+    transition: opacity 0.2s;
+}
+.action-btn:hover {
+    opacity: 0.9;
+}
+.action-btn.green { background-color: #28a745; }
+.action-btn.blue { background-color: #007BFF; }
+.action-btn.orange { background-color: #e67e22; }
+.action-btn.red { background-color: #dc3545; }
+/* 4. Frame Control */
+#frame-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #333;
+    font-weight: bold;
+}
+#frame-slider {
+    width: 200px;
+    cursor: pointer;
+}
+#frame-input {
+    width: 50px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+}
+/* ================ ACHIEVEMENT PAGE ================ */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    width: 80%;
+    margin: 40px auto;
+}
+.stat-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.stat-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+.stat-label {
+    font-size: 16px;
+    color: #666;
+}
+.achievements-section {
+    width: 80%;
+    margin: 0 auto;
+}
+.achievements-section h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.badge {
+    background: white;
+    padding: 30px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.2s;
+}
+.badge:hover {
+    transform: translateY(-5px);
+}
+.badge.locked {
+    opacity: 0.4;
+    filter: grayscale(100%);
+}
+.badge-icon {
+    font-size: 64px;
+    margin-bottom: 15px;
+}
+.badge-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+/* ================ RECORDS PAGE ================ */
+.records-controls {
+    display: flex;
+    gap: 10px;
+    margin: 20px auto;
+    width: 80%;
+    justify-content: center;
+}
+.filter-btn {
+    padding: 10px 20px;
+    border: 2px solid #007BFF;
+    background: white;
+    color: #007BFF;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.filter-btn:hover {
+    background: #e7f3ff;
+}
+.filter-btn.active {
+    background: #007BFF;
+    color: white;
+}
+.chart-container {
+    width: 80%;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin: 20px auto;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#focus-chart {
+    display: block;
+    margin: 0 auto;
+    /* Make sure the chart scales within its container. */
+    max-width: 100%;
+}
+.sessions-list {
+    width: 80%;
+    margin: 20px auto;
+}
+.sessions-list h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+#sessions-table {
+    width: 100%;
+    background: white;
+    border-collapse: collapse;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#sessions-table th {
+    background: #007BFF;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+}
+#sessions-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+#sessions-table tr:last-child td {
+    border-bottom: none;
+}
+#sessions-table tbody tr:hover {
+    background: #f8f9fa;
+}
+.btn-view {
+    padding: 6px 18px;
+    background: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    transition: background 0.2s;
+}
+.btn-view:hover {
+    background: #0056b3;
+}
+.records-detail-modal {
+    width: min(960px, 92vw);
+    max-width: 960px;
+    max-height: 86vh;
+    overflow-y: auto;
+    padding: 30px;
+    box-sizing: border-box;
+}
+.records-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+.records-detail-kicker {
+    color: #007BFF;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+.records-detail-header h2 {
+    margin: 10px 0 8px;
+    color: #333;
+    text-align: left;
+}
+.records-detail-subtitle {
+    margin: 0;
+    color: #667281;
+    line-height: 1.6;
+}
+.records-detail-close {
+    border: 1px solid #d6e6fa;
+    background: #f4f9ff;
+    color: #3569a8;
+    border-radius: 999px;
+    padding: 10px 18px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+}
+.records-detail-close:hover {
+    border-color: #bfd9f7;
+    background: #e9f4ff;
+}
+.records-detail-feedback {
+    padding: 18px 20px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #516173;
+    font-weight: 700;
+}
+.records-detail-feedback-error {
+    background: #fff1ee;
+    color: #b54028;
+}
+.records-detail-summary {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 14px;
+    margin-bottom: 18px;
+}
+.records-detail-stat {
+    padding: 18px;
+    border-radius: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+}
+.records-detail-stat.excellent {
+    background: #eef9f0;
+    border-color: #cdebd3;
+}
+.records-detail-stat.good {
+    background: #fff9eb;
+    border-color: #f8e3a8;
+}
+.records-detail-stat.fair {
+    background: #fff4eb;
+    border-color: #ffd6af;
+}
+.records-detail-stat.low {
+    background: #fff0f0;
+    border-color: #f3c7c7;
+}
+.records-detail-stat-label {
+    display: block;
+    margin-bottom: 8px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.records-detail-stat-value {
+    display: block;
+    color: #1f2d3d;
+    font-size: 28px;
+    line-height: 1.1;
+}
+.records-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+}
+.records-detail-card {
+    background: white;
+    border: 1px solid #e8eef5;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(20, 44, 74, 0.06);
+    margin-bottom: 16px;
+}
+.records-detail-card:last-child {
+    margin-bottom: 0;
+}
+.records-detail-card h3 {
+    margin: 0 0 16px;
+    color: #333;
+    font-size: 18px;
+}
+.records-detail-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px 18px;
+}
+.records-detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.records-detail-item-label {
+    color: #7a8795;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.records-detail-item-value {
+    color: #263445;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.5;
+}
+.records-detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.records-detail-section-head span {
+    color: #7a8795;
+    font-size: 13px;
+    font-weight: 700;
+}
+.records-detail-timeline {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+    gap: 5px;
+}
+.records-detail-segment {
+    height: 48px;
+    border-radius: 999px;
+}
+.records-detail-segment.focused {
+    background: linear-gradient(180deg, #3ab86a 0%, #23a057 100%);
+}
+.records-detail-segment.mixed {
+    background: linear-gradient(180deg, #f1b447 0%, #df9a1e 100%);
+}
+.records-detail-segment.distracted {
+    background: linear-gradient(180deg, #ec7d7d 0%, #d9534f 100%);
+}
+.records-detail-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 14px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+}
+.records-detail-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+.records-detail-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+.records-detail-dot.focused {
+    background: #23a057;
+}
+.records-detail-dot.mixed {
+    background: #df9a1e;
+}
+.records-detail-dot.distracted {
+    background: #d9534f;
+}
+.records-detail-events {
+    display: grid;
+    gap: 10px;
+    max-height: 280px;
+    overflow-y: auto;
+}
+.records-detail-event {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    background: #f8fbff;
+    border: 1px solid #e1edf9;
+    border-radius: 14px;
+}
+.records-detail-event-time {
+    min-width: 52px;
+    color: #3569a8;
+    font-size: 13px;
+    font-weight: 800;
+}
+.records-detail-event-copy {
+    min-width: 0;
+}
+.records-detail-event-status {
+    color: #243345;
+    font-size: 14px;
+    font-weight: 800;
+}
+.records-detail-event-meta {
+    margin-top: 4px;
+    color: #6f7d8c;
+    font-size: 12px;
+    line-height: 1.5;
+}
+.records-detail-event-badge {
+    padding: 7px 12px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.records-detail-event-badge.focused {
+    background: #eaf8ef;
+    color: #1f8a4c;
+}
+.records-detail-event-badge.distracted {
+    background: #fff1f1;
+    color: #c24c49;
+}
+.records-detail-empty {
+    padding: 16px 18px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #708090;
+    font-weight: 700;
+}
+/* ================ SETTINGS PAGE ================ */
+.settings-container {
+    width: 60%;
+    max-width: 800px;
+    margin: 20px auto;
+}
+.setting-group {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.setting-group h2 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007BFF;
+    padding-bottom: 10px;
+}
+.setting-item {
+    margin-bottom: 25px;
+}
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+.setting-item label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+.slider-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.slider-group input[type="range"] {
+    flex: 1;
+}
+.slider-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.setting-description {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+    font-style: italic;
+}
+input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+input[type="number"] {
+    width: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: 'Nunito', sans-serif;
+}
+/* Center the settings buttons and give them more width. */
+.setting-group .action-btn {
+    display: inline-block;   /* Allow buttons to sit side by side. */
+    width: 48%;              /* Roughly half-width each, with a small gutter. */
+    margin: 15px 1%;         /* Vertical spacing plus horizontal separation. */
+    text-align: center;      /* Center the label text. */
+    box-sizing: border-box;  /* Prevent borders from forcing an early wrap. */
+}
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+/* ================ HELP PAGE ================ */
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+/* Fake ad block (Help page) */
+.fake-ad {
+    position: relative;
+    display: block;
+    width: min(600px, 90%);
+    margin: 10px auto 30px auto;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    text-decoration: none;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.fake-ad:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
+}
+.fake-ad img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+.fake-ad-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: rgba(0,0,0,0.75);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    letter-spacing: 0.5px;
+}
+.fake-ad-cta {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    background: #111;
+    color: #fff;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+.help-section {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.help-section h2 {
+    color: #007BFF;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.help-section ol,
+.help-section ul {
+    line-height: 1.8;
+    color: #333;
+}
+.help-section p {
+    line-height: 1.6;
+    color: #333;
+}
+details {
+    margin: 15px 0;
+    cursor: pointer;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+}
+summary {
+    font-weight: bold;
+    padding: 5px;
+    color: #007BFF;
+}
+details[open] summary {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+details p {
+    margin: 10px 0 0 0;
+}
+/* ================ SESSION SUMMARY MODAL ================ */
+/* These modal styles can be reused for future overlays. */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.modal-content {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+.modal-content h2 {
+    margin-top: 0;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+.summary-stats {
+    margin-bottom: 30px;
+}
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+.summary-item:last-child {
+    border-bottom: none;
+}
+.summary-label {
+    font-weight: 600;
+    color: #666;
+}
+.summary-value {
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.modal-content .btn-main {
+    display: block;
+    margin: 0 auto;
+    padding: 12px 40px;
+}
+/* ================ TIMELINE BLOCKS ================ */
+.timeline-block {
+    transition: opacity 0.2s;
+    border-radius: 2px;
+}
+.timeline-block:hover {
+    opacity: 0.7;
+}
+/* ================ RESPONSIVE DESIGN ================ */
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .badges-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 768px) {
+    .stats-grid,
+    .badges-grid {
+        grid-template-columns: 1fr;
+        width: 90%;
+    }
+    .settings-container,
+    .help-container,
+    .chart-container,
+    .sessions-list,
+    .records-controls {
+        width: 90%;
+    }
+    #control-panel {
+        width: 90%;
+        flex-wrap: wrap;
+    }
+    #display-area {
+        width: 90%;
+    }
+    #timeline-area {
+        width: 90%;
+    }
+    #frame-control {
+        width: 90%;
+        flex-direction: column;
+    }
+    .focus-inline-error-standalone {
+        width: 90%;
+    }
+    .focus-flow-overlay {
+        top: 70px;
+        right: 10px;
+        bottom: 10px;
+        left: 10px;
+    }
+    .focus-flow-card {
+        padding: 22px 20px;
+    }
+    .focus-flow-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .focus-flow-icon {
+        width: 92px;
+        height: 92px;
+    }
+    .focus-flow-grid {
+        grid-template-columns: 1fr;
+    }
+    .focus-flow-steps {
+        grid-template-columns: 1fr;
+    }
+    .focus-flow-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .focus-flow-button,
+    .focus-flow-secondary {
+        width: 100%;
+    }
+    .records-detail-modal {
+        width: 94vw;
+        padding: 22px 18px;
+    }
+    .records-detail-header,
+    .records-detail-section-head {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .records-detail-summary,
+    .records-detail-grid,
+    .records-detail-list {
+        grid-template-columns: 1fr;
+    }
+    .records-detail-event {
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+    }
+}
+/* =========================================
+   SESSION RESULT OVERLAY
+   ========================================= */
+.session-result-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent backdrop. */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    z-index: 10;
+    animation: fadeIn 0.5s ease;
+    backdrop-filter: blur(5px); /* Optional background blur. */
+}
+.session-result-overlay h3 {
+    font-size: 32px;
+    margin-bottom: 30px;
+    color: #4cd137; /* Green title accent. */
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+.session-result-overlay .result-item {
+    display: flex;
+    justify-content: space-between;
+    width: 200px; /* Keep the stat row compact. */
+    margin-bottom: 15px;
+    font-size: 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    padding-bottom: 5px;
+}
+.session-result-overlay .label {
+    color: #ccc;
+    font-weight: normal;
+}
+.session-result-overlay .value {
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Courier New', monospace; /* Give the values a data-like look. */
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+/* ================= Welcome modal styles ================= */
+.welcome-modal-overlay {
+position: fixed;
+top: 0; left: 0; right: 0; bottom: 0;
+background-color: rgba(0, 0, 0, 0.7);
+display: flex;
+justify-content: center;
+align-items: center;
+z-index: 9999;
+}
+.welcome-modal {
+background-color: #1e1e24;
+padding: 40px;
+border-radius: 15px;
+text-align: center;
+box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+border: 1px solid #333;
+}
+.welcome-modal h2 { margin-top: 0; color: #fff; }
+.welcome-modal p { margin-bottom: 30px; color: #ccc; }
+.welcome-buttons { display: flex; gap: 20px; justify-content: center; }
+/* ================= Top-left avatar styles ================= */
+.avatar-container {
+    position: absolute;
+    left: 20px;
+    cursor: pointer;
+    z-index: 1;
+}
+.avatar-circle {
+width: 40px;
+height: 40px;
+border-radius: 50%;
+display: flex;
+justify-content: center;
+align-items: center;
+font-weight: bold;
+font-size: 1.2rem;
+color: white;
+transition: all 0.3s ease;
+border: 2px solid transparent;
+}
+.avatar-circle.user { background-color: #555; }
+.avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }
+/* ================ CALIBRATION OVERLAY ================ */
+.cal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(8, 15, 28, 0.94);
+  backdrop-filter: blur(6px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Nunito', sans-serif;
+}
+/* ---- header / instructions ---- */
+.cal-header {
+  position: absolute;
+  top: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+}
+.cal-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.cal-eyebrow-collect {
+  background: rgba(40, 167, 69, 0.18);
+  color: #5ee882;
+}
+.cal-eyebrow-verify {
+  background: rgba(0, 123, 255, 0.18);
+  color: #6bb8ff;
+}
+.cal-instruction {
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+/* ---- target dot + ring ---- */
+.cal-target {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+.cal-ring {
+  position: absolute;
+  left: -30px;
+  top: -30px;
+}
+.cal-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transition: box-shadow 0.3s ease;
+}
+/* ---- cancel button (matches focus-flow-secondary) ---- */
+.cal-cancel {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  padding: 12px 28px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Nunito', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+.cal-cancel:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+/* ---- done card (matches focus-flow-card style) ---- */
+.cal-done-card {
+  text-align: center;
+  padding: 36px 44px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
+  animation: fadeIn 0.4s ease;
+}
+.cal-done-success {
+  background: linear-gradient(168deg, rgba(40, 167, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(40, 167, 69, 0.3);
+}
+.cal-done-fail {
+  background: linear-gradient(168deg, rgba(220, 53, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(220, 53, 69, 0.3);
+}
+.cal-done-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+.cal-done-success .cal-done-eyebrow {
+  background: rgba(40, 167, 69, 0.2);
+  color: #5ee882;
+}
+.cal-done-fail .cal-done-eyebrow {
+  background: rgba(220, 53, 69, 0.2);
+  color: #f87171;
+}
+.cal-done-title {
+  margin: 0 0 8px;
+  font-size: 1.6rem;
+  color: #fff;
+}
+.cal-done-subtitle {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+/* ================= Home page 2x2 responsive button grid ================= */
+.home-button-grid {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 360px;
+  margin: 40px auto 0;
+}
+.home-button-grid .btn-main {
+  width: 100%;
+  height: 60px; /* Keep all tiles at the same height. */
+  margin: 0; /* Remove default outer spacing. */
+  padding: 10px;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box; /* Prevent padding and borders from breaking the grid. */
+}
+/* Mobile-only scaling for screens below 600px. */
+@media (max-width: 600px) {
+  #top-menu {
+    justify-content: flex-start;
+    padding: 0 12px 0 68px;
+  }
+  .menu-btn {
+    padding: 10px 14px;
+    font-size: 0.92rem;
+  }
+  .separator {
+    margin: 0 2px;
+  }
+  .home-button-grid {
+    gap: 15px;
+    max-width: 90%;
+  }
+  .home-button-grid .btn-main {
+    height: 50px;
+    font-size: 0.85rem;
+  }
+}

src/src/App.jsx ADDED Viewed

	@@ -0,0 +1,125 @@

+import React, { useState, useRef, useEffect } from 'react';
+import './App.css';
+import { VideoManagerLocal } from './utils/VideoManagerLocal';
+import Home from './components/Home';
+import FocusPageLocal from './components/FocusPageLocal';
+import Achievement from './components/Achievement';
+import Records from './components/Records';
+import Help from './components/Help';
+function App() {
+  const [activeTab, setActiveTab] = useState('home');
+  const videoManagerRef = useRef(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [sessionResult, setSessionResult] = useState(null);
+  const [isTutorialActive, setIsTutorialActive] = useState(false);
+  const [hasSeenTutorial, setHasSeenTutorial] = useState(false);
+  useEffect(() => {
+    fetch('/api/history', { method: 'DELETE' })
+      .then(() => {
+        const backup = localStorage.getItem('focus_magic_backup');
+        if (backup) {
+          try {
+            const sessions = JSON.parse(backup);
+            fetch('/api/import', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(sessions)
+            });
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      })
+      .catch(err => console.error(err));
+    const callbacks = {
+      onSessionStart: () => {
+        setIsSessionActive(true);
+        setSessionResult(null);
+      },
+      onSessionEnd: (summary) => {
+        setIsSessionActive(false);
+        if (summary) setSessionResult(summary);
+        fetch('/api/sessions?filter=all')
+          .then(res => res.json())
+          .then(data => {
+            if (data && Array.isArray(data)) {
+              localStorage.setItem('focus_magic_backup', JSON.stringify(data));
+            }
+          })
+          .catch(err => console.error(err));
+      }
+    };
+    videoManagerRef.current = new VideoManagerLocal(callbacks);
+    return () => {
+      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
+    };
+  }, []);
+  const handleStartFocus = () => {
+    if (!hasSeenTutorial) {
+      setIsTutorialActive(true);
+    }
+    setActiveTab('focus');
+  };
+  const handleStartTutorial = () => {
+    setIsTutorialActive(true);
+    setActiveTab('focus');
+  };
+  return (
+    <div className="app-container">
+      <nav id="top-menu">
+        <button
+          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`}
+          onClick={() => setActiveTab('home')}
+        >
+          Home
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={handleStartFocus}>
+          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
+          My Achievement
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
+          My Records
+        </button>
+        <div className="separator"></div>
+        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
+          Help
+        </button>
+      </nav>
+      {activeTab === 'home' && <Home onStartFocus={handleStartFocus} onStartTutorial={handleStartTutorial} />}
+      <FocusPageLocal
+        videoManager={videoManagerRef.current}
+        sessionResult={sessionResult}
+        setSessionResult={setSessionResult}
+        isActive={activeTab === 'focus'}
+        isTutorialActive={isTutorialActive}
+        setIsTutorialActive={setIsTutorialActive}
+        setHasSeenTutorial={setHasSeenTutorial}
+      />
+      {activeTab === 'achievement' && <Achievement />}
+      {activeTab === 'records' && <Records />}
+      {activeTab === 'help' && <Help />}
+    </div>
+  );
+}
+export default App;

ui/pipeline.py CHANGED Viewed

@@ -442,11 +442,14 @@ class HybridFocusPipeline:
             if not os.path.isfile(resolved_combiner):
                 resolved_combiner = os.path.join(_PROJECT_ROOT, combiner_path)
             if os.path.isfile(resolved_combiner):
-                blob = joblib.load(resolved_combiner)
-                self._combiner = blob.get("combiner")
-                if self._combiner is None:
-                    self._combiner = blob
-                print(f"[HYBRID] LR combiner loaded from {resolved_combiner}")
             else:
                 print(f"[HYBRID] combiner_path not found: {resolved_combiner}, using heuristic weights")
         if self._use_xgb:

             if not os.path.isfile(resolved_combiner):
                 resolved_combiner = os.path.join(_PROJECT_ROOT, combiner_path)
             if os.path.isfile(resolved_combiner):
+                try:
+                    blob = joblib.load(resolved_combiner)
+                    self._combiner = blob.get("combiner")
+                    if self._combiner is None:
+                        self._combiner = blob
+                    print(f"[HYBRID] LR combiner loaded from {resolved_combiner}")
+                except Exception as e:
+                    print(f"[HYBRID] Failed to load combiner ({e}); using heuristic weights")
             else:
                 print(f"[HYBRID] combiner_path not found: {resolved_combiner}, using heuristic weights")
         if self._use_xgb: