.app-shell { min-height: 100vh; padding-left: 240px; transition: padding-left var(--transition); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 240px; flex-direction: column; border-right: 1px solid var(--color-border); background: #101215; transition: width var(--transition); }
[data-theme="light"] .sidebar { background: #f8f9fa; }
.sidebar__head { display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid var(--color-border); }
.brand { display: flex; align-items: center; gap: 10px; overflow: hidden; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.brand__mark { position: relative; display: grid; width: 24px; height: 24px; flex: 0 0 24px; grid-template-columns: repeat(3, 5px); place-content: center; gap: 2px; border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: 7px; background: var(--color-accent-soft); }
.brand__mark i { display: block; width: 5px; border-radius: 2px; background: var(--color-accent); }
.brand__mark i:nth-child(1) { height: 7px; }
.brand__mark i:nth-child(2) { height: 12px; }
.brand__mark i:nth-child(3) { height: 9px; }
.brand__text span { color: var(--color-accent); }
.sidebar__collapse .icon { font-size: 23px; line-height: 1; }
.nav { flex: 1; overflow-y: auto; padding: 18px 10px; }
.nav__label { margin: 0 10px 8px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.nav__item { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 11px; margin: 2px 0; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; text-align: left; white-space: nowrap; }
.nav__item:hover { background: var(--color-subtle); color: var(--color-text); }
.nav__item.is-active { background: var(--color-accent-soft); color: var(--color-accent); }
.nav__icon { display: grid; width: 18px; flex: 0 0 18px; place-items: center; font-family: var(--font-mono); font-size: 16px; }
.nav__count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); font-family: var(--font-mono); font-size: 10px; text-align: center; }
.nav__count--quiet { background: var(--color-subtle); color: var(--color-text-muted); }
.nav__chevron { margin-left: auto; transition: transform var(--transition); }
.nav__item[aria-expanded="false"] .nav__chevron { transform: rotate(-90deg); }
.nav__sub { display: grid; gap: 2px; overflow: hidden; padding: 2px 0 8px 40px; }
.nav__sub[hidden] { display: none; }
.nav__sub a { display: flex; align-items: center; gap: 9px; min-height: 30px; color: var(--color-text-muted); font-size: 12px; }
.nav__sub a:hover { color: var(--color-text); }
.sidebar__foot { padding: 10px; border-top: 1px solid var(--color-border); }
.trust-card { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); white-space: nowrap; overflow: hidden; }
.trust-card div, .profile > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.trust-card strong, .profile strong { font-size: 11px; font-weight: 600; }
.trust-card small, .profile small { color: var(--color-text-muted); font-size: 10px; }
.profile { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
.profile:hover { background: var(--color-subtle); }
.avatar { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-elevated); font-size: 10px; }
.profile__more { margin-left: auto; color: var(--color-text-muted); }

.app-shell.is-collapsed { padding-left: 68px; }
.is-collapsed .sidebar { width: 68px; }
.is-collapsed .sidebar__head { padding: 0; justify-content: center; }
.is-collapsed .brand__text, .is-collapsed .sidebar__collapse, .is-collapsed .nav__label, .is-collapsed .nav__item > span:not(.nav__icon), .is-collapsed .nav__sub, .is-collapsed .trust-card, .is-collapsed .profile > span:not(.avatar) { display: none; }
.is-collapsed .nav__item { justify-content: center; padding-inline: 0; }
.is-collapsed .profile { justify-content: center; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 92%, transparent); backdrop-filter: blur(14px); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.breadcrumbs span, .breadcrumbs b { color: var(--color-text-muted); font-weight: 400; }
.breadcrumbs strong { font-weight: 500; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.execution-state { display: flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--color-text-muted); font-size: 11px; }
.command-trigger { display: flex; min-width: 210px; height: 36px; align-items: center; gap: 8px; padding: 0 8px 0 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); font-size: 12px; text-align: left; }
.command-trigger:hover { border-color: var(--color-border-strong); background: var(--color-elevated); }
.command-trigger kbd { margin-left: auto; padding: 2px 6px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-base); font-size: 9px; }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-danger); }

