/* Studio */
body.is-demo { overflow: hidden; background: #e8e6df; }
.studio-app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); background: #eceae4; }
.studio-sidebar { height: 100vh; position: sticky; top: 0; background: #1c1d19; color: rgba(255,255,255,.72); padding: 22px 14px; display: flex; flex-direction: column; z-index: 30; }
.studio-brand { padding: 0 10px 28px; color: white; }
.studio-brand .brand-word { font-size: 22px; }
.studio-nav { display: grid; gap: 5px; }
.studio-nav-item { min-height: 43px; width: 100%; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; font-weight: 620; font-size: 13px; }
.studio-nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.studio-nav-item.active { background: var(--lime); color: var(--ink); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 18px; }
.assistant-toggle { position: relative; }
.assistant-status { margin-left: auto; width: 7px; height: 7px; background: #67d18f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(103,209,143,.12); }
.local-badge { display: flex; gap: 9px; align-items: center; padding: 12px 9px; border-top: 1px solid rgba(255,255,255,.1); }
.local-dot { width: 8px; height: 8px; border-radius: 50%; background: #67d18f; }
.local-badge div { display: grid; gap: 2px; }
.local-badge strong { font-size: 10px; color: white; }
.local-badge small { font-size: 9px; color: rgba(255,255,255,.43); }
.studio-workspace { min-width: 0; height: 100vh; overflow: hidden; }
.studio-topbar { height: var(--topbar); padding: 0 24px; background: rgba(255,254,250,.9); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(14px); }
.demo-banner { display: flex; align-items: center; gap: 10px; }
.demo-banner > span { padding: 6px 8px; border-radius: 7px; background: var(--violet-soft); color: var(--violet); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.demo-banner p { margin: 0; font-size: 11px; color: #777970; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.model-chip { height: 38px; padding: 0 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--border); display: grid; grid-template-columns: 8px auto; column-gap: 8px; text-align: left; cursor: pointer; }
.model-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #67d18f; grid-row: 1 / span 2; align-self: center; }
.model-chip strong { font-size: 10px; align-self: end; }
.model-chip small { font-size: 8px; color: #85877e; align-self: start; }
.icon-button, .avatar-button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--white); display: grid; place-items: center; cursor: pointer; }
.avatar-button { border-radius: 50%; background: var(--ink); color: white; font-size: 11px; font-weight: 800; }
.studio-content { height: calc(100vh - var(--topbar)); overflow: auto; padding: 34px 36px 60px; }
.page-header { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 32px; }
.page-header h1 { margin: 6px 0 8px; font-family: Georgia, serif; font-size: 40px; line-height: 1.06; letter-spacing: -.035em; }
.page-header p { margin: 0; color: #6d6f67; max-width: 680px; font-size: 14px; line-height: 1.5; }
.page-eyebrow { color: var(--violet); }
.page-actions { display: flex; gap: 10px; }
.start-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.start-choice { min-height: 240px; padding: 25px; border-radius: var(--radius); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.start-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.start-choice-manual { background: var(--white); }
.start-choice-assistant { background: #262720; color: white; }
.start-choice-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--lime); color: var(--ink); margin-bottom: 24px; }
.start-choice > div > span { font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.start-choice-assistant > div > span { color: var(--lime); }
.start-choice h2 { font-family: Georgia, serif; font-size: 26px; margin: 6px 0 8px; letter-spacing: -.025em; }
.start-choice p { font-size: 12px; line-height: 1.5; color: #73756c; margin: 0; max-width: 460px; }
.start-choice-assistant p { color: rgba(255,255,255,.56); }
.start-choice > strong { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.home-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-bottom: 18px; }
.home-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-heading { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.panel-heading > div { display: grid; gap: 4px; }
.panel-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.panel-heading > a, .panel-heading > span { font-size: 10px; color: #777970; font-weight: 700; }
.panel-kicker { color: #92948b; }
.process-row { min-height: 76px; padding: 12px 18px; display: grid; grid-template-columns: 38px 1fr auto 20px; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.process-row:last-child { border-bottom: 0; }
.process-row:hover { background: #faf8f2; }
.process-row-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--paper); color: var(--violet); }
.process-row > div { display: grid; gap: 4px; min-width: 0; }
.process-row strong { font-size: 12px; }
.process-row small { font-size: 10px; color: #83857c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-row-meta { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #8a8c83; }
.process-status { width: 6px; height: 6px; border-radius: 50%; background: #67d18f; }
.process-status-draft { background: #bbbdb4; }
.attention-panel { background: #fbfaef; }
.attention-card { margin: 14px; padding: 16px; display: grid; gap: 10px; border-radius: 12px; background: var(--white); border: 1px solid rgba(163,107,0,.22); }
.attention-card > div { display: flex; align-items: center; justify-content: space-between; }
.attention-card > div > span:last-child { font-size: 9px; color: #888a81; }
.attention-card > strong { font-family: Georgia, serif; font-size: 18px; }
.attention-card p { margin: 0; font-size: 11px; color: #6f7168; }
.attention-action { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; color: var(--amber); font-size: 10px; font-weight: 800; }
.activity-panel { margin-bottom: 20px; }
.activity-table, .runs-table { min-width: 760px; }
.activity-row, .runs-row { min-height: 62px; padding: 0 20px; display: grid; align-items: center; gap: 15px; border-bottom: 1px solid var(--border); font-size: 10px; }
.activity-row { grid-template-columns: 1.4fr .8fr .7fr .5fr 20px; }
.runs-row { grid-template-columns: 1.1fr .75fr .7fr .5fr 1fr 20px; }
.activity-row:not(.activity-head):hover, .runs-row:not(.runs-head):hover { background: #faf8f2; }
.activity-row > span:first-child, .runs-row > span:first-child { display: grid; gap: 3px; }
.activity-row strong, .runs-row strong { font-size: 11px; }
.activity-row small, .runs-row small { color: #888a81; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-head, .runs-head { min-height: 38px; background: #f6f4ee; color: #8b8d84; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.table-scroll { overflow-x: auto; }
.status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: #f0efe8; color: #66685f; font-size: 8px; font-weight: 800; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-succeeded, .status-active { background: #e4f5e9; color: var(--green); }
.status-needs-attention { background: #fff0c8; color: var(--amber); }
.status-failed { background: #fde8e6; color: var(--red); }
.status-running { background: var(--violet-soft); color: var(--violet); }
.status-cancelled, .status-draft { background: #ecece8; color: #777970; }
.empty-state { padding: 34px; text-align: center; display: grid; place-items: center; }
.empty-symbol { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--violet-soft); color: var(--violet); }
.empty-state h3 { font-family: Georgia, serif; margin: 14px 0 5px; }
.empty-state p { margin: 0; font-size: 11px; color: #777970; }