From a8bd951eca2062dfaf2e998400b8c2bb8db9ae2f Mon Sep 17 00:00:00 2001
From: Sridhar Bala <sridharkalaibala@gmail.com>
Date: Fri, 16 Oct 2026 17:41:47 +0530
Subject: [PATCH] Align setup screens with the approved compact design

---
 src/install-wizard.html | 31 +++++++++++++-------------
 src/simple-setup.css    | 49 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/src/install-wizard.html b/src/install-wizard.html
index b666b2b03..bfa989b22 100644
--- a/src/install-wizard.html
+++ b/src/install-wizard.html
@@ -730,6 +730,7 @@
     <div class="wizard-container">
         <div class="wizard-header">
             <img src="../builds/512-posnic.png" alt="Posnic" class="wizard-logo">
+            <span class="setup-brand">Posnic</span>
             <p>Point of Sale that never goes down</p>
         </div>
 
@@ -804,6 +805,7 @@ <h2>Let’s set up your shop</h2>
                   <button type="button" class="simple-option" id="chooseLocalBtn"><strong>Set up offline</strong><small>Community edition. No cloud account needed.</small></button>
                 </div>
                 <div hidden><a id="signupLink"></a><a id="choosePairLink"></a></div>
+                <div class="setup-footer" aria-hidden="true"></div>
             </div>
 
             <div class="form-section" id="stepCloud" style="display:none;">
@@ -836,28 +838,27 @@ <h3 style="margin:0 0 8px;">Choose how to continue</h3>
 
             <!-- Quick local setup: one form, everything else defaulted -->
             <div class="form-section" id="stepQuick" style="display: none;">
-                <h2>🏪 Set Up Your Shop</h2>
+                <h2>Create your offline shop</h2>
+                <p class="simple-intro">Your account and business data stay on this computer.</p>
                 <div class="form-group">
-                    <label>Business Name <span class="required">*</span></label>
+                    <label for="qBusinessName">Shop name</label>
                     <input type="text" id="qBusinessName" autocomplete="organization" placeholder="e.g. Sri Ganesh Stores">
                 </div>
-                <div class="form-group">
-                    <label>Business Address</label>
-                    <input type="text" id="qAddress" autocomplete="street-address" placeholder="Shop no, street, city (optional)">
-                </div>
                 <div class="form-row">
                     <div class="form-group">
-                        <label>Your Email (login) <span class="required">*</span></label>
+                        <label for="qEmail">Login email</label>
                         <input type="email" id="qEmail" autocomplete="username">
                     </div>
                     <div class="form-group">
-                        <label>Password <span class="required">*</span></label>
+                        <label for="qPassword">Password</label>
                         <input type="password" id="qPassword" autocomplete="new-password" minlength="8" placeholder="Minimum 8 characters">
                     </div>
                 </div>
+                <details id="offlineDetails"><summary>Optional shop details</summary>
+                    <div class="form-group"><label for="qAddress">Business address</label><input type="text" id="qAddress" autocomplete="street-address" placeholder="Shop no, street, city"></div>
                 <div class="form-row">
                     <div class="form-group">
-                        <label>Business Type</label>
+                        <label for="qBusinessType">Business type</label>
                         <select id="qBusinessType">
                             <option value="supermarket" selected>🛒 Supermarket / Kirana Store</option>
                             <option value="textile">🧵 Textile / Garment Shop</option>
@@ -868,22 +869,20 @@ <h2>🏪 Set Up Your Shop</h2>
                             <option value="icecream">🍦 Ice Cream Parlour</option>
                         </select>
                     </div>
-                    <div class="form-group" style="display:flex;align-items:end;">
+                    <div class="form-group" hidden>
                         <label style="display:flex;align-items:center;cursor:pointer;margin:0 0 10px 0;">
                             <input type="checkbox" id="qDemoData" style="width:18px;height:18px;margin-right:8px;cursor:pointer;">
                             Load sample data
                         </label>
                     </div>
                 </div>
+                </details>
                 <div id="qError" style="display:none;color:#dc3545;margin:8px 0;"></div>
+                <p class="setup-note">Starts empty, without demo data. You can connect to cloud later in Settings.</p>
                 <div class="btn-container">
-                    <button type="button" class="btn btn-secondary" id="qBackBtn">← Back</button>
-                    <button type="button" class="btn btn-primary" id="qCreateBtn">Create My Store →</button>
+                    <button type="button" class="btn btn-secondary" id="qBackBtn">Back</button>
+                    <button type="button" class="btn btn-primary" id="qCreateBtn">Create shop</button>
                 </div>
-                <p style="font-size:12px;color:#94a3b8;margin-top:14px;">
-                    Database security and daily backups are configured automatically.
-                    You can change any of this later in Settings.
-                </p>
             </div>
 
             <!-- Setup progress: staged, Windows-installer style -->