.main { width: min(100%, 1260px); margin: 0 auto; padding: 42px 32px 72px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 7px; }
.page-heading > div > p:last-child { margin: 0; color: var(--color-text-secondary); font-size: 14px; }
.brief-card { position: relative; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.brief-card__accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-accent); }
.brief-card__head { display: flex; align-items: start; justify-content: space-between; padding: 22px 24px 14px 26px; }
.brief-card__head h2 { margin-bottom: 0; font-size: 21px; }
.agent-spark { margin-right: 3px; }
.verified { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; }
.verified span { color: var(--color-success); }
.brief-card__body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; padding: 8px 24px 22px 26px; }
.brief-lead { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.65; }
.brief-points { display: grid; gap: 11px; }
.brief-points > div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.point-index { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; }
.brief-points p { display: flex; flex-direction: column; margin: 0; }
.brief-points strong { font-size: 13px; font-weight: 600; }
.brief-points small { color: var(--color-text-muted); font-size: 11px; }
.brief-points .is-warning .point-index { border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); color: var(--color-warning); }
.brief-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 12px 26px; border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 35%, transparent); }
.brief-card__foot > span { color: var(--color-text-muted); font-size: 10px; }
.brief-card__foot code { font-size: 9px; }

.metrics-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.metric-card { min-height: 152px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.metric-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-family: var(--font-mono); }
.trend, .quiet-label { font-family: var(--font-mono); font-size: 10px; }
.trend--up { color: var(--color-success); }
.quiet-label { color: var(--color-text-muted); }
.metric-card > p { margin-bottom: 7px; color: var(--color-text-muted); font-size: 11px; }
.metric-value { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.metric-value strong { font-size: 22px; letter-spacing: -.02em; }
.metric-value span { color: var(--color-text-muted); font-size: 10px; }
.progress { height: 3px; overflow: hidden; border-radius: 999px; background: var(--color-border); }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.task-stats { display: flex; gap: 28px; padding-top: 2px; }
.task-stats span { display: flex; flex-direction: column; }
.task-stats strong { font-size: 20px; line-height: 1.2; }
.task-stats small { color: var(--color-text-muted); font-size: 10px; }
.danger-text strong { color: var(--color-danger); }
.agent-mini-list { display: flex; align-items: center; }
.mini-avatar { display: grid; width: 24px; height: 24px; margin-right: -5px; place-items: center; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-elevated); font-size: 9px; }
.agent-mini-list small { margin-left: 12px; color: var(--color-text-muted); font-size: 9px; }

