From 4be12dc9d442954546aa905d2521089e56a70181 Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Thu, 11 Jun 2026 13:34:55 +0530
Subject: [PATCH] redesign admin panel with full light theme (Stripe/Linear
 aesthetic)

- Login: vibrant blue gradient left panel + pure white right form panel
- Dashboard: white topbar with blue accent, white cards, light gray page bg
- Status tags: light-coloured pill badges (green/red/blue) with dot indicators
- Remove all dark glassmorphism and near-black surfaces
- Sync count badge across topbar and table header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 routes/adminPanel.js | 540 +++++++++++++++++++++++--------------------
 1 file changed, 294 insertions(+), 246 deletions(-)

diff --git a/routes/adminPanel.js b/routes/adminPanel.js
index 6fa017e..1bcf9eb 100644
--- a/routes/adminPanel.js
+++ b/routes/adminPanel.js
@@ -96,286 +96,317 @@ function adminHtml() {
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
   *{box-sizing:border-box;margin:0;padding:0}
-  body{font-family:'Inter',system-ui,sans-serif;background:#020617;min-height:100vh;color:#f1f5f9;overflow-x:hidden}
+  body{font-family:'Inter',system-ui,sans-serif;background:#f1f5f9;min-height:100vh;color:#0f172a;overflow-x:hidden}
 
-  /* ═══════════════════════════════════════════
-     LOGIN SCREEN
-  ═══════════════════════════════════════════ */
-  #login-screen{
-    display:flex;align-items:stretch;min-height:100vh;
-    background:#020617;
-  }
+  /* ═══════════════════════════ LOGIN ═══════════════════════════ */
+  #login-screen{display:flex;align-items:stretch;min-height:100vh;}
 
-  /* animated background blobs */
-  .login-bg{
-    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
-  }
-  .blob{
-    position:absolute;border-radius:50%;filter:blur(80px);opacity:0.18;
-    animation:blobFloat 12s ease-in-out infinite;
-  }
-  .blob1{width:600px;height:600px;background:radial-gradient(circle,#3b82f6,#1e3a8a);top:-200px;left:-150px;animation-delay:0s;}
-  .blob2{width:500px;height:500px;background:radial-gradient(circle,#8b5cf6,#1e1b4b);bottom:-180px;right:-100px;animation-delay:-4s;}
-  .blob3{width:350px;height:350px;background:radial-gradient(circle,#06b6d4,#0e7490);top:40%;left:55%;animation-delay:-7s;}
-  @keyframes blobFloat{
-    0%,100%{transform:translateY(0) scale(1);}
-    33%{transform:translateY(-30px) scale(1.05);}
-    66%{transform:translateY(20px) scale(0.97);}
-  }
-
-  /* grid dot overlay */
-  .login-bg::after{
-    content:'';position:absolute;inset:0;
-    background-image:radial-gradient(rgba(255,255,255,0.04) 1px,transparent 1px);
-    background-size:32px 32px;
-  }
-
-  /* left branding panel */
+  /* Left — vibrant blue panel */
   .login-left{
-    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
-    padding:60px 48px;position:relative;z-index:1;
+    flex:1;display:flex;flex-direction:column;justify-content:center;
+    padding:64px 56px;
+    background:linear-gradient(145deg,#1e40af 0%,#2563eb 45%,#4f46e5 100%);
+    position:relative;overflow:hidden;
   }
-  @media(max-width:800px){.login-left{display:none}}
-
-  .brand-icon{
-    width:88px;height:88px;
-    background:linear-gradient(135deg,#1e40af,#3b82f6,#06b6d4);
-    border-radius:24px;display:flex;align-items:center;justify-content:center;
-    font-size:40px;margin-bottom:28px;
-    box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);
-    animation:iconPulse 3s ease-in-out infinite;
+  @media(max-width:860px){.login-left{display:none}}
+  .login-left::before{
+    content:'';position:absolute;width:500px;height:500px;border-radius:50%;
+    background:rgba(255,255,255,0.06);top:-160px;right:-120px;
   }
-  @keyframes iconPulse{
-    0%,100%{box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);}
-    50%{box-shadow:0 0 0 1px rgba(59,130,246,0.5),0 0 60px rgba(59,130,246,0.4);}
+  .login-left::after{
+    content:'';position:absolute;width:320px;height:320px;border-radius:50%;
+    background:rgba(255,255,255,0.05);bottom:-80px;left:-60px;
   }
-
-  .brand-name{
-    font-size:32px;font-weight:900;letter-spacing:-1px;
-    background:linear-gradient(135deg,#f8fafc,#93c5fd);
-    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
-    background-clip:text;margin-bottom:10px;text-align:center;
+  .ll-logo{
+    display:flex;align-items:center;gap:14px;margin-bottom:52px;position:relative;z-index:1;
   }
-  .brand-tagline{
-    font-size:14px;color:#475569;text-align:center;max-width:300px;line-height:1.7;
+  .ll-icon{
+    width:52px;height:52px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);
+    border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;
   }
-
-  .feature-list{
-    margin-top:44px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px;
-  }
-  .feature-item{
+  .ll-brand{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.3px;}
+  .ll-brand span{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,0.6);letter-spacing:0;margin-top:1px;}
+  .ll-heading{font-size:34px;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-1px;margin-bottom:16px;position:relative;z-index:1;}
+  .ll-heading em{font-style:normal;color:#bfdbfe;}
+  .ll-desc{font-size:15px;color:rgba(255,255,255,0.72);line-height:1.7;max-width:340px;margin-bottom:48px;position:relative;z-index:1;}
+  .ll-features{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;}
+  .ll-feat{
     display:flex;align-items:center;gap:12px;
-    background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
+    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
     border-radius:10px;padding:12px 16px;
   }
-  .feature-dot{
-    width:8px;height:8px;border-radius:50%;background:#3b82f6;flex-shrink:0;
-    box-shadow:0 0 8px #3b82f6;
-  }
-  .feature-item span{font-size:13px;color:#94a3b8;font-weight:500;}
-
-  /* right login panel */
-  .login-right{
-    width:480px;flex-shrink:0;
+  .ll-feat-check{
+    width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,0.15);
     display:flex;align-items:center;justify-content:center;
-    padding:40px 32px;position:relative;z-index:1;
+    font-size:12px;color:#fff;flex-shrink:0;font-weight:700;
   }
-  @media(max-width:800px){.login-right{width:100%;}}
+  .ll-feat span{font-size:13px;color:rgba(255,255,255,0.85);font-weight:500;}
 
-  .login-card{
-    width:100%;max-width:400px;
-    background:rgba(15,23,42,0.7);
-    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
-    border:1px solid rgba(255,255,255,0.08);
-    border-radius:24px;
-    padding:44px 40px;
-    box-shadow:0 32px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);
-    animation:cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
+  /* Right — white form panel */
+  .login-right{
+    width:500px;flex-shrink:0;background:#fff;
+    display:flex;align-items:center;justify-content:center;
+    padding:48px 40px;
   }
-  @keyframes cardIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
+  @media(max-width:860px){.login-right{width:100%;}}
+  .login-card{width:100%;max-width:380px;}
+  @keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
+  .login-card{animation:cardIn 0.4s ease both;}
 
-  .card-header{text-align:center;margin-bottom:36px;}
-  .card-mini-logo{
-    display:inline-flex;align-items:center;gap:8px;
-    background:linear-gradient(135deg,rgba(30,64,175,0.6),rgba(37,99,235,0.6));
-    border:1px solid rgba(59,130,246,0.3);
-    border-radius:10px;padding:6px 14px;margin-bottom:20px;
+  .lc-top{margin-bottom:36px;}
+  .lc-eyebrow{
+    display:inline-flex;align-items:center;gap:6px;
+    background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
+    padding:4px 12px;font-size:11px;font-weight:700;color:#1d4ed8;
+    letter-spacing:0.06em;text-transform:uppercase;margin-bottom:18px;
   }
-  .card-mini-logo span{font-size:12px;font-weight:800;color:#93c5fd;letter-spacing:0.08em;text-transform:uppercase;}
-  .card-title{font-size:22px;font-weight:800;color:#f8fafc;letter-spacing:-0.5px;margin-bottom:6px;}
-  .card-sub{font-size:13px;color:#475569;}
+  .lc-eyebrow .status-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;}
+  .lc-title{font-size:26px;font-weight:900;color:#0f172a;letter-spacing:-0.8px;margin-bottom:6px;}
+  .lc-sub{font-size:14px;color:#64748b;line-height:1.5;}
 
-  /* form fields */
-  .inp-wrap{position:relative;margin-bottom:18px;}
-  .inp-wrap label{
-    display:block;font-size:11px;font-weight:700;
-    color:#64748b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
+  /* fields */
+  .lc-field{margin-bottom:20px;}
+  .lc-field label{
+    display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:7px;
   }
-  .inp-inner{position:relative;}
-  .inp-icon{
-    position:absolute;left:14px;top:50%;transform:translateY(-50%);
-    font-size:15px;color:#475569;pointer-events:none;line-height:1;
+  .lc-inp-wrap{position:relative;}
+  .lc-inp-icon{
+    position:absolute;left:13px;top:50%;transform:translateY(-50%);
+    width:18px;height:18px;display:flex;align-items:center;justify-content:center;
+    color:#9ca3af;font-size:14px;pointer-events:none;
   }
-  .inp-wrap input{
-    width:100%;
-    background:rgba(2,6,23,0.6);
-    border:1px solid rgba(255,255,255,0.08);
-    border-radius:10px;
-    padding:12px 44px 12px 42px;
-    color:#f1f5f9;font-size:14px;font-family:inherit;
-    outline:none;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
+  .lc-field input{
+    width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;
+    padding:12px 40px 12px 40px;color:#0f172a;font-size:14px;font-family:inherit;
+    outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
   }
-  .inp-wrap input::placeholder{color:#334155;}
-  .inp-wrap input:focus{
-    border-color:rgba(59,130,246,0.6);
-    background:rgba(2,6,23,0.8);
-    box-shadow:0 0 0 3px rgba(59,130,246,0.12);
+  .lc-field input::placeholder{color:#b0b8c4;}
+  .lc-field input:focus{
+    border-color:#2563eb;background:#fff;
+    box-shadow:0 0 0 3px rgba(37,99,235,0.1);
   }
-  .eye-btn{
-    position:absolute;right:13px;top:50%;transform:translateY(-50%);
-    background:none;border:none;color:#475569;cursor:pointer;
-    font-size:15px;padding:2px;line-height:1;transition:color 0.15s;
+  .lc-eye{
+    position:absolute;right:12px;top:50%;transform:translateY(-50%);
+    background:none;border:none;cursor:pointer;color:#9ca3af;font-size:14px;
+    padding:4px;transition:color 0.15s;line-height:1;
   }
-  .eye-btn:hover{color:#94a3b8;}
+  .lc-eye:hover{color:#374151;}
 
-  /* submit button */
+  /* divider */
+  .lc-divider{height:1px;background:#f1f5f9;margin:4px 0 20px;}
+
+  /* sign in button */
   .btn-login{
-    width:100%;margin-top:6px;
-    padding:13px;border:none;border-radius:10px;
-    background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);
-    background-size:200% 200%;
-    color:#fff;font-size:15px;font-weight:700;font-family:inherit;
+    width:100%;padding:13px 20px;border:none;border-radius:10px;
+    background:#2563eb;color:#fff;font-size:15px;font-weight:700;font-family:inherit;
     cursor:pointer;position:relative;overflow:hidden;
-    transition:transform 0.15s,box-shadow 0.2s,background-position 0.4s;
-    box-shadow:0 4px 20px rgba(37,99,235,0.35);
+    transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
+    box-shadow:0 1px 3px rgba(37,99,235,0.3),0 4px 12px rgba(37,99,235,0.2);
   }
-  .btn-login::after{
-    content:'';position:absolute;inset:0;
-    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%);
-    transform:translateX(-100%);transition:transform 0.5s;
-  }
-  .btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(37,99,235,0.5);background-position:100% 0;}
-  .btn-login:hover::after{transform:translateX(100%);}
-  .btn-login:active{transform:translateY(0);}
-  .btn-login:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
-  .btn-login:disabled::after{display:none;}
+  .btn-login:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,0.35);}
+  .btn-login:active{transform:none;background:#1e40af;}
+  .btn-login:disabled{background:#93c5fd;cursor:not-allowed;transform:none;box-shadow:none;}
 
   /* error */
   .err-msg{
-    background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);
-    border-radius:8px;padding:10px 14px;
-    font-size:13px;color:#f87171;margin-top:14px;display:none;
-    animation:shake 0.35s ease;
-  }
-  @keyframes shake{
-    0%,100%{transform:none;}10%,50%,90%{transform:translateX(-4px);}30%,70%{transform:translateX(4px);}
+    background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
+    padding:10px 14px;font-size:13px;color:#dc2626;margin-top:14px;display:none;
   }
+  @keyframes shake{0%,100%{transform:none;}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}
+  .err-msg.shake{animation:shake 0.3s ease;}
 
-  /* secure badge */
-  .secure-badge{
+  /* footer */
+  .lc-footer{
     display:flex;align-items:center;justify-content:center;gap:6px;
-    margin-top:24px;font-size:11px;color:#334155;
+    margin-top:24px;font-size:11px;color:#94a3b8;
   }
-  .secure-badge .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 6px #16a34a;}
+  .lc-footer svg{opacity:0.5;}
 
   /* spinner */
-  .spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;}
+  .spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.65s linear infinite;vertical-align:middle;margin-right:6px;}
   @keyframes spin{to{transform:rotate(360deg)}}
 
-  /* ═══════════════════════════════════════════
-     DASHBOARD
-  ═══════════════════════════════════════════ */
+  /* ═══════════════════════════ DASHBOARD ═══════════════════════════ */
   #dashboard{display:none}
-  .topbar{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
-  .topbar-title{font-size:18px;font-weight:900;color:#fff}
-  .topbar-sub{font-size:13px;color:rgba(255,255,255,0.65);margin-top:2px}
-  .logout-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer}
-  .logout-btn:hover{background:rgba(255,255,255,0.2)}
-  .content{max-width:960px;margin:0 auto;padding:32px 24px}
-  .add-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px 28px;margin-bottom:28px}
-  .add-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:18px}
-  .form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;flex-wrap:wrap}
-  @media(max-width:700px){.form-row{grid-template-columns:1fr}}
-  .form-row .field{margin-bottom:0}
-  .field{margin-bottom:16px}
-  .field label{display:block;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
-  .field input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:11px 14px;color:#f1f5f9;font-size:14px;font-family:inherit;outline:none;transition:border-color 0.15s}
-  .field input:focus{border-color:#2563eb}
-  .btn-add{background:linear-gradient(135deg,#15803d,#16a34a);border:none;border-radius:8px;color:#fff;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
-  .btn-add:hover{opacity:0.9}
-  .success-msg{background:rgba(22,163,74,0.1);border:1px solid rgba(22,163,74,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#4ade80;margin-top:12px;display:none}
-  .err-msg-dash{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#f87171;margin-top:12px;display:none}
-  .shops-card{background:#1e293b;border:1px solid #334155;border-radius:14px;overflow:hidden}
-  .shops-card-header{padding:18px 24px;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between}
-  .shops-card-header h3{font-size:15px;font-weight:800;color:#f1f5f9}
-  .count-badge{background:#1e3a5f;border:1px solid #2563eb;border-radius:20px;padding:3px 12px;font-size:12px;font-weight:700;color:#60a5fa}
-  table{width:100%;border-collapse:collapse}
-  th{background:#0f172a;padding:11px 16px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;text-align:left}
-  td{padding:13px 16px;font-size:13px;border-top:1px solid #334155;vertical-align:middle}
-  tr:hover td{background:rgba(255,255,255,0.02)}
-  .shop-name{font-weight:700;color:#f1f5f9;font-size:14px}
-  .note-text{color:#64748b;font-style:italic}
-  .tag{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
-  .tag-ok{background:rgba(22,163,74,0.15);color:#4ade80;border:1px solid rgba(22,163,74,0.3)}
-  .tag-exp{background:rgba(220,38,38,0.12);color:#f87171;border:1px solid rgba(220,38,38,0.25)}
-  .tag-perm{background:rgba(59,130,246,0.12);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)}
-  .date-text{color:#94a3b8;font-size:12px}
-  .btn-del{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.25);border-radius:6px;color:#f87171;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
-  .btn-del:hover{background:rgba(220,38,38,0.2)}
-  .empty-state{padding:48px;text-align:center;color:#475569}
-  .empty-state .icon{font-size:36px;margin-bottom:12px}
+
+  /* topbar */
+  .topbar{
+    background:#fff;border-bottom:1px solid #e2e8f0;
+    padding:0 32px;height:60px;
+    display:flex;align-items:center;justify-content:space-between;
+    position:sticky;top:0;z-index:100;
+    box-shadow:0 1px 3px rgba(0,0,0,0.06);
+  }
+  .topbar-left{display:flex;align-items:center;gap:12px;}
+  .topbar-logo{
+    width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#4f46e5);
+    border-radius:10px;display:flex;align-items:center;justify-content:center;
+    font-size:18px;
+  }
+  .topbar-title{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:-0.3px;}
+  .topbar-sub{font-size:12px;color:#94a3b8;margin-top:1px;}
+  .topbar-right{display:flex;align-items:center;gap:12px;}
+  .topbar-badge{
+    background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
+    padding:3px 10px;font-size:11px;font-weight:700;color:#2563eb;
+  }
+  .logout-btn{
+    background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
+    color:#374151;padding:7px 14px;font-size:13px;font-weight:600;
+    cursor:pointer;font-family:inherit;transition:background 0.12s,border-color 0.12s;
+  }
+  .logout-btn:hover{background:#f1f5f9;border-color:#cbd5e1;}
+
+  /* content */
+  .content{max-width:1000px;margin:0 auto;padding:32px 24px;}
+
+  /* page header inside dashboard */
+  .page-header{margin-bottom:24px;}
+  .page-header h2{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-0.4px;}
+  .page-header p{font-size:13px;color:#64748b;margin-top:4px;}
+
+  /* add card */
+  .add-card{
+    background:#fff;border:1px solid #e2e8f0;border-radius:14px;
+    padding:24px 28px;margin-bottom:24px;
+    box-shadow:0 1px 3px rgba(0,0,0,0.05);
+  }
+  .add-card-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
+  .add-card-icon{
+    width:36px;height:36px;background:#eff6ff;border-radius:9px;
+    display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
+  }
+  .add-card h3{font-size:15px;font-weight:700;color:#0f172a;}
+  .add-card .sub{font-size:12px;color:#94a3b8;margin-top:1px;}
+
+  .form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;}
+  @media(max-width:720px){.form-row{grid-template-columns:1fr}}
+  .field{margin-bottom:0;}
+  .field label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;}
+  .field input{
+    width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;
+    padding:10px 13px;color:#0f172a;font-size:13px;font-family:inherit;
+    outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
+  }
+  .field input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
+  .field input::placeholder{color:#b0b8c4;}
+  .btn-add{
+    background:#2563eb;border:none;border-radius:9px;color:#fff;
+    padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;
+    white-space:nowrap;font-family:inherit;
+    box-shadow:0 1px 3px rgba(37,99,235,0.25);transition:background 0.12s,transform 0.1s;
+  }
+  .btn-add:hover{background:#1d4ed8;transform:translateY(-1px);}
+  .btn-add:active{transform:none;}
+
+  .success-msg{
+    background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;
+    padding:10px 14px;font-size:13px;color:#15803d;font-weight:600;
+    margin-top:14px;display:none;
+  }
+  .err-msg-dash{
+    background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
+    padding:10px 14px;font-size:13px;color:#dc2626;
+    margin-top:14px;display:none;
+  }
+
+  /* shops card */
+  .shops-card{
+    background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;
+    box-shadow:0 1px 3px rgba(0,0,0,0.05);
+  }
+  .shops-card-header{
+    padding:16px 24px;border-bottom:1px solid #f1f5f9;
+    display:flex;align-items:center;justify-content:space-between;
+    background:#fafafa;
+  }
+  .shops-card-header h3{font-size:14px;font-weight:700;color:#0f172a;}
+  .count-badge{
+    background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
+    padding:3px 10px;font-size:11px;font-weight:700;color:#2563eb;
+  }
+
+  table{width:100%;border-collapse:collapse;}
+  th{
+    background:#fafafa;padding:10px 20px;
+    font-size:11px;font-weight:700;color:#6b7280;
+    text-transform:uppercase;letter-spacing:0.06em;text-align:left;
+    border-bottom:1px solid #f1f5f9;
+  }
+  td{padding:14px 20px;font-size:13px;border-top:1px solid #f8fafc;vertical-align:middle;color:#374151;}
+  tr:hover td{background:#fafcff;}
+  .shop-name{font-weight:700;color:#0f172a;font-size:14px;}
+  .shop-domain{font-size:11px;color:#94a3b8;margin-top:2px;font-family:monospace;}
+  .note-text{color:#94a3b8;font-size:12px;font-style:italic;}
+  .tag{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;}
+  .tag-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
+  .tag-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}
+  .tag-ok .tag-dot{background:#16a34a;}
+  .tag-exp{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
+  .tag-exp .tag-dot{background:#dc2626;}
+  .tag-perm{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;}
+  .tag-perm .tag-dot{background:#2563eb;}
+  .date-cell{font-size:12px;color:#6b7280;}
+  .btn-del{
+    background:#fef2f2;border:1px solid #fecaca;border-radius:6px;
+    color:#dc2626;padding:5px 12px;font-size:12px;font-weight:600;
+    cursor:pointer;font-family:inherit;transition:background 0.12s;
+  }
+  .btn-del:hover{background:#fee2e2;}
+  .empty-state{padding:56px 24px;text-align:center;}
+  .empty-state .icon{font-size:38px;margin-bottom:12px;}
+  .empty-state p{font-size:14px;color:#94a3b8;font-weight:500;}
+  .empty-state small{font-size:12px;color:#b0b8c4;display:block;margin-top:4px;}
+  .loading-row{padding:32px;text-align:center;}
+  .spinner-dark{display:inline-block;width:20px;height:20px;border:2px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin 0.7s linear infinite;}
 </style>
 </head>
 <body>
 
-<!-- background blobs (login only) -->
-<div class="login-bg" id="login-bg">
-  <div class="blob blob1"></div>
-  <div class="blob blob2"></div>
-  <div class="blob blob3"></div>
-</div>
-
-<!-- ══════════════════════════════════════
-     LOGIN SCREEN
-═══════════════════════════════════════ -->
+<!-- ═══════════════════════════ LOGIN ═══════════════════════════ -->
 <div id="login-screen">
 
   <!-- Left branding panel -->
   <div class="login-left">
-    <div class="brand-icon">🛡️</div>
-    <div class="brand-name">Data4Autos</div>
-    <div class="brand-tagline">Secure admin portal for managing free-access shops on the Turn14 integration platform.</div>
-    <div class="feature-list">
-      <div class="feature-item"><div class="feature-dot"></div><span>Grant free access to any Shopify store</span></div>
-      <div class="feature-item"><div class="feature-dot"></div><span>Set custom expiry dates per shop</span></div>
-      <div class="feature-item"><div class="feature-dot"></div><span>Changes take effect instantly</span></div>
-      <div class="feature-item"><div class="feature-dot"></div><span>No redeployment required</span></div>
+    <div class="ll-logo">
+      <div class="ll-icon">🛡️</div>
+      <div class="ll-brand">Data4Autos <span>Admin Portal</span></div>
+    </div>
+    <div class="ll-heading">Manage <em>free access</em><br>with confidence</div>
+    <div class="ll-desc">Grant, revoke, and schedule free-access windows for any Shopify store — no code changes, no redeployment needed.</div>
+    <div class="ll-features">
+      <div class="ll-feat"><div class="ll-feat-check">✓</div><span>Grant free access to any Shopify store</span></div>
+      <div class="ll-feat"><div class="ll-feat-check">✓</div><span>Set custom expiry dates per shop</span></div>
+      <div class="ll-feat"><div class="ll-feat-check">✓</div><span>Changes take effect instantly</span></div>
+      <div class="ll-feat"><div class="ll-feat-check">✓</div><span>Persisted to disk — survives restarts</span></div>
     </div>
   </div>
 
   <!-- Right login panel -->
   <div class="login-right">
     <div class="login-card">
-      <div class="card-header">
-        <div class="card-mini-logo"><span>D4A Admin</span></div>
-        <div class="card-title">Welcome back</div>
-        <div class="card-sub">Sign in to your admin portal</div>
+      <div class="lc-top">
+        <div class="lc-eyebrow"><div class="status-dot"></div>Secure Portal</div>
+        <div class="lc-title">Welcome back</div>
+        <div class="lc-sub">Sign in to manage shop access permissions.</div>
       </div>
 
-      <div class="inp-wrap">
-        <label>Username</label>
-        <div class="inp-inner">
-          <span class="inp-icon">👤</span>
-          <input type="text" id="inp-user" placeholder="Enter your username" autocomplete="username"/>
+      <div class="lc-divider"></div>
+
+      <div class="lc-field">
+        <label for="inp-user">Username</label>
+        <div class="lc-inp-wrap">
+          <span class="lc-inp-icon">👤</span>
+          <input type="text" id="inp-user" placeholder="d4a-admin" autocomplete="username"/>
         </div>
       </div>
 
-      <div class="inp-wrap">
-        <label>Password</label>
-        <div class="inp-inner">
-          <span class="inp-icon">🔑</span>
-          <input type="password" id="inp-pass" placeholder="Enter your password" autocomplete="current-password"/>
-          <button class="eye-btn" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
+      <div class="lc-field">
+        <label for="inp-pass">Password</label>
+        <div class="lc-inp-wrap">
+          <span class="lc-inp-icon">🔒</span>
+          <input type="password" id="inp-pass" placeholder="••••••••••••" autocomplete="current-password"/>
+          <button class="lc-eye" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
         </div>
       </div>
 
@@ -385,40 +416,57 @@ function adminHtml() {
 
       <div class="err-msg" id="login-err"></div>
 
-      <div class="secure-badge">
-        <div class="dot"></div>
-        <span>Secure connection · Session expires in 8 hours</span>
+      <div class="lc-footer">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        Session secured · Expires in 8 hours
       </div>
     </div>
   </div>
 </div>
 
-<!-- ── DASHBOARD ── -->
+<!-- ═══════════════════════════ DASHBOARD ═══════════════════════════ -->
 <div id="dashboard">
+
   <div class="topbar">
-    <div>
-      <div class="topbar-title">🛡️ Data4Autos — Free Access Manager</div>
-      <div class="topbar-sub">Manage shops with free / bypassed subscription access</div>
+    <div class="topbar-left">
+      <div class="topbar-logo">🛡️</div>
+      <div>
+        <div class="topbar-title">Data4Autos Admin</div>
+        <div class="topbar-sub">Free Access Manager</div>
+      </div>
+    </div>
+    <div class="topbar-right">
+      <span class="topbar-badge" id="shops-count">0 shops</span>
+      <button class="logout-btn" onclick="doLogout()">Sign Out</button>
     </div>
-    <button class="logout-btn" onclick="doLogout()">Sign Out</button>
   </div>
 
   <div class="content">
+    <div class="page-header">
+      <h2>Whitelisted Shops</h2>
+      <p>Shops listed here bypass subscription checks and get full app access.</p>
+    </div>
 
     <!-- Add shop form -->
     <div class="add-card">
-      <h3>➕ Grant Free Access to a Shop</h3>
+      <div class="add-card-header">
+        <div class="add-card-icon">➕</div>
+        <div>
+          <h3>Grant Free Access</h3>
+          <div class="sub">Add a shop domain and optional expiry date.</div>
+        </div>
+      </div>
       <div class="form-row">
         <div class="field">
           <label>Shop Domain</label>
           <input type="text" id="inp-shop" placeholder="yourstore.myshopify.com"/>
         </div>
         <div class="field">
-          <label>Expiry Date <span style="color:#475569;font-weight:400">(leave blank = permanent)</span></label>
+          <label>Expiry Date <span style="color:#b0b8c4;font-weight:400">(blank = permanent)</span></label>
           <input type="date" id="inp-expires"/>
         </div>
         <div class="field">
-          <label>Note <span style="color:#475569;font-weight:400">(optional)</span></label>
+          <label>Note <span style="color:#b0b8c4;font-weight:400">(optional)</span></label>
           <input type="text" id="inp-note" placeholder="e.g. Partner shop"/>
         </div>
         <button class="btn-add" onclick="doAddShop()">Add Shop</button>
@@ -430,11 +478,11 @@ function adminHtml() {
     <!-- Shops table -->
     <div class="shops-card">
       <div class="shops-card-header">
-        <h3>🏪 Whitelisted Shops</h3>
-        <span class="count-badge" id="shops-count">0 shops</span>
+        <h3>Active Whitelist</h3>
+        <span class="count-badge" id="shops-count-table">0 shops</span>
       </div>
       <div id="shops-table-wrap">
-        <div class="empty-state"><div class="spinner"></div></div>
+        <div class="loading-row"><div class="spinner-dark"></div></div>
       </div>
     </div>
 
@@ -493,7 +541,6 @@ async function doLogout() {
   await api('POST', '/logout');
   document.getElementById('dashboard').style.display = 'none';
   document.getElementById('login-screen').style.display = 'flex';
-  document.getElementById('login-bg').style.display = 'block';
   document.getElementById('inp-user').value = '';
   document.getElementById('inp-pass').value = '';
 }
@@ -501,7 +548,6 @@ async function doLogout() {
 // ── SHOW DASHBOARD ──────────────────────────────────────────────────────────
 function showDashboard() {
   document.getElementById('login-screen').style.display = 'none';
-  document.getElementById('login-bg').style.display = 'none';
   document.getElementById('dashboard').style.display = 'block';
   loadShops();
 }
@@ -513,26 +559,28 @@ async function loadShops() {
   if (!r.ok) { wrap.innerHTML = '<div class="empty-state"><div>Failed to load shops</div></div>'; return; }
 
   const shops = r.data.shops || [];
-  document.getElementById('shops-count').textContent = shops.length + ' shop' + (shops.length !== 1 ? 's' : '');
+  const countLabel = shops.length + ' shop' + (shops.length !== 1 ? 's' : '');
+  document.getElementById('shops-count').textContent = countLabel;
+  document.getElementById('shops-count-table').textContent = countLabel;
 
   if (shops.length === 0) {
-    wrap.innerHTML = '<div class="empty-state"><div class="icon">🏪</div><div>No shops added yet.<br>Use the form above to grant free access.</div></div>';
+    wrap.innerHTML = '<div class="empty-state"><div class="icon">🏪</div><p>No shops added yet.</p><small>Use the form above to grant free access to a shop.</small></div>';
     return;
   }
 
   const rows = shops.map(s => {
     const statusTag = s.expired
-      ? '<span class="tag tag-exp">Expired</span>'
+      ? '<span class="tag tag-exp"><span class="tag-dot"></span>Expired</span>'
       : s.permanent
-        ? '<span class="tag tag-perm">Permanent</span>'
-        : '<span class="tag tag-ok">Active</span>';
+        ? '<span class="tag tag-perm"><span class="tag-dot"></span>Permanent</span>'
+        : '<span class="tag tag-ok"><span class="tag-dot"></span>Active</span>';
 
     const expiryDisplay = s.expiresAt
-      ? '<span class="date-text">' + new Date(s.expiresAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
-      : '<span style="color:#475569;font-size:12px">Never</span>';
+      ? '<span class="date-cell">' + new Date(s.expiresAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
+      : '<span class="date-cell" style="color:#b0b8c4">Never</span>';
 
     const grantedDisplay = s.grantedAt
-      ? '<span class="date-text">' + new Date(s.grantedAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
+      ? '<span class="date-cell">' + new Date(s.grantedAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
       : '—';
 
     return \`<tr>