Upload folder using huggingface_hub

index.html

@@ -5,679 +5,628 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Relatório de Vendas UTM - Pro Analytics</title>
-  <!-- Importing Inter Font -->
+  
+  <!-- Typography: Inter for clean, modern readability -->
+  <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <!-- Importing Remix Icon -->
+  
+  <!-- Icons: Remix Icon for consistent, crisp iconography -->
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 
   <style>
-    /* --- CSS VARIABLES & THEME CONFIGURATION --- */
+    /* --- 1. DESIGN SYSTEM & VARIABLES --- */
     :root {
-      /* Dark Theme (Default) - Profitfy Inspired */
-      --bg-body: #09090b; /* Zinc 950 */
-      --bg-card: #18181b; /* Zinc 900 */
-      --bg-surface: #27272a; /* Zinc 800 */
-      --bg-hover: #3f3f46; /* Zinc 700 */
+      /* Palette: Dark Mode Default (Premium Zinc & Emerald) */
+      --bg-body: #09090b;      /* Zinc 950 */
+      --bg-card: #18181b;      /* Zinc 900 */
+      --bg-surface: #27272a;   /* Zinc 800 */
+      --bg-input: #09090b;     /* Zinc 950 */
       
-      --border-color: #27272a;
-      --border-light: #3f3f46;
+      --border-subtle: #27272a;
+      --border-default: #3f3f46;
+      --border-focus: #10b981; /* Emerald 500 */
 
-      --text-primary: #f4f4f5; /* Zinc 100 */
-      --text-secondary: #a1a1aa; /* Zinc 400 */
-      --text-muted: #71717a; /* Zinc 500 */
+      --text-main: #f4f4f5;    /* Zinc 100 */
+      --text-muted: #a1a1aa;   /* Zinc 400 */
+      --text-faint: #71717a;   /* Zinc 500 */
 
-      --color-primary: #10b981; /* Emerald 500 */
-      --color-primary-hover: #059669;
-      --color-primary-glow: rgba(16, 185, 129, 0.2);
+      --primary: #10b981;      /* Emerald 500 */
+      --primary-dim: rgba(16, 185, 129, 0.1);
+      --primary-glow: rgba(16, 185, 129, 0.25);
 
-      --color-accent: #8b5cf6; /* Violet */
+      --accent: #8b5cf6;       /* Violet */
       
-      --color-danger: #ef4444;
-      --color-warning: #f59e0b;
-      --color-info: #3b82f6;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+      --info: #3b82f6;
 
-      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
-      --shadow-glow: 0 0 15px var(--color-primary-glow);
+      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+      --shadow-header: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
 
-      --radius-md: 12px;
       --radius-sm: 8px;
-      
-      --font-family: 'Inter', sans-serif;
-      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --radius-md: 12px;
+      --radius-lg: 16px;
+
+      --font-main: 'Inter', sans-serif;
+      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     [data-theme="light"] {
-      /* Light Theme */
-      --bg-body: #f4f4f5;
+      --bg-body: #f4f4f5;      /* Zinc 100 */
       --bg-card: #ffffff;
-      --bg-surface: #e4e4e7;
-      --bg-hover: #d4d4d8;
+      --bg-surface: #f4f4f5;   /* Zinc 100 */
+      --bg-input: #ffffff;
 
-      --border-color: #e4e4e7;
-      --border-light: #d4d4d8;
+      --border-subtle: #e4e4e7;
+      --border-default: #d4d4d8;
+      --border-focus: #059669; /* Emerald 600 */
 
-      --text-primary: #18181b;
-      --text-secondary: #52525b;
-      --text-muted: #a1a1aa;
+      --text-main: #18181b;    /* Zinc 900 */
+      --text-muted: #52525b;   /* Zinc 600 */
+      --text-faint: #a1a1aa;   /* Zinc 400 */
 
-      --color-primary: #059669;
-      --color-primary-hover: #047857;
-      --color-primary-glow: rgba(5, 150, 105, 0.1);
+      --primary: #059669;      /* Emerald 600 */
+      --primary-dim: rgba(5, 150, 105, 0.1);
+      --primary-glow: rgba(5, 150, 105, 0.15);
 
       --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
-      --shadow-glow: none;
-    }
-
-    /* --- RESET & BASE --- */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      outline: none;
+      --shadow-header: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     }
 
+    /* --- 2. RESET & BASE --- */
+    * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+    
     body {
-      font-family: var(--font-family);
+      font-family: var(--font-main);
       background-color: var(--bg-body);
-      color: var(--text-primary);
-      line-height: 1.5;
+      color: var(--text-main);
+      line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       transition: background-color 0.3s ease, color 0.3s ease;
-      padding-bottom: 80px;
+      padding-bottom: 40px;
     }
 
-    a { text-decoration: none; color: inherit; }
+    a { text-decoration: none; color: inherit; transition: color 0.2s; }
     ul { list-style: none; }
+    button { font-family: inherit; }
+
+    /* Scrollbar Styling */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: var(--bg-body); }
+    ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
-    /* --- LAYOUT --- */
+    /* --- 3. LAYOUT UTILITIES --- */
     .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 24px;
     }
 
-    /* --- HEADER --- */
+    .flex-between { display: flex; justify-content: space-between; align-items: center; }
+    .flex-center { display: flex; justify-content: center; align-items: center; }
+    .gap-2 { gap: 8px; }
+    .gap-4 { gap: 16px; }
+    .mt-4 { margin-top: 16px; }
+    .mb-4 { margin-bottom: 16px; }
+
+    /* --- 4. COMPONENTS --- */
+
+    /* Header */
     header {
-      background-color: rgba(9, 9, 11, 0.8);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-      border-bottom: 1px solid var(--border-color);
       position: sticky;
       top: 0;
-      z-index: 50;
+      z-index: 100;
+      background: rgba(9, 9, 11, 0.75);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border-bottom: 1px solid var(--border-subtle);
       padding: 16px 0;
+      transition: all 0.3s ease;
     }
+    [data-theme="light"] header { background: rgba(255, 255, 255, 0.85); }
 
-    [data-theme="light"] header {
-      background-color: rgba(255, 255, 255, 0.8);
-    }
-
-    .header-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .logo-area {
+    .brand {
       display: flex;
       align-items: center;
       gap: 12px;
-    }
-
-    .logo-icon {
-      font-size: 24px;
-      color: var(--color-primary);
-    }
-
-    h1 {
-      font-size: 1.125rem;
       font-weight: 700;
-      letter-spacing: -0.025em;
-    }
-
-    .header-actions {
-      display: flex;
-      gap: 16px;
-      align-items: center;
+      font-size: 1.125rem;
+      letter-spacing: -0.02em;
     }
+    .brand i { color: var(--primary); font-size: 1.25rem; }
 
-    /* --- BUTTONS & CONTROLS --- */
+    /* Buttons */
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
-      padding: 10px 20px;
+      padding: 10px 18px;
       border-radius: var(--radius-sm);
       font-weight: 500;
       font-size: 0.875rem;
       cursor: pointer;
-      transition: var(--transition);
+      transition: all 0.2s var(--ease-out);
       border: 1px solid transparent;
       white-space: nowrap;
     }
