refactor: update provider panels for improved layout and styling

dashboard/src/assets/mdi-subset/materialdesignicons-subset.css

@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 256 icons */
+/* Auto-generated MDI subset – 255 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -132,10 +132,6 @@
   content: "\F0B66";
 }
 
-.mdi-calendar-clock-outline::before {
-  content: "\F16E1";
-}
-
 .mdi-calendar-edit::before {
   content: "\F08A7";
 }
@@ -296,6 +292,10 @@
   content: "\F0193";
 }
 
+.mdi-content-save-outline::before {
+  content: "\F0818";
+}
+
 .mdi-creation::before {
   content: "\F0674";
 }
@@ -844,10 +844,6 @@
   content: "\F048A";
 }
 
-.mdi-send-clock-outline::before {
-  content: "\F1164";
-}
-
 .mdi-server::before {
   content: "\F048B";
 }

dashboard/src/components/provider/ProviderModelsPanel.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="mt-4">
-    <div class="d-flex align-center ga-2 mb-2">
-      <h3 class="text-h5 font-weight-bold mb-0">{{ tm('models.configured') }}</h3>
-      <small style="color: grey;" v-if="availableCount">{{ tm('models.available') }} {{ availableCount }}</small>
+  <div class="provider-models-panel">
+    <div class="provider-models-head">
+      <div class="provider-models-title-wrap">
+        <h3 class="provider-models-title">{{ tm('models.configured') }}</h3>
+        <small v-if="availableCount" class="provider-models-subtitle">{{ tm('models.available') }} {{ availableCount }}</small>
+      </div>
       <v-text-field
         v-model="modelSearchProxy"
         density="compact"
@@ -11,37 +13,35 @@
         hide-details
         variant="solo-filled"
         flat
-        class="ml-1"
-        style="max-width: 240px;"
+        class="provider-models-search"
         :placeholder="tm('models.searchPlaceholder')"
       />
-      <v-spacer></v-spacer>
-      <v-btn
-        color="primary"
-        prepend-icon="mdi-download"
-        :loading="loadingModels"
-        @click="emit('fetch-models')"
-        variant="tonal"
-        size="small"
-      >
-        {{ isSourceModified ? tm('providerSources.saveAndFetchModels') : tm('providerSources.fetchModels') }}
-      </v-btn>
-      <v-btn
-        color="primary"
-        prepend-icon="mdi-pencil-plus"
-        variant="text"
-        size="small"
-        class="ml-1"
-        @click="emit('open-manual-model')"
-      >
-        {{ tm('models.manualAddButton') }}
-      </v-btn>
+      <div class="provider-models-actions">
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-download"
+          :loading="loadingModels"
+          @click="emit('fetch-models')"
+          variant="tonal"
+          size="small"
+        >
+          {{ isSourceModified ? tm('providerSources.saveAndFetchModels') : tm('providerSources.fetchModels') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-pencil-plus"
+          variant="text"
+          size="small"
+          @click="emit('open-manual-model')"
+        >
+          {{ tm('models.manualAddButton') }}
+        </v-btn>
+      </div>
     </div>
 
     <v-list
       density="compact"
-      class="rounded-lg border"
-      style="max-height: 520px; overflow-y: auto; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"
+      class="provider-models-list"
     >
       <template v-if="entries.length > 0">
         <template v-for="entry in entries" :key="entry.type === 'configured' ? `provider-${entry.provider.id}` : `model-${entry.model}`">
@@ -55,7 +55,7 @@
                 <v-list-item-title class="font-weight-medium text-truncate">
                   {{ entry.provider.id }}
                 </v-list-item-title>
-            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1" style="font-family: monospace;">
+            <v-list-item-subtitle class="provider-model-subtitle d-flex align-center ga-1">
               <span>{{ entry.provider.model }}</span>
               <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
                 mdi-eye-outline
@@ -124,7 +124,7 @@
             <template #activator="{ props }">
               <v-list-item v-bind="props" class="cursor-pointer" @click="emit('add-model-provider', entry.model)">
                 <v-list-item-title>{{ entry.model }}</v-list-item-title>
-            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1">
+            <v-list-item-subtitle class="provider-model-subtitle d-flex align-center ga-1">
               <span>{{ entry.model }}</span>
               <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
                 mdi-eye-outline
@@ -231,11 +231,87 @@ const isProviderTesting = (providerId) => props.testingProviders.includes(provid
 </script>
 
 <style scoped>
-.border {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+.provider-models-panel {
+  display: grid;
+  gap: 14px;
+}
+
+.provider-models-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.provider-models-title-wrap {
+  min-width: 0;
+}
+
+.provider-models-title {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.3;
+  font-weight: 650;
+}
+
+.provider-models-subtitle {
+  display: block;
+  margin-top: 6px;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-size: 12px;
+}
+
+.provider-models-search {
+  max-width: 240px;
+}
+
+.provider-models-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.provider-models-list {
+  max-height: 520px;
+  overflow-y: auto;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 14px;
+  background: rgb(var(--v-theme-surface));
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.provider-compact-item {
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.provider-models-list :deep(.v-list-item:last-child) {
+  border-bottom: 0;
+}
+
+.provider-model-subtitle {
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 }
 
 .cursor-pointer {
   cursor: pointer;
 }
+
+@media (max-width: 900px) {
+  .provider-models-head {
+    align-items: stretch;
+  }
+
+  .provider-models-search {
+    max-width: none;
+    width: 100%;
+  }
+
+  .provider-models-actions {
+    margin-left: 0;
+    width: 100%;
+  }
+}
 </style>

dashboard/src/components/provider/ProviderSourcesPanel.vue

@@ -1,8 +1,13 @@
 <template>
   <v-card class="provider-sources-panel h-100" elevation="0">
-    <div class="d-flex align-center justify-space-between px-4 pt-4 pb-2">
-      <div class="d-flex align-center ga-2">
-        <h3 class="mb-0">{{ tm('providerSources.title') }}</h3>
+    <div class="provider-sources-head">
+      <div class="provider-sources-title-wrap">
+        <div class="provider-sources-title-row">
+          <h3 class="provider-sources-title">{{ tm('providerSources.title') }}</h3>
+          <v-chip size="x-small" variant="tonal" label>
+            {{ displayedProviderSources.length }}
+          </v-chip>
+        </div>
       </div>
       <StyledMenu>
         <template #activator="{ props }">
@@ -11,7 +16,6 @@
             prepend-icon="mdi-plus"
             color="primary"
             variant="tonal"
-            rounded="xl"
             size="small"
           >
             {{ tm('providerSources.add') }}
@@ -34,7 +38,7 @@
       </StyledMenu>
     </div>
 
-    <div v-if="isMobile && displayedProviderSources.length > 0" class="px-4 pb-3">
+    <div v-if="isMobile && displayedProviderSources.length > 0" class="provider-sources-mobile">
       <div class="d-flex align-center ga-2">
         <v-select
           :model-value="selectedId"
@@ -71,7 +75,7 @@
       </div>
     </div>
 
-    <div v-else-if="displayedProviderSources.length > 0">
+    <div v-else-if="displayedProviderSources.length > 0" class="provider-sources-list-wrap">
       <v-list class="provider-source-list" nav density="compact" lines="two">
         <v-list-item
           v-for="source in displayedProviderSources"
@@ -83,13 +87,13 @@
           @click="emitSelectSource(source)"
         >
           <template #prepend>
-            <v-avatar size="32" class="bg-grey-lighten-4" rounded="0">
+            <v-avatar size="28" class="provider-source-avatar" rounded="0">
               <v-img v-if="source?.provider" :src="resolveSourceIcon(source)" alt="logo" cover></v-img>
-              <v-icon v-else size="32">mdi-creation</v-icon>
+              <v-icon v-else size="20">mdi-creation</v-icon>
             </v-avatar>
           </template>
-          <v-list-item-title class="font-weight-bold mb-1" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">{{ getSourceDisplayName(source) }}</v-list-item-title>
-          <v-list-item-subtitle class="text-truncate">{{ source.api_base || 'N/A' }}</v-list-item-subtitle>
+          <v-list-item-title class="provider-source-title">{{ getSourceDisplayName(source) }}</v-list-item-title>
+          <v-list-item-subtitle class="provider-source-subtitle text-truncate">{{ source.api_base || 'N/A' }}</v-list-item-subtitle>
           <template #append>
             <div class="d-flex align-center ga-1">
               <v-btn
@@ -98,6 +102,7 @@
                 variant="text"
                 size="x-small"
                 color="error"
+                :ripple="false"
                 @click.stop="emitDeleteSource(source)"
               ></v-btn>
             </div>
@@ -181,22 +186,98 @@ const emitDeleteSource = (source) => emit('delete-provider-source', source)
 
 <style scoped>
 .provider-sources-panel {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 16px;
+  background: rgb(var(--v-theme-surface));
   min-height: 320px;
+  overflow: hidden;
+}
+
+.provider-sources-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 18px 18px 12px;
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.provider-sources-title-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.provider-sources-title {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.2;
+  font-weight: 650;
+}
+
+.provider-sources-mobile {
+  padding: 14px 18px 0;
+}
+
+.provider-sources-list-wrap {
+  padding: 8px 8px 10px;
 }
 
 .provider-source-list {
   max-height: calc(100vh - 335px);
   overflow-y: auto;
-  padding: 6px 8px;
+  padding: 0;
+  background: transparent;
 }
 
 .provider-source-list-item {
+  margin-bottom: 2px;
+  border: 1px solid transparent;
   transition: background-color 0.15s ease, border-color 0.15s ease;
+  background: transparent;
 }
 
 .provider-source-list-item--active {
-  background-color: #E8F0FE;
-  border: 1px solid rgba(var(--v-theme-primary), 0.25);
+  background-color: rgba(var(--v-theme-primary), 0.06);
+  border: 1px solid transparent;
+}
+
+.provider-source-avatar {
+  background: transparent !important;
+}
+
+.provider-source-title {
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.provider-source-subtitle {
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.provider-source-list :deep(.v-list-item__prepend) {
+  margin-inline-end: 10px;
+}
+
+.provider-source-list :deep(.v-list-item__content) {
+  min-width: 0;
+}
+
+.provider-source-list :deep(.v-list-item__append) {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.provider-source-list-item:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.025);
+}
+
+.provider-source-list-item:hover :deep(.v-list-item__append),
+.provider-source-list-item--active :deep(.v-list-item__append) {
+  opacity: 1;
 }
 
 @media (max-width: 960px) {
@@ -212,7 +293,7 @@ const emitDeleteSource = (source) => emit('delete-provider-source', source)
 
 <style>
 .v-theme--PurpleThemeDark .provider-source-list-item--active {
-  background-color: #2d2d2d;
-  border: none;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  border: 1px solid transparent;
 }
 </style>

dashboard/src/views/ConversationPage.vue

@@ -94,7 +94,21 @@
 
                         <template v-slot:item.title="{ item }">
                             <div class="conversation-title-cell">
-                                <span class="conversation-title-text">{{ item.title || tm('status.noTitle') }}</span>
+                                <div class="conversation-title-row">
+                                    <span class="conversation-title-text">{{ item.title || tm('status.noTitle') }}</span>
+                                    <v-btn
+                                        icon
+                                        variant="plain"
+                                        size="x-small"
+                                        density="compact"
+                                        :ripple="false"
+                                        class="conversation-inline-edit"
+                                        @click.stop="editConversation(item)"
+                                        :disabled="loading"
+                                    >
+                                        <v-icon size="14">mdi-pencil</v-icon>
+                                    </v-btn>
+                                </div>
                                 <span class="conversation-title-meta">{{ item.cid || tm('status.unknown') }}</span>
                             </div>
                         </template>
@@ -141,10 +155,6 @@
                                     @click="viewConversation(item)" :disabled="loading">
                                     <v-icon>mdi-eye</v-icon>
                                 </v-btn>
-                                <v-btn icon variant="plain" size="x-small" class="action-button"
-                                    @click="editConversation(item)" :disabled="loading">
-                                    <v-icon>mdi-pencil</v-icon>
-                                </v-btn>
                                 <v-btn icon color="error" variant="plain" size="x-small" class="action-button"
                                     @click="confirmDeleteConversation(item)" :disabled="loading">
                                     <v-icon>mdi-delete</v-icon>
@@ -1188,14 +1198,29 @@ export default {
     max-width: 145px;
 }
 
+.conversation-title-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+}
+
 .conversation-title-text {
     display: inline-block;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.conversation-inline-edit {
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
+    flex-shrink: 0;
+}
+
 .conversation-title-meta {
     display: block;
     color: rgba(var(--v-theme-on-surface), 0.58);

dashboard/src/views/ProviderPage.vue

@@ -29,9 +29,9 @@
         </v-tabs>
 
         <!-- Chat Completion: 左侧列表 + 右侧上下卡片布局 -->
-        <div v-if="selectedProviderType === 'chat_completion'" class="d-flex align-center justify-center">
-          <v-row style="max-width: 1500px; ">
-            <v-col cols="12" md="4" lg="3" class="pr-md-4">
+        <div v-if="selectedProviderType === 'chat_completion'" class="provider-workbench">
+          <v-row class="provider-workbench__shell">
+            <v-col cols="12" md="4" lg="3" class="provider-workbench__sources">
               <ProviderSourcesPanel
                 :displayed-provider-sources="displayedProviderSources"
                 :selected-provider-source="selectedProviderSource"
@@ -45,66 +45,77 @@
               />
             </v-col>
 
-            <v-col cols="12" md="8" lg="9">
-              <v-card class="provider-config-card h-100" elevation="0" style="overflow-y: auto;">
-                <v-card-title class="d-flex align-center justify-space-between flex-wrap ga-3 pt-4 pl-5">
-                  <div class="d-flex align-center ga-3" v-if="selectedProviderSource">
-                    <div>
-                      <div class="text-h4 font-weight-bold">{{ selectedProviderSource.id }}</div>
-                      <div class="text-caption text-medium-emphasis">{{ selectedProviderSource.api_base || 'N/A' }}
-                      </div>
+            <v-col cols="12" md="8" lg="9" class="provider-workbench__settings">
+              <v-card class="provider-config-card provider-settings-panel h-100" elevation="0">
+                <div v-if="selectedProviderSource" class="provider-config-header">
+                  <div class="provider-config-headline">
+                    <div class="provider-config-kicker">{{ tm('providers.settings') }}</div>
+                    <div class="provider-config-title">{{ selectedProviderSource.id }}</div>
+                    <div class="provider-config-subtitle">
+                      {{ selectedProviderSource.api_base || 'N/A' }}
                     </div>
                   </div>
 
-                  <div class="d-flex align-center ga-2" v-if="selectedProviderSource">
-                    <v-btn color="success" prepend-icon="mdi-check" :loading="savingSource"
-                      :disabled="!isSourceModified" @click="saveProviderSource" variant="flat">
+                  <div class="provider-config-actions">
+                    <v-btn
+                      color="primary"
+                      prepend-icon="mdi-content-save-outline"
+                      :loading="savingSource"
+                      :disabled="!isSourceModified"
+                      @click="saveProviderSource"
+                      variant="tonal"
+                    >
                       {{ tm('providerSources.save') }}
                     </v-btn>
                   </div>
-                </v-card-title>
+                </div>
 
-                <v-card-text>
+                <v-card-text class="provider-config-body">
                   <template v-if="selectedProviderSource">
-                    <div>
+                    <section class="provider-section">
+                      <div class="provider-section-head">
+                        <div class="provider-section-title">{{ tm('providers.settings') }}</div>
+                      </div>
                       <AstrBotConfig v-if="basicSourceConfig" :iterable="basicSourceConfig" :metadata="providerSourceSchema"
                         metadataKey="provider" :is-editing="true" />
-                    </div>
+                    </section>
 
-                    <v-expansion-panels variant="accordion" class="mb-2">
-                      <v-expansion-panel elevation="0" class="border rounded-lg">
-                        <v-expansion-panel-title>
-                          <span class="font-weight-medium">{{ tm('providerSources.advancedConfig') }}</span>
-                        </v-expansion-panel-title>
-                        <v-expansion-panel-text>
-                          <AstrBotConfig v-if="advancedSourceConfig" :iterable="advancedSourceConfig"
-                            :metadata="providerSourceSchema" metadataKey="provider" :is-editing="true" />
-                        </v-expansion-panel-text>
-                      </v-expansion-panel>
-                    </v-expansion-panels>
+                    <section v-if="advancedSourceConfig" class="provider-section">
+                      <div class="provider-section-head">
+                        <div class="provider-section-title">{{ tm('providerSources.advancedConfig') }}</div>
+                      </div>
+                      <AstrBotConfig
+                        :iterable="advancedSourceConfig"
+                        :metadata="providerSourceSchema"
+                        metadataKey="provider"
+                        :is-editing="true"
+                      />
+                    </section>
 
-                    <ProviderModelsPanel
-                      :entries="filteredMergedModelEntries"
-                      :available-count="availableModels.length"
-                      v-model:model-search="modelSearch"
-                      :loading-models="loadingModels"
-                      :is-source-modified="isSourceModified"
-                      :supports-image-input="supportsImageInput"
-                      :supports-tool-call="supportsToolCall"
-                      :supports-reasoning="supportsReasoning"
-                      :format-context-limit="formatContextLimit"
-                      :testing-providers="testingProviders"
-                      :tm="tm"
-                      @fetch-models="fetchAvailableModels"
-                      @open-manual-model="openManualModelDialog"
-                      @open-provider-edit="openProviderEdit"
-                      @toggle-provider-enable="toggleProviderEnable"
-                      @test-provider="testProvider"
-                      @delete-provider="deleteProvider"
-                      @add-model-provider="addModelProvider"
-                    />
+                    <section class="provider-section provider-section--models">
+                      <ProviderModelsPanel
+                        :entries="filteredMergedModelEntries"
+                        :available-count="availableModels.length"
+                        v-model:model-search="modelSearch"
+                        :loading-models="loadingModels"
+                        :is-source-modified="isSourceModified"
+                        :supports-image-input="supportsImageInput"
+                        :supports-tool-call="supportsToolCall"
+                        :supports-reasoning="supportsReasoning"
+                        :format-context-limit="formatContextLimit"
+                        :testing-providers="testingProviders"
+                        :tm="tm"
+                        @fetch-models="fetchAvailableModels"
+                        @open-manual-model="openManualModelDialog"
+                        @open-provider-edit="openProviderEdit"
+                        @toggle-provider-enable="toggleProviderEnable"
+                        @test-provider="testProvider"
+                        @delete-provider="deleteProvider"
+                        @add-model-provider="addModelProvider"
+                      />
+                    </section>
                   </template>
-                  <div v-else class="text-center py-8 text-medium-emphasis">
+                  <div v-else class="provider-empty-state">
                     <v-icon size="48" color="grey-lighten-1">mdi-cursor-default-click</v-icon>
                     <p class="mt-2">{{ tm('providerSources.selectHint') }}</p>
                   </div>
@@ -665,18 +676,141 @@ function goToConfigPage() {
 
 <style scoped>
 .provider-page {
+  --provider-surface: rgb(var(--v-theme-surface));
+  --provider-text: rgb(var(--v-theme-on-surface));
+  --provider-muted: rgba(var(--v-theme-on-surface), 0.68);
+  --provider-subtle: rgba(var(--v-theme-on-surface), 0.56);
+  --provider-border: rgba(var(--v-theme-on-surface), 0.1);
+  --provider-border-strong: rgba(var(--v-theme-on-surface), 0.14);
+  --provider-soft: rgba(var(--v-theme-primary), 0.08);
   padding: 20px;
   padding-top: 8px;
   padding-bottom: 40px;
 }
 
+.provider-workbench {
+  display: flex;
+  justify-content: center;
+}
+
+.provider-workbench__shell {
+  width: 100%;
+  max-width: 1500px;
+}
+
+.provider-workbench__sources,
+.provider-workbench__settings {
+  min-width: 0;
+}
+
 .provider-config-card {
   min-height: 280px;
+  border: 1px solid var(--provider-border);
+  border-radius: 16px;
+  background: var(--provider-surface);
+  overflow: hidden;
+}
+
+.provider-settings-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.provider-config-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid var(--provider-border);
+}
+
+.provider-config-headline {
+  min-width: 0;
+}
+
+.provider-config-kicker {
+  color: var(--provider-subtle);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.provider-config-title {
+  margin-top: 8px;
+  font-size: 22px;
+  line-height: 1.1;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  overflow-wrap: anywhere;
+  color: var(--provider-text);
+}
+
+.provider-config-subtitle {
+  margin-top: 8px;
+  color: var(--provider-muted);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.provider-config-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.provider-config-body {
+  display: grid;
+  gap: 14px;
+  padding: 18px 20px 20px;
+}
+
+.provider-section {
+  border: 1px solid var(--provider-border);
+  border-radius: 14px;
+  background: rgba(var(--v-theme-primary), 0.02);
+  padding: 16px;
+}
+
+.provider-section--models {
+  padding: 18px;
+}
+
+.provider-section-head {
+  margin-bottom: 10px;
+}
+
+.provider-section-title {
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.4;
+  color: var(--provider-text);
+}
+
+.provider-empty-state {
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--provider-muted);
 }
 
 @media (max-width: 960px) {
   .provider-config-card {
     min-height: auto;
   }
+
+  .provider-config-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .provider-config-body {
+    padding: 18px;
+  }
 }
 </style>