/* KoozhenStudio full-page settings workspace */
#settingsModal.modal-overlay {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: #1B1A34;
  backdrop-filter: none;
}

#settingsModal .modal-settings {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  grid-template-rows: 72px minmax(0, 1fr) !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #1B1A34;
  box-shadow: none;
}

#settingsModal .settings-header {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0 28px;
  background: rgba(12, 15, 30, .54);
  border-bottom: 1px solid rgba(196, 219, 218, .12);
}

#settingsModal .settings-header h3 {
  font-family: Montserrat, "Noto Sans SC", sans-serif;
  font-size: 18px;
  letter-spacing: -.01em;
}

#settingsModal .settings-header h3 .sf-ico { color: #47B4B0; }

#settingsModal .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border-color: rgba(196, 219, 218, .12);
}

#settingsModal .settings-tabs {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  padding: 24px 16px 18px;
  overflow-y: auto;
  background: rgba(10, 13, 27, .32);
  border-right: 1px solid rgba(196, 219, 218, .12);
  border-bottom: 0;
}

#settingsModal .settings-nav-intro {
  padding: 0 8px 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(196, 219, 218, .1);
}

#settingsModal .settings-nav-kicker {
  display: block;
  margin-bottom: 7px;
  color: #47B4B0;
  font: 700 10px/1.2 Montserrat, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#settingsModal .settings-nav-intro strong {
  display: block;
  color: #f4f7f7;
  font-size: 15px;
  line-height: 1.35;
}

#settingsModal .settings-nav-intro p {
  margin: 7px 0 0;
  color: rgba(196, 219, 218, .56);
  font-size: 11px;
  line-height: 1.5;
}

#settingsModal .settings-tab {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 64px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(196, 219, 218, .68);
  text-align: left;
}

#settingsModal .settings-tab:hover {
  color: #f4f7f7;
  background: rgba(71, 180, 176, .08);
  border-color: rgba(71, 180, 176, .18);
}

#settingsModal .settings-tab.active {
  color: #f4f7f7;
  background: linear-gradient(135deg, rgba(71, 180, 176, .18), rgba(124, 108, 243, .12));
  border-color: rgba(71, 180, 176, .4);
  box-shadow: inset 3px 0 0 #47B4B0;
}

#settingsModal .settings-tab.active::after { display: none; }

#settingsModal .settings-tab-icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(124, 108, 243, .15);
  color: #C4DBDA;
  font: 700 11px/1 Montserrat, sans-serif;
}

#settingsModal .settings-tab.active .settings-tab-icon {
  background: #47B4B0;
  color: #1B1A34;
}

#settingsModal .settings-tab-copy { min-width: 0; display: block; }
#settingsModal .settings-tab-copy strong { display: block; font-size: 13px; line-height: 1.3; }
#settingsModal .settings-tab-copy small {
  display: block;
  margin-top: 3px;
  color: rgba(196, 219, 218, .48);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
}

#settingsModal .settings-nav-help {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(124, 108, 243, .22);
  border-radius: 12px;
  background: rgba(124, 108, 243, .08);
}

#settingsModal .settings-nav-help strong,
#settingsModal .settings-nav-help span { display: block; }
#settingsModal .settings-nav-help strong { color: #C4DBDA; font-size: 11px; }
#settingsModal .settings-nav-help span { margin-top: 4px; color: rgba(196, 219, 218, .5); font-size: 10.5px; line-height: 1.45; }

#settingsModal .settings-body {
  grid-column: 2;
  grid-row: 2;
  padding: 28px clamp(24px, 4vw, 64px) 36px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 85% 4%, rgba(124, 108, 243, .12), transparent 32%),
    #1B1A34;
}

#settingsModal .settings-pane {
  display: none !important;
  width: min(100%, 1080px);
  margin: 0 auto;
}
#settingsModal .settings-pane.active {
  display: block !important;
}
#settingsModal .settings-tabs,
#settingsModal .settings-tab {
  pointer-events: auto;
  position: relative;
  z-index: 4;
}

#settingsModal .settings-pane.active::before {
  display: block;
  margin: 0 0 18px;
  color: #f4f7f7;
  font-family: Montserrat, "Noto Sans SC", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

#settingsModal .settings-pane[data-pane="studio"].active::before { content: "Studio / 我"; }
#settingsModal .settings-pane[data-pane="models"].active::before { content: "AI & models"; }
#settingsModal .settings-pane[data-pane="persona"].active::before { content: "Collaboration preferences"; }
#settingsModal .settings-pane[data-pane="wechat"].active::before { content: "Publishing"; }
#settingsModal .settings-pane[data-pane="storage"].active::before { content: "Project storage"; }

#settingsModal .studio-chip-row .chip {
  cursor: pointer;
}
#settingsModal .studio-chip-row .chip.on,
#settingsModal .studio-chip-row .chip.on-ok {
  color: #f4f7f7;
  background: linear-gradient(135deg, rgba(71, 180, 176, .28), rgba(124, 108, 243, .2));
  border-color: rgba(71, 180, 176, .55);
}

#settingsModal .storage-location-card { padding: 22px; }
#settingsModal .storage-location-field { margin-top: 18px; }
#settingsModal .storage-location-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
#settingsModal #projectStoragePath { min-width: 0; font-family: Montserrat, "Noto Sans SC", sans-serif; }
#settingsModal .project-storage-status { min-height: 22px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; color: #C4DBDA; background: rgba(71,180,176,.08); border: 1px solid rgba(71,180,176,.18); font-size: 12px; line-height: 1.45; }
#settingsModal .project-storage-status[data-state="warning"] { color: #ffe1a3; border-color: rgba(245,179,66,.32); background: rgba(245,179,66,.10); }
#settingsModal .project-storage-status[data-state="error"] { color: #ffc5c5; border-color: rgba(239,92,92,.34); background: rgba(239,92,92,.10); }

#settingsModal .model-card {
  border-color: rgba(196, 219, 218, .1);
  background: rgba(12, 15, 30, .38);
}

#settingsModal .btn-save {
  min-width: 150px;
  background: linear-gradient(135deg, #47B4B0, #7C6CF3);
  color: #fff;
}

@media (max-width: 760px) {
  #settingsModal .modal-settings {
    grid-template-columns: 1fr;
    grid-template-rows: 64px auto minmax(0, 1fr);
  }
  #settingsModal .settings-header { grid-column: 1; grid-row: 1; padding: 0 16px; }
  #settingsModal .settings-tabs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    padding: 10px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(196, 219, 218, .12);
  }
  #settingsModal .settings-nav-intro,
  #settingsModal .settings-nav-help,
  #settingsModal .settings-tab-copy small { display: none; }
  #settingsModal .settings-tab { width: auto; min-width: max-content; min-height: 48px; }
  #settingsModal .settings-body { grid-column: 1; grid-row: 3; padding: 20px 14px 28px; }
  #settingsModal .storage-location-row { grid-template-columns: 1fr; }
}