Optimize UI box heights for compactness

styles.css

@@ -469,8 +469,8 @@ body {
     linear-gradient(90deg, #18315f 0%, #1c2e68 48%, #146d83 100%);
   color: #f8fafc;
   border-radius: 24px;
-  padding: 42px 44px;
-  min-height: 256px;
+  padding: 24px 30px;
+  min-height: 180px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -510,32 +510,32 @@ body {
 }
 
 .links-hero h2 {
-  font-size: clamp(34px, 4vw, 58px);
-  line-height: 1.05;
-  letter-spacing: -1.4px;
-  margin-bottom: 16px;
-  max-width: 670px;
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1.1;
+  letter-spacing: -1.2px;
+  margin-bottom: 12px;
+  max-width: 600px;
 }
 
 .links-hero p {
-  max-width: 560px;
+  max-width: 500px;
   color: rgba(241, 245, 249, 0.86);
-  line-height: 1.6;
-  font-size: 16px;
+  line-height: 1.5;
+  font-size: 14px;
 }
 
 .links-hero .btn-primary {
   position: relative;
   z-index: 1;
-  min-width: 164px;
-  min-height: 60px;
+  min-width: 140px;
+  min-height: 48px;
   justify-content: center;
-  border-radius: 18px;
+  border-radius: 14px;
 }
 
 .links-hero-art {
-  flex: 0 0 360px;
-  height: 190px;
+  flex: 0 0 280px;
+  height: 140px;
   position: relative;
   z-index: 1;
   margin-left: auto;
@@ -654,21 +654,21 @@ body {
 .links-note-chip {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 18px 22px;
-  border-radius: 20px;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: 16px;
   background: #ffffff;
   border: 1px solid var(--border-color);
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
 }
 
 .links-note-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -683,12 +683,12 @@ body {
 }
 
 .links-note-copy strong {
-  font-size: 16px;
+  font-size: 15px;
   color: #18315f;
 }
 
 .links-note-copy span {
-  font-size: 14px;
+  font-size: 13px;
   color: #62748e;
 }
 
@@ -696,17 +696,17 @@ body {
 .links-search {
   background: #ffffff;
   border: 1px solid var(--border-color);
-  border-radius: 22px;
-  padding: 22px 24px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  border-radius: 20px;
+  padding: 14px 18px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
   transition: all 0.2s ease;
 }
 
 .links-stat-card {
   display: flex;
   align-items: center;
-  gap: 18px;
-  min-height: 132px;
+  gap: 12px;
+  min-height: 84px;
   justify-content: flex-start;
 }
 
@@ -717,20 +717,20 @@ body {
 }
 
 .links-stat-icon {
-  width: 76px;
-  height: 76px;
+  width: 58px;
+  height: 58px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 34px;
+  font-size: 26px;
   flex-shrink: 0;
 }
 
 .links-stat-copy {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 
 .links-stat-label {
@@ -742,13 +742,13 @@ body {
 }
 
 .links-stat-card strong {
-  font-size: 30px;
+  font-size: 22px;
   line-height: 1.1;
   color: #0f2b63;
 }
 
 .links-stat-subtitle {
-  font-size: 14px;
+  font-size: 13px;
   color: #62748e;
 }
 
@@ -756,27 +756,27 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 18px;
-  min-height: 132px;
+  gap: 14px;
+  min-height: 108px;
   border-color: #d7e2ee;
-  padding: 20px 22px;
+  padding: 16px 18px;
 }
 
 .links-search-input {
   display: flex;
   align-items: center;
   gap: 16px;
-  min-height: 84px;
+  min-height: 68px;
   flex: 1;
   border: 1px solid #e6edf5;
-  border-radius: 20px;
-  padding: 0 22px;
+  border-radius: 18px;
+  padding: 0 18px;
   background: linear-gradient(180deg, #ffffff, #fbfdff);
 }
 
 .links-search-input i {
   color: #6b778a;
-  font-size: 28px;
+  font-size: 24px;
 }
 
 .links-search input {
@@ -785,7 +785,7 @@ body {
   background: transparent;
   outline: none;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 15px;
   color: var(--text-main);
 }
 
@@ -795,8 +795,8 @@ body {
 }
 
 .links-filter-btn {
-  min-height: 46px;
-  padding: 0 18px;
+  min-height: 40px;
+  padding: 0 16px;
   border-radius: 999px;
   border: 1px solid #dce7f2;
   background: #ffffff;
@@ -2046,7 +2046,12 @@ body {
     transform: scale(0.8);
     transform-origin: left center;
   }
-  .links-hero h2 { font-size: 24px; }
+.links-hero h2 {
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1.1;
+  letter-spacing: -1.2px;
+  margin-bottom: 12px;
+  max-width: 600px;
   .links-toolbar { grid-template-columns: 1fr; }
   .links-stat-card {
     min-height: auto;
@@ -2213,8 +2218,8 @@ body {
   background: #ffffff;
   border: 1px solid #e8edf4;
   border-radius: 28px;
-  min-height: 300px;
-  padding: 32px;
+  min-height: 240px;
+  padding: 24px;
   box-shadow: var(--shadow-sm);
 }
 
@@ -2222,11 +2227,11 @@ body {
   background: #ffffff;
   border: 1px solid #eef2f6;
   border-radius: 20px;
-  padding: 24px;
+  padding: 18px;
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 14px;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
   animation: cardFadeIn 0.5s ease-out forwards;
@@ -2268,8 +2273,8 @@ body {
 }
 
 .link-icon-container {
-  width: 52px;
-  height: 52px;
+  width: 44px;
+  height: 44px;
   background: #f8fafc;
   border: 1px solid #f1f5f9;
   border-radius: 14px;
@@ -2282,8 +2287,8 @@ body {
 }
 
 .link-favicon {
-  width: 32px;
-  height: 32px;
+  width: 26px;
+  height: 26px;
   object-fit: contain;
 }
 
@@ -2306,7 +2311,7 @@ body {
 }
 
 .link-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 700;
   color: #1e293b;
   line-height: 1.4;
@@ -2349,7 +2354,7 @@ body {
 }
 
 .link-description {
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1.6;
   color: #475569;
   display: -webkit-box;
@@ -2423,7 +2428,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 16px;
+  padding: 6px 12px;
   background: var(--primary-color);
   color: #ffffff;
   border-radius: 10px;