.content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-bottom: 36px; }
.count-badge { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); font-family: var(--font-mono); font-size: 10px; }
.attention-list { padding: 4px 8px 8px; }
.attention-item { display: grid; grid-template-columns: 32px 1fr auto 18px; gap: 10px; align-items: center; min-height: 67px; padding: 10px 11px; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: var(--color-subtle); }
.attention-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; }
.attention-icon--danger { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.attention-icon--warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
.attention-icon--info { background: color-mix(in srgb, var(--color-info) 10%, transparent); color: var(--color-info); }
.attention-item > span:nth-child(2) { display: flex; flex-direction: column; }
.attention-item strong { font-size: 12px; }
.attention-item small, .attention-item time { color: var(--color-text-muted); font-size: 10px; }
.attention-item time { font-family: var(--font-mono); }
.arrow { color: var(--color-text-muted); }
.timeline { display: grid; gap: 0; margin: 0; padding: 10px 18px 4px; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 9px; min-height: 65px; }
.timeline li:not(:last-child)::before { position: absolute; top: 30px; bottom: 0; left: 14px; width: 1px; background: var(--color-border); content: ""; }
.timeline__icon { z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-secondary); font-size: 11px; }
.timeline p { margin: 3px 0 2px; color: var(--color-text-secondary); font-size: 11px; }
.timeline strong { color: var(--color-text); font-weight: 600; }
.timeline small { color: var(--color-text-muted); font-size: 9px; }
.timeline code { font-size: 9px; }
.activity-more { margin: 4px 18px 17px 57px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agent-card { padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color var(--transition), transform var(--transition); }
.agent-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.agent-card__head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 15px; }
.agent-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--color-border); border-radius: 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.agent-avatar--teal { background: rgba(33, 199, 199, .1); color: var(--color-accent); }
.agent-avatar--blue { background: rgba(88, 166, 255, .1); color: var(--color-info); }
.agent-avatar--violet { background: rgba(163, 113, 247, .1); color: #a371f7; }
.agent-card h3 { margin-bottom: 5px; }
.agent-card > p { min-height: 42px; margin-bottom: 13px; color: var(--color-text-muted); font-size: 11px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 17px; }
.tag-row span { padding: 3px 7px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 8px; }

.mobile-nav { display: none; }
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 7, .62); backdrop-filter: blur(2px); }
.command-palette { width: min(590px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px)); padding: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-elevated); color: var(--color-text); box-shadow: var(--shadow-overlay); }
.command-palette::backdrop { background: rgba(3, 5, 7, .62); backdrop-filter: blur(3px); }
.command-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--color-border); }
.command-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--color-text); font-size: 14px; }
.command-search input::placeholder { color: var(--color-text-muted); }
.command-search kbd, .command-foot kbd { padding: 2px 5px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-base); color: var(--color-text-muted); font-size: 9px; }
.command-body { max-height: 440px; overflow-y: auto; padding: 8px; }
.command-body > p { margin: 8px 8px 5px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.command-body button { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; }
.command-body button:hover, .command-body button:focus { background: var(--color-subtle); outline: none; }
.command-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.command-body button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.command-body strong { font-size: 12px; }
.command-body small { color: var(--color-text-muted); font-size: 10px; }
.command-body button > kbd { color: var(--color-text-muted); font-size: 10px; }
.command-foot { display: flex; gap: 18px; padding: 9px 15px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 9px; }

.agent-sheet { position: fixed; top: 0; right: 0; z-index: 50; display: flex; width: min(480px, 100vw); height: 100vh; flex-direction: column; border-left: 1px solid var(--color-border); background: var(--color-base); box-shadow: var(--shadow-overlay); transform: translateX(102%); transition: transform 200ms ease-out; }
.agent-sheet.is-open { transform: translateX(0); }
.agent-sheet__head { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.agent-sheet__head > div { display: flex; align-items: center; gap: 10px; }
.agent-sheet__head h2 { margin: 0; font-size: 14px; }
.agent-sheet__head p { margin: 1px 0 0; color: var(--color-text-muted); font-size: 10px; }
.agent-sheet__head p .status-dot { margin-right: 3px; }
.agent-sheet__body { flex: 1; overflow-y: auto; padding: 20px 16px; }
.conversation { display: grid; gap: 14px; }
.message { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.message p { margin: 0; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 4px 10px 10px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; }
.agent-output { margin: 14px 0; white-space: pre-wrap; color: var(--color-text-secondary); font-size: 12px; }
.agent-output:not(:empty) { padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.upload-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.upload-row label { font-size: 11px; cursor: pointer; }
.upload-row span { color: var(--color-text-muted); font-size: 9px; }
.composer { padding: 12px 16px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.composer textarea { width: 100%; resize: none; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; background: var(--color-base); color: var(--color-text); font-size: 12px; }
.composer textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.composer > div { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.composer > div > span { color: var(--color-text-muted); font-size: 9px; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; gap: 8px; }
.toast { min-width: 260px; padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-elevated); box-shadow: var(--shadow-overlay); color: var(--color-text-secondary); font-size: 11px; animation: toast-in 180ms ease-out; }
.toast strong { color: var(--color-text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 1050px) {
  .app-shell { padding-left: 68px; }
  .sidebar { width: 68px; }
  .sidebar__head { padding: 0; justify-content: center; }
  .brand__text, .sidebar__collapse, .nav__label, .nav__item > span:not(.nav__icon), .nav__sub, .trust-card, .profile > span:not(.avatar) { display: none; }
  .nav__item { justify-content: center; padding-inline: 0; }
  .profile { justify-content: center; }
  .brief-card__body { grid-template-columns: 1fr; gap: 18px; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { padding-bottom: 62px; }
  .app-shell { padding-left: 0; }
  .sidebar { display: none; }
  .topbar { height: 56px; padding: 0 16px; }
  .breadcrumbs span, .breadcrumbs b, .execution-state, .command-trigger span:nth-child(2) { display: none; }
  .command-trigger { min-width: 74px; }
  .main { padding: 26px 16px 48px; }
  .page-heading { align-items: start; }
  .page-heading .button { width: 38px; min-height: 38px; padding: 0; overflow: hidden; font-size: 0; }
  .page-heading .button span { font-size: 14px; }
  .brief-card__head { padding: 19px 18px 12px 21px; }
  .verified { display: none; }
  .brief-card__body { padding: 6px 18px 18px 21px; }
  .brief-card__foot { padding: 11px 18px 11px 21px; }
  .brief-card__foot > span { display: none; }
  .metrics-grid, .agent-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: auto; }
  .attention-item { grid-template-columns: 32px 1fr 16px; }
  .attention-item time { display: none; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; height: 62px; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 95%, transparent); backdrop-filter: blur(14px); }
  .mobile-nav a, .mobile-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border: 0; background: transparent; color: var(--color-text-muted); font-size: 9px; }
  .mobile-nav span { font-size: 15px; }
  .mobile-nav .is-active { color: var(--color-accent); }
}