Resize small cards to 110px

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/dashboard.css

@@ -3,20 +3,62 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
     background: #0a0a0a;
     color: #ffffff;
-    padding: 20px;
+    padding: 0 10px;
     line-height: 1.6;
 }
 h1 { color: #ffffff; margin-bottom: 20px; font-size: 24px; }
-h2 { color: #ffffff; margin: 20px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
+h2 { color: #ffffff; margin: 4px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
+h2:first-child { margin-top: 0; }
+#topSection {
+    background: #0a0a0a;
+    padding: 0 0 4px 0;
+}
+#topSection.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    padding: 0 10px 4px 10px;
+    transform: translateY(0);
+    transition: transform 0.3s ease;
+}
+#topSection.fixed.hidden {
+    transform: translateY(-100%);
+}
+#topSectionSpacer {
+    display: none;
+}
+#topSectionSpacer.active {
+    display: block;
+}
+#inputCard { margin: 10px 0; }
 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
+.grid-narrow { display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 110px; gap: 10px; margin-bottom: 0; }
 .card {
     background: #151515;
     border: 1px solid #252525;
     border-radius: 8px;
     padding: 15px;
 }
-.stat-value { font-weight: bold; color: #ffffff; }
+.card.clickable {
-.stat-label { color: #888; text-transform: uppercase; }
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s, transform 0.1s;
+}
+.card.clickable:hover {
+    background: #1a1a1a;
+    border-color: #0af;
+}
+.card.clickable:active {
+    transform: scale(0.98);
+}
+.card.clickable.active {
+    background: #1a1a1a;
+    border-color: #0af;
+    box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
+}
+.stat-value { font-weight: bold; color: #ffffff; text-align: center; }
+.stat-label { color: #888; text-transform: uppercase; text-align: center; }
 .stat-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #202020; color: #ffffff; }
 .stat-row:last-child { border-bottom: none; }
 .progress-bar {
@@ -81,3 +123,63 @@ td { font-size: 13px; color: #ffffff; }
 .visit-link:hover {
     color: #0af !important;
 }
+
+/* TLD Grid */
+.domain-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+.tld-section {
+    width: 135px;
+    background: #151515;
+    border: 1px solid #252525;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s;
+}
+.tld-section:hover {
+    background: #1a1a1a;
+    border-color: #0af;
+}
+.tld-section.expanded {
+    background: #1a1a1a;
+    border-color: #0af;
+    box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
+}
+.tld-section .tld-header {
+    padding: 4px;
+    text-align: center;
+}
+.tld-section .tld-name {
+    color: #0af;
+    font-weight: normal;
+    font-size: 10pt;
+}
+.tld-section .tld-content {
+    display: none;
+}
+/* Expanded content shown in separate container */
+#expandedTLDContent {
+    margin-top: 10px;
+    background: #151515;
+    border: 1px solid #0af;
+    border-radius: 8px;
+}
+#expandedTLDContent .tld-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: #1a1a1a;
+    border-bottom: 1px solid #333;
+    cursor: pointer;
+}
+#expandedTLDContent .tld-toggle {
+    color: #666;
+    margin-right: 10px;
+}
+#expandedTLDContent .tld-name {
+    color: #0af;
+    font-weight: bold;
+    font-size: 1.1em;
+}