Update style.css

style.css

@@ -5,271 +5,257 @@
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
-    color: #e0e0e0;
+    font-family: 'Manrope', sans-serif;
+    background: #0f0f1a;
+    color: #d9d9e6;
     min-height: 100vh;
-    overflow-x: hidden;
+    transition: background 0.5s, color 0.5s;
 }
 
 .container {
-    max-width: 1400px;
+    max-width: 1440px;
     margin: 0 auto;
     padding: 20px;
 }
 
 /* Header */
 .header {
-    position: relative;
-    text-align: center;
-    padding: 60px 20px;
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(12px);
-    border-radius: 20px;
-    margin-bottom: 40px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    animation: fadeIn 1s ease-out;
-}
-
-.header h1 {
-    font-size: 3em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 40px;
+    background: rgba(20, 20, 30, 0.7);
+    backdrop-filter: blur(15px);
+    border-radius: 16px;
+    margin-bottom: 30px;
+}
+
+.logo h1 {
+    font-size: 2em;
     font-weight: 800;
-    background: linear-gradient(45deg, #00ddeb, #ff007a);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
+    color: #00c4ff;
 }
 
-.header p {
-    font-size: 1.2em;
-    color: #a0a0a0;
-    margin-top: 10px;
+.tagline {
+    font-size: 0.9em;
+    color: #8a8ab3;
+    margin-left: 10px;
 }
 
-.theme-toggle {
-    position: absolute;
-    top: 20px;
-    right: 20px;
+.nav {
+    display: flex;
+    align-items: center;
 }
 
-#theme-switch {
+#theme-toggle {
     background: none;
     border: none;
-    font-size: 1.5em;
-    color: #e0e0e0;
     cursor: pointer;
-    transition: transform 0.3s;
+    padding: 10px;
+    border-radius: 50%;
+    transition: background 0.3s, transform 0.3s;
+}
+
+#theme-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: rotate(90deg);
 }
 
-#theme-switch:hover {
-    transform: rotate(180deg);
+.icon {
+    width: 24px;
+    height: 24px;
+    stroke: #d9d9e6;
 }
 
-/* Main Grid */
-.main-grid {
+/* Main Layout */
+.main {
     display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 30px;
-    padding-bottom: 40px;
-}
-
-/* Card Styling */
-.card {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 25px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    grid-template-columns: 3fr 1fr;
+    gap: 20px;
+    min-height: calc(100vh - 200px);
+}
+
+/* Panels */
+.panel {
+    background: #14141e;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+.panel:hover {
+    transform: translateY(-4px);
+    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
 }
 
-.card h2 {
-    font-size: 1.6em;
+.panel h2 {
+    font-size: 1.4em;
     font-weight: 600;
-    margin-bottom: 20px;
-    color: #00ddeb;
+    color: #00c4ff;
+    margin-bottom: 16px;
 }
 
-/* Query Card */
-.query-card textarea {
-    width: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 10px;
-    padding: 15px;
+/* Query Panel */
+.query-panel .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+#query-input {
+    background: #1a1a26;
+    border: none;
+    border-radius: 12px;
+    padding: 16px;
     font-size: 1em;
-    color: #e0e0e0;
-    resize: vertical;
-    transition: border-color 0.3s;
+    color: #d9d9e6;
+    resize: none;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s;
 }
 
-.query-card textarea:focus {
+#query-input:focus {
     outline: none;
-    border-color: #00ddeb;
+    box-shadow: inset 0 0 0 2px #00c4ff;
 }
 
 /* Buttons */
 .btn {
     padding: 12px 24px;
     border: none;
-    border-radius: 10px;
-    font-size: 1em;
+    border-radius: 12px;
+    font-size: 0.95em;
     font-weight: 600;
     cursor: pointer;
-    transition: background 0.3s, transform 0.2s;
-}
-
-.btn-primary {
-    background: linear-gradient(45deg, #00ddeb, #ff007a);
-    color: white;
-}
-
-.btn-primary:hover {
-    background: linear-gradient(45deg, #00b7c3, #e6006b);
-    transform: translateY(-2px);
+    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
 }
 
-.btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: #e0e0e0;
-    width: 100%;
+.btn-action {
+    background: linear-gradient(135deg, #00c4ff, #ff007a);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.3);
 }
 
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
+.btn-action:hover {
     transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 196, 255, 0.5);
 }
 
-/* Output Boxes */
-.output-box {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
+/* Output Panels */
+.output {
+    background: #1a1a26;
+    border-radius: 12px;
     padding: 20px;
-    min-height: 150px;
-    font-size: 1em;
-    line-height: 1.5;
-    color: #c0c0c0;
+    min-height: 120px;
+    font-size: 0.95em;
+    color: #b0b0cc;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-/* Settings Card */
-.settings-card {
+/* Settings Panel */
+.settings-panel {
     grid-row: span 2;
 }
 
-.settings-grid {
-    display: grid;
-    gap: 20px;
-    margin-bottom: 20px;
+.settings {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
 
-.setting-item label {
-    display: block;
-    font-size: 0.9em;
-    font-weight: 400;
-    color: #a0a0a0;
+.control label {
+    font-size: 0.85em;
+    color: #8a8ab3;
     margin-bottom: 8px;
+    display: block;
 }
 
-.setting-item input,
-.setting-item select {
+.control input,
+.control select {
     width: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    padding: 10px;
+    background: #1a1a26;
+    border: none;
+    border-radius: 10px;
+    padding: 12px;
     font-size: 0.9em;
-    color: #e0e0e0;
-    transition: border-color 0.3s;
+    color: #d9d9e6;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s;
 }
 
-.setting-item input:focus,
-.setting-item select:focus {
+.control input:focus,
+.control select:focus {
     outline: none;
-    border-color: #00ddeb;
+    box-shadow: inset 0 0 0 2px #00c4ff;
 }
 
 /* Footer */
 .footer {
     text-align: center;
     padding: 20px 0;
-    color: #606060;
-    font-size: 0.9em;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.card, .footer {
-    animation: fadeIn 0.8s ease-out forwards;
+    font-size: 0.85em;
+    color: #606080;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    margin-top: 20px;
 }
 
 /* Light Theme */
 body.light {
-    background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
-    color: #1a1a1a;
+    background: #f5f5fa;
+    color: #1a1a2e;
 }
 
 body.light .header,
-body.light .card {
-    background: rgba(255, 255, 255, 0.7);
+body.light .panel {
+    background: #ffffff;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.3);
 }
 
-body.light .card h2 {
+body.light .panel h2 {
     color: #007bff;
 }
 
-body.light .query-card textarea,
-body.light .setting-item input,
-body.light .setting-item select {
-    background: rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, 0.1);
-    color: #1a1a1a;
+body.light .output,
+body.light #query-input,
+body.light .control input,
+body.light .control select {
+    background: #f0f0f5;
+    color: #1a1a2e;
+    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-body.light .output-box {
-    background: rgba(0, 0, 0, 0.05);
-    color: #333;
+body.light .control label {
+    color: #606080;
 }
 
-body.light .btn-secondary {
-    background: rgba(0, 0, 0, 0.1);
-    color: #1a1a1a;
+body.light .footer {
+    color: #8080a0;
 }
 
-body.light .btn-secondary:hover {
-    background: rgba(0, 0, 0, 0.2);
+body.light .icon {
+    stroke: #1a1a2e;
 }
 
-body.light .footer {
-    color: #666;
+/* Animations */
+@keyframes slideIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.panel, .footer {
+    animation: slideIn 0.5s ease-out forwards;
 }
 
 /* Responsive Design */
-@media (max-width: 900px) {
-    .main-grid {
+@media (max-width: 1024px) {
+    .main {
         grid-template-columns: 1fr;
     }
 
-    .settings-card {
+    .settings-panel {
         grid-row: auto;
     }
-
-    .header h1 {
-        font-size: 2.2em;
-    }
-
-    .header p {
-        font-size: 1em;
-    }
 }
 
 @media (max-width: 600px) {
@@ -277,8 +263,18 @@ body.light .footer {
         padding: 10px;
     }
 
-    .card {
+    .header {
         padding: 15px;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .logo h1 {
+        font-size: 1.5em;
+    }
+
+    .panel {
+        padding: 16px;
     }
 
     .btn {