:root {
  --platform-primary: #ff7a2f;
  --platform-primary-hover: color-mix(in srgb, var(--platform-primary) 82%, white);
  --platform-primary-strong: color-mix(in srgb, var(--platform-primary) 78%, black);
  --platform-primary-soft: color-mix(in srgb, var(--platform-primary) 12%, transparent);
  --platform-primary-muted: color-mix(in srgb, var(--platform-primary) 20%, transparent);
  --platform-primary-border: color-mix(in srgb, var(--platform-primary) 42%, transparent);
  --platform-focus-ring: color-mix(in srgb, var(--platform-primary) 22%, transparent);
  --platform-on-primary: #fff;
  --platform-background: #0d0e10;
  --platform-surface: #191b1f;
  --platform-text: #f3f4f5;
}
#account-shell { position: fixed; z-index: 10000; inset: 0; overflow: auto; background: var(--platform-background); color: var(--platform-text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#account-shell * { box-sizing: border-box; }
.am-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1fr) minmax(520px, 1fr); background: #0d0f12; color: #f7f9fa; }
.am-auth-panel { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 72px 32px 86px; background: #0d0f12; }
.am-auth-content { width: min(390px, 100%); }
.am-auth-card { width: 100%; padding: 28px 25px 23px; border: 1px solid #22272b; border-radius: 17px; background: #141719; box-shadow: 0 28px 80px #0008; }
.am-brand { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 20px; letter-spacing: -.03em; }
.am-brand-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; }
.am-brand-logo img { width: 25px; height: 25px; object-fit: contain; }
.am-auth-card header { padding-bottom: 17px; border-bottom: 1px solid #303437; text-align: center; }
.am-auth-card header p { max-width: 300px; margin: 7px auto 0; color: #9ba1a6; font-size: 13px; line-height: 1.5; }
.am-auth h1, .am-dashboard h1 { margin: 0; font-size: 27px; }
.am-muted { color: #969da9; }
.am-field { display: block; margin: 15px 0; color: #e1e4e6; font-size: 12px; font-weight: 680; }
.am-field input, .am-field textarea, .am-field select { display: block; width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid #30363a; border-radius: 7px; outline: none; background: #111416; color: #fff; font: 14px system-ui; transition: border-color .15s, box-shadow .15s; }
.am-field input::placeholder { color: #747b82; }
.am-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.am-field input:focus, .am-field textarea:focus, .am-field select:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-primary); }
.am-button { padding: 10px 16px; border: 1px solid #383d47; border-radius: 9px; cursor: pointer; background: #22252c; color: #fff; font-weight: 750; }
.am-button.primary { border-color: var(--platform-primary); background: var(--platform-primary); color: #071310; }
.am-button.primary:hover { border-color: var(--platform-primary); background: var(--platform-primary); }
.am-button.danger { border-color: #72313a; color: #ff9ba8; background: #2a171b; }
.am-button.full { width: 100%; margin-top: 8px; min-height: 40px; }
.am-switch { margin-top: 18px; text-align: center; color: #a5aab3; font-size: 13px; }
.am-link { padding: 0; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; background: none; color: var(--platform-primary); font-weight: 700; }
.am-message { min-height: 20px; margin-top: 12px; color: #ff929f; font-size: 13px; }
.am-auth-footer { position: absolute; right: 32px; bottom: 26px; left: 32px; display: flex; justify-content: space-between; color: #697077; font-size: 11px; }
.am-auth-showcase { position: relative; display: grid; place-items: center; min-height: 100vh; overflow: hidden; background-color: #111a1b; background-image: radial-gradient(circle, #62717055 1.2px, transparent 1.3px); background-size: 26px 26px; }
.am-auth-showcase::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 48% 24%, var(--platform-primary-soft), transparent 40%), linear-gradient(135deg, #111a1bcc, #14202788); }
.am-showcase-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--platform-primary-soft); filter: blur(40px); }
.am-quote-card { position: relative; z-index: 1; width: min(440px, calc(100% - 72px)); padding: 32px; border: 1px solid #253033; border-radius: 10px; background: #101416e8; box-shadow: 0 30px 80px #0005; }
.am-quote-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 27px; font-size: 18px; }
.am-quote-mark img { width: 27px; height: 27px; padding: 5px; border-radius: 7px; background: #fff; object-fit: contain; }
.am-quote-card blockquote { margin: 0 0 28px; color: #b7bec1; font-size: 16px; line-height: 1.55; }
.am-quote-card blockquote::first-letter { color: var(--platform-primary); }
.am-quote-card > div:last-child { display: grid; gap: 4px; font-size: 13px; }
.am-quote-card > div:last-child span { color: #899195; }
.am-showcase-caption { position: absolute; z-index: 1; bottom: 31px; display: flex; align-items: center; gap: 9px; color: #7c898b; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.am-showcase-caption span { width: 6px; height: 6px; border-radius: 50%; background: var(--platform-primary); box-shadow: 0 0 12px var(--platform-primary); }
.am-dashboard { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 70px; }
.am-topbar, .am-dashboard-head, .am-dialog-head, .am-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-topbar { margin-bottom: 48px; }
.am-user { display: flex; align-items: center; gap: 12px; color: #b6bbc4; font-size: 13px; }
.am-dashboard-head { align-items: flex-end; margin-bottom: 22px; }
.am-dashboard-head p { margin: 7px 0 0; }
.am-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 15px; }
.am-agent-card { padding: 19px; border: 1px solid #292d35; border-radius: 14px; background: #13151a; transition: transform .15s, border-color .15s; }
.am-agent-card:hover { transform: translateY(-2px); border-color: #5550bd; }
.am-agent-card h3 { margin: 0 0 8px; font-size: 17px; }
.am-agent-card p { min-height: 36px; margin: 0 0 15px; color: #9299a5; font-size: 12px; line-height: 1.45; }
.am-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.am-tag { padding: 5px 7px; border-radius: 6px; background: #222631; color: #aeb8d1; font: 10px ui-monospace, monospace; }
.am-empty { grid-column: 1/-1; padding: 55px; border: 1px dashed #343943; border-radius: 14px; text-align: center; color: #969da9; }
#agent-editor-backdrop { position: fixed; z-index: 10002; inset: 0; display: none; place-items: center; padding: 20px; background: #000b; backdrop-filter: blur(7px); }
#agent-editor-backdrop.open { display: grid; }
.am-dialog { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border: 1px solid #343943; border-radius: 17px; background: #15171c; color: #fff; font-family: system-ui; }
.am-dialog h2 { margin: 0; font-size: 20px; }
.am-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.am-service { padding: 13px; border: 1px solid #30343d; border-radius: 11px; }
.am-service h3 { margin: 0 0 5px; color: #9bb4ff; font-size: 13px; }
.am-actions { justify-content: flex-end; margin-top: 18px; }
#agent-workspace-nav { position: fixed; z-index: 9000; top: 9px; left: 210px; display: none; align-items: center; gap: 8px; }
#agent-workspace-nav.visible { display: flex; }
#agent-workspace-name { max-width: 180px; overflow: hidden; color: #aeb4c0; font: 12px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .am-auth { grid-template-columns: 1fr; } .am-auth-showcase { display: none; } }
@media (max-width: 760px) { .am-auth-panel { padding: 32px 18px 76px; } .am-auth-card { padding: 24px 20px 20px; } .am-auth-footer { right: 18px; left: 18px; } .am-service-grid { grid-template-columns: 1fr; } #agent-workspace-nav { left: 8px; top: 66px; } .am-dashboard-head { align-items: flex-start; flex-direction: column; } }

/* Premium Agent Studio dashboard */
.create-agent-dialog { position: relative; width: min(470px,calc(100vw - 32px)); padding: 30px; border: 1px solid #e1e3e7; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px #1217222b; }
.create-agent-close { position: absolute; top: 15px; right: 16px; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer; background: #f4f5f6; color: #69707a; font-size: 20px; }
.create-agent-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #eee8ff; color: #7252d2; }
.create-agent-dialog h2 { margin: 17px 0 6px; color: #17191d; font-size: 22px; letter-spacing: -.03em; }
.create-agent-dialog > p { margin: 0 0 23px; color: #8a8f98; font-size: 11px; line-height: 1.5; }
.create-agent-dialog label { display: block; margin-top: 14px; color: #51565e; font-size: 10px; font-weight: 650; }
.create-agent-dialog input, .create-agent-dialog textarea { box-sizing: border-box; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #dfe1e5; border-radius: 9px; outline: none; color: #24262a; font: 12px system-ui; }
.create-agent-dialog textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.create-agent-dialog input:focus, .create-agent-dialog textarea:focus { border-color: #9685e3; box-shadow: 0 0 0 3px #7962de12; }
.create-agent-dialog label small { display: block; margin-top: 5px; color: #9a9ea5; font-size: 8px; font-weight: 400; text-align: right; }
.create-agent-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.create-agent-actions > button:first-child { padding: 9px 14px; border: 1px solid #dfe1e5; border-radius: 8px; cursor: pointer; background: #fff; color: #4b5058; }

/* Dark create-agent dialog */
.create-agent-dialog { border-color: #30343a; background: #15171a; color: #f4f5f6; box-shadow: 0 28px 90px #000b; }
.create-agent-close { background: #202328; color: #b9bdc2; }
.create-agent-close:hover { background: #2a2e34; color: #fff; }
.create-agent-icon { border: 1px solid var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.create-agent-dialog h2 { color: #fff; }
.create-agent-dialog > p { color: #9da2a9; }
.create-agent-dialog label { color: #d2d5d9; }
.create-agent-dialog input,
.create-agent-dialog textarea { border-color: #353940; background: #0c0d0f; color: #f3f4f5; }
.create-agent-dialog input::placeholder,
.create-agent-dialog textarea::placeholder { color: #747a82; }
.create-agent-dialog input:focus,
.create-agent-dialog textarea:focus { border-color: var(--platform-primary-hover); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.create-agent-dialog label small { color: #7f858d; }
.create-agent-actions > button:first-child { border-color: #373b41; background: #1c1f23; color: #d4d7db; }
.create-agent-actions > button:first-child:hover { background: #262a2f; color: #fff; }
#account-shell { background: #f3f4f6; color: #111214; }
.studio-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: #fafafa; }
.studio-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 14px 18px; border-right: 1px solid #e4e5e7; background: #f5f5f4; }
.studio-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 25px; color: #121315; font-size: 17px; font-weight: 780; letter-spacing: -.02em; }
.studio-brand > img {
  display: block;
  width: 46px;
  height: 38px;
  max-width: 100%;
  object-fit: contain;
}
.studio-logo { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #17181b; color: #fff; box-shadow: inset 0 0 0 1px #ffffff14, 0 2px 5px #0002; }
.studio-nav { display: flex; flex-direction: column; gap: 5px; }
.studio-nav button, .studio-sidebar-bottom button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: #55595f; font: 500 13px system-ui; text-align: left; }
.studio-nav button:hover, .studio-sidebar-bottom button:hover { background: #ebeceb; color: #17181a; }
.studio-nav button.active { background: #fff; color: #121315; font-weight: 650; box-shadow: 0 1px 2px #0000000c, inset 0 0 0 1px #e6e7e8; }
.studio-nav small { margin: 15px 10px 5px; color: #8c9096; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.studio-workspace { display: flex; align-items: center; gap: 9px; margin: 8px 0 2px; padding: 10px 11px; border: 1px solid #dedfe1; border-radius: 10px; background: #f9f9f8; color: #24262a; font-size: 12px; font-weight: 600; }
.studio-workspace span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-sidebar-bottom { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.studio-plan { margin-top: 12px; padding: 14px 13px; border: 1px solid #dedfe1; border-radius: 12px; background: #fff; }
.studio-plan > div:first-child { display: flex; justify-content: space-between; color: #34373c; font-size: 11px; }
.studio-plan b { color: #111; }
.studio-plan span { color: #999da4; font-size: 9px; }
.studio-progress { height: 4px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: #ececef; }
.studio-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7357ee, #9a5df2); }
.studio-main { min-width: 0; padding: 28px 34px 55px; background: #fff; }
.studio-header { display: flex; align-items: flex-start; justify-content: space-between; }
.studio-header h1 { margin: 0; color: #111214; font-size: 28px; font-weight: 720; letter-spacing: -.035em; }
.studio-header p { margin: 5px 0 0; color: #858991; font-size: 12px; }
.studio-profile { display: flex; align-items: center; gap: 10px; }
.icon-button, .card-more { display: grid; place-items: center; border: 1px solid #e2e3e5; cursor: pointer; background: #fff; color: #565b62; }
.icon-button { width: 34px; height: 34px; border-radius: 9px; }
.studio-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(145deg, #d4b393, #7f5942); color: #fff; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #ddd; }
.studio-create-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.studio-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 9px; cursor: pointer; background: #151618; color: #fff; font: 650 12px system-ui; box-shadow: 0 3px 8px #0002; }
.studio-primary:hover { background: #292b2f; transform: translateY(-1px); }
.studio-toolbar { display: grid; grid-template-columns: minmax(220px, 360px) 1fr auto; align-items: center; gap: 25px; margin-top: 26px; padding: 16px 0 23px; border-top: 1px solid #f0f0f1; }
.studio-search { display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #dedfe2; border-radius: 9px; background: #fff; color: #686d74; box-shadow: 0 1px 2px #00000008; }
.studio-search:focus-within { border-color: #aaa0e8; box-shadow: 0 0 0 3px #8068e514; }
.studio-search input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; color: #18191b; font-size: 12px; }
.studio-tabs { display: flex; align-self: stretch; justify-content: center; gap: 8px; }
.studio-tabs button { position: relative; padding: 0 15px; border: 0; cursor: pointer; background: transparent; color: #777b82; font-size: 12px; }
.studio-tabs button.active { color: #151618; font-weight: 650; }
.studio-tabs button.active::after { position: absolute; right: 10px; bottom: -23px; left: 10px; height: 2px; border-radius: 2px; background: #191a1c; content: ""; }
.studio-sort { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #e0e1e3; border-radius: 9px; cursor: pointer; background: #fff; color: #45484d; font-size: 11px; }
.studio-agent-grid { display: grid; grid-template-columns: repeat(3, minmax(235px, 1fr)); gap: 18px; }
.studio-agent-card, .studio-new-card { min-height: 285px; border: 1px solid #e1e2e4; border-radius: 15px; background: #fff; }
.studio-agent-card { display: flex; flex-direction: column; padding: 20px; box-shadow: 0 1px 1px #00000005; transition: border-color .18s, box-shadow .18s, transform .18s; }
.studio-agent-card:hover { transform: translateY(-2px); border-color: #cccdd1; box-shadow: 0 12px 30px #18191b0b; }
.studio-card-top { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 13px; }
.studio-agent-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.studio-agent-icon.tone-0 { background: #eee5ff; color: #7146db; }
.studio-agent-icon.tone-1 { background: #dfedff; color: #2866c6; }
.studio-agent-icon.tone-2 { background: #fff0d4; color: #cc7909; }
.studio-agent-icon.tone-3 { background: #ffe0ec; color: #c92e6a; }
.studio-agent-icon.tone-4 { background: #daf2ee; color: #16857d; }
.studio-card-top h3 { overflow: hidden; margin: 0 0 3px; color: #151618; font-size: 17px; font-weight: 680; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.studio-card-top span { color: #8a8e95; font-size: 11px; }
.card-more { width: 28px; height: 28px; border-color: transparent; border-radius: 7px; }
.card-more:hover { border-color: #e4e5e7; background: #f7f7f7; }
.studio-status { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; margin: 13px 0 0 65px; padding: 4px 7px; border: 1px solid; border-radius: 5px; font-size: 9px; font-weight: 650; }
.studio-status i { width: 6px; height: 6px; border-radius: 50%; }
.studio-status.active { border-color: #c9e8d0; background: #eefaf1; color: #23833c; }
.studio-status.active i { background: #2baa4a; }
.studio-status.draft { border-color: #dddfe2; background: #f7f7f8; color: #7b7f86; }
.studio-status.draft i { background: #9599a0; }
.studio-agent-card > p { min-height: 48px; margin: 22px 0 15px; color: #3e4146; font-size: 12px; line-height: 1.55; }
.studio-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding: 13px 0; border-top: 1px solid #ececee; color: #8c9097; font-size: 9px; }
.studio-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.studio-card-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid #e0e1e3; border-radius: 8px; cursor: pointer; background: #fff; color: #25272b; font-size: 11px; font-weight: 550; }
.studio-card-actions button:hover { border-color: #bbbcc1; background: #f8f8f8; }
.studio-new-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; border: 1px dashed #cfc3fb; cursor: pointer; color: #7952df; }
.studio-new-card > svg { box-sizing: content-box; padding: 15px; border-radius: 50%; background: #f0eaff; }
.studio-new-card strong { margin-top: 15px; color: #1d1e21; font-size: 14px; }
.studio-new-card span { max-width: 220px; margin-top: 7px; color: #8a8e95; font-size: 10px; line-height: 1.45; text-align: center; }
.studio-new-card em { margin-top: 18px; padding: 8px 12px; border: 1px solid #dddfe2; border-radius: 7px; background: #fff; color: #33353a; font-size: 10px; font-style: normal; }
@media (max-width: 1080px) { .studio-agent-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); } .studio-toolbar { grid-template-columns: 1fr auto; } .studio-tabs { grid-row: 2; grid-column: 1/-1; min-height: 38px; } .studio-tabs button.active::after { bottom: -1px; } }
@media (max-width: 760px) { .studio-layout { grid-template-columns: 1fr; } .studio-sidebar { position: static; height: auto; padding: 14px; } .studio-nav, .studio-sidebar-bottom, .studio-plan { display: none; } .studio-brand { padding: 0; } .studio-main { padding: 22px 16px 45px; } .studio-agent-grid { grid-template-columns: 1fr; } .studio-toolbar { grid-template-columns: 1fr; gap: 12px; } .studio-tabs { grid-row: auto; grid-column: auto; justify-content: flex-start; min-height: 40px; overflow-x: auto; } .studio-sort { justify-content: center; } }

/* Dedicated Agent Design screen */
.provider-main { min-width: 0; padding: 30px 38px 60px; background: #fff; }
.provider-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid #eaebed; }
.provider-header h1 { margin: 0; color: #14171d; font-size: 28px; letter-spacing: -.035em; }
.provider-header p { margin: 6px 0 0; color: #8a9099; font-size: 11px; }
.provider-security { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #e0e3e8; border-radius: 9px; color: #536073; font-size: 11px; box-shadow: 0 2px 8px #1720330a; }
.provider-section { margin-top: 48px; }
.provider-section-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.provider-section-title h2 { margin: 0; color: #283143; font-size: 19px; }
.provider-section-title p { margin: 5px 0 0; color: #8b93a0; font-size: 10px; }
.provider-list { display: flex; flex-direction: column; gap: 13px; }
.provider-card { overflow: hidden; border: 1px solid #e3e6eb; border-radius: 15px; background: #f8f9fb; box-shadow: 0 2px 6px #17203308; }
.provider-card-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px 15px; }
.provider-name { display: flex; align-items: center; gap: 11px; }
.provider-name h3 { margin: 0; color: #11151c; font-size: 20px; letter-spacing: -.025em; }
.provider-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #171a20; color: #fff; font-size: 11px; font-weight: 800; }
.provider-mark img { display: block; width: 76px; height: 22px; object-fit: contain; }
.provider-card[data-provider-card="openai"] .provider-mark { width: 88px; }
.provider-mark.voice-lab-mark { background: #fff !important; border-color: #e8e8e8 !important; }
.provider-mark.voice-lab-mark img { width: 25px; height: 22px; }
.provider-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0 46px; }
.provider-tags span { padding: 4px 7px; border: 1px solid #e4e6ea; border-radius: 6px; background: #fff; color: #353b46; font-size: 8px; font-weight: 750; }
.provider-key-state { min-width: 170px; padding: 10px; border: 1px solid #e8eaed; border-radius: 12px; background: #fff; }
.provider-key-state > div { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.provider-key-state b { color: #687489; font-size: 10px; }
.provider-key-state i { width: 9px; height: 9px; border-radius: 3px; background: #c8cdd4; box-shadow: inset 0 0 0 1px #aeb5bf; }
.provider-key-state i.ready { background: #26c68d; box-shadow: 0 0 0 2px #26c68d22, inset 0 0 0 1px #159a6e; }
.provider-key-state button, .provider-model-toggle { border: 0; cursor: pointer; color: #58667a; font-weight: 650; }
.provider-key-state button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 8px; border: 1px solid #e0e4e9; border-radius: 8px; background: #fff; }
.provider-model-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 18px; border-top: 1px solid #e4e7eb; background: #fff; text-align: left; }
.provider-models, .provider-setup-form { display: none; padding: 16px 18px; border-top: 1px solid #e4e7eb; background: #fff; }
.provider-card.models-open .provider-models, .provider-card.setup-open .provider-setup-form { display: block; }
.provider-models div { display: grid; grid-template-columns: 50px 1fr; gap: 12px; margin: 7px 0; color: #737d8c; font-size: 9px; }
.provider-models strong { color: #313846; }
.provider-setup-form label { display: block; margin-bottom: 12px; color: #454d5b; font-size: 10px; font-weight: 700; }
.provider-setup-form label span { float: right; color: #929aa6; font-size: 8px; font-weight: 400; }
.provider-setup-form input { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #dfe3e8; border-radius: 8px; outline: none; font-size: 11px; }
.provider-setup-form input:focus { border-color: #8f82db; box-shadow: 0 0 0 3px #7962de12; }
.provider-setup-form > div { display: flex; justify-content: flex-end; gap: 8px; }
.provider-setup-form > div > button:first-child { padding: 9px 13px; border: 1px solid #dfe2e6; border-radius: 8px; cursor: pointer; background: #fff; }
.provider-setup-form > .provider-voices { display: block; margin: 4px 0 16px; padding: 14px; border: 1px solid #e4e0f4; border-radius: 11px; background: #faf9ff; }
.provider-voices > strong { display: block; margin-bottom: 10px; color: #292533; font-size: 12px; }
.provider-voices > p { color: #85808e; font-size: 10px; }
.provider-voice-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; padding: 9px 10px; border: 1px solid #e6e2f0; border-radius: 8px; background: #fff; color: #393442; font-size: 11px; }
.provider-voice-row button { border: 0; background: transparent; color: #b13b4d; cursor: pointer; font-size: 10px; }
.provider-voices > button { padding: 9px 12px; border: 1px solid #d9d2ef; border-radius: 8px; background: #fff; color: #5a46af; cursor: pointer; font-weight: 650; }
.provider-form-message { margin: 8px 0 0; color: #21805a; font-size: 9px; text-align: right; }
.design-layout { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; background: #fff; }
.design-main { min-width: 0; padding: 25px 30px 55px; }
.design-main form { width: min(1220px, 100%); margin: 0 auto; }
.design-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.design-header h1 { display: inline-block; margin: 0; color: #151618; font-size: 25px; font-weight: 720; letter-spacing: -.035em; }
.design-header p { margin: 4px 0 0; color: #8a8e95; font-size: 11px; }
.design-header-actions { display: flex; align-items: center; gap: 9px; }
.design-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #dedfe2; border-radius: 8px; cursor: pointer; background: #fff; color: #292b2f; font: 600 11px system-ui; }
.design-secondary:hover { border-color: #bfc1c5; background: #f9f9f9; }
.design-secondary.danger-text { color: #bd3a4c; }
.design-mobile-back { display: none; margin-right: 7px; padding: 3px; border: 0; background: transparent; vertical-align: -5px; }
.design-tabs { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid #e7e8ea; }
.design-tabs button { position: relative; padding: 11px 15px 13px; border: 0; cursor: pointer; background: transparent; color: #858990; font-size: 11px; }
.design-tabs button svg { margin-right: 5px; vertical-align: -3px; }
.design-tabs button.active { color: #17181a; font-weight: 650; }
.design-tabs button.active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: 2px; background: #17181a; content: ""; }
.design-content { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.85fr); align-items: start; gap: 20px; margin-top: 20px; }
.design-form-column { min-width: 0; }
.design-panel { display: none; padding: 22px; border: 1px solid #e2e3e5; border-radius: 15px; background: #fff; box-shadow: 0 1px 2px #00000004; }
.design-panel.active { display: block; }
.design-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.design-panel-heading h2, .preview-heading h2 { margin: 0; color: #17181a; font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.design-panel-heading p, .preview-heading p { margin: 4px 0 0; color: #93979e; font-size: 10px; }
.integration-warning { display:flex; gap:12px; padding:14px; margin-bottom:18px; border:1px solid #eadfb8; border-radius:12px; background:#fffbeb; color:#5d4b13; }
.integration-warning svg { flex:0 0 auto; }
.integration-warning strong, .integration-warning p { display:block; margin:0; font-size:12px; }
.integration-warning p { margin-top:4px; color:#7a6c3e; font-size:11px; line-height:1.5; }
.integration-fields, .integration-test-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.integration-fields label, .integration-test-grid label { color:#555a62; font-size:11px; font-weight:650; }
.integration-test-grid label small { display:block; margin:3px 0 6px; color:#999da5; font-weight:400; }
.integration-copy-row { display:flex; align-items:stretch; margin-top:7px; min-width:0; }
.integration-copy-row code { flex:1; min-width:0; overflow:hidden; padding:11px 12px; border:1px solid #dedfe3; border-radius:9px 0 0 9px; background:#f8f8fa; color:#30323a; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.integration-copy-row button { border:1px solid #dedfe3; border-left:0; border-radius:0 9px 9px 0; padding:0 13px; background:#fff; color:#6848d8; font-size:10px; font-weight:700; cursor:pointer; }
.integration-key-card { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding:15px; border:1px solid #e2e3e7; border-radius:13px; }
.integration-key-card>div { display:flex; align-items:center; gap:10px; }
.integration-key-card>div:last-child { justify-content:flex-end; }
.integration-key-card strong, .integration-key-card p { display:block; margin:0; font-size:12px; }
.integration-key-card p { margin-top:4px; color:#92969e; font-size:10px; }
.integration-secret { margin-top:12px; padding:14px; border:1px solid #cfc1ff; border-radius:12px; background:#f7f3ff; }
.integration-secret>strong { color:#4e329e; font-size:11px; }
.integration-test { margin-top:20px; padding-top:18px; border-top:1px solid #ececef; }
.integration-test h3, .integration-test p { margin:0; }
.integration-test h3 { font-size:13px; }
.integration-test p { margin:4px 0 14px; color:#92969e; font-size:10px; }
.integration-test input { width:100%; box-sizing:border-box; margin-top:6px; padding:10px 11px; border:1px solid #dedfe3; border-radius:9px; background:#fff; }
.integration-test>button { margin-top:13px; }
.integration-token-result { margin-top:12px; color:#5d6169; font-size:10px; }
.integration-token-result>strong, .integration-token-result>small { display:block; }
.integration-empty { display:grid; justify-items:center; gap:7px; padding:38px; border:1px dashed #d5caff; border-radius:14px; color:#777b84; text-align:center; }
.integration-empty strong { color:#30323a; font-size:13px; }
.integration-empty p { margin:0; font-size:11px; }
.design-complete, .preview-heading > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #cce7d2; border-radius: 6px; background: #effaf2; color: #23833c; font-size: 9px; white-space: nowrap; }
.design-complete i, .preview-heading > span i { width: 6px; height: 6px; border-radius: 50%; background: #2eaa4f; }
.design-counter { color: #9a9da3; font-size: 9px; }
.design-counter b { color: #5c6067; }
.design-identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.design-identity-grid label, .design-service-fields label { color: #64686f; font-size: 10px; font-weight: 600; }
.design-identity-grid input, .design-service-fields input, .design-service-fields select { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #dedfe2; border-radius: 8px; outline: none; background: #fff; color: #24262a; font: 11px system-ui; }
.design-identity-grid input:focus, .design-service-fields input:focus, .design-service-fields select:focus, .design-prompt:focus { border-color: #9a8be5; box-shadow: 0 0 0 3px #7962de12; }
.design-identity-grid input:disabled { background: #f7f7f8; color: #878b92; }
.design-description { grid-column: 1/-1; }
.design-description textarea { box-sizing: border-box; width: 100%; min-height: 90px; margin-top: 6px; padding: 10px 11px; border: 1px solid #dedfe2; border-radius: 8px; outline: none; resize: vertical; background: #fff; color: #24262a; font: 11px/1.5 system-ui; }
.design-description textarea:focus { border-color: #9a8be5; box-shadow: 0 0 0 3px #7962de12; }
.design-prompt { box-sizing: border-box; width: 100%; min-height: 390px; padding: 15px; border: 1px solid #dedfe2; border-radius: 10px; outline: none; resize: vertical; background: #fcfcfc; color: #27292d; font: 12px/1.65 system-ui; }
.design-panel[data-design-panel="prompt"] > .architecture-subheading:first-child { margin-top: 0; }
.design-settings-panel .agent-architecture-grid { margin-bottom: 0; }
.design-tools-panel .agent-tools { margin-top: 0; }
.design-tools-panel .agent-tools > div:first-child { display: none; }
.design-opener { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e7e8ea; }
.design-opener label { display: block; color: #555a61; font-size: 10px; font-weight: 650; }
.design-opener label span { float: right; color: #999da4; font-size: 8px; font-weight: 400; }
.design-opener textarea { box-sizing: border-box; width: 100%; min-height: 92px; margin-top: 7px; padding: 11px 12px; border: 1px solid #dedfe2; border-radius: 9px; outline: none; resize: vertical; background: #fcfcfc; color: #27292d; font: 11px/1.5 system-ui; }
.design-opener textarea:focus { border-color: #9a8be5; box-shadow: 0 0 0 3px #7962de12; }
.design-opener p { margin: 7px 0 0; color: #92969d; font-size: 8px; line-height: 1.45; }
.design-services { display: flex; flex-direction: column; gap: 12px; }
.design-vad { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7e8ea; }
.design-vad-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.design-vad-grid label { color: #555a61; font-size: 10px; font-weight: 650; }
.design-vad-grid small { display: block; min-height: 26px; margin-top: 3px; color: #999da4; font-size: 8px; font-weight: 400; line-height: 1.4; }
.design-vad-grid input { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #dedfe2; border-radius: 8px; outline: none; background: #fff; color: #24262a; font: 11px system-ui; }
.design-vad-grid input:focus { border-color: #9a8be5; box-shadow: 0 0 0 3px #7962de12; }
.design-service { padding: 15px; border: 1px solid #e5e6e8; border-radius: 11px; background: #fcfcfc; }
.design-service-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.design-service-title > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #eee9ff; color: #7255d2; }
.design-service-title h3 { margin: 0; color: #24262a; font-size: 11px; }
.design-service-title p { margin: 2px 0 0; color: #979aa0; font-size: 9px; }
.design-service-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.design-service-fields .design-key { grid-column: 1/-1; }
.design-version-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e5e6e8; border-radius: 10px; }
.design-version-row > span { color: #7255d2; }
.design-version-row strong { color: #33363a; font-size: 11px; }
.design-version-row p { margin: 3px 0 0; color: #92969d; font-size: 9px; }
.design-preview { position: sticky; top: 20px; display: flex; flex-direction: column; min-height: 590px; padding: 21px; border: 1px solid #e2e3e5; border-radius: 15px; background: #fdfdfd; }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.preview-aura-shell { position: relative; flex: 0 0 auto; height: 142px; margin: 14px 0 4px; overflow: hidden; border: 1px solid #e5e0f1; border-radius: 14px; background: radial-gradient(circle at 50% 50%,#f8f5ff 0,#fdfdfd 68%); isolation: isolate; }
.preview-aura { position: absolute; inset: 0; }
.preview-aura canvas { display: block; width: 100%; height: 100%; filter: saturate(1.12); }
.preview-aura-state { position: absolute; right: 10px; bottom: 9px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #ded7ef; border-radius: 999px; background: #ffffffc9; color: #6f687a; font-size: 8px; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(8px); }
.preview-aura-state i { width: 6px; height: 6px; border-radius: 50%; background: #9b93aa; box-shadow: 0 0 0 3px #9b93aa18; }
.preview-aura[data-state="thinking"] + .preview-aura-state i { background: #e3a42d; box-shadow: 0 0 0 3px #e3a42d20; }
.preview-aura[data-state="speaking"] + .preview-aura-state i { background: #2db975; box-shadow: 0 0 0 3px #2db97520; }
.preview-aura[data-state="listening"] + .preview-aura-state i { background: #7656d5; box-shadow: 0 0 0 3px #7656d520; }
.preview-chat { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 250px; max-height: 390px; margin: 14px 0; padding-right: 4px; overflow-y: auto; scroll-behavior: smooth; }
.preview-message { display: flex; align-items: flex-start; gap: 9px; max-width: 86%; }
.preview-message.user { align-self: flex-end; text-align: right; }
.preview-message strong { color: #34363a; font-size: 9px; }
.preview-message p { margin: 5px 0 0; padding: 10px 12px; border: 1px solid #e4e0ee; border-radius: 9px; background: #f5f1ff; color: #37343e; font-size: 10px; line-height: 1.45; text-align: left; }
.preview-message.user p { border-color: #e2e3e5; background: #fff; }
.preview-message.error p { border-color: #f2cbd1; background: #fff4f5; color: #a93648; }
.preview-message.streaming p::after { display: inline-block; width: 5px; height: 12px; margin-left: 3px; background: #7655d0; content: ""; vertical-align: -2px; animation: preview-caret .8s steps(1) infinite; }
.preview-bot { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #eee6ff; color: #7552d6; }
.preview-compose { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid #ececef; }
.preview-compose input { min-width: 0; padding: 10px 12px; border: 1px solid #dedfe2; border-radius: 9px; outline: none; background: #fff; color: #26282c; font: 11px system-ui; }
.preview-compose input:focus { border-color: #9786e3; box-shadow: 0 0 0 3px #7962de12; }
.preview-compose button { display: grid; place-items: center; border: 0; border-radius: 9px; cursor: pointer; background: #7656d5; color: #fff; }
.preview-compose button:hover { background: #6545c5; }
.preview-compose button:disabled, .preview-compose input:disabled { cursor: wait; opacity: .55; }
.preview-note { margin: 8px 0 0; color: #9a9da3; font-size: 8px; line-height: 1.4; }
@keyframes preview-caret { 50% { opacity: 0; } }
.preview-stack { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: auto; }
.preview-stack > span { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #e8e8ea; border-radius: 8px; color: #7557cc; }
.preview-stack b { overflow: hidden; color: #414349; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.preview-stack small { color: #9a9da3; font-size: 8px; }
.preview-test { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; padding: 10px; border: 1px solid #ddd5f5; border-radius: 8px; cursor: pointer; background: #f7f3ff; color: #6848bf; font: 650 10px system-ui; }
.design-message { margin-top: 12px; color: #278244; }
.design-message.error, .version-status.error { color: #ff6b6b; }
#save-agent-version.dirty { border-color: var(--platform-primary-hover); color: var(--platform-primary-hover); }
.agent-version-list { display: grid; min-width: 0; max-width: 100%; gap: 10px; overflow: hidden; }
.agent-version-list .design-version-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: flex-start; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; cursor: pointer; overflow: hidden; }
.agent-version-list .design-version-row:focus-visible { outline: 2px solid var(--platform-primary); outline-offset: -2px; }
.agent-version-list .version-summary { min-width: 0; }
.agent-version-list .design-version-row > .version-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 8px; }
.version-expand-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #9ba0a7; transition: transform .18s ease; }
.design-version-row.expanded .version-expand-icon { transform: rotate(180deg); }
.version-changelog { display: none; grid-column: 1/-1; min-width: 0; margin-top: 4px; padding: 14px; border-top: 1px solid #30343a; cursor: default; }
.design-version-row.expanded .version-changelog { display: block; }
.version-changelog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.version-changelog > header strong { font-size: 13px; }
.version-changelog > header span { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--platform-primary-border); border-radius: 999px; color: var(--platform-primary-hover); font-size: 9px; }
.version-change-list { display: grid; gap: 10px; max-height: 440px; margin-top: 12px; overflow-y: auto; }
.version-change-list article { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid #30343a; border-radius: 9px; background: #121417; }
.version-change-list article > strong { color: #f1f2f3; font-size: 11px; }
.version-change-list article > div { min-width: 0; }
.version-change-list article span { display: block; margin-bottom: 5px; color: #8f959c; font-size: 9px; text-transform: uppercase; }
.version-change-list pre { max-width: 100%; margin: 0; padding: 9px; overflow: auto; border-radius: 7px; background: #090a0c; color: #dfe2e5; font: 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.version-no-changes { margin: 0; color: #92979e; }
.interruption-setting { margin-top: 18px; padding-top: 18px; border-top: 1px solid #2e3136; }
.interruption-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.interruption-options label { display: flex; gap: 12px; padding: 14px; border: 1px solid #34373c; border-radius: 10px; background: #191b1f; cursor: pointer; }
.interruption-options input { margin-top: 2px; accent-color: var(--platform-primary); }
.interruption-options span { display: grid; gap: 5px; }
.interruption-options b { color: #f3f4f5; }
.interruption-options small { color: #989da4; line-height: 1.45; }
.interruption-options label:has(input:checked) { border-color: var(--platform-primary); background: var(--platform-primary-soft); box-shadow: 0 0 0 1px var(--platform-focus-ring); }
@media (max-width: 900px) { .interruption-options { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .agent-version-list .design-version-row { grid-template-columns: auto minmax(0,1fr); }
  .agent-version-list .design-version-row > .version-actions { grid-column: 1/-1; justify-content: flex-start; padding-left: 0; }
}
.version-badge { display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 9px; }
.version-badge.current { background: var(--platform-primary-border); color: var(--platform-primary-hover); }
.version-badge.published { background: #163527; color: #68d89b; }
.version-status { min-height: 20px; margin: 12px 0 0; color: var(--platform-primary-hover); }
.agent-tool-state { margin-left: auto; padding: 4px 8px; border: 1px solid #3b3e44; border-radius: 999px; color: #8f959c; font-size: 9px; font-style: normal; font-weight: 700; }
.agent-tool-state.enabled { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.admin-billing-main { overflow-y: auto; padding-bottom: 50px; }
.admin-role-badge { padding: 7px 11px; border: 1px solid var(--platform-primary-border); border-radius: 999px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); font-size: 11px; font-weight: 750; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.admin-overview-grid article { padding: 18px; border: 1px solid #2d3035; border-radius: 12px; background: #15171a; }
.admin-overview-grid span { display: block; color: #92979e; font-size: 11px; }
.admin-overview-grid strong { display: block; margin-top: 8px; color: #f5f6f7; font-size: 26px; }
.admin-section { margin-top: 16px; padding: 18px; border: 1px solid #292c31; border-radius: 14px; background: #121417; }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-section-head h2 { margin: 0; color: #f3f4f5; font-size: 17px; }
.admin-section-head p { margin: 4px 0 0; color: #8e949b; font-size: 11px; }
.admin-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.admin-plan-card { display: grid; gap: 10px; padding: 15px; border: 1px solid #30343a; border-radius: 12px; background: #191b1f; }
.admin-plan-card header { display: flex; justify-content: space-between; }
.admin-plan-card header strong, .admin-plan-card header small { display: block; }
.admin-plan-card header small, .admin-plan-card label, .admin-form-status, .admin-row-status { color: #8f959c; font-size: 10px; }
.admin-plan-card header > span { color: var(--platform-primary-hover); font-size: 10px; font-weight: 700; }
.admin-plan-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-plan-card input, .admin-subscription-table input, .admin-subscription-table select, .admin-search { box-sizing: border-box; width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #34383e; border-radius: 8px; background: #0d0f11; color: #eef0f2; }
.admin-search { display: flex; align-items: center; width: 260px; margin: 0; }
.admin-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; }
.admin-subscription-table { overflow-x: auto; }
.admin-subscription-table table { width: 100%; border-collapse: collapse; }
.admin-subscription-table th, .admin-subscription-table td { padding: 11px 8px; border-bottom: 1px solid #292c31; text-align: left; vertical-align: top; color: #dfe2e5; font-size: 11px; }
.admin-subscription-table th { color: #81878e; font-size: 9px; text-transform: uppercase; }
.admin-subscription-table td strong, .admin-subscription-table td small { display: block; }
.admin-branding-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 16px; }
.admin-branding-layout form { display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid #30343a; border-radius: 12px; background: #191b1f; }
.admin-branding-layout label { display: grid; gap: 6px; color: #9aa0a7; font-size: 10px; }
.admin-branding-layout input[type="text"],.admin-branding-layout input:not([type]) { padding: 10px; border: 1px solid #34383e; border-radius: 8px; background: #0d0f11; color: #fff; }
.admin-color-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.admin-color-grid input { width: 100%; height: 42px; padding: 3px; border: 1px solid #34383e; border-radius: 8px; background: #0d0f11; cursor: pointer; }
.admin-logo-preview { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid #30343a; border-radius: 10px; background: var(--platform-background); color: var(--platform-text); }
.admin-logo-preview img { width: 76px; height: 48px; object-fit: contain; }
.admin-branding-layout input[type="file"] { max-width: 100%; color: #dfe2e5; }
.admin-branding-layout small { color: #777d84; }
@media (max-width: 1100px) { .admin-plan-grid { grid-template-columns: 1fr; } .admin-overview-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .admin-branding-layout { grid-template-columns: 1fr; } .admin-color-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1000px) { .design-content { grid-template-columns: 1fr; } .design-preview { position: static; min-height: 480px; } }
@media (max-width: 760px) { .design-layout { grid-template-columns: 1fr; } .design-sidebar { display: none; } .design-main { padding: 18px 14px 40px; } .design-header { align-items: flex-start; flex-direction: column; } .design-header-actions { width: 100%; } .design-header-actions button { flex: 1; justify-content: center; } .design-mobile-back { display: inline-grid; } .design-tabs { overflow-x: auto; } .design-tabs button { flex: 0 0 auto; } .design-panel { padding: 16px; } .design-identity-grid, .design-service-fields, .integration-fields, .integration-test-grid { grid-template-columns: 1fr; } .integration-key-card { align-items:flex-start; flex-direction:column; } .design-prompt { min-height: 300px; } }

/* Dark Agent Studio workspace */
.design-layout { grid-template-columns: 218px 280px minmax(0,1fr); height: 100vh; min-height: 0; overflow: hidden; background: #0d0e10; color: #eceef0; }
.design-layout .studio-sidebar { border-color: #2a2d31; background: #101114; color: #e8eaec; }
.design-layout .studio-brand { filter: none; }
.design-layout .studio-nav button,
.design-layout .studio-sidebar-bottom button { color: #a9adb2; }
.design-layout .studio-nav button:hover,
.design-layout .studio-sidebar-bottom button:hover { background: #1b1d21; color: #fff; }
.design-layout .studio-nav button.active { background: var(--platform-primary-soft); color: var(--platform-primary-hover); box-shadow: inset 3px 0 var(--platform-primary), inset 0 0 0 1px var(--platform-primary-border); }
.design-layout .studio-nav small { color: #6d7177; }
.design-layout .studio-workspace { border-color: #303338; background: #17191c; color: #e7e9eb; }
.design-sidebar { padding: 12px 8px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #33363b transparent; }
.design-sidebar .studio-brand { justify-content: flex-start; min-height: 40px; padding: 0 6px 10px; }
.design-sidebar .studio-brand > img { width: 31px; height: 27px; }
.design-sidebar .studio-brand > strong { flex: 1; color: #fff; font-size: 17px; }
.design-sidebar .studio-brand > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #303338; border-radius: 6px; color: #aeb2b7; }
.design-sidebar .studio-nav { gap: 1px; }
.design-sidebar .studio-nav small { margin: 13px 6px 4px; font-size: 8px; }
.design-sidebar .studio-nav button,
.design-sidebar .studio-sidebar-bottom button { min-height: 30px; padding: 6px 7px; border-radius: 6px; font-size: 11px; }
.design-sidebar .studio-nav button > span:first-of-type { flex: 1; }
.design-sidebar .studio-nav button svg { flex: 0 0 auto; }
.console-account { display: grid; grid-template-columns: 25px minmax(0,1fr) 14px; align-items: center; gap: 7px; margin: 2px 0 7px; padding: 6px 7px; border: 1px solid #303338; border-radius: 6px; background: #15171a; }
.console-account b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 5px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); font-size: 10px; }
.console-account span { overflow: hidden; color: #e5e7e9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.console-account svg { color: #777c82; }
.console-search { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid #303338; border-radius: 6px; background: #121417; color: #858a90; }
.console-search input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 10px system-ui; }
.console-search kbd { padding: 2px 4px; border: 1px solid #3b3e43; border-radius: 4px; background: #222428; color: #aeb2b7; font: 8px system-ui; }
.console-credits { margin-top: 8px; padding: 9px; border: 1px solid #303338; border-radius: 7px; background: #15171a; }
.console-credits > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.console-credits b { padding: 3px 5px; border-radius: 4px; background: #2c2f34; color: #dfe1e3; font-size: 8px; }
.console-credits span { color: #afb3b8; font-size: 8px; }
.console-credits > div:last-child { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #292c30; }
.console-credits i { display: block; height: 100%; background: linear-gradient(90deg,var(--platform-primary-strong),var(--platform-primary-strong)); }
.design-agent-rail { display: flex; min-width: 0; min-height: 0; height: 100vh; flex-direction: column; overflow: hidden; border-right: 1px solid #2a2d31; background: #111215; }
.design-agent-rail header { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px 0 14px; border-bottom: 1px solid #2a2d31; }
.design-agent-rail header > div { display: flex; align-items: center; gap: 7px; }
.design-agent-rail header strong { font-size: 13px; }
.design-agent-rail header span { color: #6f747a; font-size: 11px; }
.design-agent-rail header button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #373a3f; border-radius: 6px; cursor: pointer; background: #17191c; color: var(--platform-primary-hover); }
.design-agent-search { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 11px; padding: 8px 10px; border: 1px solid #303338; border-radius: 7px; color: #777c82; background: #17191c; }
.design-agent-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #e7e9eb; font: 11px system-ui; }
.design-agent-list { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; padding: 3px 10px 16px; scrollbar-width: thin; scrollbar-color: #45494f transparent; }
.design-agent-list::-webkit-scrollbar { width: 7px; }
.design-agent-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #45494f; }
.design-agent-list::-webkit-scrollbar-track { background: transparent; }
.design-agent-list > p { color: #6e7379; font-size: 11px; text-align: center; }
.design-agent-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; background: transparent; color: #dfe2e4; text-align: left; }
.design-agent-item > span { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--platform-primary-hover); background: var(--platform-primary-soft); }
.design-agent-item > div { min-width: 0; display: grid; gap: 3px; }
.design-agent-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.design-agent-item small { overflow: hidden; color: #777c82; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.design-agent-item:hover { background: #191b1f; }
.design-agent-item.active { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); box-shadow: inset 3px 0 var(--platform-primary); }
.design-main { height: 100vh; min-height: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 50px; background: #0d0e10; color: #e9ebed; }
.design-main form { width: 100%; }
.design-header { align-items: center; min-height: 54px; margin: 0 -22px; padding: 0 26px; border-bottom: 1px solid #2a2d31; background: #111215; }
.design-header > div:first-child { min-width: 0; padding-left: 2px; }
.design-header h1, .design-header p { overflow: visible; }
.design-header h1 { color: #f3f4f5; font-size: 15px; }
.design-header p { color: #6f747a; font-size: 8px; }
.design-secondary { border-color: #34373c; background: #17191c; color: #dfe1e3; }
.design-secondary:hover { border-color: #555a60; background: #202328; }
.design-layout .studio-primary { border: 1px solid var(--platform-primary-strong); background: var(--platform-primary); color: var(--platform-on-primary); box-shadow: none; }
.design-layout .studio-primary:hover { background: #ff8b4c; }
.design-tabs { margin: 0 -22px; padding: 0 12px; border-color: #2a2d31; background: #111215; }
.design-tabs button { padding: 12px 11px 13px; color: #888d93; }
.design-tabs button.active { color: var(--platform-primary-hover); }
.design-tabs button.active::after { background: var(--platform-primary); }
.design-content { gap: 14px; margin-top: 16px; }
.design-panel,
.design-preview { border-color: #282b2f; border-radius: 9px; background: #141619; box-shadow: none; }
.design-panel-heading h2,
.preview-heading h2 { color: #eff1f2; }
.design-panel-heading p,
.preview-heading p { color: #797e84; }
.design-complete,
.preview-heading > span { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.design-complete i,
.preview-heading > span i { background: var(--platform-primary); }
.design-identity-grid label,
.design-service-fields label,
.design-vad-grid label,
.agent-architecture-grid label,
.knowledge-paste label { color: #aeb2b7; }
.design-identity-grid input,
.design-description textarea,
.design-service-fields input,
.design-service-fields select,
.design-vad-grid input,
.agent-architecture-grid input,
.agent-architecture-grid select,
.knowledge-paste input,
.knowledge-paste textarea,
.design-opener textarea,
.integration-fields input { border-color: #34373c; background: #0b0c0e; color: #eceef0; }
.design-identity-grid input:disabled { background: #181a1e; color: #777c82; }
.design-identity-grid input:focus,
.design-service-fields input:focus,
.design-service-fields select:focus,
.design-prompt:focus,
.design-description textarea:focus,
.design-vad-grid input:focus,
.design-opener textarea:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.design-prompt { border-color: #34373c; background: #08090a; color: #eceef0; }
.design-opener,
.design-vad,
.preview-compose { border-color: #292c30; }
.design-service,
.design-version-row,
.agent-tools label,
.knowledge-drop,
.knowledge-paste,
.integration-key-card,
.integration-test { border-color: #2e3136; background: #191b1f; }
.design-service-title > span,
.preview-bot { background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.design-service-title h3,
.design-version-row strong,
.agent-tools b { color: #e9ebed; }
.design-preview { top: 16px; height: calc(100vh - 132px); min-height: 0; max-height: calc(100vh - 132px); overflow: hidden; }
.design-preview .preview-chat { min-height: 0; max-height: none; }
.preview-aura-shell { border-color: var(--platform-primary-border); background: radial-gradient(circle at 50% 50%,var(--platform-primary-soft) 0,#111316 68%); }
.preview-aura-state { border-color: var(--platform-primary-border); background: #17191cdd; color: #bd9f8e; }
.preview-message strong { color: #b8bcc1; }
.preview-message p,
.preview-message.user p { border-color: #34373c; background: #1b1e22; color: #e4e6e8; }
.preview-message.assistant p { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); }
.preview-message.streaming p::after { background: var(--platform-primary); }
.preview-compose input { border-color: #34373c; background: #0b0c0e; color: #eceef0; }
.preview-compose input:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.preview-compose button { background: var(--platform-primary); color: var(--platform-on-primary); }
.preview-compose button:hover { background: #ff8b4c; }
.design-message { color: var(--platform-primary-hover); }
@media (max-width: 1180px) { .design-layout { grid-template-columns: 190px 240px minmax(0,1fr); } .design-content { grid-template-columns: 1fr; } .design-preview { position: static; height: calc(100vh - 132px); max-height: calc(100vh - 132px); } }
@media (max-width: 900px) { .design-layout { grid-template-columns: 190px minmax(0,1fr); } .design-agent-rail { display: none; } }
@media (max-width: 760px) { .design-layout { grid-template-columns: 1fr; } .design-main { padding: 0 14px 40px; } .design-header, .design-tabs { margin-right: -14px; margin-left: -14px; } .design-preview { height: auto; min-height: 520px; max-height: none; overflow: visible; } }

/* Dark Agent dashboard and provider workspace */
#account-shell > .studio-layout { background: #0d0e10; color: #eceef0; }
#account-shell > .studio-layout .studio-sidebar { border-color: #2a2d31; background: #101114; }
#account-shell > .studio-layout .studio-brand { filter: none; }
#account-shell > .studio-layout .studio-nav button,
#account-shell > .studio-layout .studio-sidebar-bottom button { color: #a9adb2; }
#account-shell > .studio-layout .studio-nav button:hover,
#account-shell > .studio-layout .studio-sidebar-bottom button:hover { background: #1b1d21; color: #fff; }
#account-shell > .studio-layout .studio-nav button.active { background: var(--platform-primary-soft); color: var(--platform-primary-hover); box-shadow: inset 3px 0 var(--platform-primary), inset 0 0 0 1px var(--platform-primary-border); }
#account-shell > .studio-layout .studio-nav small { color: #6d7177; }
#account-shell > .studio-layout .studio-workspace { border-color: #303338; background: #17191c; color: #e7e9eb; }
#account-shell > .studio-layout .studio-plan { border-color: #303338; background: #17191c; }
#account-shell > .studio-layout .studio-plan > div:first-child,
#account-shell > .studio-layout .studio-plan b { color: #e5e7e9; }
#account-shell > .studio-layout .studio-plan span { color: #777c82; }
#account-shell > .studio-layout .studio-progress { background: #292c30; }
#account-shell > .studio-layout .studio-progress i { background: linear-gradient(90deg,var(--platform-primary-strong),var(--platform-primary-hover)); }
#account-shell > .studio-layout .studio-main { padding-top: 0; background: #0d0e10; }
#account-shell > .studio-layout .studio-header { min-height: 62px; margin: 0 -34px; padding: 0 24px; align-items: center; border-bottom: 1px solid #2a2d31; background: #111215; }
#account-shell > .studio-layout .studio-header h1 { color: #f3f4f5; font-size: 20px; }
#account-shell > .studio-layout .studio-header p { color: #777c82; font-size: 10px; }
#account-shell > .studio-layout .icon-button { border-color: #34373c; background: #17191c; color: #b8bcc1; }
#account-shell > .studio-layout .studio-avatar { background: var(--platform-primary); color: var(--platform-on-primary); box-shadow: inset 0 0 0 2px var(--platform-primary-hover),0 0 0 1px var(--platform-primary-border); }
#account-shell > .studio-layout .studio-create-row { margin-top: 20px; }
#account-shell > .studio-layout .studio-primary { border: 1px solid var(--platform-primary-strong); background: var(--platform-primary); color: var(--platform-on-primary); box-shadow: none; }
#account-shell > .studio-layout .studio-primary:hover { background: #ff8b4c; }
#account-shell > .studio-layout .studio-toolbar { border-color: #292c30; }
#account-shell > .studio-layout .studio-search { border-color: #34373c; background: #17191c; color: #858a90; box-shadow: none; }
#account-shell > .studio-layout .studio-search:focus-within { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
#account-shell > .studio-layout .studio-search input { color: #eceef0; }
#account-shell > .studio-layout .studio-tabs button { color: #858a90; }
#account-shell > .studio-layout .studio-tabs button.active { color: var(--platform-primary-hover); }
#account-shell > .studio-layout .studio-tabs button.active::after { background: var(--platform-primary); }
#account-shell > .studio-layout .studio-sort { border-color: #34373c; background: #17191c; color: #b8bcc1; }
#account-shell > .studio-layout .studio-agent-card,
#account-shell > .studio-layout .studio-new-card { border-color: #2d3035; border-radius: 10px; background: #15171a; }
#account-shell > .studio-layout .studio-agent-card:hover { border-color: var(--platform-primary-border); box-shadow: 0 15px 32px #0005; }
#account-shell > .studio-layout .studio-agent-icon { border-radius: 10px; }
#account-shell > .studio-layout .studio-agent-icon.tone-0,
#account-shell > .studio-layout .studio-agent-icon.tone-1,
#account-shell > .studio-layout .studio-agent-icon.tone-2,
#account-shell > .studio-layout .studio-agent-icon.tone-3,
#account-shell > .studio-layout .studio-agent-icon.tone-4 { border: 1px solid var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .studio-card-top h3 { color: #eff1f2; }
#account-shell > .studio-layout .studio-card-top span { color: #777c82; }
#account-shell > .studio-layout .studio-status.active { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .studio-status.active i { background: var(--platform-primary); box-shadow: 0 0 8px var(--platform-primary); }
#account-shell > .studio-layout .studio-status.draft { border-color: #3a3d42; background: #1c1e22; color: #8e9399; }
#account-shell > .studio-layout .studio-status.draft i { background: #73787f; }
#account-shell > .studio-layout .studio-agent-card > p { color: #b6bac0; }
#account-shell > .studio-layout .studio-card-meta { border-color: #292c30; color: #747980; }
#account-shell > .studio-layout .studio-card-actions button { border-color: #35383d; background: #1a1c20; color: #dadddf; }
#account-shell > .studio-layout .studio-card-actions button:hover { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .studio-new-card { border-color: var(--platform-primary-border); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .studio-new-card > svg { background: var(--platform-primary-soft); }
#account-shell > .studio-layout .studio-new-card strong { color: #eceef0; }
#account-shell > .studio-layout .studio-new-card span { color: #797e84; }
#account-shell > .studio-layout .studio-new-card em { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }

#account-shell > .studio-layout .provider-main { padding-top: 0; background: #0d0e10; }
#account-shell > .studio-layout .provider-header { min-height: 62px; margin: 0 -38px; padding: 0 26px; align-items: center; border-color: #2a2d31; background: #111215; }
#account-shell > .studio-layout .provider-header h1,
#account-shell > .studio-layout .provider-section-title h2 { color: #f1f3f4; }
#account-shell > .studio-layout .provider-header p,
#account-shell > .studio-layout .provider-section-title p { color: #777c82; }
#account-shell > .studio-layout .provider-security { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); box-shadow: none; }
#account-shell > .studio-layout .provider-section { margin-top: 32px; }
#account-shell > .studio-layout .provider-card { border-color: #2e3136; background: #15171a; box-shadow: none; }
#account-shell > .studio-layout .provider-name h3 { color: #eff1f2; }
#account-shell > .studio-layout .provider-mark { border: 1px solid var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .provider-tags span { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
#account-shell > .studio-layout .provider-key-state { border-color: #303338; background: #191b1f; }
#account-shell > .studio-layout .provider-key-state b { color: #a7abb0; }
#account-shell > .studio-layout .provider-key-state i.ready { background: var(--platform-primary); box-shadow: 0 0 0 2px var(--platform-focus-ring),inset 0 0 0 1px var(--platform-primary-strong); }
#account-shell > .studio-layout .provider-key-state button,
#account-shell > .studio-layout .provider-model-toggle { color: #c5c8cc; }
#account-shell > .studio-layout .provider-key-state button { border-color: #3a3d42; background: #202226; }
#account-shell > .studio-layout .provider-model-toggle,
#account-shell > .studio-layout .provider-models,
#account-shell > .studio-layout .provider-setup-form { border-color: #2f3237; background: #111316; }
#account-shell > .studio-layout .provider-models { color: #8a8f95; }
#account-shell > .studio-layout .provider-models strong,
#account-shell > .studio-layout .provider-setup-form label { color: #d9dcdf; }
#account-shell > .studio-layout .provider-setup-form input { border-color: #34373c; background: #0b0c0e; color: #eceef0; }
#account-shell > .studio-layout .provider-setup-form input:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
#account-shell > .studio-layout .provider-setup-form > div > button:first-child,
#account-shell > .studio-layout .provider-voices > button { border-color: #3a3d42; background: #1b1d21; color: #d9dcdf; }
#account-shell > .studio-layout .provider-setup-form > .provider-voices { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); }
#account-shell > .studio-layout .provider-voices > strong { color: #f0f1f2; }
#account-shell > .studio-layout .provider-voice-row { border-color: #3a3d42; background: #17191c; color: #dfe1e3; }
#account-shell > .studio-layout .provider-form-message { color: var(--platform-primary-hover); }
@media (max-width: 760px) {
  #account-shell > .studio-layout .studio-main { padding: 0 14px 40px; }
  #account-shell > .studio-layout .studio-header { margin: 0 -14px; padding: 0 14px; }
  #account-shell > .studio-layout .provider-main { padding: 0 14px 40px; }
  #account-shell > .studio-layout .provider-header { margin: 0 -14px; padding: 12px 14px; }
}

/* High-contrast typography for dark workspaces */
.design-layout,
#account-shell > .studio-layout { color: #f7f8f9; }
.design-layout h1,
.design-layout h2,
.design-layout h3,
.design-layout strong,
#account-shell > .studio-layout h1,
#account-shell > .studio-layout h2,
#account-shell > .studio-layout h3,
#account-shell > .studio-layout strong { color: #fff; }
.design-layout label,
.design-layout .design-panel,
.design-layout .design-preview,
#account-shell > .studio-layout .studio-agent-card,
#account-shell > .studio-layout .provider-card { color: #eef0f2; }
.design-layout p,
.design-layout small,
.design-layout .preview-note,
#account-shell > .studio-layout .studio-header p,
#account-shell > .studio-layout .studio-agent-card > p,
#account-shell > .studio-layout .provider-header p,
#account-shell > .studio-layout .provider-section-title p { color: #aeb3b9; }
.design-layout input,
.design-layout textarea,
.design-layout select,
#account-shell > .studio-layout input,
#account-shell > .studio-layout textarea,
#account-shell > .studio-layout select { color: #fff; }
.design-layout input::placeholder,
.design-layout textarea::placeholder,
#account-shell > .studio-layout input::placeholder,
#account-shell > .studio-layout textarea::placeholder { color: #858b92; }

/* Brighter orange accent */
.design-layout .studio-primary,
#account-shell > .studio-layout .studio-primary,
.preview-compose button { border-color: var(--platform-primary-hover); background: var(--platform-primary-hover); }
.design-layout .studio-primary:hover,
#account-shell > .studio-layout .studio-primary:hover,
.preview-compose button:hover { background: #ffac7a; }
.design-layout .studio-nav button.active,
#account-shell > .studio-layout .studio-nav button.active { color: var(--platform-primary-hover); box-shadow: inset 3px 0 var(--platform-primary-hover), inset 0 0 0 1px var(--platform-primary-border); }
.design-tabs button.active,
#account-shell > .studio-layout .studio-tabs button.active,
.design-agent-item > span,
.design-service-title > span,
.preview-bot,
.console-account b,
.design-sidebar .studio-brand > span { color: var(--platform-primary-hover); }
.design-tabs button.active::after,
#account-shell > .studio-layout .studio-tabs button.active::after,
.console-credits i { background: var(--platform-primary-hover); }
.design-agent-item.active { border-color: var(--platform-primary-border); box-shadow: inset 3px 0 var(--platform-primary-hover); }
.design-agent-item.active,
.design-layout .studio-nav button.active,
#account-shell > .studio-layout .studio-nav button.active { background: var(--platform-primary-soft); }
.design-complete,
.preview-heading > span,
#account-shell > .studio-layout .studio-status.active { color: var(--platform-primary-hover); }
.design-complete i,
.preview-heading > span i,
#account-shell > .studio-layout .studio-status.active i { background: var(--platform-primary-hover); }
.design-identity-grid input:focus,
.design-service-fields input:focus,
.design-service-fields select:focus,
.design-prompt:focus,
.design-description textarea:focus,
.design-vad-grid input:focus,
.design-opener textarea:focus,
.preview-compose input:focus,
#account-shell > .studio-layout .studio-search:focus-within,
#account-shell > .studio-layout .provider-setup-form input:focus { border-color: var(--platform-primary-hover); box-shadow: 0 0 0 3px var(--platform-focus-ring); }

/* Two-step typography increase */
.design-sidebar .studio-nav button,
.design-sidebar .studio-sidebar-bottom button { font-size: 13px; }
.design-sidebar .studio-nav small { font-size: 10px; }
.design-sidebar .studio-brand > strong { font-size: 19px; }
.console-account span,
.console-search input { font-size: 12px; }
.console-account b,
.console-search kbd,
.console-credits b,
.console-credits span { font-size: 10px; }
.design-agent-rail header strong { font-size: 15px; }
.design-agent-rail header span,
.design-agent-search input { font-size: 13px; }
.design-agent-item strong { font-size: 13px; }
.design-agent-item small { font-size: 10px; }
.design-agent-item > span { display: none; }
.design-agent-item { gap: 0; padding: 11px 12px; }
.design-agent-item strong { font-size: 14px; }
.design-header h1 { font-size: 17px; }
.design-header p { font-size: 10px; }
.design-tabs button { font-size: 13px; }
.design-panel-heading h2,
.preview-heading h2 { font-size: 18px; }
.design-panel-heading p,
.preview-heading p { font-size: 12px; }
.design-identity-grid label,
.design-service-fields label,
.design-vad-grid label,
.agent-architecture-grid label,
.knowledge-paste label,
.design-opener label { font-size: 12px; }
.design-identity-grid input,
.design-service-fields input,
.design-service-fields select,
.design-vad-grid input,
.agent-architecture-grid input,
.agent-architecture-grid select,
.design-description textarea,
.design-opener textarea,
.design-prompt,
.preview-compose input { font-size: 13px; }
.design-service-title p,
.design-version-row p,
.agent-tools small,
.preview-message p,
.preview-note { font-size: 10px; }
.design-service-title h3,
.design-version-row strong,
.agent-tools b,
.preview-message strong { font-size: 11px; }
.design-complete,
.preview-heading > span,
.preview-aura-state,
.design-counter { font-size: 11px; }

/* Full-height Markdown system prompt editor */
.design-panel[data-design-panel="prompt"].active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.markdown-prompt-editor {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #34373c;
  border-radius: 10px;
  background: #08090a;
}
.markdown-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid #2c2f34;
  background: #15171a;
}
.markdown-toolbar > div { display: flex; gap: 5px; }
.markdown-toolbar button {
  min-width: 31px;
  height: 29px;
  padding: 0 9px;
  border: 1px solid #35393f;
  border-radius: 6px;
  background: #1d2024;
  color: #c9ccd0;
  font: 650 11px system-ui;
  cursor: pointer;
}
.markdown-toolbar button:hover,
.markdown-toolbar button.active { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.markdown-prompt-editor .design-prompt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
  scrollbar-width: none;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.markdown-prompt-editor .design-prompt::-webkit-scrollbar { display: none; width: 0; height: 0; }
.markdown-prompt-editor .design-prompt:focus { box-shadow: none; }
.markdown-preview {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px;
  color: #e7e9eb;
  scrollbar-width: none;
  font: 13px/1.7 system-ui;
}
.markdown-preview::-webkit-scrollbar { display: none; width: 0; height: 0; }
.markdown-prompt-editor.previewing .design-prompt { display: none; }
.markdown-prompt-editor.previewing .markdown-preview { display: block; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { margin: 1.1em 0 .45em; color: #fff; line-height: 1.25; }
.markdown-preview h1:first-child, .markdown-preview h2:first-child { margin-top: 0; }
.markdown-preview p { margin: .5em 0; }
.markdown-preview ul, .markdown-preview ol { margin: .6em 0; padding-left: 24px; }
.markdown-preview code { padding: 2px 5px; border-radius: 4px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); font-family: ui-monospace, monospace; }
.markdown-preview pre { overflow: auto; padding: 13px; border: 1px solid #30343a; border-radius: 8px; background: #0c0d0f; }
.markdown-preview pre code { padding: 0; background: transparent; color: #e5e7e9; }
.markdown-preview blockquote { margin: .8em 0; padding: 3px 0 3px 13px; border-left: 3px solid var(--platform-primary-hover); color: #b8bcc1; }
.markdown-empty { color: #777c82; }
@media (max-width: 760px) {
  .design-panel[data-design-panel="prompt"].active { height: 100%; min-height: 0; }
  .markdown-toolbar { align-items: flex-start; flex-direction: column; }
}

/* Keep Test Your Agent scrollable without a visible scrollbar. */
.design-preview .preview-chat,
.design-preview .preview-rag-items,
.design-preview .preview-rag-table-wrap,
.design-preview .preview-rag-table td p {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.design-preview .preview-chat::-webkit-scrollbar,
.design-preview .preview-rag-items::-webkit-scrollbar,
.design-preview .preview-rag-table-wrap::-webkit-scrollbar,
.design-preview .preview-rag-table td p::-webkit-scrollbar { display: none; width: 0; height: 0; }

.design-preview .preview-message p,
.design-preview .preview-message.user p,
.design-preview .preview-message.assistant p {
  font-size: 14px;
  line-height: 1.58;
}
.design-preview .preview-message strong { font-size: 12px; }

/* Agent Design occupies one viewport; only panel content may scroll internally. */
.design-layout:not(.workspace-single-pane) .design-main {
  height: 100vh;
  overflow: hidden;
  padding-bottom: 14px;
}
.design-layout:not(.workspace-single-pane) .design-main > form {
  display: grid;
  grid-template-rows: 54px auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.design-layout:not(.workspace-single-pane) .design-header { min-height: 54px; }
.design-layout:not(.workspace-single-pane) .design-tabs { min-height: 43px; }
.design-layout:not(.workspace-single-pane) .design-content {
  align-items: stretch;
  min-height: 0;
  height: auto;
  overflow: hidden;
  margin-bottom: 0;
}
.design-layout:not(.workspace-single-pane) .design-form-column {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.design-layout:not(.workspace-single-pane) .design-panel.active:not([data-design-panel="prompt"]) {
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.design-layout:not(.workspace-single-pane) .design-preview {
  position: relative;
  top: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
}
.design-layout:not(.workspace-single-pane) .design-content:not(.architecture-preview-active) {
  grid-template-columns: minmax(0, 1fr);
}
.design-layout:not(.workspace-single-pane) .design-content:not(.architecture-preview-active) > .design-preview {
  display: none;
}
.design-layout:not(.workspace-single-pane) .design-content.architecture-preview-active > .design-preview {
  display: flex;
}

/* Conversation History inside Agent Design */
.conversation-history-panel.active { display: flex !important; flex-direction: column; overflow: hidden !important; }
.conversation-history-panel .design-panel-heading { flex: 0 0 auto; }
.conversation-history-layout {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2e3238;
  border-radius: 10px;
  background: #0d0f11;
}
.conversation-thread-list,
.conversation-message-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.conversation-thread-list::-webkit-scrollbar,
.conversation-message-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.conversation-thread-list { padding: 8px; border-right: 1px solid #2e3238; background: #111316; }
.conversation-thread-list > button {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #e9ebed;
  cursor: pointer;
  text-align: left;
}
.conversation-thread-list > button:hover { background: #1a1d21; }
.conversation-thread-list > button.active { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); box-shadow: inset 3px 0 var(--platform-primary-hover); }
.conversation-thread-list button > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-thread-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-thread-list small { flex: 0 0 auto; color: #777d84; font-size: 8px; }
.conversation-thread-list p { overflow: hidden; margin: 7px 0 0; color: #9da2a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-thread-list em { display: block; margin-top: 6px; color: #686e76; font: 8px ui-monospace, monospace; font-style: normal; }
.conversation-message-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.conversation-history-message { max-width: 82%; padding: 11px 13px; border: 1px solid #30343a; border-radius: 11px; background: #1a1d21; }
.conversation-history-message.user { align-self: flex-end; border-color: var(--platform-primary-border); background: var(--platform-primary-soft); }
.conversation-history-message header { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.conversation-history-message header strong { color: var(--platform-primary-hover); font-size: 10px; }
.conversation-history-message header span { color: #70767e; font-size: 8px; }
.conversation-history-message p { margin: 0; color: #eceef0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.conversation-history-loading,
.conversation-history-empty { display: grid; min-height: 120px; place-items: center; padding: 20px; color: #858b92; font-size: 11px; text-align: center; }
.conversation-history-empty.error { color: #ff8f9a; }
@media (max-width: 780px) {
  .conversation-history-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .conversation-thread-list { max-height: 220px; border-right: 0; border-bottom: 1px solid #2e3238; }
  .conversation-message-list { min-height: 320px; }
}
@media (max-width: 1180px) {
  .design-layout:not(.workspace-single-pane) .design-content {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .design-layout:not(.workspace-single-pane) .design-form-column { height: auto; overflow: visible; }
  .design-layout:not(.workspace-single-pane) .design-panel.active { min-height: calc(100vh - 125px); }
  .design-layout:not(.workspace-single-pane) .design-preview { height: calc(100vh - 125px); margin-top: 14px; }
}

/* Agent overview runtime summary */
.overview-runtime { margin-bottom: 16px; padding: 16px; border: 1px solid #292c30; border-radius: 8px; background: #111316; }
.overview-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.overview-kpis > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,1.5fr); align-items: center; gap: 9px; }
.overview-kpis span { color: #aeb3b9; font-size: 11px; }
.overview-kpis strong { grid-row: 2; color: #fff; font-size: 21px; }
.overview-kpis strong small { margin-left: 4px; color: #777d83; font-size: 10px; font-weight: 400; }
.overview-kpis i { grid-column: 2; grid-row: 1/3; display: grid; grid-template-columns: 3fr 1fr 2fr; gap: 2px; height: 5px; }
.overview-kpis i b { background: var(--platform-primary-hover); }
.overview-kpis i b:nth-child(2) { background: #55a7ff; }
.overview-kpis i b:nth-child(3) { background: #cc3bd5; }
.overview-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 16px 0 12px; }
.overview-presets > span { margin-right: 4px; color: #9fa4aa; font-size: 11px; text-decoration: underline dotted; text-underline-offset: 3px; }
.overview-presets button { padding: 6px 9px; border: 1px solid #373a3f; border-radius: 6px; cursor: pointer; background: #15171a; color: #e7e9eb; font-size: 11px; }
.overview-presets button.active { border-color: var(--platform-primary-hover); background: var(--platform-primary-hover); color: var(--platform-on-primary); }
.overview-pipeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.overview-pipeline article { min-width: 0; padding: 12px; border: 1px solid #2e3136; border-radius: 7px; background: #1a1c20; }
.overview-pipeline header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #92979d; font-size: 9px; }
.overview-pipeline header > span { width: 7px; height: 7px; border-radius: 50%; }
.overview-pipeline .orange-dot { background: var(--platform-primary); }
.overview-pipeline .blue-dot { background: #55a7ff; }
.overview-pipeline .pink-dot { background: #cc3bd5; }
.overview-pipeline header button { display: grid; place-items: center; width: 25px; height: 25px; margin-left: auto; border: 1px solid #393c41; border-radius: 5px; cursor: pointer; background: transparent; color: #aeb2b7; }
.overview-pipeline article > strong { display: block; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.overview-pipeline article > p { margin: 4px 0 12px; color: #92979d; font-size: 10px; }
.overview-pipeline dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0; }
.overview-pipeline dl div { min-width: 0; }
.overview-pipeline dt { margin-bottom: 4px; color: #92979d; font-size: 9px; text-decoration: underline dotted; text-underline-offset: 3px; }
.overview-pipeline dd { overflow: hidden; margin: 0; color: #f4f5f6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.overview-first-message { margin-bottom: 16px; padding: 14px; border: 1px solid #292c30; border-radius: 8px; background: #111316; }
.overview-first-message > div { display: flex; align-items: center; gap: 12px; }
.overview-first-message > div > strong { font-size: 12px; }
.overview-first-message > div > span { padding: 7px 10px; border: 1px solid #36393e; border-radius: 6px; background: #0b0c0e; color: #e9ebed; font-size: 11px; }
.overview-first-message button { display: flex; align-items: center; gap: 5px; margin-left: auto; border: 0; cursor: pointer; background: transparent; color: var(--platform-primary-hover); font-size: 10px; }
.overview-first-message > p { min-height: 54px; margin: 10px 0 0; padding: 11px; border: 1px solid #303338; border-radius: 6px; background: #08090a; color: #fff; font-size: 12px; }
.overview-first-message > textarea { display: block; width: 100%; min-height: 76px; margin-top: 10px; padding: 11px; resize: vertical; border: 1px solid #303338; border-radius: 6px; outline: 0; background: #08090a; color: #fff; font: inherit; font-size: 12px; line-height: 1.5; }
.overview-first-message > textarea:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.overview-token-usage { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.6fr); gap: 24px; margin-bottom: 16px; padding: 18px; border: 1px solid #292c30; border-radius: 8px; background: #111316; }
.overview-token-usage > div { display: grid; align-content: center; }
.overview-token-usage span,.overview-token-usage dt { color: #989da4; font-size: 10px; }
.overview-token-usage > div strong { margin: 5px 0 2px; color: #fff; font-size: 28px; font-variant-numeric: tabular-nums; }
.overview-token-usage > div small { color: #767c83; font-size: 9px; }
.overview-token-usage dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; }
.overview-token-usage dl div { display: grid; align-content: center; min-width: 0; padding: 11px; border: 1px solid #2d3035; border-radius: 7px; background: #191b1f; }
.overview-token-usage dd { overflow: hidden; margin: 6px 0 0; color: #f4f5f6; font-size: 14px; font-weight: 700; text-overflow: ellipsis; }
@media (max-width: 900px) { .overview-kpis { grid-template-columns: 1fr; } .overview-pipeline { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .overview-token-usage { grid-template-columns: 1fr; } .overview-token-usage dl { grid-template-columns: repeat(2,1fr); } }

/* Platform Admin branding variables */
.studio-layout,.design-layout,.am-auth,.am-auth-panel { background-color: var(--platform-background); color: var(--platform-text); }
.studio-sidebar,.design-panel,.admin-section,.provider-card,.admin-plan-card { color: var(--platform-text); }
.studio-primary,.preview-compose button,.am-button.primary { border-color: var(--platform-primary); background: var(--platform-primary); }
.design-tabs button.active,.studio-tabs button.active,.provider-tags span,.admin-role-badge { color: var(--platform-primary); }
.design-tabs button.active { border-bottom-color: var(--platform-primary); }
.studio-progress i,.status-dot.live { background: var(--platform-primary); }

/* Brighter sidebar navigation */
.design-sidebar .studio-nav button,
.design-sidebar .studio-sidebar-bottom button { color: #e5e8eb; }
.design-sidebar .studio-nav button svg,
.design-sidebar .studio-sidebar-bottom button svg { color: #cfd3d7; }
.design-sidebar .studio-nav small { color: #aeb3b9; }
.design-sidebar .studio-nav button:hover,
.design-sidebar .studio-sidebar-bottom button:hover { color: #fff; }
.design-sidebar .studio-nav button:hover svg,
.design-sidebar .studio-sidebar-bottom button:hover svg { color: #fff; }
.design-sidebar .studio-nav button.active,
.design-sidebar .studio-nav button.active svg { color: var(--platform-primary-hover); }

/* Model Provider embedded in the Agent workspace */
.embedded-provider-main { min-width: 0; padding: 0 26px 50px; background: #0d0e10; }
.embedded-provider-header { margin: 0 -26px; padding: 0 22px; }
.embedded-provider-header .provider-security { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.embedded-provider-tabs { margin: 0 -26px; padding: 0 16px; }
.embedded-provider-content { padding-top: 24px; }
.embedded-provider-content .provider-section-title h2 { color: #fff; font-size: 20px; }
.embedded-provider-content .provider-section-title p { color: #aeb3b9; font-size: 12px; }
.embedded-provider-content .provider-card { border-color: #2f3237; background: #15171a; box-shadow: none; }
.embedded-provider-content .provider-name h3 { color: #fff; }
.embedded-provider-content .provider-mark { border: 1px solid var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.embedded-provider-content .provider-tags span { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.embedded-provider-content .provider-key-state { border-color: #34373c; background: #1b1d21; }
.embedded-provider-content .provider-key-state b { color: #e1e4e7; }
.embedded-provider-content .provider-key-state i.ready { background: var(--platform-primary-hover); box-shadow: 0 0 0 2px var(--platform-focus-ring),inset 0 0 0 1px var(--platform-primary-strong); }
.embedded-provider-content .provider-key-state button { border-color: #404349; background: #22252a; color: #f1f2f3; }
.embedded-provider-content .provider-model-toggle,
.embedded-provider-content .provider-models,
.embedded-provider-content .provider-setup-form { border-color: #303338; background: #111316; color: #e7e9eb; }
.embedded-provider-content .provider-model-toggle { color: #e7e9eb; }
.embedded-provider-content .provider-models strong,
.embedded-provider-content .provider-setup-form label { color: #f3f4f5; }
.embedded-provider-content .provider-models span,
.embedded-provider-content .provider-setup-form label span { color: #aeb3b9; }
.embedded-provider-content .provider-setup-form input { border-color: #383b40; background: #090a0c; color: #fff; }
.embedded-provider-content .provider-setup-form input:focus { border-color: var(--platform-primary-hover); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.embedded-provider-content .provider-setup-form > div > button:first-child,
.embedded-provider-content .provider-voices > button { border-color: #3c3f44; background: #1b1d21; color: #eceef0; }
.embedded-provider-content .provider-setup-form > .provider-voices { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); }
.embedded-provider-content .provider-voices > strong { color: #fff; }
.embedded-provider-content .provider-voice-row { border-color: #3a3d42; background: #17191c; color: #fff; }
.embedded-provider-content .provider-form-message { color: var(--platform-primary-hover); }
@media (max-width: 760px) { .embedded-provider-main { padding: 0 14px 40px; } .embedded-provider-header,.embedded-provider-tabs { margin-right: -14px; margin-left: -14px; } }

/* Destructive Agent settings */
.agent-danger-zone { margin-top: 22px; padding: 16px; border: 1px solid #71323a; border-radius: 8px; background: #211316; }
.agent-danger-zone > div:first-child { display: flex; align-items: flex-start; gap: 10px; }
.agent-danger-zone > div:first-child > span { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: #3b1b20; color: #ff7f8d; }
.agent-danger-zone h3 { margin: 0; color: #fff; font-size: 14px; }
.agent-danger-zone p { margin: 4px 0 0; color: #c5aeb2; font-size: 11px; line-height: 1.5; }
.agent-danger-zone label { display: block; margin-top: 15px; color: #e7dfe1; font-size: 12px; }
.agent-danger-zone label strong { color: #fff; }
.agent-danger-zone input { box-sizing: border-box; width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #623139; border-radius: 7px; outline: none; background: #10090b; color: #fff; font-size: 13px; }
.agent-danger-zone input:focus { border-color: #ff7181; box-shadow: 0 0 0 3px #ff718122; }
.agent-danger-zone > button { margin-top: 12px; border-color: #8a3843; background: #4a1e25; color: #ffb1ba; }
.agent-danger-zone > button:disabled { cursor: not-allowed; opacity: .4; }
.agent-danger-zone > button:not(:disabled):hover { border-color: #c64d5c; background: #6a2630; }
.agent-danger-message { min-height: 16px; color: #ff9da8 !important; }

/* Embedded workspace tabs */
.embedded-workspace-page { min-width: 0; height: 100vh; padding: 0 18px 18px; overflow: hidden; background: #0d0e10; }
.embedded-page-header { height: 62px; min-height: 62px; margin: 0 -18px; padding: 0 18px; }
.embedded-page-header a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #3a3d42; border-radius: 6px; color: #e9ebed; font-size: 11px; text-decoration: none; }
.embedded-page-header a:hover { border-color: var(--platform-primary-border); background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.embedded-page-frame { height: calc(100vh - 80px); margin-top: 10px; overflow: hidden; border: 1px solid #303338; border-radius: 8px; background: #101215; }
.embedded-page-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #101215; }
.design-layout.workspace-single-pane { grid-template-columns: 218px minmax(0,1fr); }
.design-layout.workspace-single-pane .design-agent-rail { display: none; }
@media (max-width: 760px) { .embedded-workspace-page { padding: 0 8px 8px; } .embedded-page-header { margin: 0 -8px; padding: 0 10px; } .embedded-page-frame { height: calc(100vh - 72px); } }

/* Documentation rendered directly inside the workspace */
.embedded-documentation { height: 100vh; padding: 0 22px; overflow: hidden; background: #0d0e10; }
.embedded-documentation > .embedded-page-header { margin: 0 -22px; padding: 0 22px; }
.documentation-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 24px; height: calc(100vh - 62px); }
.documentation-toc { padding: 20px 0; overflow-y: auto; border-right: 1px solid #292c30; }
.documentation-toc a { display: block; margin-right: 16px; padding: 7px 9px; border-radius: 6px; color: #cfd3d7; font-size: 11px; text-decoration: none; }
.documentation-toc a:hover { background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.documentation-body { min-width: 0; padding: 22px 16px 70px 0; overflow-y: auto; color: #e7e9eb; font-size: 13px; line-height: 1.65; scroll-behavior: smooth; }
.documentation-body .hero { padding: 26px; border: 1px solid var(--platform-primary-border); border-radius: 12px; background: linear-gradient(135deg,#17191c,var(--platform-primary-soft)); }
.documentation-body h1 { margin: 8px 0 12px; color: #fff; font-size: 31px; line-height: 1.15; }
.documentation-body h2 { margin: 42px 0 12px; color: #fff; font-size: 22px; }
.documentation-body h3 { margin: 24px 0 8px; color: #fff; font-size: 16px; }
.documentation-body .lead,
.documentation-body .muted { color: #aeb3b9; }
.documentation-body .badges,
.documentation-body .grid { display: flex; flex-wrap: wrap; gap: 8px; }
.documentation-body .badge { padding: 5px 9px; border: 1px solid var(--platform-primary-border); border-radius: 999px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); font-size: 10px; }
.documentation-body .status,
.documentation-body .card { margin: 12px 0; padding: 16px; border: 1px solid #303338; border-radius: 9px; background: #15171a; }
.documentation-body .dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #777; }
.documentation-body .dot.ok { background: #4bc58a; }
.documentation-body .dot.warn { background: var(--platform-primary-hover); }
.documentation-body .step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin: 14px 0; }
.documentation-body .steps { counter-reset: doc-step; }
.documentation-body .step::before { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); font-weight: 800; counter-increment: doc-step; content: counter(doc-step); }
.documentation-body code { font: 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.documentation-body code.inline { padding: 2px 5px; border-radius: 4px; background: #292c30; }
.documentation-body pre { overflow: auto; padding: 15px; border: 1px solid #2f3237; border-radius: 8px; background: #08090a; color: #edf0f4; }
.documentation-body table { width: 100%; border-collapse: collapse; border: 1px solid #34373c; background: #15171a; }
.documentation-body th,
.documentation-body td { padding: 9px 10px; border-bottom: 1px solid #303338; text-align: left; vertical-align: top; }
.documentation-body th { background: #1f2226; color: #fff; }
.documentation-body label { display: block; margin: 10px 0 5px; color: #fff; font-size: 11px; font-weight: 700; }
.documentation-body input,
.documentation-body select { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid #3a3d42; border-radius: 7px; background: #0b0c0e; color: #fff; }
.documentation-body button { padding: 9px 12px; border: 1px solid var(--platform-primary-hover); border-radius: 7px; cursor: pointer; background: var(--platform-primary-hover); color: var(--platform-on-primary); font-weight: 700; }
.documentation-body .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.documentation-body .secret { display: none; margin-top: 12px; padding: 13px; border: 1px solid #4b7e61; border-radius: 8px; background: #13251b; word-break: break-all; }
.documentation-body .note { padding: 10px 13px; border-left: 3px solid var(--platform-primary-hover); border-radius: 0 7px 7px 0; background: var(--platform-primary-soft); }
.documentation-body .warning { background: var(--platform-primary-soft); }
.documentation-body .device { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #303338; }
@media (max-width: 900px) { .documentation-layout { grid-template-columns: 1fr; } .documentation-toc { display: none; } .documentation-body { padding-right: 0; } }

/* Components consume the runtime branding tokens set by agent-manager.js. */
.am-button.primary,
.studio-primary,
.documentation-body button {
  background: var(--platform-primary) !important;
  border-color: var(--platform-primary) !important;
  color: var(--platform-on-primary) !important;
}
.am-button.primary:hover,
.studio-primary:hover,
.documentation-body button:hover {
  background: var(--platform-primary-strong) !important;
  border-color: var(--platform-primary-strong) !important;
}
.am-link {
  color: var(--platform-primary) !important;
}
.am-field input:focus,
.am-field textarea:focus,
.am-field select:focus,
.create-agent-dialog input:focus,
.create-agent-dialog textarea:focus,
.studio-search:focus-within,
.provider-setup-form input:focus,
.design-identity-grid input:focus,
.design-service-fields input:focus,
.design-service-fields select:focus,
.design-prompt:focus,
.design-description textarea:focus,
.design-opener textarea:focus,
.design-vad-grid input:focus,
.preview-compose input:focus {
  border-color: var(--platform-primary) !important;
  box-shadow: 0 0 0 3px var(--platform-primary-soft) !important;
}
.studio-nav button.active {
  border-color: var(--platform-primary) !important;
  color: var(--platform-primary) !important;
  box-shadow: 0 1px 2px var(--platform-primary-soft) !important;
}
.design-agent-item.active {
  border-color: var(--platform-primary) !important;
  background: var(--platform-primary-soft) !important;
}
.design-tabs button.active,
.studio-tabs button.active {
  color: var(--platform-primary) !important;
  border-bottom: 0 !important;
}
.studio-tabs button.active::after,
.design-tabs button.active::after {
  background: var(--platform-primary) !important;
}
.studio-progress i {
  background: var(--platform-primary) !important;
}
.studio-new-card {
  border-color: var(--platform-primary-border) !important;
  color: var(--platform-primary) !important;
}
.studio-new-card > svg {
  background: var(--platform-primary-soft) !important;
  color: var(--platform-primary) !important;
}
.create-agent-icon {
  border-color: var(--platform-primary-muted) !important;
  background: var(--platform-primary-soft) !important;
  color: var(--platform-primary) !important;
}
.embedded-page-header a:hover,
.documentation-toc a:hover {
  border-color: var(--platform-primary) !important;
  background: var(--platform-primary-soft) !important;
  color: var(--platform-primary) !important;
}
.documentation-body .badge {
  border-color: var(--platform-primary-muted) !important;
  background: var(--platform-primary-soft) !important;
  color: var(--platform-primary) !important;
}
.documentation-body .step::before {
  background: var(--platform-primary-soft) !important;
  color: var(--platform-primary) !important;
}
.documentation-body .note {
  border-left-color: var(--platform-primary) !important;
  background: var(--platform-primary-soft) !important;
}
.am-agent-card:hover {
  border-color: var(--platform-primary) !important;
}
.design-complete i {
  background: var(--platform-primary) !important;
}
.design-counter b {
  color: var(--platform-primary) !important;
}
.markdown-toolbar button.active {
  background: var(--platform-primary) !important;
  color: var(--platform-on-primary) !important;
}
.preview-aura {
  background: radial-gradient(circle, var(--platform-primary-soft) 0%, transparent 70%) !important;
}

/* Dashboard styling */
.dashboard-loading {
  padding: 40px;
  text-align: center;
  color: #8991a3;
  font-size: 14px;
}
.dashboard-error {
  margin-top: 20px;
  padding: 16px;
  background: #331a20;
  border: 1px solid #67323a;
  border-radius: 9px;
  color: #ffb2ba;
}
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #14171c;
  border: 1px solid #22262e;
  border-radius: 12px;
}
.kpi-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--platform-primary-soft);
  color: var(--platform-primary);
}
.kpi-icon svg {
  width: 22px;
  height: 22px;
}
.kpi-info {
  display: flex;
  flex-direction: column;
}
.kpi-info h3 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8991a3;
}
.kpi-info strong {
  font-size: 24px;
  font-weight: 750;
  color: #fff;
  margin-top: 4px;
}
.kpi-info small {
  font-size: 10px;
  color: #687083;
  margin-top: 2px;
}
.dashboard-sections-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .dashboard-sections-grid {
    grid-template-columns: 1fr;
  }
}
.dashboard-section {
  padding: 20px;
  background: #12151c;
  border: 1px solid #22262e;
  border-radius: 12px;
}
.dashboard-section h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sec-header h2 {
  margin: 0;
}
.calls-table-wrapper {
  overflow-x: auto;
}
.calls-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.calls-table th, .calls-table td {
  padding: 12px;
  border-bottom: 1px solid #22262e;
}
.calls-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: #8991a3;
  font-weight: 650;
}
.calls-table td {
  font-size: 13px;
}
.calls-table tr:last-child td {
  border-bottom: 0;
}
.table-empty {
  text-align: center;
  padding: 40px !important;
  color: #8991a3;
}
.providers-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.provider-status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #171a22;
  border: 1px solid #22262e;
  border-radius: 8px;
}
.prov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.prov-dot.ok {
  background: #4bc58a;
  box-shadow: 0 0 8px #4bc58a;
}
.prov-dot.warn {
  background: var(--platform-primary-hover);
  box-shadow: 0 0 8px var(--platform-primary-hover);
}
.prov-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prov-details strong {
  font-size: 13px;
  color: #fff;
}
.prov-details small {
  font-size: 10px;
  color: #8991a3;
}

.workspace-tools-main { min-width: 0; overflow: auto; padding: 24px 28px 40px; background: var(--platform-background); color: var(--platform-text); }
.design-sidebar .studio-nav .workspace-tools-nav { display: flex!important; min-height: 38px; color: #f2f3f5; font-weight: 620; }
.design-sidebar .studio-nav .workspace-tools-nav > svg { flex: 0 0 auto; color: currentColor; }
.design-sidebar .studio-nav .workspace-tools-nav.active > svg { color: var(--platform-primary-hover); filter: drop-shadow(0 0 5px var(--platform-primary-border)); }
.workspace-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.workspace-tool-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid #30343a; border-radius: 12px; background: var(--platform-surface); }
.workspace-tool-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.workspace-tool-card > header > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.workspace-tool-card h2 { margin: 0; color: var(--platform-text); font-size: 15px; }
.workspace-tool-card header p { margin: 3px 0 0; color: #9298a2; font-size: 10px; }
.workspace-tool-card > p { min-height: 42px; margin: 15px 0 12px; color: #aeb3bc; font-size: 11px; line-height: 1.55; }
.workspace-tool-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: var(--platform-primary-soft); color: var(--platform-primary); }
.workspace-tool-switch { display: flex!important; align-items: center; gap: 6px; margin: 0!important; color: #b8bdc5!important; font-size: 10px!important; }
.workspace-tool-switch input { width: 15px!important; margin: 0!important; accent-color: var(--platform-primary); }
.workspace-tool-card > label { display: block; margin-top: 12px; color: #d6d9de; font-size: 10px; font-weight: 650; }
.workspace-tool-card > label small { float: right; color: #858b94; font-weight: 400; }
.workspace-tool-card > label input { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #353a41; border-radius: 8px; outline: 0; background: #0b0c0e; color: #f4f5f6; }
.workspace-tool-card > label input:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-focus-ring); }
.workspace-tool-card > button { align-self: flex-start; margin-top: 15px; }
.workspace-tool-status { min-height: 16px; margin-top: 8px; color: var(--platform-primary-hover); font-size: 10px; }
.workspace-tool-ready { margin-top: 14px; padding: 11px 12px; border: 1px solid #27513d; border-radius: 8px; background: #14261d; color: #73dba2; font-size: 10px; font-weight: 650; }
.workspace-tool-card.auto-enabled .workspace-tool-switch { cursor: default; }
.workspace-tool-card.auto-enabled .workspace-tool-switch input { cursor: default; }
.web-agent-tool.unavailable { opacity: .5; cursor: not-allowed!important; }
.web-agent-tool.unavailable input { cursor: not-allowed; }
.web-agent-tool { position: relative; }
.web-agent-tool .agent-tool-remove { align-self: center; margin-left: auto; padding: 6px 9px; border: 1px solid #49343a; border-radius: 7px; cursor: pointer; background: #21171a; color: #ff8994; font: 650 9px system-ui; }
.web-agent-tool .agent-tool-remove:hover { border-color: #7d4650; background: #2b1b1f; }
.agent-tool-picker[hidden] { display: none; }
.agent-tool-picker { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: #050608b8; backdrop-filter: blur(7px); }
.agent-tool-picker-dialog { display: flex; flex-direction: column; box-sizing: border-box; width: min(620px,100%); max-height: min(680px,calc(100vh - 40px)); overflow: hidden; border: 1px solid #373b42; border-radius: 14px; background: #141619; box-shadow: 0 24px 80px #000b; }
.agent-tool-picker-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #2d3035; }
.agent-tool-picker-dialog h3 { margin: 0; color: #f5f6f7; font-size: 16px; }
.agent-tool-picker-dialog header p { margin: 5px 0 0; color: #92979e; font-size: 11px; }
.agent-tool-picker-dialog header button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #34383e; border-radius: 8px; cursor: pointer; background: #1d2024; color: #c5c9ce; font-size: 19px; }
.agent-tool-picker-list { display: grid; gap: 9px; min-height: 150px; padding: 15px 20px; overflow-y: auto; }
.agent-tool-picker-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #30343a; border-radius: 10px; background: #191b1f; }
.agent-tool-picker-list article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--platform-primary-soft); color: var(--platform-primary-hover); }
.agent-tool-picker-list strong { color: #f0f2f4; font-size: 12px; }
.agent-tool-picker-list p { margin: 4px 0; color: #a5abb2; font-size: 10px; line-height: 1.45; }
.agent-tool-picker-list small { color: #777e87; font-size: 9px; }
.agent-tool-picker-empty { display: grid; place-items: center; min-height: 150px; color: #d5d8dc; text-align: center; }
.agent-tool-picker-empty p { max-width: 360px; margin: 7px 0 0; color: #8d939b; font-size: 10px; }
.agent-tool-picker-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; border-top: 1px solid #2d3035; }
.agent-tool-picker-dialog > footer span { color: #858b93; font-size: 9px; }
@media(max-width:1000px){.workspace-tool-grid{grid-template-columns:1fr}}
.prov-badge {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #22262e;
  color: #fff;
}

/* Runtime platform branding overrides */
#account-shell,.studio-layout,.design-layout,.am-auth,.am-auth-panel { background-color: var(--platform-background); color: var(--platform-text); }
.studio-sidebar,.design-panel,.admin-section,.provider-card,.admin-plan-card,.overview-runtime,.overview-token-usage,.overview-first-message { background-color: var(--platform-surface); }
.studio-primary,.preview-compose button,.am-button.primary { border-color: var(--platform-primary); background: var(--platform-primary); }
.design-tabs button.active,.studio-tabs button.active,.admin-role-badge { color: var(--platform-primary); }
.design-tabs button.active { border-bottom-color: var(--platform-primary); }
.studio-progress i { background: var(--platform-primary); }