-
+    
     .btn-primary {
-      background-color: var(--color-primary);
-      color: #ffffff;
-      box-shadow: 0 0 10px var(--color-primary-glow);
+      background-color: var(--primary);
+      color: #fff;
+      box-shadow: 0 0 0 1px var(--primary-glow), 0 4px 12px var(--primary-glow);
     }
-
     .btn-primary:hover:not(:disabled) {
-      background-color: var(--color-primary-hover);
       transform: translateY(-1px);
+      box-shadow: 0 0 0 1px var(--primary-glow), 0 6px 16px var(--primary-glow);
+      filter: brightness(1.1);
     }
-
+    
     .btn-secondary {
       background-color: var(--bg-surface);
-      color: var(--text-primary);
-      border: 1px solid var(--border-color);
+      border-color: var(--border-default);
+      color: var(--text-main);
     }
-
     .btn-secondary:hover:not(:disabled) {
-      background-color: var(--bg-hover);
-      border-color: var(--border-light);
+      border-color: var(--text-muted);
+      background-color: var(--border-subtle);
     }
 
     .btn-ghost {
       background: transparent;
-      color: var(--text-secondary);
-    }
-
-    .btn-ghost:hover {
-      color: var(--text-primary);
-      background-color: var(--bg-hover);
-    }
-
-    .btn-icon {
-      padding: 8px;
-      border-radius: 50%;
-    }
-
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none !important;
-      box-shadow: none !important;
-    }
-
-    /* --- THEME TOGGLE --- */
-    .theme-toggle {
-      cursor: pointer;
-      font-size: 1.25rem;
-      color: var(--text-secondary);
-      transition: var(--transition);
-    }
-    .theme-toggle:hover { color: var(--color-primary); }
-
-    /* --- SECTIONS & CARDS --- */
-    main {
-      padding-top: 32px;
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
+      color: var(--text-muted);
     }
+    .btn-ghost:hover { color: var(--text-main); background-color: var(--bg-surface); }
+    
+    .btn-icon { padding: 8px; border-radius: 50%; aspect-ratio: 1; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
 
+    /* Cards */
     .card {
       background-color: var(--bg-card);
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md);
       padding: 24px;
       box-shadow: var(--shadow-card);
+      margin-bottom: 24px;
       position: relative;
       overflow: hidden;
+      transition: transform 0.3s ease;
     }
 
     .card-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-start;
       margin-bottom: 20px;
     }
-
     .card-title {
       font-size: 1rem;
       font-weight: 600;
-      color: var(--text-primary);
+      color: var(--text-main);
       display: flex;
       align-items: center;
       gap: 8px;
     }
 
-    /* --- FORMS --- */
+    /* Forms & Inputs */
     .form-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 20px;
     }
-
-    .input-group {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
+    .input-group { display: flex; flex-direction: column; gap: 8px; }
+    
     label {
-      font-size: 0.8rem;
-      font-weight: 500;
-      color: var(--text-secondary);
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }
 
     input, select {
-      background-color: var(--bg-body);
-      border: 1px solid var(--border-color);
-      color: var(--text-primary);
-      padding: 12px;
+      background-color: var(--bg-input);
+      border: 1px solid var(--border-default);
+      color: var(--text-main);
+      padding: 10px 14px;
       border-radius: var(--radius-sm);
-      font-size: 0.95rem;
-      transition: var(--transition);
+      font-size: 0.9rem;
+      transition: all 0.2s;
       width: 100%;
     }
-
     input:focus, select:focus {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 2px var(--color-primary-glow);
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-dim);
     }
 
-    /* --- METRICS GRID --- */
-    .metrics-grid {
+    /* Metrics Grid */
+    .metrics-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 20px;
+      margin-bottom: 24px;
     }
 
     .metric-card {
-      background: linear-gradient(145deg, var(--bg-card), var(--bg-surface));
-      border: 1px solid var(--border-color);
+      background: linear-gradient(145deg, var(--bg-card), rgba(255,255,255,0.02));
+      border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md);
       padding: 20px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 6px;
       position: relative;
     }
-
-    .metric-card::before {
+    /* Decorative accent line */
+    .metric-card::after {
       content: '';
       position: absolute;
-      top: 0; left: 0; width: 4px; height: 100%;
-      background-color: var(--color-primary);
+      top: 0; left: 0; bottom: 0;
+      width: 3px;
+      background: var(--primary);
+      opacity: 0.7;
       border-top-left-radius: var(--radius-md);
       border-bottom-left-radius: var(--radius-md);
-      opacity: 0.5;
-    }
-
-    .metric-label {
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-      font-weight: 500;
-    }
-
-    .metric-value {
-      font-size: 1.75rem;
-      font-weight: 700;
-      color: var(--text-primary);
-      letter-spacing: -0.03em;
-    }
-
-    .metric-sub {
-      font-size: 0.75rem;
-      color: var(--text-muted);
     }
+    
+    .metric-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
+    .metric-value { font-size: 1.75rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.03em; }
+    .metric-sub { font-size: 0.75rem; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
 
-    /* --- TABLE --- */
-    .table-wrapper {
+    /* Table */
+    .table-container {
       width: 100%;
       overflow-x: auto;
       border-radius: var(--radius-sm);
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--border-subtle);
     }
-
+    
     table {
       width: 100%;
       border-collapse: collapse;
-      font-size: 0.9rem;
+      font-size: 0.875rem;
       white-space: nowrap;
     }
-
+    
     th {
       background-color: var(--bg-surface);
-      color: var(--text-secondary);
+      color: var(--text-muted);
       font-weight: 600;
       text-transform: uppercase;
-      font-size: 0.75rem;
-      padding: 16px;
+      font-size: 0.7rem;
+      padding: 14px 16px;
       text-align: left;
       letter-spacing: 0.05em;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-subtle);
       cursor: pointer;
       user-select: none;
+      transition: color 0.2s;
     }
-
-    th:hover { color: var(--text-primary); }
-
+    th:hover { color: var(--text-main); }
+    
     td {
-      padding: 16px;
-      border-bottom: 1px solid var(--border-color);
-      color: var(--text-primary);
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--border-subtle);
+      color: var(--text-main);
     }
