Revamp oven guide UI and improve content clarity

D David Veksler · 5 months ago e2bede3662a1a47683ac26a0da7881556d635d90
Parent: 2776238a4
Updated styles for a more modern look, including new fonts, gradients, and improved color palette. Enhanced navigation, header, and interface simulation visuals. Reworked accessories section into a single reference table, clarified cleaning instructions, expanded troubleshooting/error codes, and added Sabbath mode details. Improved overall readability and organization for easier use.

1 file changed +452 −115

Diff

diff --git a/samsung-bespoke-oven-guide.html b/samsung-bespoke-oven-guide.html
index cd9e60d..80e3cfa 100644
--- a/samsung-bespoke-oven-guide.html
+++ b/samsung-bespoke-oven-guide.html
@@ -27,6 +27,8 @@
 
     <!-- Bootstrap 5.3.3 CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
 
@@ -47,19 +49,37 @@
 
     <style>
         :root {
-            --device-bg: #1a1a1a;
-            --ui-blue: #2d6eff; /* Samsung UI Blue */
-            --ui-dark: #000000;
-            --ui-text: #ffffff;
+            --device-bg: #15171a;
+            --ui-blue: #2a63ff; /* Samsung UI Blue */
+            --ui-dark: #0b0c0f;
+            --ui-text: #f6f6f6;
             --ui-grey: #495057;
-            --accent-steam: #0dcaf0;
-            --accent-heat: #fd7e14;
+            --accent-steam: #35b7ff;
+            --accent-heat: #d47b3d;
+            --accent-gold: #f5c24b;
+            --paper: #f6f2ea;
+            --ink: #121417;
         }
 
         body {
-            background-color: #f4f4f4;
-            color: #333;
-            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background: radial-gradient(1000px 500px at 10% -10%, #ffffff 0%, var(--paper) 45%, #efe7dc 100%);
+            color: var(--ink);
+            font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+        }
+
+        .navbar.nav-blade {
+            background: linear-gradient(90deg, #1c1f24, #0f1114);
+            border-bottom: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .navbar .nav-link {
+            color: rgba(255,255,255,0.75);
+            font-weight: 500;
+        }
+
+        .navbar .nav-link:hover,
+        .navbar .nav-link:focus {
+            color: #ffffff;
         }
 
         /* Hardware Simulation Styles */
@@ -69,7 +89,7 @@
             border: 8px solid #2c2c2c;
             border-radius: 12px;
             padding: 20px;
-            font-family: 'Roboto', sans-serif;
+            font-family: 'IBM Plex Sans', sans-serif;
             box-shadow: 0 4px 15px rgba(0,0,0,0.3);
             position: relative;
             overflow: hidden;
@@ -131,16 +151,21 @@
         .rack-guide::after {
             content: attr(data-level);
             position: absolute;
-            right: -25px;
-            top: -10px;
-            color: #333;
-            font-weight: bold;
-            font-size: 0.8rem;
+            right: 8px;
+            top: -12px;
+            color: #e8e8e8;
+            font-weight: 600;
+            font-size: 0.75rem;
+            background: rgba(0,0,0,0.55);
+            padding: 2px 6px;
+            border-radius: 10px;
         }
 
         /* Typography & Utilities */
-        h1, h2, h3 {
-            color: var(--device-bg);
+        h1, h2, h3, h4 {
+            color: var(--ink);
+            font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
+            letter-spacing: -0.02em;
         }
 
         .term-tip {
@@ -149,6 +174,39 @@
             color: var(--device-bg);
             font-weight: 600;
         }
+        .extra-small { font-size: 0.75rem; }
+
+        .page-hero {
+            background: linear-gradient(135deg, #ffffff 0%, #f1e7db 55%, #efe7dc 100%);
+            border: 1px solid rgba(0,0,0,0.06);
+            border-radius: 20px;
+            padding: 28px 24px;
+            box-shadow: 0 16px 30px rgba(16, 18, 22, 0.08);
+        }
+
+        .hero-badges .badge {
+            border: 1px solid rgba(0,0,0,0.08);
+            background: #fff8ee;
+            color: #5c3a1a;
+        }
+
+        .section-title {
+            position: relative;
+            padding-bottom: 10px;
+            margin-bottom: 1.25rem;
+            border-bottom: 1px solid rgba(0,0,0,0.08);
+        }
+
+        .section-title::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: -1px;
+            width: 72px;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-heat), var(--accent-steam));
+            border-radius: 2px;
+        }
 
         .bg-device {
             background-color: var(--device-bg);
@@ -157,6 +215,181 @@
 
         .badge-upper { background-color: #6610f2; } /* Microwave/Top */
         .badge-lower { background-color: var(--accent-heat); } /* Oven/Bottom */
+        .badge-gold { background-color: var(--accent-gold); color: #2b1b00; }
+
+        .card {
+            border: none;
+            border-radius: 18px;
+            box-shadow: 0 12px 22px rgba(12, 14, 18, 0.08);
+        }
+
+        .card-header {
+            border-bottom: 1px solid rgba(255,255,255,0.12);
+            letter-spacing: 0.02em;
+        }
+
+        .golden-header {
+            background: linear-gradient(90deg, #f7d36a 0%, #f2b546 100%);
+            color: #2b1b00;
+        }
+
+        .list-group-item {
+            padding-top: 0.9rem;
+            padding-bottom: 0.9rem;
+        }
+
+        .mode-list {
+            columns: 2;
+            column-gap: 1.5rem;
+        }
+
+        .mode-list li {
+            break-inside: avoid;
+            margin-bottom: 0.35rem;
+        }
+
+        .interface-panel {
+            background: linear-gradient(180deg, #101215 0%, #0a0b0d 100%);
+        }
+
+        .console-frame {
+            background: #0b0c0f;
+            border: 2px solid #2b2f36;
+            border-radius: 16px;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 140px 1fr 140px;
+            gap: 16px;
+            align-items: stretch;
+            min-height: 280px;
+            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
+        }
+
+        .console-side {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            color: #c8ccd3;
+            font-size: 0.9rem;
+        }
+
+        .soft-key {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 10px;
+            border-radius: 10px;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .soft-key .hint {
+            font-size: 0.7rem;
+            color: #98a1b2;
+        }
+
+        .console-screen {
+            position: relative;
+            background: #14171c;
+            border-radius: 14px;
+            padding: 18px 20px;
+            color: #e9edf2;
+            overflow: hidden;
+            border: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .screen-wave {
+            position: absolute;
+            inset: 0;
+            background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 45%), 
+                              linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
+            background-size: 240px 240px, 18px 18px;
+            opacity: 0.45;
+            pointer-events: none;
+        }
+
+        .screen-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: #9aa4b2;
+        }
+
+        .screen-title {
+            font-size: 1.6rem;
+            font-weight: 600;
+            margin-top: 6px;
+        }
+
+        .screen-sub {
+            font-size: 0.9rem;
+            color: #aab4c2;
+            margin-bottom: 14px;
+        }
+
+        .screen-timer {
+            font-size: 2.1rem;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+        }
+
+        .screen-actions {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            margin-top: 16px;
+            flex-wrap: wrap;
+        }
+
+        .screen-pill {
+            padding: 6px 10px;
+            border-radius: 999px;
+            background: rgba(255,255,255,0.08);
+            font-size: 0.85rem;
+        }
+
+        .screen-link {
+            padding: 6px 12px;
+            border-radius: 999px;
+            text-decoration: none;
+            border: 1px solid rgba(255,255,255,0.25);
+            color: #dbe3f0;
+            font-size: 0.85rem;
+        }
+
+        .screen-link.primary {
+            background: var(--ui-blue);
+            border-color: var(--ui-blue);
+            color: #fff;
+        }
+
+        .screen-jump {
+            margin-top: 14px;
+            font-size: 0.8rem;
+            color: #9aa4b2;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .screen-jump a {
+            color: #cfe0ff;
+            text-decoration: none;
+            border-bottom: 1px dotted rgba(207,224,255,0.4);
+        }
+
+        @media (max-width: 992px) {
+            .console-frame { grid-template-columns: 1fr; }
+            .console-side { flex-direction: row; flex-wrap: wrap; gap: 8px; }
+            .soft-key { flex: 1 1 140px; }
+        }
+
+        @media (max-width: 768px) {
+            .mode-list { columns: 1; }
+        }
 
         /* Print Optimization */
         @media print {
@@ -165,7 +398,9 @@
             .lcd-display { border: 2px solid black; color: black; background: white; }
             .touch-btn { border: 1px solid black; color: black; background: white; }
             .touch-btn.active-mode { background: #eee !important; border-color: black; }
-            .rack-guide::after { color: black; }
+            .rack-guide::after { color: black; background: none; }
+            .console-frame, .console-screen { background: white !important; color: black !important; }
+            .screen-link, .screen-pill { border-color: black !important; color: black !important; }
             .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
             a[href]:after { content: none !important; }
         }
@@ -174,7 +409,7 @@
 <body>
 
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top no-print">
+    <nav class="navbar navbar-expand-lg navbar-dark nav-blade sticky-top no-print">
         <div class="container-fluid">
             <a class="navbar-brand" href="#"><i class="bi bi-oven"></i> Samsung NQ70CB700D</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -198,13 +433,13 @@
     <div class="container py-4">
         
         <!-- Header -->
-        <header class="text-center mb-5 border-bottom pb-4">
+        <header class="text-center mb-5 page-hero">
             <h1 class="display-5 fw-bold"><i class="bi bi-exclude"></i> Samsung Bespoke Combo Oven</h1>
             <p class="lead text-muted">Manual-based master guide for Model NQ70CB700D12AA (NQ7000C series)</p>
-            <div class="d-flex justify-content-center gap-3 no-print">
-                <span class="badge bg-secondary"><i class="bi bi-wifi"></i> SmartThings</span>
-                <span class="badge bg-secondary"><i class="bi bi-wind"></i> Air Fry</span>
-                <span class="badge bg-secondary"><i class="bi bi-droplet-half"></i> Steam Cook</span>
+            <div class="d-flex justify-content-center gap-3 no-print hero-badges">
+                <span class="badge badge-gold"><i class="bi bi-wifi"></i> SmartThings</span>
+                <span class="badge badge-gold"><i class="bi bi-wind"></i> Air Fry</span>
+                <span class="badge badge-gold"><i class="bi bi-droplet-half"></i> Steam Cook</span>
             </div>
         </header>
 
@@ -216,45 +451,49 @@
                         <div class="card-header bg-device text-white">
                             <h5 class="mb-0"><i class="bi bi-map"></i> The Interface (Touch Screen)</h5>
                         </div>
-                        <div class="card-body bg-dark d-flex align-items-center justify-content-center p-4">
+                        <div class="card-body interface-panel d-flex align-items-center justify-content-center p-4">
                             <!-- Simulated Touch Screen -->
-                            <div class="lcd-display w-100">
-                                <div class="d-flex justify-content-between mb-3 text-secondary text-uppercase small">
-                                    <span><i class="bi bi-clock"></i> 4:35 PM</span>
-                                    <span><i class="bi bi-wifi"></i> Connected</span>
-                                </div>
-                                
-                                <!-- Top Half: Microwave -->
-                                <div class="border-bottom border-secondary pb-3 mb-3">
-                                    <h6 class="text-uppercase text-muted small">Upper Oven (Microwave+)</h6>
-                                    <div class="d-flex gap-2 flex-wrap">
-                                        <span class="touch-btn"><i class="bi bi-mic"></i> Microwave</span>
-                                        <span class="touch-btn"><i class="bi bi-lightning-charge"></i> Speed Broil</span>
-                                        <span class="touch-btn"><i class="bi bi-egg-fried"></i> Air Fry</span>
+                            <div class="console-frame w-100">
+                                <div class="console-side">
+                                    <div class="soft-key">
+                                        <span>Microwave</span>
+                                        <span class="hint">Upper</span>
                                     </div>
+                                    <div class="soft-key">Pause/Off</div>
+                                    <div class="soft-key">Light</div>
+                                    <div class="soft-key">Settings <span class="hint">(3 sec)</span></div>
                                 </div>
 
-                                <!-- Bottom Half: Oven -->
-                                <div>
-                                    <h6 class="text-uppercase text-muted small">Lower Oven (Convection)</h6>
-                                    <div class="d-flex gap-2 flex-wrap">
-                                        <span class="touch-btn active-mode"><i class="bi bi-fan"></i> Conv. Bake</span>
-                                        <span class="touch-btn"><i class="bi bi-moisture"></i> Steam Roast</span>
-                                        <span class="touch-btn"><i class="bi bi-grid-1x2"></i> Flex Duo</span>
+                                <div class="console-screen">
+                                    <div class="screen-wave"></div>
+                                    <div class="screen-top">
+                                        <span>Upper</span>
+                                        <span><i class="bi bi-wifi"></i> 7:36 AM</span>
                                     </div>
-                                    <div class="mt-3 text-center">
-                                        <h2 class="fw-light display-4 mb-0">325°F</h2>
-                                        <span class="text-info small">Preheating...</span>
+                                    <div class="screen-title">Microwave</div>
+                                    <div class="screen-sub">Microwave Heating</div>
+                                    <div class="screen-timer">0 hr 00 min 00 sec</div>
+                                    <div class="screen-actions">
+                                        <span class="screen-pill">Power 100%</span>
+                                        <a class="screen-link" href="#operations">+30 sec</a>
+                                        <a class="screen-link primary" href="#operations">Start</a>
+                                    </div>
+                                    <div class="screen-jump">
+                                        <span>Jump:</span>
+                                        <a href="#operations">Operations</a>
+                                        <a href="#modes">Modes</a>
+                                        <a href="#cleaning">Cleaning</a>
+                                        <a href="#settings">Settings</a>
                                     </div>
                                 </div>
 
-                                <!-- Side Actions -->
-                                <div class="position-absolute top-0 end-0 p-3">
-                                    <div class="d-grid gap-2">
-                                        <span class="touch-btn border-0" data-bs-toggle="tooltip" title="Opens the water drawer on the top right"><i class="bi bi-droplet"></i> Reservoir</span>
-                                        <span class="touch-btn border-0" data-bs-toggle="tooltip" title="Turn on/off internal lights"><i class="bi bi-lightbulb"></i> Light</span>
-                                        <span class="touch-btn border-0" data-bs-toggle="tooltip" title="System Settings"><i class="bi bi-gear"></i></span>
+                                <div class="console-side">
+                                    <div class="soft-key">
+                                        <span>Lower Oven</span>
+                                        <span class="hint">Lower</span>
                                     </div>
+                                    <div class="soft-key">Open/Close Reservoir</div>
+                                    <div class="soft-key">Smart Control</div>
                                 </div>
                             </div>
                         </div>
@@ -263,7 +502,7 @@
 
                 <div class="col-md-5">
                     <div class="card shadow-sm h-100">
-                        <div class="card-header bg-warning text-dark">
+                        <div class="card-header golden-header">
                             <h5 class="mb-0"><i class="bi bi-stars"></i> Golden Rules</h5>
                         </div>
                         <ul class="list-group list-group-flush">
@@ -307,7 +546,7 @@
 
         <!-- Visual Operations Guide -->
         <section id="operations" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Operations Guide</h3>
+            <h3 class="section-title">Operations Guide</h3>
             
             <div class="accordion" id="opsAccordion">
                 
@@ -388,7 +627,7 @@
                     <div id="collapseSteam" class="accordion-collapse collapse" data-bs-parent="#opsAccordion">
                         <div class="accordion-body">
                             <div class="alert alert-warning py-2">
-                                <i class="bi bi-exclamation-triangle"></i> <strong>Must fill water reservoir first.</strong> Tap <span class="touch-btn text-dark border-secondary">Open/Close Reservoir</span> to eject the drawer.
+                                <i class="bi bi-exclamation-triangle"></i> <strong>Fill water reservoir first.</strong> Add 22 oz (650 ml) of water. Tap <span class="touch-btn text-dark border-secondary">Open/Close Reservoir</span> to eject the drawer.
                             </div>
                             <div class="row">
                                 <div class="col-md-6">
@@ -470,7 +709,7 @@
 
         <!-- Modes & Ranges -->
         <section id="modes" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Modes & Temperature Ranges</h3>
+            <h3 class="section-title">Modes & Temperature Ranges</h3>
             <div class="row g-4">
                 <div class="col-lg-6">
                     <div class="card h-100">
@@ -597,42 +836,75 @@
 
         <!-- Accessories -->
         <section id="accessories" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Accessories & What They Are For</h3>
-            <div class="row g-4">
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header bg-dark text-white">Lower Oven Accessories</div>
-                        <div class="card-body">
-                            <ul class="list-group list-group-flush small">
-                                <li class="list-group-item"><strong>Wire racks:</strong> Baking and broiling.</li>
-                                <li class="list-group-item"><strong>Gliding rack:</strong> Heavy dishes, safe pull-out.</li>
-                                <li class="list-group-item"><strong>Divider:</strong> Creates Flex Duo (insert at rack position 4).</li>
-                                <li class="list-group-item"><strong>Temp probe:</strong> Tracks internal meat temperature.</li>
-                                <li class="list-group-item"><strong>Air Fry tray:</strong> Required for Air Fry mode.</li>
-                                <li class="list-group-item"><strong>Steam rack:</strong> Use for Steam Bake/Roast/Cook.</li>
-                            </ul>
-                            <div class="alert alert-secondary mt-3 small">
-                                <i class="bi bi-info-circle"></i> Accessories marked with * in the manual can be purchased from Samsung support.
-                            </div>
-                        </div>
+            <h3 class="section-title">Accessories & When to Use Them</h3>
+            <div class="card">
+                <div class="card-header bg-dark text-white">Quick Reference</div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-sm table-bordered align-middle">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Accessory</th>
+                                    <th>Use For</th>
+                                    <th>Notes</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><strong>Wire racks (lower)</strong></td>
+                                    <td>Bake, Broil</td>
+                                    <td>Standard lower-oven racks.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Gliding rack</strong></td>
+                                    <td>Heavy dishes</td>
+                                    <td>Pull from the handle only.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Divider</strong></td>
+                                    <td>Flex Duo split</td>
+                                    <td>Insert at rack position 4.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Temp probe</strong></td>
+                                    <td>Meat internal temp</td>
+                                    <td>Use with probe-capable modes.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Air Fry tray</strong></td>
+                                    <td>Air Fry</td>
+                                    <td>Place on rack 3; use drip pan below.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Steam rack</strong></td>
+                                    <td>Steam Bake/Roast/Cook</td>
+                                    <td>Required for steam modes.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Steam container</strong></td>
+                                    <td>Steam Cook (full steam)</td>
+                                    <td>Glass lid is Steam Cook only; insert fully so it touches the rear wall.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Roller ring + turntable</strong></td>
+                                    <td>Microwave base</td>
+                                    <td>Do not use turntable without ring.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>High/Low racks (upper)</strong></td>
+                                    <td>Broil / Convection</td>
+                                    <td>Not for standard Microwave mode.</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Hot plate</strong></td>
+                                    <td>Browning/crisping</td>
+                                    <td>For pizza/pastries.</td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header bg-primary text-white">Upper Oven (Microwave) Accessories</div>
-                        <div class="card-body">
-                            <ul class="list-group list-group-flush small">
-                                <li class="list-group-item"><strong>Roller ring + Turntable:</strong> Base for microwave cooking.</li>
-                                <li class="list-group-item"><strong>High/Low racks:</strong> Use with Broil or Convection.</li>
-                                <li class="list-group-item"><strong>Hot plate:</strong> Browning or crisping pastries/pizza.</li>
-                            </ul>
-                            <div class="alert alert-warning mt-3 small">
-                                <i class="bi bi-exclamation-triangle"></i> <strong>No racks in Microwave mode</strong> unless a recipe specifically calls for it.
-                            </div>
-                            <div class="alert alert-info mt-3 small">
-                                <i class="bi bi-droplet"></i> <strong>Steam Container:</strong> Glass lid + metal pan + steam tray + nozzle. Steam Cook only; insert fully on the Steam rack so it touches the rear wall.
-                            </div>
-                        </div>
+                    <div class="alert alert-warning mt-3 small mb-0">
+                        <i class="bi bi-exclamation-triangle"></i> <strong>Microwave rule:</strong> No metal racks in Microwave mode unless a recipe specifically calls for them.
                     </div>
                 </div>
             </div>
@@ -640,7 +912,7 @@
 
         <!-- Reference Tables -->
         <section id="racks" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Racks & Twin Mode</h3>
+            <h3 class="section-title">Racks & Twin Mode</h3>
             
             <div class="row g-4">
                 <div class="col-md-6">
@@ -665,7 +937,7 @@
                             </div>
                             <div class="mt-3 small">
                                 <div class="fw-bold">Mode-specific placement</div>
-                                <ul class="mb-0">
+                                <ul class="mb-0 mode-list">
                                     <li>Air Fry tray: rack 3</li>
                                     <li>Air Sous Vide: rack 3</li>
                                     <li>Proof: rack 2 (cool oven)</li>
@@ -713,15 +985,20 @@
 
         <!-- Cleaning & Descaling -->
         <section id="cleaning" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Cleaning & Descaling</h3>
+            <h3 class="section-title">Cleaning & Descaling</h3>
             <div class="row g-4">
                 <div class="col-lg-6">
                     <div class="card h-100">
                         <div class="card-header bg-dark text-white">Self Clean (Heavy Duty)</div>
                         <div class="card-body small">
                             <p>High heat burns residue to ash. Door locks during cycle.</p>
-                            <ul class="mb-2">
+                            <div class="fw-bold mb-2">How to start</div>
+                            <ol class="mb-3">
                                 <li>Remove all racks and accessories.</li>
+                                <li>Swipe to <strong>Clean</strong> &rarr; tap <strong>Self Clean</strong>.</li>
+                                <li>Select the clean time, then tap <strong>Start</strong>.</li>
+                            </ol>
+                            <ul class="mb-2">
                                 <li>Keep kids and pets away; move birds to another room.</li>
                                 <li>Do not line oven with foil.</li>
                             </ul>
@@ -783,7 +1060,7 @@
 
         <!-- Settings & Smart Control -->
         <section id="settings" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Settings, Smart Control, Locks</h3>
+            <h3 class="section-title">Settings, Smart Control, Locks</h3>
             <div class="row g-4">
                 <div class="col-lg-6">
                     <div class="card h-100">
@@ -815,12 +1092,27 @@
                         </div>
                     </div>
                 </div>
+                <div class="col-lg-6">
+                    <div class="card h-100">
+                        <div class="card-header bg-secondary text-white">Sabbath Mode</div>
+                        <div class="card-body small">
+                            <ul class="mb-2">
+                                <li>Bake only; oven stays on until Sabbath mode is canceled.</li>
+                                <li>Turn the oven light on <strong>before</strong> enabling if needed.</li>
+                                <li>There is a 15-second delay when adjusting temperature.</li>
+                            </ul>
+                            <div class="alert alert-secondary mb-0 small">
+                                <i class="bi bi-info-circle"></i> Exit by holding <strong>Sabbath Mode Off</strong> for 3 seconds.
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </section>
 
         <!-- Troubleshooting & Error Codes -->
         <section id="troubleshooting" class="mb-5">
-            <h3 class="border-bottom pb-2 mb-4">Troubleshooting</h3>
+            <h3 class="section-title">Troubleshooting</h3>
             
             <div class="table-responsive">
                 <table class="table table-striped table-hover align-middle">
@@ -834,33 +1126,78 @@
                     <tbody>
                         <tr>
                             <td><span class="badge bg-danger font-monospace">C-d0</span></td>
-                            <td>Control Key Stuck</td>
-                            <td>Clean the touch panel. Dry any moisture. Power cycle the oven (flip breaker) if stuck for >1 min.</td>
+                            <td>Control key stuck (1 min)</td>
+                            <td>Clean and dry the touch panel. Power off and try again. Service if it persists.</td>
                         </tr>
                         <tr>
-                            <td><span class="badge bg-danger font-monospace">C-d1</span></td>
-                            <td>Door Lock Fail</td>
-                            <td>Door lock mispositioned. Turn off oven, try to open/close door firmly, restart.</td>
+                            <td><span class="badge bg-danger font-monospace">C-d5</span></td>
+                            <td>Door lock mispositioned</td>
+                            <td>Press Off, restart. Power cycle for 30 seconds if needed; service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">-dC-</span></td>
+                            <td>Divider moved while running</td>
+                            <td>Reseat divider (rack position 4) and restart. Power cycle if code returns.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-23</span></td>
+                            <td>Temp probe sensor short</td>
+                            <td>Press Off and restart. Power cycle for 30 seconds; service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-30</span></td>
+                            <td>PCB sensor open/short</td>
+                            <td>Press Off and restart. Power cycle for 30 seconds; service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-31</span></td>
+                            <td>PCB temperature too high</td>
+                            <td>Call service.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-70</span></td>
+                            <td>Steam sensor open/short</td>
+                            <td>Press Off and restart. Power cycle for 30 seconds; service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-72</span></td>
+                            <td>Drain system issue</td>
+                            <td>Power cycle. Call service if the code returns.</td>
                         </tr>
                         <tr>
                             <td><span class="badge bg-danger font-monospace">C-A2</span></td>
-                            <td>Cooling Motor</td>
-                            <td>Cooling motor operating abnormally. Call service.</td>
+                            <td>Cooling motor abnormal</td>
+                            <td>Call service.</td>
                         </tr>
                         <tr>
-                            <td><span class="badge bg-danger font-monospace">-dC-</span></td>
-                            <td>Divider Error</td>
-                            <td>The divider is inserted/removed while oven is running. Turn off oven, re-seat divider, restart.</td>
+                            <td><span class="badge bg-danger font-monospace">C-F0 / C-F2</span></td>
+                            <td>Communication error</td>
+                            <td>Power cycle for 30 seconds. Call service if it persists.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-10</span></td>
+                            <td>Microwave cooking sensor</td>
+                            <td>Power cycle and retry. Service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-20</span></td>
+                            <td>Oven sensor open/short</td>
+                            <td>Power cycle and retry. Service if unresolved.</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge bg-danger font-monospace">C-21</span></td>
+                            <td>Internal temperature high</td>
+                            <td>Turn off and allow to cool; power cycle if needed.</td>
                         </tr>
                         <tr>
                             <td><strong>White Smoke</strong></td>
-                            <td>Residue / Air Fry</td>
-                            <td>Normal for Air Fry with high-fat foods. Ensure a drip pan is used below the Air Fry tray.</td>
+                            <td>Air Fry fats/drippings</td>
+                            <td>Use a drip pan under the Air Fry tray to reduce smoke.</td>
                         </tr>
                         <tr>
                             <td><strong>Water Dripping</strong></td>
-                            <td>Steam Mode</td>
-                            <td>Normal during Steam Cook. Wipe dry with cloth after oven cools.</td>
+                            <td>Steam mode condensation</td>
+                            <td>Normal. Wipe dry once the oven cools.</td>
                         </tr>
                     </tbody>
                 </table>
@@ -868,8 +1205,8 @@
         </section>
         
         <footer class="text-center text-muted py-4 border-top mt-5 no-print">
-            <p class="small">Content distilled from Samsung NQ70CB700D User Manual. This is an unofficial guide.</p>
-            <button class="btn btn-outline-dark btn-sm" onclick="window.print()"><i class="bi bi-printer"></i> Print Emergency Card</button>
+            <p class="small">Content distilled from the Samsung NQ7000C series user manual (NQ70CB700D12AA). This is an unofficial guide.</p>
+            <button class="btn btn-outline-dark btn-sm" onclick="window.print()"><i class="bi bi-printer"></i> Print Quick Reference</button>
         </footer>
 
     </div>