update files

styles/main.css

@@ -1,12 +1,12 @@
 :root {
   /* Colors */
-  --color-primary: #ff9d00;
-  --color-primary-dark: #ff8500;
-  --color-text: #2d3748;
-  --color-text-light: #4a5568;
-  --color-background: #f8f9fa;
+  --color-primary: #4a90e2;
+  --color-primary-dark: #357abd;
+  --color-text: #2c3e50;
+  --color-text-light: #6a7c8f;
+  --color-background: #f5f7fa;
   --color-white: #ffffff;
-  --color-border: #e2e8f0;
+  --color-border: #e1e8ef;
 
   /* Spacing */
   --space-xs: 0.5rem;
@@ -16,13 +16,13 @@
   --space-xl: 2rem;
 
   /* Shadows */
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
 
   /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 12px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
 }
 
 /* Reset & Base Styles */
@@ -35,7 +35,7 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--color-text);
   background-color: var(--color-background);
   padding: var(--space-xl);
@@ -50,24 +50,26 @@ body {
 
 /* Typography */
 h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
+  font-size: 2.75rem;
+  font-weight: 800;
   color: var(--color-text);
   margin-bottom: var(--space-xl);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
 }
 
 h2 {
-  font-size: 1.5rem;
+  font-size: 1.6rem;
   color: var(--color-text-light);
   margin-bottom: var(--space-lg);
   font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 /* Forms & Inputs */
 .token-form,
 .repo-form {
-  max-width: 400px;
+  max-width: 440px;
   margin: var(--space-xl) auto;
   display: flex;
   gap: var(--space-md);
@@ -76,24 +78,24 @@ h2 {
 
 .repo-input {
   flex: 1;
-  min-width: 200px;
-  padding: var(--space-sm) var(--space-md);
+  min-width: 220px;
+  padding: var(--space-md);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: 1rem;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   background-color: var(--color-white);
 }
 
 .repo-input:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
 }
 
 .repo-input::placeholder {
   color: var(--color-text-light);
-  opacity: 0.7;
+  opacity: 0.6;
 }
 
 /* Buttons */
@@ -102,12 +104,12 @@ h2 {
   background-color: var(--color-primary);
   color: var(--color-white);
   border: none;
-  padding: var(--space-sm) var(--space-lg);
+  padding: var(--space-md) var(--space-lg);
   border-radius: var(--radius-md);
   font-size: 1rem;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   box-shadow: var(--shadow-sm);
 }
@@ -116,7 +118,7 @@ h2 {
 .repo-button:hover {
   background-color: var(--color-primary-dark);
   box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
 .auth-button:active,
@@ -136,6 +138,7 @@ h2 {
   border-radius: var(--radius-lg);
   margin-top: var(--space-xl);
   box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
 }
 
 /* Resource Group */
@@ -152,7 +155,7 @@ h2 {
   overflow-x: auto;
   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;
   font-size: 0.9rem;
-  line-height: 1.4;
+  line-height: 1.5;
   color: var(--color-text);
   border: 1px solid var(--color-border);
 }
@@ -164,7 +167,7 @@ h2 {
   }
 
   h1 {
-    font-size: 2rem;
+    font-size: 2.2rem;
   }
 
   .token-form,