.ai-settings-view { max-width: 1400px; margin: auto; padding: 36px clamp(24px, 4vw, 60px); }
.ai-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ai-page-heading h1 { font: 32px/1.4 var(--serif); margin: 0 0 8px; }.ai-page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.ai-preview-notice { display: flex; align-items: center; gap: 9px; padding: 12px 15px; margin: 22px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-wash); color: var(--muted); font-size: 12px; }.ai-preview-notice .icon { width: 16px; color: var(--accent); }
.ai-section-tabs { display: flex; gap: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }.ai-section-tab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; text-align: left; padding: 0 4px 14px; }.ai-section-tab strong { display: block; font-size: 15px; font-weight: 500; }.ai-section-tab span { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; }.ai-section-tab.active { color: var(--accent-strong); border-color: var(--accent); }
.ai-connections-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; gap: 24px; }.ai-connection-list { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.ai-list-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }.ai-list-heading strong { font-weight: 500; font-size: 13px; }.ai-list-heading > span { font-size: 11px; color: var(--faint); }
.ai-connection-card { display: flex; align-items: center; gap: 10px; padding: 13px 10px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: transparent; margin-bottom: 10px; text-align: left; }.ai-connection-card.selected { border-color: var(--accent); background: var(--accent-wash); }.ai-connection-card > .icon { color: var(--accent); width: 18px; }.ai-connection-card > span { min-width: 0; }.ai-connection-card strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }.ai-connection-card small { display: block; color: var(--faint); font-size: 10px; margin-top: 3px; }.ai-connection-card i { flex-shrink: 0; margin-left: auto; font: 9px var(--sans); color: var(--faint); }
.ai-small-note { font-size: 11px; color: var(--faint); line-height: 1.8; margin: 15px 0 0; }
.ai-model-brand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 6px; box-sizing: border-box; border: 1px solid #0000000d; border-radius: 11px; background: #fff; overflow: hidden; }.ai-model-brand > img { display: block; width: 100%; height: 100%; object-fit: contain; }.ai-model-brand.generic { background: var(--accent-wash); color: var(--accent); border-color: var(--line); font: 600 14px/1 var(--sans); letter-spacing: .04em; }.ai-connection-copy { flex: 1; min-width: 0; }.ai-connection-copy > small { overflow-wrap: anywhere; }
.ai-new-connection { width: 100%; justify-content: center; gap: 8px; }.ai-new-connection.selected { border-color: var(--accent); background: var(--accent-wash); }.ai-connection-list #studio-new-connection-help { margin: 10px 0 18px; }.ai-connection-list .ai-capacity-note { color: var(--text); }.ai-supervisor-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font-size: 12px; color: var(--muted); }.ai-supervisor-link > .button { flex-shrink: 0; }
.ai-editor-card { padding: 27px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; min-width: 0; }.ai-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }.ai-card-heading h2 { font: 23px/1.4 var(--serif); margin: 0 0 6px; }.ai-card-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.ai-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }.ai-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); min-width: 0; }.ai-fields input, .ai-fields select { font-size: 13px; height: 44px; }.ai-fields small { font-size: 10px; color: var(--faint); }.ai-field-wide { grid-column: 1 / -1; }.ai-optional { display: inline; font-size: 10px; color: var(--faint); }.ai-fetch-action { align-self: end; }.ai-fetch-action .button { min-height: 44px; }
.ai-advanced { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }.ai-advanced summary { cursor: pointer; font-size: 13px; color: var(--text); }.ai-advanced summary > span { color: var(--faint); font-size: 11px; margin-left: 10px; }.ai-advanced > .ai-fields, .ai-advanced > .ai-role-grid { margin-top: 20px; }
.ai-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }.ai-editor-footer > span { font-size: 11px; color: var(--faint); }.ai-editor-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.ai-role-card { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.ai-role-icon { color: var(--accent); margin-bottom: 5px; }.ai-role-card > strong { font-size: 16px; font-weight: 500; }.ai-role-card small { color: var(--muted); font-size: 11px; min-height: 34px; }.ai-role-card select { font-size: 12px; }.ai-role-state { color: var(--faint); font-size: 10px; }
.ai-diagnostic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.ai-diagnostic-grid article { padding: 23px; border: 1px solid var(--line); border-radius: 9px; }.ai-diagnostic-grid .icon { color: var(--accent); }.ai-diagnostic-grid h3 { font-size: 17px; margin: 12px 0 8px; }.ai-diagnostic-grid p { font-size: 12px; color: var(--muted); }.ai-usage-empty { display: flex; align-items: center; gap: 18px; padding: 27px 0 0; margin-top: 25px; border-top: 1px solid var(--line); }.ai-usage-empty > .icon { color: var(--faint); }.ai-usage-empty strong { font-size: 13px; font-weight: 500; }.ai-usage-empty p { font-size: 11px; color: var(--muted); margin: 6px 0 0; }.ai-usage-empty .muted-tag { margin-left: auto; }
.account-entry { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; font-size: 12px; white-space: nowrap; }.account-entry .icon { width: 17px; color: var(--accent); }
.rail-button[data-value="ai"] > span { white-space: nowrap; font-size: 10px; letter-spacing: 0; }
.account-dialog { width: min(780px, calc(100vw - 32px)); }.account-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; }.account-identity { padding: 25px 22px; border: 1px solid var(--line); background: var(--accent-wash); border-radius: 11px; text-align: center; }.account-avatar { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }.account-avatar .icon { width: 30px; height: 30px; }.account-identity h3 { font: 22px/1.5 var(--serif); }.account-identity > p { color: var(--muted); font-size: 12px; }.account-identity-note { margin-top: 25px; font-size: 11px; color: var(--faint); line-height: 1.9; }.account-login h3 { font-size: 21px; margin: 0 0 7px; }.account-login label { display: block; font-size: 12px; color: var(--muted); margin-top: 18px; }.account-login input { margin-top: 8px; font-size: 12px; }.account-login-help { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0; }.account-login-help button { border: 0; background: transparent; padding: 0; font-size: 11px; color: var(--muted); }.account-boundary { display: flex; align-items: start; gap: 7px; font-size: 10px; color: var(--faint); margin: 15px 0 0; }.account-boundary .icon { width: 13px; }
@media (max-width: 1100px) { .library-topbar .preview-badge { display: none; }.ai-connections-layout { grid-template-columns: 215px minmax(0, 1fr); gap: 16px; }.ai-editor-card { padding: 20px; }.ai-editor-footer { flex-wrap: wrap; } }
.ai-media-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .ai-connections-layout { grid-template-columns: 1fr; }.ai-connection-list { display: flex; flex-wrap: wrap; gap: 10px; }.ai-list-heading, .ai-connection-list .ai-small-note { width: 100%; }.ai-connection-card { width: auto; flex: 1 1 175px; margin: 0; }.ai-connection-list .full-width { width: auto; }.ai-role-grid { grid-template-columns: 1fr; }.ai-role-card small { min-height: 0; }.ai-supervisor-link { flex-wrap: wrap; }.ai-diagnostic-grid { grid-template-columns: 1fr; }.account-layout { grid-template-columns: 1fr; }.account-identity { display: none; } }
@media (max-width: 600px) { .ai-settings-view { padding: 25px 17px; }.ai-page-heading { align-items: start; flex-direction: column; gap: 12px; }.ai-page-heading h1 { font-size: 28px; }.ai-section-tabs { gap: 16px; }.ai-section-tab strong { font-size: 13px; }.ai-section-tab span { display: none; }.ai-fields { grid-template-columns: 1fr; }.ai-editor-card { padding: 17px; }.ai-card-heading { flex-wrap: wrap; }.ai-usage-empty { flex-wrap: wrap; }.ai-usage-empty .muted-tag { margin-left: 0; }.account-entry { width: 34px; padding: 0; justify-content: center; }.account-entry > span { display: none; } }