From 2b179697f5eb984611d85d151766ba4463075acb Mon Sep 17 00:00:00 2001
From: Nazira <n.kadyrzhan30@mail.ru>
Date: Fri, 28 Aug 2026 05:26:54 +0000
Subject: [PATCH] ui redesign cards

---
 index.html | 182 ++++++++++++--------
 script.js  | 132 +++++++++++----
 style.css  | 478 ++++++++++++++++++++++++++++++++++++++---------------
 3 files changed, 547 insertions(+), 245 deletions(-)
diff --git a/index.html b/index.html
index 32ea0e5..7504b27 100644
--- a/index.html
+++ b/index.html
@@ -5,82 +5,120 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Планировщик отпуска</title>
   <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <div class="container">
-    <header class="header">
-      <h1>🌴 Планировщик отпуска</h1>
-      <p class="subtitle">Сохрани все варианты поездок в одном месте</p>
-    </header>
-
-    <section class="form-section">
-      <h2>Добавить вариант</h2>
-      <form id="vacationForm" class="vacation-form">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="country">Страна</label>
-            <input type="text" id="country" name="country" placeholder="Например: Турция" required>
-          </div>
-          <div class="form-group">
-            <label for="city">Город</label>
-            <input type="text" id="city" name="city" placeholder="Например: Анталья" required>
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-group">
-            <label for="dateFrom">Дата вылета</label>
-            <input type="date" id="dateFrom" name="dateFrom" required>
-          </div>
-          <div class="form-group">
-            <label for="dateTo">Дата возвращения</label>
-            <input type="date" id="dateTo" name="dateTo" required>
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-group">
-            <label for="budget">Бюджет ($)</label>
-            <input type="number" id="budget" name="budget" placeholder="Например: 1500" required>
-          </div>
-          <div class="form-group">
-            <label for="hotel">Отель</label>
-            <input type="text" id="hotel" name="hotel" placeholder="Название отеля">
-          </div>
-        </div>
-        <div class="form-group full-width">
-          <label for="tickets">Билеты (ссылка или заметки)</label>
-          <input type="text" id="tickets" name="tickets" placeholder="Ссылка на билеты или номер рейса">
-        </div>
-        <button type="submit" class="btn-add">Добавить вариант</button>
-      </form>
-    </section>
-
-    <section class="table-section">
-      <div class="table-header">
-        <h2>Все варианты</h2>
-        <div class="table-actions">
-          <span id="totalCount" class="count-badge">0</span>
-          <button onclick="exportToExcel()" class="btn-export">📥 Excel</button>
-        </div>
+  <div class="wrapper">
+    <div class="hero">
+      <div class="hero-content">
+        <h1>✈️ Планировщик отпуска</h1>
+        <p>Собирай идеи для путешествий, сравнивай варианты и выбирай лучшее</p>
       </div>
