.settings-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(124,58,237,0.18),rgba(37,99,235,0.08));
}
.settings-header-main{
  display:flex;
  align-items:center;
  gap:1rem;
}
.settings-logo{
  width:32px;
  height:32px;
}
.settings-title{
  margin:0;
  font-size:1.1rem;
}
.settings-subtitle{
  margin:0.2rem 0 0;
  font-size:0.9rem;
  color:var(--muted);
}
.settings-header-meta{
  font-size:0.8rem;
}
.settings-tag{
  padding:0.2rem 0.6rem;
  border-radius:999px;
  border:1px solid var(--border);
}

.settings-main{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr);
  grid-template-rows:auto auto;
  gap:1rem;
  padding:1rem 1.5rem 1.5rem;
}
.settings-panel{
  border-radius:0.75rem;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:0.9rem 1.1rem;
}
.settings-panel--env{
  grid-column:1/2;
}
.settings-panel--features{
  grid-column:2/3;
}
.settings-panel--raw{
  grid-column:1/3;
}
.settings-panel--log{
  grid-column:1/3;
}
.settings-panel--account{
  grid-column:1/3;
}
.account-status{
  font-size:0.9rem;
  margin:0 0 0.5rem;
  color:var(--muted);
}
.account-message{
  font-size:0.8rem;
  min-height:1.2rem;
  color:var(--accent,#0ea5e9);
  margin-bottom:0.5rem;
}
.account-forms{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:0.5rem;
}
.account-form{
  flex:1;
  min-width:220px;
  border:1px dashed var(--border);
  border-radius:0.6rem;
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  background:rgba(15,23,42,0.4);
}
html[data-theme="light"] .account-form{
  background:rgba(241,245,249,0.95);
  border-color:#cbd5e1;
}
.account-form h3{
  margin:0;
  font-size:0.95rem;
}
.account-form label{
  display:flex;
  flex-direction:column;
  font-size:0.82rem;
  gap:0.3rem;
}
.account-form input{
  border-radius:0.5rem;
  border:1px solid var(--border);
  padding:0.4rem 0.5rem;
  background:var(--surface,rgba(15,23,42,0.92));
  color:inherit;
}
html[data-theme="light"] .account-form input{
  background:#ffffff;
  border-color:#cbd5e1;
  color:#0f172a;
}
.account-form button,
.account-logout{
  border:none;
  border-radius:999px;
  padding:0.5rem 0.9rem;
  font-size:0.85rem;
  cursor:pointer;
  background:linear-gradient(120deg,#7C3AED,#06B6D4);
  color:#fff;
}
.account-logout{
  margin-top:0.25rem;
}

/* Account Management Section */
.account-management{
  margin-top:1rem;
}
.account-management.hidden{
  display:none;
}
#manageAccountToggle{
  display:flex;
  align-items:center;
  gap:0.5rem;
  width:100%;
  justify-content:flex-start;
}
#manageAccountToggle #toggleIcon{
  transition:transform 0.2s ease;
  font-size:0.75rem;
}

/* Account Details Panel */
.account-details-panel{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
  animation:slideDown 0.3s ease;
}
.account-details-panel.hidden{
  display:none;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Override account-card for settings context - use --card/--border */
.account-details-panel .account-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:0.75rem;
  margin-bottom:1rem;
  padding:0;
}
.account-details-panel .account-card .card-header h2,
.account-details-panel .account-card .card-header h3{
  font-size:1rem;
  margin:0;
}

.hidden{
  display:none !important;
}

/* OAuth Buttons Section */
.oauth-section {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  background: var(--card, white);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
}

.oauth-btn:hover {
  background: var(--surface, #f5f5f5);
  border-color: rgba(124,58,237,0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124,58,237,0.15);
}

.oauth-btn:active {
  transform: translateY(0);
}

.oauth-btn svg {
  flex-shrink: 0;
}

.oauth-btn-google {
  border-color: rgba(66, 133, 244, 0.2);
}

.oauth-btn-google:hover {
  border-color: rgba(66, 133, 244, 0.4);
  background: rgba(66, 133, 244, 0.05);
}

.oauth-btn-github {
  border-color: rgba(51, 51, 51, 0.2);
}

.oauth-btn-github:hover {
  border-color: rgba(51, 51, 51, 0.4);
  background: rgba(51, 51, 51, 0.05);
}

html[data-theme="light"] .oauth-btn {
  background: #ffffff;
  border-color: #cbd5e1;
}

html[data-theme="light"] .oauth-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.oauth-divider {
  position: relative;
  text-align: center;
  margin: 16px 0;
}

.oauth-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border, #ddd) 20%, var(--border, #ddd) 80%, transparent);
}

.oauth-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--card, white);
  color: var(--muted, #888);
  font-size: 0.85rem;
  font-weight: 500;
}

.settings-summary{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:0.6rem;
}

