updates to UX and NTFS

webroot/css/components.css

@@ -7,14 +7,14 @@
 .calculator-container {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
 }
 
 .calc-display {
     background-color: #111111;
     border: 1px solid #404040;
     border-radius: 6px;
-    padding: 12px;
+    padding: 10px;
 }
 
 .calc-input input {
@@ -24,24 +24,24 @@
     border-radius: 4px;
     color: #ffffff;
     font-family: 'Consolas', monospace;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: bold;
-    padding: 8px;
+    padding: 7px;
     text-align: right;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 
 .calc-conversions {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
 }
 
 .conversion-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 3px 0;
+    padding: 2px 0;
     border-bottom: 1px solid #333333;
 }
 
@@ -52,30 +52,30 @@
 .conv-label {
     color: #888888;
     font-weight: bold;
-    font-size: 0.8em;
+    font-size: 0.75em;
     min-width: 30px;
 }
 
 .conv-value {
     color: #cccccc;
     font-family: 'Consolas', monospace;
-    font-size: 0.8em;
+    font-size: 0.75em;
     word-break: break-all;
     text-align: right;
     flex: 1;
-    margin-left: 10px;
+    margin-left: 8px;
 }
 
 .calc-buttons {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
 }
 
 .calc-row {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 4px;
+    gap: 3px;
 }
 
 .calc-btn {
@@ -85,10 +85,10 @@
     color: #ffffff;
     cursor: pointer;
     font-family: 'Consolas', monospace;
-    font-size: 0.8em;
+    font-size: 0.75em;
     font-weight: bold;
-    min-height: 32px;
-    padding: 4px;
+    min-height: 30px;
+    padding: 3px;
     text-align: center;
     transition: all 0.2s;
     user-select: none;
@@ -160,20 +160,37 @@
 }
 
 .input-group label {
-    margin-bottom: 6px;
+    margin-bottom: 5px;
     color: #cccccc;
     font-weight: normal;
     font-size: 0.95em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.input-group label:hover {
+    white-space: normal;
+    overflow: visible;
 }
 
 .unit-indicator {
     color: #88cc88;
     font-weight: bold;
     font-size: 0.85em;
+    white-space: nowrap;
+}
+
+.offset-info {
+    color: #8899cc;
+    font-weight: normal;
+    font-size: 0.85em;
+    opacity: 0.8;
+    font-style: italic;
 }
 
 .input-group input {
-    padding: 12px;
+    padding: 10px;
     background-color: #333333;
     border: 1px solid #4a4a4a;
     border-radius: 4px;
@@ -197,7 +214,7 @@
 .error-message {
     color: #ff8888;
     font-size: 0.8em;
-    margin-top: 4px;
+    margin-top: 3px;
     font-style: italic;
 }
 
@@ -206,7 +223,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 0;
+    padding: 8px 0;
     border-bottom: 1px solid #3a3a3a;
     position: relative;
 }
@@ -233,7 +250,7 @@
 .result-value-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
 }
 
 .result-value {
@@ -241,7 +258,7 @@
     font-family: 'Consolas', monospace;
     text-align: right;
     font-weight: bold;
-    min-width: 120px;
+    min-width: 100px;
     cursor: help;
 }
 
@@ -250,10 +267,10 @@
     border: none;
     color: #888888;
     cursor: pointer;
-    padding: 4px;
+    padding: 3px;
     border-radius: 3px;
     transition: all 0.2s;
-    font-size: 14px;
+    font-size: 13px;
 }
 
 .copy-btn:hover {
@@ -267,19 +284,19 @@
 
 /* Result Groups */
 .result-group {
-    margin-bottom: 20px;
+    margin-bottom: 15px;
     border: 1px solid #3a3a3a;
     border-radius: 6px;
-    padding: 15px;
+    padding: 12px;
     background-color: #2a2a2a;
 }
 
 .result-group h3 {
     color: #ffffff;
-    margin-bottom: 10px;
-    font-size: 1.1em;
+    margin-bottom: 8px;
+    font-size: 1.05em;
     border-bottom: 1px solid #3a3a3a;
-    padding-bottom: 5px;
+    padding-bottom: 4px;
 }
 
 /* Formula Styles */
@@ -287,14 +304,14 @@
     background-color: #151515;
     border: 1px solid #404040;
     border-radius: 4px;
-    padding: 15px;
-    margin: 10px 0;
+    padding: 12px;
+    margin: 8px 0;
     font-family: 'Consolas', monospace;
     font-size: 0.9em;
 }
 
 .formula {
-    margin: 8px 0;
+    margin: 6px 0;
     color: #d0d0d0;
     word-wrap: break-word;
 }
@@ -309,7 +326,7 @@
     position: absolute;
     background-color: #1a1a1a;
     color: #ffffff;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-radius: 4px;
     font-size: 0.85em;
     border: 1px solid #555555;
@@ -321,12 +338,45 @@
     line-height: 1.4;
 }
 
+/* Info Toast */
+.info-toast {
+    background: linear-gradient(135deg, #2c5aa0 0%, #1e4077 100%);
+    border-bottom: 2px solid #4a7bc8;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    padding: 10px 0;
+}
+
+.toast-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 15px;
+    color: #ffffff;
+    font-size: 0.95em;
+    text-align: center;
+    line-height: 1.5;
+}
+
+.toast-content a {
+    color: #ffd700;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s;
+}
+
+.toast-content a:hover {
+    border-bottom-color: #ffd700;
+}
+
+.toast-content strong {
+    font-weight: bold;
+}
+
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .result-item {
         flex-direction: column;
         align-items: flex-start;
-        gap: 5px;
+        gap: 4px;
     }
 
     .result-value {