-      <div class="table-wrapper">
-        <table id="vacationsTable">
-          <thead>
-            <tr>
-              <th>Страна</th>
-              <th>Город</th>
-              <th>Даты</th>
-              <th>Бюджет</th>
-              <th>Отель</th>
-              <th>Билеты</th>
-              <th>Действия</th>
-            </tr>
-          </thead>
-          <tbody id="tableBody">
-          </tbody>
-        </table>
+    </div>
+
+    <div class="container">
+      <div class="grid">
+        <aside class="sidebar">
+          <div class="card form-card">
+            <div class="card-header">
+              <span class="card-icon">📝</span>
+              <h2>Новый вариант</h2>
+            </div>
+            <form id="vacationForm" class="vacation-form">
+              <div class="form-group">
+                <label for="country">
+                  <span class="icon">🌍</span> Страна
+                </label>
+                <input type="text" id="country" name="country" placeholder="Турция, Таиланд..." required>
+              </div>
+              
+              <div class="form-group">
+                <label for="city">
+                  <span class="icon">🏙️</span> Город
+                </label>
+                <input type="text" id="city" name="city" placeholder="Анталья, Пхукет..." required>
+              </div>
+              
+              <div class="form-row-2">
+                <div class="form-group">
+                  <label for="dateFrom">
+                    <span class="icon">📅</span> Вылет
+                  </label>
+                  <input type="date" id="dateFrom" name="dateFrom" required>
+                </div>
+                <div class="form-group">
+                  <label for="dateTo">
+                    <span class="icon">📅</span> Возвращение
+                  </label>
+                  <input type="date" id="dateTo" name="dateTo" required>
+                </div>
+              </div>
+              
+              <div class="form-group">
+                <label for="budget">
+                  <span class="icon">💰</span> Бюджет ($)
+                </label>
+                <input type="number" id="budget" name="budget" placeholder="1500" min="0" required>
+              </div>
+              
+              <div class="form-group">
+                <label for="hotel">
+                  <span class="icon">🏨</span> Отель
+                </label>
+                <input type="text" id="hotel" name="hotel" placeholder="Название отеля">
+              </div>
+              
+              <div class="form-group">
+                <label for="tickets">
+                  <span class="icon">🎫</span> Билеты
+                </label>
+                <input type="text" id="tickets" name="tickets" placeholder="Ссылка или номер рейса">
+              </div>
+              
+              <button type="submit" class="btn-primary">
+                <span class="btn-icon">+</span> Добавить вариант
+              </button>
+            </form>
+          </div>
+
+          <div class="card stats-card">
+            <div class="stats-grid">
+              <div class="stat-item">
+                <div class="stat-value" id="totalCount">0</div>
+                <div class="stat-label">Вариантов</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-value" id="avgBudget">$0</div>
+                <div class="stat-label">Средний бюджет</div>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <main class="main-content">
+          <div class="card">
+            <div class="card-header main-header">
+              <div class="header-left">
+                <span class="card-icon">🗂️</span>
+                <h2>Все варианты</h2>
+              </div>
+              <button onclick="exportToExcel()" class="btn-export">
+                <span class="btn-icon">📥</span> Экспорт в Excel
+              </button>
+            </div>
+            
+            <div class="cards-grid" id="cardsGrid">
+            </div>
+            
+            <div id="emptyState" class="empty-state">
+              <div class="empty-icon">🏖️</div>
+              <h3>Пока пусто</h3>
+              <p>Добавьте первый вариант отпуска с помощью формы слева</p>
+            </div>
+          </div>
+        </main>
       </div>
-      <p id="emptyMessage" class="empty-message">Пока нет сохранённых вариантов. Добавьте первый!</p>
-    </section>
+    </div>
   </div>
 
   <script src="script.js"></script>
diff --git a/script.js b/script.js
index 701662a..c58c46c 100644
--- a/script.js
+++ b/script.js
@@ -5,61 +5,119 @@ document.getElementById('vacationForm').addEventListener('submit', function(e) {
   
   const vacation = {
     id: Date.now(),
-    country: document.getElementById('country').value,
-    city: document.getElementById('city').value,
+    country: document.getElementById('country').value.trim(),
+    city: document.getElementById('city').value.trim(),
     dateFrom: document.getElementById('dateFrom').value,
     dateTo: document.getElementById('dateTo').value,
-    budget: document.getElementById('budget').value,
-    hotel: document.getElementById('hotel').value,
-    tickets: document.getElementById('tickets').value
+    budget: parseFloat(document.getElementById('budget').value) || 0,
+    hotel: document.getElementById('hotel').value.trim(),
+    tickets: document.getElementById('tickets').value.trim()
   };
   
-  vacations.push(vacation);
-  renderTable();
+  vacations.unshift(vacation);
+  renderCards();
+  updateStats();
   this.reset();
 });
 
