csbot styly

app/static/styles.css

@@ -1,14 +1,17 @@
 :root {
-    --bg: #f6f7fb;
+    --bg: #f4f8fa;
     --card: #ffffff;
-    --text: #1f2937;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --primary: #2563eb;
-    --primary-dark: #1d4ed8;
-    --danger: #dc2626;
-    --danger-dark: #b91c1c;
-    --success: #16a34a;
+    --text: #183747;
+    --muted: #627987;
+    --border: #d8e5eb;
+    --primary: #c83676;
+    --primary-dark: #a92a62;
+    --secondary: #1e516b;
+    --secondary-dark: #173d51;
+    --danger: #b8223e;
+    --danger-dark: #941a31;
+    --success: #188654;
+    --success-bg: #e7f5ee;
 }
 
 * {
@@ -18,29 +21,51 @@
 body {
     margin: 0;
     font-family: Arial, sans-serif;
-    background: var(--bg);
+    background: linear-gradient(180deg, #eef6f9 0, var(--bg) 220px);
     color: var(--text);
 }
 
 header {
-    background: #111827;
+    background: var(--secondary);
     color: white;
-    padding: 18px 32px;
+    padding: 14px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-bottom: 5px solid var(--primary);
+    box-shadow: 0 10px 26px rgba(30, 81, 107, 0.16);
 }
 
-header h1 {
-    margin: 0;
-    font-size: 22px;
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    color: white;
+    text-decoration: none;
+    font-weight: 800;
+    font-size: 19px;
+}
+
+.brand:hover {
+    text-decoration: none;
+}
+
+.brand img {
+    display: block;
+    width: 148px;
+    height: auto;
+    background: white;
+    border-radius: 6px;
+    padding: 6px 8px;
 }
 
 nav a {
     color: white;
     text-decoration: none;
-    margin-left: 18px;
+    margin-left: 8px;
     font-weight: 600;
+    padding: 9px 12px;
+    border-radius: 8px;
 }
 
 main {
@@ -52,12 +77,16 @@ main {
 .card {
     background: var(--card);
     border: 1px solid var(--border);
-    border-radius: 14px;
+    border-radius: 8px;
     padding: 22px;
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+    box-shadow: 0 8px 24px rgba(30, 81, 107, 0.07);
     margin-bottom: 24px;
 }
 
+.card h2 {
+    color: var(--secondary);
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -83,7 +112,8 @@ th {
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: .04em;
-    background: #f9fafb;
+    background: #eef6f9;
+    border-top: 1px solid var(--border);
 }
 
 a {
@@ -133,8 +163,8 @@ button:hover,
     border-radius: 999px;
     padding: 4px 10px;
     font-size: 12px;
-    background: #dcfce7;
-    color: #166534;
+    background: var(--success-bg);
+    color: var(--success);
     font-weight: 700;
 }
 
@@ -149,7 +179,8 @@ select {
 input[readonly] {
     width: 100%;
     font-family: monospace;
-    background: #f9fafb;
+    background: #f8fbfc;
+    color: var(--secondary-dark);
 }
 
 .cmd-row {
@@ -192,7 +223,7 @@ details summary {
 }
 
 pre {
-    background: #111827;
+    background: var(--secondary-dark);
     color: #e5e7eb;
     padding: 18px;
     border-radius: 12px;