/* Account settings: personal identity first, workspace administration on demand. */

.account-main { overflow-y: auto; }
.account-settings-content { width: min(1120px, calc(100% - 48px)); }
.account-settings { position: relative; min-width: 0; display: grid; gap: 17px; }
.account-icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.account-notice {
  position: sticky;
  z-index: 30;
  top: 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #bad1c5;
  border-radius: 10px;
  background: #f3faf6;
  color: #2e6254;
  font-size: 10px;
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(28,39,32,.1);
}
.account-notice.error { border-color: #e1b8b4; background: #fff4f2; color: #95423d; }

.account-identity-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--st-line, var(--border));
  border-radius: 15px;
  background: linear-gradient(125deg, #fbfdf9 0%, #f2f7f3 58%, #e8f1ed 100%);
  box-shadow: 0 1px 2px rgba(28,39,32,.03);
}
.account-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: #294f48; color: #fff; font-size: 17px; font-weight: 780; letter-spacing: -.03em; box-shadow: 0 9px 20px rgba(36,77,70,.16); }
.account-identity-copy { min-width: 0; display: grid; gap: 2px; }
.account-identity-copy > span { color: var(--st-faint, var(--muted)); font-size: 8px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.account-identity-copy h3 { margin: 0; overflow: hidden; color: var(--st-ink, var(--text)); font-size: 19px; font-weight: 750; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.account-identity-copy p { min-width: 0; display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--st-muted, var(--muted)); font-size: 9px; }
.account-identity-copy p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity-copy p i { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: #a8b0a9; }
.account-role-badge { padding: 5px 9px; border: 1px solid #c4d5cd; border-radius: 999px; background: rgba(255,255,255,.68); color: #315f57; font-size: 8px; font-weight: 720; }

.account-section-nav { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--st-line, var(--border)); border-radius: 11px; background: #e9ede8; width: fit-content; max-width: 100%; overflow-x: auto; }
.account-section-nav-item { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #758077; font-size: 9.5px; font-weight: 670; white-space: nowrap; cursor: pointer; }
.account-section-nav-item .account-icon { width: 14px; height: 14px; }
.account-section-nav-item:hover { color: var(--st-ink, var(--text)); }
.account-section-nav-item.active { background: #fff; color: var(--st-accent, #315f57); box-shadow: 0 1px 4px rgba(27,34,29,.08); }

.account-section-panels { min-width: 0; }
.account-section-panel { min-width: 0; display: grid; gap: 16px; }
.account-section-panel[hidden] { display: none; }
.account-personal-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }

.account-card { min-width: 0; overflow: hidden; border: 1px solid var(--st-line, var(--border)); border-radius: 14px; background: var(--st-paper, #fff); }
.account-card > header { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 11px; padding: 17px 18px; border-bottom: 1px solid var(--st-line-soft, var(--border)); }
.account-card > header > .account-icon { width: 36px; height: 36px; padding: 9px; border-radius: 10px; background: var(--st-accent-soft, #dceae5); color: var(--st-accent, #315f57); }
.account-card > header > div { min-width: 0; display: grid; gap: 2px; }
.account-card > header span { color: var(--st-faint, var(--muted)); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.account-card > header h3 { margin: 0; color: var(--st-ink, var(--text)); font-size: 15px; font-weight: 730; letter-spacing: -.025em; }
.account-card > header p { max-width: 680px; margin: 2px 0 0; color: var(--st-muted, var(--muted)); font-size: 9px; line-height: 1.45; }
.account-card > header > button { align-self: center; justify-self: end; grid-column: 3; }
.account-card-wide { width: 100%; }

.account-form { display: grid; gap: 14px; padding: 17px 18px; }
.account-form label, .account-reset-form label { display: grid; gap: 6px; color: #4d574f; font-size: 9px; font-weight: 680; }
.account-form input, .account-reset-form input,
.create-user-form input, .create-user-form select, .user-row select, .provider-picker input,
.provider-connect-form input, .integration-controls input[type="text"] { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d4dad3; border-radius: 9px; outline: 0; background: #fff; color: var(--st-ink, var(--text)); font: inherit; font-size: 10px; }
.account-form input:focus, .create-user-form input:focus, .create-user-form select:focus, .provider-picker input:focus { border-color: #88a59a; box-shadow: 0 0 0 3px rgba(49,95,87,.08); }
.account-form input:disabled { background: #f2f4f1; color: #899189; }
.account-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-form footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 1px; }
.account-form footer > span { display: inline-flex; align-items: center; gap: 5px; color: var(--st-muted, var(--muted)); font-size: 8.5px; line-height: 1.4; }
.account-form footer > span .account-icon { width: 13px; height: 13px; color: var(--st-accent, #315f57); }
.account-profile-form footer { justify-content: flex-start; }

.create-user-form { display: grid; grid-template-columns: 1fr 1fr 1fr 120px auto; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--st-line-soft, var(--border)); background: #fafbf9; }
.users-list, .integrations-list, .capabilities-list { display: grid; }
.users-list { padding: 6px 18px 14px; }
.user-row, .integration-row, .capability-row { min-width: 0; display: grid; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--st-line-soft, var(--border)); }
.user-row:last-child, .integration-row:last-child, .capability-row:last-child { border-bottom: 0; }
.user-row { grid-template-columns: 32px minmax(0, 1fr) 120px auto auto; }
.user-row .avatar.small { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #e3ebe6; color: #315f57; font-size: 9px; font-weight: 750; }
.user-row-main, .integration-main, .capability-main { min-width: 0; display: grid; gap: 2px; }
.user-row-main strong, .integration-main strong, .capability-main strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-row-main span, .integration-main span, .capability-main span { overflow: hidden; color: var(--st-muted, var(--muted)); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }

.account-advanced-card > summary, .provider-picker > summary { min-height: 56px; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap: 10px; padding: 10px 16px; list-style: none; cursor: pointer; }
.account-advanced-card > summary::-webkit-details-marker, .provider-picker > summary::-webkit-details-marker { display: none; }
.account-advanced-card > summary > .account-icon:first-child { width: 28px; height: 28px; padding: 7px; border-radius: 8px; background: #ecefe9; color: #69736b; }
.account-advanced-card > summary > span { min-width: 0; display: grid; gap: 2px; }
.account-advanced-card > summary strong { font-size: 10px; }
.account-advanced-card > summary small { color: var(--st-muted, var(--muted)); font-size: 8.5px; }
.account-advanced-card > summary > .account-icon:last-child, .provider-picker > summary > .account-icon:last-child { width: 14px; height: 14px; color: #8b948c; transition: transform .16s ease; }
.account-advanced-card[open] > summary > .account-icon:last-child, .provider-picker[open] > summary > .account-icon:last-child { transform: rotate(90deg); }
.stack-form { display: grid; gap: 10px; padding: 0 16px 16px; }
.stack-form label { color: var(--st-muted, var(--muted)); font-size: 9px; font-weight: 680; }
.stack-form textarea { width: 100%; padding: 10px; border: 1px solid #d4dad3; border-radius: 9px; background: #f8faf7; color: var(--st-ink, var(--text)); font-family: "JetBrains Mono", monospace; font-size: 9px; line-height: 1.5; resize: vertical; }
.stack-form button { justify-self: end; }

.integrations-list, .capabilities-list { padding: 6px 18px 14px; }
.provider-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--st-line, var(--border)); border-radius: 11px; background: #fff; color: #3b4a5a; flex: none; }
.provider-icon svg { width: 22px; height: 22px; fill: currentColor; }
.provider-icon.github { border-color: #101820; background: #101820; color: #fff; }
.provider-icon.google svg { fill: none; }
.google-blue { fill: #4285f4; } .google-red { fill: #ea4335; } .google-yellow { fill: #fbbc04; } .google-green { fill: #34a853; }

.provider-picker { margin: 0 18px 16px; border: 1px dashed #cad2ca; border-radius: 11px; background: #f8faf7; }
.provider-picker > summary { min-height: 44px; grid-template-columns: 18px minmax(0,1fr) 14px; color: #4d665f; font-size: 9.5px; font-weight: 680; }
.provider-picker-toolbar { padding: 0 12px 10px; }
.provider-picker-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: 8px; padding: 0 12px 12px; }
.provider-option { min-width: 0; display: grid; grid-template-rows: auto minmax(48px,1fr) auto; justify-items: start; gap: 9px; padding: 11px; border: 1px solid var(--st-line, var(--border)); border-radius: 10px; background: #fff; }
.provider-option.added { background: #f3f7f4; }
.provider-option-main { min-width: 0; display: grid; gap: 3px; }
.provider-option-main strong { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.provider-option-main span { display: -webkit-box; overflow: hidden; color: var(--st-muted, var(--muted)); font-size: 8.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.integration-row { grid-template-columns: 40px minmax(0,1fr) auto auto auto; align-items: start; }
.inline-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--st-muted, var(--muted)); font-size: 9px; white-space: nowrap; }
.integration-details { justify-self: end; }
.integration-details summary { min-height: 28px; display: inline-flex; align-items: center; color: var(--st-muted, var(--muted)); font-size: 9px; font-weight: 680; cursor: pointer; }
.integration-details[open] { grid-column: 2 / -1; justify-self: stretch; }
.integration-controls { display: grid; grid-template-columns: minmax(160px,1fr) auto auto; align-items: center; gap: 7px; margin-top: 7px; }
.capability-row { grid-template-columns: minmax(0,1fr) auto; }
.capability-row.attention { margin: 2px 0; padding-inline: 10px; border: 1px solid #e5d5a8; border-radius: 9px; background: #fffbef; }
.capability-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.capability-tools code { max-width: 220px; padding: 2px 6px; border-radius: 5px; background: #eef1ed; color: #49524b; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capability-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

.account-password-modal, .provider-connect-modal { width: min(520px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--st-ink, var(--text)); }
.account-password-modal::backdrop, .provider-connect-modal::backdrop { background: rgba(16,24,32,.42); backdrop-filter: blur(3px); }
.provider-modal-shell { position: relative; display: grid; gap: 15px; padding: 20px; border: 1px solid var(--st-line, var(--border)); border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(16,24,32,.24); }
.provider-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; }
.provider-modal-header { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; padding-right: 38px; }
.provider-modal-header h4, .account-reset-form h3 { margin: 0; font-size: 16px; }
.provider-modal-header p, .account-reset-form p { margin: 4px 0 0; color: var(--st-muted, var(--muted)); font-size: 9px; line-height: 1.45; }
.provider-connect-form { display: grid; gap: 14px; }
.provider-connect-fields { display: grid; gap: 10px; }
.provider-connect-form label { display: grid; gap: 5px; color: #4d574f; font-size: 9px; font-weight: 680; }
.provider-modal-error { padding: 9px 11px; border: 1px solid #e1b8b4; border-radius: 9px; background: #fff4f2; color: #95423d; font-size: 9px; }
.provider-modal-actions { display: flex; justify-content: flex-end; gap: 7px; }

@media (max-width: 920px) {
  .account-personal-grid { grid-template-columns: 1fr; }
  .create-user-form { grid-template-columns: 1fr 1fr; }
  .create-user-form button { justify-self: start; }
  .user-row { grid-template-columns: 32px minmax(0,1fr) auto; }
  .user-row > button { grid-column: 2 / -1; justify-self: start; }
  .integration-row { grid-template-columns: 40px minmax(0,1fr); }
  .integration-row > :not(.provider-icon):not(.integration-main) { grid-column: 2; justify-self: start; }
  .integration-details[open] { grid-column: 2; }
}

@media (max-width: 650px) {
  .account-settings-content { width: min(100% - 28px, 1120px); }
  .account-identity-card { grid-template-columns: 46px minmax(0,1fr); padding: 14px; }
  .account-avatar { width: 46px; height: 46px; border-radius: 14px; }
  .account-role-badge { grid-column: 2; justify-self: start; }
  .account-section-nav { width: 100%; }
  .account-form-split, .create-user-form, .user-row, .capability-row { grid-template-columns: 1fr; }
  .account-form footer { align-items: stretch; flex-direction: column; }
  .user-row > button, .user-row > select { grid-column: auto; justify-self: stretch; }
  .integration-controls { grid-template-columns: 1fr; }
  .capability-status { justify-content: flex-start; }
  .provider-modal-actions { flex-direction: column-reverse; }
}