-
     tr:last-child td { border-bottom: none; }
-    
-    tr:hover td {
-      background-color: rgba(255, 255, 255, 0.02);
-    }
-    [data-theme="light"] tr:hover td {
-      background-color: rgba(0, 0, 0, 0.02);
-    }
+    tr:hover td { background-color: rgba(255,255,255,0.02); }
+    [data-theme="light"] tr:hover td { background-color: rgba(0,0,0,0.02); }
 
     .text-right { text-align: right; }
     .text-center { text-align: center; }
 
-    /* --- BADGES --- */
+    /* Badges & Pills */
     .badge {
-      padding: 4px 10px;
-      border-radius: 20px;
+      padding: 4px 8px;
+      border-radius: 6px;
       font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
     }
+    .badge-success { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
+    .badge-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
+    .badge-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
 
-    .badge-success { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
-    .badge-warning { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
-    .badge-danger { background-color: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
+    /* States (Loading, Empty, Alert) */
+    .state-container {
+      text-align: center;
+      padding: 60px 20px;
+      color: var(--text-muted);
+    }
+    .state-icon { font-size: 3rem; margin-bottom: 16px; display: block; opacity: 0.5; }
 
-    /* --- ALERTS & BANNERS --- */
     .alert {
-      padding: 16px;
+      padding: 12px 16px;
       border-radius: var(--radius-sm);
       margin-bottom: 20px;
       display: flex;
-      gap: 12px;
       align-items: center;
+      gap: 12px;
+      font-size: 0.875rem;
       border: 1px solid transparent;
-      font-size: 0.9rem;
     }
+    .alert-info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); color: #60a5fa; }
+    .alert-warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); color: #fbbf24; }
+    .alert-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #f87171; }
 
-    .alert-warning {
-      background-color: rgba(245, 158, 11, 0.1);
-      border-color: rgba(245, 158, 11, 0.2);
-      color: #fbbf24;
-    }
-
-    .alert-info {
-      background-color: rgba(59, 130, 246, 0.1);
-      border-color: rgba(59, 130, 246, 0.2);
-      color: #60a5fa;
-    }
-
-    .alert-error {
-      background-color: rgba(239, 68, 68, 0.1);
-      border-color: rgba(239, 68, 68, 0.2);
-      color: #f87171;
-    }
-
-    /* --- UTILITIES --- */
-    .hidden { display: none !important; }
-    
-    .status-pill {
-      height: 6px;
-      width: 6px;
+    /* Animations */
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .spinner {
+      width: 24px; height: 24px;
+      border: 2px solid var(--bg-surface);
+      border-top-color: var(--primary);
       border-radius: 50%;
-      display: inline-block;
-      margin-right: 6px;
+      animation: spin 0.8s linear infinite;
     }
-    .status-pill.green { background-color: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); }
-    .status-pill.red { background-color: var(--color-danger); }
 
-    .anycoder-link {
-      font-size: 0.8rem;
-      color: var(--text-muted);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      transition: color 0.2s;
-    }
-    .anycoder-link:hover { color: var(--color-primary); }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .animate-fade-in { animation: fadeIn 0.4s var(--ease-out) forwards; }
 
-    /* --- ANIMATIONS --- */
-    @keyframes pulse {
-      0% { opacity: 1; }
-      50% { opacity: 0.5; }
-      100% { opacity: 1; }
+    /* Specific: New Orders Delta */
+    .delta-card {
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.05), transparent 40%);
     }
-
-    .loading-spinner {
-      width: 40px;
-      height: 40px;
-      border: 3px solid var(--bg-surface);
-      border-top-color: var(--color-primary);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-      margin: 0 auto 16px;
+    .delta-list { display: flex; flex-direction: column; gap: 8px; }
+    .delta-item {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-surface);
+      border-radius: var(--radius-sm);
+      font-size: 0.85rem;
     }
 
-    @keyframes spin { to { transform: rotate(360deg); } }
-
-    /* --- RESPONSIVE --- */
+    /* Utilities */
+    .hidden { display: none !important; }
+    .link-external { font-size: 0.8rem; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
+    .link-external:hover { color: var(--primary); }
+    
+    /* Responsive */
     @media (max-width: 768px) {
       .header-content { flex-direction: column; gap: 16px; text-align: center; }
       .card-header { flex-direction: column; gap: 12px; align-items: flex-start; }
-      .controls { flex-direction: column; width: 100%; }
-      .controls > * { width: 100%; }
-      .form-grid { grid-template-columns: 1fr; }
+      .controls-row { flex-direction: column; }
+      .controls-row > * { width: 100%; }
     }
   </style>
 </head>
 
 <body>
-
-  <!-- Header -->
+  <!-- HEADER -->
   <header>
-    <div class="container header-content">
-      <div class="logo-area">
-        <i class="ri-bar-chart-box-fill logo-icon"></i>
-        <h1>UTM Analytics Pro</h1>
+    <div class="container header-content flex-between">
+      <div class="brand">
+        <i class="ri-bar-chart-grouped-fill"></i>
+        <span>UTM Analytics Pro</span>
       </div>
-      
-      <div class="header-actions">
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+
+      <div class="header-actions flex-center gap-4">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="link-external">
           Built with anycoder <i class="ri-external-link-line"></i>
         </a>
-        <div class="theme-toggle" id="theme-toggle" title="Alternar Tema">
-          <i class="ri-sun-line" id="theme-icon"></i>
+        <div id="theme-toggle" class="btn btn-ghost btn-icon" title="Alternar Tema">
+          <i class="ri-sun-line"></i>
         </div>
       </div>
     </div>
   </header>
 
-  <main class="container">
-
-    <!-- API Configuration -->
-    <section class="card" id="config-section">
+  <main class="container" style="padding-top: 32px;">
+    
+    <!-- 1. CONFIGURATION (Collapsible) -->
+    <section class="card" id="config-card">
       <div class="card-header">
         <div class="card-title">
-          <i class="ri-settings-4-line"></i> Configuração da API
+          <i class="ri-settings-3-line"></i> Configuração da API
         </div>
         <button id="toggle-config-btn" class="btn btn-ghost btn-icon">
-          <i class="ri-arrow-up-s-line"></i>
+          <i class="ri-arrow-down-s-line"></i>
         </button>
       </div>
 
-      <div id="config-form" class="form-grid">
-        <div class="input-group">
-          <label for="store-name">Nome da Loja</label>
-          <input type="text" id="store-name" placeholder="minha-loja">
-        </div>
-
-        <div class="input-group">
-          <label for="access-token">Access Token</label>
-          <input type="password" id="access-token" placeholder="shpat_xxxxx...">
-        </div>
-
-        <div class="input-group">
-          <label for="cors-proxy">Proxy CORS (Opcional)</label>
-          <input type="text" id="cors-proxy" placeholder="https://corsproxy.io/?">
+      <div id="config-content" class="hidden">
+        <div class="form-grid mb-4">
+          <div class="input-group">
+            <label for="store-name">Nome da Loja</label>
+            <input type="text" id="store-name" placeholder="ex: minha-loja">
+          </div>
+          <div class="input-group">
+            <label for="access-token">Access Token</label>
+            <input type="password" id="access-token" placeholder="shpat_xxxxx...">
+          </div>
+          <div class="input-group">
+            <label for="cors-proxy">CORS Proxy (Opcional)</label>
+            <input type="text" id="cors-proxy" placeholder="https://corsproxy.io/?">
+          </div>
         </div>
-
-        <div class="input-group" style="justify-content: flex-end;">
+        <div class="flex-between">
+          <div id="config-msg" class="alert alert-info hidden" style="margin-bottom: 0; padding: 8px 12px;">
+            <i class="ri-checkbox-circle-line"></i> <span>Salvo!</span>
+          </div>
           <button id="save-config-btn" class="btn btn-primary">
-            <i class="ri-save-3-line"></i> Salvar Config
+            <i class="ri-save-3-line"></i> Salvar Configurações
           </button>
         </div>
       </div>
-
-      <div id="config-status" class="hidden alert alert-info" style="margin-top: 16px;">
-        <i class="ri-checkbox-circle-line"></i>
-        <span>Configurações salvas com sucesso.</span>
-      </div>
     </section>
 
-    <!-- Filters & Controls -->
-    <section class="card" id="filters-section">
+    <!-- 2. CONTROLS & FILTERS -->
+    <section class="card">
       <div class="form-grid" style="align-items: end;">
         <div class="input-group">
-          <label for="date-range-select">Período</label>
-          <select id="date-range-select">
+          <label for="date-range">Período de Análise</label>
+          <select id="date-range">
             <option value="hoje">Hoje</option>
             <option value="ontem">Ontem</option>
-            <option value="ultimos7">Últimos 7 dias</option>
+            <option value="ultimos7" selected>Últimos 7 dias</option>
             <option value="ultimos30">Últimos 30 dias</option>
             <option value="customizado">Customizado</option>
           </select>
         </div>
 
-        <div class="input-group hidden" id="custom-date-group">
-          <label>Data Início - Fim</label>
+        <div class="input-group hidden" id="custom-dates">
+          <label>Intervalo</label>
           <div style="display: flex; gap: 8px;">
-            <input type="date" id="custom-date-start">
-            <input type="date" id="custom-date-end">
+            <input type="date" id="date-start">
+            <input type="date" id="date-end">
           </div>
         </div>
 
-        <div style="display: flex; gap: 12px; width: 100%; justify-content: flex-end;">
-          <button id="refresh-button" class="btn btn-primary" disabled>
-            <i class="ri-refresh-line"></i> Buscar Dados
+        <div class="controls-row flex-between" style="width: 100%; justify-content: flex-end;">
+          <button id="btn-fetch" class="btn btn-primary" disabled>
+            <i class="ri-refresh-line"></i> Atualizar Dados
           </button>
-          <button id="export-csv-button" class="btn btn-secondary" disabled>
-            <i class="ri-file-download-line"></i> CSV
+          <button id="btn-export" class="btn btn-secondary" disabled>
+            <i class="ri-download-cloud-2-line"></i> CSV
           </button>
         </div>
       </div>
     </section>
 
-    <!-- Alerts -->
-    <div id="error-banner" class="alert alert-error hidden">
-      <i class="ri-error-warning-fill"></i>
-      <span id="error-message"></span>
-    </div>
+    <!-- ALERTS & STATUS -->
+    <div id="alert-area"></div>
 
-    <div id="limitation-banner" class="alert alert-warning">
-      <i class="ri-information-fill"></i>
-      <span>Este relatório agrupa pedidos pelo atributo <code>utm_content</code> via API Shopify.</span>
-    </div>
-
-    <!-- Empty State -->
-    <div id="no-data-section" class="card hidden" style="text-align: center; padding: 60px 20px;">
-      <i class="ri-database-2-line" style="font-size: 48px; color: var(--text-muted);"></i>
-      <h3 style="margin-top: 16px; color: var(--text-primary);">Aguardando Conexão</h3>
-      <p style="color: var(--text-secondary); margin-bottom: 24px;">Configure as credenciais e inicie a busca.</p>
-      <button id="initial-load-button" class="btn btn-primary">Conectar Shopify</button>
-    </div>
-
-    <!-- New Orders Snapshot -->
-    <div id="new-orders-section" class="card hidden">
+    <!-- 3. NEW ORDERS DELTA (Visible only on update) -->
+    <section id="delta-section" class="card delta-card hidden animate-fade-in">
       <div class="card-header">
-        <div class="card-title">
-          <span class="status-pill green"></span> Novo Delta Detectado
+        <div class="card-title" style="color: var(--primary);">
+          <i class="ri-flashlight-fill"></i> Novas Vendas Detectadas
         </div>
-        <button id="reset-snapshot-button" class="btn btn-ghost" style="font-size: 0.8rem;">Resetar Base</button>
-      </div>
-      <div style="display: grid; gap: 12px;">
-        <p><strong>Tempo decorrido:</strong> <span id="diff-time" style="color: var(--text-muted);">--</span></p>
-        <div id="new-orders-content"></div>
-        <div id="campaign-breakdown"></div>
+        <button id="reset-snapshot" class="btn btn-ghost" style="font-size: 0.75rem;">Resetar Base</button>
       </div>
-    </div>
-
-    <!-- Metrics -->
-    <section id="summary-metrics-section" class="metrics-grid hidden">
-      <div class="metric-card">
-        <span class="metric-label">Total de Pedidos</span>
-        <span class="metric-value" id="metric-total-pedidos">0</span>
-        <span class="metric-sub">UTMs Únicas: <span id="metric-unique-utms">0</span></span>
+      <div class="flex-between mb-4" style="font-size: 0.9rem; color: var(--text-muted);">
+        <span>Base de comparação: <span id="snapshot-time" style="color: var(--text-main);">--</span></span>
+        <span>Total de novos pedidos: <strong id="new-orders-count">0</strong></span>
       </div>
-      <div class="metric-card">
-        <span class="metric-label">Taxa de Conversão Financeira</span>
-        <span class="metric-value" id="metric-taxa-geral">0%</span>
-        <span class="badge badge-success" id="badge-taxa-geral">OK</span>
-      </div>
-      <div class="metric-card">
-        <span class="metric-label">Faturamento Bruto</span>
-        <span class="metric-value" id="metric-total-vendas">R$ 0,00</span>
-        <span class="metric-sub">Total de pedidos</span>
-      </div>
-      <div class="metric-card">
-        <span class="metric-label">Faturamento Pago</span>
-        <span class="metric-value" id="metric-vendas-pagas" style="color: var(--color-primary);">R$ 0,00</span>
-        <span class="metric-sub" id="metric-count-pagas">0 pedidos</span>
+      <div id="delta-content" class="delta-list">
+        <!-- JS Injected -->
       </div>
     </section>
 
-    <!-- Table Section -->
-    <section class="card" id="table-section">
-      <!-- Loading State -->
-      <div id="loading-state" class="hidden" style="text-align: center; padding: 40px;">
-        <div class="loading-spinner"></div>
-        <p style="color: var(--text-secondary);">Processando dados da API...</p>
-      </div>
+    <!-- 4. EMPTY STATE (Initial) -->
+    <div id="empty-state" class="state-container">
+      <i class="ri-database-2-line state-icon"></i>
+      <h3 class="mb-4">Pronto para Analisar</h3>
+      <p style="max-width: 400px; margin: 0 auto 24px;">
+        Configure suas credenciais da Shopify acima e clique em "Atualizar Dados" para gerar o relatório de UTM.
+      </p>
+      <button id="btn-initial-connect" class="btn btn-primary">Conectar e Buscar</button>
+    </div>
 
-      <!-- Empty Data State -->
-      <div id="empty-state" class="hidden" style="text-align: center; padding: 40px;">
-        <p style="color: var(--text-secondary);">Nenhum dado encontrado para este período.</p>
-      </div>
+    <!-- 5. LOADING STATE -->
+    <div id="loading-state" class="state-container hidden">
+      <div class="spinner" style="margin: 0 auto 16px;"></div>
+      <p>Processando pedidos e UTMs...</p>
+    </div>
 
-      <!-- Data Table -->
-      <div id="table-wrapper" class="hidden">
-        <table id="utm-report-table">
-          <thead>
-            <tr>
-              <th onclick="app.handleSort('lastParameter')">Campanha / UTM <i class="ri-arrow-up-down-line"></i></th>
-              <th class="text-center">Pagos / Total</th>
-              <th onclick="app.handleSort('clientesUnicos')" class="text-center">Clientes <i class="ri-arrow-up-down-line"></i></th>
-              <th onclick="app.handleSort('totalVendas')" class="text-right">Total Vendas <i class="ri-arrow-up-down-line"></i></th>
-              <th onclick="app.handleSort('vendasPagas')" class="text-right">Vendas Pagas <i class="ri-arrow-up-down-line"></i></th>
-              <th onclick="app.handleSort('taxaPagamento')" class="text-right">Taxa Pagto <i class="ri-arrow-up-down-line"></i></th>
-            </tr>
-          </thead>
-          <tbody id="table-body">
-            <!-- Rows injected here -->
-          </tbody>
-        </table>
-      </div>
-    </section>
+    <!-- 6. DASHBOARD (Metrics & Table) -->
+    <div id="dashboard-content" class="hidden animate-fade-in">
+      
+      <!-- Metrics Grid -->
+      <section class="metrics-container">
+        <div class="metric-card">
+          <span class="metric-label">Total de Pedidos</span>
+          <span class="metric-value" id="m-total-orders">0</span>
+          <span class="metric-sub">UTMs Únicas: <span id="m-unique-utms">0</span></span>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">Taxa de Conversão</span>
+          <span class="metric-value" id="m-conversion-rate">0%</span>
+          <span class="badge badge-success" id="m-conversion-badge">Calculando</span>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">Faturamento Bruto</span>
+          <span class="metric-value" id="m-total-revenue">R$ 0,00</span>
+          <span class="metric-sub">Todos os status</span>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">Faturamento Pago</span>
+          <span class="metric-value" id="m-paid-revenue" style="color: var(--primary);">R$ 0,00</span>
+          <span class="metric-sub" id="m-paid-count">0 pedidos pagos</span>
+        </div>
+      </section>
+
+      <!-- Table Section -->
+      <section class="card">
+        <div class="card-header">
+          <div class="card-title">
+            <i class="ri-table-2"></i> Detalhamento por Campanha
+          </div>
+        </div>
+        
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th onclick="app.sortBy('utm')">Campanha / Conteúdo <i class="ri-arrow-up-down-line"></i></th>
+                <th class="text-center">Pedidos <i class="ri-arrow-up-down-line opacity-0"></i></th>
+                <th class="text-center" onclick="app.sortBy('clients')">Clientes <i class="ri-arrow-up-down-line"></i></th>
+                <th class="text-right" onclick="app.sortBy('total')">Venda Total <i class="ri-arrow-up-down-line"></i></th>
+                <th class="text-right" onclick="app.sortBy('paid')">Venda Paga <i class="ri-arrow-up-down-line"></i></th>
+                <th class="text-right" onclick="app.sortBy('rate')">% Pago <i class="ri-arrow-up-down-line"></i></th>
+              </tr>
+            </thead>
+            <tbody id="report-body">
+              <!-- Rows injected via JS -->
+            </tbody>
+          </table>
+        </div>
+        
+        <div id="no-data-msg" class="state-container hidden" style="padding: 20px;">
+          <p style="font-size: 0.9rem;">Nenhum dado encontrado para o período selecionado.</p>
+        </div>
+      </section>
+    </div>
 
   </main>
 
   <script>
     /**
-     * Shopify Service
-     * Handles communication with Shopify Admin API
+     * UTILITIES
      */
-    const ShopifyService = {
-      config: {
-        storeName: '',
-        accessToken: '',
-        corsProxy: '',
-        apiVersion: '2024-01'
+    const Utils = {
+      formatCurrency(value) {
+        return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+      },
+      formatDate(isoString) {
+        return new Date(isoString).toLocaleString('pt-BR');
       },
+      showAlert(message, type = 'info') {
+        const area = document.getElementById('alert-area');
+        const alert = document.createElement('div');
+        alert.className = `alert alert-${type} animate-fade-in`;
+        
+        let icon = 'ri-information-line';
+        if(type === 'error') icon = 'ri-error-warning-line';
+        if(type === 'warning') icon = 'ri-alert-line';
+
+        alert.innerHTML = `<i class="${icon}"></i> <span>${message}</span>`;
+        area.innerHTML = '';
+        area.appendChild(alert);
+        
+        // Auto dismiss
+        setTimeout(() => {
+          alert.style.opacity = '0';
+          setTimeout(() => alert.remove(), 300);
+        }, 5000);
+      }
+    };
+
+    /**
+     * SHOPIFY SERVICE
+     * Handles API communication
+     */
+    const ShopifyService = {
+      config: { storeName: '', accessToken: '', corsProxy: '', apiVersion: '2024-01' },
 
       loadConfig() {
-        const stored = localStorage.getItem('shopify_app_config');
+        const stored = localStorage.getItem('utm_pro_config');
         if (stored) {
-          this.config = JSON.parse(stored);
+          this.config = { ...this.config, ...JSON.parse(stored) };
           return this.config;
         }
         return null;
@@ -685,36 +634,33 @@
 
       saveConfig(newConfig) {
         this.config = { ...this.config, ...newConfig };
-        localStorage.setItem('shopify_app_config', JSON.stringify(this.config));
+        localStorage.setItem('utm_pro_config', JSON.stringify(this.config));
       },
 
       buildUrl(startDate, endDate, pageinfo = '') {
         const baseUrl = `https://${this.config.storeName}.myshopify.com/admin/api/${this.config.apiVersion}/orders.json`;
-        
         const params = new URLSearchParams({
           status: 'any',
           created_at_min: startDate,
           created_at_max: endDate,
-          limit: '250'
+          limit: '250',
+          fields: 'id,name,total_price,financial_status,processing_method,customer,created_at,landing_site_ref,source_name' // Efficient fields
         });
 
-        if (pageinfo) {
-          params.append('page_info', pageinfo);
-        }
+        if (pageinfo) params.append('page_info', pageinfo);
 
         let finalUrl = `${baseUrl}?${params.toString()}`;
 
         if (this.config.corsProxy && this.config.corsProxy.trim() !== '') {
           const proxy = this.config.corsProxy.replace(/\/$/, '');
-          finalUrl = `${proxy}${finalUrl}`;
+          finalUrl = `${proxy}${encodeURIComponent(finalUrl)}`;
         }
-
         return finalUrl;
       },
 
       async fetchAllOrders(startDate, endDate) {
         if (!this.config.storeName || !this.config.accessToken) {
-          throw new Error("Credenciais não configuradas.");
+          throw new Error("Credenciais ausentes.");
         }
 
         let orders = [];
@@ -724,34 +670,26 @@
           try {
             const response = await fetch(url, {
               method: 'GET',
-              headers: {
-                'X-Shopify-Access-Token': this.config.accessToken,
-                'Content-Type': 'application/json'
-              }
+              headers: { 'X-Shopify-Access-Token': this.config.accessToken }
             });
 
             if (!response.ok) {
-              if (response.status === 401) throw new Error("Erro de Autenticação (401).");
+              if (response.status === 401) throw new Error("Token inválido (401).");
               if (response.status === 404) throw new Error("Loja não encontrada (404).");
-              throw new Error(`API Error: ${response.status}`);
+              throw new Error(`Erro na API: ${response.status}`);
             }
 
             const data = await response.json();
-            if (data.orders) {
-              orders = orders.concat(data.orders);
-            }
+            if (data.orders) orders = orders.concat(data.orders);
 
+            // Pagination
             const linkHeader = response.headers.get('Link');
-            if (linkHeader) {
-              const nextUrl = this.parseLinkHeader(linkHeader, 'next');
-              url = nextUrl;
-            } else {
-              url = null;
-            }
+            url = linkHeader ? this.parseLinkHeader(linkHeader, 'next') : null;
 
           } catch (error) {
-            if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
-               throw new Error("Erro de CORS. Use um Proxy.");
+            console.error(error);
+            if (error.message.includes('Failed to fetch')) {
+              throw new Error("Erro de CORS. Verifique o Proxy.");
             }
             throw error;
           }
@@ -765,245 +703,233 @@
         for (let link of links) {
           const parts = link.split(';');
           const url = parts[0].trim().replace(/<|>/g, '');
-          if (parts[1].includes(`rel="${rel}"`)) {
-            return url;
-          }
+          if (parts[1].includes(`rel="${rel}"`)) return url;
         }
         return null;
       }
     };
 
     /**
-     * Main Application Logic
+     * APP LOGIC
      */
     const app = {
-      dateRangeOption: 'hoje',
-      loading: false,
-      error: null,
-      utmData: [],
-      totalOrders: 0,
-      lastUpdate: '',
-      sortColumn: 'vendasPagas',
-      sortDirection: 'desc',
-      snapshot: null,
-      newOrdersReport: null,
-      isFirstLoad: true,
-      hasLoadedData: false,
-      allSessionOrders: [],
+      state: {
+        theme: 'dark',
+        rawData: [],
+        processedData: [],
+        snapshot: null,
+        sortCol: 'paid',
+        sortAsc: false
+      },
 
       init() {
         this.cacheDOM();
         this.bindEvents();
-        this.loadInitialConfig();
-        this.checkInitialView();
-        this.initTheme();
+        this.loadSettings();
+        this.checkTheme();
       },
 
       cacheDOM() {
         this.dom = {
           // Config
-          configSection: document.getElementById('config-section'),
-          configForm: document.getElementById('config-form'),
-          toggleConfigBtn: document.getElementById('toggle-config-btn'),
-          storeNameInput: document.getElementById('store-name'),
-          accessTokenInput: document.getElementById('access-token'),
-          corsProxyInput: document.getElementById('cors-proxy'),
-          saveConfigBtn: document.getElementById('save-config-btn'),
-          configStatus: document.getElementById('config-status'),
-
-          // Filters
-          dateSelect: document.getElementById('date-range-select'),
-          customDateGroup: document.getElementById('custom-date-group'),
-          customStart: document.getElementById('custom-date-start'),
-          customEnd: document.getElementById('custom-date-end'),
-          refreshBtn: document.getElementById('refresh-button'),
-          exportBtn: document.getElementById('export-csv-button'),
-          initialLoadBtn: document.getElementById('initial-load-button'),
-          resetSnapshotBtn: document.getElementById('reset-snapshot-button'),
+          configCard: document.getElementById('config-card'),
+          configContent: document.getElementById('config-content'),
+          toggleConfig: document.getElementById('toggle-config-btn'),
+          inpStore: document.getElementById('store-name'),
+          inpToken: document.getElementById('access-token'),
+          inpProxy: document.getElementById('cors-proxy'),
+          btnSave: document.getElementById('save-config-btn'),
+          msgConfig: document.getElementById('config-msg'),
           
-          // Banners
-          limitationBanner: document.getElementById('limitation-banner'),
-          errorBanner: document.getElementById('error-banner'),
-          errorMsg: document.getElementById('error-message'),
+          // Filters
+          dateRange: document.getElementById('date-range'),
+          customDates: document.getElementById('custom-dates'),
+          dateStart: document.getElementById('date-start'),
+          dateEnd: document.getElementById('date-end'),
+          btnFetch: document.getElementById('btn-fetch'),
+          btnInitial: document.getElementById('btn-initial-connect'),
+          btnExport: document.getElementById('btn-export'),
           
-          // Sections
-          noDataSection: document.getElementById('no-data-section'),
-          newOrdersSection: document.getElementById('new-orders-section'),
-          newOrdersContent: document.getElementById('new-orders-content'),
-          campaignBreakdown: document.getElementById('campaign-breakdown'),
-          diffTime: document.getElementById('diff-time'),
+          // Views
+          emptyState: document.getElementById('empty-state'),
+          loadingState: document.getElementById('loading-state'),
+          dashboard: document.getElementById('dashboard-content'),
+          deltaSection: document.getElementById('delta-section'),
+          deltaContent: document.getElementById('delta-content'),
+          snapshotTime: document.getElementById('snapshot-time'),
+          newOrdersCount: document.getElementById('new-orders-count'),
+          resetSnapshot: document.getElementById('reset-snapshot'),
           
           // Metrics
-          summarySection: document.getElementById('summary-metrics-section'),
-          metricTotalPedidos: document.getElementById('metric-total-pedidos'),
-          metricUniqueUtms: document.getElementById('metric-unique-utms'),
-          metricTaxaGeral: document.getElementById('metric-taxa-geral'),
-          badgeTaxaGeral: document.getElementById('badge-taxa-geral'),
-          metricTotalVendas: document.getElementById('metric-total-vendas'),
-          metricVendasPagas: document.getElementById('metric-vendas-pagas'),
-          metricCountPagas: document.getElementById('metric-count-pagas'),
+          mTotalOrders: document.getElementById('m-total-orders'),
+          mUniqueUtms: document.getElementById('m-unique-utms'),
+          mConvRate: document.getElementById('m-conversion-rate'),
+          mConvBadge: document.getElementById('m-conversion-badge'),
+          mTotalRev: document.getElementById('m-total-revenue'),
+          mPaidRev: document.getElementById('m-paid-revenue'),
+          mPaidCount: document.getElementById('m-paid-count'),
           
           // Table
-          tableSection: document.getElementById('table-section'),
-          loadingState: document.getElementById('loading-state'),
-          emptyState: document.getElementById('empty-state'),
-          tableWrapper: document.getElementById('table-wrapper'),
-          tableBody: document.getElementById('table-body'),
+          tableBody: document.getElementById('report-body'),
+          noDataMsg: document.getElementById('no-data-msg'),
           
-          // Theme
+          // Global
           themeToggle: document.getElementById('theme-toggle'),
-          themeIcon: document.getElementById('theme-icon')
+          alertArea: document.getElementById('alert-area')
         };
       },
 
-      initTheme() {
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        this.updateThemeIcon(savedTheme);
-
-        this.dom.themeToggle.addEventListener('click', () => {
-          const current = document.documentElement.getAttribute('data-theme');
-          const next = current === 'dark' ? 'light' : 'dark';
-          document.documentElement.setAttribute('data-theme', next);
-          localStorage.setItem('theme', next);
-          this.updateThemeIcon(next);
+      bindEvents() {
+        // Config
+        this.dom.toggleConfig.addEventListener('click', () => {
+          this.dom.configContent.classList.toggle('hidden');
+          const icon = this.dom.toggleConfig.querySelector('i');
+          icon.className = this.dom.configContent.classList.contains('hidden') 
+            ? 'ri-arrow-down-s-line' 
+            : 'ri-arrow-up-s-line';
+        });
+
+        this.dom.btnSave.addEventListener('click', () => this.saveSettings());
+        
+        // Data
+        this.dom.dateRange.addEventListener('change', (e) => {
+          this.dom.customDates.classList.toggle('hidden', e.target.value !== 'customizado');
+        });
+        
+        this.dom.btnFetch.addEventListener('click', () => this.fetchData());
+        this.dom.btnInitial.addEventListener('click', () => this.fetchData());
+        this.dom.btnExport.addEventListener('click', () => this.exportCSV());
+        this.dom.resetSnapshot.addEventListener('click', () => {
+          localStorage.removeItem('utm_pro_snapshot');
+          this.state.snapshot = null;
+          this.dom.deltaSection.classList.add('hidden');
+          Utils.showAlert('Base de comparação resetada.', 'info');
         });
-      },
 
-      updateThemeIcon(theme) {
-        this.dom.themeIcon.className = theme === 'dark' ? 'ri-sun-line' : 'ri-moon-line';
+        // Theme
+        this.dom.themeToggle.addEventListener('click', () => this.toggleTheme());
       },
 
-      loadInitialConfig() {
+      loadSettings() {
         const config = ShopifyService.loadConfig();
         if (config) {
-          this.dom.storeNameInput.value = config.storeName || '';
-          this.dom.accessTokenInput.value = config.accessToken || '';
-          this.dom.corsProxyInput.value = config.corsProxy || '';
-          this.enableButtons();
+          this.dom.inpStore.value = config.storeName || '';
+          this.dom.inpToken.value = config.accessToken || '';
+          this.dom.inpProxy.value = config.corsProxy || '';
+          this.enableControls();
+        }
+        
+        // Load Snapshot
+        const snap = localStorage.getItem('utm_pro_snapshot');
+        if (snap) {
+          this.state.snapshot = JSON.parse(snap);
         }
       },
 
-      bindEvents() {
-        this.dom.toggleConfigBtn.addEventListener('click', () => {
-          const isHidden = this.dom.configForm.classList.contains('hidden');
-          this.dom.configForm.classList.toggle('hidden');
-          this.dom.toggleConfigBtn.querySelector('i').className = isHidden ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line';
-        });
+      saveSettings() {
+        const store = this.dom.inpStore.value.trim();
+        const token = this.dom.inpToken.value.trim();
+        const proxy = this.dom.inpProxy.value.trim();
 
-        this.dom.saveConfigBtn.addEventListener('click', () => {
-          const storeName = this.dom.storeNameInput.value.trim();
-          const token = this.dom.accessTokenInput.value.trim();
-          const proxy = this.dom.corsProxyInput.value.trim();
-
-          if (!storeName || !token) {
-            alert("Preencha o nome da loja e o token.");
-            return;
-          }
-
-          ShopifyService.saveConfig({ storeName, accessToken: token, corsProxy: proxy });
-          this.dom.configStatus.classList.remove('hidden');
-          this.enableButtons();
-          setTimeout(() => this.dom.configStatus.classList.add('hidden'), 3000);
-        });
-
-        this.dom.dateSelect.addEventListener('change', (e) => {
-          this.dateRangeOption = e.target.value;
-          this.toggleCustomDateInput();
-        });
+        if (!store || !token) {
+          Utils.showAlert('Preencha Nome da Loja e Token.', 'warning');
+          return;
+        }
 
-        this.dom.refreshBtn.addEventListener('click', () => this.fetchOrders());
-        this.dom.initialLoadBtn.addEventListener('click', () => this.fetchOrders());
-        this.dom.resetSnapshotBtn.addEventListener('click', () => this.resetSnapshot());
-        this.dom.exportBtn.addEventListener('click', () => this.exportCSV());
+        ShopifyService.saveConfig({ storeName: store, accessToken: token, corsProxy: proxy });
+        this.dom.msgConfig.classList.remove('hidden');
+        this.enableControls();
+        setTimeout(() => this.dom.msgConfig.classList.add('hidden'), 3000);
       },
 
-      enableButtons() {
-        this.dom.refreshBtn.disabled = false;
-        this.dom.initialLoadBtn.disabled = false;
+      enableControls() {
+        this.dom.btnFetch.disabled = false;
+        this.dom.btnInitial.disabled = false;
       },
 
-      toggleCustomDateInput() {
-        if (this.dateRangeOption === 'customizado') {
-          this.dom.customDateGroup.classList.remove('hidden');
-        } else {
-          this.dom.customDateGroup.classList.add('hidden');
-        }
+      checkTheme() {
+        const saved = localStorage.getItem('utm_pro_theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', saved);
+        const icon = this.dom.themeToggle.querySelector('i');
+        icon.className = saved === 'dark' ? 'ri-sun-line' : 'ri-moon-line';
       },
 
-      checkInitialView() {
-        this.dom.noDataSection.classList.remove('hidden');
-        this.dom.loadingState.classList.add('hidden');
-        this.dom.tableWrapper.classList.add('hidden');
-        this.dom.emptyState.classList.add('hidden');
+      toggleTheme() {
+        const current = document.documentElement.getAttribute('data-theme');
+        const next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('utm_pro_theme', next);
+        const icon = this.dom.themeToggle.querySelector('i');
+        icon.className = next === 'dark' ? 'ri-sun-line' : 'ri-moon-line';
       },
 
-      getDateRange() {
+      getDates() {
+        const range = this.dom.dateRange.value;
         const now = new Date();
         const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-        let startDate, endDate;
+        
+        let start, end = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1); // End of today
 
-        switch (this.dateRangeOption) {
-          case 'hoje':
-            startDate = today;
-            endDate = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1);
-            break;
-          case 'ontem':
-            startDate = new Date(today.getTime() - 24 * 60 * 60 * 1000);
-            endDate = new Date(today.getTime() - 1);
-            break;
-          case 'ultimos7':
-            startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
-            endDate = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1);
-            break;
-          case 'ultimos30':
-            startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
-            endDate = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1);
-            break;
+        const days = (n) => new Date(today.getTime() - n * 24 * 60 * 60 * 1000);
+
+        switch (range) {
+          case 'hoje': start = today; break;
+          case 'ontem': start = days(1); end = days(0); break;
+          case 'ultimos7': start = days(7); break;
+          case 'ultimos30': start = days(30); break;
           case 'customizado':
-            if (this.dom.customStart.value && this.dom.customEnd.value) {
-              startDate = new Date(this.dom.customStart.value);
-              endDate = new Date(this.dom.customEnd.value);
-              endDate.setHours(23, 59, 59, 999);
+            if(this.dom.dateStart.value && this.dom.dateEnd.value) {
+              start = new Date(this.dom.dateStart.value);
+              end = new Date(this.dom.dateEnd.value);
+              end.setHours(23,59,59,999);
             } else {
-              startDate = today;
-              endDate = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1);
+              start = days(7); // Fallback
             }
             break;
-          default:
-            startDate = today;
-            endDate = new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1);
+          default: start = days(7);
         }
-        return { startDate: startDate.toISOString(), endDate: endDate.toISOString() };
+        return { start: start.toISOString(), end: end.toISOString() };
       },
 
-      async fetchOrders() {
+      async fetchData() {
         const config = ShopifyService.loadConfig();
-        if (!config || !config.storeName || !config.accessToken) {
-          alert("Configure as credenciais primeiro.");
-          this.dom.configSection.scrollIntoView({ behavior: 'smooth' });
+        if (!config || !config.storeName) {
+          this.dom.configCard.scrollIntoView({ behavior: 'smooth' });
+          Utils.showAlert('Configure a API primeiro.', 'warning');
           return;
         }
 
         this.setLoading(true);
-        this.error = null;
-        this.dom.errorBanner.classList.add('hidden');
-        this.dom.newOrdersSection.classList.add('hidden');
-
-        const { startDate, endDate } = this.getDateRange();
+        this.dom.alertArea.innerHTML = '';
+        this.dom.deltaSection.classList.add('hidden');
 
         try {
-          const fetchedOrders = await ShopifyService.fetchAllOrders(startDate, endDate);
+          const { start, end } = this.getDates();
+          const orders = await ShopifyService.fetchAllOrders(start, end);
           
-          const report = this.analyzeNewOrders(fetchedOrders, this.snapshot);
-          this.newOrdersReport = report;
-
-          const newSnapshot = this.createSnapshot(fetchedOrders);
-          this.snapshot = newSnapshot;
+          this.state.rawData = orders;
+          this.processData(orders);
+          this.checkForNewOrders(orders);
+          
+          // Save snapshot for next time
+          this.state.snapshot = {
+            timestamp: new Date().toISOString(),
+            orderIds: orders.map(o => o.id)
+          };
+          localStorage.setItem('utm_pro_snapshot', JSON.stringify(this.state.snapshot));
+
+          this.render();
           
-          this.allSessionOrders = fetchedOrders;
-          this.isFirstLoad = false;
-          this.hasLoadedData = true;
+        } catch (err) {
+          Utils.showAlert(err.message, 'error');
+          this.dom.dashboard.classList.add('hidden');
+          this.dom.emptyState.classList.remove('hidden');
+        } finally {
+          this.setLoading(false);
+        }
+      },
+
+      checkForNewOrders(currentOrders) {
+        if (!this.state.snapshot) return;
 
-          this.processOrders(this.allSessionOrders);
-          this.totalOrders = this.allSessionOrders.length;
+        const previousIds = new Set(this