From 1b81db1a6b97d79f39050b13f67a1a690617d199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81?= <amakunin7@gmail.com>
Date: Wed, 11 Feb 2026 16:17:32 +0100
Subject: [PATCH] commit de mis cosos

---
 src/styles/base.css           | 340 +++++---------
 src/styles/clientes.css       | 237 ++++------
 src/styles/create-invoice.css | 191 ++++----
 src/styles/dashboard.css      | 105 +++--
 src/styles/facturas.css       |  72 +--
 src/styles/login.css          |  66 ++-
 src/styles/modal.css          | 862 +++++++++++++++-------------------
 src/styles/overlays.css       |  87 ++--
 src/styles/settings.css       | 127 +++--
 src/styles/sidebar.css        |  77 +--
 src/styles/toast.css          |  87 ++--
 11 files changed, 1011 insertions(+), 1240 deletions(-)

diff --git a/src/styles/base.css b/src/styles/base.css
index 9f4f3c0..7527d02 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,30 +1,39 @@
-/* ===================== BASE STYLES & CSS VARIABLES ===================== */
+/* ====== BASE / VARIABLES ====== */
 :root {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  line-height: 1.5;
+  line-height: 1.6;
   font-weight: 400;
-
   color-scheme: light;
-  color: #1a2332;
-  background-color: #f0f4f8;
+  color: #1e293b;
+  background-color: #f8fafc;
 
-  --primary: #0d9488;
-  --primary-hover: #0f766e;
-  --primary-light: rgba(13, 148, 136, 0.1);
-  --success: #059669;
-  --success-hover: #047857;
-  --warning: #d97706;
-  --warning-hover: #b45309;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-light: rgba(37, 99, 235, 0.06);
+  --primary-subtle: rgba(37, 99, 235, 0.08);
+  --success: #16a34a;
+  --success-hover: #15803d;
+  --warning: #ca8a04;
+  --warning-hover: #a16207;
   --danger: #dc2626;
   --danger-hover: #b91c1c;
   --card-bg: #ffffff;
   --border-color: #e2e8f0;
-  --text-primary: #1a2332;
+  --border-subtle: #f1f5f9;
+  --text-primary: #0f172a;
   --text-secondary: #64748b;
-  --sidebar-bg: #1a2332;
+  --text-tertiary: #94a3b8;
+  --sidebar-bg: #0f172a;
   --sidebar-text: #94a3b8;
-  --sidebar-active: #0d9488;
-  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: #3b82f6;
+  --sidebar-hover: rgba(255, 255, 255, 0.04);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -32,265 +41,173 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: var(--primary);
-  text-decoration: inherit;
-}
+*, *::before, *::after { box-sizing: border-box; }
 