diff --git a/src/simple-setup.css b/src/simple-setup.css
index c7bf90957..f2eadfa98 100644
--- a/src/simple-setup.css
+++ b/src/simple-setup.css
@@ -26,10 +26,57 @@ body.desktop-window .wizard-container .btn-primary { background: #086fa7 !import
 #stepCloud summary { color: #176da5; cursor: pointer; }
 #stepCloud details .form-group { margin-top: 16px; }
 [data-simple-hidden] { display: none !important; }
-@media (prefers-color-scheme: dark) {
+:root[data-window-theme="dark"] {
   .simple-intro, .simple-option small, .simple-check small { color: #bac6d2; }
   .simple-option { border-color: #424b56; }
   .simple-shop, .simple-note { background: #2b323c; color: #edf2f7; }
   #stepCloud summary, .simple-link { color: #91cff8; }
 }
 @media (max-width: 480px) { .wizard-body { padding: 20px; } }
+
+/* Match the approved card and footer across every step, including transitions. */
+body.desktop-window[data-desktop-window="setup"] { display: flex; flex-direction: column; align-items: center; padding: 28px 20px; font: 14px/1.5 'Segoe UI', sans-serif; }
+.wizard-container { margin: auto; flex-shrink: 0; }
+.wizard-header { padding: 20px 28px; }
+.wizard-header::after { color: var(--w-muted); }
+.wizard-header .wizard-logo { display: none; }
+.setup-brand { font-size: 23px; font-weight: 600; letter-spacing: .5px; color: #146da8; }
+.wizard-body { padding: 30px 28px 0; }
+.wizard-body .form-section { margin: 0; min-height: 0; }
+.wizard-body .form-section h2 { font-size: 25px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; padding: 0; border: 0; color: var(--w-text); }
+.simple-intro { color: var(--w-muted); margin-bottom: 22px; }
+.desktop-window[data-desktop-window="setup"] .wizard-container button { min-height: 42px; font-size: 14px !important; font-weight: 400 !important; }
+.desktop-window .wizard-container .simple-option { position: relative; padding: 18px 42px 18px 18px; }
+.simple-option::after { content: '\2192'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
+.simple-option strong { font-weight: 600; }
+.simple-option small, .simple-check small { font-size: 12px; color: var(--w-muted); }
+.desktop-window .wizard-container .simple-option:first-child { border-color: #146da8 !important; }
+.simple-shop, .simple-note { background: var(--w-raised); color: var(--w-text); }
+.simple-shop small, #existingSyncNote, .setup-note { color: var(--w-muted); font-size: 13px; }
+.desktop-window[data-desktop-window="setup"] .wizard-container .simple-link { background: transparent !important; border: 0 !important; color: #146da8 !important; padding: 7px 0; min-height: 34px; }
+.wizard-container details { margin: 18px 0; }
+.wizard-container summary { color: #146da8; cursor: pointer; }
+.wizard-container details .form-group { margin-top: 16px; }
+.wizard-container .field-hint, #cloudSignupLink { font-size: 12px; color: var(--w-muted); }
+.wizard-container .form-group label { font-size: 14px; font-weight: 400; }
+.wizard-container input:not([type="checkbox"]), .wizard-container select { min-height: 44px; }
+.wizard-container .form-section > .btn-container, .setup-footer { margin: 28px -28px 0; padding: 17px 28px; border-top: 1px solid var(--w-border); background: var(--w-raised); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
+.wizard-container .btn-container .btn { flex: 0 1 auto; letter-spacing: 0; }
+.wizard-container #browserWait .btn-container { margin-top: 12px; flex-wrap: wrap; }
+.wizard-container #stepQuick > .form-row { grid-template-columns: 1fr; gap: 0; }
+.setup-note { margin: 16px 0 0; }
+#stepProgress { padding-bottom: 28px; min-height: 300px; }
+#stepRecovery #recoveryCodes { color: var(--w-text); background: var(--w-raised) !important; }
+#stepRecovery > p, #qProgSub, #qProgPct { color: var(--w-muted) !important; }
+#qProgText { color: var(--w-text) !important; }
+#simpleSetupError:empty { display: none; }
+:root[data-window-theme="dark"] .setup-brand,
+:root[data-window-theme="dark"] .wizard-container summary,
+:root[data-window-theme="dark"] .wizard-container .simple-link { color: #91cff8 !important; }
+@media (max-width: 480px) {
+  body.desktop-window[data-desktop-window="setup"] { padding: 16px 10px; }
+  .wizard-header { padding: 18px; }
+  .wizard-body { padding: 24px 18px 0; }
+  .wizard-body .form-section h2 { font-size: 22px; }
+  .wizard-container .form-section > .btn-container, .setup-footer { margin-left: -18px; margin-right: -18px; padding: 15px 18px; }
+}