@authrim/setup 0.1.62 → 0.1.64

package/dist/web/ui.js

@@ -14,18 +14,74 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Authrim Setup</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
   <style>
     :root {
+      /* Typography */
+      --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+      --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
+
+      /* Light theme colors */
       --primary: #2563eb;
       --primary-dark: #1d4ed8;
-      --success: #10b981;
-      --error: #ef4444;
-      --warning: #f59e0b;
-      --bg: #f8fafc;
-      --card-bg: #ffffff;
-      --text: #1e293b;
-      --text-muted: #64748b;
-      --border: #e2e8f0;
+      --primary-light: #3b82f6;
+      --accent: #c2410c;
+      --success: #059669;
+      --error: #dc2626;
+      --warning: #d97706;
+      --bg: #f8f5e3;
+      --bg-secondary: #f3eed6;
+      --card-bg: #fffefa;
+      --card-bg-hover: #fdfcf4;
+      --text: #1c1917;
+      --text-muted: #57534e;
+      --text-subtle: #78716c;
+      --border: #d6d3d1;
+      --border-light: #e7e5e4;
+
+      /* Splash */
+      --splash-bg: #1c1917;
+      --splash-text: #f8f5e3;
+
+      /* Shadows & Effects */
+      --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
+      --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06);
+      --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.08);
+      --shadow-card: 0 1px 3px rgba(28, 25, 23, 0.04), 0 4px 12px rgba(28, 25, 23, 0.02);
+
+      /* Transitions */
+      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Dark theme */
+    [data-theme="dark"] {
+      --primary: #60a5fa;
+      --primary-dark: #3b82f6;
+      --primary-light: #93c5fd;
+      --accent: #fb923c;
+      --success: #34d399;
+      --error: #f87171;
+      --warning: #fbbf24;
+      --bg: #0c0a09;
+      --bg-secondary: #1c1917;
+      --card-bg: #1c1917;
+      --card-bg-hover: #292524;
+      --text: #fafaf9;
+      --text-muted: #a8a29e;
+      --text-subtle: #78716c;
+      --border: #44403c;
+      --border-light: #292524;
+      --splash-bg: #0c0a09;
+      --splash-text: #f8f5e3;
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
+      --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 
     * {
@@ -35,155 +91,409 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-family: var(--font-sans);
       background: var(--bg);
       color: var(--text);
       line-height: 1.6;
       min-height: 100vh;
+      transition: background-color var(--transition-slow), color var(--transition-slow);
+    }
+
+    /* Subtle grain texture */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      opacity: 0.015;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+      z-index: 9998;
+    }
+
+    [data-theme="dark"] body::before {
+      opacity: 0.03;
+    }
+
+    /* ========================================
+       SPLASH SCREEN
+       ======================================== */
+    .splash {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      background: var(--splash-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 600ms ease, visibility 600ms ease;
+    }
+
+    .splash.fade-out {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .splash-content {
+      text-align: center;
+      opacity: 0;
+      transform: translateY(16px);
+      animation: splash-reveal 800ms ease forwards;
+      animation-delay: 200ms;
+    }
+
+    .splash-logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .splash-icon {
+      width: 56px;
+      height: 56px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.75rem;
+      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
+    }
+
+    .splash-title {
+      font-family: var(--font-serif);
+      font-size: clamp(3rem, 8vw, 4.5rem);
+      font-weight: 600;
+      color: var(--splash-text);
+      letter-spacing: -0.03em;
+      line-height: 1;
+    }
+
+    .splash-tagline {
+      font-family: var(--font-sans);
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-subtle);
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      margin-bottom: 3rem;
+    }
+
+    .splash-loader {
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      border: 2px solid var(--border);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes splash-reveal {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* ========================================
+       THEME TOGGLE
+       ======================================== */
+    .theme-toggle {
+      position: fixed;
+      top: 1.25rem;
+      right: 1.5rem;
+      z-index: 100;
+      width: 44px;
+      height: 44px;
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 1.25rem;
+      transition: all var(--transition-fast);
+      box-shadow: var(--shadow-sm);
     }
 
+    .theme-toggle:hover {
+      background: var(--card-bg-hover);
+      border-color: var(--primary);
+      transform: scale(1.05);
+    }
+
+    .theme-toggle:active {
+      transform: scale(0.95);
+    }
+
+    /* ========================================
+       LAYOUT
+       ======================================== */
     .container {
-      max-width: 800px;
+      max-width: 820px;
       margin: 0 auto;
-      padding: 2rem;
+      padding: 2.5rem 2rem;
     }
 
     header {
       text-align: center;
-      margin-bottom: 2rem;
+      margin-bottom: 2.5rem;
+      padding-top: 0.5rem;
+    }
+
+    .header-brand {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .header-icon {
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
     }
 
     h1 {
-      font-size: 2rem;
+      font-family: var(--font-serif);
+      font-size: clamp(2rem, 5vw, 2.75rem);
+      font-weight: 600;
+      color: var(--text);
+      letter-spacing: -0.02em;
+      line-height: 1.1;
+    }
+
+    .header-wizard {
+      font-family: var(--font-serif);
+      font-size: 1.25rem;
+      font-weight: 400;
+      font-style: italic;
       color: var(--primary);
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.25rem;
     }
 
     .subtitle {
+      font-family: var(--font-sans);
+      font-size: 0.9rem;
       color: var(--text-muted);
+      letter-spacing: 0.02em;
     }
 
+    /* ========================================
+       CARDS
+       ======================================== */
     .card {
       background: var(--card-bg);
-      border-radius: 12px;
-      padding: 1.5rem;
-      margin-bottom: 1.5rem;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      border-radius: 16px;
+      border: 1px solid var(--border-light);
+      padding: 2rem;
+      margin-bottom: 1.75rem;
+      box-shadow: var(--shadow-card);
+      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+    }
+
+    .card:hover {
+      border-color: var(--border);
     }
 
     .card-title {
-      font-size: 1.25rem;
+      font-family: var(--font-sans);
+      font-size: 1.35rem;
       font-weight: 600;
-      margin-bottom: 1rem;
+      margin-bottom: 1.25rem;
       display: flex;
       align-items: center;
-      gap: 0.5rem;
+      gap: 0.625rem;
+      color: var(--text);
     }
 
+    /* ========================================
+       STATUS BADGES
+       ======================================== */
     .status-badge {
-      font-size: 0.75rem;
-      padding: 0.25rem 0.5rem;
-      border-radius: 9999px;
-      font-weight: 500;
+      font-family: var(--font-sans);
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 0.3rem 0.625rem;
+      border-radius: 6px;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+    }
+
+    .status-pending {
+      background: var(--bg-secondary);
+      color: var(--text-muted);
+    }
+    .status-running {
+      background: rgba(37, 99, 235, 0.1);
+      color: var(--primary);
+    }
+    .status-success {
+      background: rgba(5, 150, 105, 0.1);
+      color: var(--success);
+    }
+    .status-error {
+      background: rgba(220, 38, 38, 0.1);
+      color: var(--error);
+    }
+    .status-warning {
+      background: rgba(217, 119, 6, 0.1);
+      color: var(--warning);
     }
 
-    .status-pending { background: var(--border); color: var(--text-muted); }
-    .status-running { background: #dbeafe; color: var(--primary); }
-    .status-success { background: #d1fae5; color: var(--success); }
-    .status-error { background: #fee2e2; color: var(--error); }
-    .status-warning { background: #fef3c7; color: #b45309; }
+    [data-theme="dark"] .status-running { background: rgba(96, 165, 250, 0.15); }
+    [data-theme="dark"] .status-success { background: rgba(52, 211, 153, 0.15); }
+    [data-theme="dark"] .status-error { background: rgba(248, 113, 113, 0.15); }
+    [data-theme="dark"] .status-warning { background: rgba(251, 191, 36, 0.15); }
 
-    /* Mode selection cards */
+    /* ========================================
+       MODE SELECTION CARDS
+       ======================================== */
     .mode-cards {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      margin-bottom: 1rem;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 1.25rem;
+      margin-bottom: 1.25rem;
     }
 
     .mode-card {
-      border: 2px solid var(--border);
-      border-radius: 12px;
-      padding: 1.5rem;
+      background: var(--card-bg);
+      border: 2px solid var(--border-light);
+      border-radius: 14px;
+      padding: 1.75rem;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all var(--transition-base);
       position: relative;
     }
 
     .mode-card:hover {
       border-color: var(--primary);
-      background: #f8fafc;
+      background: var(--card-bg-hover);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
     }
 
     .mode-card.selected {
       border-color: var(--primary);
-      background: #eff6ff;
+      background: rgba(37, 99, 235, 0.04);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    [data-theme="dark"] .mode-card.selected {
+      background: rgba(96, 165, 250, 0.08);
+      box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
     }
 
     .mode-card .mode-icon {
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
+      font-size: 2.25rem;
+      margin-bottom: 0.75rem;
+      display: block;
     }
 
     .mode-card h3 {
+      font-family: var(--font-sans);
       font-size: 1.1rem;
+      font-weight: 600;
       margin-bottom: 0.5rem;
+      color: var(--text);
     }
 
     .mode-card p {
-      font-size: 0.875rem;
+      font-size: 0.9rem;
       color: var(--text-muted);
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.875rem;
+      line-height: 1.5;
     }
 
     .mode-card ul {
       font-size: 0.8rem;
-      color: var(--text-muted);
+      color: var(--text-subtle);
       margin-left: 1rem;
+      line-height: 1.6;
     }
 
     .mode-card ul li {
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.3rem;
     }
 
     .mode-badge {
       position: absolute;
-      top: -8px;
-      right: 10px;
-      background: var(--primary);
+      top: -10px;
+      right: 12px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
-      font-size: 0.7rem;
-      padding: 0.2rem 0.5rem;
-      border-radius: 4px;
-      font-weight: 500;
+      font-family: var(--font-sans);
+      font-size: 0.65rem;
+      font-weight: 600;
+      padding: 0.35rem 0.625rem;
+      border-radius: 6px;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
     }
 
+    /* ========================================
+       FORMS
+       ======================================== */
     .form-group {
-      margin-bottom: 1rem;
+      margin-bottom: 1.25rem;
     }
 
     label {
       display: block;
+      font-family: var(--font-sans);
       font-weight: 500;
+      font-size: 0.9rem;
       margin-bottom: 0.5rem;
+      color: var(--text);
     }
 
     input[type="text"],
     input[type="password"],
+    input[type="email"],
     input[type="file"],
     select {
       width: 100%;
-      padding: 0.75rem;
+      padding: 0.875rem 1rem;
       border: 1px solid var(--border);
-      border-radius: 8px;
-      font-size: 1rem;
-      transition: border-color 0.2s;
+      border-radius: 10px;
+      font-family: var(--font-sans);
+      font-size: 0.95rem;
+      background: var(--card-bg);
+      color: var(--text);
+      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+    }
+
+    input::placeholder,
+    select::placeholder {
+      color: var(--text-subtle);
     }
 
     input:focus,
     select:focus {
       outline: none;
       border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    [data-theme="dark"] input:focus,
+    [data-theme="dark"] select:focus {
+      box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
     }
 
     /* Fix browser autofill/autocomplete styling */
@@ -191,9 +501,17 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     input:-webkit-autofill:hover,
     input:-webkit-autofill:focus,
     input:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px white inset !important;
-      -webkit-text-fill-color: #1e293b !important;
-      caret-color: #1e293b !important;
+      -webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important;
+      -webkit-text-fill-color: var(--text) !important;
+      caret-color: var(--text) !important;
+    }
+
+    small {
+      display: block;
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      margin-top: 0.375rem;
+      line-height: 1.4;
     }
 
     .checkbox-group {
@@ -206,28 +524,42 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       display: flex;
       align-items: center;
       gap: 0.5rem;
+      cursor: pointer;
     }
 
-    /* Infrastructure info section */
+    .checkbox-item input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
+
+    /* ========================================
+       INFRASTRUCTURE INFO SECTION
+       ======================================== */
     .infra-section {
-      background: #f8fafc;
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1rem;
-      margin-bottom: 1rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 12px;
+      padding: 1.25rem;
+      margin-bottom: 1.25rem;
     }
 
     .infra-section h4 {
-      margin: 0 0 0.75rem 0;
-      font-size: 0.9rem;
+      margin: 0 0 0.875rem 0;
+      font-family: var(--font-sans);
+      font-size: 0.85rem;
+      font-weight: 600;
       color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
     }
 
     .infra-item {
       display: flex;
       justify-content: space-between;
-      padding: 0.25rem 0;
-      font-size: 0.85rem;
+      padding: 0.375rem 0;
+      font-size: 0.875rem;
     }
 
     .infra-label {
@@ -235,22 +567,27 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .infra-value {
-      font-family: monospace;
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
       color: var(--primary);
     }
 
-    /* Domain configuration section */
+    /* ========================================
+       DOMAIN CONFIGURATION SECTION
+       ======================================== */
     .domain-section {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1rem;
-      margin-bottom: 1rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 12px;
+      padding: 1.25rem;
+      margin-bottom: 1.25rem;
     }
 
     .domain-section h4 {
-      margin: 0 0 0.5rem 0;
-      font-size: 0.95rem;
+      margin: 0 0 0.625rem 0;
+      font-family: var(--font-sans);
+      font-size: 1rem;
+      font-weight: 600;
       color: var(--text);
       display: flex;
       align-items: center;
@@ -261,9 +598,14 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       font-size: 0.8rem;
       color: var(--text-muted);
       margin-bottom: 1rem;
-      padding: 0.5rem;
-      background: #f0f9ff;
-      border-radius: 4px;
+      padding: 0.625rem 0.75rem;
+      background: rgba(37, 99, 235, 0.06);
+      border-radius: 8px;
+      line-height: 1.5;
+    }
+
+    [data-theme="dark"] .domain-section .section-hint {
+      background: rgba(96, 165, 250, 0.1);
     }
 
     .domain-row {
@@ -294,14 +636,15 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
 
     .domain-default {
       position: absolute;
-      right: 10px;
+      right: 12px;
       top: 50%;
       transform: translateY(-50%);
-      font-size: 0.7rem;
-      color: var(--text-muted);
-      background: #f1f5f9;
-      padding: 2px 6px;
-      border-radius: 4px;
+      font-family: var(--font-mono);
+      font-size: 0.65rem;
+      color: var(--text-subtle);
+      background: var(--bg);
+      padding: 3px 8px;
+      border-radius: 5px;
       max-width: 160px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -309,11 +652,15 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .issuer-preview {
-      margin-top: 0.75rem;
-      padding: 0.5rem;
-      background: #f0fdf4;
-      border-radius: 4px;
-      font-size: 0.85rem;
+      margin-top: 0.875rem;
+      padding: 0.625rem 0.75rem;
+      background: rgba(5, 150, 105, 0.08);
+      border-radius: 8px;
+      font-size: 0.875rem;
+    }
+
+    [data-theme="dark"] .issuer-preview {
+      background: rgba(52, 211, 153, 0.1);
     }
 
     .issuer-preview .label {
@@ -322,87 +669,187 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .issuer-preview .value {
-      color: #16a34a;
-      font-family: monospace;
+      color: var(--success);
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
       word-break: break-all;
     }
 
+    /* ========================================
+       BUTTONS
+       ======================================== */
     button {
-      padding: 0.75rem 1.5rem;
-      border-radius: 8px;
-      font-size: 1rem;
-      font-weight: 500;
+      padding: 0.875rem 1.75rem;
+      border-radius: 10px;
+      font-family: var(--font-sans);
+      font-size: 0.95rem;
+      font-weight: 600;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all var(--transition-fast);
       border: none;
     }
 
     .btn-primary {
-      background: var(--primary);
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
     }
 
     .btn-primary:hover:not(:disabled) {
-      background: var(--primary-dark);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+    }
+
+    .btn-primary:active:not(:disabled) {
+      transform: translateY(0);
     }
 
     .btn-primary:disabled {
-      opacity: 0.6;
+      opacity: 0.5;
       cursor: not-allowed;
+      box-shadow: none;
     }
 
     .btn-secondary {
-      background: var(--border);
+      background: var(--bg-secondary);
       color: var(--text);
+      border: 1px solid var(--border);
     }
 
     .btn-secondary:hover {
-      background: #cbd5e1;
+      background: var(--border-light);
+      border-color: var(--border);
     }
 
     .button-group {
       display: flex;
       gap: 1rem;
-      margin-top: 1.5rem;
+      margin-top: 2rem;
     }
 
+    /* ========================================
+       PROGRESS LOG
+       ======================================== */
     .progress-log {
-      background: #1e293b;
-      border-radius: 8px;
-      padding: 1rem;
-      max-height: 300px;
+      background: #0f172a;
+      border-radius: 12px;
+      padding: 1.25rem;
+      max-height: 320px;
       overflow-y: auto;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.875rem;
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      border: 1px solid #1e293b;
     }
 
     .progress-log pre {
       color: #e2e8f0;
       white-space: pre-wrap;
       word-break: break-word;
+      line-height: 1.6;
+    }
+
+    /* Progress UI Components */
+    .progress-container {
+      margin: 1.25rem 0;
+    }
+
+    .progress-status {
+      display: flex;
+      align-items: center;
+      gap: 0.875rem;
+      margin-bottom: 1rem;
+    }
+
+    .progress-status .spinner {
+      width: 22px;
+      height: 22px;
+      border: 2px solid var(--border);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .progress-bar-wrapper {
+      background: var(--bg-secondary);
+      border-radius: 6px;
+      height: 10px;
+      overflow: hidden;
+      margin-bottom: 0.625rem;
+    }
+
+    .progress-bar {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
+      border-radius: 6px;
+      transition: width 0.4s ease;
     }
 
+    .progress-text {
+      font-family: var(--font-sans);
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+
+    .log-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 1rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 8px;
+      cursor: pointer;
+      font-family: var(--font-sans);
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-top: 1rem;
+      transition: all var(--transition-fast);
+    }
+
+    .log-toggle:hover {
+      background: var(--border-light);
+      color: var(--text);
+    }
+
+    .log-toggle .arrow {
+      transition: transform var(--transition-fast);
+    }
+
+    .log-toggle.open .arrow {
+      transform: rotate(90deg);
+    }
+
+    /* ========================================
+       STEP INDICATOR
+       ======================================== */
     .step-indicator {
       display: flex;
       justify-content: center;
-      gap: 0.5rem;
-      margin-bottom: 2rem;
+      gap: 0.375rem;
+      margin-bottom: 2.5rem;
     }
 
     .step {
-      width: 40px;
-      height: 40px;
+      width: 38px;
+      height: 38px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-family: var(--font-sans);
       font-weight: 600;
-      font-size: 0.875rem;
+      font-size: 0.85rem;
+      transition: all var(--transition-base);
     }
 
     .step-active {
-      background: var(--primary);
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
     }
 
     .step-complete {
@@ -411,52 +858,104 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .step-pending {
-      background: var(--border);
-      color: var(--text-muted);
+      background: var(--bg-secondary);
+      color: var(--text-subtle);
+      border: 1px solid var(--border-light);
     }
 
     .step-connector {
-      width: 40px;
+      width: 32px;
       height: 2px;
-      background: var(--border);
+      background: var(--border-light);
       align-self: center;
     }
 
+    /* ========================================
+       ALERTS
+       ======================================== */
     .alert {
-      padding: 1rem;
-      border-radius: 8px;
-      margin-bottom: 1rem;
+      padding: 1rem 1.25rem;
+      border-radius: 10px;
+      margin-bottom: 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.5;
+    }
+
+    .alert-success {
+      background: rgba(5, 150, 105, 0.08);
+      color: var(--success);
+      border: 1px solid rgba(5, 150, 105, 0.2);
+    }
+    .alert-error {
+      background: rgba(220, 38, 38, 0.08);
+      color: var(--error);
+      border: 1px solid rgba(220, 38, 38, 0.2);
+    }
+    .alert-warning {
+      background: rgba(217, 119, 6, 0.08);
+      color: var(--warning);
+      border: 1px solid rgba(217, 119, 6, 0.2);
+    }
+    .alert-info {
+      background: rgba(37, 99, 235, 0.06);
+      color: var(--primary);
+      border: 1px solid rgba(37, 99, 235, 0.15);
+    }
+
+    [data-theme="dark"] .alert-success {
+      background: rgba(52, 211, 153, 0.1);
+      border-color: rgba(52, 211, 153, 0.25);
+    }
+    [data-theme="dark"] .alert-error {
+      background: rgba(248, 113, 113, 0.1);
+      border-color: rgba(248, 113, 113, 0.25);
+    }
+    [data-theme="dark"] .alert-warning {
+      background: rgba(251, 191, 36, 0.1);
+      border-color: rgba(251, 191, 36, 0.25);
+    }
+    [data-theme="dark"] .alert-info {
+      background: rgba(96, 165, 250, 0.1);
+      border-color: rgba(96, 165, 250, 0.2);
     }
 
-    .alert-success { background: #d1fae5; color: #065f46; }
-    .alert-error { background: #fee2e2; color: #991b1b; }
-    .alert-warning { background: #fef3c7; color: #92400e; }
-    .alert-info { background: #dbeafe; color: #1e40af; }
-
+    /* ========================================
+       URL DISPLAY
+       ======================================== */
     .url-display {
-      background: var(--bg);
-      padding: 1rem;
-      border-radius: 8px;
-      margin-top: 1rem;
+      background: var(--bg-secondary);
+      padding: 1.25rem;
+      border-radius: 12px;
+      margin-top: 1.25rem;
+      border: 1px solid var(--border-light);
     }
 
     .url-item {
       display: flex;
-      gap: 0.5rem;
-      margin-bottom: 0.5rem;
+      gap: 0.75rem;
+      margin-bottom: 0.625rem;
+      align-items: baseline;
     }
 
     .url-label {
-      font-weight: 500;
-      min-width: 100px;
+      font-family: var(--font-sans);
+      font-weight: 600;
+      font-size: 0.85rem;
+      min-width: 110px;
+      color: var(--text-muted);
     }
 
     .url-value {
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
       color: var(--primary);
       word-break: break-all;
       overflow-wrap: break-word;
     }
 
+    /* ========================================
+       FILE INPUT
+       ======================================== */
     .file-input-wrapper {
       position: relative;
       overflow: hidden;
@@ -474,74 +973,92 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .file-input-btn {
-      display: inline-block;
-      padding: 0.75rem 1.5rem;
-      background: var(--border);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.875rem 1.5rem;
+      background: var(--bg-secondary);
       color: var(--text);
-      border-radius: 8px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
       cursor: pointer;
+      font-family: var(--font-sans);
+      font-weight: 500;
+      transition: all var(--transition-fast);
     }
 
     .file-input-btn:hover {
-      background: #cbd5e1;
+      background: var(--border-light);
+      border-color: var(--primary);
     }
 
     .config-preview {
-      background: var(--bg);
-      border-radius: 8px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
       padding: 1rem;
       margin-top: 1rem;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.8rem;
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
       max-height: 200px;
       overflow-y: auto;
+      line-height: 1.5;
     }
 
     .hidden { display: none; }
 
-    /* Modal styles */
+    /* ========================================
+       MODAL
+       ======================================== */
     .modal {
       position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .modal.hidden { display: none; }
+
     .modal-backdrop {
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
     }
+
     .modal-content {
       position: relative;
       background: var(--card-bg);
-      border-radius: 12px;
-      padding: 1.5rem;
-      max-width: 450px;
+      border-radius: 16px;
+      padding: 2rem;
+      max-width: 460px;
       width: 90%;
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      box-shadow: var(--shadow-lg);
+      border: 1px solid var(--border-light);
     }
 
-    /* Resource preview styles */
-    .resource-preview {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1rem;
+    .modal-content h3 {
+      font-family: var(--font-sans);
+      font-size: 1.25rem;
+      font-weight: 600;
       margin-bottom: 1rem;
     }
 
+    /* ========================================
+       RESOURCE PREVIEW
+       ======================================== */
+    .resource-preview {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 12px;
+      padding: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+
     .resource-list {
       display: grid;
-      gap: 1rem;
+      gap: 1.25rem;
     }
 
     .resource-category {
@@ -550,6 +1067,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
 
     .resource-category strong {
       display: block;
+      font-family: var(--font-sans);
+      font-weight: 600;
       margin-bottom: 0.5rem;
       color: var(--text);
     }
@@ -561,9 +1080,9 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .resource-category li {
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.8rem;
-      margin-bottom: 0.25rem;
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      margin-bottom: 0.3rem;
     }
 
     /* Progress spinner */
@@ -587,6 +1106,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       align-items: center;
       margin-bottom: 0.5rem;
       color: #e2e8f0;
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
     }
 
     .progress-item.complete {
@@ -597,28 +1118,32 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       color: var(--error);
     }
 
-    /* Environment cards */
+    /* ========================================
+       ENVIRONMENT CARDS
+       ======================================== */
     .env-cards {
       display: grid;
       gap: 1rem;
-      margin-bottom: 1rem;
+      margin-bottom: 1.25rem;
     }
 
     .env-card {
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1rem;
+      background: var(--card-bg);
+      border: 1px solid var(--border-light);
+      border-radius: 12px;
+      padding: 1.25rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
-      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+      transition: all var(--transition-fast);
     }
 
     .env-card:hover {
       border-color: var(--primary);
-      background: #f8fafc;
-      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+      background: var(--card-bg-hover);
+      box-shadow: var(--shadow-md);
+      transform: translateY(-1px);
     }
 
     .env-card-info {
@@ -626,14 +1151,16 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .env-card-name {
+      font-family: var(--font-sans);
       font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
+      color: var(--text);
     }
 
     .env-card-stats {
       display: flex;
-      gap: 1rem;
+      gap: 1.25rem;
       font-size: 0.8rem;
       color: var(--text-muted);
     }
@@ -641,70 +1168,79 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     .env-card-stat {
       display: flex;
       align-items: center;
-      gap: 0.25rem;
+      gap: 0.375rem;
     }
 
     .env-card-actions {
       display: flex;
-      gap: 0.5rem;
+      gap: 0.625rem;
     }
 
     .btn-danger {
       background: var(--error);
       color: white;
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
+      padding: 0.625rem 1rem;
+      font-size: 0.85rem;
+      border-radius: 8px;
     }
 
     .btn-danger:hover {
-      background: #dc2626;
+      background: #b91c1c;
+      transform: translateY(-1px);
     }
 
     .btn-info {
       background: var(--primary);
       color: white;
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
+      padding: 0.625rem 1rem;
+      font-size: 0.85rem;
+      border-radius: 8px;
     }
 
     .btn-info:hover {
       background: var(--primary-dark);
+      transform: translateY(-1px);
     }
 
-    /* Resource list in details view */
+    /* ========================================
+       RESOURCE LIST (Details view)
+       ======================================== */
     .resource-section {
-      margin-bottom: 1.5rem;
+      margin-bottom: 1.75rem;
     }
 
     .resource-section-title {
+      font-family: var(--font-sans);
       font-size: 1rem;
       font-weight: 600;
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.875rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
+      color: var(--text);
     }
 
     .resource-section-title .count {
       font-size: 0.8rem;
       color: var(--text-muted);
-      font-weight: normal;
+      font-weight: 500;
     }
 
     .resource-list {
-      background: var(--bg);
-      border-radius: 8px;
-      padding: 0.75rem;
+      background: var(--bg-secondary);
+      border-radius: 10px;
+      padding: 0.875rem;
+      border: 1px solid var(--border-light);
     }
 
     .resource-item {
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.8rem;
-      padding: 0.25rem 0.5rem;
-      margin-bottom: 0.25rem;
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      padding: 0.5rem 0.75rem;
+      margin-bottom: 0.375rem;
       background: var(--card-bg);
-      border-radius: 4px;
-      border: 1px solid var(--border);
+      border-radius: 6px;
+      border: 1px solid var(--border-light);
     }
 
     .resource-item:last-child {
@@ -712,14 +1248,14 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .resource-item-name {
-      font-weight: 500;
+      font-weight: 600;
     }
 
     .resource-item-details {
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       color: var(--text-muted);
       margin-top: 0.25rem;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: var(--font-sans);
     }
 
     .resource-item-details span {
@@ -746,29 +1282,35 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       font-size: 0.875rem;
     }
 
-    /* Delete options */
+    /* ========================================
+       DELETE OPTIONS
+       ======================================== */
     .delete-options {
       display: grid;
-      gap: 0.75rem;
+      gap: 0.875rem;
     }
 
     .delete-option {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem;
-      border: 1px solid var(--border);
-      border-radius: 8px;
+      gap: 0.875rem;
+      padding: 1rem;
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
       cursor: pointer;
+      background: var(--card-bg);
+      transition: all var(--transition-fast);
     }
 
     .delete-option:hover {
-      background: var(--bg);
+      background: var(--bg-secondary);
+      border-color: var(--border);
     }
 
     .delete-option input[type="checkbox"] {
       width: 18px;
       height: 18px;
+      accent-color: var(--error);
     }
 
     .delete-option span {
@@ -781,37 +1323,43 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       font-size: 0.8rem;
     }
 
-    /* Database configuration styles */
+    /* ========================================
+       DATABASE CONFIGURATION
+       ======================================== */
     .database-config-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.5rem;
-      margin-bottom: 1.5rem;
+      margin-bottom: 1.75rem;
     }
 
     .database-config-stack {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
-      margin-bottom: 1.5rem;
+      margin-bottom: 1.75rem;
     }
 
     .database-card {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 0.5rem;
-      padding: 1.25rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-light);
+      border-radius: 12px;
+      padding: 1.5rem;
     }
 
     .database-card h3 {
-      margin: 0 0 1rem 0;
+      margin: 0 0 1.125rem 0;
+      font-family: var(--font-sans);
       font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text);
     }
 
     .db-description {
       font-size: 0.875rem;
       color: var(--text-muted);
-      margin-bottom: 1rem;
+      margin-bottom: 1.25rem;
+      line-height: 1.6;
     }
 
     .db-description p {
@@ -824,21 +1372,28 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     }
 
     .db-description li {
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.3rem;
     }
 
     .db-hint {
       font-style: italic;
-      margin-top: 0.75rem;
-      padding: 0.5rem;
-      background: #f0f9ff;
-      border-radius: 4px;
+      margin-top: 0.875rem;
+      padding: 0.625rem 0.75rem;
+      background: rgba(37, 99, 235, 0.06);
+      border-radius: 8px;
+      font-size: 0.85rem;
+    }
+
+    [data-theme="dark"] .db-hint {
+      background: rgba(96, 165, 250, 0.1);
     }
 
     .region-selection h4 {
-      margin: 0 0 0.75rem 0;
+      margin: 0 0 0.875rem 0;
+      font-family: var(--font-sans);
       font-size: 0.95rem;
       font-weight: 600;
+      color: var(--text);
     }
 
     .radio-group {
@@ -850,24 +1405,27 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     .radio-item {
       display: flex;
       align-items: center;
-      gap: 0.5rem;
+      gap: 0.625rem;
       cursor: pointer;
-      padding: 0.25rem 0;
+      padding: 0.375rem 0;
+      font-size: 0.9rem;
     }
 
     .radio-item input[type="radio"] {
       margin: 0;
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
+      accent-color: var(--primary);
     }
 
     .radio-separator {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin: 0.5rem 0 0.25rem 0;
-      font-weight: 500;
+      font-family: var(--font-sans);
+      font-size: 0.7rem;
+      color: var(--text-subtle);
+      margin: 0.75rem 0 0.375rem 0;
+      font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.08em;
     }
 
     @media (max-width: 768px) {
@@ -878,21 +1436,31 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
   </style>
 </head>
 <body>
+  <!-- Splash Screen -->
+  <div id="splash" class="splash">
+    <div class="splash-content">
+      <div class="splash-logo">
+        <div class="splash-icon">🔐</div>
+        <span class="splash-title">Authrim</span>
+      </div>
+      <p class="splash-tagline">Identity & Access Platform</p>
+      <div class="splash-loader"></div>
+    </div>
+  </div>
+
+  <!-- Theme Toggle -->
+  <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
+
   <div class="container">
     <header>
-      <h1>🔐 Authrim Setup</h1>
+      <div class="header-brand">
+        <div class="header-icon">🔐</div>
+        <h1>Authrim</h1>
+      </div>
+      <p class="header-wizard">Setup Wizard</p>
       <p class="subtitle">OIDC Provider on Cloudflare Workers</p>
     </header>
 
-    <!-- Development Warning Banner -->
-    <div style="background: #fef3c7; border: 2px solid #f59e0b; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; text-align: center;">
-      <strong style="color: #92400e;">⚠️ WARNING: Under Development!</strong>
-      <p style="color: #78350f; margin: 0.5rem 0 0 0; font-size: 0.875rem;">
-        This project is still under active development and does not work correctly yet.<br>
-        Admin UI is incomplete and does not support login functionality.
-      </p>
-    </div>
-
     <div class="step-indicator" id="step-indicator">
       <div class="step step-active" id="step-1">1</div>
       <div class="step-connector"></div>
@@ -1415,6 +1983,23 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         </div>
       </div>
 
+      <!-- Progress UI (shown during provisioning) -->
+      <div id="provision-progress-ui" class="progress-container hidden">
+        <div class="progress-status">
+          <div class="spinner" id="provision-spinner"></div>
+          <span id="provision-current-task">Initializing...</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" id="provision-progress-bar" style="width: 0%"></div>
+        </div>
+        <div class="progress-text" id="provision-progress-text">0 / 0 resources</div>
+
+        <div class="log-toggle" id="provision-log-toggle">
+          <span class="arrow">▶</span>
+          <span>Show detailed log</span>
+        </div>
+      </div>
+
       <div class="progress-log hidden" id="provision-log">
         <pre id="provision-output"></pre>
       </div>
@@ -1443,7 +2028,24 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         <span class="status-badge status-pending" id="deploy-status">Ready</span>
       </h2>
 
-      <p style="margin-bottom: 1rem;">Ready to deploy Authrim workers to Cloudflare.</p>
+      <p id="deploy-ready-text" style="margin-bottom: 1rem;">Ready to deploy Authrim workers to Cloudflare.</p>
+
+      <!-- Progress UI (shown during deployment) -->
+      <div id="deploy-progress-ui" class="progress-container hidden">
+        <div class="progress-status">
+          <div class="spinner" id="deploy-spinner"></div>
+          <span id="deploy-current-task">Initializing...</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" id="deploy-progress-bar" style="width: 0%"></div>
+        </div>
+        <div class="progress-text" id="deploy-progress-text">0 / 0 components</div>
+
+        <div class="log-toggle" id="deploy-log-toggle">
+          <span class="arrow">▶</span>
+          <span>Show detailed log</span>
+        </div>
+      </div>
 
       <div class="progress-log hidden" id="deploy-log">
         <pre id="deploy-output"></pre>
@@ -1519,6 +2121,31 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         <code id="detail-env-name" style="background: var(--bg); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 1rem;"></code>
       </h2>
 
+      <!-- Admin Setup Section -->
+      <div id="admin-setup-section" class="hidden" style="margin-bottom: 1.5rem; padding: 1rem; background: #fef3c7; border-radius: 8px; border: 1px solid #fcd34d;">
+        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
+          <span style="font-size: 1.5rem;">⚠️</span>
+          <div>
+            <div style="font-weight: 600; color: #92400e;">Admin Account Not Configured</div>
+            <div style="font-size: 0.875rem; color: #a16207;">Initial administrator has not been set up for this environment.</div>
+          </div>
+        </div>
+        <button class="btn-primary" id="btn-start-admin-setup" style="margin-top: 0.5rem;">
+          🔐 Start Admin Account Setup with Passkey
+        </button>
+        <div id="admin-setup-result" class="hidden" style="margin-top: 1rem; padding: 0.75rem; background: white; border-radius: 6px;">
+          <div style="font-weight: 500; margin-bottom: 0.5rem;">Setup URL Generated:</div>
+          <div style="display: flex; gap: 0.5rem; align-items: center;">
+            <input type="text" id="admin-setup-url" readonly style="flex: 1; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;">
+            <button class="btn-secondary" id="btn-copy-setup-url" style="white-space: nowrap;">📋 Copy</button>
+            <a id="btn-open-setup-url" href="#" target="_blank" class="btn-primary" style="text-decoration: none; white-space: nowrap;">🔗 Open</a>
+          </div>
+          <div style="font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem;">
+            This URL is valid for 1 hour. Open it in a browser to register the first admin account.
+          </div>
+        </div>
+      </div>
+
       <div id="detail-resources">
         <!-- Workers -->
         <div class="resource-section">
@@ -1569,31 +2196,6 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         </div>
       </div>
 
-      <!-- Admin Setup Section -->
-      <div id="admin-setup-section" class="resource-section hidden" style="margin-top: 1.5rem; padding: 1rem; background: #fef3c7; border-radius: 8px; border: 1px solid #fcd34d;">
-        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
-          <span style="font-size: 1.5rem;">⚠️</span>
-          <div>
-            <div style="font-weight: 600; color: #92400e;">Admin Account Not Configured</div>
-            <div style="font-size: 0.875rem; color: #a16207;">Initial administrator has not been set up for this environment.</div>
-          </div>
-        </div>
-        <button class="btn-primary" id="btn-start-admin-setup" style="margin-top: 0.5rem;">
-          🔐 Start Admin Account Setup with Passkey
-        </button>
-        <div id="admin-setup-result" class="hidden" style="margin-top: 1rem; padding: 0.75rem; background: white; border-radius: 6px;">
-          <div style="font-weight: 500; margin-bottom: 0.5rem;">Setup URL Generated:</div>
-          <div style="display: flex; gap: 0.5rem; align-items: center;">
-            <input type="text" id="admin-setup-url" readonly style="flex: 1; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;">
-            <button class="btn-secondary" id="btn-copy-setup-url" style="white-space: nowrap;">📋 Copy</button>
-            <a id="btn-open-setup-url" href="#" target="_blank" class="btn-primary" style="text-decoration: none; white-space: nowrap;">🔗 Open</a>
-          </div>
-          <div style="font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem;">
-            This URL is valid for 1 hour. Open it in a browser to register the first admin account.
-          </div>
-        </div>
-      </div>
-
       <div class="button-group">
         <button class="btn-secondary" id="btn-back-env-detail">← Back to List</button>
         <button class="btn-danger" id="btn-delete-from-detail">🗑️ Delete Environment...</button>
@@ -1615,6 +2217,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
           Environment: <code id="delete-env-name" style="background: var(--bg); padding: 0.25rem 0.5rem; border-radius: 4px;"></code>
         </h3>
 
+        <div id="delete-options-section">
         <p style="margin-bottom: 1rem; color: var(--text-muted);">Select resources to delete:</p>
 
         <div class="delete-options">
@@ -1666,6 +2269,24 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
             </span>
           </label>
         </div>
+        </div>
+      </div>
+
+      <!-- Progress UI (shown during deletion) -->
+      <div id="delete-progress-ui" class="progress-container hidden">
+        <div class="progress-status">
+          <div class="spinner" id="delete-spinner"></div>
+          <span id="delete-current-task">Initializing...</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" id="delete-progress-bar" style="width: 0%"></div>
+        </div>
+        <div class="progress-text" id="delete-progress-text">0 / 0 resources</div>
+
+        <div class="log-toggle" id="delete-log-toggle">
+          <span class="arrow">▶</span>
+          <span>Show detailed log</span>
+        </div>
       </div>
 
       <div class="progress-log hidden" id="delete-log">
@@ -1698,6 +2319,67 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
   </div>
 
   <script>
+    // ========================================
+    // THEME MANAGEMENT
+    // ========================================
+    function initTheme() {
+      const savedTheme = localStorage.getItem('authrim-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+      updateThemeToggle(theme);
+    }
+
+    function toggleTheme() {
+      const current = document.documentElement.getAttribute('data-theme') || 'light';
+      const newTheme = current === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
+      localStorage.setItem('authrim-theme', newTheme);
+      updateThemeToggle(newTheme);
+    }
+
+    function updateThemeToggle(theme) {
+      const toggle = document.getElementById('theme-toggle');
+      if (toggle) {
+        toggle.textContent = theme === 'dark' ? '☀️' : '🌙';
+        toggle.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+      }
+    }
+
+    // Listen for system preference changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem('authrim-theme')) {
+        const theme = e.matches ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', theme);
+        updateThemeToggle(theme);
+      }
+    });
+
+    // Initialize theme immediately
+    initTheme();
+
+    // Theme toggle event
+    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+
+    // ========================================
+    // SPLASH SCREEN
+    // ========================================
+    function hideSplash() {
+      const splash = document.getElementById('splash');
+      if (splash) {
+        splash.classList.add('fade-out');
+        setTimeout(() => {
+          splash.style.display = 'none';
+        }, 600);
+      }
+    }
+
+    // Hide splash after 2500ms
+    setTimeout(hideSplash, 2500);
+
+    // ========================================
+    // MAIN APPLICATION
+    // ========================================
     // Session token for API authentication (embedded by server)
     const SESSION_TOKEN = '${safeToken}';
     const MANAGE_ONLY = ${manageOnlyFlag};
@@ -1770,6 +2452,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
     function showSection(name) {
       Object.values(sections).forEach(s => s.classList.add('hidden'));
       sections[name].classList.remove('hidden');
+      window.scrollTo(0, 0);
     }
 
     // Auto-scroll helper for progress logs
@@ -1779,6 +2462,106 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       }
     }
 
+    // Log toggle functionality
+    function setupLogToggle(toggleId, logId) {
+      const toggle = document.getElementById(toggleId);
+      const log = document.getElementById(logId);
+      if (toggle && log) {
+        toggle.addEventListener('click', () => {
+          const isHidden = log.classList.contains('hidden');
+          if (isHidden) {
+            log.classList.remove('hidden');
+            toggle.classList.add('open');
+            toggle.querySelector('span:last-child').textContent = 'Hide detailed log';
+          } else {
+            log.classList.add('hidden');
+            toggle.classList.remove('open');
+            toggle.querySelector('span:last-child').textContent = 'Show detailed log';
+          }
+        });
+      }
+    }
+
+    // Setup all log toggles
+    setupLogToggle('deploy-log-toggle', 'deploy-log');
+    setupLogToggle('provision-log-toggle', 'provision-log');
+    setupLogToggle('delete-log-toggle', 'delete-log');
+
+    // Progress UI update helper
+    function updateProgressUI(prefix, current, total, currentTask) {
+      const progressBar = document.getElementById(prefix + '-progress-bar');
+      const progressText = document.getElementById(prefix + '-progress-text');
+      const currentTaskEl = document.getElementById(prefix + '-current-task');
+
+      if (progressBar && total > 0) {
+        const percent = Math.round((current / total) * 100);
+        progressBar.style.width = percent + '%';
+      }
+      if (progressText) {
+        progressText.textContent = current + ' / ' + total + ' ' + (prefix === 'deploy' ? 'components' : 'resources');
+      }
+      if (currentTaskEl && currentTask) {
+        currentTaskEl.textContent = currentTask;
+      }
+    }
+
+    // Parse progress message to extract current task
+    function parseProgressMessage(message) {
+      // Match patterns like "Deploying xxx...", "Creating xxx...", "Deleting xxx..."
+      if (message.includes('Deploying ')) {
+        const parts = message.split('Deploying ')[1];
+        if (parts) {
+          const name = parts.split('.')[0].split(' ')[0];
+          if (name) return 'Deploying ' + name + '...';
+        }
+      }
+
+      if (message.includes('Creating ')) {
+        const parts = message.split('Creating ')[1];
+        if (parts) {
+          const name = parts.split(' ')[0].split('.')[0];
+          if (name) return 'Creating ' + name + '...';
+        }
+      }
+
+      if (message.includes('Deleting')) {
+        const parts = message.split('Deleting')[1];
+        if (parts) {
+          const name = parts.trim().split(' ')[0].replace(':', '');
+          if (name) return 'Deleting ' + name + '...';
+        }
+      }
+
+      if (message.includes('✓')) {
+        const parts = message.split('✓')[1];
+        if (parts) {
+          const text = parts.trim().substring(0, 40);
+          return '✓ ' + text;
+        }
+      }
+
+      if (message.includes('Level ')) {
+        const parts = message.split('Level ')[1];
+        if (parts) {
+          const num = parts.trim().split(' ')[0];
+          if (num) return 'Deployment Level ' + num;
+        }
+      }
+
+      if (message.includes('Generating')) {
+        const parts = message.split('Generating')[1];
+        if (parts) {
+          const text = parts.trim().substring(0, 30);
+          return 'Generating ' + text + '...';
+        }
+      }
+
+      if (message.includes('Uploading')) return 'Uploading secrets...';
+      if (message.toLowerCase().includes('building')) return 'Building packages...';
+
+      return null;
+    }
+
     // Safe DOM element creation helpers
     function createAlert(type, content) {
       const div = document.createElement('div');
@@ -2578,16 +3361,23 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       const resourcePreview = document.getElementById('resource-preview');
       const keysSavedInfo = document.getElementById('keys-saved-info');
       const keysPath = document.getElementById('keys-path');
+      const progressUI = document.getElementById('provision-progress-ui');
 
       btn.disabled = true;
+      btn.classList.add('hidden');
       btnGotoDeploy.classList.add('hidden');
       status.textContent = 'Running...';
       status.className = 'status-badge status-running';
-      log.classList.remove('hidden');
+      progressUI.classList.remove('hidden');
+      log.classList.add('hidden'); // Log is hidden by default, toggled via button
       resourcePreview.classList.add('hidden');
       keysSavedInfo.classList.add('hidden');
       output.textContent = '';
 
+      let provisionCompleted = 0;
+      const totalResources = 8; // D1 Core, D1 PII, KV Settings, KV Cache, KV Tokens, R2 (optional), Queues (optional), Keys
+      updateProgressUI('provision', 0, totalResources, 'Initializing...');
+
       // Start polling for progress
       let lastProgressLength = 0;
       provisionPollInterval = setInterval(async () => {
@@ -2598,6 +3388,16 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
             const newMessages = statusResult.progress.slice(lastProgressLength);
             newMessages.forEach(msg => {
               output.textContent += msg + '\\n';
+              // Update progress UI based on message content
+              const taskInfo = parseProgressMessage(msg);
+              if (taskInfo) {
+                updateProgressUI('provision', provisionCompleted, totalResources, taskInfo);
+              }
+              // Count completed items (lines with checkmark)
+              if (msg.includes('✓') || msg.includes('✅')) {
+                provisionCompleted++;
+                updateProgressUI('provision', provisionCompleted, totalResources, taskInfo || ('Completed ' + provisionCompleted + ' items'));
+              }
             });
             lastProgressLength = statusResult.progress.length;
             scrollToBottom(log);
@@ -2630,8 +3430,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         output.textContent += '\\n';
         scrollToBottom(log);
 
-        // Show keys saved location (full path with environment)
-        keysPath.textContent = workingDirectory ? workingDirectory + '/.keys/' + config.env + '/' : './.keys/' + config.env + '/';
+        // Show keys saved location (new structure: .authrim/{env}/keys/)
+        keysPath.textContent = workingDirectory ? workingDirectory + '/.authrim/' + config.env + '/keys/' : './.authrim/' + config.env + '/keys/';
 
         // Provision resources
         output.textContent += '☁️ Provisioning Cloudflare resources...\\n';
@@ -2649,6 +3449,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         }
 
         if (result.success) {
+          // Final progress update
+          updateProgressUI('provision', totalResources, totalResources, '✅ Provisioning complete!');
           output.textContent += '\\n✅ Provisioning complete!\\n';
           scrollToBottom(log);
           status.textContent = 'Complete';
@@ -2662,6 +3464,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
 
           // Update buttons
           btn.textContent = 'Re-provision (Delete & Create)';
+          btn.classList.remove('hidden');
           btn.disabled = false;
           btnGotoDeploy.classList.remove('hidden');
         } else {
@@ -2678,6 +3481,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         scrollToBottom(log);
         status.textContent = 'Error';
         status.className = 'status-badge status-error';
+        btn.classList.remove('hidden');
         btn.disabled = false;
         resourcePreview.classList.remove('hidden');
       }
@@ -2706,13 +3510,21 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       const status = document.getElementById('deploy-status');
       const log = document.getElementById('deploy-log');
       const output = document.getElementById('deploy-output');
+      const progressUI = document.getElementById('deploy-progress-ui');
+      const readyText = document.getElementById('deploy-ready-text');
 
       btn.disabled = true;
+      btn.classList.add('hidden');
       status.textContent = 'Deploying...';
       status.className = 'status-badge status-running';
-      log.classList.remove('hidden');
+      readyText.classList.add('hidden');
+      progressUI.classList.remove('hidden');
+      log.classList.add('hidden'); // Log is hidden by default, toggled via button
       output.textContent = 'Starting deployment...\\n\\n';
-      scrollToBottom(log);
+
+      let completedCount = 0;
+      const totalComponents = 10; // Approximate total components
+      updateProgressUI('deploy', 0, totalComponents, 'Initializing...');
 
       try {
         // Generate wrangler configs first
@@ -2730,10 +3542,25 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         scrollToBottom(log);
 
         // Poll for status updates
+        let lastProgressLength = 0;
         const pollInterval = setInterval(async () => {
           const statusResult = await api('/deploy/status');
-          if (statusResult.progress && statusResult.progress.length > 0) {
-            output.textContent = statusResult.progress.join('\\n') + '\\n';
+          if (statusResult.progress && statusResult.progress.length > lastProgressLength) {
+            const newMessages = statusResult.progress.slice(lastProgressLength);
+            newMessages.forEach(msg => {
+              output.textContent += msg + '\\n';
+              // Update progress UI based on message content
+              const taskInfo = parseProgressMessage(msg);
+              if (taskInfo) {
+                updateProgressUI('deploy', completedCount, totalComponents, taskInfo);
+              }
+              // Count completed items (lines with checkmark)
+              if (msg.includes('✓') || msg.includes('✅')) {
+                completedCount++;
+                updateProgressUI('deploy', completedCount, totalComponents, taskInfo || ('Completed ' + completedCount + ' items'));
+              }
+            });
+            lastProgressLength = statusResult.progress.length;
             scrollToBottom(log);
           }
         }, 1000);
@@ -2749,6 +3576,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         clearInterval(pollInterval);
 
         if (result.success) {
+          // Final progress update
+          updateProgressUI('deploy', totalComponents, totalComponents, '✓ Deployment complete!');
           output.textContent += '\\n✓ Deployment complete!\\n';
           scrollToBottom(log);
 
@@ -2778,7 +3607,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
 
           output.textContent += '  API URL: ' + apiUrl + '\\n';
           output.textContent += '  Login UI URL: ' + loginUiUrl + '\\n';
-          output.textContent += '  Keys Dir: .keys/' + config.env + '\\n';
+          output.textContent += '  Keys Dir: .authrim/' + config.env + '/keys/\\n';
           scrollToBottom(log);
 
           let adminSetupResult;
@@ -2788,7 +3617,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
               body: {
                 env: config.env,
                 baseUrl: apiUrl,  // Setup page is served by ar-auth worker (API)
-                keysDir: '.keys',
+                // keysDir is auto-detected by API using paths.ts
               },
             });
             output.textContent += '  API Response: ' + JSON.stringify(adminSetupResult) + '\\n';
@@ -2909,8 +3738,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
 
     // Resource naming functions
     function getResourceNames(env) {
-      // Keys are stored in environment-specific subdirectory: .keys/{env}/
-      const keysDir = workingDirectory ? workingDirectory + '/.keys/' + env : '.keys/' + env;
+      // Keys are stored in environment-specific subdirectory: .authrim/{env}/keys/
+      const keysDir = workingDirectory ? workingDirectory + '/.authrim/' + env + '/keys' : '.authrim/' + env + '/keys';
       return {
         d1: [
           env + '-authrim-core-db',
@@ -3077,7 +3906,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
           policy: true,
         },
         keys: {
-          secretsPath: './.keys/',
+          secretsPath: './keys/',  // Relative path within .authrim/{env}/ structure
         },
         database: config.database || {
           core: { location: 'auto', jurisdiction: 'none' },
@@ -3510,9 +4339,11 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       document.getElementById('delete-pages').checked = true;
 
       // Reset UI state
+      document.getElementById('delete-options-section').classList.remove('hidden');
       document.getElementById('delete-log').classList.add('hidden');
       document.getElementById('delete-result').classList.add('hidden');
-      document.getElementById('delete-result').innerHTML = '';
+      document.getElementById('delete-result').textContent = '';
+      document.getElementById('btn-confirm-delete').classList.remove('hidden');
       document.getElementById('btn-confirm-delete').disabled = false;
 
       showSection('envDelete');
@@ -3636,9 +4467,13 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
       const log = document.getElementById('delete-log');
       const output = document.getElementById('delete-output');
       const result = document.getElementById('delete-result');
+      const progressUI = document.getElementById('delete-progress-ui');
 
       btn.disabled = true;
-      log.classList.remove('hidden');
+      btn.classList.add('hidden');
+      document.getElementById('delete-options-section').classList.add('hidden');
+      progressUI.classList.remove('hidden');
+      log.classList.add('hidden'); // Log is hidden by default, toggled via button
       result.classList.add('hidden');
       output.textContent = '';
 
@@ -3651,6 +4486,11 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         deletePages: document.getElementById('delete-pages').checked,
       };
 
+      // Count selected options for progress tracking
+      let deleteCompleted = 0;
+      const totalToDelete = Object.values(deleteOptions).filter(v => v).length;
+      updateProgressUI('delete', 0, totalToDelete, 'Starting deletion...');
+
       // Poll for progress
       let lastProgressLength = 0;
       const pollInterval = setInterval(async () => {
@@ -3660,9 +4500,19 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
             const newMessages = statusResult.progress.slice(lastProgressLength);
             newMessages.forEach(msg => {
               output.textContent += msg + '\\n';
+              // Update progress UI based on message content
+              const taskInfo = parseProgressMessage(msg);
+              if (taskInfo) {
+                updateProgressUI('delete', deleteCompleted, totalToDelete, taskInfo);
+              }
+              // Count completed items (lines with checkmark)
+              if (msg.includes('✓') || msg.includes('✅') || msg.includes('Deleted')) {
+                deleteCompleted++;
+                updateProgressUI('delete', deleteCompleted, totalToDelete, taskInfo || ('Deleted ' + deleteCompleted + ' items'));
+              }
             });
             lastProgressLength = statusResult.progress.length;
-            log.scrollTop = log.scrollHeight;
+            scrollToBottom(log);
           }
         } catch (e) {}
       }, 500);
@@ -3683,6 +4533,8 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         result.classList.remove('hidden');
 
         if (deleteResult.success) {
+          // Final progress update
+          updateProgressUI('delete', totalToDelete, totalToDelete, '✅ Deletion complete!');
           result.textContent = '';
           result.appendChild(createAlert('success', '✅ Environment deleted successfully!'));
 
@@ -3694,6 +4546,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         } else {
           result.textContent = '';
           result.appendChild(createAlert('error', '❌ Some errors occurred: ' + (deleteResult.errors || []).join(', ')));
+          btn.classList.remove('hidden');
           btn.disabled = false;
         }
       } catch (error) {
@@ -3701,6 +4554,7 @@ export function getHtmlTemplate(sessionToken, manageOnly) {
         result.classList.remove('hidden');
         result.textContent = '';
         result.appendChild(createAlert('error', '❌ Error: ' + error.message));
+        btn.classList.remove('hidden');
         btn.disabled = false;
       }
     });