/* Enhanced Environment & Models styling */
.settings-panel--env{
  grid-column:1/2;
  background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(6,182,212,0.05));
  border:1px solid rgba(124,58,237,0.2);
  position:relative;
  overflow:hidden;
}
.settings-panel--env::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg,transparent,rgba(124,58,237,0.03),transparent,rgba(6,182,212,0.03),transparent);
  animation:envShimmer 8s linear infinite;
  pointer-events:none;
}
@keyframes envShimmer{
  0%{transform:translateX(-50%) translateY(-50%) rotate(0deg);}
  100%{transform:translateX(-50%) translateY(-50%) rotate(360deg);}
}
.settings-panel--env h2{
  background:linear-gradient(90deg,#7C3AED,#06B6D4);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1.1rem;
  margin-bottom:0.6rem;
}
.settings-dl{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  font-size:0.85rem;
}
.model-item{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 0.75rem;
  border-radius:0.5rem;
  background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(6,182,212,0.08));
  border:1px solid rgba(124,58,237,0.25);
  transition:all 0.3s ease;
}
.model-item:hover{
  background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(6,182,212,0.15));
  border-color:rgba(124,58,237,0.4);
  transform:translateX(4px);
  box-shadow:0 4px 15px rgba(124,58,237,0.2);
}
.model-item .model-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  background:linear-gradient(135deg,#7C3AED,#06B6D4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(124,58,237,0.3);
}
.model-item .model-details{
  flex:1;
}
.model-item .model-header{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.25rem;
}
.model-item .model-label{
  font-size:0.8rem;
  color:var(--muted);
  font-weight:500;
}
.model-item .model-value{
  font-weight:700;
  color:var(--text);
  font-size:0.9rem;
  background:linear-gradient(90deg,#7C3AED,#06B6D4);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.model-item .model-desc{
  font-size:0.72rem;
  color:var(--muted);
  margin-top:0.25rem;
  line-height:1.4;
  opacity:0.85;
}
.model-item .model-badge{
  padding:0.2rem 0.5rem;
  border-radius:999px;
  font-size:0.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(34,211,238,0.2));
  color:#10b981;
  border:1px solid rgba(16,185,129,0.3);
}
/* Enhanced Features styling */
.settings-panel--features{
  grid-column:2/3;
  background:linear-gradient(135deg,rgba(16,185,129,0.05),rgba(124,58,237,0.05));
  border:1px solid rgba(16,185,129,0.2);
  position:relative;
  overflow:hidden;
}
.settings-panel--features::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  animation:featureShimmer 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes featureShimmer{
  0%{left:-100%;}
  50%,100%{left:100%;}
}
.settings-panel--features h2{
  background:linear-gradient(90deg,#10b981,#7C3AED);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1.1rem;
  margin-bottom:0.6rem;
}
.settings-features{
  list-style:none;
  padding:0;
  margin:0;
  font-size:0.85rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.settings-features li{
  padding:0.6rem 0.75rem;
  border-radius:0.5rem;
  background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(6,182,212,0.1));
  border:1px solid rgba(124,58,237,0.2);
  display:flex;
  align-items:center;
  gap:0.5rem;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}
.settings-features li::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transition:left 0.5s ease;
}
.settings-features li:hover::after{
  left:100%;
}
.settings-features li:hover{
  background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(6,182,212,0.18));
  border-color:rgba(124,58,237,0.4);
  transform:translateX(6px) scale(1.02);
  box-shadow:0 4px 20px rgba(124,58,237,0.25);
}
.settings-features li .feature-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(135deg,#7C3AED,#06B6D4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(124,58,237,0.3);
  animation:iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse{
  0%,100%{box-shadow:0 2px 8px rgba(124,58,237,0.3);}
  50%{box-shadow:0 2px 15px rgba(124,58,237,0.5);}
}
.settings-features li .feature-name{
  font-weight:600;
  color:var(--text);
  flex:1;
}
.settings-features li .feature-desc{
  font-size:0.7rem;
  color:var(--muted);
  margin-top:0.1rem;
}
.settings-features li .feature-status{
  padding:0.25rem 0.6rem;
  border-radius:999px;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.settings-features li .feature-status.on{
  background:linear-gradient(135deg,rgba(16,185,129,0.25),rgba(34,211,238,0.25));
  color:#10b981;
  border:1px solid rgba(16,185,129,0.4);
  box-shadow:0 0 10px rgba(16,185,129,0.2);
}
.settings-features li .feature-status.off{
  background:rgba(100,116,139,0.2);
  color:#64748b;
  border:1px solid rgba(100,116,139,0.3);
}

/* Hide raw settings - not needed for polished UI */
.settings-panel--raw{
  display:none;
}
/* Hide log panel by default */
.settings-panel--log{
  display:none;
}
.settings-code-block{
  border-radius:0.6rem;
  border:1px solid var(--border);
  padding:0.5rem 0.6rem;
  background:rgba(15,23,42,0.96);
  font-size:0.78rem;
  max-height:200px;
  overflow:auto;
}
.settings-log{
  font-size:0.76rem;
  border-radius:0.6rem;
  border:1px dashed var(--border);
  padding:0.5rem 0.6rem;
  background:rgba(15,23,42,0.96);
  max-height:120px;
  overflow:auto;
}
@media (max-width: 960px){
  .settings-main{
    grid-template-columns:minmax(0,1fr);
  }
  .settings-panel--env,
  .settings-panel--features,
  .settings-panel--raw,
  .settings-panel--log,
  .settings-panel--account{
    grid-column:1/2;
  }
}

/* Skeleton loading styles */
.skeleton-item{
  opacity:0.7;
}
.skeleton-text{
  height:0.85rem;
  background:linear-gradient(90deg,rgba(124,58,237,0.15),rgba(6,182,212,0.2),rgba(124,58,237,0.15));
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s ease-in-out infinite;
  border-radius:4px;
  margin:0.2rem 0;
}
.skeleton-pulse{
  animation:skeletonPulse 1s ease-in-out infinite alternate;
}
@keyframes skeletonShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@keyframes skeletonPulse{
  0%{opacity:0.5;}
  100%{opacity:1;}
}

/* Error message styles */
.settings-error{
  padding:1rem;
  border-radius:0.5rem;
  background:rgba(239,68,68,0.1);
  border:1px solid rgba(239,68,68,0.3);
  color:#f87171;
  font-size:0.85rem;
  line-height:1.5;
  margin:0.5rem 0;
}