-function renderTable() {
-  const tbody = document.getElementById('tableBody');
-  const emptyMessage = document.getElementById('emptyMessage');
-  const totalCount = document.getElementById('totalCount');
-  
-  totalCount.textContent = vacations.length;
+function renderCards() {
+  const grid = document.getElementById('cardsGrid');
+  const emptyState = document.getElementById('emptyState');
   
   if (vacations.length === 0) {
-    tbody.innerHTML = '';
-    emptyMessage.style.display = 'block';
+    grid.innerHTML = '';
+    emptyState.style.display = 'block';
     return;
   }
   
-  emptyMessage.style.display = 'none';
+  emptyState.style.display = 'none';
   
-  tbody.innerHTML = vacations.map(v => {
-    const dates = formatDate(v.dateFrom) + ' — ' + formatDate(v.dateTo);
+  grid.innerHTML = vacations.map(v => {
+    const days = calculateDays(v.dateFrom, v.dateTo);
+    const dates = formatDateRange(v.dateFrom, v.dateTo);
+    
     return `
-      <tr>
-        <td><strong>${escapeHtml(v.country)}</strong></td>
-        <td>${escapeHtml(v.city)}</td>
-        <td>${dates}</td>
-        <td>$${escapeHtml(v.budget)}</td>
-        <td>${escapeHtml(v.hotel) || '—'}</td>
-        <td>${escapeHtml(v.tickets) || '—'}</td>
-        <td><button class="btn-delete" onclick="deleteVacation(${v.id})">Удалить</button></td>
-      </tr>
+      <div class="vacation-card">
+        <div class="card-location">
+          <div class="flag-icon">🌍</div>
+          <div class="location-info">
+            <h3>${escapeHtml(v.country)}</h3>
+            <p>${escapeHtml(v.city)}</p>
+          </div>
+        </div>
+        
+        <div class="card-details">
+          <div class="detail-row">
+            <span class="d-icon">📅</span>
+            <span>${dates} <strong>(${days} дн.)</strong></span>
+          </div>
+          ${v.hotel ? `
+          <div class="detail-row">
+            <span class="d-icon">🏨</span>
+            <span>${escapeHtml(v.hotel)}</span>
+          </div>
+          ` : ''}
+          ${v.tickets ? `
+          <div class="detail-row">
+            <span class="d-icon">🎫</span>
+            <span>${escapeHtml(v.tickets)}</span>
+          </div>
+          ` : ''}
+        </div>
+        
+        <div class="card-budget">
+          <span class="budget-label">Бюджет</span>
+          <span class="budget-value">$${v.budget.toLocaleString()}</span>
+        </div>
+        
+        <div class="card-actions">
+          <button class="btn-delete" onclick="deleteVacation(${v.id})">
+            🗑️ Удалить
+          </button>
+        </div>
+      </div>
     `;
   }).join('');
 }
 
 function deleteVacation(id) {
-  if (confirm('Удалить этот вариант отпуска?')) {
+  if (confirm('Удалить этот вариант?')) {
     vacations = vacations.filter(v => v.id !== id);
-    renderTable();
+    renderCards();
+    updateStats();
   }
 }
 
+function updateStats() {
+  const total = vacations.length;
+  const avg = total > 0 
+    ? Math.round(vacations.reduce((sum, v) => sum + v.budget, 0) / total)
+    : 0;
+  
+  document.getElementById('totalCount').textContent = total;
+  document.getElementById('avgBudget').textContent = avg > 0 ? `$${avg.toLocaleString()}` : '$0';
+}
+
+function calculateDays(from, to) {
+  const start = new Date(from);
+  const end = new Date(to);
+  const diff = end - start;
+  return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+}
+
+function formatDateRange(from, to) {
+  const options = { day: 'numeric', month: 'short' };
+  const fromStr = new Date(from).toLocaleDateString('ru-RU', options);
+  const toStr = new Date(to).toLocaleDateString('ru-RU', options);
+  return `${fromStr} — ${toStr}`;
+}
+
 function formatDate(dateStr) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' });
+  return new Date(dateStr).toLocaleDateString('ru-RU', { 
+    day: 'numeric', 
+    month: 'long', 
+    year: 'numeric' 
+  });
 }
 
 function escapeHtml(text) {
@@ -75,12 +133,13 @@ function exportToExcel() {
     return;
   }
   
-  const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Бюджет ($)', 'Отель', 'Билеты'];
+  const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
   const rows = vacations.map(v => [
     v.country,
     v.city,
-    v.dateFrom,
-    v.dateTo,
+    formatDate(v.dateFrom),
+    formatDate(v.dateTo),
+    calculateDays(v.dateFrom, v.dateTo),
     v.budget,
     v.hotel,
     v.tickets
@@ -94,8 +153,9 @@ function exportToExcel() {
   const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
   const link = document.createElement('a');
   link.href = URL.createObjectURL(blob);
-  link.download = 'otpusk.csv';
+  link.download = 'otpusk_plan.csv';
   link.click();
 }
 
-renderTable();
+updateStats();
+renderCards();
diff --git a/style.css b/style.css
index ee91dd2..e165ce0 100644
--- a/style.css
+++ b/style.css
@@ -5,223 +5,427 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  padding: 20px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f0f2f5;
+  color: #1a1a1a;
+  line-height: 1.6;
 }
 
-.container {
-  max-width: 1200px;
+.wrapper {
+  min-height: 100vh;
+}
+
+.hero {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
+  padding: 60px 20px;
+  text-align: center;
+  color: white;
+}
+
+.hero-content h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
+}
+
+.hero-content p {
+  font-size: 1.1rem;
+  opacity: 0.95;
+  max-width: 500px;
   margin: 0 auto;
 }
 
-.header {
-  text-align: center;
-  color: white;
-  margin-bottom: 30px;
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 30px 20px;
 }
 
-.header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+.grid {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 30px;
+  align-items: start;
 }
 
-.subtitle {
-  font-size: 1.1rem;
-  opacity: 0.9;
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: sticky;
+  top: 20px;
 }
 
-.form-section, .table-section {
+.card {
   background: white;
   border-radius: 16px;
-  padding: 25px;
-  margin-bottom: 25px;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  overflow: hidden;
 }
 
-.form-section h2, .table-section h2 {
-  color: #333;
-  margin-bottom: 20px;
-  font-size: 1.5rem;
-}
-
-.vacation-form {
+.card-header {
   display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+.card-header h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.card-icon {
+  font-size: 1.4rem;
+}
+
+.main-header {
+  justify-content: space-between;
   flex-wrap: wrap;
   gap: 15px;
 }
 
-.form-row {
+.header-left {
   display: flex;
-  gap: 15px;
-  flex: 1;
-  min-width: 280px;
+  align-items: center;
+  gap: 12px;
+}
+
+.form-card {
+  border-top: 4px solid #6366f1;
+}
+
+.vacation-form {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
 
 .form-group {
-  flex: 1;
-  min-width: 140px;
-}
-
-.form-group.full-width {
-  flex-basis: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .form-group label {
-  display: block;
-  margin-bottom: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
   color: #555;
-  font-weight: 500;
-  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.form-group label .icon {
+  font-size: 1rem;
 }
 
 .form-group input {
-  width: 100%;
-  padding: 12px;
-  border: 2px solid #e0e0e0;
-  border-radius: 8px;
-  font-size: 1rem;
-  transition: border-color 0.3s;
+  padding: 12px 14px;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  transition: all 0.2s;
+  background: #fafafa;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: #6366f1;
+  background: white;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
 }
 
-.btn-add {
-  flex-basis: 100%;
-  padding: 14px 30px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.form-group input::placeholder {
+  color: #9ca3af;
+}
+
+.form-row-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.btn-primary {
+  margin-top: 8px;
+  padding: 14px 24px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   color: white;
   border: none;
-  border-radius: 8px;
-  font-size: 1.1rem;
+  border-radius: 10px;
+  font-size: 1rem;
   font-weight: 600;
+  font-family: inherit;
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  margin-top: 10px;
-}
-
-.btn-add:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-.table-header {
+  transition: all 0.3s;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 15px;
+  justify-content: center;
+  gap: 8px;
 }
 
-.table-actions {
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.stats-card {
+  border-top: 4px solid #10b981;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  padding: 24px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 15px;
+  background: #f8fafc;
+  border-radius: 12px;
+}
+
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #6366f1;
+  margin-bottom: 6px;
+}
+
+.stat-label {
+  font-size: 0.8rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.main-content .card {
+  border-top: 4px solid #8b5cf6;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+  padding: 24px;
+  background: #fafafa;
+}
+
+.vacation-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.vacation-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
+}
+
+.vacation-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+}
+
+.card-location {
   display: flex;
   align-items: center;
   gap: 10px;
+  margin-bottom: 14px;
 }
 
-.count-badge {
-  background: #667eea;
-  color: white;
-  padding: 6px 14px;
-  border-radius: 20px;
+.flag-icon {
+  font-size: 2rem;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 10px;
+}
+
+.location-info h3 {
+  font-size: 1.1rem;
   font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 2px;
+}
+
+.location-info p {
   font-size: 0.9rem;
+  color: #6b7280;
 }
 
-.btn-export {
-  padding: 10px 20px;
-  background: #10b981;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.3s;
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
 }
 
-.btn-export:hover {
-  background: #059669;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-thead {
-  background: #f8f9fa;
-}
-
-th, td {
-  padding: 14px 12px;
-  text-align: left;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-th {
-  font-weight: 600;
-  color: #333;
+.detail-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 0.9rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: #374151;
 }
 
-tbody tr:hover {
-  background: #f8f9fa;
+.detail-row .d-icon {
+  font-size: 1.1rem;
+  width: 20px;
+  text-align: center;
 }
 
-tbody tr:last-child td {
-  border-bottom: none;
+.detail-row strong {
+  color: #1a1a1a;
+}
+
+.card-budget {
+  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+  padding: 12px 16px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.budget-label {
+  font-size: 0.85rem;
+  color: #059669;
+  font-weight: 500;
+}
+
+.budget-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #059669;
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
 }
 
 .btn-delete {
-  padding: 6px 14px;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 6px;
+  flex: 1;
+  padding: 10px 16px;
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fee2e2;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: inherit;
   cursor: pointer;
-  font-size: 0.85rem;
-  transition: background 0.3s;
+  transition: all 0.2s;
 }
 
 .btn-delete:hover {
   background: #dc2626;
+  color: white;
+  border-color: #dc2626;
 }
 
-.empty-message {
+.btn-export {
+  padding: 10px 18px;
+  background: white;
+  color: #10b981;
+  border: 2px solid #10b981;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-export:hover {
+  background: #10b981;
+  color: white;
+}
+
+.empty-state {
   text-align: center;
-  color: #999;
-  padding: 40px 20px;
-  font-size: 1.1rem;
+  padding: 80px 24px;
+  color: #6b7280;
 }
 
-@media (max-width: 768px) {
-  .header h1 {
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  font-size: 1.3rem;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.empty-state p {
+  font-size: 1rem;
+  color: #9ca3af;
+}
+
+@media (max-width: 1024px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .sidebar {
+    position: static;
+  }
+  
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-content h1 {
     font-size: 1.8rem;
   }
   
-  .form-row {
-    flex-direction: column;
+  .form-row-2 {
+    grid-template-columns: 1fr;
   }
   
-  .table-header {
-    flex-direction: column;
-    align-items: flex-start;
+  .cards-grid {
+    grid-template-columns: 1fr;
   }
   
-  th, td {
-    padding: 10px 8px;
-    font-size: 0.85rem;
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
 }
