From d0d6230d69516a88e7d49e54e0e94115b43e90b9 Mon Sep 17 00:00:00 2001
From: Rizqi <rizqi@staff.pens.ac.id>
Date: Sun, 21 Jun 2026 03:55:22 +0700
Subject: [PATCH] feat: add UI templates for login, storage management, and
 backup job workflows

---
 vsphere_backup/templates/base.html       | 296 ++++++++++++++---------
 vsphere_backup/templates/create_job.html |  79 +++---
 vsphere_backup/templates/job_detail.html |  83 ++++---
 vsphere_backup/templates/jobs.html       |  39 +--
 vsphere_backup/templates/login.html      |  46 ++--
 vsphere_backup/templates/nfs.html        |  76 +++---
 vsphere_backup/templates/vms.html        |  79 +++---
 7 files changed, 415 insertions(+), 283 deletions(-)

diff --git a/vsphere_backup/templates/base.html b/vsphere_backup/templates/base.html
index 3bdf656..d391e0e 100644
--- a/vsphere_backup/templates/base.html
+++ b/vsphere_backup/templates/base.html
@@ -9,43 +9,47 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
   <style>
     :root {
-      --bg-base:       #0b0d14;
-      --bg-surface:    #111520;
-      --bg-card:       rgba(255,255,255,0.04);
-      --bg-card-hover: rgba(255,255,255,0.07);
-      --border:        rgba(255,255,255,0.08);
-      --border-bright: rgba(255,255,255,0.15);
-      --accent:        #7c6bff;
-      --accent-2:      #00d4ff;
-      --accent-glow:   rgba(124,107,255,0.3);
-      --success:       #22c55e;
-      --warning:       #f59e0b;
-      --danger:        #ef4444;
-      --text-primary:  #f0f2ff;
+      --bg-base:       #080a10;
+      --bg-surface:    #0e111a;
+      --bg-card:       rgba(18, 22, 35, 0.6);
+      --bg-card-hover: rgba(24, 29, 45, 0.85);
+      --border:        rgba(255, 255, 255, 0.05);
+      --border-bright: rgba(124, 107, 255, 0.25);
+      --accent:        #6366f1; /* Indigo */
+      --accent-2:      #06b6d4; /* Cyan */
+      --accent-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
+      --accent-glow:   rgba(99, 102, 241, 0.25);
+      --success:       #10b981; /* Emerald */
+      --warning:       #f59e0b; /* Amber */
+      --danger:        #ef4444; /* Red */
+      --text-primary:  #f8fafc;
       --text-secondary:#94a3b8;
-      --text-muted:    #4a5568;
-      --sidebar-w:     240px;
-      --radius:        12px;
-      --radius-sm:     8px;
-      --shadow:        0 4px 24px rgba(0,0,0,0.4);
+      --text-muted:    #64748b;
+      --sidebar-w:     260px;
+      --radius:        16px;
+      --radius-sm:     10px;
+      --shadow:        0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
+      --shadow-hover:  0 20px 40px -15px rgba(99, 102, 241, 0.3), 0 1px 2px rgba(255, 255, 255, 0.1) inset;
     }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; }
     body {
-      font-family: 'Inter', system-ui, sans-serif;
-      background: var(--bg-base);
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: radial-gradient(circle at 50% 0%, #151926 0%, var(--bg-base) 80%);
       color: var(--text-primary);
       display: flex;
       min-height: 100vh;
       font-size: 14px;
-      line-height: 1.5;
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
     }
 
     /* ── Sidebar ── */
     .sidebar {
       width: var(--sidebar-w);
       min-height: 100vh;
-      background: var(--bg-surface);
+      background: rgba(14, 17, 26, 0.85);
+      backdrop-filter: blur(20px);
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
@@ -53,57 +57,76 @@
       position: fixed;
       left: 0; top: 0; bottom: 0;
       z-index: 100;
+      transition: all 0.3s ease;
     }
     .sidebar-logo {
-      padding: 24px 20px 20px;
+      padding: 28px 24px;
       border-bottom: 1px solid var(--border);
     }
     .sidebar-logo .logo-mark {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
     }
     .logo-icon {
-      width: 36px; height: 36px;
-      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      width: 40px; height: 40px;
+      background: var(--accent-gradient);
       border-radius: var(--radius-sm);
       display: flex; align-items: center; justify-content: center;
-      font-size: 18px;
+      font-size: 20px;
       box-shadow: 0 0 20px var(--accent-glow);
+      transition: transform 0.3s ease;
     }
-    .logo-text { font-size: 15px; font-weight: 700; color: var(--text-primary); }
-    .logo-sub  { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
+    .sidebar:hover .logo-icon {
+      transform: rotate(5deg) scale(1.05);
+    }
+    .logo-text { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
+    .logo-sub  { font-size: 11px; color: var(--text-secondary); margin-top: 1px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
 
-    .sidebar-nav { flex: 1; padding: 16px 12px; }
+    .sidebar-nav { flex: 1; padding: 24px 16px; }
     .nav-section-label {
-      font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
+      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
       color: var(--text-muted); text-transform: uppercase;
-      padding: 0 8px; margin: 12px 0 6px;
+      padding: 0 12px; margin: 16px 0 8px;
     }
     .nav-link {
-      display: flex; align-items: center; gap: 10px;
-      padding: 9px 12px; border-radius: var(--radius-sm);
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 14px; border-radius: var(--radius-sm);
       color: var(--text-secondary); text-decoration: none;
-      font-size: 13.5px; font-weight: 500;
-      transition: all .18s ease;
-      margin-bottom: 2px;
+      font-size: 14px; font-weight: 500;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      margin-bottom: 4px;
+      border: 1px solid transparent;
     }
-    .nav-link:hover { background: var(--bg-card-hover); color: var(--text-primary); }
-    .nav-link.active { background: rgba(124,107,255,0.15); color: var(--accent); }
-    .nav-link .icon { font-size: 16px; width: 20px; text-align: center; }
+    .nav-link:hover { 
+      background: rgba(255, 255, 255, 0.02); 
+      color: var(--text-primary);
+      border-color: rgba(255, 255, 255, 0.03);
+      transform: translateX(4px);
+    }
+    .nav-link.active { 
+      background: rgba(99, 102, 241, 0.1); 
+      color: #a5b4fc;
+      border-color: rgba(99, 102, 241, 0.2);
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05);
+      font-weight: 600;
+    }
+    .nav-link .icon { font-size: 18px; width: 22px; text-align: center; }
 
     .sidebar-footer {
-      padding: 16px 20px;
+      padding: 20px 24px;
       border-top: 1px solid var(--border);
+      background: rgba(8, 10, 16, 0.4);
     }
     .server-badge {
-      background: var(--bg-card);
+      background: rgba(255, 255, 255, 0.02);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
-      padding: 8px 12px;
+      padding: 10px 14px;
       font-size: 12px;
+      margin-bottom: 12px;
     }
-    .server-badge .server-host { font-weight: 600; color: var(--accent-2); word-break: break-all; }
+    .server-badge .server-host { font-weight: 600; color: var(--accent-2); word-break: break-all; margin-bottom: 2px; }
     .server-badge .server-user { color: var(--text-muted); }
 
     /* ── Main content ── */
@@ -113,139 +136,180 @@
       display: flex;
       flex-direction: column;
       min-height: 100vh;
+      transition: margin-left 0.3s ease;
     }
     .topbar {
-      padding: 20px 32px;
+      padding: 24px 40px;
       border-bottom: 1px solid var(--border);
-      background: rgba(11,13,20,0.8);
-      backdrop-filter: blur(12px);
+      background: rgba(8, 10, 16, 0.7);
+      backdrop-filter: blur(16px);
       display: flex; align-items: center; justify-content: space-between;
       position: sticky; top: 0; z-index: 50;
     }
-    .topbar-title { font-size: 20px; font-weight: 700; }
-    .topbar-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
-    .topbar-actions { display: flex; align-items: center; gap: 10px; }
+    .topbar-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
+    .topbar-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
+    .topbar-actions { display: flex; align-items: center; gap: 12px; }
 
-    .content { padding: 28px 32px; flex: 1; }
+    .content { padding: 32px 40px; flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; }
 
     /* ── Buttons ── */
     .btn {
-      display: inline-flex; align-items: center; gap: 7px;
-      padding: 9px 18px; border-radius: var(--radius-sm);
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      padding: 10px 20px; border-radius: var(--radius-sm);
       font-size: 13.5px; font-weight: 600;
-      cursor: pointer; border: none; text-decoration: none;
-      transition: all .18s ease; line-height: 1;
+      cursor: pointer; border: 1px solid transparent; text-decoration: none;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      line-height: 1.2;
       white-space: nowrap;
     }
     .btn-primary {
-      background: linear-gradient(135deg, var(--accent), #5b52e0);
-      color: #fff;
-      box-shadow: 0 2px 12px var(--accent-glow);
+      background: var(--accent-gradient);
+      color: #ffffff;
+      box-shadow: 0 4px 14px var(--accent-glow);
     }
-    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
+    .btn-primary:hover { 
+      transform: translateY(-1.5px); 
+      box-shadow: 0 6px 20px var(--accent-glow);
+      filter: brightness(1.05);
+    }
+    .btn-primary:active { transform: translateY(0); }
+
     .btn-secondary {
-      background: var(--bg-card);
-      border: 1px solid var(--border-bright);
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.08);
       color: var(--text-primary);
     }
-    .btn-secondary:hover { background: var(--bg-card-hover); }
-    .btn-danger {
-      background: rgba(239,68,68,0.15);
-      border: 1px solid rgba(239,68,68,0.3);
-      color: var(--danger);
+    .btn-secondary:hover { 
+      background: rgba(255, 255, 255, 0.07); 
+      border-color: rgba(255, 255, 255, 0.15);
+      transform: translateY(-1px);
     }
-    .btn-danger:hover { background: rgba(239,68,68,0.25); }
-    .btn-sm { padding: 6px 12px; font-size: 12.5px; }
+    .btn-danger {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+      color: #fca5a5;
+    }
+    .btn-danger:hover { 
+      background: rgba(239, 68, 68, 0.2); 
+      border-color: rgba(239, 68, 68, 0.35);
+      color: #ffffff;
+      transform: translateY(-1px);
+    }
+    .btn-sm { padding: 8px 14px; font-size: 12.5px; }
     .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
-    .btn-ghost:hover { border-color: var(--border-bright); color: var(--text-primary); }
+    .btn-ghost:hover { border-color: var(--border-bright); color: var(--text-primary); background: rgba(255,255,255,0.01); }
 
     /* ── Cards ── */
     .card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      transition: border-color .2s;
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(12px);
+      transition: all 0.25s ease;
+    }
+    .card:hover { 
+      border-color: var(--border-bright); 
+      box-shadow: var(--shadow-hover);
     }
-    .card:hover { border-color: var(--border-bright); }
     .card-header {
-      padding: 18px 22px;
+      padding: 20px 24px;
       border-bottom: 1px solid var(--border);
       display: flex; align-items: center; justify-content: space-between;
     }
-    .card-title { font-size: 15px; font-weight: 600; }
-    .card-body { padding: 22px; }
+    .card-title { font-size: 16px; font-weight: 600; }
+    .card-body { padding: 24px; }
 
     /* ── Badges / Status chips ── */
     .badge {
-      display: inline-flex; align-items: center; gap: 5px;
-      padding: 3px 10px; border-radius: 100px;
-      font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 12px; border-radius: 100px;
+      font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
+      border: 1px solid transparent;
+      text-transform: uppercase;
     }
     .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
-    .badge-green  { background: rgba(34,197,94,.12); color: var(--success); }
-    .badge-green::before  { background: var(--success); box-shadow: 0 0 6px var(--success); }
-    .badge-red    { background: rgba(239,68,68,.12); color: var(--danger); }
-    .badge-red::before    { background: var(--danger); }
-    .badge-yellow { background: rgba(245,158,11,.12); color: var(--warning); }
-    .badge-yellow::before { background: var(--warning); }
-    .badge-gray   { background: rgba(148,163,184,.1); color: var(--text-secondary); }
-    .badge-gray::before   { background: var(--text-secondary); }
-    .badge-purple { background: rgba(124,107,255,.15); color: var(--accent); }
-    .badge-purple::before { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
+    .badge-green  { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); color: #34d399; }
+    .badge-green::before  { background: #10b981; box-shadow: 0 0 8px #10b981; }
+    .badge-red    { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); color: #f87171; }
+    .badge-red::before    { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
+    .badge-yellow { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); color: #fbbf24; }
+    .badge-yellow::before { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
+    .badge-gray   { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.2); color: #cbd5e1; }
+    .badge-gray::before   { background: #94a3b8; }
+    .badge-purple { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.25); color: #c7d2fe; }
+    .badge-purple::before { background: #6366f1; box-shadow: 0 0 8px #6366f1; }
 
     /* ── Form elements ── */
-    .form-group { margin-bottom: 18px; }
+    .form-group { margin-bottom: 20px; }
     .form-label {
-      display: block; font-size: 13px; font-weight: 500;
-      color: var(--text-secondary); margin-bottom: 6px;
+      display: block; font-size: 13px; font-weight: 600;
+      color: var(--text-secondary); margin-bottom: 8px;
+      letter-spacing: 0.01em;
     }
     .form-control {
       width: 100%;
-      background: rgba(255,255,255,0.05);
+      background: rgba(8, 10, 16, 0.5);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       color: var(--text-primary);
-      padding: 10px 14px;
+      padding: 12px 16px;
       font-size: 14px;
       font-family: inherit;
-      transition: border-color .18s, box-shadow .18s;
+      transition: all 0.2s ease;
       outline: none;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1) inset;
+    }
+    .form-control:hover {
+      border-color: rgba(255,255,255,0.1);
     }
     .form-control:focus {
       border-color: var(--accent);
-      box-shadow: 0 0 0 3px var(--accent-glow);
+      background: rgba(8, 10, 16, 0.8);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0,0,0,0.15) inset;
     }
     .form-control::placeholder { color: var(--text-muted); }
+    select.form-control { cursor: pointer; }
     select.form-control option { background: var(--bg-surface); color: var(--text-primary); }
-    .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
-    .form-check input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
-    .form-check label { font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
+    .form-check { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .form-check input[type=checkbox] { 
+      accent-color: var(--accent); 
+      width: 18px; height: 18px; 
+      cursor: pointer; 
+      border-radius: 4px;
+    }
+    .form-check label { font-size: 13.5px; color: var(--text-secondary); cursor: pointer; user-select: none; }
 
     /* ── Alert / Flash ── */
     .alert {
-      padding: 12px 16px; border-radius: var(--radius-sm);
-      margin-bottom: 20px; font-size: 13.5px;
-      display: flex; align-items: center; gap: 10px;
+      padding: 14px 20px; border-radius: var(--radius-sm);
+      margin-bottom: 24px; font-size: 14px;
+      display: flex; align-items: center; gap: 12px;
+      border: 1px solid transparent;
+      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+      backdrop-filter: blur(8px);
     }
-    .alert-danger  { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; }
-    .alert-success { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.25); color: #86efac; }
-    .alert-info    { background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2);  color: #67e8f9; }
+    .alert-danger  { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #fca5a5; }
+    .alert-success { background: rgba(16, 185, 129, 0.08);  border-color: rgba(16, 185, 129, 0.25); color: #a7f3d0; }
+    .alert-info    { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.2);  color: #c5f2f7; }
 
     /* ── Table ── */
     table { width: 100%; border-collapse: collapse; }
     th {
-      text-align: left; padding: 11px 16px;
-      font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
+      text-align: left; padding: 14px 20px;
+      font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
       color: var(--text-muted); border-bottom: 1px solid var(--border);
     }
-    td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+    td { padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
     tr:last-child td { border-bottom: none; }
-    tr:hover td { background: rgba(255,255,255,0.02); }
+    tr { transition: background 0.15s; }
+    tr:hover td { background: rgba(255, 255, 255, 0.015); }
 
     /* ── Utilities ── */
-    .text-muted    { color: var(--text-secondary); }
-    .text-small    { font-size: 12px; }
-    .mono          { font-family: 'JetBrains Mono', monospace; }
+    .text-muted    { color: var(--text-muted); }
+    .text-secondary { color: var(--text-secondary); }
+    .text-small    { font-size: 12.5px; }
+    .mono          { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
     .flex          { display: flex; }
     .flex-center   { display: flex; align-items: center; }
     .gap-2         { gap: 8px; }
@@ -259,19 +323,19 @@
     /* ── Spinner ── */
     @keyframes spin { to { transform: rotate(360deg); } }
     .spinner {
-      width: 16px; height: 16px;
-      border: 2px solid rgba(255,255,255,.15);
-      border-top-color: var(--accent);
+      width: 18px; height: 18px;
+      border: 2.5px solid rgba(255,255,255,.15);
+      border-top-color: var(--accent-2);
       border-radius: 50%;
       animation: spin .7s linear infinite;
       display: inline-block;
     }
 
     /* ── Scrollbar ── */
-    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
     ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
-    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
+    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
+    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
   </style>
   {% block head %}{% endblock %}
 </head>
diff --git a/vsphere_backup/templates/create_job.html b/vsphere_backup/templates/create_job.html
index 5ef9c1c..7da9dec 100644
--- a/vsphere_backup/templates/create_job.html
+++ b/vsphere_backup/templates/create_job.html
@@ -4,88 +4,99 @@
 
 {% block head %}
 <style>
-  .wizard-wrap { max-width: 680px; }
+  .wizard-wrap { max-width: 720px; }
 
   .wizard-steps {
     display: flex; align-items: center; gap: 0;
-    margin-bottom: 28px; counter-reset: step;
+    margin-bottom: 32px; counter-reset: step;
   }
   .step {
-    display: flex; align-items: center; gap: 10px;
+    display: flex; align-items: center; gap: 12px;
     flex: 1; position: relative;
   }
   .step:not(:last-child)::after {
     content: '';
-    flex: 1; height: 1px;
+    flex: 1; height: 2px;
     background: var(--border);
-    margin: 0 10px;
+    margin: 0 16px;
+    border-radius: 2px;
   }
   .step.done:not(:last-child)::after { background: var(--accent); }
   .step-num {
-    width: 28px; height: 28px; border-radius: 50%;
+    width: 32px; height: 32px; border-radius: 50%;
     border: 2px solid var(--border);
     display: flex; align-items: center; justify-content: center;
-    font-size: 12px; font-weight: 700; flex-shrink: 0;
+    font-size: 13px; font-weight: 700; flex-shrink: 0;
     color: var(--text-muted);
+    transition: all 0.25s ease;
   }
-  .step.active .step-num { border-color: var(--accent); color: var(--accent); background: rgba(124,107,255,.12); }
-  .step.done .step-num { border-color: var(--accent); background: var(--accent); color: #fff; }
-  .step-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
+  .step.active .step-num { border-color: var(--accent); color: #ffffff; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
+  .step.done .step-num { border-color: var(--accent-2); background: var(--accent-2); color: #ffffff; box-shadow: 0 0 12px rgba(6, 182, 212, 0.25); }
+  .step-label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
   .step.active .step-label { color: var(--text-primary); }
 
   .section-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    margin-bottom: 16px;
+    margin-bottom: 20px;
     overflow: hidden;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
   .section-card-header {
-    padding: 14px 20px;
+    padding: 16px 24px;
     border-bottom: 1px solid var(--border);
-    background: rgba(255,255,255,0.02);
-    display: flex; align-items: center; gap: 10px;
-    font-size: 14px; font-weight: 600;
+    background: rgba(255,255,255,0.01);
+    display: flex; align-items: center; gap: 12px;
+    font-size: 14.5px; font-weight: 700;
+    letter-spacing: -0.01em;
   }
-  .section-card-body { padding: 20px; }
+  .section-card-body { padding: 24px; }
 
   .schedule-options {
     display: grid; grid-template-columns: repeat(2, 1fr);
-    gap: 10px; margin-bottom: 16px;
+    gap: 12px; margin-bottom: 20px;
   }
   .schedule-opt {
-    border: 2px solid var(--border);
+    border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 14px 16px;
+    padding: 16px 20px;
     cursor: pointer;
-    transition: all .18s;
-    display: flex; align-items: flex-start; gap: 10px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex; align-items: flex-start; gap: 12px;
+    background: rgba(255, 255, 255, 0.01);
   }
-  .schedule-opt:hover { border-color: var(--border-bright); background: var(--bg-card-hover); }
-  .schedule-opt.selected { border-color: var(--accent); background: rgba(124,107,255,.08); }
+  .schedule-opt:hover { border-color: var(--border-bright); background: var(--bg-card-hover); transform: translateY(-1px); }
+  .schedule-opt.selected { border-color: var(--accent); background: rgba(99, 102, 241, 0.08); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05); }
   .schedule-opt input[type=radio] { display: none; }
-  .schedule-opt-icon { font-size: 20px; }
-  .schedule-opt-title { font-size: 13.5px; font-weight: 600; }
-  .schedule-opt-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+  .schedule-opt-icon { font-size: 22px; }
+  .schedule-opt-title { font-size: 14.5px; font-weight: 700; }
+  .schedule-opt-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
 
   .schedule-detail { display: none; }
   .schedule-detail.visible { display: block; }
 
-  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 
   .sftp-toggle-btn {
     background: none; border: none; cursor: pointer;
-    color: var(--accent); font-size: 13px; font-weight: 500;
-    display: flex; align-items: center; gap: 6px;
-    padding: 0; margin-top: 4px;
-    text-decoration: underline; text-underline-offset: 3px;
+    color: var(--accent-2); font-size: 13.5px; font-weight: 600;
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 4px 8px; margin-top: 8px;
+    transition: color 0.2s;
+    border-radius: var(--radius-sm);
   }
-  .sftp-section { display: none; margin-top: 16px; }
+  .sftp-toggle-btn:hover {
+    color: var(--accent);
+    background: rgba(255,255,255,0.02);
+  }
+  .sftp-section { display: none; margin-top: 20px; }
   .sftp-section.visible { display: block; }
 
   .action-bar {
-    display: flex; gap: 12px; align-items: center;
-    padding: 20px 0 0;
+    display: flex; gap: 14px; align-items: center;
+    padding: 24px 0 0;
   }
 </style>
 {% endblock %}
diff --git a/vsphere_backup/templates/job_detail.html b/vsphere_backup/templates/job_detail.html
index b86c049..37e9ff8 100644
--- a/vsphere_backup/templates/job_detail.html
+++ b/vsphere_backup/templates/job_detail.html
@@ -6,15 +6,17 @@
 <style>
   .detail-grid {
     display: grid; grid-template-columns: 1fr 1fr;
-    gap: 14px; margin-bottom: 20px;
+    gap: 16px; margin-bottom: 24px;
   }
   .detail-item {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 14px 18px;
+    padding: 16px 20px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
-  .detail-item-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
+  .detail-item-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; }
   .detail-item-val { font-size: 15px; font-weight: 600; }
 
   /* Progress card */
@@ -22,82 +24,99 @@
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 20px 22px;
-    margin-bottom: 20px;
+    padding: 24px 28px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
   .progress-header {
     display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 14px;
+    margin-bottom: 16px;
   }
-  .progress-title { font-size: 14px; font-weight: 600; }
-  .progress-pct { font-size: 22px; font-weight: 700; color: var(--accent); }
+  .progress-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
+  .progress-pct { font-size: 24px; font-weight: 800; color: var(--accent-2); letter-spacing: -0.02em; }
   .progress-bar-wrap {
-    height: 10px; border-radius: 100px;
-    background: rgba(255,255,255,0.06);
-    overflow: hidden; margin-bottom: 10px;
+    height: 12px; border-radius: 100px;
+    background: rgba(8, 10, 16, 0.5);
+    overflow: hidden; margin-bottom: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
   }
   .progress-bar-fill {
     height: 100%; border-radius: 100px;
-    background: linear-gradient(90deg, var(--accent), var(--accent-2));
-    transition: width .5s ease;
+    background: var(--accent-gradient);
+    transition: width .5s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 0 10px var(--accent-glow);
     position: relative;
   }
   .progress-bar-fill.pulse::after {
     content: '';
-    position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
-    animation: shimmer 1.2s linear infinite;
+    position: absolute; top: 0; right: 0; bottom: 0; width: 80px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    animation: shimmer 1.5s linear infinite;
+  }
+  @keyframes shimmer { 
+    0% { transform: translateX(-150px); }
+    100% { transform: translateX(150px); }
   }
-  @keyframes shimmer { to { transform: translateX(20px); opacity: 0; } }
   .progress-bar-fill.done {
-    background: linear-gradient(90deg, var(--success), #16a34a);
-    box-shadow: 0 0 10px rgba(34,197,94,0.3);
+    background: linear-gradient(90deg, var(--success), #059669);
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
   }
   .progress-bar-fill.failed {
     background: linear-gradient(90deg, var(--danger), #dc2626);
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
   }
   .progress-detail {
-    font-size: 12.5px; color: var(--text-secondary);
+    font-size: 13px; color: var(--text-secondary);
     font-family: 'JetBrains Mono', monospace;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    background: rgba(8, 10, 16, 0.3);
+    padding: 8px 12px;
+    border-radius: var(--radius-sm);
   }
   .phase-steps {
-    display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap;
+    display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
   }
   .phase-step {
-    padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600;
-    background: rgba(255,255,255,0.05); color: var(--text-muted);
+    padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 700;
+    background: rgba(255,255,255,0.02); color: var(--text-muted);
     border: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    transition: all 0.2s ease;
   }
-  .phase-step.active { background: rgba(124,107,255,.15); color: var(--accent); border-color: var(--accent); }
-  .phase-step.done   { background: rgba(34,197,94,.1); color: var(--success); border-color: rgba(34,197,94,.3); }
+  .phase-step.active { background: rgba(99, 102, 241, .15); color: #a5b4fc; border-color: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,0.1); }
+  .phase-step.done   { background: rgba(16, 185, 129, .08); color: #34d399; border-color: rgba(16, 185, 129, .25); }
 
   .log-wrap {
-    background: #0a0c10;
+    background: #06080c;
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 18px;
+    padding: 20px;
     position: relative;
     min-height: 200px;
+    box-shadow: var(--shadow);
   }
   .log-toolbar {
     display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border);
   }
-  .log-title { font-size: 13.5px; font-weight: 600; }
+  .log-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
   pre#logContent {
     font-family: 'JetBrains Mono', monospace;
     font-size: 12.5px;
-    color: #a8c5da;
+    color: #cbd5e1;
     white-space: pre-wrap;
     word-break: break-all;
     max-height: 520px;
     overflow-y: auto;
-    line-height: 1.6;
+    line-height: 1.7;
     margin: 0;
+    padding: 4px 8px;
   }
-  .running-badge { animation: pulse 1.5s ease-in-out infinite; }
+  .running-badge { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
   @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
 </style>
 {% endblock %}
diff --git a/vsphere_backup/templates/jobs.html b/vsphere_backup/templates/jobs.html
index c3cb904..6826193 100644
--- a/vsphere_backup/templates/jobs.html
+++ b/vsphere_backup/templates/jobs.html
@@ -6,52 +6,59 @@
 <style>
   .jobs-header {
     display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
   }
   .jobs-summary {
-    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
+    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
   }
   .jobs-stat {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 10px 18px;
+    padding: 12px 20px;
     text-align: center;
-    min-width: 90px;
+    min-width: 100px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
-  .jobs-stat-val { font-size: 22px; font-weight: 700; }
-  .jobs-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+  .jobs-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
+  .jobs-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 
   .jobs-table-wrap {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
 
   .status-icon { font-size: 16px; }
 
-  .job-actions { display: flex; gap: 6px; }
+  .job-actions { display: flex; gap: 8px; }
 
   .empty-state {
-    text-align: center; padding: 60px; color: var(--text-secondary);
+    text-align: center; padding: 64px; color: var(--text-secondary);
   }
-  .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
+  .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: .4; }
 
   .running-pulse {
-    animation: pulse 1.5s ease-in-out infinite;
+    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   }
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: .5; }
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: .6; transform: scale(0.98); }
   }
 
   .schedule-tag {
-    display: inline-flex; align-items: center; gap: 4px;
-    background: rgba(0,212,255,.08);
-    border: 1px solid rgba(0,212,255,.2);
+    display: inline-flex; align-items: center; gap: 6px;
+    background: rgba(6, 182, 212, 0.08);
+    border: 1px solid rgba(6, 182, 212, 0.2);
     color: var(--accent-2);
-    font-size: 11px; padding: 2px 8px; border-radius: 100px;
+    font-size: 11px; padding: 3px 10px; border-radius: 100px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
   }
 </style>
 {% endblock %}
diff --git a/vsphere_backup/templates/login.html b/vsphere_backup/templates/login.html
index bfadd3c..a8319b6 100644
--- a/vsphere_backup/templates/login.html
+++ b/vsphere_backup/templates/login.html
@@ -3,43 +3,47 @@
 
 {% block head %}
 <style>
-  body { align-items: center; justify-content: center; }
+  body { align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #171b2a 0%, var(--bg-base) 70%); }
   .login-wrap {
     width: 100%;
-    max-width: 440px;
+    max-width: 460px;
     padding: 24px;
-    animation: fadeUp .4s ease;
+    animation: fadeUp .5s cubic-bezier(0.16, 1, 0.3, 1);
   }
   @keyframes fadeUp {
-    from { opacity: 0; transform: translateY(20px); }
+    from { opacity: 0; transform: translateY(24px); }
     to   { opacity: 1; transform: translateY(0); }
   }
-  .login-header { text-align: center; margin-bottom: 32px; }
+  .login-header { text-align: center; margin-bottom: 36px; }
   .login-icon {
-    width: 64px; height: 64px;
-    background: linear-gradient(135deg, #7c6bff, #00d4ff);
-    border-radius: 18px;
+    width: 72px; height: 72px;
+    background: var(--accent-gradient);
+    border-radius: 20px;
     display: flex; align-items: center; justify-content: center;
-    font-size: 30px;
-    margin: 0 auto 16px;
-    box-shadow: 0 0 40px rgba(124,107,255,.4);
+    font-size: 36px;
+    margin: 0 auto 20px;
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
+    transition: transform 0.3s ease;
   }
-  .login-header h1 { font-size: 22px; font-weight: 700; }
-  .login-header p { color: var(--text-secondary); margin-top: 6px; font-size: 13.5px; }
+  .login-wrap:hover .login-icon {
+    transform: scale(1.05) rotate(3deg);
+  }
+  .login-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
+  .login-header p { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
   .login-card {
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.09);
-    border-radius: 16px;
-    padding: 28px 32px;
-    backdrop-filter: blur(16px);
-    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
+    background: rgba(14, 17, 26, 0.45);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 32px 36px;
+    backdrop-filter: blur(24px);
+    box-shadow: var(--shadow);
   }
   .divider {
     height: 1px;
     background: var(--border);
-    margin: 20px 0;
+    margin: 24px 0;
   }
-  .login-footer { text-align: center; margin-top: 18px; font-size: 12px; color: var(--text-muted); }
+  .login-footer { text-align: center; margin-top: 24px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
   .btn-login {
     width: 100%;
     justify-content: center;
diff --git a/vsphere_backup/templates/nfs.html b/vsphere_backup/templates/nfs.html
index a0332bd..4b141be 100644
--- a/vsphere_backup/templates/nfs.html
+++ b/vsphere_backup/templates/nfs.html
@@ -7,75 +7,85 @@
   .nfs-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-    gap: 16px;
-    margin-bottom: 28px;
+    gap: 20px;
+    margin-bottom: 32px;
   }
   .nfs-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 20px;
-    transition: all .2s;
+    padding: 24px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
   .nfs-card::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 3px;
-    background: linear-gradient(90deg, var(--accent-2), #00a8cc);
+    background: linear-gradient(90deg, var(--accent-2), #0891b2);
+  }
+  .nfs-card:hover { 
+    border-color: var(--border-bright); 
+    transform: translateY(-4px); 
+    box-shadow: var(--shadow-hover);
   }
-  .nfs-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
 
-  .nfs-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
-  .nfs-device { font-size: 14px; font-weight: 600; color: var(--accent-2); word-break: break-all; }
-  .nfs-mountpoint { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
+  .nfs-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
+  .nfs-device { font-size: 15px; font-weight: 700; color: var(--accent-2); word-break: break-all; letter-spacing: -0.01em; }
+  .nfs-mountpoint { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
 
-  .disk-bar-wrap { margin: 14px 0 10px; }
-  .disk-bar-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 5px; }
+  .disk-bar-wrap { margin: 18px 0 12px; }
+  .disk-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
   .disk-bar {
-    height: 6px; border-radius: 100px;
-    background: rgba(255,255,255,0.08);
+    height: 8px; border-radius: 100px;
+    background: rgba(8, 10, 16, 0.5);
     overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1) inset;
   }
   .disk-bar-fill {
     height: 100%; border-radius: 100px;
-    background: linear-gradient(90deg, var(--accent-2), var(--accent));
+    background: var(--accent-gradient);
     transition: width .4s ease;
   }
-  .disk-bar-fill.warn { background: linear-gradient(90deg, var(--warning), #e07b00); }
-  .disk-bar-fill.danger { background: linear-gradient(90deg, var(--danger), #c0392b); }
+  .disk-bar-fill.warn { background: linear-gradient(90deg, var(--warning), #d97706); }
+  .disk-bar-fill.danger { background: linear-gradient(90deg, var(--danger), #b91c1c); }
 
-  .disk-stats { display: flex; gap: 12px; margin-top: 8px; }
-  .ds { font-size: 11.5px; }
-  .ds-val { font-weight: 600; }
-  .ds-lbl { color: var(--text-muted); }
+  .disk-stats { display: flex; gap: 16px; margin-top: 10px; }
+  .ds { font-size: 12px; }
+  .ds-val { font-weight: 700; }
+  .ds-lbl { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
 
-  .nfs-actions { margin-top: 14px; display: flex; gap: 8px; }
+  .nfs-actions { margin-top: 18px; display: flex; gap: 10px; }
 
   .mount-form-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 24px;
-    max-width: 640px;
+    padding: 28px;
+    max-width: 680px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
-  .form-row-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 12px; }
-  .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .form-row-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 16px; }
+  .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 
   .empty-state {
-    text-align: center; padding: 50px 20px;
+    text-align: center; padding: 56px 20px;
     color: var(--text-secondary);
   }
-  .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
+  .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: .4; }
 
   .linux-warn {
-    background: rgba(245,158,11,.08);
-    border: 1px solid rgba(245,158,11,.25);
+    background: rgba(245, 158, 11, 0.08);
+    border: 1px solid rgba(245, 158, 11, 0.25);
     border-radius: var(--radius-sm);
-    padding: 14px 18px;
-    color: var(--warning);
-    margin-bottom: 20px;
-    font-size: 13.5px;
+    padding: 16px 20px;
+    color: #fbbf24;
+    margin-bottom: 24px;
+    font-size: 14px;
+    font-weight: 500;
   }
 </style>
 {% endblock %}
diff --git a/vsphere_backup/templates/vms.html b/vsphere_backup/templates/vms.html
index e1b63e6..48acd95 100644
--- a/vsphere_backup/templates/vms.html
+++ b/vsphere_backup/templates/vms.html
@@ -7,65 +7,79 @@
   .vms-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: 16px;
-    margin-top: 24px;
+    gap: 20px;
+    margin-top: 28px;
   }
   .vm-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 20px;
-    transition: all .2s ease;
+    padding: 24px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: default;
     position: relative;
     overflow: hidden;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
   .vm-card::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 3px;
-    background: linear-gradient(90deg, var(--accent), var(--accent-2));
+    background: var(--accent-gradient);
     opacity: 0;
-    transition: opacity .2s;
+    transition: opacity 0.3s;
+  }
+  .vm-card:hover { 
+    border-color: var(--border-bright); 
+    transform: translateY(-4px) scale(1.01); 
+    box-shadow: var(--shadow-hover); 
   }
-  .vm-card:hover { border-color: var(--border-bright); transform: translateY(-2px); box-shadow: var(--shadow); }
   .vm-card:hover::before { opacity: 1; }
 
   .vm-card-header {
     display: flex; align-items: flex-start; justify-content: space-between;
-    margin-bottom: 14px;
+    margin-bottom: 18px;
   }
   .vm-name {
-    font-size: 15px; font-weight: 600; word-break: break-word;
+    font-size: 16px; font-weight: 700; word-break: break-word;
     flex: 1; padding-right: 10px;
+    letter-spacing: -0.01em;
   }
-  .vm-os { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
+  .vm-os { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
 
   .vm-stats {
     display: grid; grid-template-columns: 1fr 1fr;
-    gap: 10px; margin: 14px 0;
+    gap: 12px; margin: 18px 0;
   }
   .stat {
-    background: rgba(255,255,255,0.03);
-    border: 1px solid var(--border);
+    background: rgba(255,255,255,0.01);
+    border: 1px solid rgba(255,255,255,0.03);
     border-radius: var(--radius-sm);
-    padding: 8px 12px;
+    padding: 10px 14px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   }
-  .stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
-  .stat-value { font-size: 14px; font-weight: 600; margin-top: 2px; }
+  .stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
+  .stat-value { font-size: 14px; font-weight: 600; margin-top: 3px; }
 
   .vm-footer {
-    display: flex; gap: 8px; margin-top: 16px;
+    display: flex; gap: 10px; margin-top: 20px;
     flex-wrap: wrap;
   }
   .vm-footer .btn { flex: 1; min-width: 110px; justify-content: center; }
 
   .search-bar {
     display: flex; align-items: center; gap: 12px;
-    background: var(--bg-card);
+    background: rgba(8, 10, 16, 0.4);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 10px 16px;
     max-width: 340px;
+    transition: all 0.2s ease;
+  }
+  .search-bar:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+    background: rgba(8, 10, 16, 0.6);
   }
   .search-bar input {
     background: none; border: none; outline: none;
@@ -78,33 +92,36 @@
     margin-bottom: 4px; flex-wrap: wrap;
   }
   .filter-chip {
-    padding: 5px 14px; border-radius: 100px;
-    font-size: 12.5px; font-weight: 500; cursor: pointer;
-    border: 1px solid var(--border); background: none;
-    color: var(--text-secondary); transition: all .15s;
+    padding: 6px 16px; border-radius: 100px;
+    font-size: 13px; font-weight: 600; cursor: pointer;
+    border: 1px solid var(--border); background: rgba(255,255,255,0.01);
+    color: var(--text-secondary); transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
   }
-  .filter-chip:hover { border-color: var(--border-bright); color: var(--text-primary); }
-  .filter-chip.active { background: rgba(124,107,255,.15); border-color: var(--accent); color: var(--accent); }
+  .filter-chip:hover { border-color: var(--border-bright); color: var(--text-primary); transform: translateY(-1px); }
+  .filter-chip.active { background: rgba(99, 102, 241, .15); border-color: var(--accent); color: #a5b4fc; box-shadow: 0 4px 12px rgba(99,102,241,0.1); }
 
   .stat-chips {
-    display: flex; gap: 10px; align-items: center;
-    flex-wrap: wrap; margin-bottom: 20px;
+    display: flex; gap: 12px; align-items: center;
+    flex-wrap: wrap; margin-bottom: 24px;
   }
   .stat-chip {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 10px 18px;
+    padding: 12px 20px;
     text-align: center;
+    min-width: 100px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(8px);
   }
-  .stat-chip-value { font-size: 22px; font-weight: 700; }
-  .stat-chip-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
+  .stat-chip-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
+  .stat-chip-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 
   .empty-state {
-    text-align: center; padding: 60px 20px;
+    text-align: center; padding: 64px 20px;
     color: var(--text-secondary);
   }
-  .empty-state .empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.5; }
+  .empty-state .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: 0.4; }
 </style>
 {% endblock %}