Styling

popup.css

@@ -1,14 +1,14 @@
 body {
   margin: 0;
-  font-family: Arial, sans-serif;
-  background: #111319;
-  color: #e9ecf1;
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
+  background: #070909;
+  color: #e7f0e9;
 }
 
 .popup {
-  width: 380px;
-  max-height: 520px;
-  padding: 12px;
+  width: 420px;
+  max-height: 560px;
+  padding: 14px;
   box-sizing: border-box;
 }
 
@@ -16,32 +16,37 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
+  margin-bottom: 10px;
 }
 
 .popup-header h1 {
   margin: 0;
   font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
-button {
-  border: 1px solid #2f66ff;
-  background: #2f66ff;
-  color: white;
-  border-radius: 6px;
+#openHistoryBtn {
+  border: 1px solid #263329;
+  background: #101513;
+  color: #b7cbbd;
+  border-radius: 999px;
   cursor: pointer;
-  padding: 6px 9px;
+  padding: 6px 10px;
   font-size: 12px;
+  transition: all 120ms ease;
 }
 
-button.secondary {
-  border-color: #445;
-  background: #1e2230;
+#openHistoryBtn:hover {
+  border-color: #3c5342;
+  color: #e3f3e7;
+  background: #151d18;
 }
 
 .status {
-  margin: 12px 0;
-  color: #adb6cb;
+  margin: 8px 0 12px;
+  color: #829589;
   font-size: 12px;
 }
 
@@ -51,33 +56,98 @@ button.secondary {
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .url-item {
-  border: 1px solid #2a2f40;
-  border-radius: 8px;
-  background: #171b26;
-  padding: 8px;
+  border: 1px solid #1d2620;
+  border-radius: 12px;
+  background: #0d1210;
+  padding: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01);
+}
+
+.item-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.item-info {
+  min-width: 0;
+  flex: 1;
 }
 
 .cover-image {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
+  width: 44px;
+  height: 44px;
+  border-radius: 7px;
   object-fit: cover;
-  display: block;
-  margin-bottom: 8px;
+  flex-shrink: 0;
+  border: 1px solid #243027;
 }
 
-.url-text {
-  margin: 0 0 8px;
+.item-title {
+  margin: 0;
+  color: #eff8f1;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.item-sub {
+  margin: 3px 0 0;
+  color: #94a89a;
   font-size: 11px;
-  word-break: break-all;
-  color: #c6d0e5;
 }
 
-.actions {
-  display: flex;
-  gap: 8px;
+.item-tags {
+  margin: 4px 0 0;
+  color: #b3c9b8;
+  font-size: 11px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-badges {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.badge {
+  border: 1px solid #2d4f35;
+  background: #142219;
+  color: #bde6c6;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 10px;
+  letter-spacing: 0.01em;
+}
+
+.download-icon-btn {
+  width: 44px;
+  height: 44px;
+  border: 1px solid #2f9e5a;
+  background: #1b7f45;
+  color: #f1fff4;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 120ms ease, transform 120ms ease;
+}
+
+.download-icon-btn:hover {
+  background: #249452;
+  transform: translateY(-1px);
+}
+
+.download-icon-btn:active {
+  transform: translateY(0);
 }