-a:hover {
-  color: var(--primary-hover);
-}
+a { font-weight: 500; color: var(--primary); text-decoration: none; }
+a:hover { color: var(--primary-hover); }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
+body { margin: 0; min-width: 320px; min-height: 100vh; }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
+h1 { font-size: 1.625rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
 
-#app {
-  width: 100%;
-  min-height: 100vh;
-}
+#app { width: 100%; min-height: 100vh; }
 
 button {
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+  padding: 0.5em 1em;
+  font-size: 0.8125rem;
   font-weight: 500;
   font-family: inherit;
   background-color: var(--primary);
   color: white;
   cursor: pointer;
-  transition: background-color 0.25s, border-color 0.25s;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
+button:hover { background-color: var(--primary-hover); }
+button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 
-button:hover {
-  background-color: var(--primary-hover);
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto var(--primary);
-}
-
-/* Shared status badges */
+/* Status badges */
 .status-badge {
-  display: inline-block;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.status-pending {
-  background-color: #fef3c7;
-  color: #000000;
-}
-
-.status-paid {
-  background-color: #d1fae5;
-  color: #000000;
-}
-
-.status-overdue {
-  background-color: #fee2e2;
-  color: #000000;
-}
-
-.status-draft {
-  background-color: #f1f5f9;
-  color: #000000;
-}
-
-.status-validated {
-  background: #dbeafe;
-  color: #000000;
-}
-
-.status-unpaid {
-  background: #fee2e2;
-  color: #000000;
-}
-
-.status-canceled {
-  background: #f3f4f6;
-  color: #000000;
-  text-decoration: line-through;
-}
-
-/* Shared form group */
-.form-group {
-  margin-bottom: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.175rem 0.55rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
+.status-pending { background: #fef9c3; color: #854d0e; }
+.status-paid { background: #dcfce7; color: #166534; }
+.status-overdue { background: #fee2e2; color: #991b1b; }
+.status-draft { background: #f1f5f9; color: #475569; }
+.status-validated { background: #dbeafe; color: #1e40af; }
+.status-unpaid { background: #fef2f2; color: #991b1b; }
+.status-canceled { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
 
+/* Form group */
+.form-group { margin-bottom: 1.25rem; }
 .form-group label {
   display: block;
   color: var(--text-primary);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.375rem;
   font-weight: 500;
+  font-size: 0.8125rem;
 }
-
 .form-group input {
   width: 100%;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: #fff;
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-
 .form-group input:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
-/* Shared button styles */
+/* View button */
 .btn-view {
   background: transparent;
   border: none;
-  padding: 0.25rem;
-  border-radius: 4px;
+  padding: 0.35rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  color: var(--text-secondary);
-  transition: all 0.2s;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease, background 0.15s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+.btn-view:hover { color: var(--primary); background: var(--primary-light); }
 
-.btn-view:hover {
-  color: var(--primary);
-  transform: scale(1.1);
-}
-
-/* Loading/error shared */
-.loading,
-.error,
-.no-invoices,
-.no-clients {
+/* Loading */
+.loading, .error, .no-invoices, .no-clients {
   padding: 3rem;
   text-align: center;
   color: var(--text-secondary);
-  font-size: 1.1rem;
+  font-size: 0.9rem;
 }
+.error { color: var(--danger); }
 
-.error {
-  color: var(--danger);
-}
-
-/* Pagination (shared between facturas & clientes) */
+/* Pagination */
 .pagination {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2rem;
-  margin-top: 2rem;
-  padding: 1.5rem;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+  padding: 0.75rem 1rem;
   background: var(--card-bg);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
 }
-
 .pagination-info {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
   display: flex;
-  gap: 0.5rem;
+  gap: 0.3rem;
   align-items: center;
 }
-
 .pagination-info .current-page,
 .pagination-info .total-pages {
-  font-weight: 700;
-  color: var(--primary);
-  min-width: 30px;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 20px;
   text-align: center;
 }
-
 .btn-pagination {
-  padding: 0.75rem 1.5rem;
-  background-color: var(--primary);
-  color: white;
-  border: none;
-  border-radius: 8px;
+  padding: 0.4rem 0.9rem;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  transition: all 0.15s ease;
 }
-
 .btn-pagination:hover:not(:disabled) {
-  background-color: var(--primary-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
 }
-
 .btn-pagination:disabled {
-  background-color: #cbd5e1;
+  background: #f8fafc;
+  color: #cbd5e1;
   cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.btn-pagination:active:not(:disabled) {
-  transform: translateY(0);
 }
 
 @media (max-width: 768px) {
-  .pagination {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-
-  .btn-pagination {
-    flex: 1;
-    min-width: 120px;
-  }
-
-  .pagination-info {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-  }
+  .pagination { flex-wrap: wrap; gap: 0.5rem; }
+  .btn-pagination { flex: 1; min-width: 90px; }
+  .pagination-info { order: 3; width: 100%; justify-content: center; }
 }
 
-/* Skeleton loader animation */
+/* Skeleton */
 @keyframes skeleton-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 }
-
 .skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
   background-size: 200% 100%;
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  animation: skeleton-shimmer 1.8s ease-in-out infinite;
   border-radius: 4px;
 }
-
 .skeleton-row {
-  display: flex;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  display: flex; gap: 1rem;
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid var(--border-subtle);
 }
-
-.skeleton-cell {
-  height: 16px;
-  border-radius: 4px;
-}
-
+.skeleton-cell { height: 14px; border-radius: 3px; }
 .skeleton-cell.w-sm { width: 60px; }
 .skeleton-cell.w-md { width: 120px; }
 .skeleton-cell.w-lg { width: 200px; }
@@ -301,47 +218,40 @@ button:focus-visible {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
+  padding: 3.5rem 2rem;
   text-align: center;
   color: var(--text-secondary);
 }
-
 .empty-state-icon {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
+  width: 56px; height: 56px;
+  border-radius: 14px;
   background: var(--primary-light);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1.5rem;
+  align-items: center; justify-content: center;
+  margin-bottom: 1rem;
   color: var(--primary);
 }
-
 .empty-state h3 {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.25rem;
   color: var(--text-primary);
-  font-size: 1.2rem;
-}
-
-.empty-state p {
-  margin: 0 0 1.5rem;
   font-size: 0.95rem;
-  max-width: 360px;
+  font-weight: 600;
+}
+.empty-state p {
+  margin: 0 0 1rem;
+  font-size: 0.8125rem;
+  max-width: 320px;
+  line-height: 1.5;
 }
-
 .empty-state .btn-empty-action {
-  padding: 0.6rem 1.5rem;
+  padding: 0.45rem 1rem;
   background: var(--primary);
   color: #fff;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-weight: 500;
+  font-size: 0.8125rem;
   cursor: pointer;
-  transition: background 0.2s;
-}
-
-.empty-state .btn-empty-action:hover {
-  background: var(--primary-hover);
+  transition: background 0.15s ease;
 }
+.empty-state .btn-empty-action:hover { background: var(--primary-hover); }
diff --git a/src/styles/clientes.css b/src/styles/clientes.css
index ffe49f9..45fbbe3 100644
--- a/src/styles/clientes.css
+++ b/src/styles/clientes.css
@@ -6,34 +6,36 @@
 }
 
 .clientes-header {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .clientes-header h1 {
   color: var(--text-primary);
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .clientes-filters {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
   align-items: center;
 }
 
 .clientes-filters .search-input {
   flex: 1;
-  max-width: 500px;
+  max-width: 400px;
 }
 
-/* Clients Table */
+/* Clients table */
 .clients-table-container {
   background: var(--card-bg);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-xs);
 }
 
 .clients-table {
@@ -43,21 +45,22 @@
 
 .clients-table thead {
   background: #f8fafc;
-  border-bottom: 2px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .clients-table th {
   font-weight: 600;
   color: var(--text-secondary);
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   text-transform: uppercase;
-  padding: 1rem 1.5rem;
+  letter-spacing: 0.04em;
+  padding: 0.75rem 1.25rem;
   text-align: left;
 }
 
 .clients-table tbody tr {
-  border-bottom: 1px solid var(--border-color);
-  transition: background-color 0.2s;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background-color 0.1s ease;
 }
 
 .clients-table tbody tr:hover {
@@ -69,46 +72,42 @@
 }
 
 .clients-table td {
-  padding: 1rem 1.5rem;
+  padding: 0.75rem 1.25rem;
   vertical-align: middle;
+  font-size: 0.8125rem;
 }
 
-.client-avatar-col {
-  width: 60px;
-}
-
-.client-avatar-cell {
-  width: 60px;
-}
+.client-avatar-col { width: 56px; }
+.client-avatar-cell { width: 56px; }
 
 .client-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 600;
-  font-size: 0.9rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: 0.8rem;
 }
 
 .client-name-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.15rem;
 }
 
 .client-company-name {
   font-weight: 600;
   color: var(--text-primary);
+  font-size: 0.8125rem;
 }
 
 .client-code {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  font-family: monospace;
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
+  font-family: 'SF Mono', 'Fira Code', monospace;
 }
 
 .client-email .email-text {
@@ -118,16 +117,16 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
+  font-size: 0.8125rem;
 }
 
 .client-phone {
   color: var(--text-primary);
-  font-family: monospace;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.8125rem;
 }
 
-.client-actions {
-  text-align: center;
-}
+.client-actions { text-align: center; }
 
 .client-actions .btn-action {
   margin: 0 auto;
@@ -137,7 +136,7 @@
 }
 
 .clients-table .client-actions-col {
-  width: 80px;
+  width: 72px;
   text-align: center;
 }
 
@@ -153,36 +152,36 @@
 /* Status badge for clients */
 .status-badge-client {
   display: inline-block;
-  padding: 0.2rem 0.6rem;
-  border-radius: 12px;
-  font-size: 0.8rem;
-  font-weight: 500;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
   white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
 .status-badge-client.status-active {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
+  background: #dcfce7;
+  color: #166534;
 }
 
 .status-badge-client.status-inactive {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
+  background: #fee2e2;
+  color: #991b1b;
 }
 
 .status-badge-client.status-unknown {
-  background: rgba(100, 116, 139, 0.1);
+  background: #f1f5f9;
   color: #64748b;
 }
 
 /* Client Modal */
 .client-modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(2px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -192,44 +191,44 @@
 
 .client-modal {
   background: var(--card-bg);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   width: 100%;
-  max-width: 600px;
+  max-width: 580px;
   max-height: 80vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
 }
 
 .client-modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem;
+  padding: 1.25rem 1.5rem;
   border-bottom: 1px solid var(--border-color);
-  background: #f8fafc;
 }
 
 .client-modal-header h2 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   color: var(--text-primary);
+  font-weight: 600;
 }
 
 .btn-close-modal {
   background: transparent;
   border: none;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   cursor: pointer;
-  color: var(--text-secondary);
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  transition: all 0.2s;
+  color: var(--text-tertiary);
+  padding: 0.25rem 0.4rem;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
 }
 
 .btn-close-modal:hover {
-  background: var(--border-color);
+  background: #f1f5f9;
   color: var(--text-primary);
 }
 
@@ -245,156 +244,114 @@
 
 .client-info-section h3,
 .contacts-section h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.7rem;
   color: var(--text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.05em;
+  font-weight: 600;
 }
 
 .info-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
+  gap: 0.875rem;
 }
 
 .info-item {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .info-label {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
   text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .info-value {
   font-weight: 600;
   color: var(--text-primary);
+  font-size: 0.875rem;
 }
 
 .contacts-list {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .contact-card {
   background: #f8fafc;
-  border-radius: 8px;
-  padding: 1rem;
+  border-radius: var(--radius-sm);
+  padding: 0.875rem;
   border: 1px solid var(--border-color);
 }
 
-.contact-header {
-  margin-bottom: 0.75rem;
-}
+.contact-header { margin-bottom: 0.5rem; }
 
 .contact-full-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-size: 1.05rem;
+  font-size: 0.875rem;
 }
 
 .contact-details {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.35rem;
 }
 
 .contact-row {
   display: flex;
   gap: 0.5rem;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
   color: var(--text-secondary);
 }
 
-.contact-row .label {
-  min-width: 120px;
-}
+.contact-row .label { min-width: 100px; }
 
 .no-contacts {
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   text-align: center;
-  padding: 2rem;
+  padding: 1.5rem;
   background: #f8fafc;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
 }
 
 /* Responsive */
 @media (max-width: 1024px) {
-  .clientes-page {
-    padding: 1rem;
-  }
-
+  .clientes-page { padding: 1rem; }
   .clients-table th,
-  .clients-table td {
-    padding: 0.75rem 1rem;
-  }
-
-  .client-email-col,
-  .client-email,
-  .client-type-col,
-  .client-type {
-    display: none;
-  }
+  .clients-table td { padding: 0.625rem 0.875rem; }
+  .client-email-col, .client-email,
+  .client-type-col, .client-type { display: none; }
 }
 
 @media (max-width: 768px) {
-  .clientes-filters {
-    flex-direction: column;
-  }
-
-  .clientes-filters .search-input {
-    max-width: 100%;
-  }
-
-  .clients-table thead {
-    display: none;
-  }
-
+  .clientes-filters { flex-direction: column; }
+  .clientes-filters .search-input { max-width: 100%; }
+  .clients-table thead { display: none; }
   .clients-table tbody tr.client-item {
     display: flex;
     flex-wrap: wrap;
-    padding: 1rem;
+    padding: 0.875rem;
     gap: 0.5rem;
     position: relative;
   }
-
-  .clients-table td {
-    padding: 0;
-  }
-
-  .client-avatar-cell {
-    width: auto;
-    margin-right: 1rem;
-  }
-
-  .client-name {
-    flex: 1;
-  }
-
-  .client-status,
-  .client-phone {
-    width: 100%;
-    padding-left: 58px;
-  }
-
-  .client-type-col,
-  .client-type {
-    display: none;
-  }
-
+  .clients-table td { padding: 0; }
+  .client-avatar-cell { width: auto; margin-right: 0.75rem; }
+  .client-name { flex: 1; }
+  .client-status, .client-phone { width: 100%; padding-left: 50px; }
+  .client-type-col, .client-type { display: none; }
   .client-actions {
     position: absolute;
-    right: 1rem;
+    right: 0.875rem;
     top: 50%;
     transform: translateY(-50%);
   }
-
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
+  .info-grid { grid-template-columns: 1fr; }
 }
diff --git a/src/styles/create-invoice.css b/src/styles/create-invoice.css
index 3ebb52c..d9bb289 100644
--- a/src/styles/create-invoice.css
+++ b/src/styles/create-invoice.css
@@ -1,7 +1,7 @@
 /* ===================== CREATE INVOICE PAGE ===================== */
 .create-invoice-page {
   padding: 2rem;
-  max-width: 1000px;
+  max-width: 960px;
   margin: 0 auto;
   min-height: 100vh;
 }
@@ -10,27 +10,28 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
   flex-shrink: 0;
 }
 
 .invoice-header-compact h1 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.375rem;
   color: var(--text-primary);
   font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .btn-back {
   background: transparent;
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
+  padding: 0.45rem 0.875rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-weight: 500;
-  font-size: 0.9rem;
-  transition: all 0.2s;
+  font-size: 0.8125rem;
+  transition: all 0.15s ease;
 }
 
 .btn-back:hover {
@@ -41,10 +42,10 @@
 
 .invoice-form-compact {
   background: var(--card-bg);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
-  padding: 2rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  padding: 1.75rem;
+  box-shadow: var(--shadow-xs);
 }
 
 .form-grid-compact {
@@ -73,24 +74,24 @@
 
 .form-field-compact label {
   font-weight: 500;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.375rem;
   color: var(--text-secondary);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .form-field-compact input,
 .form-field-compact select,
 .form-field-compact textarea {
-  padding: 0.625rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.9375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
   color: var(--text-primary);
   background: #ffffff;
   resize: vertical;
-  min-height: 38px;
+  min-height: 36px;
   font-family: inherit;
-  transition: all 0.2s;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
 .form-field-compact input:focus,
@@ -98,7 +99,7 @@
 .form-field-compact textarea:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 /* Date input wrapper */
@@ -123,25 +124,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.75rem;
+  padding: 0 0.625rem;
   background: var(--primary);
   color: white;
   border: 1px solid var(--primary);
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-top-right-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.15s;
 }
 
 .date-picker-btn:hover {
   background: var(--primary-hover);
 }
 
-.date-picker-btn:active {
-  transform: scale(0.96);
-}
-
-/* Lines Section */
+/* Lines section */
 .lines-section-compact {
   flex: 1;
   display: flex;
@@ -154,27 +151,29 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
   flex-shrink: 0;
 }
 
 .lines-header-compact h3 {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: 0.875rem;
   color: var(--text-primary);
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .btn-add-compact {
   background: #f8fafc;
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
+  padding: 0.4rem 0.875rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-weight: 500;
-  font-size: 0.875rem;
-  transition: all 0.2s;
+  font-size: 0.8125rem;
+  transition: all 0.15s;
 }
 
 .btn-add-compact:hover {
@@ -187,7 +186,7 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 /* Column headers */
@@ -196,12 +195,12 @@
   grid-template-columns: 4fr 0.8fr 1.2fr 0.8fr 1.2fr 40px;
   gap: 0.75rem;
   padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
   color: var(--text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 2px solid var(--border-color);
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border-color);
   margin-bottom: 0.25rem;
 }
 
@@ -212,42 +211,32 @@
   align-items: center;
   background: #f8fafc;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 0.75rem;
-  transition: all 0.2s;
+  border-radius: var(--radius-sm);
+  padding: 0.625rem 0.75rem;
+  transition: border-color 0.15s ease;
 }
 
 .line-row-compact:hover {
-  background: #f1f5f9;
   border-color: #cbd5e1;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
-.line-label-mobile {
-  display: none;
-}
-
-.line-field {
-  display: flex;
-  flex-direction: column;
-}
+.line-label-mobile { display: none; }
+.line-field { display: flex; flex-direction: column; }
 
 .line-desc-compact,
 .line-qty-compact,
 .line-price-compact,
 .line-tax-compact {
-  padding: 0.5rem 0.625rem;
+  padding: 0.4rem 0.5rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   background: white;
   color: var(--text-primary);
-  transition: all 0.2s;
+  transition: border-color 0.15s ease;
 }
 
-.line-desc-compact {
-  width: 100%;
-}
+.line-desc-compact { width: 100%; }
 
 .line-desc-compact:focus,
 .line-qty-compact:focus,
@@ -255,51 +244,48 @@
 .line-tax-compact:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 .line-total-compact {
   font-weight: 600;
   color: var(--primary);
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   text-align: right;
-  padding: 0.5rem 0.25rem;
-  background: rgba(13, 148, 136, 0.04);
-  border-radius: 4px;
+  padding: 0.4rem 0.25rem;
 }
 
 .btn-delete-compact {
   background: transparent;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   border: 1px solid transparent;
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all 0.15s;
   flex-shrink: 0;
 }
 
 .btn-delete-compact:hover {
   color: #ef4444;
   background: #fee2e2;
-  border-color: #fecaca;
 }
 
 /* Grand total */
 .invoice-grand-total {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  padding: 1rem 1.25rem;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+  padding: 0.875rem 1rem;
   background: #f8fafc;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  max-width: 300px;
+  border-radius: var(--radius-sm);
+  max-width: 280px;
   margin-left: auto;
 }
 
@@ -307,7 +293,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--text-secondary);
 }
 
@@ -317,23 +303,24 @@
 }
 
 .grand-total-final {
-  padding-top: 0.5rem;
-  border-top: 2px solid var(--border-color);
-  font-size: 1.05rem;
+  padding-top: 0.4rem;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.9375rem;
 }
 
 .grand-total-final strong {
   color: var(--primary);
-  font-size: 1.125rem;
+  font-size: 1rem;
+  font-weight: 700;
 }
 
 /* Form actions */
 .form-actions-compact {
   display: flex;
   justify-content: flex-end;
-  gap: 0.75rem;
+  gap: 0.625rem;
   margin-top: 0;
-  padding-top: 1.5rem;
+  padding-top: 1.25rem;
   border-top: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -342,12 +329,12 @@
   background: transparent;
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
-  padding: 0.625rem 1.25rem;
-  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-weight: 500;
-  font-size: 0.9375rem;
-  transition: all 0.2s;
+  font-size: 0.8125rem;
+  transition: all 0.15s;
 }
 
 .btn-cancel-compact:hover {
@@ -359,12 +346,12 @@
   background: var(--primary);
   color: white;
   border: none;
-  padding: 0.625rem 1.5rem;
-  border-radius: 6px;
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-weight: 500;
-  font-size: 0.9375rem;
-  transition: all 0.2s;
+  font-size: 0.8125rem;
+  transition: background 0.15s;
 }
 
 .btn-submit-compact:hover {
@@ -389,40 +376,26 @@
     gap: 0.5rem;
   }
 
-  .form-field-compact.full-width {
-    grid-column: 1;
-  }
-
-  .lines-columns-header {
-    display: none;
-  }
+  .form-field-compact.full-width { grid-column: 1; }
+  .lines-columns-header { display: none; }
 
   .line-row-compact {
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;
-    padding: 0.75rem;
+    padding: 0.625rem;
   }
 
   .line-label-mobile {
     display: block;
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     font-weight: 600;
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    margin-bottom: 0.2rem;
+    margin-bottom: 0.15rem;
   }
 
-  .line-field-desc {
-    grid-column: 1 / -1;
-  }
-
-  .line-field-actions {
-    grid-column: 2;
-    justify-self: end;
-  }
-
-  .invoice-grand-total {
-    max-width: 100%;
-  }
+  .line-field-desc { grid-column: 1 / -1; }
+  .line-field-actions { grid-column: 2; justify-self: end; }
+  .invoice-grand-total { max-width: 100%; }
 }
diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css
index 9c73c64..8a89196 100644
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -9,50 +9,51 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 2rem;
+  margin-bottom: 1.75rem;
 }
 
 .dashboard-header h1 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   margin: 0;
   color: var(--text-primary);
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .dashboard-subtitle {
-  margin: 0.25rem 0 0;
+  margin: 0.2rem 0 0;
   color: var(--text-secondary);
-  font-size: 0.95rem;
+  font-size: 0.875rem;
 }
 
-/* Dashboard Stats */
+/* Stats */
 .dashboard-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.25rem;
-  margin-bottom: 2rem;
+  gap: 1rem;
+  margin-bottom: 1.75rem;
 }
 
 .stat-card {
   background: var(--card-bg);
-  border-radius: 14px;
-  padding: 1.5rem;
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.875rem;
   border: 1px solid var(--border-color);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-  transition: box-shadow 0.2s, transform 0.2s;
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow 0.15s ease;
 }
 
 .stat-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
 }
 
 .stat-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,22 +61,22 @@
 }
 
 .stat-icon-invoices {
-  background: rgba(13, 148, 136, 0.1);
-  color: #0d9488;
+  background: rgba(37, 99, 235, 0.08);
+  color: #2563eb;
 }
 
 .stat-icon-paid {
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
+  background: rgba(22, 163, 74, 0.08);
+  color: #16a34a;
 }
 
 .stat-icon-unpaid {
-  background: rgba(217, 119, 6, 0.1);
-  color: #d97706;
+  background: rgba(202, 138, 4, 0.08);
+  color: #ca8a04;
 }
 
 .stat-icon-clients {
-  background: rgba(99, 102, 241, 0.1);
+  background: rgba(99, 102, 241, 0.08);
   color: #6366f1;
 }
 
@@ -85,79 +86,81 @@
 }
 
 .stat-value {
-  font-size: 1.6rem;
+  font-size: 1.375rem;
   font-weight: 700;
   color: var(--text-primary);
   line-height: 1.2;
+  letter-spacing: -0.02em;
 }
 
 .stat-label {
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   color: var(--text-secondary);
-  margin-top: 0.15rem;
+  margin-top: 0.1rem;
 }
 
-/* Dashboard Grid */
+/* Dashboard grid */
 .dashboard-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 1.25rem;
+  gap: 1rem;
 }
 
 .dashboard-card {
   background: var(--card-bg);
-  border-radius: 14px;
-  padding: 1.5rem;
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
   border: 1px solid var(--border-color);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--shadow-xs);
 }
 
 .dashboard-card h3 {
-  margin: 0 0 1.25rem;
-  font-size: 1rem;
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
-/* Quick Actions */
+/* Quick actions */
 .quick-actions {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .quick-action-btn {
   display: inline-flex;
   align-items: center;
-  gap: 0.6rem;
-  padding: 0.75rem 1.25rem;
-  border-radius: 10px;
-  font-size: 0.9rem;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
   font-weight: 500;
   text-decoration: none;
-  transition: background 0.2s, transform 0.15s;
+  transition: background-color 0.15s ease;
   cursor: pointer;
   background: var(--primary);
   color: #fff;
 }
 
 .quick-action-btn:hover {
-  filter: brightness(1.1);
-  transform: translateX(4px);
+  background: var(--primary-hover);
   color: #fff;
 }
 
 .quick-action-btn.secondary {
-  background: var(--primary-light);
+  background: var(--primary-subtle);
   color: var(--primary);
 }
 
 .quick-action-btn.secondary:hover {
-  background: rgba(13, 148, 136, 0.18);
+  background: rgba(37, 99, 235, 0.12);
   color: var(--primary);
 }
 
-/* Dashboard Info List */
+/* Dashboard info */
 .dashboard-info-list {
   display: flex;
   flex-direction: column;
@@ -167,9 +170,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.65rem 0;
-  border-bottom: 1px solid var(--border-color);
-  font-size: 0.88rem;
+  padding: 0.55rem 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 0.8125rem;
 }
 
 .dashboard-info-row:last-child {
@@ -182,11 +185,11 @@
 
 .dashboard-info-value {
   color: var(--text-primary);
-  font-weight: 500;
+  font-weight: 600;
 }
 
 /* Stat skeleton */
 .stat-card .skeleton-value {
   width: 50px;
-  height: 28px;
+  height: 24px;
 }
diff --git a/src/styles/facturas.css b/src/styles/facturas.css
index 9f56d0d..a63dffd 100644
--- a/src/styles/facturas.css
+++ b/src/styles/facturas.css
@@ -6,24 +6,27 @@
 }
 
 .facturas-header {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .facturas-header h1 {
   color: var(--text-primary);
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .btn-new-invoice {
   background-color: var(--primary);
   color: white;
-  padding: 0.75rem 1.5rem;
+  padding: 0.575rem 1.25rem;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  font-weight: 600;
-  transition: background-color 0.2s;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  transition: background-color 0.15s ease;
   margin-left: auto;
 }
 
@@ -33,38 +36,46 @@
 
 .facturas-filters {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
   align-items: center;
 }
 
 .search-input,
 .filter-status {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  font-size: 0.95rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
   background: var(--card-bg);
-  color: #000000;
+  color: var(--text-primary);
+  transition: border-color 0.15s ease;
+}
+
+.search-input:focus,
+.filter-status:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 .search-input {
   flex: 1;
-  max-width: 400px;
+  max-width: 360px;
 }
 
 .filter-status {
-  min-width: 200px;
+  min-width: 180px;
   cursor: pointer;
 }
 
-/* Invoices Table */
+/* Invoices table */
 .invoices-table-container {
   background: var(--card-bg);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-xs);
 }
 
 .invoices-table {
@@ -74,21 +85,22 @@
 
 .invoices-table thead {
   background: #f8fafc;
-  border-bottom: 2px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .invoices-table th {
   font-weight: 600;
   color: var(--text-secondary);
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   text-transform: uppercase;
-  padding: 1rem 1.5rem;
+  letter-spacing: 0.04em;
+  padding: 0.75rem 1.25rem;
   text-align: left;
 }
 
 .invoices-table tbody tr {
-  border-bottom: 1px solid var(--border-color);
-  transition: background-color 0.2s;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background-color 0.1s ease;
 }
 
 .invoices-table tbody tr:hover {
@@ -100,7 +112,8 @@
 }
 
 .invoices-table td {
-  padding: 1rem 1.5rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.8125rem;
 }
 
 .invoice-number {
@@ -110,9 +123,9 @@
 
 .invoice-status .status-badge {
   display: inline-block;
-  padding: 0.4rem 0.8rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
   font-weight: 600;
   text-align: center;
 }
@@ -120,12 +133,13 @@
 .invoice-client {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
   color: var(--text-secondary);
+  font-size: 0.8125rem;
 }
 
 .client-icon {
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
 
 .invoice-date,
@@ -141,7 +155,7 @@
 
 .invoice-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.375rem;
   justify-content: center;
 }
 
diff --git a/src/styles/login.css b/src/styles/login.css
index abce66a..90bce26 100644
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -4,21 +4,36 @@
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a2332 0%, #0d9488 100%);
+  background: #0f172a;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-container::before {
+  content: '';
+  position: absolute;
+  top: -40%;
+  right: -20%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
+  pointer-events: none;
 }
 
 .login-card {
   background: var(--card-bg);
-  padding: 2.5rem;
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  padding: 2.75rem 2.5rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06);
   width: 100%;
-  max-width: 420px;
-  animation: loginSlideUp 0.4s ease-out;
+  max-width: 400px;
+  animation: loginAppear 0.35s ease-out;
+  position: relative;
+  z-index: 1;
 }
 
-@keyframes loginSlideUp {
-  from { opacity: 0; transform: translateY(20px); }
+@keyframes loginAppear {
+  from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
@@ -28,41 +43,42 @@
 }
 
 .login-logo-icon {
-  width: 72px;
-  height: 72px;
-  margin: 0 auto 1rem;
-  background: linear-gradient(135deg, #0d9488 0%, #1a2332 100%);
-  border-radius: 18px;
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 0.875rem;
+  background: var(--primary);
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.3);
+  color: #fff;
 }
 
 .login-brand {
   margin: 0;
-  font-size: 1.75rem;
+  font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-primary);
+  letter-spacing: -0.025em;
 }
 
 .login-subtitle {
   margin: 0.25rem 0 0;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--text-secondary);
 }
 
 .login-button {
   width: 100%;
-  padding: 0.875rem;
+  padding: 0.75rem;
   background-color: var(--primary);
   color: white;
   border: none;
-  border-radius: 6px;
-  font-size: 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.25s, opacity 0.25s;
+  transition: background-color 0.15s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -75,15 +91,15 @@
 }
 
 .login-button:disabled {
-  opacity: 0.7;
+  opacity: 0.65;
   cursor: not-allowed;
 }
 
 .login-button .spinner {
   display: inline-block;
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.25);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
@@ -97,5 +113,5 @@
   color: var(--danger);
   text-align: center;
   margin-top: 1rem;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
 }
diff --git a/src/styles/modal.css b/src/styles/modal.css
index 348d665..9716368 100644
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -1,725 +1,646 @@
-/* Modal Styles */
+/* ===================== MODAL STYLES ===================== */
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
-    animation: fadeIn 0.2s ease-in-out;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  animation: modalFadeIn 0.2s ease;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+@keyframes modalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .modal-content {
-    background: var(--card-bg);
-    border-radius: 12px;
-    max-width: 900px;
-    width: 100%;
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    animation: slideUp 0.3s ease-out;
+  background: var(--card-bg);
+  border-radius: var(--radius-lg);
+  max-width: 880px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+  animation: modalSlideUp 0.25s ease-out;
 }
 
-@keyframes slideUp {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+@keyframes modalSlideUp {
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
 .modal-header {
-    padding: 1.5rem 2rem;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
+  padding: 1.25rem 1.75rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
 }
 
 .modal-title {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .modal-title h2 {
-    margin: 0;
-    font-size: 1.5rem;
-    color: var(--text-primary);
+  margin: 0;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 .btn-close {
-    background: none;
-    border: none;
-    font-size: 2rem;
-    line-height: 1;
-    color: var(--text-secondary);
-    cursor: pointer;
-    padding: 0;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: all 0.2s;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
 }
 
 .btn-close:hover {
-    background-color: #f1f5f9;
-    color: var(--text-primary);
+  background-color: #f1f5f9;
+  color: var(--text-primary);
 }
 
 .modal-body {
-    padding: 2rem;
-    overflow-y: auto;
-    flex: 1;
+  padding: 1.75rem;
+  overflow-y: auto;
+  flex: 1;
 }
 
 .modal-footer {
-    padding: 1.5rem 2rem;
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-    gap: 1rem;
+  padding: 1.25rem 1.75rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 0.75rem;
 }
 
 .footer-actions-left,
 .footer-actions-right {
-    display: flex;
-    gap: 0.75rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
-/* Form Styles in Modal */
+/* Form in modal */
 .form-section {
-    margin-bottom: 2rem;
+  margin-bottom: 1.75rem;
 }
 
 .form-section:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .form-section h3 {
-    margin: 0 0 1rem 0;
-    font-size: 1.125rem;
-    color: var(--text-primary);
-    font-weight: 600;
+  margin: 0 0 0.875rem 0;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.875rem;
 }
 
 .form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    margin-bottom: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 0.875rem;
 }
 
 .form-group {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group.full-width {
-    grid-column: 1 / -1;
+  grid-column: 1 / -1;
 }
 
 .form-group label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 0.375rem;
 }
 
 .form-group input,
 .form-group textarea,
 .form-group select {
-    padding: 0.625rem 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    transition: all 0.2s;
-    font-family: inherit;
-    background-color: #ffffff;
-    color: var(--text-primary);
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  font-family: inherit;
+  background-color: #ffffff;
+  color: var(--text-primary);
 }
 
 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 .form-group input:disabled,
 .form-group textarea:disabled,
 .form-group select:disabled {
-    background-color: #f8fafc;
-    color: var(--text-secondary);
-    cursor: not-allowed;
+  background-color: #f8fafc;
+  color: var(--text-secondary);
+  cursor: not-allowed;
 }
 
 .form-group input[readonly] {
-    background-color: #f8fafc;
-    color: var(--text-secondary);
+  background-color: #f8fafc;
+  color: var(--text-secondary);
 }
 
-/* Add Line Form */
+/* Add line form */
 .add-line-form {
-    background-color: #f8fafc;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-    border: 2px dashed var(--border-color);
+  background-color: #f8fafc;
+  padding: 1.25rem;
+  border-radius: var(--radius-sm);
+  margin-bottom: 0.875rem;
+  border: 1px dashed var(--border-color);
 }
 
 .form-group textarea {
-    resize: vertical;
-    min-height: 80px;
+  resize: vertical;
+  min-height: 80px;
 }
 
-/* Invoice Lines Table */
+/* Invoice lines table */
 .invoice-lines {
-    margin: 1rem 0;
+  margin: 0.875rem 0;
 }
 
 .lines-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.875rem;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
 }
 
 .lines-table thead {
-    background-color: #f8fafc;
+  background-color: #f8fafc;
 }
 
 .lines-table th {
-    padding: 0.75rem;
-    text-align: left;
-    font-weight: 600;
-    color: var(--text-secondary);
-    border-bottom: 2px solid var(--border-color);
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .lines-table td {
-    padding: 0.75rem;
-    border-bottom: 1px solid var(--border-color);
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .lines-table tbody tr:hover {
-    background-color: #f8fafc;
+  background-color: #f8fafc;
 }
 
 .no-lines {
-    text-align: center;
-    color: var(--text-secondary);
-    font-style: italic;
+  text-align: center;
+  color: var(--text-tertiary);
+  font-style: italic;
+  font-size: 0.8125rem;
 }
 
-/* Delete line button */
-.line-actions-col {
-    width: 50px;
-}
-
-.line-actions {
-    text-align: center;
-}
+/* Delete line */
+.line-actions-col { width: 44px; }
+.line-actions { text-align: center; }
 
 .btn-delete-line {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 0.35rem;
-    border-radius: 6px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-tertiary);
+  padding: 0.3rem;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
 }
 
 .btn-delete-line:hover {
-    color: var(--danger, #ef4444);
-    background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+  background: rgba(220, 38, 38, 0.08);
 }
 
 .btn-delete-line:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-/* Invoice Totals */
+/* Totals */
 .invoice-totals {
-    margin-top: 1.5rem;
-    padding: 1rem;
-    background-color: #f8fafc;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    max-width: 300px;
-    margin-left: auto;
+  margin-top: 1.25rem;
+  padding: 0.875rem;
+  background-color: #f8fafc;
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 280px;
+  margin-left: auto;
+  border: 1px solid var(--border-color);
 }
 
 .total-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.9375rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.8125rem;
 }
 
 .total-row.paid {
-    color: var(--success, #22c55e);
+  color: var(--success);
 }
 
 .total-row.pending {
-    font-size: 1.125rem;
-    color: var(--primary);
-    padding-top: 0.75rem;
-    border-top: 2px solid var(--border-color);
+  font-size: 0.9375rem;
+  color: var(--primary);
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-color);
 }
 
-/* Payment Section */
+/* Payment */
 .payment-section {
-    border-top: 2px solid var(--border-color);
-    padding-top: 1.25rem;
-    margin-top: 1rem;
+  border-top: 1px solid var(--border-color);
+  padding-top: 1rem;
+  margin-top: 0.875rem;
 }
 
 .payment-section h3 {
-    margin: 0 0 1rem;
-    font-size: 1.05rem;
-    color: var(--text-primary);
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  font-weight: 600;
 }
 
 .payment-form .form-row {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 0.75rem;
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.625rem;
 }
 
-.payment-form .form-group {
-    flex: 1;
-}
+.payment-form .form-group { flex: 1; }
 
 .payment-form label {
-    display: block;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    margin-bottom: 0.35rem;
-    color: var(--text-secondary);
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 0.3rem;
+  color: var(--text-secondary);
 }
 
 .payment-form input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 0.875rem;
-    background: var(--card-bg);
-    color: var(--text-primary);
-    box-sizing: border-box;
+  width: 100%;
+  padding: 0.45rem 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  box-sizing: border-box;
 }
 
 .payment-form input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 .payment-hint {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    margin-top: 0.25rem;
+  display: block;
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
+  margin-top: 0.2rem;
 }
 
 .btn-pay {
-    padding: 0.5rem 1.25rem;
-    font-size: 0.875rem;
-    white-space: nowrap;
+  padding: 0.45rem 1rem;
+  font-size: 0.8125rem;
+  white-space: nowrap;
 }
 
 .btn-pay:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* Payment History */
+/* Payment history */
 .payments-history-section {
-    border-top: 2px solid var(--border-color);
-    padding-top: 1.25rem;
-    margin-top: 1rem;
+  border-top: 1px solid var(--border-color);
+  padding-top: 1rem;
+  margin-top: 0.875rem;
 }
 
 .payments-history-section h3 {
-    margin: 0 0 0.75rem;
-    font-size: 1.05rem;
-    color: var(--text-primary);
+  margin: 0 0 0.625rem;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  font-weight: 600;
 }
 
 .payment-amount-cell {
-    color: var(--success, #22c55e);
+  color: var(--success);
+  font-weight: 600;
 }
 
-/* Button Styles */
+/* Buttons */
 .btn-small {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
+  padding: 0.45rem 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .btn-primary {
-    background-color: var(--primary);
-    color: white;
+  background-color: var(--primary);
+  color: white;
 }
 
 .btn-primary:hover {
-    background-color: var(--primary-hover);
+  background-color: var(--primary-hover);
 }
 
 .btn-success {
-    background-color: var(--success);
-    color: white;
+  background-color: var(--success);
+  color: white;
 }
 
 .btn-success:hover {
-    background-color: var(--success-hover);
+  background-color: var(--success-hover);
 }
 
 .btn-cancel {
-    background-color: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color);
+  background-color: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
 }
 
 .btn-cancel:hover {
-    background-color: #f8fafc;
-    color: var(--text-primary);
+  background-color: #f8fafc;
+  color: var(--text-primary);
 }
 
 .btn-danger-outline {
-    background: transparent;
-    color: var(--danger);
-    border: 1px solid var(--danger);
-    transition: all 0.2s;
+  background: transparent;
+  color: var(--danger);
+  border: 1px solid var(--danger);
+  transition: all 0.15s;
 }
 
 .btn-danger-outline:hover {
-    background: var(--danger);
-    color: white;
+  background: var(--danger);
+  color: white;
 }
 
 .btn-danger-outline:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* Invoice Actions Buttons */
+/* Invoice actions */
 .invoice-actions {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-action {
-    background: none;
-    border: none;
-    font-size: 1.25rem;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  background: none;
+  border: none;
+  font-size: 1.125rem;
+  cursor: pointer;
+  padding: 0.25rem 0.375rem;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
 }
 
 .btn-action:hover {
-    background-color: #f1f5f9;
-    transform: scale(1.1);
+  background-color: #f1f5f9;
+  color: var(--text-primary);
 }
 
 .btn-delete:hover {
-    background-color: #fee2e2;
+  background-color: #fee2e2;
+  color: var(--danger);
 }
 
-/* Loading and Error States */
+/* Loading/error */
 .loading {
-    text-align: center;
-    padding: 2rem;
-    color: var(--text-secondary);
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
 }
 
 .error {
-    text-align: center;
-    padding: 2rem;
-    color: var(--danger);
+  text-align: center;
+  padding: 2rem;
+  color: var(--danger);
+  font-size: 0.8125rem;
 }
 
-/* Responsive Modal */
+/* Responsive */
 @media (max-width: 768px) {
-    .modal-overlay {
-        padding: 0;
-    }
-
-    .modal-content {
-        max-width: 100%;
-        max-height: 100vh;
-        border-radius: 0;
-    }
-
-    .modal-header,
-    .modal-body,
-    .modal-footer {
-        padding: 1rem;
-    }
-
-    .form-row {
-        grid-template-columns: 1fr;
-        gap: 0.75rem;
-    }
-
-    .invoice-totals {
-        max-width: 100%;
-    }
-
-    .modal-footer {
-        flex-direction: column;
-    }
-
-    .footer-actions-left,
-    .footer-actions-right {
-        width: 100%;
-    }
-
-    .footer-actions-left button,
-    .footer-actions-right button {
-        flex: 1;
-    }
+  .modal-overlay { padding: 0; }
+  .modal-content {
+    max-width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+  .modal-header, .modal-body, .modal-footer { padding: 1rem; }
+  .form-row {
+    grid-template-columns: 1fr;
+    gap: 0.625rem;
+  }
+  .invoice-totals { max-width: 100%; }
+  .modal-footer { flex-direction: column; }
+  .footer-actions-left, .footer-actions-right { width: 100%; }
+  .footer-actions-left button, .footer-actions-right button { flex: 1; }
 }
 
 /* ============================================
-   Confirm Exit Modal Styles
+   Confirm Exit Modal
    ============================================ */
 .confirm-exit-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-    padding: 1rem;
-    animation: confirmFadeIn 0.2s ease-out;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 1rem;
+  animation: confirmFadeIn 0.15s ease-out;
 }
 
 .confirm-exit-overlay.closing {
-    animation: confirmFadeOut 0.2s ease-out forwards;
+  animation: confirmFadeOut 0.15s ease-out forwards;
 }
 
 @keyframes confirmFadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @keyframes confirmFadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
 
 .confirm-exit-modal {
-    background: var(--card-bg, #ffffff);
-    border-radius: 16px;
-    padding: 2rem;
-    max-width: 400px;
-    width: 100%;
-    text-align: center;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    animation: confirmSlideUp 0.3s ease-out;
+  background: var(--card-bg, #ffffff);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  max-width: 380px;
+  width: 100%;
+  text-align: center;
+  box-shadow: var(--shadow-lg);
+  animation: confirmSlideUp 0.2s ease-out;
 }
 
 .confirm-exit-overlay.closing .confirm-exit-modal {
-    animation: confirmSlideDown 0.2s ease-out forwards;
+  animation: confirmSlideDown 0.15s ease-out forwards;
 }
 
 @keyframes confirmSlideUp {
-    from {
-        transform: translateY(20px) scale(0.95);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-    }
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
 @keyframes confirmSlideDown {
-    from {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-    }
-    to {
-        transform: translateY(20px) scale(0.95);
-        opacity: 0;
-    }
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(10px); opacity: 0; }
 }
 
 .confirm-exit-icon {
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 1.25rem;
-    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 50%, #fcd34d 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.12), 0 4px 12px rgba(245, 158, 11, 0.2);
-    animation: warningPulse 2s ease-in-out infinite;
-}
-
-@keyframes warningPulse {
-    0%, 100% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.12), 0 4px 12px rgba(245, 158, 11, 0.2); }
-    50% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0.08), 0 4px 16px rgba(245, 158, 11, 0.25); }
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 1rem;
+  background: #fef9c3;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ca8a04;
 }
 
 .confirm-exit-icon svg {
-    filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.3));
+  width: 28px;
+  height: 28px;
 }
 
 .confirm-exit-title {
-    margin: 0 0 0.75rem;
-    font-size: 1.375rem;
-    font-weight: 600;
-    color: var(--text-primary, #1e293b);
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary, #1e293b);
 }
 
 .confirm-exit-message {
-    margin: 0 0 1.75rem;
-    font-size: 0.9375rem;
-    color: var(--text-secondary, #64748b);
-    line-height: 1.5;
+  margin: 0 0 1.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #64748b);
+  line-height: 1.5;
 }
 
 .confirm-exit-actions {
-    display: flex;
-    gap: 0.75rem;
+  display: flex;
+  gap: 0.625rem;
 }
 
 .confirm-exit-actions button {
-    flex: 1;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    font-size: 0.9375rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
+  flex: 1;
+  padding: 0.6rem 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border: none;
 }
 
 .confirm-exit-actions .btn-stay {
-    background-color: var(--primary, #2563eb);
-    color: white;
+  background-color: var(--primary, #2563eb);
+  color: white;
 }
 
 .confirm-exit-actions .btn-stay:hover {
-    background-color: #1d4ed8;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+  background-color: #1d4ed8;
 }
 
 .confirm-exit-actions .btn-exit {
-    background-color: #f1f5f9;
-    color: var(--text-primary, #1e293b);
-    border: 1px solid var(--border-color, #e2e8f0);
+  background-color: #f1f5f9;
+  color: var(--text-primary, #1e293b);
+  border: 1px solid var(--border-color, #e2e8f0);
 }
 
 .confirm-exit-actions .btn-exit:hover {
-    background-color: #e2e8f0;
-    border-color: #cbd5e1;
+  background-color: #e2e8f0;
 }
 
-/* Responsive Confirm Modal */
+/* Responsive */
 @media (max-width: 480px) {
-    .confirm-exit-modal {
-        padding: 1.5rem;
-        margin: 1rem;
-    }
-
-    .confirm-exit-icon {
-        width: 60px;
-        height: 60px;
-    }
-
-    .confirm-exit-icon svg {
-        width: 36px;
-        height: 36px;
-    }
-
-    .confirm-exit-title {
-        font-size: 1.25rem;
-    }
-
-    .confirm-exit-actions {
-        flex-direction: column-reverse;
-    }
+  .confirm-exit-modal { padding: 1.5rem; margin: 1rem; }
+  .confirm-exit-icon { width: 48px; height: 48px; }
+  .confirm-exit-icon svg { width: 24px; height: 24px; }
+  .confirm-exit-actions { flex-direction: column-reverse; }
 }
 
 /* ===================== CONFIRM DIALOG ===================== */
 .confirm-dialog-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(2px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10001;
   opacity: 0;
-  transition: opacity 0.25s ease;
+  transition: opacity 0.2s ease;
 }
 
 .confirm-dialog-overlay.visible {
@@ -728,81 +649,80 @@
 
 .confirm-dialog-card {
   background: var(--card-bg, #fff);
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   padding: 2rem;
-  max-width: 400px;
+  max-width: 380px;
   width: 90%;
   text-align: center;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
-  transform: scale(0.9) translateY(10px);
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(8px);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
 .confirm-dialog-overlay.visible .confirm-dialog-card {
-  transform: scale(1) translateY(0);
+  transform: translateY(0);
+  opacity: 1;
 }
 
 .confirm-dialog-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 1rem;
+  margin: 0 auto 0.875rem;
 }
 
 .confirm-dialog-title {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--text-primary, #1a2332);
-  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-primary, #0f172a);
+  margin: 0 0 0.375rem;
 }
 
 .confirm-dialog-message {
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
   line-height: 1.5;
-  margin: 0 0 1.5rem;
+  margin: 0 0 1.25rem;
 }
 
 .confirm-dialog-actions {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.625rem;
   justify-content: center;
 }
 
 .confirm-dialog-btn-cancel {
-  padding: 0.6rem 1.25rem;
+  padding: 0.5rem 1rem;
   background: transparent;
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   color: var(--text-secondary, #64748b);
   font-weight: 500;
+  font-size: 0.8125rem;
   cursor: pointer;
-  transition: background 0.2s, color 0.2s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .confirm-dialog-btn-cancel:hover {
   background: #f8fafc;
-  color: var(--text-primary, #1a2332);
+  color: var(--text-primary, #0f172a);
 }
 
 .confirm-dialog-btn-confirm {
-  padding: 0.6rem 1.25rem;
+  padding: 0.5rem 1rem;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   color: #fff;
   font-weight: 600;
+  font-size: 0.8125rem;
   cursor: pointer;
-  transition: filter 0.2s, transform 0.15s;
+  transition: filter 0.15s;
 }
 
 .confirm-dialog-btn-confirm:hover {
-  filter: brightness(1.1);
-  transform: translateY(-1px);
+  filter: brightness(1.08);
 }
-
-.confirm-dialog-btn-confirm:active {
-  transform: translateY(0);
-}
\ No newline at end of file
diff --git a/src/styles/overlays.css b/src/styles/overlays.css
index 97f02c0..3562475 100644
--- a/src/styles/overlays.css
+++ b/src/styles/overlays.css
@@ -1,18 +1,15 @@
 /* ===================== SESSION EXPIRED OVERLAY ===================== */
 .session-expired-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(6px);
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.25s ease;
 }
 
 .session-expired-overlay.visible {
@@ -21,83 +18,67 @@
 
 .session-expired-card {
   background: var(--card-bg, #fff);
-  border-radius: 20px;
-  padding: 2.5rem 2rem;
-  max-width: 400px;
+  border-radius: var(--radius-lg);
+  padding: 2.25rem 2rem;
+  max-width: 380px;
   width: 90%;
   text-align: center;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  transform: scale(0.9) translateY(20px);
-  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(10px);
+  transition: transform 0.25s ease;
 }
 
 .session-expired-overlay.visible .session-expired-card {
-  transform: scale(1) translateY(0);
+  transform: translateY(0);
 }
 
 .session-expired-icon {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #e53e3e, #c53030);
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: #fee2e2;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 1.25rem;
-  color: #fff;
-  animation: expiredPulse 2s ease-in-out infinite;
-}
-
-@keyframes expiredPulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
-  50% { box-shadow: 0 0 0 12px rgba(229, 62, 62, 0); }
+  margin: 0 auto 1.125rem;
+  color: #dc2626;
 }
 
 .session-expired-icon.disconnected {
-  background: linear-gradient(135deg, #ed8936, #dd6b20);
-  animation: disconnectedPulse 2s ease-in-out infinite;
-}
-
-@keyframes disconnectedPulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0.4); }
-  50% { box-shadow: 0 0 0 12px rgba(237, 137, 54, 0); }
+  background: #ffedd5;
+  color: #ea580c;
 }
 
 .session-expired-title {
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--text-primary, #1a202c);
-  margin: 0 0 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary, #0f172a);
+  margin: 0 0 0.5rem;
+  letter-spacing: -0.01em;
 }
 
 .session-expired-message {
-  font-size: 0.95rem;
-  color: var(--text-secondary, #718096);
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #64748b);
   line-height: 1.6;
-  margin: 0 0 1.75rem;
+  margin: 0 0 1.5rem;
 }
 
 .session-expired-btn {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 2rem;
-  background: linear-gradient(135deg, #0d9488, #1a2332);
+  gap: 0.4rem;
+  padding: 0.6rem 1.5rem;
+  background: var(--primary, #2563eb);
   color: #fff;
   border: none;
-  border-radius: 12px;
-  font-size: 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.25s;
-  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
+  transition: background 0.15s ease;
 }
 
 .session-expired-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
-}
-
-.session-expired-btn:active {
-  transform: translateY(0);
+  background: var(--primary-hover, #1d4ed8);
 }
diff --git a/src/styles/settings.css b/src/styles/settings.css
index ee48928..7e581c9 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -1,103 +1,105 @@
 /* ===================== SETTINGS PAGE ===================== */
 .settings-page {
-  max-width: 960px;
+  max-width: 880px;
   margin: 0 auto;
   padding: 2rem 1.5rem;
 }
 
 .settings-header {
-  margin-bottom: 2rem;
+  margin-bottom: 1.75rem;
 }
 
 .settings-header h2 {
-  font-size: 1.6rem;
+  font-size: 1.375rem;
   color: var(--text-primary);
-  margin: 0 0 0.35rem;
+  margin: 0 0 0.25rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .settings-subtitle {
   color: var(--text-secondary);
-  font-size: 0.95rem;
+  font-size: 0.8125rem;
   margin: 0;
 }
 
-/* Grid layout */
+/* Grid */
 .settings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
 }
 
-/* Card base */
+/* Card */
 .settings-card {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
-  border-radius: 14px;
-  padding: 1.75rem;
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  transition: box-shadow 0.25s, transform 0.25s;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.15s ease;
+  box-shadow: var(--shadow-xs);
 }
 
 .settings-card:hover {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
 }
 
-/* Icon circles */
+/* Icon */
 .settings-card-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 1rem;
+  margin-bottom: 0.875rem;
 }
 
 .settings-card-icon svg {
-  width: 26px;
-  height: 26px;
+  width: 22px;
+  height: 22px;
 }
 
 .session-icon {
-  background: linear-gradient(135deg, #0d9488, #0f766e);
-  color: #fff;
+  background: rgba(37, 99, 235, 0.08);
+  color: #2563eb;
 }
 
 .api-icon {
-  background: linear-gradient(135deg, #48bb78, #38a169);
-  color: #fff;
+  background: rgba(22, 163, 74, 0.08);
+  color: #16a34a;
 }
 
 .about-icon {
-  background: linear-gradient(135deg, #9f7aea, #805ad5);
-  color: #fff;
+  background: rgba(99, 102, 241, 0.08);
+  color: #6366f1;
 }
 
 /* Card title */
 .settings-card h3 {
-  font-size: 1.1rem;
+  font-size: 0.9375rem;
   color: var(--text-primary);
-  margin: 0 0 1rem;
+  margin: 0 0 0.875rem;
+  font-weight: 600;
 }
 
 /* Info rows */
 .settings-info {
   width: 100%;
-  margin-bottom: 1.25rem;
+  margin-bottom: 1rem;
 }
 
 .settings-info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--border-color);
-  font-size: 0.88rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 0.8125rem;
 }
 
 .settings-info-row:last-child {
@@ -115,70 +117,61 @@
   max-width: 60%;
 }
 
-/* Token preview */
+/* Token */
 .settings-token {
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.82rem;
-  background: rgba(13, 148, 136, 0.08);
-  padding: 2px 8px;
-  border-radius: 6px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.75rem;
+  background: rgba(37, 99, 235, 0.06);
+  padding: 2px 6px;
+  border-radius: 4px;
   color: var(--primary);
 }
 
 /* API url */
 .settings-api-url {
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.82rem;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.75rem;
   color: var(--text-secondary);
 }
 
 /* API status */
 .settings-api-status {
   font-weight: 600;
-  font-size: 0.95rem;
-  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.375rem;
 }
 
-.api-ok {
-  color: #38a169;
-}
-
-.api-error {
-  color: #e53e3e;
-}
+.api-ok { color: #16a34a; }
+.api-error { color: #dc2626; }
 
 /* Buttons */
 .btn-settings {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.4rem;
+  gap: 0.4rem;
+  padding: 0.5rem 1.125rem;
   border: none;
-  border-radius: 8px;
-  font-size: 0.9rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s, transform 0.15s;
+  transition: background 0.15s ease;
   margin-top: auto;
 }
 
-.btn-settings:active {
-  transform: scale(0.97);
-}
-
 .btn-danger-settings {
-  background: #e53e3e;
+  background: var(--danger);
   color: #fff;
 }
 
 .btn-danger-settings:hover {
-  background: #c53030;
+  background: var(--danger-hover);
 }
 
 .btn-outline-settings {
   background: transparent;
   color: var(--primary);
-  border: 1.5px solid var(--primary);
+  border: 1px solid var(--primary);
 }
 
 .btn-outline-settings:hover {
@@ -188,16 +181,12 @@
 
 /* Responsive */
 @media (max-width: 640px) {
-  .settings-grid {
-    grid-template-columns: 1fr;
-  }
-
+  .settings-grid { grid-template-columns: 1fr; }
   .settings-info-row {
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.25rem;
+    gap: 0.2rem;
   }
-
   .settings-info-row span {
     text-align: left;
     max-width: 100%;
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 4b6c737..7c91633 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -6,25 +6,24 @@
 }
 
 .sidebar {
-  width: 250px;
+  width: 240px;
   background-color: var(--sidebar-bg);
-  border-right: none;
   display: flex;
   flex-direction: column;
-  transition: width 0.3s ease, transform 0.3s ease;
+  transition: width 0.2s ease;
   position: relative;
   z-index: 100;
-  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .sidebar-header {
-  padding: 1.25rem 0.75rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 1.25rem 0.875rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
-  min-height: 64px;
+  min-height: 60px;
   box-sizing: border-box;
 }
 
@@ -34,7 +33,7 @@
   gap: 0.6rem;
   text-decoration: none;
   color: #fff;
-  transition: opacity 0.2s;
+  transition: opacity 0.15s;
   overflow: hidden;
   flex: 1;
   min-width: 0;
@@ -51,34 +50,34 @@
 
 .sidebar-header h2 {
   margin: 0;
-  font-size: 1.3rem;
+  font-size: 1.125rem;
   color: #ffffff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+  font-weight: 600;
+  letter-spacing: -0.015em;
 }
 
 .sidebar-toggle {
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.4rem;
   color: var(--sidebar-text);
-  font-size: 1.25rem;
-  border-radius: 4px;
-  transition: background-color 0.2s, color 0.2s;
+  font-size: 1.125rem;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s, color 0.15s;
   flex-shrink: 0;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .sidebar-toggle:hover {
-  background-color: var(--sidebar-hover);
+  background-color: rgba(255, 255, 255, 0.06);
   border-color: transparent;
   color: #fff;
 }
@@ -86,7 +85,7 @@
 .sidebar-nav {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem 0;
+  padding: 0.75rem 0;
 }
 
 .sidebar-menu {
@@ -96,34 +95,36 @@
 }
 
 .sidebar-menu li {
-  margin: 0;
+  margin: 1px 0;
 }
 
 .sidebar-link {
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.6rem 1rem;
+  margin: 0 0.5rem;
   color: var(--sidebar-text);
   text-decoration: none;
-  transition: background-color 0.2s, color 0.2s;
+  transition: background-color 0.15s, color 0.15s;
   cursor: pointer;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
 }
 
 .sidebar-link:hover {
-  background-color: var(--sidebar-hover);
+  background-color: rgba(255, 255, 255, 0.06);
   color: #e2e8f0;
 }
 
 .sidebar-link.active {
-  background-color: rgba(13, 148, 136, 0.15);
+  background-color: rgba(37, 99, 235, 0.12);
   color: var(--sidebar-active);
-  border-left: 3px solid var(--sidebar-active);
 }
 
 .sidebar-icon {
-  font-size: 1.25rem;
-  margin-right: 0.75rem;
-  min-width: 1.5rem;
+  font-size: 1.125rem;
+  margin-right: 0.625rem;
+  min-width: 1.25rem;
   text-align: center;
 }
 
@@ -133,9 +134,9 @@
   text-overflow: ellipsis;
 }
 
-/* Collapsed Sidebar State */
+/* Collapsed */
 .sidebar.collapsed {
-  width: 70px;
+  width: 64px;
 }
 
 .sidebar.collapsed .sidebar-header h2,
@@ -159,20 +160,26 @@
   margin-right: 0;
 }
 
-/* Main Content Area */
+.sidebar.collapsed .sidebar-link {
+  justify-content: center;
+  padding: 0.6rem;
+  margin: 1px 0.375rem;
+}
+
+/* Main content */
 .main-content {
   flex: 1;
   overflow-y: auto;
-  background-color: #f0f4f8;
+  background-color: #f8fafc;
 }
 
-.main-content>div {
+.main-content > div {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
 }
 
-/* Responsive Design */
+/* Responsive */
 @media (max-width: 768px) {
   .sidebar {
     position: fixed;
@@ -185,7 +192,7 @@
 
   .sidebar.collapsed {
     transform: translateX(-100%);
-    width: 250px;
+    width: 240px;
   }
 
   .main-content {
diff --git a/src/styles/toast.css b/src/styles/toast.css
index cc7c1e5..6629280 100644
--- a/src/styles/toast.css
+++ b/src/styles/toast.css
@@ -1,29 +1,31 @@
 /* ===================== TOAST NOTIFICATIONS ===================== */
 .toast-container {
   position: fixed;
-  top: 1.5rem;
-  right: 1.5rem;
+  top: 1.25rem;
+  right: 1.25rem;
   z-index: 11000;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
   pointer-events: none;
 }
 
 .toast {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1.25rem;
-  border-radius: 12px;
+  gap: 0.625rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
   background: var(--card-bg, #fff);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
-  min-width: 280px;
-  max-width: 420px;
+  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  min-width: 260px;
+  max-width: 380px;
   pointer-events: auto;
-  transform: translateX(120%);
+  transform: translateX(110%);
   opacity: 0;
-  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transition: transform 0.25s ease, opacity 0.2s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 .toast.visible {
@@ -32,15 +34,15 @@
 }
 
 .toast.removing {
-  transform: translateX(120%);
+  transform: translateX(110%);
   opacity: 0;
-  transition: transform 0.25s ease-in, opacity 0.2s ease;
+  transition: transform 0.2s ease-in, opacity 0.15s ease;
 }
 
 .toast-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -48,28 +50,28 @@
 }
 
 .toast-icon svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .toast.toast-success .toast-icon {
-  background: rgba(5, 150, 105, 0.12);
-  color: #059669;
+  background: rgba(22, 163, 74, 0.08);
+  color: #16a34a;
 }
 
 .toast.toast-error .toast-icon {
-  background: rgba(220, 38, 38, 0.12);
+  background: rgba(220, 38, 38, 0.08);
   color: #dc2626;
 }
 
 .toast.toast-warning .toast-icon {
-  background: rgba(217, 119, 6, 0.12);
-  color: #d97706;
+  background: rgba(202, 138, 4, 0.08);
+  color: #ca8a04;
 }
 
 .toast.toast-info .toast-icon {
-  background: rgba(13, 148, 136, 0.12);
-  color: #0d9488;
+  background: rgba(37, 99, 235, 0.08);
+  color: #2563eb;
 }
 
 .toast-body {
@@ -79,13 +81,13 @@
 
 .toast-title {
   font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-primary, #1a2332);
-  margin: 0 0 0.15rem;
+  font-size: 0.8125rem;
+  color: var(--text-primary, #0f172a);
+  margin: 0 0 0.1rem;
 }
 
 .toast-message {
-  font-size: 0.82rem;
+  font-size: 0.75rem;
   color: var(--text-secondary, #64748b);
   margin: 0;
   line-height: 1.4;
@@ -95,10 +97,10 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--text-secondary, #94a3b8);
-  padding: 0.25rem;
+  color: var(--text-tertiary, #94a3b8);
+  padding: 0.2rem;
   border-radius: 4px;
-  transition: color 0.2s, background 0.2s;
+  transition: color 0.15s, background 0.15s;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -106,31 +108,30 @@
 }
 
 .toast-close:hover {
-  color: var(--text-primary, #1a2332);
-  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-primary, #0f172a);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .toast-progress {
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 3px;
-  border-radius: 0 0 12px 12px;
+  height: 2px;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
   transition: width linear;
 }
 
-.toast.toast-success .toast-progress { background: #059669; }
+.toast.toast-success .toast-progress { background: #16a34a; }
 .toast.toast-error .toast-progress { background: #dc2626; }
-.toast.toast-warning .toast-progress { background: #d97706; }
-.toast.toast-info .toast-progress { background: #0d9488; }
+.toast.toast-warning .toast-progress { background: #ca8a04; }
+.toast.toast-info .toast-progress { background: #2563eb; }
 
 @media (max-width: 480px) {
   .toast-container {
-    left: 1rem;
-    right: 1rem;
-    top: 1rem;
+    left: 0.75rem;
+    right: 0.75rem;
+    top: 0.75rem;
   }
-
   .toast {
     min-width: auto;
     max-width: 100%;